diff --git a/client-frontend/src/containers/Client/Booking/BookingsDetails.jsx b/client-frontend/src/containers/Client/Booking/BookingsDetails.jsx
index 9020e4b..86619fb 100644
--- a/client-frontend/src/containers/Client/Booking/BookingsDetails.jsx
+++ b/client-frontend/src/containers/Client/Booking/BookingsDetails.jsx
@@ -1,22 +1,20 @@
+import ArticleIcon from "@mui/icons-material/Article";
 import {
   Box,
-  Tab,
+  Button,
   Chip,
-  Tabs,
-  Typography,
-  Badge,
   Divider,
   Grid,
-  Button,
+  Typography
 } from "@mui/material";
-import React, { useEffect, useState } from "react";
-import { useParams } from "react-router-dom";
-import useBookingStore from "../../../zustand/BookingStore";
+import { useTheme } from "@mui/material/styles";
 import useMediaQuery from "@mui/material/useMediaQuery";
-import { lighten, useTheme } from "@mui/material/styles";
+import React, { useEffect } from "react";
+import { Link, useParams } from "react-router-dom";
 import notFound from "../../../assets/not_found.png";
+import MainBodyContainer from "../../../components/Common/MainBodyContainer";
 import VendorProfileItem from "../../../components/Vendor/VendorProfileItem";
-import { Link } from "react-router-dom";
+import useBookingStore from "../../../zustand/BookingStore";
 
 const BookingsDetails = () => {
   const { bookingId } = useParams();
@@ -55,314 +53,365 @@ const BookingsDetails = () => {
     getBookingForClient(bookingId);
   }, [bookingId]);
 
+  const isSurveyClosed = () => {
+    console.log(currentBooking?.isSurveySubmitted);
+    console.log(currentBooking?.status);
+    return (
+      currentBooking?.isSurveySubmitted === true ||
+      currentBooking?.status !== "CONFIRMED" ||
+      currentBooking?.status !== "PAID"
+    );
+  };
+
   const isMediumScreen = useMediaQuery((theme) => theme.breakpoints.down("md"));
   const activityPath = `/shop/activity/${currentBooking?.activityId._id}`;
 
   return (
-    <Box
-      display="flex"
-      flexDirection="column"
-      width="80%"
-      bgcolor={"grey.50"}
-      margin="20px auto"
-      boxShadow={1}
-      p={5}
+    <MainBodyContainer
+      hasBackButton={true}
+      breadcrumbNames={["View All Bookings"]}
+      breadcrumbLinks={[`/bookings/`]}
+      currentBreadcrumbName={`Booking Details`}
     >
-      <Typography color="secondary" variant="h4" mb={2}>
-        Booking Overview
-      </Typography>
-      <Grid container spacing={2}>
-        <Grid
-          item
-          xs={12}
-          sm={12}
-          md={10 / 3}
-          lg={10 / 3}
-          display="flex"
-          justifyContent="center"
-          alignItems="center"
-        >
-          <Typography variant="subtitle1">
-            BOOKING ID: {currentBooking?._id}
-          </Typography>
+      <Box
+        display="flex"
+        flexDirection="column"
+        width="80%"
+        bgcolor={"grey.50"}
+        margin="20px auto"
+        boxShadow={1}
+        p={5}
+      >
+        <Typography color="secondary" variant="h4" mb={2}>
+          Booking Overview
+        </Typography>
+        <Grid container spacing={2}>
+          <Grid
+            item
+            xs={12}
+            sm={12}
+            md={10 / 3}
+            lg={10 / 3}
+            display="flex"
+            justifyContent="center"
+            alignItems="center"
+          >
+            <Typography variant="subtitle1">
+              BOOKING ID: {currentBooking?._id}
+            </Typography>
+          </Grid>
+          <Grid
+            item
+            xs={12}
+            sm={12}
+            md={1}
+            lg={1}
+            display="flex"
+            justifyContent="center"
+            alignItems="center"
+          >
+            {!isMediumScreen && (
+              <Box height="35px">
+                <Divider orientation="vertical" />
+              </Box>
+            )}
+            {isMediumScreen && (
+              <Box width="100%">
+                <Divider orientation="horizontal" />
+              </Box>
+            )}
+          </Grid>
+          <Grid
+            item
+            xs={12}
+            sm={12}
+            md={10 / 3}
+            lg={10 / 3}
+            display="flex"
+            justifyContent="center"
+            alignItems="center"
+          >
+            <Typography variant="subtitle1">
+              Order placed on{" "}
+              {new Date(currentBooking?.creationDateTime).toLocaleTimeString()}
+              {", "}
+              {new Date(currentBooking?.creationDateTime).toLocaleDateString()}
+            </Typography>
+          </Grid>
+          <Grid
+            item
+            xs={12}
+            sm={12}
+            md={1}
+            lg={1}
+            display="flex"
+            justifyContent="center"
+            alignItems="center"
+          >
+            {!isMediumScreen && (
+              <Box height="35px">
+                <Divider orientation="vertical" />
+              </Box>
+            )}
+            {isMediumScreen && (
+              <Box width="100%">
+                <Divider orientation="horizontal" />
+              </Box>
+            )}
+          </Grid>
+          <Grid
+            item
+            xs={12}
+            sm={12}
+            md={10 / 3}
+            lg={10 / 3}
+            display="flex"
+            justifyContent="center"
+            alignItems="center"
+          >
+            <Chip
+              label={currentBooking?.status.replace(/_/g, " ")}
+              color={color}
+            />
+          </Grid>
         </Grid>
-        <Grid
-          item
-          xs={12}
-          sm={12}
-          md={1}
-          lg={1}
-          display="flex"
-          justifyContent="center"
-          alignItems="center"
-        >
-          {!isMediumScreen && (
-            <Box height="35px">
-              <Divider orientation="vertical" />
-            </Box>
-          )}
-          {isMediumScreen && (
-            <Box width="100%">
-              <Divider orientation="horizontal" />
+        <Typography color="secondary" variant="h5" mb={2} mt={4}>
+          Billing information
+        </Typography>
+        <Grid container spacing={2}>
+          <Grid item xs={12} sm={12} md={12} lg={12}>
+            <Box
+              boxShadow={2}
+              borderRadius={2}
+              width="100%"
+              bgcolor="white"
+              p={3}
+            >
+              <Grid container xs={12} sm={12} md={12} lg={12}>
+                <Grid item xs={6} sm={6} md={3} lg={3}>
+                  <Typography color={primary} variant="subtitle1">
+                    Billing Party Name
+                  </Typography>
+                  <Typography variant="subtitle1">
+                    {currentBooking?.billingPartyName}
+                  </Typography>
+                </Grid>
+                <Grid item xs={6} sm={6} md={3} lg={3}>
+                  <Typography color={primary} variant="subtitle1">
+                    Billing Email
+                  </Typography>
+                  <Typography variant="subtitle1">
+                    {currentBooking?.billingEmail}
+                  </Typography>
+                </Grid>
+                <Grid item xs={6} sm={6} md={3} lg={3}>
+                  <Typography color={primary} variant="subtitle1">
+                    Billing Postal Code
+                  </Typography>
+                  <Typography variant="subtitle1">
+                    {currentBooking?.billingOfficePostalCode}
+                  </Typography>
+                </Grid>
+                <Grid item xs={6} sm={6} md={3} lg={3}>
+                  <Typography color={primary} variant="subtitle1">
+                    Billing Postal Code
+                  </Typography>
+                  <Typography variant="subtitle1">
+                    {currentBooking?.billingOfficePostalCode}
+                  </Typography>
+                </Grid>
+              </Grid>
             </Box>
-          )}
-        </Grid>
-        <Grid
-          item
-          xs={12}
-          sm={12}
-          md={10 / 3}
-          lg={10 / 3}
-          display="flex"
-          justifyContent="center"
-          alignItems="center"
-        >
-          <Typography variant="subtitle1">
-            Order placed on{" "}
-            {new Date(currentBooking?.creationDateTime).toLocaleTimeString()}
-            {", "}
-            {new Date(currentBooking?.creationDateTime).toLocaleDateString()}
-          </Typography>
+          </Grid>
         </Grid>
-        <Grid
-          item
-          xs={12}
-          sm={12}
-          md={1}
-          lg={1}
-          display="flex"
-          justifyContent="center"
-          alignItems="center"
-        >
-          {!isMediumScreen && (
-            <Box height="35px">
-              <Divider orientation="vertical" />
-            </Box>
-          )}
-          {isMediumScreen && (
-            <Box width="100%">
-              <Divider orientation="horizontal" />
-            </Box>
+        <Typography color="secondary" variant="h5" mt={4}>
+          Booking Details
+        </Typography>
+        <Box mt={2}>
+          {currentBooking?.vendorId && (
+            <VendorProfileItem vendor={currentBooking?.vendorId} />
           )}
-        </Grid>
-        <Grid
-          item
-          xs={12}
-          sm={12}
-          md={10 / 3}
-          lg={10 / 3}
-          display="flex"
-          justifyContent="center"
-          alignItems="center"
+        </Box>
+        <Box
+          mt={2}
+          boxShadow={2}
+          borderRadius={2}
+          width="100%"
+          bgcolor="white"
+          p={3}
         >
-          <Chip
-            label={currentBooking?.status.replace(/_/g, " ")}
-            color={color}
-          />
-        </Grid>
-      </Grid>
-      <Typography color="secondary" variant="h5" mb={2} mt={4}>
-        Billing information
-      </Typography>
-      <Grid container spacing={2}>
-        <Grid item xs={12} sm={12} md={12} lg={12}>
           <Box
-            boxShadow={2}
-            borderRadius={2}
-            width="100%"
-            bgcolor="white"
-            p={3}
+            display="flex"
+            flexDirection="row"
+            justifyContent="space-between"
           >
-            <Grid container xs={12} sm={12} md={12} lg={12}>
-              <Grid item xs={6} sm={6} md={3} lg={3}>
-                <Typography color={primary} variant="subtitle1">
-                  Billing Party Name
-                </Typography>
-                <Typography variant="subtitle1">
-                  {currentBooking?.billingPartyName}
-                </Typography>
-              </Grid>
-              <Grid item xs={6} sm={6} md={3} lg={3}>
-                <Typography color={primary} variant="subtitle1">
-                  Billing Email
-                </Typography>
-                <Typography variant="subtitle1">
-                  {currentBooking?.billingEmail}
-                </Typography>
-              </Grid>
-              <Grid item xs={6} sm={6} md={3} lg={3}>
-                <Typography color={primary} variant="subtitle1">
-                  Billing Postal Code
-                </Typography>
-                <Typography variant="subtitle1">
-                  {currentBooking?.billingOfficePostalCode}
-                </Typography>
-              </Grid>
-              <Grid item xs={6} sm={6} md={3} lg={3}>
-                <Typography color={primary} variant="subtitle1">
-                  Billing Postal Code
-                </Typography>
-                <Typography variant="subtitle1">
-                  {currentBooking?.billingOfficePostalCode}
-                </Typography>
-              </Grid>
-            </Grid>
-          </Box>
-        </Grid>
-      </Grid>
-      <Typography color="secondary" variant="h5" mt={4}>
-        Booking Details
-      </Typography>
-      <Box mt={2}>
-        {currentBooking?.vendorId && (
-          <VendorProfileItem vendor={currentBooking?.vendorId} />
-        )}
-      </Box>
-      <Box
-        mt={2}
-        boxShadow={2}
-        borderRadius={2}
-        width="100%"
-        bgcolor="white"
-        p={3}
-      >
-        <Box display="flex" flexDirection="row" justifyContent="space-between">
-          <Box display="flex" flexDirection="row">
-            {currentBooking?.activityId?.preSignedImages &&
-              currentBooking?.activityId?.preSignedImages?.length > 0 && (
+            <Box display="flex" flexDirection="row">
+              {currentBooking?.activityId?.preSignedImages &&
+                currentBooking?.activityId?.preSignedImages?.length > 0 && (
+                  <img
+                    src={currentBooking?.activityId.preSignedImages[0]}
+                    alt={currentBooking?.activityTitle}
+                    style={containerStyle}
+                  />
+                )}
+              {!currentBooking?.activityId?.preSignedImages?.length > 0 && (
                 <img
-                  src={currentBooking.activityId.preSignedImages[0]}
+                  src={notFound}
                   alt={currentBooking?.activityTitle}
                   style={containerStyle}
                 />
               )}
-            {!currentBooking?.activityId?.preSignedImages?.length > 0 && (
-              <img
-                src={notFound}
-                alt={currentBooking?.activityTitle}
-                style={containerStyle}
-              />
-            )}
-            <Box display="flex" flexDirection="column" ml={5}>
-              <Link
-                to={activityPath}
-                style={{
-                  textDecoration: "none",
-                  display: "inline-block",
-                  margin: 0,
-                }}
-              >
-                <Typography color={secondary} fontWeight="700" variant="h6">
-                  {currentBooking?.activityTitle}
+              <Box display="flex" flexDirection="column" ml={5}>
+                <Link
+                  to={activityPath}
+                  style={{
+                    textDecoration: "none",
+                    display: "inline-block",
+                    margin: 0,
+                  }}
+                >
+                  <Typography color={secondary} fontWeight="700" variant="h6">
+                    {currentBooking?.activityTitle}
+                  </Typography>
+                </Link>
+                <Typography color={secondary} variant="subtitle1">
+                  <b>Date: </b>
+                  {new Date(currentBooking?.startDateTime).toLocaleDateString()}
                 </Typography>
-              </Link>
-              <Typography color={secondary} variant="subtitle1">
-                <b>Date: </b>
-                {new Date(currentBooking?.startDateTime).toLocaleDateString()}
-              </Typography>
-              <Typography color={secondary} variant="subtitle1">
-                <b>Start Time: </b>
-                {new Date(currentBooking?.startDateTime).toLocaleTimeString()}
-              </Typography>
-              <Typography color={secondary} variant="subtitle1">
-                <b>End Time: </b>
-                {new Date(currentBooking?.endDateTime).toLocaleTimeString()}
-              </Typography>
-              <Typography color={secondary} variant="subtitle1">
-                <b>Event Location Type: </b>
-                {currentBooking?.eventLocationType}
-              </Typography>
-              {currentBooking?.additionalComments && (
                 <Typography color={secondary} variant="subtitle1">
-                  <b>Comments: </b>
-                  {currentBooking?.additionalComments}
+                  <b>Start Time: </b>
+                  {new Date(currentBooking?.startDateTime).toLocaleTimeString()}
                 </Typography>
-              )}
+                <Typography color={secondary} variant="subtitle1">
+                  <b>End Time: </b>
+                  {new Date(currentBooking?.endDateTime).toLocaleTimeString()}
+                </Typography>
+                <Typography color={secondary} variant="subtitle1">
+                  <b>Event Location Type: </b>
+                  {currentBooking?.eventLocationType}
+                </Typography>
+                {currentBooking?.additionalComments && (
+                  <Typography color={secondary} variant="subtitle1">
+                    <b>Comments: </b>
+                    {currentBooking?.additionalComments}
+                  </Typography>
+                )}
+              </Box>
+            </Box>
+            <Box>
+              <Typography color={secondary} variant="h6">
+                Adult: {currentBooking?.totalPax} pax
+              </Typography>
             </Box>
           </Box>
-          <Box>
-            <Typography color={secondary} variant="h6">
-              Adult: {currentBooking?.totalPax} pax
-            </Typography>
+          <Box mb={2} mt={2}>
+            <Divider />
           </Box>
-        </Box>
-        <Box mb={2} mt={2}>
-          <Divider />
-        </Box>
-        <Box display="flex" flexDirection="row" justifyContent="space-between">
-          <Typography color={secondary} variant="subtitle1">
-            Base Price
-          </Typography>
-          <Typography color={secondary} variant="subtitle1">
-            S$ {currentBooking?.basePricePerPax?.toFixed(2)} x{" "}
-            {currentBooking?.totalPax} Pax
-          </Typography>
-        </Box>
-        {currentBooking?.weekendAddOnCost !== 0 && (
           <Box
             display="flex"
             flexDirection="row"
             justifyContent="space-between"
           >
             <Typography color={secondary} variant="subtitle1">
-              Weekend Discounts/Add-ons
+              Base Price
             </Typography>
             <Typography color={secondary} variant="subtitle1">
-              S$ {currentBooking?.weekendAddOnCost?.toFixed(2)}
+              S$ {currentBooking?.basePricePerPax?.toFixed(2)} x{" "}
+              {currentBooking?.totalPax} Pax
             </Typography>
           </Box>
-        )}
-        {currentBooking?.onlineAddOnCost !== 0 && (
+          {currentBooking?.weekendAddOnCost !== 0 && (
+            <Box
+              display="flex"
+              flexDirection="row"
+              justifyContent="space-between"
+            >
+              <Typography color={secondary} variant="subtitle1">
+                Weekend Discounts/Add-ons
+              </Typography>
+              <Typography color={secondary} variant="subtitle1">
+                S$ {currentBooking?.weekendAddOnCost?.toFixed(2)}
+              </Typography>
+            </Box>
+          )}
+          {currentBooking?.onlineAddOnCost !== 0 && (
+            <Box
+              display="flex"
+              flexDirection="row"
+              justifyContent="space-between"
+            >
+              <Typography color={secondary} variant="subtitle1">
+                Online Discounts/Add-ons
+              </Typography>
+              <Typography color={secondary} variant="subtitle1">
+                S$ {currentBooking?.onlineAddOnCost?.toFixed(2)}
+              </Typography>
+            </Box>
+          )}
+          {currentBooking?.offlineAddOnCost !== 0 && (
+            <Box
+              display="flex"
+              flexDirection="row"
+              justifyContent="space-between"
+            >
+              <Typography color={secondary} variant="subtitle1">
+                Offline Discounts/Add-ons
+              </Typography>
+              <Typography color={secondary} variant="subtitle1">
+                S$ {currentBooking?.offlineAddOnCost?.toFixed(2)}
+              </Typography>
+            </Box>
+          )}
           <Box
             display="flex"
             flexDirection="row"
             justifyContent="space-between"
           >
-            <Typography color={secondary} variant="subtitle1">
-              Online Discounts/Add-ons
+            <Typography color={secondary} variant="h6" fontWeight="700">
+              Total
             </Typography>
-            <Typography color={secondary} variant="subtitle1">
-              S$ {currentBooking?.onlineAddOnCost?.toFixed(2)}
+            <Typography color={secondary} variant="h6" fontWeight="700">
+              S$ {currentBooking?.totalCost?.toFixed(2)}
             </Typography>
           </Box>
-        )}
-        {currentBooking?.offlineAddOnCost !== 0 && (
-          <Box
-            display="flex"
-            flexDirection="row"
-            justifyContent="space-between"
+        </Box>
+        <Box mt={4} display="flex" justifyContent="flex-end">
+          <Button
+            mt={4}
+            variant="contained"
+            color="secondary"
+            style={{ color: "white" }}
           >
-            <Typography color={secondary} variant="subtitle1">
-              Offline Discounts/Add-ons
-            </Typography>
-            <Typography color={secondary} variant="subtitle1">
-              S$ {currentBooking?.offlineAddOnCost?.toFixed(2)}
-            </Typography>
+            View Booking Summary
+          </Button>
+          <Box ml={1}>
+            {currentBooking?.isSurveySubmitted ? (
+              <Button
+                variant="outlined"
+                component={Link}
+                to={`/booking/${currentBooking?._id}/survey/view`}
+              >
+                View Submitted Survey
+              </Button>
+            ) : currentBooking?.status === "CONFIRMED" ||
+              currentBooking?.status === "PAID" ? (
+              <Button
+                variant="contained"
+                component={Link}
+                startIcon={<ArticleIcon />}
+                to={`/booking/${currentBooking?._id}/survey/edit` }
+              >
+                Fill In Survey
+              </Button>
+            ) : (
+              <Button variant="contained" disabled >
+                Survey not available
+              </Button>
+            )}
           </Box>
-        )}
-        <Box display="flex" flexDirection="row" justifyContent="space-between">
-          <Typography color={secondary} variant="h6" fontWeight="700">
-            Total
-          </Typography>
-          <Typography color={secondary} variant="h6" fontWeight="700">
-            S$ {currentBooking?.totalCost?.toFixed(2)}
-          </Typography>
-        </Box>
-      </Box>
-      <Box mt={4} display="flex" justifyContent="flex-end">
-        <Button
-          mt={4}
-          variant="contained"
-          color="secondary"
-          style={{ color: "white" }}
-        >
-          View Booking Summary
-        </Button>
-        <Box ml={1}>
-          <Button variant="contained">Rate</Button>
         </Box>
       </Box>
-    </Box>
+    </MainBodyContainer>
   );
 };
 export default BookingsDetails;
diff --git a/client-frontend/src/containers/Client/Booking/CancelBookingsTable.jsx b/client-frontend/src/containers/Client/Booking/CancelBookingsTable.jsx
index 3cb72b7..bb311c6 100644
--- a/client-frontend/src/containers/Client/Booking/CancelBookingsTable.jsx
+++ b/client-frontend/src/containers/Client/Booking/CancelBookingsTable.jsx
@@ -1,66 +1,40 @@
 import AccessTimeIcon from "@mui/icons-material/AccessTime";
 import notFound from "../../../assets/not_found.png";
 import { Box, Chip, Typography, useTheme, Alert } from "@mui/material";
-import { useNavigate } from "react-router-dom";
+import { useNavigate, useSearchParams } from "react-router-dom";
 import { DataGrid, GridToolbarFilterButton } from "@mui/x-data-grid";
 import PropTypes from "prop-types";
 import { useEffect, useState } from "react";
 import CancelField from "../../../components/CancelField";
+import {
+  convertISOtoDate,
+  convertISOtoTime,
+  convertISOtoShortDate,
+} from "../../../utils/TimeFormatter";
 
 const CancelBookingsTable = ({ allBookings, filter, hasCancel }) => {
   const navigate = useNavigate();
   const [bookings, setBookings] = useState([]);
   const theme = useTheme();
   const secondary = theme.palette.secondary.main;
+  let [searchParams, setSearchParams] = useSearchParams();
 
   let containerStyle = {
     minHeight: "10rem", // Default for extra-large screens
-    width: "100%",
+    width: "10rem",
     objectFit: "cover",
     borderTopLeftRadius: "4px",
     borderTopRightRadius: "4px",
     borderBottomRightRadius: "4px",
     borderBottomLeftRadius: "4px",
+    borderRadius: "4px",
   };
   useEffect(() => {
     const formattedBookings = filter(allBookings);
     setBookings(formattedBookings);
+    const tab = searchParams.get("tab");
   }, [allBookings]);
 
-  const convertISOtoDate = (value) => {
-    const date = new Date(value);
-    const options = {
-      weekday: "long",
-      year: "numeric",
-      month: "long",
-      day: "numeric",
-    };
-    const formattedDate = date.toLocaleDateString("en-SG", options);
-    return formattedDate;
-  };
-  const convertISOtoShortDate = (value) => {
-    const date = new Date(value);
-    const options = {
-      year: "2-digit",
-      month: "2-digit",
-      day: "2-digit",
-    };
-    const formattedDate = date.toLocaleDateString("en-SG", options);
-    return formattedDate;
-  };
-
-  const convertISOtoTime = (value) => {
-    const date = new Date(value);
-    const formattedTime = date
-      .toLocaleTimeString("en-SG", {
-        hour: "numeric",
-        minute: "numeric",
-        hour12: true,
-      })
-      .toUpperCase();
-    return formattedTime;
-  };
-
   const handleRowClick = ({ _id }) => {
     navigate(`/booking/${_id.toString()}`);
   };
@@ -83,7 +57,7 @@ const CancelBookingsTable = ({ allBookings, filter, hasCancel }) => {
         const title = params.value;
         const preSignedImages = params.row.activityId.preSignedImages;
         return (
-          <Box display="flex" flexDirection="column">
+          <Box display="flex" flexDirection="column" p={2}>
             <Typography
               fontSize={"0.875rem"}
               color={secondary}
@@ -92,12 +66,7 @@ const CancelBookingsTable = ({ allBookings, filter, hasCancel }) => {
             >
               {title}
             </Typography>
-            <Box
-              display="flex"
-              justifyContent="center"
-              width={"100%"}
-              bgcolor={"grey.50"}
-            >
+            <Box display="flex" justifyContent="center" width={"100%"}>
               {/* Apply styling to the image */}
               {preSignedImages && preSignedImages.length > 0 && (
                 <img
@@ -337,7 +306,7 @@ const CancelBookingsTable = ({ allBookings, filter, hasCancel }) => {
   ];
 
   return (
-    <div style={{ height: "80vh", width: "99%" }}>
+    <div style={{ height: 800, width: "98%" }}>
       {hasCancel && (
         <Box mt={2} mb={2} boxShadow={1}>
           <Alert severity="info">
diff --git a/client-frontend/src/containers/Client/Bookmark/MyBookmarks.jsx b/client-frontend/src/containers/Client/Bookmark/MyBookmarks.jsx
index 8484781..e5e3f9d 100644
--- a/client-frontend/src/containers/Client/Bookmark/MyBookmarks.jsx
+++ b/client-frontend/src/containers/Client/Bookmark/MyBookmarks.jsx
@@ -62,7 +62,11 @@ function MyBookmarks() {
 
   useEffect(() => {
     const fetchBookmarks = async () => {
-      await getBookmarks();
+      try {
+        await getBookmarks();
+      } catch (error) {
+        openSnackbar("An error occurred.", "error");
+      }
     };
 
     fetchBookmarks();
diff --git a/client-frontend/src/containers/Client/Survey/PendingSurveys.jsx b/client-frontend/src/containers/Client/Survey/PendingSurveys.jsx
index bc82a60..89b768d 100644
--- a/client-frontend/src/containers/Client/Survey/PendingSurveys.jsx
+++ b/client-frontend/src/containers/Client/Survey/PendingSurveys.jsx
@@ -5,6 +5,7 @@ import { useParams } from "react-router-dom";
 import useBookingStore from "../../../zustand/BookingStore";
 import PendingSurveysTable from "./PendingSurveysTable";
 import MainBodyContainer from "../../../components/Common/MainBodyContainer";
+import useSnackbarStore from "../../../zustand/SnackbarStore";
 
 const StyledPaper = styled(Paper)`
   padding: 20px;
@@ -16,13 +17,17 @@ const StyledPaper = styled(Paper)`
 function PendingSurveys() {
   const { bookings, getBookingsWithPendingSurvey, isLoading } =
     useBookingStore();
-
+  const { openSnackbar } = useSnackbarStore();
   useEffect(() => {
-    const get = async () => {
-      await getBookingsWithPendingSurvey();
-    };
+    try {
+      const get = async () => {
+        await getBookingsWithPendingSurvey();
+      };
 
-    get();
+      get();
+    } catch (error) {
+      openSnackbar("An error occurred.", "error");
+    }
   }, []);
 
   return (