diff --git a/package.json b/package.json
index 48fb1e1..9223f09 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@supabase/supabase-js": "^2.45.4",
+    "@fortawesome/fontawesome-free": "^6.6.0",
+    "@fortawesome/free-solid-svg-icons": "^6.6.0",
+    "@supabase/supabase-js": "^2.47.2",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
@@ -14,10 +16,13 @@
     "react-accessible-accordion": "^4.0.0",
     "react-dom": "^16.13.0",
     "react-icons": "^4.6.0",
+    "react-image-size": "^2.4.0",
+    "react-responsive-carousel": "^3.2.23",
     "react-router-dom": "^5.1.2",
     "react-router-hash-link": "^1.2.2",
     "react-scripts": "3.4.0",
-    "react-wavify": "^1.3.0"
+    "react-wavify": "^1.3.0",
+    "swiper": "^11.1.14"
   },
   "scripts": {
     "predeploy": "npm run build",
@@ -25,7 +30,8 @@
     "start": "react-scripts --openssl-legacy-provider start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "dev": "react-scripts --openssl-legacy-provider start"
   },
   "eslintConfig": {
     "extends": "react-app"
diff --git a/public/index.html b/public/index.html
index 6de67bf..ea1a1ea 100644
--- a/public/index.html
+++ b/public/index.html
@@ -3,6 +3,8 @@
 
 <head>
   <!-- Google tag (gtag.js) -->
+    <link href="https://fonts.googleapis.com/css2?family=Lilita+One&display=swap" rel="stylesheet">
+  
   <script async src="https://www.googletagmanager.com/gtag/js?id=G-NG110BBDTG"></script>
   <script>
     window.dataLayer = window.dataLayer || [];
diff --git a/src/Assets/events/event1.jpg b/src/Assets/events/event1.jpg
new file mode 100644
index 0000000..ababb02
Binary files /dev/null and b/src/Assets/events/event1.jpg differ
diff --git a/src/Assets/events/event2.jpg b/src/Assets/events/event2.jpg
new file mode 100644
index 0000000..ab105ad
Binary files /dev/null and b/src/Assets/events/event2.jpg differ
diff --git a/src/Assets/events/event3.jpg b/src/Assets/events/event3.jpg
new file mode 100644
index 0000000..15ef751
Binary files /dev/null and b/src/Assets/events/event3.jpg differ
diff --git a/src/Assets/events/event4.jpg b/src/Assets/events/event4.jpg
new file mode 100644
index 0000000..8f17408
Binary files /dev/null and b/src/Assets/events/event4.jpg differ
diff --git a/src/Assets/events/event5.jpg b/src/Assets/events/event5.jpg
new file mode 100644
index 0000000..acd5cd4
Binary files /dev/null and b/src/Assets/events/event5.jpg differ
diff --git a/src/Assets/events/event6.jpg b/src/Assets/events/event6.jpg
new file mode 100644
index 0000000..1f20ccd
Binary files /dev/null and b/src/Assets/events/event6.jpg differ
diff --git a/src/components/Events/Events.jsx b/src/components/Events/Events.jsx
new file mode 100644
index 0000000..f0c72bc
--- /dev/null
+++ b/src/components/Events/Events.jsx
@@ -0,0 +1,66 @@
+import React, { useState, useEffect } from 'react';
+import "./events.css";
+import { getImageSize } from 'react-image-size';
+import event1 from '../../Assets/events/event1.jpg';
+import event2 from "../../Assets/events/event2.jpg";
+import event3 from "../../Assets/events/event3.jpg";
+import event4 from "../../Assets/events/event4.jpg";
+import event5 from "../../Assets/events/event5.jpg";
+import event6 from "../../Assets/events/event6.jpg";
+
+const events = [
+  {
+    date: 'September 30, 2024',
+    image: event1,
+    description: 'Insightful talk session with Kenz EC, Founder and CEO of Milliondots on effective strategies for wealth creation and personalized financial planning.',
+  },
+  {
+    date: 'April 1, 2024',
+    image: event2,
+    description: 'This interactive session brought together like-minded individuals for engaging discussions, fueled by coffee, to brainstorm innovative ideas.',
+  },
+  {
+    date: 'January 31, 2024',
+    image: event3,
+    description: 'Exclusive in-person talk session featuring Marc Lamoureux, Co-Founder & CEO of Veriday.',
+  },
+  {
+    date: 'December 8, 2023',
+    image: event5,
+    description: 'SANDWICH CRAFT, a unique event where participants combined marketing and culinary skills to create a business.',
+  },
+  {
+    date: 'July 8, 2022',
+    image: event6,
+    description: 'Special Interest Group (SIG) discussion as part of the Unravel series, focusing on Tesla\'s growth, business strategies, and technical advancements.',
+  },
+  {
+    date: 'July 3rd, 9th and 10th 2022',
+    image: event4,
+    description: 'Hands-on 3-day training session in Arduino and robotics, where participants learned to build an Otto robot.',
+  },
+];
+
+function Events() {
+ return (
+    <div>
+      <h1>Events</h1>
+      <p>Stay tuned for official announcements about our upcoming events, which will be shared right here.</p>
+      <h2>Past Events</h2>
+      <div className='card-container'>
+        {events.map((e,index) => (
+          <div key={index} className='card'>
+            <img src={e.image} alt=""/>
+            <div className='card-content'>
+              <h4 className='date'>{e.date}</h4>
+              <p>{e.description}</p>
+              <button >Read More</button>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default Events;
\ No newline at end of file
diff --git a/src/components/Events/events.css b/src/components/Events/events.css
new file mode 100644
index 0000000..ae0d288
--- /dev/null
+++ b/src/components/Events/events.css
@@ -0,0 +1,83 @@
+h1
+{
+  color: #BF2200;
+  font-size: 50px;
+  font-weight: bold;
+}
+h2
+{
+  color: #BF2200;
+  font-size: x-large;
+  font-weight: bold;
+}
+*
+{
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+.card-container
+{
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  margin-top: 50px;
+}
+.card {
+  width: 300px;
+  height: auto;
+  min-height: 450px;
+  background-color: white;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0px 2px 4px rgba(207, 6, 6, 0.5);
+  margin: 10px;
+}
+
+.card img {
+  width: 100%;
+  height: 200px;
+}
+.card-content
+{
+  padding: 16px;
+}
+.date
+{
+font-size: 20px;
+margin-bottom: 8px;
+font-family: 'Lilita One', cursive;
+}
+.card-content p
+{
+  color:black;
+  font-size: 15px;
+  font-weight: light;
+  line-height: 1.3;
+}
+.card-content button
+{
+  display: inline-block;
+  padding: 8px 16px;
+  background-color:  #BF2200;
+  color: white;
+  text-decoration: none;
+  border-radius: 4;
+  margin-top: 10px;
+  border: none;
+  cursor: pointer;
+}
+@media only screen and (max-width: 600px) {
+  .card {
+    width: 90%;
+    margin: 10px auto;
+  }
+  
+  .card img {
+    height: 250px;
+  }
+  
+  .card-content {
+    padding: 12px;
+  }
+}
\ No newline at end of file
diff --git a/src/components/Home.jsx b/src/components/Home.jsx
index 86262e6..d8ad503 100644
--- a/src/components/Home.jsx
+++ b/src/components/Home.jsx
@@ -4,6 +4,7 @@ import "materialize-css/dist/css/materialize.min.css";
 import HeaderImage from "../Assets/svgs/Frame1.png";
 import announcementsData from "../announcement_data.json";
 import Announcements from "./Announcement/Announcements";
+import Events from './Events/Events';
 const Home = () => {
     // useEffect(() => {
     //   fetch("https://raw.githubusercontent.com/IEDCMEC/data/master/data.json")
@@ -65,7 +66,9 @@ const Home = () => {
                 {announcementsData.map(({ title, id, link, summary }) => (
                     <Announcements key={id} title={title} link={link} summary={summary} id={id} />
                 ))}
+                
             </div>
+            <Events/>
         </div>
     );
 };
