diff --git a/app/assets/stylesheets/articles.scss b/app/assets/stylesheets/articles.scss
index 48bb986b6..15d030936 100644
--- a/app/assets/stylesheets/articles.scss
+++ b/app/assets/stylesheets/articles.scss
@@ -140,62 +140,6 @@
   }
 }
 
-// Feed Card: Signup CTA
-.feed-cta {
-  background: lighten($purple, 6%) !important;
-  border: 1px solid darken($bold-blue, 5%) !important;
-  box-shadow: 5px 6px 0px darken($bold-blue, 15%) !important;
-  margin: 0.8em 0;
-  .cta-container {
-    padding: calc(1vw + 7px) 9px;
-    margin-bottom: 15px;
-  }
-  h2 {
-    text-align: center;
-    margin-right: 9px;
-    padding-right: 9px;
-    font-size: 1.5em;
-  }
-  h3 {
-    text-align: center;
-    margin-right: 9px;
-    padding-right: 9px;
-    font-size: 17px !important;
-  }
-  .button-container {
-    margin-top: 40px;
-    text-align: center;
-    margin-right: 9px;
-    padding-right: 9px;
-  }
-  img.secondary-logo {
-    width: 190px;
-    height: 190px;
-    margin: 18px auto 35px;
-    border-radius: 22px;
-    display: block;
-    transform: rotate(6deg);
-  }
-  .cta-button {
-    text-align: center;
-    margin: 5px;
-    padding: 12px 5px;
-    min-width: 230px;
-    font-size: 1.1em;
-    display: inline-block;
-    height: auto;
-    text-align: center;
-    font-weight: bold;
-    border-radius: 100px;
-    background-color: $bold-blue;
-    color: white !important;
-  }
-  .feed-cta-sub {
-    margin-top: 20px;
-    font-size: 15px;
-  }
-}
-
 // MOBILE ONLY navigation to switch between tabs (these on top of the feed).
 // Although it uses different markup :/.
 .narrow-nav-menu {
diff --git a/app/assets/stylesheets/signin.scss b/app/assets/stylesheets/signin.scss
index d45450c32..c65d7c3bf 100644
--- a/app/assets/stylesheets/signin.scss
+++ b/app/assets/stylesheets/signin.scss
@@ -1,4 +1,75 @@
 @import 'variables';
+@import 'config/import';
+
+.authentication-feed {
+  &__card {
+    display: grid;
+    grid-gap: var(--su-6);
+    padding: var(--su-6);
+    margin: var(--su-3);
+
+    @include generate-box(
+      $level: 1,
+      $bg: #f5f6fe,
+      $border: var(--accent-brand),
+      $color: var(--card-color)
+    );
+
+    @media (min-width: $breakpoint-s) {
+      padding: var(--su-7);
+    }
+  }
+
+  &__container {
+    @media (min-width: $breakpoint-s) {
+      display: flex;
+      grid-gap: var(--su-7);
+      flex-direction: row;
+      align-items: center;
+    }
+  }
+
+  &__logo {
+    border-radius: var(--radius);
+    height: var(--su-8);
+    margin-bottom: var(--su-2);
+    transform: rotate(-10deg);
+    width: var(--su-8);
+
+    @media (min-width: $breakpoint-s) {
+      margin: 0 auto;
+      height: 80px;
+      width: 80px;
+    }
+  }
+
+  &__title {
+    color: var(--card-color);
+    font-size: var(--fs-2xl);
+    line-height: var(--lh-tight);
+
+    @media (min-width: $breakpoint-s) {
+      font-size: var(--fs-3xl);
+    }
+  }
+
+  &__description {
+    color: var(--card-color-secondary);
+  }
+
+  &__actions {
+    display: grid;
+    grid-gap: var(--su-1);
+
+    @media (min-width: $breakpoint-s) {
+      display: flex;
+      flex-direction: column;
+      width: max-content;
+      justify-self: center;
+    }
+  }
+}
+
 #page-content.registrations {
   .devise-container {
     min-height: 480px;
diff --git a/app/views/stories/_sign_in_invitation.html.erb b/app/views/stories/_sign_in_invitation.html.erb
index a21671972..e8c9050e9 100644
--- a/app/views/stories/_sign_in_invitation.html.erb
+++ b/app/views/stories/_sign_in_invitation.html.erb
@@ -1,24 +1,24 @@
-<div class="single-article single-article-small-pic feed-cta" id="in-feed-cta">
-  <div class="cta-container" id="cta-content">
-    <img class="secondary-logo" src="<%= cloudinary(safe_logo_url(SiteConfig.secondary_logo_url), 190) %>"
-         alt="Secondary <%= community_name %> logo" />
-
-    <h2>
-      <a href="/"><%= community_name %></a> is a community of <br />
-      <%= number_with_delimiter User.registered.estimated_count %> amazing <%= community_members_label %>
-    </h2>
-
-    <h3>
-      Create your profile to customize your experience and get involved.
-    </h3>
-
-    <div class="button-container">
-      <a href="/enter" class="cta cta-button" aria-label="Sign up.">
-        Join Now
-      </a>
-      <div class="feed-cta-sub">
-        <em>We require social login to prevent abuse.</em>
-      </div>
+<div class="authentication-feed__card" id="in-feed-cta">
+  <div class="authentication-feed__container">
+    <img class="authentication-feed__logo" src="<%= cloudinary(safe_logo_url(SiteConfig.secondary_logo_url), 190) %>"
+          alt="Secondary <%= community_name %> logo" />
+    <div class="authentication-feed__content">
+      <h2 class="authentication-feed__title">
+<a href="/"><%= community_name %></a> is a community of <br />
+        <%= number_with_delimiter User.registered.estimated_count %> amazing <%= community_members_label %>
+      </h2>
+      <p class="authentication-feed__description">
+        Log in to customize your experience and get involved.
+      </p>
     </div>
   </div>
+
+  <div class="authentication-feed__actions">
+    <a href="/enter" class="crayons-btn" aria-label="Create new account">
+      Create new account
+    </a>
+    <a href="/enter" class="crayons-btn crayons-btn--ghost-brand" aria-label="Log in">
+      Log in
+    </a>
+  </div>
 </div>
diff --git a/spec/system/articles/user_visits_articles_by_timeframe_spec.rb b/spec/system/articles/user_visits_articles_by_timeframe_spec.rb
index 5a6637a17..626d7a6cf 100644
--- a/spec/system/articles/user_visits_articles_by_timeframe_spec.rb
+++ b/spec/system/articles/user_visits_articles_by_timeframe_spec.rb
@@ -72,7 +72,7 @@ RSpec.describe "User visits articles by timeframe", type: :system do
       it "shows correct articles and cta count", :aggregate_failures do
         shows_correct_articles_count(5)
         shows_main_article
-        expect(page).to have_selector(".feed-cta", count: 1)
+        expect(page).to have_selector(".authentication-feed__card", count: 1)
 
         within("#articles-list") do
           expect(page).to have_text(article.title)
@@ -90,7 +90,7 @@ RSpec.describe "User visits articles by timeframe", type: :system do
       it "shows correct articles and cta-count", :aggregate_failures do
         shows_correct_articles_count(5)
         shows_main_article
-        expect(page).to have_selector(".feed-cta", count: 1)
+        expect(page).to have_selector(".authentication-feed__card", count: 1)
 
         within("#articles-list") do
           expect(page).to have_text(article.title)