diff --git a/.env b/.env
index 0c252e01..96b12f4a 100644
--- a/.env
+++ b/.env
@@ -8,4 +8,4 @@ GOOGLE_CLIENT_SECRET=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
 GOOGLE_AUTH_URI=https://imagine-ai-17zf.vercel.app/auth/google/callback
 
 
-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
\ No newline at end of file
+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
diff --git a/views/aboutUs.ejs b/views/aboutUs.ejs
index f2f7dfa1..e9f66409 100644
--- a/views/aboutUs.ejs
+++ b/views/aboutUs.ejs
@@ -3,8 +3,9 @@
 <%- include('includes/PRE.ejs') %>
 
   <%- include('includes/header.ejs') %>
+  
+
 
-  <!-- <%- include('includes/sidebar.ejs') %> -->
 
     <script src="https://kit.fontawesome.com/c4254e24a8.js"></script>
 
diff --git a/views/contactUs.ejs b/views/contactUs.ejs
index fb489734..6255ad8a 100644
--- a/views/contactUs.ejs
+++ b/views/contactUs.ejs
@@ -1,5 +1,6 @@
+<%- include('includes/PRE.ejs') %>
 <%- include('includes/header.ejs') %>
-  <%- include('includes/sidebar.ejs') %>
+  
     <link rel="stylesheet" href="../public/css/style.css">
     <script src="https://kit.fontawesome.com/c4254e24a8.js"></script>
     <style>
@@ -86,8 +87,191 @@
       }
     </style>
     </head>
-    <%- include('includes/navbar.ejs') %>
       <main>
+        <header>
+          <div class="navbar">
+            <div class="nav-container">
+              <!-- Dark mode toggle button -->
+              <div
+                id="dark-mode-icon-mobile"
+                class="dark-mode-toggle dark-mode-icon"
+                onclick="toggleDarkMode()"
+              >
+                <i class="fa-sharp fa-solid fa-sun"></i>
+              </div>
+              <div class="logo-image">
+                <a href="/"
+                  ><img
+                    src="imagine-ai-low-resolution-logo-color-on-transparent-background.png"
+                    class="home-logo"
+                    alt="home-logo"
+                    loading="lazy"
+                  />
+                </a>
+              </div>
+              <div class="nav-links hide-sm nav-style" id="mainNav">
+                <div class="left-nav-links navs">
+                  <div class="logo">
+                    <a
+                      class="AI white-color hover-effect <%= path === '/' ? 'active' : '' %>"
+                      href="/"
+                      >HOME</a
+                    >
+                  </div>
+                  <div class="imagh">
+                    <a
+                      class="AI white-color hover-effect <%= path === '/generateImg' ? 'active' : '' %>"
+                      href="/generateImg"
+                      >IMAGINE - AI</a
+                    >
+                  </div>
+                  <div class="abth">
+                    <a
+                      class="AI white-color hover-effect <%= path === '/aboutUs' ? 'active' : '' %>"
+                      class="AI white-color hover-effect <%= path === '/contactUs' ? 'active' : '' %>"
+                      href="/aboutUs"
+                      >ABOUT - US</a
+                    >
+                  </div>
+                  <div class="conh">
+                    <a
+                      class="AI white-color hover-effect <%= path === '/contactUs' ? 'active' : '' %>"
+                      href="/contactUs"
+                      >CONTACT - US</a
+                    >
+                  </div>
+                  <!-- Rest of the nav links -->
+                <div class="team">
+                  <a class="AI white-color hover-effect <%= path === '/team' ? 'active' : '' %>" href="/team">COMMUNITY</a>
+                </div>
+      <!-- Rest of the right-nav-links -->
+      
+                </div>
+                <div class="right-nav-links">
+                  <!-- Dark mode toggle button -->
+                  <div
+                    id="dark-mode-icon-desktop"
+                    class="dark-mode-toggle dark-mode-icon"
+                    onclick="toggleDarkMode()"
+                  >
+                    <i class="fa-sharp fa-solid fa-sun"></i>
+                  </div>
+                  <div>
+                    <a
+                      class="AI white-color hover-effect"
+                      href="https://openai.com/dall-e-2/"
+                      target="_blank"
+                      >DALL.E 2 - OpenAI API</a
+                    >
+                  </div>
+                </div>
+              </div>
+              <div>
+                <a class="login AI white-color" id="header-btn2" href="/login"
+                  >Login</a
+                >
+              </div>
+              <div onclick="toggleNavbar()" class="barIcon hide-lg hover-effect">
+                <i class="fa-solid fa-bars"></i>
+              </div>
+            </div>
+          </div>
+        </header>
+      
+        <style>
+          /*adjusting nav-bar elements*/
+          .nav-style {
+            display: flex;
+            justify-content: space-between;
+          }
+          .navs {
+            justify-content: space-evenly;
+          }
+          /*adding hover effects to each nav elements*/
+      
+          .nav-container {
+            display: flex;
+            justify-content: space-evenly;
+            align-items: center;
+            width: 100%;
+          }
+      
+          /* Light mode styles */
+          /* .light-mode {    } */
+          .AI {
+            display: inline-block;
+            padding: 10px;
+            margin-left: 25px;
+          }
+          /* Light mode styles
+          .light-mode {
+          } */
+      
+          /* Dark mode styles */
+          .dark-mode {
+            background-color: #121212;
+            color: #ffffff;
+          }
+      
+          /* Dark mode styles for navbar */
+          .dark-mode #navbar {
+            background-color: #121212;
+            color: #ffffff;
+          }
+      
+          /* Dark mode styles for the about section */
+          .dark-mode .about {
+            background-color: #121212;
+            color: #ffffff;
+          }
+      
+          /* Styles for the dark mode toggle button */
+          .dark-mode-toggle {
+            width: fit-content;
+            backdrop-filter: blur(4px);
+            padding: 5px;
+            border-radius: 50%;
+            cursor: pointer;
+            z-index: 999;
+          }
+      
+          .dark-mode-toggle i {
+            transition: transform 0.3s ease-in-out;
+            font-size: 1.1em;
+          }
+      
+          #dark-mode-icon-mobile {
+            position: absolute;
+            right: 20%;
+            display: none;
+          }
+      
+          #dark-mode-icon-desktop {
+            font-size: 1.1rem;
+            display: block;
+          }
+      
+          @media (max-width: 989px) {
+            #dark-mode-icon-mobile {
+              display: block;
+            }
+            #dark-mode-icon-desktop {
+              display: none;
+            }
+          }
+      
+          @media (max-width: 900px) {
+            .navbar {
+              display: none;
+            }
+      
+            #dark-mode-icon-mobile {
+              display: block;
+            }
+          }
+        </style>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
+       
         <section class="Contact-Us">
           <div class="contact-top" id="slide">
             <h1>Contact Us</h1>
@@ -751,4 +935,5 @@
     chatbotId="fZnpFqGqi_Ol7GFejzNXo"
     domain="www.chatbase.co"
     defer>
-    </script>
\ No newline at end of file
+    </script>
+    </main>
\ No newline at end of file