diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 1bfaa9b..6f4e6b4 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -8,12 +8,14 @@
       "name": "frontend",
       "version": "0.0.0",
       "dependencies": {
+        "@reduxjs/toolkit": "^2.14.0",
         "@tailwindcss/vite": "^4.3.3",
         "backend": "^0.0.0",
         "firebase": "^13.2.0",
         "lucide-react": "^1.64.0",
         "react": "^19.2.8",
         "react-dom": "^19.2.8",
+        "react-redux": "^9.3.1",
         "react-router": "^8.5.1",
         "tailwind-merge": "^3.7.0",
         "tailwindcss": "^4.3.3"
@@ -2487,6 +2489,36 @@
       "integrity": "sha512-b1UQwcEZ4yCnMCD8DAL1VlbvBJE9/IX4FTIp7BG1xYpf29SLazLSrqUkj4w7Y5y7cCVP6E5tcqqcI0xemPkHug==",
       "license": "BSD-3-Clause"
     },
+    "node_modules/@reduxjs/toolkit": {
+      "version": "2.14.0",
+      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.14.0.tgz",
+      "integrity": "sha512-m/PxMwRe0xLL6XUsAgy0YjInklHcfi9uMwFhJk+QINqjxqPvyc89T5cMjszA5bDmTE0gwGc7zr9LRO4gL+mhaw==",
+      "license": "MIT",
+      "dependencies": {
+        "@standard-schema/spec": "^1.0.0",
+        "@standard-schema/utils": "^0.3.0",
+        "immer": "^11.2.9",
+        "redux": "^5.0.1",
+        "redux-thunk": "^3.1.0",
+        "reselect": "^5.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.9.0 || ^17.0.0 || ^18 || ^19",
+        "react-redux": "^7.2.1 || ^8.1.3 || ^9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-redux": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@remix-run/route-pattern": {
       "version": "0.22.1",
       "resolved": "https://registry.npmjs.org/@remix-run/route-pattern/-/route-pattern-0.22.1.tgz",
@@ -2596,9 +2628,6 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2615,9 +2644,6 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2634,9 +2660,6 @@
       "cpu": [
         "ppc64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2653,9 +2676,6 @@
       "cpu": [
         "s390x"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2672,9 +2692,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2691,9 +2708,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2757,6 +2771,18 @@
       "integrity": "sha512-2j9bGt5Jh8hj+vPtgzPtl72j0yRxHAyumoo6TNfAjsLB04UtpSvPbPcDcBMxz7n+9CYB0c1GxQFxYRg2jimqGw==",
       "license": "MIT"
     },
+    "node_modules/@standard-schema/spec": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.1.0.tgz",
+      "integrity": "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==",
+      "license": "MIT"
+    },
+    "node_modules/@standard-schema/utils": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/utils/-/utils-0.3.0.tgz",
+      "integrity": "sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==",
+      "license": "MIT"
+    },
     "node_modules/@tailwindcss/node": {
       "version": "4.3.3",
       "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.3.3.tgz",
@@ -3465,6 +3491,12 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/use-sync-external-store": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.6.tgz",
+      "integrity": "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==",
+      "license": "MIT"
+    },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "8.71.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.71.0.tgz",
@@ -4820,6 +4852,16 @@
         "node": ">= 4"
       }
     },
+    "node_modules/immer": {
+      "version": "11.2.10",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-11.2.10.tgz",
+      "integrity": "sha512-pzANBj+0A9u+prdhBJ14DVi44vCvVUQzBa8DKt6I0AMCokPHtt722BK9IX5bFC70xUSU9TnzLRIJLTGqIzjEFw==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/immer"
+      }
+    },
     "node_modules/import-in-the-middle": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/import-in-the-middle/-/import-in-the-middle-3.6.0.tgz",
@@ -5785,6 +5827,29 @@
       "license": "MIT",
       "peer": true
     },
+    "node_modules/react-redux": {
+      "version": "9.3.1",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.3.1.tgz",
+      "integrity": "sha512-vxMLT0lalUjbZPkoTepWyKAZbjIIFssNx/CEL9lTfwQBU6XpkGSmCNdcCIrkOBUgB68uftZMnbXVb6DwGnhRKQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/use-sync-external-store": "^0.0.6",
+        "use-sync-external-store": "^1.4.0"
+      },
+      "peerDependencies": {
+        "@types/react": "^18.2.25 || ^19",
+        "react": "^18.0 || ^19",
+        "redux": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "redux": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-router": {
       "version": "8.5.1",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-8.5.1.tgz",
@@ -5829,6 +5894,21 @@
         "node": ">=8"
       }
     },
+    "node_modules/redux": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
+      "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
+      "license": "MIT"
+    },
+    "node_modules/redux-thunk": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-3.1.0.tgz",
+      "integrity": "sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "redux": "^5.0.0"
+      }
+    },
     "node_modules/require-directory": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
@@ -5861,6 +5941,12 @@
         "node": ">=9.3.0 || >=8.10.0 <9.0.0"
       }
     },
+    "node_modules/reselect": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/reselect/-/reselect-5.3.0.tgz",
+      "integrity": "sha512-XGoLeRAVzUTcJ1qkxPQhDJyIZ5d6zzZD9nT7AEZOaaU9UbWclhycElmhO+VD5bFeLuzhPBaOV2oXC8uG35ZSpg==",
+      "license": "MIT"
+    },
     "node_modules/rettime": {
       "version": "0.11.12",
       "resolved": "https://registry.npmjs.org/rettime/-/rettime-0.11.12.tgz",
@@ -6345,6 +6431,15 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/use-sync-external-store": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.7.0.tgz",
+      "integrity": "sha512-6L+EeigHMQhdaIPNIFUKwfWJSwWFQ8gJbJ2DLOs5sDIegTwR9fRxvnM3uciHKjIZhFz+KAv2emhWMRvDmMcY8A==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/vite": {
       "version": "8.3.5",
       "resolved": "https://registry.npmjs.org/vite/-/vite-8.3.5.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index e8fb6b5..9fbe076 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -13,12 +13,14 @@
     "format:check": "prettier --check . --ignore-path ../.prettierignore"
   },
   "dependencies": {
+    "@reduxjs/toolkit": "^2.14.0",
     "@tailwindcss/vite": "^4.3.3",
     "backend": "^0.0.0",
     "firebase": "^13.2.0",
     "lucide-react": "^1.64.0",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
+    "react-redux": "^9.3.1",
     "react-router": "^8.5.1",
     "tailwind-merge": "^3.7.0",
     "tailwindcss": "^4.3.3"
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index abb729e..4b8c57a 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -9,6 +9,9 @@ import BackToTopButton from "./components/buttons/BackToTopButton";
 import LoginPage from "./pages/loginPage/loginPage";
 import AccountPage from "./pages/accountPage/accountPage";
 import { Routes, Route, useLocation, useParams } from "react-router";
+import Notification from "./components/Notification";
+import { useSelector } from "react-redux";
+import type { RootState } from "./state/store";
 
 function CategoryRoute() {
   const { category } = useParams<{ category: string }>();
@@ -21,13 +24,16 @@ function BuilderRoute() {
 }
 
 function App() {
+  const accountKey = useSelector(
+    (state: RootState) => state.auth.user?.uid ?? "guest",
+  );
   return (
     <div className="flex min-h-screen flex-col">
       <header className="sticky top-0 z-50 bg-background">
         <NavBar />
       </header>
       <main className="flex-1">
-        <Routes>
+        <Routes key={accountKey}>
           <Route path="/" element={<HomePage />} />
           <Route path="/explore" element={<CategoryPage />} />
           <Route
@@ -43,6 +49,7 @@ function App() {
       </main>
       <Footer />
       <BackToTopButton />
+      <Notification />
     </div>
   );
 }
diff --git a/frontend/src/api/auth.ts b/frontend/src/api/auth.ts
new file mode 100644
index 0000000..f45779b
--- /dev/null
+++ b/frontend/src/api/auth.ts
@@ -0,0 +1,84 @@
+import {
+  GoogleAuthProvider,
+  createUserWithEmailAndPassword,
+  onAuthStateChanged,
+  signInWithEmailAndPassword,
+  signInWithPopup,
+  signOut,
+} from "firebase/auth";
+import { auth } from "@/lib/firebase";
+import { authFailed, authResolved } from "@/state/authSlice";
+import { restoreBuild } from "@/state/selectedPartsSlice";
+import { dismissNotification } from "@/state/notificationSlice";
+import { loadBuildDraft, saveBuildDraft } from "@/state/buildStorage";
+import type { createBuildStore } from "@/state/store";
+
+// Called once at startup. Firebase remains responsible for restoring the session
+// and issuing tokens; Redux contains only the profile used by the interface.
+export function startAuthSync(store: ReturnType<typeof createBuildStore>) {
+  let storageKey: string | null = null;
+  let previousDraft = store.getState().selectedParts;
+
+  const stopSaving = store.subscribe(() => {
+    const draft = store.getState().selectedParts;
+    if (storageKey && draft !== previousDraft) {
+      previousDraft = draft;
+      saveBuildDraft(storageKey, draft);
+    }
+  });
+
+  const stopAuth = onAuthStateChanged(
+    auth,
+    (user) => {
+      const nextKey = `pc-builder-v2:${user?.uid ?? "guest"}`;
+      if (nextKey !== storageKey) {
+        // Pause persistence while replacing the previous account's draft.
+        storageKey = null;
+        store.dispatch(restoreBuild(loadBuildDraft(nextKey)));
+        store.dispatch(dismissNotification());
+        previousDraft = store.getState().selectedParts;
+        storageKey = nextKey;
+        saveBuildDraft(storageKey, previousDraft);
+      }
+      store.dispatch(
+        authResolved(
+          user
+            ? {
+                uid: user.uid,
+                displayName: user.displayName,
+                email: user.email,
+              }
+            : null,
+        ),
+      );
+    },
+    () => {
+      store.dispatch(
+        authFailed(
+          "Could not check your sign-in status. Please refresh and try again.",
+        ),
+      );
+    },
+  );
+
+  return () => {
+    stopAuth();
+    stopSaving();
+  };
+}
+
+export async function login() {
+  await signInWithPopup(auth, new GoogleAuthProvider());
+}
+
+export async function loginWithEmail(email: string, password: string) {
+  await signInWithEmailAndPassword(auth, email.trim(), password);
+}
+
+export async function registerWithEmail(email: string, password: string) {
+  await createUserWithEmailAndPassword(auth, email.trim(), password);
+}
+
+export async function logout() {
+  await signOut(auth);
+}
diff --git a/frontend/src/api/graphql.ts b/frontend/src/api/graphql.ts
index e699333..ecdd5d1 100644
--- a/frontend/src/api/graphql.ts
+++ b/frontend/src/api/graphql.ts
@@ -30,4 +30,4 @@ export async function graphql<T>(
   }
 
   return result.data;
-}
\ No newline at end of file
+}
diff --git a/frontend/src/api/parts.ts b/frontend/src/api/parts.ts
index 4a1a0c4..5738522 100644
--- a/frontend/src/api/parts.ts
+++ b/frontend/src/api/parts.ts
@@ -140,10 +140,10 @@ export async function getParts(
 export async function getPartSpecifications(
   id: string,
   signal?: AbortSignal,
-): Promise<PcPart['details']> {
-  const response = await fetch('/api/graphql', {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
+): Promise<PcPart["details"]> {
+  const response = await fetch("/api/graphql", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
     signal,
     body: JSON.stringify({
       query: `
@@ -155,26 +155,26 @@ export async function getPartSpecifications(
       `,
       variables: { id },
     }),
-  })
+  });
 
   if (!response.ok) {
-    throw new Error(`Could not load specifications (HTTP ${response.status}).`)
+    throw new Error(`Could not load specifications (HTTP ${response.status}).`);
   }
 
   const result: {
-    data?: { part: { specs: PcPart['details'] } | null }
-    errors?: { message: string }[]
-  } = await response.json()
+    data?: { part: { specs: PcPart["details"] } | null };
+    errors?: { message: string }[];
+  } = await response.json();
 
   if (result.errors?.length) {
-    throw new Error(result.errors.map((error) => error.message).join(', '))
+    throw new Error(result.errors.map((error) => error.message).join(", "));
   }
   if (!result.data) {
-    throw new Error('The server returned no data.')
+    throw new Error("The server returned no data.");
   }
   if (!result.data.part) {
-    throw new Error('Part not found.')
+    throw new Error("Part not found.");
   }
 
-  return result.data.part.specs
+  return result.data.part.specs;
 }
diff --git a/frontend/src/components/AddToBuildFeedback.tsx b/frontend/src/components/AddToBuildFeedback.tsx
index acfe6a8..058ef52 100644
--- a/frontend/src/components/AddToBuildFeedback.tsx
+++ b/frontend/src/components/AddToBuildFeedback.tsx
@@ -1,9 +1,8 @@
 import type { PcPart } from "@/types/types";
-import { useBuild } from "@/context/BuildContext";
 import { useEffect, useId, useRef } from "react";
-import { flushSync } from "react-dom";
 import { ArrowRight, X } from "lucide-react";
-import SuccessNotification from "./SuccessNotification";
+import { useSelector } from "react-redux";
+import { selectPartByCategory } from "@/state/selectedPartsSlice";
 
 type AddToBuildFeedbackProps = {
   part: PcPart;
@@ -12,14 +11,22 @@ type AddToBuildFeedbackProps = {
   onClose: () => void;
 };
 
-export default function AddToBuildFeedback({ part, stage, onReplace, onClose }: AddToBuildFeedbackProps) {
+export default function AddToBuildFeedback({
+  part,
+  stage,
+  onReplace,
+  onClose,
+}: AddToBuildFeedbackProps) {
   const dialogRef = useRef<HTMLDialogElement>(null);
   const titleId = useId();
   const descriptionId = useId();
-  const { parts } = useBuild();
-  const savedPart = parts[part.category];
-  const secondaryButton = "cursor-pointer rounded-lg border border-secondary/50 px-4 py-2 text-xs font-medium text-white transition-colors hover:bg-surface-dark";
-  const primaryButton = "cursor-pointer rounded-lg border border-accent bg-accent px-5 py-2 text-xs font-semibold text-background transition-colors hover:bg-accent/90";
+  const savedPart = useSelector((state) =>
+    selectPartByCategory(state, part.category),
+  );
+  const secondaryButton =
+    "cursor-pointer rounded-lg border border-secondary/50 px-4 py-2 text-xs font-medium text-white transition-colors hover:bg-surface-dark";
+  const primaryButton =
+    "cursor-pointer rounded-lg border border-accent bg-accent px-5 py-2 text-xs font-semibold text-background transition-colors hover:bg-accent/90";
 
   useEffect(() => {
     dialogRef.current?.showModal();
@@ -29,23 +36,6 @@ export default function AddToBuildFeedback({ part, stage, onReplace, onClose }:
     dialogRef.current?.close();
   }
 
-  function goToBuild() {
-    // Remove the feedback before the browser saves this page for Back navigation.
-    flushSync(() => onClose());
-    window.location.href = "/project2/builder";
-  }
-
-  if (stage === "success") {
-    return (
-      <SuccessNotification
-        title="Component added"
-        description="Want to go to your build?"
-        onClose={onClose}
-        action={{ label: "View build", onClick: goToBuild }}
-      />
-    );
-  }
-
   return (
     <dialog
       ref={dialogRef}
@@ -65,11 +55,18 @@ export default function AddToBuildFeedback({ part, stage, onReplace, onClose }:
 
       <div className="p-5 sm:p-6">
         <header className="pr-6">
-          <div className="min-w-0"> 
-            <h2 id={titleId} className="font-semibold tracking-tight text-lg sm:text-xl">
+          <div className="min-w-0">
+            <h2
+              id={titleId}
+              className="font-semibold tracking-tight text-lg sm:text-xl"
+            >
               {stage === "confirm" ? "Replace component?" : "Adding component…"}
             </h2>
-            <p id={descriptionId} className="text-secondary mt-1.5 text-sm leading-relaxed" role={stage === "confirm" ? undefined : "status"}>
+            <p
+              id={descriptionId}
+              className="text-secondary mt-1.5 text-sm leading-relaxed"
+              role={stage === "confirm" ? undefined : "status"}
+            >
               {stage === "confirm"
                 ? `You have already selected ${savedPart?.name}. Would you like to replace it with ${part.name}?`
                 : `Adding ${part.name} to your build.`}
@@ -91,10 +88,19 @@ export default function AddToBuildFeedback({ part, stage, onReplace, onClose }:
               )}
               <div className="min-w-0">
                 <p className="text-[10px] text-secondary">Current component</p>
-                <p className="mt-0.5 truncate text-xs font-semibold" title={savedPart?.name}>{savedPart?.name}</p>
+                <p
+                  className="mt-0.5 truncate text-xs font-semibold"
+                  title={savedPart?.name}
+                >
+                  {savedPart?.name}
+                </p>
               </div>
             </div>
-            <ArrowRight size={21} className="justify-self-center rotate-90 text-secondary sm:rotate-0" aria-hidden="true" />
+            <ArrowRight
+              size={21}
+              className="justify-self-center rotate-90 text-secondary sm:rotate-0"
+              aria-hidden="true"
+            />
             <div className="flex min-w-0 items-center gap-3 rounded-xl border border-accent/50 bg-accent/10 p-3 shadow-sm shadow-black/20">
               {part.image_url && (
                 <div className="size-16 shrink-0 overflow-hidden rounded-md bg-white p-2">
@@ -107,14 +113,23 @@ export default function AddToBuildFeedback({ part, stage, onReplace, onClose }:
               )}
               <div className="min-w-0">
                 <p className="text-[10px] text-secondary">New component</p>
-                <p className="mt-0.5 truncate text-xs font-semibold" title={part.name}>{part.name}</p>
+                <p
+                  className="mt-0.5 truncate text-xs font-semibold"
+                  title={part.name}
+                >
+                  {part.name}
+                </p>
               </div>
             </div>
           </div>
         )}
         {stage === "confirm" && (
           <div className="mt-5 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end">
-            <button type="button" onClick={closeFeedback} className={secondaryButton}>
+            <button
+              type="button"
+              onClick={closeFeedback}
+              className={secondaryButton}
+            >
               Keep current component
             </button>
             <button type="button" onClick={onReplace} className={primaryButton}>
diff --git a/frontend/src/components/AuthButton.tsx b/frontend/src/components/AuthButton.tsx
index f42ecb8..cb0da12 100644
--- a/frontend/src/components/AuthButton.tsx
+++ b/frontend/src/components/AuthButton.tsx
@@ -1,26 +1,18 @@
 import { Link } from "react-router";
 import { UserRound } from "lucide-react";
-import { useAuth } from "@/context/AuthContext";
+import { useSelector } from "react-redux";
+import type { RootState } from "@/state/store";
 
 export default function AuthButton() {
-  const { user, loading } = useAuth();
-
-  if (loading) {
-    return (
-      <span role="status" className="text-sm text-gray-300">
-        Loading...
-      </span>
-    );
-  }
+  const user = useSelector((state: RootState) => state.auth.user);
 
   return (
     <Link
       to={user ? "/account" : "/login"}
-      aria-label={user ? "My account" : "Log in"}
-      className="flex items-center gap-2 rounded-lg px-3 py-2 text-white transition duration-200 hover:bg-surface hover:text-accent motion-safe:hover:scale-105 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent"
+      className="flex items-center gap-1 hover:text-accent"
     >
-      <UserRound aria-hidden="true" className="h-6 w-6" />
-      {!user && <span className="text-sm">Log in</span>}
+      <UserRound />
+      {user ? "My account" : "Log in"}
     </Link>
   );
 }
diff --git a/frontend/src/components/DesktopComponentDetailPage.tsx b/frontend/src/components/DesktopComponentDetailPage.tsx
index 0385996..716032a 100644
--- a/frontend/src/components/DesktopComponentDetailPage.tsx
+++ b/frontend/src/components/DesktopComponentDetailPage.tsx
@@ -1,4 +1,3 @@
-import { useBuild } from "@/context/BuildContext";
 import { Trash2, X } from "lucide-react";
 import { useId, useState } from "react";
 import { Link } from "react-router";
@@ -9,13 +8,14 @@ import {
   getSpecifications,
 } from "@/utils/partSpecifications";
 import AddToBuildButton from "./buttons/AddToBuildButton";
+import { useSelector } from "react-redux";
+import { selectIsPartInBuild } from "@/state/selectedPartsSlice";
 
 export default function DesktopComponentDetailPage({ part }: { part: PcPart }) {
   const [expanded, setExpanded] = useState(false);
   const [failedImage, setFailedImage] = useState("");
   const specificationsId = useId();
-  const { parts } = useBuild();
-  const inBuild = parts[part.category]?.id === part.id;
+  const inBuild = useSelector((state) => selectIsPartInBuild(state, part));
   const specifications = getSpecifications(part);
   const category =
     categories.find((item) => item.value === part.category)?.label ??
diff --git a/frontend/src/components/MobileComponentDetailPage.tsx b/frontend/src/components/MobileComponentDetailPage.tsx
index 2988a5d..048f4a6 100644
--- a/frontend/src/components/MobileComponentDetailPage.tsx
+++ b/frontend/src/components/MobileComponentDetailPage.tsx
@@ -1,7 +1,7 @@
 import type { PcPart } from "@/types/types";
 import { useRef, useState } from "react";
 import { usePartImageLayout } from "@/hooks/usePartImageLayout";
-import { X } from "lucide-react"
+import { X } from "lucide-react";
 import {
   formatSpecification,
   getSpecifications,
@@ -54,11 +54,14 @@ export default function ComponentDetailPage({ part }: { part: PcPart }) {
             aria-label="Close component details"
             className="fixed"
           >
-            <X size={40} className="fixed right-10"/>
+            <X size={40} className="fixed right-10" />
           </button>
         </form>
 
-        <h2 ref={titleRef} className="w-[calc(100%-9rem)] text-lg text-center wrap-anywhere">
+        <h2
+          ref={titleRef}
+          className="w-[calc(100%-9rem)] text-lg text-center wrap-anywhere"
+        >
           {part.name}
         </h2>
 
diff --git a/frontend/src/components/SuccessNotification.tsx b/frontend/src/components/Notification.tsx
similarity index 52%
rename from frontend/src/components/SuccessNotification.tsx
rename to frontend/src/components/Notification.tsx
index ee90cc0..4edc7b4 100644
--- a/frontend/src/components/SuccessNotification.tsx
+++ b/frontend/src/components/Notification.tsx
@@ -1,36 +1,71 @@
-import { useEffect, useId, useRef } from "react";
 import { CircleCheck, X } from "lucide-react";
+import { useDispatch, useSelector, useStore } from "react-redux";
+import { useNavigate } from "react-router";
+import type { RootState } from "@/state/store";
+import { dismissNotification } from "@/state/notificationSlice";
+import { useEffect, useId, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+
+export default function Notification() {
+  const dispatch = useDispatch();
+  const store = useStore<RootState>();
+  const navigate = useNavigate();
+
+  const current = useSelector((state: RootState) => state.notification.current);
 
-type SuccessNotificationProps = {
-  title: string;
-  description: string;
-  onClose: () => void;
-  action?: { label: string; onClick: () => void };
-};
-
-export default function SuccessNotification({
-  title,
-  description,
-  onClose,
-  action,
-}: SuccessNotificationProps) {
   const notificationRef = useRef<HTMLDivElement>(null);
   const titleId = useId();
   const descriptionId = useId();
 
+  const [portalTarget, setPortalTarget] = useState<Element>(
+    () => document.body,
+  );
+
+  useEffect(() => {
+    function updateTarget() {
+      const dialogs = Array.from(
+        document.querySelectorAll<HTMLDialogElement>("dialog:modal"),
+      );
+
+      const focusedDialog = document.activeElement?.closest("dialog:modal");
+
+      setPortalTarget(focusedDialog ?? dialogs.at(-1) ?? document.body);
+    }
+
+    updateTarget();
+
+    const observer = new MutationObserver(updateTarget);
+
+    observer.observe(document.body, {
+      subtree: true,
+      childList: true,
+      attributes: true,
+      attributeFilter: ["open"],
+    });
+
+    return () => observer.disconnect();
+  }, []);
+
   useEffect(() => {
     const notification = notificationRef.current;
-    if (!notification) return;
-    // Stay above the page without locking scrolling or moving keyboard focus.
+    if (!current || !notification || !notification.isConnected) return;
+
     notification.showPopover();
 
+    // An older notification must not dismiss a newer replacement.
+    const dismissCurrent = () => {
+      if (store.getState().notification.current === current) {
+        dispatch(dismissNotification());
+      }
+    };
+
     let exitAnimation: Animation | undefined;
     const timer = window.setTimeout(() => {
-      if (!notification.matches(":popover-open")) return;
       if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
-        notification.hidePopover();
+        dismissCurrent();
         return;
       }
+
       exitAnimation = notification.animate(
         [
           { transform: "translateX(0)", opacity: 1 },
@@ -38,20 +73,50 @@ export default function SuccessNotification({
         ],
         { duration: 250, easing: "ease-in", fill: "forwards" },
       );
-      exitAnimation.onfinish = () => notification.hidePopover();
+      exitAnimation.onfinish = dismissCurrent;
     }, 5000);
+
     return () => {
       window.clearTimeout(timer);
-      exitAnimation?.cancel();
+      if (exitAnimation) {
+        exitAnimation.onfinish = null;
+        exitAnimation.cancel();
+      }
     };
-  }, []);
+  }, [current, dispatch, store, portalTarget]);
+
+  if (!current) return null;
+
+  const { title, description, button } = current;
+
+  const onClose = () => {
+    if (store.getState().notification.current === current) {
+      dispatch(dismissNotification());
+    }
+  };
 
-  return (
+  const action = button
+    ? {
+        label: button.label,
+        onClick: () => {
+          onClose();
+          navigate(button.to);
+        },
+      }
+    : undefined;
+
+  return createPortal(
     <div
+      key={current.id}
       ref={notificationRef}
       popover="manual"
       onToggle={(event) => {
-        if (event.newState === "closed") onClose();
+        if (
+          event.currentTarget === notificationRef.current &&
+          event.newState === "closed"
+        ) {
+          onClose();
+        }
       }}
       aria-labelledby={titleId}
       aria-describedby={descriptionId}
@@ -59,12 +124,13 @@ export default function SuccessNotification({
     >
       <button
         type="button"
-        onClick={() => notificationRef.current?.hidePopover()}
+        onClick={onClose}
         aria-label="Close feedback"
         className="absolute right-1 top-1 flex size-8 cursor-pointer items-center justify-center rounded-lg text-secondary transition-colors hover:bg-surface hover:text-white"
       >
         <X size={17} aria-hidden="true" />
       </button>
+
       <div className="flex items-center gap-3 py-3 pl-4 pr-10">
         <CircleCheck
           size={24}
@@ -95,6 +161,7 @@ export default function SuccessNotification({
       >
         <div className="h-full origin-left animate-[feedback-countdown_5s_linear_forwards] bg-accent" />
       </div>
-    </div>
+    </div>,
+    portalTarget,
   );
 }
diff --git a/frontend/src/components/PcPartCardLayout.tsx b/frontend/src/components/PcPartCardLayout.tsx
index 2abc8f9..70fd031 100644
--- a/frontend/src/components/PcPartCardLayout.tsx
+++ b/frontend/src/components/PcPartCardLayout.tsx
@@ -11,7 +11,7 @@ type PcPartCardLayoutProps = {
   error?: ReactNode;
   skeleton?: boolean;
 };
-//Layot for the PcPartCard and the PcPartCardSkeleton. 
+//Layot for the PcPartCard and the PcPartCardSkeleton.
 export default function PcPartCardLayout({
   image,
   name,
diff --git a/frontend/src/components/buttons/AddToBuildButton.tsx b/frontend/src/components/buttons/AddToBuildButton.tsx
index 8107348..c4f1e18 100644
--- a/frontend/src/components/buttons/AddToBuildButton.tsx
+++ b/frontend/src/components/buttons/AddToBuildButton.tsx
@@ -1,11 +1,19 @@
 import type { ReactNode } from "react";
 import { useRef, useState } from "react";
 import type { PcPart } from "@/types/types";
-import { useBuild } from "@/context/BuildContext";
 import { twMerge } from "tailwind-merge";
 import Button from "./Button";
 import AddToBuildFeedback from "../AddToBuildFeedback";
 import { getPartSpecifications } from "@/api/parts";
+import {
+  addPart,
+  removePart,
+  selectIsPartInBuild,
+  selectIsCategoryEmpty,
+} from "@/state/selectedPartsSlice";
+import { useSelector, useDispatch, useStore } from "react-redux";
+import type { RootState } from "@/state/store";
+import { showNotification } from "@/state/notificationSlice";
 
 type AddToBuildButtonProps = {
   part: PcPart;
@@ -18,41 +26,69 @@ export default function AddToBuildButton({
   children,
   className,
 }: AddToBuildButtonProps) {
-  const { parts, addPart, removePart } = useBuild();
   const [showFeedback, setShowFeedback] = useState(false);
-  const inBuild = parts[part.category]?.id === part.id;
-  const [stage, setStage] = useState<"confirm" | "loading" | "success">("confirm");
+  const inBuild = useSelector((state) => selectIsPartInBuild(state, part));
+  const [stage, setStage] = useState<"confirm" | "loading">("confirm");
   const adding = useRef(false);
+  const dispatch = useDispatch();
+  const store = useStore<RootState>();
+  const isCategoryEmpty = useSelector((state) =>
+    selectIsCategoryEmpty(state, part.category),
+  );
 
-  async function handleAdd(){ //Reuse existing specifications, or fetch them before adding the part.
+  async function handleAdd() {
+    //Reuse existing specifications, or fetch them before adding the part.
     if (adding.current) return;
     adding.current = true;
+    const accountId = store.getState().auth?.user?.uid;
     const loadingTimer = window.setTimeout(() => setStage("loading"), 500);
     try {
-      const hasSpecifications = part.details && Object.keys(part.details).length > 0;
-      const specifications = hasSpecifications
+      const hasSpecifications =
+        part.details && Object.keys(part.details).length > 0;
+      const specifications = hasSpecifications //if the parts doesnt include specifications, then fetch them
         ? part.details
         : await getPartSpecifications(part.id);
-      const completePart = {...part, details: specifications,} as PcPart;
-      addPart(completePart);
-      setStage("success");
+      if (store.getState().auth?.user?.uid !== accountId) return;
+      const completePart = { ...part, details: specifications } as PcPart; //the complete part.
+      dispatch(addPart(completePart)); //adding part using redux
+      setShowFeedback(false);
+      dispatch(
+        showNotification({
+          title: "Component added",
+          description: `${part.name} was added to your build.`,
+          button: {
+            label: "View build",
+            to: "/builder",
+          },
+        }),
+      );
     } finally {
       window.clearTimeout(loadingTimer);
       adding.current = false;
     }
   }
 
-  async function handleClick(){
+  async function handleClick() {
     if (adding.current) return;
     if (inBuild) {
-      removePart(part.category);
+      dispatch(removePart(part.category));
       setShowFeedback(false);
+      dispatch(
+        showNotification({
+          title: "Component removed",
+          description: `${part.name} was removed from your build.`,
+          button: {
+            label: "View build",
+            to: "/builder",
+          },
+        }),
+      );
       return;
     }
     setStage("confirm");
     setShowFeedback(true);
-    if(!parts[part.category]){
-      await handleAdd()
+    if (isCategoryEmpty) {
+      await handleAdd();
     }
   }
 
@@ -69,7 +105,7 @@ export default function AddToBuildButton({
         {children ?? (inBuild ? "Remove from build" : "Add to build")}
       </Button>
 
-      {showFeedback && (stage !== "confirm" || parts[part.category]) && (
+      {showFeedback && (stage !== "confirm" || !isCategoryEmpty) && (
         <AddToBuildFeedback
           part={part}
           onReplace={handleAdd}
diff --git a/frontend/src/components/buttons/Button.tsx b/frontend/src/components/buttons/Button.tsx
index fc7983d..fb27531 100644
--- a/frontend/src/components/buttons/Button.tsx
+++ b/frontend/src/components/buttons/Button.tsx
@@ -30,7 +30,11 @@ export default function Button({
       }}
       className={twMerge(
         "w-full rounded-lg bg-accent px-2 py-1.5 text-sm text-black",
-        disabled ? "cursor-not-allowed" : inactive ? "cursor-default" : "cursor-pointer",
+        disabled
+          ? "cursor-not-allowed"
+          : inactive
+            ? "cursor-default"
+            : "cursor-pointer",
         className,
       )}
     >
diff --git a/frontend/src/components/pageSections/Header.tsx b/frontend/src/components/pageSections/Header.tsx
index d746c80..02f633e 100644
--- a/frontend/src/components/pageSections/Header.tsx
+++ b/frontend/src/components/pageSections/Header.tsx
@@ -1,9 +1,10 @@
 import { useState, type FormEvent } from "react";
 import { Link, NavLink, useNavigate } from "react-router";
 import { Menu, X } from "lucide-react";
-import { useBuild } from "@/context/BuildContext";
 import AuthButton from "@/components/AuthButton";
 import SearchComponent from "@/components/SearchComponent";
+import { useSelector } from "react-redux";
+import type { RootState } from "@/state/store";
 
 const navigation = [
   { to: "/", label: "Home" },
@@ -16,7 +17,7 @@ export default function NavBar() {
   const [search, setSearch] = useState("");
   const [menuOpen, setMenuOpen] = useState(false);
   const navigate = useNavigate();
-  const { parts } = useBuild();
+  const parts = useSelector((state: RootState) => state.selectedParts.parts);
   const selectedCount = Object.keys(parts).length;
 
   function handleSearch(event: FormEvent<HTMLFormElement>) {
@@ -104,7 +105,9 @@ export default function NavBar() {
           </span>
         </span>
       </Link>
-      <div className="self-center"><AuthButton /></div>
+      <div className="self-center">
+        <AuthButton />
+      </div>
       <button
         type="button"
         className="self-center p-2 lg:hidden"
diff --git a/frontend/src/context/AuthContext.ts b/frontend/src/context/AuthContext.ts
deleted file mode 100644
index e6f8682..0000000
--- a/frontend/src/context/AuthContext.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { createContext, useContext } from "react";
-import type { User } from "firebase/auth";
-
-type AuthContextValue = {
-  user: User | null;
-  loading: boolean;
-  login: () => Promise<void>;
-  loginWithEmail: (email: string, password: string) => Promise<void>;
-  registerWithEmail: (email: string, password: string) => Promise<void>;
-  logout: () => Promise<void>;
-};
-
-export const AuthContext = createContext<AuthContextValue | null>(null);
-
-export function useAuth() {
-  const context = useContext(AuthContext);
-
-  if (!context) {
-    throw new Error("useAuth must be used inside AuthProvider");
-  }
-
-  return context;
-}
\ No newline at end of file
diff --git a/frontend/src/context/AuthProvider.tsx b/frontend/src/context/AuthProvider.tsx
deleted file mode 100644
index 92be236..0000000
--- a/frontend/src/context/AuthProvider.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import { useEffect, useState } from "react";
-import type { ReactNode } from "react";
-import {
-  GoogleAuthProvider,
-  onAuthStateChanged,
-  createUserWithEmailAndPassword,
-  signInWithEmailAndPassword,
-  signInWithPopup,
-  signOut,
-} from "firebase/auth";
-import type { User } from "firebase/auth";
-import { auth } from "@/lib/firebase";
-import { AuthContext } from "./AuthContext";
-
-export default function AuthProvider({ children }: { children: ReactNode }) {
-  const [user, setUser] = useState<User | null>(null);
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    return onAuthStateChanged(auth, (currentUser) => {
-      setUser(currentUser);
-      setLoading(false);
-    });
-  }, []);
-
-  async function login() {
-    await signInWithPopup(auth, new GoogleAuthProvider());
-  }
-
-  async function logout() {
-    await signOut(auth);
-  }
-
-  async function loginWithEmail(email: string, password: string) {
-    await signInWithEmailAndPassword(auth, email.trim(), password);
-  }
-
-  async function registerWithEmail(email: string, password: string) {
-    await createUserWithEmailAndPassword(auth, email.trim(), password);
-  }
-
-  return (
-    <AuthContext.Provider
-      value={{
-        user,
-        loading,
-        login,
-        logout,
-        loginWithEmail,
-        registerWithEmail,
-      }}
-    >
-      {children}
-    </AuthContext.Provider>
-  );
-}
diff --git a/frontend/src/context/BuildContext.ts b/frontend/src/context/BuildContext.ts
deleted file mode 100644
index 005776b..0000000
--- a/frontend/src/context/BuildContext.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import { createContext, useContext } from "react";
-import type { PcPart } from "@/types/types";
-
-export type BuildParts = Partial<Record<PcPart["category"], PcPart>>;
-export type SavedBuildInfo = {
-  id: string;
-  title: string;
-  comment: string;
-  isPublished: boolean;
-};
-
-type BuildContextValue = {
-  parts: BuildParts;
-  savedBuild: SavedBuildInfo | null;
-  isDirty: boolean;
-  addPart: (part: PcPart) => void;
-  removePart: (category: PcPart["category"]) => void;
-  resetBuild: () => void;
-  loadBuild: (parts: PcPart[], info: SavedBuildInfo) => void;
-  markSaved: (info: SavedBuildInfo) => void;
-  forgetSavedBuild: (id: string) => void;
-};
-
-export const BuildContext = createContext<BuildContextValue | null>(null);
-
-export function useBuild(): Pick<
-  BuildContextValue,
-  "parts" | "addPart" | "removePart" | "resetBuild"
-> {
-  return useSavedBuild();
-}
-
-export function useSavedBuild() {
-  const context = useContext(BuildContext);
-  if (!context) throw new Error("useBuild must be used inside BuildProvider");
-  return context;
-}
diff --git a/frontend/src/context/BuildProvider.tsx b/frontend/src/context/BuildProvider.tsx
deleted file mode 100644
index 02c7de5..0000000
--- a/frontend/src/context/BuildProvider.tsx
+++ /dev/null
@@ -1,180 +0,0 @@
-import { useCallback, useContext, useEffect, useState } from "react";
-import type { ReactNode } from "react";
-import type { PcPart } from "@/types/types";
-import SuccessNotification from "@/components/SuccessNotification";
-import { categories } from "@/types/categories";
-import { AuthContext } from "./AuthContext";
-import { BuildContext } from "./BuildContext";
-import type { BuildParts, SavedBuildInfo } from "./BuildContext";
-
-const isObject = (value: unknown): value is Record<string, unknown> =>
-  value !== null && typeof value === "object" && !Array.isArray(value);
-
-function sanitizeParts(value: unknown): BuildParts {
-  if (!isObject(value)) return {};
-  const parts: BuildParts = {};
-  for (const { value: category } of categories) {
-    const part = value[category];
-    if (
-      isObject(part) &&
-      part.category === category &&
-      typeof part.id === "string" &&
-      typeof part.name === "string" &&
-      (part.price_eur === null ||
-        (typeof part.price_eur === "number" &&
-          Number.isFinite(part.price_eur) &&
-          part.price_eur >= 0)) &&
-      isObject(part.details)
-    ) {
-      parts[category] = part as unknown as PcPart;
-    }
-  }
-  return parts;
-}
-
-type Draft = {
-  parts: BuildParts;
-  savedBuild: SavedBuildInfo | null;
-  isDirty: boolean;
-};
-
-export default function BuildProvider({ children }: { children: ReactNode }) {
-  const { user, loading } = useContext(AuthContext) ?? {
-    user: null,
-    loading: false,
-  };
-  if (loading) return <p role="status">Loading...</p>;
-
-  // Saved build IDs and drafts must not carry over when switching accounts.
-  const storageKey = `pc-builder-v2:${user?.uid ?? "guest"}`;
-  return (
-    <BuildState key={storageKey} storageKey={storageKey}>
-      {children}
-    </BuildState>
-  );
-}
-
-function BuildState({
-  children,
-  storageKey,
-}: {
-  children: ReactNode;
-  storageKey: string;
-}) {
-  const [draft, setDraft] = useState<Draft>(() => {
-    try {
-      const saved = localStorage.getItem(storageKey);
-      if (saved) {
-        const parsed: unknown = JSON.parse(saved);
-        if (!isObject(parsed))
-          return { parts: {}, savedBuild: null, isDirty: false };
-        const parts = sanitizeParts(parsed.parts);
-        const info = parsed.savedBuild;
-        const savedBuild =
-          isObject(info) &&
-          typeof info.id === "string" &&
-          typeof info.title === "string" &&
-          typeof info.comment === "string" &&
-          typeof info.isPublished === "boolean"
-            ? (info as SavedBuildInfo)
-            : null;
-        return {
-          parts,
-          savedBuild,
-          isDirty: typeof parsed.isDirty === "boolean" ? parsed.isDirty : true,
-        };
-      }
-      // Preserve the old browser draft without claiming ownership of a saved build.
-      const legacy = localStorage.getItem("pc-builder");
-      const parts = sanitizeParts(legacy ? JSON.parse(legacy) : null);
-      return {
-        parts,
-        savedBuild: null,
-        isDirty: Object.keys(parts).length > 0,
-      };
-    } catch {
-      return { parts: {}, savedBuild: null, isDirty: false };
-    }
-  });
-
-  const [removedPart, setRemovedPart] = useState<PcPart | null>(null);
-
-  useEffect(() => {
-    try {
-      localStorage.setItem(storageKey, JSON.stringify(draft));
-      if (storageKey === "pc-builder-v2:guest")
-        localStorage.setItem("pc-builder", JSON.stringify(draft.parts));
-    } catch {
-      console.warn("Could not save the build in this browser.");
-    }
-  }, [draft, storageKey]);
-
-  const loadBuild = useCallback((parts: PcPart[], info: SavedBuildInfo) => {
-    const selected: BuildParts = {};
-    for (const part of parts) selected[part.category] = part;
-    setDraft({ parts: selected, savedBuild: info, isDirty: false });
-  }, []);
-
-  const markSaved = useCallback((info: SavedBuildInfo) => {
-    setDraft((previous) => ({ ...previous, savedBuild: info, isDirty: false }));
-  }, []);
-
-  const forgetSavedBuild = useCallback((id: string) => {
-    setDraft((previous) =>
-      previous.savedBuild?.id === id
-        ? {
-            ...previous,
-            savedBuild: null,
-            isDirty: Object.keys(previous.parts).length > 0,
-          }
-        : previous,
-    );
-  }, []);
-
-  function addPart(part: PcPart) {
-    setDraft((previous) => ({
-      ...previous,
-      parts: { ...previous.parts, [part.category]: part },
-      isDirty: true,
-    }));
-  }
-
-  function removePart(category: PcPart["category"]) {
-    const part = draft.parts[category];
-    if (!part) return;
-    setRemovedPart(part);
-    setDraft((previous) => {
-      const parts = { ...previous.parts };
-      delete parts[category];
-      return { ...previous, parts, isDirty: true };
-    });
-  }
-
-  function resetBuild() {
-    setDraft({ parts: {}, savedBuild: null, isDirty: false });
-  }
-
-  return (
-    <BuildContext.Provider
-      value={{
-        ...draft,
-        addPart,
-        removePart,
-        resetBuild,
-        loadBuild,
-        markSaved,
-        forgetSavedBuild,
-      }}
-    >
-      {children}
-      {removedPart && (
-        <SuccessNotification
-          key={removedPart.id}
-          title="Component removed"
-          description={`${removedPart.name} was removed from your build.`}
-          onClose={() => setRemovedPart(null)}
-        />
-      )}
-    </BuildContext.Provider>
-  );
-}
diff --git a/frontend/src/lib/firebase.ts b/frontend/src/lib/firebase.ts
index ce206ff..4bf1b9e 100644
--- a/frontend/src/lib/firebase.ts
+++ b/frontend/src/lib/firebase.ts
@@ -5,7 +5,7 @@ const app = initializeApp({
   apiKey: "AIzaSyBa12YFnOadd1lkieNJAfMfebAnxRG57FI",
   authDomain: "full-circuit.firebaseapp.com",
   projectId: "full-circuit",
-  appId: "1:10539610170:web:d1241a25a1b0cd9e1ac503"
+  appId: "1:10539610170:web:d1241a25a1b0cd9e1ac503",
 });
 
-export const auth = getAuth(app);
\ No newline at end of file
+export const auth = getAuth(app);
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index e4386bc..c2eefc0 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -3,17 +3,19 @@ import { createRoot } from "react-dom/client";
 import { BrowserRouter } from "react-router";
 import "./index.css";
 import App from "./App.tsx";
-import BuildProvider from "./context/BuildProvider";
-import AuthProvider from "./context/AuthProvider";
+import { Provider } from "react-redux";
+import { store } from "./state/store";
+import { startAuthSync } from "./api/auth";
+
+const stopAuthSync = startAuthSync(store);
+if (import.meta.hot) import.meta.hot.dispose(stopAuthSync);
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
     <BrowserRouter basename={import.meta.env.BASE_URL}>
-      <AuthProvider>
-        <BuildProvider>
-          <App />
-        </BuildProvider>
-      </AuthProvider>
+      <Provider store={store}>
+        <App />
+      </Provider>
     </BrowserRouter>
   </StrictMode>,
 );
diff --git a/frontend/src/pages/accountPage/accountPage.tsx b/frontend/src/pages/accountPage/accountPage.tsx
index 6de5ede..247bd54 100644
--- a/frontend/src/pages/accountPage/accountPage.tsx
+++ b/frontend/src/pages/accountPage/accountPage.tsx
@@ -1,8 +1,10 @@
 import { Link, useNavigate } from "react-router";
 import { useEffect, useState } from "react";
 import { LoaderCircle, LogOut, Plus, UserRound } from "lucide-react";
-import { useAuth } from "@/context/AuthContext";
-import { useBuild } from "@/context/BuildContext";
+import { useSelector } from "react-redux";
+import type { RootState } from "@/state/store";
+import { logout } from "@/api/auth";
+import { useSavedBuild as useBuild } from "@/state/useSavedBuild";
 import { getMyBuilds } from "@/api/builds";
 import type { AccountBuild } from "@/api/builds";
 import DeleteBuildButton from "./components/DeleteBuildButton";
@@ -11,7 +13,8 @@ const buttonStyle =
   "inline-flex cursor-pointer items-center justify-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition duration-200 focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-accent disabled:cursor-wait disabled:opacity-50";
 
 export default function AccountPage() {
-  const { user, loading } = useAuth();
+  const { user, status } = useSelector((state: RootState) => state.auth);
+  const loading = status === "loading";
 
   if (loading) {
     return (
@@ -47,7 +50,7 @@ export default function AccountPage() {
 
 function AccountContent() {
   const navigate = useNavigate();
-  const { user, logout } = useAuth();
+  const user = useSelector((state: RootState) => state.auth.user);
   const { resetBuild } = useBuild();
   const [builds, setBuilds] = useState<AccountBuild[]>([]);
   const [offset, setOffset] = useState(0);
@@ -147,7 +150,7 @@ function AccountContent() {
 
         <Link
           to="/builder"
-          onClick={resetBuild}
+          onClick={() => resetBuild()}
           className={`${buttonStyle} bg-accent text-black hover:bg-orange-300 motion-safe:hover:scale-[1.02]`}
         >
           <Plus aria-hidden="true" className="h-4 w-4" />
@@ -210,7 +213,7 @@ function AccountContent() {
               {builds.slice(0, 20).map((build) => (
                 <article
                   key={build.id}
-                  className="group relative min-w-0 rounded-xl border border-transparent bg-surface wrap-break-words transition duration-200 hover:border-accent hover:bg-surface-dark focus-within:border-accent motion-safe:hover:-translate-y-1"
+                  className="group relative min-w-0 rounded-xl border border-transparent bg-surface wrap-break-words transition duration-200 hover:border-accent hover:bg-surface-dark focus-within:border-accent"
                 >
                   <Link
                     to={`/builder?build=${encodeURIComponent(build.id)}`}
diff --git a/frontend/src/pages/accountPage/components/DeleteBuildButton.tsx b/frontend/src/pages/accountPage/components/DeleteBuildButton.tsx
index 6771d4f..9092622 100644
--- a/frontend/src/pages/accountPage/components/DeleteBuildButton.tsx
+++ b/frontend/src/pages/accountPage/components/DeleteBuildButton.tsx
@@ -1,7 +1,7 @@
 import { useId, useRef, useState } from "react";
 import { LoaderCircle, Trash2 } from "lucide-react";
 import { deleteBuild } from "@/api/builds";
-import { useSavedBuild } from "@/context/BuildContext";
+import { useSavedBuild } from "@/state/useSavedBuild";
 
 type Props = { id: string; title: string; onDeleted: () => void };
 
diff --git a/frontend/src/pages/loginPage/loginPage.tsx b/frontend/src/pages/loginPage/loginPage.tsx
index dbd692b..f00a5b5 100644
--- a/frontend/src/pages/loginPage/loginPage.tsx
+++ b/frontend/src/pages/loginPage/loginPage.tsx
@@ -1,12 +1,15 @@
 import { Link, useNavigate } from "react-router";
 import { useState } from "react";
 import { FirebaseError } from "firebase/app";
-import { useAuth } from "@/context/AuthContext";
+import { login, loginWithEmail, registerWithEmail } from "@/api/auth";
+import type { RootState } from "@/state/store";
 import { LoaderCircle } from "lucide-react";
+import { useSelector } from "react-redux";
 
 export default function LoginPage() {
   const navigate = useNavigate();
-  const { user, loading, login, loginWithEmail, registerWithEmail } = useAuth();
+  const { user, status } = useSelector((state: RootState) => state.auth);
+  const loading = status === "loading";
 
   const [registering, setRegistering] = useState(false);
   const [email, setEmail] = useState("");
diff --git a/frontend/src/pages/pcBuilderPage/components/ClearBuild.tsx b/frontend/src/pages/pcBuilderPage/components/ClearBuild.tsx
index 1960d3c..89df7e4 100644
--- a/frontend/src/pages/pcBuilderPage/components/ClearBuild.tsx
+++ b/frontend/src/pages/pcBuilderPage/components/ClearBuild.tsx
@@ -1,10 +1,13 @@
 import { useRef } from "react";
 import Button from "@/components/buttons/Button";
-import { useBuild } from "@/context/BuildContext";
+import { resetBuild } from "@/state/selectedPartsSlice";
+import { useDispatch, useSelector } from "react-redux";
+import type { RootState } from "@/state/store";
 
 export default function ClearBuild() {
   const dialogRef = useRef<HTMLDialogElement>(null);
-  const { parts, resetBuild } = useBuild();
+  const dispatch = useDispatch();
+  const parts = useSelector((state: RootState) => state.selectedParts.parts);
 
   //Small popup component that ask if user wants to delete build
   return (
@@ -42,7 +45,7 @@ export default function ClearBuild() {
           <Button
             className="py-2"
             onClick={() => {
-              resetBuild();
+              dispatch(resetBuild());
               dialogRef.current?.close();
             }}
           >
diff --git a/frontend/src/pages/pcBuilderPage/components/ComponentSelectionComponent.tsx b/frontend/src/pages/pcBuilderPage/components/ComponentSelectionComponent.tsx
index 2e0e9fe..c6631fe 100644
--- a/frontend/src/pages/pcBuilderPage/components/ComponentSelectionComponent.tsx
+++ b/frontend/src/pages/pcBuilderPage/components/ComponentSelectionComponent.tsx
@@ -5,9 +5,11 @@ import {
   formatSpecification,
   getSpecifications,
 } from "@/utils/partSpecifications";
-import { useBuild } from "@/context/BuildContext";
 import Button from "@/components/buttons/Button";
 import { ArrowLeftRight, Plus, Trash2 } from "lucide-react";
+import { removePart } from "@/state/selectedPartsSlice";
+import { useDispatch } from "react-redux";
+import { showNotification } from "@/state/notificationSlice";
 
 type ComponentSelectionComponentProps = {
   part?: PcPart;
@@ -22,7 +24,7 @@ export default function ComponentSelectionComponent({
 }: ComponentSelectionComponentProps) {
   const navigate = useNavigate();
   const location = useLocation();
-  const { removePart } = useBuild();
+  const dispatch = useDispatch();
   const [failedImage, setFailedImage] = useState("");
   const imageUrl = part?.image_url?.trim() ?? "";
   const sectionRef = useRef<HTMLElement>(null);
@@ -103,7 +105,15 @@ export default function ComponentSelectionComponent({
               </Button>
               <Button
                 className="flex h-11 w-11 items-center justify-center bg-transparent"
-                onClick={() => removePart(categoryValue)}
+                onClick={() => {
+                  dispatch(removePart(categoryValue));
+                  dispatch(
+                    showNotification({
+                      title: "Component removed",
+                      description: `${part.name} was removed from your build.`,
+                    }),
+                  );
+                }}
               >
                 <Trash2 size={24} className="text-red-400" aria-hidden="true" />
                 <span className="sr-only">Remove {part.name}</span>
diff --git a/frontend/src/pages/pcBuilderPage/components/OpenSavedBuild.tsx b/frontend/src/pages/pcBuilderPage/components/OpenSavedBuild.tsx
index a21eb84..22e2272 100644
--- a/frontend/src/pages/pcBuilderPage/components/OpenSavedBuild.tsx
+++ b/frontend/src/pages/pcBuilderPage/components/OpenSavedBuild.tsx
@@ -2,7 +2,7 @@ import { Link, useNavigate } from "react-router";
 import { useEffect, useState } from "react";
 import type { ReactNode } from "react";
 import { getMyBuild } from "@/api/builds";
-import { useSavedBuild } from "@/context/BuildContext";
+import { useSavedBuild } from "@/state/useSavedBuild";
 
 export default function OpenSavedBuild({ children }: { children: ReactNode }) {
   const { loadBuild } = useSavedBuild();
diff --git a/frontend/src/pages/pcBuilderPage/components/PublishBuild.tsx b/frontend/src/pages/pcBuilderPage/components/PublishBuild.tsx
index 9f5e9f4..5614300 100644
--- a/frontend/src/pages/pcBuilderPage/components/PublishBuild.tsx
+++ b/frontend/src/pages/pcBuilderPage/components/PublishBuild.tsx
@@ -1,6 +1,6 @@
 import { Link } from "react-router";
 import { useId, useRef, useState } from "react";
-import { useSavedBuild } from "@/context/BuildContext";
+import { useSavedBuild } from "@/state/useSavedBuild";
 import { publishBuild, savePrivateBuild } from "@/api/builds";
 import Button from "@/components/buttons/Button";
 
diff --git a/frontend/src/pages/pcBuilderPage/pcBuilderPage.tsx b/frontend/src/pages/pcBuilderPage/pcBuilderPage.tsx
index 3e8ce87..3aa8308 100644
--- a/frontend/src/pages/pcBuilderPage/pcBuilderPage.tsx
+++ b/frontend/src/pages/pcBuilderPage/pcBuilderPage.tsx
@@ -1,6 +1,6 @@
 import SelectionComponent from "./components/ComponentSelectionComponent";
 
-import { useSavedBuild } from "@/context/BuildContext";
+import { useSavedBuild } from "@/state/useSavedBuild";
 import { categories } from "@/types/categories";
 import BuildSummaryComponent from "./components/BuildSummaryComponent";
 import ClearBuild from "./components/ClearBuild";
diff --git a/frontend/src/state/authSlice.js b/frontend/src/state/authSlice.js
new file mode 100644
index 0000000..b4a7333
--- /dev/null
+++ b/frontend/src/state/authSlice.js
@@ -0,0 +1,38 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+/**
+ * @typedef {{ uid: string, displayName: string | null, email: string | null }} AuthUser
+ */
+
+/** @type {{ user: AuthUser | null, status: "loading" | "authenticated" | "unauthenticated", error: string | null }} */
+const initialState = {
+  user: null,
+  status: "loading",
+  error: null,
+};
+
+const authSlice = createSlice({
+  name: "auth",
+  initialState,
+  reducers: {
+    authStarted: (state) => {
+      state.status = "loading";
+      state.error = null;
+    },
+
+    authResolved: (state, action) => {
+      state.user = action.payload;
+      state.status = action.payload ? "authenticated" : "unauthenticated";
+      state.error = null;
+    },
+
+    authFailed: (state, action) => {
+      state.error = action.payload;
+      state.status = state.user ? "authenticated" : "unauthenticated";
+    },
+  },
+});
+
+export const { authStarted, authResolved, authFailed } = authSlice.actions;
+
+export default authSlice.reducer;
diff --git a/frontend/src/state/buildStorage.ts b/frontend/src/state/buildStorage.ts
new file mode 100644
index 0000000..f73de2b
--- /dev/null
+++ b/frontend/src/state/buildStorage.ts
@@ -0,0 +1,75 @@
+import type { PcPart } from "@/types/types";
+import { categories } from "@/types/categories";
+import type { BuildParts, BuildDraft, SavedBuildInfo } from "./buildTypes";
+
+const isObject = (value: unknown): value is Record<string, unknown> =>
+  value !== null && typeof value === "object" && !Array.isArray(value);
+
+function sanitizeParts(value: unknown): BuildParts {
+  if (!isObject(value)) return {};
+  const parts: BuildParts = {};
+  for (const { value: category } of categories) {
+    const part = value[category];
+    if (
+      isObject(part) &&
+      part.category === category &&
+      typeof part.id === "string" &&
+      typeof part.name === "string" &&
+      (part.price_eur === null ||
+        (typeof part.price_eur === "number" &&
+          Number.isFinite(part.price_eur) &&
+          part.price_eur >= 0)) &&
+      isObject(part.details)
+    ) {
+      parts[category] = part as unknown as PcPart;
+    }
+  }
+  return parts;
+}
+
+export function loadBuildDraft(storageKey: string): BuildDraft {
+  try {
+    const saved = localStorage.getItem(storageKey);
+    if (saved) {
+      const parsed: unknown = JSON.parse(saved);
+      if (!isObject(parsed))
+        return { parts: {}, savedBuild: null, isDirty: false };
+      const parts = sanitizeParts(parsed.parts);
+      const info = parsed.savedBuild;
+      const savedBuild =
+        isObject(info) &&
+        typeof info.id === "string" &&
+        typeof info.title === "string" &&
+        typeof info.comment === "string" &&
+        typeof info.isPublished === "boolean"
+          ? (info as SavedBuildInfo)
+          : null;
+      return {
+        parts,
+        savedBuild,
+        isDirty: typeof parsed.isDirty === "boolean" ? parsed.isDirty : true,
+      };
+    }
+    // Preserve the old browser draft without claiming ownership of a saved build.
+    const legacy = localStorage.getItem("pc-builder");
+    const parts = sanitizeParts(legacy ? JSON.parse(legacy) : null);
+    return {
+      parts,
+      savedBuild: null,
+      isDirty: Object.keys(parts).length > 0,
+    };
+  } catch {
+    return { parts: {}, savedBuild: null, isDirty: false };
+  }
+}
+
+export function saveBuildDraft(storageKey: string, draft: BuildDraft) {
+  try {
+    localStorage.setItem(storageKey, JSON.stringify(draft));
+    if (storageKey === "pc-builder-v2:guest") {
+      localStorage.setItem("pc-builder", JSON.stringify(draft.parts));
+    }
+  } catch {
+    console.warn("Could not save the build in this browser.");
+  }
+}
diff --git a/frontend/src/state/buildTypes.ts b/frontend/src/state/buildTypes.ts
new file mode 100644
index 0000000..f4caf08
--- /dev/null
+++ b/frontend/src/state/buildTypes.ts
@@ -0,0 +1,14 @@
+import type { PcPart } from "@/types/types";
+
+export type BuildParts = Partial<Record<PcPart["category"], PcPart>>;
+export type SavedBuildInfo = {
+  id: string;
+  title: string;
+  comment: string;
+  isPublished: boolean;
+};
+export type BuildDraft = {
+  parts: BuildParts;
+  savedBuild: SavedBuildInfo | null;
+  isDirty: boolean;
+};
diff --git a/frontend/src/state/notificationSlice.js b/frontend/src/state/notificationSlice.js
new file mode 100644
index 0000000..ec62da9
--- /dev/null
+++ b/frontend/src/state/notificationSlice.js
@@ -0,0 +1,36 @@
+import { createSlice, nanoid } from "@reduxjs/toolkit";
+
+/**
+ * @typedef {{ title: string, description: string, button?: { label: string, to: string } }} NotificationPayload
+ */
+
+/** @type {{ current: (NotificationPayload & { id: string }) | null }} */
+const initialState = { current: null };
+
+const notificationSlice = createSlice({
+  name: "notification",
+  initialState,
+  reducers: {
+    showNotification: {
+      /** @param {NotificationPayload} notification */
+      prepare: (notification) => ({
+        payload: { ...notification, id: nanoid() },
+      }),
+      /**
+       * @param {typeof initialState} state
+       * @param {import('@reduxjs/toolkit').PayloadAction<NotificationPayload & { id: string }>} action
+       */
+      reducer: (state, action) => {
+        state.current = action.payload;
+      },
+    },
+    dismissNotification: (state) => {
+      state.current = null;
+    },
+  },
+});
+
+export const { showNotification, dismissNotification } =
+  notificationSlice.actions;
+
+export default notificationSlice.reducer;
diff --git a/frontend/src/state/selectedPartsSlice.js b/frontend/src/state/selectedPartsSlice.js
new file mode 100644
index 0000000..a875ed0
--- /dev/null
+++ b/frontend/src/state/selectedPartsSlice.js
@@ -0,0 +1,78 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+/** @type {import('./buildTypes').BuildDraft} */
+const initialState = {
+  parts: {},
+  savedBuild: null,
+  isDirty: false,
+};
+
+const selectedPartsSlice = createSlice({
+  name: "selected parts",
+  initialState,
+  reducers: {
+    /**
+     * @param {typeof initialState} state
+     * @param {import('@reduxjs/toolkit').PayloadAction<import('./buildTypes').BuildDraft>} action
+     */
+    restoreBuild: (state, action) => {
+      state.parts = action.payload.parts;
+      state.savedBuild = action.payload.savedBuild;
+      state.isDirty = action.payload.isDirty;
+    },
+    addPart: (state, action) => {
+      const part = action.payload;
+      state.parts[part.category] = part;
+      state.isDirty = true;
+    },
+    removePart: (state, action) => {
+      if (state.parts[action.payload]) {
+        delete state.parts[action.payload];
+        state.isDirty = true;
+      }
+    },
+    resetBuild: (state) => {
+      state.parts = {};
+      state.savedBuild = null;
+      state.isDirty = false;
+    },
+    loadBuild: (state, action) => {
+      state.parts = {};
+      for (const part of action.payload.parts) {
+        state.parts[part.category] = part;
+      }
+      state.savedBuild = action.payload.info;
+      state.isDirty = false;
+    },
+    markSaved: (state, action) => {
+      state.savedBuild = action.payload;
+      state.isDirty = false;
+    },
+    forgetSavedBuild: (state, action) => {
+      if (state.savedBuild?.id === action.payload) {
+        state.savedBuild = null;
+        state.isDirty = Object.keys(state.parts).length > 0;
+      }
+    },
+  },
+});
+
+export const selectIsPartInBuild = (state, part) =>
+  state.selectedParts.parts[part.category]?.id === part.id;
+
+export const selectIsCategoryEmpty = (state, category) =>
+  !state.selectedParts.parts[category];
+
+export const selectPartByCategory = (state, category) =>
+  state.selectedParts.parts[category];
+
+export const {
+  restoreBuild,
+  addPart,
+  removePart,
+  resetBuild,
+  loadBuild,
+  markSaved,
+  forgetSavedBuild,
+} = selectedPartsSlice.actions;
+export default selectedPartsSlice.reducer;
diff --git a/frontend/src/state/store.js b/frontend/src/state/store.js
new file mode 100644
index 0000000..2b3bb6e
--- /dev/null
+++ b/frontend/src/state/store.js
@@ -0,0 +1,20 @@
+import { configureStore } from "@reduxjs/toolkit";
+import selectedPartsReducer from "./selectedPartsSlice";
+import notificationReducer from "./notificationSlice";
+import authReducer from "./authSlice";
+
+/** @param {import('./buildTypes').BuildDraft} [draft] */
+export function createBuildStore(draft) {
+  return configureStore({
+    reducer: {
+      selectedParts: selectedPartsReducer,
+      notification: notificationReducer,
+      auth: authReducer,
+    },
+    ...(draft ? { preloadedState: { selectedParts: draft } } : {}),
+  });
+}
+
+export const store = createBuildStore();
+
+/** @typedef {ReturnType<ReturnType<typeof createBuildStore>["getState"]>} RootState */
diff --git a/frontend/src/state/useSavedBuild.ts b/frontend/src/state/useSavedBuild.ts
new file mode 100644
index 0000000..f467f17
--- /dev/null
+++ b/frontend/src/state/useSavedBuild.ts
@@ -0,0 +1,45 @@
+import { bindActionCreators } from "@reduxjs/toolkit";
+import { useMemo } from "react";
+import { useDispatch, useSelector, useStore } from "react-redux";
+import type { PcPart } from "@/types/types";
+import type { SavedBuildInfo } from "./buildTypes";
+import type { RootState } from "./store";
+import {
+  addPart,
+  removePart,
+  resetBuild,
+  loadBuild,
+  markSaved,
+  forgetSavedBuild,
+} from "./selectedPartsSlice";
+
+// Saved-build screens and direct Redux consumers share the same slice.
+export function useSavedBuild() {
+  const draft = useSelector((state: RootState) => state.selectedParts);
+  const dispatch = useDispatch();
+  const store = useStore<RootState>();
+  const accountId = useSelector((state: RootState) => state.auth.user?.uid);
+  const actions = useMemo(
+    () =>
+      bindActionCreators(
+        {
+          addPart,
+          removePart,
+          resetBuild,
+          loadBuild: (parts: PcPart[], info: SavedBuildInfo) =>
+            loadBuild({ parts, info }),
+          markSaved,
+          forgetSavedBuild,
+        },
+        (action) => {
+          // Ignore a completed save/open request from an account we have left.
+          if (store.getState().auth.user?.uid === accountId) {
+            return dispatch(action);
+          }
+          return action;
+        },
+      ),
+    [dispatch, store, accountId],
+  );
+  return { ...draft, ...actions };
+}
diff --git a/frontend/src/test/BuildProvider.test.tsx b/frontend/src/test/BuildProvider.test.tsx
index b69ce6f..4a2d057 100644
--- a/frontend/src/test/BuildProvider.test.tsx
+++ b/frontend/src/test/BuildProvider.test.tsx
@@ -1,14 +1,22 @@
 import type { ReactNode } from "react";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { act, renderHook } from "@testing-library/react";
-import BuildProvider from "@/context/BuildProvider";
-import { useBuild } from "@/context/BuildContext";
+import { Provider } from "react-redux";
+import { createBuildStore } from "@/state/store";
+import { startAuthSync } from "@/api/auth";
+import { useSavedBuild as useBuild } from "@/state/useSavedBuild";
 import type { PcPart } from "@/types/types";
 
 const STORAGE_KEY = "pc-builder";
 
-// The removal notification uses browser popover APIs that jsdom does not have.
-vi.mock("@/components/SuccessNotification", () => ({ default: () => null }));
+vi.mock("@/lib/firebase", () => ({ auth: {} }));
+vi.mock("firebase/auth", () => ({
+  onAuthStateChanged: vi.fn((_auth, callback) => {
+    callback(null);
+    return vi.fn();
+  }),
+}));
+const subscriptions: (() => void)[] = [];
 
 const part = (id: string, category: string, name: string) =>
   ({ id, category, name, price_eur: 100, details: {} }) as unknown as PcPart;
@@ -17,9 +25,11 @@ const otherCpu = part("cpu-2", "CPU", "Other CPU");
 const gpu = part("gpu-1", "GPU", "Test GPU");
 
 function renderBuild() {
+  const store = createBuildStore();
+  subscriptions.push(startAuthSync(store));
   return renderHook(() => useBuild(), {
     wrapper: ({ children }: { children: ReactNode }) => (
-      <BuildProvider>{children}</BuildProvider>
+      <Provider store={store}>{children}</Provider>
     ),
   });
 }
@@ -27,7 +37,10 @@ function renderBuild() {
 const saved = () => JSON.parse(localStorage.getItem(STORAGE_KEY) ?? "null");
 
 beforeEach(() => localStorage.clear());
-afterEach(() => vi.restoreAllMocks());
+afterEach(() => {
+  subscriptions.splice(0).forEach((stop) => stop());
+  vi.restoreAllMocks();
+});
 
 describe("loading a saved build", () => {
   it("starts with an empty build when nothing is saved", () => {
@@ -178,11 +191,11 @@ describe("changing the build", () => {
 });
 
 describe("useBuild", () => {
-  it("throws when used outside BuildProvider", () => {
+  it("throws when used outside the Redux Provider", () => {
     vi.spyOn(console, "error").mockImplementation(() => {});
 
     expect(() => renderHook(() => useBuild())).toThrow(
-      "useBuild must be used inside BuildProvider",
+      "could not find react-redux context value",
     );
   });
 });
diff --git a/frontend/src/test/DeleteBuildButton.test.tsx b/frontend/src/test/DeleteBuildButton.test.tsx
index ab79dee..29497f9 100644
--- a/frontend/src/test/DeleteBuildButton.test.tsx
+++ b/frontend/src/test/DeleteBuildButton.test.tsx
@@ -13,7 +13,7 @@ const mocks = vi.hoisted(() => ({
   forgetSavedBuild: vi.fn(),
 }));
 vi.mock("@/api/builds", () => ({ deleteBuild: mocks.deleteBuild }));
-vi.mock("@/context/BuildContext", () => ({
+vi.mock("@/state/useSavedBuild", () => ({
   useSavedBuild: () => ({ forgetSavedBuild: mocks.forgetSavedBuild }),
 }));
 
diff --git a/frontend/src/test/PcPartCard.test.tsx b/frontend/src/test/PcPartCard.test.tsx
index c8e778d..17904b6 100644
--- a/frontend/src/test/PcPartCard.test.tsx
+++ b/frontend/src/test/PcPartCard.test.tsx
@@ -1,13 +1,15 @@
 import { beforeEach, expect, it, vi } from "vitest";
 import { act, render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
+import { configureStore } from "@reduxjs/toolkit";
+import { Provider } from "react-redux";
+import type { ReactElement, ReactNode } from "react";
 import PcPartCard from "@/components/PcPartCard";
 import { getPartSpecifications } from "@/api/parts";
-import { useBuild } from "@/context/BuildContext";
+import selectedPartsReducer from "@/state/selectedPartsSlice";
 import type { PcPart } from "@/types/types";
 
 vi.mock("@/api/parts", () => ({ getPartSpecifications: vi.fn() }));
-vi.mock("@/context/BuildContext", () => ({ useBuild: vi.fn() }));
 vi.mock("@/components/AddToBuildFeedback", () => ({ default: () => null }));
 
 const part = {
@@ -20,23 +22,31 @@ const part = {
   details: {},
 } as PcPart;
 const details = { memory: 12 } as PcPart["details"];
-const addPart = vi.fn();
+
+function renderWithStore(ui: ReactElement) {
+  const store = configureStore({
+    reducer: { selectedParts: selectedPartsReducer },
+  });
+
+  return {
+    store,
+    ...render(ui, {
+      wrapper: ({ children }: { children: ReactNode }) => (
+        <Provider store={store}>{children}</Provider>
+      ),
+    }),
+  };
+}
 
 beforeEach(() => {
   vi.resetAllMocks();
-  vi.mocked(useBuild).mockReturnValue({
-    parts: {},
-    addPart,
-    removePart: vi.fn(),
-    resetBuild: vi.fn(),
-  });
 });
 
 it("retains specifications for reopening details and adding from the card", async () => {
   const user = userEvent.setup();
   const onShowDetails = vi.fn();
   vi.mocked(getPartSpecifications).mockResolvedValue(details);
-  const { rerender } = render(
+  const { rerender, store } = renderWithStore(
     <PcPartCard part={part} onShowDetails={onShowDetails} />,
   );
 
@@ -51,7 +61,10 @@ it("retains specifications for reopening details and adding from the card", asyn
   expect(onShowDetails).toHaveBeenLastCalledWith({ ...updatedPart, details });
   await user.click(screen.getByRole("button", { name: "Add to build" }));
 
-  expect(addPart).toHaveBeenCalledWith({ ...updatedPart, details });
+  expect(store.getState().selectedParts.parts.GPU).toEqual({
+    ...updatedPart,
+    details,
+  });
   expect(getPartSpecifications).toHaveBeenCalledTimes(1);
 });
 
@@ -61,7 +74,7 @@ it("shows an error and lets the user retry a failed details request", async () =
   vi.mocked(getPartSpecifications)
     .mockRejectedValueOnce(new Error("Network error"))
     .mockResolvedValueOnce(details);
-  render(<PcPartCard part={part} onShowDetails={onShowDetails} />);
+  renderWithStore(<PcPartCard part={part} onShowDetails={onShowDetails} />);
 
   await user.click(screen.getByRole("button", { name: "Show details" }));
   expect(screen.getByRole("alert")).toHaveTextContent(
@@ -82,7 +95,7 @@ it("disables repeat detail clicks and ignores a response after the card unmounts
       resolve = done;
     }),
   );
-  const { unmount } = render(
+  const { unmount } = renderWithStore(
     <PcPartCard part={part} onShowDetails={onShowDetails} />,
   );
 
@@ -97,14 +110,26 @@ it("disables repeat detail clicks and ignores a response after the card unmounts
   expect(onShowDetails).not.toHaveBeenCalled();
 });
 
-it("can still add directly without opening details first", async () => {
+it("adds directly and removes the part through Redux without opening details", async () => {
   const user = userEvent.setup();
   vi.mocked(getPartSpecifications).mockResolvedValue(details);
-  render(<PcPartCard part={part} onShowDetails={vi.fn()} />);
+  const { store } = renderWithStore(
+    <PcPartCard part={part} onShowDetails={vi.fn()} />,
+  );
 
   await user.click(screen.getByRole("button", { name: "Add to build" }));
   await waitFor(() =>
-    expect(addPart).toHaveBeenCalledWith({ ...part, details }),
+    expect(store.getState().selectedParts.parts.GPU).toEqual({
+      ...part,
+      details,
+    }),
   );
   expect(getPartSpecifications).toHaveBeenCalledTimes(1);
+
+  await user.click(screen.getByRole("button", { name: "Remove from build" }));
+  expect(store.getState().selectedParts.parts).toEqual({});
+  expect(
+    screen.getByRole("button", { name: "Add to build" }),
+  ).toBeInTheDocument();
+  expect(getPartSpecifications).toHaveBeenCalledTimes(1);
 });
diff --git a/frontend/src/test/SavedBuildWorkflow.test.tsx b/frontend/src/test/SavedBuildWorkflow.test.tsx
index dab9ba3..dde3d61 100644
--- a/frontend/src/test/SavedBuildWorkflow.test.tsx
+++ b/frontend/src/test/SavedBuildWorkflow.test.tsx
@@ -4,23 +4,43 @@ import {
   screen,
   waitFor,
   cleanup,
+  act,
+  renderHook,
 } from "@testing-library/react";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { BrowserRouter } from "react-router";
-import BuildProvider from "@/context/BuildProvider";
-import { useSavedBuild } from "@/context/BuildContext";
+import { useEffect, useState } from "react";
+import type { ReactNode } from "react";
+import type { User } from "firebase/auth";
+import { Provider } from "react-redux";
+import { createBuildStore } from "@/state/store";
+import { startAuthSync } from "@/api/auth";
+import { useSavedBuild } from "@/state/useSavedBuild";
 import type { PcPart } from "@/types/types";
 import OpenSavedBuild from "@/pages/pcBuilderPage/components/OpenSavedBuild";
 
 const mocks = vi.hoisted(() => ({
   auth: { user: { uid: "owner-a" }, loading: false },
   getMyBuild: vi.fn(),
+  listener: null as ((user: User | null) => void) | null,
 }));
-vi.mock("@/context/AuthContext", async () => {
-  const { createContext } = await import("react");
-  return { AuthContext: createContext(mocks.auth) };
-});
-vi.mock("@/components/SuccessNotification", () => ({ default: () => null }));
+vi.mock("@/lib/firebase", () => ({ auth: {} }));
+vi.mock("firebase/auth", () => ({
+  onAuthStateChanged: vi.fn((_auth, callback) => {
+    mocks.listener = callback;
+    callback(mocks.auth.user);
+    return () => {
+      mocks.listener = null;
+    };
+  }),
+}));
+
+function TestStore({ children }: { children: ReactNode }) {
+  const [store] = useState(() => createBuildStore());
+  useEffect(() => startAuthSync(store), [store]);
+  return <Provider store={store}>{children}</Provider>;
+}
+
 vi.mock("@/api/builds", () => ({ getMyBuild: mocks.getMyBuild }));
 
 const cpu = {
@@ -66,11 +86,25 @@ afterEach(() => {
 });
 
 describe("saved build workflow", () => {
+  it("ignores a save completion from a previous account", () => {
+    const store = createBuildStore();
+    const stop = startAuthSync(store);
+    const { result, unmount } = renderHook(() => useSavedBuild(), {
+      wrapper: ({ children }) => <Provider store={store}>{children}</Provider>,
+    });
+    const markPreviousAccountSaved = result.current.markSaved;
+    act(() => mocks.listener?.({ uid: "owner-b" } as User));
+    act(() => markPreviousAccountSaved(info));
+    expect(store.getState().selectedParts.savedBuild).toBeNull();
+    unmount();
+    stop();
+  });
+
   it("restores the loaded build ID and selections after remounting and tracks edits", async () => {
     const view = render(
-      <BuildProvider>
+      <TestStore>
         <Probe />
-      </BuildProvider>,
+      </TestStore>,
     );
     fireEvent.click(screen.getByText("Load fixture"));
     await waitFor(() =>
@@ -80,9 +114,9 @@ describe("saved build workflow", () => {
     );
     view.unmount();
     render(
-      <BuildProvider>
+      <TestStore>
         <Probe />
-      </BuildProvider>,
+      </TestStore>,
     );
     expect(state().savedBuild.id).toBe("12");
     expect(state().parts.CPU.id).toBe("cpu-1");
@@ -96,9 +130,9 @@ describe("saved build workflow", () => {
 
   it("keeps local selections as a new draft when the active saved build is deleted", () => {
     render(
-      <BuildProvider>
+      <TestStore>
         <Probe />
-      </BuildProvider>,
+      </TestStore>,
     );
     fireEvent.click(screen.getByText("Load fixture"));
     fireEvent.click(screen.getByText("Forget deleted build"));
@@ -109,16 +143,17 @@ describe("saved build workflow", () => {
 
   it("does not carry a saved build into another account", () => {
     const view = render(
-      <BuildProvider>
+      <TestStore>
         <Probe />
-      </BuildProvider>,
+      </TestStore>,
     );
     fireEvent.click(screen.getByText("Load fixture"));
     mocks.auth.user = { uid: "owner-b" };
+    act(() => mocks.listener?.(mocks.auth.user as User));
     view.rerender(
-      <BuildProvider>
+      <TestStore>
         <Probe />
-      </BuildProvider>,
+      </TestStore>,
     );
     expect(state().savedBuild).toBeNull();
     expect(state().parts).toEqual({});
@@ -134,13 +169,13 @@ describe("saved build workflow", () => {
       parts: [cpu],
     });
     render(
-      <BuildProvider>
+      <TestStore>
         <BrowserRouter basename="/project2">
           <OpenSavedBuild>
             <Probe />
           </OpenSavedBuild>
         </BrowserRouter>
-      </BuildProvider>,
+      </TestStore>,
     );
     await waitFor(() =>
       expect(screen.getByTestId("state")).toBeInTheDocument(),
@@ -168,13 +203,13 @@ describe("saved build workflow", () => {
       parts: [cpu],
     });
     render(
-      <BuildProvider>
+      <TestStore>
         <BrowserRouter basename="/project2">
           <OpenSavedBuild>
             <Probe />
           </OpenSavedBuild>
         </BrowserRouter>
-      </BuildProvider>,
+      </TestStore>,
     );
     await waitFor(() =>
       expect(screen.getByTestId("state")).toBeInTheDocument(),
diff --git a/frontend/src/test/auth.test.tsx b/frontend/src/test/auth.test.tsx
new file mode 100644
index 0000000..fb2a64c
--- /dev/null
+++ b/frontend/src/test/auth.test.tsx
@@ -0,0 +1,194 @@
+import { afterEach, beforeEach, expect, it, vi } from "vitest";
+import {
+  act,
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+} from "@testing-library/react";
+import { Provider } from "react-redux";
+import { MemoryRouter } from "react-router";
+import type { User } from "firebase/auth";
+import { startAuthSync } from "@/api/auth";
+import { createBuildStore } from "@/state/store";
+import { addPart } from "@/state/selectedPartsSlice";
+import AuthButton from "@/components/AuthButton";
+import LoginPage from "@/pages/loginPage/loginPage";
+
+const mocks = vi.hoisted(() => ({
+  changed: null as ((user: User | null) => void) | null,
+  failed: null as (() => void) | null,
+  unsubscribe: vi.fn(),
+  emailLogin: vi.fn(),
+  register: vi.fn(),
+  googleLogin: vi.fn(),
+  signOut: vi.fn(),
+}));
+vi.mock("@/lib/firebase", () => ({ auth: {} }));
+vi.mock("firebase/auth", () => ({
+  onAuthStateChanged: vi.fn((_auth, changed, failed) => {
+    mocks.changed = changed;
+    mocks.failed = failed;
+    return mocks.unsubscribe;
+  }),
+  GoogleAuthProvider: class {},
+  signInWithEmailAndPassword: mocks.emailLogin,
+  createUserWithEmailAndPassword: mocks.register,
+  signInWithPopup: mocks.googleLogin,
+  signOut: mocks.signOut,
+}));
+
+const profile = {
+  uid: "owner-a",
+  displayName: "Test user",
+  email: "test@example.com",
+};
+const subscriptions: (() => void)[] = [];
+function setup() {
+  const store = createBuildStore();
+  const stop = startAuthSync(store);
+  subscriptions.push(stop);
+  return { store, stop };
+}
+function renderLogin(store: ReturnType<typeof createBuildStore>) {
+  return render(
+    <Provider store={store}>
+      <MemoryRouter>
+        <AuthButton />
+        <LoginPage />
+      </MemoryRouter>
+    </Provider>,
+  );
+}
+
+beforeEach(() => {
+  localStorage.clear();
+  vi.clearAllMocks();
+  mocks.emailLogin.mockReset();
+  mocks.register.mockReset();
+  mocks.googleLogin.mockReset();
+});
+afterEach(() => {
+  cleanup();
+  subscriptions.splice(0).forEach((stop) => stop());
+});
+
+it("restores a Firebase session into Redux as plain profile data and handles logout", () => {
+  const { store } = setup();
+  expect(store.getState().auth.status).toBe("loading");
+  mocks.changed?.({ ...profile, getIdToken: vi.fn() } as unknown as User);
+  expect(store.getState().auth).toEqual({
+    user: profile,
+    status: "authenticated",
+    error: null,
+  });
+  mocks.changed?.(null);
+  expect(store.getState().auth).toEqual({
+    user: null,
+    status: "unauthenticated",
+    error: null,
+  });
+});
+
+it("keeps the previous account's draft isolated and restores it on return", () => {
+  const { store } = setup();
+  mocks.changed?.(profile as User);
+  const cpu = {
+    id: "cpu-1",
+    category: "CPU",
+    name: "CPU",
+    price_eur: 100,
+    details: {},
+  };
+  store.dispatch(addPart(cpu));
+  mocks.changed?.({ ...profile, uid: "owner-b" } as User);
+  expect(store.getState().selectedParts.parts).toEqual({});
+  expect(
+    JSON.parse(localStorage.getItem("pc-builder-v2:owner-a")!).parts,
+  ).toEqual({ CPU: cpu });
+  mocks.changed?.(profile as User);
+  expect(store.getState().selectedParts.parts).toEqual({ CPU: cpu });
+});
+
+it("does not overwrite an edited draft when Firebase reports the same user again", () => {
+  const { store } = setup();
+  mocks.changed?.(profile as User);
+  store.dispatch(addPart({ id: "cpu-1", category: "CPU" }));
+  const draft = store.getState().selectedParts;
+  mocks.changed?.({ ...profile, displayName: "Updated name" } as User);
+  expect(store.getState().selectedParts).toBe(draft);
+  expect(store.getState().auth.user?.displayName).toBe("Updated name");
+});
+
+it("ends loading if the authentication observer reports an error", () => {
+  const { store } = setup();
+  mocks.failed?.();
+  expect(store.getState().auth.status).toBe("unauthenticated");
+  expect(store.getState().auth.error).toContain("Could not check");
+});
+
+it("keeps Redux signed out when email login fails, without reading a null user", async () => {
+  const { store } = setup();
+  mocks.changed?.(null);
+  mocks.emailLogin.mockRejectedValue(new Error("Wrong password"));
+  renderLogin(store);
+  fireEvent.change(screen.getByLabelText("Email"), {
+    target: { value: "test@example.com" },
+  });
+  fireEvent.change(screen.getByLabelText("Password"), {
+    target: { value: "incorrect" },
+  });
+  fireEvent.click(screen.getByRole("button", { name: "Sign in" }));
+  expect(await screen.findByRole("alert")).toHaveTextContent(
+    "Could not sign in",
+  );
+  expect(store.getState().auth.user).toBeNull();
+  expect(store.getState().auth.status).toBe("unauthenticated");
+});
+
+it.each(["email", "registration", "Google"])(
+  "updates the account link after %s sign-in",
+  async (method) => {
+    const { store } = setup();
+    mocks.changed?.(null);
+    const succeed = async () => {
+      mocks.changed?.(profile as User);
+    };
+    mocks.emailLogin.mockImplementation(succeed);
+    mocks.register.mockImplementation(succeed);
+    mocks.googleLogin.mockImplementation(succeed);
+    renderLogin(store);
+    if (method === "Google") {
+      await act(async () =>
+        fireEvent.click(
+          screen.getByRole("button", { name: "Continue with Google" }),
+        ),
+      );
+      expect(mocks.googleLogin).toHaveBeenCalledOnce();
+    } else {
+      if (method === "registration")
+        fireEvent.click(screen.getByRole("button", { name: "Register" }));
+      fireEvent.change(screen.getByLabelText("Email"), {
+        target: { value: "test@example.com" },
+      });
+      fireEvent.change(screen.getByLabelText("Password"), {
+        target: { value: "password123" },
+      });
+      await act(async () =>
+        fireEvent.click(
+          screen.getByRole("button", {
+            name: method === "registration" ? "Create account" : "Sign in",
+          }),
+        ),
+      );
+      expect(
+        method === "registration" ? mocks.register : mocks.emailLogin,
+      ).toHaveBeenCalledOnce();
+    }
+    expect(screen.getByRole("link", { name: "My account" })).toHaveAttribute(
+      "href",
+      "/account",
+    );
+    expect(store.getState().auth.user).toEqual(profile);
+  },
+);
diff --git a/frontend/src/test/checkCompatability.test.ts b/frontend/src/test/checkCompatability.test.ts
index 9a60f4c..7d8fe84 100644
--- a/frontend/src/test/checkCompatability.test.ts
+++ b/frontend/src/test/checkCompatability.test.ts
@@ -74,7 +74,9 @@ describe("CPU and motherboard", () => {
   it("accepts matching sockets and a listed chipset", () => {
     const parts = [cpu(), motherboard()];
 
-    expect(result(parts, "CPU / motherboard socket")).toMatch(/^\[COMPATIBLE\]/);
+    expect(result(parts, "CPU / motherboard socket")).toMatch(
+      /^\[COMPATIBLE\]/,
+    );
     expect(result(parts, "CPU / motherboard chipset")).toMatch(
       /^\[COMPATIBLE\]/,
     );
@@ -94,7 +96,9 @@ describe("CPU and motherboard", () => {
   it("accepts an FM2 CPU on an FM2+ board", () => {
     const parts = [cpu({ socket: "FM2" }), motherboard({ socket: "FM2+" })];
 
-    expect(result(parts, "CPU / motherboard socket")).toMatch(/^\[COMPATIBLE\]/);
+    expect(result(parts, "CPU / motherboard socket")).toMatch(
+      /^\[COMPATIBLE\]/,
+    );
   });
 
   it("does not call an unlisted chipset incompatible", () => {
@@ -269,14 +273,11 @@ describe("CPU cooler", () => {
   });
 
   it("rejects an air cooler that is taller than the case allows", () => {
+    expect(result([cooler(), pcCase()], "CPU cooler / case height")).toMatch(
+      /^\[COMPATIBLE\]/,
+    );
     expect(
-      result([cooler(), pcCase()], "CPU cooler / case height"),
-    ).toMatch(/^\[COMPATIBLE\]/);
-    expect(
-      result(
-        [cooler({ height: 175 }), pcCase()],
-        "CPU cooler / case height",
-      ),
+      result([cooler({ height: 175 }), pcCase()], "CPU cooler / case height"),
     ).toMatch(/^\[INCOMPATIBLE\]/);
   });
 
@@ -315,7 +316,10 @@ describe("storage", () => {
       result(
         [
           motherboardWithM2([nvmeSlot]),
-          part("Storage", { form_factor: "M.2-2280", interface: "SATA 6.0 Gb/s" }),
+          part("Storage", {
+            form_factor: "M.2-2280",
+            interface: "SATA 6.0 Gb/s",
+          }),
         ],
         "M.2 drive / motherboard slot",
       ),
@@ -344,10 +348,16 @@ describe("storage", () => {
     });
 
     expect(
-      result([drive, pcCase({ internal_2_5_bays: 2 })], "Storage / case drive bay"),
+      result(
+        [drive, pcCase({ internal_2_5_bays: 2 })],
+        "Storage / case drive bay",
+      ),
     ).toMatch(/^\[COMPATIBLE\]/);
     expect(
-      result([drive, pcCase({ internal_2_5_bays: 0 })], "Storage / case drive bay"),
+      result(
+        [drive, pcCase({ internal_2_5_bays: 0 })],
+        "Storage / case drive bay",
+      ),
     ).toMatch(/^\[INCOMPATIBLE\]/);
   });
 });
diff --git a/frontend/tsconfig.app.json b/frontend/tsconfig.app.json
index 96b7d9e..0d80322 100644
--- a/frontend/tsconfig.app.json
+++ b/frontend/tsconfig.app.json
@@ -7,6 +7,7 @@
     "types": ["vite/client"],
     "allowArbitraryExtensions": true,
     "skipLibCheck": true,
+    "allowJs": true,
 
     /* Bundler mode */
     "moduleResolution": "bundler",