diff --git a/web/index.html b/web/index.html
new file mode 100644
index 0000000..4213ca1
--- /dev/null
+++ b/web/index.html
@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>MoMentry Playground</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div id="app">
+        <header class="toolbar">
+            <div class="toolbar-left">
+                <button id="btn-open" class="btn">Open</button>
+                <input type="text" id="input-file" class="input" placeholder="File path or URL">
+            </div>
+            <div class="toolbar-center">
+                <span id="title">MoMentry Playground</span>
+            </div>
+            <div class="toolbar-right">
+                <select id="select-locale" class="select">
+                    <option value="en">English</option>
+                    <option value="zh-TW">中文</option>
+                </select>
+            </div>
+        </header>
+
+        <main class="viewport" id="viewport">
+            <div class="media-container" id="media-container">
+                <canvas id="video-canvas"></canvas>
+                <div class="subtitle-overlay" id="subtitle-overlay">
+                    <span id="subtitle-text"></span>
+                </div>
+            </div>
+        </main>
+
+        <div class="progress-container">
+            <div class="chunk-markers" id="chunk-markers"></div>
+            <input type="range" id="progress-bar" class="progress-bar" min="0" max="100" value="0">
+            <div class="time-display">
+                <span id="current-time">00:00:00</span>
+                <span>/</span>
+                <span id="total-time">00:00:00</span>
+            </div>
+        </div>
+
+        <div class="controls">
+            <div class="controls-left">
+                <button id="btn-prev" class="btn btn-icon" title="Previous frame">[</button>
+                <button id="btn-play" class="btn btn-icon" title="Play/Pause">▶</button>
+                <button id="btn-next" class="btn btn-icon" title="Next frame">]</button>
+            </div>
+            <div class="controls-center">
+                <div class="volume-control">
+                    <button id="btn-mute" class="btn btn-icon" title="Mute">🔊</button>
+                    <input type="range" id="volume-slider" class="volume-slider" min="0" max="100" value="100">
+                </div>
+                <div class="speed-control">
+                    <select id="select-speed" class="select">
+                        <option value="0.25">0.25x</option>
+                        <option value="0.5">0.5x</option>
+                        <option value="0.75">0.75x</option>
+                        <option value="1" selected>1.0x</option>
+                        <option value="1.25">1.25x</option>
+                        <option value="1.5">1.5x</option>
+                        <option value="2">2.0x</option>
+                    </select>
+                </div>
+            </div>
+            <div class="controls-right">
+                <div class="overlay-toggles">
+                    <button id="btn-subtitle" class="btn btn-toggle" data-active="false">S</button>
+                    <button id="btn-yolo" class="btn btn-toggle" data-active="false">Y</button>
+                    <button id="btn-chunks" class="btn btn-toggle" data-active="false">C</button>
+                </div>
+            </div>
+        </div>
+
+        <footer class="status-bar">
+            <div class="status-left">
+                <span id="status-playback">Stopped</span>
+            </div>
+            <div class="status-center">
+                <span id="status-frame">Frame: 0</span>
+                <span id="status-fps">| 0.00 fps</span>
+            </div>
+            <div class="status-right">
+                <span id="status-zoom">100%</span>
+            </div>
+        </footer>
+    </div>
+
+    <div class="search-panel" id="search-panel" style="display: none;">
+        <div class="search-header">
+            <input type="text" id="search-input" class="input" placeholder="Search...">
+            <button id="btn-search" class="btn">Search</button>
+            <button id="btn-close-search" class="btn">×</button>
+        </div>
+        <div class="search-results" id="search-results"></div>
+    </div>
+
+    <script src="app.js"></script>
+</body>
+</html>
