diff --git a/packages/pockethost.io/src/components/Button/Button.svelte b/packages/pockethost.io/src/components/Button/Button.svelte
index 2a41159c..8bfab0dd 100644
--- a/packages/pockethost.io/src/components/Button/Button.svelte
+++ b/packages/pockethost.io/src/components/Button/Button.svelte
@@ -1,22 +1,31 @@
 <script lang="ts">
   import { goto } from '$app/navigation'
   import { Button } from 'sveltestrap'
-  import { ButtonStyles } from './types'
+  import { ButtonColors, ButtonSizes } from './types'
 
-  export let style: ButtonStyles = ButtonStyles.Wide
+  export let color: ButtonColors = ButtonColors.Primary
+  export let size: ButtonSizes = ButtonSizes.Normal
   export let disabled = false
   export let href: string = '#'
   export let click: () => void = () => {
     goto(href)
   }
-  const size = style === ButtonStyles.Micro ? 'sm' : 'lg'
 </script>
 
-<Button
-  class={style}
-  color={'primary'}
-  {disabled}
-  block={style === ButtonStyles.Wide}
-  {size}
-  on:click={click}><slot /></Button
->
+<div class="button">
+  <Button
+    class={size}
+    {color}
+    {disabled}
+    block={size === ButtonSizes.Wide}
+    size={size === ButtonSizes.Micro ? 'sm' : 'lg'}
+    on:click={click}><slot /></Button
+  >
+</div>
+
+<style lang="scss">
+  .button {
+    margin: 2px;
+    display: inline-block;
+  }
+</style>
diff --git a/packages/pockethost.io/src/components/Button/types.ts b/packages/pockethost.io/src/components/Button/types.ts
index a56634cb..534c6a69 100644
--- a/packages/pockethost.io/src/components/Button/types.ts
+++ b/packages/pockethost.io/src/components/Button/types.ts
@@ -1,5 +1,21 @@
-export enum ButtonStyles {
+export enum ButtonSizes {
   Micro = 'micro',
   Normal = 'normal',
-  Wide = 'wide',
+  Wide = 'wide'
+}
+
+/**
+ *   | 'primary'
+  | 'secondary'
+  | 'success'
+  | 'danger'
+  | 'warning'
+  | 'info'
+  | 'light'
+  | 'dark'
+  | 'link';
+ */
+export enum ButtonColors {
+  Primary = 'primary',
+  Light = 'light'
 }
diff --git a/packages/pockethost.io/src/components/CodeSample.svelte b/packages/pockethost.io/src/components/CodeSample.svelte
index 5f2fbf48..4ec85dc6 100644
--- a/packages/pockethost.io/src/components/CodeSample.svelte
+++ b/packages/pockethost.io/src/components/CodeSample.svelte
@@ -1,35 +1,32 @@
 <script lang="ts">
-	import { Highlight } from 'svelte-highlight'
-	import { typescript } from 'svelte-highlight/languages'
-	import Clipboard from './Clipboard.svelte'
-	import 'svelte-highlight/styles/github.css'
-	import Button from './Button/Button.svelte'
-	import { ButtonStyles } from './Button/types'
-	import CopyButton from './CopyButton.svelte'
+  import { Highlight } from 'svelte-highlight'
+  import { typescript } from 'svelte-highlight/languages'
+  import 'svelte-highlight/styles/github.css'
+  import CopyButton from './CopyButton.svelte'
 
-	export let code: string
-	const handleCopy = () => {
-		console.log('copied')
-	}
+  export let code: string
+  const handleCopy = () => {
+    console.log('copied')
+  }
 </script>
 
 <div class="copy-container">
-	<Highlight language={typescript} {code} />
-	<div class="copy-button">
-		<CopyButton {code} copy={handleCopy} />
-	</div>
+  <Highlight language={typescript} {code} />
+  <div class="copy-button">
+    <CopyButton {code} copy={handleCopy} />
+  </div>
 </div>
 
 <style type="text/scss">
-	.copy-container {
-		position: relative;
-		margin: 5px;
-		border: 1px solid gray;
+  .copy-container {
+    position: relative;
+    margin: 5px;
+    border: 1px solid gray;
 
-		.copy-button {
-			position: absolute;
-			top: 2px;
-			right: 2px;
-		}
-	}
+    .copy-button {
+      position: absolute;
+      top: 2px;
+      right: 2px;
+    }
+  }
 </style>
diff --git a/packages/pockethost.io/src/components/CopyButton.svelte b/packages/pockethost.io/src/components/CopyButton.svelte
index 0c61ec2e..a3535e85 100644
--- a/packages/pockethost.io/src/components/CopyButton.svelte
+++ b/packages/pockethost.io/src/components/CopyButton.svelte
@@ -1,17 +1,17 @@
 <script lang="ts">
-	import Button from './Button/Button.svelte'
-	import { ButtonStyles } from './Button/types'
-	import Clipboard from './Clipboard.svelte'
+  import Button from './Button/Button.svelte'
+  import { ButtonSizes } from './Button/types'
+  import Clipboard from './Clipboard.svelte'
 
-	let isCopied = false
-	export let code: string
-	export let copy: () => void
-	const handleCopy = () => {
-		isCopied = true
-		copy()
-	}
+  let isCopied = false
+  export let code: string
+  export let copy: () => void
+  const handleCopy = () => {
+    isCopied = true
+    copy()
+  }
 </script>
 
 <Clipboard text={code} let:copy on:copy={handleCopy}>
-	<Button style={ButtonStyles.Micro} click={copy}>{isCopied ? 'Copied!' : 'Copy'}</Button>
+  <Button size={ButtonSizes.Micro} click={copy}>{isCopied ? 'Copied!' : 'Copy'}</Button>
 </Clipboard>
diff --git a/packages/pockethost.io/src/components/Icons/Github.svelte b/packages/pockethost.io/src/components/Icons/Github.svelte
new file mode 100644
index 00000000..d114c5f5
--- /dev/null
+++ b/packages/pockethost.io/src/components/Icons/Github.svelte
@@ -0,0 +1,5 @@
+<script>
+  import { Icon } from 'sveltestrap'
+</script>
+
+<Icon name="github" />
diff --git a/packages/pockethost.io/src/components/Navbar.svelte b/packages/pockethost.io/src/components/Navbar.svelte
index 937b8a1c..4de57be1 100644
--- a/packages/pockethost.io/src/components/Navbar.svelte
+++ b/packages/pockethost.io/src/components/Navbar.svelte
@@ -1,9 +1,24 @@
 <script lang="ts">
   import { redirect } from '$util/redirect'
   import { isLoggedIn, logOut, user } from '@pockethost/common/src/pocketbase'
-  import { Collapse, Nav, Navbar, NavbarBrand, NavbarToggler, NavItem, NavLink } from 'sveltestrap'
+  import {
+    Collapse,
+    Dropdown,
+    DropdownItem,
+    DropdownMenu,
+    DropdownToggle,
+    Icon,
+    Nav,
+    Navbar,
+    NavbarBrand,
+    NavbarToggler,
+    NavItem,
+    NavLink
+  } from 'sveltestrap'
   import logo from '../assets/logo-square.png'
+  import Github from './Icons/Github.svelte'
   import NavbarBrandImage from './NavbarBrandImage.svelte'
+  import NavbarText from './NavbarText.svelte'
   import Title from './Title/Title.svelte'
   import { TitleSize } from './Title/types'
 
@@ -28,15 +43,21 @@
   <Collapse {isOpen} navbar expand="md" on:update={handleUpdate}>
     <Nav class="ms-auto" navbar>
       {#if isLoggedIn()}
-        <NavItem>
-          <div class="navbar-text">Welcome back, {user()?.email}</div>
-        </NavItem>
+        <NavItem />
         <NavItem>
           <NavLink href="/dashboard">Dashboard</NavLink>
         </NavItem>
-        <NavItem>
-          <NavLink on:click={handleLogout}>Logout</NavLink>
-        </NavItem>
+        <NavItem />
+        <Dropdown nav inNavbar>
+          <DropdownToggle nav><Icon name="person-fill" /></DropdownToggle>
+          <DropdownMenu end>
+            <DropdownItem>
+              <NavbarText>{user()?.email}</NavbarText>
+            </DropdownItem>
+            <DropdownItem divider />
+            <DropdownItem><NavLink on:click={handleLogout}>Logout</NavLink></DropdownItem>
+          </DropdownMenu>
+        </Dropdown>
       {/if}
       {#if !isLoggedIn()}
         <NavItem>
@@ -46,6 +67,9 @@
           <NavLink href="/login">Log in</NavLink>
         </NavItem>
       {/if}
+      <NavItem>
+        <NavLink href="https://github.com/benallfree/pockethost"><Github /></NavLink>
+      </NavItem>
     </Nav>
   </Collapse>
 </Navbar>
diff --git a/packages/pockethost.io/src/components/NavbarText.svelte b/packages/pockethost.io/src/components/NavbarText.svelte
new file mode 100644
index 00000000..f0bb85f2
--- /dev/null
+++ b/packages/pockethost.io/src/components/NavbarText.svelte
@@ -0,0 +1 @@
+<div class="navbar-text"><slot /></div>
diff --git a/packages/pockethost.io/src/components/Title/Title.svelte b/packages/pockethost.io/src/components/Title/Title.svelte
index e0b2636b..7170721a 100644
--- a/packages/pockethost.io/src/components/Title/Title.svelte
+++ b/packages/pockethost.io/src/components/Title/Title.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
   import { TitleSize } from './types'
 
-  export let first = 'Pocket'
-  export let second = 'Host'
+  export let first = ''
+  export let second = ''
   export let third = ''
   export let size: TitleSize = TitleSize.Normal
 </script>
@@ -12,7 +12,7 @@
 <style type="text/scss">
   h1 {
     color: #ff3e00;
-    font-size: 12vw;
+    font-size: 30px;
     font-weight: 100;
     margin-left: auto;
     margin-right: auto;
diff --git a/packages/pockethost.io/src/routes/+layout.svelte b/packages/pockethost.io/src/routes/+layout.svelte
index 8d34d18c..ffdef9f1 100644
--- a/packages/pockethost.io/src/routes/+layout.svelte
+++ b/packages/pockethost.io/src/routes/+layout.svelte
@@ -5,4 +5,12 @@
 
 <Styles />
 <Navbar />
-<slot />
+<main>
+  <slot />
+</main>
+
+<style lang="scss">
+  main {
+    margin-top: 20px;
+  }
+</style>
diff --git a/packages/pockethost.io/src/routes/+page.svelte b/packages/pockethost.io/src/routes/+page.svelte
index 4bff68eb..d4be5c9e 100644
--- a/packages/pockethost.io/src/routes/+page.svelte
+++ b/packages/pockethost.io/src/routes/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import Button from '$components/Button/Button.svelte'
-  import { ButtonStyles } from '$components/Button/types'
+  import { ButtonSizes } from '$components/Button/types'
   import Caption from '$components/Caption/Caption.svelte'
   import { CaptionSize } from '$components/Caption/types'
   import Feature from '$components/Feature.svelte'
@@ -11,7 +11,7 @@
   <Caption size={CaptionSize.Hero}>Firebase and Supabase...<br />ljbf</Caption>
 
   <div style="max-width: 400px; margin-left: auto; margin-right: auto">
-    <Button href="/signup" style={ButtonStyles.Wide}>Get Started Free</Button>
+    <Button href="/signup" size={ButtonSizes.Wide}>Get Started Free</Button>
   </div>
   <Gap />
   <div>
diff --git a/packages/pockethost.io/src/routes/app/instances/[instanceId]/+page.svelte b/packages/pockethost.io/src/routes/app/instances/[instanceId]/+page.svelte
index f82a0414..6e90ece6 100644
--- a/packages/pockethost.io/src/routes/app/instances/[instanceId]/+page.svelte
+++ b/packages/pockethost.io/src/routes/app/instances/[instanceId]/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import { page } from '$app/stores'
+  import Button from '$components/Button/Button.svelte'
   import Caption from '$components/Caption/Caption.svelte'
   import CodeSample from '$components/CodeSample.svelte'
   import Protected from '$components/Protected.svelte'
@@ -38,29 +39,39 @@
 </script>
 
 <Protected>
-  <Title />
-  {#if instance}
-    {#if instance.status === InstanceStatuses.Started}
-      <Caption>Your PocketHost instance is now live.</Caption>
-      <div>
-        Admin URL: <a href={`${url}/_`} target="_blank">{`${url}/_`}</a>
-      </div>
-      <div>
-        JavaScript:
-        <CodeSample {code} />
-      </div>
+  <main>
+    <Title />
+    {#if instance}
+      {#if instance.status === InstanceStatuses.Started}
+        <ProvisioningStatus status={instance.status} />
+
+        <div>
+          Admin URL: <a href={`${url}/_`} target="_blank">{`${url}/_`}</a>
+        </div>
+        <div>
+          JavaScript:
+          <CodeSample {code} />
+        </div>
+      {/if}
+      {#if instance.status !== InstanceStatuses.Started}
+        <Caption>Please stand by, your instance is starting now...</Caption>
+        <div class="provisioning">
+          <ProvisioningStatus status={instance.status} size={ProvisioningSize.Hero} />
+        </div>
+      {/if}
     {/if}
-    {#if instance.status !== InstanceStatuses.Started}
-      <Caption>Please stand by, your instance is starting now...</Caption>
-      <div class="provisioning">
-        <ProvisioningStatus status={instance.status} size={ProvisioningSize.Hero} />
-      </div>
-    {/if}
-  {/if}
+    <Button href="/dashboard">&lt; Back to Dashboard</Button>
+  </main>
 </Protected>
 
 <style lang="scss">
-  .provisioning {
-    text-align: center;
+  main {
+    margin: 10px;
+    .provisioning {
+      text-align: center;
+    }
+    a {
+      text-decoration: initial;
+    }
   }
 </style>
diff --git a/packages/pockethost.io/src/routes/app/new/+page.svelte b/packages/pockethost.io/src/routes/app/new/+page.svelte
index 57d2c8e6..bca427ec 100644
--- a/packages/pockethost.io/src/routes/app/new/+page.svelte
+++ b/packages/pockethost.io/src/routes/app/new/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { browser } from '$app/environment'
   import Button from '$components/Button/Button.svelte'
-  import { ButtonStyles } from '$components/Button/types'
+  import { ButtonColors, ButtonSizes } from '$components/Button/types'
   import Error from '$components/Error/Error.svelte'
   import { parseError } from '$components/Error/parseError'
   import Protected from '$components/Protected.svelte'
@@ -48,13 +48,12 @@
 </script>
 
 <Protected>
-  <Title />
+  <Title first="New" second="App" />
   <main>
-    <h2>New App</h2>
     <div class="caption">Choose a name for your PocketBase app.</div>
     <div class="subdomain">
       <label for="instanceName">Instance Name</label>
-      <Button click={() => (instanceName = generateSlug(2))} style={ButtonStyles.Micro}>
+      <Button click={() => (instanceName = generateSlug(2))} size={ButtonSizes.Micro}>
         <Fa icon={faRefresh} /></Button
       >
 
@@ -67,6 +66,7 @@
     </div>
     <Error>{errorMessage}</Error>
     <Button click={handleCreate}>Create</Button>
+    <Button href={`/dashboard`} color={ButtonColors.Light}>Cancel</Button>
   </main>
 </Protected>
 
diff --git a/packages/pockethost.io/src/routes/dashboard/+page.svelte b/packages/pockethost.io/src/routes/dashboard/+page.svelte
index 52dac164..3c661843 100644
--- a/packages/pockethost.io/src/routes/dashboard/+page.svelte
+++ b/packages/pockethost.io/src/routes/dashboard/+page.svelte
@@ -1,12 +1,14 @@
 <script lang="ts">
   import Button from '$components/Button/Button.svelte'
-  import { ButtonStyles } from '$components/Button/types'
+  import { ButtonSizes } from '$components/Button/types'
+  import Gap from '$components/Gap.svelte'
   import Protected from '$components/Protected.svelte'
   import ProvisioningStatus from '$components/ProvisioningStatus/ProvisioningStatus.svelte'
   import Title from '$components/Title/Title.svelte'
   import { getAllInstancesById } from '@pockethost/common/src/pocketbase'
   import { InstanceStatuses, type Instance_Out_ByIdCollection } from '@pockethost/common/src/schema'
   import { values } from '@s-libs/micro-dash'
+  import { Col, Container, Row } from 'sveltestrap'
 
   let apps: Instance_Out_ByIdCollection = {}
   getAllInstancesById()
@@ -19,39 +21,56 @@
 </script>
 
 <Protected>
-  <Title />
+  <Title first="Dash" second="board" />
   <main>
-    <h2>Dashboard</h2>
-    <h4>Apps</h4>
-    {#each values(apps) as app}
-      <div>
-        <ProvisioningStatus status={app.status} />
-        {app.subdomain}.pockethost.io
+    <h2>Apps</h2>
+    <Container>
+      {#each values(apps) as app}
+        <Row>
+          <Col>
+            <ProvisioningStatus status={app.status} />
+          </Col>
+          <Col>
+            {app.subdomain}.pockethost.io
+          </Col>
 
-        <Button style={ButtonStyles.Micro} href={`/app/instances/${app.id}`}>Details</Button>
-        <Button
-          disabled={app.status !== InstanceStatuses.Started}
-          style={ButtonStyles.Micro}
-          click={() => {
-            window.open(`https://${app.subdomain}.pockethost.io/_`)
-          }}>Admin</Button
-        >
-      </div>
-    {/each}
-    <Button href="/app/new">+</Button>
+          <Col>
+            <Button size={ButtonSizes.Micro} href={`/app/instances/${app.id}`}>Details</Button>
+
+            <Button
+              disabled={app.status !== InstanceStatuses.Started}
+              size={ButtonSizes.Micro}
+              click={() => {
+                window.open(`https://${app.subdomain}.pockethost.io/_`)
+              }}>Admin</Button
+            >
+          </Col>
+        </Row>
+      {/each}
+    </Container>
+    <Gap />
+    <div class="newApp">
+      <Button href="/app/new" size={ButtonSizes.Wide}>+ New App</Button>
+    </div>
   </main>
 </Protected>
 
 <style type="text/scss">
   main {
-    padding: 1em;
-    margin-left: auto;
+    margin-top: 10px;
     margin-right: auto;
-
-    .caption {
-      font-size: 30px;
-      margin-top: 20px;
-      margin-bottom: 20px;
+    margin-bottom: 10px;
+    margin-left: auto;
+    max-width: 600px;
+    padding: 10px;
+    h2 {
+      text-align: center;
+    }
+    .newApp {
+      width: 200px;
+      margin-left: auto;
+      margin-right: auto;
+      text-align: center;
     }
   }
 </style>
diff --git a/packages/pockethost.io/src/routes/login/+page.svelte b/packages/pockethost.io/src/routes/login/+page.svelte
index 2dc46268..31787a00 100644
--- a/packages/pockethost.io/src/routes/login/+page.svelte
+++ b/packages/pockethost.io/src/routes/login/+page.svelte
@@ -3,6 +3,7 @@
   import Title from '$components/Title/Title.svelte'
   import { redirect } from '$util/redirect'
   import { authViaEmail } from '@pockethost/common/src/pocketbase'
+  import { Form, FormGroup, Input, Label } from 'sveltestrap'
 
   let email = ''
   let password = ''
@@ -21,18 +22,21 @@
   }
 </script>
 
-<Title first="Log" second="In" />
+<Title first="Log" second="in" />
 
 <main>
   <error>{loginError}</error>
-  <div>
-    <label for="email">Email</label>
-    <input name="email" type="email" bind:value={email} />
-  </div>
-  <div>
-    <label for="password">Password</label>
-    <input name="password" type="password" bind:value={password} />
-  </div>
+  <Form>
+    <FormGroup>
+      <Label for="email">Email</Label>
+      <Input type="email" id="email" bind:value={email} />
+    </FormGroup>
+    <FormGroup>
+      <Label for="password">Password</Label>
+      <Input type="password" id="password" bind:value={password} />
+    </FormGroup>
+  </Form>
+
   <div>
     Need to <a href="/signup">create an account</a>?
   </div>
@@ -40,25 +44,9 @@
 </main>
 
 <style type="text/scss">
-  error {
-    color: red;
-    display: block;
-  }
-
-  label {
-    display: block;
-    font-weight: bold;
-    width: 200px;
-  }
   main {
-    padding: 1em;
+    max-width: 300px;
     margin-left: auto;
     margin-right: auto;
   }
-
-  .caption {
-    font-size: 30px;
-    margin-top: 20px;
-    margin-bottom: 20px;
-  }
 </style>
diff --git a/packages/pockethost.io/src/routes/signup/+page.svelte b/packages/pockethost.io/src/routes/signup/+page.svelte
index 21a7373e..5de18eb9 100644
--- a/packages/pockethost.io/src/routes/signup/+page.svelte
+++ b/packages/pockethost.io/src/routes/signup/+page.svelte
@@ -1,12 +1,15 @@
 <script lang="ts">
   import Button from '$components/Button/Button.svelte'
+  import Error from '$components/Error/Error.svelte'
   import { parseError } from '$components/Error/parseError'
   import Title from '$components/Title/Title.svelte'
+  import { TitleSize } from '$components/Title/types'
   import { redirect } from '$util/redirect'
   import { authViaEmail, createUser } from '@pockethost/common/src/pocketbase'
+  import { Form, FormGroup, Input, Label } from 'sveltestrap'
 
   let email = ''
-  let errorMessage = ''
+  let emailError = ''
   let password = ''
   let passwordError = ''
 
@@ -19,7 +22,7 @@
   //     .catch((e) => console.error(`user login error`, e))
 
   const handleSignup = () => {
-    errorMessage = ''
+    emailError = ''
     passwordError = ''
     createUser(email, password)
       .then((user) => {
@@ -33,25 +36,27 @@
           .catch((e) => console.error(`user login error`, e))
       })
       .catch((e) => {
-        errorMessage = parseError(e)
-        console.error(errorMessage, e)
+        emailError = parseError(e)
+        console.error(emailError, e)
       })
   }
 </script>
 
-<Title first="Sign" second="Up" />
+<Title first="Sign" second="up" size={TitleSize.Normal} />
 
 <main>
-  <div>
-    <label for="email">Email</label>
-    <input name="email" type="email" bind:value={email} />
-    <error>{errorMessage}</error>
-  </div>
-  <div>
-    <label for="password">Password</label>
-    <input name="password" type="password" bind:value={password} />
-    <error>{passwordError}</error>
-  </div>
+  <Form>
+    <FormGroup>
+      <Label for="email">Email Address</Label>
+      <Input type="email" bind:value={email} id="email" />
+      <Error>{emailError}</Error>
+    </FormGroup>
+    <FormGroup>
+      <Label for="password">Password</Label>
+      <Input type="password" name="password" id="password" bind:value={password} />
+      <Error>{passwordError}</Error>
+    </FormGroup>
+  </Form>
   <Button click={handleSignup} disabled={email.length === 0 || password.length === 0}>
     Sign Up
   </Button>
@@ -61,25 +66,30 @@
 </main>
 
 <style type="text/scss">
-  error {
-    color: red;
-    display: block;
-  }
-
-  label {
-    display: block;
-    font-weight: bold;
-    width: 200px;
-  }
   main {
-    padding: 1em;
+    max-width: 300px;
     margin-left: auto;
     margin-right: auto;
-  }
+    error {
+      color: red;
+      display: block;
+    }
 
-  .caption {
-    font-size: 30px;
-    margin-top: 20px;
-    margin-bottom: 20px;
+    label {
+      display: block;
+      font-weight: bold;
+      width: 200px;
+    }
+    main {
+      padding: 1em;
+      margin-left: auto;
+      margin-right: auto;
+    }
+
+    .caption {
+      font-size: 30px;
+      margin-top: 20px;
+      margin-bottom: 20px;
+    }
   }
 </style>