From 937b96877a93206ac424cd1ad99b865676e1c567 Mon Sep 17 00:00:00 2001
From: Kristian Gjertsen <kristiangjertsen5@gmail.com>
Date: Sat, 14 Nov 2026 16:33:41 +0100
Subject: [PATCH 01/12]  standardize AddToBuildButton component to include
 optional icon display

---
 .../components/DesktopComponentDetailPage.tsx   | 17 +++--------------
 .../src/components/buttons/AddToBuildButton.tsx | 16 ++++++++++++----
 2 files changed, 15 insertions(+), 18 deletions(-)

diff --git a/frontend/src/components/DesktopComponentDetailPage.tsx b/frontend/src/components/DesktopComponentDetailPage.tsx
index 716032a..dd04b50 100644
--- a/frontend/src/components/DesktopComponentDetailPage.tsx
+++ b/frontend/src/components/DesktopComponentDetailPage.tsx
@@ -1,4 +1,4 @@
-import { Trash2, X } from "lucide-react";
+import { X } from "lucide-react";
 import { useId, useState } from "react";
 import { Link } from "react-router";
 import type { PcPart } from "@/types/types";
@@ -8,14 +8,11 @@ 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 inBuild = useSelector((state) => selectIsPartInBuild(state, part));
   const specifications = getSpecifications(part);
   const category =
     categories.find((item) => item.value === part.category)?.label ??
@@ -133,16 +130,8 @@ export default function DesktopComponentDetailPage({ part }: { part: PcPart }) {
             <AddToBuildButton
               className="mt-7 flex min-h-10 items-center justify-center gap-3 rounded-lg py-2 text-xs font-medium"
               part={part}
-            >
-              {inBuild ? (
-                <Trash2 size={20} aria-hidden="true" />
-              ) : (
-                <span aria-hidden="true" className="text-xl leading-none">
-                  +
-                </span>
-              )}
-              {inBuild ? "Remove from build" : "Add to build"}
-            </AddToBuildButton>
+              showIcon
+            />
           </div>
         </header>
 
diff --git a/frontend/src/components/buttons/AddToBuildButton.tsx b/frontend/src/components/buttons/AddToBuildButton.tsx
index c4f1e18..ac8c76e 100644
--- a/frontend/src/components/buttons/AddToBuildButton.tsx
+++ b/frontend/src/components/buttons/AddToBuildButton.tsx
@@ -1,4 +1,4 @@
-import type { ReactNode } from "react";
+import { Trash2 } from "lucide-react";
 import { useRef, useState } from "react";
 import type { PcPart } from "@/types/types";
 import { twMerge } from "tailwind-merge";
@@ -17,13 +17,13 @@ import { showNotification } from "@/state/notificationSlice";
 
 type AddToBuildButtonProps = {
   part: PcPart;
-  children?: ReactNode;
+  showIcon?: boolean;
   className?: string;
 };
 
 export default function AddToBuildButton({
   part,
-  children,
+  showIcon = false,
   className,
 }: AddToBuildButtonProps) {
   const [showFeedback, setShowFeedback] = useState(false);
@@ -102,7 +102,15 @@ export default function AddToBuildButton({
         )}
         onClick={handleClick}
       >
-        {children ?? (inBuild ? "Remove from build" : "Add to build")}
+        {showIcon &&
+          (inBuild ? (
+            <Trash2 size={20} aria-hidden="true" />
+          ) : (
+            <span aria-hidden="true" className="text-xl leading-none">
+              +
+            </span>
+          ))}
+        {inBuild ? "Remove from build" : "Add to build"}
       </Button>
 
       {showFeedback && (stage !== "confirm" || !isCategoryEmpty) && (

From 4615c2bfbf5733dc73782fcf6420f91101ad3fd0 Mon Sep 17 00:00:00 2001
From: Kristian Gjertsen <kristiangjertsen5@gmail.com>
Date: Sat, 14 Nov 2026 16:36:36 +0100
Subject: [PATCH 02/12]  replace native button with custom Button component in
 BackToTopButton

---
 frontend/src/components/buttons/BackToTopButton.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/buttons/BackToTopButton.tsx b/frontend/src/components/buttons/BackToTopButton.tsx
index a515e84..c0f26a7 100644
--- a/frontend/src/components/buttons/BackToTopButton.tsx
+++ b/frontend/src/components/buttons/BackToTopButton.tsx
@@ -1,5 +1,6 @@
 import { useEffect, useState } from "react";
 import { ArrowUp } from "lucide-react";
+import Button from "./Button";
 
 // Show the button once the user has scrolled about one screen down.
 const SHOW_AFTER_PX = 600;
@@ -15,9 +16,8 @@ export default function BackToTopButton() {
   }, []);
 
   return (
-    <button
-      type="button"
-      className={`${visible ? "visible" : "invisible"} fixed right-4 bottom-4 z-40 flex h-12 cursor-pointer items-center justify-center gap-2 rounded-full px-5 text-sm bg-accent text-black shadow-lg hover:bg-accent/20 hover:text-accent`}
+    <Button
+      className={`${visible ? "visible" : "invisible"} fixed right-4 bottom-4 z-40 flex h-12 w-auto items-center justify-center gap-2 rounded-full px-5 shadow-lg`}
       onClick={() => {
         window.scrollTo({
           top: 0,
@@ -34,6 +34,6 @@ export default function BackToTopButton() {
     >
       <ArrowUp size={20} aria-hidden="true" />
       Back to top
-    </button>
+    </Button>
   );
 }

From 86e4347e495deba179a7b27b579f31fb97ab8639 Mon Sep 17 00:00:00 2001
From: Kristian Gjertsen <kristiangjertsen5@gmail.com>
Date: Sat, 14 Nov 2026 16:37:25 +0100
Subject: [PATCH 03/12] update BackToTopButton styling for improved appearance

---
 frontend/src/components/buttons/BackToTopButton.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/buttons/BackToTopButton.tsx b/frontend/src/components/buttons/BackToTopButton.tsx
index c0f26a7..5d88680 100644
--- a/frontend/src/components/buttons/BackToTopButton.tsx
+++ b/frontend/src/components/buttons/BackToTopButton.tsx
@@ -17,7 +17,7 @@ export default function BackToTopButton() {
 
   return (
     <Button
-      className={`${visible ? "visible" : "invisible"} fixed right-4 bottom-4 z-40 flex h-12 w-auto items-center justify-center gap-2 rounded-full px-5 shadow-lg`}
+      className={`${visible ? "visible" : "invisible"} fixed right-4 bottom-4 z-40 flex h-12 w-auto items-center justify-center gap-2  px-5 shadow-xl`}
       onClick={() => {
         window.scrollTo({
           top: 0,

From b5f7e75c583183561a3129b98f962ec27b7e5fff Mon Sep 17 00:00:00 2001
From: Kristian Gjertsen <kristiangjertsen5@gmail.com>
Date: Sat, 14 Nov 2026 16:48:02 +0100
Subject: [PATCH 04/12] add allowScripts section to package.json for specific
 dependencies

---
 backend/server/package.json | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/backend/server/package.json b/backend/server/package.json
index ea01ffc..680afa5 100644
--- a/backend/server/package.json
+++ b/backend/server/package.json
@@ -44,5 +44,12 @@
   },
   "overrides": {
     "minimatch": "^11.0.1"
+  },
+  "allowScripts": {
+    "@apollo/protobufjs@1.2.8": true,
+    "@firebase/util@1.15.3": true,
+    "esbuild@0.28.2": true,
+    "protobufjs@7.6.6": true,
+    "fsevents@2.3.3": true
   }
 }

From 7822f2d3b7b4d9e11ed4cc4104fd907e3cc7d80c Mon Sep 17 00:00:00 2001
From: Kristian Gjertsen <kristiangjertsen5@gmail.com>
Date: Sat, 14 Nov 2026 16:57:31 +0100
Subject: [PATCH 05/12] standardize AddToBuildButton styling across components
 and introduce variant prop for better customization

---
 frontend/src/components/DesktopComponentDetailPage.tsx | 2 +-
 frontend/src/components/MobileComponentDetailPage.tsx  | 2 +-
 frontend/src/components/PcPartCard.tsx                 | 2 +-
 frontend/src/components/buttons/AddToBuildButton.tsx   | 4 ++--
 frontend/src/components/buttons/Button.tsx             | 9 ++++++++-
 5 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/DesktopComponentDetailPage.tsx b/frontend/src/components/DesktopComponentDetailPage.tsx
index dd04b50..1ad2ec3 100644
--- a/frontend/src/components/DesktopComponentDetailPage.tsx
+++ b/frontend/src/components/DesktopComponentDetailPage.tsx
@@ -128,7 +128,7 @@ export default function DesktopComponentDetailPage({ part }: { part: PcPart }) {
                 : `€${part.price_eur.toFixed(2)}`}
             </p>
             <AddToBuildButton
-              className="mt-7 flex min-h-10 items-center justify-center gap-3 rounded-lg py-2 text-xs font-medium"
+              className="mt-7 min-h-10"
               part={part}
               showIcon
             />
diff --git a/frontend/src/components/MobileComponentDetailPage.tsx b/frontend/src/components/MobileComponentDetailPage.tsx
index 048f4a6..e0afdd2 100644
--- a/frontend/src/components/MobileComponentDetailPage.tsx
+++ b/frontend/src/components/MobileComponentDetailPage.tsx
@@ -123,7 +123,7 @@ export default function ComponentDetailPage({ part }: { part: PcPart }) {
         >
           {expanded ? "Minimize" : "View all specifications"}
         </button>
-        <AddToBuildButton part={part} className="px-5 py-3.5 text-lg" />
+        <AddToBuildButton part={part} />
       </section>
     </section>
   );
diff --git a/frontend/src/components/PcPartCard.tsx b/frontend/src/components/PcPartCard.tsx
index c795996..b39e5d0 100644
--- a/frontend/src/components/PcPartCard.tsx
+++ b/frontend/src/components/PcPartCard.tsx
@@ -88,7 +88,7 @@ export default function PcPartCard({
       buildAction={
         <AddToBuildButton
           part={completePart}
-          className="hover:bg-accent/20 hover:text-accent mt-auto ml-auto max-w-100"
+          className="mt-auto ml-auto max-w-100"
         />
       }
     />
diff --git a/frontend/src/components/buttons/AddToBuildButton.tsx b/frontend/src/components/buttons/AddToBuildButton.tsx
index ac8c76e..8177964 100644
--- a/frontend/src/components/buttons/AddToBuildButton.tsx
+++ b/frontend/src/components/buttons/AddToBuildButton.tsx
@@ -95,10 +95,10 @@ export default function AddToBuildButton({
   return (
     <>
       <Button
+        variant={inBuild ? "dark" : "default"}
         className={twMerge(
+          showIcon && "flex items-center justify-center gap-3",
           className,
-          inBuild &&
-            "border border-accent bg-black text-accent hover:bg-accent/20",
         )}
         onClick={handleClick}
       >
diff --git a/frontend/src/components/buttons/Button.tsx b/frontend/src/components/buttons/Button.tsx
index fb27531..86cf283 100644
--- a/frontend/src/components/buttons/Button.tsx
+++ b/frontend/src/components/buttons/Button.tsx
@@ -5,6 +5,7 @@ import { twMerge } from "tailwind-merge";
 type ButtonProps = {
   children: ReactNode;
   className?: string;
+  variant?: "default" | "dark";
   onClick?: () => void;
   type?: "button" | "submit";
   disabled?: boolean;
@@ -13,6 +14,7 @@ type ButtonProps = {
 export default function Button({
   children,
   className = "",
+  variant = "default",
   onClick,
   type = "button",
   disabled = false,
@@ -29,7 +31,12 @@ export default function Button({
         onClick?.();
       }}
       className={twMerge(
-        "w-full rounded-lg bg-accent px-2 py-1.5 text-sm text-black",
+        "w-full rounded-lg border-2 transition-[border-color] duration-200 px-2 py-1.5 text-sm",
+
+        // Style for the different variants and states
+        variant === "dark"
+          ? "border-black bg-black text-orange-400 hover:border-orange-400"
+          : "border-orange-400 bg-orange-400 text-black hover:border-black",
         disabled
           ? "cursor-not-allowed"
           : inactive

From 11464ca82c6c04aab2ea149d1ecb2b47d5746f51 Mon Sep 17 00:00:00 2001
From: Kristian Gjertsen <kristiangjertsen5@gmail.com>
Date: Sat, 14 Nov 2026 17:04:52 +0100
Subject: [PATCH 06/12] standardize Button component usage and styling in
 BuildPCGraphic, replacing Link with Button for navigation

---
 frontend/src/components/buttons/Button.tsx    | 65 +++++++++++++------
 .../homePage/components/BuildPCGraphic.tsx    | 19 +++---
 2 files changed, 54 insertions(+), 30 deletions(-)

diff --git a/frontend/src/components/buttons/Button.tsx b/frontend/src/components/buttons/Button.tsx
index 86cf283..cd60281 100644
--- a/frontend/src/components/buttons/Button.tsx
+++ b/frontend/src/components/buttons/Button.tsx
@@ -1,42 +1,69 @@
-import type { ReactNode } from "react";
+import type { ComponentPropsWithRef, ReactNode } from "react";
+import { Link, type LinkProps } from "react-router";
 import { twMerge } from "tailwind-merge";
 
-//Button element with style, and possible to asign specific style when using it
-type ButtonProps = {
+const variantStyles = {
+  default: "border-orange-400 bg-orange-400 text-black hover:border-black",
+  dark: "border-black bg-black text-orange-400 hover:border-orange-400",
+  secondary:
+    "rounded-2xl border border-[#687274] bg-[#252d30] px-8 py-4 text-lg font-semibold text-white hover:border-white",
+};
+
+type SharedProps = {
   children: ReactNode;
   className?: string;
-  variant?: "default" | "dark";
-  onClick?: () => void;
-  type?: "button" | "submit";
-  disabled?: boolean;
+  variant?: keyof typeof variantStyles;
 };
 
+type ButtonProps = SharedProps &
+  (
+    | (Omit<ComponentPropsWithRef<"button">, keyof SharedProps> & {
+        to?: never;
+      })
+    | (Omit<LinkProps, keyof SharedProps> & { disabled?: never })
+  );
+
 export default function Button({
   children,
-  className = "",
+  className,
   variant = "default",
-  onClick,
-  type = "button",
-  disabled = false,
+  ...props
 }: ButtonProps) {
+  const baseStyles = twMerge(
+    "w-full rounded-lg border-2 transition-[border-color] duration-200 px-2 py-1.5 text-sm",
+    variantStyles[variant],
+  );
+
+  if (props.to !== undefined) {
+    return (
+      <Link
+        {...props}
+        className={twMerge(
+          baseStyles,
+          "inline-flex cursor-pointer items-center justify-center",
+          className,
+        )}
+      >
+        {children}
+      </Link>
+    );
+  }
+
+  const { onClick, type = "button", disabled = false, ...buttonProps } = props;
   const inactive = disabled || (!onClick && type !== "submit");
 
   return (
     <button
+      {...buttonProps}
       type={type}
       disabled={disabled}
-      aria-disabled={inactive}
+      aria-disabled={buttonProps["aria-disabled"] ?? inactive}
       onClick={(event) => {
         event.stopPropagation();
-        onClick?.();
+        onClick?.(event);
       }}
       className={twMerge(
-        "w-full rounded-lg border-2 transition-[border-color] duration-200 px-2 py-1.5 text-sm",
-
-        // Style for the different variants and states
-        variant === "dark"
-          ? "border-black bg-black text-orange-400 hover:border-orange-400"
-          : "border-orange-400 bg-orange-400 text-black hover:border-black",
+        baseStyles,
         disabled
           ? "cursor-not-allowed"
           : inactive
diff --git a/frontend/src/pages/homePage/components/BuildPCGraphic.tsx b/frontend/src/pages/homePage/components/BuildPCGraphic.tsx
index add805e..b8f350e 100644
--- a/frontend/src/pages/homePage/components/BuildPCGraphic.tsx
+++ b/frontend/src/pages/homePage/components/BuildPCGraphic.tsx
@@ -1,9 +1,7 @@
-import { Link, useNavigate } from "react-router";
 import Button from "@/components/buttons/Button";
 import heroImage from "@/assets/hero_image.webp";
 
 export default function BuildPCGraphic() {
-  const navigate = useNavigate();
   return (
     <section
       id="builder"
@@ -26,21 +24,20 @@ export default function BuildPCGraphic() {
         />
       </div>
 
-      <div className="row-start-3 flex flex-wrap gap-3 lg:col-start-1 lg:row-start-3">
+      <div className="row-start-3 flex flex-wrap items-center gap-3 lg:col-start-1 lg:row-start-3">
         <Button
-          className="lg:w-auto lg:px-4"
-          onClick={() => {
-            navigate("/builder");
-          }}
+          className="h-11 px-4 py-2 text-sm font-medium lg:w-auto"
+          to="/builder"
         >
-          →&nbsp; Start building
+          Start building
         </Button>
-        <Link
+        <Button
           to="/explore"
-          className="hidden items-center rounded-lg border border-white/20 bg-background px-4 py-2 text-sm hover:bg-black/20 lg:inline-flex"
+          variant="secondary"
+          className="hidden h-11 w-auto rounded-lg px-4 py-2 text-sm font-medium lg:inline-flex"
         >
           Explore components
-        </Link>
+        </Button>
       </div>
     </section>
   );

From 07aa4e9a1d6ee25b94d8bf0da0db478a9c4dbac5 Mon Sep 17 00:00:00 2001
From: Kristian Gjertsen <kristiangjertsen5@gmail.com>
Date: Sat, 14 Nov 2026 17:14:33 +0100
Subject: [PATCH 07/12] add owner_id and is_published fields to builds table
 for better management, for local backend

---
 backend/db/schema.sql | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/backend/db/schema.sql b/backend/db/schema.sql
index 65bb812..c7d5284 100644
--- a/backend/db/schema.sql
+++ b/backend/db/schema.sql
@@ -66,6 +66,8 @@ CREATE TABLE IF NOT EXISTS builds (
     id bigint GENERATED ALWAYS AS IDENTITY PRIMARY KEY,
     tittel varchar(50) NOT NULL CHECK (length(trim(tittel)) > 0),
     created_at timestamptz NOT NULL DEFAULT now(),
+    owner_id bigint REFERENCES users(id),
+    is_published boolean NOT NULL DEFAULT false,
 
     comment varchar(200),
     cpu_id uuid REFERENCES parts(id),
@@ -78,4 +80,4 @@ CREATE TABLE IF NOT EXISTS builds (
     cooler_id uuid REFERENCES parts(id)
 );
 CREATE INDEX IF NOT EXISTS builds_owner_id_idx
-    ON builds(owner_id);
\ No newline at end of file
+    ON builds(owner_id);

From e604be5848d32c5e91dd8c2780089f0664741d70 Mon Sep 17 00:00:00 2001
From: Kristian Gjertsen <kristiangjertsen5@gmail.com>
Date: Sat, 14 Nov 2026 17:39:24 +0100
Subject: [PATCH 08/12] standardize Button component usage and styling across
 multiple components

---
 .../src/components/AddToBuildFeedback.tsx     | 20 +++++------
 frontend/src/components/AllPartsPreview.tsx   | 10 +++---
 frontend/src/components/buttons/Button.tsx    |  3 +-
 .../src/pages/accountPage/accountPage.tsx     | 35 ++++++++++---------
 .../components/DeleteBuildButton.tsx          | 22 +++++++-----
 frontend/src/pages/loginPage/loginPage.tsx    | 12 ++++---
 .../pcBuilderPage/components/PublishBuild.tsx | 16 +++++----
 7 files changed, 66 insertions(+), 52 deletions(-)

diff --git a/frontend/src/components/AddToBuildFeedback.tsx b/frontend/src/components/AddToBuildFeedback.tsx
index 058ef52..caa9078 100644
--- a/frontend/src/components/AddToBuildFeedback.tsx
+++ b/frontend/src/components/AddToBuildFeedback.tsx
@@ -1,3 +1,4 @@
+import Button from "./buttons/Button";
 import type { PcPart } from "@/types/types";
 import { useEffect, useId, useRef } from "react";
 import { ArrowRight, X } from "lucide-react";
@@ -23,10 +24,6 @@ export default function AddToBuildFeedback({
   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();
@@ -125,16 +122,19 @@ export default function AddToBuildFeedback({
         )}
         {stage === "confirm" && (
           <div className="mt-5 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end">
-            <button
-              type="button"
+            <Button
+              variant="secondary"
               onClick={closeFeedback}
-              className={secondaryButton}
+              className="min-h-11 rounded-lg px-4 py-2 text-sm font-medium sm:w-auto"
             >
               Keep current component
-            </button>
-            <button type="button" onClick={onReplace} className={primaryButton}>
+            </Button>
+            <Button
+              onClick={onReplace}
+              className="min-h-11 px-4 py-2 sm:w-auto"
+            >
               Replace component
-            </button>
+            </Button>
           </div>
         )}
       </div>
diff --git a/frontend/src/components/AllPartsPreview.tsx b/frontend/src/components/AllPartsPreview.tsx
index c87bac5..c9d7ca0 100644
--- a/frontend/src/components/AllPartsPreview.tsx
+++ b/frontend/src/components/AllPartsPreview.tsx
@@ -1,3 +1,4 @@
+import Button from "./buttons/Button";
 import { useParts } from "@/hooks/useParts";
 import PcPartCard from "@/components/PcPartCard";
 import PcPartCardSkeleton from "@/components/PcPartCardSkeleton";
@@ -179,7 +180,6 @@ function PartsResults({
 
   return (
     <section className="flex flex-col gap-4 w-full min-w-0 max-w-[100rem]  text-white p-2 md:p-0">
-
       <div className="flex items-center justify-between">
         {!featured && (
           <p className={` ${loading || error ? "invisible" : ""} `}>
@@ -187,7 +187,7 @@ function PartsResults({
           </p>
         )}
 
-         {viewenabled && (
+        {viewenabled && (
           <ViewSelector viewType={viewType} onViewChange={setViewType} />
         )}
       </div>
@@ -271,9 +271,9 @@ function PartsResults({
       )}
 
       {(!featured || error) && (
-        <button
+        <Button
           type="button"
-          className="mt-4 text-lg text-blue-500 enabled:cursor-pointer enabled:hover:underline disabled:opacity-50"
+          className="mt-4 min-h-11 w-auto px-4 py-2"
           disabled={loading || (!error && !pageInfo?.hasNextPage)}
           onClick={error ? retry : handleLoadMore}
         >
@@ -284,7 +284,7 @@ function PartsResults({
               : !pageInfo?.hasNextPage
                 ? "Showing all"
                 : "Load more..."}
-        </button>
+        </Button>
       )}
     </section>
   );
diff --git a/frontend/src/components/buttons/Button.tsx b/frontend/src/components/buttons/Button.tsx
index cd60281..9a7315c 100644
--- a/frontend/src/components/buttons/Button.tsx
+++ b/frontend/src/components/buttons/Button.tsx
@@ -3,6 +3,7 @@ import { Link, type LinkProps } from "react-router";
 import { twMerge } from "tailwind-merge";
 
 const variantStyles = {
+  danger: "border-red-600 bg-red-600 text-white hover:border-red-300",
   default: "border-orange-400 bg-orange-400 text-black hover:border-black",
   dark: "border-black bg-black text-orange-400 hover:border-orange-400",
   secondary:
@@ -30,7 +31,7 @@ export default function Button({
   ...props
 }: ButtonProps) {
   const baseStyles = twMerge(
-    "w-full rounded-lg border-2 transition-[border-color] duration-200 px-2 py-1.5 text-sm",
+    "w-full rounded-lg border-2 transition-[border-color] duration-200 px-2 py-1.5 text-sm focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-accent disabled:opacity-50",
     variantStyles[variant],
   );
 
diff --git a/frontend/src/pages/accountPage/accountPage.tsx b/frontend/src/pages/accountPage/accountPage.tsx
index 4b4a5ae..cfb1111 100644
--- a/frontend/src/pages/accountPage/accountPage.tsx
+++ b/frontend/src/pages/accountPage/accountPage.tsx
@@ -8,6 +8,7 @@ import { useSavedBuild as useBuild } from "@/state/useSavedBuild";
 import { getMyBuilds } from "@/api/builds";
 import type { AccountBuild } from "@/api/builds";
 import DeleteBuildButton from "./components/DeleteBuildButton";
+import Button from "@/components/buttons/Button";
 
 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";
@@ -123,15 +124,15 @@ function AccountContent() {
           </div>
         </div>
 
-        <button
-          type="button"
+        <Button
+          variant="secondary"
           onClick={() => void handleLogout()}
           disabled={signingOut}
-          className={`${buttonStyle} border border-gray-400 hover:bg-background`}
+          className="inline-flex h-11 w-auto items-center justify-center gap-2 rounded-lg px-4 py-2 text-sm font-medium focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-accent disabled:cursor-wait disabled:opacity-50"
         >
           <LogOut aria-hidden="true" className="h-4 w-4" />
           {signingOut ? "Signing out..." : "Sign out"}
-        </button>
+        </Button>
       </header>
 
       {logoutError && (
@@ -148,14 +149,14 @@ function AccountContent() {
           </p>
         </div>
 
-        <Link
+        <Button
           to="/builder"
           onClick={() => resetBuild()}
-          className={`${buttonStyle} bg-accent text-black hover:bg-orange-300 motion-safe:hover:scale-[1.02]`}
+          className="h-11 w-auto gap-2 px-4 py-2 text-sm font-medium focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-accent"
         >
           <Plus aria-hidden="true" className="h-4 w-4" />
           Create a build
-        </Link>
+        </Button>
       </div>
 
       {notice && (
@@ -179,17 +180,17 @@ function AccountContent() {
           <p role="alert" className="text-red-300">
             {error}
           </p>
-          <button
+          <Button
             type="button"
             onClick={() => {
               setLoading(true);
               setError("");
               setRetry((value) => value + 1);
             }}
-            className={`${buttonStyle} mt-4 bg-accent text-black hover:bg-orange-300`}
+            className="mt-4 h-11 w-auto px-4 py-2"
           >
             Try again
-          </button>
+          </Button>
         </div>
       )}
 
@@ -265,22 +266,24 @@ function AccountContent() {
 
           <div className="mt-6 flex justify-between gap-3">
             {offset > 0 && (
-              <button
+              <Button
                 type="button"
                 onClick={() => changePage(offset - 20)}
-                className={`${buttonStyle} border border-gray-500 hover:bg-surface`}
+                variant="secondary"
+                className="h-11 w-auto rounded-lg px-4 py-2 text-sm font-medium"
               >
                 Previous
-              </button>
+              </Button>
             )}
             {builds.length > 20 && (
-              <button
+              <Button
                 type="button"
                 onClick={() => changePage(offset + 20)}
-                className={`${buttonStyle} ml-auto border border-gray-500 hover:bg-surface`}
+                variant="secondary"
+                className="ml-auto h-11 w-auto rounded-lg px-4 py-2 text-sm font-medium"
               >
                 Next
-              </button>
+              </Button>
             )}
           </div>
         </>
diff --git a/frontend/src/pages/accountPage/components/DeleteBuildButton.tsx b/frontend/src/pages/accountPage/components/DeleteBuildButton.tsx
index 9092622..37975c8 100644
--- a/frontend/src/pages/accountPage/components/DeleteBuildButton.tsx
+++ b/frontend/src/pages/accountPage/components/DeleteBuildButton.tsx
@@ -1,3 +1,4 @@
+import Button from "@/components/buttons/Button";
 import { useId, useRef, useState } from "react";
 import { LoaderCircle, Trash2 } from "lucide-react";
 import { deleteBuild } from "@/api/builds";
@@ -39,7 +40,7 @@ export default function DeleteBuildButton({ id, title, onDeleted }: Props) {
 
   return (
     <>
-      <button
+      <Button
         type="button"
         aria-label={`Delete ${title}`}
         onClick={() => {
@@ -47,11 +48,12 @@ export default function DeleteBuildButton({ id, title, onDeleted }: Props) {
           dialogRef.current?.showModal();
           cancelRef.current?.focus();
         }}
-        className="relative z-10 inline-flex cursor-pointer items-center gap-2 rounded-lg px-3 py-2 text-sm text-red-200 transition-colors hover:bg-red-950/40 hover:text-red-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent"
+        variant="danger"
+        className="relative z-10 inline-flex h-11 w-auto items-center justify-center gap-2 px-3 py-2"
       >
         <Trash2 aria-hidden="true" className="h-4 w-4" />
         Delete
-      </button>
+      </Button>
       <dialog
         ref={dialogRef}
         aria-labelledby={headingId}
@@ -78,20 +80,22 @@ export default function DeleteBuildButton({ id, title, onDeleted }: Props) {
           </p>
         )}
         <div className="mt-6 flex flex-col gap-3 sm:flex-row">
-          <button
+          <Button
             ref={cancelRef}
             type="button"
             disabled={deleting}
             onClick={() => dialogRef.current?.close()}
-            className="flex-1 cursor-pointer rounded-lg border border-gray-500 bg-background px-4 py-3 text-sm hover:bg-surface-dark focus-visible:outline-2 focus-visible:outline-accent disabled:opacity-50"
+            variant="secondary"
+            className="h-11 flex-1 rounded-lg px-4 py-2 text-sm font-medium"
           >
             Keep build
-          </button>
-          <button
+          </Button>
+          <Button
             type="button"
             disabled={deleting}
             onClick={() => void confirmDelete()}
-            className="flex flex-1 cursor-pointer items-center justify-center gap-2 rounded-lg bg-red-700 px-4 py-3 text-sm font-semibold hover:bg-red-600 focus-visible:outline-2 focus-visible:outline-accent disabled:cursor-wait disabled:opacity-50"
+            variant="danger"
+            className="flex h-11 flex-1 items-center justify-center gap-2 px-4 py-2 font-semibold disabled:cursor-wait"
           >
             {deleting && (
               <LoaderCircle
@@ -100,7 +104,7 @@ export default function DeleteBuildButton({ id, title, onDeleted }: Props) {
               />
             )}
             {deleting ? "Deleting..." : "Delete build"}
-          </button>
+          </Button>
         </div>
       </dialog>
     </>
diff --git a/frontend/src/pages/loginPage/loginPage.tsx b/frontend/src/pages/loginPage/loginPage.tsx
index 6363c1f..e9773bb 100644
--- a/frontend/src/pages/loginPage/loginPage.tsx
+++ b/frontend/src/pages/loginPage/loginPage.tsx
@@ -1,3 +1,4 @@
+import Button from "@/components/buttons/Button";
 import { Link, useNavigate } from "react-router";
 import { useState } from "react";
 import { FirebaseError } from "firebase/app";
@@ -88,7 +89,10 @@ export default function LoginPage() {
 
   return (
     <section className="w-full text-white">
-      <div key={registering ? "register" : "login"} className="auth-form-enter mx-auto max-w-md">
+      <div
+        key={registering ? "register" : "login"}
+        className="auth-form-enter mx-auto max-w-md"
+      >
         <h1 className="text-center text-2xl font-semibold">
           {registering ? "Create account" : "Welcome back"}
         </h1>
@@ -135,10 +139,10 @@ export default function LoginPage() {
               />
             </label>
 
-            <button
+            <Button
               type="submit"
               disabled={pending || googlePending}
-              className="flex min-h-12 w-full cursor-pointer items-center justify-center gap-2 rounded-lg bg-accent px-4 py-3 font-semibold text-black transition duration-150 hover:brightness-110 active:scale-[0.98] focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-accent disabled:cursor-wait disabled:opacity-50 disabled:hover:brightness-100 disabled:active:scale-100"
+              className="flex min-h-12 items-center justify-center gap-2 px-4 py-3 font-semibold disabled:cursor-wait"
             >
               {pending && (
                 <LoaderCircle
@@ -151,7 +155,7 @@ export default function LoginPage() {
                 : registering
                   ? "Create account"
                   : "Sign in"}
-            </button>
+            </Button>
           </fieldset>
         </form>
 
diff --git a/frontend/src/pages/pcBuilderPage/components/PublishBuild.tsx b/frontend/src/pages/pcBuilderPage/components/PublishBuild.tsx
index 5614300..73a0ca1 100644
--- a/frontend/src/pages/pcBuilderPage/components/PublishBuild.tsx
+++ b/frontend/src/pages/pcBuilderPage/components/PublishBuild.tsx
@@ -29,11 +29,8 @@ export default function PublishBuild({
         className="shrink-0 disabled:opacity-50"
       >
         <Button
-          className={
-            privately
-              ? "py-3 bg-surface text-white border border-gray-500 hover:bg-surface-dark"
-              : "py-3 hover:bg-orange-300"
-          }
+          variant={privately ? "secondary" : "default"}
+          className="h-11 rounded-lg px-4 py-2 text-sm font-medium"
           onClick={() => {
             setPublished(false);
             setError("");
@@ -155,12 +152,17 @@ export default function PublishBuild({
               )}
               <div className="flex gap-3">
                 <Button
-                  className="bg-background text-white"
+                  variant="secondary"
+                  className="h-11 rounded-lg px-4 py-2 text-sm font-medium"
                   onClick={() => dialogRef.current?.close()}
                 >
                   Cancel
                 </Button>
-                <Button type="submit">
+                <Button
+                  type="submit"
+                  variant={privately ? "secondary" : "default"}
+                  className="h-11 rounded-lg px-4 py-2 text-sm font-medium"
+                >
                   {saving
                     ? "Saving..."
                     : privately

From d2b9573367fb92979282a596e7f7dd57939f5b31 Mon Sep 17 00:00:00 2001
From: Kristian Gjertsen <kristiangjertsen5@gmail.com>
Date: Sat, 14 Nov 2026 17:42:18 +0100
Subject: [PATCH 09/12] standardize button usage by replacing button elements
 with TextButton component across multiple pages

---
 .../components/DesktopComponentDetailPage.tsx | 19 ++++++++-----------
 frontend/src/components/FilterComponent.tsx   | 12 ++++++------
 .../components/MobileComponentDetailPage.tsx  |  7 ++++---
 frontend/src/components/buttons/Button.tsx    |  1 +
 .../src/components/buttons/TextButton.tsx     | 12 ++++++++++++
 frontend/src/pages/loginPage/loginPage.tsx    |  6 +++---
 .../pcBuilderPage/components/ClearBuild.tsx   |  7 ++++---
 7 files changed, 38 insertions(+), 26 deletions(-)
 create mode 100644 frontend/src/components/buttons/TextButton.tsx

diff --git a/frontend/src/components/DesktopComponentDetailPage.tsx b/frontend/src/components/DesktopComponentDetailPage.tsx
index 1ad2ec3..bcb43a1 100644
--- a/frontend/src/components/DesktopComponentDetailPage.tsx
+++ b/frontend/src/components/DesktopComponentDetailPage.tsx
@@ -1,3 +1,4 @@
+import TextButton from "@/components/buttons/TextButton";
 import { X } from "lucide-react";
 import { useId, useState } from "react";
 import { Link } from "react-router";
@@ -44,12 +45,12 @@ export default function DesktopComponentDetailPage({ part }: { part: PcPart }) {
               </li>
               <li>
                 <form method="dialog">
-                  <button
+                  <TextButton
                     type="submit"
-                    className="inline-flex min-h-11 cursor-pointer items-center px-1 hover:text-white"
+                    className="inline-flex min-h-11 items-center px-1"
                   >
                     Explore components
-                  </button>
+                  </TextButton>
                 </form>
               </li>
               <li aria-hidden="true">/</li>
@@ -127,11 +128,7 @@ export default function DesktopComponentDetailPage({ part }: { part: PcPart }) {
                 ? "Price unavailable"
                 : `€${part.price_eur.toFixed(2)}`}
             </p>
-            <AddToBuildButton
-              className="mt-7 min-h-10"
-              part={part}
-              showIcon
-            />
+            <AddToBuildButton className="mt-7 min-h-10" part={part} showIcon />
           </div>
         </header>
 
@@ -187,12 +184,12 @@ export default function DesktopComponentDetailPage({ part }: { part: PcPart }) {
               </dl>
             </div>
             {specifications.length > 4 && (
-              <button
+              <TextButton
                 type="button"
                 aria-expanded={expanded}
                 aria-controls={specificationsId}
                 onClick={() => setExpanded((previous) => !previous)}
-                className="mt-4 flex cursor-pointer items-center gap-3 text-xs text-accent hover:underline"
+                className="mt-4 flex items-center gap-3 text-xs"
               >
                 {expanded
                   ? "Show fewer specifications"
@@ -203,7 +200,7 @@ export default function DesktopComponentDetailPage({ part }: { part: PcPart }) {
                 >
                   ↗
                 </span>
-              </button>
+              </TextButton>
             )}
           </div>
         </section>
diff --git a/frontend/src/components/FilterComponent.tsx b/frontend/src/components/FilterComponent.tsx
index 6f6ac83..2465fcc 100644
--- a/frontend/src/components/FilterComponent.tsx
+++ b/frontend/src/components/FilterComponent.tsx
@@ -1,3 +1,4 @@
+import TextButton from "@/components/buttons/TextButton";
 import { useEffect, useRef, useState } from "react";
 import type { Dispatch, SetStateAction } from "react";
 import type { PartsOptions } from "@/api/parts";
@@ -104,14 +105,13 @@ export default function FilterComponent({
               </select>
             </label>
 
-            <button
+            <TextButton
               type="button"
               aria-label="Reset filters"
-              className="cursor-pointer text-sm underline"
               onClick={() => setFiltOptions({ category: defaultCategory })}
             >
               Reset
-            </button>
+            </TextButton>
           </form>
         </>
       ) : (
@@ -203,14 +203,14 @@ export default function FilterComponent({
               </label>
 
               <div className="mt-1 flex items-center gap-4 border-t border-gray-600 pt-4">
-                <button
+                <TextButton
                   type="button"
                   aria-label="Reset filters"
-                  className="min-h-11 cursor-pointer rounded-lg px-3 text-sm underline underline-offset-4 hover:text-gray-300 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
+                  className="min-h-11 px-3"
                   onClick={() => setDraft({ category: defaultCategory })}
                 >
                   Reset
-                </button>
+                </TextButton>
                 <Button
                   type="submit"
                   className="min-h-11 flex-1 py-3 font-medium focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
diff --git a/frontend/src/components/MobileComponentDetailPage.tsx b/frontend/src/components/MobileComponentDetailPage.tsx
index e0afdd2..6f52f3c 100644
--- a/frontend/src/components/MobileComponentDetailPage.tsx
+++ b/frontend/src/components/MobileComponentDetailPage.tsx
@@ -1,3 +1,4 @@
+import TextButton from "@/components/buttons/TextButton";
 import type { PcPart } from "@/types/types";
 import { useRef, useState } from "react";
 import { usePartImageLayout } from "@/hooks/usePartImageLayout";
@@ -115,14 +116,14 @@ export default function ComponentDetailPage({ part }: { part: PcPart }) {
           ))}
         </dl>
 
-        <button
+        <TextButton
           type="button"
-          className="h-10 shrink-0 underline"
+          className="h-10 shrink-0"
           aria-expanded={expanded}
           onClick={toggleSpecifications}
         >
           {expanded ? "Minimize" : "View all specifications"}
-        </button>
+        </TextButton>
         <AddToBuildButton part={part} />
       </section>
     </section>
diff --git a/frontend/src/components/buttons/Button.tsx b/frontend/src/components/buttons/Button.tsx
index 9a7315c..1108ceb 100644
--- a/frontend/src/components/buttons/Button.tsx
+++ b/frontend/src/components/buttons/Button.tsx
@@ -3,6 +3,7 @@ import { Link, type LinkProps } from "react-router";
 import { twMerge } from "tailwind-merge";
 
 const variantStyles = {
+  text: "w-auto rounded border-0 bg-transparent p-0 font-normal text-accent underline decoration-1 underline-offset-4 transition-colors enabled:hover:text-white",
   danger: "border-red-600 bg-red-600 text-white hover:border-red-300",
   default: "border-orange-400 bg-orange-400 text-black hover:border-black",
   dark: "border-black bg-black text-orange-400 hover:border-orange-400",
diff --git a/frontend/src/components/buttons/TextButton.tsx b/frontend/src/components/buttons/TextButton.tsx
new file mode 100644
index 0000000..f667d58
--- /dev/null
+++ b/frontend/src/components/buttons/TextButton.tsx
@@ -0,0 +1,12 @@
+import type { ComponentPropsWithRef } from "react";
+import Button from "./Button";
+
+type TextButtonProps = ComponentPropsWithRef<"button">;
+
+export default function TextButton(props: TextButtonProps) {
+  return (
+    <Button {...props} variant="text">
+      {props.children}
+    </Button>
+  );
+}
diff --git a/frontend/src/pages/loginPage/loginPage.tsx b/frontend/src/pages/loginPage/loginPage.tsx
index e9773bb..a7856cb 100644
--- a/frontend/src/pages/loginPage/loginPage.tsx
+++ b/frontend/src/pages/loginPage/loginPage.tsx
@@ -1,3 +1,4 @@
+import TextButton from "@/components/buttons/TextButton";
 import Button from "@/components/buttons/Button";
 import { Link, useNavigate } from "react-router";
 import { useState } from "react";
@@ -198,7 +199,7 @@ export default function LoginPage() {
           <span className="text-gray-300">
             {registering ? "Already have an account? " : "Need an account? "}
           </span>
-          <button
+          <TextButton
             type="button"
             disabled={pending || googlePending}
             onClick={() => {
@@ -206,10 +207,9 @@ export default function LoginPage() {
               setPassword("");
               setError("");
             }}
-            className="cursor-pointer rounded font-medium text-accent underline-offset-4 transition-colors hover:text-white hover:underline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-accent disabled:cursor-wait disabled:opacity-50"
           >
             {registering ? "Sign in" : "Register"}
-          </button>
+          </TextButton>
         </div>
 
         {(pending || googlePending) && (
diff --git a/frontend/src/pages/pcBuilderPage/components/ClearBuild.tsx b/frontend/src/pages/pcBuilderPage/components/ClearBuild.tsx
index 89df7e4..a63d58f 100644
--- a/frontend/src/pages/pcBuilderPage/components/ClearBuild.tsx
+++ b/frontend/src/pages/pcBuilderPage/components/ClearBuild.tsx
@@ -1,3 +1,4 @@
+import TextButton from "@/components/buttons/TextButton";
 import { useRef } from "react";
 import Button from "@/components/buttons/Button";
 import { resetBuild } from "@/state/selectedPartsSlice";
@@ -12,16 +13,16 @@ export default function ClearBuild() {
   //Small popup component that ask if user wants to delete build
   return (
     <>
-      <button
+      <TextButton
         type="button"
-        className="cursor-pointer ml-auto px-3 py-1 text-sm text-accent underline underline-offset-3 decoration-2"
+        className="ml-auto px-3 py-1"
         onClick={() => {
           if (Object.keys(parts).length === 0) return;
           dialogRef.current?.showModal();
         }}
       >
         Clear build
-      </button>
+      </TextButton>
 
       <dialog
         ref={dialogRef}

From 1c983a4f95ae53cd722b1b003e56f81f77a03d9f Mon Sep 17 00:00:00 2001
From: Kristian Gjertsen <kristiangjertsen5@gmail.com>
Date: Sat, 14 Nov 2026 17:43:28 +0100
Subject: [PATCH 10/12] Removing border for a cleaner look, like they were
 before Button component changed

---
 .../pcBuilderPage/components/ComponentSelectionComponent.tsx  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/pages/pcBuilderPage/components/ComponentSelectionComponent.tsx b/frontend/src/pages/pcBuilderPage/components/ComponentSelectionComponent.tsx
index c6631fe..b32a2c1 100644
--- a/frontend/src/pages/pcBuilderPage/components/ComponentSelectionComponent.tsx
+++ b/frontend/src/pages/pcBuilderPage/components/ComponentSelectionComponent.tsx
@@ -93,7 +93,7 @@ export default function ComponentSelectionComponent({
             </p>
             <div className="flex w-full sm:w-auto justify-end gap-2 items-center">
               <Button
-                className="flex h-11 w-11 items-center justify-center bg-transparent text-white"
+                className="flex h-11 w-11 items-center justify-center border-0 bg-transparent text-white"
                 onClick={() => {
                   navigate(
                     `/explore/category/${encodeURIComponent(categoryValue)}`,
@@ -104,7 +104,7 @@ export default function ComponentSelectionComponent({
                 <span className="sr-only">Change {part.name}</span>
               </Button>
               <Button
-                className="flex h-11 w-11 items-center justify-center bg-transparent"
+                className="flex h-11 w-11 items-center justify-center border-0 bg-transparent"
                 onClick={() => {
                   dispatch(removePart(categoryValue));
                   dispatch(

From ca8e50b49d353b52e2223d9df5af3841bb3eb63a Mon Sep 17 00:00:00 2001
From: Kristian Gjertsen <kristiangjertsen5@gmail.com>
Date: Sat, 14 Nov 2026 17:47:08 +0100
Subject: [PATCH 11/12] standardize button components and styling in
 AuthButton, Notification, Header, and ClearBuild

---
 frontend/src/components/AuthButton.tsx                    | 4 ++--
 frontend/src/components/Notification.tsx                  | 8 ++++----
 frontend/src/components/pageSections/Header.tsx           | 2 +-
 .../src/pages/pcBuilderPage/components/ClearBuild.tsx     | 6 ++++--
 4 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/AuthButton.tsx b/frontend/src/components/AuthButton.tsx
index cb0da12..c3f483e 100644
--- a/frontend/src/components/AuthButton.tsx
+++ b/frontend/src/components/AuthButton.tsx
@@ -9,9 +9,9 @@ export default function AuthButton() {
   return (
     <Link
       to={user ? "/account" : "/login"}
-      className="flex items-center gap-1 hover:text-accent"
+      className="inline-flex min-h-11 shrink-0 items-center gap-2 rounded-lg text-sm font-normal text-white transition-colors duration-200 hover:text-accent focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-accent"
     >
-      <UserRound />
+      <UserRound size={24} strokeWidth={1.7} aria-hidden="true" />
       {user ? "My account" : "Log in"}
     </Link>
   );
diff --git a/frontend/src/components/Notification.tsx b/frontend/src/components/Notification.tsx
index dde2e37..eac10d5 100644
--- a/frontend/src/components/Notification.tsx
+++ b/frontend/src/components/Notification.tsx
@@ -5,6 +5,7 @@ import type { RootState } from "@/state/store";
 import { dismissNotification } from "@/state/notificationSlice";
 import { useEffect, useId, useRef, useState } from "react";
 import { createPortal } from "react-dom";
+import Button from "./buttons/Button";
 
 export default function Notification() {
   const dispatch = useDispatch();
@@ -150,13 +151,12 @@ export default function Notification() {
           </p>
         </div>
         {action && (
-          <button
-            type="button"
+          <Button
             onClick={action.onClick}
-            className="shrink-0 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"
+            className="w-auto shrink-0 px-5 py-2 text-xs font-semibold"
           >
             {action.label}
-          </button>
+          </Button>
         )}
       </div>
       <div
diff --git a/frontend/src/components/pageSections/Header.tsx b/frontend/src/components/pageSections/Header.tsx
index 22aa0cb..6906fd2 100644
--- a/frontend/src/components/pageSections/Header.tsx
+++ b/frontend/src/components/pageSections/Header.tsx
@@ -73,7 +73,7 @@ export default function NavBar() {
       <Link
         to="/builder"
         onClick={() => setMenuOpen(false)}
-        className="ml-auto flex shrink-0 items-center gap-2"
+        className="ml-auto inline-flex min-h-11 shrink-0 self-center items-center gap-2 rounded-lg text-sm font-normal text-white transition-colors duration-200 hover:text-accent focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-accent"
       >
         <svg
           aria-hidden="true"
diff --git a/frontend/src/pages/pcBuilderPage/components/ClearBuild.tsx b/frontend/src/pages/pcBuilderPage/components/ClearBuild.tsx
index a63d58f..f7c1830 100644
--- a/frontend/src/pages/pcBuilderPage/components/ClearBuild.tsx
+++ b/frontend/src/pages/pcBuilderPage/components/ClearBuild.tsx
@@ -38,13 +38,15 @@ export default function ClearBuild() {
         </p>
         <div className="mt-5 flex gap-3">
           <Button
-            className="border border-gray-600 bg-background py-2 text-white"
+            variant="secondary"
+            className="h-11 flex-1 rounded-lg px-4 py-2 text-sm font-medium"
             onClick={() => dialogRef.current?.close()}
           >
             Cancel
           </Button>
           <Button
-            className="py-2"
+            variant="danger"
+            className="h-11 flex-1 px-4 py-2 text-sm font-medium"
             onClick={() => {
               dispatch(resetBuild());
               dialogRef.current?.close();

From ef309f1022352fc127b27128aebab377cefb5a22 Mon Sep 17 00:00:00 2001
From: Kristian Gjertsen <kristiangjertsen5@gmail.com>
Date: Sat, 14 Nov 2026 17:53:04 +0100
Subject: [PATCH 12/12] add 404 Not Found page with navigation back to home

---
 frontend/src/App.tsx                             |  6 ++----
 frontend/src/pages/notFoundPage/notFoundPage.tsx | 13 +++++++++++++
 2 files changed, 15 insertions(+), 4 deletions(-)
 create mode 100644 frontend/src/pages/notFoundPage/notFoundPage.tsx

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 016b702..09cba57 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -6,6 +6,7 @@ import CommunityPage from "./pages/communityPage/communityPage";
 import Layout from "./components/Layout";
 import LoginPage from "./pages/loginPage/loginPage";
 import AccountPage from "./pages/accountPage/accountPage";
+import NotFoundPage from "./pages/notFoundPage/notFoundPage";
 import { Routes, Route, useLocation, useParams } from "react-router";
 import { useSelector } from "react-redux";
 import type { RootState } from "./state/store";
@@ -34,10 +35,7 @@ function App() {
         <Route path="/community" element={<CommunityPage />} />
         <Route path="/login" element={<LoginPage />} />
         <Route path="/account" element={<AccountPage />} />
-        <Route
-          path="*"
-          element={<p className="w-full">404 - Page not found</p>}
-        />
+        <Route path="*" element={<NotFoundPage />} />
       </Routes>
     </Layout>
   );
diff --git a/frontend/src/pages/notFoundPage/notFoundPage.tsx b/frontend/src/pages/notFoundPage/notFoundPage.tsx
new file mode 100644
index 0000000..eb17008
--- /dev/null
+++ b/frontend/src/pages/notFoundPage/notFoundPage.tsx
@@ -0,0 +1,13 @@
+import Button from "@/components/buttons/Button";
+
+export default function NotFoundPage() {
+  return (
+    <section className="py-16 text-center">
+      <h1 className="text-5xl font-semibold">404</h1>
+      <p className="mt-3 text-gray-300">Page not found.</p>
+      <Button to="/" className="mt-6 w-70 px-4 py-3">
+        Back to home
+      </Button>
+    </section>
+  );
+}