diff --git a/frontend/src/components/Footer/footer.css b/frontend/src/components/Footer/footer.css
index 317394f..8360278 100644
--- a/frontend/src/components/Footer/footer.css
+++ b/frontend/src/components/Footer/footer.css
@@ -1,235 +1,279 @@
-/* footer.css */
-footer {
-  background-color: #2B4B77; /* Updated background for better contrast */
-  color: #ffffff;
-  padding: 60px 80px;
-  border-top: 5px solid #1565C0;
-  text-align: left;
-  position: relative;
-  overflow: hidden;
-  background: linear-gradient(-45deg, #2B4B77, #3D6DA3, #1565C0, #4A73B5);
-  background-size: 400% 400%;
-  animation: gradientBG 5s ease-in-out infinite;
-}
-
-/* Add a subtle background pattern */
-
-.footer-content {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  gap: 40px;
-  position: relative;
-  z-index: 1;
-}
-
-.footer-main {
-  flex: 1;
-}
-
-.footer-socials {
-  text-align: right;
-}
-
-.footer-socials h4 {
-  font-size: 28px; /* Increased from 24px */
-  margin-bottom: 20px; /* Slightly increased from 15px */
-  font-weight: 600; /* Added for emphasis */
-  color: #ffffff; /* Ensuring high contrast */
-  text-transform: uppercase; /* Optional: adds more emphasis */
-  letter-spacing: 1px; /* Optional: improves readability for uppercase text */
-  animation: float 3s ease-in-out infinite;
-}
-
-.social-icons {
-  display: flex;
-  justify-content: flex-end;
-  gap: 20px;
-}
-
-.social-icons a {
-  color: #e0e7ff;
-  font-size: 24px;
-  transition: color 0.3s ease, transform 0.3s ease;
-  display: inline-block;
-  position: relative;
-}
-
-.social-icons a::after {
-  content: '';
-  position: absolute;
-  width: 100%;
-  height: 2px;
-  bottom: -5px;
-  left: 0;
-  background-color: #FFD700;
-  visibility: hidden;
-  transform: scaleX(0);
-  transition: all 0.3s ease-in-out;
-}
-
-.social-icons a:hover::after {
-  visibility: visible;
-  transform: scaleX(1);
-}
-
-.social-icons a:hover {
-  color: #ffffff;
-  transform: scale(1.2) rotate(5deg);
-}
-
-.copyright {
-  text-align: center;
-  margin-top: 40px;
-  font-size: 14px;
-  color: #b0c7e1;
-  opacity: 0.8;
-  transition: opacity 0.3s ease;
-  position: relative;
-  overflow: hidden;
-}
-
-.copyright::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: -100%;
-  width: 100%;
-  height: 100%;
-  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
-  transition: 0.5s;
-}
-
-.copyright:hover::before {
-  left: 100%;
-}
-
-.copyright:hover {
-  opacity: 1;
-}
-
-@keyframes fadeIn {
-  from { opacity: 0; transform: translateY(20px); }
-  to { opacity: 1; transform: translateY(0); }
-}
-
-.footer-main, .footer-socials {
-  animation: fadeIn 0.8s ease-out;
-}
-
-.footer-main {
-  animation-delay: 0.2s;
-}
-
-.footer-socials {
-  animation-delay: 0.4s;
-}
-
-.footer-title {
-  font-size: 32px; /* Increased font size for better visibility */
-  font-weight: 700;
-  margin-bottom: 5px;
-  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
-}
-
-.footer-description {
-  max-width: 600px;
-  line-height: 1.8;
-  margin-bottom: 20px;
-  color: #e0e7ff; /* Lighter color for better readability */
-}
-
-.footer-buttons {
-  display: flex;
-  gap: 20px; /* Increased gap for visual clarity */
-  flex-wrap: wrap;
-}
-
-.btn {
-  background-color: #3D6DA3; /* Lighter shade to contrast with background */
-  color: #ffffff;
-  padding: 14px 32px;
-  border: none;
-  cursor: pointer;
-  border-radius: 8px; /* Softer corner radius */
-  font-size: 16px;
-  font-weight: 600;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow for a modern look */
-  transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
-  position: relative;
-  overflow: hidden;
-}
-
-.btn::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: -100%;
-  width: 100%;
-  height: 100%;
-  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.3), transparent);
-  transition: all 0.6s;
-}
-
-.btn:hover::before {
-  left: 100%;
-}
-
-.btn:hover {
-  background-color: #4A73B5; /* Darker shade on hover */
-  transform: translateY(-3px); /* Lift effect */
-  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
-  color: #FFD700; /* Gold color on hover */
-}
-
-.btn:active {
-  transform: translateY(-1px);
-  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
-}
-
-.btn-light {
-  background-color: #5678B3; /* Lighter button style */
-  color: #ffffff;
-}
-
-hr {
-  margin: 30px 0;
-  border: none;
-  height: 1px;
-  background: linear-gradient(to right, transparent, #b0c7e1, transparent);
-}
-
-.social-links {
-  display: flex;
-  justify-content: flex-start;
-  gap: 25px; /* Increased spacing */
-  margin-top: 30px;
-}
-
-.social-links a {
-  color: #e0e7ff; /* Light color for links */
-  text-decoration: none;
-  font-size: 16px;
-  transition: color 0.3s ease;
-}
-
-.social-links a:hover {
-  color: #ffffff;
-  text-decoration: underline;
-}
-
-@keyframes gradientBG {
-  0% { background-position: 0% 50%; }
-  50% { background-position: 100% 50%; }
-  100% { background-position: 0% 50%; }
-}
-
-@keyframes float {
-  0% { transform: translateY(0px); }
-  50% { transform: translateY(-10px); }
-  100% { transform: translateY(0px); }
-}
-
-.dark-mode footer{
-background: black !important;
-}
\ No newline at end of file
+
+/* footer.css */
+footer {
+  background-color: #2B4B77; /* Updated background for better contrast */
+  color: #ffffff;
+  padding: 60px 80px;
+  border-top: 5px solid #1565C0;
+  text-align: left;
+  position: relative;
+  overflow: hidden;
+  background: linear-gradient(-45deg, #2B4B77, #3D6DA3, #1565C0, #4A73B5);
+  background-size: 400% 400%;
+  animation: gradientBG 5s ease-in-out infinite;
+}
+
+/* Add a subtle background pattern */
+footer::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-image: linear-gradient(30deg, #3D6DA3 12%, transparent 12.5%, transparent 87%, #3D6DA3 87.5%, #3D6DA3),
+                    linear-gradient(150deg, #3D6DA3 12%, transparent 12.5%, transparent 87%, #3D6DA3 87.5%, #3D6DA3),
+                    linear-gradient(30deg, #3D6DA3 12%, transparent 12.5%, transparent 87%, #3D6DA3 87.5%, #3D6DA3),
+                    linear-gradient(150deg, #3D6DA3 12%, transparent 12.5%, transparent 87%, #3D6DA3 87.5%, #3D6DA3);
+  background-size: 80px 140px;
+  background-position: 0 0, 0 0, 40px 70px, 40px 70px;
+  opacity: 0.1;
+  z-index: 0;
+}
+
+.footer-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 40px;
+  position: relative;
+  z-index: 1;
+}
+
+.footer-main {
+  flex: 1;
+}
+
+.footer-socials {
+  text-align: right;
+}
+
+.footer-socials h4 {
+  font-size: 28px; /* Increased from 24px */
+  margin-bottom: 20px; /* Slightly increased from 15px */
+  font-weight: 600; /* Added for emphasis */
+  color: #ffffff; /* Ensuring high contrast */
+  text-transform: uppercase; /* Optional: adds more emphasis */
+  letter-spacing: 1px; /* Optional: improves readability for uppercase text */
+  animation: float 3s ease-in-out infinite;
+}
+
+.social-icons {
+  display: flex;
+  justify-content: flex-end;
+  gap: 20px;
+}
+
+.social-icons a {
+  color: #e0e7ff;
+  font-size: 24px;
+  transition: color 0.3s ease, transform 0.3s ease;
+  display: inline-block;
+  position: relative;
+}
+
+.social-icons a::after {
+  content: '';
+  position: absolute;
+  width: 100%;
+  height: 2px;
+  bottom: -5px;
+  left: 0;
+  background-color: #FFD700;
+  visibility: hidden;
+  transform: scaleX(0);
+  transition: all 0.3s ease-in-out;
+}
+
+.social-icons a:hover::after {
+  visibility: visible;
+  transform: scaleX(1);
+}
+
+.social-icons a:hover {
+  color: #ffffff;
+  transform: scale(1.2) rotate(5deg);
+}
+
+.copyright {
+  text-align: center;
+  margin-top: 40px;
+  font-size: 14px;
+  color: #b0c7e1;
+  opacity: 0.8;
+  transition: opacity 0.3s ease;
+  position: relative;
+  overflow: hidden;
+}
+
+.copyright::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+  transition: 0.5s;
+}
+
+.copyright:hover::before {
+  left: 100%;
+}
+
+.copyright:hover {
+  opacity: 1;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(20px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.footer-main, .footer-socials {
+  animation: fadeIn 0.8s ease-out;
+}
+
+.footer-main {
+  animation-delay: 0.2s;
+}
+
+.footer-socials {
+  animation-delay: 0.4s;
+}
+
+.footer-title {
+  font-size: 32px; /* Increased font size for better visibility */
+  font-weight: 700;
+  margin-bottom: 5px;
+  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+.footer-description {
+  max-width: 600px;
+  line-height: 1.8;
+  margin-bottom: 20px;
+  color: #e0e7ff; /* Lighter color for better readability */
+}
+
+.footer-buttons {
+  display: flex;
+  gap: 20px; /* Increased gap for visual clarity */
+  flex-wrap: wrap;
+}
+
+.btn {
+  background-color: #3D6DA3; /* Lighter shade to contrast with background */
+  color: #ffffff;
+  padding: 14px 32px;
+  border: none;
+  cursor: pointer;
+  border-radius: 8px; /* Softer corner radius */
+  font-size: 16px;
+  font-weight: 600;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow for a modern look */
+  transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
+  position: relative;
+  overflow: hidden;
+}
+
+.btn::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.3), transparent);
+  transition: all 0.6s;
+}
+
+.btn:hover::before {
+  left: 100%;
+}
+
+.btn:hover {
+  background-color: #4A73B5; /* Darker shade on hover */
+  transform: translateY(-3px); /* Lift effect */
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
+  color: #FFD700; /* Gold color on hover */
+}
+
+.btn:active {
+  transform: translateY(-1px);
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
+}
+
+.btn-light {
+  background-color: #5678B3; /* Lighter button style */
+  color: #ffffff;
+}
+
+hr {
+  margin: 30px 0;
+  border: none;
+  height: 1px;
+  background: linear-gradient(to right, transparent, #b0c7e1, transparent);
+}
+
+.social-links {
+  display: flex;
+  justify-content: flex-start;
+  gap: 25px; /* Increased spacing */
+  margin-top: 30px;
+}
+
+.social-links a {
+  color: #e0e7ff; /* Light color for links */
+  text-decoration: none;
+  font-size: 16px;
+  transition: color 0.3s ease;
+}
+
+.social-links a:hover {
+  color: #ffffff;
+  text-decoration: underline;
+}
+
+@keyframes gradientBG {
+  0% { background-position: 0% 50%; }
+  50% { background-position: 100% 50%; }
+  100% { background-position: 0% 50%; }
+}
+
+@keyframes float {
+  0% { transform: translateY(0px); }
+  50% { transform: translateY(-10px); }
+  100% { transform: translateY(0px); }
+}
+
+/* Media Queries for Footer */
+@media (max-width: 768px) {
+  .footer-content {
+    flex-direction: column; /* Stack footer content vertically */
+    align-items: flex-start; /* Align items to the start */
+  }
+
+  .footer-socials {
+    text-align: left; /* Align socials to the left */
+    margin-top: 20px; /* Add margin for spacing */
+  }
+
+  .footer-buttons {
+    flex-direction: column; /* Stack buttons vertically */
+    gap: 10px; /* Reduce gap for smaller screens */
+  }
+
+  .footer-title {
+    font-size: 24px; /* Reduce title size */
+  }
+
+  .footer-description {
+    font-size: 14px; /* Reduce description size */
+  }
+
+  .copyright {
+    font-size: 12px; /* Reduce copyright size */
+  }
+}
+
diff --git a/frontend/src/components/Navbar/Navbar.css b/frontend/src/components/Navbar/Navbar.css
index b37c4e3..9b95265 100644
--- a/frontend/src/components/Navbar/Navbar.css
+++ b/frontend/src/components/Navbar/Navbar.css
@@ -1,14 +1,16 @@
-/* Nabar.css */
 .navbar {
   background-color: #ffffff;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  padding: 16px;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+  padding: 0;
+  position: relative;
 }
 
 .container {
   display: flex;
   justify-content: space-between;
   align-items: center;
+  height: 60px;
+  padding: 0;
 }
 
 .themechangebtn{
@@ -63,18 +65,131 @@
 .nav-links {
   display: flex;
   list-style: none;
+  margin: 0;
+  padding: 0;
+  align-items: centre;
 }
 
 .nav-links li {
-  margin: 0 12px;
+  margin: 0 20px;
 }
 
 .nav-links a {
   text-decoration: none;
   color: #4a5568;
-  transition: 0.3s;
+  font-size: 16px;
+  font-weight: 500;
+  transition: color 0.3s ease, background-color 0.3s ease;
+  padding: 8px 12px;
+  border-radius: 4px;
+  margin: 0;
+  display: flex;
+  align-items: center;
 }
 
 .nav-links a:hover {
-  color: #4299e1;
+  color: #ffffff;
+  background-color: #4299e1;
+}
+
+.navbar-toggle {
+  background-color: #4299e1;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  font-size: 24px;
+  color: #ffffff;
+  padding: 10px 15px;
+  transition: background-color 0.3s ease, transform 0.2s ease;
+}
+
+.navbar-toggle:hover {
+  background-color: #357ae8;
+  transform: scale(1.05);
+}
+
+.nav-menu {
+  position: fixed;
+  top: 0;
+  right: -250px;
+  width: 250px;
+  height: 100%;
+  background-color: #ffffff;
+  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.3);
+  transition: right 0.3s ease;
+  z-index: 10;
+}
+
+.nav-menu.active {
+  right: 0;
+}
+
+.close-button {
+  background-color: #ff4d4d;
+  border: none;
+  border-radius: 5px;
+  font-size: 30px;
+  color: #ffffff;
+  cursor: pointer;
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  padding: 5px 10px;
+  transition: background-color 0.3s ease, transform 0.2s ease;
+}
+
+.close-button:hover {
+  background-color: #e60000;
+  transform: scale(1.1);
+}
+
+@media (max-width: 768px) {
+  .container {
+    justify-content: space-between;
+  }
+
+  .navbar-toggle {
+    display: block;
+  }
+
+  .nav-links {
+    flex-direction: column;
+    align-items: flex-start;
+    display: none;
+    width: 100%;
+    padding: 16px 0;
+    background-color: #ffffff;
+    position: absolute;
+    top: 60px;
+    left: 0;
+    z-index: 10;
+  }
+
+  .nav-menu.active .nav-links {
+    display: flex;
+  }
+
+  .container {
+    flex-direction: row;
+    align-items: center;
+  }
+
+  .navbar-toggle {
+    margin-left: auto;
+  }
+}
+
+@media (min-width: 769px) {
+  .navbar-toggle {
+    display: none;
+  }
+
+  .nav-links.desktop-links {
+    display: flex;
+    margin-left: auto;
+  }
+
+  .nav-links {
+    display: flex;
+  }
 }
\ No newline at end of file
diff --git a/frontend/src/components/Navbar/Navbar.js b/frontend/src/components/Navbar/Navbar.js
index be11f31..b60f9d0 100644
--- a/frontend/src/components/Navbar/Navbar.js
+++ b/frontend/src/components/Navbar/Navbar.js
@@ -1,49 +1,42 @@
-import React, { useState, useEffect } from "react";import "./Navbar.css";
+import React, { useState } from "react";
+import "./Navbar.css";
 
 function Navbar() {
+  const [isActive, setIsActive] = useState(false);
 
-  const [theme, setTheme] = useState("light");
-  useEffect(() => {
-    const storedTheme = localStorage.getItem("theme");
-    if (storedTheme) {
-      setTheme(storedTheme);
-    }
-  }, []);
-
-  useEffect(() => {
-    localStorage.setItem("theme", theme);
-    document.body.classList.toggle("dark-mode", theme === "dark");
-  }, [theme]);
-
-  const toggleTheme = () => {
-    if (theme === "light") {
-      setTheme("dark");
-      document.body.classList.add("dark-mode");
-    } else {
-      setTheme("light");
-      document.body.classList.remove("dark-mode");
-    }
+  const toggleNavbar = () => {
+    setIsActive(!isActive);
+  };
 
+  const closeNavbar = () => {
+    setIsActive(false);
   };
+
   return (
-    <nav className="navbar">
+    <nav className={`navbar`}>
       <div className="container">
         <img src="/images/e1.png" alt="Logo" className="logo" />
+        <button className="navbar-toggle" onClick={toggleNavbar}>
+          ☰ {/* Hamburger icon */}
+        </button>
+      </div>
+      <ul className="nav-links desktop-links">
+        <li><a href="/">Home</a></li>
+        <li><a href="/about">About Us</a></li>
+        <li><a href="/contact">Contact Us</a></li>
+      </ul>
+      <div className={`nav-menu ${isActive ? 'active' : ''}`}>
+        <button className="close-button" onClick={closeNavbar}>
+          &times; {/* Close icon */}
+        </button>
         <ul className="nav-links">
-          <li><a href="/">Home</a></li>
-          <li><a href="/about">About Us</a></li>
-          <li><a href="/contact">Contact Us</a></li>
+          <li><a href="/" onClick={closeNavbar}>Home</a></li>
+          <li><a href="/about" onClick={closeNavbar}>About Us</a></li>
+          <li><a href="/contact" onClick={closeNavbar}>Contact Us</a></li>
         </ul>
-        <button type="button" className="themechangebtn" onClick={toggleTheme}>
-          {theme === "light" ? (
-            <img src="./images/moon.png" className="themeLogo" />
-          ) : (
-            <img src="./images/sun.png" className="themeLogo"/>
-          )}
-        </button>
       </div>
     </nav>
   );
 }
 
-export default Navbar;
\ No newline at end of file
+export default Navbar;
diff --git a/frontend/src/pages/Home/Hom.css b/frontend/src/pages/Home/Hom.css
index 5b6614e..a817a57 100644
--- a/frontend/src/pages/Home/Hom.css
+++ b/frontend/src/pages/Home/Hom.css
@@ -154,20 +154,37 @@ body, html {
   padding: 12px 0;
 }
 
-.dark-mode .main-content{
-  background-color: black;
+@media (max-width: 768px) {
+  .intro-section {
+    flex-direction: column; /* Stack elements vertically on smaller screens */
+    align-items: flex-start; /* Align items to the start */
+  }
+
+  .lottie-animation {
+    width: 100%; /* Make the animation responsive */
+    height: auto; /* Maintain aspect ratio */
+  }
+
+  .title {
+    font-size: 36px; /* Reduce title size */
+  }
+
+  .subtitle {
+    font-size: 18px; /* Reduce subtitle size */
+  }
+
+  .button-group {
+    flex-direction: column; /* Stack buttons vertically */
+    margin-top: 8px; /* Adjust margin */
+  }
+
+  .btn-default, .btn-outline {
+    width: 100%; /* Make buttons full width */
+    margin-right: 0; /* Remove right margin */
+    margin-bottom: 8px; /* Add bottom margin for spacing */
+  }
+
+  .card-grid {
+    grid-template-columns: 1fr; /* Stack cards vertically */
+  }
 }
-
-.dark-mode .intro-text h1{
-  color: #fff;
-}
-
-.dark-mode .card{
-  background-color: black;
-  border: 2px solid #fff;
-}
-
-.dark-mode .card-header{
-  border-bottom: 1px solid #fff;
-  color: #fff;
-}
\ No newline at end of file