diff --git a/frontend/index.html b/frontend/index.html
index 146e265..3ada7dc 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -1,16 +1,27 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900&display=swap" />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900&display=swap"
+    />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      href="https://unpkg.com/bootstrap@5.3.3/dist/css/bootstrap.min.css"
+    />
     <title>devXsphere</title>
 
-    <link rel="stylesheet" href="https://cdn.materialdesignicons.com/6.5.95/css/materialdesignicons.min.css">
+    <link
+      rel="stylesheet"
+      href="https://cdn.materialdesignicons.com/6.5.95/css/materialdesignicons.min.css"
+    />
   </head>
   <body>
     <div id="root"></div>
     <script type="module" src="/src/main.jsx"></script>
+    <script src="https://unpkg.com/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
   </body>
 </html>
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 8276414..20af96f 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -4,9 +4,9 @@ import TeamSection from "./components/TeamSection";
 import Footer from "./components/Footer";
 import Testimonials from "./components/Testimonials";
 import Main from "./components/Main";
-import Events from "./components/Events"
+import Events from "./components/Events";
 import Carousel from "./components/Carousel";
-
+import Faq from "./components/Faq";
 
 export default function App() {
   return (
@@ -17,6 +17,7 @@ export default function App() {
       <Events />
       <TeamSection />
       <Testimonials />
+      <Faq />
       <Footer />
     </div>
   );
diff --git a/frontend/src/components/CanvasLoader.jsx b/frontend/src/components/CanvasLoader.jsx
index 68a54d9..9968804 100644
--- a/frontend/src/components/CanvasLoader.jsx
+++ b/frontend/src/components/CanvasLoader.jsx
@@ -1,26 +1,33 @@
-import { Html, useProgress} from '@react-three/drei'
-import React from 'react'
+import { Html, useProgress } from "@react-three/drei";
+import React from "react";
 // import { toFixed } from '@react-three/drei';
 
 const CanvasLoader = () => {
-    const { progress } = useProgress();
+  const { progress } = useProgress();
   return (
     <Html
-        as='div'
-        center
+      as="div"
+      center
+      style={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        flexDirection: "column",
+      }}
+    >
+      <span className="canvas-loader" />
+      <p
         style={{
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            flexDirection: 'column',
+          fontSize: 14,
+          color: "#F1F1F1",
+          fontWeight: 800,
+          marginTop: 40,
         }}
-    >
-        <span className='canvas-loader' />
-        <p style={{ fontSize: 14, color: '#F1F1F1', fontWeight: 800, marginTop: 40}}>
-            { progress != 0 ? `${progress.toFixed(2)}%` : 'Loading...'}
-        </p>
+      >
+        {progress != 0 ? `${progress.toFixed(2)}%` : "Loading..."}
+      </p>
     </Html>
-  )
-}
+  );
+};
 
-export default CanvasLoader
\ No newline at end of file
+export default CanvasLoader;
diff --git a/frontend/src/components/Carousel.jsx b/frontend/src/components/Carousel.jsx
index b0dbe08..6ec3a82 100644
--- a/frontend/src/components/Carousel.jsx
+++ b/frontend/src/components/Carousel.jsx
@@ -63,16 +63,40 @@
 // };
 
 // export default Carousel;
-import React, { useState, useEffect, useRef } from 'react';
-import './style/carousel2.css';
+import React, { useState, useEffect, useRef } from "react";
+import "./style/carousel2.css";
 import { FaArrowLeft, FaArrowRight } from "react-icons/fa";
 
 const Carousel = () => {
   const [carouselItems, setCarouselItems] = useState([
-    { id: 1, image: '../image/event.JPG', author: '', title: 'devXsphere gaianet', topic: 'meetup' },
-    { id: 2, image: '../image/event 2.JPG', author: 'Author 2', title: 'Title 2', topic: 'Topic 2' },
-    { id: 3, image: '../image/event 3.JPG', author: 'Author 3', title: 'Title 3', topic: 'Topic 3' },
-    { id: 4, image: '../image/event4.jpg', author: 'Author 4', title: 'Title 4', topic: 'Topic 4' }
+    {
+      id: 1,
+      image: "../image/event.JPG",
+      author: "",
+      title: "devXsphere gaianet",
+      topic: "meetup",
+    },
+    {
+      id: 2,
+      image: "../image/event 2.JPG",
+      author: "Author 2",
+      title: "Title 2",
+      topic: "Topic 2",
+    },
+    {
+      id: 3,
+      image: "../image/event 3.JPG",
+      author: "Author 3",
+      title: "Title 3",
+      topic: "Topic 3",
+    },
+    {
+      id: 4,
+      image: "../image/event4.jpg",
+      author: "Author 4",
+      title: "Title 4",
+      topic: "Topic 4",
+    },
   ]);
 
   const timeRunning = 1000;
@@ -83,25 +107,28 @@ const Carousel = () => {
 
   useEffect(() => {
     const runNextAuto = setTimeout(() => {
-      showSlider('next');
+      showSlider("next");
     }, timeAutoNext);
 
     return () => clearTimeout(runNextAuto);
   }, [carouselItems]);
 
   const showSlider = (type) => {
-    if (type === 'next') {
+    if (type === "next") {
       setCarouselItems((prevItems) => [...prevItems.slice(1), prevItems[0]]);
-      carouselRef.current.classList.add('next');
+      carouselRef.current.classList.add("next");
     } else {
-      setCarouselItems((prevItems) => [prevItems[prevItems.length - 1], ...prevItems.slice(0, -1)]);
-      carouselRef.current.classList.add('prev');
+      setCarouselItems((prevItems) => [
+        prevItems[prevItems.length - 1],
+        ...prevItems.slice(0, -1),
+      ]);
+      carouselRef.current.classList.add("prev");
     }
 
     clearTimeout(timeRef.current);
     timeRef.current = setTimeout(() => {
-      carouselRef.current.classList.remove('next');
-      carouselRef.current.classList.remove('prev');
+      carouselRef.current.classList.remove("next");
+      carouselRef.current.classList.remove("prev");
     }, timeRunning);
   };
 
@@ -132,8 +159,20 @@ const Carousel = () => {
 
         {/* Carousel Controls */}
         <div className="arrows">
-          <button id="prev" onClick={() => showSlider('prev')} className='opacity-60'><FaArrowLeft/></button>
-          <button id="next" onClick={() => showSlider('next')} className='opacity-60'><FaArrowRight/></button>
+          <button
+            id="prev"
+            onClick={() => showSlider("prev")}
+            className="opacity-60"
+          >
+            <FaArrowLeft />
+          </button>
+          <button
+            id="next"
+            onClick={() => showSlider("next")}
+            className="opacity-60"
+          >
+            <FaArrowRight />
+          </button>
         </div>
       </div>
     </div>
diff --git a/frontend/src/components/Faq.jsx b/frontend/src/components/Faq.jsx
new file mode 100644
index 0000000..63cc8d3
--- /dev/null
+++ b/frontend/src/components/Faq.jsx
@@ -0,0 +1,149 @@
+import React from "react";
+
+const Faq = () => {
+  return (
+    <section className="bg-light py-3 py-md-5">
+      <div className="container">
+        <div className="row gy-5 gy-lg-0 align-items-lg-center">
+          <div className="col-12 col-lg-6">
+            <img
+              className="img-fluid rounded"
+              loading="lazy"
+              src="./assets/img/faq-img-1.png"
+              alt="How can we help you?"
+            />
+          </div>
+          <div className="col-12 col-lg-6">
+            <div className="row justify-content-xl-end">
+              <div className="col-12 col-xl-11">
+                <h2 className="h1 mb-3">How can we help you?</h2>
+                <p className="lead fs-4 text-secondary mb-5">
+                  We hope you have found an answer to your question. If you need
+                  any help, please search your query on our Support Center or
+                  contact us via email.
+                </p>
+                <div
+                  className="accordion accordion-flush"
+                  id="accordionExample"
+                >
+                  <div className="accordion-item">
+                    <h2 className="accordion-header" id="headingOne">
+                      <button
+                        className="accordion-button"
+                        type="button"
+                        data-bs-toggle="collapse"
+                        data-bs-target="#collapseOne"
+                        aria-expanded="true"
+                        aria-controls="collapseOne"
+                      >
+                        How Do I Change My Billing Information?
+                      </button>
+                    </h2>
+                    <div
+                      id="collapseOne"
+                      className="accordion-collapse collapse show"
+                      aria-labelledby="headingOne"
+                      data-bs-parent="#accordionExample"
+                    >
+                      <div className="accordion-body">
+                        <p>
+                          To change your billing information, please follow
+                          these steps:
+                        </p>
+                        <ul>
+                          <li>
+                            Go to our website and sign in to your account.
+                          </li>
+                          <li>
+                            Click on your profile picture in the top right
+                            corner of the page and select "Account Settings."
+                          </li>
+                          <li>
+                            Under the "Billing Information" section, click on
+                            "Edit."
+                          </li>
+                          <li>Make your changes and click on "Save."</li>
+                        </ul>
+                      </div>
+                    </div>
+                  </div>
+                  <div className="accordion-item">
+                    <h2 className="accordion-header" id="headingTwo">
+                      <button
+                        className="accordion-button collapsed"
+                        type="button"
+                        data-bs-toggle="collapse"
+                        data-bs-target="#collapseTwo"
+                        aria-expanded="false"
+                        aria-controls="collapseTwo"
+                      >
+                        How Does Payment System Work?
+                      </button>
+                    </h2>
+                    <div
+                      id="collapseTwo"
+                      className="accordion-collapse collapse"
+                      aria-labelledby="headingTwo"
+                      data-bs-parent="#accordionExample"
+                    >
+                      <div className="accordion-body">
+                        A payment system is a way to transfer money from one
+                        person or organization to another. It is a complex
+                        process that involves many different parties, including
+                        banks, credit card companies, and merchants.
+                      </div>
+                    </div>
+                  </div>
+                  <div className="accordion-item">
+                    <h2 className="accordion-header" id="headingThree">
+                      <button
+                        className="accordion-button collapsed"
+                        type="button"
+                        data-bs-toggle="collapse"
+                        data-bs-target="#collapseThree"
+                        aria-expanded="false"
+                        aria-controls="collapseThree"
+                      >
+                        How Do I Cancel My Account?
+                      </button>
+                    </h2>
+                    <div
+                      id="collapseThree"
+                      className="accordion-collapse collapse"
+                      aria-labelledby="headingThree"
+                      data-bs-parent="#accordionExample"
+                    >
+                      <div className="accordion-body">
+                        <p>
+                          To cancel your account, please follow these steps:
+                        </p>
+                        <ul>
+                          <li>
+                            Go to our website and sign in to your account.
+                          </li>
+                          <li>
+                            Click on your profile picture in the top right
+                            corner of the page and select "Account Settings."
+                          </li>
+                          <li>
+                            Scroll to the bottom of the page and click on
+                            "Cancel Account."
+                          </li>
+                          <li>
+                            Enter your password and click on "Cancel Account."
+                          </li>
+                        </ul>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Faq;
diff --git a/frontend/src/components/Footer.jsx b/frontend/src/components/Footer.jsx
index 9059d77..8f5f14b 100644
--- a/frontend/src/components/Footer.jsx
+++ b/frontend/src/components/Footer.jsx
@@ -8,35 +8,40 @@ export default function Footer() {
     {
       link: "https://www.linkedin.com/company/DevXsphere",
       icon: <FaLinkedinIn className="size-8 md:size-8 xl:size-10" />,
-      className: " text-white hover:bg-blue-600 rounded-full p-2 transition-all duration-300 ease-in-out transform hover:scale-110"
+      className:
+        " text-white hover:bg-blue-600 rounded-full p-2 transition-all duration-300 ease-in-out transform hover:scale-110",
     },
     {
       link: "https://www.facebook.com",
       icon: <FaFacebookF className="size-8 md:size-8 xl:size-10" />,
-      className: " text-white hover:bg-blue-500 rounded-full p-2 transition-all duration-300 ease-in-out transform hover:scale-110"
+      className:
+        " text-white hover:bg-blue-500 rounded-full p-2 transition-all duration-300 ease-in-out transform hover:scale-110",
     },
     {
       link: "https://x.com/DevXsphere",
       icon: <FaXTwitter className="size-8 md:size-8 xl:size-10" />,
-      className: " text-white hover:bg-gray-800 rounded-full p-2 transition-all duration-300 ease-in-out transform hover:scale-110"
+      className:
+        " text-white hover:bg-gray-800 rounded-full p-2 transition-all duration-300 ease-in-out transform hover:scale-110",
     },
     {
       link: "https://www.instagram.com/devXsphere/",
       icon: <FaInstagram className="size-8 md:size-8 xl:size-10" />,
-      className: " text-white hover:bg-gradient-to-r from-yellow-500 via-pink-500 to-purple-600 rounded-full p-2 transition-all duration-300 ease-in-out transform hover:scale-110"
+      className:
+        " text-white hover:bg-gradient-to-r from-yellow-500 via-pink-500 to-purple-600 rounded-full p-2 transition-all duration-300 ease-in-out transform hover:scale-110",
     },
     {
       link: "https://mastodon.social",
       icon: <TbBrandMastodon className="size-8 md:size-8 xl:size-10" />,
-      className: " text-white hover:bg-purple-600 rounded-full p-2 transition-all duration-300 ease-in-out transform hover:scale-110"
+      className:
+        " text-white hover:bg-purple-600 rounded-full p-2 transition-all duration-300 ease-in-out transform hover:scale-110",
     },
     {
       link: "https://zulip.com",
       icon: <TbBrandZulip className="size-8 md:size-8 xl:size-10" />,
-      className: " text-white hover:bg-green-600 rounded-full p-2 transition-all duration-300 ease-in-out transform hover:scale-110"
+      className:
+        " text-white hover:bg-green-600 rounded-full p-2 transition-all duration-300 ease-in-out transform hover:scale-110",
     },
   ];
-  
 
   return (
     <footer className="bg-black text-white pt-8 pb-24">
diff --git a/frontend/src/components/HackerRoom.jsx b/frontend/src/components/HackerRoom.jsx
index 05e3df9..d00eac6 100644
--- a/frontend/src/components/HackerRoom.jsx
+++ b/frontend/src/components/HackerRoom.jsx
@@ -1,133 +1,133 @@
-import React, { useRef } from 'react'
-import { useGLTF } from '@react-three/drei'
+import React, { useRef } from "react";
+import { useGLTF } from "@react-three/drei";
 
 const HackerRoom = (props) => {
-  const { nodes, materials } = useGLTF('/models/hacker-room.glb')
+  const { nodes, materials } = useGLTF("/models/hacker-room.glb");
   console.log(nodes);
-//   console.log(materials);
-//   if (!nodes || !materials) {
-//     console.error("Nodes or materials not loaded properly");
-//     return null; // Or return a loading spinner or placeholder
-//   }
+  //   console.log(materials);
+  //   if (!nodes || !materials) {
+  //     console.error("Nodes or materials not loaded properly");
+  //     return null; // Or return a loading spinner or placeholder
+  //   }
 
   return (
     <group {...props} dispose={null}>
-        {nodes && nodes.computer_computer_mat_0 && (
-            <mesh
-                castShadow
-                receiveShadow
-                geometry={nodes.computer_computer_mat_0.geometry}
-                material={materials.computer_mat}
-            />
-        )} 
-        {nodes && nodes.computer_computer_mat_0 && (
-      <mesh
-        castShadow
-        receiveShadow
-        geometry={nodes.server_server_mat_0.geometry}
-        material={materials.server_mat}
-      />
-        )}
-        {nodes && nodes.computer_computer_mat_0 && (
-      <mesh
-        castShadow
-        receiveShadow
-        geometry={nodes.vhs_vhsPlayer_mat_0.geometry}
-        material={materials.vhsPlayer_mat}
-      />
-        )}
-        {nodes && nodes.computer_computer_mat_0 && (
-      <mesh
-        castShadow
-        receiveShadow
-        geometry={nodes.shelf_stand_mat_0.geometry}
-        material={materials.stand_mat}
-      />
-        )}
-        {nodes && nodes.computer_computer_mat_0 && (
-      <mesh
-        castShadow
-        receiveShadow
-        geometry={nodes.keyboard_mat_0.geometry}
-        material={materials.mat_mat}
-      />
-        )}
-        {nodes && nodes.computer_computer_mat_0 && (
+      {nodes && nodes.computer_computer_mat_0 && (
         <mesh
-        castShadow
-        receiveShadow
-        geometry={nodes.arm_arm_mat_0.geometry}
-        material={materials.arm_mat}
+          castShadow
+          receiveShadow
+          geometry={nodes.computer_computer_mat_0.geometry}
+          material={materials.computer_mat}
         />
-        )}
-        {nodes && nodes.computer_computer_mat_0 && (
-    <mesh
-        castShadow
-        receiveShadow
-        geometry={nodes.Tv_tv_mat_0.geometry}
-        material={materials.tv_mat}
-    />
-        )}
-        {nodes && nodes.computer_computer_mat_0 && (
-    <mesh
-        castShadow
-        receiveShadow
-        geometry={nodes.table_table_mat_0.geometry}
-        material={materials.table_mat}
-    />
-        )}
-        {nodes && nodes.computer_computer_mat_0 && (
-    <mesh
-        castShadow
-        receiveShadow
-        geometry={nodes.Cables_cables_mat_0.geometry}
-        material={materials.cables_mat}
-    />
-        )}
-        {nodes && nodes.computer_computer_mat_0 && (
-      <mesh
-        castShadow
-        receiveShadow
-        geometry={nodes.props_props_mat_0.geometry}
-        material={materials.props_mat}
-      />
-        )}
-        {nodes && nodes.computer_computer_mat_0 && (
-    <mesh
-      castShadow
-      receiveShadow
-      geometry={nodes.screen_screens_0.geometry}
-      material={materials.screens}
-    />
-        )}
-        {nodes && nodes.computer_computer_mat_0 && (
-    <mesh
-      castShadow
-      receiveShadow
-      geometry={nodes.screen_glass_glass_0.geometry}
-     material={materials.glass}
-    />
-        )}
-        {nodes && nodes.computer_computer_mat_0 && (
-    <mesh
-    castShadow
-    receiveShadow
-    geometry={nodes.Ground_ground_mat_0.geometry}
-    material={materials.ground_mat}
-    />
-        )}
-        {nodes && nodes.computer_computer_mat_0 && (
-    <mesh
-    castShadow
-    receiveShadow
-    geometry={nodes.peripherals_key_mat_0.geometry}
-    material={materials.key_mat}
-    />
-        )}
+      )}
+      {nodes && nodes.computer_computer_mat_0 && (
+        <mesh
+          castShadow
+          receiveShadow
+          geometry={nodes.server_server_mat_0.geometry}
+          material={materials.server_mat}
+        />
+      )}
+      {nodes && nodes.computer_computer_mat_0 && (
+        <mesh
+          castShadow
+          receiveShadow
+          geometry={nodes.vhs_vhsPlayer_mat_0.geometry}
+          material={materials.vhsPlayer_mat}
+        />
+      )}
+      {nodes && nodes.computer_computer_mat_0 && (
+        <mesh
+          castShadow
+          receiveShadow
+          geometry={nodes.shelf_stand_mat_0.geometry}
+          material={materials.stand_mat}
+        />
+      )}
+      {nodes && nodes.computer_computer_mat_0 && (
+        <mesh
+          castShadow
+          receiveShadow
+          geometry={nodes.keyboard_mat_0.geometry}
+          material={materials.mat_mat}
+        />
+      )}
+      {nodes && nodes.computer_computer_mat_0 && (
+        <mesh
+          castShadow
+          receiveShadow
+          geometry={nodes.arm_arm_mat_0.geometry}
+          material={materials.arm_mat}
+        />
+      )}
+      {nodes && nodes.computer_computer_mat_0 && (
+        <mesh
+          castShadow
+          receiveShadow
+          geometry={nodes.Tv_tv_mat_0.geometry}
+          material={materials.tv_mat}
+        />
+      )}
+      {nodes && nodes.computer_computer_mat_0 && (
+        <mesh
+          castShadow
+          receiveShadow
+          geometry={nodes.table_table_mat_0.geometry}
+          material={materials.table_mat}
+        />
+      )}
+      {nodes && nodes.computer_computer_mat_0 && (
+        <mesh
+          castShadow
+          receiveShadow
+          geometry={nodes.Cables_cables_mat_0.geometry}
+          material={materials.cables_mat}
+        />
+      )}
+      {nodes && nodes.computer_computer_mat_0 && (
+        <mesh
+          castShadow
+          receiveShadow
+          geometry={nodes.props_props_mat_0.geometry}
+          material={materials.props_mat}
+        />
+      )}
+      {nodes && nodes.computer_computer_mat_0 && (
+        <mesh
+          castShadow
+          receiveShadow
+          geometry={nodes.screen_screens_0.geometry}
+          material={materials.screens}
+        />
+      )}
+      {nodes && nodes.computer_computer_mat_0 && (
+        <mesh
+          castShadow
+          receiveShadow
+          geometry={nodes.screen_glass_glass_0.geometry}
+          material={materials.glass}
+        />
+      )}
+      {nodes && nodes.computer_computer_mat_0 && (
+        <mesh
+          castShadow
+          receiveShadow
+          geometry={nodes.Ground_ground_mat_0.geometry}
+          material={materials.ground_mat}
+        />
+      )}
+      {nodes && nodes.computer_computer_mat_0 && (
+        <mesh
+          castShadow
+          receiveShadow
+          geometry={nodes.peripherals_key_mat_0.geometry}
+          material={materials.key_mat}
+        />
+      )}
     </group>
-  )
-}
+  );
+};
 
-useGLTF.preload('/models/hacker-room.glb')
+useGLTF.preload("/models/hacker-room.glb");
 
-export default HackerRoom
\ No newline at end of file
+export default HackerRoom;
diff --git a/frontend/src/components/Hero.jsx b/frontend/src/components/Hero.jsx
index 38d4af3..e482406 100644
--- a/frontend/src/components/Hero.jsx
+++ b/frontend/src/components/Hero.jsx
@@ -1,53 +1,60 @@
-import { PerspectiveCamera } from '@react-three/drei'
-import { Canvas } from '@react-three/fiber'
-import React, { Suspense } from 'react'
-import HackerRoom from './HackerRoom'
-import CanvasLoader from './CanvasLoader'
-import { Leva, useControls } from 'leva'
-
+import { PerspectiveCamera } from "@react-three/drei";
+import { Canvas } from "@react-three/fiber";
+import React, { Suspense } from "react";
+import HackerRoom from "./HackerRoom";
+import CanvasLoader from "./CanvasLoader";
+import { Leva, useControls } from "leva";
 
 const Hero = () => {
-    const x = useControls('HackerRoom', {
-        positionX: {
-            value: 2.5,
-            min: -10,
-            max:10
-        },
-        positionY: {
-            value: 2.5,
-            min: -10,
-            max:10
-        },
-        positionZ: {
-            value: 2.5,
-            min: -10,
-            max:10
-        }
-
-    })
+  const x = useControls("HackerRoom", {
+    positionX: {
+      value: 2.5,
+      min: -10,
+      max: 10,
+    },
+    positionY: {
+      value: 2.5,
+      min: -10,
+      max: 10,
+    },
+    positionZ: {
+      value: 2.5,
+      min: -10,
+      max: 10,
+    },
+  });
   return (
-    <section className='min-h-screen w-full flex felx-col relative'>
-        <div className='w-full mx-auto flex flex-col sm:mt-36 mt-20 c-space gap-3'>
-            <p className='text-7xl font-medium text-white text-center font-generalsans '>Welcome to DevXsphere</p>
-            <div className='w-1/2 mx-auto'>
-                <p className='text-gray_gradient text-xl text-center'>A vibrant community of developers, tech enthusiasts in Delhi, fostering open-source values, knowledge sharing,and collaboration.</p>
-            </div>
+    <section className="min-h-screen w-full flex felx-col relative">
+      <div className="w-full mx-auto flex flex-col sm:mt-36 mt-20 c-space gap-3">
+        <p className="text-7xl font-medium text-white text-center font-generalsans ">
+          Welcome to DevXsphere
+        </p>
+        <div className="w-1/2 mx-auto">
+          <p className="text-gray_gradient text-xl text-center">
+            A vibrant community of developers, tech enthusiasts in Delhi,
+            fostering open-source values, knowledge sharing,and collaboration.
+          </p>
+        </div>
+
+        <div className="w-full h-full absolute inset-0">
+          <Leva />
+          <Canvas className="w-full h-full">
+            <Suspense fallback={<CanvasLoader />}>
+              <PerspectiveCamera makeDefault position={[0, 0, 30]} />
+              <HackerRoom
+                position={[0, 0, 0]}
+                rotation={[0, 280, 0]}
+                scale={[x.positionX, x.positionY, x.positionZ]}
+              />
 
-            <div className='w-full h-full absolute inset-0'>
-                <Leva/>
-                <Canvas className='w-full h-full'>
-                    <Suspense fallback={<CanvasLoader/>}>                    
-                        <PerspectiveCamera makeDefault position={[0,0,30]} /> 
-                        <HackerRoom position={[0,0,0]} rotation={[0, 280, 0]} scale={[x.positionX, x.positionY, x.positionZ]}/> 
-                         
-                        <ambientLight intensity={1}/>
-                        <directionalLight position={[10, 10, 10]} intensity={0.5}/> 
-                    </Suspense>               
-                </Canvas>
-            </div>
+              <ambientLight intensity={1} />
+              <directionalLight position={[10, 10, 10]} intensity={0.5} />
+            </Suspense>
+          </Canvas>
         </div>
+      </div>
     </section>
-  )
-}
+  );
+};
 
-export default Hero
\ No newline at end of file
+export default Hero;
diff --git a/frontend/src/components/Main.jsx b/frontend/src/components/Main.jsx
index 4433c3b..b053762 100644
--- a/frontend/src/components/Main.jsx
+++ b/frontend/src/components/Main.jsx
@@ -18,7 +18,8 @@ function Main() {
             Welcome to DevXsphere
           </h1>
           <p className="mt-6 text-lg leading-8 text-white font-bold">
-            A vibrant community of developers, tech enthusiasts in Delhi, fostering open-source values, knowledge sharing,and collaboration.
+            A vibrant community of developers, tech enthusiasts in Delhi,
+            fostering open-source values, knowledge sharing,and collaboration.
           </p>
           <div className="mt-10 flex items-center justify-center gap-x-6">
             <a
@@ -27,10 +28,7 @@ function Main() {
             >
               Explore Events
             </a>
-            <a
-              href="#"
-              className="text-sm font-semibold leading-6 text-white"
-            >
+            <a href="#" className="text-sm font-semibold leading-6 text-white">
               Discover Resources <span aria-hidden="true">→</span>
             </a>
           </div>
diff --git a/frontend/src/components/Navbar.jsx b/frontend/src/components/Navbar.jsx
index 13ce13f..bc01320 100644
--- a/frontend/src/components/Navbar.jsx
+++ b/frontend/src/components/Navbar.jsx
@@ -1,12 +1,16 @@
 import React, { useState } from "react";
 import Sheet from "react-modal-sheet";
-import './style/Navbar.css';
+import "./style/Navbar.css";
 export default function Navbar() {
   const [spanStyle, setSpanStyle] = useState({ left: "0px", width: "95px" });
   const widthMapping = [95, 94, 110, 115, 110];
   const handleHover = (index) => {
-    const leftPosition = index === 0 ? 0 : widthMapping.slice(0, index).reduce((a, b) => a + b, 0);
-    setSpanStyle({ left: `${leftPosition}px`, width: `${widthMapping[index]}px` });
+    const leftPosition =
+      index === 0 ? 0 : widthMapping.slice(0, index).reduce((a, b) => a + b, 0);
+    setSpanStyle({
+      left: `${leftPosition}px`,
+      width: `${widthMapping[index]}px`,
+    });
   };
   return (
     <div className="relative z-50">
diff --git a/frontend/src/components/TeamSection.jsx b/frontend/src/components/TeamSection.jsx
index 540c0b6..d68a185 100644
--- a/frontend/src/components/TeamSection.jsx
+++ b/frontend/src/components/TeamSection.jsx
@@ -361,7 +361,7 @@ export default function TeamSection() {
                     <div className="flex flex-col items-center">
                       <a href="#" className="mx-auto flex justify-center">
                         <img
-                          className="rounded-2xl drop-shadow-md hover:drop-shadow-xl transition-all duration-200 delay-100 w-56 h-56 object-cover"
+                          className="rounded-2xl drop-shadow-lg hover:drop-shadow-xl hover:scale-110 transition-all duration-200 delay-100 w-56 h-56 object-cover"
                           src={member.pfpImg}
                           alt={member.name}
                         />
@@ -376,19 +376,19 @@ export default function TeamSection() {
                         <div className="flex items-center justify-center opacity-50 hover:opacity-100 transition-opacity duration-300">
                           <a
                             href={member.links.linkedIn}
-                            className= " text-white hover:bg-blue-600 rounded-full px-1 transition-all duration-300 ease-in-out transform "
+                            className=" text-white hover:bg-blue-600 rounded-full px-1 transition-all duration-300 ease-in-out transform "
                           >
                             <i className="mdi mdi-linkedin hover:text-white text-indigo-400 mx-auto mt-2"></i>
                           </a>
                           <a
                             href={member.links.twitter}
-                             className=" text-white hover:bg-gray-800 rounded-full px-1 transition-all duration-300 ease-in-out transform hover:scale-100"
+                            className=" text-white hover:bg-gray-800 rounded-full px-1 transition-all duration-300 ease-in-out transform hover:scale-100"
                           >
                             <i className="mdi mdi-twitter  text-blue-300 mx-auto mt-2"></i>
                           </a>
                           <a
                             href={member.links.instagram}
-                             className= " text-white hover:bg-gradient-to-r from-yellow-500 via-pink-500 to-purple-600 rounded-full px-1 transition-all duration-300 ease-in-out transform hover:scale-100"
+                            className=" text-white hover:bg-gradient-to-r from-yellow-500 via-pink-500 to-purple-600 rounded-full px-1 transition-all duration-300 ease-in-out transform hover:scale-100"
                           >
                             <i className="mdi mdi-instagram hover:text-white text-orange-400 mx-auto mt-2"></i>
                           </a>
diff --git a/frontend/src/components/Testimonials.jsx b/frontend/src/components/Testimonials.jsx
index 6c15e53..e3e0ea4 100644
--- a/frontend/src/components/Testimonials.jsx
+++ b/frontend/src/components/Testimonials.jsx
@@ -3,31 +3,32 @@ import { Swiper, SwiperSlide } from "swiper/react"; // Swiper import
 import "swiper/css"; // Swiper CSS import
 
 export default function Testimonials() {
-  const testimonials = [{
-    url: 'https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(1).jpg',
-    name: 'Maria Smantha',
-    job: 'Web Developer',
-    desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur quae quaerat ad velit ab hic.'
-  },
-  {
-    url: 'https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(2).jpg',
-    name: 'Lisa Cudrow',
-    job: 'Graphic Designer',
-    desc: 'Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid commodi.'
-  },
-  {
-    url: 'https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(9).jpg',
-    name: 'John Smith',
-    job: 'Marketing Specialist',
-    desc: 'At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti.'
-  },
-  {
-    url: 'https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(10).jpg',
-    name: 'Anna Lee',
-    job: 'Project Manager',
-    desc: 'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.'
-  },
-  ]
+  const testimonials = [
+    {
+      url: "https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(1).jpg",
+      name: "Maria Smantha",
+      job: "Web Developer",
+      desc: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur quae quaerat ad velit ab hic.",
+    },
+    {
+      url: "https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(2).jpg",
+      name: "Lisa Cudrow",
+      job: "Graphic Designer",
+      desc: "Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid commodi.",
+    },
+    {
+      url: "https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(9).jpg",
+      name: "John Smith",
+      job: "Marketing Specialist",
+      desc: "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti.",
+    },
+    {
+      url: "https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(10).jpg",
+      name: "Anna Lee",
+      job: "Project Manager",
+      desc: "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
+    },
+  ];
   return (
     <div className="container mx-auto px-2 md:px-6">
       <section className="mb-32 text-center">
@@ -38,24 +39,26 @@ export default function Testimonials() {
           breakpoints={{
             768: { slidesPerView: 2 }, // 2 slides for medium screens
             1024: { slidesPerView: 3 }, // 3 slides for medium screens
-            1280: { slidesPerView: 4 } // 4 slides for large screens
+            1280: { slidesPerView: 4 }, // 4 slides for large screens
           }}
         >
           {testimonials.map((Testimonial) => {
             return (
               <SwiperSlide key={Testimonial.name}>
-                <div className="flex flex-col items-center bg-white p-6 rounded-lg shadow-lg 
-          w-full lg:w-72 h-72">
+                <div
+                  className="flex flex-col items-center hover:scale-110 hover:duration-150 bg-white p-6 rounded-lg shadow-lg 
+          w-full lg:w-72 h-72"
+                >
                   <img
                     src={Testimonial.url}
                     className="w-16 h-16 rounded-full mb-4"
                     alt="User"
                   />
                   <h5 className="mb-2 text-lg font-bold">{Testimonial.name}</h5>
-                  <h6 className="mb-4 font-medium text-primary">{Testimonial.job}</h6>
-                  <p className="text-gray-600 text-sm">
-                    {Testimonial.desc}
-                  </p>
+                  <h6 className="mb-4 font-medium text-primary">
+                    {Testimonial.job}
+                  </h6>
+                  <p className="text-gray-600 text-sm">{Testimonial.desc}</p>
                 </div>
               </SwiperSlide>
             );
diff --git a/frontend/src/components/style/carousel2.css b/frontend/src/components/style/carousel2.css
index e742be7..129e1a8 100644
--- a/frontend/src/components/style/carousel2.css
+++ b/frontend/src/components/style/carousel2.css
@@ -1,92 +1,91 @@
 /* carousel.css */
 
 .carousel-container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    margin-top: 80px; /* Pushes the carousel down a bit */
-  }
-  
-  .title-container {
-    text-align: center;
-    margin-bottom: 20px;
-  }
-  
-  .carousel-title {
-    font-family: 'Poppins', sans-serif; /* A clean font, feel free to use another */
-    font-size: 3rem;
-    font-weight: bold;
-    color: white;
-    display: inline-flex;
-    align-items: center;
-  }
-  
-  .infinite-logo {
-    font-size: 2.5rem;
-    margin-left: 10px;
-    color: #6c63ff; /* Purple color for logo */
-  }
-  
-  .carousel {
-    position: relative;
-    width: 80%; /* Make the carousel smaller */
-    max-width: 900px;
-    overflow: hidden;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Adds shadow to the box */
-    border-radius: 10px;
-  }
-  
-  .list {
-    display: flex;
-    transition: transform 0.5s ease;
-  }
-  
-  .item {
-    min-width: 100%;
-    height: 400px;
-    position: relative;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-  
-  .item img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    border-radius: 10px;
-  }
-  
-  .content {
-    position: absolute;
-    bottom: 20px;
-    left: 20px;
-    color: white;
-    background-color: rgba(0, 0, 0, 0.5);
-    padding: 10px;
-    border-radius: 5px;
-  }
-  
-  .arrows {
-    position: absolute;
-    top: 50%;
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-    transform: translateY(-50%);
-  }
-  
-  .arrows button {
-    background: none;
-    border: none;
-    font-size: 1.5rem;
-    color: white;
-    cursor: pointer;
-    padding: 10px;
-  }
-  
-  .arrows button:hover {
-    background-color: rgba(0, 0, 0, 0.2);
-    border-radius: 50%;
-  }
-  
\ No newline at end of file
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 60px; /* Pushes the carousel down a bit */
+}
+
+.title-container {
+  text-align: center;
+  margin-bottom: 10px;
+}
+
+.carousel-title {
+  font-family: "Poppins", sans-serif; /* A clean font, feel free to use another */
+  font-size: 3rem;
+  font-weight: bold;
+  color: white;
+  display: inline-flex;
+  align-items: center;
+}
+
+.infinite-logo {
+  font-size: 2.5rem;
+  margin-left: 10px;
+  color: #6c63ff; /* Purple color for logo */
+}
+
+.carousel {
+  position: relative;
+  width: 80%; /* Make the carousel smaller */
+  max-width: 900px;
+  overflow: hidden;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Adds shadow to the box */
+  border-radius: 10px;
+}
+
+.list {
+  display: flex;
+  transition: transform 0.5s ease;
+}
+
+.item {
+  min-width: 100%;
+  height: 400px;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.item img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 10px;
+}
+
+.content {
+  position: absolute;
+  bottom: 20px;
+  left: 20px;
+  color: white;
+  background-color: rgba(0, 0, 0, 0.5);
+  padding: 10px;
+  border-radius: 5px;
+}
+
+.arrows {
+  position: absolute;
+  top: 50%;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  transform: translateY(-50%);
+}
+
+.arrows button {
+  background: none;
+  border: none;
+  font-size: 1.5rem;
+  color: white;
+  cursor: pointer;
+  padding: 10px;
+}
+
+.arrows button:hover {
+  background-color: rgba(0, 0, 0, 0.2);
+  border-radius: 50%;
+}
