diff --git a/app/page.tsx b/app/page.tsx
index d3e57a3..cfbef70 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -11,10 +11,10 @@ export default function Home() {
       <div className="min-h-screen bg-background">
         {/* Header */}
         <header className="border-b border-border">
-          <div className="container mx-auto px-4 py-4 flex items-center justify-between">
-            <div>
-              <h1 className="text-2xl font-bold text-foreground">Convert UI</h1>
-              <p className="text-sm text-muted-foreground">
+          <div className="container mx-auto px-3 sm:px-4 py-3 sm:py-4 flex items-center justify-between gap-2">
+            <div className="min-w-0">
+              <h1 className="text-xl sm:text-2xl font-bold text-foreground">Convert UI</h1>
+              <p className="text-xs sm:text-sm text-muted-foreground">
                 File conversion in your browser
               </p>
             </div>
@@ -23,16 +23,16 @@ export default function Home() {
         </header>
 
         {/* Main content */}
-        <main className="container mx-auto px-4 py-8 md:py-16">
-          <div className="space-y-8">
+        <main className="container mx-auto px-3 sm:px-4 py-6 sm:py-8 md:py-16">
+          <div className="space-y-6 sm:space-y-8">
             <FileConverter />
             <ConversionHistory />
           </div>
         </main>
 
         {/* Footer */}
-        <footer className="border-t border-border mt-16">
-          <div className="container mx-auto px-4 py-6 text-center text-sm text-muted-foreground">
+        <footer className="border-t border-border mt-8 sm:mt-12 md:mt-16">
+          <div className="container mx-auto px-3 sm:px-4 py-6 text-center text-xs sm:text-sm text-muted-foreground">
             <p>
               Powered by{' '}
               <a
diff --git a/components/converter/ConversionPreview.tsx b/components/converter/ConversionPreview.tsx
index 5044471..ea59b3d 100644
--- a/components/converter/ConversionPreview.tsx
+++ b/components/converter/ConversionPreview.tsx
@@ -162,7 +162,7 @@ export function ConversionPreview({ job, onDownload }: ConversionPreviewProps) {
               <span className="text-xs text-muted-foreground">{job.progress}%</span>
             </div>
             <Progress value={job.progress} showLabel={false} />
-            <div className="flex items-center gap-4 text-xs text-muted-foreground">
+            <div className="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4 text-xs text-muted-foreground">
               <div className="flex items-center gap-2">
                 <Clock className="h-3.5 w-3.5" />
                 <span>Elapsed: {formatTime(elapsedTime)}</span>
diff --git a/components/converter/FileConverter.tsx b/components/converter/FileConverter.tsx
index 8ffadd3..59ce4f9 100644
--- a/components/converter/FileConverter.tsx
+++ b/components/converter/FileConverter.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { ArrowRight } from 'lucide-react';
+import { ArrowRight, ArrowDown } from 'lucide-react';
 import { Button } from '@/components/ui/Button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/Card';
 import { FileUpload } from './FileUpload';
@@ -284,7 +284,10 @@ export function FileConverter() {
                 </Card>
               </div>
 
-              {/* Arrow */}
+              {/* Arrow - horizontal on desktop, vertical on mobile */}
+              <div className="flex md:hidden items-center justify-center py-2">
+                <ArrowDown className="h-5 w-5 text-muted-foreground" />
+              </div>
               <div className="hidden md:flex items-center justify-center pt-8">
                 <ArrowRight className="h-5 w-5 text-muted-foreground" />
               </div>