diff --git a/TODO.md b/TODO.md
index b4098fdd1..a01c5747f 100644
--- a/TODO.md
+++ b/TODO.md
@@ -61,12 +61,12 @@ A step-by-step checklist for porting MatterControl's design features to a Vue +
 ## Phase 3: Core UI Layout
 
 ### Application Shell
-- [ ] Create `AppLayout.vue` with CSS Grid layout
-- [ ] Add header area with app title
-- [ ] Add left sidebar container (tools panel)
-- [ ] Add right sidebar container (properties panel)
-- [ ] Add center viewport area
-- [ ] Add bottom status bar
+- [x] Create `AppLayout.vue` with CSS Grid layout
+- [x] Add header area with app title
+- [x] Add left sidebar container (tools panel)
+- [x] Add right sidebar container (properties panel)
+- [x] Add center viewport area
+- [x] Add bottom status bar
 
 ### Theme System
 - [ ] Define CSS custom properties for colors
diff --git a/index.html b/index.html
index b4000672f..e9564a3ea 100644
--- a/index.html
+++ b/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>app</title>
+    <title>RapidModel</title>
   </head>
   <body>
     <div id="app"></div>
diff --git a/package.json b/package.json
index ff5a98df9..09d0c32a6 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "app",
+  "name": "rapidmodel",
   "private": true,
   "version": "0.0.0",
   "type": "module",
diff --git a/src/App.vue b/src/App.vue
index 3b51102f8..19bf8907d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,16 +1,13 @@
 <script setup lang="ts">
+import AppLayout from './components/AppLayout.vue'
 import Viewport from './components/Viewport.vue'
 </script>
 
 <template>
-  <div class="app">
+  <AppLayout>
     <Viewport />
-  </div>
+  </AppLayout>
 </template>
 
 <style scoped>
-.app {
-  width: 100vw;
-  height: 100vh;
-}
 </style>
diff --git a/src/components/AppLayout.vue b/src/components/AppLayout.vue
new file mode 100644
index 000000000..0d9170b81
--- /dev/null
+++ b/src/components/AppLayout.vue
@@ -0,0 +1,89 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div class="app-layout">
+    <header class="header">
+      <slot name="header">
+        <h1>RapidModel</h1>
+      </slot>
+    </header>
+
+    <aside class="left-sidebar">
+      <slot name="left-sidebar" />
+    </aside>
+
+    <main class="viewport">
+      <slot />
+    </main>
+
+    <aside class="right-sidebar">
+      <slot name="right-sidebar" />
+    </aside>
+
+    <footer class="status-bar">
+      <slot name="status-bar" />
+    </footer>
+  </div>
+</template>
+
+<style scoped>
+.app-layout {
+  display: grid;
+  grid-template-areas:
+    'header header header'
+    'left-sidebar viewport right-sidebar'
+    'status-bar status-bar status-bar';
+  grid-template-columns: 240px 1fr 240px;
+  grid-template-rows: 48px 1fr 24px;
+  height: 100vh;
+  width: 100vw;
+  overflow: hidden;
+}
+
+.header {
+  grid-area: header;
+  display: flex;
+  align-items: center;
+  padding: 0 16px;
+  background: #1a1a2e;
+  border-bottom: 1px solid #2a2a3e;
+}
+
+.header h1 {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 500;
+  color: #e0e0e0;
+}
+
+.left-sidebar {
+  grid-area: left-sidebar;
+  background: #1e1e2e;
+  border-right: 1px solid #2a2a3e;
+  overflow-y: auto;
+}
+
+.viewport {
+  grid-area: viewport;
+  overflow: hidden;
+}
+
+.right-sidebar {
+  grid-area: right-sidebar;
+  background: #1e1e2e;
+  border-left: 1px solid #2a2a3e;
+  overflow-y: auto;
+}
+
+.status-bar {
+  grid-area: status-bar;
+  display: flex;
+  align-items: center;
+  padding: 0 16px;
+  background: #1a1a2e;
+  border-top: 1px solid #2a2a3e;
+  font-size: 12px;
+  color: #888;
+}
+</style>
