2 files changed, 20 insertions, 3 deletions
diff --git a/apps/web/src/components/editor/media-panel/index.tsx b/apps/web/src/components/editor/media-panel/index.tsx
index 9f7322c7..90ac84f0 100644
--- a/apps/web/src/components/editor/media-panel/index.tsx
+++ b/apps/web/src/components/editor/media-panel/index.tsx
@@ -4,15 +4,14 @@ import { TabBar } from "./tabbar";
 import { MediaView } from "./views/media";
 import { useMediaPanelStore, Tab } from "./store";
 import { TextView } from "./views/text";
+import { AudioView } from "./views/audio";
 
 export function MediaPanel() {
   const { activeTab } = useMediaPanelStore();
 
   const viewMap: Record<Tab, React.ReactNode> = {
     media: <MediaView />,
-    audio: (
-      <div className="p-4 text-muted-foreground">Audio view coming soon...</div>
-    ),
+    audio: <AudioView />,
     text: <TextView />,
     stickers: (
       <div className="p-4 text-muted-foreground">
diff --git a/apps/web/src/components/editor/media-panel/views/audio.tsx b/apps/web/src/components/editor/media-panel/views/audio.tsx
new file mode 100644
index 00000000..7ddf465c
--- /dev/null
+++ b/apps/web/src/components/editor/media-panel/views/audio.tsx
@@ -0,0 +1,18 @@
+"use client";
+
+import { Input } from "@/components/ui/input";
+import { useState } from "react";
+
+export function AudioView() {
+  const [search, setSearch] = useState("");
+  return (
+    <div className="h-full flex flex-col gap-2 p-4">
+      <Input
+        placeholder="Search songs and artists"
+        value={search}
+        onChange={(e) => setSearch(e.target.value)}
+      />
+      <div className="flex flex-col gap-2"></div>
+    </div>
+  );
+}