diff --git a/client/src/components/new-recipe/RecipeImageUpload.tsx b/client/src/components/new-recipe/RecipeImageUpload.tsx
new file mode 100644
index 0000000..893e266
--- /dev/null
+++ b/client/src/components/new-recipe/RecipeImageUpload.tsx
@@ -0,0 +1,64 @@
+
+import { useEffect, useState } from 'react'
+import type { ChangeEvent } from 'react'
+
+export function RecipeImageUpload() {
+  const [image, setImage] = useState<File | null>(null)
+  const [preview, setPreview] = useState<string | null>(null)
+
+  useEffect(() => {
+    if (!image) {
+      setPreview(null)
+      return
+    }
+
+    const url = URL.createObjectURL(image)
+    setPreview(url)
+
+    return () => URL.revokeObjectURL(url)
+  }, [image])
+
+  const handleImageChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0]
+    if (!file) return
+
+    if (!['image/jpeg', 'image/png', 'image/webp'].includes(file.type)) {
+      alert('Velg et JPG-, PNG- eller WebP-bilde.')
+      return
+    }
+
+    if (file.size > 5 * 1024 * 1024) {
+      alert('Bildet kan ikke være større enn 5 MB.')
+      return
+    }
+
+    setImage(file)
+  }
+
+  return (
+    <div>
+      <label
+        htmlFor="recipe-image"
+        className="flex min-h-64 cursor-pointer flex-col items-center justify-center overflow-hidden rounded-medium border-2 border-dashed border-peach"
+      >
+        {preview ? (
+          <img
+            src={preview}
+            alt="Forhåndsvisning av oppskriftsbilde"
+            className="h-64 w-full object-cover"
+          />
+        ) : (
+          <span>+ Velg bilde til oppskriften</span>
+        )}
+      </label>
+
+      <input
+        id="recipe-image"
+        type="file"
+        accept="image/jpeg,image/png,image/webp"
+        className="sr-only"
+        onChange={handleImageChange}
+      />
+    </div>
+  )
+}
diff --git a/client/src/components/new-recipe/RecipeStep1.tsx b/client/src/components/new-recipe/RecipeStep1.tsx
index 3dd8b21..ed69a9e 100644
--- a/client/src/components/new-recipe/RecipeStep1.tsx
+++ b/client/src/components/new-recipe/RecipeStep1.tsx
@@ -1,9 +1,13 @@
+
+import { useState } from 'react'
 import type { Dispatch, SetStateAction } from 'react'
 import Rating from '@mui/material/Rating'
 import { Button } from '../ui/Button'
 import { Field } from '../ui/Field'
 import { Input, Textarea } from '../ui/Input'
 import { Tag } from '../ui/Tag'
+import { ImageUpload } from '../ui/ImageUpload'
+import TagDialog from './TagDialog'
 import type { RecipeFormData } from '../../routes/NewRecipePage'
 
 // Sånn at informasjonen blir lagret mellom stegene
@@ -13,45 +17,87 @@ type RecipeStep1Props = {
   onNext: () => void
 }
 
+const MAX_TAGS = 6
+
+const categories = [
+  'Frokost',
+  'Lunsj',
+  'Middag',
+  'Dessert',
+  'Snacks',
+  'Drikke',
+]
 
-const categories = ['Frokost', 'Lunsj', 'Middag', 'Dessert', 'Snacks', 'Drikke']
+const dietaryTags = [
+  'Vegetar',
+  'Vegansk',
+  'Pescetar',
+  'Glutenfri',
+  'Laktosefri',
+  'Under 30 min',
+]
 
-const dietaryTags = ['Vegetar', 'Vegansk', 'Pescetar', 'Glutenfri', 'Laktosefri', 'Annet +']
+export default function RecipeStep1({
+  data,
+  setData,
+  onNext,
+}: RecipeStep1Props) {
+  const [tagDialogOpen, setTagDialogOpen] = useState(false)
 
-export default function RecipeStep1({ data, setData, onNext }: RecipeStep1Props) {
-  // Oppdaterer ETT felt i oppskriften, f.eks. update('title', 'Pasta').
-  // Erstatter alle setData({ ...data, felt: verdi }) og sørger for at resten beholdes.
-  const update = <K extends keyof RecipeFormData>(key: K, value: RecipeFormData[K]) =>
+  // Oppdaterer ett felt i oppskriften og beholder resten
+  const update = <K extends keyof RecipeFormData>(
+    key: K,
+    value: RecipeFormData[K],
+  ) => {
     setData((prev) => ({ ...prev, [key]: value }))
+  }
 
-  // Klikk på en valgt tag fjerner den, klikk på en ikke-valgt tag legger den til
-  const toggleTag = (tag: string) =>
-    update(
-      'tags',
-      data.tags.includes(tag) ? data.tags.filter((item) => item !== tag) : [...data.tags, tag],
-    )
+  // Legger til eller fjerner en tag (maks 6 totalt)
+  const toggleTag = (tag: string) => {
+    if (data.tags.includes(tag)) {
+      update(
+        'tags',
+        data.tags.filter((item) => item !== tag),
+      )
+    } else if (data.tags.length < MAX_TAGS) {
+      update('tags', [...data.tags, tag])
+    }
+  }
+
+  // Tags som er valgt fra dialogen
+  const extraTags = data.tags.filter(
+    (tag) => !dietaryTags.includes(tag),
+  )
 
   return (
     <div className="w-full">
-      <p className="mb-3 text-sm text-olive">Lag din egen oppskrift og del den med andre.</p>
+      <p className="mb-3 text-sm text-olive">
+        Lag din egen oppskrift og del den med andre.
+      </p>
 
       <div className="grid gap-4 md:grid-cols-2">
         {/* VENSTRE SIDE */}
         <div className="space-y-2">
           <Field label="Bilde">
-            <button type="button" className="upload-button">
-              <span className="text-sm font-semibold text-primary">Last opp bilde</span>
-              <span className="mt-1 text-xs text-olive">PNG, JPG eller WebP</span>
-            </button>
+            <ImageUpload
+              value={data.imageFile}
+              onChange={(file) => update('imageFile', file)}
+            />
           </Field>
 
-          <Field label="Kort beskrivelse" htmlFor="description" required>
+          <Field
+            label="Kort beskrivelse"
+            htmlFor="description"
+            required
+          >
             <Textarea
               id="description"
               rows={2}
               placeholder="Skriv noen setninger om oppskriften..."
               value={data.description}
-              onChange={(e) => update('description', e.target.value)}
+              onChange={(e) =>
+                update('description', e.target.value)
+              }
             />
           </Field>
 
@@ -65,59 +111,90 @@ export default function RecipeStep1({ data, setData, onNext }: RecipeStep1Props)
             />
           </Field>
 
-          <Field label="Instagram Reel / TikTok (valgfritt)" htmlFor="video-url">
+          {/* Lenke til Instagram Reel eller TikTok */}
+          <Field
+            label="Instagram Reel / TikTok (valgfritt)"
+            htmlFor="video-url"
+          >
             <Input
               id="video-url"
               type="url"
               placeholder="Lim inn lenke til video..."
               value={data.videoUrl}
-              onChange={(e) => update('videoUrl', e.target.value)}
+              onChange={(e) =>
+                update('videoUrl', e.target.value)
+              }
             />
           </Field>
         </div>
 
         {/* HØYRE SIDE */}
         <div className="space-y-3">
-          <Field label="Navn på oppskrift" htmlFor="recipe-title" required>
+          <Field
+            label="Navn på oppskrift"
+            htmlFor="recipe-title"
+            required
+          >
             <Input
               id="recipe-title"
               placeholder="F.eks. kremet pasta med sopp"
               value={data.title}
-              onChange={(e) => update('title', e.target.value)}
+              onChange={(e) =>
+                update('title', e.target.value)
+              }
             />
           </Field>
 
           {/* Tid og porsjoner */}
           <div className="grid grid-cols-2 gap-4">
-            <Field label="Tilberedningstid" htmlFor="prep-time" required>
+            <Field
+              label="Tilberedningstid"
+              htmlFor="prep-time"
+              required
+            >
               <div className="flex items-center gap-2">
                 <Input
                   id="prep-time"
                   type="number"
                   min={1}
                   value={data.prepTime}
-                  onChange={(e) => update('prepTime', Number(e.target.value))}
+                  onChange={(e) =>
+                    update('prepTime', Number(e.target.value))
+                  }
                 />
-                <span className="text-sm text-olive">min</span>
+                <span className="text-sm text-olive">
+                  min
+                </span>
               </div>
             </Field>
 
             <Field label="Porsjoner" required>
-              <div className="flex h-[38px] items-center inline-flex items-center gap-4 rounded-medium border border-peach p-1">
-                <button type="button" className="stepper-button"
+              <div className="inline-flex h-[38px] items-center gap-4 rounded-medium border border-peach p-1">
+                <button
+                  type="button"
+                  className="stepper-button"
                   aria-label="Reduser antall porsjoner"
-                  onClick={() => update('servings', Math.max(1, data.servings - 1))}
+                  onClick={() =>
+                    update(
+                      'servings',
+                      Math.max(1, data.servings - 1),
+                    )
+                  }
                 >
                   −
                 </button>
 
-                <span className="min-w-5 text-center font-semibold">{data.servings}</span>
+                <span className="min-w-5 text-center font-semibold">
+                  {data.servings}
+                </span>
 
                 <button
                   type="button"
                   className="stepper-button"
                   aria-label="Øk antall porsjoner"
-                  onClick={() => update('servings', data.servings + 1)}
+                  onClick={() =>
+                    update('servings', data.servings + 1)
+                  }
                 >
                   +
                 </button>
@@ -131,7 +208,9 @@ export default function RecipeStep1({ data, setData, onNext }: RecipeStep1Props)
                 <Tag
                   key={category}
                   selected={data.category === category}
-                  onClick={() => update('category', category)}
+                  onClick={() =>
+                    update('category', category)
+                  }
                 >
                   {category}
                 </Tag>
@@ -139,14 +218,48 @@ export default function RecipeStep1({ data, setData, onNext }: RecipeStep1Props)
             </div>
           </Field>
 
+          {/* KOSTHOLD OG TAGS */}
           <Field label="Kosthold">
             <div className="flex flex-wrap gap-2">
+              {/* Vanlige tags */}
               {dietaryTags.map((tag) => (
-                <Tag key={tag} selected={data.tags.includes(tag)} onClick={() => toggleTag(tag)}>
+                <Tag
+                  key={tag}
+                  selected={data.tags.includes(tag)}
+                  onClick={() => toggleTag(tag)}
+                >
                   {tag}
                 </Tag>
               ))}
+
+              {/* Åpner dialogen med flere tags */}
+              <Tag
+                selected={false}
+                onClick={() => setTagDialogOpen(true)}
+              >
+                Annet +
+              </Tag>
             </div>
+
+            {/* Ekstra tags valgt i dialogen */}
+            {extraTags.length > 0 && (
+              <div className="mt-3 flex flex-wrap gap-2">
+                {extraTags.map((tag) => (
+                  <Tag
+                    key={tag}
+                    selected
+                    onClick={() => toggleTag(tag)}
+                  >
+                    {tag} ×
+                  </Tag>
+                ))}
+              </div>
+            )}
+
+            {/* Viser hvor mange tags som er valgt */}
+            <p className="mt-2 text-xs text-olive">
+              {data.tags.length} av {MAX_TAGS} tags valgt
+            </p>
           </Field>
         </div>
       </div>
@@ -156,10 +269,23 @@ export default function RecipeStep1({ data, setData, onNext }: RecipeStep1Props)
         <Button variant="ghost" size="small">
           Lagre utkast
         </Button>
-        <Button variant="primary" size="small" onClick={onNext}>
+
+        <Button
+          variant="primary"
+          size="small"
+          onClick={onNext}
+        >
           Neste: Ingredienser
         </Button>
       </div>
+
+      {/* DIALOG MED FLERE TAGS */}
+      <TagDialog
+        open={tagDialogOpen}
+        selectedTags={data.tags}
+        onChange={(tags) => update('tags', tags)}
+        onClose={() => setTagDialogOpen(false)}
+      />
     </div>
   )
 }
diff --git a/client/src/components/new-recipe/RecipeStep2.tsx b/client/src/components/new-recipe/RecipeStep2.tsx
index 45d47d4..7f7ec81 100644
--- a/client/src/components/new-recipe/RecipeStep2.tsx
+++ b/client/src/components/new-recipe/RecipeStep2.tsx
@@ -1,9 +1,14 @@
+
 import { useState } from 'react'
 import type { Dispatch, SetStateAction } from 'react'
 import type { RecipeFormData } from '../../routes/NewRecipePage'
+
 import { Button } from '../ui/Button'
 import { Field } from '../ui/Field'
-import { Input, Select} from '../ui/Input'
+import { IconButton } from '../ui/IconButton'
+import { Input, Select } from '../ui/Input'
+import { parseIngredients } from './parseIngredients'
+
 import ArrowBackIcon from '@mui/icons-material/ArrowBack'
 import DeleteIcon from '@mui/icons-material/DeleteOutlined'
 import AddIcon from '@mui/icons-material/Add'
@@ -29,161 +34,334 @@ const SYSTEMS: { value: System; label: string }[] = [
   { value: 'imperial', label: 'Imperial' },
 ]
 
-// Samme kolonner i overskriften og i hver rad: [dra] [navn] [mengde] [enhet] [slett]
 const COLUMNS = 'md:grid-cols-[20px_1fr_100px_90px_32px]'
 
 const focusRing =
   'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary'
 
-export default function RecipeStep2({ data, setData, onBack, onNext }: RecipeStep2Props) {
-  // Hvilken rad som dras akkurat nå, og hvilken rad som er "klar" til å dras
+export default function RecipeStep2({
+  data,
+  setData,
+  onBack,
+  onNext,
+}: RecipeStep2Props) {
+  // Dra og slipp
   const [dragId, setDragId] = useState<number | null>(null)
   const [readyId, setReadyId] = useState<number | null>(null)
 
+  // Innliming av ingrediensliste
+  const [pasteMode, setPasteMode] = useState(false)
+  const [ingredientText, setIngredientText] = useState('')
+  const [message, setMessage] = useState('')
+
   const units = UNITS[data.measurementSystem]
 
+  // Bytter målesystem
   const changeMeasurementSystem = (system: System) =>
     setData((prev) => ({
       ...prev,
       measurementSystem: system,
-      // Bytt bare enheter som ikke finnes i det nye systemet
       ingredients: prev.ingredients.map((item) =>
-        UNITS[system].includes(item.unit) ? item : { ...item, unit: UNITS[system][0] },
+        UNITS[system].includes(item.unit)
+          ? item
+          : { ...item, unit: UNITS[system][0] },
       ),
     }))
 
-  const updateIngredient = (id: number, field: 'name' | 'amount' | 'unit', value: string) =>
+  // Oppdaterer en ingrediens
+  const updateIngredient = (
+    id: number,
+    field: 'name' | 'amount' | 'unit',
+    value: string,
+  ) => {
+    setMessage('')
+
     setData((prev) => ({
       ...prev,
       ingredients: prev.ingredients.map((item) =>
         item.id === id ? { ...item, [field]: value } : item,
       ),
     }))
+  }
+
+  // Legger til en tom ingrediensrad
+  const addIngredient = () => {
+    setMessage('')
 
-  const addIngredient = () =>
     setData((prev) => ({
       ...prev,
       ingredients: [
         ...prev.ingredients,
-        { id: Date.now(), name: '', amount: '', unit: UNITS[prev.measurementSystem][0] },
+        {
+          id: Date.now(),
+          name: '',
+          amount: '',
+          unit: UNITS[prev.measurementSystem][0],
+        },
       ],
     }))
+  }
 
+  // Fjerner en ingrediens
   const removeIngredient = (id: number) =>
     setData((prev) => ({
       ...prev,
       ingredients: prev.ingredients.filter((item) => item.id !== id),
     }))
 
-  // Flytter raden som dras til plassen der den ble sluppet
+  // Endrer rekkefølgen på ingrediensene
   const moveIngredient = (fromId: number, toId: number) =>
     setData((prev) => {
       const list = [...prev.ingredients]
+
       const from = list.findIndex((item) => item.id === fromId)
       const to = list.findIndex((item) => item.id === toId)
+
       if (from < 0 || to < 0 || from === to) return prev
+
       const [moved] = list.splice(from, 1)
       list.splice(to, 0, moved)
+
       return { ...prev, ingredients: list }
     })
 
+  // Gjør innlimt tekst om til ingrediensrader
+  const importIngredients = () => {
+    const parsed = parseIngredients(ingredientText)
+
+    if (!parsed.length) {
+      setMessage('Lim inn minst én ingrediens først.')
+      return
+    }
+
+    setData((prev) => ({
+      ...prev,
+      ingredients: [
+        // Beholder eksisterende utfylte ingredienser
+        ...prev.ingredients.filter(
+          (item) => item.name.trim() || item.amount.trim(),
+        ),
+
+        // Legger til ingrediensene fra teksten
+        ...parsed.map((item, index) => ({
+          ...item,
+          id: Date.now() + index,
+          unit: UNITS[prev.measurementSystem].includes(item.unit)
+            ? item.unit
+            : UNITS[prev.measurementSystem][0],
+        })),
+      ],
+    }))
+
+    setPasteMode(false)
+    setIngredientText('')
+    setMessage(
+      'Ingrediensene er lagt til. Kontroller mengder og enheter før du fortsetter.',
+    )
+  }
+
   return (
-     <div className="flex min-h-[500px] w-full flex-col">
+    <div className="flex min-h-[500px] w-full flex-col">
       <div className="grid grid-cols-1 gap-8 lg:grid-cols-[1fr_320px]">
         {/* VENSTRE: ingredienser */}
         <div>
           <h2 className="font-heading text-3xl text-text">
             Ingredienser <span className="text-primary">*</span>
           </h2>
-        
-          {/* Kolonnenavn (kun på større skjermer) */}
-          <div className={`mb-2 mt-4 hidden gap-3 text-xs font-semibold md:grid ${COLUMNS}`}>
-            <span />
-            <span>Ingrediens</span>
-            <span>Mengde</span>
-            <span>Enhet</span>
+
+          {/* Velg hvordan ingredienser legges inn */}
+          <div className="mt-4 flex flex-wrap gap-3 text-sm">
+            <button
+              type="button"
+              onClick={() => setPasteMode(false)}
+              aria-pressed={!pasteMode}
+              className={`rounded-small border border-peach px-3 py-2 ${focusRing} ${
+                !pasteMode
+                  ? 'bg-pink-light font-semibold text-primary'
+                  : 'text-text'
+              }`}
+            >
+              Legg til manuelt
+            </button>
+
+            <button
+              type="button"
+              onClick={() => setPasteMode(true)}
+              aria-pressed={pasteMode}
+              className={`rounded-small border border-peach px-3 py-2 ${focusRing} ${
+                pasteMode
+                  ? 'bg-pink-light font-semibold text-primary'
+                  : 'text-text'
+              }`}
+            >
+              Lim inn liste
+            </button>
           </div>
 
-          <div className="custom-scrollbar max-h-[300px] space-y-3 overflow-y-auto pr-2">
-            {data.ingredients.map((item) => (
+          {pasteMode ? (
+            // SAMLET INGREDIENSLISTE
+            <div className="mt-4 space-y-3">
+              <label
+                htmlFor="ingredient-list"
+                className="block text-sm font-semibold text-text"
+              >
+                Lim inn én ingrediens per linje
+              </label>
+
+              <textarea
+                id="ingredient-list"
+                rows={5}
+                value={ingredientText}
+                onChange={(event) =>
+                  setIngredientText(event.target.value)
+                }
+                placeholder={'200 g pasta\n2 ss pesto\n1 stk løk\n0,5 dl fløte'}
+                className={`w-full rounded-medium border border-peach bg-white p-3 text-text ${focusRing}`}
+              />
+
+              <p className="text-xs text-olive">
+                Eksempel: «200 g pasta». Mengder og enheter tolkes
+                automatisk, men bør kontrolleres etterpå.
+              </p>
+
+              <Button
+                variant="primary"
+                size="small"
+                onClick={importIngredients}
+              >
+                Gjør om til ingredienser
+              </Button>
+            </div>
+          ) : (
+            // MANUELL REGISTRERING
+            <>
+              {/* Kolonnenavn */}
               <div
-                key={item.id}
-                draggable={readyId === item.id}
-                onDragStart={() => setDragId(item.id)}
-                onDragOver={(e) => e.preventDefault()}
-                onDrop={() => dragId !== null && moveIngredient(dragId, item.id)}
-                onDragEnd={() => {
-                  setDragId(null)
-                  setReadyId(null)
-                }}
-                className={`grid grid-cols-[1fr_90px] gap-2 md:items-center md:gap-3 ${COLUMNS} ${
-                  dragId === item.id ? 'opacity-50' : ''
-                }`}
+                className={`mb-2 mt-4 hidden gap-3 text-xs font-semibold md:grid ${COLUMNS}`}
               >
-                {/* Dra-håndtak: raden kan bare dras etter å ha tatt tak her */}
-                <span
-                  aria-hidden="true"
-                  title="Dra for å endre rekkefølge"
-                  className="hidden cursor-grab text-olive md:block"
-                  onMouseDown={() => setReadyId(item.id)}
-                  onMouseUp={() => setReadyId(null)}
-                >
-                  <DragIcon fontSize="small" />
-                </span>
+                <span />
+                <span>Ingrediens</span>
+                <span>Mengde</span>
+                <span>Enhet</span>
+              </div>
 
-                <Input
-                  aria-label="Ingrediens"
-                  className="col-span-2 md:col-span-1"
-                  placeholder="f.eks. Hvetemel"
-                  value={item.name}
-                  onChange={(e) => updateIngredient(item.id, 'name', e.target.value)}
-                />
-                <Input
-                  aria-label="Mengde"
-                  type="number"
-                  min="0"
-                  step="any"
-                  placeholder="300"
-                  value={item.amount}
-                  onChange={(e) => updateIngredient(item.id, 'amount', e.target.value)}
-                />
-                <Select
-                  aria-label="Enhet"
-                  value={item.unit}
-                  onChange={(e) => updateIngredient(item.id, 'unit', e.target.value)}
-                >
-                  {units.map((unit) => (
-                    <option key={unit} value={unit}>
-                      {unit}
-                    </option>
-                  ))}
-                </Select>
+              {/* Ingrediensrader */}
+              <div className="custom-scrollbar max-h-[300px] space-y-3 overflow-y-auto pr-2">
+                {data.ingredients.map((item) => (
+                  <div
+                    key={item.id}
+                    draggable={readyId === item.id}
+                    onDragStart={() => setDragId(item.id)}
+                    onDragOver={(e) => e.preventDefault()}
+                    onDrop={() =>
+                      dragId !== null &&
+                      moveIngredient(dragId, item.id)
+                    }
+                    onDragEnd={() => {
+                      setDragId(null)
+                      setReadyId(null)
+                    }}
+                    className={`grid grid-cols-[1fr_90px] gap-2 md:items-center md:gap-3 ${COLUMNS} ${
+                      dragId === item.id ? 'opacity-50' : ''
+                    }`}
+                  >
+                    {/* Dra-håndtak */}
+                    <span
+                      aria-hidden="true"
+                      title="Dra for å endre rekkefølge"
+                      className="hidden cursor-grab text-olive md:block"
+                      onMouseDown={() => setReadyId(item.id)}
+                      onMouseUp={() => setReadyId(null)}
+                    >
+                      <DragIcon fontSize="small" />
+                    </span>
+
+                    {/* Ingrediensnavn */}
+                    <Input
+                      aria-label="Ingrediens"
+                      className="col-span-2 md:col-span-1"
+                      placeholder="f.eks. Hvetemel"
+                      value={item.name}
+                      onChange={(e) =>
+                        updateIngredient(
+                          item.id,
+                          'name',
+                          e.target.value,
+                        )
+                      }
+                    />
+
+                    {/* Mengde */}
+                    <Input
+                      aria-label="Mengde"
+                      type="number"
+                      min="0"
+                      step="any"
+                      placeholder="300"
+                      value={item.amount}
+                      onChange={(e) =>
+                        updateIngredient(
+                          item.id,
+                          'amount',
+                          e.target.value,
+                        )
+                      }
+                    />
+
+                    {/* Enhet */}
+                    <Select
+                      aria-label="Enhet"
+                      value={item.unit}
+                      onChange={(e) =>
+                        updateIngredient(
+                          item.id,
+                          'unit',
+                          e.target.value,
+                        )
+                      }
+                    >
+                      {units.map((unit) => (
+                        <option key={unit} value={unit}>
+                          {unit}
+                        </option>
+                      ))}
+                    </Select>
+
+                    {/* Slett ingrediens - bruker IconButton */}
+                    <IconButton
+                      label={`Fjern ${item.name || 'ingrediens'}`}
+                      className="col-span-2 md:col-span-1"
+                      onClick={() => removeIngredient(item.id)}
+                    >
+                      <DeleteIcon fontSize="small" />
+                    </IconButton>
+                  </div>
+                ))}
+              </div>
+
+              {/* Legg til ingrediens */}
+              <div className="mt-4 flex flex-wrap gap-4 text-sm">
                 <button
                   type="button"
-                  aria-label={`Fjern ${item.name || 'ingrediens'}`}
-                  className={`col-span-2 flex cursor-pointer justify-center rounded-small p-1 text-primary hover:bg-pink-light md:col-span-1 ${focusRing}`}
-                  onClick={() => removeIngredient(item.id)}
+                  className={`flex cursor-pointer items-center gap-1 rounded-small px-2 py-1 font-semibold text-primary hover:bg-pink-light ${focusRing}`}
+                  onClick={addIngredient}
                 >
-                  <DeleteIcon fontSize="small" />
+                  <AddIcon fontSize="small" />
+                  Legg til ingrediens
                 </button>
               </div>
-            ))}
-          </div>
+            </>
+          )}
 
-          {/* Legg til */}
-          <div className="mt-4 flex flex-wrap gap-4 text-sm">
-            <button
-              type="button"
-              className={`flex cursor-pointer items-center gap-1 rounded-small px-2 py-1 font-semibold text-primary hover:bg-pink-light ${focusRing}`}
-              onClick={addIngredient}
-            >
-              <AddIcon fontSize="small" />
-              Legg til ingrediens
-            </button>
-          </div>
+          {/* Tilbakemelding etter import */}
+          {message && (
+            <p role="status" className="mt-3 text-sm text-primary">
+              {message}
+            </p>
+          )}
         </div>
 
-        {/* HØYRE: porsjoner, måleenhet og tips */}
+        {/* HØYRE: porsjoner, måleenheter og tips */}
         <aside className="space-y-6">
           <Field label="Antall porsjoner" required>
             <div className="flex items-center gap-4">
@@ -192,30 +370,50 @@ export default function RecipeStep2({ data, setData, onBack, onNext }: RecipeSte
                   type="button"
                   aria-label="Reduser antall porsjoner"
                   className="stepper-button"
-                  onClick={() => setData((prev) => ({ ...prev, servings: Math.max(1, prev.servings - 1) }))}
+                  onClick={() =>
+                    setData((prev) => ({
+                      ...prev,
+                      servings: Math.max(1, prev.servings - 1),
+                    }))
+                  }
                 >
                   −
                 </button>
-                <span className="min-w-4 text-center font-semibold">{data.servings}</span>
+
+                <span className="min-w-4 text-center font-semibold">
+                  {data.servings}
+                </span>
+
                 <button
                   type="button"
                   aria-label="Øk antall porsjoner"
                   className="stepper-button"
-                  onClick={() => setData((prev) => ({ ...prev, servings: prev.servings + 1 }))}
+                  onClick={() =>
+                    setData((prev) => ({
+                      ...prev,
+                      servings: prev.servings + 1,
+                    }))
+                  }
                 >
                   +
                 </button>
               </div>
+
               <p className="text-xs text-olive">
-                Ingrediensene vil skaleres automatisk basert på dette tallet.
+                Ingrediensene vil skaleres automatisk basert på
+                dette tallet.
               </p>
             </div>
           </Field>
 
+          {/* Måleenheter */}
           <Field label="Måleenheter">
             <div className="flex gap-4 text-sm font-medium">
               {SYSTEMS.map(({ value, label }) => (
-                <label key={value} className="flex cursor-pointer items-center gap-2">
+                <label
+                  key={value}
+                  className="flex cursor-pointer items-center gap-2"
+                >
                   <input
                     type="radio"
                     name="measurement-system"
@@ -227,26 +425,39 @@ export default function RecipeStep2({ data, setData, onBack, onNext }: RecipeSte
                 </label>
               ))}
             </div>
-            <p className="mt-2 text-xs text-olive">Velg hvilket målesystem oppskriften skal bruke.</p>
+
+            <p className="mt-2 text-xs text-olive">
+              Velg hvilket målesystem oppskriften skal bruke.
+            </p>
           </Field>
 
+          {/* Tips */}
           <div className="rounded-medium border border-olive/20 bg-olive/10 p-2 text-sm text-olive">
             <p className="mb-2 flex items-center gap-2 font-semibold text-text">
-              <InfoIcon fontSize="small" className="text-primary" />
+              <InfoIcon
+                fontSize="small"
+                className="text-primary"
+              />
               Tips for ingredienser
             </p>
-            Bruk vanlige måleenheter som g, kg, ml, dl, ts og ss. Det gjør det enklere for brukere å
-            skalere og justere oppskriften etter antall porsjoner.
+
+            Bruk vanlige måleenheter som g, kg, ml, dl, ts og ss.
+            Det gjør det enklere for brukere å skalere og justere
+            oppskriften etter antall porsjoner.
           </div>
 
+          {/* Rekkefølge */}
           <div className="rounded-medium border border-peach p-2 text-sm text-olive">
-            <p className="mb-2 font-semibold text-text">Rekkefølge</p>
-            Du kan dra radene for å endre rekkefølgen på ingrediensene.
+            <p className="mb-2 font-semibold text-text">
+              Rekkefølge
+            </p>
+            Du kan dra radene for å endre rekkefølgen på
+            ingrediensene.
           </div>
         </aside>
       </div>
 
-      {/* Knapper */}
+      {/* Navigasjon */}
       <div className="mt-5 flex flex-wrap items-center justify-between gap-3 border-t border-peach pt-4">
         <Button variant="ghost" size="small" onClick={onBack}>
           <ArrowBackIcon fontSize="small" />
@@ -257,6 +468,7 @@ export default function RecipeStep2({ data, setData, onBack, onNext }: RecipeSte
           <Button variant="ghost" size="small">
             Lagre utkast
           </Button>
+
           <Button variant="primary" size="small" onClick={onNext}>
             Neste: Fremgangsmåte
           </Button>
diff --git a/client/src/components/new-recipe/RecipeStep3.tsx b/client/src/components/new-recipe/RecipeStep3.tsx
index 83b4227..b7ccf16 100644
--- a/client/src/components/new-recipe/RecipeStep3.tsx
+++ b/client/src/components/new-recipe/RecipeStep3.tsx
@@ -3,6 +3,7 @@ import type { RecipeFormData } from '../../routes/NewRecipePage'
 import { Button } from '../ui/Button'
 import { Input, Textarea } from '../ui/Input'
 import { Tag } from '../ui/Tag'
+import { IconButton } from '../ui/IconButton'
 import ArrowBackIcon from '@mui/icons-material/ArrowBack'
 import AddIcon from '@mui/icons-material/Add'
 import DeleteIcon from '@mui/icons-material/DeleteOutlined'
@@ -106,14 +107,12 @@ export default function RecipeStep3({ data, setData, onBack, onNext }: RecipeSte
                       value={step.minutes}
                       onChange={(e) => updateStep(step.id, 'minutes', e.target.value)}
                     />
-                    <button
-                      type="button"
-                      aria-label={`Fjern steg ${index + 1}`}
-                      className={`flex h-9 cursor-pointer items-center justify-center rounded-small text-primary hover:bg-pink-light ${focusRing}`}
+                    <IconButton label={`Fjern steg ${index + 1}`}
+                      className="h-9"
                       onClick={() => removeStep(step.id)}
                     >
                       <DeleteIcon fontSize="small" />
-                    </button>
+                    </IconButton>
                   </div>
                 ))}
               </div>
diff --git a/client/src/components/new-recipe/RecipeStep4.tsx b/client/src/components/new-recipe/RecipeStep4.tsx
index 08c2297..fca0e2d 100644
--- a/client/src/components/new-recipe/RecipeStep4.tsx
+++ b/client/src/components/new-recipe/RecipeStep4.tsx
@@ -1,4 +1,5 @@
-import { useState } from 'react'
+
+import { useEffect, useState } from 'react'
 import type { Dispatch, ReactNode, SetStateAction } from 'react'
 import Rating from '@mui/material/Rating'
 import type { RecipeFormData } from '../../routes/NewRecipePage'
@@ -19,7 +20,13 @@ type RecipeStep4Props = {
 const card = 'rounded-medium border border-peach bg-background p-5'
 
 // Liten avrundet merkelapp (kategori, kosthold, "Under 30 min")
-function Pill({ children, className }: { children: ReactNode; className: string }) {
+function Pill({
+  children,
+  className,
+}: {
+  children: ReactNode
+  className: string
+}) {
   return (
     <span className={`rounded-full px-2.5 py-0.5 text-xs font-semibold ${className}`}>
       {children}
@@ -27,21 +34,53 @@ function Pill({ children, className }: { children: ReactNode; className: string
   )
 }
 
-// Legger til id-en i listen hvis den ikke er der, fjerner den hvis den er der
-const toggleId = (setter: Dispatch<SetStateAction<number[]>>, id: number) =>
-  setter((prev) => (prev.includes(id) ? prev.filter((i) => i !== id) : [...prev, id]))
+// Legger til eller fjerner en id fra listen
+const toggleId = (
+  setter: Dispatch<SetStateAction<number[]>>,
+  id: number,
+) =>
+  setter((prev) =>
+    prev.includes(id)
+      ? prev.filter((i) => i !== id)
+      : [...prev, id],
+  )
 
-export default function RecipeStep4({ data, onBack, onPublish }: RecipeStep4Props) {
-  // Kun for forhåndsvisningen: porsjoner og avkrysninger lagres ikke i oppskriften
+export default function RecipeStep4({
+  data,
+  onBack,
+  onPublish,
+}: RecipeStep4Props) {
+  // Kun for forhåndsvisningen
   const [servings, setServings] = useState(data.servings)
   const [checkedIngredients, setCheckedIngredients] = useState<number[]>([])
   const [doneSteps, setDoneSteps] = useState<number[]>([])
 
-  // Regner om mengden når man endrer porsjoner i forhåndsvisningen
+  // Holder på bilde-URL-en som brukes i forhåndsvisningen
+  const [imagePreview, setImagePreview] = useState<string | null>(null)
+
+  // Lager en midlertidig URL til bildet fra steg 1
+  useEffect(() => {
+    if (!data.imageFile) {
+      setImagePreview(null)
+      return
+    }
+
+    const imageUrl = URL.createObjectURL(data.imageFile)
+    setImagePreview(imageUrl)
+
+    // Rydder opp når bildet endres eller komponenten fjernes
+    return () => URL.revokeObjectURL(imageUrl)
+  }, [data.imageFile])
+
+  // Regner om mengden når man endrer porsjoner
   const scale = (amount: string) => {
     const value = Number(amount)
+
     if (!amount || Number.isNaN(value)) return amount
-    return String(Math.round(((value * servings) / data.servings) * 10) / 10)
+
+    return String(
+      Math.round(((value * servings) / data.servings) * 10) / 10,
+    )
   }
 
   const ingredients = data.ingredients.filter((item) => item.name.trim())
@@ -51,41 +90,68 @@ export default function RecipeStep4({ data, onBack, onPublish }: RecipeStep4Prop
     data.instructionMode === 'steps'
       ? data.steps
           .filter((step) => step.text.trim())
-          .map((step) => ({ id: step.id, text: step.text, minutes: step.minutes }))
+          .map((step) => ({
+            id: step.id,
+            text: step.text,
+            minutes: step.minutes,
+          }))
       : data.instructionText
           .split('\n')
-          .map((line) => line.replace(/^\s*\d+[.)]\s*/, '').trim()) // fjerner "1." foran
+          .map((line) => line.replace(/^\s*\d+[.)]\s*/, '').trim())
           .filter(Boolean)
-          .map((text, index) => ({ id: index, text, minutes: '' }))
+          .map((text, index) => ({
+            id: index,
+            text,
+            minutes: '',
+          }))
 
   return (
     <div className="w-full">
       <div className="grid grid-cols-1 gap-4 lg:grid-cols-[2fr_3fr]">
+
         {/* OPPSUMMERING */}
         <section className={card}>
           <div className="flex items-start justify-between gap-3">
             <div className="flex flex-wrap gap-2">
-              {data.category && <Pill className="bg-olive/20 text-text">{data.category}</Pill>}
+              {data.category && (
+                <Pill className="bg-olive/20 text-text">
+                  {data.category}
+                </Pill>
+              )}
+
               {data.tags.map((tag) => (
                 <Pill key={tag} className="bg-pink-light text-text">
                   {tag}
                 </Pill>
               ))}
+
               {data.prepTime <= 30 && (
-                <Pill className="border border-peach text-text">Under 30 min</Pill>
+                <Pill className="border border-peach text-text">
+                  Under 30 min
+                </Pill>
               )}
             </div>
 
             {data.rating ? (
               <div className="flex shrink-0 items-center gap-1 text-xs font-semibold text-olive">
-                <Rating value={data.rating} readOnly size="small" sx={{ color: 'inherit' }} />
+                <Rating
+                  value={data.rating}
+                  readOnly
+                  size="small"
+                  sx={{ color: 'inherit' }}
+                />
                 {data.rating.toFixed(1)}
               </div>
             ) : null}
           </div>
 
-          <h3 className="mt-4 font-heading text-2xl text-text">{data.title || 'Uten tittel'}</h3>
-          <p className="mt-2 text-sm text-olive">{data.description}</p>
+          <h3 className="mt-4 font-heading text-2xl text-text">
+            {data.title || 'Uten tittel'}
+          </h3>
+
+          <p className="mt-2 text-sm text-olive">
+            {data.description}
+          </p>
 
           <div className="mt-4 flex items-center justify-between text-sm">
             <span className="flex items-center gap-2 font-semibold">
@@ -100,35 +166,57 @@ export default function RecipeStep4({ data, onBack, onPublish }: RecipeStep4Prop
                 rel="noreferrer"
                 className="flex items-center gap-1 font-semibold text-primary hover:underline"
               >
-                Se video <NorthEastIcon sx={{ fontSize: 14 }} />
+                Se video
+                <NorthEastIcon sx={{ fontSize: 14 }} />
               </a>
             )}
           </div>
         </section>
 
         {/* BILDE */}
-        <section className="flex min-h-48 flex-col items-center justify-center gap-3 rounded-medium bg-peach/60">
-          <span className="flex h-12 w-12 items-center justify-center rounded-full bg-background">
-            <RestaurantIcon />
-          </span>
-          <span className="text-sm font-semibold">Bildeforhåndsvisning</span>
+        <section className="relative flex min-h-48 flex-col items-center justify-center gap-3 overflow-hidden rounded-medium bg-peach/60">
+          {imagePreview ? (
+            <img
+              src={imagePreview}
+              alt={data.title || 'Bilde av oppskriften'}
+              className="absolute inset-0 h-full w-full object-cover"
+            />
+          ) : (
+            <>
+              <span className="flex h-12 w-12 items-center justify-center rounded-full bg-background">
+                <RestaurantIcon />
+              </span>
+
+              <span className="text-sm font-semibold">
+                Bildeforhåndsvisning
+              </span>
+            </>
+          )}
         </section>
 
         {/* INGREDIENSER */}
         <section className={card}>
           <div className="flex items-center justify-between">
-            <h3 className="font-heading text-xl text-text">Ingredienser</h3>
+            <h3 className="font-heading text-xl text-text">
+              Ingredienser
+            </h3>
 
             <div className="inline-flex items-center gap-3 rounded-medium border border-peach p-1 text-sm">
               <button
                 type="button"
                 aria-label="Reduser antall porsjoner"
                 className="stepper-button"
-                onClick={() => setServings((value) => Math.max(1, value - 1))}
+                onClick={() =>
+                  setServings((value) => Math.max(1, value - 1))
+                }
               >
                 −
               </button>
-              <span className="min-w-4 text-center font-semibold">{servings}</span>
+
+              <span className="min-w-4 text-center font-semibold">
+                {servings}
+              </span>
+
               <button
                 type="button"
                 aria-label="Øk antall porsjoner"
@@ -141,7 +229,12 @@ export default function RecipeStep4({ data, onBack, onPublish }: RecipeStep4Prop
           </div>
 
           <ul className="mt-4 max-h-44 space-y-2 overflow-y-auto pr-2 text-sm">
-            {ingredients.length === 0 && <li className="text-olive">Ingen ingredienser lagt til.</li>}
+            {ingredients.length === 0 && (
+              <li className="text-olive">
+                Ingen ingredienser lagt til.
+              </li>
+            )}
+
             {ingredients.map((item) => (
               <li key={item.id}>
                 <label className="flex cursor-pointer items-center gap-3">
@@ -149,10 +242,20 @@ export default function RecipeStep4({ data, onBack, onPublish }: RecipeStep4Prop
                     type="checkbox"
                     className="accent-primary"
                     checked={checkedIngredients.includes(item.id)}
-                    onChange={() => toggleId(setCheckedIngredients, item.id)}
+                    onChange={() =>
+                      toggleId(setCheckedIngredients, item.id)
+                    }
                   />
-                  <span className={checkedIngredients.includes(item.id) ? 'text-olive line-through' : ''}>
-                    {item.amount && `${scale(item.amount)} ${item.unit} `}
+
+                  <span
+                    className={
+                      checkedIngredients.includes(item.id)
+                        ? 'text-olive line-through'
+                        : ''
+                    }
+                  >
+                    {item.amount &&
+                      `${scale(item.amount)} ${item.unit} `}
                     {item.name}
                   </span>
                 </label>
@@ -160,9 +263,12 @@ export default function RecipeStep4({ data, onBack, onPublish }: RecipeStep4Prop
             ))}
           </ul>
 
-          {/* TODO: koble til handlelisten når den finnes */}
+          {/* TODO: Koble til handlelisten når den finnes */}
           <div className="mt-4 border-t border-peach pt-3">
-            <button type="button" className="cursor-pointer text-xs font-semibold text-primary hover:underline">
+            <button
+              type="button"
+              className="cursor-pointer text-xs font-semibold text-primary hover:underline"
+            >
               Legg til i handleliste +
             </button>
           </div>
@@ -170,19 +276,40 @@ export default function RecipeStep4({ data, onBack, onPublish }: RecipeStep4Prop
 
         {/* FREMGANGSMÅTE */}
         <section className={card}>
-          <h3 className="font-heading text-xl text-text">Fremgangsmåte</h3>
+          <h3 className="font-heading text-xl text-text">
+            Fremgangsmåte
+          </h3>
 
           <ol className="mt-4 max-h-56 space-y-3 overflow-y-auto pr-2 text-sm">
-            {instructions.length === 0 && <li className="text-olive">Ingen fremgangsmåte lagt til.</li>}
+            {instructions.length === 0 && (
+              <li className="text-olive">
+                Ingen fremgangsmåte lagt til.
+              </li>
+            )}
+
             {instructions.map((step, index) => (
-              <li key={step.id} className="flex items-start gap-3">
+              <li
+                key={step.id}
+                className="flex items-start gap-3"
+              >
                 <span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-peach/50 text-xs font-semibold">
                   {index + 1}
                 </span>
 
-                <p className={`flex-1 ${doneSteps.includes(step.id) ? 'text-olive line-through' : ''}`}>
+                <p
+                  className={`flex-1 ${
+                    doneSteps.includes(step.id)
+                      ? 'text-olive line-through'
+                      : ''
+                  }`}
+                >
                   {step.text}
-                  {step.minutes && <span className="ml-2 text-xs text-olive">({step.minutes} min)</span>}
+
+                  {step.minutes && (
+                    <span className="ml-2 text-xs text-olive">
+                      ({step.minutes} min)
+                    </span>
+                  )}
                 </p>
 
                 <label className="flex shrink-0 cursor-pointer items-center gap-1 text-xs text-olive">
@@ -190,7 +317,9 @@ export default function RecipeStep4({ data, onBack, onPublish }: RecipeStep4Prop
                     type="checkbox"
                     className="accent-primary"
                     checked={doneSteps.includes(step.id)}
-                    onChange={() => toggleId(setDoneSteps, step.id)}
+                    onChange={() =>
+                      toggleId(setDoneSteps, step.id)
+                    }
                   />
                   Fullført
                 </label>
@@ -200,9 +329,13 @@ export default function RecipeStep4({ data, onBack, onPublish }: RecipeStep4Prop
         </section>
       </div>
 
-      {/* Knapper */}
+      {/* KNAPPER */}
       <div className="mt-5 flex flex-wrap items-center justify-between gap-3 border-t border-peach pt-4">
-        <Button variant="ghost" size="small" onClick={onBack}>
+        <Button
+          variant="ghost"
+          size="small"
+          onClick={onBack}
+        >
           <ArrowBackIcon fontSize="small" />
           Tilbake
         </Button>
@@ -211,7 +344,12 @@ export default function RecipeStep4({ data, onBack, onPublish }: RecipeStep4Prop
           <Button variant="ghost" size="small">
             Lagre utkast
           </Button>
-          <Button variant="primary" size="small" onClick={onPublish}>
+
+          <Button
+            variant="primary"
+            size="small"
+            onClick={onPublish}
+          >
             Publiser oppskrift
             <CheckIcon fontSize="small" />
           </Button>
diff --git a/client/src/components/new-recipe/TagDialog.tsx b/client/src/components/new-recipe/TagDialog.tsx
new file mode 100644
index 0000000..5eab16f
--- /dev/null
+++ b/client/src/components/new-recipe/TagDialog.tsx
@@ -0,0 +1,220 @@
+import { useEffect, useId, useRef, useState } from 'react'
+import CloseIcon from '@mui/icons-material/Close'
+import SearchIcon from '@mui/icons-material/Search'
+import { MAX_TAGS, tagGroups } from '../../lib/tags'
+
+type TagDialogProps = {
+  open: boolean
+  selectedTags: string[]
+  onChange: (tags: string[]) => void
+  onClose: () => void
+}
+
+const allTags = Object.values(tagGroups).flat()
+const categories = ['Alle', ...Object.keys(tagGroups)]
+
+// Utseende for alle pillene (kategorier, valgte tags og tags i listen)
+const pill = (selected: boolean, disabled = false) =>
+  `rounded-full border font-semibold transition-colors ${
+    selected
+      ? 'cursor-pointer border-primary bg-primary text-white hover:opacity-90'
+      : disabled
+        ? 'cursor-not-allowed border-peach opacity-40'
+        : 'cursor-pointer border-peach text-text hover:bg-peach/30'
+  }`
+
+export default function TagDialog({ open, selectedTags, onChange, onClose }: TagDialogProps) {
+  const [search, setSearch] = useState('')
+  const [category, setCategory] = useState('Alle')
+
+  const titleId = useId()
+  const dialogRef = useRef<HTMLDivElement>(null)
+  const closeButtonRef = useRef<HTMLButtonElement>(null)
+
+  // Lukker med Escape, holder fokus i dialogen og låser scrolling bak
+  useEffect(() => {
+    if (!open) return
+
+    const previousFocus = document.activeElement as HTMLElement | null
+    const previousOverflow = document.body.style.overflow
+
+    document.body.style.overflow = 'hidden'
+    closeButtonRef.current?.focus()
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') return onClose()
+      if (event.key !== 'Tab') return
+
+      const items = dialogRef.current?.querySelectorAll<HTMLElement>(
+        'button:not([disabled]), input:not([disabled])',
+      )
+      if (!items?.length) return
+
+      const first = items[0]
+      const last = items[items.length - 1]
+
+      if (event.shiftKey && document.activeElement === first) {
+        event.preventDefault()
+        last.focus()
+      } else if (!event.shiftKey && document.activeElement === last) {
+        event.preventDefault()
+        first.focus()
+      }
+    }
+
+    window.addEventListener('keydown', handleKeyDown)
+
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown)
+      document.body.style.overflow = previousOverflow
+      previousFocus?.focus()
+    }
+  }, [open, onClose])
+
+  if (!open) return null
+
+  // Filtrerer tags etter kategori og søketekst
+  const filteredTags = (category === 'Alle' ? allTags : tagGroups[category]).filter((tag) =>
+    tag.toLowerCase().includes(search.trim().toLowerCase()),
+  )
+
+  const isFull = selectedTags.length >= MAX_TAGS
+
+  // Legger til eller fjerner en tag (maks MAX_TAGS totalt)
+  const toggleTag = (tag: string) => {
+    if (selectedTags.includes(tag)) onChange(selectedTags.filter((item) => item !== tag))
+    else if (!isFull) onChange([...selectedTags, tag])
+  }
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4"
+      onMouseDown={(event) => event.target === event.currentTarget && onClose()}
+    >
+      <div
+        ref={dialogRef}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby={titleId}
+        className="flex max-h-[90vh] w-full max-w-3xl flex-col gap-4 overflow-hidden rounded-medium border border-peach bg-background p-5 shadow-xl sm:p-6"
+      >
+        {/* OVERSKRIFT */}
+        <div className="flex shrink-0 items-start justify-between gap-3">
+          <div>
+            <h2 id={titleId} className="font-heading text-2xl text-text">
+              Velg flere tags
+            </h2>
+            <p className="mt-1 text-sm text-olive">
+              Finn tags som passer oppskriften din. Du kan velge opptil {MAX_TAGS}.
+            </p>
+          </div>
+
+          <button
+            ref={closeButtonRef}
+            type="button"
+            aria-label="Lukk dialog"
+            onClick={onClose}
+            className="cursor-pointer text-olive hover:text-text"
+          >
+            <CloseIcon />
+          </button>
+        </div>
+
+        {/* SØKEFELT */}
+        <div className="flex shrink-0 items-center gap-2 rounded-medium border border-peach px-3 py-2">
+          <SearchIcon fontSize="small" className="text-olive" />
+          <input
+            type="search"
+            value={search}
+            onChange={(event) => setSearch(event.target.value)}
+            placeholder="Søk blant tags..."
+            aria-label="Søk blant tags"
+            className="w-full bg-transparent text-sm text-text outline-none"
+          />
+        </div>
+
+        {/* KATEGORIER */}
+        <div className="flex shrink-0 flex-wrap gap-2">
+          {categories.map((item) => (
+            <button
+              key={item}
+              type="button"
+              onClick={() => setCategory(item)}
+              aria-pressed={category === item}
+              className={`${pill(category === item)} px-3 py-1.5 text-xs`}
+            >
+              {item}
+            </button>
+          ))}
+        </div>
+
+        {/* VALGTE TAGS – KOMPAKT VISNING */}
+        {selectedTags.length > 0 && (
+          <div className="flex shrink-0 items-center gap-3 border-b border-peach pb-3">
+            <span className="shrink-0 text-xs font-semibold text-olive">Valgt:</span>
+
+            <div className="custom-scrollbar flex min-w-0 flex-1 gap-2 overflow-x-auto pb-1">
+              {selectedTags.map((tag) => (
+                <button
+                  key={tag}
+                  type="button"
+                  onClick={() => toggleTag(tag)}
+                  aria-label={`Fjern ${tag}`}
+                  className={`${pill(true)} shrink-0 px-2.5 py-1 text-xs`}
+                >
+                  {tag} ×
+                </button>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* ALLE TAGS – SCROLLBART OMRÅDE */}
+        <div className="custom-scrollbar min-h-0 flex-1 overflow-y-auto overscroll-contain pr-2">
+          <div className="flex flex-wrap gap-2">
+            {filteredTags.map((tag) => {
+              const selected = selectedTags.includes(tag)
+              const disabled = !selected && isFull
+
+              return (
+                <button
+                  key={tag}
+                  type="button"
+                  disabled={disabled}
+                  aria-pressed={selected}
+                  onClick={() => toggleTag(tag)}
+                  className={`${pill(selected, disabled)} px-3 py-1.5 text-sm`}
+                >
+                  {selected && '✓ '}
+                  {tag}
+                </button>
+              )
+            })}
+
+            {filteredTags.length === 0 && (
+              <p className="py-4 text-sm text-olive">Ingen tags funnet. Prøv et annet søkeord.</p>
+            )}
+          </div>
+        </div>
+
+        {/* BUNN */}
+        <div className="flex shrink-0 items-center justify-between gap-3 border-t border-peach pt-4">
+          <div>
+            <p className="text-sm font-semibold text-olive">
+              {selectedTags.length} / {MAX_TAGS} valgt
+            </p>
+            {isFull && <p className="mt-1 text-xs text-olive">Fjern en tag for å velge en annen.</p>}
+          </div>
+
+          <button
+            type="button"
+            onClick={onClose}
+            className="cursor-pointer rounded-medium bg-primary px-5 py-2 text-sm font-semibold text-white hover:opacity-90"
+          >
+            Ferdig
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/client/src/components/new-recipe/parseIngredients.ts b/client/src/components/new-recipe/parseIngredients.ts
new file mode 100644
index 0000000..16186c6
--- /dev/null
+++ b/client/src/components/new-recipe/parseIngredients.ts
@@ -0,0 +1,51 @@
+// Gjør en innlimt ingrediensliste om til redigerbare rader.
+// Ukjente enheter blir stående som del av navnet, slik at ingenting forsvinner.
+export type ParsedIngredient = {
+  id: number
+  name: string
+  amount: string
+  unit: string
+}
+
+const UNIT_ALIASES: Record<string, string> = {
+  g: 'g', gram: 'g', kg: 'kg', mg: 'mg',
+  ml: 'ml', cl: 'cl', dl: 'dl', l: 'l', liter: 'l',
+  ts: 'ts', teskje: 'ts', teskjeer: 'ts',
+  ss: 'ss', spiseskje: 'ss', spiseskjeer: 'ss',
+  stk: 'stk', stykk: 'stk', stykker: 'stk',
+  oz: 'oz', lb: 'lb', tsp: 'tsp', tbsp: 'tbsp', cup: 'cup', cups: 'cup',
+  'fl oz': 'fl oz',
+}
+
+function readAmount(value: string): string {
+  const cleaned = value.replace(',', '.')
+  if (cleaned.includes('/')) {
+    const [numerator, denominator] = cleaned.split('/').map(Number)
+    return denominator ? String(numerator / denominator) : ''
+  }
+  return cleaned
+}
+
+export function parseIngredients(text: string): ParsedIngredient[] {
+  const baseId = Date.now()
+  return text.split(/\r?\n/).map((line) => line.trim())
+    .filter(Boolean)
+    .map((line, index) => {
+      const cleaned = line.replace(/^[-•*]\s*/, '').trim()
+      // Eksempler: "200 g mel", "0,5 dl melk", "1/2 ts salt", "2 egg"
+      const match = cleaned.match(/^(\d+(?:[.,]\d+)?|\d+\/\d+)\s*(.*)$/)
+      if (!match) return { id: baseId + index, name: cleaned, amount: '', unit: 'stk' }
+
+      const amount = readAmount(match[1])
+      const rest = match[2].trim()
+      const unitMatch = rest.match(/^(fl\s+oz|[^\s]+)\s*(.*)$/i)
+      const rawUnit = unitMatch?.[1]?.toLowerCase() ?? ''
+      const unit = UNIT_ALIASES[rawUnit]
+      return {
+        id: baseId + index,
+        name: unit ? (unitMatch?.[2] ?? '').trim() : rest,
+        amount,
+        unit: unit ?? 'stk',
+      }
+    })
+}
diff --git a/client/src/components/ui/IconButton.tsx b/client/src/components/ui/IconButton.tsx
new file mode 100644
index 0000000..0eca989
--- /dev/null
+++ b/client/src/components/ui/IconButton.tsx
@@ -0,0 +1,31 @@
+
+import type { ButtonHTMLAttributes, ReactNode } from 'react'
+
+// Props som IconButton kan motta
+type IconButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+  label: string
+  children: ReactNode
+}
+
+// CSS som alle ikonknapper skal bruke
+const baseStyles =
+  'flex cursor-pointer items-center justify-center rounded-small p-1 text-primary hover:bg-pink-light focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary'
+
+export function IconButton({
+  label,
+  children,
+  className = '',
+  type = 'button',
+  ...props
+}: IconButtonProps) {
+  return (
+    <button
+      type={type}
+      aria-label={label}
+      className={`${baseStyles} ${className}`}
+      {...props}
+    >
+      {children}
+    </button>
+  )
+}
diff --git a/client/src/components/ui/ImageUpload.tsx b/client/src/components/ui/ImageUpload.tsx
new file mode 100644
index 0000000..02614fe
--- /dev/null
+++ b/client/src/components/ui/ImageUpload.tsx
@@ -0,0 +1,96 @@
+
+import { useEffect, useState } from 'react'
+import type { ChangeEvent } from 'react'
+
+type ImageUploadProps = {
+  value: File | null
+  onChange: (file: File | null) => void
+}
+
+export function ImageUpload({ value, onChange }: ImageUploadProps) {
+  const [preview, setPreview] = useState<string | null>(null)
+  const [error, setError] = useState('')
+
+  useEffect(() => {
+    if (!value) {
+      setPreview(null)
+      return
+    }
+
+    const url = URL.createObjectURL(value)
+    setPreview(url)
+
+    return () => URL.revokeObjectURL(url)
+  }, [value])
+
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0]
+    if (!file) return
+
+    if (!['image/jpeg', 'image/png', 'image/webp'].includes(file.type)) {
+      setError('Velg et PNG-, JPG- eller WebP-bilde.')
+      event.target.value = ''
+      return
+    }
+
+    if (file.size > 5 * 1024 * 1024) {
+      setError('Bildet kan ikke være større enn 5 MB.')
+      event.target.value = ''
+      return
+    }
+
+    setError('')
+    onChange(file)
+    event.target.value = ''
+  }
+
+  return (
+    <div>
+      <label
+        htmlFor="recipe-image"
+        className="upload-button flex cursor-pointer flex-col items-center justify-center overflow-hidden"
+      >
+        {preview ? (
+          <img
+            src={preview}
+            alt="Forhåndsvisning av oppskriftsbildet"
+            className="h-full w-full object-cover"
+          />
+        ) : (
+          <>
+            <span className="text-sm font-semibold text-primary">
+              Last opp bilde
+            </span>
+            <span className="mt-1 text-xs text-olive">
+              PNG, JPG eller WebP (maks 5 MB)
+            </span>
+          </>
+        )}
+      </label>
+
+      <input
+        id="recipe-image"
+        type="file"
+        accept="image/png,image/jpeg,image/webp"
+        className="sr-only"
+        onChange={handleChange}
+      />
+
+      {value && (
+        <button
+          type="button"
+          className="mt-2 text-sm text-primary underline"
+          onClick={() => onChange(null)}
+        >
+          Fjern bilde
+        </button>
+      )}
+
+      {error && (
+        <p role="alert" className="mt-2 text-sm text-primary">
+          {error}
+        </p>
+      )}
+    </div>
+  )
+}
diff --git a/client/src/lib/tags.ts b/client/src/lib/tags.ts
new file mode 100644
index 0000000..b49b8e0
--- /dev/null
+++ b/client/src/lib/tags.ts
@@ -0,0 +1,27 @@
+// Maks antall tags en oppskrift kan ha
+export const MAX_TAGS = 6
+
+// Alle tags, fordelt på kategorier
+export const tagGroups: Record<string, string[]> = {
+  Kosthold: [
+    'Vegetar', 'Vegansk', 'Pescetar', 'Glutenfri', 'Laktosefri',
+    'Melkefri', 'Eggfri', 'Nøttefri', 'Soyafri', 'Uten tilsatt sukker',
+    'Lavkarbo', 'Keto', 'Paleo', 'Halal', 'Kosher',
+  ],
+  'Tid og tilberedning': [
+    'Under 15 min', 'Under 30 min', 'Under 60 min', 'Én gryte', 'Airfryer', 'Ovnsbakt',
+    'Ingen steking', 'Ingen koking', 'Meal prep', 'Frysevennlig', 'Grilling', 'Slow cooker',
+  ],
+  Matpreferanser: [
+    'Sterk mat', 'Mild', 'Proteinrik', 'Fiberrik', 'Grønnsaksrik', 'Sukkerfri',
+    'Søt', 'Salt', 'Syrlig', 'Sprø', 'Kremet', 'Comfort food',
+  ],
+  Anledning: [
+    'Studentvennlig', 'Budsjettvennlig', 'Barnevennlig', 'Festmat', 'Hverdagsmat', 'Helgekos',
+    'Matpakke', 'Selskap', 'Date night', 'Sommermat', 'Vintermat', 'Turmat',
+  ],
+  Matkultur: [
+    'Italiensk', 'Meksikansk', 'Indisk', 'Japansk', 'Koreansk', 'Thai',
+    'Kinesisk', 'Gresk', 'Fransk', 'Spansk', 'Middelhavsmat', 'Nordisk',
+  ],
+}
\ No newline at end of file
diff --git a/client/src/routes/NewRecipePage.tsx b/client/src/routes/NewRecipePage.tsx
index 43c2913..94305f6 100644
--- a/client/src/routes/NewRecipePage.tsx
+++ b/client/src/routes/NewRecipePage.tsx
@@ -1,8 +1,9 @@
-
+//For at frontend og backend kobler seg 
 import { useState } from 'react'
 import { useMutation } from '@apollo/client/react'
 import { CREATE_RECIPE } from '../graphql/mutations'
 
+//Daten fra steps dukker opp her
 import RecipeStep1 from '../components/new-recipe/RecipeStep1'
 import RecipeStep2 from '../components/new-recipe/RecipeStep2'
 import RecipeStep3 from '../components/new-recipe/RecipeStep3'
@@ -30,6 +31,7 @@ export type RecipeFormData = {
   videoUrl: string
   prepTime: number
   servings: number
+  imageFile: File | null
   category: string
   tags: string[]
   rating: number | null
@@ -61,6 +63,7 @@ export default function NewRecipePage({
     title: '',
     description: '',
     videoUrl: '',
+    imageFile: null,
     prepTime: 30,
     servings: 4,
     category: 'Middag',
diff --git a/package.json b/package.json
index d553903..3972818 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "server"
   ],
   "devDependencies": {
+    "@types/multer": "^2.3.0",
     "prettier": "^3.9.9"
   },
   "dependencies": {
@@ -22,7 +23,8 @@
     "@emotion/styled": "^11.14.1",
     "@mui/icons-material": "^9.4.0",
     "@mui/material": "^9.4.0",
-    "@prisma/client": "^6.19.3"
+    "@prisma/client": "^6.19.3",
+    "multer": "^2.4.0"
   },
   "allowScripts": {
     "@prisma/client@6.19.3": true,
diff --git a/server/src/index.ts b/server/src/index.ts
index ad8a4ff..0ed4268 100644
--- a/server/src/index.ts
+++ b/server/src/index.ts
@@ -1,22 +1,49 @@
-import 'dotenv/config';
-import express from 'express';
-import cors from 'cors';
-import { ApolloServer } from '@apollo/server';
-import { expressMiddleware } from '@as-integrations/express5';
-import { readFileSync } from 'fs';
-import { join } from 'path';
-import { recipeResolvers } from './schema/resolvers/recipe';
+import 'dotenv/config'
+import express from 'express'
+import cors from 'cors'
+import { ApolloServer } from '@apollo/server'
+import { expressMiddleware } from '@as-integrations/express5'
+import { readFileSync } from 'fs'
+import { join } from 'path'
+import { recipeResolvers } from './schema/resolvers/recipe'
+import uploadRouter from './routes/upload'
 
-const typeDefs = readFileSync(join(__dirname, 'schema/typeDefs/recipe.graphql'), 'utf-8');
+const typeDefs = readFileSync(
+  join(__dirname, 'schema/typeDefs/recipe.graphql'),
+  'utf-8',
+)
 
 async function start() {
-  const app = express();
-  const server = new ApolloServer({ typeDefs, resolvers: recipeResolvers });
-  await server.start();
+  const app = express()
 
-  app.use('/graphql', cors(), express.json(), expressMiddleware(server));
+  const server = new ApolloServer({
+    typeDefs,
+    resolvers: recipeResolvers,
+  })
 
-  app.listen(3001, () => console.log('Server kjører på http://localhost:3001/graphql'));
+  await server.start()
+
+  // Gjør opplastede bilder tilgjengelige via URL
+  app.use(
+    '/uploads',
+    cors(),
+    express.static(join(process.cwd(), 'uploads')),
+  )
+
+  // Endepunkt for bildeopplasting
+  app.use('/upload', cors(), uploadRouter)
+
+  // Eksisterende GraphQL-endepunkt
+  app.use(
+    '/graphql',
+    cors(),
+    express.json(),
+    expressMiddleware(server),
+  )
+
+  app.listen(3001, () => {
+    console.log('Server kjører på http://localhost:3001/graphql')
+  })
 }
 
-start();
\ No newline at end of file
+start()
diff --git a/server/src/routes/upload.ts b/server/src/routes/upload.ts
new file mode 100644
index 0000000..fa3fa30
--- /dev/null
+++ b/server/src/routes/upload.ts
@@ -0,0 +1,63 @@
+
+import { Router } from 'express'
+import multer from 'multer'
+import { mkdirSync } from 'fs'
+import { join, extname } from 'path'
+import { randomUUID } from 'crypto'
+
+const router = Router()
+
+// Lager uploads-mappen hvis den ikke finnes
+const uploadDirectory = join(process.cwd(), 'uploads')
+mkdirSync(uploadDirectory, { recursive: true })
+
+// Bestemmer hvor og hvordan bildene lagres
+const storage = multer.diskStorage({
+  destination: (_req, _file, callback) => {
+    callback(null, uploadDirectory)
+  },
+  filename: (_req, file, callback) => {
+    const extension = extname(file.originalname).toLowerCase()
+    callback(null, `${randomUUID()}${extension}`)
+  },
+})
+
+const upload = multer({
+  storage,
+  limits: {
+    fileSize: 5 * 1024 * 1024,
+  },
+  fileFilter: (_req, file, callback) => {
+    const allowedTypes = [
+      'image/jpeg',
+      'image/png',
+      'image/webp',
+    ]
+
+    const allowedExtensions = ['.jpg', '.jpeg', '.png', '.webp']
+    const extension = extname(file.originalname).toLowerCase()
+
+    if (
+      allowedTypes.includes(file.mimetype) &&
+      allowedExtensions.includes(extension)
+    ) {
+      callback(null, true)
+    } else {
+      callback(new Error('Kun JPG, PNG og WebP er tillatt'))
+    }
+  },
+})
+
+// Tar imot ett bilde fra frontend
+router.post('/', upload.single('image'), (req, res) => {
+  if (!req.file) {
+    res.status(400).json({ error: 'Ingen bildefil mottatt' })
+    return
+  }
+
+  res.json({
+    imageUrl: `/uploads/${req.file.filename}`,
+  })
+})
+
+export default router