diff --git a/Contributors/style.css b/Contributors/style.css
index eea27dc..d3ed9c8 100644
--- a/Contributors/style.css
+++ b/Contributors/style.css
@@ -264,6 +264,7 @@ html,body{
     margin: 0;
     padding: 0;
     font-size: var(--toggle-size);
+    
   }
   
   .theme-switch__container {
diff --git a/contactus.html b/contactus.html
index f5cddc8..1c4d403 100644
--- a/contactus.html
+++ b/contactus.html
@@ -2,354 +2,338 @@
 <html lang="en">
 
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Contact Us</title>
-    <link rel="icon" href="img/favicon.ico" type="image/x-icon">
-     <link rel="stylesheet" href="./style.css">
-     <link rel="stylesheet" href="./contactus.css">
-    <link rel="stylesheet" href="./Chatbot/chat.css">
-    <script src="../navigateToPages/scriptDashboard.js"></script>
-    <script src="../Chatbot/chat.js" defer></script>
-    <script src="https://cdn.tailwindcss.com"></script>
-    <link href="./output.css" rel="stylesheet">
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@48,400,1,0" />
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Contact Us</title>
+  <link rel="icon" href="img/favicon.ico" type="image/x-icon">
+  <link rel="stylesheet" href="./style.css">
+  <link rel="stylesheet" href="./contactus.css">
+  <link rel="stylesheet" href="./Chatbot/chat.css">
+  <script src="../navigateToPages/scriptDashboard.js"></script>
+  <script src="../Chatbot/chat.js" defer></script>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <link href="./output.css" rel="stylesheet">
+  <link rel="stylesheet"
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
+  <link rel="stylesheet"
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@48,400,1,0" />
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
+    integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
 </head>
 <style>
-  .content{
-      width: 100vw;
-      margin: 0;
+  .content {
+    width: 100vw;
+    margin: 0;
   }
+
   .contact-form-container {
-  backdrop-filter: blur(10px); 
-  background: rgba(255, 255, 255, 0.9); 
-  width: 70%; 
-  max-width: 100vh; 
-  padding: 20px; 
-  border-radius: 10px; 
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-  margin: 20px auto; 
-}
-
-.contact-form-container form {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  width: 100%; 
-  max-height: auto; 
-  overflow-y: auto; 
-}
-
-.contact-form-container input,
-.contact-form-container textarea,
-.contact-form-container button {
-  font-size: 16px;
-  width: 100%;
-  margin-bottom: 15px; 
-  padding: 10px; 
-  border: 1px solid #ccc; 
-  border-radius: 5px; 
-}
-
-.contact-form-container button {
-  background-color: #007bff; 
-  color: white; 
-  width: 50%;
-  padding: 10px;
-  font-size: 16px; 
-  border: none; 
-  border-radius: 5px; 
-  cursor: pointer; 
-}
-h1{
-  margin-bottom: 30px;
-}
-.contact-form-container button:hover {
-  background-color: #0056b3; 
-}
-
-label {
-  display: block;
-  margin-bottom: 8px;
-  font-weight: bold;
-}
-
-input, textarea {
-  width: 100%;
-  padding: 10px;
-  margin-bottom: 20px;
-  border: 1px solid #ccc;
-  border-radius: 5px;
-}
-
-button {
-  width: 100%;
-  padding: 10px;
-  background-color: #007bff;
-  color: white;
-  border: none;
-  border-radius: 5px;
-  cursor: pointer;
-  font-size: 16px;
-}
-
-button:hover {
-  background-color: #0056b3;
-}
-
-/* Popup styles */
-.popup {
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  background: rgba(255, 255, 255, 0.95); /* Semi-transparent white background */
-  padding: 20px 30px;
-  border-radius: 10px;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-  text-align: center;
-  z-index: 1000;
-}
-
-.popup p {
-  color: black; /* Makes the message text black for visibility */
-  font-size: 16px; /* Optional: Adjust font size */
-}
-
-.popup button {
-  margin-top: 10px;
-  padding: 8px 16px;
-  background-color: #007bff;
-  color: white;
-  border: none;
-  border-radius: 5px;
-  cursor: pointer;
-}
-
-.popup button:hover {
-  background-color: #0056b3;
-}
-
-.hidden {
-  display: none;
-}
-header {
-      position: -webkit-sticky; /* For Safari */
-      position: sticky;
-      top: 0;
-      z-index: 1000; /* Adjust as needed */
-    
-}
+    backdrop-filter: blur(10px);
+    background: rgba(255, 255, 255, 0.9);
+    width: 70%;
+    max-width: 100vh;
+    padding: 20px;
+    border-radius: 10px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    margin: 20px auto;
+  }
 
-.content { height: 2000px; /* Example content height to test scrolling */ 
-  padding: 20px; 
-  background-color: #f4f4f4;
- }
+  .contact-form-container form {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    max-height: auto;
+    overflow-y: auto;
+  }
 
-html, body {
-  height: 100%;
-  margin: 0;
-}
+  .contact-form-container input,
+  .contact-form-container textarea,
+  .contact-form-container button {
+    font-size: 16px;
+    width: 100%;
+    margin-bottom: 15px;
+    padding: 10px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+  }
 
-@media (max-width: 500px) {
-  .contact-form-container {
-    width: 90%;
+  .contact-form-container button {
+    background-color: #007bff;
+    color: white;
+    width: 50%;
+    padding: 10px;
+    font-size: 16px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
   }
-  .contact-form-container button{
+
+  h1 {
+    margin-bottom: 30px;
+  }
+
+  .contact-form-container button:hover {
+    background-color: #0056b3;
+  }
+
+  label {
+    display: block;
+    margin-bottom: 8px;
+    font-weight: bold;
+  }
+
+  input,
+  textarea {
     width: 100%;
+    padding: 10px;
+    margin-bottom: 20px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
   }
-}
 
+  button {
+    width: 100%;
+    padding: 10px;
+    background-color: #007bff;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 16px;
+  }
+
+  button:hover {
+    background-color: #0056b3;
+  }
+
+  /* Popup styles */
+  .popup {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background: rgba(255, 255, 255, 0.95);
+    /* Semi-transparent white background */
+    padding: 20px 30px;
+    border-radius: 10px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    text-align: center;
+    z-index: 1000;
+  }
+
+  .popup p {
+    color: black;
+    /* Makes the message text black for visibility */
+    font-size: 16px;
+    /* Optional: Adjust font size */
+  }
+
+  .popup button {
+    margin-top: 10px;
+    padding: 8px 16px;
+    background-color: #007bff;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+  }
+
+  .popup button:hover {
+    background-color: #0056b3;
+  }
+
+  .hidden {
+    display: none;
+  }
+
+  header {
+    position: -webkit-sticky;
+    /* For Safari */
+    position: sticky;
+    top: 0;
+    z-index: 1000;
+    /* Adjust as needed */
+
+  }
+
+  .content {
+    height: 2000px;
+    /* Example content height to test scrolling */
+    padding: 20px;
+    background-color: #f4f4f4;
+  }
+
+  html,
+  body {
+    height: 100%;
+    margin: 0;
+  }
+
+  @media (max-width: 500px) {
+    .contact-form-container {
+      width: 90%;
+    }
+
+    .contact-form-container button {
+      width: 100%;
+    }
+  }
 </style>
 
 <body background="./img/back.jpg">
-    <!--navbar-->
-    <header>
-      <div>
-        <ul class="sidebar">
-          <li>
-            <svg onclick=hideSidebar() xmlns="http://www.w3.org/2000/svg" height="27px" viewBox="0 -960 960 960" width="27px" fill="#000000"><path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/></svg>
-          </li>
-          <li><a href="./navigateToPages/aboutus.html">About Us</a></li>
-          <li><a href="./navigateToPages/profile.html">STUDENT Profile</a></li>
-          <li><a href="./navigateToPages/contact.html">CALENDAR</a></li>
-          <li><a href="./navigateToPages/faq2.html">FAQ</a></li>
-          <li>
-            <a href="./navigateToPages/services.html">
-              Explore
-              <button class="button-explore">
-                <svg
-                  class="svgIcon"
-                  viewBox="0 0 512 512"
-                  height="1em"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm50.7-186.9L162.4 380.6c-19.4 7.5-38.5-11.6-31-31l55.5-144.3c3.3-8.5 9.9-15.1 18.4-18.4l144.3-55.5c19.4-7.5 38.5 11.6 31 31L325.1 306.7c-3.2 8.5-9.9 15.1-18.4 18.4zM288 256a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z"
-                  ></path>
-                </svg>
-              </button>
-            </a>
-          </li>
-          <li>
-            <button class="sign-up">
-              <span>Sign Up</span>
+  <!--navbar-->
+  <header>
+    <div>
+      <ul class="sidebar">
+        <li>
+          <svg onclick=hideSidebar() xmlns="http://www.w3.org/2000/svg" height="27px" viewBox="0 -960 960 960"
+            width="27px" fill="#000000">
+            <path
+              d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z" />
+          </svg>
+        </li>
+        <li><a href="./navigateToPages/aboutus.html">About Us</a></li>
+        <li><a href="./navigateToPages/profile.html">STUDENT Profile</a></li>
+        <li><a href="./navigateToPages/contact.html">CALENDAR</a></li>
+        <li><a href="./navigateToPages/faq2.html">FAQ</a></li>
+        <li>
+          <a href="./navigateToPages/services.html">
+            Explore
+            <button class="button-explore">
+              <svg class="svgIcon" viewBox="0 0 512 512" height="1em" xmlns="http://www.w3.org/2000/svg">
+                <path
+                  d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm50.7-186.9L162.4 380.6c-19.4 7.5-38.5-11.6-31-31l55.5-144.3c3.3-8.5 9.9-15.1 18.4-18.4l144.3-55.5c19.4-7.5 38.5 11.6 31 31L325.1 306.7c-3.2 8.5-9.9 15.1-18.4 18.4zM288 256a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z">
+                </path>
+              </svg>
             </button>
-          </li>
-          <li>
-            <button class="log-in"><span>Log In</span></button>
-          </li>
-        </ul>
-      </div>
-      <nav class="navbar">
-        <div class="left">
-          <a href="../index.html">
-            <img src="./img/logo.jpg" alt="Logo" class="logo" />
           </a>
-
-          <div class="group">
-            <svg class="icon" aria-hidden="true" viewBox="0 0 24 24">
-              <g>
-                <path
-                  d="M21.53 20.47l-3.66-3.66C19.195 15.24 20 13.214 20 11c0-4.97-4.03-9-9-9s-9 4.03-9 9 4.03 9 9 9c2.215 0 4.24-.804 5.808-2.13l3.66 3.66c.147.146.34.22.53.22s.385-.073.53-.22c.295-.293.295-.767.002-1.06zM3.5 11c0-4.135 3.365-7.5 7.5-7.5s7.5 3.365 7.5 7.5-3.365 7.5-7.5 7.5-7.5-3.365-7.5-7.5z"
-                ></path>
-              </g>
-            </svg>
-            <input placeholder="Search" type="search" class="input"/>
-          </div>
-        </div>
-
-        <ul class="navbar-list hideOnSmallScreen">
-          <li><a href="../navigateToPages/aboutus.html">About Us</a></li>
-          <li><a href="../navigateToPages/profile.html">STUDENT Profile</a></li>
-          <li><a href="./QnACommunity/index.html">QNA</a></li>
-          <li><a href="../navigateToPages/contact.html">CALENDAR</a></li>
-          <li><a href="../navigateToPages/faq2.html">FAQ</a></li>
-          <li><a href="./Contributors/contributor.html">CONTRIBUTORS</a></li>
-          <li><a href="#">CONTACT US</a></li>
-        </ul>
-      </nav>
-      <div class="right hideOnSmallScreen">
-        <a href="../navigateToPages/services.html">
-          <button class="button-explore">
-            <svg
-              class="svgIcon"
-              viewBox="0 0 512 512"
-              height="1em"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm50.7-186.9L162.4 380.6c-19.4 7.5-38.5-11.6-31-31l55.5-144.3c3.3-8.5 9.9-15.1 18.4-18.4l144.3-55.5c19.4-7.5 38.5 11.6 31 31L325.1 306.7c-3.2 8.5-9.9 15.1-18.4 18.4zM288 256a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z"
-              ></path>
-            </svg>
-          </button>
-        </a>
-
-        <div class="Authenticate hideOnSmallScreen">
+        </li>
+        <li>
           <button class="sign-up">
-            <span><a href="sign_up.html" style="color:white;">Sign Up</a></span>
+            <span>Sign Up</span>
           </button>
+        </li>
+        <li>
+          <button class="log-in"><span>Log In</span></button>
+        </li>
+      </ul>
+    </div>
+    <nav class="navbar">
+      <div class="left">
+        <a href="../index.html">
+          <img src="./img/logo.jpg" alt="Logo" class="logo" />
+        </a>
 
-          <button class="log-in"><span><a href="Login-page/login-pg.html" style="color:white;">Log In</a></span></button>
+        <div class="group">
+          <svg class="icon" aria-hidden="true" viewBox="0 0 24 24">
+            <g>
+              <path
+                d="M21.53 20.47l-3.66-3.66C19.195 15.24 20 13.214 20 11c0-4.97-4.03-9-9-9s-9 4.03-9 9 4.03 9 9 9c2.215 0 4.24-.804 5.808-2.13l3.66 3.66c.147.146.34.22.53.22s.385-.073.53-.22c.295-.293.295-.767.002-1.06zM3.5 11c0-4.135 3.365-7.5 7.5-7.5s7.5 3.365 7.5 7.5-3.365 7.5-7.5 7.5-7.5-3.365-7.5-7.5z">
+              </path>
+            </g>
+          </svg>
+          <input placeholder="Search" type="search" class="input" />
         </div>
-        <label class="theme-switch hideOnSmallScreen">
-          <input type="checkbox" class="theme-switch__checkbox"   id="themeToggle" onchange="toggleTheme()">
-          <div class="theme-switch__container">
-            <div class="theme-switch__clouds"></div>
-            <div class="theme-switch__stars-container">
-              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 55" fill="none">
-                <path fill-rule="evenodd" clip-rule="evenodd" d="M135.831 3.00688C135.055 3.85027 134.111 4.29946 133 4.35447C134.111 4.40947 135.055 4.85867 135.831 5.71123C136.607 6.55462 136.996 7.56303 136.996 8.72727C136.996 7.95722 137.172 7.25134 137.525 6.59129C137.886 5.93124 138.372 5.39954 138.98 5.00535C139.598 4.60199 140.268 4.39114 141 4.35447C139.88 4.2903 138.936 3.85027 138.16 3.00688C137.384 2.16348 136.996 1.16425 136.996 0C136.996 1.16425 136.607 2.16348 135.831 3.00688ZM31 23.3545C32.1114 23.2995 33.0551 22.8503 33.8313 22.0069C34.6075 21.1635 34.9956 20.1642 34.9956 19C34.9956 20.1642 35.3837 21.1635 36.1599 22.0069C36.9361 22.8503 37.8798 23.2903 39 23.3545C38.2679 23.3911 37.5976 23.602 36.9802 24.0053C36.3716 24.3995 35.8864 24.9312 35.5248 25.5913C35.172 26.2513 34.9956 26.9572 34.9956 27.7273C34.9956 26.563 34.6075 25.5546 33.8313 24.7112C33.0551 23.8587 32.1114 23.4095 31 23.3545ZM0 36.3545C1.11136 36.2995 2.05513 35.8503 2.83131 35.0069C3.6075 34.1635 3.99559 33.1642 3.99559 32C3.99559 33.1642 4.38368 34.1635 5.15987 35.0069C5.93605 35.8503 6.87982 36.2903 8 36.3545C7.26792 36.3911 6.59757 36.602 5.98015 37.0053C5.37155 37.3995 4.88644 37.9312 4.52481 38.5913C4.172 39.2513 3.99559 39.9572 3.99559 40.7273C3.99559 39.563 3.6075 38.5546 2.83131 37.7112C2.05513 36.8587 1.11136 36.4095 0 36.3545ZM56.8313 24.0069C56.0551 24.8503 55.1114 25.2995 54 25.3545C55.1114 25.4095 56.0551 25.8587 56.8313 26.7112C57.6075 27.5546 57.9956 28.563 57.9956 29.7273C57.9956 28.9572 58.172 28.2513 58.5248 27.5913C58.8864 26.9312 59.3716 26.3995 59.9802 26.0053C60.5976 25.602 61.2679 25.3911 62 25.3545C60.8798 25.2903 59.9361 24.8503 59.1599 24.0069C58.3837 23.1635 57.9956 22.1642 57.9956 21C57.9956 22.1642 57.6075 23.1635 56.8313 24.0069ZM81 25.3545C82.1114 25.2995 83.0551 24.8503 83.8313 24.0069C84.6075 23.1635 84.9956 22.1642 84.9956 21C84.9956 22.1642 85.3837 23.1635 86.1599 24.0069C86.9361 24.8503 87.8798 25.2903 89 25.3545C88.2679 25.3911 87.5976 25.602 86.9802 26.0053C86.3716 26.3995 85.8864 26.9312 85.5248 27.5913C85.172 28.2513 84.9956 28.9572 84.9956 29.7273C84.9956 28.563 84.6075 27.5546 83.8313 26.7112C83.0551 25.8587 82.1114 25.4095 81 25.3545ZM136 36.3545C137.111 36.2995 138.055 35.8503 138.831 35.0069C139.607 34.1635 139.996 33.1642 139.996 32C139.996 33.1642 140.384 34.1635 141.16 35.0069C141.936 35.8503 142.88 36.2903 144 36.3545C143.268 36.3911 142.598 36.602 141.98 37.0053C141.372 37.3995 140.886 37.9312 140.525 38.5913C140.172 39.2513 139.996 39.9572 139.996 40.7273C139.996 39.563 139.607 38.5546 138.831 37.7112C138.055 36.8587 137.111 36.4095 136 36.3545ZM101.831 49.0069C101.055 49.8503 100.111 50.2995 99 50.3545C100.111 50.4095 101.055 50.8587 101.831 51.7112C102.607 52.5546 102.996 53.563 102.996 54.7273C102.996 53.9572 103.172 53.2513 103.525 52.5913C103.886 51.9312 104.372 51.3995 104.98 51.0053C105.598 50.602 106.268 50.3911 107 50.3545C105.88 50.2903 104.936 49.8503 104.16 49.0069C103.384 48.1635 102.996 47.1642 102.996 46C102.996 47.1642 102.607 48.1635 101.831 49.0069Z" fill="currentColor"></path>
-              </svg>
-            </div>
-            <div class="theme-switch__circle-container">
-              <div class="theme-switch__sun-moon-container">
-                <div class="theme-switch__moon">
-                  <div class="theme-switch__spot"></div>
-                  <div class="theme-switch__spot"></div>
-                  <div class="theme-switch__spot"></div>
-                </div>
+      </div>
+
+      <ul class="navbar-list hideOnSmallScreen">
+        <li><a href="../navigateToPages/aboutus.html">About Us</a></li>
+        <li><a href="../navigateToPages/profile.html">STUDENT Profile</a></li>
+        <li><a href="./QnACommunity/index.html">QNA</a></li>
+        <li><a href="../navigateToPages/contact.html">CALENDAR</a></li>
+        <li><a href="../navigateToPages/faq2.html">FAQ</a></li>
+        <li><a href="./Contributors/contributor.html">CONTRIBUTORS</a></li>
+        <li><a href="#">CONTACT US</a></li>
+      </ul>
+    </nav>
+    <div class="right hideOnSmallScreen">
+      <a href="../navigateToPages/services.html">
+        <button class="button-explore">
+          <svg class="svgIcon" viewBox="0 0 512 512" height="1em" xmlns="http://www.w3.org/2000/svg">
+            <path
+              d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm50.7-186.9L162.4 380.6c-19.4 7.5-38.5-11.6-31-31l55.5-144.3c3.3-8.5 9.9-15.1 18.4-18.4l144.3-55.5c19.4-7.5 38.5 11.6 31 31L325.1 306.7c-3.2 8.5-9.9 15.1-18.4 18.4zM288 256a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z">
+            </path>
+          </svg>
+        </button>
+      </a>
+
+      <div class="Authenticate hideOnSmallScreen">
+        <button class="sign-up">
+          <span><a href="sign_up.html" style="color:white;">Sign Up</a></span>
+        </button>
+
+        <button class="log-in"><span><a href="Login-page/login-pg.html" style="color:white;">Log In</a></span></button>
+      </div>
+      <label class="theme-switch hideOnSmallScreen">
+        <input type="checkbox" class="theme-switch__checkbox" id="themeToggle" onchange="toggleTheme()">
+        <div class="theme-switch__container">
+          <div class="theme-switch__clouds"></div>
+          <div class="theme-switch__stars-container">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 55" fill="none">
+              <path fill-rule="evenodd" clip-rule="evenodd"
+                d="M135.831 3.00688C135.055 3.85027 134.111 4.29946 133 4.35447C134.111 4.40947 135.055 4.85867 135.831 5.71123C136.607 6.55462 136.996 7.56303 136.996 8.72727C136.996 7.95722 137.172 7.25134 137.525 6.59129C137.886 5.93124 138.372 5.39954 138.98 5.00535C139.598 4.60199 140.268 4.39114 141 4.35447C139.88 4.2903 138.936 3.85027 138.16 3.00688C137.384 2.16348 136.996 1.16425 136.996 0C136.996 1.16425 136.607 2.16348 135.831 3.00688ZM31 23.3545C32.1114 23.2995 33.0551 22.8503 33.8313 22.0069C34.6075 21.1635 34.9956 20.1642 34.9956 19C34.9956 20.1642 35.3837 21.1635 36.1599 22.0069C36.9361 22.8503 37.8798 23.2903 39 23.3545C38.2679 23.3911 37.5976 23.602 36.9802 24.0053C36.3716 24.3995 35.8864 24.9312 35.5248 25.5913C35.172 26.2513 34.9956 26.9572 34.9956 27.7273C34.9956 26.563 34.6075 25.5546 33.8313 24.7112C33.0551 23.8587 32.1114 23.4095 31 23.3545ZM0 36.3545C1.11136 36.2995 2.05513 35.8503 2.83131 35.0069C3.6075 34.1635 3.99559 33.1642 3.99559 32C3.99559 33.1642 4.38368 34.1635 5.15987 35.0069C5.93605 35.8503 6.87982 36.2903 8 36.3545C7.26792 36.3911 6.59757 36.602 5.98015 37.0053C5.37155 37.3995 4.88644 37.9312 4.52481 38.5913C4.172 39.2513 3.99559 39.9572 3.99559 40.7273C3.99559 39.563 3.6075 38.5546 2.83131 37.7112C2.05513 36.8587 1.11136 36.4095 0 36.3545ZM56.8313 24.0069C56.0551 24.8503 55.1114 25.2995 54 25.3545C55.1114 25.4095 56.0551 25.8587 56.8313 26.7112C57.6075 27.5546 57.9956 28.563 57.9956 29.7273C57.9956 28.9572 58.172 28.2513 58.5248 27.5913C58.8864 26.9312 59.3716 26.3995 59.9802 26.0053C60.5976 25.602 61.2679 25.3911 62 25.3545C60.8798 25.2903 59.9361 24.8503 59.1599 24.0069C58.3837 23.1635 57.9956 22.1642 57.9956 21C57.9956 22.1642 57.6075 23.1635 56.8313 24.0069ZM81 25.3545C82.1114 25.2995 83.0551 24.8503 83.8313 24.0069C84.6075 23.1635 84.9956 22.1642 84.9956 21C84.9956 22.1642 85.3837 23.1635 86.1599 24.0069C86.9361 24.8503 87.8798 25.2903 89 25.3545C88.2679 25.3911 87.5976 25.602 86.9802 26.0053C86.3716 26.3995 85.8864 26.9312 85.5248 27.5913C85.172 28.2513 84.9956 28.9572 84.9956 29.7273C84.9956 28.563 84.6075 27.5546 83.8313 26.7112C83.0551 25.8587 82.1114 25.4095 81 25.3545ZM136 36.3545C137.111 36.2995 138.055 35.8503 138.831 35.0069C139.607 34.1635 139.996 33.1642 139.996 32C139.996 33.1642 140.384 34.1635 141.16 35.0069C141.936 35.8503 142.88 36.2903 144 36.3545C143.268 36.3911 142.598 36.602 141.98 37.0053C141.372 37.3995 140.886 37.9312 140.525 38.5913C140.172 39.2513 139.996 39.9572 139.996 40.7273C139.996 39.563 139.607 38.5546 138.831 37.7112C138.055 36.8587 137.111 36.4095 136 36.3545ZM101.831 49.0069C101.055 49.8503 100.111 50.2995 99 50.3545C100.111 50.4095 101.055 50.8587 101.831 51.7112C102.607 52.5546 102.996 53.563 102.996 54.7273C102.996 53.9572 103.172 53.2513 103.525 52.5913C103.886 51.9312 104.372 51.3995 104.98 51.0053C105.598 50.602 106.268 50.3911 107 50.3545C105.88 50.2903 104.936 49.8503 104.16 49.0069C103.384 48.1635 102.996 47.1642 102.996 46C102.996 47.1642 102.607 48.1635 101.831 49.0069Z"
+                fill="currentColor"></path>
+            </svg>
+          </div>
+          <div class="theme-switch__circle-container">
+            <div class="theme-switch__sun-moon-container">
+              <div class="theme-switch__moon">
+                <div class="theme-switch__spot"></div>
+                <div class="theme-switch__spot"></div>
+                <div class="theme-switch__spot"></div>
               </div>
             </div>
           </div>
-        </label>
-      </div>
-      <div class="menu">
-        <svg class="menu-button" onclick=showSidebar() style="cursor: pointer;" xmlns="http://www.w3.org/2000/svg" height="27px" viewBox="0 -960 960 960" width="27px" fill="#000000"><path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z"/></svg>
-      </div>
-    </header>
-
-<div class="content">
-  <div class="contact-form-container">
-    <h1 class="text-center text-2xl font-bold text-gray-800 mb-6">Contact Us</h1>
-    <form id="contactForm">
-      <label for="name" class="block font-semibold mb-2">Your Name</label>
-      <input
-        type="text"
-        id="name"
-        name="name"
-        placeholder="Enter your name"
-        required
-        pattern="^[a-zA-Z\s]{2,}$"
-        title="Name must contain only letters and spaces, and be at least 2 characters long."
-        class="w-full p-3 mb-4 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
-      />
-
-      <label for="email" class="block font-semibold mb-2">Your Email</label>
-      <input
-        type="email"
-        id="email"
-        name="email"
-        placeholder="Enter your email"
-        required
-        pattern="^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$"
-        title="Please enter a valid email address."
-        class="w-full p-3 mb-4 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
-      />
-
-      <label for="mobile" class="block font-semibold mb-2">Your Mobile No</label>
-      <input
-        type="tel"
-        id="mobile"
-        name="mobile"
-        placeholder="Enter your mobile number"
-        required
-        pattern="^\d{10}$"
-        title="Mobile number must be 10 digits long."
-        class="w-full p-3 mb-4 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
-      />
-
-      <label for="message" class="block font-semibold mb-2">Your Message</label>
-      <textarea
-        id="message"
-        name="message"
-        rows="4"
-        placeholder="Enter your message"
-        required
-        minlength="10"
-        pattern=".*\S+.*"
-        title="Message must be at least 10 characters long and cannot be blank."
-        class="w-full p-3 mb-4 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
-      ></textarea>
-
-      <button
-        type="submit"
-        class="w-full bg-blue-600 text-white p-3 rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500"
-      >
-        Send Message
-      </button>
-    </form>
+        </div>
+      </label>
+    </div>
+    <div class="menu">
+      <svg class="menu-button" onclick=showSidebar() style="cursor: pointer;" xmlns="http://www.w3.org/2000/svg"
+        height="27px" viewBox="0 -960 960 960" width="27px" fill="#000000">
+        <path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z" />
+      </svg>
+    </div>
+  </header>
+
+  <div class="content">
+    <div class="contact-form-container">
+      <h1 class="text-center text-2xl font-bold text-gray-800 mb-6">Contact Us</h1>
+      <form id="contactForm">
+        <label for="name" class="block font-semibold mb-2">Your Name</label>
+        <input type="text" id="name" name="name" placeholder="Enter your name" required pattern="^[a-zA-Z\s]{2,}$"
+          title="Name must contain only letters and spaces, and be at least 2 characters long."
+          class="w-full p-3 mb-4 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" />
+
+        <label for="email" class="block font-semibold mb-2">Your Email</label>
+        <input type="email" id="email" name="email" placeholder="Enter your email" required
+          pattern="^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$" title="Please enter a valid email address."
+          class="w-full p-3 mb-4 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" />
+
+        <label for="mobile" class="block font-semibold mb-2">Your Mobile No</label>
+        <input type="tel" id="mobile" name="mobile" placeholder="Enter your mobile number" required pattern="^\d{10}$"
+          title="Mobile number must be 10 digits long."
+          class="w-full p-3 mb-4 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" />
+
+        <label for="message" class="block font-semibold mb-2">Your Message</label>
+        <textarea id="message" name="message" rows="4" placeholder="Enter your message" required minlength="10"
+          pattern=".*\S+.*" title="Message must be at least 10 characters long and cannot be blank."
+          class="w-full p-3 mb-4 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
+
+        <button type="submit"
+          class="w-full bg-blue-600 text-white p-3 rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500">
+          Send Message
+        </button>
+      </form>
+    </div>
   </div>
-</div>
-<!-- Popup Message -->
-<div id="popupMessage" class="popup hidden">
-  <p>Your message has been sent successfully!🎉</p>
-  <button onclick="closePopup()">Close</button>
-</div>
-<footer class="footer">
+  <!-- Popup Message -->
+  <div id="popupMessage" class="popup hidden">
+    <p>Your message has been sent successfully!🎉</p>
+    <button onclick="closePopup()">Close</button>
+  </div>
+  <!-- <footer class="footer">
   <div class="footer-container">
     <div class="footer-section" style="max-width: 400px;">
       <h4>About</h4>
@@ -406,37 +390,192 @@ <h2>Chatbot</h2>
             <textarea placeholder="Enter a message..." spellcheck="false" required></textarea>
             <span id="send-btn" class="material-symbols-rounded">send</span>
         </div>
+    </div> -->
+
+
+  <div class="px-4 pt-16 mx-auto sm:max-w-xl md:max-w-full lg:max-w-screen-xl md:px-24 lg:px-8">
+    <div class="grid gap-16 row-gap-10 mb-8 lg:grid-cols-6">
+      <div class="md:max-w-md lg:col-span-2">
+        <a href="/" aria-label="Go home" title="Company" class="inline-flex items-center">
+          <svg class="w-8 text-deep-purple-accent-400" viewBox="0 0 24 24" stroke-linejoin="round" stroke-width="2"
+            stroke-linecap="round" stroke-miterlimit="10" stroke="currentColor" fill="none">
+            <rect x="3" y="1" width="7" height="12"></rect>
+            <rect x="3" y="17" width="7" height="6"></rect>
+            <rect x="14" y="1" width="7" height="6"></rect>
+            <rect x="14" y="11" width="7" height="12"></rect>
+          </svg>
+          <span class="ml-2 text-xl font-bold tracking-wide text-gray-800 uppercase">Company</span>
+        </a>
+        <div class="mt-4 lg:max-w-sm">
+          <p class="text-sm text-gray-800">
+            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem
+            aperiam.
+          </p>
+          <p class="mt-4 text-sm text-gray-800">
+            Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
+          </p>
+        </div>
+      </div>
+      <div class="grid grid-cols-2 gap-5 row-gap-8 lg:col-span-4 md:grid-cols-4">
+        <div>
+          <p class="font-semibold tracking-wide text-gray-800">Category</p>
+          <ul class="mt-2 space-y-2">
+            <li>
+              <a href="/"
+                class="text-gray-600 transition-colors duration-300 hover:text-deep-purple-accent-400">News</a>
+            </li>
+            <li>
+              <a href="/"
+                class="text-gray-600 transition-colors duration-300 hover:text-deep-purple-accent-400">World</a>
+            </li>
+            <li>
+              <a href="/"
+                class="text-gray-600 transition-colors duration-300 hover:text-deep-purple-accent-400">Games</a>
+            </li>
+            <li>
+              <a href="/"
+                class="text-gray-600 transition-colors duration-300 hover:text-deep-purple-accent-400">References</a>
+            </li>
+          </ul>
+        </div>
+        <div>
+          <p class="font-semibold tracking-wide text-gray-800">Business</p>
+          <ul class="mt-2 space-y-2">
+            <li>
+              <a href="/" class="text-gray-600 transition-colors duration-300 hover:text-deep-purple-accent-400">Web</a>
+            </li>
+            <li>
+              <a href="/"
+                class="text-gray-600 transition-colors duration-300 hover:text-deep-purple-accent-400">eCommerce</a>
+            </li>
+            <li>
+              <a href="/"
+                class="text-gray-600 transition-colors duration-300 hover:text-deep-purple-accent-400">Business</a>
+            </li>
+            <li>
+              <a href="/"
+                class="text-gray-600 transition-colors duration-300 hover:text-deep-purple-accent-400">Entertainment</a>
+            </li>
+            <li>
+              <a href="/"
+                class="text-gray-600 transition-colors duration-300 hover:text-deep-purple-accent-400">Portfolio</a>
+            </li>
+          </ul>
+        </div>
+        <div>
+          <p class="font-semibold tracking-wide text-gray-800">Apples</p>
+          <ul class="mt-2 space-y-2">
+            <li>
+              <a href="/"
+                class="text-gray-600 transition-colors duration-300 hover:text-deep-purple-accent-400">Media</a>
+            </li>
+            <li>
+              <a href="/"
+                class="text-gray-600 transition-colors duration-300 hover:text-deep-purple-accent-400">Brochure</a>
+            </li>
+            <li>
+              <a href="/"
+                class="text-gray-600 transition-colors duration-300 hover:text-deep-purple-accent-400">Nonprofit</a>
+            </li>
+            <li>
+              <a href="/"
+                class="text-gray-600 transition-colors duration-300 hover:text-deep-purple-accent-400">Educational</a>
+            </li>
+            <li>
+              <a href="/"
+                class="text-gray-600 transition-colors duration-300 hover:text-deep-purple-accent-400">Projects</a>
+            </li>
+          </ul>
+        </div>
+        <div>
+          <p class="font-semibold tracking-wide text-gray-800">Cherry</p>
+          <ul class="mt-2 space-y-2">
+            <li>
+              <a href="/"
+                class="text-gray-600 transition-colors duration-300 hover:text-deep-purple-accent-400">Infopreneur</a>
+            </li>
+            <li>
+              <a href="/"
+                class="text-gray-600 transition-colors duration-300 hover:text-deep-purple-accent-400">Personal</a>
+            </li>
+            <li>
+              <a href="/"
+                class="text-gray-600 transition-colors duration-300 hover:text-deep-purple-accent-400">Wiki</a>
+            </li>
+            <li>
+              <a href="/"
+                class="text-gray-600 transition-colors duration-300 hover:text-deep-purple-accent-400">Forum</a>
+            </li>
+          </ul>
+        </div>
+      </div>
     </div>
+    <div class="flex flex-col justify-between pt-5 pb-10 border-t sm:flex-row">
+      <p class="text-sm text-gray-600">
+        © Copyright 2020 Lorem Inc. All rights reserved.
+      </p>
+      <div class="flex items-center mt-4 space-x-4 sm:mt-0">
+        <a href="/" class="text-gray-500 transition-colors duration-300 hover:text-deep-purple-accent-400">
+          <svg viewBox="0 0 24 24" fill="currentColor" class="h-5">
+            <path
+              d="M24,4.6c-0.9,0.4-1.8,0.7-2.8,0.8c1-0.6,1.8-1.6,2.2-2.7c-1,0.6-2,1-3.1,1.2c-0.9-1-2.2-1.6-3.6-1.6 c-2.7,0-4.9,2.2-4.9,4.9c0,0.4,0,0.8,0.1,1.1C7.7,8.1,4.1,6.1,1.7,3.1C1.2,3.9,1,4.7,1,5.6c0,1.7,0.9,3.2,2.2,4.1 C2.4,9.7,1.6,9.5,1,9.1c0,0,0,0,0,0.1c0,2.4,1.7,4.4,3.9,4.8c-0.4,0.1-0.8,0.2-1.3,0.2c-0.3,0-0.6,0-0.9-0.1c0.6,2,2.4,3.4,4.6,3.4 c-1.7,1.3-3.8,2.1-6.1,2.1c-0.4,0-0.8,0-1.2-0.1c2.2,1.4,4.8,2.2,7.5,2.2c9.1,0,14-7.5,14-14c0-0.2,0-0.4,0-0.6 C22.5,6.4,23.3,5.5,24,4.6z">
+            </path>
+          </svg>
+        </a>
+        <a href="/" class="text-gray-500 transition-colors duration-300 hover:text-deep-purple-accent-400">
+          <svg viewBox="0 0 30 30" fill="currentColor" class="h-6">
+            <circle cx="15" cy="15" r="4"></circle>
+            <path
+              d="M19.999,3h-10C6.14,3,3,6.141,3,10.001v10C3,23.86,6.141,27,10.001,27h10C23.86,27,27,23.859,27,19.999v-10   C27,6.14,23.859,3,19.999,3z M15,21c-3.309,0-6-2.691-6-6s2.691-6,6-6s6,2.691,6,6S18.309,21,15,21z M22,9c-0.552,0-1-0.448-1-1   c0-0.552,0.448-1,1-1s1,0.448,1,1C23,8.552,22.552,9,22,9z">
+            </path>
+          </svg>
+        </a>
+        <a href="/" class="text-gray-500 transition-colors duration-300 hover:text-deep-purple-accent-400">
+          <svg viewBox="0 0 24 24" fill="currentColor" class="h-5">
+            <path
+              d="M22,0H2C0.895,0,0,0.895,0,2v20c0,1.105,0.895,2,2,2h11v-9h-3v-4h3V8.413c0-3.1,1.893-4.788,4.659-4.788 c1.325,0,2.463,0.099,2.795,0.143v3.24l-1.918,0.001c-1.504,0-1.795,0.715-1.795,1.763V11h4.44l-1,4h-3.44v9H22c1.105,0,2-0.895,2-2 V2C24,0.895,23.105,0,22,0z">
+            </path>
+          </svg>
+        </a>
+      </div>
+    </div>
+  </div>
 
-    <script src="./script.js"></script>
-    <script>
-         const themeToggle = document.querySelector('.theme-toggle');
+
+
+
+  <script src="./script.js"></script>
+  <script>
+    const themeToggle = document.querySelector('.theme-toggle');
     const icon = themeToggle.querySelector('span');
 
     themeToggle.addEventListener('click', () => {
-        document.body.classList.toggle('dark-theme');
-        if (document.body.classList.contains('dark-theme')) {
-            icon.textContent = 'dark_mode';
-        } else {
-            icon.textContent = 'light_mode';
-        }
-    });
-    </script>
-     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
-     <script>
-      const form = document.getElementById("contactForm");
-      const popup = document.getElementById("popupMessage");
-
-      form.addEventListener("submit", function (event) {
-        event.preventDefault(); // Prevent the form from submitting normally
-        popup.classList.remove("hidden"); // Show the popup
-      });
-
-      function closePopup() {
-        popup.classList.add("hidden"); // Hide the popup
-        form.reset(); // Optional: Clear the form fields
+      document.body.classList.toggle('dark-theme');
+      if (document.body.classList.contains('dark-theme')) {
+        icon.textContent = 'dark_mode';
+      } else {
+        icon.textContent = 'light_mode';
       }
-    </script>
+    });
+  </script>
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
+    integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
+    crossorigin="anonymous"></script>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script>
+    const form = document.getElementById("contactForm");
+    const popup = document.getElementById("popupMessage");
+
+    form.addEventListener("submit", function (event) {
+      event.preventDefault(); // Prevent the form from submitting normally
+      popup.classList.remove("hidden"); // Show the popup
+    });
+
+    function closePopup() {
+      popup.classList.add("hidden"); // Hide the popup
+      form.reset(); // Optional: Clear the form fields
+    }
+  </script>
 
 </body>
 
diff --git a/index.css b/index.css
new file mode 100644
index 0000000..d429237
--- /dev/null
+++ b/index.css
@@ -0,0 +1,337 @@
+@import url('https://fonts.googleapis.com/css2?family=Jura:wght@300..700&family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Outfit:wght@100..900&family=Playwrite+VN:wght@100..400&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
+#scrollToTopBtn {
+  display: none;
+  position: fixed;
+  bottom: 85px;
+  right: 40px;
+  height: 50px;
+  width: 50px;
+  background-color: rgb(80, 183, 218);
+  color: white;
+  border: none;
+  border-radius: 50%;
+  padding: 10px;
+  cursor: pointer;
+  font-size: 15px;
+}
+.theme-dark #scrollToTopBtn {
+  background-color: #ffc107;
+}
+.theme-dark #scrollToTopBtn:hover {
+  background-color: #4caf50;
+}
+
+#scrollToTopBtn:hover {
+  background-color: rgb(80, 183, 218);
+}
+/* header {
+  position: -webkit-sticky; /* For Safari 
+  position: sticky;
+  top: 0;
+  z-index: 1000; /* Adjust as needed 
+} */
+.content {
+  background-color: #f4f4f4;
+  margin-top: 80px;
+}
+
+
+html,
+body {
+  height: 100%;
+  margin: 0;
+}
+
+.nav {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  padding: 15px 200px;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+  background-color: rgb(39, 39, 39);
+  
+  z-index: 1;
+}
+.nav,
+.nav .nav-links {
+  display: flex;
+  align-items: center;
+}
+.nav {
+  justify-content: space-between;
+}
+a {
+    color: white;
+  text-decoration: none;
+  
+}
+.nav .logo {
+  font-size: 22px;
+  font-family: "Nunito", serif;
+  color: white;
+}
+.nav .nav-links {
+  column-gap: 20px;
+  list-style: none;
+}
+
+.nav .nav-links a {
+  transition: all 0.2s linear;
+  font-family: "Nunito", serif;
+  color: white;
+}
+.nav .nav-links a:hover{
+    color:#ffc107
+}
+.nav.openSearch .nav-links a {
+  opacity: 0;
+  pointer-events: none;
+}
+.nav .search-icon {
+    color: white;
+  font-size: 20px;
+  cursor: pointer;
+  margin-bottom: 20px;
+}
+.nav .search-box {
+  position: absolute;
+  right: 250px;
+  height: 45px;
+  max-width: 555px;
+  width: 100%;
+  opacity: 0;
+  pointer-events: none;
+  transition: all 0.2s linear;
+}
+.nav.openSearch .search-box {
+  opacity: 1;
+  pointer-events: auto;
+}
+.search-box .search-icon {
+  position: absolute;
+  left: 15px;
+  top: 50%;
+  left: 15px;
+  color: #ffcc00;
+  transform: translateY(-50%);
+}
+.search-box input {
+  height: 100%;
+  width: 100%;
+  border: none;
+  outline: none;
+  color: white;
+  border-radius: 6px;
+  background-color: #353842;
+  padding: 0 15px 0 45px;
+}
+
+.nav .navOpenBtn,
+.nav .navCloseBtn {
+  display: none;
+}
+
+/* responsive */
+@media screen and (max-width: 1200px) {
+  .nav {
+    padding: 15px 100px;
+  }
+  .nav .search-box {
+    right: 150px;
+  }
+}
+@media screen and (max-width: 1200px) {
+  .nav {
+    padding: 15px 50px;
+  }
+  .nav .search-box {
+    right: 100px;
+    max-width: 400px;
+  }
+}
+@media screen and (max-width: 1200px) {
+  .nav .navOpenBtn,
+  .nav .navCloseBtn {
+    display: block;
+  }
+  .nav {
+    padding: 15px 20px;
+  }
+  .nav .nav-links {
+    position: fixed;
+    top: 0;
+    left: -100%;
+    height: 100%;
+    max-width: 280px;
+    width: 100%;
+    padding-top: 100px;
+    row-gap: 30px;
+    flex-direction: column;
+    background-color: #ffcc00;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    transition: all 0.4s ease;
+    z-index: 100;
+  }
+  .nav.openNav .nav-links {
+    left: 0;
+    background-color: black;
+  }
+  .nav .navOpenBtn {
+    color: #353842;
+    font-size: 20px;
+    cursor: pointer;
+  }
+  .nav .navCloseBtn {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    color: #353842;
+    font-size: 20px;
+    cursor: pointer;
+  }
+  .nav .search-box {
+    top: calc(100% + 10px);
+    max-width: calc(100% - 20px);
+    right: 50%;
+    transform: translateX(50%);
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  }
+}
+
+/* nav {
+    padding: 5px 5%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px,
+      rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
+    z-index: 1;
+  }
+  nav .logo {
+    display: flex;
+    align-items: center;
+  }
+  nav .logo img {
+    height: 50px;  /* Changed height 
+    width: auto;
+    margin-right: 10px;
+    font-size: 20px;
+    border-radius: 5px;
+    cursor: pointer;
+  }
+  nav .logo h1 {
+    font-size: 1.1rem;
+    background: linear-gradient(to right, #b927fc 0%, #2c64fc 100%);
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+  nav ul {
+    list-style: none;
+    display: flex;
+    margin-top: 23px;
+  }
+  nav ul li {
+    margin-left: 1.5rem;
+  }
+  nav ul li a {
+    text-decoration: none;
+    color: #000;
+    font-size: 95%;
+    font-weight: 400;
+    padding: 4px 8px;
+    border-radius: 5px;
+  }
+  nav ul li a:hover {
+    background-color: #f5f5f5;
+  }
+  .hamburger {
+    display: none;
+    cursor: pointer;
+  }
+  .hamburger .line {
+    width: 25px;
+    height: 1px;
+    background-color: #1f1f1f;
+    display: block;
+    margin: 7px auto;
+    transition: all 0.3s ease-in-out;
+  }
+  .hamburger-active {
+    transition: all 0.3s ease-in-out;
+    transition-delay: 0.6s;
+    transform: rotate(45deg);
+  }
+  .hamburger-active .line:nth-child(2) {
+    width: 0px;
+  }
+  .hamburger-active .line:nth-child(1),
+  .hamburger-active .line:nth-child(3) {
+    transition-delay: 0.3s;
+  }
+  .hamburger-active .line:nth-child(1) {
+    transform: translateY(12px);
+  }
+  .hamburger-active .line:nth-child(3) {
+    transform: translateY(-5px) rotate(90deg);
+  }
+  .menubar {
+    position: absolute;
+    top: 0;
+    left: -60%;
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    width: 60%;
+    height: 100vh;
+    padding: 20% 0;
+    background: rgba(255, 255, 255);
+    transition: all 0.5s ease-in;
+    z-index: 2;
+  }
+  .active {
+    left: 0;
+    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
+  }
+  .menubar ul {
+    padding: 0;
+    list-style: none;
+  }
+  .menubar ul li {
+    margin-bottom: 32px;
+   
+  }
+  .menubar ul li a {
+    text-decoration: none;
+    color: #000;
+    font-size: 95%;
+    font-weight: 400;
+    padding: 5px 10px;
+    border-radius: 5px;
+  }
+  .menubar ul li a:hover {
+    background-color: #f5f5f5;
+  }
+  .menubar .login {
+    background-color: #28a745;  /* Changed to green 
+    
+  }
+  @media screen and (max-width: 1000px) {
+    .hamburger {
+      display: block;
+    }
+    nav ul {
+      display: none;
+    }
+    .login{
+        display: none;
+    }
+  } */
+
+/* .menubar ul .login:hover {
+    background-color: #4caf50;
+    color: white;
+    border: 1px solid #4caf50;
+    border-radius: 5px;
+  } */
diff --git a/index.html b/index.html
index 67489ee..962a1bf 100644
--- a/index.html
+++ b/index.html
@@ -2,71 +2,25 @@
 <html lang="en">
 
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Studentify</title>
-    <link rel="icon" href="img/favicon.ico" type="image/x-icon">
-    <link rel="stylesheet" href="./style.css">
-    <link rel="stylesheet" href="./Chatbot/chat.css">
-    <script src="./navigateToPages/scriptDashboard.js"></script>
-    <script src="./Chatbot/chat.js" defer></script>
-    <script src="https://cdn.tailwindcss.com"></script>
-    <link href="./output.css" rel="stylesheet">
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@48,400,1,0" />
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
-    <style>
-
-
-    /* Scroll to Top Button */
-      #scrollToTopBtn {
-          display: none;
-          position: fixed;
-          bottom: 85px;
-          right: 40px;
-          height: 50px;
-          width: 50px;
-          background-color: rgb(80, 183, 218);
-          color: white;
-          border: none;
-          border-radius: 50%;
-          padding: 10px;
-          cursor: pointer;
-          font-size: 15px;
-      }
-      .theme-dark  #scrollToTopBtn{
-        background-color:  #ffc107;
-      }
-      .theme-dark #scrollToTopBtn:hover{
-        background-color: #4caf50 ;
-      }
-
-      #scrollToTopBtn:hover {
-          background-color: rgb(80, 183, 218);
-
-        }
-  header {
-      position: -webkit-sticky; /* For Safari */
-      position: sticky;
-      top: 0;
-      z-index: 1000; /* Adjust as needed */
-    
-}
-
-.content { height: 2000px; /* Example content height to test scrolling */ 
-  padding: 20px; 
-  background-color: #f4f4f4;
- }
-
-html, body {
-  height: 100%;
-  margin: 0;
-}
-
-   
-</style>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Studentify</title>
+  <link rel="icon" href="img/favicon.ico" type="image/x-icon">
+  <link rel="stylesheet" href="./style.css">
+  <link rel="stylesheet" href="./Chatbot/chat.css">
+  <script src="./navigateToPages/scriptDashboard.js"></script>
+  <script src="./Chatbot/chat.js" defer></script>
+  <link href="./output.css" rel="stylesheet">
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
+    integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+  <link rel="stylesheet"
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
+  <link rel="stylesheet"
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@48,400,1,0" />
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
+  <link rel="stylesheet" href="index.css">
+  <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css" />
 </head>
 
 <body >
@@ -78,13 +32,10 @@
             <li>
               <svg onclick=hideSidebar() xmlns="http://www.w3.org/2000/svg" height="27px" viewBox="0 -960 960 960" width="27px" fill="#000000"><path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/></svg>
             </li>
-            <li><a href="../navigateToPages/aboutus.html">About Us</a></li>
-            <li><a href="../navigateToPages/profile.html">STUDENT Profile</a></li>
-            <li><a href="./index.html">QNA</a></li>
-            <li><a href="../navigateToPages/contact.html">CALENDAR</a></li>
-            <li><a href="../navigateToPages/faq2.html">FAQ</a></li>
-            <li><a href="./Contributors/contributor.html">CONTRIBUTORS</a></li>
-            <li><a href="contactus.html">CONTACT US</a></li>
+            <li><a href="./navigateToPages/aboutus.html">About Us</a></li>
+            <li><a href="./navigateToPages/profile.html">STUDENT Profile</a></li>
+            <li><a href="./navigateToPages/contact.html">CALENDAR</a></li>
+            <li><a href="./navigateToPages/faq2.html">FAQ</a></li>
             <li>
               <a href="./navigateToPages/services.html">
                 Explore
@@ -139,7 +90,6 @@
             <li><a href="../navigateToPages/contact.html">CALENDAR</a></li>
             <li><a href="../navigateToPages/faq2.html">FAQ</a></li>
             <li><a href="./Contributors/contributor.html">CONTRIBUTORS</a></li>
-            <li><a href="./navigateToPages/drag-drop.html">TASK MANAGER</a></li>
             <li><a href="contactus.html">CONTACT US</a></li>
 
           </ul>
@@ -219,158 +169,206 @@
         <br>
     </div>
 
-    
 
-    <!--students testimonials section-->
-    <div class="testimonial_wrapper">
-      <h1>Instights from studentify users</h1>
-      <h5>Experiences from Our Students ..</h5>
-      <!--cards-->
-      <div class="cards">
-        <div class="card" style="background-color: rgba(159, 213, 234, 0.5);">
-          <img src="./img/testimonial users/user (1).jpg" alt="user1">
-          <p class="para" style="color:#fff;">Student-ify transformed my learning experience, providing the perfect tools
-            for collaborative projects and making online study sessions more effective.</p>
-          <h4 class="h4">Priya</h4>
-          <h4 class="h4">CSE Major</h4>
-          <i class="fa-solid fa-quote-left"></i>
+
+  <!--students testimonials section-->
+  <div class="testimonial_wrapper">
+    <h1>Instights from studentify users</h1>
+    <h5>Experiences from Our Students ..</h5>
+    <!--cards-->
+    <div class="cards">
+      <div class="card" style="background-color: rgba(159, 213, 234, 0.5);">
+        <img src="./img/testimonial users/user (1).jpg" alt="user1">
+        <p class="para" style="color:#fff;">Student-ify transformed my learning experience, providing the perfect tools
+          for collaborative projects and making online study sessions more effective.</p>
+        <h4 class="h4">Priya</h4>
+        <h4 class="h4">CSE Major</h4>
+        <i class="fa-solid fa-quote-left"></i>
+      </div>
+      <div class="card" style="background-color: rgba(159, 213, 234, 0.5);">
+        <img src="./img/testimonial users/user(2).jpg" alt="user2">
+        <p class="para" style="color:#fff;">Thanks to Student-ify, I've been able to connect with peers and access
+          resources that have significantly boosted my academic performance.</p>
+        <h4 class="h4">Arjun</h4>
+        <h4 class="h4"> IT student</h4>
+        <i class="fa-solid fa-quote-left"></i>
+      </div>
+      <div class="card" style="background-color: rgba(159, 213, 234, 0.5);">
+        <img src="./img/testimonial users/user3.jpg" alt="user3">
+        <p class="para" style="color:#fff;">Student-ify has made remote learning so much easier, offering a seamless
+          platform for teamwork and accessing study materials.<br />.Absolutely, "Approved!" 🚀.</p>
+        <h4 class="h4">Pragna</h4>
+        <h4 class="h4">Developer</h4>
+        <i class="fa-solid fa-quote-left"></i>
+      </div>
+      <div class="card" style="background-color: rgba(159, 213, 234, 0.5);">
+        <img src="./img/testimonial users/user (4).jpg" alt="user4">
+        <p class="para" style="color:#fff;">Interactive study tools and peer support on Studentify have boosted my
+          academic performance. It's been essential for staying motivated and on track.</p>
+        <h4 class="h4">Roy</h4>
+        <h4 class="h4">Analyst</h4>
+        <i class="fa-solid fa-quote-left"></i>
+      </div>
+    </div>
+  </div>
+
+ 
+
+
+
+  <div class="px-4 pt-16 mx-auto sm:max-w-xl md:max-w-full lg:max-w-screen-xl md:px-24 lg:px-8">
+    <div class="grid gap-10 row-gap-6 mb-8 sm:grid-cols-2 lg:grid-cols-4">
+      <div class="sm:col-span-2">
+        <a href="/" aria-label="Go home" title="Company" class="inline-flex items-center">
+          <svg class="w-8 text-deep-purple-accent-400" viewBox="0 0 24 24" stroke-linejoin="round" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" stroke="currentColor" fill="none">
+            <rect x="3" y="1" width="7" height="12"></rect>
+            <rect x="3" y="17" width="7" height="6"></rect>
+            <rect x="14" y="1" width="7" height="6"></rect>
+            <rect x="14" y="11" width="7" height="12"></rect>
+          </svg>
+          <span class="ml-2 text-xl font-bold tracking-wide text-gray-800 uppercase">About</span>
+        </a>
+        <div class="mt-6 lg:max-w-sm">
+          <p class="text-sm text-gray-800">
+            Welcome to STUDENTIFY, your go-to platform for unlocking academic potential and broadening horizons. We empower students with tailored resources, expert-led courses, and a dynamic learning environment to foster growth, curiosity, and critical thinking for success..
+          </p>
         </div>
-        <div class="card" style="background-color: rgba(159, 213, 234, 0.5);">
-          <img src="./img/testimonial users/user(2).jpg" alt="user2">
-          <p class="para" style="color:#fff;">Thanks to Student-ify, I've been able to connect with peers and access
-            resources that have significantly boosted my academic performance.</p>
-          <h4 class="h4">Arjun</h4>
-          <h4 class="h4"> IT student</h4>
-          <i class="fa-solid fa-quote-left"></i>
+      </div>
+      <div class="space-y-2 text-sm">
+        <p class=" font-bold tracking-wide text-gray-900 text-2xl">Quick Links</p>
+        <div class="flex">
+          <a href="index.html" class="mr-1 text-black font-bold hover:text-red-500">About Us</a>
         </div>
-        <div class="card" style="background-color: rgba(159, 213, 234, 0.5);">
-          <img src="./img/testimonial users/user3.jpg" alt="user3">
-          <p class="para" style="color:#fff;">Student-ify has made remote learning so much easier, offering a seamless
-            platform for teamwork and accessing study materials.<br />.Absolutely, "Approved!" 🚀.</p>
-          <h4 class="h4">Pragna</h4>
-          <h4 class="h4">Developer</h4>
-          <i class="fa-solid fa-quote-left"></i>
+        <div class="flex">
+          <a href="./navigateToPages/profile.html" class="mr-1 text-gray-800 font-bold hover:text-red-500">Student Profile</a>
         </div>
-        <div class="card" style="background-color: rgba(159, 213, 234, 0.5);">
-          <img src="./img/testimonial users/user (4).jpg" alt="user4">
-          <p class="para" style="color:#fff;">Interactive study tools and peer support on Studentify have boosted my
-            academic performance. It's been essential for staying motivated and on track.</p>
-          <h4 class="h4">Roy</h4>
-          <h4 class="h4">Analyst</h4>
-          <i class="fa-solid fa-quote-left"></i>
+        <div class="flex">
+          <a href="./navigateToPages/faq2.html" class="mr-1 text-black  font-bold  hover:text-red-500">FAQ</a>
         </div>
-      </div>
-    </div>
-  
-<footer class="footer">
-      <div class="footer-container">
-        <div class="footer-section" style="max-width: 400px;">
-          <h4>About</h4>
-          <p style="color: rgb(8, 56, 8); font-weight: 500; ">Welcome to STUDENTIFY, your go-to platform for unlocking academic potential and broadening horizons. We empower students with tailored resources, expert-led courses, and a dynamic learning environment to foster growth, curiosity, and critical thinking for success..</p>
+        <div class="flex">
+          <a href="Contributors/contributor.html" class="mr-1 text-black  font-bold hover:text-red-500">Contributors</a>
         </div>
-        <div class="footer-section" style="margin-left: 0px; margin-right: 0px;">
-          <h4>Quick Links</h4>
-          <ul>
-            <li><a href="navigateToPages\aboutus.html">About us</a></li>
-            <li><a href="navigateToPages\profile.html">Student Profile</a></li>
-            <li><a href="navigateToPages\faq2.html">FAQ</a></li>
-            <li><a href="Contributors\contributor.html">Contributors</a></li>
-            <li><a href="contactus.html">Contact Us</a></li>
-          </ul>
+        <div class="flex">
+          <a href="contactus.html" class="mr-1 text-gray-800 font-bold hover:text-red-500">Contact Us</a>
         </div>
-        <div class="footer-section" style="margin-left: 0;">
-          <h4>Follow Us</h4>
-          <div class="social-icons">
-            <a href="#" aria-label="Facebook"><i class="fab fa-facebook"></i></a>
-            <a href="#" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
-            <a href="#" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
-            <a href="#" aria-label="LinkedIn"><i class="fab fa-linkedin"></i></a>
-          </div>
+      </div>
+      <div>
+        <span class="text-base font-bold tracking-wide text-gray-900">Social</span>
+        <div class="flex items-center mt-1 space-x-3">
+          <a href="/" class="text-gray-500 transition-colors duration-300 hover:text-deep-purple-accent-400">
+            <svg viewBox="0 0 24 24" fill="currentColor" class="h-5">
+              <path
+                d="M24,4.6c-0.9,0.4-1.8,0.7-2.8,0.8c1-0.6,1.8-1.6,2.2-2.7c-1,0.6-2,1-3.1,1.2c-0.9-1-2.2-1.6-3.6-1.6 c-2.7,0-4.9,2.2-4.9,4.9c0,0.4,0,0.8,0.1,1.1C7.7,8.1,4.1,6.1,1.7,3.1C1.2,3.9,1,4.7,1,5.6c0,1.7,0.9,3.2,2.2,4.1 C2.4,9.7,1.6,9.5,1,9.1c0,0,0,0,0,0.1c0,2.4,1.7,4.4,3.9,4.8c-0.4,0.1-0.8,0.2-1.3,0.2c-0.3,0-0.6,0-0.9-0.1c0.6,2,2.4,3.4,4.6,3.4 c-1.7,1.3-3.8,2.1-6.1,2.1c-0.4,0-0.8,0-1.2-0.1c2.2,1.4,4.8,2.2,7.5,2.2c9.1,0,14-7.5,14-14c0-0.2,0-0.4,0-0.6 C22.5,6.4,23.3,5.5,24,4.6z"
+              ></path>
+            </svg>
+          </a>
+          <a href="/" class="text-gray-500 transition-colors duration-300 hover:text-deep-purple-accent-400">
+            <svg viewBox="0 0 30 30" fill="currentColor" class="h-6">
+              <circle cx="15" cy="15" r="4"></circle>
+              <path
+                d="M19.999,3h-10C6.14,3,3,6.141,3,10.001v10C3,23.86,6.141,27,10.001,27h10C23.86,27,27,23.859,27,19.999v-10   C27,6.14,23.859,3,19.999,3z M15,21c-3.309,0-6-2.691-6-6s2.691-6,6-6s6,2.691,6,6S18.309,21,15,21z M22,9c-0.552,0-1-0.448-1-1   c0-0.552,0.448-1,1-1s1,0.448,1,1C23,8.552,22.552,9,22,9z"
+              ></path>
+            </svg>
+          </a>
+          <a href="/" class="text-gray-500 transition-colors duration-300 hover:text-deep-purple-accent-400">
+            <svg viewBox="0 0 24 24" fill="currentColor" class="h-5">
+              <path
+                d="M22,0H2C0.895,0,0,0.895,0,2v20c0,1.105,0.895,2,2,2h11v-9h-3v-4h3V8.413c0-3.1,1.893-4.788,4.659-4.788 c1.325,0,2.463,0.099,2.795,0.143v3.24l-1.918,0.001c-1.504,0-1.795,0.715-1.795,1.763V11h4.44l-1,4h-3.44v9H22c1.105,0,2-0.895,2-2 V2C24,0.895,23.105,0,22,0z"
+              ></path>
+            </svg>
+          </a>
         </div>
       </div>
+    </div>
+    <div class="flex flex-col-reverse justify-between pt-5 pb-10 border-t lg:flex-row">
+      <p class="text-sm text-gray-600">
+        © 2024 Studentify. All rights reserved.
+      </p>
+    </div>
+  </div>
 
-          
-      <div class="footer-bottom">
-        <p style="color: rgb(8, 56, 8);">&copy; 2024 Studentify. All rights reserved. </p>
-        <p style="margin-top: 8px; color: rgb(8, 56, 8);">Made with love 💖</p>
-          
-      </div>
-    </footer>
-    
 
-    <button class="chatbot-toggler">
-        <span class="material-symbols-rounded">mode_comment</span>
-        <span class="material-symbols-outlined">close</span>
-    </button>
-    <div class="chatbot">
-        <header>
-            <h2>Chatbot</h2>
-            <span class="close-btn material-symbols-outlined">close</span>
-        </header>
-        <ul class="chatbox">
-            <li class="chat incoming">
-                <span class="material-symbols-outlined">smart_toy</span>
-                <p>Hi there 👋<br>How can I help you today?</p>
-            </li>
-        </ul>
-        <div class="chat-input">
-            <textarea placeholder="Enter a message..." spellcheck="false" required></textarea>
-            <span id="send-btn" class="material-symbols-rounded">send</span>
-        </div>
-    </div>
 
-    <script src="./script.js"></script>
-   <!-- Dark  mode theme -->
+  
+
+  <button class="chatbot-toggler">
+    <span class="material-symbols-rounded">mode_comment</span>
+    <span class="material-symbols-outlined">close</span>
+  </button>
+  <div class="chatbot">
+    <header>
+      <h2>Chatbot</h2>
+      <span class="close-btn material-symbols-outlined">close</span>
+    </header>
+    <ul class="chatbox">
+      <li class="chat incoming">
+        <span class="material-symbols-outlined">smart_toy</span>
+        <p>Hi there 👋<br>How can I help you today?</p>
+      </li>
+    </ul>
+    <div class="chat-input">
+      <textarea placeholder="Enter a message..." spellcheck="false" required></textarea>
+      <span id="send-btn" class="material-symbols-rounded">send</span>
+    </div>
+  </div>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js" integrity="sha512-7eHRwcbYkK4d9g/6tD/mhkf++eoTHwpNM9woBxtPUBWm67zeAfFC+HrdoE2GanKeocly/VxeLvIqwvCdk7qScg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+  <script src="./script.js"></script>
+  <script src="index.js"></script>
+  <!-- Dark  mode theme -->
   <script>
-  // Function to set the theme
-function setTheme(themeName) {
-    document.body.className = themeName;
-    localStorage.setItem('theme', themeName);
-}
+    // Function to set the theme
+    function setTheme(themeName) {
+      document.body.className = themeName;
+      localStorage.setItem('theme', themeName);
+    }
 
-// Function to toggle the theme
-function toggleTheme() {
-    if (document.body.classList.contains('theme-light')) {
+    // Function to toggle the theme
+    function toggleTheme() {
+      if (document.body.classList.contains('theme-light')) {
         setTheme('theme-dark');
-    } else {
+      } else {
         setTheme('theme-light');
+      }
     }
-}
 
-// Immediately invoked function to set the theme on initial load
-(function () {
-    const savedTheme = localStorage.getItem('theme') || 'theme-light';
-    setTheme(savedTheme);
+    // Immediately invoked function to set the theme on initial load
+    (function () {
+      const savedTheme = localStorage.getItem('theme') || 'theme-light';
+      setTheme(savedTheme);
+
+      // Set the checkbox state based on the saved theme
+      const themeToggleCheckbox = document.querySelector('.theme-switch__checkbox');
+      themeToggleCheckbox.checked = savedTheme === 'theme-dark';
+    })();
 
-    // Set the checkbox state based on the saved theme
-    const themeToggleCheckbox = document.querySelector('.theme-switch__checkbox');
-    themeToggleCheckbox.checked = savedTheme === 'theme-dark';
-})();
 
-   
-</script>
+  </script>
 
 
-     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
-     <script>
-      // Get the button
-      let mybutton = document.getElementById("scrollToTopBtn");
-    
-      // When the user scrolls down 20px from the top of the document, show the button
-      window.onscroll = function () {
-          if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
-              mybutton.style.display = "block";
-          } else {
-              mybutton.style.display = "none";
-          }
-      };
-    
-      // When the user clicks on the button, scroll to the top of the document
-      mybutton.onclick = function () {
-          document.body.scrollTop = 0;
-          document.documentElement.scrollTop = 0;
-      };
-    </script>
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
+    integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
+    crossorigin="anonymous"></script>
+    <script src="https://cdn.tailwindcss.com"></script>
+
+  <script>
+    // Get the button
+    let mybutton = document.getElementById("scrollToTopBtn");
+
+    // When the user scrolls down 20px from the top of the document, show the button
+    window.onscroll = function () {
+      if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+        mybutton.style.display = "block";
+      } else {
+        mybutton.style.display = "none";
+      }
+    };
+
+    // When the user clicks on the button, scroll to the top of the document
+    mybutton.onclick = function () {
+      document.body.scrollTop = 0;
+      document.documentElement.scrollTop = 0;
+    };
+  </script>
 </body>
 
-</html>
+</html>
\ No newline at end of file
diff --git a/index.js b/index.js
new file mode 100644
index 0000000..eadc578
--- /dev/null
+++ b/index.js
@@ -0,0 +1,37 @@
+const nav = document.querySelector(".nav"),
+  searchIcon = document.querySelector("#searchIcon"),
+  navOpenBtn = document.querySelector(".navOpenBtn"),
+  navCloseBtn = document.querySelector(".navCloseBtn");
+
+searchIcon.addEventListener("click", () => {
+  nav.classList.toggle("openSearch");
+  nav.classList.remove("openNav");
+  if (nav.classList.contains("openSearch")) {
+    return searchIcon.classList.replace("uil-search", "uil-times");
+  }
+  searchIcon.classList.replace("uil-times", "uil-search");
+});
+
+navOpenBtn.addEventListener("click", () => {
+  nav.classList.add("openNav");
+  nav.classList.remove("openSearch");
+  searchIcon.classList.replace("uil-times", "uil-search");
+});
+navCloseBtn.addEventListener("click", () => {
+  nav.classList.remove("openNav");
+});
+
+const tl = gsap.timeline()
+tl.from(".logo", {
+  y: -20,
+  opacity:0,
+})
+tl.from(".nav-links li", {
+  y: -20,
+  opacity:0,
+  stagger:1
+})
+tl.from(".uil", {
+  opacity:0,
+  stagger:1
+})
\ No newline at end of file
diff --git a/navigateToPages/profile.html b/navigateToPages/profile.html
index a5e1c29..9e153f3 100644
--- a/navigateToPages/profile.html
+++ b/navigateToPages/profile.html
@@ -16,7 +16,6 @@
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@48,400,1,0" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
-    <script src="https://cdn.tailwindcss.com"></script>
     <link href="./output.css" rel="stylesheet">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
     <style>
@@ -71,7 +70,7 @@
 <body>
 
     <!--navbar-->
-   <header>
+   <!-- <header>
 
     <div>
         <ul class="sidebar">
@@ -186,7 +185,30 @@
     <div class="menu">
       <svg class="menu-button" onclick=showSidebar() style="cursor: pointer;" xmlns="http://www.w3.org/2000/svg" height="27px" viewBox="0 -960 960 960" width="27px" fill="#000000"><path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z"/></svg>
     </div>
-  </header>
+  </header> -->
+
+
+  <nav class="nav">
+    <i class="uil uil-bars navOpenBtn"></i>
+    <a href="#" class="logo" style="margin-top: 15px;">Studentify</a>
+
+    <ul class="nav-links">
+      <i class="uil uil-times navCloseBtn"></i>
+      <li><a href="./navigateToPages/aboutus.html">About Us</a></li>
+      <li><a href="./navigateToPages/profile.html">Student Profile</a></li>
+      <li><a href="./navigateToPages/QnACommunity/index.html">QNA</a></li>
+      <li><a href="./navigateToPages/contact.html">Calender</a></li>
+      <li><a href="../navigateToPages/faq2.html">FAQ</a></li>
+      <li><a href="./Contributors/contributor.html">CONTRIBUTORS</a></li>
+      <li><a href="contactus.html">CONTACT US</a></li>
+    </ul>
+
+    <i class="uil uil-search search-icon" id="searchIcon" style="margin-top: 15px;"></i>
+    <div class="search-box">
+      <i class="uil uil-search search-icon"></i>
+      <input type="text" placeholder="Search here..." />
+    </div>
+  </nav>
 
 
 <!--navbar ends here-->
diff --git a/style.css b/style.css
index d1dbbdb..cb154ec 100644
--- a/style.css
+++ b/style.css
@@ -582,9 +582,9 @@ p{
 }
 li a,a:visited{
     text-decoration: none;
-    font-size: 1.2rem;
+    /* font-size: 1.2rem; */
     color: #000;
-    font-weight: bold;
+    /* font-weight: bold; */
     text-transform: uppercase;
     transition: all 0.4s;
 }
