diff --git a/package.json b/package.json
index e3c9fd64..fd63ce3e 100644
--- a/package.json
+++ b/package.json
@@ -68,7 +68,8 @@
     "react-textarea-autosize": "8.3.3",
     "sitemap": "7.0.0",
     "tslib": "2.3.1",
-    "use-cookie-consent": "^0.1.12"
+    "use-cookie-consent": "^0.1.12",
+    "zustand": "3.5.10"
   },
   "devDependencies": {
     "@babel/core": "^7.15.0",
diff --git a/src/atoms/route-loader/index.tsx b/src/atoms/route-loader/index.tsx
index 3d1e9049..9f90a636 100644
--- a/src/atoms/route-loader/index.tsx
+++ b/src/atoms/route-loader/index.tsx
@@ -1,7 +1,11 @@
-import React from "react";
+import { useRouteLoader } from "@/ions/hooks/route-loader";
+import React, { memo } from "react";
 import { StyledLoader } from "./styled";
-import { RouteLoaderProps } from "./types";
 
-const RouteLoader = (props: RouteLoaderProps) => <StyledLoader {...props} />;
+const RouteLoader = () => {
+	const { loaded, loading } = useRouteLoader();
 
-export default RouteLoader;
+	return <StyledLoader isLoading={loading} isLoaded={loaded} />;
+};
+
+export default memo(RouteLoader);
diff --git a/src/atoms/route-loader/types.ts b/src/atoms/route-loader/types.ts
index 6c42bf8f..1392100e 100644
--- a/src/atoms/route-loader/types.ts
+++ b/src/atoms/route-loader/types.ts
@@ -2,5 +2,3 @@ export interface StyledLoaderProps {
 	isLoading?: boolean;
 	isLoaded?: boolean;
 }
-
-export interface RouteLoaderProps extends StyledLoaderProps {}
diff --git a/src/atoms/toggle/index.tsx b/src/atoms/toggle/index.tsx
index 236d9ea5..ebc88fd8 100644
--- a/src/atoms/toggle/index.tsx
+++ b/src/atoms/toggle/index.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { memo } from "react";
 import { StyledInput, StyledToggle, StyledToggleWrapper } from "./styled";
 import { ToggleProps } from "./types";
 
@@ -17,4 +17,4 @@ const Toggle = ({ checked, onChange, invalid, disabled, ...props }: ToggleProps)
 	);
 };
 
-export default Toggle;
+export default memo(Toggle);
diff --git a/src/groups/layout/index.tsx b/src/groups/layout/index.tsx
index f6cc2993..028f922b 100644
--- a/src/groups/layout/index.tsx
+++ b/src/groups/layout/index.tsx
@@ -1,6 +1,8 @@
+import RouteLoader from "@/atoms/route-loader";
 import { GlobalTypography } from "@/atoms/typography/global";
 import { BreadcrumbsProvider } from "@/ions/contexts/breadcrumbs/context";
-import { useCookieConsentModal } from "@/ions/contexts/cookie-consent-modal";
+import { useCookieConsentContext } from "@/ions/contexts/cookie-consent";
+import { useCookieConsentModal } from "@/ions/stores/modal/cookie-consent";
 import { globalStyles } from "@/ions/styles";
 import Footer from "@/organisms/footer";
 import Header from "@/organisms/header";
@@ -9,7 +11,7 @@ import { css, Global, useTheme } from "@emotion/react";
 import dynamic from "next/dynamic";
 import Head from "next/head";
 import process from "process";
-import React, { FC, useMemo } from "react";
+import React, { FC, useEffect, useMemo } from "react";
 import { LayoutProps } from "./types";
 
 const OverlayGrid = dynamic(async () => import("@/organisms/grid-overlay"), { ssr: false });
@@ -28,8 +30,17 @@ const Layout: FC<LayoutProps> = ({
 }) => {
 	const theme = useTheme();
 	const breadcrumbs = useMemo(() => rawBreadcrumbs || [], [rawBreadcrumbs]);
-	const { isOpen: isCookieModalOpen } = useCookieConsentModal();
+	const isCookieModalOpen = useCookieConsentModal(state => state.isOpen);
+	const toggleCookieModal = useCookieConsentModal(state => state.toggle);
+	const { consent } = useCookieConsentContext();
 
+	useEffect(() => {
+		if (consent) {
+			toggleCookieModal(Object.keys(consent).length === 0);
+		} else {
+			toggleCookieModal(true);
+		}
+	}, [consent, toggleCookieModal]);
 	return (
 		<>
 			<Global key="globalStyles" styles={globalStyles} />
@@ -67,12 +78,15 @@ const Layout: FC<LayoutProps> = ({
 				{description && <meta itemProp="description" content={description} />}
 				{image && <meta itemProp="image" content={image} />}
 			</Head>
-			{isCookieModalOpen && !process.env.NEXT_PUBLIC_HIDE_COOKIE_CONSENT && <CookieBanner />}
+			{isCookieModalOpen && !process.env.NEXT_PUBLIC_HIDE_COOKIE_CONSENT && (
+				<CookieBanner dark={!dark} />
+			)}
 			<Header dark={dark} />
 			<BreadcrumbsProvider breadcrumbs={breadcrumbs}>
 				<Main className={className}>{children}</Main>
 			</BreadcrumbsProvider>
 			<Footer dark={dark} />
+			<RouteLoader />
 			{process.env.NODE_ENV !== "production" && <OverlayGrid />}
 		</>
 	);
diff --git a/src/groups/signin-modal/index.tsx b/src/groups/signin-modal/index.tsx
index 15f69be3..c8fa383e 100644
--- a/src/groups/signin-modal/index.tsx
+++ b/src/groups/signin-modal/index.tsx
@@ -4,10 +4,9 @@ import { StyledFormText } from "@/atoms/form-text/styled";
 import ButtonIcon from "@/atoms/icon/button-icon";
 import { StyledStripe, StyledStripeWrapper } from "@/atoms/stripe/styled";
 import Typography from "@/atoms/typography";
-import { useProviders } from "@/ions/contexts/providers";
-import { useSigninModal } from "@/ions/contexts/signin-modal";
 import { useLockBodyScroll } from "@/ions/hooks/body-scroll-lock";
 import { useEscapeKey } from "@/ions/hooks/escape-key";
+import { useSigninModal } from "@/ions/stores/modal/signin";
 import { pxToRem } from "@/ions/utils/unit";
 import { StyledFieldset, StyledForm, StyledFormWrapper } from "@/molecules/form/styled";
 import InputField from "@/molecules/input-field";
@@ -23,9 +22,8 @@ import { FormProvider, useForm } from "react-hook-form";
 const ButtonSpinner = dynamic(async () => import("@/atoms/spinner/button-spinner"));
 
 const SigninModal = () => {
-	const { providers } = useProviders();
 	const { t } = useTranslation(["cancel", "form", "wishlist"]);
-	const { close } = useSigninModal();
+	const close = useSigninModal(state => state.close);
 	const methods = useForm<SigninFormProps>();
 	const [loadingGoogle, setLoadingGoogle] = useState(false);
 	const [loadingGithub, setLoadingGithub] = useState(false);
@@ -35,10 +33,10 @@ const SigninModal = () => {
 
 	const handleSubmit = useCallback(
 		async (data: SigninFormProps) => {
-			await signIn(providers.email.id, { email: data.email });
+			await signIn("email", { email: data.email });
 			close();
 		},
-		[providers, close]
+		[close]
 	);
 
 	const { isSubmitting, isSubmitSuccessful } = methods.formState;
@@ -63,7 +61,7 @@ const SigninModal = () => {
 										aria-label="google"
 										onClick={() => {
 											setLoadingGoogle(true);
-											void signIn(providers.google.id);
+											void signIn("google");
 										}}
 									>
 										{loadingGoogle ? (
@@ -79,7 +77,7 @@ const SigninModal = () => {
 										aria-label="github"
 										onClick={() => {
 											setLoadingGithub(true);
-											void signIn(providers.github.id);
+											void signIn("github");
 										}}
 									>
 										{loadingGithub ? (
diff --git a/src/groups/signin/index.tsx b/src/groups/signin/index.tsx
index f94a96d8..7eeefe42 100644
--- a/src/groups/signin/index.tsx
+++ b/src/groups/signin/index.tsx
@@ -4,7 +4,6 @@ import { StyledFormText } from "@/atoms/form-text/styled";
 import ButtonIcon from "@/atoms/icon/button-icon";
 import { StyledStripe, StyledStripeWrapper } from "@/atoms/stripe/styled";
 import Typography from "@/atoms/typography";
-import { useProviders } from "@/ions/contexts/providers";
 import { pxToRem } from "@/ions/utils/unit";
 import {
 	StyledFieldset,
@@ -25,18 +24,14 @@ import { FormProvider, useForm } from "react-hook-form";
 const ButtonSpinner = dynamic(async () => import("@/atoms/spinner/button-spinner"));
 
 const Signin = () => {
-	const { providers } = useProviders();
 	const { t } = useTranslation(["form"]);
 	const methods = useForm<SigninFormProps>();
 	const [loadingGoogle, setLoadingGoogle] = useState(false);
 	const [loadingGithub, setLoadingGithub] = useState(false);
 
-	const handleSubmit = useCallback(
-		(data: SigninFormProps) => {
-			void signIn(providers.email.id, { email: data.email });
-		},
-		[providers]
-	);
+	const handleSubmit = useCallback((data: SigninFormProps) => {
+		void signIn("email", { email: data.email });
+	}, []);
 
 	const { isSubmitting, isSubmitSuccessful } = methods.formState;
 	const loading = isSubmitting || isSubmitSuccessful;
@@ -60,7 +55,7 @@ const Signin = () => {
 									aria-label="google"
 									onClick={() => {
 										setLoadingGoogle(true);
-										void signIn(providers.google.id);
+										void signIn("google");
 									}}
 								>
 									{loadingGoogle ? (
@@ -77,7 +72,7 @@ const Signin = () => {
 									aria-label="github"
 									onClick={() => {
 										setLoadingGithub(true);
-										void signIn(providers.github.id);
+										void signIn("github");
 									}}
 								>
 									{loadingGithub ? (
diff --git a/src/ions/contexts/add-wish-modal/index.tsx b/src/ions/contexts/add-wish-modal/index.tsx
deleted file mode 100644
index e024ed0f..00000000
--- a/src/ions/contexts/add-wish-modal/index.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import React, { createContext, FC, useCallback, useContext, useMemo, useState } from "react";
-import { AddWishModalState } from "./types";
-
-export const AddWishModalContext = createContext<AddWishModalState>({
-	open() {
-		/**/
-	},
-	close() {
-		/**/
-	},
-	toggle() {
-		/**/
-	},
-});
-
-export const AddWishModalProvider: FC = ({ children }) => {
-	const [isOpen, setIsOpen] = useState(false);
-	const [id, setId] = useState<number | undefined>();
-	const [body, setBody] = useState<string | undefined>();
-	const [subject, setSubject] = useState<string | undefined>();
-
-	const open = useCallback((wishId, previousSubject, previousBody) => {
-		setId(wishId);
-		setSubject(previousSubject);
-		setBody(previousBody);
-		setIsOpen(true);
-	}, []);
-
-	const close = useCallback(() => {
-		setIsOpen(false);
-	}, []);
-
-	const toggle = useCallback((requestedState?: boolean) => {
-		if (typeof requestedState === "boolean") {
-			setIsOpen(requestedState);
-		} else {
-			setIsOpen(previousState => !previousState);
-		}
-	}, []);
-	const context = useMemo(
-		() => ({
-			isOpen,
-			open,
-			close,
-			toggle,
-			body,
-			subject,
-			id,
-		}),
-		[isOpen, open, close, toggle, body, subject, id]
-	);
-
-	return <AddWishModalContext.Provider value={context}>{children}</AddWishModalContext.Provider>;
-};
-
-export const useAddWishModal = () => useContext(AddWishModalContext);
diff --git a/src/ions/contexts/add-wish-modal/types.ts b/src/ions/contexts/add-wish-modal/types.ts
deleted file mode 100644
index 3d340580..00000000
--- a/src/ions/contexts/add-wish-modal/types.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export interface AddWishModalState {
-	isOpen?: boolean;
-	id?: number;
-	body?: string;
-	subject?: string;
-	open(id?: number, subject?: string, body?: string): void;
-	close(): void;
-	toggle(requestedState?: boolean): void;
-}
diff --git a/src/ions/contexts/cookie-consent-modal/index.tsx b/src/ions/contexts/cookie-consent-modal/index.tsx
deleted file mode 100644
index 6fb373ca..00000000
--- a/src/ions/contexts/cookie-consent-modal/index.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import { useCookieConsentContext } from "@/ions/contexts/cookie-consent";
-import React, {
-	createContext,
-	FC,
-	useCallback,
-	useContext,
-	useEffect,
-	useMemo,
-	useState,
-} from "react";
-import { CookieConsentModalState } from "./types";
-
-export const CookieConsentModalContext = createContext<CookieConsentModalState>({
-	open() {
-		/**/
-	},
-	close() {
-		/**/
-	},
-	toggle() {
-		/**/
-	},
-});
-
-export const CookieConsentModalProvider: FC = ({ children }) => {
-	const { consent } = useCookieConsentContext();
-
-	const [isOpen, setIsOpen] = useState(false);
-
-	useEffect(() => {
-		setIsOpen(Object.keys(consent).length === 0);
-	}, [consent]);
-
-	const open = useCallback(() => {
-		setIsOpen(true);
-	}, []);
-
-	const close = useCallback(() => {
-		setIsOpen(false);
-	}, []);
-
-	const toggle = useCallback((requestedState?: boolean) => {
-		if (typeof requestedState === "boolean") {
-			setIsOpen(requestedState);
-		} else {
-			setIsOpen(previousState => !previousState);
-		}
-	}, []);
-
-	const context = useMemo(
-		() => ({
-			isOpen,
-			open,
-			close,
-			toggle,
-		}),
-		[isOpen, open, close, toggle]
-	);
-
-	return (
-		<CookieConsentModalContext.Provider value={context}>
-			{children}
-		</CookieConsentModalContext.Provider>
-	);
-};
-
-export const useCookieConsentModal = () => useContext(CookieConsentModalContext);
diff --git a/src/ions/contexts/cookie-consent-modal/types.ts b/src/ions/contexts/cookie-consent-modal/types.ts
deleted file mode 100644
index e5183815..00000000
--- a/src/ions/contexts/cookie-consent-modal/types.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export interface CookieConsentModalState {
-	isOpen?: boolean;
-	open(id?: number, subject?: string, body?: string): void;
-	close(): void;
-	toggle(requestedState?: boolean): void;
-}
diff --git a/src/ions/contexts/cookie-consent/index.tsx b/src/ions/contexts/cookie-consent/index.tsx
index 206b7cdb..ea8b6995 100644
--- a/src/ions/contexts/cookie-consent/index.tsx
+++ b/src/ions/contexts/cookie-consent/index.tsx
@@ -1,6 +1,11 @@
 import { GetServerSidePropsContext } from "next";
-import React, { createContext, FC, useContext, useMemo } from "react";
+import React, { createContext, FC, useCallback, useContext, useMemo, useState } from "react";
 import { CookieConsent, CookieConsentHookState, useCookieConsent } from "use-cookie-consent";
+import {
+	DurationCookieTypes,
+	ProvenanceCookieTypes,
+	PurposeCookieTypes,
+} from "use-cookie-consent/build/cjs/types";
 
 export const CookieConsentContext = createContext<CookieConsentHookState>({
 	consent: {},
@@ -41,6 +46,8 @@ export const CookieConsentContext = createContext<CookieConsentHookState>({
 	},
 });
 
+type CookieTypes = PurposeCookieTypes & DurationCookieTypes & ProvenanceCookieTypes;
+
 export const CookieConsentProvider: FC<{ consent?: CookieConsent }> = ({
 	children,
 	consent: defaultConsent,
@@ -54,26 +61,64 @@ export const CookieConsentProvider: FC<{ consent?: CookieConsent }> = ({
 		didDeclineAll,
 		cookies,
 	} = useCookieConsent({ defaultConsent });
+	const [localConsent, setLocalConsent] = useState(defaultConsent || consent);
+	const localAcceptAllCookies = useCallback(() => {
+		acceptAllCookies();
+		setLocalConsent(() => ({
+			necessary: true,
+			preferences: true,
+			statistics: true,
+			marketing: true,
+			firstParty: true,
+			thirdParty: true,
+			session: true,
+			persistent: true,
+		}));
+	}, [acceptAllCookies]);
+
+	const localDeclineAllCookies = useCallback(() => {
+		declineAllCookies();
+		setLocalConsent(() => ({
+			necessary: true,
+			preferences: false,
+			statistics: false,
+			marketing: false,
+			firstParty: false,
+			thirdParty: false,
+			session: false,
+			persistent: false,
+		}));
+	}, [declineAllCookies]);
+
+	const localAcceptCookies = useCallback(
+		(cookies: CookieTypes) => {
+			acceptCookies(cookies);
+			setLocalConsent(previousState => ({
+				...previousState,
+				...cookies,
+			}));
+		},
+		[acceptCookies]
+	);
 
 	const context = useMemo(
 		() => ({
-			consent: defaultConsent || consent,
-			acceptAllCookies,
-			declineAllCookies,
-			acceptCookies,
+			consent: localConsent,
+			acceptAllCookies: localAcceptAllCookies,
+			declineAllCookies: localDeclineAllCookies,
+			acceptCookies: localAcceptCookies,
 			didAcceptAll,
 			didDeclineAll,
 			cookies,
 		}),
 		[
-			consent,
-			acceptAllCookies,
-			declineAllCookies,
-			acceptCookies,
+			localConsent,
+			localAcceptAllCookies,
+			localDeclineAllCookies,
+			localAcceptCookies,
 			didAcceptAll,
 			didDeclineAll,
 			cookies,
-			defaultConsent,
 		]
 	);
 
diff --git a/src/ions/contexts/providers/index.tsx b/src/ions/contexts/providers/index.tsx
deleted file mode 100644
index 71b4c3d6..00000000
--- a/src/ions/contexts/providers/index.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import React, { createContext, FC, useContext, useMemo } from "react";
-import { ProvidersState } from "./types";
-
-export const ProvidersContext = createContext<ProvidersState>({
-	providers: {},
-});
-
-export const ProvidersProvider: FC<ProvidersState> = ({ children, providers }) => {
-	const context = useMemo(
-		() => ({
-			providers,
-		}),
-		[providers]
-	);
-
-	return <ProvidersContext.Provider value={context}>{children}</ProvidersContext.Provider>;
-};
-
-export const useProviders = () => useContext(ProvidersContext);
diff --git a/src/ions/contexts/providers/types.ts b/src/ions/contexts/providers/types.ts
deleted file mode 100644
index 32d3e9cc..00000000
--- a/src/ions/contexts/providers/types.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { ClientSafeProvider } from "next-auth/client";
-
-export interface ProvidersState {
-	providers: Record<string, ClientSafeProvider>;
-}
diff --git a/src/ions/contexts/signin-modal/index.tsx b/src/ions/contexts/signin-modal/index.tsx
deleted file mode 100644
index 060395cf..00000000
--- a/src/ions/contexts/signin-modal/index.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import React, { createContext, FC, useCallback, useContext, useMemo, useState } from "react";
-import { SigninModalState } from "./types";
-
-export const SigninModalContext = createContext<SigninModalState>({
-	open() {
-		/**/
-	},
-	close() {
-		/**/
-	},
-	toggle() {
-		/**/
-	},
-});
-
-export const SigninModalProvider: FC = ({ children }) => {
-	const [isOpen, setIsOpen] = useState(false);
-
-	const open = useCallback(() => {
-		setIsOpen(true);
-	}, []);
-
-	const close = useCallback(() => {
-		setIsOpen(false);
-	}, []);
-
-	const toggle = useCallback((requestedState?: boolean) => {
-		if (typeof requestedState === "boolean") {
-			setIsOpen(requestedState);
-		} else {
-			setIsOpen(previousState => !previousState);
-		}
-	}, []);
-	const context = useMemo(
-		() => ({
-			isOpen,
-			open,
-			close,
-			toggle,
-		}),
-		[isOpen, open, close, toggle]
-	);
-
-	return <SigninModalContext.Provider value={context}>{children}</SigninModalContext.Provider>;
-};
-
-export const useSigninModal = () => useContext(SigninModalContext);
diff --git a/src/ions/contexts/signin-modal/types.ts b/src/ions/contexts/signin-modal/types.ts
deleted file mode 100644
index 9848feb6..00000000
--- a/src/ions/contexts/signin-modal/types.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export interface SigninModalState {
-	isOpen?: boolean;
-	open(): void;
-	close(): void;
-	toggle(requestedState?: boolean): void;
-}
diff --git a/src/ions/contexts/wish/index.tsx b/src/ions/contexts/wish/index.tsx
deleted file mode 100644
index 3c1b62c0..00000000
--- a/src/ions/contexts/wish/index.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import React, { createContext, FC, useCallback, useContext, useMemo, useState } from "react";
-import { WishState } from "./types";
-
-export const WishContext = createContext<WishState>({
-	changeBody() {
-		/**/
-	},
-	changeSubject() {
-		/**/
-	},
-});
-
-export const WishProvider: FC = ({ children }) => {
-	const [subject, setSubject] = useState<string | undefined>();
-	const [body, setBody] = useState<string | undefined>();
-
-	const changeBody = useCallback((value: string) => {
-		setBody(value);
-	}, []);
-	const changeSubject = useCallback((value: string) => {
-		setSubject(value);
-	}, []);
-
-	const context = useMemo(
-		() => ({
-			body,
-			subject,
-			changeSubject,
-			changeBody,
-		}),
-		[body, subject, changeBody, changeSubject]
-	);
-
-	return <WishContext.Provider value={context}>{children}</WishContext.Provider>;
-};
-
-export const useWish = () => useContext(WishContext);
diff --git a/src/ions/contexts/wish/types.ts b/src/ions/contexts/wish/types.ts
deleted file mode 100644
index c424ccf2..00000000
--- a/src/ions/contexts/wish/types.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export interface WishState {
-	subject?: string;
-	body?: string;
-	changeBody(value: string): void;
-	changeSubject(value: string): void;
-}
diff --git a/src/ions/contexts/wishlist/index.tsx b/src/ions/contexts/wishlist/index.tsx
deleted file mode 100644
index 85ba665d..00000000
--- a/src/ions/contexts/wishlist/index.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import { Wish } from "@/types/backend-api";
-import React, {
-	createContext,
-	FC,
-	useCallback,
-	useContext,
-	useEffect,
-	useMemo,
-	useState,
-} from "react";
-import { UpdateCallback, WishlistState } from "./types";
-
-export const WishlistContext = createContext<WishlistState>({
-	wishes: [],
-	error: null,
-	add() {
-		/**/
-	},
-	update() {
-		/**/
-	},
-	setError() {
-		/**/
-	},
-});
-
-export const WishlistProvider: FC<{ initialState: Wish[] }> = ({ children, initialState }) => {
-	const [wishes, setWishes] = useState<Wish[]>(initialState);
-	const [error, setError] = useState<string | null>(null);
-
-	const add = useCallback((wish: Wish) => {
-		setWishes(previousState => [wish, ...previousState]);
-	}, []);
-
-	const update = useCallback((id: number, callback: UpdateCallback) => {
-		setWishes(previousState =>
-			previousState.map(previousWish => {
-				if (previousWish.id === id) {
-					const partialWish = callback(previousWish);
-					return { ...previousWish, ...partialWish };
-				}
-
-				return previousWish;
-			})
-		);
-	}, []);
-
-	useEffect(() => {
-		setWishes(initialState);
-	}, [initialState]);
-
-	const context = useMemo(
-		() => ({
-			wishes,
-			add,
-			update,
-			setError,
-			error,
-		}),
-		[add, wishes, update, setError, error]
-	);
-
-	return <WishlistContext.Provider value={context}>{children}</WishlistContext.Provider>;
-};
-
-export const useWishlist = () => useContext(WishlistContext);
diff --git a/src/ions/contexts/wishlist/types.ts b/src/ions/contexts/wishlist/types.ts
deleted file mode 100644
index 4e6d3fdc..00000000
--- a/src/ions/contexts/wishlist/types.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Wish } from "@/types/backend-api";
-import { Dispatch, SetStateAction } from "react";
-
-export type UpdateCallback = (previousWish: Wish) => Partial<Wish>;
-
-export interface WishlistState {
-	wishes: Wish[];
-	error: string;
-	setError: Dispatch<SetStateAction<string>>;
-	add(wish: Wish): void;
-	update(id: number, callback: UpdateCallback): void;
-}
diff --git a/src/ions/hooks/route-loader/index.ts b/src/ions/hooks/route-loader/index.ts
new file mode 100644
index 00000000..b4851937
--- /dev/null
+++ b/src/ions/hooks/route-loader/index.ts
@@ -0,0 +1,39 @@
+import { Router } from "next/router";
+import { useEffect, useMemo, useState } from "react";
+
+export const useRouteLoader = () => {
+	const [loading, setLoading] = useState(false);
+	const [loaded, setLoaded] = useState(false);
+	useEffect(() => {
+		let timer: number;
+		const start = () => {
+			setLoaded(false);
+			setLoading(true);
+		};
+
+		const end = () => {
+			setLoading(false);
+			setLoaded(true);
+
+			timer = window.setTimeout(() => {
+				setLoaded(false);
+				setLoading(false);
+			}, 250);
+		};
+
+		Router.events.on("routeChangeStart", start);
+		Router.events.on("routeChangeComplete", end);
+
+		const unsubscribe = () => {
+			Router.events.off("routeChangeStart", start);
+			Router.events.off("routeChangeComplete", end);
+			window.clearTimeout(timer);
+			setLoaded(false);
+			setLoading(false);
+		};
+
+		return unsubscribe;
+	}, []);
+
+	return useMemo(() => ({ loaded, loading }), [loaded, loading]);
+};
diff --git a/src/ions/queries/wishes.ts b/src/ions/queries/wishes.ts
index 5bf818ae..7ed65840 100644
--- a/src/ions/queries/wishes.ts
+++ b/src/ions/queries/wishes.ts
@@ -57,6 +57,16 @@ export const UPDATE_WISH = gql`
 	}
 `;
 
+export const NEW_WISH_FRAGMENT = gql`
+	fragment NewWish on Wish {
+		id
+		body
+		subject
+		voted
+		votes
+	}
+`;
+
 export const USER = gql`
 	query user($email: String!) {
 		user(where: { email: $email }) {
diff --git a/src/ions/services/apollo/client.ts b/src/ions/services/apollo/client.ts
index bd2b529a..988323b7 100644
--- a/src/ions/services/apollo/client.ts
+++ b/src/ions/services/apollo/client.ts
@@ -43,7 +43,9 @@ function createApolloClient() {
 		cache: new InMemoryCache().restore({}),
 		defaultOptions: {
 			query: {
-				fetchPolicy: process.env.NODE_ENV === "production" ? "cache-first" : "no-cache",
+				fetchPolicy: "cache-first",
+				// Enable if you want to develop with uncached data
+				// fetchPolicy: process.env.NODE_ENV === "production" ? "cache-first" : "no-cache",
 				errorPolicy: "all",
 			},
 		},
diff --git a/src/ions/stores/error/index.ts b/src/ions/stores/error/index.ts
new file mode 100644
index 00000000..c3dc11c5
--- /dev/null
+++ b/src/ions/stores/error/index.ts
@@ -0,0 +1,9 @@
+import create from "zustand";
+import { ErrorStore } from "./types";
+
+export const useError = create<ErrorStore>(set => ({
+	error: null,
+	setError: error => {
+		set({ error });
+	},
+}));
diff --git a/src/ions/stores/error/types.ts b/src/ions/stores/error/types.ts
new file mode 100644
index 00000000..c614af5a
--- /dev/null
+++ b/src/ions/stores/error/types.ts
@@ -0,0 +1,5 @@
+export interface ErrorStore {
+	error: string | null;
+
+	setError(value: string): void;
+}
diff --git a/src/ions/stores/modal/cookie-consent.ts b/src/ions/stores/modal/cookie-consent.ts
new file mode 100644
index 00000000..3c7a71cc
--- /dev/null
+++ b/src/ions/stores/modal/cookie-consent.ts
@@ -0,0 +1,5 @@
+import create from "zustand";
+import { createModal } from "./create";
+import { ModalState } from "./types";
+
+export const useCookieConsentModal = create<ModalState>(createModal);
diff --git a/src/ions/stores/modal/create.ts b/src/ions/stores/modal/create.ts
new file mode 100644
index 00000000..462a656a
--- /dev/null
+++ b/src/ions/stores/modal/create.ts
@@ -0,0 +1,15 @@
+import { StateCreator } from "zustand/vanilla";
+import { ModalState } from "./types";
+
+export const createModal: StateCreator<ModalState> = (set): ModalState => ({
+	isOpen: false,
+	open: () => {
+		set(() => ({ isOpen: true }));
+	},
+	close: () => {
+		set(() => ({ isOpen: false }));
+	},
+	toggle: desiredState => {
+		set(state => ({ isOpen: desiredState ?? !state.isOpen }));
+	},
+});
diff --git a/src/ions/stores/modal/signin.ts b/src/ions/stores/modal/signin.ts
new file mode 100644
index 00000000..4490ffba
--- /dev/null
+++ b/src/ions/stores/modal/signin.ts
@@ -0,0 +1,5 @@
+import create from "zustand";
+import { createModal } from "./create";
+import { ModalState } from "./types";
+
+export const useSigninModal = create<ModalState>(createModal);
diff --git a/src/ions/stores/modal/types.ts b/src/ions/stores/modal/types.ts
new file mode 100644
index 00000000..5db54203
--- /dev/null
+++ b/src/ions/stores/modal/types.ts
@@ -0,0 +1,6 @@
+export interface ModalState {
+	isOpen: boolean;
+	open(): void;
+	close(): void;
+	toggle(desiredState?: boolean): void;
+}
diff --git a/src/ions/stores/modal/wish.ts b/src/ions/stores/modal/wish.ts
new file mode 100644
index 00000000..2fbb624d
--- /dev/null
+++ b/src/ions/stores/modal/wish.ts
@@ -0,0 +1,5 @@
+import create from "zustand";
+import { createModal } from "./create";
+import { ModalState } from "./types";
+
+export const useAddWishModal = create<ModalState>(createModal);
diff --git a/src/ions/stores/wish/index.ts b/src/ions/stores/wish/index.ts
new file mode 100644
index 00000000..fa6ead4f
--- /dev/null
+++ b/src/ions/stores/wish/index.ts
@@ -0,0 +1,14 @@
+import create from "zustand";
+import { WishStore } from "./types";
+
+export const useWish = create<WishStore>(set => ({
+	setId: id => {
+		set({ id });
+	},
+	setBody: body => {
+		set({ body });
+	},
+	setSubject: subject => {
+		set({ subject });
+	},
+}));
diff --git a/src/ions/stores/wish/types.ts b/src/ions/stores/wish/types.ts
new file mode 100644
index 00000000..80974344
--- /dev/null
+++ b/src/ions/stores/wish/types.ts
@@ -0,0 +1,8 @@
+export interface WishStore {
+	id?: number;
+	body?: string;
+	subject?: string;
+	setId(value?: number): void;
+	setBody(value?: string): void;
+	setSubject(value?: string): void;
+}
diff --git a/src/organisms/add-wish-modal/index.tsx b/src/organisms/add-wish-modal/index.tsx
index eaeea46f..99a95d57 100644
--- a/src/organisms/add-wish-modal/index.tsx
+++ b/src/organisms/add-wish-modal/index.tsx
@@ -1,12 +1,11 @@
 import Button from "@/atoms/button";
-import { StyledErrorText } from "@/atoms/error-text/styled";
 import Typography from "@/atoms/typography";
-import { useAddWishModal } from "@/ions/contexts/add-wish-modal";
-import { useWish } from "@/ions/contexts/wish";
-import { useWishlist } from "@/ions/contexts/wishlist";
 import { useLockBodyScroll } from "@/ions/hooks/body-scroll-lock";
 import { useEscapeKey } from "@/ions/hooks/escape-key";
-import { CREATE_WISH, UPDATE_WISH } from "@/ions/queries/wishes";
+import { CREATE_WISH, NEW_WISH_FRAGMENT, UPDATE_WISH } from "@/ions/queries/wishes";
+import { useError } from "@/ions/stores/error";
+import { useAddWishModal } from "@/ions/stores/modal/wish";
+import { useWish } from "@/ions/stores/wish";
 import { StyledFieldset, StyledForm } from "@/molecules/form/styled";
 import InputField from "@/molecules/input-field";
 import Modal, { ModalActions, ModalContent, ModalHeader } from "@/molecules/modal";
@@ -17,7 +16,7 @@ import { useMutation } from "@apollo/client";
 import { useSession } from "next-auth/client";
 import { useTranslation } from "next-i18next";
 import dynamic from "next/dynamic";
-import React, { useCallback, useEffect } from "react";
+import React, { useCallback } from "react";
 import { FormProvider, useForm } from "react-hook-form";
 
 const ButtonSpinner = dynamic(async () => import("@/atoms/spinner/button-spinner"));
@@ -25,20 +24,23 @@ const ButtonSpinner = dynamic(async () => import("@/atoms/spinner/button-spinner
 const AddWishModal = () => {
 	const [session] = useSession();
 	const { t } = useTranslation(["cancel", "form", "wishlist"]);
-	const { body, subject, changeBody, changeSubject } = useWish();
-	const { add: addWish } = useWishlist();
-	const { close, id, body: previousBody, subject: previousSubject } = useAddWishModal();
+	const setBody = useWish(state => state.setBody);
+	const setSubject = useWish(state => state.setSubject);
+	const id = useWish(state => state.id);
+	const body = useWish(state => state.body);
+	const subject = useWish(state => state.subject);
+	const setWishlistError = useError(state => state.setError);
+	const close = useAddWishModal(state => state.close);
 	useEscapeKey(close);
 	useLockBodyScroll();
 	const methods = useForm<WishFormProps>({
 		defaultValues: {
-			"wish-subject": previousSubject,
-			"wish-body": previousBody,
+			"wish-subject": subject,
+			"wish-body": body,
 		},
 	});
-	const { update: updateMyWish, setError: setWishlistError } = useWishlist();
 
-	const [createWish, { data: dataCreateWish, loading: loadingCreateWish }] = useMutation<{
+	const [createWish, { loading: loadingCreateWish }] = useMutation<{
 		createWish: Wish;
 	}>(CREATE_WISH, {
 		variables: {
@@ -46,12 +48,22 @@ const AddWishModal = () => {
 			subject,
 			body,
 		},
+		update(cache, { data: { createWish } }) {
+			cache.modify({
+				fields: {
+					wishes(existingWishes: Wish[] = []) {
+						const newWishRef = cache.writeFragment({
+							data: createWish,
+							fragment: NEW_WISH_FRAGMENT,
+						});
+						return [newWishRef, ...existingWishes];
+					},
+				},
+			});
+		},
 	});
 
-	const [
-		updateWish,
-		{ data: dataUpdateWish, error: errorUpdateWish, loading: loadingUpdateWish },
-	] = useMutation<{
+	const [updateWish, { loading: loadingUpdateWish }] = useMutation<{
 		updateWish: Wish;
 	}>(UPDATE_WISH, {
 		variables: {
@@ -59,11 +71,24 @@ const AddWishModal = () => {
 			subject,
 			body,
 		},
+		update(cache, { data: { updateWish } }) {
+			cache.modify({
+				fields: {
+					wishes(existingWishes: Wish[] = []) {
+						const newWishRef = cache.writeFragment({
+							data: updateWish,
+							fragment: NEW_WISH_FRAGMENT,
+						});
+						return existingWishes.map(existingWish =>
+							existingWish.id === updateWish.id ? newWishRef : existingWish
+						);
+					},
+				},
+			});
+		},
 	});
 
 	const loading = loadingUpdateWish || loadingCreateWish;
-	// Activate when the errors return keys
-	// const error = errorUpdateWish || errorCreateWish;
 
 	const handleSubmit = useCallback(async () => {
 		if (id) {
@@ -87,23 +112,6 @@ const AddWishModal = () => {
 		}
 	}, [id, updateWish, createWish, close, setWishlistError, t]);
 
-	// Add new wish
-	useEffect(() => {
-		if (dataCreateWish?.createWish) {
-			addWish(dataCreateWish.createWish);
-		}
-	}, [addWish, dataCreateWish]);
-
-	// Edit existing wish
-	useEffect(() => {
-		if (dataUpdateWish?.updateWish) {
-			updateMyWish(id, () => ({
-				body: dataUpdateWish.updateWish.body,
-				subject: dataUpdateWish.updateWish.subject,
-			}));
-		}
-	}, [id, updateMyWish, dataUpdateWish]);
-
 	return (
 		<Modal dark backdrop onClose={close}>
 			<ModalHeader>
@@ -114,16 +122,11 @@ const AddWishModal = () => {
 			<ModalContent>
 				<FormProvider {...methods}>
 					<Typography centered>{t("wishlist:add-wish.body")}</Typography>
-					{errorUpdateWish && (
-						<StyledErrorText>
-							{t("form:errors:CANNOT_UPDATE_VOTED_WISH")}
-						</StyledErrorText>
-					)}
 					<StyledForm noValidate onSubmit={methods.handleSubmit(handleSubmit)}>
 						<StyledFieldset>
 							<InputField
 								fullWidth
-								disabled={Boolean(errorUpdateWish)}
+								autoFocus
 								id="form:wishlist:wish-subject"
 								name="wish-subject"
 								helpText={t("form:help-texts.wish-subject")}
@@ -131,20 +134,19 @@ const AddWishModal = () => {
 									required: true,
 									minLength: 2,
 								}}
-								onChange={changeSubject}
+								onChange={setSubject}
 							/>
 							<TextArea
 								fullWidth
-								disabled={Boolean(errorUpdateWish)}
 								id="form:wishlist:wish-body"
 								name="wish-body"
 								helpText={t("form:help-texts.wish-body")}
 								validation={{ required: true, minLength: 2 }}
-								onChange={changeBody}
+								onChange={setBody}
 							/>
 						</StyledFieldset>
 						<ModalActions sticky>
-							<Button primary type="submit" disabled={Boolean(errorUpdateWish)}>
+							<Button primary type="submit">
 								{loading && <ButtonSpinner />}
 								{id
 									? t("wishlist:button.update-wish")
diff --git a/src/organisms/cookie-banner/index.tsx b/src/organisms/cookie-banner/index.tsx
index 2274b532..a18ead04 100644
--- a/src/organisms/cookie-banner/index.tsx
+++ b/src/organisms/cookie-banner/index.tsx
@@ -1,22 +1,23 @@
 import Button from "@/atoms/button";
 import Typography from "@/atoms/typography";
 import { useCookieConsentContext } from "@/ions/contexts/cookie-consent";
-import { useCookieConsentModal } from "@/ions/contexts/cookie-consent-modal";
+import { useCookieConsentModal } from "@/ions/stores/modal/cookie-consent";
 import { Column, Grid } from "@/molecules/grid";
 import I18nLink from "@/molecules/i18n-link";
 import Modal, { ModalActions, ModalContent, ModalHeader } from "@/molecules/modal";
 import { useTranslation } from "next-i18next";
 import React from "react";
+import { CookieBannerProps } from "./types";
 
-const CookieBanner = () => {
+const CookieBanner = ({ dark }: CookieBannerProps) => {
 	const { acceptAllCookies, declineAllCookies } = useCookieConsentContext();
 	const { t } = useTranslation(["cookie-banner", "navigation"]);
-	const { close } = useCookieConsentModal();
+	const close = useCookieConsentModal(state => state.close);
 
 	return (
 		<Grid>
 			<Column>
-				<Modal anchor="bottomRight" onClose={close}>
+				<Modal anchor="bottomRight" dark={dark} onClose={close}>
 					<ModalHeader raw>
 						<Typography raw variant="subtitle" component="h2">
 							{t("cookie-banner:headline")}
@@ -35,6 +36,7 @@ const CookieBanner = () => {
 						<Button
 							primary
 							slim
+							autoFocus
 							onClick={() => {
 								acceptAllCookies();
 							}}
diff --git a/src/organisms/cookie-banner/types.ts b/src/organisms/cookie-banner/types.ts
new file mode 100644
index 00000000..5c766272
--- /dev/null
+++ b/src/organisms/cookie-banner/types.ts
@@ -0,0 +1,3 @@
+export interface CookieBannerProps {
+	dark?: boolean;
+}
diff --git a/src/organisms/wish-card/index.tsx b/src/organisms/wish-card/index.tsx
index f23b8d99..4e1db6e6 100644
--- a/src/organisms/wish-card/index.tsx
+++ b/src/organisms/wish-card/index.tsx
@@ -1,14 +1,14 @@
 import Icon from "@/atoms/icon";
 import { StyledIconButton } from "@/atoms/icon-button/styled";
 import Typography from "@/atoms/typography";
-import { useAddWishModal } from "@/ions/contexts/add-wish-modal";
-import { useWishlist } from "@/ions/contexts/wishlist";
-import { CREATE_WISH_VOTE, DELETE_WISH_VOTE } from "@/ions/queries/wishes";
+import { CREATE_WISH_VOTE, DELETE_WISH_VOTE, NEW_WISH_FRAGMENT } from "@/ions/queries/wishes";
+import { useAddWishModal } from "@/ions/stores/modal/wish";
+import { useWish } from "@/ions/stores/wish";
 import { Wish, WishVote } from "@/types/backend-api";
 import { useMutation } from "@apollo/client";
 import { useSession } from "next-auth/client";
 import { useTranslation } from "next-i18next";
-import React, { FC, memo, useEffect } from "react";
+import React, { FC, memo } from "react";
 import {
 	StyledArticle,
 	StyledCard,
@@ -17,48 +17,77 @@ import {
 	StyledVotes,
 } from "./styled";
 
-const WishCard: FC<{ wish: Wish }> = ({ wish: { body, id, subject, votes, voted, authorId } }) => {
+const WishCard: FC<{ wish: Wish }> = ({
+	wish: { body, id, subject, votes, voted, authorId, __typename },
+}) => {
 	const [session] = useSession();
 	const { t } = useTranslation(["wishlist"]);
-	const { update: updateWish } = useWishlist();
-	const { open } = useAddWishModal();
-
-	const [createWishVote, { data: dataCreateWishVote }] = useMutation<{
+	const open = useAddWishModal(state => state.open);
+	const setId = useWish(state => state.setId);
+	const setBody = useWish(state => state.setBody);
+	const setSubject = useWish(state => state.setSubject);
+	const [createWishVote] = useMutation<{
 		createWishVote: WishVote;
 	}>(CREATE_WISH_VOTE, {
 		variables: {
 			userId: session?.user.id,
 			wishId: id,
 		},
+		update(cache, { data: { createWishVote } }) {
+			cache.modify({
+				fields: {
+					wishes(existingWishes: Wish[] = []) {
+						const newWishRef = cache.writeFragment({
+							data: {
+								__typename,
+								id,
+								body,
+								subject,
+								voted: true,
+								votes: votes + 1,
+							},
+							fragment: NEW_WISH_FRAGMENT,
+						});
+						return existingWishes.map(existingWish =>
+							existingWish.id === createWishVote.id ? newWishRef : existingWish
+						);
+					},
+				},
+			});
+		},
 	});
 
-	const [deleteWishVote, { data: dataDeleteWishVote }] = useMutation<{
+	const [deleteWishVote] = useMutation<{
 		deleteWishVote: WishVote;
 	}>(DELETE_WISH_VOTE, {
 		variables: {
 			userId: session?.user.id,
 			wishId: id,
 		},
+		update(cache, { data: { deleteWishVote } }) {
+			cache.modify({
+				fields: {
+					wishes(existingWishes: Wish[] = []) {
+						const newWishRef = cache.writeFragment({
+							data: {
+								__typename,
+								id,
+								body,
+								subject,
+								voted: false,
+								votes: votes - 1,
+							},
+							fragment: NEW_WISH_FRAGMENT,
+						});
+						return existingWishes.map(existingWish =>
+							existingWish.id === deleteWishVote.id ? newWishRef : existingWish
+						);
+					},
+				},
+			});
+		},
 	});
 
-	useEffect(() => {
-		if (dataCreateWishVote?.createWishVote) {
-			updateWish(id, (previousState: Wish) => ({
-				voted: true,
-				votes: previousState.votes + 1,
-			}));
-		}
-	}, [id, updateWish, dataCreateWishVote]);
-
-	useEffect(() => {
-		if (dataDeleteWishVote?.deleteWishVote) {
-			updateWish(id, (previousState: Wish) => ({
-				voted: false,
-				votes: previousState.votes - 1,
-			}));
-		}
-	}, [id, updateWish, dataDeleteWishVote]);
-
 	return (
 		<StyledCard colSpanS={4} colSpanL={6} data-test-selector="wish-card" data-test-id={`${id}`}>
 			<StyledArticle>
@@ -104,7 +133,10 @@ const WishCard: FC<{ wish: Wish }> = ({ wish: { body, id, subject, votes, voted,
 							disabled={votes > 0}
 							onClick={() => {
 								if (votes < 1) {
-									open(id, subject, body);
+									setId(id);
+									setBody(body);
+									setSubject(subject);
+									open();
 								}
 							}}
 						>
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 7d78ebee..85721eca 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -1,7 +1,4 @@
-import RouteLoader from "@/atoms/route-loader";
 import { CookieConsentProvider } from "@/ions/contexts/cookie-consent";
-import { CookieConsentModalProvider } from "@/ions/contexts/cookie-consent-modal";
-import { ProvidersProvider } from "@/ions/contexts/providers";
 import { ScrollBarWidthProvider } from "@/ions/contexts/scrollbar-width";
 import { fontFace } from "@/ions/fonts/styles";
 import routes, { Route } from "@/ions/routes";
@@ -9,7 +6,7 @@ import { useApollo } from "@/ions/services/apollo/client";
 import { cache } from "@/ions/services/emotion/cache";
 import { fontFaces } from "@/ions/styles/font-faces";
 import { theme } from "@/ions/theme";
-import { PageProps } from "@/types";
+import { AppProps } from "@/types";
 import { ApolloProvider } from "@apollo/client";
 import {
 	CacheProvider as EmotionCacheProvider,
@@ -20,50 +17,15 @@ import pkg from "@pkg";
 import { NextPage } from "next";
 import { Provider as NextAuthProvider } from "next-auth/client";
 import { appWithTranslation } from "next-i18next";
-import { AppProps } from "next/app";
+import { AppProps as NextAppProps } from "next/app";
 import Head from "next/head";
-import { Router, useRouter } from "next/router";
-import React, { useEffect, useState } from "react";
+import { useRouter } from "next/router";
+import React from "react";
 
-interface MyAppProps extends AppProps<PageProps> {
-	pageProps: PageProps;
-}
-
-const App: NextPage<AppProps> = ({ Component, pageProps }: MyAppProps) => {
+const App: NextPage<NextAppProps> = ({ Component, pageProps }: AppProps) => {
 	const apolloClient = useApollo(pageProps);
 	const { locales, defaultLocale, route } = useRouter();
-	const [loading, setLoading] = useState(false);
-	const [loaded, setLoaded] = useState(false);
-	useEffect(() => {
-		let timer: number;
-		const start = () => {
-			setLoaded(false);
-			setLoading(true);
-		};
-
-		const end = () => {
-			setLoading(false);
-			setLoaded(true);
-
-			timer = window.setTimeout(() => {
-				setLoaded(false);
-				setLoading(false);
-			}, 250);
-		};
-
-		Router.events.on("routeChangeStart", start);
-		Router.events.on("routeChangeComplete", end);
-
-		const unsubscribe = () => {
-			Router.events.off("routeChangeStart", start);
-			Router.events.off("routeChangeComplete", end);
-			window.clearTimeout(timer);
-			setLoaded(false);
-			setLoading(false);
-		};
 
-		return unsubscribe;
-	}, []);
 	return (
 		<>
 			<Global key="fontFace" styles={fontFace} />
@@ -133,20 +95,15 @@ const App: NextPage<AppProps> = ({ Component, pageProps }: MyAppProps) => {
 			</Head>
 			<CookieConsentProvider consent={pageProps.consent}>
 				<NextAuthProvider session={pageProps.session}>
-					<ProvidersProvider providers={pageProps.providers}>
-						<ApolloProvider client={apolloClient}>
-							<EmotionCacheProvider value={cache}>
-								<EmotionThemeProvider theme={theme}>
-									<ScrollBarWidthProvider>
-										<CookieConsentModalProvider>
-											<RouteLoader isLoading={loading} isLoaded={loaded} />
-											<Component {...pageProps} />
-										</CookieConsentModalProvider>
-									</ScrollBarWidthProvider>
-								</EmotionThemeProvider>
-							</EmotionCacheProvider>
-						</ApolloProvider>
-					</ProvidersProvider>
+					<ApolloProvider client={apolloClient}>
+						<EmotionCacheProvider value={cache}>
+							<EmotionThemeProvider theme={theme}>
+								<ScrollBarWidthProvider>
+									<Component {...pageProps} />
+								</ScrollBarWidthProvider>
+							</EmotionThemeProvider>
+						</EmotionCacheProvider>
+					</ApolloProvider>
 				</NextAuthProvider>
 			</CookieConsentProvider>
 		</>
diff --git a/src/pages/legal/cookie-policy/index.tsx b/src/pages/legal/cookie-policy/index.tsx
index 4be52922..357c13bd 100644
--- a/src/pages/legal/cookie-policy/index.tsx
+++ b/src/pages/legal/cookie-policy/index.tsx
@@ -3,7 +3,10 @@ import ButtonGroup from "@/atoms/button/button-group";
 import Toggle from "@/atoms/toggle";
 import { StyledToggleLabel } from "@/atoms/toggle/styled";
 import Typography from "@/atoms/typography";
-import { useCookieConsentContext } from "@/ions/contexts/cookie-consent";
+import {
+	getServerSideCookieConsent,
+	useCookieConsentContext,
+} from "@/ions/contexts/cookie-consent";
 import { GET_LEGAL_PAGE } from "@/ions/queries/legal-page";
 import {
 	addApolloState,
@@ -13,9 +16,10 @@ import {
 } from "@/ions/services/apollo/client";
 import { withLoadingAndError } from "@/organisms/with-loading-and-error";
 import LegalPage from "@/templates/legal-page";
-import { PageProps, StaticPageProps } from "@/types";
+import { PageProps } from "@/types";
 import { PageCollection } from "@/types/contentful-api";
-import { GetStaticProps, NextPage } from "next";
+import { GetServerSideProps, NextPage } from "next";
+import { getProviders, getSession } from "next-auth/client";
 import { useTranslation } from "next-i18next";
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import React from "react";
@@ -63,7 +67,9 @@ const Page: NextPage<PageProps> = props => {
 									<td>
 										<label>
 											<Toggle
-												checked={consent[key] as boolean}
+												checked={Boolean(
+													key === "necessary" || consent[key]
+												)}
 												disabled={key === "necessary"}
 												onChange={event_ => {
 													acceptCookies({
@@ -74,7 +80,9 @@ const Page: NextPage<PageProps> = props => {
 												}}
 											/>
 											<StyledToggleLabel>
-												{consent[key] ? t("common:yes") : t("common:no")}
+												{key === "necessary" || consent[key]
+													? t("common:yes")
+													: t("common:no")}
 											</StyledToggleLabel>
 										</label>
 									</td>
@@ -107,8 +115,9 @@ const Page: NextPage<PageProps> = props => {
 	);
 };
 
-export const getStaticProps: GetStaticProps = async context => {
+export const getServerSideProps: GetServerSideProps<PageProps> = async context => {
 	const apolloClient = initializeApollo();
+
 	await contentfulQuery(apolloClient, {
 		query: GET_LEGAL_PAGE,
 		variables: {
@@ -117,10 +126,13 @@ export const getStaticProps: GetStaticProps = async context => {
 		},
 	});
 
-	return addApolloState<StaticPageProps>(apolloClient, {
+	return addApolloState(apolloClient, {
 		props: {
 			...(await serverSideTranslations(context.locale)),
+			session: await getSession(context),
+			providers: await getProviders(),
 			locale: context.locale,
+			consent: getServerSideCookieConsent(context),
 		},
 	});
 };
diff --git a/src/templates/wishlist/index.tsx b/src/templates/wishlist/index.tsx
index c25b7f1a..b6bfb348 100644
--- a/src/templates/wishlist/index.tsx
+++ b/src/templates/wishlist/index.tsx
@@ -1,12 +1,12 @@
 import { StyledButton } from "@/atoms/button/styled";
 import Typography from "@/atoms/typography";
 import Layout from "@/groups/layout";
-import { AddWishModalProvider, useAddWishModal } from "@/ions/contexts/add-wish-modal";
 import { RawBreadcrumb } from "@/ions/contexts/breadcrumbs/types";
-import { SigninModalProvider, useSigninModal } from "@/ions/contexts/signin-modal";
-import { WishProvider } from "@/ions/contexts/wish";
-import { useWishlist, WishlistProvider } from "@/ions/contexts/wishlist";
 import { useScrollY } from "@/ions/hooks/scroll-y";
+import { useError } from "@/ions/stores/error";
+import { useSigninModal } from "@/ions/stores/modal/signin";
+import { useAddWishModal } from "@/ions/stores/modal/wish";
+import { useWish } from "@/ions/stores/wish";
 import { pxToRem } from "@/ions/utils/unit";
 import { Column, Grid, Row } from "@/molecules/grid";
 import Breadcrumbs from "@/organisms/breadcrumbs";
@@ -16,7 +16,7 @@ import { css, Global } from "@emotion/react";
 import { useSession } from "next-auth/client";
 import { useTranslation } from "next-i18next";
 import dynamic from "next/dynamic";
-import React, { FC, memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { StyledButtonWrapper, StyledWishWrapper } from "./styled";
 
 const Snackbar = dynamic(async () => import("@/molecules/snackbar"));
@@ -27,11 +27,17 @@ export interface WishlistProps {
 	data: { wishes: Wish[] };
 }
 
-const Wishlist = () => {
+const Wishlist = ({ data: { wishes } }: WishlistProps) => {
 	const [session] = useSession();
-	const { wishes, error, setError } = useWishlist();
-	const { open: openAddWishModal, isOpen: isAddWishModalOpen } = useAddWishModal();
-	const { open: openSigninModal, isOpen: isSigninModalOpen } = useSigninModal();
+	const setError = useError(state => state.setError);
+	const error = useError(state => state.error);
+	const isAddWishModalOpen = useAddWishModal(state => state.isOpen);
+	const openAddWishModal = useAddWishModal(state => state.open);
+	const isSigninModalOpen = useSigninModal(state => state.isOpen);
+	const openSigninModal = useSigninModal(state => state.open);
+	const setId = useWish(state => state.setId);
+	const setBody = useWish(state => state.setBody);
+	const setSubject = useWish(state => state.setSubject);
 	const scrollY = useScrollY(true);
 	const { t } = useTranslation(["navigation", "common", "wishlist", "meta"]);
 	const breadcrumbs: RawBreadcrumb[] = useMemo(
@@ -92,6 +98,9 @@ const Wishlist = () => {
 								primary
 								type="button"
 								onClick={() => {
+									setId();
+									setBody();
+									setSubject();
 									openAddWishModal();
 								}}
 							>
@@ -130,20 +139,4 @@ const Wishlist = () => {
 	);
 };
 
-const MemoizedWishlist = memo(Wishlist);
-
-const StatefulWishlist: FC<WishlistProps> = ({ data }) => {
-	return (
-		<SigninModalProvider>
-			<AddWishModalProvider>
-				<WishlistProvider initialState={data?.wishes}>
-					<WishProvider>
-						<MemoizedWishlist />
-					</WishProvider>
-				</WishlistProvider>
-			</AddWishModalProvider>
-		</SigninModalProvider>
-	);
-};
-
-export default StatefulWishlist;
+export default memo(Wishlist);
diff --git a/src/types/index.ts b/src/types/index.ts
index 17dcd96a..624eac25 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -2,6 +2,7 @@ import { APOLLO_STATE_PROP_NAME } from "@/ions/constants";
 import { NormalizedCacheObject } from "@apollo/client";
 import { Session } from "next-auth";
 import { ClientSafeProvider } from "next-auth/client";
+import { AppProps as NextAppProps } from "next/app";
 import { CookieConsent } from "use-cookie-consent";
 
 export interface SigninFormProps {
@@ -30,3 +31,7 @@ export interface StaticPageProps {
 	locale: string;
 	[APOLLO_STATE_PROP_NAME]?: NormalizedCacheObject;
 }
+
+export interface AppProps extends NextAppProps<PageProps> {
+	pageProps: PageProps;
+}
diff --git a/yarn.lock b/yarn.lock
index 43cb7347..66eef3d4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -12592,6 +12592,11 @@ zen-observable@0.8.15, zen-observable@^0.8.0:
   resolved "https://registry.yarnpkg.com/zen-observable/-/zen-observable-0.8.15.tgz#96415c512d8e3ffd920afd3889604e30b9eaac15"
   integrity sha512-PQ2PC7R9rslx84ndNBZB/Dkv8V8fZEpk83RLgXtYd0fwUgEjseMn1Dgajh2x6S8QbZAFa9p2qVCEuYZNgve0dQ==
 
+zustand@3.5.10:
+  version "3.5.10"
+  resolved "https://registry.yarnpkg.com/zustand/-/zustand-3.5.10.tgz#d2622efd64530ffda285ee5b13ff645b68ab0faf"
+  integrity sha512-upluvSRWrlCiExu2UbkuMIPJ9AigyjRFoO7O9eUossIj7rPPq7pcJ0NKk6t2P7KF80tg/UdPX6/pNKOSbs9DEg==
+
 zwitch@^1.0.0:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/zwitch/-/zwitch-1.0.5.tgz#d11d7381ffed16b742f6af7b3f223d5cd9fe9920"