diff --git a/src/App.svelte b/src/App.svelte
index ac79152..b5d2534 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -1,7 +1,5 @@
 <script lang="ts">
-
+    import Layout from "./components/Layout/Layout.svelte";
 </script>
 
-<main>
-
-</main>
+<Layout />
diff --git a/src/components/Header/Header.svelte b/src/components/Header/Header.svelte
new file mode 100644
index 0000000..8059907
--- /dev/null
+++ b/src/components/Header/Header.svelte
@@ -0,0 +1,18 @@
+<script>
+
+</script>
+<header>
+    <h1>Scorecard</h1>
+</header>
+
+<style>
+    header {
+        display: flex;
+        padding: var(--size-fluid-2);
+        border-bottom: 1px solid var(--accent-color);
+    }
+
+    h1 {
+        font-size: var(--font-size-fluid-3);
+    }
+</style>
\ No newline at end of file
diff --git a/src/components/Layout/Layout.svelte b/src/components/Layout/Layout.svelte
new file mode 100644
index 0000000..af876db
--- /dev/null
+++ b/src/components/Layout/Layout.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+    import Header from "../Header/Header.svelte";
+</script>
+
+<Header />
+<main>
+    <slot />
+</main>
+
+<style>
+    main {
+        display: flex;
+        flex-direction: column;
+        height: 100dvh;
+    }
+</style>
\ No newline at end of file
diff --git a/src/styles/main.css b/src/styles/main.css
index 078fadd..1bbfd84 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -9,3 +9,13 @@
  normalize includes light and dark vars for adaptive theming
  */
 @import url('open-props/normalize');
+
+:root {
+    --accent-color: var(--gray-12);
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --accent-color: var(--gray-3);
+    }
+}