diff --git a/public/how-it-works.png b/public/how-it-works.png
new file mode 100644
index 0000000..9eebcec
Binary files /dev/null and b/public/how-it-works.png differ
diff --git a/src/components/NavDrawer.vue b/src/components/NavDrawer.vue
index 35f3102..cbf171d 100644
--- a/src/components/NavDrawer.vue
+++ b/src/components/NavDrawer.vue
@@ -19,7 +19,7 @@ import router from "@/router/index.js";
 const s = useStore()
 
 function nav(path) {
-  router.push('/'+path)
+  router.push('/'+path) // todo use nav()
   s.nav = false
 }
 
diff --git a/src/components/Order.vue b/src/components/Order.vue
index 8f2c167..01e3141 100644
--- a/src/components/Order.vue
+++ b/src/components/Order.vue
@@ -11,7 +11,7 @@
         </div>
       </v-card-item>
       <v-card-actions class="d-flex justify-space-evenly mb-4">
-        <v-btn variant="outlined" color="red" @click="$router.push('/assets')">Cancel</v-btn>
+        <v-btn variant="outlined" color="red" @click="nav('Assets')">Cancel</v-btn>
         <v-btn variant="flat" color="green" :disabled="!valid()" @click="placeOrder">Place Dexorder</v-btn>
       </v-card-actions>
     </phone-card>
@@ -23,7 +23,7 @@ import {useOrderStore, useStore} from "@/store/store";
 import PhoneCard from "@/components/PhoneCard.vue";
 import Amount from "@/components/Amount.vue"
 // noinspection ES6UnusedImports
-import {routeInverted, SingletonCoroutine, vAutoSelect} from "@/misc.js";
+import {nav, routeInverted, SingletonCoroutine, vAutoSelect} from "@/misc.js";
 import {newOrder} from "@/blockchain/orderlib.js";
 import {FixedNumber} from "ethers";
 import {pendOrder} from "@/blockchain/wallet.js";
@@ -45,7 +45,7 @@ function placeOrder() {
   const ts = props.tranches()
   const order = newOrder(tokenIn, tokenOut, route.exchange, route.fee, amt, os.amountIsInput, ts) // todo: minAmount, outputToOwner, chainOrder
   pendOrder(order)
-  router.push('/status')
+  route('Status')
 }
 
 </script>
diff --git a/src/components/Social.vue b/src/components/Social.vue
index 7c9726f..d79efab 100644
--- a/src/components/Social.vue
+++ b/src/components/Social.vue
@@ -1,13 +1,14 @@
 <template>
   <div>
-    <!--      <v-btn variant="plain" icon="mdi-facebook" @click="window.open('https://facebook.com','facebook')"/>-->
-    <v-btn :v-bind="props" variant="plain" icon="mdi-twitter" @click="open('https://twitter.com/Dexorder_trade','twitter')" :size="size"/>
-    <!--      <v-btn variant="plain" icon="mdi-reddit" @click="window.open('https://reddit.com','reddit')"/>-->
-    <v-btn :v-bind="props" variant="plain" icon="mdi-discord" @click="open('https://discord.gg/fqp9JXXQyt','discord')" :size="size"/>
+    <v-btn variant="plain" icon="mdi-github" @click="open('https://github.com/dexorder-trade/contract','dexorder_github')" :size="size"/>
+    <v-btn variant="plain" icon="mdi-discord" @click="open('https://discord.gg/fqp9JXXQyt','dexorder_discord')" :size="size"/>
+    <v-btn variant="plain" icon="mdi-twitter" @click="open('https://twitter.com/Dexorder_trade','dexorder_twitter')" :size="size"/>
+    <!--      <v-btn variant="plain" icon="mdi-facebook" @click="open('https://facebook.com','dexorder_facebook')" :size="size"/>-->
+    <!--      <v-btn variant="plain" icon="mdi-reddit" @click="open('https://reddit.com','dexorder_reddit')" :size="size"/>-->
   </div>
 </template>
 
 <script setup>
 const props = defineProps(['size'])
 function open(url, target) {window.open(url,target)}
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/chart/ChartFooter.vue b/src/components/chart/ChartFooter.vue
deleted file mode 100644
index 0b5affa..0000000
--- a/src/components/chart/ChartFooter.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<template>
-    <div class="w-100 d-flex flex-row justify-center align-center footer">
-      <div class="text-grey" style="font-size: small">&copy;{{ new Date().getFullYear() }}</div>
-      <div class="text-grey logo mr-3" style="font-size: small; margin-bottom: 0;">&nbsp;dexorder</div>
-      <social size="x-small"/>
-      <div class="text-grey tv">
-        <span>Charts by <a href="https://tradingview.com/" target="TradingView">TradingView</a></span>
-      </div>
-    </div>
-</template>
-
-<script setup>
-
-import Social from "@/components/Social.vue";
-</script>
-
-<style scoped lang="scss">
-div.footer {
-    margin-left: 1em;
-    margin-right: 1em;
-}
-.tv {
-  margin-left: 1em;
-  font-size: 0.7em;
-  a {
-    text-decoration: none;
-    &:visited {
-      color: grey;
-    }
-    &:hover {
-      text-decoration: underline;
-    }
-  }
-}
-</style>
\ No newline at end of file
diff --git a/src/components/chart/ChartPlaceOrder.vue b/src/components/chart/ChartPlaceOrder.vue
index f047995..9970998 100644
--- a/src/components/chart/ChartPlaceOrder.vue
+++ b/src/components/chart/ChartPlaceOrder.vue
@@ -94,7 +94,7 @@ async function placeOrder() {
   else {
     await pendOrder(built[0])
     co.resetOrders()
-    router.push('/status')
+    nav('Status')
   }
 }
 
diff --git a/src/components/chart/Toolbar.vue b/src/components/chart/Toolbar.vue
index 8a9ee0b..9afe662 100644
--- a/src/components/chart/Toolbar.vue
+++ b/src/components/chart/Toolbar.vue
@@ -1,26 +1,14 @@
 <template>
   <div class="d-flex mb-1 align-center w-100">
-    <logo class="d-flex align-end clickable logo-large" @click="$router.push('/order')" :alpha="true"/>
-<!--
-    <div class="d-flex align-end clickable" @click="$router.push('/order')">
-      <span class="arrow align-self-start"><v-icon icon="mdi-arrow-up-bold" :color="theme.colors.success"/></span>
-      <span class="logo">dexorder</span>
-      <alpha class="pr-6"/>
-    </div>
--->
-<!--
-    <div class="d-flex align-center">
-    </div>
--->
+    <logo class="d-flex align-end clickable logo-large" @click="nav('Order')" :alpha="true"/>
     <slot/>
     <div class="ml-auto d-flex align-center">
-<!--      <v-icon :icon="icon" size="small"/>&nbsp;-->
       <span class="title mr-4">{{title}}</span>
-      <toolbar-button tooltip="Order" icon="mdi-chart-timeline-variant" path="/order"/>
+      <toolbar-button tooltip="Order" icon="mdi-chart-timeline-variant" route="Order"/>
       <!-- mdi-currency-btc mdi-currency-eth mdi-bank-outline mdi-safe-square-outline -->
-      <toolbar-button tooltip="Assets" icon="mdi-currency-btc" path="/assets"/>
+      <toolbar-button tooltip="Assets" icon="mdi-currency-btc" route="Assets"/>
       <!-- mdi-format-list-checks mdi-format-list-bulleted-square -->
-      <toolbar-button tooltip="Status" icon="mdi-format-list-checks" path="/status"/>
+      <toolbar-button tooltip="Status" icon="mdi-format-list-checks" route="Status"/>
       <v-btn variant="text" icon="mdi-help-circle-outline" text="Info" @click="showCorp"></v-btn>
     </div>
   </div>
@@ -33,6 +21,7 @@ import {useTheme} from "vuetify";
 import ToolbarButton from "@/components/chart/ToolbarButton.vue";
 import Alpha from "@/components/Alpha.vue";
 import Logo from "@/components/Logo.vue";
+import {nav} from "@/misc.js";
 
 const props = defineProps(['title', 'icon'])
 
diff --git a/src/components/chart/ToolbarButton.vue b/src/components/chart/ToolbarButton.vue
index ddeba8e..68680f2 100644
--- a/src/components/chart/ToolbarButton.vue
+++ b/src/components/chart/ToolbarButton.vue
@@ -2,7 +2,7 @@
 <v-tooltip :text="tooltip" location="top">
   <template v-slot:activator="{ props }">
     <v-btn v-bind="props" :color="isCurrent?'primary':undefined" variant="text"
-           :icon="icon" @click="$router.push(path)"/>
+           :icon="icon" @click="()=>nav(route)"/>
   </template>
 </v-tooltip>
 </template>
@@ -10,10 +10,12 @@
 <script setup>
 import {computed} from "vue";
 import {useRoute} from "vue-router";
+import {nav} from "/src/misc.js"
 
-const props = defineProps(['icon', 'path', 'tooltip'])
-const route = useRoute();
-const isCurrent = computed(() => route.path === props.path)
+const props = defineProps(['icon', 'route', 'tooltip'])
+console.log('toolbar button props', props.route)
+const router = useRoute();
+const isCurrent = computed(() => router.name === props.route)
 </script>
 
 <style scoped lang="scss">
diff --git a/src/components/chart/ToolbarPane.vue b/src/components/chart/ToolbarPane.vue
index 4e5b620..bc65abf 100644
--- a/src/components/chart/ToolbarPane.vue
+++ b/src/components/chart/ToolbarPane.vue
@@ -6,14 +6,12 @@
     <div class="overflow-y-auto">
       <slot/>
     </div>
-    <chart-footer/>
   </div>
 </template>
 
 <script setup>
 
 import Toolbar from "@/components/chart/Toolbar.vue";
-import ChartFooter from "@/components/chart/ChartFooter.vue";
 
 const props = defineProps(['title', 'icon'])
 
diff --git a/src/corp/AppBtn.vue b/src/corp/AppBtn.vue
new file mode 100644
index 0000000..bdca0f4
--- /dev/null
+++ b/src/corp/AppBtn.vue
@@ -0,0 +1,13 @@
+<template>
+  <v-btn prepend-icon="mdi-arrow-up-bold" color="primary" variant="tonal" text="Try the App" @click="openApp"/>
+</template>
+
+<script setup>
+function openApp() {
+  window.open('https://alpha.dexorder.trade/', 'dexorderapp')
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>
\ No newline at end of file
diff --git a/src/corp/Home.vue b/src/corp/Home.vue
index a7a262d..1e02fd4 100644
--- a/src/corp/Home.vue
+++ b/src/corp/Home.vue
@@ -1,36 +1,34 @@
 <template>
-  <div>
-    <v-card rounded="0" border="0" elevation="0" class="maxw">
-      <v-card-item>
-        <logo class="logo-xl"/>
-      </v-card-item>
-      <v-card-subtitle class="pl-8 mx-auto">Advanced DeFi Orders</v-card-subtitle>
-  <!--    <social class="ml-12"/>-->
-      <v-card-text>
-        Dexorder powers up your favorite DeFi exchange with advanced order types!
-      </v-card-text>
-      <v-card-text>
-        <v-list>
-          <v-list-item>
-            <uniswap-logo class="mr-2"/>
-            Supports Uniswap v3 <alpha/>
-          </v-list-item>
-          <v-list-item><v-icon icon="mdi-ray-vertex" class="mr-2"/> Limit Orders <alpha/></v-list-item>
-          <v-list-item><v-icon icon="mdi-clock-outline" class="mr-2"/> DCA and TWAP Orders <alpha/></v-list-item>
-          <v-list-item><v-icon icon="mdi-vector-line" class="mr-2"/> Diagonal Limit Orders <soon/></v-list-item>
-          <v-list-item><v-icon icon="mdi-chart-timeline-variant-shimmer" class="mr-2"/> Stop Loss / Take Profit <soon/></v-list-item>
-          <v-list-item><v-icon icon="mdi-format-list-checks" class="mr-2"/> One-Cancels-the-Other (OCO) Groups <soon/></v-list-item>
-          <v-list-item><v-icon icon="mdi-cancel" class="mr-2"/> Single-transaction Cancel All <alpha/></v-list-item>
-          <v-list-item><v-icon icon="mdi-alert-outline" class="mr-2"/> Single-transaction Sell Everything <soon/></v-list-item>
-          <v-list-item><v-icon icon="mdi-shimmer" class="mr-2"/> Custom Complex Orders <soon/></v-list-item>
-        </v-list>
-      </v-card-text>
-      <home-actions/>
-    </v-card>
-    <div style="height: 3rem; font-size: 0; line-height: 0;"/>
-    <how-it-works/>
-    <home-actions/>
-  </div>
+  <v-card rounded="0" border="0" elevation="0" class="maxw">
+    <v-card-item>
+      <logo class="logo-xl"/>
+    </v-card-item>
+    <v-card-subtitle class="pl-8 mx-auto">Advanced DeFi Orders</v-card-subtitle>
+<!--    <social class="ml-12"/>-->
+    <v-card-text>
+      Dexorder powers up your favorite DeFi exchange with advanced order types!
+    </v-card-text>
+    <v-card-text>
+      <v-list>
+        <v-list-item>
+          <uniswap-logo class="mr-2"/>
+          Supports Uniswap v3 <alpha/>
+        </v-list-item>
+        <v-list-item><v-icon icon="mdi-ray-vertex" class="mr-2"/> Limit Orders <alpha/></v-list-item>
+        <v-list-item><v-icon icon="mdi-clock-outline" class="mr-2"/> DCA and TWAP Orders <alpha/></v-list-item>
+        <v-list-item><v-icon icon="mdi-vector-line" class="mr-2"/> Diagonal Limit Orders <soon/></v-list-item>
+        <v-list-item><v-icon icon="mdi-chart-timeline-variant-shimmer" class="mr-2"/> Stop Loss / Take Profit <soon/></v-list-item>
+        <v-list-item><v-icon icon="mdi-format-list-checks" class="mr-2"/> One-Cancels-the-Other (OCO) Groups <soon/></v-list-item>
+        <v-list-item><v-icon icon="mdi-cancel" class="mr-2"/> Single-transaction Cancel All <alpha/></v-list-item>
+        <v-list-item><v-icon icon="mdi-alert-outline" class="mr-2"/> Single-transaction Sell Everything <soon/></v-list-item>
+        <v-list-item><v-icon icon="mdi-shimmer" class="mr-2"/> Custom Complex Orders <soon/></v-list-item>
+      </v-list>
+    </v-card-text>
+    <div class="w-100 d-flex justify-center my-6 actions">
+      <app-btn/>
+      <v-btn prepend-icon="mdi-information-outline" variant="flat" text="How It Works" @click="nav('HowItWorks')"/>
+    </div>
+  </v-card>
 </template>
 
 <script setup>
@@ -41,6 +39,8 @@ import HowItWorks from "@/corp/HowItWorks.vue";
 import HomeActions from "@/corp/HomeActions.vue";
 import UniswapLogo from "@/corp/UniswapLogo.vue";
 import Logo from "@/components/Logo.vue";
+import {nav} from "@/misc.js";
+import AppBtn from "@/corp/AppBtn.vue";
 
 const theme = useTheme().current
 
diff --git a/src/corp/HomeActions.vue b/src/corp/HomeActions.vue
index e7f3031..38c039c 100644
--- a/src/corp/HomeActions.vue
+++ b/src/corp/HomeActions.vue
@@ -1,15 +1,13 @@
 <template>
   <v-card-actions>
-    <v-btn prepend-icon="mdi-arrow-up-bold" color="primary" variant="tonal" text="Try the App" @click="openApp"/>
+    <app-btn/>
     <v-btn prepend-icon="mdi-discord" variant="flat" text="Join Discord" @click="discord"/>
     <v-btn prepend-icon="mdi-twitter" variant="flat" text="Follow Twitter" @click="twitter"/>
   </v-card-actions>
 </template>
 
 <script setup>
-function openApp() {
-  window.open('https://alpha.dexorder.trade/', 'dexorderapp')
-}
+import AppBtn from "@/corp/AppBtn.vue";
 
 function discord() {
   window.open('https://discord.gg/fqp9JXXQyt','discord')
diff --git a/src/corp/HowItWorks.vue b/src/corp/HowItWorks.vue
index a23ea55..81268b5 100644
--- a/src/corp/HowItWorks.vue
+++ b/src/corp/HowItWorks.vue
@@ -20,6 +20,9 @@
         Only you the vault's owner may withdraw funds or manage orders in your vault.
         The orders in the vault may only trade the tokens in the vault, and your regular wallet is never touched.
       </p>
+      <p>
+        See our open source smart contracts on <a href="https://github.com/dexorder-trade/contract">GitHub</a>.
+      </p>
     </v-card-text>
     <v-card-text>
       <h4>Funds are Never Locked</h4>
@@ -47,12 +50,22 @@
         provide gas at the correct times.
       </p>
     </v-card-text>
+    <v-card-text>
+      <h4 id="Charts">Charts</h4>
+        Creating dexorders couldn't be easier using the charts you know and love by
+        <a href="https://tradingview.com/" target="TradingView">TradingView</a>. What you see on the chart is the order
+        you get on-chain.
+    </v-card-text>
     <v-card-text>
       <h4>Power Up</h4>
       <p>
         Use Dexorder trading vaults for sophisticated order management when trading with your favorite <uniswap-logo/> DeFi pool!
       </p>
     </v-card-text>
+    <v-card-actions class="justify-center my-6 actions">
+      <app-btn/>
+      <v-btn prepend-icon="mdi-home-outline" variant="flat" text="Home" @click="nav('Home')"/>
+    </v-card-actions>
   </v-card>
 </template>
 
@@ -62,6 +75,9 @@ import Alpha from "@/components/Alpha.vue";
 import Soon from "@/components/Soon.vue";
 import UniswapLogo from "@/corp/UniswapLogo.vue";
 import Logo from "@/components/Logo.vue";
+import HomeActions from "@/corp/HomeActions.vue";
+import {nav} from "@/misc.js";
+import AppBtn from "@/corp/AppBtn.vue";
 </script>
 
 <style scoped lang="scss">
diff --git a/src/corp/MenuBar.vue b/src/corp/MenuBar.vue
index cd8b15c..0e166d2 100644
--- a/src/corp/MenuBar.vue
+++ b/src/corp/MenuBar.vue
@@ -3,10 +3,11 @@
 <!--    <v-app-bar-nav-icon @click="s.nav=!s.nav" icon="mdi-plus"/>-->
 
     <v-app-bar-title>
-      <logo/>
+      <logo @click="nav('Home')" class="clickable"/>
     </v-app-bar-title>
 
-    <v-btn prepend-icon="mdi-arrow-up-bold" variant="tonal" color="primary" @click="openApp">Launch App</v-btn>
+    <v-btn @click="nav('HowItWorks')" prepend-icon="mdi-information-outline" text="How It Works"/>
+    <v-btn prepend-icon="mdi-arrow-up-bold" variant="tonal" color="primary" @click="openApp" text="Launch App"/>
 
   </v-app-bar>
 </template>
@@ -14,6 +15,7 @@
 <script setup>
 import {useTheme} from "vuetify";
 import Logo from "@/components/Logo.vue";
+import {nav} from "@/misc.js";
 
 const theme = useTheme().current
 
diff --git a/src/layouts/default/AppBar.vue b/src/layouts/default/AppBar.vue
index 96c79fb..f1e410d 100644
--- a/src/layouts/default/AppBar.vue
+++ b/src/layouts/default/AppBar.vue
@@ -9,8 +9,8 @@
       <v-chip text="ALPHA" size="x-small" color="red" class="mx-1"/>
     </v-app-bar-title>
 
-    <v-btn icon="mdi-safe-square" color="grey-darken-2" text="Vault" @click="$router.push('/assets')"></v-btn>
-    <v-btn icon="mdi-information-outline" text="Order Status" @click="$router.push('/status')"></v-btn>
+    <v-btn icon="mdi-safe-square" color="grey-darken-2" text="Vault" @click="route('Assets')"></v-btn>
+    <v-btn icon="mdi-information-outline" text="Order Status" @click="route('Status')"></v-btn>
 
   </v-app-bar>
 </template>
diff --git a/src/main.js b/src/main.js
index cf64842..43d45a4 100644
--- a/src/main.js
+++ b/src/main.js
@@ -21,7 +21,6 @@ BigInt.prototype.toJSON = function() { return this.toString() }
 
 const app = createApp(App)
 registerPlugins(app)
-
 app.mount('#app')
 detectChain()
 window.$vuetify = app
diff --git a/src/misc.js b/src/misc.js
index bcc7d4c..1cc70c2 100644
--- a/src/misc.js
+++ b/src/misc.js
@@ -3,6 +3,12 @@ import {usePrefStore, useStore} from "@/store/store.js";
 import {token} from "@/blockchain/token.js";
 import Color from "color";
 import {DateTime} from "luxon";
+import router from "@/router/index.js";
+
+export function nav(name) {
+    // noinspection JSIgnoredPromiseFromCall
+    router.push({name})
+}
 
 const QUOTE_SYMBOLS = [
     // in order of preference
diff --git a/src/router/index.js b/src/router/index.js
index d6e2a11..166cb9f 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -3,13 +3,19 @@ import { createRouter, createWebHistory } from 'vue-router'
 
 const routes = [
   {
-    path: '/home',
     component: () => import('@/corp/CorpLayout.vue'),
+    path:'/home',
     children: [
       {
-        path: '',
-        component: () => import(/* webpackChunkName: "vaultview" */ '@/corp/Home.vue'),
-      }
+        name: 'Home',
+        path: '/home',
+        component: () => import(/* webpackChunkName: "home" */ '@/corp/Home.vue'),
+      },
+      {
+        name: 'HowItWorks',
+        path: '/home/how-it-works',
+        component: () => import(/* webpackChunkName: "howitworks" */ '@/corp/HowItWorks.vue'),
+      },
     ]
   },
   {
@@ -17,6 +23,7 @@ const routes = [
     component: () => import('@/layouts/chart/ChartLayout.vue'),
     children: [
       {
+        name: 'App',
         path: '/',
         // route level code-splitting
         // this generates a separate chunk (about.[hash].js) for this route
@@ -25,24 +32,24 @@ const routes = [
         component: () => import(/* webpackChunkName: "vaultview" */ '@/components/chart/ChartVault.vue'),
       },
       {
+        name: 'Order',
         path: '/order',
-        name: 'Edit',
         // route level code-splitting
         // this generates a separate chunk (about.[hash].js) for this route
         // which is lazy-loaded when the route is visited.
         component: () => import(/* webpackChunkName: "chartorder" */ '@/components/chart/ChartPlaceOrder.vue'),
       },
       {
-        path: '/assets',
         name: 'Assets',
+        path: '/assets',
         // route level code-splitting
         // this generates a separate chunk (about.[hash].js) for this route
         // which is lazy-loaded when the route is visited.
         component: () => import(/* webpackChunkName: "vaultview" */ '@/components/chart/ChartVault.vue'),
       },
       {
+        name: 'Status',
         path: '/status',
-        name: 'Orders',
         // route level code-splitting
         // this generates a separate chunk (about.[hash].js) for this route
         // which is lazy-loaded when the route is visited.
@@ -50,31 +57,31 @@ const routes = [
       },
 /*
       {
-        path: '/order',
         name: 'Create',
+        path: '/order',
         component: () => import(/!* webpackChunkName: "chartorder" *!/ '@/components/chart/ChartPlaceOrder.vue'),
       },
       {
-        path: '/twap',
         name: 'TWAP',
+        path: '/twap',
         // route level code-splitting
         // this generates a separate chunk (about.[hash].js) for this route
         // which is lazy-loaded when the route is visited.
         component: () => import(/!* webpackChunkName: "twap" *!/ '@/components/TimedOrder.vue'),
       },
       {
-        path: '/ladder',
         name: 'Ladder',
+        path: '/ladder',
         component: () => import(/!* webpackChunkName: "ladder" *!/ '@/components/LadderOrder.vue'),
       },
       {
-        path: '/diagonal',
         name: 'Diagonal',
+        path: '/diagonal',
         component: () => import(/!* webpackChunkName: "diagonal" *!/ '@/components/DiagonalOrder.vue'),
       },
       {
-        path: '/custom',
         name: 'Custom',
+        path: '/custom',
         component: () => import(/!* webpackChunkName: "custom" *!/ '@/components/CustomOrder.vue'),
       },
 */
diff --git a/src/styles/style.scss b/src/styles/style.scss
index ecd8780..3d590d3 100644
--- a/src/styles/style.scss
+++ b/src/styles/style.scss
@@ -1,6 +1,19 @@
-@use "/src/styles/vars" as v;
+@use "vars" as v;
 
 #app {
+
+  a {
+    $link_color: darken(v.$green, 10);
+    text-decoration: none;
+    color: $link_color;
+    &:visited {
+      color: $link_color;
+    }
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
   .logo {
     font-family: v.$heading-font-family;
     font-weight: 500;
@@ -39,6 +52,16 @@
     text-transform: none;
   }
 
+  .actions {
+    margin-top: 1em;
+    margin-bottom: 1em;
+
+    .v-btn {
+      margin-left: 1em;
+      margin-right: 1em;
+    }
+  }
+
   .v-card-title {
     font-family: v.$heading-font-family;
     //color: v.$blue;