diff --git a/js/src/autoplay/AutoplayApp.tsx b/js/src/autoplay/AutoplayApp.tsx
index 2f1b651..cabf1d8 100644
--- a/js/src/autoplay/AutoplayApp.tsx
+++ b/js/src/autoplay/AutoplayApp.tsx
@@ -1,7 +1,39 @@
+import { Mic, X } from 'lucide-react';
+
 export function AutoplayApp() {
+  const handleClose = () => {
+    window.electronWindow.closeAutoplay();
+  };
+
   return (
-    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100vh', color: 'white', background: '#1a1a1a' }}>
-      <p>Autoplay Window</p>
+    <div className="flex h-screen w-screen items-center justify-center bg-card text-card-foreground">
+      <div className="relative w-full">
+        <button
+          className="absolute top-2 right-2 z-10 rounded-full bg-black/50 p-1 text-white hover:bg-black/70"
+          onClick={handleClose}
+        >
+          <X className="size-3.5" />
+        </button>
+
+        <div className="flex items-center gap-3 px-4 py-3">
+          <div className="relative">
+            <div className="flex size-6 items-center justify-center rounded-full bg-primary/10 text-primary text-[10px] font-medium">
+              JD
+            </div>
+            <Mic className="text-primary absolute -bottom-0.5 -right-0.5 size-3" />
+          </div>
+          <div className="min-w-0 flex-1">
+            <p className="truncate text-sm font-medium">john.doe</p>
+            <p className="text-muted-foreground truncate text-xs">
+              Playing audio...
+            </p>
+          </div>
+        </div>
+
+        <div className="bg-muted/50 mx-3 mb-3 h-1 overflow-hidden rounded-full">
+          <div className="bg-primary h-full w-2/3 rounded-full transition-all" />
+        </div>
+      </div>
     </div>
   );
 }