diff --git a/src/app.css b/src/app.css
index d4b5078..19335d4 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1 +1,7 @@
 @import 'tailwindcss';
+
+.syne-mono-regular {
+    font-family: "Syne Mono", monospace;
+    font-weight: 400;
+    font-style: normal;
+}
\ No newline at end of file
diff --git a/src/app.html b/src/app.html
index 77a5ff5..13b5694 100644
--- a/src/app.html
+++ b/src/app.html
@@ -1,12 +1,18 @@
 <!doctype html>
 <html lang="en">
-	<head>
-		<meta charset="utf-8" />
-		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
-		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		%sveltekit.head%
-	</head>
-	<body data-sveltekit-preload-data="hover">
-		<div style="display: contents">%sveltekit.body%</div>
-	</body>
-</html>
+
+<head>
+	<meta charset="utf-8" />
+	<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+	<meta name="viewport" content="width=device-width, initial-scale=1" />
+	<link rel="preconnect" href="https://fonts.googleapis.com">
+	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+	<link href="https://fonts.googleapis.com/css2?family=Syne+Mono&display=swap" rel="stylesheet">
+	%sveltekit.head%
+</head>
+
+<body data-sveltekit-preload-data="hover" class="bg-black text-white syne-mono-regular">
+	<div style="display: contents">%sveltekit.body%</div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/src/lib/generators/air-quality/air-quality-generator.svelte b/src/lib/generators/air-quality/air-quality-generator.svelte
new file mode 100644
index 0000000..e69de29
diff --git a/src/lib/generators/air-quality/index.ts b/src/lib/generators/air-quality/index.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/lib/generators/satelites/index.ts b/src/lib/generators/satelites/index.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/lib/generators/satelites/satellites-generator.svelte b/src/lib/generators/satelites/satellites-generator.svelte
new file mode 100644
index 0000000..e69de29
diff --git a/src/lib/generators/weather/index.ts b/src/lib/generators/weather/index.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/lib/generators/weather/weather-generator.svelte b/src/lib/generators/weather/weather-generator.svelte
new file mode 100644
index 0000000..e69de29
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 0123c43..1d97e07 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -17,15 +17,23 @@
 	}
 </script>
 
-{#if !getPosition}
-	<button onclick={flipGetPosition}> Find yourself </button>
-{:else if loading}
-	<p>Loading...</p>
-{:else if error}
-	<p>We can't seem to find you.</p>
-{:else}
-	<p>Your Position is set as: {position?.coords?.latitude}, {position?.coords?.longitude}</p>
-	<button onclick={goToPlayer}>Ok, on-out with it</button>
-{/if}
+<div class="flex min-h-screen flex-col items-center justify-center">
+	{#if !getPosition}
+		<button class="animate-pulse cursor-crosshair text-xl" onclick={flipGetPosition}>
+			Let me show you...
+		</button>
+	{:else if loading}
+		<p class="text-xl">Loading...</p>
+	{:else if error}
+		<p class="text-xl">We can't seem to find you.</p>
+	{:else}
+		<p class="mb-5 text-xl">
+			Your Position is set as: {position?.coords?.latitude}, {position?.coords?.longitude}
+		</p>
+		<button class="animate-pulse cursor-crosshair text-lg" onclick={goToPlayer}
+			>Ok, on-out with it</button
+		>
+	{/if}
+</div>
 
 <Geolocation {getPosition} bind:position bind:loading bind:error />
diff --git a/src/routes/on-out/+page.ts b/src/routes/on-out/+page.ts
new file mode 100644
index 0000000..e69de29
