diff --git a/assets/styles/app.scss b/assets/styles/app.scss
index 04d5399..219f4be 100644
--- a/assets/styles/app.scss
+++ b/assets/styles/app.scss
@@ -3,9 +3,8 @@
   flex-direction: column;
   min-height: 100vh;
 
-  @media print {
-    background: none;
-  }
+  background: linear-gradient(180deg, #181818 0%, #000000 100%);
+  background-attachment: fixed;
 
   > .main-content {
     flex: 1;
@@ -19,11 +18,6 @@
 @import 'components/step';
 @import 'components/header';
 
-html {
-  background: linear-gradient(180deg, #181818 0%, #000000 100%);
-  background-attachment: fixed;
-}
-
 .title {
   span {
     color: $primary;
diff --git a/assets/styles/components/_base.scss b/assets/styles/components/_base.scss
index 6a1f29f..c75729a 100644
--- a/assets/styles/components/_base.scss
+++ b/assets/styles/components/_base.scss
@@ -1,3 +1,8 @@
+$control-height: 2.438rem;
+$control-border-width: 1px;
+$control-padding-vertical: calc(0.375rem - #{$control-border-width});
+$control-padding-horizontal: calc(1.063rem - #{$control-border-width});
+
 $primary: #44F1A6;
 $primary-invert: #000000;
 
diff --git a/assets/styles/components/_button.scss b/assets/styles/components/_button.scss
index ca1897e..56babea 100644
--- a/assets/styles/components/_button.scss
+++ b/assets/styles/components/_button.scss
@@ -25,11 +25,11 @@
 
   .icon {
     &:first-child:not(:last-child) {
-      margin-left: -0.25em;
+      margin-left: -0.15em;
       margin-right: 0.5em; }
     &:last-child:not(:first-child) {
       margin-left: 0.5em;
-      margin-right: -0.25em; }
+      margin-right: -0.15em; }
     &:first-child:last-child {
       margin-left: 0;
       margin-right: 0; }
diff --git a/assets/styles/components/_header.scss b/assets/styles/components/_header.scss
index 236ef19..5636872 100644
--- a/assets/styles/components/_header.scss
+++ b/assets/styles/components/_header.scss
@@ -23,4 +23,8 @@
   .logo {
     height: 40px;
   }
+
+  .navbar-item {
+    font-size: 0.875rem
+  }
 }
diff --git a/assets/styles/components/_icons.scss b/assets/styles/components/_icons.scss
index 854fffc..8b2e1cb 100644
--- a/assets/styles/components/_icons.scss
+++ b/assets/styles/components/_icons.scss
@@ -18,4 +18,12 @@
   &-check {
     mask-image: url('../images/icons/check.svg');
   }
+
+  &-wallet {
+    mask-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 10C10.4477 10 10 10.4477 10 11C10 11.5523 10.4477 12 11 12H13C13.5523 12 14 11.5523 14 11C14 10.4477 13.5523 10 13 10H11Z' fill='%230E1633'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4 0C1.79083 0 0 1.79086 0 4V14C0 16.2091 1.79083 18 4 18H14C16.2092 18 18 16.2091 18 14V8C18 5.79086 16.2092 4 14 4H12C12 1.79086 10.2092 0 8 0H4ZM2 6V14C2 15.1046 2.89545 16 4 16H14C15.1046 16 16 15.1046 16 14V8C16 6.89543 15.1046 6 14 6H2ZM2 4C2 2.89543 2.89545 2 4 2H8C9.10455 2 10 2.89543 10 4H2Z' fill='%230E1633'/%3E%3C/svg%3E");
+  }
+
+  &-logout {
+    mask-image: url("data:image/svg+xml,%3Csvg width='19' height='18' viewBox='0 0 19 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 0C1.79083 0 0 1.79086 0 4V14C0 16.2091 1.79083 18 4 18H10C10.5523 18 11 17.5523 11 17C11 16.4477 10.5523 16 10 16H4C2.89545 16 2 15.1046 2 14V4C2 2.89543 2.89545 2 4 2H10C10.5523 2 11 1.55228 11 1C11 0.447716 10.5523 0 10 0H4Z' fill='%230E1633'/%3E%3Cpath d='M15.1213 5.70708C14.7308 5.31655 14.0976 5.31655 13.7071 5.70708C13.3165 6.0976 13.3165 6.73077 13.7071 7.12129L14.5858 7.99997H6C5.44769 7.99997 5 8.44769 5 8.99997C5 9.55225 5.44769 9.99997 6 9.99997H14.6406L13.707 10.9336C13.3165 11.3241 13.3165 11.9571 13.707 12.3476C14.0975 12.7381 14.7306 12.7381 15.1211 12.3476L17.7148 9.75388C17.9575 9.51125 18.0494 9.17508 17.9905 8.86153C17.9597 8.63882 17.8555 8.43955 17.7031 8.28889L15.1213 5.70708Z' fill='%230E1633'/%3E%3C/svg%3E%0A");
+  }
 }
diff --git a/assets/styles/components/_step.scss b/assets/styles/components/_step.scss
index bcf53b5..3dc8f4e 100644
--- a/assets/styles/components/_step.scss
+++ b/assets/styles/components/_step.scss
@@ -1,3 +1,7 @@
+.steps {
+  padding-top: 1.25rem;
+}
+
 .step {
   margin: 1.25rem 0;
   background: #1F1F1F;
@@ -7,6 +11,11 @@
   align-items: center;
   overflow: hidden;
 
+  &:first-child {
+    margin-top: 0;
+  }
+
+
   .diamond {
     margin-right: 1.25rem;
   }
diff --git a/components/Navbar.vue b/components/Navbar.vue
index 0659442..d6d31f3 100644
--- a/components/Navbar.vue
+++ b/components/Navbar.vue
@@ -5,6 +5,31 @@
         <Logo />
       </b-navbar-item>
     </template>
+    <template slot="start">
+      <b-navbar-item>Info</b-navbar-item>
+    </template>
+    <template slot="end">
+      <b-navbar-item tag="div">
+        <div class="buttons">
+          <b-button
+            v-if="isLoggedIn"
+            type="is-primary"
+            outlined
+            icon-left="logout"
+            @click="onLogOut"
+            >Logout</b-button
+          >
+          <b-button
+            v-else
+            type="is-primary"
+            outlined
+            icon-left="wallet"
+            @click="onLogIn"
+            >Connect</b-button
+          >
+        </div>
+      </b-navbar-item>
+    </template>
   </b-navbar>
 </template>
 
@@ -15,5 +40,14 @@ export default {
   components: {
     Logo,
   },
+  data() {
+    return {
+      isLoggedIn: false,
+    }
+  },
+  methods: {
+    onLogIn() {},
+    onLogOut() {},
+  },
 }
 </script>
diff --git a/components/Step.vue b/components/Step.vue
index 925168f..45e6289 100644
--- a/components/Step.vue
+++ b/components/Step.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="step">
-    <diamond :active="data.deployAddress" />
+    <diamond :active="!!data.deployAddress" />
     <div class="step-body">
       <h4>{{ data.title }}</h4>
       <div v-if="data.deployAddress" class="deployed">
diff --git a/components/Steps.vue b/components/Steps.vue
index 8eef6c4..a0ea084 100644
--- a/components/Steps.vue
+++ b/components/Steps.vue
@@ -20,6 +20,42 @@ export default {
             'Nor again is there anyone who loves or pursues or desires to obtain',
           deployAddress: '0xf7a526d8642f6c6cb98bcda9919209d3c1ce359e',
         },
+        { title: 'But I must explain to you how all this mistaken idea' },
+        {
+          title:
+            'Nor again is there anyone who loves or pursues or desires to obtain',
+          deployAddress: '0xf7a526d8642f6c6cb98bcda9919209d3c1ce359e',
+        },
+        { title: 'But I must explain to you how all this mistaken idea' },
+        {
+          title:
+            'Nor again is there anyone who loves or pursues or desires to obtain',
+          deployAddress: '0xf7a526d8642f6c6cb98bcda9919209d3c1ce359e',
+        },
+        { title: 'But I must explain to you how all this mistaken idea' },
+        {
+          title:
+            'Nor again is there anyone who loves or pursues or desires to obtain',
+          deployAddress: '0xf7a526d8642f6c6cb98bcda9919209d3c1ce359e',
+        },
+        { title: 'But I must explain to you how all this mistaken idea' },
+        {
+          title:
+            'Nor again is there anyone who loves or pursues or desires to obtain',
+          deployAddress: '0xf7a526d8642f6c6cb98bcda9919209d3c1ce359e',
+        },
+        { title: 'But I must explain to you how all this mistaken idea' },
+        {
+          title:
+            'Nor again is there anyone who loves or pursues or desires to obtain',
+          deployAddress: '0xf7a526d8642f6c6cb98bcda9919209d3c1ce359e',
+        },
+        { title: 'But I must explain to you how all this mistaken idea' },
+        {
+          title:
+            'Nor again is there anyone who loves or pursues or desires to obtain',
+          deployAddress: '0xf7a526d8642f6c6cb98bcda9919209d3c1ce359e',
+        },
       ],
     }
   },
diff --git a/pages/index.vue b/pages/index.vue
index e0a9766..ae582e8 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -7,14 +7,21 @@
     </h2>
 
     <div class="buttons is-centered">
-      <b-button type="is-primary" outlined icon-left="tool">Start now</b-button>
+      <b-button
+        type="is-primary"
+        outlined
+        icon-left="tool"
+        @mousedown="(e) => e.preventDefault()"
+        @click="onStart"
+        >Start now</b-button
+      >
     </div>
 
     <h3 class="title is-14px mt-6">Completed Tasks: <span>5/16</span></h3>
 
     <div class="tornado-discoverer image is-16by9"></div>
 
-    <steps />
+    <steps ref="steps" />
   </div>
 </template>
 
@@ -25,5 +32,17 @@ export default {
   components: {
     Steps,
   },
+  methods: {
+    scrollTo(element) {
+      window.scrollTo({
+        behavior: 'smooth',
+        left: 0,
+        top: element.getBoundingClientRect().top,
+      })
+    },
+    onStart() {
+      this.scrollTo(this.$refs.steps.$el)
+    },
+  },
 }
 </script>