diff --git a/.vitebook/App.svelte b/.vitebook/App.svelte
index 974da7fa5..e919a51d4 100644
--- a/.vitebook/App.svelte
+++ b/.vitebook/App.svelte
@@ -1,5 +1,5 @@
 <script context="module">
-	import 'ui/src/_index.scss';
+	import 'aw-labs-ui/src/_index.scss';
 </script>
 
 <script lang="ts">
diff --git a/package-lock.json b/package-lock.json
index d9ea4122f..7591b4fc4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,7 +11,7 @@
 				"aw-labs-ui": "latest"
 			},
 			"devDependencies": {
-				"@sveltejs/adapter-static": "^1.0.0-next.29",
+				"@sveltejs/adapter-static": "1.0.0-next.29",
 				"@sveltejs/kit": "1.0.0-next.294",
 				"@sveltejs/vite-plugin-svelte": "^1.0.0-next.39",
 				"@testing-library/dom": "^8.11.3",
diff --git a/package.json b/package.json
index 542638d91..1cc4cb9c8 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,7 @@
 		"aw-labs-ui": "latest"
 	},
 	"devDependencies": {
-		"@sveltejs/adapter-static": "^1.0.0-next.29",
+		"@sveltejs/adapter-static": "1.0.0-next.29",
 		"@sveltejs/kit": "1.0.0-next.294",
 		"@sveltejs/vite-plugin-svelte": "^1.0.0-next.39",
 		"@testing-library/dom": "^8.11.3",
diff --git a/src/routes/console/[project]/__layout.svelte b/src/routes/console/[project]/__layout.svelte
index 927e8700a..f6e4cc883 100644
--- a/src/routes/console/[project]/__layout.svelte
+++ b/src/routes/console/[project]/__layout.svelte
@@ -2,9 +2,9 @@
 	import { browser } from '$app/env';
 	import { page } from '$app/stores';
 	import { sdkForConsole, setProject } from '$lib/stores/sdk';
-	import type { Models } from 'src/sdk';
 	import { collection } from './database/collection/[collection]/store';
 	import { project } from './store';
+	import type { Models } from 'src/sdk';
 
 	type Attributes =
 		| Models.AttributeBoolean
diff --git a/src/routes/console/[project]/index.svelte b/src/routes/console/[project]/index.svelte
index 4bd22c55e..cfe4565a8 100644
--- a/src/routes/console/[project]/index.svelte
+++ b/src/routes/console/[project]/index.svelte
@@ -6,6 +6,7 @@
 	import type { Models } from 'src/sdk';
 	import CreatePlatform from './_createPlatform.svelte';
 	import { addNotification } from '$lib/stores/notifications';
+	import { Card } from '$lib/components';
 
 	let range: '24h' | '30d' | '90d' = '30d';
 	let addPlatform = false;
@@ -32,65 +33,69 @@
 	};
 </script>
 
-<article>
-	{#await requestUsage}
-		<div aria-busy="true" />
-	{:then usage}
-		<div class="grid">
-			<div>
-				<h2>{getLast(usage.users)}</h2>
-				<small>Users</small>
-			</div>
-			<div>
-				<h2>{getLast(usage.documents)}</h2>
-				<small>Documents</small>
-			</div>
-			<div>
-				<h2>{getLast(usage.functions)}</h2>
-				<small>Executions</small>
-			</div>
-			<div>
-				<h2>{getLast(usage.storage)}</h2>
-				<small>Storage</small>
-			</div>
-		</div>
-	{/await}
-</article>
-
 {#if $project}
-	<h2>Platforms</h2>
-	<article>
-		{#each $project.platforms as platform}
+	<h1>{$project.name}</h1>
+	<Card>
+		<button on:click={() => (range = '30d')}>30d</button>
+		<button on:click={() => (range = '90d')}>90d</button>
+		{#await requestUsage}
+			<div aria-busy="true" />
+		{:then usage}
 			<div class="grid">
 				<div>
-					{platform.type}
+					<h2>{getLast(usage.users)}</h2>
+					<small>Users</small>
 				</div>
 				<div>
-					<p>
-						{platform.name}
-						<br />
-						<small>{platform.hostname}</small>
-					</p>
-				</div>
-				<div />
-				<div>
-					<Button secondary>Update</Button>
+					<h2>{getLast(usage.documents)}</h2>
+					<small>Documents</small>
 				</div>
 				<div>
-					<Button on:click={() => deletePlatform(platform.$id)}>Delete</Button>
+					<h2>{getLast(usage.functions)}</h2>
+					<small>Executions</small>
+				</div>
+				<div>
+					<h2>{getLast(usage.storage)}</h2>
+					<small>Storage</small>
 				</div>
 			</div>
-		{:else}
-			<div class="grid">
-				<div>
-					<h4>No Platforms Added to Your Project</h4>
-					<p>Add your first platform and build your new application.</p>
+		{/await}
+	</Card>
+	<Card>
+		<h2>Platforms</h2>
+		<article>
+			{#each $project.platforms as platform}
+				<div class="grid">
+					<div>
+						{platform.type}
+					</div>
+					<div>
+						<p>
+							{platform.name}
+							<br />
+							<small>{platform.hostname}</small>
+						</p>
+					</div>
+					<div />
+					<div>
+						<Button secondary>Update</Button>
+					</div>
+					<div>
+						<Button on:click={() => deletePlatform(platform.$id)}>Delete</Button>
+					</div>
 				</div>
-			</div>
-		{/each}
-	</article>
-	<Button on:click={() => (addPlatform = true)}>Add Platform</Button>
-	<CreatePlatform bind:show={addPlatform} />
+			{:else}
+				<div class="grid">
+					<div>
+						<h4>No Platforms Added to Your Project</h4>
+						<p>Add your first platform and build your new application.</p>
+					</div>
+				</div>
+			{/each}
+		</article>
+		<Button on:click={() => (addPlatform = true)}>Add Platform</Button>
+		<CreatePlatform bind:show={addPlatform} />
+	</Card>
 {/if}
 
 <style>
diff --git a/src/routes/console/index.svelte b/src/routes/console/index.svelte
index 05474ff0d..25bb10911 100644
--- a/src/routes/console/index.svelte
+++ b/src/routes/console/index.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { Card } from '$lib/components';
 	import { Button } from '$lib/elements/forms';
 	import { sdkForConsole } from '$lib/stores/sdk';
 	import type { Models } from 'src/sdk';
@@ -37,13 +38,15 @@
 	<div aria-busy="true" />
 {:then organizations}
 	{#each organizations as organization}
-		<h2>{organization.name}</h2>
-		{#each organization.projects as project}
-			<a href={`/console/${project.$id}`}><article>{project.name}</article></a>
-		{/each}
-		<article class="new-project" on:click={() => createProject(organization.$id)}>
-			New Project
-		</article>
+		<h1>{organization.name}</h1>
+		<Card>
+			{#each organization.projects as project}
+				<a href={`/console/${project.$id}`}><article>{project.name}</article></a>
+			{/each}
+			<article class="new-project" on:click={() => createProject(organization.$id)}>
+				New Project
+			</article>
+		</Card>
 	{/each}
 	<Button on:click={() => (addOrganization = true)}>Add Organization</Button>
 {/await}
diff --git a/svelte.config.js b/svelte.config.js
index 08c919781..17363c5ed 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -7,7 +7,12 @@ const config = {
 	// for more information about preprocessors
 	preprocess: preprocess(),
 	kit: {
-		adapter: adapter(),
+		adapter: adapter({
+			fallback: 'index.html'
+		}),
+		prerender: {
+			default: true
+		},
 		trailingSlash: 'always'
 	}
 };