diff --git a/src/App.vue b/src/App.vue
new file mode 100644
index 0000000..f0cd523
--- /dev/null
+++ b/src/App.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { reactive } from "vue";
+
+import { RouterView } from "vue-router";
+import SiteNavigation from "@/components/SiteNavigation.vue";
+import NavToggle from "@/components/NavToggle.vue";
+import HeaderBar from "@/components/HeaderBar.vue";
+
+interface State {
+  navActive: boolean;
+}
+
+const state: State = reactive({
+  navActive: false,
+});
+
+const toggleNav = (): void => {
+  state.navActive = !state.navActive;
+  document.body.classList.toggle("scroll-lock");
+};
+</script>
+
+<template>
+  <SiteNavigation :isActive="state.navActive" @selected="toggleNav" />
+
+  <HeaderBar>
+    <NavToggle @click.prevent="toggleNav" />
+    <template #heading>{{ $route.meta.title }}</template>
+  </HeaderBar>
+
+  <main>
+    <RouterView />
+  </main>
+</template>
diff --git a/src/main.ts b/src/main.ts
new file mode 100644
index 0000000..9640f2b
--- /dev/null
+++ b/src/main.ts
@@ -0,0 +1,12 @@
+import { createApp } from "vue";
+import App from "./App.vue";
+import router from "./router";
+
+import "normalize.css";
+import "@/scss/main.scss";
+
+const app = createApp(App);
+
+app.use(router);
+
+app.mount("body");