diff --git a/TODO.md b/TODO.md
deleted file mode 100644
index f2df375..0000000
--- a/TODO.md
+++ /dev/null
@@ -1,3 +0,0 @@
-Change router to svelte-spa-router
-Remove data directory
-Build and update workflows
diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
index 9a8ef8b..f3057ec 100644
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -4,7 +4,7 @@
     "beforeBuildCommand": "pnpm svelte:build",
     "beforeDevCommand": "pnpm svelte:dev",
     "devPath": "http://localhost:5173",
-    "distDir": "../dist"
+    "distDir": "../build"
   },
   "package": {
     "productName": "svelte-tauri",
diff --git a/src/lib/components/footer/Footer.svelte b/src/lib/components/footer/Footer.svelte
deleted file mode 100644
index 385cdfb..0000000
--- a/src/lib/components/footer/Footer.svelte
+++ /dev/null
@@ -1,3 +0,0 @@
-<script lang="ts">
-  // Empty for now
-</script>
diff --git a/src/lib/components/transition/Transition.svelte b/src/lib/components/transition/Transition.svelte
deleted file mode 100644
index 5ad787a..0000000
--- a/src/lib/components/transition/Transition.svelte
+++ /dev/null
@@ -1,10 +0,0 @@
-<script>
-  import { router } from 'tinro';
-  import { fade } from 'svelte/transition';
-</script>
-
-{#key $router.path}
-  <div in:fade={{ duration: 700 }} class="h-full w-full">
-    <slot />
-  </div>
-{/key}
diff --git a/src/lib/data/NavLinks.ts b/src/lib/data/NavLinks.ts
deleted file mode 100644
index 53135e9..0000000
--- a/src/lib/data/NavLinks.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import type { NavLink } from '$types';
-
-export const navLinks: NavLink[] = [
-  {
-    content: {
-      text: 'Home'
-    },
-    target: {
-      href: '/',
-      newTab: false
-    }
-  },
-  {
-    content: {
-      text: 'Call-Tauri'
-    },
-    target: {
-      href: '/call-tauri',
-      newTab: false
-    }
-  },
-  {
-    content: {
-      text: 'Hash-string'
-    },
-    target: {
-      href: '/hash-string',
-      newTab: false
-    }
-  },
-
-  {
-    content: {
-      text: 'Versions'
-    },
-    target: {
-      href: '/versions',
-      newTab: false
-    }
-  }
-];
diff --git a/src/lib/components/header/Header.svelte b/src/lib/layout/BaseHeader.svelte
similarity index 50%
rename from src/lib/components/header/Header.svelte
rename to src/lib/layout/BaseHeader.svelte
index 5478752..1ead1bb 100644
--- a/src/lib/components/header/Header.svelte
+++ b/src/lib/layout/BaseHeader.svelte
@@ -5,43 +5,52 @@
   import { faXmark, faWindowMinimize } from '@fortawesome/free-solid-svg-icons';
   import { faGithub } from '@fortawesome/free-brands-svg-icons';
   import Fa from 'svelte-fa';
-  import { navLinks } from '$data/NavLinks';
+  import { link } from 'svelte-spa-router';
 </script>
 
 <header
   data-tauri-drag-region
-  class="h-12 bg-base-100 shadow-lg items-center justify-between flex px-2"
->
-  <button on:click={theme.toggleTheme} class="hover:text-secondary ml-2 grid">
+  class="flex h-12 items-center justify-between bg-base-100 px-2 shadow-lg">
+  <button
+    tabindex="-1"
+    on:click={theme.toggleTheme}
+    class="flex items-center hover:text-secondary">
     <ThemeToggleIcon theme={$theme} />
   </button>
 
   <nav>
-    <ul class="flex space-x-4">
-      {#each navLinks as navLink, i (i)}
-        <li>
-          <a
-            href={navLink.target.href}
-            target={navLink.target.newTab ? '_blank' : ''}
-            class="hover:text-secondary transition-colors"
-          >
-            {#if navLink.content.icon}
-              <Fa icon={navLink.content.icon} />
-            {/if}
-            {navLink.content.text}
-          </a>
-        </li>
-      {/each}
+    <ul class="flex space-x-4 text-xl font-bold">
+      <li>
+        <a use:link href="/" class="transition-colors hover:text-secondary">
+          Home
+        </a>
+      </li>
+      <li>
+        <a
+          use:link
+          href="/#call_tauri"
+          class="transition-colors hover:text-secondary">
+          Call Tauri
+        </a>
+      </li>
+
+      <li>
+        <a
+          use:link
+          href="/#versions"
+          class="transition-colors hover:text-secondary">
+          Versions
+        </a>
+      </li>
     </ul>
   </nav>
 
-  <div class="flex [&>*]:px-2 h-full  [&>*]:transition-all">
+  <div class="flex h-full [&>*]:px-2 [&>*]:transition-all">
     <a
       target="_blank"
       href="https://github.com/Fractal-Tess/Svelte-Tauri"
-      class="hover:text-secondary flex items-center"
-      rel="noreferrer"
-    >
+      class="flex items-center hover:text-secondary"
+      rel="noreferrer">
       <Fa icon={faGithub} size="lg" />
     </a>
     <button on:click={appWindow.minimize} class="text-xl hover:text-secondary">
diff --git a/src/lib/layout/BaseLayout.svelte b/src/lib/layout/BaseLayout.svelte
index bfb09a3..b911128 100644
--- a/src/lib/layout/BaseLayout.svelte
+++ b/src/lib/layout/BaseLayout.svelte
@@ -1,16 +1,12 @@
 <script lang="ts">
   import { fade } from 'svelte/transition';
 
-  import Header from '$lib/components/header/Header.svelte';
-  import Footer from '$lib/components/footer/Footer.svelte';
+  import Header from '$layout/BaseHeader.svelte';
 </script>
 
-<div
-  class="font-sans bg-base-100 text-base-content h-screen flex flex-col overflow-y-auto overflow-x-hidden"
->
+<div class="form-control min-h-screen bg-fixed heropattern-topography-white/10">
   <Header />
-  <main class="flex-1" in:fade={{ delay: 300, duration: 1000 }}>
+  <main class="form-control flex-1" in:fade={{ delay: 300, duration: 1000 }}>
     <slot />
   </main>
-  <Footer />
 </div>
diff --git a/src/lib/router/Router.svelte b/src/lib/router/Router.svelte
index 3390d71..96990d6 100644
--- a/src/lib/router/Router.svelte
+++ b/src/lib/router/Router.svelte
@@ -1,19 +1,15 @@
 <script lang="ts">
-  import { Route, router } from 'tinro';
-  router.mode.hash();
+  import Router from 'svelte-spa-router';
 
   import Index from '$lib/router/routes/Index.svelte';
   import CallTauri from '$router/routes/CallTauri.svelte';
-  import HashString from '$router/routes/HashString.svelte';
   import Versions from '$router/routes/Versions.svelte';
-  import Transition from '$lib/components/transition/Transition.svelte';
+
+  const routes = {
+    '/': Index,
+    '/#call_tauri': CallTauri,
+    '/#versions': Versions
+  };
 </script>
 
-<!-- Fix for linting errors: ->
-   https://github.com/AlexxNB/tinro/pull/121/commits/d2251ffed630aac6e76e71856204ead5dd2f6661 -->
-<Transition>
-  <Route path="/"><Index /></Route>
-  <Route path="/call-tauri"><CallTauri /></Route>
-  <Route path="/hash-string"><HashString /></Route>
-  <Route path="/versions"><Versions /></Route>
-</Transition>
+<Router {routes} />
diff --git a/src/lib/router/routes/CallTauri.svelte b/src/lib/router/routes/CallTauri.svelte
index d6387f9..4aa8871 100644
--- a/src/lib/router/routes/CallTauri.svelte
+++ b/src/lib/router/routes/CallTauri.svelte
@@ -2,6 +2,12 @@
   import { fade } from 'svelte/transition';
   import { invoke } from '@tauri-apps/api';
 
+  let hashInput = 'Hello world';
+  let hashOutput = '';
+  $: (async () => {
+    hashOutput = await invoke('hash256sum', { hashInput });
+  })();
+
   let message = '';
 
   async function callTauri() {
@@ -9,20 +15,33 @@
   }
 </script>
 
-<div class="h-full flex flex-col items-center justify-center">
-  <button
-    on:click={callTauri}
-    class="font-extrabold btn btn-outline btn-primary btn-md">Call Tauri</button
-  >
-  <div class="h-20 flex items-center">
-    {#key message}
-      <p
-        class="border-b-2 border-accent text-2xl
-    whitespace-nowrap"
-        in:fade={{ duration: 300 }}
-      >
-        {message}
-      </p>
-    {/key}
-  </div>
+<div
+  class="form-control h-full flex-1 items-center justify-center gap-y-8
+  [&>section]:form-control [&>section]:items-center [&>section]:justify-center [&>section]:gap-y-4">
+  <section class="">
+    <button
+      on:click={callTauri}
+      class="btn-outline btn-primary btn-md btn font-extrabold"
+      >Call Tauri</button>
+    <div class="flex h-20 items-center">
+      {#key message}
+        <p
+          class="whitespace-nowrap border-b-2 border-accent
+    text-2xl"
+          in:fade={{ duration: 300 }}>
+          {message}
+        </p>
+      {/key}
+    </div>
+  </section>
+  <section>
+    <label class="input-group flex max-w-max">
+      <span>Hash string</span>
+      <input
+        bind:value={hashInput}
+        type="text"
+        class="input-bordered input-secondary input focus:border-secondary focus:outline-none focus:ring-secondary" />
+    </label>
+    <p class="text-center text-lg">{hashOutput}</p>
+  </section>
 </div>
diff --git a/src/lib/router/routes/HashString.svelte b/src/lib/router/routes/HashString.svelte
deleted file mode 100644
index f6a2944..0000000
--- a/src/lib/router/routes/HashString.svelte
+++ /dev/null
@@ -1,23 +0,0 @@
-<script lang="ts">
-  import { invoke } from '@tauri-apps/api';
-
-  let hashInput = 'Hello world';
-  let hashOutput = '';
-  $: (async () => {
-    hashOutput = await invoke('hash256sum', { hashInput });
-  })();
-</script>
-
-<div class="h-full flex flex-col space-y-8 items-center justify-center">
-  <div class="form-control">
-    <label class="input-group">
-      <span>Hash string</span>
-      <input
-        bind:value={hashInput}
-        type="text"
-        class="input input-bordered input-secondary focus:ring-secondary focus:border-secondary focus:outline-none"
-      />
-    </label>
-  </div>
-  <p class="text-center text-lg">{hashOutput}</p>
-</div>
diff --git a/src/lib/router/routes/Index.svelte b/src/lib/router/routes/Index.svelte
index bc3f37f..be39959 100644
--- a/src/lib/router/routes/Index.svelte
+++ b/src/lib/router/routes/Index.svelte
@@ -1,20 +1,17 @@
 <script lang="ts">
-  import svelte_logo from '$assets/svelte_logo.svg';
-  import tauri_logo from '$assets/tauri_logo.svg';
 </script>
 
 <div
-  class="flex flex-col space-y-6 items-center justify-center font-bold drop-shadow-ft h-full"
->
+  class="form-control flex-1 items-center justify-center space-y-6 text-center font-bold">
   <h1 class="text-6xl">Welcome</h1>
-  <h2 class="text-3xl flex items-center">
+  <h2 class="flex items-center text-3xl [&_img]:h-12">
     This is a &#160
     <span>
-      <img src={svelte_logo} alt="svelte logo" class="h-12" />
+      <img src={'/svelte_logo.svg'} alt="svelte logo" />
     </span>
     &#160-&#160
     <span>
-      <img src={tauri_logo} alt="svelte logo" class="h-12" />
+      <img src={'/tauri_logo.svg'} alt="svelte logo" />
     </span>
     &#160 Template
   </h2>
diff --git a/src/lib/router/routes/Versions.svelte b/src/lib/router/routes/Versions.svelte
index 719d655..72fcb4c 100644
--- a/src/lib/router/routes/Versions.svelte
+++ b/src/lib/router/routes/Versions.svelte
@@ -8,9 +8,9 @@
 
   const getVersions = async (): Promise<Versions> => {
     const [tauri, app, name] = await Promise.all([
+      getName(),
       getTauriVersion(),
-      getVersion(),
-      getName()
+      getVersion()
     ]);
     return {
       tauri,
@@ -21,15 +21,15 @@
 </script>
 
 <div
-  class="h-full flex flex-col space-y-8 items-center justify-center text-xl font-bold"
->
-  <h1 class="text-2xl">Versions</h1>
+  class="form-control flex-1 items-center justify-center space-y-8 text-2xl font-bold">
+  <h1 class="text-5xl text-primary">Versions</h1>
   <div>
-    <ul class="flex flex-col space-y-4">
+    <ul class="form-control space-y-4">
       {#await getVersions() then versions}
-        {#each Object.entries(versions) as [key, val], i (i)}
+        {#each Object.entries(versions) as [key, val]}
           <li>
-            {key} - {val}
+            <span class="text-secondary"> {key}</span> -
+            <span class="text-primary"> {val}</span>
           </li>
         {/each}
       {/await}
diff --git a/src/styles.postcss b/src/styles.postcss
index 3f18ff2..2922120 100644
--- a/src/styles.postcss
+++ b/src/styles.postcss
@@ -8,16 +8,24 @@ html {
   -webkit-font-smoothing: antialiased;
 }
 
-body,
-html {
-  /* Fix tailwindcss/daisyUI applying color to the body tag */
-  background-color: transparent !important;
-  @apply rounded-3xl overflow-hidden;
-}
-
 @layer utilities {
   /* Class is used for development purposes only */
   .dev {
-    border: 1px solid red;
+    @apply border-[1px];
+  }
+  .devo {
+    @apply outline outline-dashed outline-1 outline-primary;
   }
 }
+
+@layer base {
+  input[type='number']::-webkit-inner-spin-button,
+  input[type='number']::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+}
+
+input[type='number'] {
+  -moz-appearance: textfield;
+}
diff --git a/vite.config.ts b/vite.config.ts
index f5fd7e7..4201f32 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -29,6 +29,7 @@ export default defineConfig({
   envPrefix: ['VITE_', 'TAURI_'],
 
   build: {
+    outDir: 'build',
     target: ['es2021', 'chrome100', 'safari13'],
     minify: !process.env.TAURI_DEBUG ? 'esbuild' : false,
     sourcemap: !!process.env.TAURI_DEBUG