diff --git a/src/ui/app/business/components/banner/index.tsx b/src/ui/app/business/components/banner/index.tsx
index 3b9da865..83c94164 100644
--- a/src/ui/app/business/components/banner/index.tsx
+++ b/src/ui/app/business/components/banner/index.tsx
@@ -22,6 +22,7 @@ export default function Banner({}: Props) {
     <Box
       sx={{
         border: "1px solid #000",
+        borderTop: "none",
         backgroundImage: "url(/Business_Landing_page.png)",
         backgroundSize: "cover",
         display: "flex",
diff --git a/src/ui/app/business/components/faqSection/index.tsx b/src/ui/app/business/components/faqSection/index.tsx
index 5e5f3f4a..55e0b415 100644
--- a/src/ui/app/business/components/faqSection/index.tsx
+++ b/src/ui/app/business/components/faqSection/index.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import React from "react";
 
 import {
diff --git a/src/ui/app/components/navbar/index.tsx b/src/ui/app/components/navbar/index.tsx
index 17d2b292..747ee734 100644
--- a/src/ui/app/components/navbar/index.tsx
+++ b/src/ui/app/components/navbar/index.tsx
@@ -125,7 +125,10 @@ export default function Navbar({
   }, [isTwitterUserLoggedIn, isAccountSsetupComplete]);
 
   return (
-    <AppBar position="static" sx={{ boxShadow: "none" }}>
+    <AppBar
+      position="static"
+      sx={{ boxShadow: "none", borderBottom: "1px solid #000" }}
+    >
       <Toolbar
         component="nav"
         sx={{ display: "flex", justifyContent: "space-between" }}
@@ -136,6 +139,9 @@ export default function Navbar({
             width="150"
             height="20"
             alt="bgimg"
+            onClick={() => {
+              router.push("/");
+            }}
           />
         </Box>
         {isTwitterUserLoggedIn ? null : (
diff --git a/src/ui/app/influencer/profile/[id]/_services/index.tsx b/src/ui/app/influencer/profile/[id]/_services/index.tsx
index 31265398..7912622d 100644
--- a/src/ui/app/influencer/profile/[id]/_services/index.tsx
+++ b/src/ui/app/influencer/profile/[id]/_services/index.tsx
@@ -4,7 +4,8 @@ import CheckoutModal from "@/src/components/checkoutModal";
 import CreateUpdateService from "@/src/components/profileComponents/createUpdateService";
 import { ConfirmDelete } from "@/src/components/shared/confirmDeleteModal";
 import { notification } from "@/src/components/shared/notification";
-import { useAppSelector } from "@/src/hooks/useRedux";
+import { useAppDispatch, useAppSelector } from "@/src/hooks/useRedux";
+import { addOrderItem, resetCart } from "@/src/reducers/cartSlice";
 import { deleteService, getService } from "@/src/services/httpServices";
 import DeleteIcon from "@mui/icons-material/Delete";
 import EditIcon from "@mui/icons-material/Edit";
@@ -25,16 +26,15 @@ import Image from "next/image";
 import React, { useEffect } from "react";
 
 type ServiceProps = {
-  currentUser: UserType | null;
+  currentInfluencer: UserType | null;
   id: string;
 };
 
-const Services = ({ currentUser, id }: ServiceProps) => {
+const Services = ({ currentInfluencer, id }: ServiceProps) => {
+  const dispatch = useAppDispatch();
+  const cart = useAppSelector((state) => state.cart);
   const loggedInUser = useAppSelector((state) => state.user?.user);
   const [type, setType] = React.useState<string | null>(null);
-  const [checkedOutServices, setCheckedOutServices] = React.useState<
-    ServiceType[]
-  >([]);
   const [services, setServices] = React.useState<ServiceType[]>([]);
   const [pagination, setPagination] = React.useState<PaginationType>({
     total_data_count: 0,
@@ -48,6 +48,8 @@ const Services = ({ currentUser, id }: ServiceProps) => {
   const [selectedService, setSelectedService] =
     React.useState<ServiceType | null>(null);
   const [deleteLoading, setDeleteLoading] = React.useState<boolean>(false);
+  const [openCheckoutModal, setOpenCheckoutModal] =
+    React.useState<boolean>(false);
 
   const getServices = async () => {
     try {
@@ -109,6 +111,21 @@ const Services = ({ currentUser, id }: ServiceProps) => {
     }));
   };
 
+  const addItemToCart = (service: ServiceType) => {
+    // Check if the service is already in the cart
+    dispatch(
+      addOrderItem({
+        influencer: currentInfluencer,
+        service: service,
+      })
+    );
+  };
+
+  const closeCheckoutModal = () => {
+    dispatch(resetCart());
+    setOpenCheckoutModal(false);
+  };
+
   useEffect(() => {
     if (refreshPage) {
       getServices();
@@ -126,6 +143,12 @@ const Services = ({ currentUser, id }: ServiceProps) => {
     }
   }, [openModal]);
 
+  useEffect(() => {
+    if (cart?.orderItems?.length > 0) {
+      setOpenCheckoutModal(true);
+    }
+  }, [cart]);
+
   return (
     <Box
       sx={{
@@ -225,10 +248,11 @@ const Services = ({ currentUser, id }: ServiceProps) => {
                   </Card>
                 </Grid>
               )}
-              {services?.map((service) => {
+              {services?.map((serviceItem) => {
                 // Attach the platform_price to the service object
                 // It will be price + price * (platform_fee / 100)
                 // Take care of type conversion
+                let service = { ...serviceItem };
                 service.platform_price = (
                   parseFloat(service.price.toString()) +
                   parseFloat(service.price.toString()) *
@@ -456,10 +480,7 @@ const Services = ({ currentUser, id }: ServiceProps) => {
                               fullWidth
                               onClick={(e) => {
                                 e.stopPropagation();
-                                setCheckedOutServices((prev) => [
-                                  ...prev,
-                                  service,
-                                ]);
+                                addItemToCart(service);
                               }}
                               disabled={
                                 service.package.influencer === loggedInUser?.id
@@ -477,10 +498,7 @@ const Services = ({ currentUser, id }: ServiceProps) => {
                               fullWidth
                               onClick={(e) => {
                                 e.stopPropagation();
-                                setCheckedOutServices((prev) => [
-                                  ...prev,
-                                  service,
-                                ]);
+                                addItemToCart(service);
                               }}
                               disabled={
                                 service.package.influencer === loggedInUser?.id
@@ -520,11 +538,9 @@ const Services = ({ currentUser, id }: ServiceProps) => {
         serviceItem={selectedService}
       />
       <CheckoutModal
-        open={checkedOutServices.length > 0}
-        handleClose={() => {
-          setCheckedOutServices([]);
-        }}
-        serviceItems={checkedOutServices}
+        open={openCheckoutModal}
+        handleClose={closeCheckoutModal}
+        currentInfluencer={currentInfluencer}
       />
     </Box>
   );
diff --git a/src/ui/app/influencer/profile/[id]/page.tsx b/src/ui/app/influencer/profile/[id]/page.tsx
index 1a581737..7caf5a71 100644
--- a/src/ui/app/influencer/profile/[id]/page.tsx
+++ b/src/ui/app/influencer/profile/[id]/page.tsx
@@ -110,6 +110,7 @@ const ProfileLayout = ({
               sx={{
                 backgroundImage: "url(/profileBanner.png)",
                 border: "1px solid #000",
+                borderTop: "none",
                 display: "flex",
                 minHeight: "200px",
                 width: "100%",
@@ -449,7 +450,7 @@ const ProfileLayout = ({
                   ))}
                 </Box>
                 <Box sx={{ p: 2 }}>
-                  <Services currentUser={currentUser} id={params.id} />
+                  <Services currentInfluencer={currentUser} id={params.id} />
                 </Box>
               </Grid>
             </Grid>
diff --git a/src/ui/src/components/checkoutModal/index.tsx b/src/ui/src/components/checkoutModal/index.tsx
index 36fa978a..5b5c2b47 100644
--- a/src/ui/src/components/checkoutModal/index.tsx
+++ b/src/ui/src/components/checkoutModal/index.tsx
@@ -1,5 +1,7 @@
 "use client";
 
+import { useAppDispatch, useAppSelector } from "@/src/hooks/useRedux";
+import { addOrderItem, removeOrderItem } from "@/src/reducers/cartSlice";
 import {
   Box,
   Button,
@@ -14,48 +16,37 @@ import { useRouter } from "next/navigation";
 import React, { useEffect } from "react";
 
 type CheckoutModalProps = {
-  serviceItems: ServiceType[];
   open: boolean;
   handleClose: () => void;
+  currentInfluencer: UserType | null;
 };
 
 const CheckoutModal = ({
-  serviceItems,
   open,
   handleClose,
+  currentInfluencer,
 }: CheckoutModalProps) => {
   const router = useRouter();
-  const [checkedOutServices, setCheckedOutServices] = React.useState<
-    Array<ServiceCheckOutType>
-  >([]);
+  const cart = useAppSelector((state) => state.cart);
+  const dispatch = useAppDispatch();
 
-  useEffect(() => {
-    if (serviceItems.length === 0) {
-      setCheckedOutServices([]);
-      return;
-    }
-    const services: ServiceCheckOutType[] = [];
-    serviceItems.forEach((item) => {
-      const quantity = 1;
-      // If the service is already in the array, then just increase the quantity
-      const index = services.findIndex(
-        (service) => service.serviceItem.id === item.id
-      );
-      if (index !== -1) {
-        services[index].quantity += 1;
-        services[index].price =
-          parseFloat(services[index].serviceItem?.platform_price) *
-          services[index].quantity;
-        return;
-      }
-      services.push({
-        serviceItem: item,
-        quantity: quantity,
-        price: parseFloat(item.platform_price),
-      });
-    });
-    setCheckedOutServices(services);
-  }, [serviceItems]);
+  const removeItemFromCart = (service: ServiceType) => {
+    dispatch(
+      removeOrderItem({
+        service: service,
+      })
+    );
+  };
+
+  const addItemToCart = (service: ServiceType) => {
+    // Check if the service is already in the cart
+    dispatch(
+      addOrderItem({
+        influencer: currentInfluencer,
+        service: service,
+      })
+    );
+  };
 
   return (
     <Box
@@ -128,7 +119,7 @@ const CheckoutModal = ({
                 </TableRow>
               </TableHead>
               <TableBody>
-                {checkedOutServices.length === 0 && (
+                {cart?.orderItems.length === 0 && (
                   <TableRow>
                     <TableCell
                       colSpan={12}
@@ -140,101 +131,72 @@ const CheckoutModal = ({
                     </TableCell>
                   </TableRow>
                 )}
-                {checkedOutServices.map((service) => (
-                  <TableRow key={service.serviceItem.id}>
-                    <TableCell>{service.serviceItem?.package?.name}</TableCell>
-                    <TableCell>
-                      {/* A counter */}
-                      <Box
-                        sx={{
-                          display: "flex",
-                          justifyContent: "center",
-                          alignItems: "center",
-                        }}
-                      >
-                        <Button
-                          color="secondary"
-                          sx={{
-                            borderRadius: "50%",
-                            minWidth: 0,
-                            width: 30,
-                            height: 30,
-                            p: 0,
-                            mr: 1,
-                          }}
-                          onClick={() => {
-                            const services = [...checkedOutServices];
-                            services.forEach((item) => {
-                              if (
-                                item.serviceItem.id === service.serviceItem.id
-                              ) {
-                                item.quantity = Math.max(item.quantity - 1, 0);
-                                item.price =
-                                  parseFloat(item.serviceItem.platform_price) *
-                                  item.quantity;
-                                if (item.quantity === 0) {
-                                  const index = services.findIndex(
-                                    (service) =>
-                                      service.serviceItem.id ===
-                                      item.serviceItem.id
-                                  );
-                                  services.splice(index, 1);
-                                }
-                              }
-                            });
-
-                            setCheckedOutServices(services);
-                          }}
-                        >
-                          -
-                        </Button>
+                {cart?.orderItems.map((orderItem) => {
+                  const service = orderItem?.service;
+                  const quantity = orderItem?.quantity;
+                  return (
+                    <TableRow key={service.id}>
+                      <TableCell>{service?.package?.name}</TableCell>
+                      <TableCell>
+                        {/* A counter */}
                         <Box
                           sx={{
-                            p: "0px 8px",
-                            border: "1px solid #e8e8e8",
-                            borderRadius: 2,
-                            backgroundColor: "#f8f8f8",
+                            display: "flex",
+                            justifyContent: "center",
+                            alignItems: "center",
                           }}
                         >
-                          {service.quantity}
+                          <Button
+                            color="secondary"
+                            sx={{
+                              borderRadius: "50%",
+                              minWidth: 0,
+                              width: 30,
+                              height: 30,
+                              p: 0,
+                              mr: 1,
+                            }}
+                            onClick={() => {
+                              removeItemFromCart(service);
+                            }}
+                          >
+                            -
+                          </Button>
+                          <Box
+                            sx={{
+                              p: "0px 8px",
+                              border: "1px solid #e8e8e8",
+                              borderRadius: 2,
+                              backgroundColor: "#f8f8f8",
+                            }}
+                          >
+                            {quantity}
+                          </Box>
+                          <Button
+                            color="secondary"
+                            sx={{
+                              borderRadius: "50%",
+                              minWidth: 0,
+                              width: 30,
+                              height: 30,
+                              p: 0,
+                              ml: 1,
+                            }}
+                            onClick={() => {
+                              addItemToCart(service);
+                            }}
+                          >
+                            +
+                          </Button>
                         </Box>
-                        <Button
-                          color="secondary"
-                          sx={{
-                            borderRadius: "50%",
-                            minWidth: 0,
-                            width: 30,
-                            height: 30,
-                            p: 0,
-                            ml: 1,
-                          }}
-                          onClick={() => {
-                            const services = [...checkedOutServices];
-
-                            services.forEach((item) => {
-                              if (
-                                item.serviceItem.id === service.serviceItem.id
-                              ) {
-                                item.quantity += 1;
-                                item.price =
-                                  parseFloat(item.serviceItem.platform_price) *
-                                  item.quantity;
-                              }
-                            });
-
-                            setCheckedOutServices(services);
-                          }}
-                        >
-                          +
-                        </Button>
-                      </Box>
-                    </TableCell>
-                    <TableCell>
-                      {service.price?.toFixed(2)}{" "}
-                      {service.serviceItem.currency.symbol}
-                    </TableCell>
-                  </TableRow>
-                ))}
+                      </TableCell>
+                      <TableCell>
+                        {Number(service?.platform_price)?.toFixed(2)}{" "}
+                        {service.currency.symbol}
+                      </TableCell>
+                    </TableRow>
+                  );
+                })}
                 <TableRow>
                   {/* Total */}
                   <TableCell
@@ -246,10 +208,8 @@ const CheckoutModal = ({
                   </TableCell>
                   <TableCell></TableCell>
                   <TableCell>
-                    {checkedOutServices
-                      .reduce((acc, cur) => acc + cur.price, 0)
-                      ?.toFixed(2)}{" "}
-                    {checkedOutServices[0]?.serviceItem.currency.symbol}
+                    {cart?.orderTotal?.toFixed(2)}{" "}
+                    {cart?.orderTotalCurrency?.symbol}
                   </TableCell>
                 </TableRow>
               </TableBody>
@@ -266,7 +226,6 @@ const CheckoutModal = ({
             <Button
               variant="outlined"
               onClick={() => {
-                setCheckedOutServices([]);
                 handleClose();
               }}
               color="secondary"
@@ -280,7 +239,7 @@ const CheckoutModal = ({
               color="secondary"
               sx={{ borderRadius: 5, mx: 1 }}
               fullWidth
-              disabled={checkedOutServices.length === 0}
+              disabled={cart?.orderItems.length === 0}
               onClick={() => {
                 router.push("/checkout");
               }}
diff --git a/src/ui/src/reducers/cartSlice.ts b/src/ui/src/reducers/cartSlice.ts
new file mode 100644
index 00000000..b674bf20
--- /dev/null
+++ b/src/ui/src/reducers/cartSlice.ts
@@ -0,0 +1,140 @@
+// A cart slice that will keep track of the current influencer for the order and the order's information
+
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+
+type OrderItem = {
+  service: ServiceType;
+  quantity: number;
+};
+
+type CartState = {
+  influencer: UserType | null;
+  orderItems: OrderItem[];
+  orderTotal: number;
+  orderTotalCurrency: CurrencyType;
+};
+
+type AddOrderItemPayloadType = {
+  influencer: UserType | null;
+  service: ServiceType;
+};
+
+type RemoveOrderItemPayloadType = {
+  service: ServiceType;
+};
+
+const initialState: CartState = {
+  influencer: null,
+  orderItems: [],
+  orderTotal: 0,
+  orderTotalCurrency: {
+    id: "",
+    name: "",
+    symbol: "",
+    country: null,
+  },
+};
+
+export const cartSlice = createSlice({
+  name: "cart",
+  initialState,
+  reducers: {
+    addOrderItem: (state, action: PayloadAction<AddOrderItemPayloadType>) => {
+      const orderItemExists = state.orderItems.some(
+        (item) => item.service.id === action.payload.service.id
+      );
+
+      if (!orderItemExists) {
+        // Check if the currency matches the orderTotalCurrency
+        if (
+          state.orderTotal > 0 &&
+          state.orderTotalCurrency.id !== action.payload.service.currency.id
+        ) {
+          return;
+        }
+        state.orderItems.push({
+          service: action.payload.service,
+          quantity: 1,
+        });
+
+        // Set influencer, orderTotal, and orderTotalCurrency here
+        state.influencer = action.payload.influencer;
+        state.orderTotal = state.orderItems.reduce((total, item) => {
+          return (
+            total + Number(item.service.platform_price) * Number(item.quantity)
+          );
+        }, 0);
+        state.orderTotalCurrency = action.payload.service.currency;
+      } else {
+        const index = state.orderItems.findIndex(
+          (item) => item.service.id === action.payload.service.id
+        );
+
+        state.orderItems[index].quantity += 1;
+
+        // Update orderTotal here
+        state.orderTotal = state.orderItems.reduce((total, item) => {
+          return (
+            total + Number(item.service.platform_price) * Number(item.quantity)
+          );
+        }, 0);
+      }
+    },
+
+    removeOrderItem: (
+      state,
+      action: PayloadAction<RemoveOrderItemPayloadType>
+    ) => {
+      const index = state.orderItems.findIndex(
+        (item) => item.service.id === action.payload?.service.id
+      );
+
+      // Check if the item exists before trying to remove it
+      if (index === -1) {
+        return;
+      }
+
+      // Update the quantity of the order item
+      state.orderItems[index].quantity -= 1;
+
+      // If the quantity is 0, remove the order item from the orderItems array
+      if (state.orderItems[index].quantity === 0) {
+        state.orderItems.splice(index, 1);
+      }
+
+      // If there are no more order items, reset influencer, orderTotal, and orderTotalCurrency here
+      if (state.orderItems.length === 0) {
+        state.influencer = null;
+        state.orderTotal = 0;
+        state.orderTotalCurrency = {
+          id: "",
+          name: "",
+          symbol: "",
+          country: null,
+        };
+        return;
+      }
+
+      // Calculate the new orderTotal here
+      state.orderTotal = state.orderItems.reduce((total, item) => {
+        return (
+          total + Number(item.service.platform_price) * Number(item.quantity)
+        );
+      }, 0);
+    },
+
+    resetCart: (state) => {
+      state.influencer = null;
+      state.orderItems = [];
+      state.orderTotal = 0;
+      state.orderTotalCurrency = {
+        id: "",
+        name: "",
+        symbol: "",
+        country: null,
+      };
+    },
+  },
+});
+
+export const { addOrderItem, removeOrderItem, resetCart } = cartSlice.actions;
diff --git a/src/ui/src/store.ts b/src/ui/src/store.ts
index 3d21f7b2..6bbe4b42 100644
--- a/src/ui/src/store.ts
+++ b/src/ui/src/store.ts
@@ -1,11 +1,13 @@
 import { configureStore } from "@reduxjs/toolkit";
 import { userSlice } from "./reducers/userSlice";
+import { cartSlice } from "./reducers/cartSlice";
 
 export const makeStore = () => {
   return configureStore({
     reducer: {
       // Add the generated reducer as a specific top-level slice
       user: userSlice.reducer,
+      cart: cartSlice.reducer,
     },
   });
 };
diff --git a/src/ui/src/utils/types.ts b/src/ui/src/utils/types.ts
index 7b1a822b..88898a6f 100644
--- a/src/ui/src/utils/types.ts
+++ b/src/ui/src/utils/types.ts
@@ -15,7 +15,7 @@ type CurrencyType = {
   id: string;
   name: string;
   symbol: string;
-  country: CountryType;
+  country: CountryType | null;
 };
 
 type LanguageType = {