diff --git a/src/App.svelte b/src/App.svelte
index 69a0cac..3386e96 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -1,4 +1,25 @@
-<main>
+<script lang="ts">
+  import Compass from './lib/Compass.svelte';
+  import Panel from './lib/Panel.svelte';
+  import PromotionDialog from './lib/PromotionDialog.svelte';
+</script>
+
+<header>
   <h1>Duplicate Chess</h1>
-  <p>Sandbox under construction.</p>
+  <p>Local sandbox — operator drives all four players. Click a piece on the
+     glowing boards to see its synchronized-legal moves.</p>
+</header>
+
+<main>
+  <Compass />
+  <Panel />
 </main>
+
+<PromotionDialog />
+
+<style>
+  header { padding: 14px 22px; border-bottom: 1px solid #333845; }
+  header h1 { margin: 0; font-size: 17px; }
+  header p { margin: 4px 0 0; font-size: 12px; color: #9aa0aa; }
+  main { display: flex; gap: 22px; padding: 20px 22px; align-items: flex-start; }
+</style>
diff --git a/src/app.css b/src/app.css
index e69de29..b9ba296 100644
--- a/src/app.css
+++ b/src/app.css
@@ -0,0 +1,8 @@
+:root { color-scheme: dark; }
+* { box-sizing: border-box; }
+body {
+  margin: 0;
+  background: #15171c;
+  color: #e6e8ec;
+  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
+}