diff --git a/app/page.tsx b/app/page.tsx
index f305589..d3e57a3 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { FileConverter } from '@/components/converter/FileConverter';
+import { ConversionHistory } from '@/components/converter/ConversionHistory';
 import { ThemeToggle } from '@/components/layout/ThemeToggle';
 import { ToastProvider } from '@/components/ui/Toast';
 
@@ -23,7 +24,10 @@ export default function Home() {
 
         {/* Main content */}
         <main className="container mx-auto px-4 py-8 md:py-16">
-          <FileConverter />
+          <div className="space-y-8">
+            <FileConverter />
+            <ConversionHistory />
+          </div>
         </main>
 
         {/* Footer */}
diff --git a/components/converter/ConversionHistory.tsx b/components/converter/ConversionHistory.tsx
new file mode 100644
index 0000000..f751133
--- /dev/null
+++ b/components/converter/ConversionHistory.tsx
@@ -0,0 +1,169 @@
+'use client';
+
+import * as React from 'react';
+import { History, Trash2, ArrowRight, Clock } from 'lucide-react';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/Card';
+import { Button } from '@/components/ui/Button';
+import { formatFileSize } from '@/lib/utils/fileUtils';
+import { getHistory, clearHistory, removeHistoryItem } from '@/lib/storage/history';
+import type { ConversionHistoryItem } from '@/types/conversion';
+
+export function ConversionHistory() {
+  const [history, setHistory] = React.useState<ConversionHistoryItem[]>([]);
+
+  // Load history on mount and listen for updates
+  React.useEffect(() => {
+    const loadHistory = () => {
+      const items = getHistory();
+      setHistory(items);
+    };
+
+    loadHistory();
+
+    // Listen for storage changes (e.g., from other tabs)
+    const handleStorageChange = (e: StorageEvent) => {
+      if (e.key === 'convert-ui-history') {
+        loadHistory();
+      }
+    };
+
+    // Listen for custom event (same-page updates)
+    const handleHistoryUpdate = () => {
+      loadHistory();
+    };
+
+    window.addEventListener('storage', handleStorageChange);
+    window.addEventListener('conversionHistoryUpdated', handleHistoryUpdate);
+
+    return () => {
+      window.removeEventListener('storage', handleStorageChange);
+      window.removeEventListener('conversionHistoryUpdated', handleHistoryUpdate);
+    };
+  }, []);
+
+  const handleClearHistory = () => {
+    if (confirm('Are you sure you want to clear all conversion history?')) {
+      clearHistory();
+      setHistory([]);
+    }
+  };
+
+  const handleRemoveItem = (id: string) => {
+    removeHistoryItem(id);
+    setHistory((prev) => prev.filter((item) => item.id !== id));
+  };
+
+  const formatTimestamp = (timestamp: number) => {
+    const date = new Date(timestamp);
+    const now = new Date();
+    const diffMs = now.getTime() - date.getTime();
+    const diffMins = Math.floor(diffMs / 60000);
+    const diffHours = Math.floor(diffMs / 3600000);
+    const diffDays = Math.floor(diffMs / 86400000);
+
+    if (diffMins < 1) return 'Just now';
+    if (diffMins < 60) return `${diffMins} minute${diffMins > 1 ? 's' : ''} ago`;
+    if (diffHours < 24) return `${diffHours} hour${diffHours > 1 ? 's' : ''} ago`;
+    if (diffDays < 7) return `${diffDays} day${diffDays > 1 ? 's' : ''} ago`;
+
+    return date.toLocaleDateString();
+  };
+
+  if (history.length === 0) {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <History className="h-5 w-5" />
+            Conversion History
+          </CardTitle>
+          <CardDescription>Your recent conversions will appear here</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="text-center py-12 text-muted-foreground">
+            <History className="h-12 w-12 mx-auto mb-4 opacity-50" />
+            <p>No conversion history yet</p>
+            <p className="text-sm mt-1">Convert some files to see them here</p>
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex items-center justify-between">
+          <div>
+            <CardTitle className="flex items-center gap-2">
+              <History className="h-5 w-5" />
+              Conversion History
+            </CardTitle>
+            <CardDescription>
+              Recent conversions ({history.length} item{history.length > 1 ? 's' : ''})
+            </CardDescription>
+          </div>
+          <Button variant="outline" size="sm" onClick={handleClearHistory}>
+            <Trash2 className="h-4 w-4 mr-2" />
+            Clear All
+          </Button>
+        </div>
+      </CardHeader>
+      <CardContent>
+        <div className="space-y-3">
+          {history.map((item) => (
+            <div
+              key={item.id}
+              className="border border-border rounded-lg p-4 hover:bg-muted/50 transition-colors"
+            >
+              <div className="flex items-start justify-between gap-4">
+                <div className="flex-1 min-w-0">
+                  {/* File conversion info */}
+                  <div className="flex items-center gap-2 mb-2">
+                    <span className="text-sm font-medium text-foreground truncate">
+                      {item.inputFileName}
+                    </span>
+                    <ArrowRight className="h-3.5 w-3.5 text-muted-foreground flex-shrink-0" />
+                    <span className="text-sm font-medium text-foreground truncate">
+                      {item.outputFileName}
+                    </span>
+                  </div>
+
+                  {/* Format conversion */}
+                  <div className="flex items-center gap-2 text-xs text-muted-foreground mb-1">
+                    <span className="px-2 py-0.5 bg-muted rounded">
+                      {item.inputFormat}
+                    </span>
+                    <ArrowRight className="h-3 w-3" />
+                    <span className="px-2 py-0.5 bg-muted rounded">
+                      {item.outputFormat}
+                    </span>
+                    <span>•</span>
+                    <span>{formatFileSize(item.fileSize)}</span>
+                  </div>
+
+                  {/* Timestamp */}
+                  <div className="flex items-center gap-1 text-xs text-muted-foreground">
+                    <Clock className="h-3 w-3" />
+                    <span>{formatTimestamp(item.timestamp)}</span>
+                  </div>
+                </div>
+
+                {/* Remove button */}
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  onClick={() => handleRemoveItem(item.id)}
+                  className="flex-shrink-0"
+                >
+                  <Trash2 className="h-4 w-4" />
+                  <span className="sr-only">Remove</span>
+                </Button>
+              </div>
+            </div>
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/lib/storage/history.ts b/lib/storage/history.ts
index a15972c..6782ddd 100644
--- a/lib/storage/history.ts
+++ b/lib/storage/history.ts
@@ -43,6 +43,9 @@ export function addToHistory(item: Omit<ConversionHistoryItem, 'id' | 'timestamp
     const trimmed = history.slice(0, MAX_HISTORY_ITEMS);
 
     localStorage.setItem(HISTORY_KEY, JSON.stringify(trimmed));
+
+    // Dispatch custom event for same-page updates
+    window.dispatchEvent(new CustomEvent('conversionHistoryUpdated'));
   } catch (error) {
     console.error('Failed to save history:', error);
   }