diff --git a/README.md b/README.md
index ea3ff94..955280f 100644
--- a/README.md
+++ b/README.md
@@ -37,3 +37,14 @@ We follow a branching strategy where all contributions are made to the `developm
    git add .
    git commit -m "Your detailed commit message"
    git push origin development
+
+## Design in Figma
+
+Explore the design of the GDSC UPES website on Figma:
+[Figma - GDSC UPES Website Design](https://www.figma.com/file/9fJtrEvFUEkbuVijMA9d31/GDSC-UPES-(Copy)?type=design&node-id=8-198&mode=design)
+
+## Join our Discord Server
+
+For discussions and communication, join our Discord server:
+[GDSC UPES Discord Server](https://discord.gg/JEgKRvavWk)
+
diff --git a/client/src/App.jsx b/client/src/App.jsx
index 7d37be7..db576de 100644
--- a/client/src/App.jsx
+++ b/client/src/App.jsx
@@ -1,11 +1,11 @@
 import React from "react";
 import { BrowserRouter , Route, Routes } from "react-router-dom";
 
-import Home from "./pages/Home"
-import Events from "./pages/Events"
-import Team from "./pages/Team"
-import Contact from "./pages/Contact"
-import Layout from "./Layout/Layout";
+// Import your pages or components for each route
+import Home from "./pages/Home";
+import Events from "./components/Events/Event.jsx";
+import Team from "./pages/Team";
+import Contact from "./pages/Contact";
 
 function App() {
       return (
diff --git a/client/src/components/Events/Event.css b/client/src/components/Events/Event.css
new file mode 100644
index 0000000..3b9fdf2
--- /dev/null
+++ b/client/src/components/Events/Event.css
@@ -0,0 +1,143 @@
+#egg{
+  background-color: #E1FFDC;
+}
+
+.event_container {
+    border: 2px solid white;
+    background-color: white;
+    overflow: hidden;
+    border-radius: 15px;
+    height: 497px;
+    width: 357px;
+    margin: 15px;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.3);
+  }
+
+  .eventDetail_container {
+    display: flex;
+    flex-direction: column;
+  }
+
+.eventDetail_container img{
+  width: 177px;
+  height:183px;
+  margin: 0 auto;
+}
+
+.cards{
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+    margin-bottom: 5%;
+  }
+
+  .partner-cards{
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    align-items: center;
+    flex-wrap: wrap;
+    margin-bottom: 15%;
+  }
+
+
+  .container{
+    display: flex;
+    flex-direction: column;
+  }
+
+  .container-sponsor{
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    background-color: #FFE5E5;
+  }
+  
+  .event_details {
+    display: flex;
+    flex-direction: column;
+    text-align: center;
+    justify-content: center;
+  }
+
+
+  .link{
+    margin:2% 15%;
+  }
+
+  .event_date{
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  .event_date h6{
+    background: #BFEBB8;
+    padding: 2%;
+    border-radius: 20px;
+    margin-left: auto;
+    margin-bottom: 7%;
+  }
+
+  .heading-events{
+    display: flex;
+    justify-content: flex-start;
+    flex-direction: column;
+    margin-left: 10%;
+    margin-bottom: 5%;
+  }
+
+  .heading-events h2{
+    color: #24A518;
+    font-size: 58px;
+
+  }
+
+  .view-btn{
+    font-size:22px;
+    color: white;
+    background-color: #4285F4;
+    border-radius: 10px;
+    padding: 1% 5%;
+    border: none;
+    width:fit-content;
+    margin: auto;
+    margin-bottom: 5%;
+  }
+
+  .heading-events p{
+    font-size:28px;
+  }
+  
+  .event_details > h6 {
+    color: red;
+  }
+  
+  .event_details .link {
+    text-decoration: none;
+  }
+  
+  .event_details h3 {
+    font-weight: bold;
+    color: rgb(68, 67, 67);
+  }
+  
+  .event_details h3:hover {
+    color: #000;
+  }
+  
+  .event_details .btn_style {
+    outline: none !important;
+    position: absolute;
+    right: 30px;
+    transition: 0.3s all ease;
+  }
+  
+  ._message h6{
+    color: grey;
+  }
\ No newline at end of file
diff --git a/client/src/components/Events/Event.jsx b/client/src/components/Events/Event.jsx
new file mode 100644
index 0000000..99db7b1
--- /dev/null
+++ b/client/src/components/Events/Event.jsx
@@ -0,0 +1,55 @@
+import React from "react";
+import Events_Card from "./components/Events_Card";
+import EventsData from "./data/EventsData";
+
+
+export default function Event() {
+  const data = (val, i) => {
+    console.log(val.template && "correct");
+    return (
+      <>
+      {val.template && val.events_on && val.event_name ? <Events_Card
+        template={val.template}
+        events_on={val.events_on}
+        event_name={val.event_name}
+        event_para={val.event_para}
+      /> : <div className = "_message"><h6>No Events Available Right Now</h6></div>
+  }
+      </>
+    );
+  };
+  return (
+      <div id="egg">
+        <div className="container">
+          <div className="heading-events">
+            <h2 class>Past Events...</h2>
+            <p>Archive extraordinare of our past events</p>
+          </div>
+
+          <div className="container">
+            <div className="cards">
+              {EventsData.map(data)}
+            </div>
+
+            <button className="view-btn">View all</button>
+          </div>
+
+          <div class="container-sponsor">
+            <div class="heading-events">
+              <h2 class>Our Partners</h2>
+              <p>Archive extraordinare of our past events</p>
+            </div>
+
+            <div class="container-sponsor">
+              <div className="partner-cards">
+                <img src="https://github.com/GDSC-UPES/GDSC-UPES-Website/blob/main/assets/illustrations/events-partner-1.png?raw=true" alt="" />
+                <img src="https://github.com/GDSC-UPES/GDSC-UPES-Website/blob/main/assets/illustrations/events-partner-2.png?raw=true" alt="" />
+                <img src="https://github.com/GDSC-UPES/GDSC-UPES-Website/blob/main/assets/illustrations/events-partner-3.png?raw=true" alt="" />
+              </div>
+            
+            </div>
+          </div>
+        </div>
+      </div>
+  );
+}
\ No newline at end of file
diff --git a/client/src/components/Events/components/Button.css b/client/src/components/Events/components/Button.css
new file mode 100644
index 0000000..5d59bcd
--- /dev/null
+++ b/client/src/components/Events/components/Button.css
@@ -0,0 +1,4 @@
+.btn_customStyle {
+    border: none !important;
+    font-weight: bold !important;
+  }
\ No newline at end of file
diff --git a/client/src/components/Events/components/Button.jsx b/client/src/components/Events/components/Button.jsx
new file mode 100644
index 0000000..f92ab2d
--- /dev/null
+++ b/client/src/components/Events/components/Button.jsx
@@ -0,0 +1,28 @@
+import React from "react";
+import "./Button.css";
+
+export default function Button(props) {
+  const style = {
+    backgoundColor: `${props.backgoundColor}`,
+    height: `${props.buttonSize}`,
+    width: `${props.buttonWidth}`,
+    borderRadius: `${props.borderRadius}`,
+    borderTopLeftRadius: `${props.TopLeft_Radius}`,
+    borderBottomLeftRadius: `${props.BottomLeft_Radius}`,
+    borderTopRightRadius: `${props.TopRight_Radius}`,
+    borderBottomRightRadius: `${props.BottomRight_Radius}`,
+  };
+
+  // const handleOnClick = () => {};
+  return (
+    <div>
+      <button
+        className={`col-lg-${props.column} btn btn-primary ${props.btn_customStyle}`}
+        style={style}
+        onClick={props.handleOnClick}
+      >
+        {props.text}
+      </button>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/client/src/components/Events/components/Events_Card.jsx b/client/src/components/Events/components/Events_Card.jsx
new file mode 100644
index 0000000..3202129
--- /dev/null
+++ b/client/src/components/Events/components/Events_Card.jsx
@@ -0,0 +1,34 @@
+import React, { useState } from "react";
+import Button from "../components/Button";
+import { Link } from "react-router-dom";
+import "../Event.css"
+
+export default function Events_Card(props) {
+  const [completed, setcompleted] = useState(false);
+  const OnClickButton = () => {
+    setcompleted(!completed);
+  };
+
+  return (
+    <>
+      <div className="event_container">
+        <div className="eventDetail_container">
+          <div className="event_date">
+            <h6>Events On : {props.events_on}</h6>
+          </div>
+          <img src={props.template} alt={props.event_name} />
+          <div className="event_details">
+            <Link className="link" to={props.eventLink}>
+              <h3>{props.event_name}</h3>
+            </Link>
+
+            <Link className="link" to={props.eventLink}>
+              <p>{props.event_para}</p>
+            </Link>
+
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
\ No newline at end of file
diff --git a/client/src/components/Events/data/EventsData.jsx b/client/src/components/Events/data/EventsData.jsx
new file mode 100644
index 0000000..f79d37b
--- /dev/null
+++ b/client/src/components/Events/data/EventsData.jsx
@@ -0,0 +1,33 @@
+const event1 = "https://github.com/AshiqNoor-S/GDSC-UPES-Website/blob/main/assets/illustrations/events-past.png?raw=true";
+const event2 = "https://github.com/AshiqNoor-S/GDSC-UPES-Website/blob/main/assets/illustrations/events-past.png?raw=true";
+const event3 = "https://github.com/AshiqNoor-S/GDSC-UPES-Website/blob/main/assets/illustrations/events-past.png?raw=true";
+const event4 = "https://github.com/AshiqNoor-S/GDSC-UPES-Website/blob/main/assets/illustrations/events-past.png?raw=true";
+
+ const EventsData = [
+   {
+     template: event1,
+     events_on: "28th Sep'23",
+     event_name: "Recreating Resumes",
+     event_para: "Lorem ipsum dolor sit amet consectetur adipiscing elit Ut et massa mi. Lorem ipsum dolor sit amet consectetur",
+   },
+   {
+     template: event2,
+     events_on: "28th Sep'23",
+     event_name: "Recreating Resumes",
+     event_para: "Lorem ipsum dolor sit amet consectetur adipiscing elit Ut et massa mi. Lorem ipsum dolor sit amet consectetur",
+   },
+   {
+    template: event3,
+    events_on: "28th Sep'23",
+    event_name: "Recreating Resumes",
+    event_para: "Lorem ipsum dolor sit amet consectetur adipiscing elit Ut et massa mi. Lorem ipsum dolor sit amet consectetur",
+  },
+  {
+    template: event4,
+    events_on: "28th Sep'23",
+    event_name: "Recreating Resumes",
+    event_para: "Lorem ipsum dolor sit amet consectetur adipiscing elit Ut et massa mi. Lorem ipsum dolor sit amet consectetur",
+  }
+ ];
+
+export default EventsData;
\ No newline at end of file