diff --git a/README.md b/README.md
index f45e025..716501c 100644
--- a/README.md
+++ b/README.md
@@ -73,6 +73,7 @@ Make sure you have the following installed:
 8. 🛠️ Install dependencies:
 ```bash
    npm install
+   npm install swiper@latest
    ```
 
 9. 📊 Start the development server:
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index da18530..ee13482 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -35,6 +35,7 @@
         "react-scroll": "^1.9.0",
         "react-slick": "^0.30.2",
         "slick-carousel": "^1.8.1",
+        "swiper": "^11.1.14",
         "web-vitals": "^4.2.3"
       }
     },
@@ -23053,6 +23054,24 @@
         "node": ">=4"
       }
     },
+    "node_modules/swiper": {
+      "version": "11.1.14",
+      "resolved": "https://registry.npmjs.org/swiper/-/swiper-11.1.14.tgz",
+      "integrity": "sha512-VbQLQXC04io6AoAjIUWuZwW4MSYozkcP9KjLdrsG/00Q/yiwvhz9RQyt0nHXV10hi9NVnDNy1/wv7Dzq1lkOCQ==",
+      "funding": [
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/swiperjs"
+        },
+        {
+          "type": "open_collective",
+          "url": "http://opencollective.com/swiper"
+        }
+      ],
+      "engines": {
+        "node": ">= 4.7.0"
+      }
+    },
     "node_modules/symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index be73b32..318a202 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -30,6 +30,7 @@
     "react-scroll": "^1.9.0",
     "react-slick": "^0.30.2",
     "slick-carousel": "^1.8.1",
+    "swiper": "^11.1.14",
     "web-vitals": "^4.2.3"
   },
   "scripts": {
diff --git a/frontend/public/images/moon.png b/frontend/public/images/moon.png
new file mode 100644
index 0000000..136ffd9
Binary files /dev/null and b/frontend/public/images/moon.png differ
diff --git a/frontend/public/images/sun.png b/frontend/public/images/sun.png
new file mode 100644
index 0000000..6c35e41
Binary files /dev/null and b/frontend/public/images/sun.png differ
diff --git a/frontend/src/components/Navbar/Navbar.css b/frontend/src/components/Navbar/Navbar.css
index 1c3d210..9b95265 100644
--- a/frontend/src/components/Navbar/Navbar.css
+++ b/frontend/src/components/Navbar/Navbar.css
@@ -13,6 +13,51 @@
   padding: 0;
 }
 
+.themechangebtn{
+  background-color: #fff;
+}
+
+.themechangebtn:hover{
+  background-color: #fff;
+}
+
+.themechangebtn img{
+  height:25px;
+  width: 25px;
+  background-color: none;
+}
+
+.dark-mode .navbar {
+  background-color: #333;
+  color: #fff;
+}
+
+.dark-mode .nav-links a {
+  color: #fff;
+}
+
+.dark-mode .nav-links a:hover {
+  color: #ccc;
+}
+
+.dark-mode .logo {
+  filter: invert(1);
+}
+
+.theme-button {
+  background-color: #333;
+  color: #fff;
+  border: none;
+  padding: 10px 20px;
+  font-size: 16px;
+  cursor: pointer;
+}
+
+.theme-button:hover {
+  background-color: #444;
+}
+
+
 .logo {
   height: 40px;
 }
diff --git a/frontend/src/pages/About/About.css b/frontend/src/pages/About/About.css
index 92a0b7d..55ed839 100644
--- a/frontend/src/pages/About/About.css
+++ b/frontend/src/pages/About/About.css
@@ -1,167 +1,97 @@
-body,
-html {
-  margin: 0;
-  padding: 0;
-  font-family: "Helvetica Neue", Arial, sans-serif;
-  width: 100%;
-  -webkit-font-smoothing: antialiased; /* Smooth font rendering */
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.scroll-up-btn {
-  position: fixed;
-  bottom: 25px;
-  right: 30px;
-  height: 40px;
-  width: 40px;
-  background-color: #dbf5ef;
-  border-radius: 50%;
-  border: none;
-  justify-content: center;
-  cursor: pointer;
-}
-
 .about-container {
-  width: 100%;
-  background: linear-gradient(
-    to right,
-    #dbecfb,
-    #dbf5ef
-  ); /* Updated background gradient */
+  background: linear-gradient(to right, #DBECFB, #DBF5EF);
 }
 
-.about-main-content {
+.carousel-container {
   width: 100%;
-  margin: 0 auto;
-  padding: 32px 0;
+  padding: 50px 0;
+  text-align: center;
 }
 
-.about-intro-section {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 40vh; /* Make the section take up the full viewport height */
-  padding: 16px 0;
-  justify-content: center;
-  align-items: center;
+.carousel-title {
+  font-size: 48px; 
+  font-weight: 900;
+  text-align: center; 
+  padding-top: 40px;
+  margin-bottom: 20px; 
+  color: #333;
+  text-transform: uppercase; 
 }
 
-.about-intro-text {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  padding: 16px;
-  align-items: center;
-  justify-content: center;
-  text-align: center; /* Ensure the text is centered within the intro-text div */
+.carousel-title::after {
+  content: ""; 
+  display: block;
+  width: 100px; 
+  height: 4px; 
+  background-color: #000; 
+  margin: 10px auto 0;
+  margin-bottom: 20px; 
 }
 
-.about-title {
-  font-size: 56px;
-  color: #18181b; /* Darker text color for better contrast */
-  font-weight: 900; /* Bolder text */
-  line-height: 1.2; /* Improved line-height for better readability */
+.swiper-container {
+  width: 80%;
+  padding-top: 50px;
+  padding-bottom: 50px;
+  margin: 0 auto;
 }
 
-.about-subtitle {
-  font-size: 24px;
-  color: #4a4a4a; /* Slightly darker subtitle */
-  font-weight: 500;
-  line-height: 1.4;
+.swiper-slide {
+  background-position: center;
+  background-size: cover;
+  width: 300px;
+  background-color: #fff;
+  overflow: hidden;
+  border-radius: 10px;
 }
 
-.about-slider-wrapper {
-  padding: 16px;
-  background-color: white;
-  z-index: 10;
-  width: 100%;
+.picture {
+  width: 300px;
+  height: 300px;
+  overflow: hidden;
 }
 
-.about-slider-header {
-  padding: 8px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
+.swiper-container img {
+  display: block;
+  width: 100%;
+  height: 100%;
 }
 
-.about-slider-header > h2 {
-  margin: 0;
+.details {
+  padding: 20px;
+  font-weight: 600;
   text-align: center;
-  font-weight: 700;
-}
-
-.about-slider-header > hr {
-  width: 20%;
-  border-bottom: 2px solid rgb(153, 192, 214);
-  opacity: 0.5;
-}
-
-.about-slider {
-  padding: 2rem;
-}
-
-.about-card {
-  background-color: #ffffff;
-  border-radius: 8px;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-  margin-bottom: 40px;
 }
 
-.about-card-image-container {
-  width: 100%; /* Example width */
-  height: 200px; /* Example height */
-  overflow: hidden; /* Ensure any overflow is clipped */
-}
-
-.about-card-image {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  border-radius: 8px;
-  margin-bottom: 8px;
+.title {
+  margin: 0;
+  font-size: 20px;
+  color: #000;
 }
 
-.about-card-content {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  gap: 5px;
-  padding: 0.5rem 2rem 2rem 2rem;
-  margin-top: 1rem;
+.subtitle {
+  display: block;
+  font-size: 16px;
+  color: #555;
+  margin-top: 10px;
 }
 
-.about-card-title {
-  font-weight: 700;
+.dark-mode .swiper-slide{
+  background-color: #333;
+  border: 2px solid #fff;
 }
 
-.about-card-subtitle {
-  color: #718096;
-  margin-top: 2px;
-  margin-bottom: 2rem;
+.dark-mode .about-container{
+  background: black !important;
 }
 
-.about-card-button {
-  background-color: #18181b; /* Dark background for "Sign Up" button */
-  color: #ffffff;
-  padding: 16px;
-  border: none;
-  cursor: pointer;
-  border-radius: 25px;
-  /* margin-right: 12px; */
-  font-size: 18px;
-  transition: background 0.3s ease;
-}
-.about-card-button:hover {
-  background-color: #333333; /* Slightly lighter on hover */
+.dark-mode .carousel-title{
+  color: #fff;
 }
 
-.about-card-link {
-  text-decoration: none;
-  color: #ffffff;
+.dark-mode .details .title{
+  color: #fff;
 }
 
-.slick-slide > div {
-  margin: 0 10px;
-}
+.dark-mode .details .subtitle{
+  color: #fff;
+}
\ No newline at end of file
diff --git a/frontend/src/pages/About/About.js b/frontend/src/pages/About/About.js
index e5785b6..25ec91d 100644
--- a/frontend/src/pages/About/About.js
+++ b/frontend/src/pages/About/About.js
@@ -1,19 +1,10 @@
-import React, { useEffect , useState } from "react";
-import Slider from "react-slick";
-import "./About.css";
-import "slick-carousel/slick/slick.css";
-import "slick-carousel/slick/slick-theme.css";
-
-function Arrow(props) {
-  const { className, style, onClick } = props;
-  return (
-    <div
-      className={className}
-      style={{ ...style, display: "block", scale: "2", filter: "invert(100%)" }}
-      onClick={onClick}
-    />
-  );
-}
+import React from 'react';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { EffectCoverflow, Pagination } from 'swiper/modules';
+import 'swiper/css';
+import 'swiper/css/effect-coverflow';
+import 'swiper/css/pagination';
+import './About.css';
 
 const About = () => {
   const galleryData = [
@@ -62,86 +53,40 @@ const About = () => {
     },
   ];
 
-  const settings = {
-    dots: true,
-    infinite: true,
-    speed: 500,
-    slidesToShow: 3,
-    slidesToScroll: 1,
-    prevArrow: <Arrow />,
-    nextArrow: <Arrow />,
-  };
-
-  const [showScrollTop, setShowScrollTop] = useState(false);
-
-  useEffect(() => {
-    const handleScroll = () => {
-      if (window.scrollY > 120) {
-        setShowScrollTop(true);
-      } else {
-        setShowScrollTop(false);
-      }
-    };
-    window.addEventListener('scroll', handleScroll);
-    return () => {
-      window.removeEventListener('scroll', handleScroll);
-    };
-  }, []);
-
   return (
     <div className="about-container">
-      <main className="about-main-content">
-      <button class="scroll-up-btn" onClick={() => window.scrollTo(0, 0)}>
-        <span class="material-symbols-outlined" style={{
-          color:'#333'
-        }}>
-arrow_upward
-</span>  </button>
-        <div className="about-intro-section">
-          <div className="about-intro-text">
-            <h1 className="about-title">About Us</h1>
-            <p className="about-subtitle">
-              {" "}
-              Deserunt est deserunt pariatur ea cillum voluptate id do voluptate
-              nisi ea aliquip.{" "}
-            </p>
-          </div>
-        </div>
-        <div className="about-slider-wrapper">
-          <div className="about-slider-header">
-            <h2> Our Gallery</h2>
-            <hr></hr>
-          </div>
-          <div className="about-slider">
-            <Slider {...settings}>
-              {galleryData.map((item) => (
-                <div key={item.title} className="about-card">
-                  <div className="about-card-image-container">
-                    <img
-                      src={item.img}
-                      alt=""
-                      className="about-card-image"
-                    ></img>
-                  </div>
-
-                  <div className="about-card-content">
-                    <p className="about-card-title">{item.title}</p>
-                    <p className="about-card-subtitle">{item.subtitle}</p>
-                    <button className="about-card-button">
-                      {" "}
-                      <a className="about-card-link" href={item.link}>
-                        Read More
-                      </a>{" "}
-                    </button>
-                  </div>
-                </div>
-              ))}
-            </Slider>
-          </div>
-        </div>
-      </main>
+      <h1 className="carousel-title">Our Gallery</h1>
+      <Swiper
+        effect={'coverflow'}
+        grabCursor={true}
+        centeredSlides={true}
+        slidesPerView={'auto'}
+        coverflowEffect={{
+          rotate: 50,
+          stretch: 0,
+          depth: 100,
+          modifier: 1,
+          slideShadows: true,
+        }}
+        pagination={true}
+        modules={[EffectCoverflow, Pagination]}
+        className="swiper-container"
+      >
+        {galleryData.map((item, index) => (
+          <SwiperSlide key={index} className="swiper-slide">
+            <div className="picture">
+              <img src={item.img} alt={item.title} />
+            </div>
+            <div className="details">
+              <h3 className="title">{item.title}</h3>
+              <span className="subtitle">{item.subtitle}</span>
+            </div>
+          </SwiperSlide>
+        ))}
+        <div className="swiper-pagination"></div>
+      </Swiper>
     </div>
   );
 };
 
-export default About;
+export default About;
\ No newline at end of file
diff --git a/frontend/src/pages/Home/Faqs.css b/frontend/src/pages/Home/Faqs.css
index 80efcc6..3d3f923 100644
--- a/frontend/src/pages/Home/Faqs.css
+++ b/frontend/src/pages/Home/Faqs.css
@@ -1,90 +1,106 @@
 /* Faqs.css */
 
 .faqs-container {
-    max-width: 800px;
-    margin: 0 auto;
-    padding: 20px;
-    background-color: #f9f9f9;
-    border-radius: 10px;
-    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 20px;
+  background-color: #f9f9f9;
+  border-radius: 10px;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+}
+
+.faqs-title {
+  font-size: 32px;
+  font-weight: bold;
+  text-align: center;
+  margin-bottom: 30px;
+  color: #333;
+}
+
+.faqs-list {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+
+.faq-item {
+  background-color: #ffffff;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  padding: 15px 20px;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+
+.faq-item:hover {
+  background-color: #e6f7ff;
+}
+
+.faq-question {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.faq-question h3 {
+  font-size: 18px;
+  font-weight: 600;
+  color: #333;
+  margin: 0;
+}
+
+.faq-question span {
+  font-size: 20px;
+  color: #666;
+}
+
+.faq-answer {
+  margin-top: 10px;
+  font-size: 16px;
+  color: #555;
+  line-height: 1.6;
+}
+
+.faq-answer::before {
+  content: "➤ ";
+  color: #007bff;
+}
+
+@media (max-width: 768px) {
+  .faqs-container {
+    padding: 15px;
   }
-  
+
   .faqs-title {
-    font-size: 32px;
-    font-weight: bold;
-    text-align: center;
-    margin-bottom: 30px;
-    color: #333;
-  }
-  
-  .faqs-list {
-    display: flex;
-    flex-direction: column;
-    gap: 15px;
+    font-size: 28px;
   }
-  
+
   .faq-item {
-    background-color: #ffffff;
-    border-radius: 8px;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-    padding: 15px 20px;
-    cursor: pointer;
-    transition: background-color 0.3s ease;
+    padding: 12px 15px;
   }
-  
-  .faq-item:hover {
-    background-color: #e6f7ff;
-  }
-  
-  .faq-question {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-  
+
   .faq-question h3 {
-    font-size: 18px;
-    font-weight: 600;
-    color: #333;
-    margin: 0;
-  }
-  
-  .faq-question span {
-    font-size: 20px;
-    color: #666;
-  }
-  
-  .faq-answer {
-    margin-top: 10px;
     font-size: 16px;
-    color: #555;
-    line-height: 1.6;
   }
-  
-  .faq-answer::before {
-    content: "➤ ";
-    color: #007bff;
-  }
-  
-  @media (max-width: 768px) {
-    .faqs-container {
-      padding: 15px;
-    }
-  
-    .faqs-title {
-      font-size: 28px;
-    }
-  
-    .faq-item {
-      padding: 12px 15px;
-    }
-  
-    .faq-question h3 {
-      font-size: 16px;
-    }
-  
-    .faq-answer {
-      font-size: 15px;
-    }
+
+  .faq-answer {
+    font-size: 15px;
   }
-  
\ No newline at end of file
+}
+.dark-mode .faqs-container{
+  background-color: black;
+  border: 2px solid #fff;
+}
+
+.dark-mode .faq-item{
+  background-color: #333;
+  color: #fff;
+}
+
+.dark-mode .faqs-title{
+  color: #fff;
+}
+
+.dark-mode .faq-question h3{
+  color: #fff;
+}
\ No newline at end of file