diff --git a/palimpsest/public/index.html b/palimpsest/public/index.html
index 8b9e4e78..cef29e93 100644
--- a/palimpsest/public/index.html
+++ b/palimpsest/public/index.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
     <link rel="icon" href="./favicon.png" />
-    <title>carbon-components-svelte</title>
+    <title>Carbon Components Svelte</title>
   </head>
   <body></body>
 </html>
diff --git a/palimpsest/src/components/ButtonTile.svelte b/palimpsest/src/components/ButtonTile.svelte
new file mode 100644
index 00000000..c4555751
--- /dev/null
+++ b/palimpsest/src/components/ButtonTile.svelte
@@ -0,0 +1,109 @@
+<script>
+  export let href = undefined;
+  export let kind = 'launch';
+  export let iconLeft = undefined;
+  export let iconRight = Launch20;
+
+  import Launch20 from 'carbon-icons-svelte/lib/Launch20';
+  import ArrowRight20 from 'carbon-icons-svelte/lib/ArrowRight20';
+
+  $: iconRight = kind === 'link' ? ArrowRight20 : Launch20;
+</script>
+
+<style>
+  .link {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    padding: 1rem;
+    cursor: pointer;
+    border-right: 1px solid transparent;
+    border-bottom: 1px solid transparent;
+  }
+
+  @media screen and (max-width: 671px) {
+    .link {
+      border-right: 0;
+    }
+  }
+
+  .link:focus {
+    outline: 2px solid var(--cds-focus, #0f62fe);
+    outline-offset: -2px;
+  }
+
+  .icon {
+    position: absolute;
+    bottom: 1rem;
+    fill: var(--cds-ui-05);
+  }
+
+  .icon--left {
+    left: 1rem;
+  }
+
+  .icon--right {
+    right: 1rem;
+  }
+
+  .bg {
+    position: absolute;
+    z-index: -1;
+    right: 1px;
+    bottom: 1px;
+    width: calc(100% - 1px);
+    height: calc(100% - 1px);
+    transition: 150ms cubic-bezier(0.2, 0, 0.38, 0.9);
+    background-color: var(--cds-ui-01);
+  }
+
+  .button-tile:hover .bg {
+    background-color: var(--cds-ui-03);
+  }
+
+  a {
+    color: inherit;
+    text-decoration: none;
+  }
+</style>
+
+<div class="button-tile bx--aspect-ratio bx--aspect-ratio--2x1">
+  <div class="bx--aspect-ratio--object">
+    {#if href}
+      <a
+        class="link"
+        on:click
+        target={kind === 'launch' ? '_blank' : undefined}
+        rel={kind === 'launch' ? 'noopener noreferrer' : undefined}
+        {href}>
+        <div>
+          <slot />
+        </div>
+        {#if iconLeft}
+          <div class="icon icon--left">
+            <svelte:component this={iconLeft} />
+          </div>
+        {/if}
+        <div class="icon icon--right">
+          <svelte:component this={iconRight} />
+        </div>
+      </a>
+    {:else}
+      <div role="button" tabindex="0" class="link" on:click {href}>
+        <div>
+          <slot />
+        </div>
+        {#if iconLeft}
+          <div class="icon icon--left">
+            <svelte:component this={iconLeft} />
+          </div>
+        {/if}
+        <div class="icon icon--right">
+          <svelte:component this={iconRight} />
+        </div>
+      </div>
+    {/if}
+    <div class="bg" />
+  </div>
+</div>
diff --git a/palimpsest/src/components/Component/Component.svelte b/palimpsest/src/components/Component/Component.svelte
index 11eb98fe..87d05cd1 100644
--- a/palimpsest/src/components/Component/Component.svelte
+++ b/palimpsest/src/components/Component/Component.svelte
@@ -59,11 +59,17 @@
 
 <style>
   main {
-    margin-top: 5.5rem;
+    margin-top: 5rem;
     padding-left: 12rem;
     padding-bottom: 2.5rem;
   }
 
+  @media screen and (max-width: 768px) {
+    main {
+      padding-left: 0;
+    }
+  }
+
   h1 {
     margin-bottom: 1.5rem;
   }
@@ -85,7 +91,7 @@
       </div>
     </header>
     <div class="bx--row">
-      <div class="bx--col bx--no-gutter--left">
+      <div class="bx--col bx--no-gutter">
         <Tabs
           type="container"
           bind:selected
@@ -94,7 +100,7 @@
           }}>
           <Tab label="Preview" href={baseUrl} />
           <Tab label="API" href={`${baseUrl}/API`} />
-          <Tab label="Kitchen Sink" href={`${baseUrl}/kitchen-sink`} />
+          <!-- <Tab disabled label="Kitchen Sink" href={`${baseUrl}/kitchen-sink`} /> -->
         </Tabs>
       </div>
     </div>
diff --git a/palimpsest/src/components/Component/ComponentPreview.svelte b/palimpsest/src/components/Component/ComponentPreview.svelte
index dc845da5..30f6bfd8 100644
--- a/palimpsest/src/components/Component/ComponentPreview.svelte
+++ b/palimpsest/src/components/Component/ComponentPreview.svelte
@@ -16,7 +16,6 @@
     position: relative;
     z-index: 1;
     border: 1px solid var(--cds-ui-03);
-    margin-bottom: 2rem;
   }
 
   .preview.light {
@@ -65,7 +64,9 @@
   }
 
   h3 {
+    margin-top: 2rem;
     margin-bottom: 1.5rem;
+    font-size: 1.5rem;
   }
 
   .wrapper {
diff --git a/palimpsest/src/components/Component/ComponentTab.svelte b/palimpsest/src/components/Component/ComponentTab.svelte
index 732ee29e..32b0054c 100644
--- a/palimpsest/src/components/Component/ComponentTab.svelte
+++ b/palimpsest/src/components/Component/ComponentTab.svelte
@@ -12,9 +12,11 @@
     'kitchen-sink': 'KitchenSink'
   };
 
-  $: tab = paramMap[params.tab || 'Preview'];
+  $: tabName = params.tab || 'Preview';
+  $: tab = paramMap[tabName];
   $: {
     set(params.name);
+    document.title = `${params.name} · ${tabName}`;
   }
 </script>
 
diff --git a/palimpsest/src/components/Header.svelte b/palimpsest/src/components/Header.svelte
index f9792d60..7955ee4d 100644
--- a/palimpsest/src/components/Header.svelte
+++ b/palimpsest/src/components/Header.svelte
@@ -1,12 +1,17 @@
 <script>
   import { link } from 'svelte-spa-router';
+  import { Icon } from 'carbon-components-svelte';
+  import AppSwitcher20 from 'carbon-icons-svelte/lib/AppSwitcher20';
+  import Menu20 from 'carbon-icons-svelte/lib/Menu20';
+  import Close20 from 'carbon-icons-svelte/lib/Close20';
   import ThemePicker from '../components/ThemePicker.svelte';
+  import { sideNavToggled, appSwitcherToggled } from '../store';
 </script>
 
 <style>
   header {
     position: fixed;
-    z-index: 9;
+    z-index: 9999;
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -19,14 +24,63 @@
     border-bottom: 1px solid var(--cds-ui-03);
   }
 
+  .app-switcher {
+    position: fixed;
+    z-index: 9999;
+    top: 2.5rem;
+    right: 0;
+    width: 16rem;
+    height: calc(100% - 2.5rem);
+    padding: 1rem;
+    background-color: var(--cds-ui-01);
+    transform: translateX(100%);
+  }
+
+  @media screen and (max-width: 768px) {
+    .app-switcher {
+      will-change: transform;
+    }
+
+    .app-switcher.toggled {
+      transform: translateX(0);
+      transition: transform 110ms cubic-bezier(0.2, 0, 1, 0.9);
+      will-change: auto;
+    }
+  }
+
+  .menu {
+    display: none;
+    align-items: center;
+    justify-content: center;
+    height: 2.5rem;
+    width: 2.5rem;
+    margin-left: -1rem;
+    margin-right: 0.5rem;
+    background: none;
+    border: 0;
+    fill: var(--cds-ui-05);
+    cursor: pointer;
+  }
+
+  .menu--right {
+    margin-left: auto;
+    margin-right: -1rem;
+  }
+
+  .menu:focus {
+    outline: 2px solid var(--cds-focus, #0f62fe);
+    outline-offset: -2px;
+  }
+
   nav {
     display: flex;
-    align-items: baseline;
+    align-items: center;
   }
 
   .bx--link {
     font-size: 1rem;
     color: var(--cds-text-01);
+    white-space: nowrap;
   }
 
   .bx--link:hover {
@@ -34,23 +88,55 @@
     text-decoration: none;
   }
 
-  .version {
-    font-size: 0.75rem;
-    color: var(--cds-text-02);
-    margin-left: 0.5rem;
-    margin-right: 1.5rem;
+  @media screen and (max-width: 768px) {
+    .menu {
+      display: flex;
+    }
+
+    .theme {
+      display: none;
+    }
   }
 </style>
 
 <header>
   <nav>
-    <a class="bx--link" href="/" use:link>
+    <button
+      class="menu"
+      on:click={() => {
+        sideNavToggled.set(!$sideNavToggled);
+        appSwitcherToggled.set(false);
+      }}>
+      <Icon render={$sideNavToggled ? Close20 : Menu20} />
+    </button>
+    <a
+      class="bx--link"
+      href="/"
+      use:link
+      on:click={() => {
+        if ($sideNavToggled || $appSwitcherToggled) {
+          sideNavToggled.set(false);
+          appSwitcherToggled.set(false);
+        }
+        window.scrollTo(0, 0);
+      }}>
       Carbon Components
       <strong>Svelte</strong>
     </a>
-    <span class="version">v0.2.1</span>
   </nav>
-  <div>
-    <ThemePicker />
+  <div class="theme">
+    <ThemePicker inline />
   </div>
+  <button
+    class="menu menu--right"
+    on:click={() => {
+      appSwitcherToggled.set(!$appSwitcherToggled);
+      sideNavToggled.set(false);
+    }}>
+    <Icon render={$appSwitcherToggled ? Close20 : AppSwitcher20} />
+  </button>
 </header>
+
+<div class="app-switcher" class:toggled={$appSwitcherToggled}>
+  <ThemePicker />
+</div>
diff --git a/palimpsest/src/components/Home.svelte b/palimpsest/src/components/Home.svelte
index 3f441246..7da77956 100644
--- a/palimpsest/src/components/Home.svelte
+++ b/palimpsest/src/components/Home.svelte
@@ -1,30 +1,50 @@
 <script>
+  import LogoGithub32 from 'carbon-icons-svelte/lib/LogoGithub32';
   import Logo from '../assets/logo.png';
+  import ButtonTile from './ButtonTile.svelte';
+
+  $: {
+    document.title = `Carbon Components Svelte`;
+  }
 </script>
 
 <style>
   main {
-    margin-top: 5.5rem;
+    margin-top: 5rem;
     padding-left: 12rem;
     padding-bottom: 2.5rem;
   }
 
+  @media screen and (max-width: 768px) {
+    main {
+      padding-left: 0;
+    }
+  }
+
   .bx--grid {
     max-width: 66rem;
   }
 
   .logo {
-    max-width: 4.5rem;
+    max-width: 4rem;
     margin-bottom: 0.5rem;
   }
 
   h1 {
     margin-bottom: 2rem;
+    font-size: 2rem;
+    line-height: 1.2;
   }
 
   h1 span {
     display: block;
   }
+
+  h3 {
+    margin-top: 4rem;
+    margin-bottom: 1.5rem;
+    font-size: 1.5rem;
+  }
 </style>
 
 <main>
@@ -43,11 +63,30 @@
             <strong>Svelte</strong>
           </span>
         </h1>
-        <h3>The Carbon Design System implemented in Svelte</h3>
+        <p>The Carbon Design System implemented in Svelte</p>
       </div>
     </div>
     <div class="bx--row">
-      <div class="bx--col">1</div>
+      <div class="bx--col">
+        <h3>Packages</h3>
+      </div>
+    </div>
+    <div class="bx--row bx--no-gutter">
+      <div class="bx--no-gutter-sm bx--col-md-4 bx--col-lg-4">
+        <ButtonTile iconLeft={LogoGithub32} href="https://github.com/IBM/carbon-components-svelte">
+          Carbon Components Svelte
+        </ButtonTile>
+      </div>
+      <div class="bx--no-gutter-sm bx--col-md-4 bx--col-lg-4">
+        <ButtonTile iconLeft={LogoGithub32} href="https://github.com/IBM/carbon-icons-svelte">
+          Carbon Icons Svelte
+        </ButtonTile>
+      </div>
+    </div>
+    <div class="bx--row">
+      <div class="bx--col">
+        <h3>Components</h3>
+      </div>
     </div>
   </div>
 </main>
diff --git a/palimpsest/src/components/SideNav.svelte b/palimpsest/src/components/SideNav.svelte
index 9410d00b..cc9438b1 100644
--- a/palimpsest/src/components/SideNav.svelte
+++ b/palimpsest/src/components/SideNav.svelte
@@ -3,17 +3,31 @@
   import { Search } from 'carbon-components-svelte';
   import Fuse from 'fuse.js';
   import components from '../data/component-registry';
+  import { sideNavToggled, appSwitcherToggled } from '../store';
 
   const fuse = new Fuse(components, { shouldSort: false, threshold: 0.33, keys: ['name'] });
 
   let value = '';
 
   $: results = value.length > 1 ? fuse.search(value) : components;
+
+  $: {
+    if ($sideNavToggled || $appSwitcherToggled) {
+      document.body.classList.add('hidden');
+    } else {
+      document.body.classList.remove('hidden');
+    }
+  }
 </script>
 
 <style>
+  :global(body.hidden) {
+    overflow-y: hidden;
+  }
+
   nav {
     position: fixed;
+    z-index: 9999;
     top: 2.5rem;
     left: 0;
     width: 12rem;
@@ -22,6 +36,29 @@
     overflow-y: scroll;
   }
 
+  @media screen and (max-width: 768px) {
+    nav {
+      transform: translateX(-100%);
+      will-change: transform;
+    }
+
+    nav.toggled {
+      transform: translateX(0);
+      transition: transform 110ms cubic-bezier(0.2, 0, 1, 0.9);
+      will-change: auto;
+    }
+  }
+
+  .overlay {
+    position: fixed;
+    z-index: 9998;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: var(--cds-overlay-01);
+  }
+
   ul {
     padding: 0.5rem 0;
   }
@@ -64,12 +101,26 @@
   }
 </style>
 
-<nav>
+<svelte:window
+  on:resize={() => {
+    if (($sideNavToggled || $appSwitcherToggled) && window.matchMedia('(min-width: 768px)').matches) {
+      sideNavToggled.set(false);
+      appSwitcherToggled.set(false);
+    }
+  }} />
+
+<nav class:toggled={$sideNavToggled}>
   <Search small id="search-components" labelText="Components" bind:value />
   <ul>
     {#each results as { name }, i (name)}
       <li>
         <a
+          on:click={() => {
+            if ($sideNavToggled) {
+              sideNavToggled.set(false);
+              window.scrollTo(0, 0);
+            }
+          }}
           class="bx--link"
           class:current={$location.includes(`/c/${name}`)}
           href={`/c/${name}`}
@@ -80,3 +131,12 @@
     {/each}
   </ul>
 </nav>
+
+{#if $sideNavToggled || $appSwitcherToggled}
+  <div
+    class="overlay"
+    on:click={() => {
+      sideNavToggled.set(false);
+      appSwitcherToggled.set(false);
+    }} />
+{/if}
diff --git a/palimpsest/src/components/ThemePicker.svelte b/palimpsest/src/components/ThemePicker.svelte
index de3745d0..95ea2c7a 100644
--- a/palimpsest/src/components/ThemePicker.svelte
+++ b/palimpsest/src/components/ThemePicker.svelte
@@ -1,16 +1,21 @@
 <script>
+  export let inline = false;
+
   import { Select, SelectItem } from 'carbon-components-svelte';
   import { theme } from '../store';
 
-  let selected = 'g10';
-
   $: {
-    theme.set(selected);
-    document.documentElement.setAttribute('carbon-theme', selected);
+    document.documentElement.setAttribute('carbon-theme', $theme);
   }
 </script>
 
-<Select inline labelText="Theme" bind:selected>
+<Select
+  {inline}
+  labelText="Theme"
+  selected={$theme}
+  on:change={({ detail }) => {
+    theme.set(detail);
+  }}>
   <SelectItem value="white" text="White" />
   <SelectItem value="g10" text="Gray 10" />
   <SelectItem value="g90" text="Gray 90" />
diff --git a/palimpsest/src/store/index.js b/palimpsest/src/store/index.js
index 8517103a..470a579e 100644
--- a/palimpsest/src/store/index.js
+++ b/palimpsest/src/store/index.js
@@ -1,3 +1,5 @@
 import { writable } from 'svelte/store';
 
-export const theme = writable();
+export const sideNavToggled = writable(false);
+export const appSwitcherToggled = writable(false);
+export const theme = writable('g10');
