diff --git a/frontend/app/recipes/[id]/edit/page.tsx b/frontend/app/recipes/[id]/edit/page.tsx
index beb4e693..6f44d615 100644
--- a/frontend/app/recipes/[id]/edit/page.tsx
+++ b/frontend/app/recipes/[id]/edit/page.tsx
@@ -6,6 +6,40 @@ import { fetchJson } from '../../../../lib/api';
 import { parseErrorResponse } from '../../../../lib/error-handler';
 import type { Product, Recipe } from '../../../../features/inventory/types';
 
+const MARKDOWN_HELP = `
+**Fetstil:** **text** eller __text__
+*Kursiv:* *text* eller _text_
+• Punktlista: - punkt eller * punkt
+# Rubrik 1
+## Rubrik 2
+### Rubrik 3
+`;
+
+function SimpleMarkdownPreview({ text }: { text: string }) {
+  const lines = text.split('\n');
+
+  return (
+    <div style={{ whiteSpace: 'pre-wrap', lineHeight: 1.6, wordBreak: 'break-word' }}>
+      {lines.map((line, i) => {
+        // Enkel bearbetning
+        if (line.startsWith('# ')) {
+          return <h3 key={i} style={{ margin: '0.5rem 0 0.25rem 0', fontSize: '1.3em', fontWeight: 700 }}>{line.slice(2)}</h3>;
+        }
+        if (line.startsWith('## ')) {
+          return <h4 key={i} style={{ margin: '0.5rem 0 0.25rem 0', fontSize: '1.1em', fontWeight: 700 }}>{line.slice(3)}</h4>;
+        }
+        if (line.startsWith('- ') || line.startsWith('* ')) {
+          return <div key={i} style={{ marginLeft: '1.5rem' }}>• {line.slice(2)}</div>;
+        }
+        if (line.trim() === '') {
+          return <div key={i} style={{ height: '0.5rem' }} />;
+        }
+        return <div key={i}>{line}</div>;
+      })}
+    </div>
+  );
+}
+
 export default function EditRecipePage() {
   const router = useRouter();
   const params = useParams();
@@ -22,6 +56,7 @@ export default function EditRecipePage() {
   const [isSaving, setIsSaving] = useState(false);
   const [isDeleting, setIsDeleting] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const [showPreview, setShowPreview] = useState(false);
 
   useEffect(() => {
     const loadData = async () => {
@@ -137,121 +172,289 @@ export default function EditRecipePage() {
 
   if (isLoading) {
     return (
-      <main style={{ padding: '1.5rem', maxWidth: '800px', margin: '0 auto' }}>
+      <main style={{ padding: '1.5rem', maxWidth: '100%', margin: '0 auto' }}>
         <p>Laddar recept...</p>
       </main>
     );
   }
 
   return (
-    <main style={{ padding: '1.5rem', maxWidth: '800px', margin: '0 auto' }}>
-      <h1>Redigera recept</h1>
+    <main style={{ padding: '1rem', maxWidth: '1000px', margin: '0 auto' }}>
+      <h1 style={{ marginBottom: '1rem' }}>Redigera recept</h1>
 
-      {error && <p style={{ color: 'red' }}>{error}</p>}
+      {error && <p style={{ color: 'crimson', backgroundColor: '#ffe5e5', padding: '0.75rem', borderRadius: '4px', marginBottom: '1rem' }}>{error}</p>}
 
-      <form onSubmit={handleSubmit} style={{ display: 'grid', gap: '1rem' }}>
-        <div style={{ display: 'grid', gap: '0.5rem' }}>
-          <label>
-            Receptnamn:
+      <form onSubmit={handleSubmit} style={{ display: 'grid', gap: '1.5rem' }}>
+        {/* Receptdetaljer */}
+        <section style={{ display: 'grid', gap: '1rem', padding: '1rem', border: '1px solid #ddd', borderRadius: '8px' }}>
+          <h2 style={{ margin: 0, fontSize: '1.1rem' }}>Receptdetaljer</h2>
+
+          <div>
+            <label style={{ display: 'block', marginBottom: '0.5rem', fontWeight: 600 }}>
+              Receptnamn *
+            </label>
             <input
               type="text"
               value={recipe.name}
               onChange={(e) => setRecipe({ ...recipe, name: e.target.value })}
               required
-              style={{ width: '100%', padding: '0.5rem' }}
+              style={{ 
+                width: '100%', 
+                padding: '0.75rem', 
+                border: '1px solid #ddd',
+                borderRadius: '4px',
+                fontSize: '1rem',
+                minHeight: '44px',
+              }}
             />
-          </label>
+          </div>
 
-          <label>
-            Beskrivning:
+          <div>
+            <label style={{ display: 'block', marginBottom: '0.5rem', fontWeight: 600 }}>
+              Beskrivning
+            </label>
             <textarea
               value={recipe.description}
               onChange={(e) => setRecipe({ ...recipe, description: e.target.value })}
-              style={{ width: '100%', padding: '0.5rem', minHeight: '100px' }}
+              placeholder="Kort beskrivning av receptet..."
+              style={{ 
+                width: '100%', 
+                padding: '0.75rem', 
+                border: '1px solid #ddd',
+                borderRadius: '4px',
+                fontSize: '1rem',
+                minHeight: '100px',
+                fontFamily: 'inherit',
+              }}
             />
-          </label>
+          </div>
+
+          <div>
+            <label style={{ display: 'block', marginBottom: '0.5rem', fontWeight: 600 }}>
+              Instruktioner
+            </label>
+            <div style={{ marginBottom: '0.5rem', fontSize: '0.85rem', background: '#f9f9f9', padding: '0.5rem', borderRadius: '4px', color: '#666' }}>
+              <strong>Markdown-stöd:</strong>
+              <div style={{ whiteSpace: 'pre-wrap', marginTop: '0.25rem' }}>{MARKDOWN_HELP}</div>
+            </div>
 
-          <label>
-            Instruktioner:
             <textarea
               value={recipe.instructions}
               onChange={(e) => setRecipe({ ...recipe, instructions: e.target.value })}
-              style={{ width: '100%', padding: '0.5rem', minHeight: '100px' }}
+              placeholder="Skriv instruktioner här. Du kan använda Markdown för formatering."
+              style={{ 
+                width: '100%', 
+                padding: '0.75rem', 
+                border: '1px solid #ddd',
+                borderRadius: '4px',
+                fontSize: '1rem',
+                minHeight: '150px',
+                fontFamily: 'monospace',
+              }}
             />
-          </label>
-        </div>
 
-        <h2>Ingredienser</h2>
-        {recipe.ingredients.map((ingredient, index) => (
-          <div key={index} style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr auto', gap: '0.5rem', alignItems: 'center' }}>
-            <select
-              value={ingredient.productId}
-              onChange={(e) => handleIngredientChange(index, 'productId', Number(e.target.value))}
-              required
-              style={{ padding: '0.5rem' }}
+            <button
+              type="button"
+              onClick={() => setShowPreview(!showPreview)}
+              style={{
+                marginTop: '0.5rem',
+                padding: '0.5rem 1rem',
+                background: '#f0f0f0',
+                border: '1px solid #ddd',
+                borderRadius: '4px',
+                cursor: 'pointer',
+                fontSize: '0.9rem',
+              }}
             >
-              <option value={0}>Välj produkt</option>
-              {products.length > 0 ? products.map((product) => (
-                <option key={product.id} value={product.id}>
-                  {product.name}
-                </option>
-              )) : <option disabled>Kunde inte ladda produkter</option>}
-            </select>
+              {showPreview ? '✕ Dölj förhandsvisning' : '👁 Visa förhandsvisning'}
+            </button>
 
-            <input
-              type="text"
-              placeholder="Mängd"
-              value={ingredient.quantity}
-              onChange={(e) => handleIngredientChange(index, 'quantity', e.target.value)}
-              required
-              style={{ padding: '0.5rem' }}
-            />
+            {showPreview && recipe.instructions && (
+              <div style={{
+                marginTop: '1rem',
+                padding: '1rem',
+                background: '#fafafa',
+                border: '1px solid #ddd',
+                borderRadius: '4px',
+                maxHeight: '300px',
+                overflowY: 'auto',
+              }}>
+                <strong>Förhandvisning:</strong>
+                <SimpleMarkdownPreview text={recipe.instructions} />
+              </div>
+            )}
+          </div>
+        </section>
 
-            <select
-              value={ingredient.unit}
-              onChange={(e) => handleIngredientChange(index, 'unit', e.target.value)}
-              required
-              style={{ padding: '0.5rem' }}
+        {/* Ingredienser */}
+        <section style={{ display: 'grid', gap: '1rem', padding: '1rem', border: '1px solid #ddd', borderRadius: '8px' }}>
+          <h2 style={{ margin: 0, fontSize: '1.1rem' }}>Ingredienser</h2>
+
+          {recipe.ingredients.map((ingredient, index) => (
+            <div 
+              key={index} 
+              style={{ 
+                display: 'grid', 
+                gridTemplateColumns: 'repeat(auto-fit, minmax(120px, 1fr))',
+                gap: '0.5rem', 
+                alignItems: 'flex-end',
+                padding: '0.75rem',
+                background: '#f9f9f9',
+                borderRadius: '4px',
+              }}
             >
-              {UNIT_OPTIONS.map((opt) => (
-                <option key={opt.value} value={opt.value}>
-                  {opt.label}
-                </option>
-              ))}
-            </select>
+              <select
+                value={ingredient.productId}
+                onChange={(e) => handleIngredientChange(index, 'productId', Number(e.target.value))}
+                required
+                style={{ 
+                  padding: '0.75rem',
+                  border: '1px solid #ddd',
+                  borderRadius: '4px',
+                  fontSize: '1rem',
+                  minHeight: '44px',
+                }}
+              >
+                <option value={0}>Välj produkt</option>
+                {products.length > 0 ? products.map((product) => (
+                  <option key={product.id} value={product.id}>
+                    {product.name}
+                  </option>
+                )) : <option disabled>Kunde inte ladda produkter</option>}
+              </select>
 
-            <input
-              type="text"
-              placeholder="Notering (valfritt)"
-              value={ingredient.note || ''}
-              onChange={(e) => handleIngredientChange(index, 'note', e.target.value)}
-              style={{ padding: '0.5rem' }}
-            />
+              <input
+                type="text"
+                placeholder="Mängd"
+                value={ingredient.quantity}
+                onChange={(e) => handleIngredientChange(index, 'quantity', e.target.value)}
+                required
+                style={{ 
+                  padding: '0.75rem',
+                  border: '1px solid #ddd',
+                  borderRadius: '4px',
+                  fontSize: '1rem',
+                  minHeight: '44px',
+                }}
+              />
 
-            <button type="button" onClick={() => removeIngredient(index)} style={{ padding: '0.5rem' }}>
-              Ta bort
-            </button>
-          </div>
-        ))}
+              <select
+                value={ingredient.unit}
+                onChange={(e) => handleIngredientChange(index, 'unit', e.target.value)}
+                required
+                style={{ 
+                  padding: '0.75rem',
+                  border: '1px solid #ddd',
+                  borderRadius: '4px',
+                  fontSize: '1rem',
+                  minHeight: '44px',
+                }}
+              >
+                {UNIT_OPTIONS.map((opt) => (
+                  <option key={opt.value} value={opt.value}>
+                    {opt.label}
+                  </option>
+                ))}
+              </select>
 
-        {products.length === 0 && (
-          <div style={{ color: 'red' }}>
-            Kunde inte ladda produkter. Kontrollera API:et.
-          </div>
-        )}
+              <input
+                type="text"
+                placeholder="Notering (valfritt)"
+                value={ingredient.note || ''}
+                onChange={(e) => handleIngredientChange(index, 'note', e.target.value)}
+                style={{ 
+                  padding: '0.75rem',
+                  border: '1px solid #ddd',
+                  borderRadius: '4px',
+                  fontSize: '1rem',
+                  minHeight: '44px',
+                }}
+              />
 
-        <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap', justifyContent: 'space-between' }}>
-          <div style={{ display: 'flex', gap: '1rem' }}>
-            <button type="button" onClick={addIngredient} style={{ padding: '0.5rem' }}>
-              Lägg till ingrediens
-            </button>
-            <button type="submit" disabled={isSaving || isDeleting} style={{ padding: '0.5rem' }}>
-              {isSaving ? 'Uppdaterar...' : 'Uppdatera recept'}
+              <button 
+                type="button" 
+                onClick={() => removeIngredient(index)} 
+                style={{ 
+                  padding: '0.75rem 1rem',
+                  background: '#fee',
+                  color: '#c00',
+                  border: '1px solid #faa',
+                  borderRadius: '4px',
+                  cursor: 'pointer',
+                  fontSize: '1rem',
+                  minHeight: '44px',
+                  fontWeight: 600,
+                }}
+              >
+                ✕ Ta bort
+              </button>
+            </div>
+          ))}
+
+          {products.length === 0 && (
+            <div style={{ color: 'crimson', background: '#ffe5e5', padding: '0.75rem', borderRadius: '4px' }}>
+              Kunde inte ladda produkter. Kontrollera API:et.
+            </div>
+          )}
+
+          <button 
+            type="button" 
+            onClick={addIngredient} 
+            style={{ 
+              padding: '0.75rem 1rem',
+              background: '#e8f5e9',
+              color: '#2e7d32',
+              border: '1px solid #81c784',
+              borderRadius: '4px',
+              cursor: 'pointer',
+              fontSize: '1rem',
+              minHeight: '44px',
+              fontWeight: 600,
+            }}
+          >
+            + Lägg till ingrediens
+          </button>
+        </section>
+
+        {/* Knappar */}
+        <div style={{ 
+          display: 'flex', 
+          gap: '0.75rem', 
+          flexWrap: 'wrap', 
+          justifyContent: 'space-between',
+          flexDirection: window.innerWidth < 600 ? 'column' : 'row',
+        }}>
+          <div style={{ display: 'flex', gap: '0.75rem', flexWrap: 'wrap' }}>
+            <button 
+              type="submit" 
+              disabled={isSaving || isDeleting} 
+              style={{ 
+                padding: '0.75rem 1.5rem',
+                background: '#0070f3',
+                color: 'white',
+                border: 'none',
+                borderRadius: '4px',
+                cursor: 'pointer',
+                fontSize: '1rem',
+                minHeight: '44px',
+                fontWeight: 600,
+              }}
+            >
+              {isSaving ? '⏳ Uppdaterar...' : '💾 Uppdatera recept'}
             </button>
             <button
               type="button"
               onClick={() => router.push('/recipes')}
-              style={{ padding: '0.5rem', background: '#f0f0f0', color: '#333', border: '1px solid #ccc', borderRadius: '4px', cursor: 'pointer' }}
+              style={{ 
+                padding: '0.75rem 1.5rem',
+                background: '#f0f0f0', 
+                color: '#333', 
+                border: '1px solid #ccc', 
+                borderRadius: '4px', 
+                cursor: 'pointer',
+                fontSize: '1rem',
+                minHeight: '44px',
+              }}
             >
               Avbryt
             </button>
@@ -276,9 +479,19 @@ export default function EditRecipePage() {
                 setIsDeleting(false);
               }
             }}
-            style={{ padding: '0.5rem 1rem', background: '#c0392b', color: 'white', border: 'none', borderRadius: '4px', cursor: 'pointer' }}
+            style={{ 
+              padding: '0.75rem 1.5rem', 
+              background: '#c0392b', 
+              color: 'white', 
+              border: 'none', 
+              borderRadius: '4px', 
+              cursor: 'pointer',
+              fontSize: '1rem',
+              minHeight: '44px',
+              fontWeight: 600,
+            }}
           >
-            {isDeleting ? 'Raderar...' : 'Radera recept'}
+            {isDeleting ? '⏳ Raderar...' : '🗑 Radera recept'}
           </button>
         </div>
       </form>
diff --git a/frontend/app/recipes/create/CreateRecipePage.tsx b/frontend/app/recipes/create/CreateRecipePage.tsx
index 9d767e9f..2a202df8 100644
--- a/frontend/app/recipes/create/CreateRecipePage.tsx
+++ b/frontend/app/recipes/create/CreateRecipePage.tsx
@@ -6,6 +6,39 @@ import { fetchJson } from '../../../lib/api';
 import { parseErrorResponse } from '../../../lib/error-handler';
 import type { Product } from '../../../features/inventory/types';
 
+const MARKDOWN_HELP = `
+**Fetstil:** **text** eller __text__
+*Kursiv:* *text* eller _text_
+• Punktlista: - punkt eller * punkt
+# Rubrik 1
+## Rubrik 2
+### Rubrik 3
+`;
+
+function SimpleMarkdownPreview({ text }: { text: string }) {
+  const lines = text.split('\n');
+
+  return (
+    <div style={{ whiteSpace: 'pre-wrap', lineHeight: 1.6, wordBreak: 'break-word' }}>
+      {lines.map((line, i) => {
+        if (line.startsWith('# ')) {
+          return <h3 key={i} style={{ margin: '0.5rem 0 0.25rem 0', fontSize: '1.3em', fontWeight: 700 }}>{line.slice(2)}</h3>;
+        }
+        if (line.startsWith('## ')) {
+          return <h4 key={i} style={{ margin: '0.5rem 0 0.25rem 0', fontSize: '1.1em', fontWeight: 700 }}>{line.slice(3)}</h4>;
+        }
+        if (line.startsWith('- ') || line.startsWith('* ')) {
+          return <div key={i} style={{ marginLeft: '1.5rem' }}>• {line.slice(2)}</div>;
+        }
+        if (line.trim() === '') {
+          return <div key={i} style={{ height: '0.5rem' }} />;
+        }
+        return <div key={i}>{line}</div>;
+      })}
+    </div>
+  );
+}
+
 export default function CreateRecipePage() {
   const router = useRouter();
   const [recipe, setRecipe] = useState({
@@ -17,6 +50,7 @@ export default function CreateRecipePage() {
   const [products, setProducts] = useState<Product[]>([]);
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const [showPreview, setShowPreview] = useState(false);
 
   useEffect(() => {
     fetchJson<Product[]>('/api/products')
@@ -100,108 +134,281 @@ export default function CreateRecipePage() {
   ];
 
   return (
-    <main style={{ padding: '1.5rem', maxWidth: '800px', margin: '0 auto' }}>
-      <h1>Lägg till nytt recept</h1>
+    <main style={{ padding: '1rem', maxWidth: '1000px', margin: '0 auto' }}>
+      <h1 style={{ marginBottom: '1rem' }}>Lägg till nytt recept</h1>
 
-      {error && <p style={{ color: 'red' }}>{error}</p>}
+      {error && <p style={{ color: 'crimson', backgroundColor: '#ffe5e5', padding: '0.75rem', borderRadius: '4px', marginBottom: '1rem' }}>{error}</p>}
 
-      <form onSubmit={handleSubmit} style={{ display: 'grid', gap: '1rem' }}>
-        <div style={{ display: 'grid', gap: '0.5rem' }}>
-          <label>
-            Receptnamn:
+      <form onSubmit={handleSubmit} style={{ display: 'grid', gap: '1.5rem' }}>
+        {/* Receptdetaljer */}
+        <section style={{ display: 'grid', gap: '1rem', padding: '1rem', border: '1px solid #ddd', borderRadius: '8px' }}>
+          <h2 style={{ margin: 0, fontSize: '1.1rem' }}>Receptdetaljer</h2>
+
+          <div>
+            <label style={{ display: 'block', marginBottom: '0.5rem', fontWeight: 600 }}>
+              Receptnamn *
+            </label>
             <input
               type="text"
               value={recipe.name}
               onChange={(e) => setRecipe({ ...recipe, name: e.target.value })}
               required
-              style={{ width: '100%', padding: '0.5rem' }}
+              style={{ 
+                width: '100%', 
+                padding: '0.75rem', 
+                border: '1px solid #ddd',
+                borderRadius: '4px',
+                fontSize: '1rem',
+                minHeight: '44px',
+              }}
             />
-          </label>
+          </div>
 
-          <label>
-            Beskrivning:
+          <div>
+            <label style={{ display: 'block', marginBottom: '0.5rem', fontWeight: 600 }}>
+              Beskrivning
+            </label>
             <textarea
               value={recipe.description}
               onChange={(e) => setRecipe({ ...recipe, description: e.target.value })}
-              style={{ width: '100%', padding: '0.5rem', minHeight: '100px' }}
+              placeholder="Kort beskrivning av receptet..."
+              style={{ 
+                width: '100%', 
+                padding: '0.75rem', 
+                border: '1px solid #ddd',
+                borderRadius: '4px',
+                fontSize: '1rem',
+                minHeight: '100px',
+                fontFamily: 'inherit',
+              }}
             />
-          </label>
+          </div>
+
+          <div>
+            <label style={{ display: 'block', marginBottom: '0.5rem', fontWeight: 600 }}>
+              Instruktioner
+            </label>
+            <div style={{ marginBottom: '0.5rem', fontSize: '0.85rem', background: '#f9f9f9', padding: '0.5rem', borderRadius: '4px', color: '#666' }}>
+              <strong>Markdown-stöd:</strong>
+              <div style={{ whiteSpace: 'pre-wrap', marginTop: '0.25rem' }}>{MARKDOWN_HELP}</div>
+            </div>
 
-          <label>
-            Instruktioner:
             <textarea
               value={recipe.instructions}
               onChange={(e) => setRecipe({ ...recipe, instructions: e.target.value })}
-              style={{ width: '100%', padding: '0.5rem', minHeight: '100px' }}
+              placeholder="Skriv instruktioner här. Du kan använda Markdown för formatering."
+              style={{ 
+                width: '100%', 
+                padding: '0.75rem', 
+                border: '1px solid #ddd',
+                borderRadius: '4px',
+                fontSize: '1rem',
+                minHeight: '150px',
+                fontFamily: 'monospace',
+              }}
             />
-          </label>
-        </div>
 
-        <h2>Ingredienser</h2>
-        {recipe.ingredients.map((ingredient, index) => (
-          <div key={index} style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr auto', gap: '0.5rem', alignItems: 'center' }}>
-            <select
-              value={ingredient.productId}
-              onChange={(e) => handleIngredientChange(index, 'productId', Number(e.target.value))}
-              required
-              style={{ padding: '0.5rem' }}
+            <button
+              type="button"
+              onClick={() => setShowPreview(!showPreview)}
+              style={{
+                marginTop: '0.5rem',
+                padding: '0.5rem 1rem',
+                background: '#f0f0f0',
+                border: '1px solid #ddd',
+                borderRadius: '4px',
+                cursor: 'pointer',
+                fontSize: '0.9rem',
+              }}
             >
-              <option value={0}>Välj produkt</option>
-              {products.length > 0 ? products.map((product) => (
-                <option key={product.id} value={product.id}>
-                  {product.name}
-                </option>
-              )) : <option disabled>Kunde inte ladda produkter</option>}
-            </select>
-
-            <input
-              type="text"
-              placeholder="Mängd"
-              value={ingredient.quantity}
-              onChange={(e) => handleIngredientChange(index, 'quantity', e.target.value)}
-              required
-              style={{ padding: '0.5rem' }}
-            />
-
-            <select
-              value={ingredient.unit}
-              onChange={(e) => handleIngredientChange(index, 'unit', e.target.value)}
-              required
-              style={{ padding: '0.5rem' }}
-            >
-              {UNIT_OPTIONS.map((opt) => (
-                <option key={opt.value} value={opt.value}>
-                  {opt.label}
-                </option>
-              ))}
-            </select>
-
-            <input
-              type="text"
-              placeholder="Notering (valfritt)"
-              value={ingredient.note || ''}
-              onChange={(e) => handleIngredientChange(index, 'note', e.target.value)}
-              style={{ padding: '0.5rem' }}
-            />
-
-            <button type="button" onClick={() => removeIngredient(index)} style={{ padding: '0.5rem' }}>
-              Ta bort
+              {showPreview ? '✕ Dölj förhandsvisning' : '👁 Visa förhandsvisning'}
             </button>
-          </div>
-        ))}
 
-        {products.length === 0 && (
-          <div style={{ color: 'red' }}>
-            Kunde inte ladda produkter. Kontrollera API:et.
+            {showPreview && recipe.instructions && (
+              <div style={{
+                marginTop: '1rem',
+                padding: '1rem',
+                background: '#fafafa',
+                border: '1px solid #ddd',
+                borderRadius: '4px',
+                maxHeight: '300px',
+                overflowY: 'auto',
+              }}>
+                <strong>Förhandsvisning:</strong>
+                <SimpleMarkdownPreview text={recipe.instructions} />
+              </div>
+            )}
           </div>
-        )}
+        </section>
 
-        <div style={{ display: 'flex', gap: '1rem' }}>
-          <button type="button" onClick={addIngredient} style={{ padding: '0.5rem' }}>
-            Lägg till ingrediens
+        {/* Ingredienser */}
+        <section style={{ display: 'grid', gap: '1rem', padding: '1rem', border: '1px solid #ddd', borderRadius: '8px' }}>
+          <h2 style={{ margin: 0, fontSize: '1.1rem' }}>Ingredienser</h2>
+
+          {recipe.ingredients.map((ingredient, index) => (
+            <div 
+              key={index} 
+              style={{ 
+                display: 'grid', 
+                gridTemplateColumns: 'repeat(auto-fit, minmax(120px, 1fr))',
+                gap: '0.5rem', 
+                alignItems: 'flex-end',
+                padding: '0.75rem',
+                background: '#f9f9f9',
+                borderRadius: '4px',
+              }}
+            >
+              <select
+                value={ingredient.productId}
+                onChange={(e) => handleIngredientChange(index, 'productId', Number(e.target.value))}
+                required
+                style={{ 
+                  padding: '0.75rem',
+                  border: '1px solid #ddd',
+                  borderRadius: '4px',
+                  fontSize: '1rem',
+                  minHeight: '44px',
+                }}
+              >
+                <option value={0}>Välj produkt</option>
+                {products.length > 0 ? products.map((product) => (
+                  <option key={product.id} value={product.id}>
+                    {product.name}
+                  </option>
+                )) : <option disabled>Kunde inte ladda produkter</option>}
+              </select>
+
+              <input
+                type="text"
+                placeholder="Mängd"
+                value={ingredient.quantity}
+                onChange={(e) => handleIngredientChange(index, 'quantity', e.target.value)}
+                required
+                style={{ 
+                  padding: '0.75rem',
+                  border: '1px solid #ddd',
+                  borderRadius: '4px',
+                  fontSize: '1rem',
+                  minHeight: '44px',
+                }}
+              />
+
+              <select
+                value={ingredient.unit}
+                onChange={(e) => handleIngredientChange(index, 'unit', e.target.value)}
+                required
+                style={{ 
+                  padding: '0.75rem',
+                  border: '1px solid #ddd',
+                  borderRadius: '4px',
+                  fontSize: '1rem',
+                  minHeight: '44px',
+                }}
+              >
+                {UNIT_OPTIONS.map((opt) => (
+                  <option key={opt.value} value={opt.value}>
+                    {opt.label}
+                  </option>
+                ))}
+              </select>
+
+              <input
+                type="text"
+                placeholder="Notering (valfritt)"
+                value={ingredient.note || ''}
+                onChange={(e) => handleIngredientChange(index, 'note', e.target.value)}
+                style={{ 
+                  padding: '0.75rem',
+                  border: '1px solid #ddd',
+                  borderRadius: '4px',
+                  fontSize: '1rem',
+                  minHeight: '44px',
+                }}
+              />
+
+              <button 
+                type="button" 
+                onClick={() => removeIngredient(index)} 
+                style={{ 
+                  padding: '0.75rem 1rem',
+                  background: '#fee',
+                  color: '#c00',
+                  border: '1px solid #faa',
+                  borderRadius: '4px',
+                  cursor: 'pointer',
+                  fontSize: '1rem',
+                  minHeight: '44px',
+                  fontWeight: 600,
+                }}
+              >
+                ✕ Ta bort
+              </button>
+            </div>
+          ))}
+
+          {products.length === 0 && (
+            <div style={{ color: 'crimson', background: '#ffe5e5', padding: '0.75rem', borderRadius: '4px' }}>
+              Kunde inte ladda produkter. Kontrollera API:et.
+            </div>
+          )}
+
+          <button 
+            type="button" 
+            onClick={addIngredient} 
+            style={{ 
+              padding: '0.75rem 1rem',
+              background: '#e8f5e9',
+              color: '#2e7d32',
+              border: '1px solid #81c784',
+              borderRadius: '4px',
+              cursor: 'pointer',
+              fontSize: '1rem',
+              minHeight: '44px',
+              fontWeight: 600,
+            }}
+          >
+            + Lägg till ingrediens
           </button>
-          <button type="submit" disabled={isLoading} style={{ padding: '0.5rem' }}>
-            {isLoading ? 'Sparar...' : 'Spara recept'}
+        </section>
+
+        {/* Knappar */}
+        <div style={{ 
+          display: 'flex', 
+          gap: '0.75rem', 
+          flexWrap: 'wrap',
+        }}>
+          <button 
+            type="submit" 
+            disabled={isLoading} 
+            style={{ 
+              padding: '0.75rem 1.5rem',
+              background: '#0070f3',
+              color: 'white',
+              border: 'none',
+              borderRadius: '4px',
+              cursor: 'pointer',
+              fontSize: '1rem',
+              minHeight: '44px',
+              fontWeight: 600,
+            }}
+          >
+            {isLoading ? '⏳ Sparar...' : '💾 Spara recept'}
+          </button>
+          <button
+            type="button"
+            onClick={() => router.push('/recipes')}
+            style={{ 
+              padding: '0.75rem 1.5rem',
+              background: '#f0f0f0', 
+              color: '#333', 
+              border: '1px solid #ccc', 
+              borderRadius: '4px', 
+              cursor: 'pointer',
+              fontSize: '1rem',
+              minHeight: '44px',
+            }}
+          >
+            Avbryt
           </button>
         </div>
       </form>