diff --git a/app/assets/javascripts/utilities/buildArticleHTML.js b/app/assets/javascripts/utilities/buildArticleHTML.js
index ccc8bbaa3..0f870db15 100644
--- a/app/assets/javascripts/utilities/buildArticleHTML.js
+++ b/app/assets/javascripts/utilities/buildArticleHTML.js
@@ -209,7 +209,7 @@ function buildArticleHTML(article) {
     }">${filterXSS(article.user.name)}</a>
     ${
       isArticle
-        ? `<div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"><button id="story-author-preview-trigger-${article.id}" aria-controls="story-author-preview-content-${article.id}" class="profile-preview-card__trigger fs-s crayons-btn crayons-btn--ghost p-1 -ml-1" aria-label="${article.user.name} profile details">${article.user.name}</button>${previewCardContent}</div>`
+        ? `<div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"><button id="story-author-preview-trigger-${article.id}" aria-controls="story-author-preview-content-${article.id}" class="profile-preview-card__trigger fs-s crayons-btn crayons-btn--ghost p-1 -ml-1 -my-2" aria-label="${article.user.name} profile details">${article.user.name}</button>${previewCardContent}</div>`
         : ''
     }
             ${forOrganization}
diff --git a/app/assets/stylesheets/components/autocomplete.scss b/app/assets/stylesheets/components/autocomplete.scss
index c67b43a8a..0c358637a 100644
--- a/app/assets/stylesheets/components/autocomplete.scss
+++ b/app/assets/stylesheets/components/autocomplete.scss
@@ -14,13 +14,12 @@
     &[data-reach-popover] {
       // Reach UI adds a width directly to this element as an inline style. !important is needed to make sure the size is constrained.
       width: 250px !important;
-
-      @include generate-box(
-        $level: 1,
-        $bg: var(--card-bg),
-        $border: var(--card-color),
-        $color: var(--card-color)
-      );
+      background: var(--card-bg);
+      color: var(--card-color);
+      border-radius: var(--radius);
+      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
+        0 4px 6px -2px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.1);
+      border: none;
     }
   }
 
diff --git a/app/assets/stylesheets/components/dropdowns.scss b/app/assets/stylesheets/components/dropdowns.scss
index 35502ead8..6e2230fc2 100644
--- a/app/assets/stylesheets/components/dropdowns.scss
+++ b/app/assets/stylesheets/components/dropdowns.scss
@@ -1,17 +1,16 @@
 @import '../config/import';
 
 .crayons-dropdown {
-  @include generate-box(
-    $level: 2,
-    $bg: var(--card-bg),
-    $border: var(--card-color),
-    $color: var(--card-color)
-  );
   position: absolute;
   display: none; // initially hidden
   padding: var(--su-4);
   min-width: 250px;
   z-index: var(--z-dropdown);
+  background: var(--card-bg);
+  color: var(--card-color);
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
+    0 4px 6px -2px rgba(0, 0, 0, 0.05), 0 0 0 1px var(--base-a10);
+  border-radius: var(--radius);
 
   @media (min-width: $breakpoint-s) {
     max-width: 360px;
@@ -21,7 +20,7 @@
   &.side-bar {
     bottom: 100%;
     font-size: var(--fs-base);
-    padding: var(--su-1);
+    padding: var(--su-2);
     right: var(--su-1);
     @media (min-width: $breakpoint-m) {
       right: auto;
diff --git a/app/assets/stylesheets/components/forms.scss b/app/assets/stylesheets/components/forms.scss
index 9e1637819..645994a4a 100644
--- a/app/assets/stylesheets/components/forms.scss
+++ b/app/assets/stylesheets/components/forms.scss
@@ -17,7 +17,7 @@
   &-focus {
     background-color: var(--form-bg-focus);
     border-color: var(--form-border-focus);
-    box-shadow: 1px 1px 0 var(--form-border-focus);
+    box-shadow: 0 0 0 1px var(--form-border-focus);
   }
 
   &-disabled {
diff --git a/app/assets/stylesheets/components/modals.scss b/app/assets/stylesheets/components/modals.scss
index c8449d469..7ccd3ad20 100644
--- a/app/assets/stylesheets/components/modals.scss
+++ b/app/assets/stylesheets/components/modals.scss
@@ -35,7 +35,7 @@
   pointer-events: none;
 
   &__overlay {
-    background: var(--base-100);
+    background: rgba(0, 0, 0, 0.6);
     opacity: 0.5;
     position: absolute;
     left: 0;
@@ -59,22 +59,22 @@
     max-height: 100%;
     width: 100%;
     height: 100%;
+    overflow: hidden;
     pointer-events: auto;
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
+      0 10px 10px -5px rgba(0, 0, 0, 0.05), 0 0 0 1px var(--base-a10);
 
     @media (min-width: $breakpoint-s) {
-      @include generate-box(
-        $level: 3,
-        $bg: var(--card-bg),
-        $border: var(--card-color),
-        $color: var(--card-color)
-      );
+      background: var(--card-bg);
+      color: var(--card-color);
+      border-radius: var(--radius-large);
       max-height: calc(100% - var(--su-6));
       height: auto;
       width: 90%;
     }
 
     &__header {
-      border-bottom: 2px solid var(--card-color);
+      border-bottom: 1px solid var(--base-a5);
       display: flex;
       align-items: center;
       justify-content: space-between;
diff --git a/app/assets/stylesheets/components/notices.scss b/app/assets/stylesheets/components/notices.scss
index d385c522c..5577f4a5d 100644
--- a/app/assets/stylesheets/components/notices.scss
+++ b/app/assets/stylesheets/components/notices.scss
@@ -2,46 +2,23 @@
 
 .crayons-notice {
   padding: var(--su-4);
-  @include generate-box(
-    $level: 1,
-    $bg: var(--card-bg),
-    $border: var(--card-color),
-    $color: var(--card-color)
-  );
+  background: var(--card-bg);
+  color: var(--card-color);
+  border-radius: var(--radius);
 
   &--danger {
-    @include generate-box(
-      $level: 1,
-      $bg: var(--accent-danger-a10),
-      $border: var(--accent-danger),
-      $color: var(--card-color)
-    );
+    background: var(--accent-danger-a10);
   }
 
   &--warning {
-    @include generate-box(
-      $level: 1,
-      $bg: var(--accent-warning-a10),
-      $border: var(--accent-warning),
-      $color: var(--card-color)
-    );
+    background: var(--accent-warning-a10);
   }
 
   &--success {
-    @include generate-box(
-      $level: 1,
-      $bg: var(--accent-success-a10),
-      $border: var(--accent-success),
-      $color: var(--card-color)
-    );
+    background: var(--accent-success-a10);
   }
 
   &--info {
-    @include generate-box(
-      $level: 1,
-      $bg: var(--accent-brand-a10),
-      $border: var(--accent-brand),
-      $color: var(--card-color)
-    );
+    background: var(--accent-brand-a10);
   }
 }
diff --git a/app/assets/stylesheets/components/snackbars.scss b/app/assets/stylesheets/components/snackbars.scss
index 2d3732ad7..598dbeefe 100644
--- a/app/assets/stylesheets/components/snackbars.scss
+++ b/app/assets/stylesheets/components/snackbars.scss
@@ -19,12 +19,11 @@
   }
 
   &__item {
-    @include generate-box(
-      $level: 1,
-      $bg: var(--snackbar-bg),
-      $border: var(--snackbar-border),
-      $color: var(--snackbar-color)
-    );
+    border-radius: var(--radius);
+    background: var(--snackbar-bg);
+    color: var(--snackbar-color);
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
+      0 4px 6px -2px rgba(0, 0, 0, 0.05);
     display: none;
     align-items: center;
     justify-content: space-between;
diff --git a/app/assets/stylesheets/config/_colors.scss b/app/assets/stylesheets/config/_colors.scss
index ec70dc9d3..d18cd0cb4 100644
--- a/app/assets/stylesheets/config/_colors.scss
+++ b/app/assets/stylesheets/config/_colors.scss
@@ -168,9 +168,9 @@
   --button-ghost-dimmed-inverted-color-hover: var(--base-100);
 
   // Forms
-  --form-bg: var(--base-0);
+  --form-bg: var(--base-inverted);
   --form-bg-focus: var(--base-inverted);
-  --form-border: var(--base-30);
+  --form-border: var(--base-20);
   --form-border-hover: var(--base-40);
   --form-border-focus: var(--accent-brand);
   --form-placeholder-color: var(--base-60);
@@ -185,7 +185,6 @@
 
   // Snackbars
   --snackbar-bg: var(--base-90);
-  --snackbar-border: var(--base-100);
   --snackbar-color: var(--body-color-inverted);
 
   // Indicators
diff --git a/app/assets/stylesheets/config/_import.scss b/app/assets/stylesheets/config/_import.scss
index 6feeba535..42efc5d4f 100644
--- a/app/assets/stylesheets/config/_import.scss
+++ b/app/assets/stylesheets/config/_import.scss
@@ -205,30 +205,3 @@ $z-indexes: (
     }
   }
 }
-
-////////////////////////////////////////////////////////////////////////////////////
-
-// generate-box() - generating classes for different style
-//
-// This mixin automates process of generating styles for different
-// types of boxes used across Crayons.
-//
-// @param {integer} $level    Visual elevation level: 0-4
-// @param {color} $bg         Background color
-// @param {color} $border     Border and shadow colors
-// @param {color} $color      Content color
-
-@mixin generate-box(
-  $level: 1,
-  $bg: var(--card-bg),
-  $border: var(--base-100),
-  $color: var(--card-color)
-) {
-  background: $bg;
-  border: 2px solid $border;
-  @if $level > 0 {
-    box-shadow: #{pow(2, $level) + px} #{pow(2, $level) + px} 0 $border;
-  }
-  color: $color;
-  border-radius: var(--radius);
-}
diff --git a/app/assets/stylesheets/config/_variables.scss b/app/assets/stylesheets/config/_variables.scss
index 88534a703..63ba1fcd4 100644
--- a/app/assets/stylesheets/config/_variables.scss
+++ b/app/assets/stylesheets/config/_variables.scss
@@ -33,7 +33,8 @@
   // Border radius ///////////////////////////////////////////////////////////////////
   ////////////////////////////////////////////////////////////////////////////////////
 
-  --radius: 5px;
+  --radius: 0.375rem;
+  --radius-large: 0.75rem;
 
   ////////////////////////////////////////////////////////////////////////////////////
   // Transitions /////////////////////////////////////////////////////////////////////
diff --git a/app/assets/stylesheets/ltags/UserSubscriptionTag.scss b/app/assets/stylesheets/ltags/UserSubscriptionTag.scss
index c5bb9b87e..2106afb6b 100644
--- a/app/assets/stylesheets/ltags/UserSubscriptionTag.scss
+++ b/app/assets/stylesheets/ltags/UserSubscriptionTag.scss
@@ -2,12 +2,10 @@
 
 .ltag__user-subscription-tag {
   &__container {
-    @include generate-box(
-      $level: 1,
-      $bg: var(--card-bg),
-      $border: var(--card-color),
-      $color: var(--card-color)
-    );
+    background: var(--card-bg);
+    color: var(--card-color);
+    border-radius: var(--radius);
+    border: 1px solid var(--card-color);
 
     box-sizing: border-box;
     display: flex;
diff --git a/app/assets/stylesheets/signin.scss b/app/assets/stylesheets/signin.scss
index e6d08e96f..f56ea661b 100644
--- a/app/assets/stylesheets/signin.scss
+++ b/app/assets/stylesheets/signin.scss
@@ -8,13 +8,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);
       margin: 0 0 var(--su-3) 0;
diff --git a/app/assets/stylesheets/signup-modal.scss b/app/assets/stylesheets/signup-modal.scss
index 32bbf5366..7bbb1a202 100644
--- a/app/assets/stylesheets/signup-modal.scss
+++ b/app/assets/stylesheets/signup-modal.scss
@@ -8,13 +8,9 @@
     margin-right: var(--su-4);
     height: auto;
     width: auto;
-
-    @include generate-box(
-      $level: 2,
-      $bg: var(--base-inverted),
-      $border: var(--base),
-      $color: var(--card-color)
-    );
+    background: var(--card-bg);
+    color: var(--card-color);
+    border-radius: var(--radius);
 
     @media (min-width: $breakpoint-s) {
       margin: inherit;
diff --git a/app/assets/stylesheets/themes/hacker.scss b/app/assets/stylesheets/themes/hacker.scss
index a7a628968..dc0f3a671 100644
--- a/app/assets/stylesheets/themes/hacker.scss
+++ b/app/assets/stylesheets/themes/hacker.scss
@@ -178,7 +178,6 @@
 
   // Snackbars
   --snackbar-bg: var(--base-10);
-  --snackbar-border: var(--accent-brand);
   --snackbar-color: var(--accent-brand);
 
   // Indicators
diff --git a/app/assets/stylesheets/themes/minimal.scss b/app/assets/stylesheets/themes/minimal.scss
index a82a82920..239a43aa3 100644
--- a/app/assets/stylesheets/themes/minimal.scss
+++ b/app/assets/stylesheets/themes/minimal.scss
@@ -176,7 +176,6 @@
 
   // Snackbars
   --snackbar-bg: var(--base-90);
-  --snackbar-border: var(--base-100);
   --snackbar-color: var(--body-color-inverted);
 
   // Indicators
diff --git a/app/assets/stylesheets/themes/night.scss b/app/assets/stylesheets/themes/night.scss
index 245f6ea6c..6d0c7cb32 100644
--- a/app/assets/stylesheets/themes/night.scss
+++ b/app/assets/stylesheets/themes/night.scss
@@ -176,7 +176,6 @@
 
   // Snackbars
   --snackbar-bg: var(--base-10);
-  --snackbar-border: var(--base-20);
   --snackbar-color: var(--card-color);
 
   // Indicators
diff --git a/app/assets/stylesheets/themes/pink.scss b/app/assets/stylesheets/themes/pink.scss
index 46b7c0eff..a0d04b4bd 100644
--- a/app/assets/stylesheets/themes/pink.scss
+++ b/app/assets/stylesheets/themes/pink.scss
@@ -176,7 +176,6 @@
 
   // Snackbars
   --snackbar-bg: var(--base-90);
-  --snackbar-border: var(--base-100);
   --snackbar-color: var(--body-color-inverted);
 
   // Indicators
diff --git a/app/assets/stylesheets/views/article-form.scss b/app/assets/stylesheets/views/article-form.scss
index f21d12545..d23190450 100644
--- a/app/assets/stylesheets/views/article-form.scss
+++ b/app/assets/stylesheets/views/article-form.scss
@@ -233,12 +233,11 @@
 
 .crayons-article-form {
   &__tagsoptions {
-    @include generate-box(
-      $level: 2,
-      $bg: var(--card-bg),
-      $border: var(--card-color),
-      $color: var(--card-color)
-    );
+    background: var(--card-bg);
+    color: var(--card-color);
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
+      0 4px 6px -2px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.1);
+    border-radius: var(--radius);
 
     position: absolute;
     left: 0;
diff --git a/app/assets/stylesheets/views/comments.scss b/app/assets/stylesheets/views/comments.scss
index 22e5d833b..68bdb5c3a 100644
--- a/app/assets/stylesheets/views/comments.scss
+++ b/app/assets/stylesheets/views/comments.scss
@@ -22,7 +22,7 @@
     &:focus-within {
       background-color: var(--form-bg-focus);
       border-color: var(--form-border-focus);
-      box-shadow: 1px 1px 0 var(--form-border-focus);
+      box-shadow: 0 0 0 1px var(--form-border-focus);
     }
   }
 
diff --git a/app/assets/stylesheets/views/listings.scss b/app/assets/stylesheets/views/listings.scss
index f68ed9720..1c6fc8357 100644
--- a/app/assets/stylesheets/views/listings.scss
+++ b/app/assets/stylesheets/views/listings.scss
@@ -46,12 +46,11 @@
 
 .listingform {
   &__tagsoptions {
-    @include generate-box(
-      $level: 2,
-      $bg: var(--card-bg),
-      $border: var(--card-color),
-      $color: var(--card-color)
-    );
+    background: var(--card-bg);
+    color: var(--card-color);
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
+      0 4px 6px -2px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.1);
+    border-radius: var(--radius);
 
     position: absolute;
     left: 0;
diff --git a/app/assets/stylesheets/views/signin.scss b/app/assets/stylesheets/views/signin.scss
index f52360df1..0d32cf4bf 100644
--- a/app/assets/stylesheets/views/signin.scss
+++ b/app/assets/stylesheets/views/signin.scss
@@ -8,13 +8,10 @@
     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)
-    );
+    background: var(--accent-brand-a10);
+    color: var(--card-color);
+    border-radius: var(--radius);
+    border: 1px solid var(--accent-brand-a10);
 
     @media (min-width: $breakpoint-s) {
       padding: var(--su-7);
diff --git a/app/assets/stylesheets/views/signup-modal.scss b/app/assets/stylesheets/views/signup-modal.scss
index 89c055f23..334e4b054 100644
--- a/app/assets/stylesheets/views/signup-modal.scss
+++ b/app/assets/stylesheets/views/signup-modal.scss
@@ -49,7 +49,6 @@
   }
 
   &__footer {
-    border-top: 2px solid var(--base-100);
     padding: var(--su-2) var(--su-4) 0 var(--su-4);
     margin: 0 calc(-1 * var(--modal-body-padding)) 0
       calc(-1 * var(--modal-body-padding));
diff --git a/app/javascript/articles/__tests__/__snapshots__/Article.test.jsx.snap b/app/javascript/articles/__tests__/__snapshots__/Article.test.jsx.snap
index 7c05216dc..48ae339ee 100644
--- a/app/javascript/articles/__tests__/__snapshots__/Article.test.jsx.snap
+++ b/app/javascript/articles/__tests__/__snapshots__/Article.test.jsx.snap
@@ -70,7 +70,7 @@ Object {
                       <button
                         aria-controls="story-author-preview-content-62407"
                         aria-label="Stella Macejkovic profile details"
-                        class="profile-preview-card__trigger fs-s p-1 crayons-btn crayons-btn--ghost -ml-1"
+                        class="profile-preview-card__trigger fs-s p-1 crayons-btn crayons-btn--ghost -ml-1 -my-2"
                         id="story-author-preview-trigger-62407"
                       >
                         Stella Macejkovic
@@ -318,7 +318,7 @@ Object {
                     <button
                       aria-controls="story-author-preview-content-62407"
                       aria-label="Stella Macejkovic profile details"
-                      class="profile-preview-card__trigger fs-s p-1 crayons-btn crayons-btn--ghost -ml-1"
+                      class="profile-preview-card__trigger fs-s p-1 crayons-btn crayons-btn--ghost -ml-1 -my-2"
                       id="story-author-preview-trigger-62407"
                     >
                       Stella Macejkovic
diff --git a/app/javascript/profilePreviewCards/MinimalProfilePreviewCard.jsx b/app/javascript/profilePreviewCards/MinimalProfilePreviewCard.jsx
index 076277a41..094dfe6d1 100644
--- a/app/javascript/profilePreviewCards/MinimalProfilePreviewCard.jsx
+++ b/app/javascript/profilePreviewCards/MinimalProfilePreviewCard.jsx
@@ -12,7 +12,7 @@ export const MinimalProfilePreviewCard = ({
     <button
       id={triggerId}
       aria-controls={contentId}
-      class="profile-preview-card__trigger fs-s p-1 crayons-btn crayons-btn--ghost -ml-1"
+      class="profile-preview-card__trigger fs-s p-1 crayons-btn crayons-btn--ghost -ml-1 -my-2"
       aria-label={`${name} profile details`}
     >
       {name}
diff --git a/app/views/articles/_single_story.html.erb b/app/views/articles/_single_story.html.erb
index cdaca1120..d419b91ac 100644
--- a/app/views/articles/_single_story.html.erb
+++ b/app/views/articles/_single_story.html.erb
@@ -39,7 +39,7 @@
               <%= story.cached_user.name %>
             </a>
             <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block">
-              <button id="story-author-preview-trigger-<%= story.id %>" aria-controls="story-author-preview-content-<%= story.id %>" class="profile-preview-card__trigger fs-s p-1 -ml-1 crayons-btn crayons-btn--ghost" aria-label="<%= story.cached_user.name %> profile details">
+              <button id="story-author-preview-trigger-<%= story.id %>" aria-controls="story-author-preview-content-<%= story.id %>" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="<%= story.cached_user.name %> profile details">
                 <%= story.cached_user.name %>
               </button>
               <div
diff --git a/app/views/layouts/_nav_menu.html.erb b/app/views/layouts/_nav_menu.html.erb
index a48699bc5..4c3d45b46 100644
--- a/app/views/layouts/_nav_menu.html.erb
+++ b/app/views/layouts/_nav_menu.html.erb
@@ -1,6 +1,6 @@
-<div class="crayons-dropdown left-2 right-2 s:right-4 s:left-auto p-0 crayons-header__menu__dropdown inline-block">
+<div class="crayons-dropdown left-2 right-2 s:right-4 s:left-auto p-0 crayons-header__menu__dropdown inline-block m:-mr-2 top-100 -mt-1">
   <ul class="p-0" id="crayons-header__menu__dropdown__list">
-    <li id="user-profile-link-placeholder" class="border-0 border-b-1 border-solid border-base-20 p-1 mb-1">
+    <li id="user-profile-link-placeholder" class="border-0 border-b-1 border-solid border-base-20 p-2 mb-2">
       <a id="first-nav-link" class="crayons-link crayons-link--block">
         <div>
           <span class="fw-medium block">...</span>
@@ -9,18 +9,18 @@
       </a>
     </li>
 
-    <li class="px-1 js-header-menu-admin-link hidden">
+    <li class="px-2 js-header-menu-admin-link hidden">
       <a href="<%= admin_path %>" class="crayons-link crayons-link--block" data-no-instant>Admin</a>
     </li>
-    <li class="px-1"><a href="<%= dashboard_path %>" class="crayons-link crayons-link--block">Dashboard</a></li>
-    <li class="px-1"><a href="<%= mod_path %>" class="crayons-link crayons-link--block trusted-visible-block">Moderator Center</a></li>
-    <li class="px-1"><a href="<%= new_path %>" class="crayons-link crayons-link--block">Create Post</a></li>
-    <li class="px-1"><a href="<%= readinglist_path %>" class="crayons-link crayons-link--block">Reading list</a></li>
-    <li class="border-0 border-b-1 border-solid border-base-20 px-1 pb-1">
+    <li class="px-2"><a href="<%= dashboard_path %>" class="crayons-link crayons-link--block">Dashboard</a></li>
+    <li class="px-2"><a href="<%= mod_path %>" class="crayons-link crayons-link--block trusted-visible-block">Moderator Center</a></li>
+    <li class="px-2"><a href="<%= new_path %>" class="crayons-link crayons-link--block">Create Post</a></li>
+    <li class="px-2"><a href="<%= readinglist_path %>" class="crayons-link crayons-link--block">Reading list</a></li>
+    <li class="border-0 border-b-1 border-solid border-base-20 px-2 pb-1">
       <a href="<%= user_settings_path %>" class="crayons-link crayons-link--block" id="second-last-nav-link">Settings</a>
     </li>
 
-    <li class="px-1 py-1">
+    <li class="px-2 py-2">
       <a href="<%= signout_confirm_path %>" class="crayons-link crayons-link--block" id="last-nav-link">Sign Out</a>
     </li>
   </ul>