diff --git a/website/assets/images/arrow-right-16x16@2x.png b/website/assets/images/arrow-right-red-16x16@2x.png
similarity index 100%
rename from website/assets/images/arrow-right-16x16@2x.png
rename to website/assets/images/arrow-right-red-16x16@2x.png
diff --git a/website/assets/images/arrow-right-white-16x16@2x.png b/website/assets/images/arrow-right-white-16x16@2x.png
new file mode 100644
index 0000000000..86caac8747
Binary files /dev/null and b/website/assets/images/arrow-right-white-16x16@2x.png differ
diff --git a/website/assets/styles/mixins-and-variables/buttons.less b/website/assets/styles/mixins-and-variables/buttons.less
index 279d64d5c2..c58673e962 100644
--- a/website/assets/styles/mixins-and-variables/buttons.less
+++ b/website/assets/styles/mixins-and-variables/buttons.less
@@ -12,7 +12,7 @@
   }
 }
 
-.btn-animated-arrow() {
+.btn-animated-arrow-red() {
   padding-right: 40px;
   cursor: pointer;
   position: relative;
@@ -26,7 +26,7 @@
   -moz-transition: 0.2s ease-in-out;
   -webkit-transition: 0.2s ease-in-out;
   &:before {
-  content: url('/images/arrow-right-16x16@2x.png');
+  content: url('/images/arrow-right-red-16x16@2x.png');
   transform: scale(0.5);
   position: absolute;
   top: 12px;
@@ -48,3 +48,40 @@
   /*   opacity:1; */
   }
 }
+
+.btn-animated-arrow-white() {
+  padding-right: 40px;
+  cursor: pointer;
+  position: relative;
+  width: auto;
+  color: #FFF;
+  font-weight: bold;
+  user-select: none;
+  transition: 0.2s ease-in-out;
+  -o-transition: 0.2s ease-in-out;
+  -ms-transition: 0.2s ease-in-out;
+  -moz-transition: 0.2s ease-in-out;
+  -webkit-transition: 0.2s ease-in-out;
+  &:before {
+  content: url('/images/arrow-right-white-16x16@2x.png');
+  transform: scale(0.5);
+  position: absolute;
+  top: 10px;
+  left: 80%; // <--- here
+  transition: 0.2s ease-in-out;
+  -o-transition: 0.2s ease-in-out;
+  -ms-transition: 0.2s ease-in-out;
+  -moz-transition: 0.2s ease-in-out;
+  -webkit-transition: 0.2s ease-in-out;
+  /*   opacity: 0; */
+  }
+  &:hover:before {
+  left: 82%; // <--- here
+  transition: 0.2s ease-in-out;
+  -o-transition: 0.2s ease-in-out;
+  -ms-transition: 0.2s ease-in-out;
+  -moz-transition: 0.2s ease-in-out;
+  -webkit-transition: 0.2s ease-in-out;
+  /*   opacity:1; */
+  }
+}
diff --git a/website/assets/styles/pages/homepage.less b/website/assets/styles/pages/homepage.less
index 0aada4d6b2..db867877b6 100644
--- a/website/assets/styles/pages/homepage.less
+++ b/website/assets/styles/pages/homepage.less
@@ -11,25 +11,11 @@
     line-height: 36px;
   }
 
-
   .btn {
-    font-family: @main-font;
-    font-weight: 700;
     font-size: 18px;
-    line-height: 28px;
-    border-radius: 8px;
   }
 
-  .btn-primary {
-    background-color: #ff5c83;
-    border-color: #ff5c83;
-    &:hover {
-      background-color: darken(#ff5c83, 10%);
-      border-color: darken(#ff5c83, 10%);
-    }
-  }
-
-  .hero-banner {
+  [purpose='hero-banner'] {
     width: 100%;
     height: 100%;
     background: linear-gradient(173.74deg, #1F1D42 4.94%, #00FFF0 87.78%);
@@ -42,19 +28,35 @@
     }
   }
 
-  .hero-clouds {
+  [purpose='hero-clouds'] {
     background-image: url('/images/clouds-1600x320@2x.png');
     background-position: bottom 150px center;
     background-size: 1600px auto;
     background-repeat: repeat-x;
-
   }
 
-  .log-destination-grid {
-    max-width: 736px;;
+
+  [purpose='top-try-it-out-btn'] {
+    max-width: 220px;
+    line-height: 24px;
+    padding-top: 16px;
+    padding-bottom: 16px;
   }
 
-  .log-destination {
+  [purpose='animated-arrow-button-red'] {
+    .btn-animated-arrow-red();
+  }
+  [purpose='animated-arrow-button-white'] {
+    .btn-animated-arrow-white();
+    padding-top: 16px;
+    padding-bottom: 16px;
+  }
+
+  [purpose='log-destination-grid'] {
+    max-width: 736px;
+  }
+
+  [purpose='log-destination'] {
     height: 80px;
     justify-content: center;
     align-items: center;
@@ -85,115 +87,7 @@
     }
   }
 
-  .avatar-frame {
-    width: 48px;
-    height: 48px;
-    position: relative;
-    justify-content: center;
-    align-content: center;
-    overflow: hidden;
-    background-color: black;
-    border-radius: 50%;
-    &:hover {
-      cursor: pointer;
-    }
-    img {
-      display: inline;
-      width: auto;
-      height: 100%;
-    }
-  }
 
-  .logos {
-    max-width: 360px;
-    img {
-      width: auto;
-      height: 35px;
-    }
-  }
-
-  [purpose='demo-cta'] {
-    padding: 16px;
-    background: rgba(25, 33, 71, 0.5);
-    border-radius: 16px;
-    [purpose='demo-cta-text' ] {
-      white-space: nowrap;
-      p {
-        vertical-align: middle;
-        line-height: 24px;
-        font-size: 16px;
-        margin-block-end: 0px;
-      }
-    }
-    .form-control {
-      height: 44px;
-      padding: 4px 4px 4px 12px;
-      border: none;
-      border-radius: 6px;
-      input {
-        border: none;
-        height: 36px;
-        width: 100%;
-      }
-      input:focus {
-        border: none;
-        outline: rgba(0, 0, 0, 0);
-      }
-    }
-    [purpose='demo-cta-form' ] {
-      position: relative;
-    }
-    [purpose='demo-cta-error-message'] {
-      position: absolute;
-      left: 0;
-      top: 52px;
-      padding: 4px 8px;
-      background: #D66C7B;
-      border-radius: 4px;
-      font-size: 14px;
-      line-height: 20px;
-      color: #FFFFFF;
-      &::before {
-        display: block;
-        position: absolute;
-        content: '';
-        width: 8px;
-        height: 8px;
-        background: #D66C7B;
-        z-index: 1000;
-        top: -3px;
-        left: 10px;
-        border-top: 1px solid #D66C7B;
-        border-right: 1px solid #D66C7B;
-        -webkit-transform: rotate(-45deg);
-        transform: rotate(-45deg);
-      }
-    }
-    [purpose='register-button'] {
-      padding: 8px 16px;
-      font-size: 14px;
-      line-height: 20px;
-      height: 36px;
-      border-radius: 4px;
-      min-width: 87px;
-    }
-  }
-
-  [purpose='demo-cta-success-message'] {
-    padding: 25px 16px;
-    background: rgba(25, 33, 71, 0.5);
-    border-radius: 12px;
-    max-width: 960px;
-    p {
-      line-height: 24px;
-      font-size: 16px;
-      margin-block-end: 0px;
-    }
-  }
-
-  [purpose='animated-arrow-button'] {
-    .btn-animated-arrow();
-  }
 
   @media (min-width: 1200px) {
     [purpose='tweets'] {
@@ -205,9 +99,6 @@
         flex: 0 1 326px;
       }
     }
-    [purpose='demo-cta'] {
-      max-width: 960px;
-    }
   }
 
   @media (max-width: 1200px) {
@@ -221,49 +112,25 @@
         margin-right: 8px;
       }
     }
-    [purpose='demo-cta-container'] {
-      padding-left: 65px;
-      padding-right: 65px;
-    }
   }
 
-
-  @media (min-width: 1024px) {
-    [purpose='demo-cta'] {
-      [purpose='demo-cta-text' ] {
-        white-space: normal;
-      }
-    }
-  }
   @media (max-width: 990px) {
     [purpose='tweets'] {
       [purpose='tweet-card'] {
         flex: 1 1 295px;
       }
     }
-    [purpose='demo-cta-container'] {
-      padding-left: 45px;
-      padding-right: 45px;
-    }
-  }
-  @media (max-width: 722px) {
-    [purpose='demo-cta-container'] {
-      [purpose='demo-cta-text' ] {
-        padding-bottom: 16px;
-      }
-    }
   }
 
+
   @media (min-width: 768px) {
-    .log-destination-grid {
+    [purpose='log-destination-grid'] {
       max-width: 976px;
     }
-    .log-destination {
+    [purpose='log-destination'] {
       flex: 0 0 228px;
     }
-    .logos {
-      max-width: 720px;
-    }
+
   }
 
   @media (max-width: 768px) {
@@ -274,13 +141,13 @@
         flex: 1 1 316px;
       }
     }
-    .hero-clouds {
+    [purpose='hero-clouds'] {
       background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 23%, rgba(255, 255, 255, 0) 48%, rgba(255, 255, 255, 0) 100%);
     }
   }
 
   @media (min-width: 600px) and (max-width: (767px)) {
-    .log-destination {
+    [purpose='log-destination'] {
       flex: 0 0 280px;
       p {
         display: flex;
@@ -289,7 +156,7 @@
   }
 
   @media (max-width: 600px) {
-    .log-destination {
+    [purpose='log-destination'] {
       flex-basis: 160px;
       p {
         display: none;
@@ -306,9 +173,8 @@
       font-size: 18px;
       line-height: 24px;
     }
-    [purpose='demo-cta-container'] {
-      padding-left: 20px;
-      padding-right: 20px;
+    [purpose='top-try-it-out-btn'] {
+      max-width: 100%;
     }
     [purpose='tweets'] {
       padding-left: 16px;
@@ -320,19 +186,9 @@
   }
 
   @media (max-width: 355px) {
-    .log-destination {
+    [purpose='log-destination'] {
       flex-basis: 80px;
     }
-    [purpose='demo-cta'] {
-      .form-control {
-        height: 44px;
-        padding: 4px;
-      }
-    }
-    [purpose='demo-cta-container'] {
-      padding-left: 0px;
-      padding-right: 0px;
-    }
   }
 
 }
diff --git a/website/assets/styles/pages/landing.less b/website/assets/styles/pages/landing.less
index 72a3d393f2..9558f499d5 100644
--- a/website/assets/styles/pages/landing.less
+++ b/website/assets/styles/pages/landing.less
@@ -19,7 +19,11 @@
       text-decoration: none;
     }
     [purpose='demo-btn'] {
-      .btn-animated-arrow();
+      .btn-animated-arrow-red();
+    }
+
+    [purpose='demo-btn-white'] {
+      .btn-animated-arrow-white();
     }
 
     [purpose='banner-background'] {
diff --git a/website/assets/styles/pages/pricing.less b/website/assets/styles/pages/pricing.less
index dd3488da51..f241e56592 100644
--- a/website/assets/styles/pages/pricing.less
+++ b/website/assets/styles/pages/pricing.less
@@ -20,7 +20,7 @@
   }
 
   [purpose='animated-arrow-button'] {
-    .btn-animated-arrow();
+    .btn-animated-arrow-red();
   }
 
 }
diff --git a/website/views/pages/docs/basic-documentation.ejs b/website/views/pages/docs/basic-documentation.ejs
index 125c175a32..0949bcba82 100644
--- a/website/views/pages/docs/basic-documentation.ejs
+++ b/website/views/pages/docs/basic-documentation.ejs
@@ -33,7 +33,7 @@
               <p class="font-weight-bold p-0 pl-md-4 pt-2 pt-md-0 m-0">Install osquery and Fleet</p>
               <a class="p-0 pl-md-4 pt-2 pt-md-0 arrow" href="/install">
                 Get started
-                <img class="d-inline mb-1" style="height: 16px; width: auto;" alt="right arrow" src="/images/arrow-right-16x16@2x.png" />
+                <img class="d-inline mb-1" style="height: 16px; width: auto;" alt="right arrow" src="/images/arrow-right-red-16x16@2x.png" />
               </a>
             </div>
           </div>
@@ -43,7 +43,7 @@
               <p class="font-weight-bold p-0 pl-md-4 pt-2 pt-md-0 m-0">Can't find what you need?</p>
               <a class="p-0 pl-md-4 pt-2 pt-md-0 arrow">
                 Support
-                <img class="d-inline mb-1" style="height: 16px; width: auto;" alt="right arrow" src="/images/arrow-right-16x16@2x.png" />
+                <img class="d-inline mb-1" style="height: 16px; width: auto;" alt="right arrow" src="/images/arrow-right-red-16x16@2x.png" />
               </a>
             </div>
           </div>
diff --git a/website/views/pages/homepage.ejs b/website/views/pages/homepage.ejs
index 8525850bf7..ee59a86161 100644
--- a/website/views/pages/homepage.ejs
+++ b/website/views/pages/homepage.ejs
@@ -1,8 +1,8 @@
 <div id="homepage" v-cloak>
 
   <div style="max-height: 1096px;">
-    <div style="padding-top: 114px" class="hero-banner">
-      <div class="hero-clouds">
+    <div style="padding-top: 114px" purpose="hero-banner">
+      <div purpose="hero-clouds">
         <div class="container-lg">
           <div class="container-fluid text-center pt-3 pt-sm-5">
             <h1>
@@ -12,33 +12,12 @@
             <h6 style="max-width: 580px;" class="mx-auto mt-3 mb-0">
               Quickly deploy <a target="_blank" style="color: white; text-decoration-line: underline;" href="https://osquery.io/">osquery</a> and secure 300,000+ devices on top of a stable core technology.
             </h6>
-            <div purpose="demo-cta-container" class="mx-auto pb-5 pb-sm-2" style="padding-top: 32px;">
-              <ajax-form action="deliverDemoSignup" :form-errors.sync="formErrors" :form-data="formData" :form-rules="formRules" :syncing.sync="syncing" :cloud-error.sync="cloudError" @submitted="submittedForm()" v-if="!cloudSuccess">
-                <div purpose="demo-cta" class="flex-row row justify-content-between align-items-center mx-auto">
-                  <div purpose="demo-cta-text" class="pl-0 pr-3 text-left">
-                    <span style="font-size: 32px; vertical-align: middle;">💡</span>
-                    <p class="d-inline-block">
-                      <strong>Live Q&A session</strong>
-                      <br class="d-lg-none d-block">
-                     April 12th, 2022 2:30pm (CST)
-                    </p>
-                  </div>
-                  <div purpose="demo-cta-form" class="flex-grow-1 col-12 col-sm-auto px-0 pt-sm-0">
-                    <div class="form-control d-inline-flex" :class="[formErrors.emailAddress ? 'is-invalid' : '']">
-                      <input class="float-left pr-1" v-model.trim="formData.emailAddress" placeholder="Enter your email">
-                      <ajax-button purpose="register-button" spinner="true" :syncing="syncing" type="submit" class="btn btn-sm btn-info float-right">Register</ajax-button>
-                    </div>
-                    <div purpose="demo-cta-error-message" v-if="formErrors.emailAddress">
-                      Please enter a valid email address e.g., example@email.com
-                    </div>
-                  </div>
-                </div>
-              </ajax-form>
-              <div purpose="demo-cta-success-message" class="mx-auto" v-else>
-                <p class="text-center">Thank you for registering.<br class="d-sm-none d-block"> Please check your inbox for event details.</p>
-              </div>
+            <div style="max-width: 500px;" class="mt-5 mx-auto mb-0 d-sm-flex justify-content-center">
+              <a purpose="top-try-it-out-btn" class="d-sm-flex align-items-center justify-content-center btn btn-block btn-primary mx-auto mx-sm-0" href="/get-started">Try it out</a>
+              <a style="max-width: 220px;" class="btn btn-lg btn-white pl-4 mx-auto mx-sm-0" purpose="animated-arrow-button-white" target="_blank" href="https://calendly.com/fleetdm/demo?utm_source=homepage+demo+top">Schedule a demo
+              </a>
             </div>
-            <img alt="Fleet ctl terminal and Fleet UI" src="/images/fleetctl-687x506@2x.png" style="max-width: 810px; height: auto;" class="w-100 py-3 py-sm-5 mx-auto" />
+            <img alt="Fleet ctl terminal and Fleet UI" src="/images/fleetctl-687x506@2x.png" style="max-width: 810px; height: auto;" class="w-100 py-3 py-sm-5 mx-auto"/>
           </div>
         </div>
       </div>
@@ -83,9 +62,7 @@
       </div>
       <div class="container d-flex flex-wrap flex-lg-nowrap justify-content-center justify-content-lg-between align-items-center px-0 pt-3 pb-5 mb-lg-4">
         <div class="container text-center text-lg-left px-0 pb-5 pb-lg-0 m-0">
-            <h3>
-              Deploy anywhere
-            </h3>
+            <h3>Deploy anywhere</h3>
             <p class="pb-4 mb-0">
               Fleet is self-hosted and self-managed, and can be run within your own data centers or in the cloud.
             </p>
@@ -113,55 +90,46 @@
           Automate scheduled queries to integrate alerts and dashboards across your enterprise.
         </p>
       </div>
-      <div class="log-destination-grid container d-flex flex-wrap justify-content-center p-0 pt-4 mx-auto">
-        <div class="log-destination d-flex mx-1 mx-sm-2 mb-4">
+      <div purpose="log-destination-grid" class="container d-flex flex-wrap justify-content-center p-0 pt-4 mx-auto">
+        <div purpose="log-destination" class="d-flex mx-1 mx-sm-2 mb-4">
           <img alt="filesystem icon" src="/images/icon-log-destination-filesystem-48x48@2x.png"/>
           <p class="font-weight-bold m-0 ml-3">Filesystem</p>
         </div>
-        <div class="log-destination d-flex mx-1 mx-sm-2 mb-4">
+        <div purpose="log-destination" class="d-flex mx-1 mx-sm-2 mb-4">
           <img alt="Splunk logo" src="/images/icon-log-destination-splunk-48x48@2x.png"/>
           <p class="font-weight-bold m-0 ml-3">Splunk</p>
         </div>
-        <div class="log-destination d-flex mx-1 mx-sm-2 mb-4">
+        <div purpose="log-destination" class="d-flex mx-1 mx-sm-2 mb-4">
           <img alt="AWS Kinesis logo" src="/images/icon-log-destination-firehose-40x48@2x.png"/>
           <p class="font-weight-bold m-0 ml-3">AWS Kinesis</p>
         </div>
-        <div class="log-destination d-flex mx-1 mx-sm-2 mb-4">
+        <div purpose="log-destination" class="d-flex mx-1 mx-sm-2 mb-4">
           <img alt="Google Cloud Platform PubSub logo" src="/images/icon-log-destination-pubsub-53x48@2x.png"/>
           <p class="font-weight-bold m-0 ml-3">GCP PubSub</p>
         </div>
-        <div class="log-destination d-flex mx-1 mx-sm-2 mb-4">
+        <div purpose="log-destination" class="d-flex mx-1 mx-sm-2 mb-4">
           <img alt="AWS Lambda logo" src="/images/icon-log-destination-lambda-48x48@2x.png"/>
           <p class="font-weight-bold m-0 ml-3">AWS Lambda</p>
         </div>
-        <div class="log-destination d-flex mx-1 mx-sm-2 mb-4">
+        <div purpose="log-destination" class="d-flex mx-1 mx-sm-2 mb-4">
           <img alt="Elastic logo" src="/images/icon-log-destination-elastic-48x48@2x.png"/>
           <p class="font-weight-bold m-0 ml-3">Elastic</p>
         </div>
-        <div class="log-destination d-flex mx-1 mx-sm-2 mb-4">
+        <div purpose="log-destination" class="d-flex mx-1 mx-sm-2 mb-4">
           <img alt="Sumo Logic logo" src="/images/icon-log-destination-sumo-48x48@2x.png"/>
           <p class="font-weight-bold m-0 ml-3">Sumo Logic</p>
         </div>
-        <div class="log-destination d-flex mx-1 mx-sm-2 mb-4">
+        <div purpose="log-destination" class="d-flex mx-1 mx-sm-2 mb-4">
           <img alt="Graylog logo" src="/images/icon-log-destination-graylog-48x48@2x.png"/>
           <p class="font-weight-bold m-0 ml-3">Graylog</p>
         </div>
       </div>
       <div class="btn-toolbar justify-content-center px-5 px-sm-0 pt-3 pb-5">
-        <a
-          style="max-width: 220px"
-          class="btn btn-block btn-md btn-primary mx-4"
-          href="/get-started?tryitnow"
-        >
+        <a style="max-width: 220px" class="btn btn-block btn-md btn-primary mx-4" href="/get-started?tryitnow">
           Try it out
         </a>
-        <a
-          style="max-width: 220px"
-          class="btn btn-block btn-lg btn-white pl-0 m-0"
-          purpose="animated-arrow-button"
-          target="_blank"
-          href="https://calendly.com/fleetdm/demo?utm_source=homepage+demo+top"
-          >Schedule a demo
+        <a style="max-width: 220px" class="btn btn-block btn-lg btn-white pl-0 m-0" purpose="animated-arrow-button-red" target="_blank" href="https://calendly.com/fleetdm/demo?utm_source=homepage+demo+top">
+          Schedule a demo
         </a>
       </div>
     </div>
@@ -259,29 +227,18 @@
             </div>
           </div>
         </div>
-
       </div>
-
       <div>
         <h3 class="px-4 mb-3">From small businesses to large enterprises.</h3>
         <p class="px-4">
           Teams use osquery with Fleet every day to stay secure and compliant.
         </p>
         <div class="btn-toolbar justify-content-center px-5 px-sm-0 pt-3 pb-5 mb-md-5">
-          <a
-            style="max-width: 220px"
-            class="btn btn-block btn-md btn-primary mx-4"
-            href="/get-started?tryitnow"
-          >
+          <a style="max-width: 220px" class="btn btn-block btn-md btn-primary mx-4" href="/get-started?tryitnow">
             Try it out
           </a>
-          <a
-            style="max-width: 220px"
-            class="btn btn-block btn-lg btn-white pl-0 m-0"
-            purpose="animated-arrow-button"
-            target="_blank"
-            href="https://calendly.com/fleetdm/demo?utm_source=homepage+demo+bottom"
-            >Schedule a demo
+          <a style="max-width: 220px" class="btn btn-block btn-lg btn-white pl-0 m-0" purpose="animated-arrow-button-red" target="_blank" href="https://calendly.com/fleetdm/demo?utm_source=homepage+demo+bottom">
+            Schedule a demo
           </a>
         </div>
       </div>
diff --git a/website/views/pages/landing.ejs b/website/views/pages/landing.ejs
index d9eed4fee9..44f153d9ae 100644
--- a/website/views/pages/landing.ejs
+++ b/website/views/pages/landing.ejs
@@ -8,9 +8,8 @@
           <p>Fleet allows you to harness the power of osquery to stream accurate, real-time data from all of your devices. It’s easy to deploy at scale, granular and open source.</p>
           <div class="flex-row row justify-content-around mx-md-0 mx-4 pt-2">
             <a href="/get-started" class="btn btn-primary col-md-6 col-12">Try it out</a>
-            <a style="color:#F9FAFC;" class="btn col-md-6 col-12" href="https://calendly.com/fleetdm/demo?utm_source=landing+demo+banner" target="_blank">
+            <a purpose="demo-btn-white" style="color:#F9FAFC;" class="btn col-md-6 col-12" href="https://calendly.com/fleetdm/demo?utm_source=landing+demo+banner" target="_blank">
               Schedule a demo
-              <img class="d-inline" style="height: 16px; width: 16px; position: relative; bottom: 2px; margin-left: 8px;" alt="A small white arrow pointing to the right" src="/images/platform/icon-right-arrow-white-16x16@2x.png">
             </a>
           </div>
         </div>