diff --git a/src/components/VideoEditor.tsx b/src/components/VideoEditor.tsx
index db5c3793..8b90bfe5 100644
--- a/src/components/VideoEditor.tsx
+++ b/src/components/VideoEditor.tsx
@@ -143,6 +143,7 @@ export default function VideoEditor() {
     file, duration, recipe, status, progress,
     result, error, updateRecipe,
     handleFileSelect, fileError, handleExport, cancelExport, reset, resetSettings,
+    undo,redo,canUndo,canRedo,
     videoRef,
     seekTo,
     overlayFile, setOverlayFile,
@@ -185,7 +186,7 @@ export default function VideoEditor() {
       });
     }
   }, [status]);
-
+  
   const isProcessing = status === "loading-engine" || status === "exporting";
   const isMac = typeof navigator !== "undefined" && /Mac/i.test(navigator.platform);
 
@@ -202,7 +203,7 @@ export default function VideoEditor() {
 
   return (
     <div className="min-h-screen relative flex flex-col" style={{ background: "var(--bg)" }}>
-      <ExportOverlay status={status} progress={progress} onCancel={cancelExport} />
+      <ExportOverlay status={status} progress={progress} />
       <OnboardingTour />
 
       <div aria-live="polite" aria-atomic="true" className="sr-only">
@@ -475,7 +476,37 @@ export default function VideoEditor() {
                 </button>
               </div>
             </div>
-
+            <div className="flex gap-3">
+              <button
+                type="button"
+                onClick={undo}
+                disabled={!canUndo || isProcessing}
+                className={cn(
+                  "flex-1 py-3 rounded-xl border transition-all duration-200",
+                  "font-heading text-xs uppercase tracking-widest",
+                  canUndo && !isProcessing
+                    ? "border-[var(--border)] bg-[var(--surface)] hover:border-film-500 hover:text-film-600"
+                    : "border-[var(--border)] text-[var(--muted)] cursor-not-allowed opacity-50"
+                )}
+              >
+                Undo
+              </button>
+
+              <button
+                type="button"
+                onClick={redo}
+                disabled={!canRedo || isProcessing}
+                className={cn(
+                  "flex-1 py-3 rounded-xl border transition-all duration-200",
+                  "font-heading text-xs uppercase tracking-widest",
+                  canRedo && !isProcessing
+                    ? "border-[var(--border)] bg-[var(--surface)] hover:border-film-500 hover:text-film-600"
+                    : "border-[var(--border)] text-[var(--muted)] cursor-not-allowed opacity-50"
+                )}
+              >
+                Redo
+              </button>
+            </div>
             <KeyboardShortcutsPanel />
 
             <button
diff --git a/src/hooks/useVideoEditor.ts b/src/hooks/useVideoEditor.ts
index d894ed07..a05ad9ce 100644
--- a/src/hooks/useVideoEditor.ts
+++ b/src/hooks/useVideoEditor.ts
@@ -1,240 +1,298 @@
-"use client";
-
-import { useState, useCallback, useEffect, useRef, useMemo } from "react";
-import { EditRecipe, ExportResult, ExportStatus, MAX_FILE_SIZE, OverlayPosition, isValidRecipe } from "@/lib/types";
-import { DEFAULT_RECIPE, SPEED_STEPS } from "@/lib/constants";
-import { getPresetById } from "@/lib/presets";
-import { loadFFmpeg, exportVideo, terminateFFmpeg, FFmpegLoadError } from "@/lib/ffmpeg";
-import { suggestPreset } from "@/lib/presetSuggestion";
-
-const DEFAULT_TITLE = "Reframe — Resize, trim, and export videos in your browser";
-  const STORAGE_KEY = "reframe:recipe";
-
-export function extractMetadata(file: File): Promise<{ width: number; height: number; duration: number }> {
+'use client'
+
+import { useState, useCallback, useEffect, useRef, useMemo } from 'react'
+import {
+  EditRecipe,
+  ExportResult,
+  ExportStatus,
+  MAX_FILE_SIZE,
+  OverlayPosition,
+  isValidRecipe
+} from '@/lib/types'
+import { DEFAULT_RECIPE, SPEED_STEPS } from '@/lib/constants'
+import { getPresetById } from '@/lib/presets'
+import {
+  loadFFmpeg,
+  exportVideo,
+  terminateFFmpeg,
+  FFmpegLoadError
+} from '@/lib/ffmpeg'
+import { suggestPreset } from '@/lib/presetSuggestion'
+
+const DEFAULT_TITLE =
+  'Reframe — Resize, trim, and export videos in your browser'
+const STORAGE_KEY = 'reframe:recipe'
+
+export function extractMetadata (
+  file: File
+): Promise<{ width: number; height: number; duration: number }> {
   return new Promise((resolve, reject) => {
-    const url = URL.createObjectURL(file);
-    const video = document.createElement("video");
+    const url = URL.createObjectURL(file)
+    const video = document.createElement('video')
     const timeout = setTimeout(() => {
-      URL.revokeObjectURL(url);
-      reject( new Error("Video metaData load timeout — the file may be too large or the device too slow. Please try again.") );
-    }, 5000);
-
-    video.preload = "metadata";
+      URL.revokeObjectURL(url)
+      reject(
+        new Error(
+          'Video metaData load timeout — the file may be too large or the device too slow. Please try again.'
+        )
+      )
+    }, 5000)
+
+    video.preload = 'metadata'
     video.onloadedmetadata = () => {
       clearTimeout(timeout)
       resolve({
         width: video.videoWidth,
         height: video.videoHeight,
-        duration: isFinite(video.duration) ? video.duration : 0,
-      });
-      URL.revokeObjectURL(url);
-    };
+        duration: isFinite(video.duration) ? video.duration : 0
+      })
+      URL.revokeObjectURL(url)
+    }
+
     video.onerror = () => {
       clearTimeout(timeout)
-      URL.revokeObjectURL(url);
-      reject(new Error("Failed to load video metadata"));
-    };
-    video.src = url;
-  });
+      URL.revokeObjectURL(url)
+      reject(new Error('Failed to load video metadata'))
+    }
+    video.src = url
+  })
 }
 
-function verifyMagicBytes(file: File): Promise<boolean> {
-  return new Promise((resolve) => {
-    const reader = new FileReader();
-    reader.onloadend = (e) => {
+function verifyMagicBytes (file: File): Promise<boolean> {
+  return new Promise(resolve => {
+    const reader = new FileReader()
+    reader.onloadend = e => {
       if (!e.target?.result) {
-        resolve(false);
-        return;
+        resolve(false)
+        return
       }
-      const arr = new Uint8Array(e.target.result as ArrayBuffer);
-      const hex = Array.from(arr).map(b => b.toString(16).padStart(2, "0")).join("").toUpperCase();
-      const ascii = String.fromCharCode(...arr);
+      const arr = new Uint8Array(e.target.result as ArrayBuffer)
+      const hex = Array.from(arr)
+        .map(b => b.toString(16).padStart(2, '0'))
+        .join('')
+        .toUpperCase()
+      const ascii = String.fromCharCode(...arr)
 
       // WebM / MKV
-      if (hex.startsWith("1A45DFA3")) resolve(true);
+      if (hex.startsWith('1A45DFA3')) resolve(true)
       // AVI
-      else if (hex.startsWith("52494646")) resolve(true);
+      else if (hex.startsWith('52494646')) resolve(true)
       // MP4 / MOV (checks for 'ftyp' in first 12 bytes)
-      else if (ascii.substring(0, 12).includes("ftyp")) resolve(true);
-      else resolve(false);
-    };
-    reader.onerror = () => resolve(false);
-    reader.readAsArrayBuffer(file.slice(0, 12));
-  });
+      else if (ascii.substring(0, 12).includes('ftyp')) resolve(true)
+      else resolve(false)
+    }
+    reader.onerror = () => resolve(false)
+    reader.readAsArrayBuffer(file.slice(0, 12))
+  })
 }
 
-function validateRecipe(recipe: EditRecipe, duration: number ): string | null {
+function validateRecipe (recipe: EditRecipe, duration: number): string | null {
   const validations: Array<[boolean, string]> = [
-    [
-      recipe.trimStart < 0,
-      "Trim start time cannot be less than 0 seconds.",
-    ],
+    [recipe.trimStart < 0, 'Trim start time cannot be less than 0 seconds.'],
     [
       recipe.trimEnd !== null && recipe.trimEnd > duration,
-      `Trim end time cannot exceed the video duration (${Math.floor(duration)}s).`,
+      `Trim end time cannot exceed the video duration (${Math.floor(
+        duration
+      )}s).`
     ],
     [
       recipe.trimStart >= (recipe.trimEnd ?? duration),
-      "Trim start time must be earlier than the end time.",
+      'Trim start time must be earlier than the end time.'
     ],
     [
-      recipe.preset === "custom" && (recipe.customWidth < 16 || recipe.customWidth > 7680),
-      "Width must be between 16px and 7680px.",
+      recipe.preset === 'custom' &&
+        (recipe.customWidth < 16 || recipe.customWidth > 7680),
+      'Width must be between 16px and 7680px.'
     ],
     [
-      recipe.preset === "custom" && (recipe.customHeight < 16 || recipe.customHeight > 7680),
-      "Height must be between 16px and 7680px.",
+      recipe.preset === 'custom' &&
+        (recipe.customHeight < 16 || recipe.customHeight > 7680),
+      'Height must be between 16px and 7680px.'
     ],
     [
       !(SPEED_STEPS as readonly number[]).includes(recipe.speed),
-      "Please select a valid playback speed.",
+      'Please select a valid playback speed.'
     ],
     [
       recipe.quality < 18 || recipe.quality > 30,
-      "Quality must be between 18 and 30.",
+      'Quality must be between 18 and 30.'
     ],
     [
       recipe.brightness < -1 || recipe.brightness > 1,
-      "Brightness must be between -1 and 1.",
+      'Brightness must be between -1 and 1.'
     ],
 
     [
       recipe.contrast < 0 || recipe.contrast > 2,
-      "Contrast must be between 0 and 2.",
+      'Contrast must be between 0 and 2.'
     ],
 
     [
       recipe.saturation < 0 || recipe.saturation > 3,
-      "Saturation must be between 0 and 3.",
-    ],
-  ];
+      'Saturation must be between 0 and 3.'
+    ]
+  ]
 
-  return (
-    validations.find(([condition]) => condition)?.[1] ??
-    null
-  );
+  return validations.find(([condition]) => condition)?.[1] ?? null
 }
 
-export function useVideoEditor() {
-  const [file, setFile] = useState<File | null>(null);
-  const [duration, setDuration] = useState<number>(0);
+export function useVideoEditor () {
+  const [file, setFile] = useState<File | null>(null)
+  const [duration, setDuration] = useState<number>(0)
+
+  const [history, setHistory] = useState<EditRecipe[]>([DEFAULT_RECIPE])
+  const [historyIndex, setHistoryIndex] = useState(0)
+
   const [videoMetadata, setVideoMetadata] = useState<{
-    width: number;
-    height: number;
-    duration: number;
-  } | null>(null);
+    width: number
+    height: number
+    duration: number
+  } | null>(null)
   const [recipe, setRecipe] = useState({
     ...DEFAULT_RECIPE,
     soundOnCompletion:
-      typeof window !== "undefined" &&
-      localStorage.getItem("soundOnCompletion") === "true",
-  });
-  const [status, setStatus] = useState<ExportStatus>("idle");
-  const [progress, setProgress] = useState(0);
-  const [result, setResult] = useState<ExportResult | null>(null);
-  const [error, setError] = useState<string | null>(null);
-  const [fileError, setFileError] = useState("");
-  const exportAbortControllerRef = useRef<AbortController | null>(null);
-  const exportCancelledRef = useRef(false);
-  const videoRef = useRef<HTMLVideoElement>(null);
-
-  const [musicFile, setMusicFile] = useState<File | null>(null);
-  const [musicVolume, setMusicVolume] = useState(70);
-  const [originalAudioVolume, setOriginalAudioVolume] = useState(40);
-  const [loopMusic, setLoopMusic] = useState(false);
-
-  const [overlayFile, setOverlayFile] = useState<File | null>(null);
-  const [overlayPosition, setOverlayPosition] = useState<OverlayPosition>("bottom-right");
-  const [overlaySize, setOverlaySize] = useState(150);
-  const [overlayOpacity, setOverlayOpacity] = useState(100);
-
- const updateRecipe = useCallback((patch: Partial<EditRecipe>) => {
-  setRecipe((prev) => {
-    const next = { ...prev, ...patch };
-    // GIF has no audio — force keepAudio off
-    if (next.format === "gif") {
-      next.keepAudio = false;
-    }
-    return next;
-  });
-}, []);
+      typeof window !== 'undefined' &&
+      localStorage.getItem('soundOnCompletion') === 'true'
+  })
+
+  const [status, setStatus] = useState<ExportStatus>('idle')
+  const [progress, setProgress] = useState(0)
+  const [result, setResult] = useState<ExportResult | null>(null)
+  const [error, setError] = useState<string | null>(null)
+  const [fileError, setFileError] = useState('')
+  const exportAbortControllerRef = useRef<AbortController | null>(null)
+  const exportCancelledRef = useRef(false)
+  const videoRef = useRef<HTMLVideoElement>(null)
+
+  const [musicFile, setMusicFile] = useState<File | null>(null)
+  const [musicVolume, setMusicVolume] = useState(70)
+  const [originalAudioVolume, setOriginalAudioVolume] = useState(40)
+  const [loopMusic, setLoopMusic] = useState(false)
+
+  const [overlayFile, setOverlayFile] = useState<File | null>(null)
+  const [overlayPosition, setOverlayPosition] =
+    useState<OverlayPosition>('bottom-right')
+  const [overlaySize, setOverlaySize] = useState(150)
+  const [overlayOpacity, setOverlayOpacity] = useState(100)
+
+  const updateRecipe = useCallback(
+    (patch: Partial<EditRecipe>) => {
+      setHistory(prevHistory => {
+        const trimmedHistory = prevHistory.slice(0, historyIndex + 1)
+
+        const newRecipe: EditRecipe = {
+          ...trimmedHistory[historyIndex],
+          ...patch
+        } as EditRecipe
+        if (newRecipe.format === 'gif') {
+          newRecipe.keepAudio = false
+        }
+        const updatedHistory = [...trimmedHistory, newRecipe]
+
+        return updatedHistory.length > 20
+          ? updatedHistory.slice(-20)
+          : updatedHistory
+      })
+
+      setHistoryIndex(prev => Math.min(prev + 1, 19))
+    },
+    [historyIndex]
+  )
+
   const isValidValue = (key: keyof EditRecipe, val: any): boolean => {
     switch (key) {
-      case "preset":
-        return typeof val === "string";
-      case "customWidth":
-        return typeof val === "number" && !isNaN(val) && val >= 16 && val <= 7680;
-      case "customHeight":
-        return typeof val === "number" && !isNaN(val) && val >= 16 && val <= 7680;
-      case "framing":
-        return val === "fit" || val === "fill";
-      case "trimStart":
-        return typeof val === "number" && !isNaN(val) && val >= 0;
-      case "trimEnd":
-        return val === null || (typeof val === "number" && !isNaN(val) && val >= 0);
-      case "rotate":
-        return val === 0 || val === 90 || val === 180 || val === 270;
-      case "speed":
-        return typeof val === "number" && !isNaN(val) && [0.25, 0.5, 0.75, 1, 1.25, 1.5, 2, 4].includes(val);
-      case "quality":
-        return typeof val === "number" && !isNaN(val) && val >= 18 && val <= 30;
-      case "format":
-        return val === "mp4" || val === "webm" || val === "mkv" || val === "gif";
-      case "brightness":
-        return typeof val === "number" && !isNaN(val) && val >= -1 && val <= 1;
-      case "contrast":
-        return typeof val === "number" && !isNaN(val) && val >= 0 && val <= 2;
-      case "saturation":
-        return typeof val === "number" && !isNaN(val) && val >= 0 && val <= 3;
+      case 'preset':
+        return typeof val === 'string'
+      case 'customWidth':
+        return (
+          typeof val === 'number' && !isNaN(val) && val >= 16 && val <= 7680
+        )
+      case 'customHeight':
+        return (
+          typeof val === 'number' && !isNaN(val) && val >= 16 && val <= 7680
+        )
+      case 'framing':
+        return val === 'fit' || val === 'fill'
+      case 'trimStart':
+        return typeof val === 'number' && !isNaN(val) && val >= 0
+      case 'trimEnd':
+        return (
+          val === null || (typeof val === 'number' && !isNaN(val) && val >= 0)
+        )
+      case 'rotate':
+        return val === 0 || val === 90 || val === 180 || val === 270
+      case 'speed':
+        return (
+          typeof val === 'number' &&
+          !isNaN(val) &&
+          [0.25, 0.5, 0.75, 1, 1.25, 1.5, 2, 4].includes(val)
+        )
+      case 'quality':
+        return typeof val === 'number' && !isNaN(val) && val >= 18 && val <= 30
+      case 'format':
+        return val === 'mp4' || val === 'webm' || val === 'mkv' || val === 'gif'
+      case 'brightness':
+        return typeof val === 'number' && !isNaN(val) && val >= -1 && val <= 1
+      case 'contrast':
+        return typeof val === 'number' && !isNaN(val) && val >= 0 && val <= 2
+      case 'saturation':
+        return typeof val === 'number' && !isNaN(val) && val >= 0 && val <= 3
       default:
-        return true;
+        return true
     }
-  };
+  }
 
+  const undo = useCallback(() => {
+    setHistoryIndex(prev => Math.max(0, prev - 1))
+  }, [])
+
+  const redo = useCallback(() => {
+    setHistoryIndex(prev => Math.min(history.length - 1, prev + 1))
+  }, [history.length])
   useEffect(() => {
-    if (typeof window === "undefined") return;
+    if (typeof window === 'undefined') return
     try {
-      const params = new URLSearchParams(window.location.search);
-      const recipeKeys = Object.keys(DEFAULT_RECIPE) as Array<keyof EditRecipe>;
-      const hasRecipeParams = recipeKeys.some(key => params.has(key));
+      const params = new URLSearchParams(window.location.search)
+      const recipeKeys = Object.keys(DEFAULT_RECIPE) as Array<keyof EditRecipe>
+      const hasRecipeParams = recipeKeys.some(key => params.has(key))
 
       if (hasRecipeParams) {
-        const updatedPatch: Partial<EditRecipe> = {};
-        recipeKeys.forEach((key) => {
-          const paramVal = params.get(key);
+        const updatedPatch: Partial<EditRecipe> = {}
+        recipeKeys.forEach(key => {
+          const paramVal = params.get(key)
           if (paramVal !== null) {
-            const defaultType = typeof DEFAULT_RECIPE[key];
-            let parsedVal: any;
+            const defaultType = typeof DEFAULT_RECIPE[key]
+            let parsedVal: any
 
-            if (defaultType === "number") {
-              parsedVal = parseFloat(paramVal);
-            } else if (defaultType === "boolean") {
-              parsedVal = paramVal === "true";
+            if (defaultType === 'number') {
+              parsedVal = parseFloat(paramVal)
+            } else if (defaultType === 'boolean') {
+              parsedVal = paramVal === 'true'
             } else {
-              parsedVal = paramVal === "null" ? null : paramVal;
+              parsedVal = paramVal === 'null' ? null : paramVal
             }
 
             if (isValidValue(key, parsedVal)) {
-              (updatedPatch as any)[key] = parsedVal;
+              ;(updatedPatch as any)[key] = parsedVal
             }
           }
-        });
+        })
 
         if (Object.keys(updatedPatch).length > 0) {
           setRecipe(prev => ({
             ...prev,
             ...updatedPatch
-          }));
+          }))
         }
       } else {
         // Try full recipe restore first (new key)
         try {
-          const raw = localStorage.getItem(STORAGE_KEY);
+          const raw = localStorage.getItem(STORAGE_KEY)
           if (raw) {
-            const parsed = JSON.parse(raw);
+            const parsed = JSON.parse(raw)
             if (isValidRecipe(parsed)) {
-              setRecipe(parsed);
-              return;
+              setRecipe(parsed)
+              return
             }
           }
         } catch {
@@ -242,9 +300,9 @@ export function useVideoEditor() {
         }
 
         // Legacy partial settings (keep for backward compatibility)
-        const saved = localStorage.getItem("reframe-settings");
+        const saved = localStorage.getItem('reframe-settings')
         if (saved) {
-          const parsed = JSON.parse(saved);
+          const parsed = JSON.parse(saved)
           setRecipe(prev => ({
             ...prev,
             preset: parsed.preset ?? prev.preset,
@@ -252,167 +310,215 @@ export function useVideoEditor() {
             speed: parsed.speed ?? prev.speed,
             customWidth: parsed.customWidth ?? prev.customWidth,
             customHeight: parsed.customHeight ?? prev.customHeight
-          }));
+          }))
         }
       }
     } catch (e) {
       // ignore
     }
-  }, []);
+  }, [])
 
   useEffect(() => {
-    if (typeof window === "undefined") return;
+    if (typeof window === 'undefined') return
     try {
-      const params = new URLSearchParams();
-      const recipeKeys = Object.keys(DEFAULT_RECIPE) as Array<keyof EditRecipe>;
+      const params = new URLSearchParams()
+      const recipeKeys = Object.keys(DEFAULT_RECIPE) as Array<keyof EditRecipe>
 
-      recipeKeys.forEach((key) => {
-        const currentVal = recipe[key];
-        const defaultVal = DEFAULT_RECIPE[key];
+      recipeKeys.forEach(key => {
+        const currentVal = recipe[key]
+        const defaultVal = DEFAULT_RECIPE[key]
 
         if (currentVal !== defaultVal) {
-          params.set(key, currentVal === null ? "null" : String(currentVal));
+          params.set(key, currentVal === null ? 'null' : String(currentVal))
         }
-      });
+      })
 
-      const newQuery = params.toString();
-      const currentQuery = window.location.search.replace(/^\?/, "");
+      const newQuery = params.toString()
+      const currentQuery = window.location.search.replace(/^\?/, '')
 
       if (newQuery !== currentQuery) {
         const newUrl = newQuery
           ? `${window.location.pathname}?${newQuery}`
-          : window.location.pathname;
-        window.history.replaceState(null, "", newUrl);
+          : window.location.pathname
+        window.history.replaceState(null, '', newUrl)
       }
     } catch (e) {
       // ignore
     }
-  }, [recipe]);
+  }, [recipe])
 
   useEffect(() => {
     try {
-      localStorage.setItem("reframe-settings", JSON.stringify({
-        preset: recipe.preset,
-        quality: recipe.quality,
-        speed: recipe.speed,
-        customWidth: recipe.customWidth,
-        customHeight: recipe.customHeight
-      }));
+      localStorage.setItem(
+        'reframe-settings',
+        JSON.stringify({
+          preset: recipe.preset,
+          quality: recipe.quality,
+          speed: recipe.speed,
+          customWidth: recipe.customWidth,
+          customHeight: recipe.customHeight
+        })
+      )
     } catch (e) {
       // ignore
     }
-  }, [recipe.preset, recipe.quality, recipe.speed, recipe.customWidth, recipe.customHeight]);
+  }, [
+    recipe.preset,
+    recipe.quality,
+    recipe.speed,
+    recipe.customWidth,
+    recipe.customHeight
+  ])
 
   // Persist the full recipe (debounced)
   useEffect(() => {
-    if (typeof window === "undefined") return;
+    if (typeof window === 'undefined') return
     const timer = setTimeout(() => {
       try {
-        localStorage.setItem(STORAGE_KEY, JSON.stringify(recipe));
+        localStorage.setItem(STORAGE_KEY, JSON.stringify(recipe))
       } catch {
         // ignore
       }
-    }, 500);
-    return () => clearTimeout(timer);
-  }, [recipe]);
+    }, 500)
+    return () => clearTimeout(timer)
+  }, [recipe])
 
   const recommendedPreset = useMemo(() => {
-    if (!videoMetadata) return null;
-    return getPresetById(suggestPreset(videoMetadata.width, videoMetadata.height)) ?? null;
-  }, [videoMetadata]);
+    if (!videoMetadata) return null
+    return (
+      getPresetById(suggestPreset(videoMetadata.width, videoMetadata.height)) ??
+      null
+    )
+  }, [videoMetadata])
+
+  useEffect(() => {
+    const currentRecipe = history[historyIndex] ?? DEFAULT_RECIPE
+    setRecipe(currentRecipe)
+  }, [historyIndex, history])
 
   const handleFileSelect = useCallback(async (selectedFile: File) => {
-    setResult(null);
-    setStatus("idle");
-    setError(null);
-    setFile(null);
-    setVideoMetadata(null);
-    if (!selectedFile.type.startsWith("video/")) {
-      setFileError("Please upload a video file only.");
-      return;
+    setResult(null)
+    setStatus('idle')
+    setError(null)
+    setFile(null)
+    setVideoMetadata(null)
+    if (!selectedFile.type.startsWith('video/')) {
+      setFileError('Please upload a video file only.')
+      return
     }
 
-    setFileError("");
+    setHistory([
+      {
+        ...DEFAULT_RECIPE,
+        trimStart: 0,
+        trimEnd: null
+      }
+    ])
+
+    setHistoryIndex(0)
+
+    setFileError('')
 
     // LAYER 0: Size check
     if (selectedFile.size > MAX_FILE_SIZE) {
-      setError(`Validation Failed: File too large. Maximum size is 2GB.`);
-      setStatus("error");
-      return;
+      setError(`Validation Failed: File too large. Maximum size is 2GB.`)
+      setStatus('error')
+      return
     }
 
-    const validExtensions = ['.mp4', '.mov', '.avi', '.webm', '.mkv'];
-    const filename = selectedFile.name.toLowerCase();
-    const hasValidExtension = validExtensions.some(ext => filename.endsWith(ext));
+    // LAYER 1: Extension check
+    const validExtensions = ['.mp4', '.mov', '.avi', '.webm', '.mkv']
+    const filename = selectedFile.name.toLowerCase()
+    const hasValidExtension = validExtensions.some(ext =>
+      filename.endsWith(ext)
+    )
     if (!hasValidExtension) {
-      setError(`Layer 1 Validation Failed: Invalid file extension. Expected one of: ${validExtensions.join(', ')}`);
-      setStatus("error");
-      return;
+      setError(
+        `Layer 1 Validation Failed: Invalid file extension. Expected one of: ${validExtensions.join(
+          ', '
+        )}`
+      )
+      setStatus('error')
+      return
     }
 
-    if (!selectedFile.type.startsWith("video/")) {
-      setError(`Layer 2 Validation Failed: Invalid MIME type. Expected video/*, got ${selectedFile.type || 'unknown'}`);
-      setStatus("error");
-      return;
+    if (!selectedFile.type.startsWith('video/')) {
+      setError(
+        `Layer 2 Validation Failed: Invalid MIME type. Expected video/*, got ${
+          selectedFile.type || 'unknown'
+        }`
+      )
+      setStatus('error')
+      return
     }
 
-    const isVideo = await verifyMagicBytes(selectedFile);
+    const isVideo = await verifyMagicBytes(selectedFile)
     if (!isVideo) {
-      setError("Layer 3 Validation Failed: Invalid file content. The file's magic bytes do not match known video formats.");
-      setStatus("error");
-      return;
+      setError(
+        "Layer 3 Validation Failed: Invalid file content. The file's magic bytes do not match known video formats."
+      )
+      setStatus('error')
+      return
     }
 
     try {
-      const { width, height, duration: dur } = await extractMetadata(selectedFile);
-      setDuration(dur);
-      setVideoMetadata({ width, height, duration: dur });
-      setFile(selectedFile);
-      setRecipe((prev) => {
-        const suggestedPreset = suggestPreset(width, height);
-        const shouldApplySuggestion = prev.preset === DEFAULT_RECIPE.preset;
+      const {
+        width,
+        height,
+        duration: dur
+      } = await extractMetadata(selectedFile)
+      setDuration(dur)
+      setVideoMetadata({ width, height, duration: dur })
+      setFile(selectedFile)
+      setRecipe(prev => {
+        const suggestedPreset = suggestPreset(width, height)
+        const shouldApplySuggestion = prev.preset === DEFAULT_RECIPE.preset
 
         return {
           ...prev,
           trimStart: 0,
           trimEnd: null,
-          ...(shouldApplySuggestion ? { preset: suggestedPreset } : {}),
-        };
-      });
+          ...(shouldApplySuggestion ? { preset: suggestedPreset } : {})
+        }
+      })
     } catch (err) {
-      setError(`Layer 4 Validation Failed: ${err instanceof Error ? err.message : "Unknown error"}`);
-      setStatus("error");
+      setError(
+        `Layer 4 Validation Failed: ${
+          err instanceof Error ? err.message : 'Unknown error'
+        }`
+      )
+      setStatus('error')
     }
-  }, []);
+  }, [])
 
   const handleExport = useCallback(async () => {
-    if (!file) return;
-    if (status === "loading-engine" || status === "exporting") {
-      return;
+    if (!file) return
+    if (status === 'loading-engine' || status === 'exporting') {
+      return
     }
 
-    const validationError = validateRecipe(recipe, duration);
+    const validationError = validateRecipe(recipe, duration)
     if (validationError) {
-      setError(validationError);
-      setStatus("error");
-      return;
+      setError(validationError)
+      setStatus('error')
+      return
     }
 
-    const abortController = new AbortController();
-    exportAbortControllerRef.current = abortController;
-    exportCancelledRef.current = false;
+    const abortController = new AbortController()
+    exportAbortControllerRef.current = abortController
+    exportCancelledRef.current = false
 
     try {
-      setStatus("loading-engine");
-      setProgress(0);
-      setError(null);
-      if (result?.blobUrl) URL.revokeObjectURL(result.blobUrl);
-      setResult(null);
+      setStatus('loading-engine')
+      setProgress(0)
+      setError(null)
+      if (result?.blobUrl) URL.revokeObjectURL(result.blobUrl)
+      setResult(null)
 
-      const ffmpeg = await loadFFmpeg(abortController.signal);
-      if (exportCancelledRef.current) return;
+      const ffmpeg = await loadFFmpeg(abortController.signal)
+      if (exportCancelledRef.current) return
 
-      setStatus("exporting");
+      setStatus('exporting')
 
       const exportResult = await exportVideo(
         ffmpeg,
@@ -424,183 +530,215 @@ export function useVideoEditor() {
           file: musicFile,
           musicVolume,
           originalAudioVolume,
-          loopMusic,
+          loopMusic
         },
         {
           file: overlayFile,
           position: overlayPosition,
           size: overlaySize,
-          opacity: overlayOpacity,
+          opacity: overlayOpacity
         }
-      );
-      if (exportCancelledRef.current) return;
+      )
+      if (exportCancelledRef.current) return
 
-      setResult(exportResult);
-      setStatus("done");
-     }  catch (err) {
-      if (exportCancelledRef.current) return;
+      setResult(exportResult)
+      setStatus('done')
+    } catch (err) {
+      if (exportCancelledRef.current) return
 
-      console.error("export failed:", err);
+      console.error('export failed:', err)
       if (err instanceof FFmpegLoadError) {
-        setError(err.message);
+        setError(err.message)
       } else if (err instanceof Error && err.message.includes('network')) {
-        setError('Network error. Check your internet connection and try again.');
+        setError('Network error. Check your internet connection and try again.')
       } else if (err instanceof Error && err.message.includes('codec')) {
-        setError('This video format is not supported. Try converting to MP4 first.');
+        setError(
+          'This video format is not supported. Try converting to MP4 first.'
+        )
       } else {
-        setError('Export failed. Please try again or use a different video.');
+        setError('Export failed. Please try again or use a different video.')
       }
-      setStatus("error");
-    }
-    finally {
+      setStatus('error')
+    } finally {
       if (exportAbortControllerRef.current === abortController) {
-        exportAbortControllerRef.current = null;
+        exportAbortControllerRef.current = null
       }
     }
-  }, [file, recipe, result, status, overlayFile, overlayPosition, overlaySize, overlayOpacity, duration, loopMusic, musicFile, musicVolume, originalAudioVolume]);
-
+  }, [
+    file,
+    recipe,
+    result,
+    status,
+    overlayFile,
+    overlayPosition,
+    overlaySize,
+    overlayOpacity,
+    duration,
+    loopMusic,
+    musicFile,
+    musicVolume,
+    originalAudioVolume
+  ])
 
   useEffect(() => {
-    if (status === "exporting") {
-      document.title = `Exporting ${progress}% | Reframe`;
-    } else if (status === "loading-engine") {
-      document.title = `Loading engine... | Reframe`;
-    } else if (status === "done") {
-      document.title = `Export complete | Reframe`;
+    if (status === 'exporting') {
+      document.title = `Exporting ${progress}% | Reframe`
+    } else if (status === 'loading-engine') {
+      document.title = `Loading engine... | Reframe`
+    } else if (status === 'done') {
+      document.title = `Export complete | Reframe`
     } else if (file) {
-      document.title = `Editing: ${file.name} | Reframe`;
+      document.title = `Editing: ${file.name} | Reframe`
     } else {
-      document.title = DEFAULT_TITLE;
+      document.title = DEFAULT_TITLE
     }
+
     return () => {
-      document.title = DEFAULT_TITLE;
-    };
-  }, [status, progress, file]);
+      document.title = DEFAULT_TITLE
+    }
+  }, [status, progress, file])
 
   useEffect(() => {
     const shouldWarn =
-      status === "exporting" ||
-      status === "loading-engine" ||
-      status === "done";
+      status === 'exporting' || status === 'loading-engine' || status === 'done'
 
-    if (!shouldWarn) return;
+    if (!shouldWarn) return
 
     const handler = (e: BeforeUnloadEvent) => {
-      e.preventDefault();
-    };
+      e.preventDefault()
+    }
+
+    window.addEventListener('beforeunload', handler)
+    return () => window.removeEventListener('beforeunload', handler)
+  }, [status])
 
-    window.addEventListener("beforeunload", handler);
-    return () => window.removeEventListener("beforeunload", handler);
-  }, [status]);
-  
   useEffect(() => {
     const handleKeydown = (e: KeyboardEvent) => {
+      const isModifier = e.ctrlKey || e.metaKey
+
       if (
-        (e.ctrlKey || e.metaKey) &&
-        e.key === "Enter" &&
+        isModifier &&
+        e.key === 'Enter' &&
         file &&
-        status !== "loading-engine" &&
-        status !== "exporting"
+        status !== 'loading-engine' &&
+        status !== 'exporting'
+      ) {
+        e.preventDefault()
+        handleExport()
+        return
+      }
+
+      if (isModifier && e.key.toLowerCase() === 'z' && !e.shiftKey) {
+        e.preventDefault()
+        undo()
+        return
+      }
+
+      if (
+        isModifier &&
+        ((e.key.toLowerCase() === 'z' && e.shiftKey) ||
+          e.key.toLowerCase() === 'y')
       ) {
-        handleExport();
+        e.preventDefault()
+        redo()
       }
-    };
+    }
 
-    document.addEventListener("keydown", handleKeydown);
+    document.addEventListener('keydown', handleKeydown)
     return () => {
-      document.removeEventListener("keydown", handleKeydown);
-    };
-  }, [file, status, handleExport]);
+      document.removeEventListener('keydown', handleKeydown)
+    }
+  }, [file, status, handleExport, undo, redo])
 
   // M key: toggle audio mute — only when a file is loaded and focus isn't in a text field
   useEffect(() => {
-    if (!file) return;
+    if (!file) return
 
     const handleMuteShortcut = (e: KeyboardEvent) => {
-      if (e.key.toLowerCase() !== "m" || e.ctrlKey || e.metaKey || e.altKey) return;
+      if (e.key.toLowerCase() !== 'm' || e.ctrlKey || e.metaKey || e.altKey)
+        return
 
-      const target = e.target as HTMLElement;
+      const target = e.target as HTMLElement
       if (
-        target.tagName === "INPUT" ||
-        target.tagName === "TEXTAREA" ||
+        target.tagName === 'INPUT' ||
+        target.tagName === 'TEXTAREA' ||
         target.isContentEditable
       ) {
-        return;
+        return
       }
 
-      setRecipe((prev) => ({ ...prev, keepAudio: !prev.keepAudio }));
-    };
+      setRecipe(prev => ({ ...prev, keepAudio: !prev.keepAudio }))
+    }
+
+    document.addEventListener('keydown', handleMuteShortcut)
+    return () => {
+      document.removeEventListener('keydown', handleMuteShortcut)
+    }
+  }, [file])
 
-    document.addEventListener("keydown", handleMuteShortcut);
+  useEffect(() => {
     return () => {
-      document.removeEventListener("keydown", handleMuteShortcut);
-    };
-  }, [file]);
-
-  useEffect(()=>{
-    return ()=>{
-      if(result?.blobUrl){
-        URL.revokeObjectURL(result.blobUrl);
+      if (result?.blobUrl) {
+        URL.revokeObjectURL(result.blobUrl)
       }
     }
-   },[result?.blobUrl])
+  }, [result?.blobUrl])
 
   useEffect(() => {
     return () => {
-      terminateFFmpeg();
-    };
-  }, []);
+      terminateFFmpeg()
+    }
+  }, [])
 
   const resetSettings = useCallback(() => {
-    setRecipe(DEFAULT_RECIPE);
+    setRecipe(DEFAULT_RECIPE)
     try {
-      localStorage.removeItem(STORAGE_KEY);
+      localStorage.removeItem(STORAGE_KEY)
     } catch {
       // ignore
     }
-  }, []);
+  }, [])
 
   const cancelExport = useCallback(() => {
-    exportCancelledRef.current = true;
-    exportAbortControllerRef.current?.abort();
-    exportAbortControllerRef.current = null;
-    terminateFFmpeg();
-    setStatus("idle");
-    setProgress(0);
-    setError(null);
-  }, []);
-
+    exportCancelledRef.current = true
+    exportAbortControllerRef.current?.abort()
+    exportAbortControllerRef.current = null
+    terminateFFmpeg()
+    setStatus('idle')
+    setProgress(0)
+    setError(null)
+  }, [])
 
   const reset = useCallback(() => {
-    if (result?.blobUrl) URL.revokeObjectURL(result.blobUrl);
-    setFile(null);
-    setVideoMetadata(null);
-    setDuration(0);
-    setRecipe(DEFAULT_RECIPE);
-    setStatus("idle");
-    setProgress(0);
-    setResult(null);
-    setError(null);
+    if (result?.blobUrl) URL.revokeObjectURL(result.blobUrl)
+    setFile(null)
+    setVideoMetadata(null)
+    setDuration(0)
+    setHistory([DEFAULT_RECIPE])
+    setHistoryIndex(0)
+    setStatus('idle')
+    setProgress(0)
+    setResult(null)
+    setError(null)
     try {
-      localStorage.removeItem(STORAGE_KEY);
+      localStorage.removeItem(STORAGE_KEY)
     } catch {
       // ignore
     }
-  }, [result]);
-
+  }, [result])
 
   useEffect(() => {
-    localStorage.setItem("soundOnCompletion", String(recipe.soundOnCompletion));
-  }, [recipe.soundOnCompletion]);
+    localStorage.setItem('soundOnCompletion', String(recipe.soundOnCompletion))
+  }, [recipe.soundOnCompletion])
   const seekTo = useCallback((time: number) => {
     if (videoRef.current) {
-      videoRef.current.currentTime = time;
+      videoRef.current.currentTime = time
     }
-  }, []);
+  }, [])
 
   const toggleSound = useCallback(() => {
-  updateRecipe({ soundOnCompletion: !recipe.soundOnCompletion });
-}, [recipe.soundOnCompletion, updateRecipe]);
+    updateRecipe({ soundOnCompletion: !recipe.soundOnCompletion })
+  }, [recipe.soundOnCompletion, updateRecipe])
 
   return {
     file,
@@ -613,11 +751,15 @@ export function useVideoEditor() {
     videoRef,
     seekTo,
     updateRecipe,
+    undo,
+    redo,
+    canUndo: historyIndex > 0,
+    canRedo: historyIndex < history.length - 1,
     handleFileSelect,
     fileError,
     handleExport,
-    cancelExport,
     reset,
+    cancelExport,
     resetSettings,
     musicFile,
     setMusicFile,
@@ -636,6 +778,6 @@ export function useVideoEditor() {
     overlayOpacity,
     setOverlayOpacity,
     recommendedPreset,
-    toggleSound,
-  };
-}
\ No newline at end of file
+    toggleSound
+  }
+}