diff --git a/css/events.css b/css/events.css
index 1d06da6..e29c478 100644
--- a/css/events.css
+++ b/css/events.css
@@ -1 +1,587 @@
 /* ======================== CSS file for events.html ======================== */
+
+/*Linear gradient */
+.header-background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 50vh; /* Adjust the height as needed */
+  z-index: -1;
+  background: linear-gradient(
+    90deg,
+    rgba(6, 47, 61, 0.8),
+    rgba(255, 123, 27, 0.8),
+    rgba(255, 123, 27, 0.8),
+    rgba(116, 64, 225, 0.8)
+  );
+  filter: blur(200px); /* Adjust the blur value as needed */
+}
+
+body {
+  font-family: "Bentham", serif;
+  background-color: #07303e;
+  color: white;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  scroll-behavior: smooth;
+}
+
+html {
+  overflow-x: hidden;
+  scroll-padding-top: 6rem;
+  scroll-behavior: smooth;
+}
+
+/* NAVIGATION BAR GOES HERE!!!! */
+
+.dropdown {
+  position: relative;
+}
+
+/* Hide the dropdown by default */
+.dropdown-content {
+  display: none;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  background-color: #07303e;
+  padding: 10px;
+}
+
+/* Style the individual dropdown items */
+.dropdown-content li {
+  margin: 5px, 0;
+}
+
+/* Show the dropdown when hovering over the "Event" link */
+.dropdown:hover .dropdown-content {
+  display: block;
+}
+
+/* Links inside the dropdown */
+.dropdown-content a {
+  color: white;
+  padding: 12px 16px;
+  text-decoration: none;
+  display: block;
+  text-align: center;
+}
+/* Change color of dropdown links on hover */
+.dropdown-content a:hover {
+  background-color: #ff7b1b;
+}
+
+/* Change the background color of the dropdown button when the dropdown content is shown */
+.dropdown:hover .dropbtn {
+  background-color: #3e8e41;
+}
+
+/* -------------*/
+header {
+  display: flex;
+  flex-direction: row;
+  /* justify-content: end; */
+  justify-content: space-between;
+  gap: 200px;
+  padding: 20px;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  align-items: center;
+  background-color: transparent; /* Make the navbar background transparent */
+  transition: box-shadow 0.3s; /* Add a smooth transition to the box-shadow property */
+}
+
+/* Intersection observer */
+.nav-scrolled {
+  color: #fff;
+  background-color: #07303e;
+}
+
+.logo {
+  display: flex;
+  align-items: center;
+}
+
+.logo img {
+  height: 25px;
+  margin-right: 10px;
+}
+
+#menu-bar {
+  display: none;
+  cursor: pointer;
+}
+
+.nav-container {
+  display: flex;
+  flex-direction: row;
+  margin-right: 42px;
+}
+
+.nav-container ul {
+  list-style-type: none;
+  padding: 0;
+}
+
+.nav-container span {
+  padding-bottom: 10px;
+  border-bottom: 2px solid rgb(255, 123, 27);
+}
+
+.nav-list :hover {
+  border-bottom: 2px solid #ff7b1b;
+}
+
+.nav-list {
+  display: inline; /* Display list items in a horizontal line */
+  margin-right: 40px; /* Add spacing between list items */
+}
+
+.nav-list a {
+  text-decoration: none;
+  color: #fff; /* Set link color to white */
+}
+
+.nav-container button {
+  background-color: #ff7b1b;
+  color: white;
+  border: none;
+  padding: 10px 20px;
+  cursor: pointer;
+  border-radius: 20px;
+}
+
+.nav-container button:hover {
+  background-color: white;
+  color: #ff7b1b;
+}
+
+/* NAVIGATION BAR ENDS HERE!!!! */
+
+/* EVENTS GOES HERE!!!! */
+.events {
+  margin-bottom: 200px;
+  margin-top: 100px;
+}
+
+.events h3 {
+  font-size: 48px;
+  text-align: center;
+  padding: 50px;
+}
+
+.events h3 span {
+  font-size: 48px;
+  text-align: center;
+  padding-top: 20px;
+}
+
+.card_container {
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: center;
+  gap: 2rem;
+  align-items: center;
+  position: relative;
+}
+
+.fa-circle-chevron-left {
+  left: 0;
+}
+
+.fa-circle-chevron-right {
+  right: 0;
+}
+
+.card_container i {
+  cursor: pointer;
+  margin: 20px;
+}
+
+.card_container i:hover {
+  color: #ff7b1b;
+}
+
+.card {
+  width: 300px;
+  height: 300px;
+  text-align: left;
+  transition: transform 0.3s;
+  border-radius: 0.5rem;
+}
+
+.card img {
+  width: 100%;
+  height: 12rem;
+  object-fit: cover;
+  border-top-left-radius: 15px;
+  border-top-right-radius: 15px;
+}
+
+.card:hover {
+  transform: scale(1.1);
+}
+
+.card_info {
+  text-align: left;
+  font-size: 14px;
+  color: #e6dff3;
+}
+
+.card_title {
+  font-size: 18px;
+  padding: 8px 0px;
+}
+
+a {
+  text-decoration: none;
+  color: white;
+}
+
+/* button */
+.button {
+  background-color: rgb(255, 123, 27);
+  padding: 10px;
+  border-radius: 24px;
+  color: white;
+  text-align: center;
+  width: 100px;
+  height: 20px;
+  margin-top: 16px;
+  font-family: "Bentham", serif;
+}
+
+.button:hover {
+  cursor: pointer;
+  background-color: rgba(255, 123, 27, 0.2);
+  color: rgb(255, 165, 0);
+}
+
+/* EVENTS ENDS HERE!!!!  */
+
+/* Arrow */
+
+.scrolltotop {
+  position: fixed;
+  bottom: 2.5%; right: 0; left: 95%;
+  display: flex;
+}
+
+.fa-arrow-up {
+  cursor: pointer;
+  bottom: 20px;
+  padding-top: 8px;
+  padding-bottom: 8px;
+  padding-left: 6px;
+  padding-right: 6px;
+  border-radius: 50%;
+  background-color: #fff;
+  color: #07303e;
+  text-align: center;
+}
+
+.fa-arrow-up:hover {
+  background-color: #ff7b1b;
+}
+
+/* FOOTER */
+footer {
+  width: 95%;
+  margin-bottom: 200px;
+  margin: 120px auto 0;
+}
+
+.left p a, .links ul li a{
+  text-decoration: none;
+  color: #fff;
+}
+
+.left p a:hover, .links ul li a:hover {
+  color: #ff7b1b;
+}
+
+.top {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 10px;
+}
+
+.left, .right {
+  width: 45%;
+  font-size: 20px;
+  color: #DEDEDE;
+}
+
+.right .links {
+  display: flex;
+  gap: 100px;
+  padding: 0;
+  font-size: 1rem;
+  color: #8dacc9;
+}
+
+footer p {
+  font-size: 1rem;
+}
+
+.right h3 {
+  font-size: 1.5em;
+  margin-top: 0;
+  padding: 0;
+  margin-bottom: 12px;
+}
+
+.links ul {
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+}
+
+.links li {
+  padding: 0;
+}
+
+.under {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 1.3em;
+  color: #DEDEDE;
+  margin-bottom: 25px;
+  margin-top: 25px;
+}
+
+.under a i {
+  color: #ff7b1b;
+  padding: 10px;
+}
+
+.under a i:hover {
+  color: #fff;
+}
+
+.under a {
+  text-decoration: none;
+}
+
+.footer_product {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+}
+/* end of footer css */
+
+/* Media Query for Tablets and Smaller Desktops */
+@media only screen and (max-width: 1200px) {
+  /* Adjust your styles for tablets and smaller desktop screens here */
+  header {
+    font-size: 14px;
+  }
+
+.nav-list {
+  margin-right: 20px; /* Add spacing between list items */
+}
+}
+
+@media (max-width:991px){
+  /* For tablets */
+  .button {
+    font-size: 14px;
+    padding: 5px;
+    width: 80px;
+    height: 20px;
+  }
+
+  header {
+    gap: 50px;
+    padding-right: 0;
+  }
+
+  /* Footer */
+  .footer_product {
+    display: none;
+  }
+
+}
+
+@media (max-width: 775px){
+  /* For mobile phones */
+  /* Responsieness menubar */
+  .responsiveness {
+    position: relative;
+    display: contents;
+    margin-right: auto;
+  }
+
+  div #menu-bar {
+    display: flex;
+  }
+
+  /* Dropdown menu */
+  .dropdown-content li {
+    display: none;
+  }
+
+  /* Navbar */
+  .nav-container {
+    position: absolute;
+    top: 100%; right: 0; left: 70%;
+    background-color: transparent;
+    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
+  }
+
+  .nav-container span {
+    padding-bottom: 0;
+    border-bottom: none;
+  }
+
+  .nav-list a {
+    display: block;
+    padding: 10px;
+    margin: 4px 0;
+    background-color: #07303e;
+    box-shadow: 0 3px 20px rgba(255, 123, 27, 0.8);
+  }
+  
+  .nav-container button {
+    background-color: white;
+    color: #ff7b1b;
+  }
+  
+  .nav-container button:hover {
+    color: white;
+    background-color: #ff7b1b;
+  }
+
+  /* Header */
+  header {
+    font-size: 20px;
+    padding: 20px;
+    background-color: #07303e;
+  }
+
+  header .nav-container.active{
+    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
+  }
+
+  /* Events */
+  .events {
+    margin-bottom: 0;
+    margin-top: 0;
+  }
+
+  #upcoming_container {
+    margin-top: 100px;
+  }
+
+  .events h3 {
+    font-size: 40px;
+  }
+
+  .card_container {
+    display: block;
+    position: relative;
+    text-align: center;
+    overflow: hidden;
+    max-width: 100%; /* Ensure cards don't go beyond the screen width */
+    margin: 0 auto; /* Center-align the container */
+    padding: 0 10px; /* Add some horizontal padding for better spacing */
+    box-sizing: border-box; /* Include padding in the max-width */
+  }
+  .card {
+    display: block; /* Ensure all cards are displayed */
+    margin: 0 auto; /* Center-align each card */
+    margin-bottom: 120px; /* Add some vertical spacing between cards */
+  }
+
+  .fa-circle-chevron-left,
+  .fa-circle-chevron-right {
+    display: none;
+  }
+
+  /* Scroll up arrow */
+  .scrolltotop {
+    position: fixed;
+    bottom: 2.5%; right: 0; left: 92%;
+    display: flex;
+    margin-left: auto;
+  }
+
+  .fa-arrow-up {
+    padding-top: 8px;
+    padding-bottom: 8px;
+    padding-left: 5px;
+    padding-right: 5px;
+  }
+
+  .fa-2xl {
+    font-size: 1em;
+  }
+
+  /* Footer */
+  /* footer section css */
+  .top {
+    align-items: flex-start;
+    display: block;
+  }
+
+  .left, .right {
+    width: 100%;
+    text-align: start;
+    padding: 20px;
+  }
+
+  .right .links {
+    display: flex;
+    gap: 100px;
+    padding: 0;
+    font-size: 1rem;
+    color: #8dacc9;
+  }
+
+  footer p {
+    font-size: 1rem;
+    width: 70%;
+  }
+
+  .links li {
+    padding: 0;
+  }
+
+  .under {
+   flex-direction: column;
+  }
+
+  .footer_product {
+    display: none;
+  }
+
+  .copyright {
+    font-size: 16px;
+  }
+
+  .under a i {
+    padding: 5px;
+  } 
+
+}
+
+@media (max-width: 580px){
+  /* For mobile phones */
+
+  /* Navbar */
+  .nav-container {
+    top: 100%; right: 0; left: 60%;
+  }
+}
diff --git a/css/style.css b/css/style.css
index 056bf25..d520b3a 100644
--- a/css/style.css
+++ b/css/style.css
@@ -768,7 +768,7 @@ footer p {
   .nav-list a {
     display: block;
     padding: 10px;
-    margin: 10px 0;
+    margin: 4px 0;
     background-color: #07303e;
     box-shadow: 0 3px 20px rgba(255, 123, 27, 0.8);
   }
@@ -802,7 +802,7 @@ footer p {
   }
 
   /* Dropdown menu */
-  .dropdown {
+  .dropdown-content li {
     display: none;
   }
 
@@ -856,12 +856,10 @@ footer p {
   }
   
   .algorithimia-diff p{
-    font-size: 14pxpx;
+    font-size: 14px;
   }
   
   .mission-vision{
-    /* display: grid;
-    grid-template-columns: repeat(1, 1fr); */
     gap: 20px;
     margin-left: auto;
     width: 92%;
@@ -977,75 +975,10 @@ footer p {
 
 @media (max-width: 580px){
   /* For mobile phones */
-  /* Responsieness menubar */
-  .responsiveness {
-    position: relative;
-    display: contents;
-    margin-right: auto;
-  }
-
-  div #menu-bar {
-    display: flex;
-  }
 
   /* Navbar */
   .nav-container {
-    position: absolute;
-    top: 100%; right: 0; left: 70%;
-    background-color: transparent;
-    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
-  }
-
-  .nav-list a {
-    display: block;
-    padding: 10px;
-    margin: 10px 0;
-    background-color: #07303e;
-    box-shadow: 0 3px 20px rgba(255, 123, 27, 0.8);
-  }
-  
-  .nav-container button {
-    background-color: white;
-    color: #ff7b1b;
-  }
-  
-  .nav-container button a {
-    color: #ff7b1b;
-  }
-  .nav-container button:hover {
-    color: white;
-    background-color: #ff7b1b;
-    cursor: auto;
-  }
-
-  .nav-container button a:hover {
-    color: white;
-    background-color: #ff7b1b;
-  }
-
-  .nav-container span {
-    border-bottom: none;
-    padding-bottom: 0;
-  }
-
-  .nav-list :hover, #home:hover {
-    border-bottom: 2px solid #ff7b1b;
-  }
-
-  /* Dropdown menu */
-  .dropdown {
-    display: none;
-  }
-
-  /* Header */
-  header {
-    font-size: 20px;
-    padding: 20px;
-    background-color: #07303e;
-  }
-
-  header .nav-container.active{
-    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
+    top: 100%; right: 0; left: 60%;
   }
 
   /* Scroll up arrow */
@@ -1107,10 +1040,6 @@ footer p {
   }
 
   /* Algorithimian difference */
-  .algorithimia-diff h1{
-    font-size: 38px;
-    margin-bottom: 30px;
-  }
   
   .algorithimia-diff p{
     font-size: 16px;
@@ -1122,12 +1051,7 @@ footer p {
     margin-left: auto;
     width: 92%;
   }
-  
-  .card {
-    height: 480px;
-    width: 87%;
-  }
-  
+   
   .card h2 {
     font-size: 2.1em;
   }
@@ -1159,96 +1083,7 @@ footer p {
   .goals-section .head {
     margin-bottom: 50px;
   }
-
-  /* Contact */
-  .contact-section {
-    width: 80%;
-    margin: 20px auto;
-    padding: 10px;
-    margin-top: 100px;
-  }
-
-  .contact-section h1 {
-    font-size: 35px;
-  }
-
-  .contact-section p{
-    font-size: 18px;
-  }
-
-  .name, .contact {
-    flex-direction: row;
-    /* gap: 5px; */
-    justify-content: center;
-  }
   
-  input{
-    width: 70%;
-  }
-
-  textarea{
-    width: 85%;
-  }
-
-  /* Subcribe */
-  .subscribe-container {
-    width: 90%;
-    margin: 80px auto;
-  }
-
-  .subscribe-container h2 {
-    font-size: 18px;
-  }
-
-  .subscribe-container h1 {
-    font-size: 26px;
-  }
-
-  .subscribe-container button {
-    padding: 10px 18px;
-    font-size: 1.5em;
-  }
-
-  /* footer section css */
-  .top {
-    align-items: flex-start;
-    display: block;
-  }
-
-  .left, .right {
-    width: 100%;
-    text-align: start;
-    padding: 20px;
-  }
-
-  .right .links {
-    display: flex;
-    gap: 100px;
-    padding: 0;
-    font-size: 1rem;
-    color: #8dacc9;
-  }
-
-  footer p {
-    font-size: 1rem;
-    width: 70%;
-  }
-
-  .links li {
-    padding: 0;
-  }
-
-  .under {
-   flex-direction: column;
-  }
-
-  .footer_product {
-    display: none;
-  }
-
-  .copyright {
-    font-size: 16px;
-  }
 }
 
 /* ===================================== */
diff --git a/events.html b/events.html
index 842f4d1..172ae81 100644
--- a/events.html
+++ b/events.html
@@ -1,33 +1,557 @@
 <!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
-    <head>
-        <meta charset="UTF-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <link rel="preconnect" href="https://fonts.googleapis.com">
-        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-        <link href="https://fonts.googleapis.com/css2?family=Bentham&display=swap" rel="stylesheet">
-        <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.8/css/line.css" />
-        <title>Community Events – Join The Conversation</title>
-    </head>
-
-    <body>
-        <header>
-            <div>
-                <img src="./images/website-logos/logo.svg" alt="">
-                <span>Algorithmia SE 🌍</span>
-            </div>
-            <nav>
-                <ul>
-                    <li><a href="./index.html">Home Page</a></li>
-                    <li><a href="./about.html">About Us</a></li>
-                    <li><a href="./projects.html">Projects</a></li>
-                        <li><a href="./events.html">Events</a></li>
-                        <li><a href="./contact.html">Contact Us</a></li>
-                    <button>Join Us</button>
-                </ul>
-            </nav>
-        </header>
-    </body>
+    <!-- FONT LINK -->
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
+    />
+
+    <link
+      rel="stylesheet"
+      href="https://unicons.iconscout.com/release/v4.0.8/css/line.css"
+    />
+
+    <!-- link to favicon -->
+    <link
+      rel="shortcut icon"
+      href="./images/website-logos/index-logo.jpg"
+      type="image/x-icon"
+    />
+
+    <link rel="stylesheet" href="css/events.css" />
+
+    <title>Community Events – Join The Conversation</title>
+  </head>
+
+  <body>
+    <!-- linear gradient -->
+    <div class="header-background"></div>
+    <!-- NAVIGATION BAR GOES HERE!!!! -->
+    <header>
+      <div class="responsiveness">
+        <div class="logo">
+          <img src="./images/website-logos/logo.svg" alt="" />
+          <span>Algorithmia SE 🌍</span>
+        </div>
+        <!-- For responsiveness -->
+        <div>
+          <i id="menu-bar" class="fas fa-bars"></i>
+        </div>
+      </div>
+      <nav class="nav-container">
+        <ul>
+          <li class="nav-list"><a href="./index.html">Home</a></li>
+          <li class="nav-list">
+            <a href="./index.html#About_us">About Us</a>
+          </li>
+          <li class="nav-list">
+            <a href="./index.html#Contact_us">Contact Us</a>
+          </li>
+          <li class="nav-list"><a href="./projects.html">Projects</a></li>
+
+          <li class="nav-list dropdown">
+            <a href="./events.html"><span>Events</span></a>
+            <ul class="dropdown-content">
+              <li>
+                <a href="./events.html#upcoming-events">Upcoming Events</a>
+              </li>
+              <li><a href="./events.html#latest-events">Latest Events</a></li>
+              <li><a href="./events.html#past-events">Past Events</a></li>
+            </ul>
+          </li>
+
+          <li class="nav-list"><a href="./blogs.html">Blogs</a></li>
+          <button id="join_us">Join Us</button>
+        </ul>
+      </nav>
+    </header>
+    <!-- NAVIGATION BAR ENDS HERE!!!! -->
+
+    <!-- UPCOMING EVENT GOES HERE!!!! -->
+
+    <div class="events" , id="upcoming_container">
+      <h3 class>Upcoming Events</h3>
+      <div class="card_container" id="upcoming-events">
+        <i class="fa-solid fa-circle-chevron-left fa-2xl"></i>
+        <div class="card">
+          <div>
+            <img
+              src="images/events/impact.jpg"
+              alt="A woman with an headphone attending a virtual event"
+            />
+            <div>
+              <p class="card_title">
+                <b>Impact Sessions</b>
+              </p>
+              <p class="card_info">
+                Join our impact sessions and PLDs. Dive deep with us as we
+                brainstorm tech-driven solutions for Africa's pressing
+                challenges. Connect with our community, make study buddies,
+                explore! Be part of the change, ALX SE style!
+              </p>
+              <div>
+                <p class="button"><a href="#">Learn more</a></p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="card">
+          <div>
+            <img
+              src="images/events/hackathon.jpg"
+              alt="Anime hackathon event"
+            />
+            <div>
+              <p class="card_title">
+                <b>AlgoRealm 🌍</b>
+              </p>
+              <p class="card_info">
+                Step into our hackathon, AlgoRealm! A tech arena where
+                innovation thrives. Tackle challenges across all tech facets,
+                forge solutions, and network with fellow pioneers. Where your
+                code shapes the future. Join us!
+              </p>
+              <div>
+                <p class="button"><a href="#">Learn more</a></p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="card">
+          <div>
+            <img
+              src="images/events/algosciate.jpg"
+              alt="A man with an headphone attending a virtual event"
+            />
+            <div>
+              <p class="card_title"><b>Algosciate (Students)</b></p>
+              <p class="card_info">
+                Algosciate is an upcoming app by Algorithmia SE 🌍 designed to
+                foster student connections and learning. It will feature live
+                discussions, expert interactions, and interactive Q&A sessions,
+                serving as a hub for engagement and knowledge-sharing.
+              </p>
+              <div>
+                <p class="button"><a href="#">Learn more</a></p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="card">
+          <div>
+            <img
+              src="images/events/twitter_space.png"
+              alt="A man with an headphone attending a virtual event"
+            />
+            <div>
+              <p class="card_title">
+                <b>Twitter Space Event</b>
+              </p>
+              <p class="card_info">
+                Join Algorithmia SE 🌍 in our upcoming Twitter Space! Dive into
+                vibrant conversations, network with tech aficionados, and
+                unravel fresh insights. It's not just a space — it's where
+                innovation meets conversation. Don't miss out!
+              </p>
+              <div>
+                <p class="button"><a href="#">Learn more</a></p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <i class="fa-solid fa-circle-chevron-right fa-2xl"></i>
+      </div>
+    </div>
+
+    <!-- UPCOMING EVENT ENDS HERE!!!! -->
+
+    <!-- LATEST EVENT STARTS HERE!!!! -->
+    <div class="events">
+      <h3><span>Latest Events</span></h3>
+      <div class="card_container" id="latest-events">
+        <i class="fa-solid fa-circle-chevron-left fa-2xl"></i>
+        <div class="card">
+          <div>
+            <img src="images/events/website.png" alt="Community Hangout" />
+            <div>
+              <p class="card_title"><b>Static Website Project</b></p>
+              <p class="card_info">
+                Dive into our latest venture, our dynamic static website. Born
+                from collaboration and innovation, this website you're using
+                showcases a tip of our tech prowess and community spirit. A
+                digital reflection of our journey, here's a glimpse.
+              </p>
+              <div>
+                <p class="button"><a href="#">Learn more</a></p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="card">
+          <div>
+            <img
+              src="images/events/community_hangout.jpg"
+              alt="Community Hangout"
+            />
+            <div>
+              <p class="card_title"><b>Community Hangout</b></p>
+              <p class="card_info">
+                Step into Algorithmia SE's community hub! Our recent hangout was
+                a fusion of tech passion and vibrant connection, forging
+                unforgettable memories. What fun we had in our consortium.
+              </p>
+              <div>
+                <p class="button"><a href="#">Learn more</a></p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="card">
+          <div>
+            <img src="images/events/coding_quizzes.png" alt="Coding Quizzes" />
+            <div>
+              <p class="card_title"><b>Coding Quizzes</b></p>
+              <p class="card_info">
+                During our weekly meetings, we've had several SE-related
+                quizzes, aimed at refreshing our minds on our SE journey, and
+                also revisit the very basics of coding. A lot of fun questions
+                too!
+              </p>
+              <div>
+                <p class="button"><a href="#">Learn more</a></p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="card">
+          <div>
+            <img src="images/events/meetings.jpg" alt="Weekly Meetings" />
+            <div>
+              <p class="card_title"><b>Weekly Meetings</b></p>
+              <p class="card_info">
+                Every week, we meet at 6:00 PM WAT, to discuss, communicate, and
+                share our knowledge, experiences, contributions, ideas and
+                opportunities, on how we can succeed in our projects, and in the
+                main course, our growth in the ALX SE program.
+              </p>
+              <div>
+                <p class="button"><a href="#">Learn more</a></p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <i class="fa-solid fa-circle-chevron-right fa-2xl"></i>
+      </div>
+    </div>
+    <!-- LATEST EVENT ENDS HERE!!!! -->
+
+    <!-- PAST EVENTS GOES HERE!!!! -->
+    <div class="events">
+      <h3><span>Past Events</span></h3>
+      <div class="card_container" id="past-events">
+        <i class="fa-solid fa-circle-chevron-left fa-2xl"></i>
+        <div class="card">
+          <div>
+            <img src="images/events/demo_calculator.jpg" alt="demo project" />
+            <div>
+              <p class="card_title">
+                <b>Demo Project: C Calculator Project</b>
+              </p>
+              <p class="card_info">
+                Discover the world of programming as we embark on an exciting
+                journey to create a CMD calculator using the C programming
+                language. Our calculator project is just the beginning, as we
+                continue to explore new horizons and push the boundaries of
+                what's possible with code.
+              </p>
+              <div>
+                <p class="button">
+                  <a
+                    href="https://github.com/Algorithmia-SE/Demo-Project"
+                    target="_blank"
+                    >Learn more</a
+                  >
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="card">
+          <div>
+            <img src="images/events/community.jpg" alt="demo project" />
+            <div>
+              <p class="card_title"><b>Community Meetings</b></p>
+              <p class="card_info">
+                Every week, we meet at 6:00 PM WAT virtually, to communicate,
+                and share our knowledge, experiences, contributions, ideas and
+                opportunities, on how we can succeed in our projects, and in the
+                main course, our growth in the ALX SE program.
+              </p>
+              <div>
+                <p class="button">
+                  <a href="https://forms.gle/P3j9v7tnaAq5j1Qu9" target="_blank"
+                    >Learn more</a
+                  >
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="card">
+          <div>
+            <img src="images/events/pld.jpg" alt="Peer Learning Days" />
+            <div>
+              <p class="card_title"><b>Live Learning Sessions</b></p>
+              <p class="card_info">
+                We recently held an inspiring and productive team meeting that
+                brought us together to discuss our goals, share ideas, and
+                strengthen our collective vision. Want to be a part of it?
+              </p>
+              <div>
+                <p class="button">
+                  <a href="https://forms.gle/P3j9v7tnaAq5j1Qu9" target="_blank"
+                    >Learn more</a
+                  >
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="card">
+          <div>
+            <img src="images/events/workshop.png" alt="demo project" />
+            <div>
+              <p class="card_title"><b>Open Source Workshop</b></p>
+              <p class="card_info">
+                Talking about the latest trends in Open Source Contribution, how
+                to be a part of it, irrespective of your level of expertise.
+                Contributions to projects are really 🚀🚀🚀.
+              </p>
+              <div>
+                <p class="button">
+                  <a href="https://forms.gle/P3j9v7tnaAq5j1Qu9" target="_blank"
+                    >Learn more</a
+                  >
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <i class="fa-solid fa-circle-chevron-right fa-2xl"></i>
+      </div>
+    </div>
+    <!-- PAST EVENT ENDS HERE!!!! -->
+    <div class="scrolltotop" onclick="scrolltop()">
+      <i class="fa-solid fa fa-arrow-up"></i>
+    </div>
+
+    <!-- footer -->
+    <footer>
+      <!--footer style="position: fixed;bottom: 0;"-->
+      <div class="top">
+        <div class="left">
+          <img
+            src="./images/website-logos/logo.svg"
+            width="50px"
+            alt="Algorithmia SE logo"
+          />
+          <p>
+            Algorithmia SE 🌍 represents an inspiring convergence of innovation,
+            collaboration, and transformation impact. It illuminates the path
+            for ALX Software Engineering students, and the wider tech community,
+            fostering a culture of continuous learning, problem-solving, and
+            positive change.
+          </p>
+          <br />
+          <p><a href="tel:+2348139720259">+234-81-3972-0259</a></p>
+          <p>
+            <a href="mailto:algorithmiasecollaborators@gmail.com"
+              >algorithmiasecollaborators@gmail.com</a
+            >
+          </p>
+        </div>
+
+        <div class="right">
+          <h3>Quick Links</h3>
+          <div class="links">
+            <ul style="list-style-type: none">
+              <li><a href="./index.html">Home</a></li>
+              <li><a href="./events.html">Events</a></li>
+              <li><a href="./index.html#Contact_us">Contact Us</a></li>
+            </ul>
+
+            <ul style="list-style-type: none">
+              <li><a href="./index.html#About_us">About Us</a></li>
+              <li><a href="./projects.html">Projects</a></li>
+              <li><a href="./blogs.html">Blogs</a></li>
+            </ul>
+          </div>
+        </div>
+      </div>
+
+      <hr />
+
+      <div class="under">
+        <ul style="list-style: none">
+          <li>
+            <a href="https://github.com/Algorithmia-SE" target="_blank">
+              <i class="uil uil-github"></i>
+            </a>
+            <a href="https://twitter.com/Algorithmia_SE" target="_blank">
+              <i class="uil uil-twitter"></i>
+            </a>
+            <a
+              href="https://www.linkedin.com/in/algorithmia-se-0743b9283/"
+              target="_blank"
+            >
+              <i class="uil uil-linkedin"></i>
+            </a>
+            <a href="https://discord.gg/xgEsBQBRp3" target="_blank">
+              <i class="uil uil-discord"></i>
+            </a>
+            <a
+              href="https://whatsapp.com/channel/0029Va5SC3G9sBIFUjjzNl1c"
+              target="_blank"
+            >
+              <i class="uil uil-whatsapp"></i>
+            </a>
+            <a
+              href="mailto:algorithmiasecollaborators@gmail.com"
+              target="_blank"
+            >
+              <i class="uil uil-envelope"></i>
+            </a>
+            <a href="https://www.youtube.com/@Algorithmia_SE" target="_blank">
+              <i class="uil uil-youtube"></i>
+            </a>
+          </li>
+        </ul>
+        <div class="footer_product">
+          A product of
+          <img
+            src="./images/website-logos/logo.svg"
+            width="30px"
+            height="auto"
+            alt="Algorithmia SE logo"
+          />
+        </div>
+        <div class="copyright">
+          &copy; 2023 Algorithmia SE 🌍. All Rights Reserved
+        </div>
+      </div>
+    </footer>
+
+    <!-- JavaScript -->
+    <script>
+      // menu responsivness
+      let menu = document.getElementById("menu-bar");
+      let navbar = document.querySelector(".nav-container");
+
+      window.onscroll = function () {
+        menu.classList.remove("fa-times");
+        navbar.classList.remove("active");
+      };
+
+      menu.addEventListener("click", function () {
+        menu.classList.toggle("fa-times");
+        navbar.classList.toggle("active");
+      });
+      // menu responsivness ends
+
+      // Card visibility
+      function scrolltop() {
+        window.scrollTo(0, 0);
+      }
+
+      function updateCardVisibility(cardContainerId) {
+        // Get references to the card container and the cards
+        const cardContainer = document.getElementById(cardContainerId);
+        const cards = cardContainer.querySelectorAll(".card");
+        const leftArrow = cardContainer.querySelector(
+          ".fa-circle-chevron-left"
+        );
+        const rightArrow = cardContainer.querySelector(
+          ".fa-circle-chevron-right"
+        );
+
+        // Define the current card index
+        let currentCardIndex = 0;
+
+        // Event listener for left arrow click
+        leftArrow.addEventListener("click", () => {
+          if (currentCardIndex > 0) {
+            currentCardIndex--;
+            updateCardVisibility();
+          }
+        });
+
+        // Event listener for right arrow click
+        rightArrow.addEventListener("click", () => {
+          if (currentCardIndex < cards.length - 3) {
+            currentCardIndex++;
+            updateCardVisibility();
+          }
+        });
+
+        // Function to update the card visibility
+        function updateCardVisibility() {
+          cards.forEach((card, index) => {
+            if (index >= currentCardIndex && index < currentCardIndex + 3) {
+              card.style.display = "block";
+            } else {
+              card.style.display = "none";
+            }
+          });
+        }
+
+        // Initial card visibility setup
+        updateCardVisibility();
+      }
+
+      // Call the function for each section
+      updateCardVisibility("upcoming-events");
+      updateCardVisibility("latest-events");
+      updateCardVisibility("past-events");
+
+      // Intersection observer for the navbar
+      const header = document.querySelector("header");
+      const section = document.querySelector(".events");
+      const sectionOptions = {
+        rootMargin: "-500px 0px 0px 0px",
+      };
+
+      const sectionObserver = new IntersectionObserver(function (
+        entries,
+        sectionObserver
+      ) {
+        entries.forEach((entry) => {
+          if (!entry.isIntersecting) {
+            header.classList.add("nav-scrolled");
+          } else {
+            header.classList.remove("nav-scrolled");
+          }
+        });
+      },
+      sectionOptions);
+
+      sectionObserver.observe(section);
+
+      // Join us link
+      var button = document.getElementById("join_us");
+
+      // Add a click event listener to the button
+      button.addEventListener("click", function () {
+        var targetURL = "https://forms.gle/ojo9Yi3xM8mbaZ4HA";
+
+        window.location.href = targetURL;
+      });
+    </script>
+  </body>
 </html>
diff --git a/images/events/algosciate.jpg b/images/events/algosciate.jpg
new file mode 100644
index 0000000..82fc849
Binary files /dev/null and b/images/events/algosciate.jpg differ
diff --git a/images/events/coding_battle.png b/images/events/coding_battle.png
deleted file mode 100644
index c678842..0000000
Binary files a/images/events/coding_battle.png and /dev/null differ
diff --git a/images/events/coding_quizzes.png b/images/events/coding_quizzes.png
new file mode 100644
index 0000000..f3dea13
Binary files /dev/null and b/images/events/coding_quizzes.png differ
diff --git a/images/events/community.jpg b/images/events/community.jpg
new file mode 100644
index 0000000..3ea64dc
Binary files /dev/null and b/images/events/community.jpg differ
diff --git a/images/events/community_hangout.jpg b/images/events/community_hangout.jpg
new file mode 100644
index 0000000..86cbf35
Binary files /dev/null and b/images/events/community_hangout.jpg differ
diff --git a/images/events/community_hangout.png b/images/events/community_hangout.png
deleted file mode 100644
index 9e8bbfa..0000000
Binary files a/images/events/community_hangout.png and /dev/null differ
diff --git a/images/events/demo_calculator.jpg b/images/events/demo_calculator.jpg
new file mode 100644
index 0000000..b17fe45
Binary files /dev/null and b/images/events/demo_calculator.jpg differ
diff --git a/images/events/demo_calculator.png b/images/events/demo_calculator.png
deleted file mode 100644
index cfa92a4..0000000
Binary files a/images/events/demo_calculator.png and /dev/null differ
diff --git a/images/events/hackathon.jpg b/images/events/hackathon.jpg
new file mode 100644
index 0000000..a91a928
Binary files /dev/null and b/images/events/hackathon.jpg differ
diff --git a/images/events/image_1.png b/images/events/image_1.png
deleted file mode 100644
index 236089a..0000000
Binary files a/images/events/image_1.png and /dev/null differ
diff --git a/images/events/impact.jpg b/images/events/impact.jpg
new file mode 100644
index 0000000..8d3243b
Binary files /dev/null and b/images/events/impact.jpg differ
diff --git a/images/events/meetings.jpg b/images/events/meetings.jpg
new file mode 100644
index 0000000..1a2a8ce
Binary files /dev/null and b/images/events/meetings.jpg differ
diff --git a/images/events/pld.jpg b/images/events/pld.jpg
new file mode 100644
index 0000000..76a8de0
Binary files /dev/null and b/images/events/pld.jpg differ
diff --git a/images/events/python.png b/images/events/python.png
deleted file mode 100644
index 1c8446c..0000000
Binary files a/images/events/python.png and /dev/null differ
diff --git a/images/events/team_meetups.png b/images/events/team_meetups.png
deleted file mode 100644
index aaac82a..0000000
Binary files a/images/events/team_meetups.png and /dev/null differ
diff --git a/images/events/website.png b/images/events/website.png
new file mode 100644
index 0000000..b5bcb4d
Binary files /dev/null and b/images/events/website.png differ
diff --git a/index.html b/index.html
index 014afcb..aab60b6 100644
--- a/index.html
+++ b/index.html
@@ -64,9 +64,11 @@
           <li class="nav-list dropdown">
             <a href="./events.html">Events</a>
             <ul class="dropdown-content">
-              <li><a href="#upcoming-events">Upcoming Events</a></li>
-              <li><a href="#latest-events">Latest Events</a></li>
-              <li><a href="#past-events">Past Events</a></li>
+              <li>
+                <a href="./events.html#upcoming-events">Upcoming Events</a>
+              </li>
+              <li><a href="./events.html#latest-events">Latest Events</a></li>
+              <li><a href="./events.html#past-events">Past Events</a></li>
             </ul>
           </li>
 
@@ -273,7 +275,11 @@ <h1>Contact <b>Us</b></h1>
         <br />
         Reach out to us
       </p>
-      <form action="https://formspree.io/f/mrgwjrej" method="POST" target="_blank">
+      <form
+        action="https://formspree.io/f/mrgwjrej"
+        method="POST"
+        target="_blank"
+      >
         <div class="contact-details">
           <div class="name">
             <div class="first-name">