diff --git a/src/app/globals.css b/src/app/globals.css
index 408e2d8e..8711a4bf 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -6,9 +6,9 @@
 :root {
   --bg: #ffffff;
   --surface: #f1f5f9;
-  --border: #cbd5e1;
+  --border: #94a3b8;
   --text: #0f172a;
-  --muted: #64748b;
+  --muted: #475569;
   --accent: #3b82f6;
   --accent-hover: #1d4ed8;
   --accent-muted: rgba(59, 130, 246, 0.12);
diff --git a/src/components/ExportSettings.tsx b/src/components/ExportSettings.tsx
index 6eee9b9b..3b5986c9 100644
--- a/src/components/ExportSettings.tsx
+++ b/src/components/ExportSettings.tsx
@@ -44,13 +44,13 @@ export default function ExportSettings({
 
   return (
     <>
-      <div>
+      <div className="bg-[var(--surface)] border border-[var(--border)] rounded-xl p-5 shadow-sm">
         <div className="flex items-center justify-between mb-2">
           <label
             htmlFor="quality-control"
-            className="text-sm font-heading font-semibold uppercase tracking-wider text-[var(--muted)] flex items-center gap-2"
+            className="text-sm font-heading font-semibold text-[var(--text)] flex items-center gap-2"
           >
-            <SlidersHorizontal size={10} />
+            <SlidersHorizontal size={14} className="text-film-600" />
             Quality
 
             <span
@@ -92,7 +92,7 @@ export default function ExportSettings({
 
         <div
           id="quality-description"
-          className="mt-1 space-y-3"
+          className="mt-3 space-y-4"
         >
           <div className="flex justify-between">
             <span className="text-sm text-[var(--muted)]">
@@ -104,7 +104,7 @@ export default function ExportSettings({
             </span>
           </div>
 
-          <p className="text-xs text-[var(--muted)]">
+          <p className="text-sm text-[var(--muted)] leading-relaxed">
             Estimated size:{" "}
             <span className="font-semibold text-[var(--text)]">
               {estimatedSize}
@@ -141,13 +141,13 @@ export default function ExportSettings({
         )}
       </div>
 
-      <div>
+      <div className="bg-[var(--surface)] border border-[var(--border)] rounded-xl p-4 shadow-sm space-y-2">
         <div className="flex items-center justify-between mb-1">
           <label
             htmlFor="stabilization-toggle"
-            className="text-sm font-heading font-semibold uppercase tracking-wider text-[var(--muted)] flex items-center gap-2"
+            className="text-sm font-heading font-semibold text-[var(--text)] flex items-center gap-2"
           >
-            <SlidersHorizontal size={10} />
+            <SlidersHorizontal size={14} className="text-film-600" />
             Stabilization
           </label>
 
@@ -162,19 +162,19 @@ export default function ExportSettings({
                 })
               }
               aria-label="Enable video stabilization"
-              className="w-full accent-film-600 cursor-pointer"
+              className="w-4 h-4 accent-film-600 cursor-pointer"
             />
           </span>
         </div>
 
-        <p className="text-xs text-[var(--muted)] mb-1">
+        <p className="text-sm text-[var(--muted)] leading-relaxed">
           Reduce camera shake
         </p>
 
         <div className="flex justify-end">
           <span
             className={cn(
-              "text-xs",
+              "text-sm",
               recipe.stabilization
                 ? "text-[var(--error)] font-medium"
                 : "text-[var(--muted)]"
@@ -184,13 +184,13 @@ export default function ExportSettings({
           </span>
         </div>
       </div>
-      <div>
+      <div className="bg-[var(--surface)] border border-[var(--border)] rounded-xl p-4 shadow-sm space-y-2">
         <div className="flex items-center justify-between mb-1">
           <label
             htmlFor="denoise-toggle"
-            className="text-sm font-heading font-semibold uppercase tracking-wider text-[var(--muted)] flex items-center gap-2"
+            className="text-sm font-heading font-semibold text-[var(--text)] flex items-center gap-2"
           >
-            <SlidersHorizontal size={10} />
+            <SlidersHorizontal size={14} className="text-film-600" />
             Reduce noise
 
             <span
@@ -213,19 +213,19 @@ export default function ExportSettings({
               }
               aria-label="Enable noise reduction"
               aria-checked={recipe.denoise}
-              className="w-full accent-film-600 cursor-pointer"
+              className="w-4 h-4 accent-film-600 cursor-pointer"
             />
           </span>
         </div>
 
-        <p className="text-xs text-[var(--muted)] mb-1">
+        <p className="text-sm text-[var(--muted)] leading-relaxed">
           Reduce low-light video grain
         </p>
 
         <div className="flex justify-end">
           <span
             className={cn(
-              "text-xs",
+              "text-sm",
               recipe.denoise
                 ? "text-red-700 font-medium"
                 : "text-[var(--muted)]"
diff --git a/src/components/FileUpload.tsx b/src/components/FileUpload.tsx
index f9f2127e..a0b3cc78 100644
--- a/src/components/FileUpload.tsx
+++ b/src/components/FileUpload.tsx
@@ -116,14 +116,98 @@ export default function FileUpload({
 
     onFileSelect(file);
   }, [onFileSelect]);
+// ── Drop zone (inner) handler ─────────────────────────
+const handleDrop = (e: React.DragEvent) => {
+  e.preventDefault();
+  setDragging(false);
+
+  const file = e.dataTransfer.files?.[0];
+
+  if (file) {
+    handleFile(file);
+  }
+};
+ // ── Drop zone (inner) ─────────────────────────────────
+const DropZone = () => (
+  <div
+    id="upload-zone"
+    role="button"
+    tabIndex={0}
+    aria-label="Video upload area. Drag and drop a video file or press Enter to browse."
+    onDragOver={(e) => {
+      e.preventDefault();
+      setDragging(true);
+    }}
+    onDragLeave={() => setDragging(false)}
+    onDrop={handleDrop}
+    onClick={() => inputRef.current?.click()}
+    onKeyDown={(e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        inputRef.current?.click();
+      }
+    }}
+    className={cn(
+      "group flex flex-col items-center justify-center gap-5 py-14 px-6",
+      "border-2 border-dashed rounded-xl cursor-pointer transition-all duration-300 relative overflow-hidden",
+      dragging
+        ? "border-[var(--accent)] bg-[var(--accent-muted)] scale-[1.02] shadow-[var(--shadow)] ring-4 ring-[var(--accent-muted)]"
+        : "border-[var(--border)] bg-[var(--surface)] hover:border-film-400 hover:bg-film-50/40 shadow-sm"
+    )}
+  >
+    {dragging && (
+      <div className="absolute inset-0 -translate-x-full animate-shimmer bg-gradient-to-r from-transparent via-film-500/20 to-transparent pointer-events-none" />
+    )}
+
+    {/* Upload Animation */}
+    <div className="w-20 h-20 opacity-100 group-hover:scale-110 transition-all duration-200">
+      <LottiePlayer animationData={uploadAnim} loop autoplay />
+    </div>
+
+    {/* Main Text */}
+    <div className="text-center">
+      <p className="font-heading font-semibold text-[var(--text)] text-lg">
+        {dragging ? "Release to upload" : "Drag & Drop your video here"}
+      </p>
+
+      <p className="text-sm text-[var(--muted)] mt-2 font-medium">
+        or click to browse
+      </p>
+
+      <p className="text-sm text-[var(--muted)] mt-2 font-heading">
+        Ctrl+O / Cmd+O
+      </p>
+    </div>
 
-  // ── Drop zone (inner) handler ─────────────────────────
-  const handleDrop = (e: React.DragEvent) => {
-    e.preventDefault();
-    setDragging(false);
-    const file = e.dataTransfer.files?.[0];
-    if (file) handleFile(file);
-  };
+    {/* File Types */}
+    <div className="flex items-center gap-2 px-4 py-2.5 bg-[var(--bg)] border border-[var(--border)] rounded-lg text-sm font-heading font-medium text-[var(--text)] shadow-sm">
+      <FolderOpen size={15} />
+      MP4 / MOV / AVI / WebM
+    </div>
+
+    {/* Support Text */}
+    <p className="text-sm text-[var(--muted)] text-center max-w-md leading-relaxed">
+      Supports MP4, MOV, AVI, MKV, WebM, and most video formats up to 2GB
+    </p>
+
+    {/* Error */}
+    {fileError && (
+      <p className="text-sm text-[var(--error)] text-center font-medium">
+        {fileError}
+      </p>
+    )}
+
+    <input
+      ref={inputRef}
+      type="file"
+      accept="video/*"
+      className="hidden"
+      onChange={(e) => {
+        const f = e.target.files?.[0];
+        if (f) handleFile(f);
+      }}
+    />
+  </div>
+);
 
   // ── File info (shown after upload) ───────────────────
   const FileInfo = () => (
@@ -190,75 +274,8 @@ export default function FileUpload({
   );
 
   // ── Drop zone (inner) ─────────────────────────────────
-  const DropZone = () => (
-    <div
-      id="upload-zone"
-      role="button"
-      tabIndex={0}
-      aria-label="Video upload area. Drag and drop a video file or press Enter to browse."
-      onDragOver={(e) => {
-        e.preventDefault();
-        setDragging(true);
-      }}
-      onDragLeave={() => setDragging(false)}
-      onDrop={handleDrop}
-      onClick={() => inputRef.current?.click()}
-      onKeyDown={(e) => {
-        if (e.key === "Enter" || e.key === " ") {
-          inputRef.current?.click();
-        }
-      }}
-      className={cn(
-        "group flex flex-col items-center justify-center gap-4 py-12 px-6",
-        "border-2 border-dashed rounded-xl cursor-pointer transition-all duration-300 relative overflow-hidden",
-        dragging
-          ? "border-[var(--accent)] bg-[var(--accent-muted)] scale-[1.02] shadow-[var(--shadow)] ring-4 ring-[var(--accent-muted)]"
-          : "border-[var(--border)] bg-[var(--bg)] hover:border-film-400 hover:bg-film-50/40"
-      )}
-    >
-      {dragging && (
-        <div className="absolute inset-0 -translate-x-full animate-shimmer bg-gradient-to-r from-transparent via-film-500/20 to-transparent pointer-events-none" />
-      )}
-
-      <div className="w-20 h-20 opacity-80 group-hover:opacity-100 transition-opacity group-hover:scale-110 duration-200">
-        <LottiePlayer animationData={uploadAnim} loop autoplay />
-      </div>
-
-      <div className="text-center">
-        <p className="font-heading font-semibold text-[var(--text)] text-base">
-          {dragging ? "Release to upload" : "Drag & Drop your video here"}
-        </p>
-        <p className="text-sm text-[var(--muted)] mt-1">or click to browse</p>
-        <p className="text-xs text-[var(--muted)] mt-2 font-heading">
-          Ctrl+O / Cmd+O
-        </p>
-      </div>
 
-      <div className="flex items-center gap-2 px-4 py-2 bg-[var(--surface)] border border-[var(--border)] rounded-lg text-sm font-heading font-medium text-[var(--muted)]">
-        <FolderOpen size={14} />
-        MP4 / MOV / AVI / WebM
-      </div>
-
-      <p className="text-xs text-[var(--muted)] text-center">
-        Supports: MP4, MOV, AVI, MKV, WebM, and most video formats up to 2GB
-      </p>
-
-      {fileError && (
-        <p className="text-sm text-[var(--error)] text-center">{fileError}</p>
-      )}
-
-      <input
-        ref={inputRef}
-        type="file"
-        accept="video/*"
-        className="hidden"
-        onChange={(e) => {
-          const f = e.target.files?.[0];
-          if (f) handleFile(f);
-        }}
-      />
-    </div>
-  );
+      
 
   return (
     <>
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index c6006f0d..15b2cd7c 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -16,18 +16,18 @@ export default function Footer() {
   const [isExpanded, setIsExpanded] = useState(false);
 
   return (
-    <footer className="w-full border-t border-[var(--border)] bg-[var(--bg)] text-[var(--text)] px-6 py-16 mt-20 transition-colors duration-300">
+    <footer className="w-full border-t border-[var(--border)] bg-[var(--surface)] text-[var(--text)] px-6 py-16 mt-20 transition-colors duration-300">
       <div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-12 gap-12 md:gap-8">
         {/* Brand Section */}
         <div className="md:col-span-5 space-y-6">
           <div className="space-y-1">
             <h2 className="text-2xl font-bold tracking-tight">Reframe</h2>
-            <p className="text-[9px] font-mono tracking-[0.4em] uppercase opacity-50">
+            <p className="text-xs font-mono tracking-[0.25em] uppercase text-[var(--muted)]">
               Browser Video Studio
             </p>
           </div>
 
-          <p className="text-sm opacity-70 leading-relaxed max-w-sm">
+          <p className="text-sm text-[var(--muted)] leading-relaxed max-w-sm">
             Professional video processing directly in your browser using
             <span className="font-medium opacity-100"> FFmpeg.wasm</span> —
             fast, private, and open source.
@@ -51,7 +51,7 @@ export default function Footer() {
 
         {/* Links Section */}
         <div className="md:col-span-3 space-y-5">
-          <h3 className="text-[10px] font-bold uppercase tracking-[0.2em] opacity-40">
+          <h3 className="text-xs font-semibold uppercase tracking-wider text-[var(--muted)]">
             Navigation
           </h3>
           <nav className="flex flex-col gap-3 text-sm">
@@ -59,19 +59,19 @@ export default function Footer() {
               href="https://github.com/magic-peach/reframe"
               target="_blank"
               rel="noopener"
-              className="opacity-70 hover:opacity-100 hover:text-[var(--accent)] hover:scale-110 transition-all duration-500 ease-in-out w-fit flex items-center gap-2 group"
+              className="text-[var(--muted)] hover:text-[var(--accent)] transition-all duration-200 w-fit flex items-center gap-2"
             >
               GitHub
             </a>
             <Link
               href="/contact"
-              className="opacity-70 hover:opacity-100 hover:text-[var(--accent)] hover:scale-110 transition-all duration-500 ease-in-out w-fit flex items-center gap-2 group"
+              className="text-[var(--muted)] hover:text-[var(--accent)] transition-all duration-200 w-fit flex items-center gap-2"
             >
               Contact
             </Link>
             <Link
               href="/privacy"
-              className="opacity-70 hover:opacity-100 hover:text-[var(--accent)] hover:scale-110 transition-all duration-500 ease-in-out w-fit flex items-center gap-2 group"
+              className="text-[var(--muted)] hover:text-[var(--accent)] transition-all duration-200 w-fit flex items-center gap-2"
             >
               Privacy Policy
             </Link>
@@ -82,7 +82,7 @@ export default function Footer() {
         <div className="md:col-span-4 flex flex-col items-start md:items-end space-y-8">
           {/* Newsletter - Logic updated to pass Lint/Build checks */}
           <div className="w-full flex flex-col items-start md:items-end gap-3">
-            <h3 className="text-[10px] font-bold uppercase tracking-[0.2em] opacity-40">
+            <h3 className="text-xs font-semibold uppercase tracking-wider text-[var(--muted)]">
               Updates
             </h3>
 
@@ -93,7 +93,7 @@ export default function Footer() {
                 aria-label="Open updates signup form"
                 aria-expanded={isExpanded}
                 aria-controls="updates-signup-form"
-                className="w-40 px-3 flex items-center justify-center bg-[var(--surface)] border border-[var(--border)] rounded-lg py-3 hover:bg-[var(--border)] transition-all duration-500 ease-in-out group"
+                className="w-40 px-3 flex items-center justify-center bg-[var(--bg)] border border-[var(--border)] rounded-xl py-3 hover:border-[var(--accent)] hover:bg-[var(--accent-muted)] transition-all duration-200 shadow-sm hover:shadow-md group"
               >
                 <span className="text-[10px] font-bold uppercase tracking-[0.2em] opacity-60 group-hover:opacity-100 transition-opacity">
                   Stay Tuned
@@ -134,7 +134,7 @@ export default function Footer() {
           {/* Community Section */}
           {/* Community Section */}
           <div className="flex flex-col items-start md:items-end gap-3">
-            <h3 className="text-[10px] font-bold uppercase tracking-[0.2em] opacity-40">
+            <h3 className="text-xs font-semibold uppercase tracking-wider text-[var(--muted)]">
               Community
             </h3>
 
@@ -143,7 +143,7 @@ export default function Footer() {
                 href="https://github.com/magic-peach/reframe"
                 target="_blank"
                 rel="noopener"
-                className="p-2.5 rounded-lg border border-[var(--border)] bg-[var(--surface)] hover:border-[var(--accent)] hover:bg-[var(--accent-muted)] transition-all hover:-translate-y-1 active:scale-95 flex items-center justify-center group"
+                className="p-2.5 rounded-xl border border-[var(--border)] bg-[var(--bg)] hover:border-[var(--accent)] hover:bg-[var(--accent-muted)] transition-all duration-200 hover:-translate-y-0.5 shadow-sm hover:shadow-md active:scale-95 flex items-center justify-center group"
                 aria-label="Open Reframe GitHub repository"
               >
                 <Github
@@ -157,7 +157,7 @@ export default function Footer() {
                 href="https://twitter.com"
                 target="_blank"
                 rel="noopener"
-                className="p-2.5 rounded-lg border border-[var(--border)] bg-[var(--surface)] hover:border-[var(--accent)] hover:bg-[var(--accent-muted)] transition-all hover:-translate-y-1 active:scale-95 flex items-center justify-center group"
+                className="p-2.5 rounded-xl border border-[var(--border)] bg-[var(--bg)] hover:border-[var(--accent)] hover:bg-[var(--accent-muted)] transition-all duration-200 hover:-translate-y-0.5 shadow-sm hover:shadow-md active:scale-95 flex items-center justify-center group"
                 aria-label="Open Twitter"
               >
                 <TwitterIcon
@@ -171,7 +171,7 @@ export default function Footer() {
                 href="https://instagram.com"
                 target="_blank"
                 rel="noopener"
-                className="p-2.5 rounded-lg border border-[var(--border)] bg-[var(--surface)] hover:border-[var(--accent)] hover:bg-[var(--accent-muted)] transition-all hover:-translate-y-1 active:scale-95 flex items-center justify-center group"
+                className="p-2.5 rounded-xl border border-[var(--border)] bg-[var(--bg)] hover:border-[var(--accent)] hover:bg-[var(--accent-muted)] transition-all duration-200 hover:-translate-y-0.5 shadow-sm hover:shadow-md active:scale-95 flex items-center justify-center group"
                 aria-label="Open Instagram"
               >
                 <Instagram
@@ -186,7 +186,7 @@ export default function Footer() {
       </div>
 
       {/* Bottom Bar */}
-      <div className="max-w-7xl mx-auto mt-16 pt-8 border-t border-[var(--border)] flex flex-col md:flex-row justify-between items-center gap-4 text-[9px] font-bold uppercase tracking-[0.3em] opacity-40">
+      <div className="max-w-7xl mx-auto mt-16 pt-8 border-t border-[var(--border)] flex flex-col md:flex-row justify-between items-center gap-4 text-xs font-semibold uppercase tracking-wider text-[var(--muted)]">
         <p>© {new Date().getFullYear()} Reframe · MIT License</p>
         <div className="flex items-center gap-2">
           <span className="w-1.5 h-1.5 rounded-full bg-[var(--accent)] shadow-[0_0_8px_var(--accent)]" />
diff --git a/src/components/FormatSelector.tsx b/src/components/FormatSelector.tsx
index 81033b6b..ce9fff13 100644
--- a/src/components/FormatSelector.tsx
+++ b/src/components/FormatSelector.tsx
@@ -19,13 +19,22 @@ const FORMAT_OPTIONS = [
 export default function FormatSelector({ recipe, onChange }: Props) {
   return (
     <div>
-      <div className="flex items-center gap-1 mb-3">
-        <Film size={10} className="text-film-500 opacity-80" />
-        <div className="text-[10px] font-heading font-semibold uppercase tracking-wider text-[var(--muted)]">
-          Output Format
-        </div>
-      </div>
-      <div className="grid grid-cols-4 gap-2">
+     <div className="flex items-center gap-2 mb-4">
+  <div className="flex items-center justify-center w-6 h-6 rounded-md bg-film-50 border border-film-200">
+    <Film size={12} className="text-film-600" />
+  </div>
+
+  <div>
+    <h3 className="text-sm font-semibold text-[var(--text)]">
+      Output Format
+    </h3>
+
+    <p className="text-xs text-[var(--muted)]">
+      Choose your export file type
+    </p>
+  </div>
+</div>
+      <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
         {FORMAT_OPTIONS.map((option) => (
           <button
             key={option.id}
@@ -34,18 +43,19 @@ export default function FormatSelector({ recipe, onChange }: Props) {
             aria-label={`Select ${option.label} format`}
             aria-pressed={recipe.format === option.id}
             className={cn(
-              "relative px-3 py-2.5 rounded-lg border-2 transition-all",
-              "text-xs font-heading font-semibold uppercase tracking-wider",
-              recipe.format === option.id
-                ? "border-film-600 bg-film-50 text-film-600"
-                : "border-[var(--border)] bg-[var(--surface)] text-[var(--muted)] hover:border-film-400 hover:text-film-600"
-            )}
+  "relative px-4 py-3 rounded-xl border transition-all duration-200",
+  "text-sm font-heading font-semibold tracking-wide",
+  "shadow-sm hover:shadow-md hover:-translate-y-0.5",
+  recipe.format === option.id
+    ? "border-film-600 bg-film-50 text-film-700 shadow-md"
+    : "border-[var(--border)] bg-[var(--surface)] text-[var(--text)] hover:border-film-400 hover:bg-film-50/40"
+)}
           >
             {option.label}
           </button>
         ))}
       </div>
-      <p className="text-[10px] text-[var(--muted)] mt-2">
+      <p className="text-sm text-[var(--muted)] mt-3 leading-relaxed">
         {FORMAT_OPTIONS.find((o) => o.id === recipe.format)?.description}
       </p>
     </div>