diff --git a/client/src/components/new-recipe/RecipeStep1.tsx b/client/src/components/new-recipe/RecipeStep1.tsx
index 8ce566c..9303f23 100644
--- a/client/src/components/new-recipe/RecipeStep1.tsx
+++ b/client/src/components/new-recipe/RecipeStep1.tsx
@@ -1,6 +1,5 @@
-
-import { useState } from 'react'
-import type { Dispatch, SetStateAction } from 'react'
+import { useEffect, useState } from 'react'
+import type { ChangeEvent, Dispatch, SetStateAction } from 'react'
 import Rating from '@mui/material/Rating'
 
 import { Button } from '../ui/Button'
@@ -11,7 +10,6 @@ import TagDialog from './TagDialog'
 
 import type { RecipeFormData } from '../../routes/NewRecipePage'
 
-// Sånn at informasjonen blir lagret mellom stegene
 type RecipeStep1Props = {
   data: RecipeFormData
   setData: Dispatch<SetStateAction<RecipeFormData>>
@@ -19,75 +17,47 @@ type RecipeStep1Props = {
 }
 
 const MAX_TAGS = 6
+const categories = ['Frokost', 'Lunsj', 'Middag', 'Dessert', 'Snacks', 'Drikke']
 
-const categories = [
-  'Frokost',
-  'Lunsj',
-  'Middag',
-  'Dessert',
-  'Snacks',
-  'Drikke',
-]
+export default function RecipeStep1({ data, setData, onNext }: RecipeStep1Props) {
+  const [tagDialogOpen, setTagDialogOpen] = useState(false)
+  const [sourceOpen, setSourceOpen] = useState(false)
+  const [imagePreview, setImagePreview] = useState<string | null>(null)
 
-const dietaryTags = [
-  'Vegetar',
-  'Vegansk',
-  'Pescetar',
-  'Glutenfri',
-  'Laktosefri',
-  'Under 30 min',
-]
+  useEffect(() => {
+    if (!data.imageFile) {
+      setImagePreview(null)
+      return
+    }
 
-export default function RecipeStep1({
-  data,
-  setData,
-  onNext,
-}: RecipeStep1Props) {
-  const [tagDialogOpen, setTagDialogOpen] = useState(false)
+    const objectUrl = URL.createObjectURL(data.imageFile)
+    setImagePreview(objectUrl)
+    return () => URL.revokeObjectURL(objectUrl)
+  }, [data.imageFile])
 
-  // Oppdaterer ett felt i oppskriften og beholder resten
   const update = <K extends keyof RecipeFormData>(
     key: K,
     value: RecipeFormData[K],
   ) => {
-    setData((prev) => ({
-      ...prev,
-      [key]: value,
-    }))
+    setData((prev) => ({ ...prev, [key]: value }))
   }
 
-  // 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])
-    }
+    setData((prev) => {
+      const tags = prev.tags.includes(tag)
+        ? prev.tags.filter((item) => item !== tag)
+        : prev.tags.length < MAX_TAGS
+          ? [...prev.tags, tag]
+          : prev.tags
+      return { ...prev, tags }
+    })
   }
 
-  // Tags som er valgt fra dialogen
-  const extraTags = data.tags.filter(
-    (tag) => !dietaryTags.includes(tag),
-  )
-
-  // Når brukeren velger et bilde
-  const handleImageChange = (
-    event: React.ChangeEvent<HTMLInputElement>,
-  ) => {
+  const handleImageChange = (event: ChangeEvent<HTMLInputElement>) => {
     const file = event.target.files?.[0]
-
     if (!file) return
 
-    const allowedTypes = [
-      'image/jpeg',
-      'image/png',
-      'image/webp',
-    ]
-
-    if (!allowedTypes.includes(file.type)) {
+    if (!['image/jpeg', 'image/png', 'image/webp'].includes(file.type)) {
       alert('Du kan bare laste opp JPG, PNG eller WebP.')
       event.target.value = ''
       return
@@ -100,31 +70,53 @@ export default function RecipeStep1({
     }
 
     update('imageFile', file)
+    event.target.value = ''
   }
 
   return (
-    <div className="w-full">
-      <p className="mb-3 text-sm text-olive">
+    <div className="flex min-h-[500px] w-full flex-col">
+      <p className="mb-2 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">
-          {/* BILDEOPPLASTING */}
+      <div className="grid flex-1 gap-4 md:grid-cols-2">
+        {/* VENSTRE: BILDE, TID, PORSJONER, VURDERING OG KILDE */}
+        <div className="space-y-3">
           <Field label="Bilde">
-            <div className="space-y-2">
-              <label className="upload-button flex cursor-pointer flex-col items-center justify-center">
+            {data.imageFile && imagePreview ? (
+              <div className="relative overflow-hidden rounded-medium border border-peach">
+                <img
+                  src={imagePreview}
+                  alt="Forhåndsvisning av oppskriftsbilde"
+                  className="h-60 w-full object-cover"
+                />
+                <div className="absolute right-2 top-2 flex flex-wrap justify-end gap-2">
+                  <label className="cursor-pointer rounded-full bg-background px-3 py-1.5 text-xs font-semibold text-primary shadow-sm">
+                    Bytt bilde
+                    <input
+                      type="file"
+                      accept="image/jpeg,image/png,image/webp"
+                      onChange={handleImageChange}
+                      className="sr-only"
+                    />
+                  </label>
+                  <button
+                    type="button"
+                    onClick={() => update('imageFile', null)}
+                    className="cursor-pointer rounded-full bg-background px-3 py-1.5 text-xs font-semibold text-primary shadow-sm"
+                  >
+                    Fjern bilde ×
+                  </button>
+                </div>
+              </div>
+            ) : (
+              <label className="upload-button flex !h-60 !min-h-0 cursor-pointer flex-col items-center justify-center">
                 <span className="text-sm font-semibold text-primary">
-                  {data.imageFile
-                    ? 'Bytt bilde'
-                    : 'Last opp bilde'}
+                  + Last opp bilde
                 </span>
-
                 <span className="mt-1 text-xs text-olive">
                   PNG, JPG eller WebP (maks 5 MB)
                 </span>
-
                 <input
                   type="file"
                   accept="image/jpeg,image/png,image/webp"
@@ -132,117 +124,21 @@ export default function RecipeStep1({
                   className="sr-only"
                 />
               </label>
-
-              {/* Viser valgt bilde */}
-              {data.imageFile && (
-                <div className="relative overflow-hidden rounded-medium border border-peach">
-                  <img
-                    src={URL.createObjectURL(data.imageFile)}
-                    alt="Forhåndsvisning av oppskriftsbilde"
-                    className="h-40 w-full object-cover"
-                  />
-
-                  <button
-                    type="button"
-                    onClick={() => update('imageFile', null)}
-                    className="absolute right-2 top-2 cursor-pointer rounded-full bg-background px-3 py-1 text-xs font-semibold text-primary shadow-sm"
-                  >
-                    Fjern bilde ×
-                  </button>
-                </div>
-              )}
-            </div>
-          </Field>
-
-          {/* BESKRIVELSE */}
-          <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)
-              }
-            />
-          </Field>
-
-          {/* VURDERING */}
-          <Field label="Vurdering" required>
-            <Rating
-              name="recipe-rating"
-              value={data.rating}
-              precision={1}
-              sx={{ color: '#9A2A47' }}
-              onChange={(_, value) =>
-                update('rating', value)
-              }
-            />
-          </Field>
-
-          {/* VIDEO */}
-          <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)
-              }
-            />
-          </Field>
-        </div>
-
-        {/* HØYRE SIDE */}
-        <div className="space-y-3">
-          {/* OPPSKRIFTSTITTEL */}
-          <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)
-              }
-            />
+            )}
           </Field>
 
-          {/* TID OG PORSJONER */}
-          <div className="grid grid-cols-2 gap-4">
-            <Field
-              label="Tilberedningstid"
-              htmlFor="prep-time"
-              required
-            >
+          <div className="grid grid-cols-2 gap-3">
+            <Field label="Tilberedningstid" htmlFor="prep-time" required>
               <div className="flex items-center gap-2">
                 <Input
                   id="prep-time"
                   type="number"
                   min={1}
+                  placeholder="F.eks. 30"
                   value={data.prepTime}
-                  onChange={(e) =>
-                    update(
-                      'prepTime',
-                      Number(e.target.value),
-                    )
-                  }
+                  onChange={(event) => update('prepTime', Number(event.target.value))}
                 />
-
-                <span className="text-sm text-olive">
-                  min
-                </span>
+                <span className="text-sm text-olive">min</span>
               </div>
             </Field>
 
@@ -252,30 +148,16 @@ export default function RecipeStep1({
                   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>
@@ -283,16 +165,56 @@ export default function RecipeStep1({
             </Field>
           </div>
 
-          {/* KATEGORI */}
+          {/* VURDERING OG KILDE PÅ SAMME RAD */}
+          <div className="flex flex-wrap items-end justify-start gap-5">
+            <Field label="Vurdering" required>
+              <Rating
+                name="recipe-rating"
+                value={data.rating}
+                precision={1}
+                size="medium"
+                sx={{ color: '#9A2A47' }}
+                onChange={(_, value) => update('rating', value)}
+              />
+            </Field>
+            <button
+              type="button"
+              onClick={() => setSourceOpen(true)}
+              className="cursor-pointer rounded-full border border-peach px-3 py-1.5 text-sm font-semibold text-primary transition-colors hover:bg-peach/20"
+            >
+              {data.sourceAuthor || data.sourceUrl ? '✓ Rediger kilde' : '+ Legg til kilde'}
+            </button>
+          </div>
+        </div>
+
+        {/* HØYRE: NAVN, BESKRIVELSE, KATEGORI OG TAGS */}
+        <div className="space-y-3">
+          <Field label="Navn på oppskrift" htmlFor="recipe-title" required>
+            <Input
+              id="recipe-title"
+              placeholder="F.eks. kremet pasta med sopp"
+              value={data.title}
+              onChange={(event) => update('title', event.target.value)}
+            />
+          </Field>
+
+          <Field label="Kort beskrivelse" htmlFor="description" required>
+            <Textarea
+              id="description"
+              rows={2}
+              placeholder="Skriv noen setninger om oppskriften..."
+              value={data.description}
+              onChange={(event) => update('description', event.target.value)}
+            />
+          </Field>
+
           <Field label="Kategori" required>
             <div className="flex flex-wrap gap-2">
               {categories.map((category) => (
                 <Tag
                   key={category}
                   selected={data.category === category}
-                  onClick={() =>
-                    update('category', category)
-                  }
+                  onClick={() => update('category', category)}
                 >
                   {category}
                 </Tag>
@@ -300,82 +222,100 @@ export default function RecipeStep1({
             </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}
+          <Field label="Kosthold og tags">
+            <div className="space-y-2">
+              <div className="flex items-center gap-3">
+                <Tag selected={false} onClick={() => setTagDialogOpen(true)}>
+                  + Tags
                 </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>
-                ))}
+                <span className="text-xs text-olive">
+                  {data.tags.length} av {MAX_TAGS} valgt
+                </span>
               </div>
-            )}
-
-            {/* Antall valgte tags */}
-            <p className="mt-2 text-xs text-olive">
-              {data.tags.length} av {MAX_TAGS} tags valgt
-            </p>
+              {data.tags.length > 0 && (
+                <div className="flex flex-wrap gap-2" aria-label="Valgte tags">
+                  {data.tags.map((tag) => (
+                    <Tag key={tag} selected onClick={() => toggleTag(tag)}>
+                      {tag} ×
+                    </Tag>
+                  ))}
+                </div>
+              )}
+            </div>
           </Field>
         </div>
       </div>
 
-      {/* KNAPPER */}
-      <div className="mt-3 flex items-center justify-end gap-5 border-t border-peach pt-3">
-        <Button
-          variant="ghost"
-          size="small"
-        >
-          Lagre utkast
-        </Button>
-
-        <Button
-          variant="primary"
-          size="small"
-          onClick={onNext}
-        >
+      <div className="mt-auto flex items-center justify-end gap-5 border-t border-peach pt-3">
+        <Button variant="ghost" size="small">Lagre utkast</Button>
+        <Button variant="primary" size="small" onClick={onNext}>
           Neste: Ingredienser
         </Button>
       </div>
 
-      {/* DIALOG MED FLERE TAGS */}
+      {/* EGEN DIALOG FOR KILDE, SLIK SOM TAGS */}
+      {sourceOpen && (
+        <div
+          className="fixed inset-0 z-[100] flex items-center justify-center bg-black/40 p-4"
+          onMouseDown={(event) => {
+            if (event.target === event.currentTarget) setSourceOpen(false)
+          }}
+        >
+          <div
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby="source-dialog-title"
+            className="w-full max-w-md space-y-4 rounded-2xl border border-peach bg-background p-5 shadow-xl sm:p-6"
+          >
+            <div className="flex items-start justify-between gap-3">
+              <div>
+                <h2 id="source-dialog-title" className="text-lg font-semibold text-primary">
+                  Legg til kilde
+                </h2>
+                <p className="mt-1 text-sm text-olive">
+                  Krediter den opprinnelige oppskriften (valgfritt).
+                </p>
+              </div>
+              <button
+                type="button"
+                onClick={() => setSourceOpen(false)}
+                aria-label="Lukk kildedialog"
+                className="cursor-pointer text-xl text-primary"
+              >
+                ×
+              </button>
+            </div>
+            <Field label="Forfatter eller nettside" htmlFor="source-author">
+              <Input
+                id="source-author"
+                placeholder="F.eks. Matprat eller @brukernavn"
+                value={data.sourceAuthor}
+                onChange={(event) => update('sourceAuthor', event.target.value)}
+              />
+            </Field>
+            <Field label="Lenke til originaloppskriften" htmlFor="source-url">
+              <Input
+                id="source-url"
+                type="url"
+                placeholder="https://..."
+                value={data.sourceUrl}
+                onChange={(event) => update('sourceUrl', event.target.value)}
+              />
+            </Field>
+            <div className="flex justify-end gap-3 border-t border-peach pt-3">
+              <Button variant="primary" size="small" onClick={() => setSourceOpen(false)}>
+                Ferdig
+              </Button>
+            </div>
+          </div>
+        </div>
+      )}
+
       <TagDialog
         open={tagDialogOpen}
         selectedTags={data.tags}
-        onChange={(tags) =>
-          update('tags', tags)
-        }
-        onClose={() =>
-          setTagDialogOpen(false)
-        }
+        onChange={(tags) => update('tags', tags)}
+        onClose={() => setTagDialogOpen(false)}
       />
     </div>
   )
diff --git a/client/src/components/new-recipe/RecipeStep4.tsx b/client/src/components/new-recipe/RecipeStep4.tsx
index fca0e2d..b0cf0eb 100644
--- a/client/src/components/new-recipe/RecipeStep4.tsx
+++ b/client/src/components/new-recipe/RecipeStep4.tsx
@@ -1,14 +1,14 @@
-
 import { useEffect, useState } from 'react'
 import type { Dispatch, ReactNode, SetStateAction } from 'react'
+import { formatPrepTime } from '../../utils/formatPrepTime'
 import Rating from '@mui/material/Rating'
-import type { RecipeFormData } from '../../routes/NewRecipePage'
-import { Button } from '../ui/Button'
 import ArrowBackIcon from '@mui/icons-material/ArrowBack'
 import AccessTimeIcon from '@mui/icons-material/AccessTime'
 import CheckIcon from '@mui/icons-material/Check'
 import NorthEastIcon from '@mui/icons-material/NorthEast'
 import RestaurantIcon from '@mui/icons-material/Restaurant'
+import type { RecipeFormData } from '../../routes/NewRecipePage'
+import { Button } from '../ui/Button'
 
 type RecipeStep4Props = {
   data: RecipeFormData
@@ -16,17 +16,9 @@ type RecipeStep4Props = {
   onPublish: () => void
 }
 
-// Felles utseende for de fire boksene
 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}
@@ -34,293 +26,168 @@ function Pill({
   )
 }
 
-// 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],
-  )
+) => setter((prev) => prev.includes(id) ? prev.filter((item) => item !== id) : [...prev, id])
+
 
-export default function RecipeStep4({
-  data,
-  onBack,
-  onPublish,
-}: RecipeStep4Props) {
-  // Kun for forhåndsvisningen
+
+function safeHttpUrl(value: string): string | null {
+  try {
+    const url = new URL(value)
+    return url.protocol === 'https:' || url.protocol === 'http:' ? url.href : null
+  } catch {
+    return null
+  }
+}
+
+export default function RecipeStep4({ data, onBack, onPublish }: RecipeStep4Props) {
   const [servings, setServings] = useState(data.servings)
   const [checkedIngredients, setCheckedIngredients] = useState<number[]>([])
   const [doneSteps, setDoneSteps] = useState<number[]>([])
-
-  // 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
+  const isUnder30Minutes = data.prepTime > 0 && data.prepTime <= 30
+  const sourceUrl = safeHttpUrl(data.sourceUrl.trim())
 
-    return String(
-      Math.round(((value * servings) / data.servings) * 10) / 10,
-    )
+  // Porsjonsendringer gjelder bare forhåndsvisningen, ikke den publiserte oppskriften.
+  const scale = (amount: string) => {
+    const value = Number(amount.replace(',', '.'))
+    if (!amount.trim() || !Number.isFinite(value) || data.servings <= 0) return amount
+    return String(Math.round((value * servings / data.servings) * 10) / 10).replace('.', ',')
   }
 
   const ingredients = data.ingredients.filter((item) => item.name.trim())
-
-  // Gjør begge måter å skrive fremgangsmåte på om til samme liste
-  const instructions =
-    data.instructionMode === 'steps'
-      ? data.steps
-          .filter((step) => step.text.trim())
-          .map((step) => ({
-            id: step.id,
-            text: step.text,
-            minutes: step.minutes,
-          }))
-      : data.instructionText
-          .split('\n')
-          .map((line) => line.replace(/^\s*\d+[.)]\s*/, '').trim())
-          .filter(Boolean)
-          .map((text, index) => ({
-            id: index,
-            text,
-            minutes: '',
-          }))
+  const instructions = data.instructionMode === 'steps'
+    ? data.steps.filter((step) => step.text.trim()).map((step) => ({
+        id: step.id,
+        text: step.text,
+        minutes: step.minutes,
+      }))
+    : data.instructionText.split('\n')
+        .map((line) => line.replace(/^\s*\d+[.)]\s*/, '').trim())
+        .filter(Boolean)
+        .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>
+                <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>
+              {isUnder30Minutes && (
+                <Pill className="border border-peach text-text">Under 30 min</Pill>
               )}
             </div>
-
-            {data.rating ? (
+            {data.rating != null && (
               <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>
+
+          {(data.sourceAuthor.trim() || data.sourceUrl.trim()) && (
+            <div className="mt-3 text-sm text-olive">
+              <span className="font-semibold">Kilde: </span>
+              {sourceUrl ? (
+                <a href={sourceUrl} target="_blank" rel="noopener noreferrer"
+                   className="font-semibold text-primary hover:underline">
+                  {data.sourceAuthor.trim() || 'Se originaloppskrift'}
+                  <NorthEastIcon sx={{ fontSize: 14, ml: 0.5 }} />
+                </a>
+              ) : (
+                <span>{data.sourceAuthor.trim() || 'Ugyldig lenke'}</span>
+              )}
+            </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>
-
-          <div className="mt-4 flex items-center justify-between text-sm">
-            <span className="flex items-center gap-2 font-semibold">
-              <AccessTimeIcon fontSize="small" />
-              {data.prepTime} min · {data.servings} porsjoner
-            </span>
-
-            {data.videoUrl && (
-              <a
-                href={data.videoUrl}
-                target="_blank"
-                rel="noreferrer"
-                className="flex items-center gap-1 font-semibold text-primary hover:underline"
-              >
-                Se video
-                <NorthEastIcon sx={{ fontSize: 14 }} />
-              </a>
-            )}
+          <div className="mt-4 flex items-center gap-2 text-sm font-semibold">
+            <AccessTimeIcon fontSize="small" />
+            <span>{formatPrepTime(data.prepTime)} · {data.servings} porsjoner</span>
           </div>
         </section>
 
         {/* BILDE */}
         <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"
-            />
+            <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>
+              <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>
-
+          <div className="flex items-center justify-between gap-3">
+            <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))
-                }
-              >
-                −
-              </button>
-
-              <span className="min-w-4 text-center font-semibold">
-                {servings}
-              </span>
-
-              <button
-                type="button"
-                aria-label="Øk antall porsjoner"
-                className="stepper-button"
-                onClick={() => setServings((value) => value + 1)}
-              >
-                +
-              </button>
+              <button type="button" aria-label="Reduser antall porsjoner" className="stepper-button"
+                      onClick={() => setServings((value) => Math.max(1, value - 1))}>−</button>
+              <span className="min-w-4 text-center font-semibold">{servings}</span>
+              <button type="button" aria-label="Øk antall porsjoner" className="stepper-button"
+                      onClick={() => setServings((value) => value + 1)}>+</button>
             </div>
           </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">
-                  <input
-                    type="checkbox"
-                    className="accent-primary"
-                    checked={checkedIngredients.includes(item.id)}
-                    onChange={() =>
-                      toggleId(setCheckedIngredients, item.id)
-                    }
-                  />
-
-                  <span
-                    className={
-                      checkedIngredients.includes(item.id)
-                        ? 'text-olive line-through'
-                        : ''
-                    }
-                  >
-                    {item.amount &&
-                      `${scale(item.amount)} ${item.unit} `}
-                    {item.name}
+                  <input type="checkbox" className="accent-primary"
+                         checked={checkedIngredients.includes(item.id)}
+                         onChange={() => toggleId(setCheckedIngredients, item.id)} />
+                  <span className={checkedIngredients.includes(item.id) ? 'text-olive line-through' : ''}>
+                    {item.amount && `${scale(item.amount)} ${item.unit} `}{item.name}
                   </span>
                 </label>
               </li>
             ))}
           </ul>
-
-          {/* 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"
-            >
-              Legg til i handleliste +
-            </button>
-          </div>
         </section>
 
         {/* 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">
-                  <input
-                    type="checkbox"
-                    className="accent-primary"
-                    checked={doneSteps.includes(step.id)}
-                    onChange={() =>
-                      toggleId(setDoneSteps, step.id)
-                    }
-                  />
+                  <input type="checkbox" className="accent-primary"
+                         checked={doneSteps.includes(step.id)}
+                         onChange={() => toggleId(setDoneSteps, step.id)} />
                   Fullført
                 </label>
               </li>
@@ -329,31 +196,13 @@ export default function RecipeStep4({
         </section>
       </div>
 
-      {/* 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}
-        >
-          <ArrowBackIcon fontSize="small" />
-          Tilbake
+        <Button variant="ghost" size="small" onClick={onBack}>
+          <ArrowBackIcon fontSize="small" /> Tilbake
+        </Button>
+        <Button variant="primary" size="small" onClick={onPublish}>
+          Publiser oppskrift <CheckIcon fontSize="small" />
         </Button>
-
-        <div className="flex gap-3">
-          <Button variant="ghost" size="small">
-            Lagre utkast
-          </Button>
-
-          <Button
-            variant="primary"
-            size="small"
-            onClick={onPublish}
-          >
-            Publiser oppskrift
-            <CheckIcon fontSize="small" />
-          </Button>
-        </div>
       </div>
     </div>
   )
diff --git a/client/src/components/new-recipe/TagDialog.tsx b/client/src/components/new-recipe/TagDialog.tsx
index 5eab16f..983b8ce 100644
--- a/client/src/components/new-recipe/TagDialog.tsx
+++ b/client/src/components/new-recipe/TagDialog.tsx
@@ -11,11 +11,10 @@ type TagDialogProps = {
 }
 
 const allTags = Object.values(tagGroups).flat()
-const categories = ['Alle', ...Object.keys(tagGroups)]
+const categories = 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 ${
+const tagPill = (selected: boolean, disabled = false) =>
+  `rounded-full border px-3 py-1.5 text-sm font-semibold transition-colors ${
     selected
       ? 'cursor-pointer border-primary bg-primary text-white hover:opacity-90'
       : disabled
@@ -25,24 +24,26 @@ const pill = (selected: boolean, disabled = false) =>
 
 export default function TagDialog({ open, selectedTags, onChange, onClose }: TagDialogProps) {
   const [search, setSearch] = useState('')
-  const [category, setCategory] = useState('Alle')
-
+  const [category, setCategory] = useState<string>(categories[0] ?? '')
   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
+  // Hold tastaturfokus inne i dialogen og gjenopprett det ved lukking.
   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 === 'Escape') {
+        event.preventDefault()
+        onClose()
+        return
+      }
       if (event.key !== 'Tab') return
 
       const items = dialogRef.current?.querySelectorAll<HTMLElement>(
@@ -52,7 +53,6 @@ export default function TagDialog({ open, selectedTags, onChange, onClose }: Tag
 
       const first = items[0]
       const last = items[items.length - 1]
-
       if (event.shiftKey && document.activeElement === first) {
         event.preventDefault()
         last.focus()
@@ -63,7 +63,6 @@ export default function TagDialog({ open, selectedTags, onChange, onClose }: Tag
     }
 
     window.addEventListener('keydown', handleKeyDown)
-
     return () => {
       window.removeEventListener('keydown', handleKeyDown)
       document.body.style.overflow = previousOverflow
@@ -73,42 +72,46 @@ export default function TagDialog({ open, selectedTags, onChange, onClose }: Tag
 
   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()),
+  // Søk i alle tags, uavhengig av valgt kategori.
+  const query = search.trim().toLowerCase()
+  const categoryTags = tagGroups[category as keyof typeof tagGroups] ?? []
+  const filteredTags = (query ? allTags : categoryTags).filter((tag) =>
+    tag.toLowerCase().includes(query),
   )
-
   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])
+    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()}
+      onMouseDown={(event) => {
+        if (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"
+        className="flex h-[700px] 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 */}
+        {/* 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}.
+              Velg opptil {MAX_TAGS} tags som passer oppskriften din.
             </p>
           </div>
-
           <button
             ref={closeButtonRef}
             type="button"
@@ -120,7 +123,7 @@ export default function TagDialog({ open, selectedTags, onChange, onClose }: Tag
           </button>
         </div>
 
-        {/* SØKEFELT */}
+        {/* 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
@@ -133,82 +136,99 @@ export default function TagDialog({ open, selectedTags, onChange, onClose }: Tag
           />
         </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>
-          ))}
+        {/* Kategorifiltre */}
+        <div className="shrink-0">
+          <p className="mb-3 text-xs font-semibold uppercase text-olive">
+            Filtrer etter kategori
+          </p>
+          <div className="flex flex-wrap gap-2">
+            {categories.map((item) => (
+              <button
+                key={item}
+                type="button"
+                onClick={() => setCategory(item)}
+                aria-pressed={category === item}
+                className={`cursor-pointer rounded-medium border px-3 py-1.5 text-xs font-semibold transition-colors ${
+                  category === item
+                    ? 'border-primary bg-primary text-white hover:opacity-90'
+                    : 'border-peach text-text hover:bg-peach/30'
+                }`}
+              >
+                {item}
+              </button>
+            ))}
+          </div>
         </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) => (
+        {/* Alltid synlig. Fast høyde hindrer at resten av dialogen hopper. */}
+        <div className="shrink-0">
+          <div className="mb-2 flex items-center justify-between">
+            <span className="text-xs font-semibold uppercase text-olive">
+              Valgte tags
+            </span>
+            
+            <span className="text-xs font-semibold text-olive">
+              {selectedTags.length} / {MAX_TAGS} valgt
+            </span>
+          </div>
+          {isFull && (
+            <p className="mb-[4px] text-xs text-olive">
+              Fjern en tag for å velge en annen.
+            </p>
+          )}
+          <div className="custom-scrollbar flex h-[35px] flex-wrap content-start items-start gap-2 overflow-y-auto">
+            {selectedTags.length === 0 ? (
+              <span className="py-1 text-sm text-olive/70">Ingen tags valgt ennå</span>
+            ) : (
+              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`}
+                  className="cursor-pointer rounded-full border border-peach bg-peach/40 px-3 py-1.5 text-xs font-semibold text-text transition-colors hover:bg-peach/70"
                 >
                   {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>}
+        {/* Valgbare tags */}
+        <div className="flex min-h-0 flex-1 flex-col border-t border-peach pt-4">
+          <div className="mb-2 flex shrink-0 items-center justify-between">
+            <h3 className="text-sm font-semibold text-text">
+              {query ? 'Søkeresultater' : category}
+            </h3>
           </div>
+          <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={tagPill(selected, disabled)}
+                  >
+                    {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>
+        </div>
 
-          <button
-            type="button"
-            onClick={onClose}
+        {/* Bunn */}
+        <div className="flex shrink-0 items-center justify-between gap-3 border-t border-peach pt-4">
+          <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
diff --git a/client/src/components/ui/Tag.tsx b/client/src/components/ui/Tag.tsx
index ea259ab..400bcd6 100644
--- a/client/src/components/ui/Tag.tsx
+++ b/client/src/components/ui/Tag.tsx
@@ -1,5 +1,6 @@
 import type { ButtonHTMLAttributes, ReactNode } from 'react'
 
+// Props for Tag-komponenten
 type TagProps = ButtonHTMLAttributes<HTMLButtonElement> & {
   children: ReactNode
   selected?: boolean
@@ -7,24 +8,25 @@ type TagProps = ButtonHTMLAttributes<HTMLButtonElement> & {
 
 export function Tag({
   children,
-  selected = false,
-  className = '',
-  ...props
+  selected = false, // Ikke valgt som standard
+  className = '',   // Ekstra styling
+  ...props          // Andre button-attributter
 }: TagProps) {
   return (
     <button
       type="button"
-      aria-pressed={selected}
+      aria-pressed={selected} // Valgt-status for skjermleser
       className={`
         relative
         inline-flex items-center justify-center
-        min-w-[100px]
+        min-w-[80px]
         rounded-full
-        px-5 py-2
+        px-4 py-2
         font-body text-sm font-medium
         transition-colors cursor-pointer
 
         ${
+          // Styling for valgt / ikke valgt
           selected
             ? 'bg-primary text-background'
             : 'bg-background text-text border border-peach hover:bg-secondary'
@@ -41,15 +43,6 @@ export function Tag({
       `}
       {...props}
     >
-      {selected && (
-        <span
-          aria-hidden="true"
-          className="absolute left-3"
-        >
-          ✓
-        </span>
-      )}
-
       {children}
     </button>
   )
diff --git a/client/src/lib/tags.ts b/client/src/lib/tags.ts
index 3919cc7..7b8c35c 100644
--- a/client/src/lib/tags.ts
+++ b/client/src/lib/tags.ts
@@ -33,18 +33,18 @@ export const tagGroups: Record<string, string[]> = {
     'Røkt', 'Frisk', 'Mettende', 'Lett', 'Saftig', 'Umami',
   ],
   Matkultur: [
-    'Norsk', 'Nordisk', 'Italiensk', 'Meksikansk', 'Tex-Mex', 'Amerikansk',
+    'Norsk', 'Nordisk', 'Italiensk', 'Meksikansk', 'Amerikansk',
     'Indisk', 'Japansk', 'Koreansk', 'Thai', 'Kinesisk', 'Vietnamesisk',
     'Gresk', 'Fransk', 'Spansk', 'Tyrkisk', 'Libanesisk', 'Marokkansk',
     'Middelhavsmat',
   ],
   Anledning: [
     'Studentvennlig', 'Budsjettvennlig', 'Barnevennlig', 'Festmat', 'Hverdagsmat', 'Helgekos',
-    'Fredagskos', 'Matpakke', 'Selskap', 'Gjester', 'Date night', 'Bursdag',
+    'Matpakke', 'Selskap','Date night', 'Bursdag',
     'Brunsj', 'Piknik', 'Restemat', 'Turmat',
   ],
   Sesong: [
     'Vårmat', 'Sommermat', 'Høstmat', 'Vintermat', 'Julemat', 'Påskemat',
-    'Nyttårsaften', '17. mai', 'Sankthans', 'Halloween', 'Grillsesong', 'Sesongvarer',
+    'Nyttårsaften', '17. mai', 'Halloween', 'Grillsesong',
   ],
 }
\ No newline at end of file
diff --git a/client/src/routes/NewRecipePage.tsx b/client/src/routes/NewRecipePage.tsx
index abb3114..3e90cdb 100644
--- a/client/src/routes/NewRecipePage.tsx
+++ b/client/src/routes/NewRecipePage.tsx
@@ -23,13 +23,14 @@ export type Instruction = {
 export type RecipeFormData = {
   title: string
   description: string
-  videoUrl: string
   prepTime: number
   servings: number
   imageFile: File | null
   category: string
   tags: string[]
   rating: number | null
+  sourceAuthor: string
+  sourceUrl: string
   measurementSystem: 'metric' | 'imperial'
   ingredients: Ingredient[]
   ingredientNote: string
@@ -73,13 +74,14 @@ export default function NewRecipePage({
   const [recipeData, setRecipeData] = useState<RecipeFormData>({
     title: '',
     description: '',
-    videoUrl: '',
     imageFile: null,
-    prepTime: 30,
+    prepTime: 0,
     servings: 4,
     category: 'Middag',
     tags: [],
     rating: null,
+    sourceAuthor: '',
+    sourceUrl: '',
     measurementSystem: 'metric',
     ingredients: [
       {
@@ -169,7 +171,7 @@ export default function NewRecipePage({
           input: {
             title: recipeData.title,
             description: recipeData.description,
-            prepTimeMinutes: recipeData.prepTime,
+            prepTimeMinutes: Number(recipeData.prepTime),
             servings: recipeData.servings,
             category: recipeData.category,
             imageUrl,
diff --git a/client/src/utils/formatPrepTime.ts b/client/src/utils/formatPrepTime.ts
new file mode 100644
index 0000000..bdafe59
--- /dev/null
+++ b/client/src/utils/formatPrepTime.ts
@@ -0,0 +1,30 @@
+export function formatPrepTime(value: string | number): string {
+  const format = (minutes: number): string => {
+    if (minutes < 60) return `${minutes} min`
+
+    const hours = minutes / 60
+    const formatted = hours.toLocaleString('nb-NO', {
+      maximumFractionDigits: 2,
+    })
+
+    return `${formatted} ${hours === 1 ? 'time' : 'timer'}`
+  }
+
+  const parts = String(value).trim().split(/\s*[-–]\s*/)
+
+  if (
+    parts.length < 1 ||
+    parts.length > 2 ||
+    parts.some((part) => !/^\d+$/.test(part) || Number(part) < 1)
+  ) {
+    return 'Ugyldig tid'
+  }
+
+  const numbers = parts.map(Number)
+
+  if (numbers.length === 2 && numbers[0] > numbers[1]) {
+    return 'Ugyldig tidsintervall'
+  }
+
+  return numbers.map(format).join('–')
+}
\ No newline at end of file
diff --git a/server/prisma/migrations/20261015214801_add_prep_time_range/migration.sql b/server/prisma/migrations/20261015214801_add_prep_time_range/migration.sql
new file mode 100644
index 0000000..64334bf
--- /dev/null
+++ b/server/prisma/migrations/20261015214801_add_prep_time_range/migration.sql
@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "Recipe" ADD COLUMN     "prepTimeMaxMinutes" INTEGER;
diff --git a/server/prisma/migrations/20261016233230_remove_prep_time_range/migration.sql b/server/prisma/migrations/20261016233230_remove_prep_time_range/migration.sql
new file mode 100644
index 0000000..5103227
--- /dev/null
+++ b/server/prisma/migrations/20261016233230_remove_prep_time_range/migration.sql
@@ -0,0 +1,8 @@
+/*
+  Warnings:
+
+  - You are about to drop the column `prepTimeMaxMinutes` on the `Recipe` table. All the data in the column will be lost.
+
+*/
+-- AlterTable
+ALTER TABLE "Recipe" DROP COLUMN "prepTimeMaxMinutes";