diff --git a/website/assets/js/pages/articles/articles.page.js b/website/assets/js/pages/articles/articles.page.js
index a62fdb0c25..29887c22fc 100644
--- a/website/assets/js/pages/articles/articles.page.js
+++ b/website/assets/js/pages/articles/articles.page.js
@@ -39,8 +39,8 @@ parasails.registerPage('articles', {
         this.categoryDescription = 'Learn more about how to use Fleet to accomplish your goals.';
         break;
       case 'announcements':
-        this.articleCategory = 'Announcements';
-        this.categoryDescription = 'The latest news from Fleet.';
+        this.articleCategory = 'News';
+        this.categoryDescription = 'The latest announcements from Fleet.';
         break;
       case 'podcasts':
         this.articleCategory = 'Podcasts';
@@ -80,6 +80,8 @@ parasails.registerPage('articles', {
   //  ║║║║ ║ ║╣ ╠╦╝╠═╣║   ║ ║║ ║║║║╚═╗
   //  ╩╝╚╝ ╩ ╚═╝╩╚═╩ ╩╚═╝ ╩ ╩╚═╝╝╚╝╚═╝
   methods: {
-
+    clickGotoStart: function() {
+      this.goto('/register');
+    },
   }
 });
diff --git a/website/assets/styles/pages/articles/articles.less b/website/assets/styles/pages/articles/articles.less
index 4a852f6840..34b474e76f 100644
--- a/website/assets/styles/pages/articles/articles.less
+++ b/website/assets/styles/pages/articles/articles.less
@@ -117,6 +117,7 @@
   }
 
   [purpose='search'] {
+    width: 256px;
     // Note: We're using classes here to override the default Docsearch styles;
     button {
       width: 100%;
@@ -201,6 +202,111 @@
     }
   }
 
+  [purpose='sidebar-and-articles'] {
+    display: flex;
+    flex-direction: row-reverse;
+  }
+  [purpose='sidebar'] {
+    margin-left: 16px;
+    min-width: 256px;
+  }
+  [purpose='nav-links'] {
+    display: flex;
+    flex-direction: column;
+    margin-top: 16px;
+    a {
+      margin-bottom: 12px;
+      display: block;
+      color: var(--text-text-brand, #192147);
+
+      /* Body SM (FKA Card text) */
+      font-family: Inter;
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 20px; /* 142.857% */
+      text-decoration: none;
+    }
+  }
+
+
+
+  [purpose='sidebar-cta'] {
+    padding: 0px;
+    border-radius: 12px;
+    border: 1px solid #E2E4EA;
+    background: #FFF;
+    min-height: 290px;
+    text-align: center;
+    cursor: pointer;
+    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='article-rows'] {
+    padding-right: 32px;
+    width: 100%;
+  }
   [purpose='article-row'] {
     padding: 24px 0px;
     border-bottom: 1px solid #E2E4EA;
@@ -400,7 +506,7 @@
     }
     [purpose='category-title'] {
       padding-bottom: 40px;
-      margin-right: 35px;
+      // margin-right: 35px;
     }
     [purpose='articles'] {
       [purpose='article-card'] {
@@ -446,6 +552,27 @@
         }
       }
     }
+    [purpose='search'] {
+      width: 100%;
+    }
+    [purpose='sidebar-and-articles'] {
+      display: flex;
+      flex-direction: column;
+    }
+    [purpose='sidebar'] {
+      margin-left: 0px;
+    }
+    [purpose='article-rows'] {
+      padding-right: 0px;
+      width: 100%;
+    }
+    [purpose='nav-links'] {
+      margin-top: 0px;
+      margin-bottom: 40px;
+    }
+    [purpose='sidebar-cta'] {
+      display: none;
+    }
     [purpose='articles'] {
       [purpose='article-card'] {
         flex: 1 1 330px;
diff --git a/website/views/pages/articles/articles.ejs b/website/views/pages/articles/articles.ejs
index a48018d6d8..f567c6635c 100644
--- a/website/views/pages/articles/articles.ejs
+++ b/website/views/pages/articles/articles.ejs
@@ -29,24 +29,64 @@
           </div>
         </div>
       </div>
-    <div purpose="article-rows" v-if="['guides', 'announcements', 'releases', 'articles'].includes(category)">
-      <a :href="article.url" purpose="article-row" class="d-flex flex-lg-row flex-row justify-content-between" v-for="article in articles">
-        <div purpose="article-name-and-description" class="d-flex flex-column">
-          <div class="d-flex flex-column">
-            <p purpose="article-name">{{article.meta.articleTitle}}</p>
+
+    <div purpose="sidebar-and-articles">
+      <div purpose="sidebar">
+        <div purpose="nav-links">
+          <a href="/announcements">News</a>
+          <a href="/testimonials">Case studies</a>
+          <a href="/articles">Articles</a>
+          <a href="/releases">Releases</a>
+        </div>
+        <div purpose="sidebar-cta">
+          <a href="<% if(typeof me === 'undefined') {%>/register<% } else { %>/start<% } %>">
+          <div purpose="cta-image"></div>
+          <div purpose="cta-text">
+            <% if(typeof me === 'undefined'){ %>
+              <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>
-          <div purpose="article-description" v-if="article.meta.description"><p>{{article.meta.description}}</p></div>
-          <div purpose="publish-date"><js-timestamp format="billing" :at="article.meta.publishedOn"></js-timestamp></div>
+          </a>
         </div>
-        <div class="d-flex flex-column justify-content-center">
-          <svg purpose="animated-arrow" style="stroke: #192147;" xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12">
-            <path purpose="arrow-line" d="M1 6H9" stroke-width="2" stroke-linecap="round"/>
-            <path purpose="chevron" d="M1.35712 1L5.64283 6L1.35712 11" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-          </svg>
-        </div>
-      </a>
+      </div>
+      <div purpose="article-rows">
+        <a :href="article.url" purpose="article-row" class="d-flex flex-lg-row flex-row justify-content-between" v-for="article in articles">
+          <div purpose="article-name-and-description" class="d-flex flex-column">
+            <div class="d-flex flex-column">
+              <p purpose="article-name">{{article.meta.articleTitle}}</p>
+            </div>
+            <div purpose="article-description" v-if="article.meta.description"><p>{{article.meta.description}}</p></div>
+            <div purpose="publish-date"><js-timestamp format="billing" :at="article.meta.publishedOn"></js-timestamp></div>
+          </div>
+          <div class="d-flex flex-column justify-content-center">
+            <svg purpose="animated-arrow" style="stroke: #192147;" xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12">
+              <path purpose="arrow-line" d="M1 6H9" stroke-width="2" stroke-linecap="round"/>
+              <path purpose="chevron" d="M1.35712 1L5.64283 6L1.35712 11" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+          </div>
+        </a>
+      </div>
     </div>
-    <div purpose="articles" class="card-deck d-flex justify-content-center" v-else>
+<!--     <div purpose="articles" class="card-deck d-flex justify-content-center" v-else>
       <div purpose="article-card" class="card" v-for="article in articles">
         <a purpose="article-card-link" :href="article.url">
           <img style="width: 100%; height: auto;" :src="[article.meta.articleImageUrl ? article.meta.articleImageUrl : '/images/blog-fleet-logo-white-background-800x450@2x.png']" alt="Article hero image">
@@ -66,7 +106,7 @@
       </div>
       <div purpose="article-card" class="card invisible mb-0 d-none d-sm-flex">
       </div>
-    </div>
+    </div> -->
   </div>
 
 </div>