diff --git a/.vuepress/components/Hook.vue b/.vuepress/components/Hook.vue
index ad3380f..bdb682c 100644
--- a/.vuepress/components/Hook.vue
+++ b/.vuepress/components/Hook.vue
@@ -1,25 +1,25 @@
 <template>
-  <v-container fluid grid-list-md text-xs-center id="hook">
-    <v-layout row wrap id="hook-navigation">
-      <v-flex xs4>
+  <div id="hook">
+    <div id="hook-navigation">
+      <div class="step">
         <a href="#" v-on:click="activeStep = 1" v-bind:class="{active: (activeStep==1)}">
-          <v-btn color="grey lighten-1" fab>1</v-btn>
+          <span class="number">1</span>
           Resolve a claim
         </a>
-      </v-flex>
-      <v-flex xs4>
+      </div>
+      <div class="step">
         <a href="#" v-on:click="activeStep = 2" v-bind:class="{active: (activeStep==2)}">
-          <v-btn color="grey lighten-1" fab>2</v-btn>
+          <span class="number">2</span>
           Publish content
         </a>
-      </v-flex>
-      <v-flex xs4>
+      </div>
+      <div class="step">
         <a href="#" v-on:click="activeStep = 3" v-bind:class="{active: (activeStep==3)}">
-          <v-btn color="grey lighten-1" fab>3</v-btn>
+          <span class="number">3</span>
           Support with LBC
         </a>
-      </v-flex>
-    </v-layout>
+      </div>
+    </div>
     <Step1 v-if="activeStep == 1"></Step1>
     <Step2 v-if="activeStep == 2"></Step2>
     <Step3 v-if="activeStep == 3"></Step3>
@@ -38,7 +38,7 @@
         </template>
       </v-card>
     </v-dialog>
-  </v-container>
+  </div>
 </template>
 
 <script>
@@ -81,7 +81,7 @@ export default {
     });
   },
   name: 'Hook'
-}
+};
 </script>
 
 <style lang="scss">
@@ -99,17 +99,50 @@ export default {
   background: url(https://lbry.io/img/youtube/hero@2x.jpg) no-repeat center center;
   background-size: cover;
   color: $text-color;
-  .display-2,
-  .subheading {
+  text-align: center;
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  p {
     color: white;
     text-shadow: 0px 0px 1rem rgba(0,0,0,0.5);
     a {
       color: white;
     }
   }
+  input[type='text'] {
+    background: white;
+    padding: 0.5rem 0.5rem;
+  }
+  pre {
+    text-align: left;
+  }
   .flex {
     margin-bottom: 2rem;
   }
+  .loader {
+    border: 16px solid #f3f3f3; /* Light grey */
+    border-top: 16px solid #3498db; /* Blue */
+    border-radius: 50%;
+    width: 120px;
+    height: 120px;
+    animation: spin 2s linear infinite;
+  }
+  .card {
+    width: 20%;
+    display: inline-block;
+    vertical-align: top;
+    background: white;
+    box-shadow: 0 0 5px 5px rgba(0,0,0,0.2);
+    margin: 0 2.5%;
+    img {
+      width: 100%;
+      height: 6rem;
+      object-fit: cover;
+    }
+  }
 }
 
 #hook-navigation {
@@ -127,4 +160,9 @@ export default {
   }
 }
 
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
 </style>
diff --git a/.vuepress/components/Step1.vue b/.vuepress/components/Step1.vue
index 58da57d..9380c2e 100644
--- a/.vuepress/components/Step1.vue
+++ b/.vuepress/components/Step1.vue
@@ -1,82 +1,60 @@
 <template>
-  <v-container fluid id="step1-page">
-    <v-layout row wrap>
-      <v-flex xs12>
-        <h1 class="display-2">Learn the LBRY protocol by examples</h1>
-        <p class="subheading">Let's start by getting the associated metadata for <a href="#">a claim</a>.</p>
-      </v-flex>
-      <v-flex xs12 sm10>
-        <v-text-field v-model="address" solo dark prefix="lbry://"></v-text-field>
-      </v-flex>
-      <v-flex xs12 sm2>
-        <v-btn large v-on:click="fetchMetadata" class="mt-0">Execute</v-btn>
-      </v-flex>
-      <v-flex xs12 v-if="exampleCode != ''">
-        <pre v-highlightjs="exampleCode"><code class="bash"></code></pre>
-      </v-flex>
-      <v-flex xs12 v-if="isLoading">
-        <v-progress-circular indeterminate color="white"></v-progress-circular>
-      </v-flex>
-      <v-flex xs12 v-if="jsonData">
-        <p class="subheading">Success! Here is the response for <strong>lbry://{{ address }}</strong>:</p>
-        <pre v-highlightjs="jsonData" class="json-example"><code class="json"></code></pre>
-        <v-btn large v-on:click="goTo(2)" class="mt-3">Go to next step</v-btn>
-      </v-flex>
-      <template v-if="!isLoading && !jsonData">
-        <v-flex xs12>
-          <p class="subheading">... or select a live example from below</p>
-        </v-flex>
-        <v-flex xs12 sm3>
-          <v-card hover>
-            <v-card-media src="https://spee.ch/0654f2e2322ccfefa02a956d252df9ac7611d8b0/placeholder-itsadisaster.jpeg" height="200px" v-on:click="chooseClaim('itsadisaster')">
-            </v-card-media>
-            <v-card-title v-on:click="chooseClaim('itsadisaster')">
-              <div>
-                <h4 class="mb-0">It's a Disaster</h4>
-                <div class="account">Anonymous</div>
-              </div>
-            </v-card-title>
-          </v-card>
-        </v-flex>
-        <v-flex xs12 sm3>
-          <v-card hover>
-            <v-card-media src="https://spee.ch/b1bd330e048fc22dc7bf941c33dd8245eef492c1/unbubbled.png" height="200px" v-on:click="chooseClaim('unbubbled1-1')">
-            </v-card-media>
-            <v-card-title v-on:click="chooseClaim('unbubbled1-1')">
-              <div>
-                <h4 class="mb-0">Unbubbled with Jamie King, Ep1.1 - Bitcoin, Boom or Bust</h4>
-                <div class="account">@Unbubbled</div>
-              </div>
-            </v-card-title>
-          </v-card>
-        </v-flex>
-        <v-flex xs12 sm3>
-          <v-card hover>
-            <v-card-media src="https://spee.ch/9880947df41af880bc19724ceddd1cce957a07e2/placeholder-fortninte.jpeg" height="200px" v-on:click="chooseClaim('fortnite-top-stream-moments-nickatnyte')">
-            </v-card-media>
-            <v-card-title v-on:click="chooseClaim('fortnite-top-stream-moments-nickatnyte')">
-              <div>
-                <h4 class="mb-0">FORTNITE TOP STREAM MOMENTS - Nickatnyte & GamingwithMolt</h4>
-                <div class="account">@nickatnyte</div>
-              </div>
-            </v-card-title>
-          </v-card>
-        </v-flex>
-        <v-flex xs12 sm3>
-          <v-card hover>
-            <v-card-media src="https://spee.ch/a3b8258478ad88954f42f6ac3427eab380720f60/placeholder-lbrymine.png" height="200px" v-on:click="chooseClaim('six')">
-            </v-card-media>
-            <v-card-title v-on:click="chooseClaim('six')">
-              <div>
-                <h4 class="mb-0">LBRY Coin (LBC) GPU Miner for AMD and NVIDIA</h4>
-                <div class="account">Anonymous</div>
-              </div>
-            </v-card-title>
-          </v-card>
-        </v-flex>
-      </template>
-    </v-layout>
-  </v-container>
+  <div id="step1-page">
+    <div class="xs12">
+      <h1>Learn the LBRY protocol by examples</h1>
+      <p>Let's start by getting the associated metadata for <a href="#">a claim</a>.</p>
+    </div>
+    <div class="xs12 sm10">
+      <input type="text" v-model="address" prefix="lbry://" />
+    </div>
+    <div class="xs12 sm2">
+      <a href="#" class="__button-black" v-on:click="fetchMetadata">Execute</a>
+    </div>
+    <div class="xs12" v-if="exampleCode != ''">
+      <pre v-highlightjs="exampleCode"><code class="bash"></code></pre>
+    </div>
+    <div class="xs12" v-if="isLoading">
+      <div class="loader"></div>
+    </div>
+    <div class="xs12" v-if="jsonData">
+      <p>Success! Here is the response for <strong>lbry://{{ address }}</strong>:</p>
+      <pre v-highlightjs="jsonData" class="json-example"><code class="json"></code></pre>
+      <a href="#" class="__button-black" v-on:click="goTo(2)">Go to next step</a>
+    </div>
+    <template v-if="!isLoading && !jsonData">
+      <div class="xs12">
+        <p>... or select a live example from below</p>
+      </div>
+      <div class="card">
+        <img src="https://spee.ch/0654f2e2322ccfefa02a956d252df9ac7611d8b0/placeholder-itsadisaster.jpeg" v-on:click="chooseClaim('itsadisaster')">
+        <div v-on:click="chooseClaim('itsadisaster')">
+          <h4>It's a Disaster</h4>
+          <div class="account">Anonymous</div>
+        </div>
+      </div>
+      <div class="card">
+        <img src="https://spee.ch/b1bd330e048fc22dc7bf941c33dd8245eef492c1/unbubbled.png" v-on:click="chooseClaim('unbubbled1-1')">
+        <div v-on:click="chooseClaim('unbubbled1-1')">
+          <h4>Unbubbled with Jamie King, Ep1.1 - Bitcoin, Boom or Bust</h4>
+          <div class="account">@Unbubbled</div>
+        </div>
+      </div>
+      <div class="card">
+        <img src="https://spee.ch/9880947df41af880bc19724ceddd1cce957a07e2/placeholder-fortninte.jpeg" v-on:click="chooseClaim('fortnite-top-stream-moments-nickatnyte')">
+        <div v-on:click="chooseClaim('fortnite-top-stream-moments-nickatnyte')">
+          <h4>FORTNITE TOP STREAM MOMENTS - Nickatnyte & GamingwithMolt</h4>
+          <div class="account">@nickatnyte</div>
+        </div>
+      </div>
+      <div class="card">
+        <img src="https://spee.ch/a3b8258478ad88954f42f6ac3427eab380720f60/placeholder-lbrymine.png" v-on:click="chooseClaim('six')">
+        <div v-on:click="chooseClaim('six')">
+          <h4>LBRY Coin (LBC) GPU Miner for AMD and NVIDIA</h4>
+          <div class="account">Anonymous</div>
+        </div>
+      </div>
+    </template>
+  </div>
 </template>
 
 <script>
@@ -112,7 +90,7 @@ export default {
     }
   },
   name: 'Step1'
-}
+};
 </script>
 
 <style lang="scss">
diff --git a/.vuepress/scss/init/_base.scss b/.vuepress/scss/init/_base.scss
index 732d713..c3b3886 100644
--- a/.vuepress/scss/init/_base.scss
+++ b/.vuepress/scss/init/_base.scss
@@ -97,7 +97,7 @@ iframe {
 
 img {
   font-size: 0;
-
+  max-width: 100%;
   &::after {
     width: 100%; height: 100%;
     top: -100%; left: 0;
diff --git a/hook.md b/hook.md
new file mode 100644
index 0000000..c02b22f
--- /dev/null
+++ b/hook.md
@@ -0,0 +1,5 @@
+---
+title: Hook Demo
+---
+
+<Hook></Hook>