diff --git a/src/app/dashboard/(admin)/admin/email/edit-in-buit-templates/[templateId]/page.tsx b/src/app/dashboard/(admin)/admin/email/edit-in-buit-templates/[templateId]/page.tsx
index 1a807af4a..ec3fe4e30 100644
--- a/src/app/dashboard/(admin)/admin/email/edit-in-buit-templates/[templateId]/page.tsx
+++ b/src/app/dashboard/(admin)/admin/email/edit-in-buit-templates/[templateId]/page.tsx
@@ -30,7 +30,7 @@ export default function page() {
         </div>
       </div>
       <div className="mt-12 flex items-center sm:mt-20 md:ml-4 lg:mb-[213px] lg:ml-[89px] lg:mt-[156px]">
-        <div className="h-40 w-full">
+        <div className="w-full">
           {/* YOUR EDIT TEMPLATE COMPONENTS GOES HERE ACCORRDING  */}
           {/* CREATE A FLEX CONTAINER TO HOUSE THE TEMPLATE AREA AND THE SIDEBAR ICONS  */}
         </div>
diff --git a/src/app/dashboard/(admin)/admin/email/edit-in-buit-templates/_components/AddLogo.tsx b/src/app/dashboard/(admin)/admin/email/edit-in-buit-templates/_components/AddLogo.tsx
index 77a457a6b..4312fb772 100644
--- a/src/app/dashboard/(admin)/admin/email/edit-in-buit-templates/_components/AddLogo.tsx
+++ b/src/app/dashboard/(admin)/admin/email/edit-in-buit-templates/_components/AddLogo.tsx
@@ -20,7 +20,7 @@ const AddLogo: React.FC = () => {
   };
 
   return (
-    <div className="h-52 w-4/5 rounded-sm border bg-white p-4 shadow-md hover:border-orange-500">
+    <div className="h-52 w-full rounded-sm border bg-white p-4 shadow-md hover:border-orange-500 md:w-4/5">
       <label className="flex flex-col items-center">
         <div className="mb-4 flex h-44 w-48 cursor-pointer items-center justify-center bg-gray-50">
           {selectedImage ? (
diff --git a/src/app/dashboard/(admin)/admin/email/edit-in-buit-templates/_components/ImageBody.tsx b/src/app/dashboard/(admin)/admin/email/edit-in-buit-templates/_components/ImageBody.tsx
index 6cc7f5427..b059040ad 100644
--- a/src/app/dashboard/(admin)/admin/email/edit-in-buit-templates/_components/ImageBody.tsx
+++ b/src/app/dashboard/(admin)/admin/email/edit-in-buit-templates/_components/ImageBody.tsx
@@ -20,7 +20,7 @@ const ImageBody: React.FC = () => {
   };
 
   return (
-    <div className="h-96 w-3/5 rounded-sm border bg-white shadow-md hover:border-orange-500">
+    <div className="mt-4 h-96 w-full rounded-sm border bg-white shadow-md hover:border-orange-500 md:w-3/5">
       <label className="flex flex-col items-center">
         <div className="flex h-48 w-full cursor-pointer items-center justify-center bg-gray-50">
           {selectedImage ? (
diff --git a/src/app/dashboard/(admin)/admin/email/edit-in-buit-templates/_components/SideEditNav.tsx b/src/app/dashboard/(admin)/admin/email/edit-in-buit-templates/_components/SideEditNav.tsx
new file mode 100644
index 000000000..b50ed7b3b
--- /dev/null
+++ b/src/app/dashboard/(admin)/admin/email/edit-in-buit-templates/_components/SideEditNav.tsx
@@ -0,0 +1,26 @@
+import { ArrowDown, ArrowUp, Copy, Delete, Plus } from "lucide-react";
+import React from "react";
+
+const SideEditNav: React.FC = () => {
+  return (
+    <nav className="flex-1 space-y-1">
+      <button className="flex items-center rounded-md border border-slate-100 p-3 text-left hover:bg-gray-200">
+        <ArrowUp className="h-3 w-3" />
+      </button>
+      <button className="flex items-center rounded-md border border-slate-100 p-3 text-left hover:bg-gray-200">
+        <ArrowDown className="h-3 w-3" />
+      </button>
+      <button className="flex items-center rounded-md border border-slate-100 p-3 text-left hover:bg-gray-200">
+        <Copy className="h-3 w-3" />
+      </button>
+      <button className="flex items-center rounded-md border border-slate-100 p-3 text-left hover:bg-gray-200">
+        <Delete className="h-3 w-3" />
+      </button>
+      <button className="flex items-center rounded-md border border-slate-100 p-3 text-left hover:bg-gray-200">
+        <Plus className="h-3 w-3" />
+      </button>
+    </nav>
+  );
+};
+
+export default SideEditNav;
diff --git a/src/app/dashboard/(user-dashboard)/layout.tsx b/src/app/dashboard/(user-dashboard)/layout.tsx
index a7626bb9a..9518eb265 100644
--- a/src/app/dashboard/(user-dashboard)/layout.tsx
+++ b/src/app/dashboard/(user-dashboard)/layout.tsx
@@ -8,7 +8,7 @@ export default function AdminLayout({
   children: React.ReactNode;
 }) {
   return (
-    <div className="grid min-h-screen grid-rows-[auto_1fr]">
+    <div className="grid min-h-screen w-full grid-rows-[auto_1fr]">
       <UserNavbar />
       <div className="relative mx-auto w-full bg-white px-2 max-lg:overflow-hidden xl:px-4">
         <Suspense>{children}</Suspense>
diff --git a/src/app/dashboard/(user-dashboard)/products/[productId]/form-images/project-logo.tsx b/src/app/dashboard/(user-dashboard)/products/[productId]/form-images/project-logo.tsx
index c8cffcf8b..ce822e4d4 100644
--- a/src/app/dashboard/(user-dashboard)/products/[productId]/form-images/project-logo.tsx
+++ b/src/app/dashboard/(user-dashboard)/products/[productId]/form-images/project-logo.tsx
@@ -17,7 +17,7 @@ const handleImageChange = (event: React.ChangeEvent<HTMLInputElement>) => {
 const ProjectLogo = ({ form, name }: Properties) => {
   const [isDragging, setIsDragging] = useState(false);
 
-  const projectLogo = form.getValues("media");
+  const productImage = form.getValues("media");
 
   const handleDrop = (event: React.DragEvent<HTMLDivElement>) => {
     event.preventDefault();
@@ -55,18 +55,19 @@ const ProjectLogo = ({ form, name }: Properties) => {
 
       {isDragging && (
         <div className="pointer-events-none absolute inset-0 z-20 grid h-full w-full scale-95 place-items-center rounded-xl border-2 border-dashed border-white bg-white/20 backdrop-blur-xl">
-          <p className="text-xl text-white">Drop to upload</p>
+          <p className="text-xl">Drop to upload</p>
         </div>
       )}
 
-      {projectLogo.url && typeof projectLogo.url === "string" ? (
-        <div className="absolute inset-0 h-full w-full rounded-xl">
+      {productImage.url && typeof productImage.url === "string" ? (
+        <div className="inset-0 h-full w-full rounded-xl md:absolute">
           <div className="h-full w-full overflow-hidden rounded-xl">
             <BlurImage
-              src={projectLogo.url}
+              src={productImage.url}
               width={500}
               height={500}
-              alt="nft"
+              alt="product image"
+              quality={100}
               className={cn(
                 "size-full object-cover transition-all duration-300",
               )}
diff --git a/src/app/dashboard/(user-dashboard)/products/[productId]/product-details-component.tsx b/src/app/dashboard/(user-dashboard)/products/[productId]/product-details-component.tsx
index 926992880..a7b31b1af 100644
--- a/src/app/dashboard/(user-dashboard)/products/[productId]/product-details-component.tsx
+++ b/src/app/dashboard/(user-dashboard)/products/[productId]/product-details-component.tsx
@@ -132,14 +132,14 @@ const ProductDetailsComponent = ({
               href={"/dashboard/products"}
               className="rounded-sm border p-0.5 hover:bg-gray-200"
             >
-              <ArrowLeft />
+              <ArrowLeft className="size-4 min-[500px]:size-5" />
             </Link>
-            <span className="font-medium text-neutral-dark-2 sm:text-[20px] md:font-semibold">
+            <span className="text-sm font-medium text-neutral-dark-2 sm:text-[20px] md:font-semibold">
               {product.name}
             </span>
             <span
               className={cn(
-                "flex items-center gap-x-1 whitespace-nowrap rounded-full pl-2 text-sm leading-5 text-neutral-dark-1 md:gap-x-2",
+                "flex items-center gap-x-1 whitespace-nowrap rounded-full text-xs leading-5 text-neutral-dark-1 min-[500px]:pl-2 min-[500px]:text-sm md:gap-x-2",
               )}
             >
               <span
@@ -149,28 +149,31 @@ const ProductDetailsComponent = ({
                   "bg-[#EAB308]": product.status === "low_on_stock",
                 })}
               />
-              {product.status === "in_stock" && "In Stock"}
-              {product.status === "low_on_stock" && "Low on Stock"}
-              {product.status === "out_of_stock" && "Out of Stock"}
+              <span className="hidden min-[500px]:inline">
+                {" "}
+                {product.status === "in_stock" && "In Stock"}
+                {product.status === "low_on_stock" && "Low on Stock"}
+                {product.status === "out_of_stock" && "Out of Stock"}
+              </span>
             </span>
           </div>
-          <div className="flex items-center justify-end gap-x-4">
+          <div className="flex items-center justify-end gap-x-2 min-[500px]:gap-x-4">
             <Button
               disabled={isLoading}
               onClick={() => router.push("/dashboard/products")}
               type="button"
-              variant="outline"
+              variant="ghost"
               size="default"
-              className="rounded-md bg-transparent px-4 py-3 hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2"
+              className="h-7 rounded-sm border bg-transparent px-1.5 py-1 text-[10px] hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 min-[400px]:!h-8 min-[400px]:rounded-md min-[400px]:px-2 min-[400px]:py-2 min-[400px]:text-xs sm:h-10 sm:px-4 sm:py-3 sm:text-sm"
             >
               Discard
             </Button>
             <Button
               disabled={isLoading}
               type="submit"
-              variant="default"
+              variant="ghost"
               size="default"
-              className="rounded-md bg-primary px-4 py-3 font-normal text-white hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2"
+              className="h-7 rounded-sm border bg-primary px-1.5 py-1 text-[10px] font-normal text-white hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 min-[400px]:!h-8 min-[400px]:rounded-md min-[400px]:px-2 min-[400px]:py-2 min-[400px]:text-xs sm:h-10 sm:px-4 sm:py-3 sm:text-sm"
             >
               {isLoading ? (
                 <span className="flex items-center gap-x-2">
@@ -238,7 +241,7 @@ const ProductDetailsComponent = ({
                           {...field}
                         />
                         <div className="flex w-full items-center justify-between">
-                          <span className="whitespace-nowrap text-sm text-slate-500">
+                          <span className="whitespace-nowrap text-xs text-slate-500 sm:text-sm">
                             Maximum of {MAX_CHAR} characters
                           </span>
                           <WordCounter length={MAX_CHAR} word={field.value} />
@@ -250,8 +253,8 @@ const ProductDetailsComponent = ({
                 )}
               />
             </div>
-            <div className="flex flex-col gap-y-2 rounded-[6px] p-4 shadow-[0_0_10px_rgba(0,0,0,0.1)] sm:gap-y-4 md:gap-y-6 xl:p-6">
-              <div className="flex flex-col border-b border-gray-200 pb-3">
+            <div className="flex flex-col gap-y-2 rounded-[6px] shadow-[0_0_10px_rgba(0,0,0,0.1)] max-sm:pb-4 sm:gap-y-4 sm:p-4 md:gap-y-6 xl:p-6">
+              <div className="flex flex-col border-b border-gray-200 pb-3 max-sm:p-4">
                 <h2 className="text-xl font-medium text-neutral-dark-2 md:text-2xl md:font-semibold">
                   Stock
                 </h2>
@@ -367,7 +370,7 @@ const ProductDetailsComponent = ({
                 type="button"
                 disabled={isLoading || disableAddStockButton}
                 onClick={handleAddNewStock}
-                className="w-fit bg-transparent"
+                className="w-fit bg-transparent max-sm:ml-4"
                 variant="outline"
               >
                 Add a variant
@@ -384,7 +387,7 @@ const ProductDetailsComponent = ({
                   Upload media for your product
                 </p>
               </div>
-              <div className="relative mt-2 flex h-fit min-h-[125px] w-full flex-col gap-y-2 rounded-xl md:min-h-[292px] md:rounded-2xl">
+              <div className="relative mt-2 flex h-fit w-full flex-col gap-y-2 rounded-xl md:min-h-[292px] md:rounded-2xl">
                 <div className="flex size-full items-center justify-center gap-x-1">
                   {" "}
                   <ProjectLogo form={new_product_form} name="media" />
diff --git a/src/app/dashboard/(user-dashboard)/products/_components/product-body-shadcn.tsx b/src/app/dashboard/(user-dashboard)/products/_components/product-body-shadcn.tsx
index e5cc92836..39fcce495 100644
--- a/src/app/dashboard/(user-dashboard)/products/_components/product-body-shadcn.tsx
+++ b/src/app/dashboard/(user-dashboard)/products/_components/product-body-shadcn.tsx
@@ -77,7 +77,7 @@ const ProductBodyShadcn = ({
         key={product.product_id}
         className={cn(
           "relative bg-white",
-          product_id === product.product_id ? "bg-muted/50" : "",
+          product_id === product.product_id ? "bg-[#F1F5F9]" : "",
         )}
       >
         <TableCell className="flex items-center justify-start gap-x-2 whitespace-nowrap md:gap-x-4">
@@ -97,7 +97,7 @@ const ProductBodyShadcn = ({
           <span
             role="button"
             onClick={() => handleOpenDetail(product.product_id)}
-            className="hide_scrollbar w-[110px] whitespace-break-spaces text-[10px] text-neutral-dark-2 min-[500px]:text-xs sm:ml-1 md:w-[200px] md:text-base lg:w-[200px]"
+            className="hide_scrollbar ml-0.5 w-[110px] whitespace-break-spaces text-[10px] text-neutral-dark-2 min-[376px]:text-xs sm:ml-1 md:w-[200px] md:text-base lg:w-[200px]"
           >
             {searchTerm.length > 1 ? (
               <span
@@ -132,14 +132,14 @@ const ProductBodyShadcn = ({
         <TableCell
           role="button"
           onClick={() => handleOpenDetail(product.product_id)}
-          className="text-[10px] min-[500px]:text-xs md:text-base"
+          className="text-[10px] min-[376px]:text-xs md:text-base"
         >
           {product.category}
         </TableCell>
         <TableCell
           role="button"
           onClick={() => handleOpenDetail(product.product_id)}
-          className="text-[10px] min-[500px]:text-xs md:text-base"
+          className="text-[10px] min-[376px]:text-xs md:text-base"
         >
           {formatPrice(product.price)}
         </TableCell>
@@ -149,7 +149,7 @@ const ProductBodyShadcn = ({
         >
           <span
             className={cn(
-              "flex items-center gap-x-1 whitespace-nowrap rounded-full px-2 text-[10px] leading-5 min-[500px]:text-xs md:gap-x-2 md:text-base",
+              "flex items-center gap-x-1 whitespace-nowrap rounded-full px-2 text-[10px] leading-5 min-[376px]:text-xs md:gap-x-2 md:text-base",
             )}
           >
             <span
diff --git a/src/app/dashboard/(user-dashboard)/products/_components/product-content.tsx b/src/app/dashboard/(user-dashboard)/products/_components/product-content.tsx
index 32220deb5..70273687c 100644
--- a/src/app/dashboard/(user-dashboard)/products/_components/product-content.tsx
+++ b/src/app/dashboard/(user-dashboard)/products/_components/product-content.tsx
@@ -110,7 +110,7 @@ const ProductContent = ({
         className={cn(
           "show_scrollbar rounded-xl border border-gray-300 bg-[#F1F5F9] pt-1 sm:pt-4",
           isOpen
-            ? "max-w-full lg:max-w-[600px] min-[1090px]:max-w-[650px] min-[1150px]:max-w-[750px] min-[1200px]:max-w-[800px] xl:max-w-full"
+            ? "max-w-full lg:max-w-[600px] min-[1090px]:max-w-[650px] min-[1150px]:max-w-[750px] min-[1200px]:max-w-[800px] xl:max-w-[820px]"
             : "max- w-full",
         )}
       >
diff --git a/src/app/dashboard/(user-dashboard)/products/_components/product-detail-modal.tsx b/src/app/dashboard/(user-dashboard)/products/_components/product-detail-modal.tsx
index 39ada15c9..a522d421d 100644
--- a/src/app/dashboard/(user-dashboard)/products/_components/product-detail-modal.tsx
+++ b/src/app/dashboard/(user-dashboard)/products/_components/product-detail-modal.tsx
@@ -1,5 +1,6 @@
 import { AnimatePresence, motion } from "framer-motion";
 import { Loader2, X } from "lucide-react";
+import { useRouter } from "next-nprogress-bar";
 import { useEffect, useState } from "react";
 
 import BlurImage from "~/components/miscellaneous/blur-image";
@@ -18,6 +19,7 @@ const variantProperties = {
 };
 const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
 const ProductDetailModal = () => {
+  const router = useRouter();
   const { products, deleteProduct } = useProducts();
   const [isLoading, setIsLoading] = useState(false);
   const { winWidth } = useWindowWidth();
@@ -59,6 +61,11 @@ const ProductDetailModal = () => {
     setIsLoading(false);
     setIsDelete(false);
   };
+  const handleEditAction = (id: string) => {
+    updateOpen(false);
+    router.push(`/dashboard/products/${id}`);
+    updateProductId("null");
+  };
 
   useEffect(() => {
     document.body.style.overflow =
@@ -206,7 +213,11 @@ const ProductDetailModal = () => {
                   <span>Delete</span>
                 )}
               </Button>
-              <Button variant="outline" className="bg-white font-medium">
+              <Button
+                onClick={() => handleEditAction(product!.product_id)}
+                variant="outline"
+                className="bg-white font-medium"
+              >
                 Edit
               </Button>
             </div>
diff --git a/src/app/dashboard/(user-dashboard)/products/_components/product-detail-view.tsx b/src/app/dashboard/(user-dashboard)/products/_components/product-detail-view.tsx
index 7e13ae354..b5933bfea 100644
--- a/src/app/dashboard/(user-dashboard)/products/_components/product-detail-view.tsx
+++ b/src/app/dashboard/(user-dashboard)/products/_components/product-detail-view.tsx
@@ -1,5 +1,6 @@
 import { AnimatePresence, motion } from "framer-motion";
 import { X } from "lucide-react";
+import { useRouter } from "next-nprogress-bar";
 import { useEffect, useTransition } from "react";
 
 import BlurImage from "~/components/miscellaneous/blur-image";
@@ -11,6 +12,7 @@ import { useProducts } from "~/hooks/admin-product/use-products.persistence";
 import { cn, formatPrice, simulateDelay } from "~/lib/utils";
 
 const ProductDetailView = () => {
+  const router = useRouter();
   const { products, deleteProduct } = useProducts();
   const [isLoading, startTransition] = useTransition();
   const {
@@ -46,6 +48,12 @@ const ProductDetailView = () => {
       setIsDelete(false);
     });
   };
+  const handleEditAction = (id: string) => {
+    updateOpen(false);
+    router.push(`/dashboard/products/${id}`);
+    updateProductId("null");
+  };
+
   useEffect(() => {
     document.title = isOpen
       ? `Product - ${product?.name}`
@@ -59,8 +67,8 @@ const ProductDetailView = () => {
           initial={{ opacity: 0, x: 100 }}
           animate={{ opacity: 1, x: 0 }}
           exit={{ opacity: 0, x: 100 }}
-          transition={{ duration: 0.5 }}
-          className="sticky top-0 hidden w-full min-w-[350px] flex-col gap-y-5 rounded-[6px] border border-gray-300 bg-white px-2 py-4 shadow-[0px_1px_18px_0px_rgba(10,_57,_176,_0.12)] lg:flex lg:max-w-[370px] xl:w-[403px] xl:px-4"
+          transition={{ duration: 0.3 }}
+          className="sticky top-0 hidden w-full min-w-[340px] flex-col gap-y-5 rounded-[6px] border border-gray-300 bg-white px-2 py-4 shadow-[0px_1px_18px_0px_rgba(10,_57,_176,_0.12)] lg:flex lg:max-w-[370px] xl:w-[403px] xl:px-4"
         >
           <div
             className={cn(
@@ -164,7 +172,11 @@ const ProductDetailView = () => {
                 <span>Delete</span>
               )}
             </Button>
-            <Button variant="outline" className="bg-white font-medium">
+            <Button
+              onClick={() => handleEditAction(product!.product_id)}
+              variant="outline"
+              className="bg-white font-medium"
+            >
               Edit
             </Button>
           </div>
diff --git a/src/app/dashboard/(user-dashboard)/products/page.test.tsx b/src/app/dashboard/(user-dashboard)/products/page.test.tsx
deleted file mode 100644
index dea52ad56..000000000
--- a/src/app/dashboard/(user-dashboard)/products/page.test.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { render } from "~/test/utils";
-import Page from "./page";
-
-describe("page tests", () => {
-  it("should render correctly", () => {
-    expect.assertions(1);
-
-    render(<Page />);
-
-    expect(true).toBeTruthy();
-  });
-});
diff --git a/src/app/dashboard/(user-dashboard)/settings/data-and-privacy/page.tsx b/src/app/dashboard/(user-dashboard)/settings/data-and-privacy/page.tsx
index db4d38750..dfd73041e 100644
--- a/src/app/dashboard/(user-dashboard)/settings/data-and-privacy/page.tsx
+++ b/src/app/dashboard/(user-dashboard)/settings/data-and-privacy/page.tsx
@@ -1,5 +1,101 @@
-const page = () => {
-  return <div>page</div>;
+"use client";
+
+import { useState } from "react";
+
+interface ToggleSwitchProperties {
+  label: string;
+  description: string;
+  apiEndpoint: string;
+}
+
+const ToggleSwitch: React.FC<ToggleSwitchProperties> = ({
+  label,
+  description,
+}) => {
+  const [enabled, setEnabled] = useState(false);
+
+  const handleToggle = async () => {
+    setEnabled(!enabled);
+  };
+
+  return (
+    <div className="mb-4 rounded-md border p-6 shadow">
+      <div className="mb-2 flex items-center justify-between">
+        <label className="text-2xl text-lg font-semibold">{label}</label>
+        <label className="relative inline-block h-8 w-14">
+          <input
+            type="checkbox"
+            checked={enabled}
+            onChange={handleToggle}
+            className="h-0 w-0 opacity-0"
+          />
+          <span
+            className={`absolute bottom-0 left-0 right-0 top-0 cursor-pointer rounded-full transition duration-300 ${
+              enabled ? "bg-primary" : "bg-subtle"
+            }`}
+          />
+          <span
+            className={`absolute transform rounded-full bg-white transition duration-300 ${
+              enabled ? "translate-x-6" : "translate-x-0"
+            } left-1 top-1 h-6 w-6`}
+          />
+        </label>
+      </div>
+      <p className="text-sm text-foreground">{description}</p>
+    </div>
+  );
+};
+
+const Page = () => {
+  return (
+    <div className="p-6">
+      <h1 className="mb-10 text-[28px] font-bold">Data & Privacy</h1>
+      <div className="mb-8">
+        <h2 className="text-2xl font-semibold">Choose how we use your data</h2>
+        <p>
+          Your data is important for helping improve and personalize HNG
+          Boilerplate, and you have control over how it is used. You can change
+          these settings anytime if you feel like playing a part in our
+          development. <span className="underline">Learn more.</span>
+        </p>
+      </div>
+      <ToggleSwitch
+        label="Profile Visibility"
+        description="Choose whether your profile is visible to everyone or just your contacts. Public profiles are viewable by all, making it easier to connect with new people. Private profiles are only visible to those you approve, giving you control over your information."
+        apiEndpoint="/api/toggle-profile-visibility"
+      />
+      <ToggleSwitch
+        label="Share Data with Partners"
+        description="Allow us to share your data with trusted partners for personalized promotions and offers. This helps us provide you with relevant content, discounts, and services tailored to your interests."
+        apiEndpoint="/api/toggle-share-data"
+      />
+      <ToggleSwitch
+        label="Receive Email Updates"
+        description="Opt in to receive updates on the latest features, exciting promotions, and important news directly to your email. Stay informed and take advantage of exclusive offers and updates designed to enhance your experience with us."
+        apiEndpoint="/api/toggle-email-updates"
+      />
+      <ToggleSwitch
+        label="Enable Two-Factor Authentication"
+        description="Enhance the security of your account by enabling Two-Factor Authentication (2FA). This feature adds an extra layer of protection by requiring not only your password but also a second form of verification, such as a code sent to your mobile device or generated by an authentication app. Enabling 2FA significantly reduces the risk of unauthorized access to your account, ensuring that only you can log in, even if someone else has your password."
+        apiEndpoint="/api/toggle-2fa"
+      />
+      <ToggleSwitch
+        label="Use Data Encryption"
+        description="Enable data encryption to protect your information from unauthorized access. By turning on this feature, all data transmitted between your device and our servers is encrypted, making it virtually impossible for hackers to intercept and read your data. This ensures that your personal information, including login credentials, messages, and other sensitive data, is kept secure and private."
+        apiEndpoint="/api/toggle-encryption"
+      />
+      <ToggleSwitch
+        label="Allow Analytics"
+        description="Enable third-party analytics services to help us gain insights into user behavior and improve our app's performance. By allowing these services, we can collect and analyze data on how you interact with the app, such as which features you use most, how you navigate through the interface, and where you might encounter issues. This information is crucial for us to identify trends, enhance user experience, and make data-driven decisions to optimize the app’s functionality and usability."
+        apiEndpoint="/api/toggle-analytics"
+      />
+      <ToggleSwitch
+        label="Personalized Ads"
+        description="Allow us to show you personalized ads based on your interests and browsing behavior. By enabling this feature, you consent to the use of data collected from your interactions within the app and across other platforms to deliver ads that are more relevant to you."
+        apiEndpoint="/api/toggle-ads"
+      />
+    </div>
+  );
 };
 
-export default page;
+export default Page;
diff --git a/src/app/dashboard/(user-dashboard)/settings/organization/roles-and-permissions/page.tsx b/src/app/dashboard/(user-dashboard)/settings/organization/roles-and-permissions/page.tsx
index 2873b0226..df7b0c3ca 100644
--- a/src/app/dashboard/(user-dashboard)/settings/organization/roles-and-permissions/page.tsx
+++ b/src/app/dashboard/(user-dashboard)/settings/organization/roles-and-permissions/page.tsx
@@ -1,9 +1,12 @@
 "use client";
 
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 import CustomButton from "~/components/common/common-button/common-button";
 import RoleCreationModal from "~/components/common/modals/role-creation";
+import LoadingSpinner from "~/components/miscellaneous/loading-spinner";
+import { useToast } from "~/components/ui/use-toast";
+import { getApiUrl } from "~/utils/getApiUrl";
 
 type Role = {
   id: number;
@@ -12,75 +15,116 @@ type Role = {
 };
 
 type Permission = {
-  name: string;
-  enabled: boolean;
-};
-
-const rolesData: Role[] = [
-  { id: 1, name: "Administrator", description: "Full access, control" },
-  { id: 2, name: "Guest", description: "Read-only access" },
-  { id: 3, name: "User", description: "Read, write, update" },
-  { id: 4, name: "Manager", description: "Read, write, approve" },
-  { id: 5, name: "Project Lead", description: "Manage, coordinate, oversee" },
-];
-
-const permissionsData: { [key: number]: Permission[] } = {
-  1: [
-    { name: "Can view transactions", enabled: true },
-    { name: "Can view refunds", enabled: false },
-    { name: "Can log refunds", enabled: true },
-  ],
-  2: [
-    { name: "Can view users", enabled: true },
-    { name: "Can create users", enabled: false },
-    { name: "Can edit users", enabled: true },
-    { name: "Can blacklist/whitelist users", enabled: true },
-  ],
-  3: [
-    { name: "Can view users", enabled: true },
-    { name: "Can create users", enabled: true },
-    { name: "Can edit users", enabled: false },
-    { name: "Can blacklist/whitelist users", enabled: true },
-  ],
-  4: [
-    { name: "Can view transactions", enabled: true },
-    { name: "Can view refunds", enabled: true },
-    { name: "Can log refunds", enabled: true },
-    { name: "Can view users", enabled: true },
-    { name: "Can create users", enabled: true },
-    { name: "Can edit users", enabled: true },
-    { name: "Can blacklist/whitelist users", enabled: true },
-  ],
-  5: [
-    { name: "Can view transactions", enabled: true },
-    { name: "Can view refunds", enabled: true },
-    { name: "Can log refunds", enabled: true },
-    { name: "Can view users", enabled: true },
-    { name: "Can create users", enabled: true },
-    { name: "Can edit users", enabled: true },
-    { name: "Can blacklist/whitelist users", enabled: true },
-  ],
+  [key: string]: boolean;
 };
 
 const RolesAndPermission = () => {
   const [selectedRoleId, setSelectedRoleId] = useState<number | undefined>();
-  const [permissions, setPermissions] = useState<Permission[]>([]);
+  const [permissions, setPermissions] = useState<Permission>({});
   const [isModalOpen, setIsModalOpen] = useState(false);
+  const [roles, setRoles] = useState<Role[]>([]);
+  const [apiUrl, setApiUrl] = useState("");
+  const { toast } = useToast();
+  const [loadingRoles, setLoadingRoles] = useState<boolean>(true);
+  const [loadingPermissions, setLoadingPermissions] = useState<boolean>(false);
+  const [loadingRequest, setLoadingRequest] = useState<boolean>(false);
+  const org_id = "9ca4512c-f665-4901-ba63-0b6492e47d32";
+
+  useEffect(() => {
+    setLoadingRoles(true);
+    const fetchData = async () => {
+      try {
+        const url = await getApiUrl();
+        setApiUrl(url);
+        const response = await fetch(`${url}/organisations/${org_id}/roles`);
+        const data = await response.json();
+        setRoles(data);
+        setLoadingRoles(false);
+      } catch (error: unknown) {
+        toast({
+          title: "Error occurred",
+          description:
+            error instanceof Error ? error.message : "Error fetching data",
+          variant: "destructive",
+        });
+        setLoadingRoles(false);
+      }
+    };
+    fetchData();
+  }, [toast]);
+
+  useEffect(() => {
+    const fetchPermissions = async () => {
+      if (selectedRoleId) {
+        setLoadingPermissions(true);
+        try {
+          const response = await fetch(
+            `${apiUrl}/organisations/${org_id}/roles/${selectedRoleId}`,
+          );
+          const permissionsData = await response.json();
+          setPermissions(permissionsData.permission_list);
+          setLoadingPermissions(false);
+        } catch {
+          toast({
+            title: "An error occurred",
+            description: "Error fetching permissions",
+            variant: "destructive",
+          });
+          setLoadingPermissions(false);
+        }
+      }
+    };
+    fetchPermissions();
+  }, [selectedRoleId, apiUrl, org_id, toast]);
 
   const handleRoleClick = (roleId: number) => {
     setSelectedRoleId(roleId);
-    setPermissions([...permissionsData[roleId]]);
   };
 
-  const handleToggle = (index: number) => {
-    setPermissions((previous) => {
-      const newPermissions = [...previous];
-      newPermissions[index].enabled = !newPermissions[index].enabled;
-      permissionsData[selectedRoleId!] = newPermissions;
-      return newPermissions;
+  const handleToggle = (permission: string, value: boolean) => {
+    setPermissions({
+      ...permissions,
+      [permission]: value,
     });
   };
 
+  const handleSave = async () => {
+    setLoadingRequest(true);
+    try {
+      const response = await fetch(
+        `${apiUrl}/organisations/${org_id}/${selectedRoleId}/permissions`,
+        {
+          method: "PUT",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({ permission_list: permissions }),
+        },
+      );
+
+      if (response.ok) {
+        toast({
+          title: "Success",
+          description: "Permissions updated successfully",
+          variant: "default",
+        });
+      } else {
+        toast({
+          title: "Error",
+          description: "Failed to update permissions",
+          variant: "destructive",
+        });
+      }
+    } catch {
+      toast({
+        title: "Error",
+        description: "Failed to update permissions",
+        variant: "destructive",
+      });
+    }
+    setLoadingRequest(false);
+  };
+
   const handleModalOpen = () => {
     setIsModalOpen(true);
   };
@@ -95,7 +139,12 @@ const RolesAndPermission = () => {
         <div className="w-1/4">
           <h2 className="mb-10 text-xl font-medium">Roles</h2>
           <ul className="rounded-md border border-[#CBD5E1] p-3">
-            {rolesData.map((role) => (
+            {loadingRoles && (
+              <div className="flex justify-center py-8">
+                <LoadingSpinner className="size-4 animate-spin stroke-orange-500 sm:size-5" />
+              </div>
+            )}
+            {roles.map((role) => (
               <li
                 key={role.id}
                 className={`mb-2 cursor-pointer border-[#CBD5E1] p-2 ${
@@ -143,30 +192,45 @@ const RolesAndPermission = () => {
                   Click on a role to view permissions
                 </p>
               </div>
+            ) : loadingPermissions ? (
+              <div className="item-center flex justify-center py-48">
+                <LoadingSpinner className="size-4 animate-spin stroke-orange-500 sm:size-5" />
+              </div>
             ) : (
               <div className="mt-6">
-                {permissions.map((permission, index) => (
+                {Object.keys(permissions).map((permission) => (
                   <div
-                    key={permission.name}
+                    key={permission}
                     className="mb-4 flex items-center justify-between"
                   >
                     <span className="text-sm font-normal text-[#525252]">
-                      {permission.name}
+                      {permission
+                        .replaceAll("_", " ")
+                        .replaceAll(/\b\w/g, (l) => l.toUpperCase())}
                     </span>
                     <label className="relative inline-flex cursor-pointer items-center">
                       <input
                         type="checkbox"
                         className="peer sr-only"
-                        checked={permission.enabled}
-                        onChange={() => handleToggle(index)}
+                        checked={permissions[permission]}
+                        onChange={(event) =>
+                          handleToggle(permission, event.target.checked)
+                        }
                       />
                       <div className="peer h-6 w-11 rounded-full bg-gray-200 after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-orange-600 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:ring-4 peer-focus:ring-orange-300 dark:border-gray-600 dark:bg-gray-700 dark:peer-focus:ring-orange-800"></div>
                     </label>
                   </div>
                 ))}
                 <div className="mt-16 flex justify-center">
-                  <button className="rounded border border-[#E2E8F0] bg-[#F1F5F9] px-4 py-2 text-sm font-medium text-[#0F172A] hover:bg-[#c1c9d2]">
-                    Save Preferences
+                  <button
+                    className="w-40 rounded border border-[#E2E8F0] bg-[#F1F5F9] px-4 py-2 text-sm font-medium text-[#0F172A] hover:bg-[#c1c9d2]"
+                    onClick={handleSave}
+                  >
+                    {loadingRequest ? (
+                      <LoadingSpinner className="mx-auto size-4 animate-spin sm:size-5" />
+                    ) : (
+                      "Save Preferences"
+                    )}
                   </button>
                 </div>
               </div>
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 38fe4626a..3c252bb27 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -3,6 +3,8 @@ import { Inter } from "next/font/google";
 
 import "./globals.css";
 
+import { SessionProvider } from "next-auth/react";
+
 import Providers from "~/components/providers";
 import { Toaster } from "~/components/ui/toaster";
 
@@ -22,7 +24,7 @@ export default function RootLayout({
       <body className={inter.className}>
         <div className="mx-auto w-full">
           <Providers />
-          {children}
+          <SessionProvider>{children}</SessionProvider>
           <Toaster />
         </div>
       </body>
diff --git a/src/components/card/user-card.tsx b/src/components/card/user-card.tsx
index d75b65cc1..1d46b02c8 100644
--- a/src/components/card/user-card.tsx
+++ b/src/components/card/user-card.tsx
@@ -1,4 +1,5 @@
 import { AnimatePresence, motion } from "framer-motion";
+import { signOut } from "next-auth/react";
 import { useEffect, useState } from "react";
 
 import { useUser } from "~/hooks/user/use-user";
@@ -12,6 +13,7 @@ const UserCard = ({ email }: { email: string }) => {
   const handleLogout = () => {
     updateUser({ email: "", name: "" });
     setIsLogout(false);
+    signOut({ callbackUrl: "/" });
   };
 
   const handleEscapeClick = (event: KeyboardEvent) => {
diff --git a/src/components/layouts/navbar/index.tsx b/src/components/layouts/navbar/index.tsx
index 91b9c3fdb..a78994c54 100644
--- a/src/components/layouts/navbar/index.tsx
+++ b/src/components/layouts/navbar/index.tsx
@@ -1,18 +1,18 @@
 "use client";
 
+import { useSession } from "next-auth/react";
 import Link from "next/link";
 import { useEffect, useState } from "react";
 
 import UserCard from "~/components/card/user-card";
 import Logo from "~/components/common/logo";
-import { useUser } from "~/hooks/user/use-user";
 import { cn } from "~/lib/utils";
 import { NAV_LINKS } from "./links";
 import MobileNav from "./mobile-navbar";
 
 const Navbar = () => {
   const [scrolling, setIsScrolling] = useState<boolean>(false);
-  const { user } = useUser();
+  const { data: session } = useSession();
 
   const handleScrollEvent = () => {
     if (window.scrollY > 1) {
@@ -36,7 +36,7 @@ const Navbar = () => {
         className={cn(
           `relative mx-auto flex w-full max-w-[1200px] items-center gap-x-4 transition-all duration-500 md:justify-between`,
           scrolling ? "py-2" : "py-4 md:py-9",
-          user.email && "justify-between",
+          session?.user?.email && "justify-between",
         )}
       >
         <MobileNav />
@@ -55,7 +55,9 @@ const Navbar = () => {
             );
           })}
         </div>
-        {!user.email && (
+        {session?.user?.email ? (
+          <UserCard email={session?.user?.email} />
+        ) : (
           <div className="w-fullx hidden items-center justify-end gap-x-4 justify-self-end md:flex lg:gap-x-8">
             <Link
               href="/login"
@@ -71,7 +73,6 @@ const Navbar = () => {
             </Link>
           </div>
         )}
-        {user.email && <UserCard email={user.email} />}
       </div>
     </nav>
   );
diff --git a/src/config/auth.config.ts b/src/config/auth.config.ts
index 71f7e4b7c..5121d4088 100644
--- a/src/config/auth.config.ts
+++ b/src/config/auth.config.ts
@@ -69,14 +69,14 @@ export default {
       return { ...token, ...response };
     },
     async redirect({ url, baseUrl }) {
-      if (url === "/auth/login") {
+      if (url === "/login") {
         return baseUrl;
       }
       return "/register/organisation";
     },
   },
   pages: {
-    signIn: "/auth/login",
+    signIn: "/login",
   },
   trustHost: true,
 } satisfies NextAuthConfig;