diff --git a/frontend/src/App.svelte b/frontend/src/App.svelte
index 1987eb0..eaed6b9 100644
--- a/frontend/src/App.svelte
+++ b/frontend/src/App.svelte
@@ -1,79 +1,77 @@
 <script lang="ts">
-  import logo from './assets/images/logo-universal.png'
-  import {Greet} from '../wailsjs/go/main/App.js'
+	import logo from "./assets/images/logo-universal.png";
+	import { Greet } from "../wailsjs/go/main/App.js";
 
-  let resultText: string = "Please enter your name below 👇"
-  let name: string
+	let resultText: string = "Please enter your name below 👇";
+	let name: string;
 
-  function greet(): void {
-    Greet(name).then(result => resultText = result)
-  }
+	function greet(): void {
+		Greet(name).then((result) => (resultText = result));
+	}
 </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>
+	<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;
+	}
 
-  #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;
+	}
 
-  .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 {
-    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 .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 {
-    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);
-  }
+	.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>
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
index 2cffdc5..36aaa3e 100644
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -1,30 +1,30 @@
 {
-  "extends": "@tsconfig/svelte/tsconfig.json",
-  "compilerOptions": {
-    "target": "ESNext",
-    "useDefineForClassFields": true,
-    "module": "ESNext",
-    "resolveJsonModule": true,
-    "baseUrl": ".",
-    /**
-     * Typecheck JS in `.svelte` and `.js` files by default.
-     * Disable checkJs if you'd like to use dynamic types in JS.
-     * Note that setting allowJs false does not prevent the use
-     * of JS in `.svelte` files.
-     */
-    "allowJs": true,
-    "checkJs": true,
-    "isolatedModules": true
-  },
-  "include": [
-    "src/**/*.d.ts",
-    "src/**/*.ts",
-    "src/**/*.js",
-    "src/**/*.svelte"
-  ],
-  "references": [
-    {
-      "path": "./tsconfig.node.json"
+	"extends": "@tsconfig/svelte/tsconfig.json",
+	"compilerOptions": {
+		"target": "ESNext",
+		"useDefineForClassFields": true,
+		"module": "ESNext",
+		"resolveJsonModule": true,
+		"baseUrl": ".",
+		/**
+		 * Typecheck JS in `.svelte` and `.js` files by default.
+		 * Disable checkJs if you'd like to use dynamic types in JS.
+		 * Note that setting allowJs false does not prevent the use
+		 * of JS in `.svelte` files.
+		 */
+		"allowJs": true,
+		"checkJs": true,
+		"isolatedModules": true,
+    "paths": {
+      "$lib/*": ["src/lib/*"],
+      "$components/*": ["src/lib/components/*"],
+      "$router/*": ["src/lib/router/*"]
     }
-  ]
+	},
+	"include": ["src/**/*.d.ts", "src/**/*.ts", "src/**/*.js", "src/**/*.svelte"],
+	"references": [
+		{
+			"path": "./tsconfig.node.json"
+		}
+	]
 }
diff --git a/main.go b/main.go
index 0f82886..0843532 100644
--- a/main.go
+++ b/main.go
@@ -6,9 +6,7 @@ import (
 	"fmt"
 	"io"
 	"log"
-	"math/rand"
 	"os"
-	"sync"
 
 	"github.com/wailsapp/wails/v2"
 	"github.com/wailsapp/wails/v2/pkg/options"
diff --git a/wails.json b/wails.json
index 0a7a7ed..33f0eb0 100644
--- a/wails.json
+++ b/wails.json
@@ -2,9 +2,9 @@
   "$schema": "https://wails.io/schemas/config.v2.json",
   "name": "calorie-counter",
   "outputfilename": "calorie-counter",
-  "frontend:install": "npm install",
-  "frontend:build": "npm run build",
-  "frontend:dev:watcher": "npm run dev",
+  "frontend:install": "pnpm install",
+  "frontend:build": "pnpm build",
+  "frontend:dev:watcher": "pnpm dev",
   "frontend:dev:serverUrl": "auto",
   "author": {
     "name": "PhatPhuckDave",