diff --git a/app/(private)/dashboard/layout.tsx b/app/(private)/dashboard/layout.tsx
index bee429f..c24eeaa 100644
--- a/app/(private)/dashboard/layout.tsx
+++ b/app/(private)/dashboard/layout.tsx
@@ -1,6 +1,7 @@
 "use client";
 import Sidebar from "@/app/(private)/_components/sidebar";
 import CookieBanner from "@/components/cookies";
+import CookieContextProvider from "@/context/cookie";
 import { useDashboardContext } from "@/context/dashboard";
 import { cn } from "@/lib/utils";
 export default function DashboardLayout({ children }: { children: React.ReactNode }) {
@@ -17,7 +18,9 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
       >
         {children}
       </main>
-      <CookieBanner />
+      <CookieContextProvider>
+        <CookieBanner />
+      </CookieContextProvider>
     </>
   );
 }
diff --git a/app/(public)/layout.tsx b/app/(public)/layout.tsx
index 1732f05..5f49f56 100644
--- a/app/(public)/layout.tsx
+++ b/app/(public)/layout.tsx
@@ -1,14 +1,17 @@
 import CookieBanner from "@/components/cookies";
 import Footer from "@/components/footer";
 import Header from "@/components/header";
+import CookieContextProvider from "@/context/cookie";
 
 export default function PublicLayout({ children }: { children: React.ReactNode }) {
   return (
     <>
       <Header />
       <main id="content">{children}</main>
-      <Footer />
-      <CookieBanner />
+      <CookieContextProvider>
+        <Footer />
+        <CookieBanner />
+      </CookieContextProvider>
     </>
   );
 }
diff --git a/components/cookies/changeMenu.tsx b/components/cookies/changeMenu.tsx
index 2ddd7ec..29d3a08 100644
--- a/components/cookies/changeMenu.tsx
+++ b/components/cookies/changeMenu.tsx
@@ -81,6 +81,7 @@ export default function ChangeMenu() {
               onClick={() => {
                 cookie.toggleSelectCookies(false, false, false, false);
                 resetCookieConsentValue();
+                cookie.toggleChangeConsentMenu();
               }}
               variant="outline"
             >
@@ -90,13 +91,6 @@ export default function ChangeMenu() {
               onClick={() => {
                 cookie.toggleChangeConsentMenu();
                 cookie.toggleManageConsentMenu();
-                cookie.toggleSelectCookies(
-                  cookie.preferences,
-                  cookie.analytics,
-                  cookie.advertising,
-                  false
-                );
-                resetCookieConsentValue();
               }}
             >
               Change Consent
diff --git a/components/cookies/index.tsx b/components/cookies/index.tsx
index 658db0d..37c5dbb 100644
--- a/components/cookies/index.tsx
+++ b/components/cookies/index.tsx
@@ -1,3 +1,4 @@
+import CookieFormContextProvider from "@/context/cookie/form";
 import { cn } from "@/lib/utils";
 
 import ChangeMenu from "./changeMenu";
@@ -8,7 +9,9 @@ export default function CookieTray() {
   return (
     <>
       <div className={cn("transition-all")}>
-        <ManageConsent />
+        <CookieFormContextProvider>
+          <ManageConsent />
+        </CookieFormContextProvider>
         <ChangeMenu />
         <CookieToast />
       </div>
diff --git a/components/cookies/manage/about.tsx b/components/cookies/manage/about.tsx
deleted file mode 100644
index 9647ced..0000000
--- a/components/cookies/manage/about.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { TabsContent } from "@/components/ui/tabs";
-
-export default function AboutTab() {
-  return (
-    <>
-      <TabsContent value="About" id="aboutTab">
-        <h3 className="mb-6 px-6 font-bold">What are cookies?</h3>
-        <p className="mb-12 px-6 leading-[1.4]">
-          Cookies are small text files that are used by websites to improve the user experience.
-          <br /> <br />
-          Laws and guidelines such as GDPR allow us to store cookies on this device if they are
-          strictly necessary for the website to function. For all other cookies we will need your
-          explicit consent.
-          <br /> <br />
-          This website uses only necessary cookies for now. However, we may later store more cookies
-          that help us improve the experience for our users.
-          <br /> <br />
-          You can at any time withdraw your consent to all non-necessary cookies.
-          <br /> <br />
-          Learn more about us, how you can contact us, and how we handle your personal data in our
-          Privacy Policy.
-        </p>
-      </TabsContent>
-    </>
-  );
-}
diff --git a/components/cookies/manage/buttons.tsx b/components/cookies/manage/buttons.tsx
index ed227ab..a2a886e 100644
--- a/components/cookies/manage/buttons.tsx
+++ b/components/cookies/manage/buttons.tsx
@@ -1,22 +1,12 @@
 "use client";
-import type { UseFormSetValue } from "react-hook-form";
 
 import { Button } from "@/components/ui/button";
 import { useCookieContext } from "@/context/cookie";
+import { useCookieFormContext } from "@/context/cookie/form";
 
-type CookieInputs = {
-  necessary: boolean;
-  preferences: boolean;
-  analytics: boolean;
-  advertising: boolean;
-};
-
-type ButtonProps = {
-  setValue: UseFormSetValue<CookieInputs>;
-};
-
-export function DenyAll({ setValue }: ButtonProps) {
+export function DenyAll() {
   const cookieStore = useCookieContext();
+  const { setValue } = useCookieFormContext();
   return (
     <>
       <Button
@@ -38,8 +28,9 @@ export function DenyAll({ setValue }: ButtonProps) {
   );
 }
 
-export function AcceptAll({ setValue }: ButtonProps) {
+export function AcceptAll() {
   const cookieStore = useCookieContext();
+  const { setValue } = useCookieFormContext();
   return (
     <>
       <Button
diff --git a/components/cookies/manage/consent.tsx b/components/cookies/manage/consent.tsx
deleted file mode 100644
index 1bfbc10..0000000
--- a/components/cookies/manage/consent.tsx
+++ /dev/null
@@ -1,124 +0,0 @@
-import type { Control, FieldErrors, UseFormRegister } from "react-hook-form";
-import { Controller } from "react-hook-form";
-
-import { CookieCheckBox } from "@/components/cookies/manage/cookieCheckbox";
-import { TabsContent } from "@/components/ui/tabs";
-
-type CookieInputs = {
-  necessary: boolean;
-  preferences: boolean;
-  analytics: boolean;
-  advertising: boolean;
-};
-
-export default function ConsentTab({
-  control,
-  register,
-  errors,
-  isSubmitting,
-}: {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  control: Control<CookieInputs, any>;
-  register: UseFormRegister<CookieInputs>;
-  errors: FieldErrors<CookieInputs>;
-  isSubmitting: boolean;
-}) {
-  return (
-    <>
-      <TabsContent value="Consent" id="consentTab">
-        <div className="">
-          <h3 className="mb-6 px-6 font-bold">This website uses cookies</h3>
-          <p className="mb-10 px-6 leading-[1.4]">
-            We use cookies to personalize content and marketing, deliver functionality through
-            social media, och for analyzing traffic. We share, with your consent, information to our
-            partners in social media, marketing, and analytics. They can then use this data in
-            combination with other data that you hae either shared or that they have collected
-            through your usage of their services.
-          </p>
-          <div className="mb-12 grid w-full grid-cols-1 m:grid-cols-2 md:grid-cols-4">
-            <Controller
-              name="necessary"
-              control={control}
-              disabled={true}
-              defaultValue={true}
-              render={({ field: { onChange, onBlur, value, ref, name, disabled } }) => (
-                <CookieCheckBox
-                  onChange={onChange}
-                  onBlur={onBlur}
-                  checked={value}
-                  ref={ref}
-                  name={name}
-                  register={register}
-                  required
-                  label={name}
-                  error={errors.necessary}
-                  disabled={disabled}
-                />
-              )}
-            />
-            <Controller
-              name="preferences"
-              control={control}
-              disabled={isSubmitting}
-              defaultValue={true}
-              render={({ field: { onChange, onBlur, value, ref, name, disabled } }) => (
-                <CookieCheckBox
-                  onChange={onChange}
-                  onBlur={onBlur}
-                  checked={value}
-                  ref={ref}
-                  name={name}
-                  register={register}
-                  required
-                  label={name}
-                  error={errors.necessary}
-                  disabled={disabled}
-                />
-              )}
-            />
-            <Controller
-              name="analytics"
-              control={control}
-              disabled={isSubmitting}
-              defaultValue={true}
-              render={({ field: { onChange, onBlur, value, ref, name, disabled } }) => (
-                <CookieCheckBox
-                  onChange={onChange}
-                  onBlur={onBlur}
-                  checked={value}
-                  ref={ref}
-                  name={name}
-                  register={register}
-                  required
-                  label={name}
-                  error={errors.necessary}
-                  disabled={disabled}
-                />
-              )}
-            />
-            <Controller
-              name="advertising"
-              control={control}
-              disabled={isSubmitting}
-              defaultValue={true}
-              render={({ field: { onChange, onBlur, value, ref, name, disabled } }) => (
-                <CookieCheckBox
-                  onChange={onChange}
-                  onBlur={onBlur}
-                  checked={value}
-                  ref={ref}
-                  name={name}
-                  register={register}
-                  required
-                  label={name}
-                  error={errors.necessary}
-                  disabled={disabled}
-                />
-              )}
-            />
-          </div>
-        </div>
-      </TabsContent>
-    </>
-  );
-}
diff --git a/components/cookies/manage/controllers.tsx b/components/cookies/manage/controllers.tsx
new file mode 100644
index 0000000..0ac2082
--- /dev/null
+++ b/components/cookies/manage/controllers.tsx
@@ -0,0 +1,138 @@
+"use client";
+import React from "react";
+import type { Path } from "react-hook-form";
+import { Controller } from "react-hook-form";
+
+import { useCookieFormContext } from "@/context/cookie/form";
+import { cn } from "@/lib/utils";
+import type { CookieInputs } from "@/types/cookie";
+
+export function ConsentTabController({ name }: { name: Path<CookieInputs> }) {
+  const { register, control, formState } = useCookieFormContext();
+
+  return (
+    <>
+      <Controller
+        name={name}
+        control={control}
+        disabled={name === "necessary" ? true : formState.isSubmitting}
+        defaultValue={formState.defaultValues![name]}
+        render={({ field: { name, value, disabled } }) => (
+          <div
+            className={cn(
+              "h-[6.25rem] w-full border-x-[0.0625rem] border-y-2 transition-all",
+              disabled ? "opacity-80" : "",
+              value ? "border-[transparent] bg-primary text-primary-foreground" : "border-border"
+            )}
+          >
+            <label
+              htmlFor={name}
+              className="relative flex h-full w-full flex-col items-center justify-center gap-1 text-[1.125rem]"
+            >
+              <span className="font-bold capitalize">{name}</span>
+              <input
+                type="checkbox"
+                id={name}
+                aria-invalid={!!formState.errors![name]}
+                aria-errormessage={`${name}-error`}
+                className="peer/villkor h-0 w-0 opacity-0"
+                checked={value}
+                disabled={disabled}
+                {...register(name, { required: name === "necessary" })}
+              />
+
+              <span
+                className={cn(
+                  "relative inline-block h-8 w-8 rounded-lg border-4 border-primary transition-all",
+                  formState.errors![name] ? "border-destructive" : "",
+                  disabled ? "cursor-not-allowed" : ""
+                )}
+              ></span>
+            </label>
+          </div>
+        )}
+      />
+    </>
+  );
+}
+
+export function DetailsTabController({
+  name,
+  children,
+  amount,
+}: {
+  name: Path<CookieInputs>;
+  children: React.ReactNode;
+  amount: number;
+}) {
+  const { register, control, formState } = useCookieFormContext();
+
+  return (
+    <>
+      <Controller
+        name={name}
+        control={control}
+        disabled={name === "necessary" ? true : formState.isSubmitting}
+        defaultValue={formState.defaultValues![name]}
+        render={({ field: { value, name, disabled } }) => (
+          <div
+            className={cn(
+              "rounded-lg border-2 px-3 pb-6 pt-3 transition-all",
+              disabled ? "opacity-80" : "",
+              value ? "border-[transparent] bg-primary text-primary-foreground" : "border-border"
+            )}
+          >
+            <label
+              className={cn(
+                "mb-6 flex w-full items-center gap-6 text-[1.125rem]",
+                disabled ? "cursor-not-allowed" : "cursor-pointer"
+              )}
+            >
+              <div className="flex w-[12rem] items-center">
+                <input
+                  type="checkbox"
+                  id={name}
+                  aria-invalid={!!formState.errors![name]}
+                  aria-errormessage={`${name}-error`}
+                  className="peer/villkor h-0 w-0 opacity-0"
+                  checked={value}
+                  disabled={disabled}
+                  {...register(name, { required: name === "necessary" })}
+                />
+
+                <span
+                  className={cn(
+                    "relative inline-block h-8 w-8 rounded-lg border-4 border-primary transition-all",
+                    disabled ? "cursor-not-allowed" : ""
+                  )}
+                ></span>
+                <p
+                  className={cn(
+                    "ml-6 w-fit font-bold capitalize",
+                    value ? "text-primary-foreground" : ""
+                  )}
+                >
+                  {name}
+                </p>
+              </div>
+              <span className="h-6 w-[0.125rem] shrink-0 bg-primary-foreground"></span>
+              <div
+                className={cn(
+                  "item-center flex h-6 justify-center rounded-full px-3  font-bold",
+                  amount > 0 && value
+                    ? "bg-background text-foreground"
+                    : amount > 0
+                      ? "bg-primary text-primary-foreground"
+                      : "bg-muted text-muted-foreground"
+                )}
+              >
+                <span className="">{amount}</span>
+              </div>
+            </label>
+            {children}
+          </div>
+        )}
+      />
+    </>
+  );
+}
diff --git a/components/cookies/manage/cookieCheckbox.tsx b/components/cookies/manage/cookieCheckbox.tsx
deleted file mode 100644
index 6fd7e57..0000000
--- a/components/cookies/manage/cookieCheckbox.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import type { InputHTMLAttributes, RefAttributes } from "react";
-import type { Path, UseFormRegister, FieldError } from "react-hook-form";
-
-import type { CookieInputs } from "@/components/cookies/manage/tabNav";
-import { cn } from "@/lib/utils";
-
-type CookieCheckboxProps = {
-  label: Path<CookieInputs>;
-  register: UseFormRegister<CookieInputs>;
-  required: boolean;
-  disabled?: boolean | undefined;
-  error?: FieldError | undefined;
-  checked?: boolean;
-  classes?: string;
-  name: string;
-};
-
-export const CookieCheckBox = ({
-  label,
-  register,
-  required,
-  disabled,
-  error,
-  checked,
-  classes,
-  name,
-  ...props
-}: CookieCheckboxProps &
-  InputHTMLAttributes<HTMLInputElement> &
-  RefAttributes<HTMLInputElement>) => (
-  <>
-    <div
-      className={cn(
-        "h-[6.25rem] w-full border-x-[0.0625rem] border-y-2 transition-all",
-        disabled ? "opacity-80" : "",
-        checked ? "border-[transparent] bg-primary text-primary-foreground" : "border-border",
-        classes
-      )}
-    >
-      <label
-        htmlFor={name}
-        className="relative flex h-full w-full flex-col items-center justify-center gap-1 text-[1.125rem]"
-      >
-        <span className="font-bold capitalize">{label}</span>
-        <input
-          {...props}
-          type="checkbox"
-          id={name}
-          aria-invalid={!!error}
-          aria-errormessage={`${name}-error`}
-          className="peer/villkor h-0 w-0 opacity-0"
-          checked={checked}
-          disabled={disabled}
-          {...register(label, { required })}
-        />
-
-        <span
-          className={cn(
-            "relative inline-block h-8 w-8 rounded-lg border-4 border-primary transition-all",
-            error ? "border-destructive" : "",
-            disabled ? "cursor-not-allowed" : ""
-          )}
-        ></span>
-      </label>
-    </div>
-  </>
-);
diff --git a/components/cookies/manage/details.tsx b/components/cookies/manage/details.tsx
deleted file mode 100644
index 563f550..0000000
--- a/components/cookies/manage/details.tsx
+++ /dev/null
@@ -1,132 +0,0 @@
-import type { Control, FieldErrors, UseFormRegister } from "react-hook-form";
-import { Controller } from "react-hook-form";
-
-import { DetailsCheckBox } from "@/components/cookies/manage/detailsCheckbox";
-import { TabsContent } from "@/components/ui/tabs";
-
-type CookieInputs = {
-  necessary: boolean;
-  preferences: boolean;
-  analytics: boolean;
-  advertising: boolean;
-};
-
-export default function DetailsTab({
-  control,
-  register,
-  errors,
-  isSubmitting,
-}: {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  control: Control<CookieInputs, any>;
-  register: UseFormRegister<CookieInputs>;
-  errors: FieldErrors<CookieInputs>;
-  isSubmitting: boolean;
-}) {
-  return (
-    <>
-      <TabsContent value="Details" id="detailsTab">
-        <div className="mb-12 flex w-full flex-col gap-6 px-6">
-          <Controller
-            name="necessary"
-            control={control}
-            disabled={true}
-            defaultValue={true}
-            render={({ field: { onChange, onBlur, value, ref, name, disabled } }) => (
-              <DetailsCheckBox
-                onChange={onChange}
-                onBlur={onBlur}
-                checked={value}
-                ref={ref}
-                name={name}
-                register={register}
-                required
-                label={name}
-                error={errors.necessary}
-                disabled={disabled}
-                amount={1}
-              >
-                Necessary cookies help the website function. This includes navigation, and access to
-                secure areas of the site. This website will not function without these cookies.
-              </DetailsCheckBox>
-            )}
-          />
-          <Controller
-            name="preferences"
-            control={control}
-            disabled={isSubmitting}
-            defaultValue={true}
-            render={({ field: { onChange, onBlur, value, ref, name, disabled } }) => (
-              <DetailsCheckBox
-                onChange={onChange}
-                onBlur={onBlur}
-                checked={value}
-                ref={ref}
-                name={name}
-                register={register}
-                required
-                label={name}
-                error={errors.necessary}
-                disabled={disabled}
-                amount={0}
-              >
-                Preference cookies are for remembering information that changes the way that the
-                website works or its appearance. This is primarily for preferences such as language,
-                theme, and more.
-              </DetailsCheckBox>
-            )}
-          />
-          <Controller
-            name="analytics"
-            control={control}
-            disabled={isSubmitting}
-            defaultValue={true}
-            render={({ field: { onChange, onBlur, value, ref, name, disabled } }) => (
-              <DetailsCheckBox
-                onChange={onChange}
-                onBlur={onBlur}
-                checked={value}
-                ref={ref}
-                name={name}
-                register={register}
-                required
-                label={name}
-                error={errors.necessary}
-                disabled={disabled}
-                amount={0}
-              >
-                Analytics cookies help the owners of this website to understand what the visitors
-                are interacting with on the website. It also collects information about the behavior
-                of the users while preserving their anonimity.
-              </DetailsCheckBox>
-            )}
-          />
-          <Controller
-            name="advertising"
-            control={control}
-            disabled={isSubmitting}
-            defaultValue={true}
-            render={({ field: { onChange, onBlur, value, ref, name, disabled } }) => (
-              <DetailsCheckBox
-                onChange={onChange}
-                onBlur={onBlur}
-                checked={value}
-                ref={ref}
-                name={name}
-                register={register}
-                required
-                label={name}
-                error={errors.necessary}
-                disabled={disabled}
-                amount={0}
-              >
-                Marketing cookies track the user&apos;s activity across the website. This helps the
-                owners of the website to recommend better content to the user.
-              </DetailsCheckBox>
-            )}
-          />
-        </div>
-      </TabsContent>
-    </>
-  );
-}
diff --git a/components/cookies/manage/detailsCheckbox.tsx b/components/cookies/manage/detailsCheckbox.tsx
deleted file mode 100644
index de9e6c3..0000000
--- a/components/cookies/manage/detailsCheckbox.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-import type { InputHTMLAttributes, RefAttributes } from "react";
-import type { Path, UseFormRegister, FieldError } from "react-hook-form";
-
-import type { CookieInputs } from "@/components/cookies/manage/tabNav";
-import { cn } from "@/lib/utils";
-
-type DetailsCheckboxProps = {
-  label: Path<CookieInputs>;
-  register: UseFormRegister<CookieInputs>;
-  required: boolean;
-  disabled?: boolean | undefined;
-  error?: FieldError | undefined;
-  checked?: boolean;
-  classes?: string;
-  name: string;
-  children: React.ReactNode;
-  amount: number;
-};
-
-export const DetailsCheckBox = ({
-  label,
-  register,
-  required,
-  disabled,
-  error,
-  checked,
-  classes,
-  name,
-  children,
-  amount,
-  ...props
-}: DetailsCheckboxProps &
-  InputHTMLAttributes<HTMLInputElement> &
-  RefAttributes<HTMLInputElement>) => (
-  <>
-    <div
-      className={cn(
-        "rounded-lg border-2 px-3 pb-6 pt-3 transition-all",
-        disabled ? "opacity-80" : "",
-        checked ? "border-[transparent] bg-primary text-primary-foreground" : "border-border",
-        classes
-      )}
-    >
-      <label
-        className={cn(
-          "mb-6 flex w-full items-center gap-6 text-[1.125rem]",
-          disabled ? "cursor-not-allowed" : "cursor-pointer"
-        )}
-      >
-        <div className="flex w-[12rem] items-center">
-          <input
-            {...props}
-            type="checkbox"
-            id={name}
-            aria-invalid={!!error}
-            aria-errormessage={`${name}-error`}
-            className="peer/villkor h-0 w-0 opacity-0"
-            checked={checked}
-            disabled={disabled}
-            {...register(label, { required })}
-          />
-
-          <span
-            className={cn(
-              "relative inline-block h-8 w-8 rounded-lg border-4 border-primary transition-all",
-              error ? "border-error" : "",
-              disabled ? "cursor-not-allowed" : ""
-            )}
-          ></span>
-          <p className={cn("ml-6 w-fit", checked ? "text-foreground" : "")}>{label}</p>
-        </div>
-        <span className="h-6 w-[0.125rem] shrink-0 bg-primary-foreground"></span>
-        <div
-          className={cn(
-            "item-center flex h-6 justify-center rounded-full px-3  font-bold",
-            amount > 0 && checked
-              ? "bg-background text-foreground"
-              : amount > 0
-                ? "bg-primary text-primary-foreground"
-                : "bg-muted text-muted-foreground"
-          )}
-        >
-          <span className="">{amount}</span>
-        </div>
-      </label>
-      {children}
-    </div>
-  </>
-);
diff --git a/components/cookies/manage/formContent.tsx b/components/cookies/manage/formContent.tsx
deleted file mode 100644
index 6d2bcbb..0000000
--- a/components/cookies/manage/formContent.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import type { Control, FieldErrors, UseFormRegister, UseFormSetValue } from "react-hook-form";
-
-import Logo from "@/components/logo";
-import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
-
-import AboutTab from "./about";
-import { AcceptAll, AcceptSelection, DenyAll } from "./buttons";
-import ConsentTab from "./consent";
-import DetailsTab from "./details";
-
-type CookieInputs = {
-  necessary: boolean;
-  preferences: boolean;
-  analytics: boolean;
-  advertising: boolean;
-};
-
-export default function FormContent({
-  control,
-  register,
-  errors,
-  isSubmitting,
-  setValue,
-}: {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  control: Control<CookieInputs, any>;
-  register: UseFormRegister<CookieInputs>;
-  errors: FieldErrors<CookieInputs>;
-  isSubmitting: boolean;
-  setValue: UseFormSetValue<CookieInputs>;
-}) {
-  return (
-    <>
-      <Logo className="mb-6" />
-      <Tabs
-        defaultValue="Consent"
-        className="flex h-auto w-full flex-col overflow-auto bg-[transparent] py-6 align-baseline"
-      >
-        <TabsList className="mx-auto mb-6">
-          <TabsTrigger value="Consent">Consent</TabsTrigger>
-          <TabsTrigger value="Details">Details</TabsTrigger>
-          <TabsTrigger value="About">About</TabsTrigger>
-        </TabsList>
-        <ConsentTab
-          control={control}
-          errors={errors}
-          isSubmitting={isSubmitting}
-          register={register}
-        />
-        <DetailsTab
-          control={control}
-          errors={errors}
-          isSubmitting={isSubmitting}
-          register={register}
-        />
-        <AboutTab />
-      </Tabs>
-      <div className="relative flex w-full flex-shrink-0 flex-col-reverse gap-6  p-6 md:flex-row md:flex-nowrap">
-        <div className="absolute -top-[4.125rem] left-0 h-16 w-full bg-gradient-to-b from-[transparent] to-background to-50%"></div>
-        <DenyAll setValue={setValue} />
-        <AcceptSelection />
-        <AcceptAll setValue={setValue} />
-      </div>
-    </>
-  );
-}
diff --git a/components/cookies/manage/index.tsx b/components/cookies/manage/index.tsx
index 47205f6..68f1611 100644
--- a/components/cookies/manage/index.tsx
+++ b/components/cookies/manage/index.tsx
@@ -1,17 +1,19 @@
 "use client";
 import TabNav from "@/components/cookies/manage/tabNav";
 import { useCookieContext } from "@/context/cookie";
+import { useCookieFormContext } from "@/context/cookie/form";
 import { cn } from "@/lib/utils";
 
-export default function ManageConsent() {
-  const cookieStore = useCookieContext();
+export default function ManageWrapper() {
+  const cookie = useCookieContext();
+  const { handleSubmit, onSubmit } = useCookieFormContext();
   return (
     <>
       <div
         className={cn(
           "cover bottom-[-100%] left-[-100%] right-[-100%] top-[-100%] m-auto h-[100vh] w-full bg-opacity-50 !bg-no-repeat object-cover backdrop-blur backdrop-brightness-50",
           "fixed z-40 overflow-hidden bg-black bg-opacity-50",
-          cookieStore.isManageConsentMenuOpen ? "block" : "hidden"
+          cookie.isManageConsentMenuOpen ? "block" : "hidden"
         )}
         id="#ManageConsentMenuDialog"
       >
@@ -22,7 +24,7 @@ export default function ManageConsent() {
             "h-auto max-h-[calc(100%-16px)] w-[calc(100%-16px)] max-w-[80rem] rounded-2xl bg-background pt-6 shadow transition-all"
           )}
         >
-          <TabNav />
+          <TabNav handleSubmit={handleSubmit} onSubmit={onSubmit} />
         </div>
       </div>
     </>
diff --git a/components/cookies/manage/tabNav.tsx b/components/cookies/manage/tabNav.tsx
index ccc3e64..1f5fa68 100644
--- a/components/cookies/manage/tabNav.tsx
+++ b/components/cookies/manage/tabNav.tsx
@@ -1,38 +1,19 @@
-"use client";
-import type { SubmitHandler } from "react-hook-form";
-import { useForm } from "react-hook-form";
+import type { SubmitHandler, UseFormHandleSubmit } from "react-hook-form";
 
-import FormContent from "@/components/cookies/manage/formContent";
-import { useCookieContext } from "@/context/cookie";
-import { setCookie } from "@/lib/cookie/utils";
+import Logo from "@/components/logo";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import type { CookieInputs } from "@/types/cookie";
 
-export type CookieInputs = {
-  necessary: boolean;
-  preferences: boolean;
-  analytics: boolean;
-  advertising: boolean;
-};
+import { AcceptAll, AcceptSelection, DenyAll } from "./buttons";
+import { ConsentTabController, DetailsTabController } from "./controllers";
 
-export default function TabNav() {
-  const cookieStore = useCookieContext();
-  const {
-    register,
-    handleSubmit,
-    control,
-    setValue,
-    formState: { errors, isSubmitting },
-  } = useForm<CookieInputs>({
-    defaultValues: {
-      necessary: true,
-      preferences: cookieStore.preferences,
-      advertising: cookieStore.advertising,
-      analytics: cookieStore.analytics,
-    },
-  });
-  const onSubmit: SubmitHandler<CookieInputs> = (data) => {
-    setCookie(`1:${data.preferences ? 1 : 0}${data.analytics ? 1 : 0}${data.advertising ? 1 : 0}`);
-    cookieStore.toggleSelectCookies(data.preferences, data.analytics, data.advertising, true);
-  };
+export default function TabNav({
+  handleSubmit,
+  onSubmit,
+}: {
+  handleSubmit: UseFormHandleSubmit<CookieInputs, undefined>;
+  onSubmit: SubmitHandler<CookieInputs>;
+}) {
   return (
     <>
       <form
@@ -40,13 +21,81 @@ export default function TabNav() {
         onSubmit={handleSubmit(onSubmit)}
         id="cookieForm"
       >
-        <FormContent
-          control={control}
-          errors={errors}
-          isSubmitting={isSubmitting}
-          register={register}
-          setValue={setValue}
-        />
+        <Logo className="mb-6" />
+        <Tabs
+          defaultValue="Consent"
+          className="flex h-auto w-full flex-col overflow-auto bg-[transparent] py-6 align-baseline"
+        >
+          <TabsList className="mx-auto mb-6">
+            <TabsTrigger value="Consent">Consent</TabsTrigger>
+            <TabsTrigger value="Details">Details</TabsTrigger>
+            <TabsTrigger value="About">About</TabsTrigger>
+          </TabsList>
+          <TabsContent value="Consent" id="consentTab">
+            <div className="">
+              <h3 className="mb-6 px-6 font-bold">This website uses cookies</h3>
+              <p className="mb-10 px-6 leading-[1.4]">
+                We use cookies to personalize content and marketing, deliver functionality through
+                social media, och for analyzing traffic. We share, with your consent, information to
+                our partners in social media, marketing, and analytics. They can then use this data
+                in combination with other data that you hae either shared or that they have
+                collected through your usage of their services.
+              </p>
+              <div className="mb-12 grid w-full grid-cols-1 m:grid-cols-2 md:grid-cols-4">
+                <ConsentTabController name="necessary" />
+                <ConsentTabController name="preferences" />
+                <ConsentTabController name="analytics" />
+                <ConsentTabController name="advertising" />
+              </div>
+            </div>
+          </TabsContent>
+          <TabsContent value="Details" id="detailsTab">
+            <div className="mb-12 flex w-full flex-col gap-6 px-6">
+              <DetailsTabController name="necessary" amount={1}>
+                Necessary cookies help the website function. This includes navigation, and access to
+                secure areas of the site. This website will not function without these cookies.
+              </DetailsTabController>
+              <DetailsTabController name="preferences" amount={0}>
+                Preference cookies are for remembering information that changes the way that the
+                website works or its appearance. This is primarily for preferences such as language,
+                theme, and more.
+              </DetailsTabController>
+              <DetailsTabController name="analytics" amount={0}>
+                Analytics cookies help the owners of this website to understand what the visitors
+                are interacting with on the website. It also collects information about the behavior
+                of the users while preserving their anonimity.
+              </DetailsTabController>
+              <DetailsTabController name="advertising" amount={0}>
+                Marketing cookies track the user&apos;s activity across the website. This helps the
+                owners of the website to recommend better content to the user.
+              </DetailsTabController>
+            </div>
+          </TabsContent>
+          <TabsContent value="About" id="aboutTab">
+            <h3 className="mb-6 px-6 font-bold">What are cookies?</h3>
+            <p className="mb-12 px-6 leading-[1.4]">
+              Cookies are small text files that are used by websites to improve the user experience.
+              <br /> <br />
+              Laws and guidelines such as GDPR allow us to store cookies on this device if they are
+              strictly necessary for the website to function. For all other cookies we will need
+              your explicit consent.
+              <br /> <br />
+              This website uses only necessary cookies for now. However, we may later store more
+              cookies that help us improve the experience for our users.
+              <br /> <br />
+              You can at any time withdraw your consent to all non-necessary cookies.
+              <br /> <br />
+              Learn more about us, how you can contact us, and how we handle your personal data in
+              our Privacy Policy.
+            </p>
+          </TabsContent>
+        </Tabs>
+        <div className="relative flex w-full flex-shrink-0 flex-col-reverse gap-6  p-6 md:flex-row md:flex-nowrap">
+          <div className="absolute -top-[4.125rem] left-0 h-16 w-full bg-gradient-to-b from-[transparent] to-background to-50%"></div>
+          <DenyAll />
+          <AcceptSelection />
+          <AcceptAll />
+        </div>
       </form>
     </>
   );
diff --git a/components/cookies/toast.tsx b/components/cookies/toast.tsx
index 28a8331..132d6ba 100644
--- a/components/cookies/toast.tsx
+++ b/components/cookies/toast.tsx
@@ -1,23 +1,34 @@
 "use client";
+import { useEffect, useState } from "react";
+
 import { Button } from "@/components/ui/button";
 import { useCookieContext } from "@/context/cookie";
+import { env } from "@/env/client";
 import { setCookie } from "@/lib/cookie/utils";
 import { cn } from "@/lib/utils";
 
 export default function CookieToast() {
   const cookie = useCookieContext();
+  const [initialVisible, setInitialVisible] = useState(false);
+  useEffect(() => {
+    setTimeout(() => {
+      setInitialVisible(true);
+    }, 500);
+  });
   return (
     <>
       <div
         className={cn(
-          "shadow-Dark fixed bottom-0 right-0 z-[5] mb-6 flex w-full flex-col gap-3 rounded-l-lg rounded-r-none bg-background px-6 py-3 transition-all md:w-fit",
-          !cookie.consent ? "pointer-events-auto opacity-100" : "pointer-events-none opacity-0"
+          "fixed bottom-0 right-0 z-[5] mb-6 flex w-full flex-col gap-3 rounded-l-lg rounded-r-none bg-background px-6 py-3 shadow transition-all md:w-fit",
+          !cookie.consent && initialVisible
+            ? "pointer-events-auto opacity-100"
+            : "pointer-events-none opacity-0"
         )}
         aria-hidden={cookie.consent}
       >
         <p className="max-w-[60ch] leading-[1.3]">
-          Sebastian Wing uses cookies to improve the website and your user experience, read more in
-          the{" "}
+          {env.NEXT_PUBLIC_SITE_NAME} uses cookies to improve the website and your user experience,
+          read more in the{" "}
           <a
             href="/privacy"
             className="font-bold text-primary transition-all hover:text-foreground"
diff --git a/components/footer/btnCookie.tsx b/components/footer/btnCookie.tsx
new file mode 100644
index 0000000..3529fb1
--- /dev/null
+++ b/components/footer/btnCookie.tsx
@@ -0,0 +1,23 @@
+"use client";
+import { memo } from "react";
+
+import { Button } from "@/components/ui/button";
+import { useCookieContext } from "@/context/cookie";
+
+function ButtonCookie() {
+  const { toggleChangeConsentMenu } = useCookieContext();
+  return (
+    <>
+      <Button
+        asChild
+        variant="link"
+        onClick={() => toggleChangeConsentMenu()}
+        className="h-fit p-0 text-foreground"
+      >
+        <span>Privacy Settings</span>
+      </Button>
+    </>
+  );
+}
+
+export default memo(ButtonCookie);
diff --git a/components/footer/index.tsx b/components/footer/index.tsx
index b45dd6f..aaaa318 100644
--- a/components/footer/index.tsx
+++ b/components/footer/index.tsx
@@ -1,6 +1,8 @@
 import ThemeToggle from "@/components/themeToggle";
 import { env } from "@/env/client";
 
+import ButtonCookie from "./btnCookie";
+
 export default function Footer() {
   const year = new Date().getFullYear();
   return (
@@ -22,7 +24,7 @@ export default function Footer() {
                 <a href="#">Customer Support</a>
               </li>
               <li className="me-4 last:mr-0 md:mr-6">
-                <a href="#">Privacy Settings</a>
+                <ButtonCookie />
               </li>
               <li className="me-4 last:mr-0 md:mr-6">
                 <a href="#">Terms</a>
diff --git a/components/header/index.tsx b/components/header/index.tsx
index 2547522..a801339 100644
--- a/components/header/index.tsx
+++ b/components/header/index.tsx
@@ -1,3 +1,5 @@
+import SidebarContextProvider from "@/context/sidebar";
+
 import Logo from "./logo";
 import Nav from "./menu";
 import Sidebar from "./sidebar";
@@ -8,13 +10,15 @@ export default function Header() {
   return (
     <>
       <JumpToContent />
-      <HeaderWrapper>
-        <div className="flex items-center gap-12">
-          <Logo />
-          <Nav />
-        </div>
-        <Sidebar />
-      </HeaderWrapper>
+      <SidebarContextProvider>
+        <HeaderWrapper>
+          <div className="flex items-center gap-12">
+            <Logo />
+            <Nav />
+          </div>
+          <Sidebar />
+        </HeaderWrapper>
+      </SidebarContextProvider>
     </>
   );
 }
diff --git a/context/cookie.tsx b/context/cookie.tsx
deleted file mode 100644
index 0b45134..0000000
--- a/context/cookie.tsx
+++ /dev/null
@@ -1,136 +0,0 @@
-"use client";
-
-import { useEffect, useState, createContext, useContext } from "react";
-
-import { getCookieConsentValue } from "@/lib/cookie/utils";
-export type CookieStore = {
-  preferences: boolean;
-  analytics: boolean;
-  advertising: boolean;
-  consent: boolean;
-  isChangeConsentMenuOpen: boolean;
-  isManageConsentMenuOpen: boolean;
-  toggleChangeConsentMenu: () => void;
-  toggleManageConsentMenu: () => void;
-  toggleSelectCookies: (
-    preferences: boolean,
-    analytics: boolean,
-    advertising: boolean,
-    consent: boolean
-  ) => void;
-  acceptAllCookies: () => void;
-  denyAllCookies: () => void;
-};
-
-export const CookieContext = createContext<CookieStore | undefined>(undefined);
-
-// type ConsentValue = {
-//   hasConsentValue: boolean;
-//   setHasConsentValue: Dispatch<SetStateAction<boolean>>;
-// };
-
-// export const CookieContext = createContext<ConsentValue | undefined>(undefined);
-export function useCookieContext() {
-  const cookieStore = useContext(CookieContext);
-
-  if (cookieStore === undefined) {
-    throw new Error("useCookieContext must be used with a CookieContext provider");
-  }
-
-  return cookieStore;
-}
-
-export default function CookieContextProvider({ children }: { children: React.ReactNode }) {
-  const [cookieSettings, setCookieSettings] = useState({
-    preferences: false,
-    analytics: false,
-    advertising: false,
-    consent: false,
-    isChangeConsentMenuOpen: false,
-    isManageConsentMenuOpen: false,
-  });
-  // const [isChangeConsentMenuOpen, setConsentMenuState] = useState(false);
-  // const [isManageConsentMenuOpen, setManageConsentMenuState] = useState(false);
-  // const [cPreferences, setPreferences] = useState(false);
-  // const [cAnalytics, setAnalytics] = useState(false);
-  // const [cAdvertising, setAdvertising] = useState(false);
-  // const [cConsent, setConsent] = useState(false);
-  function toggleChangeConsentMenu() {
-    setCookieSettings((prev) => ({
-      ...prev,
-      isChangeConsentMenuOpen: !prev.isChangeConsentMenuOpen,
-    }));
-  }
-  // const toggleChangeConsentMenu = () => {
-  //   setConsentMenuState(!isChangeConsentMenuOpen);
-  // };
-  function toggleManageConsentMenu() {
-    setCookieSettings((prev) => ({
-      ...prev,
-      isManageConsentMenuOpen: !prev.isManageConsentMenuOpen,
-    }));
-  }
-  // const toggleManageConsentMenu = () => {
-  //   setManageConsentMenuState(!isManageConsentMenuOpen);
-  // };
-  function toggleSelectCookies(
-    preferences: boolean,
-    analytics: boolean,
-    advertising: boolean,
-    consent: boolean
-  ) {
-    setCookieSettings({
-      ...cookieSettings,
-      preferences,
-      analytics,
-      advertising,
-      consent,
-    });
-  }
-  // const toggleSelectCookies = (
-  //   preferences: boolean,
-  //   analytics: boolean,
-  //   advertising: boolean,
-  //   consent: boolean
-  // ) => {
-  //   setPreferences(preferences);
-  //   setAnalytics(analytics);
-  //   setAdvertising(advertising);
-  //   setConsent(consent);
-  // };
-  const acceptAllCookies = () => {
-    toggleSelectCookies(true, true, true, true);
-  };
-  const denyAllCookies = () => {
-    toggleSelectCookies(false, false, false, false);
-  };
-  useEffect(() => {
-    setCookieSettings((prev) => ({
-      ...prev,
-      consent: !!getCookieConsentValue(),
-    }));
-  }, []);
-  return (
-    <>
-      <CookieContext.Provider
-        value={{
-          ...cookieSettings,
-          toggleChangeConsentMenu: toggleChangeConsentMenu,
-          toggleManageConsentMenu: toggleManageConsentMenu,
-          toggleSelectCookies: toggleSelectCookies,
-          acceptAllCookies: acceptAllCookies,
-          denyAllCookies: denyAllCookies,
-        }}
-      >
-        {children}
-      </CookieContext.Provider>
-    </>
-  );
-}
-/**
- *   const [hasConsentValue, setHasConsentValue] = useState(false);
-
-  useEffect(() => {
-    setHasConsentValue(!!getCookieConsentValue());
-  }, []);
- */
diff --git a/context/cookie/form.tsx b/context/cookie/form.tsx
new file mode 100644
index 0000000..3c5de8a
--- /dev/null
+++ b/context/cookie/form.tsx
@@ -0,0 +1,95 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+"use client";
+
+import { createContext, useContext, useEffect } from "react";
+import type {
+  Control,
+  FormState,
+  SubmitHandler,
+  UseFormClearErrors,
+  UseFormGetFieldState,
+  UseFormGetValues,
+  UseFormHandleSubmit,
+  UseFormRegister,
+  UseFormReset,
+  UseFormResetField,
+  UseFormSetError,
+  UseFormSetFocus,
+  UseFormSetValue,
+  UseFormTrigger,
+  UseFormUnregister,
+  UseFormWatch,
+} from "react-hook-form";
+import { useForm, useWatch } from "react-hook-form";
+
+import { setCookie } from "@/lib/cookie/utils";
+import type { CookieInputs } from "@/types/cookie";
+
+import { useCookieContext } from ".";
+export type CookieFormStore = {
+  clearErrors: UseFormClearErrors<CookieInputs>;
+  control: Control<CookieInputs, any>;
+  formState: FormState<CookieInputs>;
+  getFieldState: UseFormGetFieldState<CookieInputs>;
+  handleSubmit: UseFormHandleSubmit<CookieInputs, undefined>;
+  getValues: UseFormGetValues<CookieInputs>;
+  register: UseFormRegister<CookieInputs>;
+  reset: UseFormReset<CookieInputs>;
+  resetField: UseFormResetField<CookieInputs>;
+  setError: UseFormSetError<CookieInputs>;
+  setFocus: UseFormSetFocus<CookieInputs>;
+  setValue: UseFormSetValue<CookieInputs>;
+  trigger: UseFormTrigger<CookieInputs>;
+  unregister: UseFormUnregister<CookieInputs>;
+  watch: UseFormWatch<CookieInputs>;
+  onSubmit: SubmitHandler<CookieInputs>;
+};
+
+export const CookieFormContext = createContext<CookieFormStore | undefined>(undefined);
+
+export function useCookieFormContext() {
+  const form = useContext(CookieFormContext);
+
+  if (form === undefined) {
+    throw new Error("useCookieFormContext must be used with a CookieContext provider");
+  }
+
+  return form;
+}
+
+export const useFormValues = () => {
+  const { getValues } = useCookieFormContext();
+  return {
+    ...useWatch(), // subscribe to form value updates
+
+    ...getValues(), // always merge with latest form values
+  };
+};
+
+export default function CookieFormContextProvider({ children }: { children: React.ReactNode }) {
+  const cookieStore = useCookieContext();
+  const form = useForm<CookieInputs>({
+    defaultValues: {
+      necessary: true,
+      preferences: cookieStore.preferences,
+      advertising: cookieStore.advertising,
+      analytics: cookieStore.analytics,
+    },
+  });
+  const onSubmit: SubmitHandler<CookieInputs> = (data) => {
+    setCookie(`1:${data.preferences ? 1 : 0}${data.analytics ? 1 : 0}${data.advertising ? 1 : 0}`);
+    cookieStore.toggleSelectCookies(data.preferences, data.analytics, data.advertising, true);
+  };
+  useEffect(() => {
+    form.setValue("preferences", cookieStore.preferences);
+    form.setValue("analytics", cookieStore.analytics);
+    form.setValue("advertising", cookieStore.advertising);
+  }, [cookieStore.preferences, cookieStore.advertising, cookieStore.analytics]);
+  return (
+    <>
+      <CookieFormContext.Provider value={{ ...form, onSubmit }}>
+        {children}
+      </CookieFormContext.Provider>
+    </>
+  );
+}
diff --git a/context/cookie/index.tsx b/context/cookie/index.tsx
new file mode 100644
index 0000000..46cac10
--- /dev/null
+++ b/context/cookie/index.tsx
@@ -0,0 +1,162 @@
+"use client";
+
+import { useEffect, useState, createContext, useContext, useCallback } from "react";
+
+import { getCookieConsentValue } from "@/lib/cookie/utils";
+export type CookieStore = {
+  preferences: boolean;
+  analytics: boolean;
+  advertising: boolean;
+  consent: boolean;
+  isChangeConsentMenuOpen: boolean;
+  isManageConsentMenuOpen: boolean;
+  toggleChangeConsentMenu: () => void;
+  toggleManageConsentMenu: () => void;
+  toggleSelectCookies: (
+    preferences: boolean,
+    analytics: boolean,
+    advertising: boolean,
+    consent: boolean
+  ) => void;
+  acceptAllCookies: () => void;
+  denyAllCookies: () => void;
+};
+
+// type State = {
+//   preferences: boolean;
+//   analytics: boolean;
+//   advertising: boolean;
+//   consent: boolean;
+//   isChangeConsentMenuOpen: boolean;
+//   isManageConsentMenuOpen: boolean;
+// };
+
+// type Action =
+//   | { type: "TOGGLE_MENU"; menu: "isChangeConsentMenuOpen" | "isManageConsentMenuOpen" }
+//   | { type: "SET_COOKIES"; payload: Partial<State> }
+//   | { type: "ACCEPT_ALL" }
+//   | { type: "DENY_ALL" };
+
+// const cookieReducer = (state: State, action: Action) => {
+//   switch (action.type) {
+//     case "TOGGLE_MENU":
+//       return { ...state, [action.menu]: !state[action.menu] };
+//     case "SET_COOKIES":
+//       return { ...state, ...action.payload };
+//     case "ACCEPT_ALL":
+//       return { ...state, preferences: true, analytics: true, advertising: true, consent: true };
+//     case "DENY_ALL":
+//       return { ...state, preferences: false, analytics: false, advertising: false, consent: false };
+//     default:
+//       return state;
+//   }
+// };
+
+// function init() {
+//   const initValues = getCookieConsentValue();
+//   return {
+//     preferences: initValues.preferences,
+//     analytics: initValues.analytics,
+//     advertising: initValues.advertising,
+//     consent: initValues.consent,
+//     isChangeConsentMenuOpen: false,
+//     isManageConsentMenuOpen: false,
+//   };
+// }
+
+export const CookieContext = createContext<CookieStore | undefined>(undefined);
+
+export function useCookieContext() {
+  const cookieStore = useContext(CookieContext);
+
+  if (cookieStore === undefined) {
+    throw new Error("useCookieContext must be used with a CookieContext provider");
+  }
+
+  return cookieStore;
+}
+
+export default function CookieContextProvider({ children }: { children: React.ReactNode }) {
+  const [cookieSettings, setCookieSettings] = useState({
+    preferences: false,
+    analytics: false,
+    advertising: false,
+    consent: false,
+    isChangeConsentMenuOpen: false,
+    isManageConsentMenuOpen: false,
+  });
+  const toggleChangeConsentMenu = useCallback(() => {
+    setCookieSettings((prev) => ({
+      ...prev,
+      isChangeConsentMenuOpen: !prev.isChangeConsentMenuOpen,
+    }));
+  }, []);
+  const toggleManageConsentMenu = useCallback(() => {
+    setCookieSettings((prev) => ({
+      ...prev,
+      isManageConsentMenuOpen: !prev.isManageConsentMenuOpen,
+    }));
+  }, []);
+  const toggleSelectCookies = (
+    preferences: boolean,
+    analytics: boolean,
+    advertising: boolean,
+    consent: boolean
+  ) => {
+    setCookieSettings({
+      ...cookieSettings,
+      preferences,
+      analytics,
+      advertising,
+      consent,
+    });
+  };
+  const acceptAllCookies = useCallback(() => {
+    toggleSelectCookies(true, true, true, true);
+  }, []);
+  const denyAllCookies = useCallback(() => {
+    toggleSelectCookies(false, false, false, true);
+  }, []);
+  useEffect(() => {
+    const { preferences, advertising, analytics, consent } = getCookieConsentValue();
+    setCookieSettings((prev) => ({
+      ...prev,
+      preferences: preferences,
+      advertising: advertising,
+      analytics: analytics,
+      consent: consent,
+    }));
+  }, []);
+  // const funcValue = useMemo(
+  //   () => ({
+  //     toggleChangeConsentMenu,
+  //     toggleManageConsentMenu,
+  //     toggleSelectCookies,
+  //     acceptAllCookies,
+  //     denyAllCookies,
+  //   }),
+  //   [
+  //     toggleChangeConsentMenu,
+  //     toggleManageConsentMenu,
+  //     toggleSelectCookies,
+  //     acceptAllCookies,
+  //     denyAllCookies,
+  //   ]
+  // );
+  return (
+    <>
+      <CookieContext.Provider
+        value={{
+          ...cookieSettings,
+          toggleChangeConsentMenu,
+          toggleManageConsentMenu,
+          toggleSelectCookies,
+          acceptAllCookies,
+          denyAllCookies,
+        }}
+      >
+        {children}
+      </CookieContext.Provider>
+    </>
+  );
+}
diff --git a/context/index.tsx b/context/index.tsx
index 9ebb539..510f20d 100644
--- a/context/index.tsx
+++ b/context/index.tsx
@@ -1,15 +1,9 @@
-import CookieContextProvider from "./cookie";
-import SidebarContextProvider from "./sidebar";
 import ThemeContextProvider from "./theme";
 
 export default function Providers({ children }: { children: React.ReactNode }) {
   return (
     <>
-      <ThemeContextProvider>
-        <SidebarContextProvider>
-          <CookieContextProvider>{children}</CookieContextProvider>
-        </SidebarContextProvider>
-      </ThemeContextProvider>
+      <ThemeContextProvider>{children}</ThemeContextProvider>
     </>
   );
 }
diff --git a/lib/cookie/utils.ts b/lib/cookie/utils.ts
index c3d2273..ea468c9 100644
--- a/lib/cookie/utils.ts
+++ b/lib/cookie/utils.ts
@@ -8,16 +8,30 @@ import { defaultCookieConsentName, defaultCookieExpires, SAME_SITE_OPTIONS } fro
  * to: https://web.dev/samesite-cookie-recipes/#handling-incompatible-clients
  * @param {*} name optional name of the cookie
  */
-export const getCookieConsentValue = (name = defaultCookieConsentName) => {
+export const getCookieConsentValue = (
+  name = defaultCookieConsentName
+): { preferences: boolean; analytics: boolean; advertising: boolean; consent: boolean } => {
   let cookieValue = Cookies.get(name);
 
   // if the cookieValue is undefined check for the legacy cookie
   if (cookieValue === undefined) {
     cookieValue = Cookies.get(getLegacyCookieName(name));
   }
-  if (cookieValue === undefined) return [false, false, false];
+  if (cookieValue === undefined) {
+    return {
+      preferences: false,
+      analytics: false,
+      advertising: false,
+      consent: false,
+    };
+  }
   const values = cookieValue.split(":")[1];
-  const booleans = Array.from(values).map((v) => v === "1");
+  const booleans = {
+    preferences: values[0] === "1",
+    analytics: values[1] === "1",
+    advertising: values[2] === "1",
+    consent: true,
+  };
   return booleans;
 };
 
diff --git a/types/cookie.ts b/types/cookie.ts
new file mode 100644
index 0000000..c2a7543
--- /dev/null
+++ b/types/cookie.ts
@@ -0,0 +1,6 @@
+export type CookieInputs = {
+  necessary: boolean;
+  preferences: boolean;
+  analytics: boolean;
+  advertising: boolean;
+};