From fa44e9f1949ac1db7e560ea8bce6591d33882d3d Mon Sep 17 00:00:00 2001
From: Linde Vrenne <lindeav@stud.ntnu.no>
Date: Tue, 20 Oct 2026 11:37:59 +0200
Subject: [PATCH 1/4] Laget checkbox komponenten

---
 frontend/src/components/checkbox/Checkbox.tsx | 24 +++++++++++
 .../src/pages/SearchResults/SearchFilters.tsx |  7 ++--
 .../pages/SearchResults/SearchResultsPage.css | 40 -------------------
 frontend/src/pages/home/HomePage.tsx          |  8 +---
 4 files changed, 29 insertions(+), 50 deletions(-)
 create mode 100644 frontend/src/components/checkbox/Checkbox.tsx

diff --git a/frontend/src/components/checkbox/Checkbox.tsx b/frontend/src/components/checkbox/Checkbox.tsx
new file mode 100644
index 0000000..f39d9e2
--- /dev/null
+++ b/frontend/src/components/checkbox/Checkbox.tsx
@@ -0,0 +1,24 @@
+import type { InputHTMLAttributes } from "react";
+import "./Checkbox.css";
+
+// En ekte <input type="checkbox">, så den virker med tastatur og skjermleser.
+// Alle vanlige input-props (checked, onChange, id, aria-label ...) sendes rett videre.
+type CheckboxProps = Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
+  size?: "normal" | "large";
+};
+
+export default function Checkbox({
+  size = "normal",
+  className = "",
+  ...rest
+}: CheckboxProps) {
+  const sizeClass = size === "large" ? "checkbox--large" : "";
+
+  return (
+    <input
+      type="checkbox"
+      className={`checkbox ${sizeClass} ${className}`.trim()}
+      {...rest}
+    />
+  );
+}
diff --git a/frontend/src/pages/SearchResults/SearchFilters.tsx b/frontend/src/pages/SearchResults/SearchFilters.tsx
index f7eb772..4138693 100644
--- a/frontend/src/pages/SearchResults/SearchFilters.tsx
+++ b/frontend/src/pages/SearchResults/SearchFilters.tsx
@@ -1,5 +1,6 @@
 
 import type { FilterCount } from "./searchTypes";
+import Checkbox from "../../components/checkbox/Checkbox";
 
 type SearchFiltersProps = {
   categories: FilterCount[];
@@ -73,8 +74,7 @@ export default function SearchFilters({
             key={category.value}
           >
             <span className="search-filter-option-name">
-              <input
-                type="checkbox"
+              <Checkbox
                 checked={selectedCategories.includes(
                   category.value,
                 )}
@@ -107,8 +107,7 @@ export default function SearchFilters({
             key={store.value}
           >
             <span className="search-filter-option-name">
-              <input
-                type="checkbox"
+              <Checkbox
                 checked={selectedStores.includes(store.value)}
                 onChange={(event) =>
                   toggle(
diff --git a/frontend/src/pages/SearchResults/SearchResultsPage.css b/frontend/src/pages/SearchResults/SearchResultsPage.css
index cbb78df..99150ca 100644
--- a/frontend/src/pages/SearchResults/SearchResultsPage.css
+++ b/frontend/src/pages/SearchResults/SearchResultsPage.css
@@ -533,46 +533,6 @@
   color: var(--text-accent);
 }
 
-/* ---- Avkrysningsboksen ----
-   Samme visuelle prinsipp som Lindes Checkbox.
-   Standard utseende fjernes (appearance: none) og tegnes på nytt. */
-
-.search-filter-option input {
-  appearance: none;
-  display: inline-grid;
-  place-items: center;
-  flex-shrink: 0;
-  width: 16px;
-  height: 16px;
-  margin: 0;
-  background: var(--bg-surface);
-  border: 1.25px solid var(--border-brand);
-  border-radius: 3px;
-  cursor: pointer;
-}
-
-/* Valgt: fylt bakgrunn */
-.search-filter-option input:checked {
-  background: var(--bg-brand);
-  border-color: var(--bg-brand);
-}
-
-/* Valgt: haken tegnes med to kanter på et lite element som roteres */
-.search-filter-option input:checked::after {
-  content: "";
-  width: 8px;
-  height: 4px;
-  border-left: 1.8px solid var(--text-on-dark);
-  border-bottom: 1.8px solid var(--text-on-dark);
-  transform: translateY(-1px) rotate(-45deg);
-}
-
-/* Synlig fokus for tastaturbrukere */
-.search-filter-option input:focus-visible {
-  outline: 2px solid var(--text-accent);
-  outline-offset: 2px;
-}
-
 /* Knappen som åpner filtrene på mobil. Skjult på desktop,
    vises igjen i seksjon 14 (mobil). */
 .search-mobile-filter-toggle {
diff --git a/frontend/src/pages/home/HomePage.tsx b/frontend/src/pages/home/HomePage.tsx
index c1c709e..2d27cd9 100644
--- a/frontend/src/pages/home/HomePage.tsx
+++ b/frontend/src/pages/home/HomePage.tsx
@@ -11,7 +11,7 @@ import "./HomePage.css";
 import "../../components/searchfield/Searchfield.css";
 import "../../components/button/Button.css";
 import "../../components/noteItem/NoteItem.css";
-import "../../components/checkbox/Checkbox.css";
+import Checkbox from "../../components/checkbox/Checkbox";
 import "../../components/categoryCard/CategoryCard.css";
 
 // ==========================================
@@ -226,11 +226,7 @@ function HomePage({
                 {noteItems.map((item) => (
                   <li key={item.name}>
                     <label className="note-item">
-                      <input
-                        type="checkbox"
-                        className="checkbox"
-                        defaultChecked={item.checked}
-                      />
+                      <Checkbox defaultChecked={item.checked} />
 
                       <span className="note-item__name">
                         {item.name}

From f911b8e1ce69dede8a0f3f51f01ac1a3edb691c8 Mon Sep 17 00:00:00 2001
From: Linde Vrenne <lindeav@stud.ntnu.no>
Date: Tue, 20 Oct 2026 11:47:09 +0200
Subject: [PATCH 2/4] Laget en button til css filen button og oppdaterte alle
 steder vi lager en button manuelt

---
 frontend/src/components/button/Button.tsx | 24 +++++++++++++++++++++++
 frontend/src/components/header/Header.tsx | 11 ++++++-----
 frontend/src/pages/home/HomePage.tsx      | 16 +++++----------
 3 files changed, 35 insertions(+), 16 deletions(-)
 create mode 100644 frontend/src/components/button/Button.tsx

diff --git a/frontend/src/components/button/Button.tsx b/frontend/src/components/button/Button.tsx
new file mode 100644
index 0000000..666cea1
--- /dev/null
+++ b/frontend/src/components/button/Button.tsx
@@ -0,0 +1,24 @@
+import type { ButtonHTMLAttributes } from "react";
+import "./Button.css";
+
+// Fra Figma: Components → Button. Alle vanlige button-props sendes videre.
+type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+  variant?: "primary" | "secondary" | "dark" | "tinted";
+  size?: "s" | "m" | "l";
+};
+
+export default function Button({
+  variant = "primary",
+  size = "m",
+  type = "button",
+  className = "",
+  ...rest
+}: ButtonProps) {
+  return (
+    <button
+      type={type}
+      className={`button button--${variant} button--${size} ${className}`.trim()}
+      {...rest}
+    />
+  );
+}
diff --git a/frontend/src/components/header/Header.tsx b/frontend/src/components/header/Header.tsx
index 278d580..bab84d7 100644
--- a/frontend/src/components/header/Header.tsx
+++ b/frontend/src/components/header/Header.tsx
@@ -6,7 +6,7 @@ import type { FormEvent } from "react";
 import Logo from "../logo/Logo";
 import MenuButton from "../menuButton/MenuButton";
 
-import "../button/Button.css";
+import Button from "../button/Button";
 import "./Header.css";
 
 type HeaderProps = {
@@ -105,9 +105,10 @@ export default function Header({
       )}
 
       <div className="header__actions">
-        <button
-          type="button"
-          className="button button--dark button--s header__list-button"
+        <Button
+          variant="dark"
+          size="s"
+          className="header__list-button"
           onClick={onOpenList}
           disabled={!onOpenList}
           title={!onOpenList ? "Handlelisten kobles til senere" : undefined}
@@ -116,7 +117,7 @@ export default function Header({
           <span className="button__count">
             {String(listCount).padStart(2, "0")}
           </span>
-        </button>
+        </Button>
 
         <MenuButton
           onClick={onOpenMenu}
diff --git a/frontend/src/pages/home/HomePage.tsx b/frontend/src/pages/home/HomePage.tsx
index 2d27cd9..e2d0826 100644
--- a/frontend/src/pages/home/HomePage.tsx
+++ b/frontend/src/pages/home/HomePage.tsx
@@ -9,7 +9,7 @@ import { homeCategories } from "./homeCategories";
 
 import "./HomePage.css";
 import "../../components/searchfield/Searchfield.css";
-import "../../components/button/Button.css";
+import Button from "../../components/button/Button";
 import "../../components/noteItem/NoteItem.css";
 import Checkbox from "../../components/checkbox/Checkbox";
 import "../../components/categoryCard/CategoryCard.css";
@@ -170,12 +170,9 @@ function HomePage({
               aria-label="Søk etter matvarer"
             />
 
-            <button
-              className="button button--primary button--l"
-              type="submit"
-            >
+            <Button size="l" type="submit">
               Søk
-            </button>
+            </Button>
           </form>
 
           <p className="hero__stats">
@@ -256,12 +253,9 @@ function HomePage({
                 </span>
               </div>
 
-              <button
-                className="button button--primary button--m active-note__button"
-                type="button"
-              >
+              <Button className="active-note__button">
                 Åpne lappen
-              </button>
+              </Button>
             </div>
           </div>
         </aside>

From 3c4576b5b0b9aea059e593ab5cf0a9bc59b2dcdc Mon Sep 17 00:00:00 2001
From: Linde Vrenne <lindeav@stud.ntnu.no>
Date: Tue, 20 Oct 2026 12:43:56 +0200
Subject: [PATCH 3/4] Laget en searchField.tsx og lagt inn i header og
 hjemsiden

---
 frontend/src/components/header/Header.css     | 51 -----------------
 frontend/src/components/header/Header.tsx     | 54 ++----------------
 .../components/searchfield/SearchField.tsx    | 55 +++++++++++++++++++
 .../pages/SearchResults/SearchResultsPage.css | 37 -------------
 frontend/src/pages/home/HomePage.tsx          | 43 +--------------
 5 files changed, 63 insertions(+), 177 deletions(-)
 create mode 100644 frontend/src/components/searchfield/SearchField.tsx

diff --git a/frontend/src/components/header/Header.css b/frontend/src/components/header/Header.css
index b8d28c4..609fb4f 100644
--- a/frontend/src/components/header/Header.css
+++ b/frontend/src/components/header/Header.css
@@ -66,58 +66,7 @@
 /* 3. Søkefelt – øvrige sider */
 
 .header__search {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-
-  width: 100%;
-  max-width: 610px;
-  height: 40px;
-  padding: 0 14px;
-  box-sizing: border-box;
-
   justify-self: center;
-
-  background: var(--bg-surface);
-  border: 1px solid transparent;
-  border-radius: 8px;
-}
-
-.header__search:focus-within {
-  border-color: var(--text-accent);
-}
-
-.header__search-icon {
-  display: flex;
-  width: 18px;
-  height: 18px;
-  flex-shrink: 0;
-  color: var(--text-muted);
-}
-
-.header__search-icon svg {
-  width: 100%;
-  height: 100%;
-}
-
-.header__search-input {
-  flex: 1;
-  min-width: 0;
-  width: 100%;
-  border: none;
-  outline: none;
-  background: transparent;
-
-  color: var(--text-primary);
-  font: 400 13px var(--font-ui);
-}
-
-.header__search-input::placeholder {
-  color: var(--text-muted);
-}
-
-.header__search-input:disabled {
-  cursor: not-allowed;
 }
 
 /* 4. Handlinger */
diff --git a/frontend/src/components/header/Header.tsx b/frontend/src/components/header/Header.tsx
index bab84d7..8a1048f 100644
--- a/frontend/src/components/header/Header.tsx
+++ b/frontend/src/components/header/Header.tsx
@@ -1,12 +1,10 @@
 import { Link } from "react-router";
 
-import { useState } from "react";
-import type { FormEvent } from "react";
-
 import Logo from "../logo/Logo";
 import MenuButton from "../menuButton/MenuButton";
 
 import Button from "../button/Button";
+import SearchField from "../searchfield/SearchField";
 import "./Header.css";
 
 type HeaderProps = {
@@ -30,18 +28,6 @@ export default function Header({
   isMenuOpen = false,
   listCount = 0,
 }: HeaderProps) {
-  const [searchInput, setSearchInput] = useState(searchValue);
-
-  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-
-    const value = searchInput.trim();
-
-    if (value && onSearch) {
-      onSearch(value);
-    }
-  };
-
   return (
     <header className={`header header--${variant}`}>
       <div className="header__logo">
@@ -67,41 +53,11 @@ export default function Header({
             </span>
         </nav>
       ) : (
-        <form
+        <SearchField
           className="header__search"
-          role="search"
-          onSubmit={handleSubmit}
-        >
-          <span className="header__search-icon" aria-hidden="true">
-            <svg viewBox="0 0 24 24" fill="none">
-              <circle
-                cx="10.5"
-                cy="10.5"
-                r="6.5"
-                stroke="currentColor"
-                strokeWidth="1.8"
-              />
-              <path
-                d="M15.5 15.5L21 21"
-                stroke="currentColor"
-                strokeWidth="1.8"
-                strokeLinecap="round"
-              />
-            </svg>
-          </span>
-
-          <input
-            type="search"
-            className="header__search-input"
-            placeholder="Søk etter matvarer, f.eks. havregryn"
-            aria-label="Søk etter matvarer"
-            value={searchInput}
-            onChange={(event) =>
-              setSearchInput(event.target.value)
-            }
-            disabled={!onSearch}
-          />
-        </form>
+          defaultValue={searchValue}
+          onSearch={onSearch}
+        />
       )}
 
       <div className="header__actions">
diff --git a/frontend/src/components/searchfield/SearchField.tsx b/frontend/src/components/searchfield/SearchField.tsx
new file mode 100644
index 0000000..d619344
--- /dev/null
+++ b/frontend/src/components/searchfield/SearchField.tsx
@@ -0,0 +1,55 @@
+import { useState } from "react";
+import type { FormEvent, ReactNode } from "react";
+import "./Searchfield.css";
+
+// Fra Figma: Components → SearchField.
+// Søker bare når du trykker Enter (eller en submit-knapp i children).
+type SearchFieldProps = {
+  onSearch?: (value: string) => void;
+  defaultValue?: string;
+  size?: "normal" | "large";
+  placeholder?: string;
+  className?: string;
+  children?: ReactNode; // vises til høyre, f.eks. en Søk-knapp
+};
+
+export default function SearchField({
+  onSearch,
+  defaultValue = "",
+  size = "normal",
+  placeholder = "Søk etter matvarer, f.eks. havregryn",
+  className = "",
+  children,
+}: SearchFieldProps) {
+  const [value, setValue] = useState(defaultValue);
+
+  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault(); // ikke last siden på nytt
+    const search = value.trim();
+    if (search && onSearch) {
+      onSearch(search);
+    }
+  };
+
+  const sizeClass = size === "large" ? "search-field--large" : "";
+
+  return (
+    <form
+      className={`search-field ${sizeClass} ${className}`.trim()}
+      role="search"
+      onSubmit={handleSubmit}
+    >
+      <span className="search-field__icon" aria-hidden="true" />
+      <input
+        className="search-field__input"
+        type="search"
+        value={value}
+        onChange={(event) => setValue(event.target.value)}
+        placeholder={placeholder}
+        aria-label="Søk etter matvarer"
+        disabled={!onSearch}
+      />
+      {children}
+    </form>
+  );
+}
diff --git a/frontend/src/pages/SearchResults/SearchResultsPage.css b/frontend/src/pages/SearchResults/SearchResultsPage.css
index 99150ca..01b98f2 100644
--- a/frontend/src/pages/SearchResults/SearchResultsPage.css
+++ b/frontend/src/pages/SearchResults/SearchResultsPage.css
@@ -157,31 +157,6 @@
 }
 
 
-/* ==========================================================================
-   4. SØKEFELT PÅ SØKERESULTATSIDEN
-   Sentrert søkefelt over hovedlayouten.
-   ========================================================================== */
-
-/* Ytre beholder som sentrerer søkefeltet */
-.search-results-searchbar {
-  display: flex;
-  justify-content: center;
-  margin-bottom: 36px;
-}
-
-/* Selve søkefeltet: full bredde opp til 640px */
-.search-results-searchbar .search-field {
-  width: 100%;
-  max-width: 640px;
-}
-
-/* min-width: 0 lar søkefeltet krympe i stedet for å presse siden bredere */
-.search-results-searchbar,
-.search-results-searchbar .search-field {
-  min-width: 0;
-}
-
-
 /* ==========================================================================
    5. VERKTØYLINJE (TOOLBAR)
    Raden over produktlisten med tittel til venstre og sortering til høyre.
@@ -1027,14 +1002,6 @@
   }
 }
 
-/* ---- 14b. Søkefelt ---- */
-@media (max-width: 700px) {
-  /* Mindre luft under søkefeltet */
-  .search-results-searchbar {
-    margin-bottom: 24px;
-  }
-}
-
 /* ---- 14c. Aktive filtre (chips) ---- */
 @media (max-width: 700px) {
   /* Tettere mellom chips */
@@ -1214,10 +1181,6 @@
     height: 40px;
   }
 
-  /* Søkefeltet: 16px skrift hindrer at iPhone zoomer inn ved fokus */
-  .search-results-searchbar input {
-    font-size: 16px;
-  }
 }
 
 /* ---- 16b. Liten mobil (opptil 480px, dekker 390px, 360px og 320px) ---- */
diff --git a/frontend/src/pages/home/HomePage.tsx b/frontend/src/pages/home/HomePage.tsx
index e2d0826..c76d400 100644
--- a/frontend/src/pages/home/HomePage.tsx
+++ b/frontend/src/pages/home/HomePage.tsx
@@ -1,5 +1,4 @@
 
-import type { FormEvent } from "react";
 
 import { gql } from "@apollo/client";
 import type { TypedDocumentNode } from "@apollo/client";
@@ -8,7 +7,7 @@ import { useQuery } from "@apollo/client/react";
 import { homeCategories } from "./homeCategories";
 
 import "./HomePage.css";
-import "../../components/searchfield/Searchfield.css";
+import SearchField from "../../components/searchfield/SearchField";
 import Button from "../../components/button/Button";
 import "../../components/noteItem/NoteItem.css";
 import Checkbox from "../../components/checkbox/Checkbox";
@@ -106,25 +105,6 @@ function HomePage({
       a.name.localeCompare(b.name, "nb-NO"),
     );
 
-  // ==========================================
-  // SØK FRA STARTSIDEN
-  // ==========================================
-
-  const handleSearchSubmit = (
-    event: FormEvent<HTMLFormElement>,
-  ) => {
-    event.preventDefault();
-
-    const formData = new FormData(event.currentTarget);
-    const search = String(
-      formData.get("search") ?? "",
-    ).trim();
-
-    if (search) {
-      onSearch(search);
-    }
-  };
-
   // ==========================================
   // RENDER
   // ==========================================
@@ -152,28 +132,11 @@ function HomePage({
             koster i hver kjede.
           </p>
 
-          <form
-            className="search-field search-field--large"
-            role="search"
-            onSubmit={handleSearchSubmit}
-          >
-            <span
-              className="search-field__icon"
-              aria-hidden="true"
-            />
-
-            <input
-              className="search-field__input"
-              type="search"
-              name="search"
-              placeholder="Søk etter matvarer, f.eks. havregryn"
-              aria-label="Søk etter matvarer"
-            />
-
+          <SearchField size="large" onSearch={onSearch}>
             <Button size="l" type="submit">
               Søk
             </Button>
-          </form>
+          </SearchField>
 
           <p className="hero__stats">
             12 400 VARER · 6 KJEDER · OPPDATERT DAGLIG

From de526181383a7c81b8d72a37e250ce1c6224e71f Mon Sep 17 00:00:00 2001
From: Linde Vrenne <lindeav@stud.ntnu.no>
Date: Tue, 20 Oct 2026 13:16:46 +0200
Subject: [PATCH 4/4] Lager NoteItem og CategoryCard

---
 .../components/categoryCard/CategoryCard.tsx  | 42 ++++++++++
 frontend/src/components/noteItem/NoteItem.css |  5 +-
 frontend/src/components/noteItem/NoteItem.tsx | 21 +++++
 frontend/src/pages/home/HomePage.css          |  6 --
 frontend/src/pages/home/HomePage.tsx          | 81 +++++--------------
 5 files changed, 88 insertions(+), 67 deletions(-)
 create mode 100644 frontend/src/components/categoryCard/CategoryCard.tsx
 create mode 100644 frontend/src/components/noteItem/NoteItem.tsx

diff --git a/frontend/src/components/categoryCard/CategoryCard.tsx b/frontend/src/components/categoryCard/CategoryCard.tsx
new file mode 100644
index 0000000..e2c2651
--- /dev/null
+++ b/frontend/src/components/categoryCard/CategoryCard.tsx
@@ -0,0 +1,42 @@
+import "./CategoryCard.css";
+
+// Fra Figma: Components → CategoryCard. Klikkbart kort for en kategori.
+type CategoryCardProps = {
+  number: string; // f.eks. "01"
+  meta: string; // f.eks. "1 234 varer" eller "Laster..."
+  name: string;
+  description: string;
+  onClick: () => void;
+};
+
+export default function CategoryCard({
+  number,
+  meta,
+  name,
+  description,
+  onClick,
+}: CategoryCardProps) {
+  return (
+    <button
+      type="button"
+      className="category-card"
+      onClick={onClick}
+      aria-label={`Vis produkter i ${name}`}
+    >
+      <span className="category-card__top">
+        <span>{number}</span>
+        <span>{meta}</span>
+      </span>
+
+      <span className="category-card__bottom">
+        <span>
+          <span className="category-card__name">{name}</span>
+          <span className="category-card__description">{description}</span>
+        </span>
+        <span className="category-card__arrow" aria-hidden="true">
+          →
+        </span>
+      </span>
+    </button>
+  );
+}
diff --git a/frontend/src/components/noteItem/NoteItem.css b/frontend/src/components/noteItem/NoteItem.css
index bf21d20..f2652fc 100644
--- a/frontend/src/components/noteItem/NoteItem.css
+++ b/frontend/src/components/noteItem/NoteItem.css
@@ -20,7 +20,8 @@
     color: var(--text-secondary);
 }
 
-/* Avkrysset: varen blir grå */
-.note-item--checked .note-item__name {
+/* Avkrysset: varen blir grå og strøket ut */
+.note-item:has(.checkbox:checked) .note-item__name {
     color: var(--text-muted);
+    text-decoration: line-through;
 }
\ No newline at end of file
diff --git a/frontend/src/components/noteItem/NoteItem.tsx b/frontend/src/components/noteItem/NoteItem.tsx
new file mode 100644
index 0000000..38b41da
--- /dev/null
+++ b/frontend/src/components/noteItem/NoteItem.tsx
@@ -0,0 +1,21 @@
+import Checkbox from "../checkbox/Checkbox";
+import "./NoteItem.css";
+
+// Fra Figma: Components → NoteItem. En vare på handlelappen.
+type NoteItemProps = {
+  name: string;
+  count?: number; // vises som "×2", bare når det er mer enn 1
+  defaultChecked?: boolean;
+};
+
+export default function NoteItem({ name, count, defaultChecked }: NoteItemProps) {
+  return (
+    <label className="note-item">
+      <Checkbox defaultChecked={defaultChecked} />
+      <span className="note-item__name">{name}</span>
+      {count !== undefined && count > 1 && (
+        <span className="note-item__count">×{count}</span>
+      )}
+    </label>
+  );
+}
diff --git a/frontend/src/pages/home/HomePage.css b/frontend/src/pages/home/HomePage.css
index 4eb7e5c..9dde1f5 100644
--- a/frontend/src/pages/home/HomePage.css
+++ b/frontend/src/pages/home/HomePage.css
@@ -153,12 +153,6 @@
   cursor: pointer;
 }
 
-/* Avkrysset vare blir grå og strøket ut */
-.note-item:has(.checkbox:checked) .note-item__name {
-  color: var(--text-muted);
-  text-decoration: line-through;
-}
-
 .active-note__more {
   margin: 0;
   font: 400 17px var(--font-note);
diff --git a/frontend/src/pages/home/HomePage.tsx b/frontend/src/pages/home/HomePage.tsx
index c76d400..03f2a30 100644
--- a/frontend/src/pages/home/HomePage.tsx
+++ b/frontend/src/pages/home/HomePage.tsx
@@ -9,9 +9,8 @@ import { homeCategories } from "./homeCategories";
 import "./HomePage.css";
 import SearchField from "../../components/searchfield/SearchField";
 import Button from "../../components/button/Button";
-import "../../components/noteItem/NoteItem.css";
-import Checkbox from "../../components/checkbox/Checkbox";
-import "../../components/categoryCard/CategoryCard.css";
+import NoteItem from "../../components/noteItem/NoteItem";
+import CategoryCard from "../../components/categoryCard/CategoryCard";
 
 // ==========================================
 // MIDLERTIDIG HANDLELAPP
@@ -19,11 +18,11 @@ import "../../components/categoryCard/CategoryCard.css";
 // ==========================================
 
 const noteItems = [
-  { name: "Lettmelk", count: "×2" },
+  { name: "Lettmelk", count: 2 },
   { name: "Norvegia 26 %" },
-  { name: "Mozzarella", count: "×2" },
+  { name: "Mozzarella", count: 2 },
   { name: "Bananer", checked: true },
-  { name: "Tomater", count: "×4" },
+  { name: "Tomater", count: 4 },
 ];
 
 // ==========================================
@@ -185,19 +184,11 @@ function HomePage({
               <ul className="active-note__list">
                 {noteItems.map((item) => (
                   <li key={item.name}>
-                    <label className="note-item">
-                      <Checkbox defaultChecked={item.checked} />
-
-                      <span className="note-item__name">
-                        {item.name}
-                      </span>
-
-                      {item.count && (
-                        <span className="note-item__count">
-                          {item.count}
-                        </span>
-                      )}
-                    </label>
+                    <NoteItem
+                      name={item.name}
+                      count={item.count}
+                      defaultChecked={item.checked}
+                    />
                   </li>
                 ))}
               </ul>
@@ -267,47 +258,19 @@ function HomePage({
           <ul className="categories__grid">
             {categories.map((category, index) => (
               <li key={category.name}>
-                <button
-                  type="button"
-                  className="category-card"
-                  onClick={() =>
-                    onCategorySelect(category.categoryIds)
+                <CategoryCard
+                  number={String(index + 1).padStart(2, "0")}
+                  meta={
+                    categoriesLoading
+                      ? "Laster..."
+                      : categoriesError
+                        ? "Antall ukjent"
+                        : `${category.count.toLocaleString("nb-NO")} varer`
                   }
-                  aria-label={`Vis produkter i ${category.name}`}
-                >
-                  <span className="category-card__top">
-                    <span>
-                      {String(index + 1).padStart(2, "0")}
-                    </span>
-
-                    <span>
-                      {categoriesLoading
-                        ? "Laster..."
-                        : categoriesError
-                          ? "Antall ukjent"
-                          : `${category.count.toLocaleString("nb-NO")} varer`}
-                    </span>
-                  </span>
-
-                  <span className="category-card__bottom">
-                    <span>
-                      <span className="category-card__name">
-                        {category.name}
-                      </span>
-
-                      <span className="category-card__description">
-                        {category.description}
-                      </span>
-                    </span>
-
-                    <span
-                      className="category-card__arrow"
-                      aria-hidden="true"
-                    >
-                      →
-                    </span>
-                  </span>
-                </button>
+                  name={category.name}
+                  description={category.description}
+                  onClick={() => onCategorySelect(category.categoryIds)}
+                />
               </li>
             ))}
           </ul>