diff --git a/src/mainview/App.tsx b/src/mainview/App.tsx
index 06a51ac..bad58d3 100644
--- a/src/mainview/App.tsx
+++ b/src/mainview/App.tsx
@@ -1,56 +1,34 @@
+import { useLayoutEffect, useRef, useState } from "react";
 import { useVideoEditor } from "./hooks/useVideoEditor";
 import { Header } from "./components/Header";
 import { DownloadPage } from "./components/DownloadPage";
 import { LandingPage } from "./components/LandingPage";
 import { EditorPage } from "./components/EditorPage";
-import { OUTPUT_FORMATS } from "./constants";
+import { VideoEditorProvider } from "./context/VideoEditorContext";
 
 const App = () => {
+	const editorState = useVideoEditor();
 	const {
 		videoSrc,
-		position,
-		setPosition,
-		isPlaying,
-		setIsPlaying,
-		start,
-		setStart,
-		end,
-		setEnd,
-		videoDuration,
-		reencode,
-		setReencode,
-		outputFormat,
-		setOutputFormat,
-		bitrate,
-		setBitrate,
-		clipDuration,
-		outputWidth,
-		setOutputWidth,
-		outputHeight,
-		setOutputHeight,
-		originalWidth,
-		originalHeight,
-		lockAspectRatio,
-		setLockAspectRatio,
-		originalFps,
-		outputFps,
-		setOutputFps,
-		useNativeExport,
-		hasHwAccSupport,
-		hwAcc,
-		setHwAcc,
-		exporting,
-		exportProgress,
-		exportError,
-		exportSuccess,
 		currentPage,
 		setCurrentPage,
 		handleFileSelect,
 		handleNativeBrowse,
 		handleChangeVideo,
-		exportVideo,
-		isConverting,
-	} = useVideoEditor();
+	} = editorState;
+
+	const cardRef = useRef<HTMLDivElement>(null);
+	const [cardHeight, setCardHeight] = useState<number | undefined>(undefined);
+
+	useLayoutEffect(() => {
+		const element = cardRef.current;
+		if (element) {
+			const newHeight = element.offsetHeight;
+			if (newHeight !== cardHeight) {
+				setCardHeight(newHeight);
+			}
+		}
+	});
 
 	return (
 		<div className="flex flex-col bg-mocha-base min-h-screen text-mocha-text relative overflow-hidden">
@@ -70,65 +48,33 @@ const App = () => {
 			{currentPage === "download" || !videoSrc ? (
 				<div className="flex-1 flex flex-col items-center justify-center p-6 relative z-10 w-full">
 					<div
-						className={`bg-mocha-surface0/60 backdrop-blur-md rounded-2xl border border-mocha-surface0 shadow-2xl w-full transition-all relative overflow-hidden ${
-							currentPage === "download"
-								? "max-w-3xl p-6 md:p-10"
-								: "max-w-2xl p-8 md:p-12"
+						className={`bg-mocha-surface0/60 backdrop-blur-md rounded-2xl border border-mocha-surface0 shadow-2xl w-full transition-all ease-in-out relative overflow-hidden ${
+							currentPage === "download" ? "max-w-3xl" : "max-w-2xl"
 						}`}
+						style={{ height: cardHeight ? `${cardHeight}px` : "auto" }}
 					>
-						{currentPage === "download" ? (
-							<DownloadPage onNavigateEditor={() => setCurrentPage("editor")} />
-						) : (
-							<LandingPage
-								onFileSelect={handleFileSelect}
-								onNativeBrowse={handleNativeBrowse}
-								onNavigateDownload={() => setCurrentPage("download")}
-							/>
-						)}
+						<div
+							ref={cardRef}
+							className={`w-full transition-all duration-500 ease-in-out ${
+								currentPage === "download" ? "p-6 md:p-10" : "p-8 md:p-12"
+							}`}
+						>
+							{currentPage === "download" ? (
+								<DownloadPage onNavigateEditor={() => setCurrentPage("editor")} />
+							) : (
+								<LandingPage
+									onFileSelect={handleFileSelect}
+									onNativeBrowse={handleNativeBrowse}
+									onNavigateDownload={() => setCurrentPage("download")}
+								/>
+							)}
+						</div>
 					</div>
 				</div>
 			) : (
-				<EditorPage
-					videoSrc={videoSrc}
-					position={position}
-					setPosition={setPosition}
-					isPlaying={isPlaying}
-					setIsPlaying={setIsPlaying}
-					start={start}
-					setStart={setStart}
-					end={end}
-					setEnd={setEnd}
-					videoDuration={videoDuration}
-					reencode={reencode}
-					setReencode={setReencode}
-					outputFormat={outputFormat}
-					setOutputFormat={setOutputFormat}
-					outputFormats={OUTPUT_FORMATS}
-					isConverting={isConverting}
-					bitrate={bitrate}
-					setBitrate={setBitrate}
-					clipDuration={clipDuration}
-					outputWidth={outputWidth}
-					setOutputWidth={setOutputWidth}
-					outputHeight={outputHeight}
-					setOutputHeight={setOutputHeight}
-					originalWidth={originalWidth}
-					originalHeight={originalHeight}
-					lockAspectRatio={lockAspectRatio}
-					setLockAspectRatio={setLockAspectRatio}
-					originalFps={originalFps}
-					outputFps={outputFps}
-					setOutputFps={setOutputFps}
-					useNativeExport={useNativeExport}
-					hasHwAccSupport={hasHwAccSupport}
-					hwAcc={hwAcc}
-					setHwAcc={setHwAcc}
-					exporting={exporting}
-					exportProgress={exportProgress}
-					exportError={exportError}
-					exportSuccess={exportSuccess}
-					onExport={exportVideo}
-				/>
+				<VideoEditorProvider value={editorState}>
+					<EditorPage />
+				</VideoEditorProvider>
 			)}
 		</div>
 	);
diff --git a/src/mainview/components/EditorPage.tsx b/src/mainview/components/EditorPage.tsx
index 78111f7..f598816 100644
--- a/src/mainview/components/EditorPage.tsx
+++ b/src/mainview/components/EditorPage.tsx
@@ -3,166 +3,24 @@ import { Timeline } from "./Timeline";
 import { EncoderSettings } from "./EncoderSettings";
 import { ExportPanel } from "./ExportPanel";
 
-interface OutputFormat {
-	readonly label: string;
-	readonly ext: string;
-	readonly mime: string;
-}
-
-interface EditorPageProps {
-	// Video & playback
-	videoSrc: string;
-	position: number;
-	setPosition: (value: number) => void;
-	isPlaying: boolean;
-	setIsPlaying: (value: boolean) => void;
-	start: number;
-	setStart: (value: number) => void;
-	end: number;
-	setEnd: (value: number) => void;
-	videoDuration: number;
-
-	// Encoder settings
-	reencode: boolean;
-	setReencode: (value: boolean) => void;
-	outputFormat: string;
-	setOutputFormat: (value: string) => void;
-	outputFormats: readonly OutputFormat[];
-	isConverting: boolean;
-	bitrate: number;
-	setBitrate: (value: number) => void;
-	clipDuration: number;
-	outputWidth: number;
-	setOutputWidth: (value: number) => void;
-	outputHeight: number;
-	setOutputHeight: (value: number) => void;
-	originalWidth: number;
-	originalHeight: number;
-	lockAspectRatio: boolean;
-	setLockAspectRatio: (value: boolean) => void;
-	originalFps: number | null;
-	outputFps: number | null;
-	setOutputFps: (value: number | null) => void;
-	useNativeExport: boolean;
-	hasHwAccSupport: boolean;
-	hwAcc: boolean;
-	setHwAcc: (value: boolean) => void;
-
-	// Export
-	exporting: boolean;
-	exportProgress: number;
-	exportError: string | null;
-	exportSuccess: string | null;
-	onExport: () => void;
-}
-
-export const EditorPage = ({
-	videoSrc,
-	position,
-	setPosition,
-	isPlaying,
-	setIsPlaying,
-	start,
-	setStart,
-	end,
-	setEnd,
-	videoDuration,
-	reencode,
-	setReencode,
-	outputFormat,
-	setOutputFormat,
-	outputFormats,
-	isConverting,
-	bitrate,
-	setBitrate,
-	clipDuration,
-	outputWidth,
-	setOutputWidth,
-	outputHeight,
-	setOutputHeight,
-	originalWidth,
-	originalHeight,
-	lockAspectRatio,
-	setLockAspectRatio,
-	originalFps,
-	outputFps,
-	setOutputFps,
-	useNativeExport,
-	hasHwAccSupport,
-	hwAcc,
-	setHwAcc,
-	exporting,
-	exportProgress,
-	exportError,
-	exportSuccess,
-	onExport,
-}: EditorPageProps) => (
+export const EditorPage = () => (
 	<main className="flex-1 p-6 flex flex-col lg:flex-row gap-6 max-w-7xl w-full mx-auto relative z-10">
 		{/* Left column: Player + Timeline */}
 		<div className="flex-1 flex flex-col gap-6">
-			<Player
-				videoSrc={videoSrc}
-				positionState={{ position, setPosition }}
-				isPlayingState={{ isPlaying, setIsPlaying }}
-				startState={{ start, setStart }}
-				endState={{ end, setEnd }}
-				videoDuration={videoDuration}
-			/>
+			<Player />
 
 			<div className="bg-mocha-surface0 rounded-xl p-5 border border-mocha-surface0 shadow-lg">
 				<h3 className="text-xs font-semibold uppercase tracking-wider text-mocha-subtext0 mb-4 select-none">
 					Timeline & Trim Controls
 				</h3>
-				<Timeline
-					startState={{ start, setStart }}
-					endState={{ end, setEnd }}
-					positionState={{ position, setPosition }}
-					videoDuration={videoDuration}
-				/>
+				<Timeline />
 			</div>
 		</div>
 
 		{/* Right column: Encoder & Export Settings Sidebar */}
 		<div className="w-full lg:w-80 flex flex-col gap-6">
-			<EncoderSettings
-				reencode={reencode}
-				setReencode={setReencode}
-				outputFormat={outputFormat}
-				setOutputFormat={setOutputFormat}
-				outputFormats={outputFormats}
-				isConverting={isConverting}
-				bitrate={bitrate}
-				setBitrate={setBitrate}
-				clipDuration={clipDuration}
-				outputWidth={outputWidth}
-				setOutputWidth={setOutputWidth}
-				outputHeight={outputHeight}
-				setOutputHeight={setOutputHeight}
-				originalWidth={originalWidth}
-				originalHeight={originalHeight}
-				lockAspectRatio={lockAspectRatio}
-				setLockAspectRatio={setLockAspectRatio}
-				originalFps={originalFps}
-				outputFps={outputFps}
-				setOutputFps={setOutputFps}
-				useNativeExport={useNativeExport}
-				hasHwAccSupport={hasHwAccSupport}
-				hwAcc={hwAcc}
-				setHwAcc={setHwAcc}
-			/>
-
-			<ExportPanel
-				start={start}
-				end={end}
-				videoDuration={videoDuration}
-				outputFormat={outputFormat}
-				exporting={exporting}
-				exportProgress={exportProgress}
-				exportError={exportError}
-				exportSuccess={exportSuccess}
-				useNativeExport={useNativeExport}
-				onExport={onExport}
-			/>
+			<EncoderSettings />
+			<ExportPanel />
 		</div>
 	</main>
 );
diff --git a/src/mainview/components/EncoderSettings.tsx b/src/mainview/components/EncoderSettings.tsx
index ae2eb7f..5652f72 100644
--- a/src/mainview/components/EncoderSettings.tsx
+++ b/src/mainview/components/EncoderSettings.tsx
@@ -1,244 +1,216 @@
+import { useVideoEditorContext } from "../context/VideoEditorContext";
 import { ToggleSwitch } from "./ToggleSwitch";
 import { BitrateHandler } from "./BitrateHandler";
+import { OUTPUT_FORMATS } from "../constants";
 
-interface OutputFormat {
-	readonly label: string;
-	readonly ext: string;
-	readonly mime: string;
-}
+export const EncoderSettings = () => {
+	const {
+		reencode,
+		setReencode,
+		outputFormat,
+		setOutputFormat,
+		isConverting,
+		bitrate,
+		setBitrate,
+		clipDuration,
+		outputWidth,
+		setOutputWidth,
+		outputHeight,
+		setOutputHeight,
+		originalWidth,
+		originalHeight,
+		lockAspectRatio,
+		setLockAspectRatio,
+		originalFps,
+		outputFps,
+		setOutputFps,
+		useNativeExport,
+		hasHwAccSupport,
+		hwAcc,
+		setHwAcc,
+	} = useVideoEditorContext();
 
-interface EncoderSettingsProps {
-	reencode: boolean;
-	setReencode: (value: boolean) => void;
-	outputFormat: string;
-	setOutputFormat: (value: string) => void;
-	outputFormats: readonly OutputFormat[];
-	isConverting: boolean;
-	bitrate: number;
-	setBitrate: (value: number) => void;
-	clipDuration: number;
-	outputWidth: number;
-	setOutputWidth: (value: number) => void;
-	outputHeight: number;
-	setOutputHeight: (value: number) => void;
-	originalWidth: number;
-	originalHeight: number;
-	lockAspectRatio: boolean;
-	setLockAspectRatio: (value: boolean) => void;
-	originalFps: number | null;
-	outputFps: number | null;
-	setOutputFps: (value: number | null) => void;
-	useNativeExport: boolean;
-	hasHwAccSupport: boolean;
-	hwAcc: boolean;
-	setHwAcc: (value: boolean) => void;
-}
+	return (
+		<div className="bg-mocha-surface0 rounded-xl p-5 border border-mocha-surface0 shadow-lg flex flex-col gap-4">
+			<h2 className="text-sm font-bold uppercase tracking-wider text-mocha-subtext0 border-b border-mocha-surface1 pb-2">
+				Encoder Settings
+			</h2>
 
-export const EncoderSettings = ({
-	reencode,
-	setReencode,
-	outputFormat,
-	setOutputFormat,
-	outputFormats,
-	isConverting,
-	bitrate,
-	setBitrate,
-	clipDuration,
-	outputWidth,
-	setOutputWidth,
-	outputHeight,
-	setOutputHeight,
-	originalWidth,
-	originalHeight,
-	lockAspectRatio,
-	setLockAspectRatio,
-	originalFps,
-	outputFps,
-	setOutputFps,
-	useNativeExport,
-	hasHwAccSupport,
-	hwAcc,
-	setHwAcc,
-}: EncoderSettingsProps) => (
-	<div className="bg-mocha-surface0 rounded-xl p-5 border border-mocha-surface0 shadow-lg flex flex-col gap-4">
-		<h2 className="text-sm font-bold uppercase tracking-wider text-mocha-subtext0 border-b border-mocha-surface1 pb-2">
-			Encoder Settings
-		</h2>
-
-		{/* Re-encode toggle */}
-		<div className="flex items-center justify-between bg-mocha-mantle/50 p-3 rounded-lg border border-mocha-surface1">
-			<div className="flex flex-col">
-				<span className="text-xs font-bold text-mocha-text">Re-encode Video</span>
-				<span className="text-[10px] text-mocha-subtext0">Required for custom settings</span>
-			</div>
-			<ToggleSwitch
-				checked={reencode}
-				onChange={() => setReencode(!reencode)}
-			/>
-		</div>
-
-		{/* Hardware Acceleration toggle (desktop standalone only) */}
-		{useNativeExport && (
-			<div className={`flex items-center justify-between bg-mocha-mantle/50 p-3 rounded-lg border border-mocha-surface1 transition-all ${!hasHwAccSupport ? "opacity-50" : ""}`}>
+			{/* Re-encode toggle */}
+			<div className="flex items-center justify-between bg-mocha-mantle/50 p-3 rounded-lg border border-mocha-surface1">
 				<div className="flex flex-col">
-					<span className="text-xs font-bold text-mocha-text">Hardware Acceleration</span>
-					<span className="text-[10px] text-mocha-subtext0">
-						{hasHwAccSupport ? "Speeds up encoding using GPU" : "No compatible GPU encoder detected"}
-					</span>
+					<span className="text-xs font-bold text-mocha-text">Re-encode Video</span>
+					<span className="text-[10px] text-mocha-subtext0">Required for custom settings</span>
 				</div>
 				<ToggleSwitch
-					checked={hwAcc && hasHwAccSupport}
-					onChange={() => setHwAcc(!hwAcc)}
-					disabled={!hasHwAccSupport}
+					checked={reencode}
+					onChange={() => setReencode(!reencode)}
 				/>
 			</div>
-		)}
 
-		{/* Output format selector */}
-		<div>
-			<label
-				htmlFor="format-select"
-				className="block text-xs font-bold text-mocha-subtext0 mb-1"
-			>
-				Output Format
-			</label>
-			<div className="relative">
-				<select
-					id="format-select"
-					value={outputFormat}
-					onChange={(e) => setOutputFormat(e.target.value)}
-					className="w-full border border-mocha-surface2 rounded-lg px-3 py-2 text-xs text-mocha-text bg-mocha-surface0 focus:outline-none focus:ring-2 focus:ring-mocha-mauve focus:border-transparent appearance-none cursor-pointer"
-				>
-					{outputFormats.map((fmt) => (
-						<option key={fmt.ext} value={fmt.ext}>
-							{fmt.label}
-						</option>
-					))}
-				</select>
-				<div className="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2.5 text-mocha-subtext0 text-xs">
-					▼
+			{/* Hardware Acceleration toggle (desktop standalone only) */}
+			{useNativeExport && (
+				<div className={`flex items-center justify-between bg-mocha-mantle/50 p-3 rounded-lg border border-mocha-surface1 transition-all ${!hasHwAccSupport ? "opacity-50" : ""}`}>
+					<div className="flex flex-col">
+						<span className="text-xs font-bold text-mocha-text">Hardware Acceleration</span>
+						<span className="text-[10px] text-mocha-subtext0">
+							{hasHwAccSupport ? "Speeds up encoding using GPU" : "No compatible GPU encoder detected"}
+						</span>
+					</div>
+					<ToggleSwitch
+						checked={hwAcc && hasHwAccSupport}
+						onChange={() => setHwAcc(!hwAcc)}
+						disabled={!hasHwAccSupport}
+					/>
 				</div>
-			</div>
-			{isConverting && (
-				<p className="text-[10px] text-mocha-peach italic mt-1">
-					Format conversion requires re-encoding
-				</p>
 			)}
-		</div>
 
-		{/* Bitrate controls */}
-		<div className="border-t border-mocha-surface1 pt-3">
-			<BitrateHandler
-				bitrate={bitrate}
-				setBitrate={setBitrate}
-				clipDuration={clipDuration}
-				disabled={!reencode}
-			/>
-		</div>
+			{/* Output format selector */}
+			<div>
+				<label
+					htmlFor="format-select"
+					className="block text-xs font-bold text-mocha-subtext0 mb-1"
+				>
+					Output Format
+				</label>
+				<div className="relative">
+					<select
+						id="format-select"
+						value={outputFormat}
+						onChange={(e) => setOutputFormat(e.target.value)}
+						className="w-full border border-mocha-surface2 rounded-lg px-3 py-2 text-xs text-mocha-text bg-mocha-surface0 focus:outline-none focus:ring-2 focus:ring-mocha-mauve focus:border-transparent appearance-none cursor-pointer"
+					>
+						{OUTPUT_FORMATS.map((fmt) => (
+							<option key={fmt.ext} value={fmt.ext}>
+								{fmt.label}
+							</option>
+						))}
+					</select>
+					<div className="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2.5 text-mocha-subtext0 text-xs">
+						▼
+					</div>
+				</div>
+				{isConverting && (
+					<p className="text-[10px] text-mocha-peach italic mt-1">
+						Format conversion requires re-encoding
+					</p>
+				)}
+			</div>
 
-		{/* Resolution controls */}
-		<div className={`border-t border-mocha-surface1 pt-3 ${!reencode ? 'opacity-50 pointer-events-none' : ''}`}>
-			<label className="block text-xs font-bold text-mocha-subtext0 mb-1">
-				Resolution
-			</label>
-			<div className="flex items-center gap-2">
-				<input
-					type="number"
-					value={outputWidth}
-					onChange={(e) => {
-						const w = parseInt(e.target.value) || originalWidth;
-						setOutputWidth(w);
-						if (lockAspectRatio && originalWidth > 0) {
-							setOutputHeight(Math.round(w * (originalHeight / originalWidth)));
-						}
-					}}
+			{/* Bitrate controls */}
+			<div className="border-t border-mocha-surface1 pt-3">
+				<BitrateHandler
+					bitrate={bitrate}
+					setBitrate={setBitrate}
+					clipDuration={clipDuration}
 					disabled={!reencode}
-					className="w-full border border-mocha-surface2 rounded-lg px-2.5 py-1.5 text-xs text-mocha-text bg-mocha-surface0 focus:outline-none focus:ring-2 focus:ring-mocha-mauve disabled:opacity-50"
 				/>
-				<span className="text-mocha-overlay1 text-sm select-none">×</span>
-				<input
-					type="number"
-					value={outputHeight}
-					onChange={(e) => {
-						const h = parseInt(e.target.value) || originalHeight;
-						setOutputHeight(h);
-						if (lockAspectRatio && originalHeight > 0) {
-							setOutputWidth(Math.round(h * (originalWidth / originalHeight)));
-						}
-					}}
-					disabled={!reencode}
-					className="w-full border border-mocha-surface2 rounded-lg px-2.5 py-1.5 text-xs text-mocha-text bg-mocha-surface0 focus:outline-none focus:ring-2 focus:ring-mocha-mauve disabled:opacity-50"
-				/>
-				<button
-					onClick={() => setLockAspectRatio(!lockAspectRatio)}
-					disabled={!reencode}
-					className={`p-1.5 rounded-lg text-xs transition-colors ${
-						lockAspectRatio
-							? 'bg-mocha-mauve/20 text-mocha-mauve'
-							: 'bg-mocha-surface1 text-mocha-overlay1'
-					} hover:bg-mocha-mauve/30 disabled:opacity-50`}
-					title={lockAspectRatio ? 'Aspect ratio locked' : 'Aspect ratio unlocked'}
-				>
-					{lockAspectRatio ? '🔗' : '🔓'}
-				</button>
-				<button
-					onClick={() => {
-						setOutputWidth(originalWidth);
-						setOutputHeight(originalHeight);
-					}}
-					disabled={!reencode || (outputWidth === originalWidth && outputHeight === originalHeight)}
-					className="px-2 py-1.5 rounded-lg text-[10px] font-semibold bg-mocha-surface1 text-mocha-subtext0 hover:bg-mocha-surface2 transition-colors disabled:opacity-30"
-					title="Reset to original resolution"
-				>
-					Reset
-				</button>
 			</div>
-			<p className="text-[10px] text-mocha-overlay0 mt-1 select-none">
-				Original: {originalWidth}×{originalHeight}
-			</p>
-		</div>
 
-		{/* Framerate control */}
-		<div className={`border-t border-mocha-surface1 pt-3 ${!reencode ? 'opacity-50 pointer-events-none' : ''}`}>
-			<label className="block text-xs font-bold text-mocha-subtext0 mb-1">
-				Framerate (FPS)
-			</label>
-			<div className="flex items-center gap-2">
-				{originalFps === null ? (
-					<div className="flex items-center gap-2 py-1.5">
-						<svg className="animate-spin h-3.5 w-3.5 text-mocha-mauve" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-							<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
-							<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-						</svg>
-						<span className="text-[10px] text-mocha-subtext0 font-medium">Detecting...</span>
-					</div>
-				) : (
-					<>
-						<input
-							type="number"
-							value={outputFps ?? ""}
-							min={1}
-							max={240}
-							onChange={(e) => setOutputFps(Math.max(1, parseInt(e.target.value) || originalFps || 30))}
-							disabled={!reencode}
-							className="w-full border border-mocha-surface2 rounded-lg px-2.5 py-1.5 text-xs text-mocha-text bg-mocha-surface0 focus:outline-none focus:ring-2 focus:ring-mocha-mauve disabled:opacity-50"
-						/>
-						<span className="text-mocha-overlay1 text-xs select-none">fps</span>
-						<button
-							type="button"
-							onClick={() => setOutputFps(originalFps)}
-							disabled={!reencode || outputFps === originalFps}
-							className="px-2 py-1.5 rounded-lg text-[10px] font-semibold bg-mocha-surface1 text-mocha-subtext0 hover:bg-mocha-surface2 transition-colors disabled:opacity-30"
-							title="Reset to original framerate"
-						>
-							Reset
-						</button>
-					</>
-				)}
+			{/* Resolution controls */}
+			<div className={`border-t border-mocha-surface1 pt-3 ${!reencode ? 'opacity-50 pointer-events-none' : ''}`}>
+				<label className="block text-xs font-bold text-mocha-subtext0 mb-1">
+					Resolution
+				</label>
+				<div className="flex items-center gap-2">
+					<input
+						type="number"
+						value={outputWidth}
+						onChange={(e) => {
+							const w = parseInt(e.target.value) || originalWidth;
+							setOutputWidth(w);
+							if (lockAspectRatio && originalWidth > 0) {
+								setOutputHeight(Math.round(w * (originalHeight / originalWidth)));
+							}
+						}}
+						disabled={!reencode}
+						className="w-full border border-mocha-surface2 rounded-lg px-2.5 py-1.5 text-xs text-mocha-text bg-mocha-surface0 focus:outline-none focus:ring-2 focus:ring-mocha-mauve disabled:opacity-50"
+					/>
+					<span className="text-mocha-overlay1 text-sm select-none">×</span>
+					<input
+						type="number"
+						value={outputHeight}
+						onChange={(e) => {
+							const h = parseInt(e.target.value) || originalHeight;
+							setOutputHeight(h);
+							if (lockAspectRatio && originalHeight > 0) {
+								setOutputWidth(Math.round(h * (originalWidth / originalHeight)));
+							}
+						}}
+						disabled={!reencode}
+						className="w-full border border-mocha-surface2 rounded-lg px-2.5 py-1.5 text-xs text-mocha-text bg-mocha-surface0 focus:outline-none focus:ring-2 focus:ring-mocha-mauve disabled:opacity-50"
+					/>
+					<button
+						onClick={() => setLockAspectRatio(!lockAspectRatio)}
+						disabled={!reencode}
+						className={`p-1.5 rounded-lg text-xs transition-colors ${
+							lockAspectRatio
+								? 'bg-mocha-mauve/20 text-mocha-mauve'
+								: 'bg-mocha-surface1 text-mocha-overlay1'
+						} hover:bg-mocha-mauve/30 disabled:opacity-50`}
+						title={lockAspectRatio ? 'Aspect ratio locked' : 'Aspect ratio unlocked'}
+					>
+						{lockAspectRatio ? '🔗' : '🔓'}
+					</button>
+					<button
+						onClick={() => {
+							setOutputWidth(originalWidth);
+							setOutputHeight(originalHeight);
+						}}
+						disabled={!reencode || (outputWidth === originalWidth && outputHeight === originalHeight)}
+						className="px-2 py-1.5 rounded-lg text-[10px] font-semibold bg-mocha-surface1 text-mocha-subtext0 hover:bg-mocha-surface2 transition-colors disabled:opacity-30"
+						title="Reset to original resolution"
+					>
+						Reset
+					</button>
+				</div>
+				<p className="text-[10px] text-mocha-overlay0 mt-1 select-none">
+					Original: {originalWidth}×{originalHeight}
+				</p>
+			</div>
+
+			{/* Framerate control */}
+			<div className={`border-t border-mocha-surface1 pt-3 ${!reencode ? 'opacity-50 pointer-events-none' : ''}`}>
+				<label className="block text-xs font-bold text-mocha-subtext0 mb-1">
+					Framerate (FPS)
+				</label>
+				<div className="flex items-center gap-2">
+					{originalFps === null ? (
+						<div className="flex items-center gap-2 py-1.5">
+							<svg className="animate-spin h-3.5 w-3.5 text-mocha-mauve" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+								<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+								<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+							</svg>
+							<span className="text-[10px] text-mocha-subtext0 font-medium">Detecting...</span>
+						</div>
+					) : (
+						<>
+							<input
+								type="number"
+								value={outputFps ?? ""}
+								min={1}
+								max={240}
+								onChange={(e) => setOutputFps(Math.max(1, parseInt(e.target.value) || originalFps || 30))}
+								disabled={!reencode}
+								className="w-full border border-mocha-surface2 rounded-lg px-2.5 py-1.5 text-xs text-mocha-text bg-mocha-surface0 focus:outline-none focus:ring-2 focus:ring-mocha-mauve disabled:opacity-50"
+							/>
+							<span className="text-mocha-overlay1 text-xs select-none">fps</span>
+							<button
+								type="button"
+								onClick={() => setOutputFps(originalFps)}
+								disabled={!reencode || outputFps === originalFps}
+								className="px-2 py-1.5 rounded-lg text-[10px] font-semibold bg-mocha-surface1 text-mocha-subtext0 hover:bg-mocha-surface2 transition-colors disabled:opacity-30"
+								title="Reset to original framerate"
+							>
+								Reset
+							</button>
+						</>
+					)}
+				</div>
+				<p className="text-[10px] text-mocha-overlay0 mt-1 select-none">
+					Original: {originalFps !== null ? `${originalFps} fps` : "detecting..."}
+				</p>
 			</div>
-			<p className="text-[10px] text-mocha-overlay0 mt-1 select-none">
-				Original: {originalFps !== null ? `${originalFps} fps` : "detecting..."}
-			</p>
 		</div>
-	</div>
-);
+	);
+};
diff --git a/src/mainview/components/ExportPanel.tsx b/src/mainview/components/ExportPanel.tsx
index 28bf368..2e9829c 100644
--- a/src/mainview/components/ExportPanel.tsx
+++ b/src/mainview/components/ExportPanel.tsx
@@ -1,79 +1,72 @@
-interface ExportPanelProps {
-	start: number;
-	end: number;
-	videoDuration: number;
-	outputFormat: string;
-	exporting: boolean;
-	exportProgress: number;
-	exportError: string | null;
-	exportSuccess: string | null;
-	useNativeExport: boolean;
-	onExport: () => void;
-}
+import { useVideoEditorContext } from "../context/VideoEditorContext";
 
-export const ExportPanel = ({
-	start,
-	end,
-	videoDuration,
-	outputFormat,
-	exporting,
-	exportProgress,
-	exportError,
-	exportSuccess,
-	useNativeExport,
-	onExport,
-}: ExportPanelProps) => (
-	<div className="bg-mocha-surface0 rounded-xl p-5 border border-mocha-surface0 shadow-lg flex flex-col gap-3">
-		<h2 className="text-sm font-bold uppercase tracking-wider text-mocha-subtext0 border-b border-mocha-surface1 pb-2">
-			Export
-		</h2>
-		
-		<p className="text-xs text-mocha-subtext1 select-none">
-			Trim range: <span className="font-semibold text-mocha-text">{((start / 1000) * videoDuration).toFixed(2)}s</span> to <span className="font-semibold text-mocha-text">{((end / 1000) * videoDuration).toFixed(2)}s</span>
-		</p>
+export const ExportPanel = () => {
+	const {
+		start,
+		end,
+		videoDuration,
+		outputFormat,
+		exporting,
+		exportProgress,
+		exportError,
+		exportSuccess,
+		useNativeExport,
+		exportVideo,
+	} = useVideoEditorContext();
 
-		{/* Export error */}
-		{exportError && (
-			<div className="p-2.5 bg-mocha-red/10 border border-mocha-red/30 rounded-lg text-[11px] text-mocha-red break-words font-medium">
-				⚠️ {exportError}
-			</div>
-		)}
+	return (
+		<div className="bg-mocha-surface0 rounded-xl p-5 border border-mocha-surface0 shadow-lg flex flex-col gap-3">
+			<h2 className="text-sm font-bold uppercase tracking-wider text-mocha-subtext0 border-b border-mocha-surface1 pb-2">
+				Export
+			</h2>
+			
+			<p className="text-xs text-mocha-subtext1 select-none">
+				Trim range: <span className="font-semibold text-mocha-text">{((start / 1000) * videoDuration).toFixed(2)}s</span> to <span className="font-semibold text-mocha-text">{((end / 1000) * videoDuration).toFixed(2)}s</span>
+			</p>
 
-		{/* Export success */}
-		{exportSuccess && (
-			<div className="p-2.5 bg-mocha-green/10 border border-mocha-green/30 rounded-lg text-[11px] text-mocha-green break-words font-medium">
-				✅ {exportSuccess}
-			</div>
-		)}
+			{/* Export error */}
+			{exportError && (
+				<div className="p-2.5 bg-mocha-red/10 border border-mocha-red/30 rounded-lg text-[11px] text-mocha-red break-words font-medium">
+					⚠️ {exportError}
+				</div>
+			)}
 
-		{/* Progress bar */}
-		{exporting && (
-			<div className="mt-1">
-				<div className="w-full h-1.5 bg-mocha-surface2 rounded-full overflow-hidden">
-					<div
-						className="h-full bg-mocha-mauve rounded-full transition-all duration-300 ease-out"
-						style={{ width: `${Math.round(exportProgress * 100)}%` }}
-					/>
+			{/* Export success */}
+			{exportSuccess && (
+				<div className="p-2.5 bg-mocha-green/10 border border-mocha-green/30 rounded-lg text-[11px] text-mocha-green break-words font-medium">
+					✅ {exportSuccess}
 				</div>
-				<p className="text-[10px] text-mocha-subtext0 mt-1 text-center font-bold">
-					Exporting: {Math.round(exportProgress * 100)}%
-				</p>
-			</div>
-		)}
+			)}
 
-		<button
-			onClick={onExport}
-			disabled={exporting}
-			className="w-full bg-mocha-mauve text-mocha-crust py-2.5 rounded-lg hover:brightness-110 active:scale-[0.98] disabled:opacity-50 font-bold transition-all text-xs shadow-md"
-		>
-			{exporting ? "Exporting..." : `Export as .${outputFormat}`}
-		</button>
+			{/* Progress bar */}
+			{exporting && (
+				<div className="mt-1">
+					<div className="w-full h-1.5 bg-mocha-surface2 rounded-full overflow-hidden">
+						<div
+							className="h-full bg-mocha-mauve rounded-full transition-all duration-300 ease-out"
+							style={{ width: `${Math.round(exportProgress * 100)}%` }}
+						/>
+					</div>
+					<p className="text-[10px] text-mocha-subtext0 mt-1 text-center font-bold">
+						Exporting: {Math.round(exportProgress * 100)}%
+					</p>
+				</div>
+			)}
 
-		{/* Footer: runtime info */}
-		{useNativeExport && (
-			<p className="text-[9px] text-mocha-overlay1 text-center italic mt-1 select-none">
-				⚡ Running native hardware-accelerated FFmpeg
-			</p>
-		)}
-	</div>
-);
+			<button
+				onClick={exportVideo}
+				disabled={exporting}
+				className="w-full bg-mocha-mauve text-mocha-crust py-2.5 rounded-lg hover:brightness-110 active:scale-[0.98] disabled:opacity-50 font-bold transition-all text-xs shadow-md"
+			>
+				{exporting ? "Exporting..." : `Export as .${outputFormat}`}
+			</button>
+
+			{/* Footer: runtime info */}
+			{useNativeExport && (
+				<p className="text-[9px] text-mocha-overlay1 text-center italic mt-1 select-none">
+					⚡ Running native FFmpeg
+				</p>
+			)}
+		</div>
+	);
+};
diff --git a/src/mainview/components/Player.tsx b/src/mainview/components/Player.tsx
index 8d1b8b3..36d643f 100644
--- a/src/mainview/components/Player.tsx
+++ b/src/mainview/components/Player.tsx
@@ -1,15 +1,19 @@
 import { useCallback, useEffect, useRef, useState } from "react";
+import { useVideoEditorContext } from "../context/VideoEditorContext";
+
+export const Player = () => {
+	const {
+		videoSrc,
+		position,
+		setPosition,
+		isPlaying,
+		setIsPlaying,
+		start,
+		setStart,
+		end,
+		videoDuration,
+	} = useVideoEditorContext();
 
-interface PlayerProps {
-	videoSrc: string;
-	positionState: { position: number; setPosition: (time: number) => void };
-	isPlayingState: { isPlaying: boolean; setIsPlaying: (playing: boolean) => void };
-	startState: { start: number; setStart: (time: number) => void };
-	endState: { end: number; setEnd: (time: number) => void };
-	videoDuration: number;
-}
-
-export const Player = ({ videoSrc, positionState, isPlayingState, startState, endState, videoDuration }: PlayerProps) => {
 	const videoRef = useRef<HTMLVideoElement>(null);
 	const [volume, setVolume] = useState(1);
 	const [isMuted, setIsMuted] = useState(false);
@@ -21,13 +25,13 @@ export const Player = ({ videoSrc, positionState, isPlayingState, startState, en
 		if (!video.paused) {
 			video.pause();
 		} else {
-			if (Math.ceil(positionState.position) >= endState.end) {
-				positionState.setPosition(startState.start);
-				video.currentTime = (startState.start / 1000) * (video.duration || 0);
+			if (Math.ceil(position) >= end) {
+				setPosition(start);
+				video.currentTime = (start / 1000) * (video.duration || 0);
 			}
 			video.play().catch((err) => console.error("Playback error:", err));
 		}
-	}, [positionState.position, endState.end, startState.start]);
+	}, [position, end, start, setPosition]);
 
 	useEffect(() => {
 		const handleKeyDown = (e: KeyboardEvent) => {
@@ -44,22 +48,22 @@ export const Player = ({ videoSrc, positionState, isPlayingState, startState, en
 		const video = videoRef.current;
 		if (!video) return;
 
-		if (isPlayingState.isPlaying && video.paused) {
+		if (isPlaying && video.paused) {
 			video.play().catch(() => {});
-		} else if (!isPlayingState.isPlaying && !video.paused) {
+		} else if (!isPlaying && !video.paused) {
 			video.pause();
 		}
-	}, [isPlayingState.isPlaying]);
+	}, [isPlaying]);
 
 	useEffect(() => {
 		const video = videoRef.current;
 		if (!video || isNaN(video.duration)) return;
 
-		const newTime = (positionState.position / 1000) * video.duration;
+		const newTime = (position / 1000) * video.duration;
 		if (Math.abs(video.currentTime - newTime) > 0.1) {
 			video.currentTime = newTime;
 		}
-	}, [positionState.position]);
+	}, [position]);
 
 	useEffect(() => {
 		const video = videoRef.current;
@@ -72,7 +76,7 @@ export const Player = ({ videoSrc, positionState, isPlayingState, startState, en
 		const video = videoRef.current;
 		if (!video) return;
 		const progress = (video.currentTime / video.duration) * 1000;
-		positionState.setPosition(progress);
+		setPosition(progress);
 	};
 
 	const formatTimecode = (seconds: number) => {
@@ -83,7 +87,7 @@ export const Player = ({ videoSrc, positionState, isPlayingState, startState, en
 		return `${mins.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}.${ms.toString().padStart(2, "0")}`;
 	};
 
-	const currentSeconds = (positionState.position / 1000) * (videoRef.current?.duration || videoDuration);
+	const currentSeconds = (position / 1000) * (videoRef.current?.duration || videoDuration);
 	const durationSeconds = videoRef.current?.duration || videoDuration;
 
 	return (
@@ -92,24 +96,13 @@ export const Player = ({ videoSrc, positionState, isPlayingState, startState, en
 			<div className="relative aspect-video bg-black flex items-center justify-center group select-none">
 				<video
 					ref={videoRef}
-					src={videoSrc}
+					src={videoSrc || undefined}
 					onTimeUpdate={handleTimeUpdate}
-					onPlay={() => isPlayingState.setIsPlaying(true)}
-					onPause={() => isPlayingState.setIsPlaying(false)}
+					onPlay={() => setIsPlaying(true)}
+					onPause={() => setIsPlaying(false)}
 					onClick={togglePlay}
 					className="w-full h-full object-contain cursor-pointer"
 				/>
-				
-				{!isPlayingState.isPlaying && (
-					<div 
-						onClick={togglePlay}
-						className="absolute inset-0 bg-black/40 flex items-center justify-center cursor-pointer transition-opacity group-hover:opacity-100"
-					>
-						<div className="w-14 h-14 flex items-center justify-center rounded-full bg-mocha-mauve/80 text-mocha-crust text-2xl font-bold shadow-lg hover:scale-110 transition-transform">
-							▶
-						</div>
-					</div>
-				)}
 			</div>
 
 			{/* Playback Controls Toolbar */}
@@ -120,8 +113,8 @@ export const Player = ({ videoSrc, positionState, isPlayingState, startState, en
 						onClick={() => {
 							const video = videoRef.current;
 							if (video) {
-								video.currentTime = (startState.start / 1000) * video.duration;
-								positionState.setPosition(startState.start);
+								video.currentTime = (start / 1000) * video.duration;
+								setPosition(start);
 							}
 						}}
 						className="p-2 rounded-lg hover:bg-mocha-surface0 text-mocha-text active:scale-95 transition-all text-sm"
@@ -134,7 +127,7 @@ export const Player = ({ videoSrc, positionState, isPlayingState, startState, en
 							const video = videoRef.current;
 							if (video) {
 								video.currentTime = Math.max(0, video.currentTime - 0.1);
-								positionState.setPosition((video.currentTime / video.duration) * 1000);
+								setPosition((video.currentTime / video.duration) * 1000);
 							}
 						}}
 						className="p-2 rounded-lg hover:bg-mocha-surface0 text-mocha-text active:scale-95 transition-all text-sm"
@@ -147,7 +140,7 @@ export const Player = ({ videoSrc, positionState, isPlayingState, startState, en
 						className="px-4 py-2 rounded-lg bg-mocha-mauve text-mocha-crust font-bold hover:brightness-110 active:scale-95 transition-all text-xs flex items-center gap-1.5 shadow-md"
 						title="Play / Pause (Space)"
 					>
-						{isPlayingState.isPlaying ? (
+						{isPlaying ? (
 							<>
 								<span>❚❚</span>
 								<span>Pause</span>
@@ -164,7 +157,7 @@ export const Player = ({ videoSrc, positionState, isPlayingState, startState, en
 							const video = videoRef.current;
 							if (video) {
 								video.currentTime = Math.min(video.duration, video.currentTime + 0.1);
-								positionState.setPosition((video.currentTime / video.duration) * 1000);
+								setPosition((video.currentTime / video.duration) * 1000);
 							}
 						}}
 						className="p-2 rounded-lg hover:bg-mocha-surface0 text-mocha-text active:scale-95 transition-all text-sm"
@@ -176,8 +169,8 @@ export const Player = ({ videoSrc, positionState, isPlayingState, startState, en
 						onClick={() => {
 							const video = videoRef.current;
 							if (video) {
-								video.currentTime = (endState.end / 1000) * video.duration;
-								positionState.setPosition(endState.end);
+								video.currentTime = (end / 1000) * video.duration;
+								setPosition(end);
 							}
 						}}
 						className="p-2 rounded-lg hover:bg-mocha-surface0 text-mocha-text active:scale-95 transition-all text-sm"
diff --git a/src/mainview/components/Timeline.tsx b/src/mainview/components/Timeline.tsx
index 75dc684..c42dbb1 100644
--- a/src/mainview/components/Timeline.tsx
+++ b/src/mainview/components/Timeline.tsx
@@ -1,13 +1,17 @@
 import { useRef, useState, useEffect } from "react";
+import { useVideoEditorContext } from "../context/VideoEditorContext";
+
+export const Timeline = () => {
+	const {
+		start,
+		setStart,
+		end,
+		setEnd,
+		position,
+		setPosition,
+		videoDuration,
+	} = useVideoEditorContext();
 
-interface TimelineProps {
-	startState: { start: number; setStart: (time: number) => void };
-	endState: { end: number; setEnd: (time: number) => void };
-	positionState: { position: number; setPosition: (time: number) => void };
-	videoDuration: number;
-}
-
-export const Timeline = ({ startState, endState, positionState, videoDuration }: TimelineProps) => {
 	const timelineRef = useRef<HTMLDivElement>(null);
 	const [isDragging, setIsDragging] = useState<"start" | "end" | "playhead" | null>(null);
 
@@ -26,7 +30,7 @@ export const Timeline = ({ startState, endState, positionState, videoDuration }:
 		setIsDragging(type);
 		
 		if (type === "playhead") {
-			positionState.setPosition(getValFromEvent(e));
+			setPosition(getValFromEvent(e));
 		}
 	};
 
@@ -36,19 +40,19 @@ export const Timeline = ({ startState, endState, positionState, videoDuration }:
 		const handleMouseMove = (e: MouseEvent) => {
 			const val = getValFromEvent(e);
 			if (isDragging === "playhead") {
-				positionState.setPosition(val);
+				setPosition(val);
 			} else if (isDragging === "start") {
-				if (val <= endState.end) {
-					startState.setStart(val);
-					if (positionState.position < val) {
-						positionState.setPosition(val);
+				if (val <= end) {
+					setStart(val);
+					if (position < val) {
+						setPosition(val);
 					}
 				}
 			} else if (isDragging === "end") {
-				if (val >= startState.start) {
-					endState.setEnd(val);
-					if (positionState.position > val) {
-						positionState.setPosition(val);
+				if (val >= start) {
+					setEnd(val);
+					if (position > val) {
+						setPosition(val);
 					}
 				}
 			}
@@ -65,17 +69,17 @@ export const Timeline = ({ startState, endState, positionState, videoDuration }:
 			window.removeEventListener("mousemove", handleMouseMove);
 			window.removeEventListener("mouseup", handleMouseUp);
 		};
-	}, [isDragging, startState, endState, positionState]);
+	}, [isDragging, start, end, position, setStart, setEnd, setPosition]);
 
 	const formatTime = (val: number) => {
 		const seconds = (val / 1000) * videoDuration;
 		return `${seconds.toFixed(2)}s`;
 	};
 
-	const startPct = (startState.start / 1000) * 100;
-	const endPct = (endState.end / 1000) * 100;
-	const widthPct = ((endState.end - startState.start) / 1000) * 100;
-	const posPct = (positionState.position / 1000) * 100;
+	const startPct = (start / 1000) * 100;
+	const endPct = (end / 1000) * 100;
+	const widthPct = ((end - start) / 1000) * 100;
+	const posPct = (position / 1000) * 100;
 
 	const renderTicks = () => {
 		const ticks = [];
@@ -146,7 +150,7 @@ export const Timeline = ({ startState, endState, positionState, videoDuration }:
 
 					{/* Label showing Clip Info */}
 					<span className="w-full text-center text-[10px] text-mocha-mauve font-semibold select-none pointer-events-none px-4 truncate">
-						✂️ ACTIVE CLIP ({formatTime(startState.start)} - {formatTime(endState.end)})
+						✂️ ACTIVE CLIP ({formatTime(start)} - {formatTime(end)})
 					</span>
 
 					{/* Right trim handle */}
diff --git a/src/mainview/context/VideoEditorContext.tsx b/src/mainview/context/VideoEditorContext.tsx
new file mode 100644
index 0000000..5618037
--- /dev/null
+++ b/src/mainview/context/VideoEditorContext.tsx
@@ -0,0 +1,25 @@
+import { createContext, useContext, ReactNode } from "react";
+import { useVideoEditor } from "../hooks/useVideoEditor";
+
+type VideoEditorContextType = ReturnType<typeof useVideoEditor>;
+
+const VideoEditorContext = createContext<VideoEditorContextType | null>(null);
+
+interface VideoEditorProviderProps {
+	value: VideoEditorContextType;
+	children: ReactNode;
+}
+
+export const VideoEditorProvider = ({ value, children }: VideoEditorProviderProps) => (
+	<VideoEditorContext.Provider value={value}>
+		{children}
+	</VideoEditorContext.Provider>
+);
+
+export const useVideoEditorContext = () => {
+	const context = useContext(VideoEditorContext);
+	if (!context) {
+		throw new Error("useVideoEditorContext must be used within a VideoEditorProvider");
+	}
+	return context;
+};