diff --git a/package-lock.json b/package-lock.json
index b719a15..7a26be0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -24,7 +24,8 @@
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-read-more-read-less": "1.0.7",
-        "react-router-dom": "6.4.1"
+        "react-router-dom": "6.4.1",
+        "react-snap-carousel": "0.3.1"
       },
       "devDependencies": {
         "@babel/cli": "^7.18.10",
@@ -12008,6 +12009,14 @@
         "react-dom": ">=16.8"
       }
     },
+    "node_modules/react-snap-carousel": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/react-snap-carousel/-/react-snap-carousel-0.3.1.tgz",
+      "integrity": "sha512-vRrwBV4sC3IP5JQukqAVwELDgOrJ2fZ7WT1aZY7HVDiSTDGXAl6ykvn5BV++O4f+cQ2Vmad1Vp996ytz1QQ03w==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-style-singleton": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz",
@@ -24597,6 +24606,12 @@
         "react-router": "6.4.1"
       }
     },
+    "react-snap-carousel": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/react-snap-carousel/-/react-snap-carousel-0.3.1.tgz",
+      "integrity": "sha512-vRrwBV4sC3IP5JQukqAVwELDgOrJ2fZ7WT1aZY7HVDiSTDGXAl6ykvn5BV++O4f+cQ2Vmad1Vp996ytz1QQ03w==",
+      "requires": {}
+    },
     "react-style-singleton": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz",
diff --git a/package.json b/package.json
index 7d814c7..4750f68 100644
--- a/package.json
+++ b/package.json
@@ -25,8 +25,6 @@
     "@fortawesome/free-brands-svg-icons": "6.2.0",
     "@fortawesome/free-solid-svg-icons": "6.2.0",
     "@fortawesome/react-fontawesome": "0.2.0",
-    "@emotion/react": "11.10.4",
-    "@emotion/styled": "11.10.4",
     "@mui/icons-material": "5.10.6",
     "@mui/material": "5.10.8",
     "dotenv": "^16.0.2",
@@ -35,7 +33,8 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-read-more-read-less": "1.0.7",
-    "react-router-dom": "6.4.1"
+    "react-router-dom": "6.4.1",
+    "react-snap-carousel": "0.3.1"
   },
   "devDependencies": {
     "@babel/cli": "^7.18.10",
diff --git a/src/assets/styles/home.css b/src/assets/styles/home.css
index fdf4aab..67241d7 100644
--- a/src/assets/styles/home.css
+++ b/src/assets/styles/home.css
@@ -59,39 +59,32 @@ html {
 }
 
 .hero-main-buttons {
-  margin-top: 10px;
-  display: inline-flex;
+  margin-top: 20px;
+  display: flex;
+  flex-direction: row;
+  gap: 20px;
 }
 
-.button {
+.hero-main-buttons > button {
   width: 210px;
   height: 56px;
   font-family: "Poppins", sans-serif;
   font-style: normal;
 }
 
-.button > .link {
+.hero-main-buttons > button:nth-child(1) {
   text-decoration: none;
-}
-
-.badged-event {
-  background: #ffffff;
-  border: 1px solid #d61b5e;
+  color: white;
+  background: #d61b5e;
   border-radius: 4px;
 }
 
-.badged-event > .link {
+.hero-main-buttons > button:nth-child(2) {
+  text-decoration: none;
   color: #d61b5e;
-}
-
-.apply {
-  background: #d61b5e;
+  background: white;
+  border: 1px solid #d61b5e;
   border-radius: 4px;
-  margin-left: 20px;
-}
-
-.apply > .link {
-  color: #ffffff;
 }
 
 /* section 4 */
@@ -205,7 +198,9 @@ html {
   flex-direction: row;
   column-gap: 40px;
 }
-
+.carosel-container {
+  display: none;
+}
 .faq-container {
   display: flex;
   justify-content: center;
@@ -226,3 +221,153 @@ html {
   flex-direction: column;
   row-gap: 20px;
 }
+
+/* media queries */
+
+@media screen and (max-width: 480px) {
+  /* hero section */
+  .hero-section {
+    height: 100%;
+  }
+  .hero-section-text {
+    height: 100%;
+    padding: 15px;
+    flex-direction: column-reverse;
+  }
+
+  .hero-section-text > .hero-main > img:nth-child(1) {
+    width: 250px;
+    margin-top: 51px;
+  }
+
+  .hero-main {
+    margin-left: 0;
+  }
+
+  .hero-main-text {
+    max-width: 350px;
+    margin-top: 24px;
+  }
+
+  .hero-main-text > p {
+    font-size: 16px;
+    text-align: justify;
+  }
+
+  .hero-main-buttons {
+    flex-direction: column;
+    margin-bottom: 39px;
+  }
+
+  .hero-logo {
+    margin-left: 0;
+    display: flex;
+    flex-direction: flex-start;
+  }
+  .hero-logo > img {
+    width: 231.3px;
+    height: 231.3px;
+  }
+
+  /* section 4 */
+  .section-4 {
+    flex-direction: column;
+    height: 100vh;
+    padding: 15px;
+  }
+
+  .badging-level > h2 {
+    font-size: 32px;
+  }
+
+  .badging-level > p {
+    font-size: 16px;
+  }
+
+  .badging-image-container {
+    max-width: 360px;
+    height: auto;
+    padding: 10px;
+    margin-top: 50px;
+  }
+  .badging-image-container > img {
+    max-width: 347px;
+  }
+
+  /* section-5 */
+
+  .section-5 {
+    flex-direction: column-reverse;
+    height: 100vh;
+    padding: 15px;
+  }
+
+  .event-badging {
+    flex: 0.6;
+    font-family: "Poppins";
+    font-style: normal;
+    font-weight: 500;
+    font-size: 48px;
+  }
+  .event-badging > h2 {
+    font-size: 32px;
+  }
+
+  .event-badging-image {
+    border-radius: 5px;
+    width: 360px;
+    height: 325px;
+  }
+  .event-badging-image > img {
+    object-fit: cover;
+    width: 100%;
+    height: 100%;
+  }
+
+  .event-badging > p {
+    font-size: 16px;
+  }
+
+  /* section 6 */
+
+  .section-6 {
+    height: 100%;
+    padding: 15px;
+  }
+  .testimonial-container > .title {
+    display: flex;
+    justify-content: flex-start;
+  }
+
+  .title > h2 {
+    font-size: 32px;
+    text-align: left;
+  }
+
+  .testimonials {
+    display: none;
+  }
+  .carosel-container {
+    display: flex;
+    overflow: auto;
+    scroll-snap-type: x mandatory;
+  }
+  .carosel-testimonials {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    gap: 10px;
+    scroll-snap-align: start;
+    flex-shrink: 0;
+  }
+  .faq-container {
+    margin-top: 48px;
+    margin-bottom: 20px;
+  }
+
+  /* section 7 */
+  .section-7 {
+    height: 100vh;
+  }
+}
diff --git a/src/assets/styles/variables.scss b/src/assets/styles/variables.scss
index 3e90c2c..dd9c416 100644
--- a/src/assets/styles/variables.scss
+++ b/src/assets/styles/variables.scss
@@ -19,12 +19,10 @@ body {
 
 footer {
   background-color: $background-color;
-  // position: absolute;
-  bottom: 0;
   color: #fff;
-  padding: 50px 0 30px;
   font-family: "Poppins";
   font-style: normal;
+  padding: 30px;
   font-weight: 400;
   font-size: 14px;
   line-height: 164%;
@@ -43,16 +41,12 @@ footer {
   width: fit-content;
 }
 
-.logo {
-  width: 100px;
-  margin-bottom: 20px;
-}
-
 .minidiv {
   display: flex;
   margin: auto;
   flex-wrap: wrap;
   justify-content: space-between;
+
   h2 {
     text-transform: uppercase;
     font-weight: 600;
@@ -72,9 +66,6 @@ footer {
     display: inline;
     margin-right: 8px;
   }
-  .dei1 img {
-    width: 250px;
-  }
 }
 
 a {
@@ -89,9 +80,103 @@ a {
 .main-div {
   width: 90%;
   margin: auto;
+
   p {
     text-align: center;
     padding-top: 30px;
   }
+  .search {
+    display: none;
+  }
 }
+.dei1 {
+  display: flex;
+  align-items: center;
+  margin-bottom: 20px;
+  flex-direction: row;
+}
+
+.top {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  .logo1 {
+    width: 100px;
+  }
+  .logo2 {
+    width: 100px;
+  }
+}
+
+// media queries
 
+@media screen and (max-width: 480px) {
+  footer {
+    padding: 15px;
+    p {
+    }
+    h2 {
+    }
+  }
+
+  .readMoreClassName {
+  }
+
+  .logo {
+  }
+
+  .minidiv {
+    padding-top: 10px;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .innerdiv {
+    flex-basis: 20%;
+    margin: 20px 0 40px;
+    text-align: left;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 164%;
+    font-weight: lighter;
+
+    .social-media a > img {
+      display: inline;
+      margin-right: 8px;
+      width: 30px;
+    }
+  }
+
+  .top {
+    margin-top: 10px;
+    .logo1 {
+      width: 100px;
+    }
+    .logo2 {
+      width: 100px;
+    }
+  }
+
+  .main-div {
+    p {
+      font-size: 10px;
+      width: 100%;
+    }
+    .search {
+      display: flex;
+      flex-direction: row;
+      gap: 10px;
+      align-items: center;
+      width: 100%;
+      padding: 10px;
+      margin-top: 20px;
+      border: 1px solid white;
+      border-radius: 5px;
+      input {
+        outline: none;
+        background-color: transparent;
+      }
+    }
+  }
+}
diff --git a/src/components/faq/faq.css b/src/components/faq/faq.css
index 3dbb039..8298202 100644
--- a/src/components/faq/faq.css
+++ b/src/components/faq/faq.css
@@ -31,3 +31,19 @@
   font-size: 16px;
   line-height: 200%;
 }
+
+@media screen and (max-width: 480px) {
+  .faq {
+    max-width: 350px;
+    padding: 10px;
+  }
+
+  .head > header {
+    font-size: 16px;
+    line-height: 27px;
+    max-width: 224px;
+  }
+  .answer > .ans {
+    font-size: 14px;
+  }
+}
diff --git a/src/layouts/Footer.js b/src/layouts/Footer.js
index ab8ae50..cdaa3d4 100644
--- a/src/layouts/Footer.js
+++ b/src/layouts/Footer.js
@@ -1,21 +1,34 @@
-import React from "react";
+import React, { useState } from "react";
 import { NavLink } from "react-router-dom";
 import "../assets/styles/variables.scss";
-import Mylogo from "../assets/logos/chaoss-logo.png";
+import logo from "../assets/logos/chaoss-white.png";
 import Deilogo from "../assets/logos/dei-logo.png";
 import ReactReadMoreReadLess from "react-read-more-read-less";
-
-import slack2 from "../assets/social/slack.png"
-import facebook from "../assets/social/facebook.png"
-import twitter from "../assets/social/twitter.png"
-import linkedin from "../assets/social/linkedin.png"
-
+import SearchIcon from "@mui/icons-material/Search";
+import slack2 from "../assets/social/slack.png";
+import facebook from "../assets/social/facebook.png";
+import twitter from "../assets/social/twitter.png";
+import linkedin from "../assets/social/linkedin.png";
 
 const Footer = () => {
+  const [searchValue, setSearchValue] = useState("");
   return (
     <footer>
       <div className="main-div">
-        <img src={Mylogo} alt="chaoss logo" className="logo" />
+        <div className="top">
+          <img src={logo} alt="chaoss logo" className="logo1" />
+          <img src={Deilogo} alt="Dei  logo" className="logo2" />
+        </div>
+        <div className="search">
+          <SearchIcon fontSize="large" />
+          <input
+            placeholder="What are you looking for"
+            value={searchValue}
+            onChange={(e) => {
+              setSearchValue(e.target.value);
+            }}
+          />
+        </div>
         <div className="minidiv">
           <div className="innerdiv">
             <h2>Community</h2>
@@ -25,7 +38,10 @@ const Footer = () => {
               readLessText={"Show less "}
               readMoreClassName="readMoreClassName"
             >
-              CHAOSS is an open source project at the Linux Foundation focused on creating analytics and metrics to help define community health. Work in the CHAOSS Project community is largely organized around software and metrics. More
+              CHAOSS is an open source project at the Linux Foundation focused
+              on creating analytics and metrics to help define community health.
+              Work in the CHAOSS Project community is largely organized around
+              software and metrics. More
             </ReactReadMoreReadLess>
           </div>
           <div className="innerdiv">
@@ -36,7 +52,10 @@ const Footer = () => {
               readLessText={"Show less"}
               readMoreClassName="readMoreClassName"
             >
-              CHAOSS is an open source project at the Linux Foundation focused on creating analytics and metrics to help define community health. Work in the CHAOSS Project community is largely organized around software and metrics. More
+              CHAOSS is an open source project at the Linux Foundation focused
+              on creating analytics and metrics to help define community health.
+              Work in the CHAOSS Project community is largely organized around
+              software and metrics. More
             </ReactReadMoreReadLess>
           </div>
           <div className="innerdiv">
@@ -76,7 +95,6 @@ const Footer = () => {
                 <img width="40px" src={slack2} alt="slack logo" />
               </a>
             </div>
-            <div className="dei1" ><img src={Deilogo} alt="Dei  logo" /> </div>
           </div>
         </div>
         <hr />
@@ -87,4 +105,3 @@ const Footer = () => {
 };
 
 export default Footer;
-
diff --git a/src/pages/Home.js b/src/pages/Home.js
index b283396..6f1eaf2 100644
--- a/src/pages/Home.js
+++ b/src/pages/Home.js
@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import { Header, Footer } from "../layouts";
-import "../assets/styles/global.css";
+// import "../assets/styles/global.css";
+import "../assets/styles/home.css";
 import heroBackground from "../assets/images/hero-bg.png";
 import heroLogoTwo from "../assets/images/dei-02.png";
 import heroLogoOne from "../assets/images/dei-01.png";
@@ -11,16 +12,18 @@ import pending from "../assets/images/pending.png";
 import eventBadging from "../assets/images/event-badging.png";
 import { Link } from "react-router-dom";
 
-import {Testimonial, Faq} from "../components"
+import { Testimonial, Faq } from "../components";
 import { testimonialData } from "../components/testimonial/testimonialData";
 import { faqData } from "../components/faq/FAQData";
+import { useSnapCarousel } from "react-snap-carousel";
 // import Faq from "../components/faq/Faq";
 // import Testimonial from "../components/testimonial/Testimonial";
 
 const Home = () => {
+  const { scrollRef } = useSnapCarousel();
   return (
     <div className="home">
-      <Header/>
+      <Header />
       <div
         className="hero-section"
         style={{
@@ -41,13 +44,13 @@ const Home = () => {
               </p>
             </div>
             <div className="hero-main-buttons">
-              <button className="button badged-event" type="button">
+              <button type="button">
                 <Link className="link" to={"#"}>
                   Badged Events
                 </Link>
               </button>
 
-              <button className="button apply" type="button">
+              <button type="button">
                 <Link className="link" to={"#"}>
                   Apply for badging
                 </Link>
@@ -110,6 +113,22 @@ const Home = () => {
               );
             })}
           </div>
+          <div className="carosel-container" ref={scrollRef}>
+            {testimonialData.map((item, id) => {
+              let { image, name, title, message } = item;
+
+              return (
+                <div className="carosel-testimonials">
+                  <Testimonial
+                    image={image}
+                    name={name}
+                    title={title}
+                    message={message}
+                  />
+                </div>
+              );
+            })}
+          </div>
         </div>
 
         <div className="faq-container">
@@ -124,7 +143,9 @@ const Home = () => {
           </div>
         </div>
       </div>
-      <Footer/>
+      <div className="section-7">
+        <Footer />
+      </div>
     </div>
   );
 };