diff --git a/app.go b/app.go
index af53038..993e720 100644
--- a/app.go
+++ b/app.go
@@ -25,3 +25,7 @@ func (a *App) startup(ctx context.Context) {
 func (a *App) Greet(name string) string {
 	return fmt.Sprintf("Hello %s, It's show time!", name)
 }
+
+func (a *App) Foo() string {
+	return "bar"
+}
\ No newline at end of file
diff --git a/frontend/src/App.svelte b/frontend/src/App.svelte
index eaed6b9..85c84a7 100644
--- a/frontend/src/App.svelte
+++ b/frontend/src/App.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import logo from "./assets/images/logo-universal.png";
+	import Header from "$lib/components/Header.svelte";
 	import { Greet } from "../wailsjs/go/main/App.js";
 
 	let resultText: string = "Please enter your name below 👇";
@@ -10,68 +10,9 @@
 	}
 </script>
 
-<main>
-	<img alt="Wails logo" id="logo" src={logo} />
-	<div class="result" id="result">{resultText}</div>
-	<div class="input-box" id="input">
-		<input autocomplete="off" bind:value={name} class="input" id="name" type="text" />
-		<button class="btn" on:click={greet}>Greet</button>
-	</div>
-</main>
-
-<style>
-	#logo {
-		display: block;
-		width: 50%;
-		height: 50%;
-		margin: auto;
-		padding: 10% 0 0;
-		background-position: center;
-		background-repeat: no-repeat;
-		background-size: 100% 100%;
-		background-origin: content-box;
-	}
-
-	.result {
-		height: 20px;
-		line-height: 20px;
-		margin: 1.5rem auto;
-	}
-
-	.input-box .btn {
-		width: 60px;
-		height: 30px;
-		line-height: 30px;
-		border-radius: 3px;
-		border: none;
-		margin: 0 0 0 20px;
-		padding: 0 8px;
-		cursor: pointer;
-	}
-
-	.input-box .btn:hover {
-		background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
-		color: #333333;
-	}
-
-	.input-box .input {
-		border: none;
-		border-radius: 3px;
-		outline: none;
-		height: 30px;
-		line-height: 30px;
-		padding: 0 10px;
-		background-color: rgba(240, 240, 240, 1);
-		-webkit-font-smoothing: antialiased;
-	}
-
-	.input-box .input:hover {
-		border: none;
-		background-color: rgba(255, 255, 255, 1);
-	}
-
-	.input-box .input:focus {
-		border: none;
-		background-color: rgba(255, 255, 255, 1);
-	}
-</style>
+<template>
+	<Header />
+	<main class="flex-1">
+		<Router />
+	</main>
+</template>
\ No newline at end of file
diff --git a/frontend/src/lib/components/Header.svelte b/frontend/src/lib/components/Header.svelte
new file mode 100644
index 0000000..acf4262
--- /dev/null
+++ b/frontend/src/lib/components/Header.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+</script>
+
+<header	class="flex h-22 items-center justify-between bg-base-100 shadow-lg sticky top-0 z-50 border-b
+   border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+   a cheeky lil header
+</header>
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
index 36aaa3e..1686a94 100644
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -1,6 +1,7 @@
 {
 	"extends": "@tsconfig/svelte/tsconfig.json",
 	"compilerOptions": {
+		"strict": true,
 		"target": "ESNext",
 		"useDefineForClassFields": true,
 		"module": "ESNext",
@@ -15,16 +16,13 @@
 		"allowJs": true,
 		"checkJs": true,
 		"isolatedModules": true,
-    "paths": {
-      "$lib/*": ["src/lib/*"],
-      "$components/*": ["src/lib/components/*"],
-      "$router/*": ["src/lib/router/*"]
-    }
+		"paths": {
+			"$lib/*": ["src/lib/*"],
+			"$components/*": ["src/lib/components/*"],
+			"$router/*": ["src/lib/router/*"],
+			"$wails/*": ["wails/go/main/*"]
+		}
 	},
 	"include": ["src/**/*.d.ts", "src/**/*.ts", "src/**/*.js", "src/**/*.svelte"],
-	"references": [
-		{
-			"path": "./tsconfig.node.json"
-		}
-	]
+	"references": [{ "path": "./tsconfig.node.json" }]
 }
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index d37616f..b2a2749 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -1,7 +1,17 @@
 import {defineConfig} from 'vite'
 import {svelte} from '@sveltejs/vite-plugin-svelte'
+import { join } from "node:path";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [svelte()]
+  plugins: [svelte()],
+
+  resolve: {
+    alias: {
+      $lib: join(__dirname, 'src/lib'),
+      $components: join(__dirname, 'src/lib/components'),
+      $router: join(__dirname, 'src/lib/router'),
+      $wails: join(__dirname, 'wails'),
+    }
+  },
 })
diff --git a/frontend/wailsjs/go/main/App.d.ts b/frontend/wailsjs/go/main/App.d.ts
index 02a3bb9..d7c0783 100644
--- a/frontend/wailsjs/go/main/App.d.ts
+++ b/frontend/wailsjs/go/main/App.d.ts
@@ -1,4 +1,6 @@
 // Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
 // This file is automatically generated. DO NOT EDIT
 
+export function Foo():Promise<string>;
+
 export function Greet(arg1:string):Promise<string>;
diff --git a/frontend/wailsjs/go/main/App.js b/frontend/wailsjs/go/main/App.js
index c71ae77..5662d74 100644
--- a/frontend/wailsjs/go/main/App.js
+++ b/frontend/wailsjs/go/main/App.js
@@ -2,6 +2,10 @@
 // Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
 // This file is automatically generated. DO NOT EDIT
 
+export function Foo() {
+  return window['go']['main']['App']['Foo']();
+}
+
 export function Greet(arg1) {
   return window['go']['main']['App']['Greet'](arg1);
 }