diff --git a/client/src/components/new-recipe/RecipeStep1.tsx b/client/src/components/new-recipe/RecipeStep1.tsx
index b5040d4..3dd8b21 100644
--- a/client/src/components/new-recipe/RecipeStep1.tsx
+++ b/client/src/components/new-recipe/RecipeStep1.tsx
@@ -13,6 +13,7 @@ type RecipeStep1Props = {
   onNext: () => void
 }
 
+
 const categories = ['Frokost', 'Lunsj', 'Middag', 'Dessert', 'Snacks', 'Drikke']
 
 const dietaryTags = ['Vegetar', 'Vegansk', 'Pescetar', 'Glutenfri', 'Laktosefri', 'Annet +']
@@ -102,10 +103,8 @@ export default function RecipeStep1({ data, setData, onNext }: RecipeStep1Props)
             </Field>
 
             <Field label="Porsjoner" required>
-              <div className="flex h-[38px] items-center gap-3">
-                <button
-                  type="button"
-                  className="stepper-button"
+              <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"
                   aria-label="Reduser antall porsjoner"
                   onClick={() => update('servings', Math.max(1, data.servings - 1))}
                 >
diff --git a/client/src/components/new-recipe/RecipeStep2.tsx b/client/src/components/new-recipe/RecipeStep2.tsx
index 9fdcfa3..45d47d4 100644
--- a/client/src/components/new-recipe/RecipeStep2.tsx
+++ b/client/src/components/new-recipe/RecipeStep2.tsx
@@ -3,9 +3,9 @@ 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, Textarea } from '../ui/Input'
+import { Input, Select} from '../ui/Input'
 import ArrowBackIcon from '@mui/icons-material/ArrowBack'
-import DeleteIcon from '@mui/icons-material/Delete'
+import DeleteIcon from '@mui/icons-material/DeleteOutlined'
 import AddIcon from '@mui/icons-material/Add'
 import DragIcon from '@mui/icons-material/DragIndicator'
 import InfoIcon from '@mui/icons-material/InfoOutlined'
@@ -191,7 +191,7 @@ export default function RecipeStep2({ data, setData, onBack, onNext }: RecipeSte
                 <button
                   type="button"
                   aria-label="Reduser antall porsjoner"
-                  className={`h-8 w-8 rounded-small bg-peach/40 hover:bg-peach ${focusRing}`}
+                  className="stepper-button"
                   onClick={() => setData((prev) => ({ ...prev, servings: Math.max(1, prev.servings - 1) }))}
                 >
                   −
@@ -200,7 +200,7 @@ export default function RecipeStep2({ data, setData, onBack, onNext }: RecipeSte
                 <button
                   type="button"
                   aria-label="Øk antall porsjoner"
-                  className={`h-8 w-8 rounded-small bg-peach/40 hover:bg-peach ${focusRing}`}
+                  className="stepper-button"
                   onClick={() => setData((prev) => ({ ...prev, servings: prev.servings + 1 }))}
                 >
                   +
diff --git a/client/src/components/new-recipe/RecipeStep4.tsx b/client/src/components/new-recipe/RecipeStep4.tsx
index 3ca4959..08c2297 100644
--- a/client/src/components/new-recipe/RecipeStep4.tsx
+++ b/client/src/components/new-recipe/RecipeStep4.tsx
@@ -1,49 +1,222 @@
+import { useState } from 'react'
+import type { Dispatch, ReactNode, SetStateAction } from 'react'
+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 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'
 
 type RecipeStep4Props = {
+  data: RecipeFormData
   onBack: () => void
+  onPublish: () => void
 }
 
-export default function RecipeStep4({
-  onBack,
-}: RecipeStep4Props) {
+// 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 }) {
+  return (
+    <span className={`rounded-full px-2.5 py-0.5 text-xs font-semibold ${className}`}>
+      {children}
+    </span>
+  )
+}
+
+// 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]))
+
+export default function RecipeStep4({ data, onBack, onPublish }: RecipeStep4Props) {
+  // Kun for forhåndsvisningen: porsjoner og avkrysninger lagres ikke i oppskriften
+  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
+  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)
+  }
+
+  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()) // fjerner "1." foran
+          .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.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>
+              )}
+            </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' }} />
+                {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>
+
+          <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>
 
-      {/* Midlertidig innhold */}
-      <div className="min-h-80">
-        <h2 className="font-heading text-3xl text-text">
-          Publiser
-        </h2>
+            {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>
+        </section>
 
-        <p className="mt-2 text-sm text-olive">
-          Step 4 – forhåndsvisning av oppskriften kommer her.
-        </p>
+        {/* 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>
+
+        {/* INGREDIENSER */}
+        <section className={card}>
+          <div className="flex items-center justify-between">
+            <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>
+            </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.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}
+                  </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>
+
+          <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.map((step, index) => (
+              <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' : ''}`}>
+                  {step.text}
+                  {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)}
+                  />
+                  Fullført
+                </label>
+              </li>
+            ))}
+          </ol>
+        </section>
       </div>
 
       {/* Knapper */}
-      <div className="mt-4 flex items-center justify-end gap-5 border-t border-peach pt-4">
-        <Button
-        variant="ghost" size="small" onClick={onBack}
-        className="mr-auto"
-        > 
-         <ArrowBackIcon fontSize="small" />
+      <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>
 
-        <Button variant="ghost" size="small">
-          Lagre utkast
-        </Button>
-
-        <Button
-          variant="primary"
-          size="small"
-        >
-          Publiser oppskrift
-        </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>
   )
-}
\ No newline at end of file
+}
diff --git a/client/src/components/ui/Button.tsx b/client/src/components/ui/Button.tsx
index f905676..fef93e4 100644
--- a/client/src/components/ui/Button.tsx
+++ b/client/src/components/ui/Button.tsx
@@ -16,7 +16,7 @@ type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
   size?: ButtonSize
 }
 
-// Felles styling
+// Felles styling for alle knappene 
 const baseStyles = [
   'font-body',
   'rounded-medium',
@@ -24,7 +24,7 @@ const baseStyles = [
   'cursor-pointer',
 ].join(' ')
 
-// Fokus og deaktivert tilstand
+// Felles styling for tastaturfokus og deaktiverte knapper
 const sharedStyles = [
   'focus-visible:outline-2',
   'focus-visible:outline-offset-2',
@@ -63,15 +63,17 @@ const sizeStyles: Record<ButtonSize, string> = {
   large: 'px-6 py-4 text-lg',
 }
 
+// Gjenbrukbar knapp som kan tilpasses med variant, størrelse og andre props
 export function Button({
   children,
-  variant = 'primary',
-  size = 'medium',
-  className = '',
-  type = 'button',
+  variant = 'primary',  // Bruker primary hvis ingen variant er valgt
+  size = 'medium',      // Bruker medium hvis ingen størrelse er valgt
+  className = '',       // Gjør det mulig å legge til ekstra styling
+  type = 'button',      // Hindrer at knappen automatisk sender inn et skjema
   ...props
 }: ButtonProps) {
-  // Kombinerer styling
+
+   // Kombinerer felles styling, variant, størrelse og eventuell ekstra styling
   const classes = [
     baseStyles,
     sharedStyles,
@@ -83,6 +85,7 @@ export function Button({
     .join(' ')
 
   return (
+    // Sender videre vanlige HTML-egenskaper som onClick, disabled og aria-label
     <button
       type={type}
       className={classes}
diff --git a/client/src/components/ui/Dialog.tsx b/client/src/components/ui/Dialog.tsx
index bbdb62d..e167fc6 100644
--- a/client/src/components/ui/Dialog.tsx
+++ b/client/src/components/ui/Dialog.tsx
@@ -1,13 +1,16 @@
 import type { ReactNode } from 'react'
 import * as RadixDialog from '@radix-ui/react-dialog'
-import CloseIcon from '@mui/icons-material/Close';
+import CloseIcon from '@mui/icons-material/Close'
+
+// Definerer hvilke props Dialog-komponenten tar imot
 type DialogProps = {
-  trigger: ReactNode
-  title: string
-  headerContent?: ReactNode
-  children: ReactNode
+  trigger: ReactNode // Elementet som åpner dialogen, for eksempel en knapp
+  title: string // Tittelen som vises øverst i dialogen
+  headerContent?: ReactNode // Valgfritt innhold i headeren, for eksempel stegindikator
+  children: ReactNode // Innholdet som vises inne i dialogen
 }
 
+
 export function Dialog({
   trigger,
   title,
@@ -46,7 +49,7 @@ export function Dialog({
             focus:outline-none
           "
         >
-          {/* Header */}
+          {/* Header med tittel, stegindikator og lukkeknapp */}
           <div className="flex items-center gap-8 border-b border-peach pb-4">
             
             {/* Tittel */}
@@ -61,7 +64,7 @@ export function Dialog({
               {headerContent}
             </div>
 
-            {/* Lukk */}
+            {/* Knapp for å lukke dialogen */}
             <RadixDialog.Close
               className="
                 shrink-0
@@ -79,12 +82,12 @@ export function Dialog({
                <CloseIcon fontSize="medium" />
             </RadixDialog.Close>
           </div>
-
+          {/* Skjult beskrivelse for skjermlesere */}
           <RadixDialog.Description className="sr-only">
             Skjema for å opprette en ny oppskrift
           </RadixDialog.Description>
 
-          {/* Innholdet i dialogen */}
+          {/* Innholdet som sendes inn mellom Dialog-taggene */}
           <div className="mt-4 font-body">
             {children}
           </div>
diff --git a/client/src/components/ui/Field.tsx b/client/src/components/ui/Field.tsx
index 0fd1e77..2124b10 100644
--- a/client/src/components/ui/Field.tsx
+++ b/client/src/components/ui/Field.tsx
@@ -1,5 +1,6 @@
 import type { ReactNode } from 'react'
 
+//Hva field tar imot
 type FieldProps = {
   label: string
   htmlFor?: string // Utelat for grupper (tags, porsjoner) som ikke har ett enkelt felt
@@ -9,7 +10,10 @@ type FieldProps = {
 }
 
 export function Field({ label, htmlFor, required, hint, children }: FieldProps) {
+  // Samme utsende på oversrkfiten uansett om den er label eller p 
   const labelClass = 'mb-2 block text-sm font-semibold'
+  // Selve teksten evt stjerne
+  //Blir lagra som en variabel sånn at vi slipper å skrive den to ganger 
   const content = (
     <>
       {label}
@@ -19,6 +23,7 @@ export function Field({ label, htmlFor, required, hint, children }: FieldProps)
 
   return (
     <div>
+      {/* Bruker label når feltet har en ID, ellers brukes p for grupper */}
       {htmlFor ? (
         <label htmlFor={htmlFor} className={labelClass}>
           {content}
@@ -26,9 +31,9 @@ export function Field({ label, htmlFor, required, hint, children }: FieldProps)
       ) : (
         <p className={labelClass}>{content}</p>
       )}
-
+      {/* Viser innholdet som sendes inn mellom Field-taggene */}
       {children}
-
+      {/* Viser hjelpetekst dersom hint er oppgitt */}
       {hint && <p className="mt-1 text-xs text-olive">{hint}</p>}
     </div>
   )
diff --git a/client/src/components/ui/Input.tsx b/client/src/components/ui/Input.tsx
index 4d87650..e177247 100644
--- a/client/src/components/ui/Input.tsx
+++ b/client/src/components/ui/Input.tsx
@@ -1,23 +1,31 @@
+// Importerer TypeScript-typer for HTML-elementene input, select og textarea
 import type {
   InputHTMLAttributes,
   SelectHTMLAttributes,
   TextareaHTMLAttributes,
 } from 'react'
 
+// Felles styling som brukes av alle tre komponentene
 const base =
   'w-full rounded-medium border border-peach bg-background px-4 py-2 text-sm focus-visible:outline-2 focus-visible:outline-primary'
 
+// Input-komponent for tekst, tall og andre input-felt
 export function Input({ className = '', ...props }: InputHTMLAttributes<HTMLInputElement>) {
+  // Kombinerer felles styling med eventuell ekstra styling
   return <input className={`${base} ${className}`} {...props} />
 }
 
+// Textarea-komponent for tekstfelt med flere linjer
 export function Textarea({
   className = '',
   ...props
 }: TextareaHTMLAttributes<HTMLTextAreaElement>) {
+   // Bruker felles styling og hindrer manuell endring av størrelse med resize-none
   return <textarea className={`${base} resize-none ${className}`} {...props} />
 }
 
+// Select-komponent for nedtrekksmenyer
 export function Select({ className = '', ...props }: SelectHTMLAttributes<HTMLSelectElement>) {
+  // Bruker felles styling og sender videre egenskaper som value og onChange
   return <select className={`${base} ${className}`} {...props} />
 }
diff --git a/client/src/graphql/mutations.ts b/client/src/graphql/mutations.ts
new file mode 100644
index 0000000..937d73d
--- /dev/null
+++ b/client/src/graphql/mutations.ts
@@ -0,0 +1,12 @@
+
+import { gql } from '@apollo/client';
+
+export const CREATE_RECIPE = gql`
+  mutation CreateRecipe($input: CreateRecipeInput!) {
+    createRecipe(input: $input) {
+      id
+      title
+      status
+    }
+  }
+`;
diff --git a/client/src/index.css b/client/src/index.css
index 524c092..865de5d 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -111,12 +111,17 @@ body {
   width: 2rem;
   border: none;
   border-radius: var(--radius-small);
-  background-color: var(--color-peach);
+  background-color: color-mix(in srgb, var(--color-peach) 40%, transparent);
   cursor: pointer;
 }
 
 .stepper-button:hover {
-  background-color: var(--color-pink-light);
+  background-color: var(--color-peach);
+}
+
+.stepper-button:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
 }
 
 .custom-scrollbar {
diff --git a/client/src/routes/NewRecipePage.tsx b/client/src/routes/NewRecipePage.tsx
index d75f8f6..43c2913 100644
--- a/client/src/routes/NewRecipePage.tsx
+++ b/client/src/routes/NewRecipePage.tsx
@@ -1,9 +1,14 @@
+
 import { useState } from 'react'
+import { useMutation } from '@apollo/client/react'
+import { CREATE_RECIPE } from '../graphql/mutations'
+
 import RecipeStep1 from '../components/new-recipe/RecipeStep1'
 import RecipeStep2 from '../components/new-recipe/RecipeStep2'
 import RecipeStep3 from '../components/new-recipe/RecipeStep3'
 import RecipeStep4 from '../components/new-recipe/RecipeStep4'
 
+// Definerer hvordan en ingrediens skal se ut
 export type Ingredient = {
   id: number
   name: string
@@ -11,13 +16,15 @@ export type Ingredient = {
   unit: string
 }
 
+// Definerer hvordan en instruksjon skal se ut
 export type Instruction = {
   id: number
   text: string
 }
 
+// Definerer all informasjonen som lagres i oppskriftsskjemaet
 export type RecipeFormData = {
-  // Step 1
+  // Step 1 - Generell informasjon
   title: string
   description: string
   videoUrl: string
@@ -27,17 +34,18 @@ export type RecipeFormData = {
   tags: string[]
   rating: number | null
 
-  // Step 2
+  // Step 2 - Ingredienser
   measurementSystem: 'metric' | 'imperial'
   ingredients: Ingredient[]
   ingredientNote: string
 
-  // Step 3
+  // Step 3 - Fremgangsmåte
   instructionMode: 'steps' | 'text'
   instructionText: string
-  steps: { id: number; text: string; minutes: string }[]  
+  steps: { id: number; text: string; minutes: string }[]
 }
 
+// Props som styrer hvilket steg brukeren er på
 type NewRecipePageProps = {
   currentStep: number
   setCurrentStep: (step: number) => void
@@ -47,7 +55,7 @@ export default function NewRecipePage({
   currentStep,
   setCurrentStep,
 }: NewRecipePageProps) {
-  // All informasjon om oppskriften lagres her
+  // Lagrer all informasjonen brukeren fyller inn
   const [recipeData, setRecipeData] = useState<RecipeFormData>({
     // Step 1
     title: '',
@@ -74,13 +82,74 @@ export default function NewRecipePage({
     // Step 3
     instructionMode: 'steps',
     instructionText: '',
-    steps: [{ id: 1, text: '', minutes: '' }
+    steps: [
+      {
+        id: 1,
+        text: '',
+        minutes: '',
+      },
     ],
   })
 
+  // Kobler komponenten til GraphQL-mutasjonen CREATE_RECIPE
+  const [createRecipe, { loading, error }] = useMutation(CREATE_RECIPE)
+
+  // Funksjonen som kjøres når brukeren publiserer oppskriften
+  const handlePublish = async () => {
+    // Gjør ingrediensene om til formatet backend forventer
+    const ingredients = recipeData.ingredients.map(
+      (ingredient, index) => ({
+        name: ingredient.name,
+        amount: Number(ingredient.amount),
+        unit: ingredient.unit,
+        order: index + 1,
+      })
+    )
+
+    // Gjør fremgangsmåten om til formatet backend forventer
+    const steps =
+      recipeData.instructionMode === 'steps'
+        ? recipeData.steps.map((step, index) => ({
+            order: index + 1,
+            instruction: step.text,
+          }))
+        : [
+            {
+              order: 1,
+              instruction: recipeData.instructionText,
+            },
+          ]
+
+    try {
+      // Sender oppskriftsinformasjonen til GraphQL
+      const result = await createRecipe({
+        variables: {
+          input: {
+            title: recipeData.title,
+            description: recipeData.description,
+            prepTimeMinutes: recipeData.prepTime,
+            servings: recipeData.servings,
+            category: recipeData.category,
+            tagNames: recipeData.tags,
+            ingredients,
+            steps,
+          },
+        },
+      })
+
+      // Viser resultatet hvis oppskriften ble lagret
+      console.log('Oppskrift publisert:', result.data)
+
+      alert('Oppskriften ble publisert!')
+    } catch (err) {
+      // Skriver ut feilen hvis publiseringen mislykkes
+      console.error('Kunne ikke publisere oppskrift:', err)
+    }
+  }
+
   return (
     <div className="w-full">
-      {/* STEP 1 */}
+      {/* STEP 1 - Generell informasjon */}
       {currentStep === 1 && (
         <RecipeStep1
           data={recipeData}
@@ -89,7 +158,7 @@ export default function NewRecipePage({
         />
       )}
 
-      {/* STEP 2 */}
+      {/* STEP 2 - Ingredienser */}
       {currentStep === 2 && (
         <RecipeStep2
           data={recipeData}
@@ -99,7 +168,7 @@ export default function NewRecipePage({
         />
       )}
 
-      {/* STEP 3 */}
+      {/* STEP 3 - Fremgangsmåte */}
       {currentStep === 3 && (
         <RecipeStep3
           data={recipeData}
@@ -109,13 +178,30 @@ export default function NewRecipePage({
         />
       )}
 
-      {/* STEP 4 */}
+      {/* STEP 4 - Forhåndsvisning og publisering */}
       {currentStep === 4 && (
-        <RecipeStep4
-          // data={recipeData}
-          onBack={() => setCurrentStep(3)}
-        />
+        <>
+          <RecipeStep4
+            data={recipeData}
+            onBack={() => setCurrentStep(3)}
+            onPublish={handlePublish}
+          />
+
+          {/* Viser en melding mens oppskriften lagres */}
+          {loading && (
+            <p role="status" className="mt-3 text-olive">
+              Publiserer oppskriften...
+            </p>
+          )}
+
+          {/* Viser en feilmelding hvis publiseringen mislykkes */}
+          {error && (
+            <p role="alert" className="mt-3 text-primary">
+              Kunne ikke publisere oppskriften: {error.message}
+            </p>
+          )}
+        </>
       )}
     </div>
   )
-}
\ No newline at end of file
+}
diff --git a/package.json b/package.json
index 083b273..d553903 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,12 @@
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
     "@mui/icons-material": "^9.4.0",
-    "@mui/material": "^9.4.0"
+    "@mui/material": "^9.4.0",
+    "@prisma/client": "^6.19.3"
+  },
+  "allowScripts": {
+    "@prisma/client@6.19.3": true,
+    "@prisma/engines@6.19.3": true,
+    "prisma@6.19.3": true
   }
 }
diff --git a/server/prisma/seed.ts b/server/prisma/seed.ts
index f967355..d6c15f1 100644
--- a/server/prisma/seed.ts
+++ b/server/prisma/seed.ts
@@ -4,7 +4,7 @@ const prisma = new PrismaClient();
 async function main() {
     const tagPasta = await prisma.tag.upsert({ where: { name: 'vegetar' }, update: {}, create: { name: 'vegetar'}});
 
-    const user = await prisma.user.create({
+    const user = await prisma.user.upsert({
         where: { id: 'dev-user' },
         update: {},
         create: { id: 'dev-user', name: 'Test Bruker', email: 'test@example.com'}
diff --git a/server/src/index.ts b/server/src/index.ts
index ba68147..ad8a4ff 100644
--- a/server/src/index.ts
+++ b/server/src/index.ts
@@ -1,3 +1,4 @@
+import 'dotenv/config';
 import express from 'express';
 import cors from 'cors';
 import { ApolloServer } from '@apollo/server';
diff --git a/server/src/schema/resolvers/recipe.ts b/server/src/schema/resolvers/recipe.ts
index e602933..cc71891 100644
--- a/server/src/schema/resolvers/recipe.ts
+++ b/server/src/schema/resolvers/recipe.ts
@@ -30,7 +30,7 @@ export const recipeResolvers = {
         data: {
           ...rest,
           status: 'PUBLISHED',
-          authorId: 'MIDLERTIDIG-ID', // bytt ut når Person 2 har auth klart
+          authorId: 'dev-user', // bytt ut når Person 2 har auth klart
           ingredients: { create: ingredients },
           steps: { create: steps },
           tags: tagNames