diff --git a/.gitignore b/.gitignore
index 4eb2defb844..5462f5c6c43 100644
--- a/.gitignore
+++ b/.gitignore
@@ -58,3 +58,4 @@ bundle-*.js
 /.vagrant
 .DS_Store
 .vscode/
+.idea/
diff --git a/packages/dapp-svelte-wallet/ui/lib/ListCard.svelte b/packages/dapp-svelte-wallet/ui/lib/ListCard.svelte
index 4ea2e7fd21d..05c52e1c459 100644
--- a/packages/dapp-svelte-wallet/ui/lib/ListCard.svelte
+++ b/packages/dapp-svelte-wallet/ui/lib/ListCard.svelte
@@ -23,6 +23,12 @@
   };
 </script>
 
+<style>
+  .actions {
+    margin: 1em 0 0 2em;
+  }
+</style>
+
 <section class="fullwidth px-2 py-2">
   <slot name="title"></slot>
 
@@ -56,5 +62,7 @@
     </List>
   {/if}
 
-  <slot name="actions"></slot>
+  <div class="actions">
+    <slot name="actions"></slot>
+  </div>
 </section>
diff --git a/packages/dapp-svelte-wallet/ui/lib/ListItems.svelte b/packages/dapp-svelte-wallet/ui/lib/ListItems.svelte
index 75e0fa789e4..aa5203db52e 100644
--- a/packages/dapp-svelte-wallet/ui/lib/ListItems.svelte
+++ b/packages/dapp-svelte-wallet/ui/lib/ListItems.svelte
@@ -1,6 +1,7 @@
 <script>
   export let items;
   export let idFn = item => item.id || item;
+  export let horizontal = false;
 </script>
 
 <style>
@@ -9,6 +10,9 @@
     margin: 0;
     padding: 0 0;
   }
+  .horizontal {
+    display: inline-block;
+  }
 </style>
 
 <slot />
@@ -18,7 +22,7 @@
 {:else}
   <ul>
     {#each items as item (idFn(item))}
-      <li class="list">
+      <li class={horizontal ? "horizontal" : ""}>
         <slot name="item" {item} />
       </li>
     {/each}
diff --git a/packages/dapp-svelte-wallet/ui/lib/MenuButton.svelte b/packages/dapp-svelte-wallet/ui/lib/MenuButton.svelte
new file mode 100644
index 00000000000..d4beb7cd610
--- /dev/null
+++ b/packages/dapp-svelte-wallet/ui/lib/MenuButton.svelte
@@ -0,0 +1,15 @@
+<script>
+  import Button from 'smelte/src/components/Button';
+
+  export let text = '';
+  export let id;
+  export let value = undefined;
+  export let color = undefined;
+</script>
+
+<div class={id === value ? "bg-secondary-transLighter" : ""}>
+  <Button outlined={id === value} text fab flat on:click={() => (value = id)} {color}>
+    {text}
+    <slot />
+  </Button>
+</div>
diff --git a/packages/dapp-svelte-wallet/ui/public/wallet/logo.png b/packages/dapp-svelte-wallet/ui/public/wallet/logo.png
new file mode 100644
index 00000000000..53f02b7e1d6
Binary files /dev/null and b/packages/dapp-svelte-wallet/ui/public/wallet/logo.png differ
diff --git a/packages/dapp-svelte-wallet/ui/src/App.svelte b/packages/dapp-svelte-wallet/ui/src/App.svelte
index 4c7cc5f0d6f..3d2f14eb336 100644
--- a/packages/dapp-svelte-wallet/ui/src/App.svelte
+++ b/packages/dapp-svelte-wallet/ui/src/App.svelte
@@ -1,21 +1,34 @@
 <script>
-  import { E } from "@agoric/eventual-send";
+  import 'smelte/src/tailwind.css';
+  import { E } from '@agoric/eventual-send';
 
-  import Button from "smelte/src/components/Button";
-  import Dapps from "./Dapps.svelte";
-  import Payments from "./Payments.svelte";
-  import Issuers from "./Issuers.svelte";
-  import Contacts from "./Contacts.svelte";
-  import Purses from "./Purses.svelte";
-  import Transactions from "./Transactions.svelte";
-  import { connected } from "./store";
+  import Button from 'smelte/src/components/Button';
+  import Dapps from './Dapps.svelte';
+  import Payments from './Payments.svelte';
+  import Issuers from './Issuers.svelte';
+  import Contacts from './Contacts.svelte';
+  import Purses from './Purses.svelte';
+  import Config from './Config.svelte';
+  import Transactions from './Transactions.svelte';
+  import { connected } from './store';
 
-  import { ThemeWrapper, ThemeToggle } from "svelte-themer";
+  import ListItems from '../lib/ListItems.svelte';
+  import MenuButton from '../lib/MenuButton.svelte';
+
+  const menu = [
+    { id: 'inbox', text: 'Inbox' },
+    { id: 'transfers', text: 'Transfers' },
+    { id: 'setup', text: 'Setup' },
+  ];
+
+  let navPanel = 'inbox';
+
+  import { ThemeWrapper } from 'svelte-themer';
 
   connected.connect();
 
-  $: connectStatus = $connected ? "Connected" : "Disconnected";
-  $: connectLabel = $connected ? "Disconnect" : "Connect";
+  $: connectStatus = $connected ? 'Connected' : 'Disconnected';
+  $: connectLabel = $connected ? 'Disconnect' : 'Connect';
   $: connectAction = $connected ? connected.disconnect : connected.connect;
 </script>
 
@@ -25,112 +38,118 @@
     --text-color-light: #8cabd9;
     color: var(--theme-text);
     --agoric-bg: #ab2328;
+    --banner-height: 70px;
+    --content-width: 1024px;
   }
   :global(.highlighted) {
     color: var(--text-color-light);
   }
   :global(body) {
+    padding-top: var(--banner-height);
     color: var(--theme-text);
   }
-  :global([data-theme="dark"]) {
+  :global([data-theme='dark']) {
     --text-color-normal: hsl(210, 10%, 62%);
     --text-color-light: hsl(210, 15%, 35%);
     --text-color-richer: hsl(210, 50%, 72%);
     --text-color-highlight: hsl(25, 70%, 45%);
   }
-
-  .banner { 
-    position: absolute; 
-    top: 0; 
-    left: 0; 
+  img {
+    max-width: 100%;
+    size: auto;
+  }
+  .header-wrapper {
+    position: absolute;
+    top: 0;
+    left: 0;
     background-color: var(--agoric-bg);
-    width: 100%; 
-    height: 70px;
-    z-index: -1;
-    border: none;
+    width: 100%;
+    /* height: var(--banner-height); */
+    z-index: 25;
+    border-bottom: 1px solid var(--color-primary-700);
   }
   .disconnected-background {
-    position: absolute; 
-    top: 70px; 
-    left: 0; 
-    width: 100%; 
-    height: 100%;
+    position: absolute;
+    top: var(--banner-height);
+    left: 0;
+    width: 100%;
+    height: calc(100vh - var(--banner-height));
     border: none;
     background: rgba(0, 0, 0, 0.4);
     z-index: 1000;
   }
 
-  .container {
-    display: grid;
-    grid-template-areas:
-      "header header"
-      "content content"
-      "footer footer";
-    grid-template-columns: 1fr 1fr;
-    grid-template-rows: auto 1fr auto;
-    grid-gap: 10px;
-    margin: auto;
-  }
   header {
-    grid-area: header;
-    display: grid;
-    grid-template-columns: 1fr auto;
+    z-index: 30;
+    min-height: var(--banner-height);
+    max-width: var(--content-width);
+    margin: auto;
     color: #f1f1f1;
-    padding: 10px 20px;
     background-color: var(--agoric-bg);
+    padding: 10px 20px;
+
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    justify-content: space-between;
+    flex-wrap: wrap;
   }
 
-  .controls > * {
-    margin: 8px;
+  nav {
+    display: flex;
     align-items: center;
-    display: inline-flex;
   }
-  main {
-    grid-area: content;
-    padding: 8px;
+  nav :global(button) {
+    /* remove the padding at the bottom */
+    margin: auto;
+    color: var(--color-secondary);
   }
-  footer {
-    grid-area: footer;
-    /* margin: 2em; */
+  nav h6 {
+    text-transform: uppercase;
+    font-size: 10px;
+    font-style: italic;
+  }
+  .connector {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 10rem;
   }
 
   main {
+    padding: 8px;
+    max-width: var(--content-width);
+    margin: 1em auto;
     display: grid;
-    grid-template-areas:
-      "dapps dapps"
-      "txns txns"
-      "payments payments"
-      "history history"
-      "purses issuers"
-      "contacts contacts";
     grid-template-columns: 1fr 1fr;
     grid-gap: 10px;
-    /* margin: 2em; */
-  }
-  .dapps {
-    grid-area: dapps;
   }
+  footer {
+    min-height: var(--banner-height);
+    max-width: var(--content-width);
+    padding: 8px;
+    margin: auto;
+    /* padding: 2em 3em; */
 
-  .purses {
-    grid-area: purses;
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    justify-content: space-between;
+    flex-wrap: wrap;
   }
-
-  .payments {
-    grid-area: payments;
+  .theme-hidden {
+    display: none;
   }
 
-  .txns {
-    grid-area: txns;
-  }
-  .issuers {
-    grid-area: issuers;
-  } 
-  .contacts {
-    grid-area: contacts;
+  .full {
+    grid-column: 1 / span 2;
   }
-  .history {
-    grid-area: history;
-    min-height: 30px;
+
+  .bottom {
+    position: absolute;
+    bottom: calc(20px + var(--banner-height));
+    margin: 20px;
+    z-index: 32;
   }
 
   /* DEBUGGING */
@@ -146,50 +165,88 @@
 <svelte:head>
   <title>Agoric Wallet</title>
 </svelte:head>
-<div class="banner" />
 
-<div class="container">
-  <ThemeWrapper>
+<ThemeWrapper>
+  <div class="header-wrapper">
     <header>
-      <h1>Agoric Wallet</h1>
-      <div class="controls">
-        <b>{connectStatus}</b>
-        <Button  tiny fab flat title={connectLabel} on:click={connectAction}>
-          {connectLabel}
-        </Button>
-      </div>
+      <a href="https://agoric.com" class="flex items-center">
+        <img src="logo.png" alt="Agoric" width="200" />
+      </a>
+      <!-- <h4>Wallet</h4> -->
+      <nav>
+        <ListItems horizontal items={menu} on:change>
+          <div slot="item" let:item>
+            <MenuButton id={item.id} text={item.text} bind:value={navPanel} color="secondary"/>
+          </div>
+        </ListItems>
+
+        <div class="connector">
+          <h6>{connectStatus}</h6>
+          <Button
+            small
+            text
+            fab
+            flat
+            title={connectLabel}
+            on:click={connectAction}>
+            {connectLabel}
+          </Button>
+        </div>
+      </nav>
     </header>
-    {#if !$connected}
-      <div
-        class="disconnected-background"
-        on:click|preventDefault|stopPropagation={() => {}} />
-    {/if}
-
-    <main>
+  </div>
+  {#if !$connected}
+    <div
+      class="disconnected-background"
+      on:click|preventDefault|stopPropagation={() => {}} />
+  {/if}
+
+  <main>
+    {#if navPanel === 'transfers'}
+      <div class="full">
+        <Purses />
+      </div>
+      <div class="full">
+        <Contacts />
+      </div>
+      <!-- <div class="history">
+          <History />
+        </div> -->
+    {:else if navPanel === 'setup'}
+      <!-- Issuers
+          Payees
+          Apps
+          Instances
+          Installations -->
       <div class="dapps">
         <Dapps />
       </div>
-      <div class="payments">
-        <Payments />
+      <div class="issuers">
+        <Issuers />
+      </div>
+      <div class="full">
+        <Contacts />
       </div>
-      <div class="txns">
+    {:else}
+      <!-- inbox -->
+      <div class="full">
         <Transactions />
       </div>
-      <div class="purses">
-        <Purses />
+      <div class="payments">
+        <Payments />
       </div>
-      <div class="issuers">
-        <Issuers />
+      <div class="dapps">
+        <Dapps />
       </div>
-      <div class="contacts">
-        <Contacts />
+      <div class="transfers">
+        <Purses />
       </div>
-      <!-- <div class="history">
-        <History />
-      </div> -->
-    </main>
-    <footer>
-      <ThemeToggle />
-    </footer>
-  </ThemeWrapper>
-</div>
+    {/if}
+  </main>
+
+  <footer>
+    <div class={navPanel === "setup" ? "theme" : "theme-hidden"}>
+      <Config />
+    </div>
+  </footer>
+</ThemeWrapper>
diff --git a/packages/dapp-svelte-wallet/ui/src/Config.svelte b/packages/dapp-svelte-wallet/ui/src/Config.svelte
new file mode 100644
index 00000000000..afba8a84242
--- /dev/null
+++ b/packages/dapp-svelte-wallet/ui/src/Config.svelte
@@ -0,0 +1,22 @@
+<script>
+  import { ThemeToggle } from 'svelte-themer';
+
+  import Icon from "smelte/src/components/Icon";
+  import Card from "smelte/src/components/Card";
+
+  import { dapps } from './store';
+</script>
+
+<style>
+  .actions {
+    margin: 1em 0 0 2em;
+  }
+</style>
+
+<div class="fullwidth px-2 py-2">
+  <Card.Title title="Config" />
+
+  <div class="actions">
+    <ThemeToggle />
+  </div>
+</div>
diff --git a/packages/dapp-svelte-wallet/ui/src/Transaction.svelte b/packages/dapp-svelte-wallet/ui/src/Transaction.svelte
index 050ff20d7dd..2b14f4da5ae 100644
--- a/packages/dapp-svelte-wallet/ui/src/Transaction.svelte
+++ b/packages/dapp-svelte-wallet/ui/src/Transaction.svelte
@@ -102,7 +102,7 @@
   {/if}
   {#if details}
   <div>
-	<Debug title="Transaction Detail" target={item} />
+	<Debug title="Offer Detail" target={item} />
   </div>
   <div>
     {#each Object.entries(give) as [role, { amount, pursePetname }], i}
diff --git a/packages/dapp-svelte-wallet/ui/src/Transactions.svelte b/packages/dapp-svelte-wallet/ui/src/Transactions.svelte
index 2504b9c2cc7..402b84ffc20 100644
--- a/packages/dapp-svelte-wallet/ui/src/Transactions.svelte
+++ b/packages/dapp-svelte-wallet/ui/src/Transactions.svelte
@@ -9,11 +9,11 @@
 <!-- filter out the history -->
 <ListCard items={($inbox || []).filter(({ status }) => status === undefined || status === 'pending')}>
   <div slot="title">
-    <Card.Title title="Transactions" />
+    <Card.Title title="Offers" />
   </div>
 
   <div slot="empty">
-    No transactions.
+    No offers.
   </div>
 
   <div slot="item-header" let:item>