diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx
index 71716e74..9ac54262 100644
--- a/apps/web/src/app/layout.tsx
+++ b/apps/web/src/app/layout.tsx
@@ -4,7 +4,6 @@ import Script from "next/script";
 import "./globals.css";
 import { Toaster } from "../components/ui/sonner";
 import { TooltipProvider } from "../components/ui/tooltip";
-import { DevelopmentDebug } from "../components/development-debug";
 import { StorageProvider } from "../components/storage-provider";
 import { baseMetaData } from "./metadata";
 import { defaultFont } from "../lib/font-config";
@@ -24,7 +23,6 @@ export default function RootLayout({
             <StorageProvider>{children}</StorageProvider>
             <Analytics />
             <Toaster />
-            <DevelopmentDebug />
             <Script
               src="https://cdn.databuddy.cc/databuddy.js"
               strategy="afterInteractive"
diff --git a/apps/web/src/components/development-debug.tsx b/apps/web/src/components/development-debug.tsx
deleted file mode 100644
index 62e606ff..00000000
--- a/apps/web/src/components/development-debug.tsx
+++ /dev/null
@@ -1,109 +0,0 @@
-"use client";
-
-import { useTimelineStore } from "@/stores/timeline-store";
-import { useMediaStore, type MediaItem } from "@/stores/media-store";
-import { TimelineTrack } from "@/types/timeline";
-import { usePlaybackStore } from "@/stores/playback-store";
-import { Button } from "@/components/ui/button";
-import { useState } from "react";
-import type { TimelineElement } from "@/types/timeline";
-import { env } from "@/env";
-
-// Only show in development
-const SHOW_DEBUG_INFO = env.NODE_ENV === "development";
-
-interface ActiveElement {
-  element: TimelineElement;
-  track: TimelineTrack;
-  mediaItem: MediaItem | null;
-}
-
-export function DevelopmentDebug() {
-  const { tracks } = useTimelineStore();
-  const { mediaItems } = useMediaStore();
-  const { currentTime } = usePlaybackStore();
-  const [showDebug, setShowDebug] = useState(false);
-
-  // Don't render anything in production
-  if (!SHOW_DEBUG_INFO) return null;
-
-  // Get active elements at current time
-  const getActiveElements = (): ActiveElement[] => {
-    const activeElements: ActiveElement[] = [];
-
-    tracks.forEach((track) => {
-      track.elements.forEach((element) => {
-        const elementStart = element.startTime;
-        const elementEnd =
-          element.startTime +
-          (element.duration - element.trimStart - element.trimEnd);
-
-        if (currentTime >= elementStart && currentTime < elementEnd) {
-          const mediaItem =
-            element.type === "media"
-              ? mediaItems.find((item) => item.id === element.mediaId) || null
-              : null; // Text elements don't have media items
-
-          activeElements.push({ element, track, mediaItem });
-        }
-      });
-    });
-
-    return activeElements;
-  };
-
-  const activeElements = getActiveElements();
-
-  return (
-    <div className="fixed bottom-4 right-4 z-50">
-      <div className="flex flex-col items-end gap-2">
-        {/* Toggle Button */}
-        <Button
-          variant="outline"
-          size="sm"
-          onClick={() => setShowDebug(!showDebug)}
-          className="text-xs backdrop-blur-md bg-background/80 border-border/50"
-        >
-          Debug {showDebug ? "ON" : "OFF"}
-        </Button>
-
-        {/* Debug Info Panel */}
-        {showDebug && (
-          <div className="backdrop-blur-md bg-background/90 border border-border/50 rounded-lg p-3 max-w-sm">
-            <div className="text-xs font-medium mb-2 text-foreground">
-              Active Elements ({activeElements.length})
-            </div>
-            <div className="space-y-1 max-h-40 overflow-y-auto">
-              {activeElements.map((elementData, index) => (
-                <div
-                  key={elementData.element.id}
-                  className="flex items-center gap-2 px-2 py-1 bg-muted/60 rounded text-xs"
-                >
-                  <span className="w-4 h-4 bg-primary/20 rounded text-center text-xs leading-4 flex-shrink-0">
-                    {index + 1}
-                  </span>
-                  <div className="min-w-0 flex-1">
-                    <div className="truncate">{elementData.element.name}</div>
-                    <div className="text-muted-foreground text-[10px]">
-                      {elementData.element.type === "media"
-                        ? elementData.mediaItem?.type || "media"
-                        : "text"}
-                    </div>
-                  </div>
-                </div>
-              ))}
-              {activeElements.length === 0 && (
-                <div className="text-muted-foreground text-xs py-2 text-center">
-                  No active elements
-                </div>
-              )}
-            </div>
-            <div className="mt-2 pt-2 border-t border-border/30 text-[10px] text-muted-foreground">
-              Time: {currentTime.toFixed(2)}s
-            </div>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}