diff --git a/resources/styles/atoms/avatar/_index.scss b/resources/styles/atoms/avatar/_index.scss
index 9fa5f74a..59616130 100644
--- a/resources/styles/atoms/avatar/_index.scss
+++ b/resources/styles/atoms/avatar/_index.scss
@@ -8,7 +8,6 @@
     &__container {
         display: grid;
         grid: "photo name" 1fr "photo title" 1fr;
-        gap: config.$thin-v-space 0;
     }
 
     &__name {
@@ -26,6 +25,7 @@
     }
 
     &__title {
+        color: config.$gray-400;
         grid-area: title;
         padding: 0 config.$thin-h-space;
     }
@@ -40,4 +40,15 @@
             justify-self: end;
         }
     }
+
+    &.-small {
+        #{$b}__name {
+            font-size: 1rem;
+            line-height: 1.5;
+        }
+
+        #{$b}__photo {
+            max-height: 4rem;
+        }
+    }
 }
diff --git a/resources/styles/atoms/avatar/avatar.config.js b/resources/styles/atoms/avatar/avatar.config.js
index 3737d24c..49ccfc31 100644
--- a/resources/styles/atoms/avatar/avatar.config.js
+++ b/resources/styles/atoms/avatar/avatar.config.js
@@ -5,5 +5,10 @@ module.exports = {
             label: 'Reversed',
             context: { class: '-reversed' },
         },
+        {
+            name: 'small',
+            label: 'Small',
+            context: { class: '-small' },
+        },
     ],
 }
diff --git a/resources/styles/atoms/avatar/avatar.twig b/resources/styles/atoms/avatar/avatar.twig
index ebcd5224..58822c66 100644
--- a/resources/styles/atoms/avatar/avatar.twig
+++ b/resources/styles/atoms/avatar/avatar.twig
@@ -1,6 +1,6 @@
 <div class="{{ class }} avatar">
     <div class="avatar__container">
-        <img class='avatar__photo' src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' height='72' width='72' viewBox='0 0 1 1'><rect width='1' height='1' fill='%230001'/></svg>" alt="Jane Doe" />
+        <img class='avatar__photo' src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' height='96' width='96' viewBox='0 0 1 1'><rect width='1' height='1' fill='%230001'/></svg>" alt="Jane Doe" />
         <div class="avatar__name">
             Jane Doe
         </div>
diff --git a/resources/styles/atoms/banner/banner.twig b/resources/styles/atoms/banner/banner.twig
index 5edb2add..a312a91c 100644
--- a/resources/styles/atoms/banner/banner.twig
+++ b/resources/styles/atoms/banner/banner.twig
@@ -4,10 +4,12 @@
             Sit quisquam error ipsum atque odit ex At eum eius autem perspiciatis sit! Sint ab!
         </div>
         <button class="banner__dismiss">
-            <svg xmlns="http://www.w3.org/2000/svg" class="banner__dismissIcon" viewBox="0 0 24 24" stroke-width="1.5" stroke="#2c3e50" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                <line x1="18" y1="6" x2="6" y2="18" />
-                <line x1="6" y1="6" x2="18" y2="18" />
+            <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <rect width="31.2325" height="2.60271" rx="1.30135" transform="matrix(0.706026 0.708186 -0.706026 0.708186 1.94904 0)" fill="currentColor"/>
+                <rect x="10.3949" y="11.0784" width="2.59873" height="2.60668" rx="1.29937" fill="white"/>
+                <rect width="31.2325" height="2.60271" rx="1.30135" transform="matrix(0.706026 -0.708186 0.706026 0.708186 0 22.1568)" fill="currentColor"/>
             </svg>
+
         </button>
     </div>
 </div>
diff --git a/resources/styles/atoms/button/_index.scss b/resources/styles/atoms/button/_index.scss
index aa9b1376..d222354f 100644
--- a/resources/styles/atoms/button/_index.scss
+++ b/resources/styles/atoms/button/_index.scss
@@ -23,11 +23,14 @@
     cursor: pointer;
     display: inline-block;
     font-weight: 700;
-    padding: config.$padding;
+    line-height: 1;
+    padding: 1rem 2rem;
+    border-radius: 4em;
     transition: background-color var(--duration-fast) config.$fade-easing;
 
     &:hover,
     &:focus {
+        color: var(--button-color-contrast);
         background-color: var(--button-color-hover);
     }
 
@@ -86,4 +89,14 @@
             color: var(--button-color-contrast);
         }
     }
+
+    &.-icon {
+        align-items: center;
+        border-radius: 100%;
+        display: inline-grid;
+        height: 3rem;
+        justify-items: center;
+        padding: 0;
+        width: 3rem;
+    }
 }
diff --git a/resources/styles/atoms/button/button--ghost.twig b/resources/styles/atoms/button/button--ghost.twig
index 25d1d2fa..d43519f7 100644
--- a/resources/styles/atoms/button/button--ghost.twig
+++ b/resources/styles/atoms/button/button--ghost.twig
@@ -1,4 +1,10 @@
-<button class="button -ghost">Primary</button>
+<button class="button -ghost">
+    Primary
+    <svg width="18" height="13" viewBox="0 0 18 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.5841 11.7821C11.8695 12.0753 12.3323 12.0753 12.6177 11.7821L17.7859 6.47366C17.8634 6.39405 17.9199 6.301 17.9553 6.20182C17.9925 6.09773 18.0065 5.98687 17.9973 5.87768C17.9917 5.81144 17.9778 5.74765 17.9566 5.68744C17.9301 5.61203 17.8915 5.54011 17.8407 5.47487C17.8238 5.45312 17.8055 5.43211 17.7859 5.41197L17.7834 5.40941L12.733 0.221882C12.4475 -0.0712958 11.9848 -0.0712953 11.6993 0.221882C11.4139 0.51506 11.4139 0.990396 11.6993 1.28357L15.5046 5.19209H0.730891C0.327232 5.19209 -8.34465e-07 5.5282 -8.34465e-07 5.94282C-8.34465e-07 6.35743 0.32723 6.69354 0.730889 6.69354L15.5046 6.69355L11.5841 10.7204C11.2987 11.0136 11.2987 11.4889 11.5841 11.7821Z" fill="currentColor"/>
+</svg>
+
+</button>
 <button class="button -ghost -secondary">Secondary</button>
 <button class="button -ghost -danger">Danger</button>
 <button class="button -ghost -confirm">Confirm</button>
diff --git a/resources/styles/atoms/button/button--icon.twig b/resources/styles/atoms/button/button--icon.twig
new file mode 100644
index 00000000..12c7e992
--- /dev/null
+++ b/resources/styles/atoms/button/button--icon.twig
@@ -0,0 +1,29 @@
+<button class="button -icon">
+    <svg width="10" height="18" viewBox="0 0 10 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M9 1L1 9L9 17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+    </svg>
+</button>
+<button class="button -secondary -icon">
+    <svg width="10" height="18" viewBox="0 0 10 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M9 1L1 9L9 17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+    </svg>
+</button>
+
+<button class="button -danger -icon">
+    <svg width="10" height="18" viewBox="0 0 10 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M9 1L1 9L9 17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+    </svg>
+</button>
+
+<button class="button -confirm -icon">
+    <svg width="10" height="18" viewBox="0 0 10 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M9 1L1 9L9 17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+    </svg>
+</button>
+
+<button class="button -disabled -icon">
+    <svg width="10" height="18" viewBox="0 0 10 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M9 1L1 9L9 17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+    </svg>
+</button>
+
diff --git a/resources/styles/atoms/checkbox/_index.scss b/resources/styles/atoms/checkbox/_index.scss
index 0226ac7b..0e2f4492 100644
--- a/resources/styles/atoms/checkbox/_index.scss
+++ b/resources/styles/atoms/checkbox/_index.scss
@@ -26,12 +26,14 @@
     }
 
     &__checkbox {
-        pointer-events: none;
-        grid-area: checkbox;
+        background: var(--checkbox-color);
         border-radius: .25em;
         border: 2px solid var(--checkbox-color);
         display: inline-block;
+        grid-area: checkbox;
         height: #{config.$line-height * 1em};
+        padding: .25rem;
+        pointer-events: none;
         vertical-align: middle;
         width: #{config.$line-height * 1em};
     }
diff --git a/resources/styles/atoms/checkbox/checkbox--radio.twig b/resources/styles/atoms/checkbox/checkbox--radio.twig
index 3229ec5a..66ae6b6c 100644
--- a/resources/styles/atoms/checkbox/checkbox--radio.twig
+++ b/resources/styles/atoms/checkbox/checkbox--radio.twig
@@ -1,8 +1,8 @@
 <div class="checkbox">
     <input class="checkbox__input" type="radio" name="radio1" id="radio1">
     <div class="checkbox__checkbox">
-        <svg class="checkbox__icon" viewBox="0 0 12 12" stroke-width="2" stroke="currentColor" fill="none">
-            <path d="M3 6l2 2l4 -4" />
+        <svg class="checkbox__icon" viewBox="0 0 12 12" stroke-width="0" stroke="none" fill="none">
+            <circle cx="6" cy="6" r="6" fill="currentColor" />
         </svg>
     </div>
     <label class="checkbox__label" for="radio1">
@@ -13,8 +13,8 @@
 <div class="checkbox">
     <input class="checkbox__input" type="radio" name="radio1" id="radio2" checked>
     <div class="checkbox__checkbox">
-        <svg class="checkbox__icon" viewBox="0 0 12 12" stroke-width="2" stroke="currentColor" fill="none">
-            <path d="M3 6l2 2l4 -4" />
+        <svg class="checkbox__icon" viewBox="0 0 12 12" stroke-width="0" stroke="none" fill="none">
+            <circle cx="6" cy="6" r="6" fill="currentColor" />
         </svg>
     </div>
     <label class="checkbox__label" for="radio2">
@@ -25,8 +25,8 @@
 <div class="checkbox">
     <input class="checkbox__input" type="radio" id="radio3" disabled>
     <div class="checkbox__checkbox">
-        <svg class="checkbox__icon" viewBox="0 0 12 12" stroke-width="2" stroke="currentColor" fill="none">
-            <path d="M3 6l2 2l4 -4" />
+        <svg class="checkbox__icon" viewBox="0 0 12 12" stroke-width="0" stroke="none" fill="none">
+            <circle cx="6" cy="6" r="6" fill="currentColor" />
         </svg>
     </div>
     <label class="checkbox__label" for="radio3">
@@ -37,8 +37,8 @@
 <div class="checkbox">
     <input class="checkbox__input" type="radio" id="radio4" disabled checked>
     <div class="checkbox__checkbox">
-        <svg class="checkbox__icon" viewBox="0 0 12 12" stroke-width="2" stroke="currentColor" fill="none">
-            <path d="M3 6l2 2l4 -4" />
+        <svg class="checkbox__icon" viewBox="0 0 12 12" stroke-width="0" stroke="none" fill="none">
+            <circle cx="6" cy="6" r="6" fill="currentColor" />
         </svg>
     </div>
     <label class="checkbox__label" for="radio4">
@@ -49,8 +49,8 @@
 <div class="checkbox -secondary">
     <input class="checkbox__input" type="radio" id="radio5">
     <div class="checkbox__checkbox">
-        <svg class="checkbox__icon" viewBox="0 0 12 12" stroke-width="2" stroke="currentColor" fill="none">
-            <path d="M3 6l2 2l4 -4" />
+        <svg class="checkbox__icon" viewBox="0 0 12 12" stroke-width="0" stroke="none" fill="none">
+            <circle cx="6" cy="6" r="6" fill="currentColor" />
         </svg>
     </div>
     <label class="checkbox__label" for="radio5">
@@ -61,8 +61,8 @@
 <div class="checkbox -secondary">
     <input class="checkbox__input" type="radio" id="radio6" checked>
     <div class="checkbox__checkbox">
-        <svg class="checkbox__icon" viewBox="0 0 12 12" stroke-width="2" stroke="currentColor" fill="none">
-            <path d="M3 6l2 2l4 -4" />
+        <svg class="checkbox__icon" viewBox="0 0 12 12" stroke-width="0" stroke="none" fill="none">
+            <circle cx="6" cy="6" r="6" fill="currentColor" />
         </svg>
     </div>
     <label class="checkbox__label" for="radio6">
@@ -73,8 +73,8 @@
 <div class="checkbox">
     <input class="checkbox__input" type="radio" name="radio1" id="radio7">
     <div class="checkbox__checkbox">
-        <svg class="checkbox__icon" viewBox="0 0 12 12" stroke-width="2" stroke="currentColor" fill="none">
-            <path d="M3 6l2 2l4 -4" />
+        <svg class="checkbox__icon" viewBox="0 0 12 12" stroke-width="0" stroke="none" fill="none">
+            <circle cx="6" cy="6" r="6" fill="currentColor" />
         </svg>
     </div>
     <label class="checkbox__label" name="radio1" for="radio7">
diff --git a/resources/styles/atoms/checkbox/checkbox.twig b/resources/styles/atoms/checkbox/checkbox.twig
index a5700c8d..e4cb62f8 100644
--- a/resources/styles/atoms/checkbox/checkbox.twig
+++ b/resources/styles/atoms/checkbox/checkbox.twig
@@ -1,8 +1,8 @@
 <div class="checkbox">
     <input class="checkbox__input" type="checkbox" id="checkbox1">
     <div class="checkbox__checkbox">
-        <svg class="checkbox__icon" viewBox="0 0 12 12" stroke-width="2" stroke="currentColor" fill="none">
-            <path d="M3 6l2 2l4 -4" />
+        <svg class="checkbox__icon" viewBox="0 0 14 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M13 1L4.75 9.25L1 5.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
         </svg>
     </div>
     <label class="checkbox__label" for="checkbox1">
@@ -13,8 +13,8 @@
 <div class="checkbox">
     <input class="checkbox__input" type="checkbox" id="checkbox2" checked>
     <div class="checkbox__checkbox">
-        <svg class="checkbox__icon" viewBox="0 0 12 12" stroke-width="2" stroke="currentColor" fill="none">
-            <path d="M3 6l2 2l4 -4" />
+        <svg class="checkbox__icon" viewBox="0 0 14 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M13 1L4.75 9.25L1 5.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
         </svg>
     </div>
     <label class="checkbox__label" for="checkbox2">
@@ -25,8 +25,8 @@
 <div class="checkbox">
     <input class="checkbox__input" type="checkbox" id="checkbox3" disabled>
     <div class="checkbox__checkbox">
-        <svg class="checkbox__icon" viewBox="0 0 12 12" stroke-width="2" stroke="currentColor" fill="none">
-            <path d="M3 6l2 2l4 -4" />
+        <svg class="checkbox__icon" viewBox="0 0 14 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M13 1L4.75 9.25L1 5.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
         </svg>
     </div>
     <label class="checkbox__label" for="checkbox3">
@@ -37,8 +37,8 @@
 <div class="checkbox">
     <input class="checkbox__input" type="checkbox" id="checkbox4" disabled checked>
     <div class="checkbox__checkbox">
-        <svg class="checkbox__icon" viewBox="0 0 12 12" stroke-width="2" stroke="currentColor" fill="none">
-            <path d="M3 6l2 2l4 -4" />
+        <svg class="checkbox__icon" viewBox="0 0 14 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M13 1L4.75 9.25L1 5.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
         </svg>
     </div>
     <label class="checkbox__label" for="checkbox4">
@@ -49,8 +49,8 @@
 <div class="checkbox -secondary">
     <input class="checkbox__input" type="checkbox" id="checkbox5">
     <div class="checkbox__checkbox">
-        <svg class="checkbox__icon" viewBox="0 0 12 12" stroke-width="2" stroke="currentColor" fill="none">
-            <path d="M3 6l2 2l4 -4" />
+        <svg class="checkbox__icon" viewBox="0 0 14 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M13 1L4.75 9.25L1 5.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
         </svg>
     </div>
     <label class="checkbox__label" for="checkbox5">
@@ -61,8 +61,8 @@
 <div class="checkbox -secondary">
     <input class="checkbox__input" type="checkbox" id="checkbox6" checked>
     <div class="checkbox__checkbox">
-        <svg class="checkbox__icon" viewBox="0 0 12 12" stroke-width="2" stroke="currentColor" fill="none">
-            <path d="M3 6l2 2l4 -4" />
+        <svg class="checkbox__icon" viewBox="0 0 14 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M13 1L4.75 9.25L1 5.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
         </svg>
     </div>
     <label class="checkbox__label" for="checkbox6">
@@ -73,8 +73,8 @@
 <div class="checkbox">
     <input class="checkbox__input" type="checkbox" id="checkbox7">
     <div class="checkbox__checkbox">
-        <svg class="checkbox__icon" viewBox="0 0 12 12" stroke-width="2" stroke="currentColor" fill="none">
-            <path d="M3 6l2 2l4 -4" />
+        <svg class="checkbox__icon" viewBox="0 0 14 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M13 1L4.75 9.25L1 5.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
         </svg>
     </div>
     <label class="checkbox__label" for="checkbox7">
diff --git a/resources/styles/atoms/field/_index.scss b/resources/styles/atoms/field/_index.scss
index 223f03ba..2395e1ad 100644
--- a/resources/styles/atoms/field/_index.scss
+++ b/resources/styles/atoms/field/_index.scss
@@ -11,19 +11,23 @@
     }
 
     &__input {
-        border: 1px solid config.$border;
+        border: 2px solid config.$border;
+        border-radius: .25rem;
         font-family: config.$font-family;
         margin: 0 0 .5rem;
         padding: config.$thin-padding;
         width: 100%;
+        background-color: config.$gray-50;
     }
 
     &__help {
         color: config.$meta-text;
+        font-size: .75rem;
     }
 
     &__error {
         color: config.$error;
+        font-size: .75rem;
     }
 
     &.-error {
diff --git a/resources/styles/atoms/field/field--checkbox.twig b/resources/styles/atoms/field/field--checkbox.twig
deleted file mode 100644
index 6fbca815..00000000
--- a/resources/styles/atoms/field/field--checkbox.twig
+++ /dev/null
@@ -1,10 +0,0 @@
-<div class="{{ class }} field -checkbox">
-    <label class="field__label" for="accept">
-        Lorem repellendus consequuntur sunt fuga alias
-        Delectus quos sunt ducimus consectetur excepturi
-        Voluptatum doloribus excepturi omnis aspernatur
-        harum rerum animi? Facere iste harum nihil libero
-        autem obcaecati. Esse necessitatibus hic.
-    </label>
-    <input class="field__input" type="checkbox" id="accept">
-</div>
diff --git a/resources/styles/atoms/headings/eyebrow/.null-ls_358407_eyebrow.twig b/resources/styles/atoms/headings/eyebrow/.null-ls_358407_eyebrow.twig
new file mode 100644
index 00000000..1820e8ce
--- /dev/null
+++ b/resources/styles/atoms/headings/eyebrow/.null-ls_358407_eyebrow.twig
@@ -0,0 +1,24 @@
+<div class="eyebrow">primary eyebrow</div>
+<h1>And the Headline</h1>
+<p>
+    Consectetur velit quia corporis explicabo necessitatibus, maiores odio. Nihil saepe temporibus ipsam voluptatibus voluptas Tempora voluptate dicta velit ut dicta! Vel sunt quidem numquam dicta dicta? Velit mollitia quas reprehenderit.
+</p>
+
+
+<div class="eyebrow -secondary">secondary eyebrow</div>
+<h2>And the Headline</h2>
+<p>
+    Ipsum eum suscipit sed dolores eum! Voluptates tenetur repellendus nesciunt qui et Provident quasi nam quod repellendus praesentium Sed ipsum veritatis molestias enim expedita, est harum? Neque repudiandae repudiandae velit.
+</p>
+
+<div class="eyebrow -highlighted">highlighted eyebrow</div>
+<h1>And the Headline</h1>
+<p>
+    Consectetur velit quia corporis explicabo necessitatibus, maiores odio. Nihil saepe temporibus ipsam voluptatibus voluptas Tempora voluptate dicta velit ut dicta! Vel sunt quidem numquam dicta dicta? Velit mollitia quas reprehenderit.
+</p>
+
+<div class="eyebrow -highlighted -secondary">secondary highlighted eyebrow</div>
+<h2>And the Headline</h2>
+<p>
+    Ipsum eum suscipit sed dolores eum! Voluptates tenetur repellendus nesciunt qui et Provident quasi nam quod repellendus praesentium Sed ipsum veritatis molestias enim expedita, est harum? Neque repudiandae repudiandae velit.
+</p>
diff --git a/resources/styles/atoms/headings/eyebrow/_index.scss b/resources/styles/atoms/headings/eyebrow/_index.scss
index d392db6a..48a1b23b 100644
--- a/resources/styles/atoms/headings/eyebrow/_index.scss
+++ b/resources/styles/atoms/headings/eyebrow/_index.scss
@@ -10,8 +10,6 @@
     color: var(--eyebrow-color);
     font-size: 1rem;
     font-weight: bold;
-    margin-bottom: .25rem;
-    text-transform: uppercase;
 
     &.-secondary {
         --eyebrow-color: var(--color, #{config.$secondary});
diff --git a/resources/styles/atoms/headings/eyebrow/eyebrow.twig b/resources/styles/atoms/headings/eyebrow/eyebrow.twig
index 1820e8ce..7a1e71d5 100644
--- a/resources/styles/atoms/headings/eyebrow/eyebrow.twig
+++ b/resources/styles/atoms/headings/eyebrow/eyebrow.twig
@@ -1,23 +1,23 @@
-<div class="eyebrow">primary eyebrow</div>
+<div class="eyebrow">Primary Eyebrow</div>
 <h1>And the Headline</h1>
 <p>
     Consectetur velit quia corporis explicabo necessitatibus, maiores odio. Nihil saepe temporibus ipsam voluptatibus voluptas Tempora voluptate dicta velit ut dicta! Vel sunt quidem numquam dicta dicta? Velit mollitia quas reprehenderit.
 </p>
 
 
-<div class="eyebrow -secondary">secondary eyebrow</div>
+<div class="eyebrow -secondary">Secondary Eyebrow</div>
 <h2>And the Headline</h2>
 <p>
     Ipsum eum suscipit sed dolores eum! Voluptates tenetur repellendus nesciunt qui et Provident quasi nam quod repellendus praesentium Sed ipsum veritatis molestias enim expedita, est harum? Neque repudiandae repudiandae velit.
 </p>
 
-<div class="eyebrow -highlighted">highlighted eyebrow</div>
+<div class="eyebrow -highlighted">Highlighted Eyebrow</div>
 <h1>And the Headline</h1>
 <p>
     Consectetur velit quia corporis explicabo necessitatibus, maiores odio. Nihil saepe temporibus ipsam voluptatibus voluptas Tempora voluptate dicta velit ut dicta! Vel sunt quidem numquam dicta dicta? Velit mollitia quas reprehenderit.
 </p>
 
-<div class="eyebrow -highlighted -secondary">secondary highlighted eyebrow</div>
+<div class="eyebrow -highlighted -secondary">Secondary Highlighted Eyebrow</div>
 <h2>And the Headline</h2>
 <p>
     Ipsum eum suscipit sed dolores eum! Voluptates tenetur repellendus nesciunt qui et Provident quasi nam quod repellendus praesentium Sed ipsum veritatis molestias enim expedita, est harum? Neque repudiandae repudiandae velit.
diff --git a/resources/styles/atoms/link/link--icon.twig b/resources/styles/atoms/link/link--icon.twig
index 320536a2..7bac7c66 100644
--- a/resources/styles/atoms/link/link--icon.twig
+++ b/resources/styles/atoms/link/link--icon.twig
@@ -1,17 +1,23 @@
 Here's
 <a class="link" href="#">
-    <svg xmlns="http://www.w3.org/2000/svg" class="link__icon" width="16" height="16" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"/> <path d="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" /> <line x1="10" y1="14" x2="20" y2="4" /> <polyline points="15 4 20 4 20 9" /> </svg>
     another link
+    <svg width="18" height="12" viewBox="0 0 18 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M11.5841 11.7801C11.8695 12.0733 12.3323 12.0733 12.6177 11.7801L17.7859 6.47166C17.8634 6.39205 17.9199 6.299 17.9553 6.19982C17.9925 6.09573 18.0065 5.98487 17.9973 5.87569C17.9917 5.80944 17.9778 5.74565 17.9566 5.68544C17.9301 5.61004 17.8915 5.53811 17.8407 5.47287C17.8238 5.45112 17.8055 5.43011 17.7859 5.40997L17.7834 5.40741L12.733 0.219883C12.4475 -0.0732947 11.9848 -0.0732942 11.6993 0.219883C11.4139 0.513061 11.4139 0.988397 11.6993 1.28157L15.5046 5.19009H0.730891C0.327232 5.19009 -8.34465e-07 5.5262 -8.34465e-07 5.94082C-8.34465e-07 6.35543 0.32723 6.69155 0.730889 6.69155L15.5046 6.69155L11.5841 10.7184C11.2987 11.0116 11.2987 11.4869 11.5841 11.7801Z" fill="currentColor"/>
+    </svg>
 </a>
 with an icon before, and
 <a class="link" href="#">
+    <svg width="18" height="12" viewBox="0 0 18 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M6.4159 0.219884C6.13047 -0.0732943 5.66769 -0.0732944 5.38226 0.219884L0.214074 5.52834C0.136565 5.60795 0.0801047 5.701 0.0446908 5.80018C0.00752214 5.90427 -0.00646207 6.01513 0.00273921 6.12431C0.00828171 6.19056 0.0222006 6.25435 0.0434024 6.31456C0.0698971 6.38996 0.108521 6.46189 0.159276 6.52713C0.176194 6.54888 0.19446 6.56989 0.214073 6.59003L0.216578 6.59259L5.26702 11.7801C5.55246 12.0733 6.01523 12.0733 6.30066 11.7801C6.58609 11.4869 6.58609 11.0116 6.30066 10.7184L2.49543 6.80991L17.2691 6.80991C17.6728 6.80991 18 6.4738 18 6.05918C18 5.64457 17.6728 5.30846 17.2691 5.30846L2.49542 5.30845L6.4159 1.28158C6.70133 0.988398 6.70133 0.513062 6.4159 0.219884Z" fill="currentColor"/>
+    </svg>
     one link
-    <svg xmlns="http://www.w3.org/2000/svg" class="link__icon" width="16" height="16" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"/> <path d="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" /> <line x1="10" y1="14" x2="20" y2="4" /> <polyline points="15 4 20 4 20 9" /> </svg>
 </a>
-with the icon after.
+with the icon before.
 
 
 <a class="link" href="#">
     Read More
-    <svg class="link__icon" viewBox="0 0 24 24" stroke="currentColor" fill="none"><polyline points="9 6 15 12 9 18" /></svg>
+    <svg width="18" height="12" viewBox="0 0 18 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M11.5841 11.7801C11.8695 12.0733 12.3323 12.0733 12.6177 11.7801L17.7859 6.47166C17.8634 6.39205 17.9199 6.299 17.9553 6.19982C17.9925 6.09573 18.0065 5.98487 17.9973 5.87569C17.9917 5.80944 17.9778 5.74565 17.9566 5.68544C17.9301 5.61004 17.8915 5.53811 17.8407 5.47287C17.8238 5.45112 17.8055 5.43011 17.7859 5.40997L17.7834 5.40741L12.733 0.219883C12.4475 -0.0732947 11.9848 -0.0732942 11.6993 0.219883C11.4139 0.513061 11.4139 0.988397 11.6993 1.28157L15.5046 5.19009H0.730891C0.327232 5.19009 -8.34465e-07 5.5262 -8.34465e-07 5.94082C-8.34465e-07 6.35543 0.32723 6.69155 0.730889 6.69155L15.5046 6.69155L11.5841 10.7184C11.2987 11.0116 11.2987 11.4869 11.5841 11.7801Z" fill="currentColor"/>
+    </svg>
 </a>
diff --git a/resources/styles/atoms/pagination/_index.scss b/resources/styles/atoms/pagination/_index.scss
index 06215c0c..18f11c14 100644
--- a/resources/styles/atoms/pagination/_index.scss
+++ b/resources/styles/atoms/pagination/_index.scss
@@ -17,15 +17,16 @@
     &__list {
         @include no-bullets;
         display: flex;
-        gap: .5rem;
+        gap: 1rem;
     }
 
     &__link {
+        background-color: config.$gray-100;
         border-radius: .25em;
         color: var(--pagination-color);
         display: block;
         font-weight: bold;
-        padding: config.$thin-padding;
+        padding: config.$thin-v-space config.$h-space;
         position: relative;
         transition: background-color var(--duration-fast) config.$fade-easing,
             color var(--duration-fast) config.$fade-easing;
diff --git a/resources/styles/atoms/pagination/pagination.twig b/resources/styles/atoms/pagination/pagination.twig
index 2f7a66e2..7c6a8dad 100644
--- a/resources/styles/atoms/pagination/pagination.twig
+++ b/resources/styles/atoms/pagination/pagination.twig
@@ -1,8 +1,11 @@
 <nav class="{{ class }} pagination">
     <ul class="pagination__list">
         <li class="pagination__item -previous">
-            <a class="pagination__link" href="" aria-label="Previous">
-                <svg class="link__icon" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor" fill="none"><polyline points="15 6 9 12 15 18" /></svg>
+            <a class="pagination__button button" href="" aria-label="Previous">
+                <svg width="24" height="16" viewBox="0 0 24 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M8.55453 15.7068C8.17395 16.0977 7.55692 16.0977 7.17634 15.7068L0.285431 8.62888C0.182086 8.52273 0.106805 8.39867 0.0595869 8.26643C0.0100288 8.12764 -0.00861679 7.97983 0.00365159 7.83425C0.0110416 7.74592 0.0296001 7.66087 0.0578692 7.58059C0.0931955 7.48005 0.144694 7.38415 0.212367 7.29716C0.234925 7.26816 0.259279 7.24015 0.285431 7.21329L0.288771 7.20988L7.0227 0.293178C7.40327 -0.0977263 8.02031 -0.0977256 8.40088 0.293178C8.78146 0.684082 8.78146 1.31786 8.40088 1.70877L3.32724 6.92012H23.0255C23.5637 6.92012 24 7.36827 24 7.92109C24 8.47391 23.5637 8.92206 23.0255 8.92206L3.32723 8.92206L8.55453 14.2912C8.9351 14.6821 8.9351 15.3159 8.55453 15.7068Z" fill="currentColor"/>
+                </svg>
+
             </a>
         </li>
 
@@ -14,8 +17,11 @@
         <li class="pagination__item"><a class="pagination__link" href="">6</a></li>
 
         <li class="pagination__item -next -disabled">
-            <a class="pagination__link link" href="" aria-label="Next">
-                <svg class="link__icon" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor" fill="none"><polyline points="9 6 15 12 9 18" /></svg>
+            <a class="pagination__button button" href="" aria-label="Next">
+                <svg width="25" height="16" viewBox="0 0 25 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M15.4494 15.7068C15.83 16.0977 16.447 16.0977 16.8276 15.7068L23.7185 8.62888C23.8218 8.52273 23.8971 8.39867 23.9443 8.26643C23.9939 8.12764 24.0125 7.97983 24.0003 7.83425C23.9929 7.74592 23.9743 7.66087 23.946 7.58059C23.9107 7.48005 23.8592 7.38415 23.7915 7.29716C23.769 7.26816 23.7446 7.24015 23.7185 7.21329L23.7151 7.20988L16.9812 0.293178C16.6006 -0.0977263 15.9836 -0.0977256 15.603 0.293178C15.2225 0.684082 15.2224 1.31786 15.603 1.70877L20.6767 6.92012H0.978429C0.440216 6.92012 0.00390577 7.36827 0.00390577 7.92109C0.00390768 8.47391 0.440214 8.92206 0.978427 8.92206L20.6767 8.92206L15.4494 14.2912C15.0688 14.6821 15.0688 15.3159 15.4494 15.7068Z" fill="currentColor"/>
+                </svg>
+
             </a>
         </li>
     </ul>
diff --git a/resources/styles/atoms/select/_index.scss b/resources/styles/atoms/select/_index.scss
index 15af1695..1463325c 100644
--- a/resources/styles/atoms/select/_index.scss
+++ b/resources/styles/atoms/select/_index.scss
@@ -5,7 +5,8 @@
     &__select {
         appearance: none;
         background: transparent url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzIgNCAyMCAxNicgZmlsbD0nbm9uZScgc3Ryb2tlPScjMTQxNDE0JyBzdHJva2Utd2lkdGg9JzAuMTI1cmVtJz48cGF0aCBkPSdtNiA5IDYgNiA2LTYnLz48L3N2Zz4=) right #{config.$h-space - .5rem} center / #{config.$line-height * 1em} no-repeat;
-        border: 2px solid config.$link;
+        border: 2px solid config.$border;
+        border-radius: 4px;
         padding: config.$thin-padding;
         height: auto;
     }
diff --git a/resources/styles/atoms/tag/_index.scss b/resources/styles/atoms/tag/_index.scss
new file mode 100644
index 00000000..f3442016
--- /dev/null
+++ b/resources/styles/atoms/tag/_index.scss
@@ -0,0 +1,14 @@
+@use "/resources/styles/common" as *;
+@use "/resources/styles/config";
+
+.tag {
+    display: inline-flex;
+    align-items: center;
+    gap: .5rem;
+    color: config.$primary;
+    border: 1px solid;
+    border-radius: .25rem;
+    padding: config.$thin-padding;
+    font-size: .75rem;
+    line-height: 1.5;
+}
diff --git a/resources/styles/atoms/tag/tag.twig b/resources/styles/atoms/tag/tag.twig
new file mode 100644
index 00000000..d6b82217
--- /dev/null
+++ b/resources/styles/atoms/tag/tag.twig
@@ -0,0 +1,6 @@
+<div class="tag {{ class }}">
+    <svg class="tag__icon" width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M0.00201416 5.91903V1.13501C0.00201416 0.513682 0.505686 0.0100098 1.12701 0.0100098H5.91103C6.2094 0.0100113 6.49555 0.128539 6.70652 0.339518L11.6725 5.3055C12.1118 5.74484 12.1118 6.45715 11.6725 6.89649L6.88849 11.6805C6.44916 12.1198 5.73685 12.1198 5.29751 11.6805L0.331522 6.71452C0.120543 6.50354 0.00201572 6.2174 0.00201416 5.91903H0.00201416ZM2.62702 1.51001C2.00569 1.51001 1.50201 2.01368 1.50201 2.63501C1.50201 3.25634 2.00569 3.76001 2.62702 3.76001C3.24834 3.76001 3.75202 3.25634 3.75202 2.63501C3.75202 2.01368 3.24834 1.51001 2.62702 1.51001Z" fill="currentColor"/>
+    </svg>
+    Simple Tag
+</div>
diff --git a/resources/styles/atoms/utility-nav/_index.scss b/resources/styles/atoms/utility-nav/_index.scss
index 70c7f96e..08cd9162 100644
--- a/resources/styles/atoms/utility-nav/_index.scss
+++ b/resources/styles/atoms/utility-nav/_index.scss
@@ -16,15 +16,10 @@
                 padding-right: 0;
             }
         }
-
-        & + & {
-            #{$b}__link {
-                border-left: 1px solid config.$border;
-            }
-        }
     }
 
     &__link {
         padding: 0 config.$thin-h-space;
+        text-decoration: underline;
     }
 }
diff --git a/resources/styles/base/_custom-properties.scss b/resources/styles/base/_custom-properties.scss
index d5a194f6..73c63755 100644
--- a/resources/styles/base/_custom-properties.scss
+++ b/resources/styles/base/_custom-properties.scss
@@ -16,7 +16,7 @@
     }
 
     @include at(lg) {
-        --font-size-h1: 3.75rem;
+        --font-size-h1: 4rem;
         --font-size-h2: 3rem;
         --font-size-h3: 2rem;
         --font-size-h4: 1.5rem;
diff --git a/resources/styles/base/_forms.scss b/resources/styles/base/_forms.scss
index 44cba440..cf1af906 100644
--- a/resources/styles/base/_forms.scss
+++ b/resources/styles/base/_forms.scss
@@ -15,8 +15,6 @@ button {
 label {
     cursor: pointer;
     display: block;
-    font-weight: bold;
-    margin-bottom: 0.5em;
 }
 
 fieldset {
diff --git a/resources/styles/base/_typography.scss b/resources/styles/base/_typography.scss
index dc7e19f4..834a9647 100644
--- a/resources/styles/base/_typography.scss
+++ b/resources/styles/base/_typography.scss
@@ -18,8 +18,7 @@ em {
 blockquote {
     border-left: 1px solid config.$border;
     color: config.$meta-text;
-    font-style: italic;
-    margin-bottom: 2rem;
+    margin-bottom: 1rem;
     padding-left: 1rem;
 }
 
diff --git a/resources/styles/config/_index.scss b/resources/styles/config/_index.scss
index 4d0f7c3e..fb5c6d5d 100644
--- a/resources/styles/config/_index.scss
+++ b/resources/styles/config/_index.scss
@@ -12,19 +12,19 @@ $row-gap: 1.5rem;
 ///
 $font-family: Arial, sans-serif;
 $font-size: 1rem;
-$line-height: 1.5;
+$line-height: 2;
 
 ///
 /// Heading font stack, line-height
 ///
 $font-family-heading: system-ui, sans-serif;
-$line-height-heading: 1;
+$line-height-heading: 1.125;
 
 ///
 /// Regular padding. Used for components like buttons, cards, and primary nav items.
 ///
-$v-space: 1rem;
-$h-space: 1.5rem;
+$v-space: 1.25rem;
+$h-space: 1.25rem;
 $padding: $v-space $h-space;
 
 ///
@@ -38,20 +38,27 @@ $thin-padding: $thin-v-space $thin-h-space;
 ///
 /// Media Query Breakpoints
 ///
+/// $breakpoints: (
+///     sm: (width:      0, gap: 16px),
+///     md: (width:  625px, gap: 32px),
+///     lg: (width: 1121px, gap: 48px),
+///     xl: (width: 1393px, gap: 48px),
+/// ) !default;
+
 $breakpoints: (
     sm: (width:      0, gap: 16px),
-    md: (width:  625px, gap: 32px),
-    lg: (width: 1121px, gap: 48px),
-    xl: (width: 1393px, gap: 48px),
+    md: (width:  793px, gap: 24px),
+    lg: (width: 1121px, gap: 32px),
+    xl: (width: 1365px, gap: 32px),
 ) !default;
 
 
 ///
 /// Shadows
 ///
-$low-shadow: 0 0px 0.5px rgba(0, 0, 0, 0.057), 0 0px 1.8px rgba(0, 0, 0, 0.083), 0 0px 8px rgba(0, 0, 0, 0.14);
-$med-shadow: 0 0.5px 1.1px rgba(0, 0, 0, 0.057), 0 1.8px 3.6px rgba(0, 0, 0, 0.083), 0 8px 16px rgba(0, 0, 0, 0.14);
-$high-shadow: 0 1.1px 2.1px rgba(0, 0, 0, 0.057), 0 3.6px 7.1px rgba(0, 0, 0, 0.083), 0 16px 32px rgba(0, 0, 0, 0.14);
+$low-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
+$med-shadow: 0px 16px 64px rgba(0, 0, 0, 0.05);
+$high-shadow: 0px 16px 32px rgba(0, 0, 0, 0.1);
 
 
 ///
diff --git a/resources/styles/config/colors/_index.scss b/resources/styles/config/colors/_index.scss
index 41163bf5..6a4a658a 100644
--- a/resources/styles/config/colors/_index.scss
+++ b/resources/styles/config/colors/_index.scss
@@ -4,25 +4,25 @@
 ///
 /// Site Colors
 ///
-$primary: $blue-500;
-$primary-hover: $blue-400;
-$secondary: $aqua-200;
-$secondary-hover: $aqua-100;
+$primary: $purple-500;
+$primary-hover: $purple-400;
+$secondary: $purple-200;
+$secondary-hover: $purple-100;
 
 
 
 ///
 /// Messaging colors
 ///
-$confirm: $green-400;
-$confirm-hover: $green-300;
-$danger: $red-400;
-$danger-hover: $red-300;
+$confirm: $green-300;
+$confirm-hover: $green-200;
+$danger: $red-500;
+$danger-hover: $red-400;
 $disabled: $gray-200;
 $error: $red-500;
 $info: $blue-400;
 $success: $green-300;
-$warning: $yellow-200;
+$warning: $yellow-300;
 
 
 ///
@@ -31,8 +31,8 @@ $warning: $yellow-200;
 $plain-text: $gray-900;
 $meta-text: $gray-500;
 $link: $primary;
-$link-hover: $blue-300;
-$border: $gray-200;
+$link-hover: $purple-300;
+$border: $gray-300;
 
 
 ///
diff --git a/resources/styles/config/colors/_palette.scss b/resources/styles/config/colors/_palette.scss
index 45509afc..0faa7c38 100644
--- a/resources/styles/config/colors/_palette.scss
+++ b/resources/styles/config/colors/_palette.scss
@@ -1,61 +1,70 @@
 $white: #ffffff !default;
-$gray-100: #d3d3d3 !default;
-$gray-200: #b8b7b7 !default;
-$gray-300: #959595 !default;
-$gray-400: #7f7f7f !default;
-$gray-500: #706f6f !default;
-$gray-600: #595959 !default;
-$gray-700: #494949 !default;
-$gray-800: #373736 !default;
-$gray-900: #1d1c1c !default;
+$gray-50: #f2f2f2 !default;
+$gray-100: #e5e5e5 !default;
+$gray-200: #cccccc !default;
+$gray-300: #b3b3b3 !default;
+$gray-400: #999999 !default;
+$gray-500: #808080 !default;
+$gray-600: #666666 !default;
+$gray-700: #4c4c4c !default;
+$gray-800: #333333 !default;
+$gray-900: #1a1a1a !default;
+$gray-950: #0d0d0d !default;
 $black: #000000 !default;
 
-$red-100: #fac7bf !default;
-$red-200: #fc9f92 !default;
-$red-300: #fc6253 !default;
-$red-400: #f82224 !default;
-$red-500: #d92121 !default;
-$red-600: #a52c24 !default;
-$red-700: #822b22 !default;
-$red-800: #5e251e !default;
-$red-900: #2e1512 !default;
 
-$green-100: #bedbb3 !default;
-$green-200: #8fc678 !default;
-$green-300: #56a731 !default;
-$green-400: #4f8e32 !default;
-$green-500: #497b31 !default;
-$green-600: #3f632d !default;
-$green-700: #365028 !default;
-$green-800: #2a3b21 !default;
-$green-900: #171f13 !default;
+$red-50: #fff3f1 !default; // from design
+$red-100: #fbe3de !default;
+$red-200: #f8c8be !default;
+$red-300: #f4a798 !default;
+$red-400: #ed6f56 !default;
+$red-500: #e53411 !default; // from design
+$red-600: #aa260d !default;
+$red-700: #791b09 !default;
+$red-800: #621607 !default;
+$red-900: #430f05 !default;
 
-$blue-100: #cad3e8 !default;
-$blue-200: #a7b7e1 !default;
-$blue-300: #7792e4 !default;
-$blue-400: #5b79e0 !default;
-$blue-500: #536bbc !default;
-$blue-600: #46578e !default;
-$blue-700: #3b476f !default;
-$blue-800: #2e354f !default;
-$blue-900: #191c26 !default;
+$green-50: #ebffee !default; // from design
+$green-100: #cdf2d3 !default;
+$green-200: #98e4a4 !default;
+$green-300: #28c642 !default; // from design
+$green-400: #23ab39 !default;
+$green-500: #1b872d !default;
+$green-600: #156722 !default;
+$green-700: #0f4818 !default;
+$green-800: #0c3a13 !default;
+$green-900: #08270d !default;
 
-$yellow-100: #ead273 !default;
-$yellow-200: #cbb768 !default;
-$yellow-300: #a4945a !default;
-$yellow-400: #8b7f50 !default;
-$yellow-500: #7a7048 !default;
-$yellow-600: #61593c !default;
-$yellow-700: #4f4933 !default;
-$yellow-800: #3b3727 !default;
-$yellow-900: #1f1c16 !default;
+$blue-50: #ebf8ff !default; // from design
+$blue-100: #d0edfc !default;
+$blue-200: #a0dbf9 !default;
+$blue-300: #66c5f5 !default;
+$blue-400: #1ba9f0 !default; // from design
+$blue-500: #147cb1 !default;
+$blue-600: #0f5f86 !default;
+$blue-700: #0b435e !default;
+$blue-800: #09364c !default;
+$blue-900: #062434 !default;
 
-$aqua-100: #85e5c1 !default;
-$aqua-200: #55cca3 !default;
-$aqua-300: #52a485 !default;
-$aqua-400: #4c8b73 !default;
-$aqua-500: #477a65 !default;
-$aqua-600: #3d6052 !default;
-$aqua-700: #344f43 !default;
-$aqua-800: #293b33 !default;
-$aqua-900: #171e1a !default;
+$yellow-50: #fff8ea !default; // from design
+$yellow-100: #fbe6ba !default;
+$yellow-200: #f8cc76 !default;
+$yellow-300: #f2a60f !default; // from design
+$yellow-400: #c7880c !default;
+$yellow-500: #9d6b0a !default;
+$yellow-600: #775207 !default;
+$yellow-700: #543905 !default;
+$yellow-800: #442e04 !default;
+$yellow-900: #2d1f03 !default;
+
+$purple-50: #f2e5ff !default;
+$purple-100: #e6ccff !default;
+$purple-200: #cc99ff !default;
+$purple-300: #b366ff !default;
+$purple-400: #9933ff !default;
+$purple-500: #8000ff !default;
+$purple-600: #6600cc !default;
+$purple-700: #4d0099 !default;
+$purple-800: #330066 !default;
+$purple-900: #1a0033 !default;
+$purple-950: #0b001a !default;
diff --git a/resources/styles/main.scss b/resources/styles/main.scss
index 3b624470..a7e3bd80 100644
--- a/resources/styles/main.scss
+++ b/resources/styles/main.scss
@@ -16,6 +16,7 @@
 @use "atoms/pagination";
 @use "atoms/progress";
 @use "atoms/table";
+@use "atoms/tag";
 @use "atoms/checkbox";
 @use "atoms/utility-nav";
 
diff --git a/resources/styles/molecules/accordion/BpAccordion.vue b/resources/styles/molecules/accordion/BpAccordion.vue
index 998015f3..6b383416 100644
--- a/resources/styles/molecules/accordion/BpAccordion.vue
+++ b/resources/styles/molecules/accordion/BpAccordion.vue
@@ -9,17 +9,24 @@
         >
             <slot name="heading" />
             <slot name="icon">
-                <svg
-                    :class="[`${block}__${iconElement}`, { '-open': isOpen }]"
-                    width="24"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    stroke-width="2"
-                    stroke="currentColor"
-                    fill="none"
-                >
-                    <polyline points="6 9 12 15 18 9" />
-                </svg>
+                <div :class="`${block}__${iconWrapperElement}`">
+                    <svg
+                        :class="[`${block}__${iconElement}`, { '-open': isOpen }]"
+                        width="24"
+                        height="15"
+                        viewBox="0 0 26 15"
+                        fill="none"
+                        xmlns="http://www.w3.org/2000/svg"
+                    >
+                        <path
+                            d="M1 1.00201L13 13.002L25 1.00201"
+                            stroke="currentColor"
+                            stroke-width="2"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                        />
+                    </svg>
+                </div>
             </slot>
         </button>
         <Transition
@@ -52,6 +59,7 @@ defineProps({
     block: { type: String, default: 'accordion' },
     headerElement: { type: String, default: 'header' },
     iconElement: { type: String, default: 'icon' },
+    iconWrapperElement: { type: String, default: 'iconWrapper' },
     contentElement: { type: String, default: 'content' },
     contentWrapperElement: { type: String, default: 'contentWrapper' },
     id: { type: String, default: () => Math.random().toString(36).substr(2) },
diff --git a/resources/styles/molecules/accordion/_index.scss b/resources/styles/molecules/accordion/_index.scss
index 2e6c4ed8..8637c31d 100644
--- a/resources/styles/molecules/accordion/_index.scss
+++ b/resources/styles/molecules/accordion/_index.scss
@@ -1,6 +1,7 @@
 @use "/resources/styles/config";
 
 @mixin accordion() {
+    --accordion-color: var(--color, #{config.$primary});
     --accordion-color-hover: var(--color-hover, #{config.$primary-hover});
 
     $b: &;
@@ -14,23 +15,22 @@
         justify-content: space-between;
         align-items: center;
         text-align: left;
-        padding: 1rem;
+        gap: 1rem;
         transition: background-color var(--duration-fast) config.$fade-easing;
         width: 100%;
 
         &:hover {
-            background-color: var(--accordion-color-hover);
+            --accordion-color: var(--accordion-color-hover);
         }
     }
 
     &__heading {
+        padding: 1rem 1.5rem;
         margin-bottom: 0;
     }
 
     &__content {
-        border-top: 1px solid config.$gray-100;
-        margin: 0 1rem;
-        padding: .5rem 0;
+        padding: 0 config.$padding;
     }
 
     &__contentWrapper {
@@ -38,9 +38,17 @@
         height: 0;
     }
 
-    &__icon {
+    &__iconWrapper {
+        display: flex;
+        padding: .75rem;
+        aspect-ratio: 1;
+        align-items: center;
+        justify-content: center;
         flex-shrink: 0;
-        margin-left: 1rem;
+        background: var(--accordion-color);
+    }
+
+    &__icon {
         transition: transform var(--duration-fast) config.$ease-out-quint;
 
         &.-open {
diff --git a/resources/styles/molecules/card/_index.scss b/resources/styles/molecules/card/_index.scss
index c5057740..70f9a219 100644
--- a/resources/styles/molecules/card/_index.scss
+++ b/resources/styles/molecules/card/_index.scss
@@ -8,33 +8,39 @@
     $b: &;
 
     background-color: config.$white;
+    border-radius: 1rem;
     box-shadow: config.$med-shadow;
     margin-bottom: config.$v-space;
+    overflow: hidden;
     z-index: 1;
 
     &__container {
         display: grid;
         grid-gap: 1rem;
-        grid-template: "icon" "heading" "content" 1fr "actions" / auto;
+        grid-template: "hero" "meta" "heading" "content" 1fr "actions" / auto;
         height: 100%;
     }
 
     &__icon,
+    &__meta,
     &__heading,
     &__content,
     &__actions {
-        justify-self: center; // For IE11 (instead of justify-items)
         padding-left: config.$h-space;
         padding-right: config.$h-space;
         position: relative;
     }
 
+    &__meta {
+        color: config.$meta-text;
+    }
+
     &__tag {
         align-self: start;
         color: config.$meta-text;
         font-size: .875rem;
         font-weight: bold;
-        grid-area: icon;
+        grid-area: hero;
         justify-self: start;
         padding: config.$thin-padding;
         text-transform: uppercase;
@@ -45,13 +51,14 @@
     }
 
     &__icon {
-        grid-area: icon;
+        grid-area: hero;
         padding-top: config.$v-space;
         text-align: center; // For IE11
     }
 
     &__heading {
         grid-area: heading;
+        font-weight: bold;
     }
 
     &__content {
@@ -59,11 +66,16 @@
         width: 100%;
     }
 
+    &__hero {
+        grid-area: hero;
+    }
+
 
     &__background {
         background: config.$gray-100 center/cover;
         grid-column: 1;
-        grid-row: icon / heading;
+        grid-area: hero;
+        grid-row: hero / heading;
         height: 100%;
         justify-self: stretch;
     }
@@ -89,6 +101,12 @@
         }
     }
 
+    &__tags {
+        display: flex;
+        flex-flow: row wrap;
+        gap: 1rem;
+    }
+
     &__action {
         flex-basis: max(9rem, 50%);
     }
diff --git a/resources/styles/molecules/card/card--alternate.twig b/resources/styles/molecules/card/card--alternate.twig
new file mode 100644
index 00000000..df1c7f07
--- /dev/null
+++ b/resources/styles/molecules/card/card--alternate.twig
@@ -0,0 +1,14 @@
+<div class="{{ class }} card">
+    <div class="card__container">
+        <div class="card__background" style="opacity: .3; background-image: url(https://placeimg.com/640/320/tech/grayscale)"></div>
+        <div class="card__tag -overlay">White Paper</div>
+        <div class="card__icon">
+            <svg xmlns="http://www.w3.org/2000/svg" height="64" width="64" viewBox="0 0 6 6" stroke-width=".25" stroke="currentColor" fill="none"><rect x="1" y="1" width="4" height="4" rx="1" /></svg>
+        </div>
+        <h4 class="card__heading">One Great Heading</h4>
+        <p class="card__content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos et voluptatum aliquam neque beatae. Elit vero est ipsa deleniti?</p>
+        <div class="card__actions">
+            <a href="" class="card__action button -primary">Learn More</a>
+        </div>
+    </div>
+</div>
diff --git a/resources/styles/molecules/card/card.twig b/resources/styles/molecules/card/card.twig
index df1c7f07..71577d10 100644
--- a/resources/styles/molecules/card/card.twig
+++ b/resources/styles/molecules/card/card.twig
@@ -1,14 +1,25 @@
 <div class="{{ class }} card">
     <div class="card__container">
-        <div class="card__background" style="opacity: .3; background-image: url(https://placeimg.com/640/320/tech/grayscale)"></div>
-        <div class="card__tag -overlay">White Paper</div>
-        <div class="card__icon">
-            <svg xmlns="http://www.w3.org/2000/svg" height="64" width="64" viewBox="0 0 6 6" stroke-width=".25" stroke="currentColor" fill="none"><rect x="1" y="1" width="4" height="4" rx="1" /></svg>
+        <div class="card__hero">
+            <svg width="100%" height="231px" xmlns="http://www.w3.org/2000/svg">
+              <defs>
+                <pattern patternUnits="userSpaceOnUse" id="Pattern" width="192" height="192" fill="black">
+                  <rect width="96" height="96" />
+                  <rect x="96" y="96" width="96" height="96" />
+                </pattern>
+              </defs>
+              <rect fill="url(#Pattern)" width="100%" height="100%" />
+            </svg>
         </div>
-        <h4 class="card__heading">One Great Heading</h4>
-        <p class="card__content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos et voluptatum aliquam neque beatae. Elit vero est ipsa deleniti?</p>
-        <div class="card__actions">
-            <a href="" class="card__action button -primary">Learn More</a>
+        <div class="card__meta">Posted on Aug 12, 2023</div>
+        <h3 class="card__heading">One Great Heading</h3>
+        <div class="card__content">
+            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos et voluptatum aliquam neque beatae. Elit vero est ipsa deleniti?</p>
+
+            <div class="card__tags">
+                {% render "@tag" %}
+                {% render "@tag" %}
+            </div>
         </div>
     </div>
 </div>
diff --git a/resources/styles/molecules/messaging/_index.scss b/resources/styles/molecules/messaging/_index.scss
index 9a810248..dfb3f5fb 100644
--- a/resources/styles/molecules/messaging/_index.scss
+++ b/resources/styles/molecules/messaging/_index.scss
@@ -8,11 +8,13 @@
     $b: &;
 
     --messaging-color: var(--color, #{config.$plain-text});
+    --messaging-background-color: var(--background-color, #{config.$gray-100});
     --messaging-color-contrast: var(--color-contrast, #{blackwhite(config.$plain-text)});
-    --messaging-height-icon: var(--height-icon, 1.5rem);
+    --messaging-height-icon: var(--height-icon, 2rem);
 
-    background-color: config.$gray-100;
-    box-shadow: .25rem 0 0 var(--messaging-color) inset, config.$med-shadow;
+    background-color: var(--messaging-background-color);
+    border-radius: 4px;
+    box-shadow: 0px 1px 1px rgba(50, 8, 0, 0.2), 0px 8px 24px #{rgba(config.$plain-text, .1)};
     display: grid;
     gap: config.$h-space;
     grid: "icon content" #{config.$line-height * 1em} "_ content" / auto 1fr;
@@ -20,10 +22,16 @@
     padding: config.$padding;
 
     &__icon {
+        align-items: center;
         align-self: center;
+        aspect-ratio: 1;
+        background-color: var(--messaging-color);
+        border-radius: 4px;
+        color: var(--messaging-color-contrast);
+        display: flex;
         grid-area: icon;
         height: var(--messaging-height-icon);
-        color: var(--messaging-color);
+        justify-content: center;
     }
 
     &__content {
@@ -47,21 +55,29 @@
 
     &.-success {
         --messaging-color: var(--color, #{config.$success});
+        --messaging-background-color: var(--background-color, #{config.$green-50});
         --messaging-color-contrast: var(--color-contrast, #{blackwhite(config.$success)});
+        box-shadow: 0px 1px 1px rgba(50, 8, 0, 0.2), 0px 8px 24px #{rgba(config.$success, .1)};
     }
 
     &.-warning {
         --messaging-color: var(--color, #{config.$warning});
+        --messaging-background-color: var(--background-color, #{config.$yellow-50});
         --messaging-color-contrast: var(--color-contrast, #{blackwhite(config.$warning)});
+        box-shadow: 0px 1px 1px rgba(50, 33, 0, 0.2), 0px 8px 24px #{rgba(config.$warning, .1)};
     }
 
     &.-info {
         --messaging-color: var(--color, #{config.$info});
+        --messaging-background-color: var(--background-color, #{config.$blue-50});
         --messaging-color-contrast: var(--color-contrast, #{blackwhite(config.$info)});
+        box-shadow: 0px 1px 1px rgba(34, 51, 0, 0.2), 0px 8px 24px #{rgba(config.$info, .1)};
     }
 
     &.-error {
         --messaging-color: var(--color, #{config.$error});
+        --messaging-background-color: var(--background-color, #{config.$red-50});
         --messaging-color-contrast: var(--color-contrast, #{blackwhite(config.$error)});
+        box-shadow: 0px 1px 1px rgba(50, 8, 0, 0.2), 0px 8px 24px #{rgba(config.$error, .1)};
     }
 }
diff --git a/resources/styles/molecules/messaging/messaging.twig b/resources/styles/molecules/messaging/messaging.twig
index ea8bec15..720fb5d2 100644
--- a/resources/styles/molecules/messaging/messaging.twig
+++ b/resources/styles/molecules/messaging/messaging.twig
@@ -1,10 +1,10 @@
 <div class="messaging">
-    <svg class="messaging__icon" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-        <path d="M3 20l1.3 -3.9a9 8 0 1 1 3.4 2.9l-4.7 1" />
-        <line x1="12" y1="12" x2="12" y2="12.01" />
-        <line x1="8" y1="12" x2="8" y2="12.01" />
-        <line x1="16" y1="12" x2="16" y2="12.01" />
-    </svg>
+    <div class="messaging__icon">
+        <svg width="2" height="20" viewBox="0 0 2 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M1 0C0.447715 0 0 0.447716 0 1V13C0 13.5523 0.447715 14 1 14C1.55228 14 2 13.5523 2 13V1C2 0.447715 1.55228 0 1 0ZM1 17C0.447715 17 0 17.4477 0 18V19C0 19.5523 0.447715 20 1 20C1.55228 20 2 19.5523 2 19V18C2 17.4477 1.55228 17 1 17Z" fill="currentColor"/>
+        </svg>
+    </div>
+
     <div class="messaging__content">
         <p><strong>Default</strong> – Message with a <a href="https://www.imarc.com/">link</a>.</p>
 
@@ -13,10 +13,12 @@
 </div>
 
 <div class="messaging -success">
-    <svg class="messaging__icon" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-        <circle cx="12" cy="12" r="9" />
-        <path d="M9 12l2 2l4 -4" />
-    </svg>
+    <div class="messaging__icon">
+        <svg width="17" height="12" viewBox="0 0 17 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M15.9706 0.292894C15.5801 -0.0976307 14.9469 -0.0976307 14.5564 0.292894L5.31374 9.53555L1.70712 5.92893C1.3166 5.53841 0.683433 5.53841 0.292908 5.92893C-0.0976158 6.31946 -0.0976158 6.95262 0.292908 7.34315L4.53555 11.5858C4.70307 11.7533 4.91525 11.849 5.13376 11.8728C5.45978 11.9496 5.81687 11.8608 6.07112 11.6066L15.9706 1.70711C16.3611 1.31658 16.3611 0.683418 15.9706 0.292894Z" fill="#EBFFEE"/>
+        </svg>
+    </div>
+
     <div class="messaging__content">
         <p>
             <strong>Success</strong> – Message with a <a href="https://www.imarc.com/">link</a>.
@@ -28,11 +30,11 @@
 </div>
 
 <div class="messaging -error">
-    <svg class="messaging__icon" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-        <path d="M8.7 3h6.6c.3 0 .5 .1 .7 .3l4.7 4.7c.2 .2 .3 .4 .3 .7v6.6c0 .3 -.1 .5 -.3 .7l-4.7 4.7c-.2 .2 -.4 .3 -.7 .3h-6.6c-.3 0 -.5 -.1 -.7 -.3l-4.7 -4.7c-.2 -.2 -.3 -.4 -.3 -.7v-6.6c0 -.3 .1 -.5 .3 -.7l4.7 -4.7c.2 -.2 .4 -.3 .7 -.3z" />
-        <line x1="12" y1="8" x2="12" y2="12" />
-        <line x1="12" y1="16" x2="12.01" y2="16" />
-    </svg>
+    <div class="messaging__icon">
+        <svg width="2" height="20" viewBox="0 0 2 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M1 0C0.447715 0 0 0.447716 0 1V13C0 13.5523 0.447715 14 1 14C1.55228 14 2 13.5523 2 13V1C2 0.447715 1.55228 0 1 0ZM1 17C0.447715 17 0 17.4477 0 18V19C0 19.5523 0.447715 20 1 20C1.55228 20 2 19.5523 2 19V18C2 17.4477 1.55228 17 1 17Z" fill="currentColor"/>
+        </svg>
+    </div>
     <div class="messaging__content">
         <p><strong>Error</strong> – Message with a <a href="https://www.imarc.com/">link</a>.</p>
         <ul>
@@ -45,11 +47,11 @@
 </div>
 
 <div class="messaging -info">
-    <svg class="messaging__icon" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-        <circle cx="12" cy="12" r="9" />
-        <line x1="12" y1="8" x2="12.01" y2="8" />
-        <polyline points="11 12 12 12 12 16 13 16" />
-    </svg>
+    <div class="messaging__icon">
+        <svg width="2" height="20" viewBox="0 0 2 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M1 0C0.447715 0 0 0.447716 0 1V13C0 13.5523 0.447715 14 1 14C1.55228 14 2 13.5523 2 13V1C2 0.447715 1.55228 0 1 0ZM1 17C0.447715 17 0 17.4477 0 18V19C0 19.5523 0.447715 20 1 20C1.55228 20 2 19.5523 2 19V18C2 17.4477 1.55228 17 1 17Z" fill="currentColor"/>
+        </svg>
+    </div>
     <div class="messaging__content">
         <p><strong>Info</strong> – Message with a <a href="https://www.imarc.com/">link</a>.</p>
 
@@ -58,10 +60,11 @@
 </div>
 
 <div class="messaging -warning">
-    <svg class="messaging__icon" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-        <path d="M12 9v2m0 4v.01" />
-        <path d="M5 19h14a2 2 0 0 0 1.84 -2.75l-7.1 -12.25a2 2 0 0 0 -3.5 0l-7.1 12.25a2 2 0 0 0 1.75 2.75" />
-    </svg>
+    <div class="messaging__icon">
+        <svg width="2" height="20" viewBox="0 0 2 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M1 0C0.447715 0 0 0.447716 0 1V13C0 13.5523 0.447715 14 1 14C1.55228 14 2 13.5523 2 13V1C2 0.447715 1.55228 0 1 0ZM1 17C0.447715 17 0 17.4477 0 18V19C0 19.5523 0.447715 20 1 20C1.55228 20 2 19.5523 2 19V18C2 17.4477 1.55228 17 1 17Z" fill="currentColor"/>
+        </svg>
+    </div>
     <div class="messaging__content">
         <p><strong>Warning</strong> – Message with a <a href="https://www.imarc.com/">link</a>.</p>
 
diff --git a/resources/styles/molecules/search/_index.scss b/resources/styles/molecules/search/_index.scss
index 31f4d3dd..50aef645 100644
--- a/resources/styles/molecules/search/_index.scss
+++ b/resources/styles/molecules/search/_index.scss
@@ -6,13 +6,25 @@
     margin-bottom: 3rem;
 
     &__field {
-        display: flex;
+        display: grid;
+        grid-auto-flow: column;
+        grid-template-columns: 1fr auto;
         margin-bottom: 1rem;
     }
 
     &__input,
     input#{&}__input {
+        border-radius: 2em;
+        grid-area: 1 / 1 / 2 / 2;
         margin: 0;
+        padding-left: 2.5rem;
+    }
+
+    &__icon {
+        align-self: center;
+        color: config.$gray-400;
+        grid-area: 1 / 1 / 2 / 2;
+        margin-left: 1rem;
     }
 
     &__meta {
diff --git a/resources/styles/molecules/search/search.twig b/resources/styles/molecules/search/search.twig
index 67cdbefd..39c11e46 100644
--- a/resources/styles/molecules/search/search.twig
+++ b/resources/styles/molecules/search/search.twig
@@ -4,6 +4,11 @@
 
         <div class="search__field">
             <input class="search__input" type="search" placeholder="Search...">
+            <svg class="search__icon" width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M12.5 12.752L19.5 19.752" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                <circle cx="7.5" cy="7.75201" r="6.5" stroke="currentColor" stroke-width="2"/>
+            </svg>
+
             <button class="search__button button -primary" type="submit">Search</button>
         </div>
 
diff --git a/resources/styles/molecules/testimonial/_index.scss b/resources/styles/molecules/testimonial/_index.scss
index 29de8296..37e20cb9 100644
--- a/resources/styles/molecules/testimonial/_index.scss
+++ b/resources/styles/molecules/testimonial/_index.scss
@@ -4,8 +4,8 @@
 .testimonial {
     $b: &;
 
-    --testimonial-color: var(--color, #{config.$plain-text});
-    --testimonial-color-attribution: var(--color-attribution, #{config.$meta-text});
+    --testimonial-color: var(--color, #{config.$meta-text});
+    --testimonial-color-attribution: var(--color-attribution, #{config.$plain-text});
     --testimonial-color-punctuation: var(--color-punctuation, #{config.$primary});
 
     display: grid;
@@ -24,7 +24,7 @@
             color: var(--testimonial-color-punctuation);
             content: '”';
             display: inline-block;
-            font-size: 400%;
+            font-size: 8em;
             height: 1rem;
             line-height: 0;
             transform: translateY(150%);
@@ -33,7 +33,7 @@
 
         &::before {
             content: '“';
-            text-indent: -2.5rem;
+            text-indent: -5.5rem;
         }
     }
 
diff --git a/resources/styles/organisms/site-footer/_index.scss b/resources/styles/organisms/site-footer/_index.scss
index 3c92b127..ba9128f8 100644
--- a/resources/styles/organisms/site-footer/_index.scss
+++ b/resources/styles/organisms/site-footer/_index.scss
@@ -21,6 +21,7 @@
     &__identity {
         display: grid;
         grid-column: main;
+        grid-row: span 2;
         justify-items: center;
         row-gap: config.$thin-h-space;
         text-align: center;
@@ -44,6 +45,7 @@
     }
 
     &__socialLinks {
+        grid-column: span 2;
         display: flex;
         gap: config.$thin-h-space;
     }
@@ -75,9 +77,19 @@
 
     &__utility {
         color: config.$gray-300;
-        display: flex;
+        display: grid;
+        grid-template: auto / auto 1fr;
         font-size: .875rem;
         grid-column: main;
-        justify-content: space-between;
+        grid-row: 2;
+        gap: 1rem;
+
+        @include at(md) {
+            grid-column: 6 / main;
+        }
+
+        @include at(lg) {
+            grid-column: 5 / main;
+        }
     }
 }
diff --git a/resources/styles/organisms/site-footer/site-footer.twig b/resources/styles/organisms/site-footer/site-footer.twig
index a6ef2ce7..8b0c9c6a 100644
--- a/resources/styles/organisms/site-footer/site-footer.twig
+++ b/resources/styles/organisms/site-footer/site-footer.twig
@@ -25,30 +25,7 @@
                 <div><a href="tel:+19784628848">978-462-8848</a></div>
             </div>
 
-            <div class="siteFooter__socialLinks">
-                <a class="siteFooter__socialLink" href="">
-                    <span class="sr-only">Visit us on Facebook</span>
-                    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-facebook" width="32" height="32" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                    <path d="M7 10v4h3v7h4v-7h3l1 -4h-4v-2a1 1 0 0 1 1 -1h3v-4h-3a5 5 0 0 0 -5 5v2h-3" />
-                    </svg>
-                </a>
-
-                <a class="siteFooter__socialLink" href="">
-                    <span class="sr-only">Visit us on Instagram</span>
-                    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-instagram" width="32" height="32" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                    <rect x="4" y="4" width="16" height="16" rx="4" />
-                    <circle cx="12" cy="12" r="3" />
-                    <line x1="16.5" y1="7.5" x2="16.5" y2="7.501" />
-                    </svg>
-                </a>
 
-                <a class="siteFooter__socialLink" href="">
-                    <span class="sr-only">Visit us on Twitter</span>
-                    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-twitter" width="32" height="32" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                    <path d="M22 4.01c-1 .49 -1.98 .689 -3 .99c-1.121 -1.265 -2.783 -1.335 -4.38 -.737s-2.643 2.06 -2.62 3.737v1c-3.245 .083 -6.135 -1.395 -8 -4c0 0 -4.182 7.433 4 11c-1.872 1.247 -3.739 2.088 -6 2c3.308 1.803 6.913 2.423 10.034 1.517c3.58 -1.04 6.522 -3.723 7.651 -7.742a13.84 13.84 0 0 0 .497 -3.753c-.002 -.249 1.51 -2.772 1.818 -4.013z" />
-                    </svg>
-                </a>
-            </div>
         </div>
 
         <div class="siteFooter__links">
@@ -100,6 +77,30 @@
         </div>
 
         <div class="siteFooter__utility">
+            <div class="siteFooter__socialLinks">
+                <a class="siteFooter__socialLink" href="">
+                    <span class="sr-only">Visit us on Facebook</span>
+                    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-facebook" width="32" height="32" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <path d="M7 10v4h3v7h4v-7h3l1 -4h-4v-2a1 1 0 0 1 1 -1h3v-4h-3a5 5 0 0 0 -5 5v2h-3" />
+                    </svg>
+                </a>
+
+                <a class="siteFooter__socialLink" href="">
+                    <span class="sr-only">Visit us on Instagram</span>
+                    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-instagram" width="32" height="32" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <rect x="4" y="4" width="16" height="16" rx="4" />
+                    <circle cx="12" cy="12" r="3" />
+                    <line x1="16.5" y1="7.5" x2="16.5" y2="7.501" />
+                    </svg>
+                </a>
+
+                <a class="siteFooter__socialLink" href="">
+                    <span class="sr-only">Visit us on Twitter</span>
+                    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-twitter" width="32" height="32" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <path d="M22 4.01c-1 .49 -1.98 .689 -3 .99c-1.121 -1.265 -2.783 -1.335 -4.38 -.737s-2.643 2.06 -2.62 3.737v1c-3.245 .083 -6.135 -1.395 -8 -4c0 0 -4.182 7.433 4 11c-1.872 1.247 -3.739 2.088 -6 2c3.308 1.803 6.913 2.423 10.034 1.517c3.58 -1.04 6.522 -3.723 7.651 -7.742a13.84 13.84 0 0 0 .497 -3.753c-.002 -.249 1.51 -2.772 1.818 -4.013z" />
+                    </svg>
+                </a>
+            </div>
             <div class="siteFooter__copyright">© {{ "now"|date('Y') }} Boilerplate.</div>
 
             {% render "@utility-nav" %}