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 1/5] 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>
+  );
+}

From 266e934743b386416596213661d5ce8519380fbd Mon Sep 17 00:00:00 2001
From: Kristian Gjertsen <kristiangjertsen5@gmail.com>
Date: Sat, 14 Nov 2026 18:08:42 +0100
Subject: [PATCH 2/5] refactor: enhance UI consistency by applying
 'tabular-nums' class to price elements and improving layout responsiveness

---
 frontend/src/components/DesktopComponentDetailPage.tsx    | 2 +-
 frontend/src/components/MobileComponentDetailPage.tsx     | 2 +-
 frontend/src/components/PcPartCardLayout.tsx              | 8 ++++----
 frontend/src/pages/accountPage/accountPage.tsx            | 2 +-
 .../pcBuilderPage/components/BuildSummaryComponent.tsx    | 2 +-
 .../components/ComponentSelectionComponent.tsx            | 4 ++--
 6 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/DesktopComponentDetailPage.tsx b/frontend/src/components/DesktopComponentDetailPage.tsx
index bcb43a1..25a2f5b 100644
--- a/frontend/src/components/DesktopComponentDetailPage.tsx
+++ b/frontend/src/components/DesktopComponentDetailPage.tsx
@@ -123,7 +123,7 @@ export default function DesktopComponentDetailPage({ part }: { part: PcPart }) {
             </dl>
 
             <hr className="my-5 border-0 border-t border-surface" />
-            <p className="text-4xl font-semibold">
+            <p className="text-4xl font-semibold tabular-nums">
               {part.price_eur === null
                 ? "Price unavailable"
                 : `€${part.price_eur.toFixed(2)}`}
diff --git a/frontend/src/components/MobileComponentDetailPage.tsx b/frontend/src/components/MobileComponentDetailPage.tsx
index 6f52f3c..99391c2 100644
--- a/frontend/src/components/MobileComponentDetailPage.tsx
+++ b/frontend/src/components/MobileComponentDetailPage.tsx
@@ -66,7 +66,7 @@ export default function ComponentDetailPage({ part }: { part: PcPart }) {
           {part.name}
         </h2>
 
-        <p ref={priceRef} className="text-2xl">
+        <p ref={priceRef} className="text-2xl tabular-nums">
           {part.price_eur === null
             ? "Price unavailable"
             : `€${part.price_eur.toFixed(2)}`}
diff --git a/frontend/src/components/PcPartCardLayout.tsx b/frontend/src/components/PcPartCardLayout.tsx
index 6e4d42c..66403df 100644
--- a/frontend/src/components/PcPartCardLayout.tsx
+++ b/frontend/src/components/PcPartCardLayout.tsx
@@ -32,7 +32,7 @@ export default function PcPartCardLayout({
       }}
     >
       <article tabIndex={skeleton ? undefined : 0}
-        className={`flex w-full min-w-0 flex-col overflow-hidden rounded-xl bg-surface text-white @md:flex-row ${skeleton ? "motion-safe:animate-pulse" : ""}`}
+        className={`flex w-full min-w-0 flex-col overflow-hidden rounded-xl bg-surface text-white @md:flex-row ${skeleton ? "motion-safe:animate-pulse" : "hover:ring-2 hover:ring-accent"}`}
         onKeyDown={(event) => {
           if (skeleton || event.target !== event.currentTarget) return;
           if (event.key === "Enter" || event.key === " "){
@@ -49,10 +49,10 @@ export default function PcPartCardLayout({
 
         <div
           className="grid min-w-0 flex-1 grid-cols-1 gap-2 p-2
-            @[500px]:grid-cols-[minmax(0,1fr)_auto]
+            @[500px]:grid-cols-[minmax(0,1fr)_11rem]
             @[500px]:grid-rows-[1fr_auto]
             @[500px]:gap-3 @[500px]:p-3
-            @[800px]:grid-cols-[minmax(0,1fr)_auto_auto]
+            @[800px]:grid-cols-[minmax(0,1fr)_auto_11rem]
             @[800px]:grid-rows-1
             @[800px]:items-center @[800px]:gap-6 @[800px]:p-5"
         >
@@ -71,7 +71,7 @@ export default function PcPartCardLayout({
             {error}
           </div>
 
-          <p className="self-center whitespace-nowrap text-xl">
+          <p className="self-center whitespace-nowrap text-xl tabular-nums @[800px]:text-right">
             {price}
           </p>
 
diff --git a/frontend/src/pages/accountPage/accountPage.tsx b/frontend/src/pages/accountPage/accountPage.tsx
index cfb1111..8293fe6 100644
--- a/frontend/src/pages/accountPage/accountPage.tsx
+++ b/frontend/src/pages/accountPage/accountPage.tsx
@@ -214,7 +214,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"
+                  className="group relative min-w-0 rounded-xl border border-transparent bg-surface wrap-break-words transition duration-200 hover:border-accent focus-within:border-accent"
                 >
                   <Link
                     to={`/builder?build=${encodeURIComponent(build.id)}`}
diff --git a/frontend/src/pages/pcBuilderPage/components/BuildSummaryComponent.tsx b/frontend/src/pages/pcBuilderPage/components/BuildSummaryComponent.tsx
index ad46fe4..3271b7a 100644
--- a/frontend/src/pages/pcBuilderPage/components/BuildSummaryComponent.tsx
+++ b/frontend/src/pages/pcBuilderPage/components/BuildSummaryComponent.tsx
@@ -35,7 +35,7 @@ export default function BuildSummaryComponent({
 
       <p className="text-gray-300 text-sm mt-2">Build total:</p>
 
-      <p role="status" className="text-xl">
+      <p role="status" className="text-xl tabular-nums">
         €{totalSum.toFixed(2)}
       </p>
       {missingPriceCount > 0 && (
diff --git a/frontend/src/pages/pcBuilderPage/components/ComponentSelectionComponent.tsx b/frontend/src/pages/pcBuilderPage/components/ComponentSelectionComponent.tsx
index b32a2c1..1ae96f4 100644
--- a/frontend/src/pages/pcBuilderPage/components/ComponentSelectionComponent.tsx
+++ b/frontend/src/pages/pcBuilderPage/components/ComponentSelectionComponent.tsx
@@ -86,10 +86,10 @@ export default function ComponentSelectionComponent({
           </div>
 
           <div className="contents sm:flex sm:flex-col sm:ml-auto sm:shrink-0">
-            <p className="shrink-0 text-base">
+            <p className="shrink-0 text-base tabular-nums">
               {part.price_eur == null
                 ? "Price unavailable"
-                : `€${part.price_eur}`}
+                : `€${part.price_eur.toFixed(2)}`}
             </p>
             <div className="flex w-full sm:w-auto justify-end gap-2 items-center">
               <Button

From 364ce45eb3d11ab0f5a2aa674b0740757e9da9b3 Mon Sep 17 00:00:00 2001
From: Kristian Gjertsen <kristiangjertsen5@gmail.com>
Date: Sat, 14 Nov 2026 18:12:36 +0100
Subject: [PATCH 3/5] improve CategorySelection component by adding
 activeCategory prop and enhancing link styling

---
 frontend/src/components/CategorySelection.tsx    | 8 ++++++--
 frontend/src/components/pageSections/Footer.tsx  | 2 +-
 frontend/src/pages/categoryPage/categoryPage.tsx | 5 ++++-
 3 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/CategorySelection.tsx b/frontend/src/components/CategorySelection.tsx
index b9f0c59..ebf707a 100644
--- a/frontend/src/components/CategorySelection.tsx
+++ b/frontend/src/components/CategorySelection.tsx
@@ -26,10 +26,12 @@ const categoryIcons: Record<PcPart["category"], LucideIcon> = {
 
 type CategorySelectionProps = {
   showViewAll?: boolean;
+  activeCategory?: PcPart["category"];
 };
 
 export default function CategorySelection({
   showViewAll = true,
+  activeCategory,
 }: CategorySelectionProps) {
   return (
     <section className="mx-auto w-full max-w-lg text-white lg:mx-0 lg:w-full lg:max-w-none">
@@ -46,7 +48,7 @@ export default function CategorySelection({
         {showViewAll && (
           <Link
             to="/explore"
-            className="hidden text-sm text-accent hover:underline lg:block"
+            className="hidden text-sm text-accent hover:underline hover lg:block"
           >
             View all components →
           </Link>
@@ -56,11 +58,13 @@ export default function CategorySelection({
       <ul className="grid grid-cols-3 gap-3 lg:grid-cols-8">
         {categories.map((category) => {
           const Icon = categoryIcons[category.value];
+          const isActive = category.value === activeCategory;
           return (
             <li key={category.value}>
               <Link
                 to={`/explore/category/${encodeURIComponent(category.value)}`}
-                className="flex min-h-24 flex-col items-center justify-center gap-2 rounded-xl bg-surface p-2 text-center text-sm hover:brightness-110"
+                aria-current={isActive ? "page" : undefined}
+                className={`flex min-h-24 flex-col items-center justify-center gap-2 rounded-xl border-2 bg-surface p-2 text-center text-sm transition-[border-color] duration-200 hover:border-accent ${isActive ? "border-accent" : "border-transparent"}`}
               >
                 <Icon
                   aria-hidden="true"
diff --git a/frontend/src/components/pageSections/Footer.tsx b/frontend/src/components/pageSections/Footer.tsx
index 408c7c1..8361389 100644
--- a/frontend/src/components/pageSections/Footer.tsx
+++ b/frontend/src/components/pageSections/Footer.tsx
@@ -1,6 +1,6 @@
 export default function Footer() {
   return (
-    <div className="flex w-full flex-col gap-4 py-6 text-sm sm:flex-row sm:items-center sm:justify-between">
+    <div className="flex w-full flex-col gap-4 py-6 text-sm sm:flex-row sm:items-center sm:justify-between mt-100">
       <div>
         <p className="font-bold">Full Circuit</p>
         <p className="mt-1 text-secondary">
diff --git a/frontend/src/pages/categoryPage/categoryPage.tsx b/frontend/src/pages/categoryPage/categoryPage.tsx
index a71c3ad..7de5dc0 100644
--- a/frontend/src/pages/categoryPage/categoryPage.tsx
+++ b/frontend/src/pages/categoryPage/categoryPage.tsx
@@ -21,7 +21,10 @@ export default function CategoryPage({ category }: CategoryPageProps) {
   return (
     <div className="flex w-full flex-col items-center gap-6">
      
-       <CategorySelection showViewAll={false} />
+      <CategorySelection
+        showViewAll={false}
+        activeCategory={invalidCategory ? undefined : filtOptions.category}
+      />
       <FilterComponent
         defaultCategory={initialCategory?.value}
         filtOptions={filtOptions}

From 4b6aa756e7db3643a2830cf8d11773a1428df14c Mon Sep 17 00:00:00 2001
From: Kristian Gjertsen <kristiangjertsen5@gmail.com>
Date: Sat, 14 Nov 2026 18:14:36 +0100
Subject: [PATCH 4/5] enhance layout consistency by adjusting padding and
 footer styling

---
 frontend/src/components/Layout.tsx              | 4 ++--
 frontend/src/components/pageSections/Footer.tsx | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/Layout.tsx b/frontend/src/components/Layout.tsx
index 8613810..6c9245e 100644
--- a/frontend/src/components/Layout.tsx
+++ b/frontend/src/components/Layout.tsx
@@ -14,8 +14,8 @@ export default function Layout({ children }: { children: ReactNode }) {
           <NavBar />
         </div>
       </header>
-      <main className={`${contentWidth} min-w-0 flex-1 py-6`}>{children}</main>
-      <footer className="bg-surface text-white">
+      <main className={`${contentWidth} min-w-0 flex-1 pt-6 pb-16`}>{children}</main>
+      <footer className="bg-surface text-white shadow-[0_-4px_16px_rgba(0,0,0,0.2)]">
         <div className={contentWidth}>
           <Footer />
         </div>
diff --git a/frontend/src/components/pageSections/Footer.tsx b/frontend/src/components/pageSections/Footer.tsx
index 8361389..408c7c1 100644
--- a/frontend/src/components/pageSections/Footer.tsx
+++ b/frontend/src/components/pageSections/Footer.tsx
@@ -1,6 +1,6 @@
 export default function Footer() {
   return (
-    <div className="flex w-full flex-col gap-4 py-6 text-sm sm:flex-row sm:items-center sm:justify-between mt-100">
+    <div className="flex w-full flex-col gap-4 py-6 text-sm sm:flex-row sm:items-center sm:justify-between">
       <div>
         <p className="font-bold">Full Circuit</p>
         <p className="mt-1 text-secondary">

From 46b50fb8395ae7b1672b536b1630d5a8dd381d48 Mon Sep 17 00:00:00 2001
From: Kristian Gjertsen <kristiangjertsen5@gmail.com>
Date: Sat, 14 Nov 2026 18:26:43 +0100
Subject: [PATCH 5/5]  enhance UI consistency and improve loading states in
 PartsResults and CompatabilityComponent

---
 frontend/src/components/AllPartsPreview.tsx   | 40 +++++++++++--------
 frontend/src/components/buttons/Button.tsx    |  2 +-
 .../components/CompatabilityComponent.tsx     |  8 ++--
 frontend/src/styles/colors.css                | 10 ++---
 4 files changed, 33 insertions(+), 27 deletions(-)

diff --git a/frontend/src/components/AllPartsPreview.tsx b/frontend/src/components/AllPartsPreview.tsx
index c9d7ca0..52503c1 100644
--- a/frontend/src/components/AllPartsPreview.tsx
+++ b/frontend/src/components/AllPartsPreview.tsx
@@ -256,7 +256,14 @@ function PartsResults({
       </dialog>
 
       {loading && (
-        <p role="status" className={showSkeletons ? "sr-only" : "mt-3"}>
+        <p
+          role="status"
+          className={
+            showSkeletons
+              ? "sr-only"
+              : "mt-4 text-center text-sm text-secondary"
+          }
+        >
           Loading parts...
         </p>
       )}
@@ -270,22 +277,21 @@ function PartsResults({
         <div ref={loadMoreRef} aria-hidden="true" className="h-px w-full" />
       )}
 
-      {(!featured || error) && (
-        <Button
-          type="button"
-          className="mt-4 min-h-11 w-auto px-4 py-2"
-          disabled={loading || (!error && !pageInfo?.hasNextPage)}
-          onClick={error ? retry : handleLoadMore}
-        >
-          {loading
-            ? "Loading..."
-            : error
-              ? "Try again"
-              : !pageInfo?.hasNextPage
-                ? "Showing all"
-                : "Load more..."}
-        </Button>
-      )}
+      {!loading &&
+        (!featured || error) &&
+        (!error && !pageInfo?.hasNextPage ? (
+          <p role="status" className="mt-4 text-center text-sm text-secondary">
+            Showing {visibleParts.length}/{totalCount}
+          </p>
+        ) : (
+          <Button
+            type="button"
+            className="mt-4 min-h-11 w-auto px-4 py-2"
+            onClick={error ? retry : handleLoadMore}
+          >
+            {error ? "Try again" : "Load more..."}
+          </Button>
+        ))}
     </section>
   );
 }
diff --git a/frontend/src/components/buttons/Button.tsx b/frontend/src/components/buttons/Button.tsx
index 1108ceb..b2df5a7 100644
--- a/frontend/src/components/buttons/Button.tsx
+++ b/frontend/src/components/buttons/Button.tsx
@@ -4,7 +4,7 @@ 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",
+  danger: "border-status-incompatible bg-status-incompatible 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:
diff --git a/frontend/src/pages/pcBuilderPage/components/CompatabilityComponent.tsx b/frontend/src/pages/pcBuilderPage/components/CompatabilityComponent.tsx
index 5ef5fba..01d2f31 100644
--- a/frontend/src/pages/pcBuilderPage/components/CompatabilityComponent.tsx
+++ b/frontend/src/pages/pcBuilderPage/components/CompatabilityComponent.tsx
@@ -101,10 +101,10 @@ export default function CompatabilityComponent({ parts }: { parts: PcPart[] }) {
 
           return (
             <section key={status}>
-              <h3 className="lg:hidden">
+              <h3>
                 <button
                   type="button"
-                  className={`flex min-h-11 w-full items-center gap-2 rounded-md py-2 text-left focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent ${color}`}
+                  className={`flex min-h-11 w-full cursor-pointer items-center gap-2 rounded-md py-2 text-left focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent ${color}`}
                   aria-expanded={isExpanded}
                   aria-controls={panelId}
                   onClick={() =>
@@ -126,11 +126,11 @@ export default function CompatabilityComponent({ parts }: { parts: PcPart[] }) {
 
               <div
                 id={panelId}
-                className={`${isExpanded ? "flex" : "hidden"} flex-col gap-2 pb-2 lg:flex lg:pb-0`}
+                className={`${isExpanded ? "flex" : "hidden"} flex-col gap-2 pb-2`}
               >
                 {/* IF NO CHECKS AVAILABLE */}
                 {checks.length === 0 && (
-                  <p className="text-gray-300 lg:hidden">
+                  <p className="text-gray-300">
                     No {label.toLowerCase()} checks.
                   </p>
                 )}
diff --git a/frontend/src/styles/colors.css b/frontend/src/styles/colors.css
index 6a620ab..78dce52 100644
--- a/frontend/src/styles/colors.css
+++ b/frontend/src/styles/colors.css
@@ -6,9 +6,9 @@
   --color-secondary: #c0cbc8;
   --color-accent: #ff922b;
 
-  /* Status text colors, at least 4.5:1 on surface and background (WCAG AA). */
-  --color-status-incompatible: #ffb7b3;
-  --color-status-warning: #ffc28c;
-  --color-status-unknown: #e5d183;
-  --color-status-compatible: #9be5b4;
+  /* Compatibility status colors: red, orange, yellow and green. */
+  --color-status-incompatible: #ef4444;
+  --color-status-warning: #fb923c;
+  --color-status-unknown: #facc15;
+  --color-status-compatible: #4ade80;
 }