diff --git a/frontend/app/Navigation.tsx b/frontend/app/Navigation.tsx
new file mode 100644
index 00000000..f9de9e65
--- /dev/null
+++ b/frontend/app/Navigation.tsx
@@ -0,0 +1,79 @@
+import Link from 'next/link';
+
+export default function Navigation() {
+  return (
+    <nav
+      style={{
+        background: '#f9f9f9',
+        borderBottom: '1px solid #ddd',
+        padding: '0.75rem 1rem',
+        display: 'flex',
+        gap: '0.5rem',
+        flexWrap: 'wrap',
+        marginBottom: '1.5rem',
+        alignItems: 'center',
+      }}
+    >
+      <Link
+        href="/"
+        style={{
+          padding: '0.5rem 0.75rem',
+          background: '#fff',
+          border: '1px solid #ddd',
+          borderRadius: '4px',
+          textDecoration: 'none',
+          color: '#0070f3',
+          fontSize: '0.9rem',
+          fontWeight: 500,
+        }}
+      >
+        🏠 Hem
+      </Link>
+      <Link
+        href="/inventory"
+        style={{
+          padding: '0.5rem 0.75rem',
+          background: '#fff',
+          border: '1px solid #ddd',
+          borderRadius: '4px',
+          textDecoration: 'none',
+          color: '#0070f3',
+          fontSize: '0.9rem',
+          fontWeight: 500,
+        }}
+      >
+        🛒 Varor
+      </Link>
+      <Link
+        href="/recipes"
+        style={{
+          padding: '0.5rem 0.75rem',
+          background: '#fff',
+          border: '1px solid #ddd',
+          borderRadius: '4px',
+          textDecoration: 'none',
+          color: '#0070f3',
+          fontSize: '0.9rem',
+          fontWeight: 500,
+        }}
+      >
+        📖 Recept
+      </Link>
+      <Link
+        href="/admin/products"
+        style={{
+          padding: '0.5rem 0.75rem',
+          background: '#fff',
+          border: '1px solid #ddd',
+          borderRadius: '4px',
+          textDecoration: 'none',
+          color: '#0070f3',
+          fontSize: '0.9rem',
+          fontWeight: 500,
+        }}
+      >
+        ⚙️ Admin
+      </Link>
+    </nav>
+  );
+}
diff --git a/frontend/app/admin/products/page.tsx b/frontend/app/admin/products/page.tsx
index 93465bb9..2137c686 100644
--- a/frontend/app/admin/products/page.tsx
+++ b/frontend/app/admin/products/page.tsx
@@ -2,12 +2,14 @@ import { fetchJson } from '../../../lib/api';
 import type { Product } from '../../../features/inventory/types';
 import MergePreviewForm from './MergePreviewForm';
 import AdminProductList from './AdminProductList';
+import Navigation from '../../Navigation';
 
 export default async function AdminProductsPage() {
   const products = await fetchJson<Product[]>('/api/products');
 
   return (
-    <main style={{ padding: '1.5rem', maxWidth: '1100px', margin: '0 auto' }}>
+    <main style={{ padding: '1rem', maxWidth: '1100px', margin: '0 auto' }}>
+      <Navigation />
       <h1 style={{ marginBottom: '1.5rem' }}>Admin: Produkter</h1>
       <p>Här kan du granska och standardisera produktnamn.</p>
 
diff --git a/frontend/app/inventory/page.tsx b/frontend/app/inventory/page.tsx
index 7ee2c490..57170a50 100644
--- a/frontend/app/inventory/page.tsx
+++ b/frontend/app/inventory/page.tsx
@@ -4,6 +4,7 @@ import Link from 'next/link';
 import { fetchJson } from '../../lib/api';
 import type { InventoryItem, Product } from '../../features/inventory/types';
 import InventoryList from './InventoryList';
+import Navigation from '../Navigation';
 
 function formatDate(value: string | null) {
   if (!value) return null;
@@ -104,7 +105,8 @@ export default async function InventoryPage({ searchParams }: InventoryPageProps
   ];
 
   return (
-    <main style={{ padding: '1.5rem', maxWidth: '1000px', margin: '0 auto' }}>
+    <main style={{ padding: '1rem', maxWidth: '1000px', margin: '0 auto' }}>
+      <Navigation />
       <h1 style={{ marginBottom: '1.5rem' }}>Varor hemma</h1>
 
       <ProductForm />
diff --git a/frontend/app/page.tsx b/frontend/app/page.tsx
index 6905e515..5957bd66 100644
--- a/frontend/app/page.tsx
+++ b/frontend/app/page.tsx
@@ -1,8 +1,10 @@
 import Link from 'next/link';
+import Navigation from './Navigation';
 
 export default function HomePage() {
   return (
-    <main style={{ padding: '2rem', maxWidth: '700px', margin: '0 auto' }}>
+    <main style={{ padding: '1rem', maxWidth: '700px', margin: '0 auto' }}>
+      <Navigation />
       <h1 style={{ marginBottom: '1.5rem' }}>Recipe App</h1>
       <div style={{ display: 'grid', gap: '1rem' }}>
         <Link href="/inventory" style={{ padding: '0.5rem', background: '#eee', borderRadius: '4px', textDecoration: 'none', color: '#222' }}>
diff --git a/frontend/app/recipes/[id]/edit/page.tsx b/frontend/app/recipes/[id]/edit/page.tsx
index 0f0fafcb..b84a15fd 100644
--- a/frontend/app/recipes/[id]/edit/page.tsx
+++ b/frontend/app/recipes/[id]/edit/page.tsx
@@ -5,6 +5,7 @@ import { useRouter, useParams } from 'next/navigation';
 import { fetchJson } from '../../../../lib/api';
 import { parseErrorResponse } from '../../../../lib/error-handler';
 import type { Product, Recipe } from '../../../../features/inventory/types';
+import Navigation from '../../../Navigation';
 
 const MARKDOWN_HELP = `
 **Fetstil:** **text** eller __text__
@@ -181,6 +182,7 @@ export default function EditRecipePage() {
 
   return (
     <main style={{ padding: '1rem', maxWidth: '1000px', margin: '0 auto' }}>
+      <Navigation />
       <h1 style={{ marginBottom: '1rem' }}>Redigera recept</h1>
 
       {error && <p style={{ color: 'crimson', backgroundColor: '#ffe5e5', padding: '0.75rem', borderRadius: '4px', marginBottom: '1rem' }}>{error}</p>}
diff --git a/frontend/app/recipes/create/CreateRecipePage.tsx b/frontend/app/recipes/create/CreateRecipePage.tsx
index 4ee81e35..549e28bb 100644
--- a/frontend/app/recipes/create/CreateRecipePage.tsx
+++ b/frontend/app/recipes/create/CreateRecipePage.tsx
@@ -5,6 +5,7 @@ import { useRouter } from 'next/navigation';
 import { fetchJson } from '../../../lib/api';
 import { parseErrorResponse } from '../../../lib/error-handler';
 import type { Product } from '../../../features/inventory/types';
+import Navigation from '../../Navigation';
 
 const MARKDOWN_HELP = `
 **Fetstil:** **text** eller __text__
@@ -136,6 +137,7 @@ export default function CreateRecipePage() {
 
   return (
     <main style={{ padding: '1rem', maxWidth: '1000px', margin: '0 auto' }}>
+      <Navigation />
       <h1 style={{ marginBottom: '1rem' }}>Lägg till nytt recept</h1>
 
       {error && <p style={{ color: 'crimson', backgroundColor: '#ffe5e5', padding: '0.75rem', borderRadius: '4px', marginBottom: '1rem' }}>{error}</p>}
diff --git a/frontend/app/recipes/page.tsx b/frontend/app/recipes/page.tsx
index 75e79a86..3e4c5d63 100644
--- a/frontend/app/recipes/page.tsx
+++ b/frontend/app/recipes/page.tsx
@@ -2,12 +2,14 @@ import Link from 'next/link';
 import { fetchJson } from '../../lib/api';
 import type { Recipe } from '../../features/inventory/types';
 import RecipePreview from './RecipePreview';
+import Navigation from '../Navigation';
 
 export default async function RecipesPage() {
   const recipes = await fetchJson<Recipe[]>('/api/recipes');
 
   return (
-    <main style={{ padding: '1.5rem', maxWidth: '1000px', margin: '0 auto' }}>
+    <main style={{ padding: '1rem', maxWidth: '1000px', margin: '0 auto' }}>
+      <Navigation />
       <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1.5rem' }}>
         <h1 style={{ margin: 0 }}>Recept</h1>
         <Link