diff --git a/src/lib/components/Navigation.svelte b/src/lib/components/Navigation.svelte
new file mode 100644
index 0000000..51ee57b
--- /dev/null
+++ b/src/lib/components/Navigation.svelte
@@ -0,0 +1,18 @@
+<script>
+import { currentActivate } from '$lib/stores/navigate';
+</script>
+
+<div class="flex flex-row items-center px-2">
+  <div role="tablist" class="tabs tabs-border tabs-sm">
+    <a role="tab" class={['tab', $currentActivate === 'dataset' && 'tab-active']} href="/"
+      >Dataset</a>
+    <a role="tab" class={['tab', $currentActivate === 'settings' && 'tab-active']} href="/#"
+      >Settings</a>
+    <a role="tab" class={['tab', $currentActivate === 'pictures' && 'tab-active']} href="/#"
+      >Pictures</a>
+    <a role="tab" class={['tab', $currentActivate === 'analysis' && 'tab-active']} href="/#"
+      >Analysis</a>
+  </div>
+  <div class="grow"></div>
+  <div></div>
+</div>