diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
new file mode 100644
index 0000000..14c644f
--- /dev/null
+++ b/src/routes/+layout.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+	import '../app.css';
+	let { children } = $props();
+</script>
+
+<svelte:head>
+  <title>SvelteKit 7 GUIs</title>
+</svelte:head>
+
+<div class="drawer drawer-open">
+  <input id="my-drawer-2" type="checkbox" class="drawer-toggle"/>
+  <div class="drawer-content">
+    <main class="p-4">
+      {@render children()}
+    </main>
+  </div>
+  <div class="drawer-side">
+    <ul class="menu bg-base-200 text-base-content min-h-full w-80 p-4">
+      <li><a href="/1_counter">1. Counter</a></li>
+    </ul>
+  </div>
+</div>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
new file mode 100644
index 0000000..778348e
--- /dev/null
+++ b/src/routes/+page.svelte
@@ -0,0 +1 @@
+<p class="m-4">Select a GUI</p>
\ No newline at end of file
diff --git a/src/routes/1_counter/+page.svelte b/src/routes/1_counter/+page.svelte
new file mode 100644
index 0000000..60655ec
--- /dev/null
+++ b/src/routes/1_counter/+page.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+  let state = $state(0);
+</script>
+
+<div class="text-center">
+  <div class="stats shadow-lg">
+    <div class="stat">
+      <div class="stat-title">1. Counter</div>
+      <div class="stat-value">{state}</div>
+      <button class="btn" onclick={() => state++}>Count</button>
+    </div>
+  </div>
+</div>