diff --git a/content/.vuepress/components/Ecosystem.vue b/content/.vuepress/components/Ecosystem.vue
index 9d42192..537221d 100644
--- a/content/.vuepress/components/Ecosystem.vue
+++ b/content/.vuepress/components/Ecosystem.vue
@@ -1,5 +1,4 @@
 <template>
-
   <section class="ecosystem">
     <aside class="ecosystem__submodules">
       <div class="ecosystem__submodule chainquery">
@@ -224,7 +223,6 @@
       </div>
     </aside>
   </section>
-
 </template>
 
 <script>
diff --git a/content/.vuepress/components/EditLink.vue b/content/.vuepress/components/EditLink.vue
index 9c9ba19..802252f 100644
--- a/content/.vuepress/components/EditLink.vue
+++ b/content/.vuepress/components/EditLink.vue
@@ -3,32 +3,34 @@
 </template>
 
 <script>
-export default {
-  props: ['path'],
-  data () {
-    return {
-      githubUrl: ''
-    }
-  },
-  name: 'EditLink',
-  methods: {
-    updateUrl () {
-      this.githubUrl = 'https://github.com/'+ this.$site.themeConfig.repo + '/edit/' + this.$site.themeConfig.docsBranch;
+  export default {
+    props: ["path"],
 
-      if(this.$page.path == '/') {
-        this.githubUrl = this.githubUrl + '/README.md';
-      } else {
-        this.githubUrl = this.githubUrl + this.$page.path.replace('.html', '.md');
+    data () {
+      return {
+        githubUrl: ""
       }
-    }
-  },
-  created () {
-    this.updateUrl();
-  },
-  watch: {
-    path () {
+    },
+
+    methods: {
+      updateUrl () {
+        this.githubUrl = `https://github.com/${this.$site.themeConfig.repo}/edit/${this.$site.themeConfig.docsBranch}`;
+
+        if (this.$page.path === "/") this.githubUrl = `${this.githubUrl}/README.md`;
+        else this.githubUrl = `${this.githubUrl}${this.$page.path.replace(".html", ".md")}`;
+      }
+    },
+
+    created () {
       this.updateUrl();
-    }
+    },
+
+    watch: {
+      path () {
+        this.updateUrl();
+      }
+    },
+
+    name: "EditLink"
   }
-}
 </script>
diff --git a/content/.vuepress/components/EmailSubscribe.vue b/content/.vuepress/components/EmailSubscribe.vue
index ca23876..59250e3 100644
--- a/content/.vuepress/components/EmailSubscribe.vue
+++ b/content/.vuepress/components/EmailSubscribe.vue
@@ -1,51 +1,56 @@
 <template>
   <div id="email-subscribe" class="newsletter-cta">
     <h3 class="newsletter-cta__title">Don't Miss A Bit - Subscribe For LBRY Technical Updates</h3>
+
     <div>
       <input type="text" class="newsletter-cta__input" v-model="emailAddress" placeholder="you@domain.tld">
       <a class="newsletter-cta__submit" href="#" v-on:click.prevent="subscribe" title="Subscribe to our technical newsletter">Subscribe</a>
     </div>
+
     <p v-if="message" class="newsletter-cta__message">{{ message }}</p>
   </div>
 </template>
 
 <script>
-export default {
-  data () {
-    return {
-      emailAddress: '',
-      message: ''
-    }
-  },
-  name: 'EmailSubscribe',
-  methods: {
-    subscribe () {
-      var component = this;
-      this.message = '';
-      if(!this.validateEmail(this.emailAddress)) {
-        this.message = 'Your email is not valid!';
-      } else {
-        this.$http.post('//api.lbry.io/list/subscribe', {
-          email: this.emailAddress,
-          tag: 'developer'
-        }, {
-          emulateJSON: true
-        }).then(function(response) {
-          component.email = '';
-          component.message = 'Thank you for subscribing!';
-        }, function(response) {
-          if(response.status == 409) {
-            component.message = 'You have already subscribed to our mailing list!';
-          }
-        });
+  export default {
+    data () {
+      return {
+        emailAddress: "",
+        message: ""
       }
     },
-    validateEmail (email) {
-      var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
-      return re.test(String(email).toLowerCase());
-    }
-  }
-};
+
+    methods: {
+      subscribe () {
+        let component = this;
+        component.message = "";
+
+        if (!component.validateEmail(component.emailAddress)) {
+          component.message = "Your email is not valid!";
+          return;
+        }
+
+        component.$http.post("//api.lbry.io/list/subscribe", {
+          email: component.emailAddress,
+          tag: "developer"
+        }, {
+          emulateJSON: true
+        }).then(response => {
+          component.email = "";
+          component.message = "Thank you for subscribing!";
+        }, response => {
+          if (response.status === 409) component.message = "You have already subscribed to our mailing list!";
+        });
+      },
+
+      validateEmail (email) {
+        const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+        return re.test(String(email).toLowerCase());
+      }
+    },
+
+    name: "EmailSubscribe"
+  };
 </script>
 
 <style lang="scss">
diff --git a/content/.vuepress/components/EmailSubscribeLarge.vue b/content/.vuepress/components/EmailSubscribeLarge.vue
index 32c095e..2f1ce47 100644
--- a/content/.vuepress/components/EmailSubscribeLarge.vue
+++ b/content/.vuepress/components/EmailSubscribeLarge.vue
@@ -1,72 +1,104 @@
 <template>
-  <div id="email-subscribe-large">
-    <input type="text" class="input" v-model="emailAddress" placeholder="your@email.com">
-    <br/>
-    <br/>
-    <a class="__button-black" href="#" v-on:click.prevent="subscribe" title="Subscribe to our technical newsletter">Subscribe</a>
-    <p v-if="message" class="message">{{ message }}</p>
+  <div id="email-subscribe-large" class="newsletter-standalone">
+    <input type="text" class="newsletter-standalone__input" v-model="emailAddress" placeholder="your@domain.tld"/><br/>
+    <a class="newsletter-standalone__submit" href="#" v-on:click.prevent="subscribe" title="Subscribe to our technical newsletter">Subscribe</a><br/>
+
+    <p v-if="message" class="newsletter-standalone__message">{{ message }}</p>
   </div>
 </template>
 
 <script>
-export default {
-  data () {
-    return {
-      emailAddress: '',
-      message: ''
-    }
-  },
-  name: 'EmailSubscribe',
-  methods: {
-    subscribe () {
-      var component = this;
-      this.message = '';
-      if(!this.validateEmail(this.emailAddress)) {
-        this.message = 'Your email is not valid!';
-      } else {
-        this.$http.post('//api.lbry.io/list/subscribe', {
-          email: this.emailAddress,
-          tag: 'developer'
-        }, {
-          emulateJSON: true
-        }).then(function(response) {
-          component.email = '';
-          component.message = 'Thank you for subscribing!';
-        }, function(response) {
-          if(response.status == 409) {
-            component.message = 'You have already subscribed to our mailing list!';
-          }
-        });
+  export default {
+    data () {
+      return {
+        emailAddress: "",
+        message: ""
       }
     },
-    validateEmail (email) {
-      var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
-      return re.test(String(email).toLowerCase());
-    }
-  }
-};
+
+    methods: {
+      subscribe () {
+        let component = this;
+        component.message = "";
+
+        if (!component.validateEmail(component.emailAddress)) {
+          component.message = "Your email is not valid!";
+          return;
+        }
+
+        component.$http.post("//api.lbry.io/list/subscribe", {
+          email: component.emailAddress,
+          tag: "developer"
+        }, {
+          emulateJSON: true
+        }).then(response => {
+          component.email = "";
+          component.message = "Thank you for subscribing!";
+        }, response => {
+          if (response.status === 409) component.message = "You have already subscribed to our mailing list!";
+        });
+      },
+
+      validateEmail (email) {
+        const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+        return re.test(String(email).toLowerCase());
+      }
+    },
+
+    name: "EmailSubscribe"
+  };
 </script>
 
 <style lang="scss">
+  @import "../scss/init/colors";
+  @import "../scss/init/extends";
+  @import "../scss/init/mixins";
 
-#email-subscribe-large {
-  .title {
-    margin-bottom: 0.5rem;
+  .newsletter-standalone__input,
+  .newsletter-standalone__submit {
+    @extend .__button-padding-horizontal;
+    border-style: solid;
+    border-width: 1px;
   }
-  .input {
-    border: 1px solid black;
-    padding: 0.65rem;
-    background: white;
-    margin-right: 1rem;
-    width: 18rem;
-    font-size: 1.1rem;
-  }
-  .__button-black {
-    font-size: 1.1rem;
-  }
-  .message {
-    margin-top: 1rem;
-  }
-}
 
+  .newsletter-standalone__input {
+    background-color: $white;
+    font-size: 1rem;
+    height: 38px;
+    margin-bottom: 0.25rem;
+    transition: border 0.2s;
+
+    @media (min-width: 601px) {
+      width: 500px;
+    }
+
+    @media (max-width: 600px) {
+      width: 100%;
+    }
+
+    &:not(:focus) {
+      border-color: $black;
+    }
+
+    &:focus {
+      border-color: mix($black, $teal, 20%);
+    }
+  }
+
+  .newsletter-standalone__submit {
+    @extend .__button-basic;
+    @extend .__button-padding-vertical;
+    color: $white;
+    display: inline-block;
+
+    &:not(:hover) {
+      background-color: $black;
+      border-color: $black;
+    }
+
+    &:hover {
+      background-color: $teal;
+      border-color: mix($black, $teal, 20%);
+    }
+  }
 </style>
diff --git a/content/.vuepress/components/FeatureLinks.vue b/content/.vuepress/components/FeatureLinks.vue
index 8fa078d..fc62fbe 100644
--- a/content/.vuepress/components/FeatureLinks.vue
+++ b/content/.vuepress/components/FeatureLinks.vue
@@ -1,5 +1,4 @@
 <template>
-
   <ul class="feature-links">
     <li v-for="featureLink in this.$page.frontmatter.featureLinks" v-on:click="visit(featureLink.href)" class="feature-link">
       <div>
@@ -12,16 +11,14 @@
       </figure>
     </li>
   </ul>
-
 </template>
 
-
-
 <script>
   export default {
     data () {
       return {}
     },
+
     methods: {
       visit (slug) {
         window.open(slug, "_blank");
diff --git a/content/.vuepress/components/GithubFeed.vue b/content/.vuepress/components/GithubFeed.vue
index c6d4b5d..9ea0f05 100644
--- a/content/.vuepress/components/GithubFeed.vue
+++ b/content/.vuepress/components/GithubFeed.vue
@@ -73,77 +73,80 @@
 </template>
 
 <script>
-export default {
-  data () {
-    return {
-      events: [],
-      updateInterval: {},
-      lastUpdated: new Date()
-    }
-  },
-  name: 'GithubFeed',
-  mounted () {
-
-    this.updateFeed();
-
-    this.updateInterval = setInterval(this.updateFeed, 60*1000);
-
-  },
-  methods: {
-    updateFeed () {
-
-      var component = this;
-
-      component.$http.get('https://lbry.tech/github-feed').then(function(response) {
-        component.events = response.body;
-      });
-
-      component.lastUpdated = new Date();
-
-    },
-    refToBranch (ref) {
-
-      return ref.replace('refs/heads/','');
-
-    },
-    formatDate (date) {
-
-      return date.toLocaleString('en-US');
-
-    },
-    generateGithubUrl (type, event) {
-
-      switch(type) {
-        case 'actor':
-          return 'https://github.com/' + event.actor.display_login;
-        break;
-        case 'comment':
-          return event.payload.comment.html_url;
-        break;
-        case 'repo':
-          return 'https://github.com/' + event.repo.name;
-        break;
-        case 'forkee':
-          return 'https://github.com/' + event.payload.forkee.full_name;
-        break;
-        case 'issue':
-          return event.payload.issue.html_url;
-        break;
-        case 'pull_request':
-          return event.payload.pull_request.html_url;
-        break;
-        case 'release':
-          return event.payload.release.html_url;
-        break;
-        case 'push':
-          return 'https://github.com/' + event.repo.name + '/tree/' + event.payload.ref.replace('refs/heads/','');
-        break;
-
+  export default {
+    data () {
+      return {
+        events: [],
+        updateInterval: {},
+        lastUpdated: new Date()
       }
+    },
 
-    }
-  }
-};
+    mounted () {
+      this.updateFeed();
+      this.updateInterval = setInterval(this.updateFeed, 60*1000);
+    },
+
+    methods: {
+      updateFeed () {
+        const component = this;
+
+        component.$http.get("https://lbry.tech/github-feed").then(response => {
+          component.events = response.body;
+        }).catch(error => {
+          console.log("Unable to display GitHub feed:\n", error);
+        });
+
+        component.lastUpdated = new Date();
+      },
+
+      refToBranch (ref) {
+        return ref.replace("refs/heads/", "");
+      },
+
+      formatDate (date) {
+        return date.toLocaleString("en-US");
+      },
+
+      generateGithubUrl (type, event) {
+        switch (type) {
+          case "actor":
+            return `https://github.com/${event.actor.display_login}`;
+            break;
+
+          case "comment":
+            return event.payload.comment.html_url;
+            break;
+
+          case "repo":
+            return `https://github.com/${event.repo.name}`;
+            break;
+
+          case "forkee":
+            return `https://github.com/${event.payload.forkee.full_name}`;
+            break;
+
+          case "issue":
+            return event.payload.issue.html_url;
+            break;
+
+          case "pull_request":
+            return event.payload.pull_request.html_url;
+            break;
+
+          case "release":
+            return event.payload.release.html_url;
+            break;
+
+          case "push":
+            return `https://github.com/${event.repo.name}/tree/${event.payload.ref.replace("refs/heads/", "")}`;
+            break;
+        }
+      }
+    },
+
+    name: "GithubFeed"
+  };
 </script>
 
 <style lang="scss">
diff --git a/content/.vuepress/components/Hook.vue b/content/.vuepress/components/Hook.vue
index f16e926..ca5b878 100644
--- a/content/.vuepress/components/Hook.vue
+++ b/content/.vuepress/components/Hook.vue
@@ -23,59 +23,64 @@
     <Step2 v-if="activeStep == 2"></Step2>
     <Step3 v-if="activeStep == 3"></Step3>
 
-    <div class="modal" v-model="uploadDialog" v-if="uploadDialog != false">
-      <template v-if="confirmed">
-        <h3>Your image has been published!</h3>
-        <p><a v-bind:href="'https://explorer.lbry.io/tx/' + txhash" target="_blank" rel="noopener noreferrer">Check out your content on the LBRY blockchain explorer</a></p>
-        <a href="#" class="__button-black" v-on:click="uploadDialog = false">Dismiss this dialog</a>
-      </template>
+    <aside class="modal" v-model="uploadDialog" v-if="uploadDialog !== false">
+      <div class="modal-wrap">
+        <template v-if="confirmed">
+          <h3>Your image has been published!</h3>
+          <p>Check out your content on <a v-bind:href="`https://explorer.lbry.io/tx/${txhash}`" target="_blank" rel="noopener noreferrer">the LBRY blockchain explorer</a>.</p>
+          <a href="#" class="__button-black" style="display: inline-block;" v-on:click.prevent="uploadDialog = false">Dismiss this dialog</a>
+        </template>
 
-      <template v-else>
-        <h3><div class="loader small"></div>&nbsp;Waiting for confirmation...</h3>
-        <p>Your image was uploaded to the LBRY network but we are currently waiting for the first confirmation. This should take just a few minutes. In the meantime, go ahead and try the other steps!</p>
-      </template>
-    </div>
+        <template v-else>
+          <h3><span class="loader tiny" style="display: inline-block;"></span>&nbsp;Waiting for confirmation...</h3>
+          <p>Your image was uploaded to the LBRY network but we are currently waiting for the first confirmation. This should take just a few minutes. In the meantime, go ahead and try the other steps!</p>
+        </template>
+      </div>
+    </aside>
   </div>
 </template>
 
 <script>
+  import EventBus from "../event-bus";
+  import Vue from "vue";
 
-import Vue from 'vue'
-
-import EventBus from '../event-bus';
-
-export default {
-  data () {
-    return {
-      uploadDialog: false,
-      txhash: '',
-      confirmed: false,
-      activeStep: 1
-    }
-  },
-  watch: {
-    uploadDialog: function() {
-      var component = this;
-      if(this.uploadDialog) {
-        // Simulate confirmation
-        setTimeout(function() {
-          component.confirmed = true;
-        }, 10000)
+  export default {
+    data () {
+      return {
+        activeStep: 1,
+        confirmed: false,
+        txhash: "",
+        uploadDialog: false
       }
-    }
-  },
-  created () {
-    var component = this;
-    EventBus.$on('HookFileUploaded', function(txhash) {
-      component.txhash = txhash;
-      component.uploadDialog = true;
-    });
-    EventBus.$on('HookStepUpdate', function(step) {
-      component.activeStep = step;
-    });
-  },
-  name: 'Hook'
-};
+    },
+
+    watch: {
+      uploadDialog: function () {
+        const component = this;
+
+        if (this.uploadDialog) {
+          setTimeout(() => {
+            component.confirmed = true; // Simulate confirmation
+          }, 10000);
+        }
+      }
+    },
+
+    created () {
+      const component = this;
+
+      EventBus.$on("HookFileUploaded", txhash => {
+        component.txhash = txhash;
+        component.uploadDialog = true;
+      });
+
+      EventBus.$on("HookStepUpdate", step => {
+        component.activeStep = step;
+      });
+    },
+
+    name: "Hook"
+  };
 </script>
 
 <style lang="scss">
@@ -84,6 +89,397 @@ export default {
   @import "../scss/init/extends";
   @import "../scss/init/mixins";
   @import "../scss/partials/animation";
+  @import "../scss/partials/modal";
   @import "../scss/pages/page";
-  @import "../scss/pages/hook";
+
+  .hook {
+    .loader {
+      animation: spin 2s linear infinite;
+      border-radius: 50%;
+      border-style: solid;
+      border-top-color: $teal;
+
+      &:not(.small):not(.tiny) {
+        width: 4rem; height: 4rem;
+
+        border-width: 6px;
+        margin-right: auto;
+        margin-left: auto;
+      }
+
+      &.small {
+        width: 2rem; height: 2rem;
+        border-width: 3px;
+      }
+
+      &.tiny {
+        width: 1rem; height: 1rem;
+        border-width: 2px;
+      }
+    }
+  }
+
+
+
+  .hook__navigation {
+    background-color: $black;
+    color: $white;
+    font-size: 1rem;
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+    text-align: center;
+  }
+
+  .hook__navigation__step {
+    @media (min-width: 501px) {
+      display: inline-block;
+
+      &:not(:last-of-type) {
+        margin-right: 1rem;
+      }
+
+      span {
+        width: 3rem; height: 3rem;
+
+        display: block;
+        font-size: 1.25rem;
+        line-height: 3rem;
+      }
+    }
+
+    @media (max-width: 500px) {
+      display: block;
+
+      span {
+        width: 1rem; height: 1rem;
+
+        display: inline-block;
+        font-size: 0.7rem;
+        line-height: 0.9rem;
+        position: relative;
+        top: 2px;
+        vertical-align: top;
+      }
+    }
+
+    &:not(.active) {
+      span {
+        border-color: rgba($white, 0.1);
+      }
+    }
+
+    &.active {
+      color: $teal;
+
+      span {
+        border-color: rgba($teal, 0.3);
+      }
+    }
+
+    span {
+      border: 1px solid;
+      border-radius: 50%;
+      margin: 0 auto 0.5rem;
+    }
+  }
+
+
+
+  .hook__page {
+    @extend .page__content;
+  }
+
+  .hook__page__hero {
+    margin-bottom: 2rem;
+    border-bottom: 1px solid rgba($black, 0.05);
+
+    h1, p {
+      text-align: center;
+    }
+  }
+
+  .hook__page__hero__claim,
+  .hook__page__hero__support {
+    margin-bottom: 3rem; padding-left: 1rem;
+
+    background-color: $white;
+    border: 1px solid rgba($gray, 0.7);
+    font-size: 1rem;
+
+    @media (min-width: 501px) {
+      margin-right: auto;
+      margin-left: auto;
+      width: 80%;
+    }
+
+    &::after {
+      @include clearfix;
+    }
+
+    input, a {
+      line-height: 3rem;
+    }
+
+    span {
+      color: rgba($black, 0.3);
+    }
+
+    a {
+      border-left: 1px solid rgba($gray, 0.7);
+      color: $white;
+      float: right;
+      position: relative;
+      text-align: center;
+      transition: all 0.2s;
+      width: 6rem;
+
+      &::after {
+        width: calc(100% + 2px); height: calc(100% + 2px);
+        top: -1px; left: -1px;
+
+        border: 1px solid;
+        content: "";
+        position: absolute;
+        transition: inherit;
+      }
+
+      &:not(:hover) {
+        background-color: $black;
+
+        &::after {
+          border-color: $black;
+        }
+      }
+
+      &:hover {
+        background-color: $teal;
+
+        &::after {
+          border-color: $teal;
+        }
+      }
+    }
+  }
+
+  .hook__page__hero__claim input {
+    width: calc(100% - 10rem);
+  }
+
+  .hook__page__hero__support {
+    input[type=number] {
+      width: 3rem;
+    }
+
+    input[type=text] {
+      width: calc(100% - 11.5rem);
+    }
+
+    span {
+      line-height: 3rem;
+    }
+
+    a {
+      margin-left: 0.5rem;
+    }
+  }
+
+
+
+  .hook__page__content::after {
+    @include clearfix;
+  }
+
+  .hook__page__content__card {
+    margin-bottom: 1rem; padding: 1rem;
+    cursor: pointer;
+
+    img {
+      margin-bottom: 0.5rem;
+    }
+
+    @media (min-width: 501px) {
+      float: left;
+      vertical-align: top;
+      width: 50%;
+    }
+
+    @media (max-width: 500px) {
+      width: 100%;
+    }
+  }
+
+  .hook__page__content__meme {
+    margin-bottom: 2rem;
+    padding-right: 1rem;
+    padding-left: 1rem;
+
+    @media (min-width: 701px) {
+      width: 50%;
+    }
+
+    @media (max-width: 700px) {
+      width: 100%;
+    }
+
+    canvas {
+      width: 100%; height: 100%;
+
+      background-color: rgba($teal, 0.3);
+      margin-bottom: 1rem;
+    }
+
+    h2.__metadata {
+      margin-top: 3rem;
+    }
+
+    fieldset {
+      border: none;
+
+      &:not(:last-of-type) {
+        margin-bottom: 1rem;
+      }
+    }
+
+    label {
+      color: rgba($black, 0.3);
+      display: block;
+      font-size: 0.8rem;
+      font-weight: 600;
+      letter-spacing: 0.05rem;
+      margin-bottom: 0.025rem;
+      text-transform: uppercase;
+      width: 100%;
+    }
+
+    input:not([type="checkbox"]):not([type="submit"]),
+    select,
+    textarea {
+      @media (min-width: 901px) {
+        font-size: 1.25rem;
+      }
+
+      @media (max-width: 900px) {
+        font-size: 1.05rem;
+      }
+    }
+
+    input {
+      &:not([type="checkbox"]):not([type="file"]):not([type="submit"]) {
+        border-bottom: 2px solid;
+        padding-bottom: 0.15rem;
+        transition: all 0.2s;
+        width: 100%;
+      }
+
+      &:not([type="file"]):not([type="submit"]) {
+        &:not(:hover):not(:active) {
+          border-color: $black;
+        }
+
+        &:hover,
+        &:active {
+          border-color: $teal;
+        }
+      }
+
+      &[type="checkbox"] {
+        width: 1.25rem; height: 1.25rem;
+
+        border: 2px solid;
+        margin-right: 0.5rem;
+        position: relative;
+        top: 0.35rem;
+
+        &::after {
+          width: 100%; height: 100%;
+
+          content: "✓";
+          font-size: 1.5rem;
+          line-height: 1rem;
+          position: absolute;
+        }
+
+        &:not(:checked)::after {
+          color: transparent;
+        }
+
+        &:checked::after {
+          color: $teal;
+        }
+      }
+    }
+
+    select,
+    textarea {
+      border-bottom: 2px solid;
+      width: 100%;
+
+      &:not(:hover):not(:active) {
+        border-color: $black;
+      }
+
+      &:hover,
+      &:active {
+        border-color: $teal;
+      }
+    }
+
+    select {
+      background-image: url("../media/svg/down.svg");
+      background-position: 99% center;
+      background-repeat: no-repeat;
+      background-size: 1rem;
+    }
+
+    textarea {
+      min-height: 100px;
+      resize: vertical;
+    }
+  }
+
+  .hook__page__content__meme__thumbnail {
+    width: 5rem; height: 5rem;
+
+    border-style: solid;
+    border-width: 2px;
+    margin-bottom: 1rem;
+    object-fit: contain;
+    object-position: center;
+
+    &:not(:last-of-type) {
+      margin-right: 1rem;
+    }
+
+    &:not(.selected) {
+      border-color: transparent;
+    }
+
+    &.selected {
+      border-color: black;
+    }
+  }
+
+  .hook__page__content__meme__uploader {
+    @extend .__button-black;
+    text-align: center;
+    width: 11rem;
+
+    > div:first-of-type {
+      width: 100%; height: 100%;
+      top: 0; left: 0;
+
+      position: absolute;
+    }
+
+    input {
+      top: 0; left: 0;
+      bottom: 0; right: 0;
+
+      cursor: pointer;
+      opacity: 0;
+      position: absolute;
+      width: 100%;
+      z-index: 10;
+    }
+  }
 </style>
diff --git a/content/.vuepress/components/MissionStatement.vue b/content/.vuepress/components/MissionStatement.vue
index 09edbb7..6d32f26 100644
--- a/content/.vuepress/components/MissionStatement.vue
+++ b/content/.vuepress/components/MissionStatement.vue
@@ -1,15 +1,11 @@
 <template>
-
   <div class="component--mission-statement">
     <strong class="component--mission-statement__title">Mission Statement</strong>
 
     To create a market for accessing and publishing information<sup>1</sup> that is global<sup>2</sup>, decentralized<sup>3</sup>, robust<sup>4</sup>, optimal<sup>5</sup> and complete<sup>6</sup>.
   </div>
-
 </template>
 
-
-
 <style lang="scss">
   @import "../scss/init/colors";
 
diff --git a/content/.vuepress/components/Sitemap.vue b/content/.vuepress/components/Sitemap.vue
index 9e00c6d..c81d653 100644
--- a/content/.vuepress/components/Sitemap.vue
+++ b/content/.vuepress/components/Sitemap.vue
@@ -1,24 +1,25 @@
 <template>
   <ul id="sitemap">
     <li v-for="route in routes">
-      <router-link v-bind:to="route.path" :title="'Visit lbry.tech' + route.path">{{ route.path }}</router-link>
+      <router-link v-bind:to="route.path" :title="`Visit lbry.tech${route.path}`">{{ route.path }}</router-link>
     </li>
   </ul>
 </template>
 
 <script>
-export default {
-  data: function() {
-    var routes = [];
-    this.$router.options.routes.forEach(function(item) {
-      if(item.path != "/" && item.path != "*") {
-        routes.push(item);
+  export default {
+    data: function () {
+      const routes = [];
+
+      this.$router.options.routes.forEach(item => {
+        if (item.path !== "/" && item.path !== "*") routes.push(item);
+      });
+
+      return {
+        routes: routes
       }
-    });
-    return {
-      routes: routes
-    }
-  },
-  name: 'Sitemap'
-};
+    },
+
+    name: "Sitemap"
+  };
 </script>
diff --git a/content/.vuepress/components/Step1.vue b/content/.vuepress/components/Step1.vue
index 217f4d2..aaf9811 100644
--- a/content/.vuepress/components/Step1.vue
+++ b/content/.vuepress/components/Step1.vue
@@ -1,10 +1,9 @@
 <template>
   <section class="hook__page" id="step1-page">
-
     <header class="hook__page__hero">
       <div class="inner-wrap">
         <h1>Learn the LBRY protocol by examples</h1>
-        <p>Let's start by getting the associated metadata for <a href="#">a claim</a>.</p>
+        <p>Let's start by getting the associated metadata for a claim.</p>
 
         <div class="hook__page__hero__claim">
           <span>lbry://</span><input type="text" v-model="address" placeholder=" Claim URI goes here"/>
@@ -13,124 +12,129 @@
       </div>
     </header>
 
-    <div class="xs12" v-if="exampleCode != ''">
-      <pre><code class="bash"><span v-html="highlight('bash',exampleCode)"></span></code></pre>
+    <div class="hook__page__content inner-wrap" v-if="exampleCode !== ''">
+      <pre><code class="bash"><span v-html="highlight('bash', exampleCode)"></span></code></pre>
     </div>
 
-    <div class="xs12" v-if="isLoading">
+    <div class="hook__page__content inner-wrap" 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><code class="json"><span v-html="highlight('json',jsonData)"></span></code></pre>
-      <a href="#" class="__button-black" v-on:click="goTo(2)" title="Proceed to step two">Go to next step</a>
+    <div class="hook__page__content inner-wrap" v-if="jsonData">
+      <p style="text-align: center;">Success! Here is the response for <strong>lbry://{{ address }}</strong>:</p>
+      <pre><code class="json"><span v-html="highlight('json', jsonData)"></span></code></pre>
+      <a href="#" class="__button-black" v-on:click.prevent="goTo(2)" title="Proceed to step two">Go to next step</a>
     </div>
 
     <template v-if="!isLoading && !jsonData">
-      <aside class="hook__page__content">
-        <div class="inner-wrap">
-          <p style="text-align: center;">&hellip;or select a live example from below</p>
+      <div class="hook__page__content inner-wrap">
+        <p style="text-align: center;">&hellip;or select a live example from below</p>
 
-          <div class="hook__page__content__card">
-            <img src="https://spee.ch/0654f2e2322ccfefa02a956d252df9ac7611d8b0/placeholder-itsadisaster.jpeg" v-on:click="chooseClaim('itsadisaster')">
+        <div class="hook__page__content__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>
-              <p class="account">Anonymous</p>
-            </div>
-          </div>
-
-          <div class="hook__page__content__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 &mdash; Bitcoin, Boom or Bust</h4>
-              <p class="account">@Unbubbled</p>
-            </div>
-          </div>
-
-          <div class="hook__page__content__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 &mdash; Nickatnyte &amp; GamingwithMolt</h4>
-              <p class="account">@nickatnyte</p>
-            </div>
-          </div>
-
-          <div class="hook__page__content__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>
-              <p class="account">Anonymous</p>
-            </div>
+          <div v-on:click="chooseClaim('itsadisaster')">
+            <h4>It's a Disaster</h4>
+            <p class="account">Anonymous</p>
           </div>
         </div>
-      </aside>
-    </template>
 
+        <div class="hook__page__content__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 &mdash; Bitcoin, Boom or Bust</h4>
+            <p class="account">@Unbubbled</p>
+          </div>
+        </div>
+
+        <div class="hook__page__content__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 &mdash; Nickatnyte &amp; GamingwithMolt</h4>
+            <p class="account">@nickatnyte</p>
+          </div>
+        </div>
+
+        <div class="hook__page__content__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>
+            <p class="account">Anonymous</p>
+          </div>
+        </div>
+      </div>
+    </template>
   </section>
 </template>
 
 <script>
-import EventBus from '../event-bus';
-import hljs from 'highlight.js';
+  import EventBus from "../event-bus";
+  import hljs from "highlight.js";
 
-export default {
-  data () {
-    return {
-      address: '',
-      jsonData: '',
-      isLoading: false,
-      exampleCode: ''
-    }
-  },
-  created () {
+  export default {
+    data () {
+      return {
+        address: "",
+        exampleCode: "",
+        isLoading: false,
+        jsonData: ""
+      }
+    },
 
-    if(typeof this.$route.query.url != 'undefined') {
-      this.address = this.$route.query.url;
-      this.fetchMetadata();
-    }
+    created () {
+      if (typeof this.$route.query.url !== "undefined") {
+        this.address = this.$route.query.url;
+        this.fetchMetadata();
+      }
+    },
 
-  },
-  mounted () {
-
-    hljs.configure({
-      languages: ['bash', 'json']
-    });
-
-  },
-  methods: {
-    fetchMetadata () {
-      var component = this;
-      component.jsonData = '';
-      component.isLoading = true;
-      component.exampleCode = '# Example code using the daemon\ncurl \'http://localhost:5279\' --data \'{"method":"resolve","params":{"uri":"' + this.address + '"}}\'';
-      this.$http.post('https://lbry.tech/forward', {
-        method: 'resolve',
-        uri: this.address
-      }).then(function(response) {
-        component.isLoading = false;
-        component.jsonData = JSON.stringify(response.body, null, '  ');
+    mounted () {
+      hljs.configure({
+        languages: ["bash", "json"]
       });
     },
-    chooseClaim (address) {
-      var component = this;
-      component.address = address;
-      component.fetchMetadata();
-    },
-    goTo (page) {
-      EventBus.$emit('HookStepUpdate', page);
-    },
-    highlight (language, text) {
-      return hljs.highlight(language, text).value;
-    }
-  },
-  name: 'Step1'
-};
-</script>
 
-<style lang="scss">
-</style>
+    methods: {
+      fetchMetadata () {
+        let component = this;
+        component.jsonData = "";
+        component.isLoading = true;
+        component.exampleCode = `
+# Example code using the daemon
+curl "http://localhost:5279" --data "{ "method": "resolve", "params": { "uri": "${this.address}" } }"
+        `;
+
+        this.$http.post("https://lbry.tech/forward", {
+          method: "resolve",
+          uri: this.address
+        }).then(response => {
+          component.isLoading = false;
+          component.jsonData = JSON.stringify(response.body, null, "  ");
+        }).catch(error => {
+          component.isLoading = false;
+          component.jsonData = JSON.stringify(error, null, "  ");
+          console.log("Error retrieving metadata for a claim:\n", error);
+        });
+      },
+
+      chooseClaim (address) {
+        const component = this;
+        component.address = address;
+        component.fetchMetadata();
+      },
+
+      goTo (page) {
+        EventBus.$emit("HookStepUpdate", page);
+      },
+
+      highlight (language, text) {
+        return hljs.highlight(language, text).value;
+      }
+    },
+
+    name: "Step1"
+  };
+</script>
diff --git a/content/.vuepress/components/Step2.vue b/content/.vuepress/components/Step2.vue
index afed2f3..89204d8 100644
--- a/content/.vuepress/components/Step2.vue
+++ b/content/.vuepress/components/Step2.vue
@@ -1,258 +1,258 @@
 <template>
-  <section class="hook__page" id="step2-page">
+  <section class="hook__page" id="step2-page" v-images-loaded="imagesLoaded">
+    <header class="hook__page__hero">
+      <div class="inner-wrap">
+        <h1>Publish your content on the blockchain</h1>
+        <p>Upload an image to the blockchain and you are able to view it on the <a href="http://explorer.lbry.io" title="LBRY Blockchain Explorer" target="_blank" rel="noopener noreferrer">LBRY Blockchain Explorer</a>.</p>
+      </div>
+    </header>
 
-    <div v-images-loaded="imagesLoaded">
-      <header class="hook__page__hero">
-        <div class="inner-wrap">
-          <h1>Publish your content on the blockchain</h1>
-          <p>Upload an image to the blockchain and you are able to view it on the <a href="http://explorer.lbry.io" title="LBRY Blockchain Explorer" target="_blank" rel="noopener noreferrer">LBRY Blockchain Explorer</a>.</p>
+    <div class="hook__page__content inner-wrap">
+      <template v-if="!isLoading">
+        <div class="hook__page__content__meme left">
+          <img v-bind:src="backgroundImage" id="base-image" style="height: 0; visibility: hidden;" alt="Base image for LBRY meme creator"/>
+          <canvas id="meme-canvas" width="400" height="300">Sorry, canvas is not supported</canvas>
+
+          <img v-for="image in images" v-bind:src="image.src" v-on:click="chooseImage(image.src)" class="hook__page__content__meme__thumbnail" v-bind:class="{'selected': backgroundImage === image.src}" v-bind:alt="image.alt"/>
         </div>
-      </header>
 
-      <aside class="hook__page__content">
-        <div class="inner-wrap">
+        <form class="hook__page__content__meme right" v-on:submit.prevent="submit">
+          <h2>Image Text</h2>
 
-          <template v-if="!isLoading">
+          <fieldset>
+            <label for="meme-top-line">Top line</label>
+            <input name="meme-top-line" id="meme-top-line" type="text" v-model="topLine" placeholder="Top line" required/>
+          </fieldset>
 
-            <div class="hook__page__content__meme left">
-              <img v-bind:src="backgroundImage" id="base-image" alt="" />
-              <canvas id="meme-canvas" width="400" height="300">Sorry, canvas not supported</canvas>
+          <fieldset>
+            <label for="meme-bottom-line">Bottom line</label>
+            <input name="meme-bottom-line" id="meme-bottom-line" type="text" v-model="bottomLine" placeholder="Bottom line" required/>
+          </fieldset>
 
-              <img v-for="image in images" v-bind:src="image.src" v-on:click="chooseImage(image.src)" class="thumbnail" v-bind:class="{'selected': backgroundImage == image.src}" v-bind:alt="image.alt">
 
-            </div>
 
-            <form class="hook__page__content__meme right" v-on:submit.prevent="submit">
+          <h2 class="__metadata">Metadata</h2>
 
-              <h2>Image Text</h2>
+          <fieldset>
+            <label for="meme-title">Title</label>
+            <input name="meme-title" id="meme-title" type="text" v-model="title" placeholder="Title" required/>
+          </fieldset>
 
-              <fieldset>
-                <label for="meme-top-line">Top line</label>
-                <input name="meme-top-line" id="meme-top-line" type="text" v-model="topLine" placeholder="Top line" required/>
-              </fieldset>
+          <fieldset>
+            <label for="meme-description">Description</label>
+            <textarea name="meme-description" id="meme-description" type="text" v-model="description" placeholder="Description" spellcheck="false" required>{{ description }}</textarea>
+          </fieldset>
 
-              <fieldset>
-                <label for="meme-bottom-line">Bottom line</label>
-                <input name="meme-bottom-line" id="meme-bottom-line" type="text" v-model="bottomLine" placeholder="Bottom line" required/>
-              </fieldset>
+          <fieldset>
+            <label for="meme-language">Language</label>
+            <select name="meme-language" id="meme-language" v-model="language">
+              <option value="AR">Arabic</option>
+              <option value="ZH">Chinese (Mandarin)</option>
+              <option value="EN">English</option>
+              <option value="FR">French</option>
+              <option value="DE">German</option>
+              <option value="IT">Italian</option>
+              <option value="JP">Japanese</option>
+              <option value="RU">Russian</option>
+              <option value="ES">Spanish</option>
+              <option value="">Not specified</option>
+            </select>
+          </fieldset>
 
-              <h2 class="metadata">Metadata</h2>
+          <fieldset>
+            <label for="meme-license">License</label>
+            <select name="meme-license" id="meme-license" v-model="license" required>
+              <option value="Public Domain">Public Domain</option>
+              <option value="Creative Commons Attribution 4.0 International">Creative Commons Attribution 4.0 International</option>
+              <option value="Creative Commons Attribution-ShareAlike 4.0 International">Creative Commons Attribution-ShareAlike 4.0 International</option>
+              <option value="Creative Commons Attribution-NoDerivatives 4.0 International">Creative Commons Attribution-NoDerivatives 4.0 International</option>
+              <option value="Creative Commons Attribution-NonCommercial 4.0 International">Creative Commons Attribution-NonCommercial 4.0 International</option>
+              <option value="Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International">Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International</option>
+              <option value="Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International">Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International</option>
+              <option value="None">None</option>
+            </select>
+          </fieldset>
 
-              <fieldset>
-                <label for="meme-title">Title</label>
-                <input name="meme-title" id="meme-title" type="text" v-model="title" placeholder="Title" required/>
-              </fieldset>
+          <fieldset>
+            <label><input type="checkbox" v-model="nsfw" name="nsfw"/>NSFW</label>
+          </fieldset>
 
-              <fieldset>
-                <label for="meme-description">Description</label>
-                <textarea name="meme-description" id="meme-description" type="text" v-model="description" placeholder="Description" required>{{ description}}</textarea>
-              </fieldset>
+          <fieldset>
+            <input type="submit" class="__button-black" value="Submit"/>
+          </fieldset>
+        </form>
+      </template>
 
-              <fieldset>
-                <label for="meme-language">Language</label>
-                <select name="meme-language" id="meme-language" v-model="language">
-                  <option value="EN">English</option>
-                  <option value="FR">French</option>
-                  <option value="ES">Spanish</option>
-                  <option value="DE">German</option>
-                  <option value="IT">Italian</option>
-                  <option value="ZH">Chinese (Mandarin)</option>
-                  <option value="AR">Arabic</option>
-                  <option value="RU">Russian</option>
-                  <option value="JP">Japanese</option>
-                  <option value="">Not specified</option>
-                </select>
-              </fieldset>
+      <pre v-if="exampleCode !== ''" style="clear: both;"><code class="bash"><span v-html="highlight('bash', exampleCode)"></span></code></pre>
 
-              <fieldset>
-                <label for="meme-license">License</label>
-                <select name="meme-license" id="meme-license" v-model="license" required>
-                  <option value="Public Domain">Public Domain</option>
-                  <option value="Creative Commons Attribution 4.0 International">Creative Commons Attribution 4.0 International</option>
-                  <option value="Creative Commons Attribution-ShareAlike 4.0 International">Creative Commons Attribution-ShareAlike 4.0 International</option>
-                  <option value="Creative Commons Attribution-NoDerivatives 4.0 International">Creative Commons Attribution-NoDerivatives 4.0 International</option>
-                  <option value="Creative Commons Attribution-NonCommercial 4.0 International">Creative Commons Attribution-NonCommercial 4.0 International</option>
-                  <option value="Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International">Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International</option>
-                  <option value="Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International">Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International</option>
-                  <option value="None">None</option>
-                </select>
-              </fieldset>
+      <div class="loader" v-if="isLoading"></div>
 
-              <fieldset>
-                <label><input type="checkbox" v-model="nsfw" name="nsfw"/>NSFW</label>
-              </fieldset>
-
-              <fieldset>
-                <input type="submit" class="__button-black" value="Submit"/>
-              </fieldset>
-            </form>
-
-          </template>
-
-          <div class="xs12" v-if="exampleCode != ''">
-            <pre><code class="bash"><span v-html="highlight('bash',exampleCode)"></span></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:</p>
-            <pre><code class="json"><span v-html="highlight('json',jsonData)"></span></code></pre>
-          </div>
-
-        </div>
-      </aside>
+      <div v-if="jsonData">
+        <p style="text-align: center;">Success! Here is the response:</p>
+        <pre><code class="json"><span v-html="highlight('json', jsonData)"></span></code></pre>
+      </div>
     </div>
-
   </section>
 </template>
 
 <script>
-import imagesLoaded from 'vue-images-loaded'
-import hljs from 'highlight.js'
+  import EventBus from "../event-bus";
+  import hljs from "highlight.js";
+  import imagesLoaded from "vue-images-loaded";
 
-import EventBus from '../event-bus';
-
-export default {
-  directives: {
-    imagesLoaded
-  },
-
-  data () {
-    var images = [
-      {
-        src: './carlsagan2.jpg',
-        alt: 'Carl Sagan'
-      },
-      {
-        src: './doge-meme.jpg',
-        alt: 'Doge'
-      },
-      {
-        src: 'lbry-green.png',
-        alt: 'LBRY Logo With Green Background'
-      }
-    ];
-    return {
-      valid: false,
-      isLoading: false,
-      exampleCode: '',
-      jsonData: '',
-      loadingMessage: '',
-      topLine: 'This is an example meme',
-      bottomLine: 'that I made',
-      title: '',
-      description: 'Check out this image I published to LBRY via lbry.tech',
-      language: 'EN',
-      license: 'Public Domain',
-      nsfw: false,
-      images: images,
-      backgroundImage: images[0].src,
-      textFieldRules: [
-        v => !!v || 'Field is required'
-      ],
-    }
-  },
-  mounted () {
-
-    hljs.configure({
-      languages: ['bash', 'json']
-    });
-
-  },
-  methods: {
-    updateCanvas () {
-      var canvasWidth = 400;
-      var canvasHeight = 300;
-      var canvas = document.getElementById('meme-canvas');
-      var ctx = canvas.getContext('2d');
-      var img = document.getElementById('base-image');
-
-      ctx.clearRect(0, 0, canvasWidth, canvasHeight);
-
-      ctx.drawImage(img, 0, 0, canvasWidth, canvasHeight, 0, 0, canvasWidth, canvasHeight);
-
-      ctx.lineWidth = 4;
-      ctx.font = 'bold 28px Karla';
-      ctx.strokeStyle = 'black';
-      ctx.fillStyle = 'white';
-      ctx.textAlign = 'center';
-      ctx.textBaseline = 'top';
-
-      ctx.lineJoin = 'round';
-
-      ctx.strokeText(this.topLine.toUpperCase(), canvasWidth / 2, 20);
-      ctx.fillText(this.topLine.toUpperCase(), canvasWidth / 2, 20);
-
-      ctx.strokeText(this.bottomLine.toUpperCase(), canvasWidth / 2, (canvasHeight - 40));
-      ctx.fillText(this.bottomLine.toUpperCase(), canvasWidth / 2, (canvasHeight - 40));
+  export default {
+    directives: {
+      imagesLoaded
     },
-    submit () {
-      var component = this;
-      component.isLoading = true;
-      component.exampleCode = '# Example code using the daemon\ncurl \'http://localhost:5279\' --data \'{"method":"publish","params":{"name":"' + component.title + '","bid":0.001, "file_path":"/path/to/your/file.jpg","title":"' + component.title + '", "description":"' + component.description + '","language":"' + component.language + '","license":"' + component.license + '","nsfw":' + component.nsfw + '}}\'';
-      component.$http.post('https://lbry.tech/upload-image', document.getElementById('meme-canvas').toDataURL('image/jpeg', 0.6), {
-        headers: {
-          'Content-Type': 'text/plain'
+
+    data () {
+      const images = [
+        {
+          src: "./carlsagan2.jpg",
+          alt: "Carl Sagan"
+        },
+        {
+          src: "./doge-meme.jpg",
+          alt: "Doge"
+        },
+        {
+          src: "lbry-green.png",
+          alt: "LBRY Logo With Green Background"
         }
-      }).then(function(response) {
-        if(response.status == 'error') {
-          component.isLoading = false;
-          component.exampleCode = '';
-        } else {
-          component.$http.post('https://lbry.tech/forward', {
-            method: 'publish',
-            name: component.title,
+      ];
+
+      return {
+        backgroundImage: images[0].src,
+        bottomLine: "that I made",
+        description: "Check out this image I published to LBRY via lbry.tech",
+        exampleCode: "",
+        images: images,
+        isLoading: false,
+        jsonData: "",
+        language: "EN",
+        license: "Public Domain",
+        loadingMessage: "",
+        nsfw: false,
+        textFieldRules: [
+          v => !!v || "Field is required"
+        ],
+        title: "",
+        topLine: "This is an example meme",
+        valid: false,
+      }
+    },
+
+    mounted () {
+      hljs.configure({
+        languages: ["bash", "json"]
+      });
+    },
+
+    methods: {
+      updateCanvas () {
+        const canvas = document.getElementById("meme-canvas");
+        const canvasWidth = 400;
+        const canvasHeight = 300;
+        const ctx = canvas.getContext("2d");
+        const img = document.getElementById("base-image");
+
+        ctx.clearRect(0, 0, canvasWidth, canvasHeight);
+        ctx.drawImage(img, 0, 0, canvasWidth, canvasHeight, 0, 0, canvasWidth, canvasHeight);
+        ctx.fillStyle = "white";
+        ctx.font = "bold 28px Karla";
+        ctx.lineJoin = "round";
+        ctx.lineWidth = 4;
+        ctx.strokeStyle = "black";
+        ctx.textAlign = "center";
+        ctx.textBaseline = "top";
+        ctx.strokeText(this.topLine.toUpperCase(), canvasWidth / 2, 20);
+        ctx.strokeText(this.bottomLine.toUpperCase(), canvasWidth / 2, (canvasHeight - 40));
+        ctx.fillText(this.topLine.toUpperCase(), canvasWidth / 2, 20);
+        ctx.fillText(this.bottomLine.toUpperCase(), canvasWidth / 2, (canvasHeight - 40));
+      },
+
+      submit () {
+        let component = this;
+        component.isLoading = true;
+
+        component.exampleCode = `
+# Example code using the daemon
+curl "http://localhost:5279" --data "{ "method": "publish", "params": { "name": "${component.title}", "bid": 0.001, "file_path": "/path/to/your/file.jpg", "title": "${component.title}", "description": "${component.description}", "language": "${component.language}", "license": "${component.license}", "nsfw": "${component.nsfw}" } }"
+        `;
+
+        component.$http.post("https://lbry.tech/upload-image", document.getElementById("meme-canvas").toDataURL("image/jpeg", 0.6), {
+          headers: {
+            "Content-Type": "text/plain"
+          }
+        }).then(uploadResponse => {
+          if (uploadResponse.status === "error") {
+            component.isLoading = false;
+            component.exampleCode = "";
+            return;
+          }
+
+          component.$http.post("https://lbry.tech/forward", {
             bid: 0.001,
-            file_path: response.filename,
-            title: component.title,
             description: component.description,
+            file_path: uploadResponse.filename,
             language: component.language,
             license: component.license,
-            nsfw: component.nsfw
-          }).then(function(response) {
+            method: "publish",
+            name: component.title,
+            nsfw: component.nsfw,
+            title: component.title
+          }).then(response => {
             component.isLoading = false;
-            component.jsonData = JSON.stringify(response.body, null, '  ');
-            EventBus.$emit('HookFileUploaded', response.body.txid);
+            component.jsonData = JSON.stringify(response.body, null, "  ");
+            EventBus.$emit("HookFileUploaded", response.body.txid);
+          }).catch(error => {
+            component.isLoading = false;
+            component.jsonData = JSON.stringify(error, null, "  ");
+            console.log("Forwarding uploaded image failed:\n", error);
           });
-        }
-      });
+        }).catch(uploadError => {
+          component.isLoading = false;
+          component.jsonData = JSON.stringify(uploadError, null, "  ");
+          console.log("Image upload failed:\n", uploadError);
+        });
+      },
 
-    },
-    imagesLoaded (instance) {
-      var component = this;
-      // Make sure the font is loaded
-      document.fonts.load('bold 28px Karla').then(function() {
+      imagesLoaded (instance) {
+        const component = this;
+        document.fonts.load("bold 28px Karla").then(() => component.updateCanvas()); // Make sure the font is loaded
+      },
+
+      chooseImage (src) {
+        const component = this;
+        component.backgroundImage = src;
         component.updateCanvas();
-      });
+      },
+
+      setImage (file) {
+        const component = this;
+        document.getElementById("base-image").src = file;
+
+        // allow one second to load the image
+        setTimeout(component.updateCanvas, 1000);
+      },
+
+      highlight (language, text) {
+        return hljs.highlight(language, text).value;
+      }
     },
-    chooseImage (src) {
-      var component = this;
-      component.backgroundImage = src;
-      component.updateCanvas();
+
+    created () {
     },
-    setImage (file) {
-      var component = this;
-      document.getElementById('base-image').src = file;
-      // allow one second to load the image
-      setTimeout(component.updateCanvas, 1000);
+
+    watch: {
+      topLine () {
+        this.updateCanvas();
+      },
+      bottomLine () {
+        this.updateCanvas();
+      }
     },
-    highlight (language, text) {
-      return hljs.highlight(language, text).value;
-    }
-  },
-  created () {
-  },
-  watch: {
-    topLine () {
-      this.updateCanvas();
-    },
-    bottomLine () {
-      this.updateCanvas();
-    }
-  },
-  name: 'Step2'
-};
+
+    name: "Step2"
+  };
 </script>
diff --git a/content/.vuepress/components/Step3.vue b/content/.vuepress/components/Step3.vue
index 3090dd4..ee7cfbd 100644
--- a/content/.vuepress/components/Step3.vue
+++ b/content/.vuepress/components/Step3.vue
@@ -1,6 +1,5 @@
 <template>
   <section class="hook__page" id="step3-page">
-
     <header class="hook__page__hero">
       <div class="inner-wrap">
         <h1>Support your favorite content creators with LBRY</h1>
@@ -9,32 +8,32 @@
 
         <div class="hook__page__hero__support">
           <input type="text" v-model="claimId" placeholder="Claim ID goes here"/>
-          <input type="number" v-model="amount" disabled title="You can set this value to any amount of LBC in your wallet, but for demonstration purposes we have hardcoded it to 0.01"><span>LBC</span>
-          <a href="#" v-on:click="send" class="button" title="Execute claim">Execute</a>
+          <input type="number" v-model="amount" disabled title="You can set this value to any amount of LBC in your wallet, but for demonstration purposes we have hardcoded it to 0.01"/><span>LBC</span>
+          <a href="#" v-on:click.prevent="send" class="button" title="Execute claim">Execute</a>
         </div>
       </div>
     </header>
 
-    <div class="xs12" v-if="exampleCode != ''">
-      <pre><code class="bash"><span v-html="highlight('bash',exampleCode)"></span></code></pre>
+    <div class="hook__page__content inner-wrap" v-if="exampleCode !== ''">
+      <pre><code class="bash"><span v-html="highlight('bash', exampleCode)"></span></code></pre>
     </div>
 
-    <div class="xs12" v-if="isLoading">
+    <div class="hook__page__content inner-wrap" v-if="isLoading">
       <div class="loader"></div>
     </div>
 
-    <div class="xs12" v-if="jsonData">
-      <p>Success! Here is the response:</p>
-      <pre><code class="json"><span v-html="highlight('json',jsonData)"></span></code></pre>
+    <div class="hook__page__content inner-wrap" v-if="jsonData">
+      <p style="text-align: center;">Success! Here is the response:</p>
+      <pre><code class="json"><span v-html="highlight('json', jsonData)"></span></code></pre>
     </div>
 
     <template v-if="!isLoading && !jsonData">
       <aside class="hook__page__content">
         <div class="inner-wrap">
-          <p style="text-align: center;">Click on below claims to support them!</p>
+          <p style="text-align: center;">Click on any of the claims below to support them!</p>
 
           <div class="hook__page__content__card">
-            <img src="https://spee.ch/0654f2e2322ccfefa02a956d252df9ac7611d8b0/placeholder-itsadisaster.jpeg" v-on:click="chooseClaim('fbdcd44a97810522d23d5f1335b8ca04be9d776c')">
+            <img src="https://spee.ch/0654f2e2322ccfefa02a956d252df9ac7611d8b0/placeholder-itsadisaster.jpeg" v-on:click="chooseClaim('fbdcd44a97810522d23d5f1335b8ca04be9d776c')" alt=""/>
 
             <div v-on:click="chooseClaim('fbdcd44a97810522d23d5f1335b8ca04be9d776c')">
               <h4>It's a Disaster</h4>
@@ -43,7 +42,7 @@
           </div>
 
           <div class="hook__page__content__card">
-            <img src="https://spee.ch/b1bd330e048fc22dc7bf941c33dd8245eef492c1/unbubbled.png" v-on:click="chooseClaim('de7f7fa33e8d879b2bae7238d2bdf827a39f9301')">
+            <img src="https://spee.ch/b1bd330e048fc22dc7bf941c33dd8245eef492c1/unbubbled.png" v-on:click="chooseClaim('de7f7fa33e8d879b2bae7238d2bdf827a39f9301')" alt=""/>
 
             <div v-on:click="chooseClaim('de7f7fa33e8d879b2bae7238d2bdf827a39f9301')">
               <h4>Unbubbled with Jamie King, Ep1.1 &mdash; Bitcoin, Boom or Bust</h4>
@@ -52,7 +51,7 @@
           </div>
 
           <div class="hook__page__content__card">
-            <img src="https://spee.ch/9880947df41af880bc19724ceddd1cce957a07e2/placeholder-fortninte.jpeg" v-on:click="chooseClaim('5b7c7a202201033d99e1be2930d290c127c0f4fe')">
+            <img src="https://spee.ch/9880947df41af880bc19724ceddd1cce957a07e2/placeholder-fortninte.jpeg" v-on:click="chooseClaim('5b7c7a202201033d99e1be2930d290c127c0f4fe')" alt=""/>
 
             <div v-on:click="chooseClaim('5b7c7a202201033d99e1be2930d290c127c0f4fe')">
               <h4>FORTNITE TOP STREAM MOMENTS &mdash; Nickatnyte &amp; GamingwithMolt</h4>
@@ -61,7 +60,7 @@
           </div>
 
           <div class="hook__page__content__card">
-            <img src="https://spee.ch/a3b8258478ad88954f42f6ac3427eab380720f60/placeholder-lbrymine.png" v-on:click="chooseClaim('a1372cf5523885f5923237bfe522f02f5f054362')">
+            <img src="https://spee.ch/a3b8258478ad88954f42f6ac3427eab380720f60/placeholder-lbrymine.png" v-on:click="chooseClaim('a1372cf5523885f5923237bfe522f02f5f054362')" alt=""/>
 
             <div v-on:click="chooseClaim('a1372cf5523885f5923237bfe522f02f5f054362')">
               <h4>LBRY Coin (LBC) GPU Miner for AMD and NVIDIA</h4>
@@ -71,85 +70,70 @@
         </div>
       </aside>
     </template>
-
   </section>
 </template>
 
 <script>
-import EventBus from '../event-bus';
-import hljs from 'highlight.js';
+  import EventBus from "../event-bus";
+  import hljs from "highlight.js";
 
-export default {
-  data () {
-    return {
-      claimId: '',
-      amount: 0.01,
-      exampleCode: '',
-      isLoading: false,
-      jsonData: ''
-    }
-  },
-  mounted () {
+  export default {
+    data () {
+      return {
+        amount: 0.01,
+        claimId: "",
+        exampleCode: "",
+        isLoading: false,
+        jsonData: ""
+      }
+    },
 
-    hljs.configure({
-      languages: ['bash', 'json']
-    });
-
-  },
-  methods: {
-    send () {
-      var component = this;
-      component.jsonData = '';
-      component.isLoading = true;
-      component.exampleCode = '# Example code using the daemon\ncurl \'http://localhost:5279\' --data \'{"method":"wallet_send","params":{"claim_id":"' + this.address + '","amount":' + this.amount + '}}\'';
-      this.$http.post('https://lbry.tech/forward', {
-        method: 'wallet_send',
-        claim_id: this.address,
-        amount: this.amount
-      }).then(function(response) {
-        component.isLoading = false;
-        component.jsonData = JSON.stringify(response.body, null, '  ');
+    mounted () {
+      hljs.configure({
+        languages: ["bash", "json"]
       });
     },
-    chooseClaim (address) {
-      var component = this;
-      component.address = address;
-      component.send();
+
+    methods: {
+      send () {
+        let component = this;
+        component.jsonData = "";
+        component.isLoading = true;
+
+        component.exampleCode = `
+# Example code using the daemon
+curl "http://localhost:5279" --data "{ "method": "wallet_send", "params": { "claim_id": "${this.address}", "amount": "${this.amount}" } }"
+        `;
+
+        component.$http.post("https://lbry.tech/forward", {
+          amount: component.amount,
+          claim_id: component.address,
+          method: "wallet_send"
+        }).then(response => {
+          component.isLoading = false;
+          component.jsonData = JSON.stringify(response.body, null, "  ");
+        }).catch(error => {
+          component.isLoading = false;
+          component.jsonData = JSON.stringify(error, null, "  ");
+          console.log("Sending of LBC failed:\n", error);
+        });
+      },
+
+      chooseClaim (address) {
+        const component = this;
+        component.address = address;
+        component.send();
+      },
+
+      goTo (page) {
+        EventBus.$emit("HookStepUpdate", page);
+      },
+
+      highlight (language, text) {
+        return hljs.highlight(language, text).value;
+      }
     },
-    goTo (page) {
-      EventBus.$emit('HookStepUpdate', page);
-    },
-    highlight (language, text) {
-      return hljs.highlight(language, text).value;
-    }
-  },
-  name: 'Step3'
-};
+
+    name: "Step3"
+  };
 </script>
-
-<style lang="scss">
-
-@import '../scss/variables';
-
-#step3-page {
-  .card {
-    .card__title {
-      height: 9rem;
-      h4 {
-        text-align: left;
-        font-size: 1rem;
-      }
-      .account {
-        color: $primary-color;
-        text-align: left;
-      }
-    }
-  }
-  .btn {
-    background-color: $primary-color;
-    border-color: $primary-color;
-    color: white;
-  }
-}
-
-</style>
diff --git a/content/.vuepress/config.js b/content/.vuepress/config.js
index 2aec224..b6821e6 100644
--- a/content/.vuepress/config.js
+++ b/content/.vuepress/config.js
@@ -8,7 +8,7 @@ module.exports = {
   ],
   themeConfig: {
     repo: 'lbryio/lbry.tech',
-    docsBranch: 'master',
+    docsBranch: 'master/content',
     editLinkText: 'Edit this page on Github'
   },
   ga: 'UA-60403362-1',
diff --git a/content/.vuepress/media/svg/down.svg b/content/.vuepress/media/svg/down.svg
new file mode 100644
index 0000000..0196217
--- /dev/null
+++ b/content/.vuepress/media/svg/down.svg
@@ -0,0 +1,3 @@
+<svg viewBox="0 0 96 96" xmlns="http://www.w3.org/2000/svg" fill="#222">
+  <path d="M17.172, 31.172c1.562, -1.562 4.095, -1.562 5.656, 0l25.172, 25.171l25.172, -25.171c1.562, -1.562 4.095, -1.562 5.656, 0c1.562, 1.562 1.562, 4.095 0, 5.656l-28, 28c-1.562, 1.562 -4.095, 1.562 -5.656, 0l-28, -28c-0.781, -0.781 -1.172, -1.805 -1.172, -2.828c0, -1.023 0.391, -2.047 1.172, -2.828Z"/>
+</svg>
diff --git a/content/.vuepress/scss/pages/_hook.scss b/content/.vuepress/scss/pages/_hook.scss
deleted file mode 100644
index fb02a59..0000000
--- a/content/.vuepress/scss/pages/_hook.scss
+++ /dev/null
@@ -1,362 +0,0 @@
-.hook {
-  .loader {
-    animation: spin 2s linear infinite;
-    border-radius: 50%;
-    border-style: solid;
-    border-top-color: $teal;
-
-    &:not(.small) {
-      width: 4rem; height: 4rem;
-
-      border-width: 6px;
-      margin-right: auto;
-      margin-left: auto;
-    }
-
-    &.small {
-      width: 2rem; height: 2rem;
-      border-width: 3px;
-    }
-  }
-}
-
-
-
-.hook__navigation {
-  background-color: $black;
-  color: $white;
-  font-size: 1rem;
-  padding-top: 1rem;
-  padding-bottom: 1rem;
-  text-align: center;
-}
-
-.hook__navigation__step {
-  @media (min-width: 501px) {
-    display: inline-block;
-
-    &:not(:last-of-type) {
-      margin-right: 1rem;
-    }
-
-    span {
-      width: 3rem; height: 3rem;
-
-      display: block;
-      font-size: 1.25rem;
-      line-height: 3rem;
-    }
-  }
-
-  @media (max-width: 500px) {
-    display: block;
-
-    span {
-      width: 1rem; height: 1rem;
-
-      display: inline-block;
-      font-size: 0.7rem;
-      line-height: 0.9rem;
-      position: relative;
-      top: 2px;
-      vertical-align: top;
-    }
-  }
-
-  &:not(.active) {
-    span {
-      border-color: rgba($white, 0.1);
-    }
-  }
-
-  &.active {
-    color: $teal;
-
-    span {
-      border-color: rgba($teal, 0.3);
-    }
-  }
-
-  span {
-    border: 1px solid;
-    border-radius: 50%;
-    margin: 0 auto 0.5rem;
-  }
-}
-
-
-
-.hook__page {
-  @extend .page__content;
-}
-
-.hook__page__hero {
-  margin-bottom: 2rem;
-  border-bottom: 1px solid rgba($black, 0.05);
-
-  h1, p {
-    text-align: center;
-  }
-}
-
-.hook__page__hero__claim,
-.hook__page__hero__support {
-  margin-bottom: 3rem; padding-left: 1rem;
-
-  background-color: $white;
-  border: 1px solid rgba($gray, 0.7);
-  font-size: 1rem;
-
-  @media (min-width: 501px) {
-    margin-right: auto;
-    margin-left: auto;
-    width: 80%;
-  }
-
-  &::after {
-    @include clearfix;
-  }
-
-  input, a {
-    line-height: 3rem;
-  }
-
-  span {
-    color: rgba($black, 0.3);
-  }
-
-  a {
-    border-left: 1px solid rgba($gray, 0.7);
-    color: $white;
-    float: right;
-    position: relative;
-    text-align: center;
-    transition: all 0.2s;
-    width: 6rem;
-
-    &::after {
-      width: calc(100% + 2px); height: calc(100% + 2px);
-      top: -1px; left: -1px;
-
-      border: 1px solid;
-      content: "";
-      position: absolute;
-      transition: inherit;
-    }
-
-    &:not(:hover) {
-      background-color: $black;
-
-      &::after {
-        border-color: $black;
-      }
-    }
-
-    &:hover {
-      background-color: $teal;
-
-      &::after {
-        border-color: $teal;
-      }
-    }
-  }
-}
-
-.hook__page__hero__claim input {
-  width: calc(100% - 10rem);
-}
-
-.hook__page__hero__support {
-  input[type=number] {
-    width: 3rem;
-  }
-
-  input[type=text] {
-    width: calc(100% - 11.5rem);
-  }
-
-  span {
-    line-height: 3rem;
-  }
-
-  a {
-    margin-left: 0.5rem;
-  }
-}
-
-
-
-.hook__page__content::after {
-  @include clearfix;
-}
-
-.hook__page__content__card {
-  margin-bottom: 1rem; padding: 1rem;
-
-  img {
-    margin-bottom: 0.5rem;
-  }
-
-  @media (min-width: 501px) {
-    float: left;
-    vertical-align: top;
-    width: 50%;
-  }
-
-  @media (max-width: 500px) {
-    width: 100%;
-  }
-}
-
-.hook__page__content__meme {
-  padding-right: 1rem;
-  padding-left: 1rem;
-
-  @media (min-width: 701px) {
-    width: 50%;
-  }
-
-  @media (max-width: 700px) {
-    width: 100%;
-  }
-
-  &.left {
-    margin-bottom: 2rem;
-
-    #base-image {
-      height: 0;
-      visibility: hidden;
-    }
-
-    .thumbnail {
-      width: 5rem;
-      height: 5rem;
-      object-fit: cover;
-      margin: 0 1rem 1rem 0;
-      border: 4px solid white;
-      border-radius: 1px;
-      &.selected {
-        border-color: black;
-      }
-    }
-
-    canvas {
-      width: 100%; height: 100%;
-      background-color: rgba($teal, 0.3);
-    }
-  }
-
-  h2 {
-    text-transform: uppercase;
-    &.metadata {
-      margin-top: 3rem;
-    }
-  }
-
-  fieldset {
-    border: none;
-
-    &:not(:last-of-type) {
-      margin-bottom: 1rem;
-    }
-  }
-
-  label {
-    color: rgba($black, 0.3);
-    display: block;
-    font-size: 0.8rem;
-    font-weight: 600;
-    letter-spacing: 0.05rem;
-    margin-bottom: 0.025rem;
-    text-transform: uppercase;
-    width: 100%;
-  }
-
-  input,
-  textarea,
-  select {
-    @media (min-width: 901px) {
-      &:not([type="checkbox"]):not([type="submit"]) {
-        font-size: 1.25rem;
-      }
-    }
-
-    @media (max-width: 900px) {
-      &:not([type="checkbox"]):not([type="submit"]) {
-        font-size: 1.05rem;
-      }
-    }
-
-    &:not([type="checkbox"]):not([type="file"]):not([type="submit"]) {
-      border-bottom: 2px solid;
-      padding-bottom: 0.15rem;
-      transition: all 0.2s;
-      width: 100%;
-    }
-
-    &:not([type="file"]):not([type="submit"]) {
-      &:not(:hover):not(:active) {
-        border-color: $black;
-      }
-
-      &:hover,
-      &:active {
-        border-color: $teal;
-      }
-    }
-
-    &[type="checkbox"] {
-      width: 1.25rem; height: 1.25rem;
-
-      border: 2px solid;
-      margin-right: 0.5rem;
-      position: relative;
-      top: 0.35rem;
-
-      &::after {
-        width: 100%; height: 100%;
-
-        content: "✓";
-        font-size: 1.5rem;
-        line-height: 1rem;
-        position: absolute;
-      }
-
-      &:not(:checked)::after {
-        color: transparent;
-      }
-
-      &:checked::after {
-        color: $teal;
-      }
-    }
-  }
-  #meme-top-line,
-  #meme-bottom-line {
-    text-transform: uppercase;
-  }
-}
-
-.hook__page__content__meme__uploader {
-  @extend .__button-black;
-  text-align: center;
-  width: 11rem;
-
-  > div:first-of-type {
-    width: 100%; height: 100%;
-    top: 0; left: 0;
-
-    position: absolute;
-  }
-
-  input {
-    top: 0; left: 0;
-    bottom: 0; right: 0;
-
-    cursor: pointer;
-    opacity: 0;
-    position: absolute;
-    width: 100%;
-    z-index: 10;
-  }
-}
diff --git a/content/.vuepress/scss/pages/_page.scss b/content/.vuepress/scss/pages/_page.scss
index 68ef270..bd4ce8b 100644
--- a/content/.vuepress/scss/pages/_page.scss
+++ b/content/.vuepress/scss/pages/_page.scss
@@ -222,7 +222,7 @@
     }
   }
 
-  a:not(.button):not(.feature-link__title) {
+  a:not(.button):not(.__button-black):not(.feature-link__title):not(.newsletter-standalone__submit) {
     color: $teal;
     position: relative;
 
diff --git a/content/.vuepress/scss/partials/_modal.scss b/content/.vuepress/scss/partials/_modal.scss
new file mode 100644
index 0000000..0c05b1b
--- /dev/null
+++ b/content/.vuepress/scss/partials/_modal.scss
@@ -0,0 +1,51 @@
+.modal {
+  @include center;
+  top: 0; left: 0;
+  bottom: 0; right: 0;
+
+  background-color: rgba($black, 0.5);
+  position: fixed;
+  z-index: 10;
+
+  h3 {
+    @media (min-width: 901px) {
+      font-size: 1.5rem;
+      margin-bottom: 0.25rem;
+    }
+
+    @media (max-width: 900px) {
+      font-size: 1.25rem;
+    }
+  }
+
+  p {
+    margin-bottom: 1rem;
+
+    @media (min-width: 901px) {
+      font-size: 1.15rem;
+      line-height: 1.33;
+    }
+
+    @media (max-width: 900px) {
+      font-size: 1.05rem;
+      line-height: 1.55;
+    }
+
+    a {
+      color: $teal;
+    }
+  }
+}
+
+.modal-wrap {
+  background-color: $white;
+  padding: 2rem 1.5rem;
+
+  @media (min-width: 501px) {
+    width: 500px;
+  }
+
+  @media (max-width: 500px) {
+    width: 100%;
+  }
+}