diff --git a/client/src/components/layout/Header.tsx b/client/src/components/layout/Header.tsx
index 4127d7f..1851963 100644
--- a/client/src/components/layout/Header.tsx
+++ b/client/src/components/layout/Header.tsx
@@ -1,5 +1,10 @@
-import { Link, NavLink, useSearchParams } from 'react-router';
-import SearchBar from './SearchBar';
+import { Link, NavLink, useSearchParams } from 'react-router'
+import SearchBar from './SearchBar'
+import { Button } from '../ui/Button'
+import { Dialog } from '../ui/Dialog'
+import NewRecipePage, {
+  RecipeStepIndicator,
+} from '../../routes/NewRecipePage'
 
 // Fokusmarkering ved tastaturnavigasjon
 const focusRing =
@@ -72,9 +77,20 @@ export default function Header() {
               </NavLink>
             </li>
             <li>
-              <NavLink to="/new-recipe" className={newRecipeClass}>
-                Ny oppskrift
-              </NavLink>
+              <Dialog
+                trigger={
+                  <Button
+                    variant="primary"
+                    size="small"
+                  >
+                    Ny Oppskrift
+                  </Button>
+                }
+                title="Ny oppskrift"
+                headerContent={<RecipeStepIndicator />}
+              >
+                <NewRecipePage />
+              </Dialog>
             </li>
             <li>
               <NavLink to="/profile" className={userClass}>
diff --git a/client/src/components/ui/Dialog.tsx b/client/src/components/ui/Dialog.tsx
index 0801806..38b68c3 100644
--- a/client/src/components/ui/Dialog.tsx
+++ b/client/src/components/ui/Dialog.tsx
@@ -4,10 +4,16 @@ import * as RadixDialog from '@radix-ui/react-dialog'
 type DialogProps = {
   trigger: ReactNode
   title: string
+  headerContent?: ReactNode
   children: ReactNode
 }
 
-export function Dialog({ trigger, title, children }: DialogProps) {
+export function Dialog({
+  trigger,
+  title,
+  headerContent,
+  children,
+}: DialogProps) {
   return (
     <RadixDialog.Root>
       {/* Elementet som åpner dialogen */}
@@ -28,35 +34,42 @@ export function Dialog({ trigger, title, children }: DialogProps) {
         <RadixDialog.Content
           className="
             fixed left-1/2 top-1/2
-            w-[90%] max-w-lg
+            w-[94%] max-w-6xl
+            max-h-[92vh]
             -translate-x-1/2 -translate-y-1/2
-
+            overflow-y-auto
             rounded-large
             bg-background
-            p-6
-
+            p-6 md:p-8
             text-text
             shadow-lg
-
             focus:outline-none
           "
         >
-          <div className="flex items-start justify-between gap-4">
+          {/* Header */}
+          <div className="flex items-center gap-8 border-b border-peach pb-4">
+            
+            {/* Tittel */}
             <RadixDialog.Title
-              className="font-heading text-2xl text-text"
+              className="shrink-0 font-heading text-3xl text-text"
             >
               {title}
             </RadixDialog.Title>
 
+            {/* Stegindikator */}
+            <div className="flex flex-1 justify-center">
+              {headerContent}
+            </div>
+
+            {/* Lukk */}
             <RadixDialog.Close
               className="
+                shrink-0
                 rounded-small
                 px-2 py-1
                 text-primary
                 cursor-pointer
-
                 hover:bg-pink-light
-
                 focus-visible:outline-2
                 focus-visible:outline-offset-2
                 focus-visible:outline-primary
@@ -67,13 +80,14 @@ export function Dialog({ trigger, title, children }: DialogProps) {
             </RadixDialog.Close>
           </div>
 
-          <RadixDialog.Description
-            asChild
-          >
-            <div className="font-body mt-4">
-              {children}
-            </div>
+          <RadixDialog.Description className="sr-only">
+            Skjema for å opprette en ny oppskrift
           </RadixDialog.Description>
+
+          {/* Innholdet i dialogen */}
+          <div className="mt-4 font-body">
+            {children}
+          </div>
         </RadixDialog.Content>
       </RadixDialog.Portal>
     </RadixDialog.Root>
diff --git a/client/src/index.css b/client/src/index.css
index 8bd04d2..a1eecab 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -1,4 +1,5 @@
-@import url('https://fonts.googleapis.com/css2?family=Mrs+Saint+Delafield&family=Tangerine:wght@400;700&display=swap" rel="stylesheet');
+@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Tangerine:wght@400;700&display=swap');
+
 @import "tailwindcss";
 
 
@@ -18,7 +19,7 @@
   --color-peach: #efd7c4;
 
   /* Typografi */
-  --font-heading: "Mrs Saint Delafield", Georgia, serif;
+  --font-heading: "Tangerine", cursive;
   --font-body: "DM Sans", Arial, sans-serif;
 
   /* Border radius */
@@ -53,4 +54,65 @@ body {
 
 #root {
   min-height: 100vh;
-}
\ No newline at end of file
+}
+
+/* Skjema */
+
+.form-label {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+}
+
+.form-input {
+  width: 100%;
+  border: 1px solid var(--color-peach);
+  border-radius: var(--radius-medium);
+  background-color: var(--color-background);
+  padding: 0.5rem 1rem;
+  font-size: 0.875rem;
+}
+
+.form-input:focus-visible {
+  outline: 2px solid var(--color-primary);
+}
+
+.upload-button {
+  display: flex;
+  height: 140px;
+  width: 100%;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  border: 1px dashed var(--color-peach);
+  border-radius: var(--radius-medium);
+  background-color: var(--color-background);
+}
+
+.upload-button:hover {
+  background-color: color-mix(
+    in srgb,
+    var(--color-peach) 20%,
+    transparent
+  );
+}
+
+.upload-button:focus-visible {
+  outline: 2px solid var(--color-primary);
+}
+
+.stepper-button {
+  height: 2rem;
+  width: 2rem;
+  border: none;
+  border-radius: var(--radius-small);
+  background-color: var(--color-peach);
+  cursor: pointer;
+}
+
+.stepper-button:hover {
+  background-color: var(--color-pink-light);
+}
+
diff --git a/client/src/routes/HomePage.tsx b/client/src/routes/HomePage.tsx
index 2ee9f82..2b58be0 100644
--- a/client/src/routes/HomePage.tsx
+++ b/client/src/routes/HomePage.tsx
@@ -1,6 +1,54 @@
-// TODO: vise oppskrifter pent men slideshow elns og vise populære oppskrifter
+import { useState } from 'react'
+import { Tag } from '../components/ui/Tag'
+
+
+
 export default function HomePage() {
+  const [vegetarSelected, setVegetarSelected] = useState(false)
+  const [middagSelected, setMiddagSelected] = useState(false)
+
   return (
-    <h1 className="font-heading text-4xl md:text-5xl">Hva frister i dag?</h1>
-  );
-}
+    <main className="bg-background min-h-screen">
+
+      <div className="max-w-6xl mx-auto px-6 py-10">
+
+        {/* Slideshow-placeholder */}
+        <section
+          className="
+            w-full
+            h-80
+            rounded-large
+            bg-gray-200
+            flex items-center justify-center
+            text-gray-500
+          "
+        >
+          Slideshow kommer her
+        </section>
+
+        
+
+        {/* Filter-tags */}
+        <div className="flex flex-wrap gap-3 mt-8">
+          <Tag
+            selected={vegetarSelected}
+            onClick={() => setVegetarSelected(!vegetarSelected)}
+          >
+            Vegetar
+          </Tag>
+
+          <Tag
+            selected={middagSelected}
+            onClick={() => setMiddagSelected(!middagSelected)}
+          >
+            Middag
+          </Tag>
+
+          <Tag>Italiensk</Tag>
+          <Tag>Glutenfri</Tag>
+        </div>
+
+      </div>
+    </main>
+  )
+}
\ No newline at end of file
diff --git a/client/src/routes/NewRecipePage.tsx b/client/src/routes/NewRecipePage.tsx
index 626ba20..f366e07 100644
--- a/client/src/routes/NewRecipePage.tsx
+++ b/client/src/routes/NewRecipePage.tsx
@@ -1,4 +1,273 @@
-// TODO: popup eller skjema for ny oppskrift
-export default function NewRecipePage() {
-  return <h1 className="font-heading text-4xl md:text-5xl">Ny oppskrift</h1>;
+import { useState } from 'react'
+import { Button } from '../components/ui/Button'
+import { Tag } from '../components/ui/Tag'
+import Rating from '@mui/material/Rating';
+
+const STEPS = ['Oppskrift', 'Ingredienser', 'Fremgangsmåte', 'Publiser']
+const CATEGORIES = ['Frokost','Lunsj','Middag','Dessert','Annet',]
+const TAGS = ['Vegetar','Vegan','Glutenfri','Laktosefri','Under 30 min',]
+export function RecipeStepIndicator() {
+  return (
+    <ol className="flex items-center justify-center text-xs">
+      {STEPS.map((step, index) => {
+        const active = index === 0
+
+        return (
+          <li key={step} className="flex items-center">
+            {/* Linje mellom stegene */}
+            {index > 0 && (
+              <div className="mx-3 h-px w-8 bg-peach" />
+            )}
+
+            <div
+              className={`flex items-center gap-2 ${
+                active ? 'text-primary' : 'text-olive'
+              }`}
+            >
+              {/* Nummer */}
+              <span
+                className={`
+                  flex h-7 w-7
+                  items-center justify-center
+                  rounded-full
+                  ${
+                    active
+                      ? 'bg-primary text-background'
+                      : 'bg-peach'
+                  }
+                `}
+              >
+                {index + 1}
+              </span>
+
+              {/* Navn */}
+              <span className={active ? 'font-semibold' : ''}>
+                {step}
+              </span>
+            </div>
+          </li>
+        )
+      })}
+    </ol>
+  )
 }
+export default function NewRecipePage() {
+  const [category, setCategory] = useState('Middag')
+  const [selectedTags, setSelectedTags] = useState<string[]>([
+    'Vegetar',
+    'Glutenfri',
+  ])
+  const [servings, setServings] = useState(4)
+  // Velger eller fjerner en tag
+  const toggleTag = (tag: string) => {
+    if (selectedTags.includes(tag)) {
+      setSelectedTags(
+        selectedTags.filter((item) => item !== tag),
+      )
+    } else {
+      setSelectedTags([...selectedTags, tag])
+    }
+  }
+
+  return (
+    <div className="w-full">
+
+
+      {/* TO KOLONNER */}
+      <div className="grid grid-cols-1 gap-8 lg:grid-cols-2">
+        {/* VENSTRE SIDE */}
+        <div className="space-y-3">
+
+          {/* Bilde */}
+          <div>
+            <p className="form-label">
+              Bilde av retten <span className="text-primary"> *</span>
+            </p>
+
+            <button type="button" className="upload-button"
+            >
+              <span
+                aria-hidden="true"
+                className="
+                  mb-2 flex h-10 w-10
+                  items-center justify-center
+                  rounded-full
+                  bg-pink-light
+                  text-lg text-primary
+                "
+              >
+                ♧
+              </span>
+
+              <span className="font-semibold">Last opp bilde</span>
+            </button>
+          </div>
+
+          {/* Kort beskrivelse */}
+                <Rating
+                  name="rating"
+                  defaultValue={2.5}
+                  precision={0.5}
+                  size='medium'
+                  sx={{color: 'var(--color-primary)',}}
+                />
+          <div>
+            <label htmlFor="description"className="form-label">
+              Kort beskrivelse <span className="text-primary"> *</span>
+            </label>
+
+            <textarea
+              id="description"
+              rows={3}
+              placeholder="Skriv noen setninger om oppskriften..."
+              className="form-input resize-none"
+            />
+          </div>
+
+          {/* Instagram / TikTok */}
+          <div>
+            <label htmlFor="video-url" className="form-label">
+              Instagram Reel / TikTok (valgfritt)
+            </label>
+
+            <input
+              id="video-url"
+              type="url"
+              placeholder="Lim inn lenke til video..."
+              className="form-input"
+            />
+
+            <p className="mt-1 text-xs text-olive">
+              Legg til en video hvis du vil vise hvordan retten lages.
+            </p>
+          </div>
+
+        </div>
+
+        {/* HØYRE SIDE */}
+        <div className="space-y-3">
+          {/* Navn på oppskriften */}
+          <div>
+            <label htmlFor="recipe-title" className="form-label">
+              Navn på oppskriften <span className="text-primary"> *</span>
+            </label>
+
+            <input
+              id="recipe-title"
+              type="text"
+              placeholder="F.eks. kremet pasta med sopp"
+              className="form-input"
+            />
+          </div>
+
+          {/* Tid og porsjoner */}
+          <div className="grid grid-cols-2 gap-6">
+            {/* Tid */}
+            <div>
+              <label htmlFor="prep-time" className="form-label"> 
+                Tid <span className="text-primary"> *</span>
+              </label>
+
+              <div className="relative">
+                <input
+                  id="prep-time"
+                  type="number"
+                  min={1}
+                  defaultValue={30}
+                  className="form-input max-w-20 pr-12"
+                />
+
+                <span className=" text-xs text-olive">
+                  min
+                </span>
+              </div>
+            </div>
+
+            {/* Porsjoner */}
+            <div>
+              <p className="form-label">
+                Porsjoner <span className="text-primary"> *</span>
+              </p>
+
+              <div className="inline-flex items-center gap-4 rounded-medium border border-peach p-1">
+                <button
+                  type="button"
+                  className="stepper-button"
+                  aria-label="Reduser antall porsjoner"
+                  onClick={() =>
+                    setServings(Math.max(1, servings - 1))
+                  }
+                >
+                  −
+                </button>
+
+                <span className="min-w-4 text-center font-semibold">
+                  {servings}
+                </span>
+
+                <button
+                  type="button"
+                  className="stepper-button"
+                  aria-label="Øk antall porsjoner"
+                  onClick={() =>
+                    setServings(servings + 1)
+                  }
+                >
+                  +
+                </button>
+
+              </div>
+            </div>
+
+          </div>
+
+
+          {/* Kategori */}
+          <div>
+            <p className="form-label">
+              Kategori <span className="text-primary"> *</span>
+            </p>
+
+            <div className="flex flex-wrap gap-2">
+              {CATEGORIES.map((item) => (
+                <Tag
+                  key={item}
+                  selected={category === item}
+                  onClick={() => setCategory(item)}
+                >
+                  {item}
+                </Tag>
+              ))}
+            </div>
+          </div>
+
+          {/* Kosthold / tags */}
+          <div>
+            <p className="form-label">  Kosthold / tags </p>
+            <div className="flex flex-wrap gap-2">
+
+              {TAGS.map((item) => (
+                <Tag
+                  key={item}
+                  selected={selectedTags.includes(item)}
+                  onClick={() => toggleTag(item)}
+                >
+                  {item}
+                </Tag>
+              ))}
+
+              <Tag> Ny tag +</Tag>
+            </div>
+          </div>
+
+        </div>
+      </div>
+
+      {/* KNAPPER NEDERST */}
+      <div className="mt-4 flex items-center justify-end gap-5 border-t border-peach pt-4">
+        <Button variant="ghost" size="small"> Lagre utkast </Button>
+        <Button variant="primary" size="small"> Neste: Ingredienser</Button>
+      </div>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index 3dae684..364ffc7 100644
--- a/package.json
+++ b/package.json
@@ -16,5 +16,10 @@
   ],
   "devDependencies": {
     "prettier": "^3.9.9"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "@mui/material": "^9.4.0"
   }
 }