diff --git a/website/assets/images/cloud-city-cta-256x145@2x.png b/website/assets/images/cloud-city-cta-256x145@2x.png
new file mode 100644
index 0000000000..e14daa707f
Binary files /dev/null and b/website/assets/images/cloud-city-cta-256x145@2x.png differ
diff --git a/website/assets/styles/pages/articles/basic-article.less b/website/assets/styles/pages/articles/basic-article.less
index 3268a844e5..63b98d05e0 100644
--- a/website/assets/styles/pages/articles/basic-article.less
+++ b/website/assets/styles/pages/articles/basic-article.less
@@ -131,7 +131,7 @@
     transition-property: transform;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     transition-duration: 500ms;
-    a:not([purpose='edit-button']) {
+    [purpose='sidebar-link'] {
       margin-bottom: 8px;
       display: block;
       color: #515774;
@@ -164,7 +164,7 @@
     border-bottom: 1px solid #E2E4EA;
   }
   .header-hidden { // For scrolling the sidebar with the sticky header
-    transform: translateY(-80px);
+    transform: translateY(-120px);
   }
   [purpose='article-container'] {
     max-width: 800px;
@@ -256,6 +256,107 @@
       background-color: rgba(25, 33, 71, 0.1);
     }
   }
+
+  [purpose='sidebar-cta'] {
+    padding: 0px;
+    border-radius: 12px;
+    border: 1px solid #E2E4EA;
+    background: #FFF;
+    min-height: 290px;
+    text-align: center;
+    margin-top: 24px;
+    margin-bottom: 8px;
+    max-width: 256px;
+    a {
+      text-decoration: none;
+    }
+    &:hover {
+      box-shadow: 0px 0px 0px 3px rgba(0, 0, 0, 0.03);
+    }
+    [purpose='cta-image'] {
+      height: 145px;
+      background-image: url('/images/cloud-city-cta-256x145@2x.png');
+      border-top-left-radius: 12px;
+      border-top-right-radius: 12px;
+      background-size: 100% 145px;
+      background-position: center bottom;
+    }
+    [purpose='cta-text'] {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      padding: 0px 24px 24px 24px;
+      h4 {
+        color: #192147;
+        text-align: center;
+        font-size: 20px;
+        font-weight: 800;
+        line-height: 120%;
+        margin-bottom: 0px;
+      }
+      p {
+        color: #515774;
+        text-align: center;
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 150%;
+        margin-bottom: 8px;
+      }
+    }
+    [purpose='cta-button'] {
+      display: flex;
+      width: 140px;
+      height: 36px;
+      padding: 16px 32px;
+      justify-content: center;
+      align-items: center;
+      color: #FFF;
+      text-align: center;
+      font-size: 14px;
+      font-weight: 700;
+      line-height: 150%;
+      margin-bottom: 16px;
+    }
+    [purpose='cta-platform-icons'] {
+      img {
+        height: 16px;
+        &:not(:last-of-type) {
+          margin-right: 16px;
+        }
+      }
+    }
+  }
+
+  [purpose='sidebar-contact-cta'] {
+    display: flex;
+    padding: 16px;
+    align-items: center;
+    border-radius: 8px;
+    border: 1px solid #E2E4EA;
+    background: #FFF;
+    font-size: 14px;
+    line-height: 150%;
+    color: @core-fleet-black;
+    p {
+      line-height: 120%;
+      margin-bottom: 0px;
+      font-weight: 800;
+    }
+    [parasails-component='animated-arrow-button'] {
+      line-height: 150%;
+    }
+    img {
+      width: 20px;
+      height: 18.947px;
+      margin-right: 10px;
+    }
+    &:hover {
+      box-shadow: 0px 0px 0px 3px rgba(0, 0, 0, 0.03);
+      text-decoration: none;
+    }
+  }
+
   [purpose='article-details'] {
     font-size: 14px;
     line-height: 20px;
diff --git a/website/assets/styles/pages/handbook/basic-handbook.less b/website/assets/styles/pages/handbook/basic-handbook.less
index 60cb15b3e0..431cb9ef60 100644
--- a/website/assets/styles/pages/handbook/basic-handbook.less
+++ b/website/assets/styles/pages/handbook/basic-handbook.less
@@ -206,6 +206,7 @@
         margin-right: 10px;
       }
       &:hover {
+        box-shadow: 0px 0px 0px 3px rgba(0, 0, 0, 0.03);
         text-decoration: none;
       }
     }
diff --git a/website/views/pages/articles/basic-article.ejs b/website/views/pages/articles/basic-article.ejs
index 292a276383..9331b25846 100644
--- a/website/views/pages/articles/basic-article.ejs
+++ b/website/views/pages/articles/basic-article.ejs
@@ -56,12 +56,52 @@
 
           <div purpose="subtopics" id="subtopics" class="d-flex nav flex-column order-lg-1 order-2">
             <p><strong>On this page</strong></p>
-            <a v-for="topic in subtopics" :href="topic.url" class="nav-link p-0">{{topic.title}}</a>
+            <a purpose="sidebar-link" v-for="topic in subtopics" :href="topic.url" class="nav-link p-0">{{topic.title}}</a>
           </div>
           <div purpose="docs-links" class="order-3">
-            <a href="/docs">Docs</a>
-            <a href="/docs/rest-api">REST API</a>
-            <a href="/guides">Guides</a>
+            <a purpose="sidebar-link" href="/docs">Docs</a>
+            <a purpose="sidebar-link" href="/docs/rest-api">REST API</a>
+            <a purpose="sidebar-link" href="/guides">Guides</a>
+            <div purpose="sidebar-cta">
+              <a href="<% if(!me) {%>/register<% } else { %>/start<% } %>">
+              <div purpose="cta-image"></div>
+              <div purpose="cta-text">
+                <% if(!me){ %>
+                  <h4>Try it out</h4>
+                  <p>See what Fleet can do</p>
+                  <a purpose="cta-button" class="btn btn-primary docs-cta-continue-button" href="/register">Start now</a>
+                <% } else if (['2 - Aware', '3 - Intrigued'].includes(me.psychologicalStage)) {%>
+                  <h4>Tried Fleet yet?</h4>
+                  <p>Continue getting started with Fleet</p>
+                  <a purpose="cta-button" class="btn btn-primary" href="/start">Continue</a>
+                <% } else if (me.psychologicalStage === '4 - Has use case') {%>
+                  <h4>Feeling confident?</h4>
+                  <p>Get set up with Fleet</p>
+                  <a purpose="cta-button" class="btn btn-primary" hredf="/start">Continue</a>
+                <% } else if (['5 - Personally confident', '6 - Has team buy-in'].includes(me.psychologicalStage)) {%>
+                  <h4>Talk to the team</h4>
+                  <p>Let’s get you set up!</p>
+                  <a purpose="cta-button" class="btn btn-primary" href="/start">Continue</a>
+                <%}%>
+                <div purpose="cta-platform-icons" class="d-flex flex-row justify-content-between align-items-center">
+                  <img src="/images/os-macos-black-50-16x16@2x.png" alt="macOS" />
+                  <img src="/images/os-windows-black-50-16x16@2x.png" alt="Windows" />
+                  <img src="/images/os-linux-black-50-16x16@2x.png" alt="Linux" />
+                </div>
+              </div>
+              </a>
+            </div>
+            <div>
+              <a href="/contact" purpose="sidebar-contact-cta" class="d-flex flex-row justify-content-start">
+              <div class="d-flex align-self-start">
+                <img alt="Ask us anything" src="/images/icon-question-20x19@2x.png">
+              </div>
+              <div>
+                <p class="mb-0">Questions?</p>
+                <animated-arrow-button text-color="#515774" class="py-0" style="font-weight: 400" href="/contact">Ask us anything</animated-arrow-button>
+              </div>
+              </a>
+            </div>
             <a purpose="edit-button" class="d-inline-block text-nowrap" target="_blank" :href="'https://github.com/fleetdm/fleet/edit/main/articles/'+thisPage.sectionRelativeRepoPath"><img alt="A pencil icon" src="/images/pencil-16x16@2x.png">Edit page</a>
           </div>
           <!-- <div class="d-flex flex-row align-items-center justify-content-start pt-3 pt-sm-1">
@@ -82,22 +122,11 @@
               <img style="height: 28px; width: 28px; border-radius: 100%;" alt="The author's GitHub profile picture" :src="'https://github.com/'+thisPage.meta.authorGitHubUsername+'.png?size=200'">
               <p class="pl-2 font-weight-bold"><%=thisPage.meta.authorFullName %></p>
             </div>
-
           </div>
         </div>
         <div purpose="article-content" class="d-flex flex-column" parasails-has-no-page-script>
           <%- partial(path.relative(path.dirname(__filename), path.resolve( sails.config.appPath, path.join(sails.config.builtStaticContent.compiledPagePartialsAppPath, thisPage.htmlId)))) %>
         </div>
-        <hr>
-        <div purpose="bottom-cta" class="d-block">
-          <h3 style="font-size: 24px; line-height: 32px;">Get started</h3>
-          <div class="d-flex flex-sm-row flex-column align-items-center">
-            <a href="/register" class="d-flex btn btn-primary justify-content-center align-items-center" purpose="next-steps-button">
-              Start now
-            </a>
-            <animated-arrow-button class="ml-sm-4" href="/contact">Talk to us</animated-arrow-button>
-          </div>
-        </div>
       </div>
     </div>
   </div>