diff --git a/frontend/src/pages/home/HomePage.css b/frontend/src/pages/home/HomePage.css
new file mode 100644
index 0000000..4f4e1f4
--- /dev/null
+++ b/frontend/src/pages/home/HomePage.css
@@ -0,0 +1,302 @@
+.home {
+  min-height: 100vh;
+  background: var(--bg-page);
+  color: var(--text-primary);
+  font-family: var(--font-ui);
+  text-align: left;
+}
+
+/* Innholdet holdes innenfor samme bredde som i Figma (1312px) */
+.home__hero {
+  max-width: 1312px;
+  margin: 0 auto;
+  padding: 64px 48px;
+  box-sizing: border-box;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 340px;
+  gap: 64px;
+}
+
+.hero {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  max-width: 660px;
+}
+
+.hero__eyebrow {
+  margin: 0;
+  font: 500 11px var(--font-mono);
+  letter-spacing: 0.06em;
+  color: var(--text-accent);
+}
+
+.hero__title {
+  margin: 0;
+  font-size: 78px;
+  font-weight: 500;
+  line-height: 82px;
+  letter-spacing: -0.04em;
+}
+
+/* «lappen»: kursiv serif. Farge og font kommer fra theme.css (h1 em) */
+.hero__title em {
+  font-size: 92px;
+  letter-spacing: -0.01em;
+}
+
+.hero__lead {
+  max-width: 520px;
+  margin: 0 0 4px;
+  font-size: 18px;
+  line-height: 28px;
+  color: var(--text-secondary);
+}
+
+.hero__stats {
+  margin: 0;
+  font: 500 10px var(--font-mono);
+  letter-spacing: 0.06em;
+  color: var(--text-muted);
+}
+/* ---------- Den aktive lappen ---------- */
+.active-note {
+  width: 340px;
+  max-width: 100%;
+}
+
+.active-note__fig {
+  margin: 0 0 24px;
+  font: 500 10px var(--font-mono);
+  letter-spacing: 0.06em;
+  color: var(--annotation);
+}
+
+.active-note__stack {
+  position: relative;
+}
+
+/* Arket som ligger bak, litt skjevt */
+.active-note__back {
+  position: absolute;
+  inset: 30px -8px -12px 8px;
+  background: var(--note-tint);
+  border: 1.25px solid var(--border-strong);
+  border-radius: 2px;
+  transform: rotate(4deg);
+}
+
+/* Selve lappen */
+.active-note__paper {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 34px 26px 26px 46px;
+  background: var(--note-paper);
+  border: 1.25px solid var(--border-strong);
+  border-radius: 2px;
+  transform: rotate(-2deg);
+  box-shadow: 3px 16px 22px -10px rgba(64, 5, 18, 0.1);
+}
+
+/* Den røde margen til venstre */
+.active-note__paper::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 30px;
+  width: 1.25px;
+  background: var(--note-margin);
+}
+
+/* Tapen øverst */
+.active-note__tape {
+  position: absolute;
+  top: -13px;
+  left: 50%;
+  width: 78px;
+  height: 20px;
+  background: var(--note-tape);
+  transform: translateX(-50%) rotate(4deg);
+}
+
+.active-note__label,
+.active-note__meta {
+  margin: 0;
+  font: 500 10px var(--font-mono);
+  letter-spacing: 0.06em;
+}
+
+.active-note__label {
+  color: var(--text-accent);
+}
+
+.active-note__meta {
+  color: var(--text-muted);
+}
+
+.active-note__title {
+  margin: 0;
+  font: 700 34px/42px var(--font-note);
+  color: var(--note-ink);
+}
+
+.active-note__list {
+  margin: 8px 0 0;
+  padding: 0;
+  list-style: none;
+}
+
+.active-note__list .note-item {
+  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);
+  color: var(--text-muted);
+}
+
+.active-note__total {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  margin-top: 10px;
+}
+
+.active-note__sum {
+  font: 700 28px/32px var(--font-note);
+  color: var(--note-ink);
+}
+
+.active-note__button {
+  justify-content: center;
+  width: 100%;
+  margin-top: 10px;
+}
+/* ---------- Kategorier ---------- */
+.home__categories {
+  border-top: 1px solid var(--border-hairline);
+  border-bottom: 1px solid var(--border-hairline);
+}
+
+.categories {
+  max-width: 1312px;
+  margin: 0 auto;
+  padding: 32px 48px 42px;
+  box-sizing: border-box;
+}
+
+.categories__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  gap: 16px;
+  margin-bottom: 28px;
+}
+
+.categories__title {
+  display: flex;
+  align-items: flex-end;
+  gap: 16px;
+  margin: 0;
+  font-size: 32px;
+  font-weight: 500;
+  letter-spacing: -0.03em;
+}
+
+.categories__number {
+  font: 500 12px var(--font-mono);
+  letter-spacing: 0.06em;
+  color: var(--text-accent);
+}
+
+.categories__link {
+  margin: 0;
+  font: 500 10px var(--font-mono);
+  letter-spacing: 0.06em;
+  color: var(--text-muted);
+}
+
+.categories__grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 24px 20px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.categories__grid .category-card {
+  width: 100%;
+  max-width: none;
+}
+
+/* ---------- Bunntekst ---------- */
+.home__footer {
+  display: flex;
+  justify-content: space-between;
+  max-width: 1312px;
+  margin: 0 auto;
+  padding: 16px 48px 32px;
+  box-sizing: border-box;
+  font: 500 10px var(--font-mono);
+  letter-spacing: 0.06em;
+  color: var(--text-muted);
+}
+
+.home__footer p {
+  margin: 0;
+}
+
+/* Smal skjerm: lappen legger seg under teksten */
+@media (max-width: 1000px) {
+  .home__hero {
+    grid-template-columns: 1fr;
+  }
+
+  .active-note {
+    justify-self: center;
+  }
+
+  .categories__grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+/* Mobil: mindre overskrift og luft */
+@media (max-width: 600px) {
+  .home__hero {
+    padding: 32px 16px;
+  }
+  .hero__title {
+    font-size: 44px;
+    line-height: 48px;
+  }
+  .hero__title em {
+    font-size: 52px;
+  }
+
+  .categories,
+  .home__footer {
+    padding-left: 16px;
+    padding-right: 16px;
+  }
+
+  .categories__header {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .categories__grid {
+    grid-template-columns: 1fr;
+  }
+}
diff --git a/frontend/src/pages/home/HomePage.tsx b/frontend/src/pages/home/HomePage.tsx
new file mode 100644
index 0000000..a557a81
--- /dev/null
+++ b/frontend/src/pages/home/HomePage.tsx
@@ -0,0 +1,174 @@
+import "./HomePage.css";
+import "../../components/searchfield/Searchfield.css";
+import "../../components/button/Button.css";
+import "../../components/noteItem/NoteItem.css";
+import "../../components/checkbox/Checkbox.css";
+import "../../components/categoryCard/CategoryCard.css";
+
+// Midlertidige data. Byttes ut med ekte data fra backend senere.
+const noteItems = [
+  { name: "Lettmelk", count: "×2" },
+  { name: "Norvegia 26 %" },
+  { name: "Mozzarella", count: "×2" },
+  { name: "Bananer", checked: true },
+  { name: "Tomater", count: "×4" },
+];
+
+const categories = [
+  {
+    name: "Frukt og grønt",
+    description: "Frukt, grønnsaker, urter",
+    count: 214,
+  },
+  { name: "Meieri og egg", description: "Melk, yoghurt, egg", count: 96 },
+  { name: "Ost", description: "Hvitost, brunost, smøreost", count: 148 },
+  {
+    name: "Brød og bakst",
+    description: "Brød, knekkebrød, lefser",
+    count: 122,
+  },
+  {
+    name: "Kjøtt og fisk",
+    description: "Kylling, kjøttdeig, laks",
+    count: 187,
+  },
+  { name: "Tørrvarer", description: "Pasta, ris, havregryn", count: 263 },
+  { name: "Frysevarer", description: "Pizza, grønnsaker, is", count: 91 },
+  { name: "Drikke", description: "Kaffe, te, juice", count: 175 },
+];
+
+function HomePage() {
+  return (
+    <main className="home">
+      <section className="home__hero">
+        <div className="hero">
+          <p className="hero__eyebrow">HANDLELAPPEN · VOL. 01 · HØST 2026</p>
+
+          <h1 className="hero__title">
+            Hva skal på <br />
+            <em>lappen</em> i dag?
+          </h1>
+
+          <p className="hero__lead">
+            Søk etter en vare, eller bla deg gjennom en kategori. Lappen holder
+            styr på resten, og viser hva det koster i hver kjede.
+          </p>
+
+          <form className="search-field search-field--large" role="search">
+            <span className="search-field__icon" aria-hidden="true" />
+            <input
+              className="search-field__input"
+              type="search"
+              placeholder="Søk etter matvarer, f.eks. havregryn"
+              aria-label="Søk etter matvarer"
+            />
+            <button className="button button--primary button--l" type="submit">
+              Søk
+            </button>
+          </form>
+
+          <p className="hero__stats">
+            12 400 VARER · 6 KJEDER · OPPDATERT DAGLIG
+          </p>
+        </div>
+        <aside className="active-note" aria-labelledby="active-note-title">
+          <p className="active-note__fig">FIG. 1 — DIN AKTIVE LAPP</p>
+
+          <div className="active-note__stack">
+            <div className="active-note__back" aria-hidden="true" />
+
+            <div className="active-note__paper">
+              <span className="active-note__tape" aria-hidden="true" />
+              <p className="active-note__label">DIN AKTIVE LAPP</p>
+              <h2 id="active-note-title" className="active-note__title">
+                Fredagshandel
+              </h2>
+              <p className="active-note__meta">8 VARER · FREDAG 25.09</p>
+
+              <ul className="active-note__list">
+                {noteItems.map((item) => (
+                  <li key={item.name}>
+                    <label className="note-item">
+                      <input
+                        type="checkbox"
+                        className="checkbox"
+                        defaultChecked={item.checked}
+                      />
+                      <span className="note-item__name">{item.name}</span>
+                      {item.count && (
+                        <span className="note-item__count">{item.count}</span>
+                      )}
+                    </label>
+                  </li>
+                ))}
+              </ul>
+
+              <p className="active-note__more">+ 3 til …</p>
+
+              <div className="active-note__total">
+                <span className="active-note__meta">ESTIMERT</span>
+                <span className="active-note__sum">≈ 386,40 kr</span>
+              </div>
+
+              <button
+                className="button button--primary button--m active-note__button"
+                type="button"
+              >
+                Åpne lappen
+              </button>
+            </div>
+          </div>
+        </aside>
+      </section>
+      <section
+        className="home__categories grid-pattern"
+        aria-labelledby="categories-title"
+      >
+        <div className="categories">
+          <div className="categories__header">
+            <h2 id="categories-title" className="categories__title">
+              <span className="categories__number">01</span>
+              Kategorier
+            </h2>
+            <p className="categories__link">
+              {categories.length} AVDELINGER · BLA I KATALOGEN →
+            </p>
+          </div>
+
+          <ul className="categories__grid">
+            {categories.map((category, index) => (
+              <li key={category.name}>
+                <button type="button" className="category-card">
+                  <span className="category-card__top">
+                    <span>{String(index + 1).padStart(2, "0")}</span>
+                    <span>{category.count} 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>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </section>
+
+      <footer className="home__footer">
+        <p>HANDLELAPPEN — IT2810 · GRUPPE 27</p>
+        <p>SIDE 01 / 11</p>
+      </footer>
+    </main>
+  );
+}
+
+export default HomePage;