diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index ec4b0dc..2f465cc 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,5 +1,13 @@
-<script>
+<script lang="ts">
   import '../app.css'
+  let { children } = $props();
 </script>
 
-<slot />
\ No newline at end of file
+<nav>
+  <a href="/">home</a>
+  <a href="/about">about</a>
+  <a href="/blog">blog</a>
+</nav>
+
+{@render children()}
+
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index c2e04d5..a5d0efe 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -33,4 +33,4 @@
       max-width: none;
     }
   }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte
new file mode 100644
index 0000000..26b5b7a
--- /dev/null
+++ b/src/routes/about/+page.svelte
@@ -0,0 +1,31 @@
+<main>
+  <h1>About </h1>
+  <p>This is the about page</p>
+</main>
+
+<style>
+  main {
+    text-align: center;
+    padding: 1em;
+    max-width: 240px;
+    margin: 0 auto;
+  }
+
+  h1 {
+    color: #ff3e00;
+    text-transform: uppercase;
+    font-size: 4em;
+    font-weight: 100;
+  }
+
+  p {
+    color: #333;
+    margin: 1em 0;
+  }
+
+  @media (min-width: 640px) {
+    main {
+      max-width: none;
+    }
+  }
+</style>
diff --git a/src/routes/blog/+page.svelte b/src/routes/blog/+page.svelte
new file mode 100644
index 0000000..e96bd62
--- /dev/null
+++ b/src/routes/blog/+page.svelte
@@ -0,0 +1,14 @@
+<main>
+	<h1>blog</h1>
+	<ul>
+		<li>
+			<a href="/blog/one">one</a>
+		</li>
+		<li>
+			<a href="/blog/two">two</a>
+		</li>
+		<li>
+			<a href="/blog/three">three</a>
+		</li>
+	</ul>
+</main>
diff --git a/src/routes/blog/[slug]/+page.svelte b/src/routes/blog/[slug]/+page.svelte
new file mode 100644
index 0000000..fed9831
--- /dev/null
+++ b/src/routes/blog/[slug]/+page.svelte
@@ -0,0 +1,30 @@
+<main>
+  <h1>blog</h1>
+</main>
+
+<style>
+  main {
+    text-align: center;
+    padding: 1em;
+    max-width: 240px;
+    margin: 0 auto;
+  }
+
+  h1 {
+    color: #ff3e00;
+    text-transform: uppercase;
+    font-size: 4em;
+    font-weight: 100;
+  }
+
+  p {
+    color: #333;
+    margin: 1em 0;
+  }
+
+  @media (min-width: 640px) {
+    main {
+      max-width: none;
+    }
+  }
+</style>