diff --git a/admin-frontend/src/components/testimonial/ManageTestimonials.jsx b/admin-frontend/src/components/testimonial/ManageTestimonials.jsx
index d4e3d72..6539082 100644
--- a/admin-frontend/src/components/testimonial/ManageTestimonials.jsx
+++ b/admin-frontend/src/components/testimonial/ManageTestimonials.jsx
@@ -24,6 +24,7 @@ function ManageTestimonials() {
   const handleToggle = async (testimonialId) => {
     try {
       await toggleTestimonialVisibility(testimonialId);
+      openSnackbar(`Toggled testimonial successfully.`, "success")
     } catch (error) {
       console.error(error);
       openSnackbar("An error occurred", "error");
diff --git a/admin-frontend/src/components/testimonial/TestimonialsTable.jsx b/admin-frontend/src/components/testimonial/TestimonialsTable.jsx
index 6752d43..0906609 100644
--- a/admin-frontend/src/components/testimonial/TestimonialsTable.jsx
+++ b/admin-frontend/src/components/testimonial/TestimonialsTable.jsx
@@ -137,7 +137,7 @@ const TestimonialsTable = ({ testimonials, handleToggle }) => {
 
   return (
     <Box>
-      <div style={{ height: 500, width: "99%" }}>
+      <div style={{ height: 800, width: "99%"}}>
         <DataGrid
           initialState={{
             pagination: {
diff --git a/client-frontend/src/assets/NatureOnScreen.png b/client-frontend/src/assets/NatureOnScreen.png
new file mode 100644
index 0000000..7c6c540
Binary files /dev/null and b/client-frontend/src/assets/NatureOnScreen.png differ
diff --git a/client-frontend/src/components/Home/ClientTestimonial.jsx b/client-frontend/src/components/Home/ClientTestimonial.jsx
new file mode 100644
index 0000000..ddda0c1
--- /dev/null
+++ b/client-frontend/src/components/Home/ClientTestimonial.jsx
@@ -0,0 +1,64 @@
+import { FormatQuote } from "@mui/icons-material";
+import {
+  Box,
+  Card,
+  CardContent,
+  Paper,
+  Typography,
+  styled,
+} from "@mui/material";
+import React from "react";
+
+const StyledPaper = styled(Paper)`
+  padding: 10px;
+  padding-top: 6px;
+  width: 500px;
+  border-radius: 10px;
+  border: 1px solid rgb(159, 145, 204);
+  box-shadow: 3px 3px 0px 0px rgb(159, 145, 204, 40%);
+`;
+function ClientTestimonial({ testimonial }) {
+  return (
+    <StyledPaper>
+      <Card elevation={0}>
+        <CardContent>
+          <FormatQuote
+            color="primary"
+            sx={{
+              fontSize: "3rem",
+              transform: "scaleX(-1)",
+            }}
+          />
+
+          <div
+            style={{
+              height: "200px",
+              overflowY: "auto",
+
+              overflowWrap: "break-word",
+            }}
+          >
+            <Typography
+              variant="h6"
+              align="center"
+              sx={{
+                lineHeight: 1.2,
+                textAlign: "justify",
+                fontSize: "1.3rem",
+                padding: 2,
+              }}
+            >
+              {testimonial.testimonialBody}
+            </Typography>
+          </div>
+
+          <Typography variant="body1" align="center" paddingTop={2}>
+            - {testimonial.displayName}, {testimonial.clientName}
+          </Typography>
+        </CardContent>
+      </Card>
+    </StyledPaper>
+  );
+}
+
+export default ClientTestimonial;
diff --git a/client-frontend/src/components/Home/TestimonialSection.jsx b/client-frontend/src/components/Home/TestimonialSection.jsx
new file mode 100644
index 0000000..a84bc3a
--- /dev/null
+++ b/client-frontend/src/components/Home/TestimonialSection.jsx
@@ -0,0 +1,121 @@
+import { Container, Stack, Typography } from "@mui/material";
+import { useEffect } from "react";
+import "swiper/css";
+import "swiper/css/navigation";
+import "swiper/css/autoplay";
+import "swiper/css/pagination";
+import { Autoplay, Navigation, Pagination } from "swiper/modules";
+import { Swiper, SwiperSlide } from "swiper/react";
+import useSnackbarStore from "../../zustand/SnackbarStore";
+import { useTestimonialStore } from "../../zustand/TestimonialStore";
+import ClientTestimonial from "./ClientTestimonial";
+
+function TestimonialSection() {
+  const { testimonials, getAllTestimonials } = useTestimonialStore();
+  const { openSnackbar } = useSnackbarStore();
+  const testimonialsPerSlide = 3;
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        await getAllTestimonials();
+      } catch (err) {
+        console.error(err);
+        openSnackbar("Error when retrieving testimonials.", "error");
+      }
+    };
+    fetchData();
+  }, [getAllTestimonials]);
+
+  if (testimonials.length === 0) return <></>;
+
+  function TestimonialSwiper() {
+    return (
+      <Swiper
+        maxWidth="fit-content"
+        slidesPerView={3}
+        autoplay={{
+          delay: 6000,
+          disableOnInteraction: true,
+          pauseOnMouseEnter: true
+        }}
+        
+        speed={1200}
+        spaceBetween={30}
+        // pagination={{
+        //   clickable: true,
+        // }}
+        navigation={true}
+        modules={[Pagination, Navigation, Autoplay]}
+        className="mySwiper"
+        style={{
+          boxShadow: "none",
+          padding: 30,
+          backgroundColor: "transparent",
+        }}
+        breakpoints={{
+          600: {
+            slidesPerView: 2,
+          },
+          960: {
+            slidesPerView: 3,
+          },
+        }}
+      >
+        {testimonials.map((testimonial, index) => (
+          <SwiperSlide
+            key={index}
+            style={{
+              display: "flex",
+              position: "relative",
+              padding: "10px",
+              boxSizing: "border-box",
+              backgroundColor: "transparent",
+            }}
+          >
+            <ClientTestimonial
+              key={testimonial._id}
+              testimonial={testimonial}
+              style={{}}
+            />
+          </SwiperSlide>
+        ))}
+      </Swiper>
+    );
+  }
+  function TestimonialGrid() {
+    return (
+      <Stack spacing={5} justifyContent="center" direction={"row"} width="100%">
+        {testimonials.map((testimonial) => (
+          <>
+            <ClientTestimonial testimonial={testimonial} />
+          </>
+        ))}
+      </Stack>
+    );
+  }
+
+  return (
+    <Container
+      maxWidth="xl"
+      sx={{
+        width: "100%",
+        maxWidth: "80vw",
+        height: "100%",
+        paddingTop: 5,
+      }}
+    >
+      <Typography
+        variant="h4"
+        gutterBottom
+        py={6}
+        sx={{ fontSize: "2rem", textAlign: "center" }}
+      >
+        What our clients say
+      </Typography>
+      {testimonials.length < 3 ? <TestimonialGrid /> : <TestimonialSwiper />}
+    </Container>
+  );
+}
+
+export default TestimonialSection;
diff --git a/client-frontend/src/components/Recommendation/FeatureSection.jsx b/client-frontend/src/components/Recommendation/FeatureSection.jsx
new file mode 100644
index 0000000..63519e8
--- /dev/null
+++ b/client-frontend/src/components/Recommendation/FeatureSection.jsx
@@ -0,0 +1,25 @@
+import React from "react";
+import useClientStore from "../../zustand/ClientStore";
+import useVendorStore from "../../zustand/VendorStore";
+import { Container } from "@mui/material";
+
+function FeatureSection() {
+  const { authenticated } = useClientStore();
+  const { vendorAuthenticated } = useVendorStore();
+  if (!authenticated) return <></>;
+  return (
+    <Container
+      maxWidth="xl"
+      sx={{
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        paddingTop: "3rem",
+      }}
+    >
+      Insert Featured Activities Here 
+    </Container>
+  );
+}
+
+export default FeatureSection;
diff --git a/client-frontend/src/containers/HomePage.jsx b/client-frontend/src/containers/HomePage.jsx
index e71a9f7..c5ebe57 100644
--- a/client-frontend/src/containers/HomePage.jsx
+++ b/client-frontend/src/containers/HomePage.jsx
@@ -1,10 +1,105 @@
 import React from "react";
+import {
+  Button,
+  Container,
+  Typography,
+  Box,
+  Paper,
+  Grid,
+  Stack,
+} from "@mui/material";
 
-const HomePage = (props) => {
+import image from "../assets/NatureOnScreen.png";
+import useClientStore from "../zustand/ClientStore";
+import useVendorStore from "../zustand/VendorStore";
+import TestimonialSection from "../components/Home/TestimonialSection";
+import FeatureSection from "../components/Recommendation/FeatureSection";
+
+const ImageSection = () => {
+  const { authenticated } = useClientStore();
+  const { vendorAuthenticated } = useVendorStore();
+
+  return (
+    <Container
+      maxWidth="xl"
+      
+      sx={{
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        paddingY: "5rem",
+
+      }}
+    >
+      <Grid container spacing={3}>
+        <Grid
+          item
+          xs={12}
+          md={6}
+          sx={{
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "center",
+          }}
+        >
+          <Typography
+            variant="h2"
+            gutterBottom
+            sx={{ fontWeight: 800, fontSize: "3rem" }}
+          >
+            Platform for Sustainability and Wellness Employee Activities.
+          </Typography>
+
+          <Typography
+            variant="subtitle1"
+            paragraph
+            sx={{ fontWeight: 200, fontSize: "1.2rem" }}
+          >
+            Book or post employee engagement activities on Gleek. Explore
+            sustainable activities and improve employee wellbeing.
+          </Typography>
+          {!authenticated && !vendorAuthenticated && (
+            <Stack direction="row" spacing={2}>
+              <Button
+                variant="contained"
+                color="primary"
+                size="large"
+                href="/register"
+              >
+                Get Started as a Client
+              </Button>
+              <Button
+                variant="outlined"
+                color="primary"
+                size="large"
+                href="/vendor/register"
+              >
+                Get Started as a Vendor
+              </Button>
+            </Stack>
+          )}
+        </Grid>
+
+        <Grid item xs={12} md={6}>
+          <img
+            src={image}
+            alt="NatureOnScreen"
+            style={{ width: "100%", height: "auto" }}
+          />
+        </Grid>
+      </Grid>
+    </Container>
+  );
+};
+const HomePage = () => {
   return (
-    <div>
-      <h1>HOMEPAGE</h1>
-    </div>
+    <>
+      <Container elevation={0} maxWidth>
+        <FeatureSection/>
+        {<ImageSection />}
+        <TestimonialSection />
+      </Container>
+    </>
   );
 };
 
diff --git a/client-frontend/src/zustand/BlockoutStore.js b/client-frontend/src/zustand/BlockoutStore.js
index d7a4c5d..bed423b 100644
--- a/client-frontend/src/zustand/BlockoutStore.js
+++ b/client-frontend/src/zustand/BlockoutStore.js
@@ -17,6 +17,7 @@ const useBlockoutStore = create((set) => ({
 
       set({ isLoadingactivitiesWithBlockouts: false, activitiesWithBlockouts });
     } catch (error) {
+      console.error(error)
       throw error;
     }
   },
@@ -30,6 +31,7 @@ const useBlockoutStore = create((set) => ({
 
       set({ isLoadingBlockoutsForActivity: false, blockoutsForActivity });
     } catch (error) {
+      console.error(error)
       throw error;
     }
   },
@@ -56,6 +58,7 @@ const useBlockoutStore = create((set) => ({
         activitiesWithBlockouts: activities,
       });
     } catch (error) {
+      console.error(error)
       throw error;
     }
   },
@@ -73,6 +76,7 @@ const useBlockoutStore = create((set) => ({
       const blockoutsForActivity = response.data.blockedTimeslots;
       set({ isLoadingBlockoutsForActivity: false, blockoutsForActivity });
     } catch (error) {
+      console.error(error)
       throw error;
     }
   },
@@ -91,6 +95,7 @@ const useBlockoutStore = create((set) => ({
       const blockoutsForActivity = response.data.blockedTimeslots;
       set({ isLoadingBlockoutsForActivity: false, blockoutsForActivity });
     } catch (error) {
+      console.error(error)
       throw error;
     }
   },
diff --git a/client-frontend/src/zustand/BookmarkStore.js b/client-frontend/src/zustand/BookmarkStore.js
index 6e3f2a4..3976fda 100644
--- a/client-frontend/src/zustand/BookmarkStore.js
+++ b/client-frontend/src/zustand/BookmarkStore.js
@@ -20,6 +20,7 @@ const useBookmarkStore = create((set) => ({
 
       set({ isLoadingBookmarks: false, activityBookmarks, vendorBookmarks });
     } catch (error) {
+      console.error(error)
       throw error;
     }
   },
@@ -34,6 +35,7 @@ const useBookmarkStore = create((set) => ({
       const currentBookmark = response.data;
       set({ currentBookmark });
     } catch (error) {
+      console.error(error)
       throw error;
     }
   },
@@ -46,6 +48,7 @@ const useBookmarkStore = create((set) => ({
       console.log("store", currentBookmark);
       set({ currentBookmark });
     } catch (error) {
+      console.error(error)
       throw error;
     }
   },
@@ -60,6 +63,7 @@ const useBookmarkStore = create((set) => ({
       const currentBookmark = response.data;
       set({ currentBookmark });
     } catch (error) {
+      console.error(error)
       throw error;
     }
   },
@@ -71,6 +75,7 @@ const useBookmarkStore = create((set) => ({
       const currentBookmark = response.data;
       set({ currentBookmark });
     } catch (error) {
+      console.error(error)
       throw error;
     }
   },
@@ -89,6 +94,7 @@ const useBookmarkStore = create((set) => ({
         ),
       }));
     } catch (error) {
+      console.error(error)
       throw error;
     }
   },
@@ -108,6 +114,7 @@ const useBookmarkStore = create((set) => ({
         ),
       }));
     } catch (error) {
+      console.error(error)
       throw error;
     }
   },
diff --git a/client-frontend/src/zustand/ClientStore.js b/client-frontend/src/zustand/ClientStore.js
index 36ecd2e..30295b8 100644
--- a/client-frontend/src/zustand/ClientStore.js
+++ b/client-frontend/src/zustand/ClientStore.js
@@ -75,7 +75,6 @@ const useClientStore = create((set) => ({
       return response;
     } catch (error) {
       console.error(error);
-      alert(error.response.data);
     }
   },
 
@@ -93,6 +92,7 @@ const useClientStore = create((set) => ({
       }, 500);
       return true;
     } catch (error) {
+      console.error(error);
       throw error;
     }
   },
@@ -109,6 +109,7 @@ const useClientStore = create((set) => ({
       }, 500);
       return true;
     } catch (error) {
+      console.error(error);
       throw error;
     }
   },
diff --git a/client-frontend/src/zustand/TestimonialStore.js b/client-frontend/src/zustand/TestimonialStore.js
new file mode 100644
index 0000000..ee5771f
--- /dev/null
+++ b/client-frontend/src/zustand/TestimonialStore.js
@@ -0,0 +1,20 @@
+import { create } from "zustand";
+import AxiosConnect from "../utils/AxiosConnect";
+
+export const useTestimonialStore = create((set) => ({
+  testimonials: [],
+  isLoading: true,
+  getAllTestimonials: async () => {
+    try {
+      const response = await AxiosConnect.get(`/gleek/testimonial/`);
+      console.log("getAllTestimonials", response.data);
+      set({
+        testimonials: response.data,
+        isLoading: false,
+      });
+    } catch (error) {
+      console.error(error);
+      throw error;
+    }
+  },
+}));
diff --git a/server/controller/testimonialController.js b/server/controller/testimonialController.js
index 9b84c4b..d9b56dd 100644
--- a/server/controller/testimonialController.js
+++ b/server/controller/testimonialController.js
@@ -59,6 +59,17 @@ export const getAllTestimonials = async (req, res) => {
   }
 };
 
+export const getAllVisibleTestimonials = async (req, res) => {
+  try {
+    const testimonials = await Testimonial.find({ hidden: false });
+
+    return res.status(200).json(testimonials);
+  } catch (err) {
+    console.error(err);
+    return res.status(500).send({ message: "Server error" });
+  }
+};
+
 export const toggleTestimonialVisibility = async (req, res) => {
   try {
     const testimonialId = req.params.testimonialId;
diff --git a/server/routes/gleek/gleek.js b/server/routes/gleek/gleek.js
index eaedeee..901a702 100644
--- a/server/routes/gleek/gleek.js
+++ b/server/routes/gleek/gleek.js
@@ -8,6 +8,7 @@ import timeslotRoutes from "./timeslot.js";
 import bookmarkRoutes from "./bookmark.js";
 import activityRoutes from "./activity.js";
 import surveyRoutes from "./survey.js";
+import testimonialRoutes from "./testimonial.js";
 import cartRoutes from "./cart.js";
 import badgeRoutes from "./badge.js";
 import { userRouter } from "../../controller/gleekUserRouterController.js";
@@ -39,6 +40,8 @@ router.use("/activity", activityRoutes);
 router.use("/cart", cartRoutes);
 // /gleek/survey
 router.use("/survey", surveyRoutes);
+// /gleek/testimonial
+router.use("/testimonial", testimonialRoutes);
 // /gleek/badge
 router.use("/badge", badgeRoutes);
 export default router;
diff --git a/server/routes/gleek/testimonial.js b/server/routes/gleek/testimonial.js
new file mode 100644
index 0000000..4e8bba1
--- /dev/null
+++ b/server/routes/gleek/testimonial.js
@@ -0,0 +1,12 @@
+import express from "express";
+
+const router = express.Router();
+
+import {
+  getAllVisibleTestimonials
+} from "../../controller/testimonialController.js";
+
+router.get("/",  getAllVisibleTestimonials);
+
+
+export default router;