diff --git a/src/ui/app/business/components/banner/index.tsx b/src/ui/app/business/components/banner/index.tsx
index 364eccf2..f1d8c248 100644
--- a/src/ui/app/business/components/banner/index.tsx
+++ b/src/ui/app/business/components/banner/index.tsx
@@ -41,13 +41,14 @@ export default function Banner({}: Props) {
         alignItems: "center",
         flexDirection: "column",
         position: "relative",
-        paddingY: "82px",
+        paddingY: { xs: "32px", sm: "64px", md: "82px" },
       }}
     >
       <Box
         sx={{
           display: "flex",
           alignItems: "flex-end",
+          flexDirection: { xs: "column", md: "row" },
           columnGap: "4px",
         }}
       >
@@ -64,7 +65,7 @@ export default function Banner({}: Props) {
       </Box>
       <Box
         sx={{
-          width: "60%",
+          width: { xs: "80%", sm: "70%", md: "60%" },
           textAlign: "center",
           mt: 1,
           display: "flex",
@@ -73,7 +74,7 @@ export default function Banner({}: Props) {
       >
         <Typography
           variant="h4"
-          sx={{ fontSize: "2.65rem" }}
+          sx={{ fontSize: { xs: "2rem", sm: "2.25rem", md: "2.65rem" } }}
           fontWeight={"bold"}
         >
           Effortless Connections, Powerful Results
@@ -87,10 +88,10 @@ export default function Banner({}: Props) {
       <Box
         sx={{
           mt: 3,
-          px: 5,
-          py: 3,
-          paddingBottom: "12px",
-          width: "60%",
+          px: { xs: 2, sm: 3, md: 5 },
+          py: { xs: 2, sm: 3 },
+          paddingBottom: { xs: "8px", md: "12px" },
+          width: { xs: "90%", sm: "80%", md: "60%" },
           background: "rgba(255, 255, 255, 0.51)",
           borderRadius: "16px",
           backdropFilter: "blur(5px)",
@@ -104,7 +105,7 @@ export default function Banner({}: Props) {
             justifyContent={"space-between"}
             alignItems={"flex-start"}
           >
-            <Grid item xs={6} sm={6} md={6} lg={5}>
+            <Grid item xs={12} sm={6} md={5} lg={5}>
               <TextField
                 label="Platform"
                 color="secondary"
@@ -125,10 +126,10 @@ export default function Banner({}: Props) {
                 variant="outlined"
               />
             </Grid>
-            <Grid item xs={6} sm={6} md={6} lg={5}>
+            <Grid item xs={12} sm={6} md={5} lg={5}>
               <FiltersComponent formik={formik} type={"CATEGORIES"} />
             </Grid>
-            <Grid item xs={12} sm={12} md={12} lg={2}>
+            <Grid item xs={12} sm={12} md={2} lg={2}>
               <Button
                 size="large"
                 type="submit"
@@ -137,7 +138,7 @@ export default function Banner({}: Props) {
                 sx={{
                   borderRadius: "12px",
                   fontWeight: "bold",
-                  px: 5,
+                  px: 4,
                   py: 1,
                 }}
               >
@@ -148,7 +149,7 @@ export default function Banner({}: Props) {
         </form>
       </Box>
 
-      <Box sx={{ mt: 5, textAlign: "center" }}>
+      <Box sx={{ mt: 5, textAlign: "center", maxWidth: "90%" }}>
         <Typography variant="h6">
           How can Xfluencer add to the success of your business?
         </Typography>
@@ -173,7 +174,8 @@ export default function Banner({}: Props) {
                     borderRadius: "24px",
                     border: "1px solid #7B7B7B",
                     background: "rgba(255, 255, 255, 0.40)",
-                    fontSize: "20px",
+                    fontSize: { xs: "16px", md: "20px" },
+                    marginBottom: "8px",
                   }}
                 >
                   {it}
diff --git a/src/ui/app/business/components/elevateSection/index.tsx b/src/ui/app/business/components/elevateSection/index.tsx
index 2163532b..8456972c 100644
--- a/src/ui/app/business/components/elevateSection/index.tsx
+++ b/src/ui/app/business/components/elevateSection/index.tsx
@@ -208,56 +208,57 @@ export default function ElevateSection({}: Props) {
         <Typography sx={{ fontSize: "40px" }}>
           Tailored Marketing Solutions For Businesses
         </Typography>
-        <Box
-          sx={{ display: "flex", justifyContent: "center", marginTop: "14px" }}
+        <Grid
+          sx={{ marginTop: "14px" }}
+          mx="auto"
+          container
+          borderRadius="30px"
+          width="80%"
+          border="1px solid #BABABA"
+          justifyContent={"space-between"}
         >
-          <Box
-            sx={{
-              display: "flex",
-              flexWrap: "wrap",
-              borderRadius: "30px",
-              border: "1px solid #BABABA",
-              width: "fit-content",
-            }}
-          >
-            {TABS.map((item, index) => {
-              return (
-                <Box
-                  sx={{
-                    cursor: "pointer",
-                    display: "flex",
-                    paddingX: "56px",
-                    alignItems: "center",
-                    columnGap: "8px",
-                    borderRadius: selectedTab == index ? "30px" : "none",
-                    border: selectedTab == index ? "1px solid black" : "none",
-                    paddingY: "18px",
-                  }}
-                  onClick={() => {
-                    handleSelect({ index });
-                  }}
-                  key={index}
-                >
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    width="16"
-                    height="16"
-                    viewBox="0 0 16 16"
-                    fill="none"
-                  >
-                    <path
-                      fillRule="evenodd"
-                      clipRule="evenodd"
-                      d="M8 10V12L10.7314 9.95143L11.09 9.85021C12.771 9.37573 14 7.8288 14 6C14 3.79086 12.2091 2 10 2H6C3.79086 2 2 3.79086 2 6C2 8.20914 3.79086 10 6 10H8ZM6 16V12C2.68629 12 0 9.31371 0 6C0 2.68629 2.68629 0 6 0H10C13.3137 0 16 2.68629 16 6C16 8.74753 14.1532 11.0637 11.6333 11.775L6 16Z"
-                      fill="black"
-                    />
-                  </svg>
-                  <Typography>{item}</Typography>
-                </Box>
-              );
-            })}
-          </Box>
-        </Box>
+          {TABS.map((item, index) => (
+            <Grid
+              item
+              xs={12}
+              sm={12}
+              lg={4}
+              md={12}
+              sx={{
+                flex: "1",
+                cursor: "pointer",
+                display: "flex",
+                paddingX: "56px",
+                justifyContent: "center",
+                alignItems: "center",
+                columnGap: "8px",
+                borderRadius: selectedTab === index ? "30px" : "none",
+                border: selectedTab === index ? "1px solid black" : "none",
+                paddingY: "18px",
+              }}
+              onClick={() => {
+                handleSelect({ index });
+              }}
+              key={index}
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="16"
+                height="16"
+                viewBox="0 0 16 16"
+                fill="none"
+              >
+                <path
+                  fillRule="evenodd"
+                  clipRule="evenodd"
+                  d="M8 10V12L10.7314 9.95143L11.09 9.85021C12.771 9.37573 14 7.8288 14 6C14 3.79086 12.2091 2 10 2H6C3.79086 2 2 3.79086 2 6C2 8.20914 3.79086 10 6 10H8ZM6 16V12C2.68629 12 0 9.31371 0 6C0 2.68629 2.68629 0 6 0H10C13.3137 0 16 2.68629 16 6C16 8.74753 14.1532 11.0637 11.6333 11.775L6 16Z"
+                  fill="black"
+                />
+              </svg>
+              <Typography>{item}</Typography>
+            </Grid>
+          ))}
+        </Grid>
       </Box>
       <Grid
         container
diff --git a/src/ui/app/business/components/faqSection/index.tsx b/src/ui/app/business/components/faqSection/index.tsx
index 1544519b..f3fef85b 100644
--- a/src/ui/app/business/components/faqSection/index.tsx
+++ b/src/ui/app/business/components/faqSection/index.tsx
@@ -8,6 +8,7 @@ import {
   Accordion,
   AccordionSummary,
   AccordionDetails,
+  Grid,
 } from "@mui/material";
 
 import { ExpandMore } from "@mui/icons-material";
@@ -40,34 +41,25 @@ const FAQs = [
 export default function FAQSection({}: Props) {
   return (
     <>
-      <Box
+      <Grid
+        container
+        justifyContent={"space-between"}
         sx={{
           mt: 3,
-          display: "flex",
-          justifyContent: "space-between",
           paddingY: "46px",
-          alignItems: "center",
-          columnGap: "40px",
         }}
       >
-        <Box sx={{ flex: 1, textAlign: "left" }}>
+        <Grid sx={{ textAlign: "left" }} xs={12} sm={12} md={4} xl={4}>
           <Typography variant="h4" fontWeight={"bold"}>
             Frequently Asked Questions
           </Typography>
-          <Typography sx={{ mt: 3, color: "#676767" }} variant="h6">
+          <Typography sx={{ mt: 3, mb:3, color: "#676767" }} variant="h6">
             Our platform is curated specifically for those influencers who have
             mastered the art of engaging their audience on one of the most
             dynamic social media platforms.
           </Typography>
-        </Box>
-        <Box
-          sx={{
-            flex: 2,
-            display: "flex",
-            flexDirection: "column",
-            rowGap: "20px",
-          }}
-        >
+        </Grid>
+        <Grid item xs={12} sm={12} md={7} xl={7}>
           {FAQs.map(({ question, answer }, index: number) => {
             return (
               <Accordion
@@ -84,6 +76,7 @@ export default function FAQSection({}: Props) {
                       content: "none",
                     },
                   },
+                  mb:2
                 }}
                 key={index}
               >
@@ -104,8 +97,8 @@ export default function FAQSection({}: Props) {
               </Accordion>
             );
           })}
-        </Box>
-      </Box>
+        </Grid>
+      </Grid>
     </>
   );
 }
diff --git a/src/ui/app/business/components/guideContainer/index.tsx b/src/ui/app/business/components/guideContainer/index.tsx
index 4f93eb2b..4886c15f 100644
--- a/src/ui/app/business/components/guideContainer/index.tsx
+++ b/src/ui/app/business/components/guideContainer/index.tsx
@@ -1,6 +1,6 @@
 "use client";
 import React from "react";
-import { Typography, Box } from "@mui/material";
+import { Typography, Box, Grid } from "@mui/material";
 import Image from "next/image";
 
 type Props = {};
@@ -24,9 +24,7 @@ const WORKING_STEPS = [
 ];
 
 const stepContainerStyle = {
-  flex: "1",
   textAlign: "center",
-  maxWidth: "20%",
 };
 
 export default function GuideContainer({}: Props) {
@@ -44,18 +42,25 @@ export default function GuideContainer({}: Props) {
       <Typography variant="subtitle1" sx={{ color: "#505050" }}>
         Explore, Purchase, Analyse in seconds.
       </Typography>
-      <Box
+      <Grid
+        container
+        justifyContent={"space-between"}
+        columnGap={"10px"}
+        rowGap={"20px"}
         sx={{
-          display: "flex",
-          justifyContent: "space-around",
           padding: "64px 72px",
           paddingBottom: "0px",
-          flexWrap: "wrap",
-          columnGap: "10px",
         }}
       >
         {WORKING_STEPS.map((step) => (
-          <Box key={step.id} sx={stepContainerStyle}>
+          <Grid
+            key={step.id}
+            sx={stepContainerStyle}
+            xs={12}
+            sm={3}
+            lg={3}
+            md={3}
+          >
             <Image
               src={step.imageUrl}
               height={94}
@@ -63,9 +68,9 @@ export default function GuideContainer({}: Props) {
               alt={step.description}
             />
             <Typography variant="subtitle1">{step.description}</Typography>
-          </Box>
+          </Grid>
         ))}
-      </Box>
+      </Grid>
     </Box>
   );
 }
diff --git a/src/ui/app/business/components/influencersContainer/index.tsx b/src/ui/app/business/components/influencersContainer/index.tsx
index c4214f71..e9144e42 100644
--- a/src/ui/app/business/components/influencersContainer/index.tsx
+++ b/src/ui/app/business/components/influencersContainer/index.tsx
@@ -55,10 +55,9 @@ export default function InfluencersContainer({ topInfluencers }: Props) {
           <ArrowBackIos onClick={handleBack} sx={{ cursor: "pointer" }} />
         </Grid>
         <Grid item flex={1}>
-          <Box
+          <Grid
+            container
             sx={{
-              display: "flex",
-              flexWrap: "wrap",
               gap: "20px",
               justifyContent: "center",
             }}
@@ -66,7 +65,7 @@ export default function InfluencersContainer({ topInfluencers }: Props) {
             {displayedInfluencers.map((inf, index) => (
               <InfluencersCards influencer={inf} key={index} />
             ))}
-          </Box>
+          </Grid>
         </Grid>
         <Grid item>
           <ArrowForwardIos onClick={handleForward} sx={{ cursor: "pointer" }} />
diff --git a/src/ui/app/components/analyticsContainer/index.tsx b/src/ui/app/components/analyticsContainer/index.tsx
index 310110d1..4a31fbc7 100644
--- a/src/ui/app/components/analyticsContainer/index.tsx
+++ b/src/ui/app/components/analyticsContainer/index.tsx
@@ -28,8 +28,7 @@ const ANALYTICS_DATA: AnalyticsRoleData[] = [
     },
     data2: {
       value: "76 %",
-      subtitle:
-        "Users say they bought something after a recommendation from X",
+      subtitle: "Users say they bought something after a recommendation from X",
     },
     data3: {
       value: "238 M",
@@ -72,7 +71,9 @@ const AnalyticsItem: React.FC<AnalyticsDataItem> = ({
     sm={12}
     md={3}
     lg={3}
-    justifyContent="space-around"
+    sx={{
+      justifyContent: { sm: "flex-start", md: "space-around" },
+    }}
     alignItems="center"
     display="flex"
   >
@@ -82,7 +83,7 @@ const AnalyticsItem: React.FC<AnalyticsDataItem> = ({
       </Typography>
       <Typography variant="subtitle1">{subtitle}</Typography>
     </Box>
-    <svg
+    {/* <svg
       xmlns="http://www.w3.org/2000/svg"
       width="2"
       height="126"
@@ -96,7 +97,7 @@ const AnalyticsItem: React.FC<AnalyticsDataItem> = ({
         strokeOpacity="0.6"
         strokeLinecap="round"
       />
-    </svg>
+    </svg> */}
   </Grid>
 );
 
diff --git a/src/ui/app/components/navbar/index.tsx b/src/ui/app/components/navbar/index.tsx
index cc2f402f..da61e52b 100644
--- a/src/ui/app/components/navbar/index.tsx
+++ b/src/ui/app/components/navbar/index.tsx
@@ -8,14 +8,21 @@ import {
   Badge,
   Box,
   Button,
+  Divider,
+  Drawer,
+  IconButton,
   Link,
+  List,
   Toolbar,
   Typography,
 } from "@mui/material";
+import CableIcon from "@mui/icons-material/Cable";
 import Image from "next/image";
+import LogoutIcon from "@mui/icons-material/Logout";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import LoginMenu from "../loginMenu";
+import MenuIcon from "@mui/icons-material/Menu";
 
 import CartIcon from "@/public/svg/Cart.svg";
 import CartDisabledIcon from "@/public/svg/Cart_disabled.svg";
@@ -37,6 +44,7 @@ import { notification } from "@/src/components/shared/notification";
 import NextLink from "next/link";
 import SavedProfileIcon from "@/public/svg/Saved.svg";
 import SavedProfileDisabledIcon from "@/public/svg/Saved_disabled.svg";
+import { PostponedPathnameNormalizer } from "next/dist/server/future/normalizers/request/postponed";
 
 const MENU_ITEMS: {
   [key: string]: {
@@ -228,10 +236,15 @@ export default function Navbar() {
   const router = useRouter();
   const pathname = usePathname();
   // const [currentUser, setCurrentUser] = React.useState<UserType | null>(null);
+  const [toggleDrawer, setToggleDrawer] = useState(false);
 
   const params = useSearchParams();
   const user = useAppSelector((state) => state.user);
 
+  useEffect(() => {
+    setToggleDrawer(false);
+  }, [pathname]);
+
   useEffect(() => {
     const status = params.get("authenticationStatus");
     const paramMessage = params.get("message");
@@ -301,9 +314,9 @@ export default function Navbar() {
         {user?.loggedIn || pathname.includes("login") ? null : (
           <Box
             sx={{
-              display: "flex",
               columnGap: "8px",
               justifyContent: "center",
+              display: { xs: "none", md: "flex" },
             }}
           >
             <Button
@@ -332,7 +345,13 @@ export default function Navbar() {
             </Button>
           </Box>
         )}
-        <Box sx={{ textAlign: "right", width: "33%" }}>
+        <Box
+          sx={{
+            textAlign: "right",
+            width: "33%",
+            display: { xs: "none", md: "block" },
+          }}
+        >
           <Box
             sx={{
               display: "flex",
@@ -388,7 +407,153 @@ export default function Navbar() {
             )}
           </Box>
         </Box>
+        <Box
+          sx={{
+            textAlign: "right",
+            width: "33%",
+            display: { xs: "block", md: "none" },
+          }}
+        >
+          <IconButton edge="end" onClick={() => setToggleDrawer(!toggleDrawer)}>
+            <MenuIcon />
+          </IconButton>
+        </Box>
       </Toolbar>
+
+      <Drawer
+        anchor={"bottom"}
+        open={toggleDrawer}
+        onClose={() => setToggleDrawer(!toggleDrawer)}
+      >
+        <>
+          <List>
+            {user?.loggedIn ? (
+              user?.user?.role?.name.includes("business_owner") ? (
+                <Box
+                  sx={{
+                    py: 1,
+                    display: "flex",
+                    flexDirection: "column",
+                    rowGap: "8px",
+                    alignItems: "center",
+                    justifyContent: "center",
+                  }}
+                >
+                  {[
+                    "Profile",
+                    "Explore",
+                    "Dashboard",
+                    "Messages",
+                    "Cart",
+                    "Bookmarks",
+                    "Notifications",
+                  ].map((item) => {
+                    return <MenuItemsComponent items={[item]} />;
+                  })}
+                  <LogoutIcon sx={{ height: "16px" }} />
+                  <Typography
+                    onClick={logoutTwitterUser}
+                    sx={{ fontSize: "10px" }}
+                  >
+                    Logout
+                  </Typography>
+                </Box>
+              ) : (
+                <Box
+                  sx={{
+                    py: 1,
+                    display: "flex",
+                    flexDirection: "column",
+                    rowGap: "8px",
+                    alignItems: "center",
+                    justifyContent: "center",
+                  }}
+                >
+                  {[
+                    "Profile",
+                    "Orders",
+                    "Dashboard",
+                    "Messages",
+                    "Notifications",
+                  ].map((item) => {
+                    return <MenuItemsComponent items={[item]} />;
+                  })}
+                  <LogoutIcon sx={{ height: "16px" }} />
+                  <Typography
+                    onClick={logoutTwitterUser}
+                    sx={{ fontSize: "10px" }}
+                  >
+                    Logout
+                  </Typography>
+                </Box>
+              )
+            ) : (
+              <Box
+                sx={{
+                  py: 1,
+                  display: "flex",
+                  flexDirection: "column",
+                  rowGap: "8px",
+                  alignItems: "center",
+                  justifyContent: "center",
+                }}
+              >
+                {pathname.includes("business") ? (
+                  <>
+                    <MenuItemsComponent items={["Home", "Explore"]} />
+                    <CableIcon sx={{ height: "16px" }} />
+                    <Typography
+                      onClick={handleConnect}
+                      sx={{ fontSize: "10px" }}
+                    >
+                      Connect
+                    </Typography>
+                  </>
+                ) : (
+                  <>
+                    <CableIcon sx={{ height: "16px" }} />
+                    <Typography
+                      onClick={handleConnect}
+                      sx={{ fontSize: "10px" }}
+                    >
+                      Connect
+                    </Typography>
+                  </>
+                )}
+                <Box sx={{ display: "flex", columnGap: "10px", mt: 2 }}>
+                  <Button
+                    size="small"
+                    variant={getButtonVariant("influencer")}
+                    color="secondary"
+                    sx={{
+                      borderRadius: "20px",
+                    }}
+                    onClick={() => {
+                      router.push("/influencer");
+                    }}
+                  >
+                    For Influencer
+                  </Button>
+                  <Button
+                    size="small"
+                    variant={getButtonVariant("business")}
+                    color="secondary"
+                    sx={{
+                      borderRadius: "20px",
+                    }}
+                    onClick={() => {
+                      router.push("/business");
+                    }}
+                  >
+                    For Business
+                  </Button>
+                </Box>
+              </Box>
+            )}
+          </List>
+          <Divider />
+        </>
+      </Drawer>
     </AppBar>
   );
 }