diff --git a/assets/new-request-form-bundle.js b/assets/new-request-form-bundle.js
index 4c28d753a..6ce318c21 100644
--- a/assets/new-request-form-bundle.js
+++ b/assets/new-request-form-bundle.js
@@ -83,7 +83,8 @@ function Input({ field, onChange }) {
       jsxRuntimeExports.jsx(Input$1, {
         name: name,
         type: inputType,
-        defaultValue: value && value !== '' ? value : `Enter ${label}`,
+        defaultValue: value && value !== '' ? value : '',
+        placeholder: `Enter ${label}`,
         validation: error ? 'error' : undefined,
         required: required,
         onChange: (e) => {
@@ -171,7 +172,8 @@ function TextArea({ field, hasWysiwyg, baseLocale, hasAtMentions, userRole, bran
       jsxRuntimeExports.jsx(Textarea, {
         ref: ref,
         name: name,
-        defaultValue: value && value !== '' ? value : 'Describe your issue.',
+        defaultValue: value && value !== '' ? value : '',
+        placeholder: 'Describe your issue.',
         validation: error ? 'error' : undefined,
         required: required,
         onChange: (e) => onChange(e.target.value),
@@ -1595,7 +1597,6 @@ function CreditCard({ field, onChange }) {
 
 function Tagger({ field, onChange }) {
   const { label, options, error, value, name, required, description } = field;
-  console.log('value', value);
   const { currentGroup, isGroupIdentifier, setCurrentGroupByIdentifier } = useNestedOptions({
     options,
     hasEmptyOption: true,
@@ -2129,7 +2130,6 @@ function NewRequestForm({
     organizationField: organization_field,
     dueDateField: due_date_field,
   });
-  console.log('requestForm', requestForm);
   const [selectedTopic, setSelectedTopic] = reactExports.useState('');
   const [ticketFields, setTicketFields] = reactExports.useState(prefilledTicketFields);
   const [organizationField, setOrganizationField] = reactExports.useState(
diff --git a/assets/shared-bundle.js b/assets/shared-bundle.js
index 92643f55f..12dd66879 100644
--- a/assets/shared-bundle.js
+++ b/assets/shared-bundle.js
@@ -34215,30 +34215,21 @@ var getIntrinsic = function GetIntrinsic(name, allowMissing) {
 
 var callBind$3 = { exports: {} };
 
-var esDefineProperty;
-var hasRequiredEsDefineProperty;
+var GetIntrinsic$3 = getIntrinsic;
 
-function requireEsDefineProperty() {
-  if (hasRequiredEsDefineProperty) return esDefineProperty;
-  hasRequiredEsDefineProperty = 1;
-
-  var GetIntrinsic = getIntrinsic;
-
-  /** @type {import('.')} */
-  var $defineProperty = GetIntrinsic('%Object.defineProperty%', true) || false;
-  if ($defineProperty) {
-    try {
-      $defineProperty({}, 'a', { value: 1 });
-    } catch (e) {
-      // IE 8 has a broken defineProperty
-      $defineProperty = false;
-    }
+/** @type {import('.')} */
+var $defineProperty$2 = GetIntrinsic$3('%Object.defineProperty%', true) || false;
+if ($defineProperty$2) {
+  try {
+    $defineProperty$2({}, 'a', { value: 1 });
+  } catch (e) {
+    // IE 8 has a broken defineProperty
+    $defineProperty$2 = false;
   }
-
-  esDefineProperty = $defineProperty;
-  return esDefineProperty;
 }
 
+var esDefineProperty = $defineProperty$2;
+
 var GetIntrinsic$2 = getIntrinsic;
 
 var $gOPD$1 = GetIntrinsic$2('%Object.getOwnPropertyDescriptor%', true);
@@ -34254,7 +34245,7 @@ if ($gOPD$1) {
 
 var gopd$1 = $gOPD$1;
 
-var $defineProperty$1 = requireEsDefineProperty();
+var $defineProperty$1 = esDefineProperty;
 
 var $SyntaxError = syntax;
 var $TypeError$3 = type;
@@ -34307,7 +34298,7 @@ var defineDataProperty$1 = function defineDataProperty(obj, property, value) {
   }
 };
 
-var $defineProperty = requireEsDefineProperty();
+var $defineProperty = esDefineProperty;
 
 var hasPropertyDescriptors = function hasPropertyDescriptors() {
   return !!$defineProperty;
@@ -34386,7 +34377,7 @@ callBind$3.exports;
   var $call = GetIntrinsic('%Function.prototype.call%');
   var $reflectApply = GetIntrinsic('%Reflect.apply%', true) || bind.call($call, $apply);
 
-  var $defineProperty = requireEsDefineProperty();
+  var $defineProperty = esDefineProperty;
   var $max = GetIntrinsic('%Math.max%');
 
   module.exports = function callBind(originalFunction) {
diff --git a/assets/tailwind-output.css b/assets/tailwind-output.css
index 4d93c7149..2682dbae1 100644
--- a/assets/tailwind-output.css
+++ b/assets/tailwind-output.css
@@ -1295,6 +1295,11 @@ video {
   gap: 1rem;
 }
 
+.gap-x-4 {
+  -moz-column-gap: 1rem;
+  column-gap: 1rem;
+}
+
 .space-x-2 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(0.5rem * var(--tw-space-x-reverse));
@@ -1393,10 +1398,6 @@ video {
   border-radius: 0.25rem;
 }
 
-.rounded-\[0\.25rem\] {
-  border-radius: 0.25rem;
-}
-
 .rounded-\[1\.25rem\] {
   border-radius: 1.25rem;
 }
@@ -1501,19 +1502,22 @@ video {
   background-color: rgb(81 13 67 / var(--tw-bg-opacity));
 }
 
-.bg-dark-blue-light {
-  background-color: rgba(16, 20, 61, 0.8);
+.bg-dark-blue {
+  --tw-bg-opacity: 1;
+  background-color: rgb(16 20 61 / var(--tw-bg-opacity));
 }
 
-.bg-dark-green-light {
-  background-color: rgba(15, 44, 26, 0.8);
+.bg-dark-green {
+  --tw-bg-opacity: 1;
+  background-color: rgb(15 44 26 / var(--tw-bg-opacity));
 }
 
-.bg-dark-orange-light {
-  background-color: rgba(55, 27, 12, 0.8);
+.bg-dark-orange-fade {
+  --tw-bg-opacity: 1;
+  background-color: rgb(55 27 12 / var(--tw-bg-opacity));
 }
 
-.bg-dark-pink-light {
+.bg-dark-pink-fade {
   --tw-bg-opacity: 1;
   background-color: rgb(54 26 55 / var(--tw-bg-opacity));
 }
@@ -1557,7 +1561,7 @@ video {
   background-color: rgb(254 235 252 / var(--tw-bg-opacity));
 }
 
-.bg-light-blue-light {
+.bg-light-blue {
   --tw-bg-opacity: 1;
   background-color: rgb(239 244 255 / var(--tw-bg-opacity));
 }
@@ -1567,7 +1571,7 @@ video {
   background-color: rgb(247 245 244 / var(--tw-bg-opacity));
 }
 
-.bg-light-green-light {
+.bg-light-green {
   --tw-bg-opacity: 1;
   background-color: rgb(238 251 241 / var(--tw-bg-opacity));
 }
@@ -1577,21 +1581,11 @@ video {
   background-color: rgb(251 245 242 / var(--tw-bg-opacity));
 }
 
-.bg-light-orange-light {
-  --tw-bg-opacity: 1;
-  background-color: rgb(254 245 234 / var(--tw-bg-opacity));
-}
-
 .bg-light-pink-fade {
   --tw-bg-opacity: 1;
   background-color: rgb(254 244 255 / var(--tw-bg-opacity));
 }
 
-.bg-light-pink-light {
-  --tw-bg-opacity: 1;
-  background-color: rgb(254 244 255 / var(--tw-bg-opacity));
-}
-
 .bg-light-pink-vibrant {
   --tw-bg-opacity: 1;
   background-color: rgb(245 13 180 / var(--tw-bg-opacity));
@@ -1625,22 +1619,18 @@ video {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
-.fill-dark-accent-1 {
-  fill: #fc74fe;
+.fill-blue-base {
+  fill: #4981ff;
 }
 
-.fill-dark-blue-vibrant {
-  fill: #0c8911;
+.fill-dark-accent-1 {
+  fill: #fc74fe;
 }
 
 .fill-dark-brown-vibrant {
   fill: #85754a;
 }
 
-.fill-dark-green-base {
-  fill: #0c8911;
-}
-
 .fill-dark-neutral-1 {
   fill: #ffffff;
 }
@@ -1657,22 +1647,18 @@ video {
   fill: #fc74fe;
 }
 
-.fill-light-accent-1 {
-  fill: #f50db4;
+.fill-green-base {
+  fill: #0c8911;
 }
 
-.fill-light-blue-vibrant {
-  fill: #0047ff;
+.fill-light-accent-1 {
+  fill: #f50db4;
 }
 
 .fill-light-brown-vibrant {
   fill: #85754a;
 }
 
-.fill-light-green-base {
-  fill: #0c8911;
-}
-
 .fill-light-neutral-1 {
   fill: #222222;
 }
@@ -1742,16 +1728,6 @@ video {
   padding-bottom: 0.75rem !important;
 }
 
-.px-1\.5 {
-  padding-left: 0.375rem;
-  padding-right: 0.375rem;
-}
-
-.px-2 {
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-}
-
 .px-3 {
   padding-left: 0.75rem;
   padding-right: 0.75rem;
@@ -1893,6 +1869,10 @@ video {
   padding-top: 2.25rem;
 }
 
+.text-left {
+  text-align: left;
+}
+
 .text-center {
   text-align: center;
 }
@@ -1917,6 +1897,10 @@ video {
   text-transform: capitalize;
 }
 
+.\!italic {
+  font-style: italic !important;
+}
+
 .italic {
   font-style: italic;
 }
@@ -1979,14 +1963,14 @@ video {
   color: rgb(34 34 34 / var(--tw-text-opacity)) !important;
 }
 
-.text-dark-accent-1 {
+.text-blue-base {
   --tw-text-opacity: 1;
-  color: rgb(252 116 254 / var(--tw-text-opacity));
+  color: rgb(73 129 255 / var(--tw-text-opacity));
 }
 
-.text-dark-blue-vibrant {
+.text-dark-accent-1 {
   --tw-text-opacity: 1;
-  color: rgb(12 137 17 / var(--tw-text-opacity));
+  color: rgb(252 116 254 / var(--tw-text-opacity));
 }
 
 .text-dark-brown-vibrant {
@@ -1994,11 +1978,6 @@ video {
   color: rgb(133 117 74 / var(--tw-text-opacity));
 }
 
-.text-dark-green-base {
-  --tw-text-opacity: 1;
-  color: rgb(12 137 17 / var(--tw-text-opacity));
-}
-
 .text-dark-neutral-1 {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
@@ -2019,14 +1998,14 @@ video {
   color: rgb(252 116 254 / var(--tw-text-opacity));
 }
 
-.text-light-accent-1 {
+.text-green-base {
   --tw-text-opacity: 1;
-  color: rgb(245 13 180 / var(--tw-text-opacity));
+  color: rgb(12 137 17 / var(--tw-text-opacity));
 }
 
-.text-light-blue-vibrant {
+.text-light-accent-1 {
   --tw-text-opacity: 1;
-  color: rgb(0 71 255 / var(--tw-text-opacity));
+  color: rgb(245 13 180 / var(--tw-text-opacity));
 }
 
 .text-light-brown-vibrant {
@@ -2034,11 +2013,6 @@ video {
   color: rgb(133 117 74 / var(--tw-text-opacity));
 }
 
-.text-light-green-base {
-  --tw-text-opacity: 1;
-  color: rgb(12 137 17 / var(--tw-text-opacity));
-}
-
 .text-light-neutral-1 {
   --tw-text-opacity: 1;
   color: rgb(34 34 34 / var(--tw-text-opacity));
@@ -2228,9 +2202,9 @@ video {
 .serif-heading-0-mobile {
   font-family: var(--font-riegraf);
   font-size: 3rem;
-  font-weight: 400;
-  line-height: 2.82rem;
-  letter-spacing: -0.03rem;
+  font-style: normal;
+  font-weight: 300;
+  line-height: 2.88rem;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -2240,7 +2214,7 @@ video {
   font-size: 3rem;
   font-weight: 500;
   line-height: 2.88rem;
-  letter-spacing: -0.02rem;
+  letter-spacing: -0.06rem;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -2248,8 +2222,9 @@ video {
 .heading-1 {
   font-family: var(--font-basel-grotesk);
   font-size: 3.25rem;
-  font-weight: 485;
-  line-height: 3.75rem;
+  font-weight: 500;
+  line-height: 3.12rem;
+  letter-spacing: -0.065rem;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -2257,8 +2232,9 @@ video {
 .heading-2 {
   font-family: var(--font-basel-grotesk);
   font-size: 2.25rem;
-  font-weight: 485;
-  line-height: 2.75rem;
+  font-weight: 500;
+  line-height: 2.52rem;
+  letter-spacing: -0.0225rem;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -2266,8 +2242,10 @@ video {
 .heading-3 {
   font-family: var(--font-basel-grotesk);
   font-size: 1.5rem;
-  font-weight: 485;
-  line-height: 2rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 1.8rem;
+  letter-spacing: -0.0075rem;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -2275,8 +2253,9 @@ video {
 .subheading-1 {
   font-family: var(--font-basel-grotesk);
   font-size: 1.125rem;
-  font-weight: 485;
-  line-height: 1.5rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 133.333%;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -2284,8 +2263,9 @@ video {
 .subheading-2 {
   font-family: var(--font-basel-grotesk);
   font-size: 1rem;
-  font-weight: 485;
-  line-height: 1.5rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 150%;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -2293,8 +2273,9 @@ video {
 .body-1 {
   font-family: var(--font-basel-grotesk);
   font-size: 1.125rem;
-  font-weight: 485;
-  line-height: 1.5rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 1.4625rem;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -2302,8 +2283,9 @@ video {
 .\!body-2 {
   font-family: var(--font-basel-grotesk) !important;
   font-size: 1rem !important;
-  font-weight: 485 !important;
-  line-height: 1/5rem !important;
+  font-style: normal !important;
+  font-weight: 500 !important;
+  line-height: 1.4rem !important;
   -webkit-font-smoothing: antialiased !important;
   -moz-osx-font-smoothing: grayscale !important;
 }
@@ -2311,8 +2293,9 @@ video {
 .body-2 {
   font-family: var(--font-basel-grotesk);
   font-size: 1rem;
-  font-weight: 485;
-  line-height: 1/5rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 1.4rem;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -2320,8 +2303,9 @@ video {
 .body-3 {
   font-family: var(--font-basel-grotesk);
   font-size: 0.875rem;
-  font-weight: 485;
-  line-height: 1/25rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 1.09375rem;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -2329,7 +2313,8 @@ video {
 .button-label-1 {
   font-family: var(--font-basel-grotesk);
   font-size: 1.125rem;
-  font-weight: 600;
+  font-style: normal;
+  font-weight: 535;
   line-height: 1.5rem;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -2338,7 +2323,8 @@ video {
 .button-label-2 {
   font-family: var(--font-basel-grotesk);
   font-size: 1rem;
-  font-weight: 600;
+  font-style: normal;
+  font-weight: 535;
   line-height: 1.5rem;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -2347,7 +2333,8 @@ video {
 .button-label-3 {
   font-family: var(--font-basel-grotesk);
   font-size: 0.875rem;
-  font-weight: 600;
+  font-style: normal;
+  font-weight: 535;
   line-height: 1.25rem;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -2356,7 +2343,8 @@ video {
 .button-label-4 {
   font-family: var(--font-basel-grotesk);
   font-size: 0.75rem;
-  font-weight: 600;
+  font-style: normal;
+  font-weight: 535;
   line-height: 1rem;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -2425,8 +2413,9 @@ video {
     h2 {
       font-family: var(--font-basel-grotesk);
       font-size: 2.25rem;
-      font-weight: 485;
-      line-height: 2.75rem;
+      font-weight: 500;
+      line-height: 2.52rem;
+      letter-spacing: -0.0225rem;
       -webkit-font-smoothing: antialiased;
       -moz-osx-font-smoothing: grayscale;
     }
@@ -2439,8 +2428,10 @@ video {
     h3 {
       font-family: var(--font-basel-grotesk);
       font-size: 1.5rem;
-      font-weight: 485;
-      line-height: 2rem;
+      font-style: normal;
+      font-weight: 500;
+      line-height: 1.8rem;
+      letter-spacing: -0.0075rem;
       -webkit-font-smoothing: antialiased;
       -moz-osx-font-smoothing: grayscale;
     }
@@ -2453,8 +2444,10 @@ video {
     h4 {
       font-family: var(--font-basel-grotesk);
       font-size: 1.25rem;
-      font-weight: 485;
-      line-height: 1.625rem;
+      font-style: normal;
+      font-weight: 500;
+      line-height: 1.5rem;
+      letter-spacing: -0.00625rem;
       -webkit-font-smoothing: antialiased;
       -moz-osx-font-smoothing: grayscale;
     }
@@ -2467,8 +2460,9 @@ video {
     h5 {
       font-family: var(--font-basel-grotesk);
       font-size: 1.125rem;
-      font-weight: 485;
-      line-height: 1.5rem;
+      font-style: normal;
+      font-weight: 500;
+      line-height: 133.333%;
       -webkit-font-smoothing: antialiased;
       -moz-osx-font-smoothing: grayscale;
     }
@@ -2481,8 +2475,9 @@ video {
     h6 {
       font-family: var(--font-basel-grotesk);
       font-size: 1rem;
-      font-weight: 485;
-      line-height: 1.5rem;
+      font-style: normal;
+      font-weight: 500;
+      line-height: 150%;
       -webkit-font-smoothing: antialiased;
       -moz-osx-font-smoothing: grayscale;
     }
@@ -2492,8 +2487,9 @@ video {
     p {
       font-family: var(--font-basel-grotesk);
       font-size: 1.125rem;
-      font-weight: 485;
-      line-height: 1.5rem;
+      font-style: normal;
+      font-weight: 500;
+      line-height: 1.4625rem;
       -webkit-font-smoothing: antialiased;
       -moz-osx-font-smoothing: grayscale;
     }
@@ -2562,8 +2558,9 @@ video {
     li {
       font-family: var(--font-basel-grotesk);
       font-size: 1.125rem;
-      font-weight: 485;
-      line-height: 1.5rem;
+      font-style: normal;
+      font-weight: 500;
+      line-height: 1.4625rem;
       -webkit-font-smoothing: antialiased;
       -moz-osx-font-smoothing: grayscale;
     }
@@ -2628,8 +2625,9 @@ video {
     td {
       font-family: var(--font-basel-grotesk);
       font-size: 1rem;
-      font-weight: 485;
-      line-height: 1/5rem;
+      font-style: normal;
+      font-weight: 500;
+      line-height: 1.4rem;
       -webkit-font-smoothing: antialiased;
       -moz-osx-font-smoothing: grayscale;
     }
@@ -2639,8 +2637,9 @@ video {
       span {
         font-family: var(--font-basel-grotesk);
         font-size: 1rem;
-        font-weight: 485;
-        line-height: 1/5rem;
+        font-style: normal;
+        font-weight: 500;
+        line-height: 1.4rem;
         -webkit-font-smoothing: antialiased;
         -moz-osx-font-smoothing: grayscale;
       }
@@ -2689,10 +2688,11 @@ video {
     .article-votes-question,
     .article-vote,
     .article-vote-divider {
-      font-family: var(--font-fragment-mono);
-      font-size: 0.8125rem;
-      font-weight: 400;
-      line-height: 1.25rem;
+      font-family: var(--font-basel-grotesk);
+      font-size: 0.75rem;
+      font-style: normal;
+      font-weight: 535;
+      line-height: 1rem;
       -webkit-font-smoothing: antialiased;
       -moz-osx-font-smoothing: grayscale;
     }
@@ -2714,10 +2714,11 @@ video {
       color: rgb(125 125 125 / var(--tw-text-opacity));
     }
     .article-updated-text {
-      font-family: var(--font-fragment-mono);
-      font-size: 0.8125rem;
-      font-weight: 400;
-      line-height: 1.25rem;
+      font-family: var(--font-basel-grotesk);
+      font-size: 0.75rem;
+      font-style: normal;
+      font-weight: 535;
+      line-height: 1rem;
       -webkit-font-smoothing: antialiased;
       -moz-osx-font-smoothing: grayscale;
     }
@@ -2742,8 +2743,10 @@ video {
     .related-articles-title {
       font-family: var(--font-basel-grotesk);
       font-size: 1.5rem;
-      font-weight: 485;
-      line-height: 2rem;
+      font-style: normal;
+      font-weight: 500;
+      line-height: 1.8rem;
+      letter-spacing: -0.0075rem;
       -webkit-font-smoothing: antialiased;
       -moz-osx-font-smoothing: grayscale;
     }
@@ -2777,6 +2780,9 @@ video {
       }
     }
     ul {
+      li:not(:first-child, :nth-child(2)) {
+        display: none;
+      }
       li {
         position: relative;
       }
@@ -2786,11 +2792,25 @@ video {
       li {
         display: flex;
       }
+      li {
+        max-height: 7.5rem;
+      }
+      li {
+        border-radius: 1.25rem;
+      }
+      li {
+        --tw-bg-opacity: 1;
+        background-color: rgb(254 244 255 / var(--tw-bg-opacity));
+      }
       @media (min-width: 768px) {
         li {
           grid-column: span 3 / span 3;
         }
       }
+      li:where(.dark, .dark *) {
+        --tw-bg-opacity: 1;
+        background-color: rgb(54 26 55 / var(--tw-bg-opacity));
+      }
       li {
         &:before {
           top: 1rem;
@@ -2838,15 +2858,17 @@ video {
         a {
           display: flex;
         }
+        a {
+          height: 100%;
+        }
         a {
           width: 100%;
         }
         a {
-          border-radius: 0.375rem;
+          align-items: flex-end;
         }
         a {
-          --tw-bg-opacity: 1;
-          background-color: rgb(254 244 255 / var(--tw-bg-opacity));
+          border-radius: 1.25rem;
         }
         a {
           padding: 1rem;
@@ -2861,15 +2883,12 @@ video {
         a {
           font-family: var(--font-basel-grotesk);
           font-size: 1rem;
-          font-weight: 485;
-          line-height: 1/5rem;
+          font-style: normal;
+          font-weight: 500;
+          line-height: 1.4rem;
           -webkit-font-smoothing: antialiased;
           -moz-osx-font-smoothing: grayscale;
         }
-        a:where(.dark, .dark *) {
-          --tw-bg-opacity: 1;
-          background-color: rgb(54 26 55 / var(--tw-bg-opacity));
-        }
         a:where(.dark, .dark *) {
           --tw-text-opacity: 1;
           color: rgb(252 116 254 / var(--tw-text-opacity));
@@ -2969,8 +2988,9 @@ video {
     a {
       font-family: var(--font-basel-grotesk);
       font-size: 0.875rem;
-      font-weight: 485;
-      line-height: 1/25rem;
+      font-style: normal;
+      font-weight: 500;
+      line-height: 1.09375rem;
       -webkit-font-smoothing: antialiased;
       -moz-osx-font-smoothing: grayscale;
     }
@@ -3001,8 +3021,9 @@ video {
     a {
       font-family: var(--font-basel-grotesk);
       font-size: 1rem;
-      font-weight: 485;
-      line-height: 1/5rem;
+      font-style: normal;
+      font-weight: 500;
+      line-height: 1.4rem;
       -webkit-font-smoothing: antialiased;
       -moz-osx-font-smoothing: grayscale;
     }
@@ -3129,9 +3150,10 @@ html:has(.ArticlePage) {
   --tw-text-opacity: 1 !important;
   color: rgb(125 125 125 / var(--tw-text-opacity)) !important;
   font-family: var(--font-basel-grotesk) !important;
-  font-size: 1rem !important;
-  font-weight: 485 !important;
-  line-height: 1/5rem !important;
+  font-size: 0.875rem !important;
+  font-style: normal !important;
+  font-weight: 500 !important;
+  line-height: 1.09375rem !important;
   -webkit-font-smoothing: antialiased !important;
   -moz-osx-font-smoothing: grayscale !important;
 }
@@ -3141,13 +3163,33 @@ html:has(.ArticlePage) {
   color: rgb(155 155 155 / var(--tw-text-opacity)) !important;
 }
 
+:not(.ck.ck-content p) .ck.ck-content.ck-focused p,
+:not(.ck.ck-content p) .ck.ck-content.ck-blurred p {
+  --tw-text-opacity: 1 !important;
+  color: rgb(34 34 34 / var(--tw-text-opacity)) !important;
+  font-family: var(--font-basel-grotesk) !important;
+  font-size: 0.875rem !important;
+  font-style: normal !important;
+  font-weight: 500 !important;
+  line-height: 1.09375rem !important;
+  -webkit-font-smoothing: antialiased !important;
+  -moz-osx-font-smoothing: grayscale !important;
+}
+
+:not(.ck.ck-content p) .ck.ck-content.ck-focused p:where(.dark, .dark *),
+:not(.ck.ck-content p) .ck.ck-content.ck-blurred p:where(.dark, .dark *) {
+  --tw-text-opacity: 1 !important;
+  color: rgb(255 255 255 / var(--tw-text-opacity)) !important;
+}
+
 .custom-hint {
   --tw-text-opacity: 1 !important;
   color: rgb(125 125 125 / var(--tw-text-opacity)) !important;
   font-family: var(--font-basel-grotesk) !important;
   font-size: 0.875rem !important;
-  font-weight: 485 !important;
-  line-height: 1/25rem !important;
+  font-style: normal !important;
+  font-weight: 500 !important;
+  line-height: 1.09375rem !important;
   -webkit-font-smoothing: antialiased !important;
   -moz-osx-font-smoothing: grayscale !important;
 }
@@ -3162,8 +3204,10 @@ html:has(.ArticlePage) {
   color: rgb(34 34 34 / var(--tw-text-opacity)) !important;
   font-family: var(--font-basel-grotesk) !important;
   font-size: 1.5rem !important;
-  font-weight: 485 !important;
-  line-height: 2rem !important;
+  font-style: normal !important;
+  font-weight: 500 !important;
+  line-height: 1.8rem !important;
+  letter-spacing: -0.0075rem !important;
   -webkit-font-smoothing: antialiased !important;
   -moz-osx-font-smoothing: grayscale !important;
 }
@@ -3192,12 +3236,37 @@ html:has(.ArticlePage) {
   padding-bottom: 0.75rem !important;
   padding-left: 1rem !important;
   padding-right: 1rem !important;
+  --tw-text-opacity: 1 !important;
+  color: rgb(34 34 34 / var(--tw-text-opacity)) !important;
+  font-family: var(--font-basel-grotesk) !important;
+  font-size: 0.875rem !important;
+  font-style: normal !important;
+  font-weight: 500 !important;
+  line-height: 1.09375rem !important;
+  -webkit-font-smoothing: antialiased !important;
+  -moz-osx-font-smoothing: grayscale !important;
+}
+
+.custom-input::-moz-placeholder {
   --tw-text-opacity: 1 !important;
   color: rgb(125 125 125 / var(--tw-text-opacity)) !important;
   font-family: var(--font-basel-grotesk) !important;
-  font-size: 1rem !important;
-  font-weight: 485 !important;
-  line-height: 1/5rem !important;
+  font-size: 0.875rem !important;
+  font-style: normal !important;
+  font-weight: 500 !important;
+  line-height: 1.09375rem !important;
+  -webkit-font-smoothing: antialiased !important;
+  -moz-osx-font-smoothing: grayscale !important;
+}
+
+.custom-input::placeholder {
+  --tw-text-opacity: 1 !important;
+  color: rgb(125 125 125 / var(--tw-text-opacity)) !important;
+  font-family: var(--font-basel-grotesk) !important;
+  font-size: 0.875rem !important;
+  font-style: normal !important;
+  font-weight: 500 !important;
+  line-height: 1.09375rem !important;
   -webkit-font-smoothing: antialiased !important;
   -moz-osx-font-smoothing: grayscale !important;
 }
@@ -3214,6 +3283,16 @@ html:has(.ArticlePage) {
 
 .custom-input:where(.dark, .dark *) {
   background-color: rgba(255, 255, 255, 0.12) !important;
+  --tw-text-opacity: 1 !important;
+  color: rgb(255 255 255 / var(--tw-text-opacity)) !important;
+}
+
+.custom-input:where(.dark, .dark *)::-moz-placeholder {
+  --tw-text-opacity: 1 !important;
+  color: rgb(155 155 155 / var(--tw-text-opacity)) !important;
+}
+
+.custom-input:where(.dark, .dark *)::placeholder {
   --tw-text-opacity: 1 !important;
   color: rgb(155 155 155 / var(--tw-text-opacity)) !important;
 }
@@ -3238,18 +3317,53 @@ html:has(.ArticlePage) {
   padding-bottom: 0.75rem !important;
   padding-left: 1rem !important;
   padding-right: 1rem !important;
+  --tw-text-opacity: 1 !important;
+  color: rgb(34 34 34 / var(--tw-text-opacity)) !important;
+  font-family: var(--font-basel-grotesk) !important;
+  font-size: 0.875rem !important;
+  font-style: normal !important;
+  font-weight: 500 !important;
+  line-height: 1.09375rem !important;
+  -webkit-font-smoothing: antialiased !important;
+  -moz-osx-font-smoothing: grayscale !important;
+}
+
+.custom-combobox > div:first-child::-moz-placeholder {
   --tw-text-opacity: 1 !important;
   color: rgb(125 125 125 / var(--tw-text-opacity)) !important;
   font-family: var(--font-basel-grotesk) !important;
-  font-size: 1rem !important;
-  font-weight: 485 !important;
-  line-height: 1/5rem !important;
+  font-size: 0.875rem !important;
+  font-style: normal !important;
+  font-weight: 500 !important;
+  line-height: 1.09375rem !important;
+  -webkit-font-smoothing: antialiased !important;
+  -moz-osx-font-smoothing: grayscale !important;
+}
+
+.custom-combobox > div:first-child::placeholder {
+  --tw-text-opacity: 1 !important;
+  color: rgb(125 125 125 / var(--tw-text-opacity)) !important;
+  font-family: var(--font-basel-grotesk) !important;
+  font-size: 0.875rem !important;
+  font-style: normal !important;
+  font-weight: 500 !important;
+  line-height: 1.09375rem !important;
   -webkit-font-smoothing: antialiased !important;
   -moz-osx-font-smoothing: grayscale !important;
 }
 
 .custom-combobox > div:first-child:where(.dark, .dark *) {
   background-color: rgba(255, 255, 255, 0.12) !important;
+  --tw-text-opacity: 1 !important;
+  color: rgb(255 255 255 / var(--tw-text-opacity)) !important;
+}
+
+.custom-combobox > div:first-child:where(.dark, .dark *)::-moz-placeholder {
+  --tw-text-opacity: 1 !important;
+  color: rgb(155 155 155 / var(--tw-text-opacity)) !important;
+}
+
+.custom-combobox > div:first-child:where(.dark, .dark *)::placeholder {
   --tw-text-opacity: 1 !important;
   color: rgb(155 155 155 / var(--tw-text-opacity)) !important;
 }
@@ -3260,9 +3374,10 @@ html:has(.ArticlePage) {
   --tw-bg-opacity: 1 !important;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity)) !important;
   font-family: var(--font-basel-grotesk) !important;
-  font-size: 1rem !important;
-  font-weight: 485 !important;
-  line-height: 1/5rem !important;
+  font-size: 0.875rem !important;
+  font-style: normal !important;
+  font-weight: 500 !important;
+  line-height: 1.09375rem !important;
   -webkit-font-smoothing: antialiased !important;
   -moz-osx-font-smoothing: grayscale !important;
 }
@@ -3293,9 +3408,10 @@ html:has(.ArticlePage) {
   }
   ul {
     font-family: var(--font-basel-grotesk) !important;
-    font-size: 1rem !important;
-    font-weight: 485 !important;
-    line-height: 1/5rem !important;
+    font-size: 0.875rem !important;
+    font-style: normal !important;
+    font-weight: 500 !important;
+    line-height: 1.09375rem !important;
     -webkit-font-smoothing: antialiased !important;
     -moz-osx-font-smoothing: grayscale !important;
   }
@@ -3357,9 +3473,10 @@ html:has(.ArticlePage) {
       }
       div {
         font-family: var(--font-basel-grotesk) !important;
-        font-size: 1rem !important;
-        font-weight: 485 !important;
-        line-height: 1/5rem !important;
+        font-size: 0.875rem !important;
+        font-style: normal !important;
+        font-weight: 500 !important;
+        line-height: 1.09375rem !important;
         -webkit-font-smoothing: antialiased !important;
         -moz-osx-font-smoothing: grayscale !important;
       }
@@ -3382,18 +3499,56 @@ html:has(.ArticlePage) {
   margin-bottom: 0px !important;
 }
 
-.custom-combobox > div span {
+.custom-combobox div:not(:has(svg)) > span {
   --tw-text-opacity: 1 !important;
   color: rgb(125 125 125 / var(--tw-text-opacity)) !important;
   font-family: var(--font-basel-grotesk) !important;
-  font-size: 1rem !important;
-  font-weight: 485 !important;
-  line-height: 1/5rem !important;
+  font-size: 0.875rem !important;
+  font-style: normal !important;
+  font-weight: 500 !important;
+  line-height: 1.09375rem !important;
+  -webkit-font-smoothing: antialiased !important;
+  -moz-osx-font-smoothing: grayscale !important;
+}
+
+.custom-combobox div:not(:has(svg)) > span:where(.dark, .dark *) {
+  --tw-text-opacity: 1 !important;
+  color: rgb(155 155 155 / var(--tw-text-opacity)) !important;
+}
+
+.custom-combobox div:has(svg) > span {
+  --tw-text-opacity: 1 !important;
+  color: rgb(34 34 34 / var(--tw-text-opacity)) !important;
+  font-family: var(--font-basel-grotesk) !important;
+  font-size: 0.875rem !important;
+  font-style: normal !important;
+  font-weight: 500 !important;
+  line-height: 1.09375rem !important;
   -webkit-font-smoothing: antialiased !important;
   -moz-osx-font-smoothing: grayscale !important;
 }
 
-.custom-combobox > div span:where(.dark, .dark *) {
+.custom-combobox div:has(svg) > span::-moz-placeholder {
+  --tw-text-opacity: 1 !important;
+  color: rgb(125 125 125 / var(--tw-text-opacity)) !important;
+}
+
+.custom-combobox div:has(svg) > span::placeholder {
+  --tw-text-opacity: 1 !important;
+  color: rgb(125 125 125 / var(--tw-text-opacity)) !important;
+}
+
+.custom-combobox div:has(svg) > span:where(.dark, .dark *) {
+  --tw-text-opacity: 1 !important;
+  color: rgb(255 255 255 / var(--tw-text-opacity)) !important;
+}
+
+.custom-combobox div:has(svg) > span:where(.dark, .dark *)::-moz-placeholder {
+  --tw-text-opacity: 1 !important;
+  color: rgb(155 155 155 / var(--tw-text-opacity)) !important;
+}
+
+.custom-combobox div:has(svg) > span:where(.dark, .dark *)::placeholder {
   --tw-text-opacity: 1 !important;
   color: rgb(155 155 155 / var(--tw-text-opacity)) !important;
 }
@@ -3411,7 +3566,8 @@ html:has(.ArticlePage) {
   color: rgb(255 255 255 / var(--tw-text-opacity)) !important;
   font-family: var(--font-basel-grotesk) !important;
   font-size: 1rem !important;
-  font-weight: 600 !important;
+  font-style: normal !important;
+  font-weight: 535 !important;
   line-height: 1.5rem !important;
   -webkit-font-smoothing: antialiased !important;
   -moz-osx-font-smoothing: grayscale !important;
@@ -3449,8 +3605,9 @@ html:has(.ArticlePage) {
   input {
     font-family: var(--font-basel-grotesk) !important;
     font-size: 0.875rem !important;
-    font-weight: 485 !important;
-    line-height: 1/25rem !important;
+    font-style: normal !important;
+    font-weight: 500 !important;
+    line-height: 1.09375rem !important;
     -webkit-font-smoothing: antialiased !important;
     -moz-osx-font-smoothing: grayscale !important;
   }
@@ -3467,6 +3624,13 @@ html:has(.ArticlePage) {
   }
 }
 
+.search-bar-container:has(input[aria-expanded='true']):focus-within {
+  border-bottom-right-radius: 0px !important;
+  border-bottom-left-radius: 0px !important;
+  border-top-left-radius: 0.75rem !important;
+  border-top-right-radius: 0.75rem !important;
+}
+
 .filters-in-section {
   display: flex;
   flex-direction: column;
@@ -3486,8 +3650,9 @@ html:has(.ArticlePage) {
   .sidenav-item {
     font-family: var(--font-basel-grotesk) !important;
     font-size: 0.875rem !important;
-    font-weight: 485 !important;
-    line-height: 1/25rem !important;
+    font-style: normal !important;
+    font-weight: 500 !important;
+    line-height: 1.09375rem !important;
     -webkit-font-smoothing: antialiased !important;
     -moz-osx-font-smoothing: grayscale !important;
   }
@@ -3516,22 +3681,45 @@ html:has(.ArticlePage) {
   em {
     font-style: normal !important;
   }
+  em:where(.dark, .dark *) {
+    --tw-bg-opacity: 1;
+    background-color: rgb(245 13 180 / var(--tw-bg-opacity));
+  }
 }
 
 zd-autocomplete {
+  margin-left: -3.25rem !important;
+  width: 100vw !important;
+  border-bottom-right-radius: 0.75rem !important;
+  border-bottom-left-radius: 0.75rem !important;
+  border-width: 1px !important;
+  border-color: rgba(34, 34, 34, 0.05) !important;
   --tw-bg-opacity: 1 !important;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity)) !important;
   --tw-text-opacity: 1 !important;
   color: rgb(34 34 34 / var(--tw-text-opacity)) !important;
+  --tw-shadow: 0 0 #0000 !important;
+  --tw-shadow-colored: 0 0 #0000 !important;
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
+    var(--tw-shadow) !important;
   font-family: var(--font-basel-grotesk) !important;
   font-size: 0.875rem !important;
-  font-weight: 485 !important;
-  line-height: 1/25rem !important;
+  font-style: normal !important;
+  font-weight: 500 !important;
+  line-height: 1.09375rem !important;
   -webkit-font-smoothing: antialiased !important;
   -moz-osx-font-smoothing: grayscale !important;
 }
 
+@media (min-width: 1280px) {
+  zd-autocomplete {
+    margin-left: -3rem !important;
+    width: 25rem !important;
+  }
+}
+
 zd-autocomplete:where(.dark, .dark *) {
+  border-color: rgba(255, 255, 255, 0.12) !important;
   --tw-bg-opacity: 1 !important;
   background-color: rgb(19 19 19 / var(--tw-bg-opacity)) !important;
   --tw-text-opacity: 1 !important;
@@ -3539,37 +3727,51 @@ zd-autocomplete:where(.dark, .dark *) {
 }
 
 zd-autocomplete-header {
-  background-color: rgba(34, 34, 34, 0.05) !important;
+  border-bottom-width: 1px !important;
+  border-bottom-color: rgba(34, 34, 34, 0.05) !important;
+  --tw-bg-opacity: 1 !important;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity)) !important;
+  text-align: left !important;
   --tw-text-opacity: 1 !important;
-  color: rgb(34 34 34 / var(--tw-text-opacity)) !important;
+  color: rgb(125 125 125 / var(--tw-text-opacity)) !important;
   font-family: var(--font-basel-grotesk) !important;
-  font-size: 1rem !important;
-  font-weight: 485 !important;
-  line-height: 1/5rem !important;
+  font-size: 0.875rem !important;
+  font-style: normal !important;
+  font-weight: 500 !important;
+  line-height: 1.09375rem !important;
   -webkit-font-smoothing: antialiased !important;
   -moz-osx-font-smoothing: grayscale !important;
 }
 
 zd-autocomplete-header:where(.dark, .dark *) {
-  background-color: rgba(255, 255, 255, 0.12) !important;
+  border-bottom-color: rgba(255, 255, 255, 0.12) !important;
+  --tw-bg-opacity: 1 !important;
+  background-color: rgb(19 19 19 / var(--tw-bg-opacity)) !important;
   --tw-text-opacity: 1 !important;
-  color: rgb(255 255 255 / var(--tw-text-opacity)) !important;
+  color: rgb(155 155 155 / var(--tw-text-opacity)) !important;
 }
 
 zd-autocomplete-multibrand {
-  background-color: rgba(34, 34, 34, 0.05) !important;
+  border-bottom-width: 1px !important;
+  border-bottom-color: rgba(34, 34, 34, 0.05) !important;
+  --tw-bg-opacity: 1 !important;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity)) !important;
 }
 
 zd-autocomplete-multibrand:hover {
-  background-color: rgba(34, 34, 34, 0.09) !important;
+  --tw-bg-opacity: 1 !important;
+  background-color: rgb(245 245 245 / var(--tw-bg-opacity)) !important;
 }
 
 zd-autocomplete-multibrand:where(.dark, .dark *) {
-  background-color: rgba(255, 255, 255, 0.12) !important;
+  border-bottom-color: rgba(255, 255, 255, 0.12) !important;
+  --tw-bg-opacity: 1 !important;
+  background-color: rgb(19 19 19 / var(--tw-bg-opacity)) !important;
 }
 
 zd-autocomplete-multibrand:hover:where(.dark, .dark *) {
-  background-color: rgba(255, 255, 255, 0.16) !important;
+  --tw-bg-opacity: 1 !important;
+  background-color: rgb(24 24 24 / var(--tw-bg-opacity)) !important;
 }
 
 zd-autocomplete-title-multibrand,
@@ -3578,8 +3780,9 @@ zd-autocomplete-breadcrumbs-multibrand {
   color: rgb(34 34 34 / var(--tw-text-opacity)) !important;
   font-family: var(--font-basel-grotesk) !important;
   font-size: 0.875rem !important;
-  font-weight: 485 !important;
-  line-height: 1/25rem !important;
+  font-style: normal !important;
+  font-weight: 500 !important;
+  line-height: 1.09375rem !important;
   -webkit-font-smoothing: antialiased !important;
   -moz-osx-font-smoothing: grayscale !important;
 }
@@ -3594,12 +3797,16 @@ zd-autocomplete-title-multibrand,
 zd-autocomplete-breadcrumbs-multibrand {
   em {
     --tw-bg-opacity: 1 !important;
-    background-color: rgb(252 116 254 / var(--tw-bg-opacity)) !important;
+    background-color: rgb(253 175 240 / var(--tw-bg-opacity)) !important;
   }
   em {
     --tw-text-opacity: 1 !important;
     color: rgb(34 34 34 / var(--tw-text-opacity)) !important;
   }
+  em:where(.dark, .dark *) {
+    --tw-bg-opacity: 1 !important;
+    background-color: rgb(252 116 254 / var(--tw-bg-opacity)) !important;
+  }
   em:where(.dark, .dark *) {
     --tw-text-opacity: 1 !important;
     color: rgb(255 255 255 / var(--tw-text-opacity)) !important;
@@ -3611,8 +3818,9 @@ zd-autocomplete-breadcrumbs-multibrand {
   color: rgb(125 125 125 / var(--tw-text-opacity)) !important;
   font-family: var(--font-basel-grotesk) !important;
   font-size: 0.75rem !important;
-  font-weight: 485 !important;
-  line-height: 1rem !important;
+  font-style: normal !important;
+  font-weight: 500 !important;
+  line-height: 133.333% !important;
   -webkit-font-smoothing: antialiased !important;
   -moz-osx-font-smoothing: grayscale !important;
 }
@@ -3632,6 +3840,10 @@ input::-webkit-search-cancel-button {
   cursor: pointer;
 }
 
+iframe#launcher {
+  z-index: 50 !important;
+}
+
 .placeholder\:text-light-pink-vibrant::-moz-placeholder {
   --tw-text-opacity: 1;
   color: rgb(245 13 180 / var(--tw-text-opacity));
@@ -3790,10 +4002,6 @@ input::-webkit-search-cancel-button {
   opacity: 1;
 }
 
-.peer:focus-within ~ .peer-focus-within\:hidden {
-  display: none;
-}
-
 .data-\[active\]\:bg-light-surface-3[data-active] {
   background-color: rgba(34, 34, 34, 0.05);
 }
@@ -3888,6 +4096,10 @@ input::-webkit-search-cancel-button {
     flex-direction: row;
   }
 
+  .sm\:flex-wrap {
+    flex-wrap: wrap;
+  }
+
   .sm\:items-center {
     align-items: center;
   }
@@ -3953,8 +4165,9 @@ input::-webkit-search-cancel-button {
   .sm\:serif-heading-0 {
     font-family: var(--font-riegraf);
     font-size: 4rem;
+    font-style: normal;
     font-weight: 300;
-    line-height: 4rem;
+    line-height: 3.84rem;
     letter-spacing: -0.08rem;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
@@ -3963,8 +4176,8 @@ input::-webkit-search-cancel-button {
   .sm\:heading-0 {
     font-family: var(--font-basel-grotesk);
     font-size: 4rem;
-    font-weight: 485;
-    line-height: 4rem;
+    font-weight: 500;
+    line-height: 3.84rem;
     letter-spacing: -0.08rem;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
@@ -3973,8 +4186,9 @@ input::-webkit-search-cancel-button {
   .sm\:heading-1 {
     font-family: var(--font-basel-grotesk);
     font-size: 3.25rem;
-    font-weight: 485;
-    line-height: 3.75rem;
+    font-weight: 500;
+    line-height: 3.12rem;
+    letter-spacing: -0.065rem;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
@@ -4044,8 +4258,9 @@ input::-webkit-search-cancel-button {
   .md\:heading-1 {
     font-family: var(--font-basel-grotesk);
     font-size: 3.25rem;
-    font-weight: 485;
-    line-height: 3.75rem;
+    font-weight: 500;
+    line-height: 3.12rem;
+    letter-spacing: -0.065rem;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
@@ -4053,7 +4268,8 @@ input::-webkit-search-cancel-button {
   .md\:button-label-2 {
     font-family: var(--font-basel-grotesk);
     font-size: 1rem;
-    font-weight: 600;
+    font-style: normal;
+    font-weight: 535;
     line-height: 1.5rem;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
@@ -4093,35 +4309,38 @@ input::-webkit-search-cancel-button {
   background-color: rgb(54 26 55 / var(--tw-bg-opacity));
 }
 
-.dark\:bg-dark-blue-light:where(.dark, .dark *) {
-  background-color: rgba(16, 20, 61, 0.8);
+.dark\:bg-dark-blue:where(.dark, .dark *) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(16 20 61 / var(--tw-bg-opacity));
 }
 
 .dark\:bg-dark-brown-fade-80:where(.dark, .dark *) {
   background-color: rgba(35, 30, 15, 0.8);
 }
 
-.dark\:bg-dark-green-light:where(.dark, .dark *) {
-  background-color: rgba(15, 44, 26, 0.8);
+.dark\:bg-dark-green:where(.dark, .dark *) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(15 44 26 / var(--tw-bg-opacity));
+}
+
+.dark\:bg-dark-orange-fade:where(.dark, .dark *) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(55 27 12 / var(--tw-bg-opacity));
 }
 
 .dark\:bg-dark-orange-fade-80:where(.dark, .dark *) {
   background-color: rgba(55, 27, 12, 0.8);
 }
 
-.dark\:bg-dark-orange-light:where(.dark, .dark *) {
-  background-color: rgba(55, 27, 12, 0.8);
+.dark\:bg-dark-pink-fade:where(.dark, .dark *) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(54 26 55 / var(--tw-bg-opacity));
 }
 
 .dark\:bg-dark-pink-fade-80:where(.dark, .dark *) {
   background-color: rgba(54, 26, 55, 0.8);
 }
 
-.dark\:bg-dark-pink-light:where(.dark, .dark *) {
-  --tw-bg-opacity: 1;
-  background-color: rgb(54 26 55 / var(--tw-bg-opacity));
-}
-
 .dark\:bg-dark-pink-vibrant:where(.dark, .dark *) {
   --tw-bg-opacity: 1;
   background-color: rgb(252 116 254 / var(--tw-bg-opacity));
@@ -4141,22 +4360,18 @@ input::-webkit-search-cancel-button {
   background-color: rgba(255, 255, 255, 0.12);
 }
 
-.dark\:fill-dark-accent-1:where(.dark, .dark *) {
-  fill: #fc74fe;
+.dark\:fill-blue-base:where(.dark, .dark *) {
+  fill: #4981ff;
 }
 
-.dark\:fill-dark-blue-vibrant:where(.dark, .dark *) {
-  fill: #0c8911;
+.dark\:fill-dark-accent-1:where(.dark, .dark *) {
+  fill: #fc74fe;
 }
 
 .dark\:fill-dark-brown-vibrant:where(.dark, .dark *) {
   fill: #85754a;
 }
 
-.dark\:fill-dark-green-base:where(.dark, .dark *) {
-  fill: #0c8911;
-}
-
 .dark\:fill-dark-neutral-1:where(.dark, .dark *) {
   fill: #ffffff;
 }
@@ -4173,6 +4388,10 @@ input::-webkit-search-cancel-button {
   fill: #fc74fe;
 }
 
+.dark\:fill-green-base:where(.dark, .dark *) {
+  fill: #0c8911;
+}
+
 .dark\:\!text-dark-accent-1:where(.dark, .dark *) {
   --tw-text-opacity: 1 !important;
   color: rgb(252 116 254 / var(--tw-text-opacity)) !important;
@@ -4183,14 +4402,14 @@ input::-webkit-search-cancel-button {
   color: rgb(255 255 255 / var(--tw-text-opacity)) !important;
 }
 
-.dark\:text-dark-accent-1:where(.dark, .dark *) {
+.dark\:text-blue-base:where(.dark, .dark *) {
   --tw-text-opacity: 1;
-  color: rgb(252 116 254 / var(--tw-text-opacity));
+  color: rgb(73 129 255 / var(--tw-text-opacity));
 }
 
-.dark\:text-dark-blue-vibrant:where(.dark, .dark *) {
+.dark\:text-dark-accent-1:where(.dark, .dark *) {
   --tw-text-opacity: 1;
-  color: rgb(12 137 17 / var(--tw-text-opacity));
+  color: rgb(252 116 254 / var(--tw-text-opacity));
 }
 
 .dark\:text-dark-brown-vibrant:where(.dark, .dark *) {
@@ -4198,11 +4417,6 @@ input::-webkit-search-cancel-button {
   color: rgb(133 117 74 / var(--tw-text-opacity));
 }
 
-.dark\:text-dark-green-base:where(.dark, .dark *) {
-  --tw-text-opacity: 1;
-  color: rgb(12 137 17 / var(--tw-text-opacity));
-}
-
 .dark\:text-dark-neutral-1:where(.dark, .dark *) {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
@@ -4233,6 +4447,11 @@ input::-webkit-search-cancel-button {
   color: rgb(33 201 94 / var(--tw-text-opacity));
 }
 
+.dark\:text-green-base:where(.dark, .dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(12 137 17 / var(--tw-text-opacity));
+}
+
 .dark\:text-light-neutral-1:where(.dark, .dark *) {
   --tw-text-opacity: 1;
   color: rgb(34 34 34 / var(--tw-text-opacity));
diff --git a/assets/types.css b/assets/types.css
index 16d17a59f..fb2672baa 100644
--- a/assets/types.css
+++ b/assets/types.css
@@ -2,8 +2,9 @@
   .serif-heading-0 {
     font-family: var(--font-riegraf);
     font-size: 4rem;
+    font-style: normal;
     font-weight: 300;
-    line-height: 4rem;
+    line-height: 3.84rem;
     letter-spacing: -0.08rem;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
@@ -12,9 +13,9 @@
   .serif-heading-0-mobile {
     font-family: var(--font-riegraf);
     font-size: 3rem;
-    font-weight: 400;
-    line-height: 2.82rem;
-    letter-spacing: -0.03rem;
+    font-style: normal;
+    font-weight: 300;
+    line-height: 2.88rem;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
@@ -22,8 +23,8 @@
   .heading-0 {
     font-family: var(--font-basel-grotesk);
     font-size: 4rem;
-    font-weight: 485;
-    line-height: 4rem;
+    font-weight: 500;
+    line-height: 3.84rem;
     letter-spacing: -0.08rem;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
@@ -34,25 +35,50 @@
     font-size: 3rem;
     font-weight: 500;
     line-height: 2.88rem;
-    letter-spacing: -0.02rem;
+    letter-spacing: -0.06rem;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
 
-  .heading-1 {
+  .serif-heading-1 {
     font-family: var(--font-basel-grotesk);
     font-size: 3.25rem;
-    font-weight: 485;
-    line-height: 3.75rem;
+    font-style: normal;
+    font-weight: 300;
+    line-height: 3.12rem;
+    letter-spacing: -0.065rem;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
 
-  .serif-heading-2 {
-    font-family: var(--font-riegraf);
-    font-size: 2.25rem;
+  .serif-heading-1-mobile {
+    font-family: var(--font-basel-grotesk);
+    font-size: 2.4375rem;
+    font-style: normal;
     font-weight: 300;
-    line-height: 2.75rem;
+    line-height: 2.34rem;
+    letter-spacing: -0.04875rem;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  .heading-1 {
+    font-family: var(--font-basel-grotesk);
+    font-size: 3.25rem;
+    font-weight: 500;
+    line-height: 3.12rem;
+    letter-spacing: -0.065rem;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  .heading-1-mobile {
+    font-family: var(--font-basel-grotesk);
+    font-size: 2.4375rem;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 2.34rem;
+    letter-spacing: -0.04875rem;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
@@ -60,8 +86,20 @@
   .heading-2 {
     font-family: var(--font-basel-grotesk);
     font-size: 2.25rem;
-    font-weight: 485;
-    line-height: 2.75rem;
+    font-weight: 500;
+    line-height: 2.52rem;
+    letter-spacing: -0.0225rem;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  .heading-2-mobile {
+    font-family: var(--font-basel-grotesk);
+    font-size: 1.6875rem;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 2.025rem;
+    letter-spacing: -0.01688rem;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
@@ -69,8 +107,10 @@
   .heading-3 {
     font-family: var(--font-basel-grotesk);
     font-size: 1.5rem;
-    font-weight: 485;
-    line-height: 2rem;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 1.8rem;
+    letter-spacing: -0.0075rem;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
@@ -78,8 +118,10 @@
   .heading-4 {
     font-family: var(--font-basel-grotesk);
     font-size: 1.25rem;
-    font-weight: 485;
-    line-height: 1.625rem;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 1.5rem;
+    letter-spacing: -0.00625rem;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
@@ -87,6 +129,7 @@
   .serif-subheading-1 {
     font-family: var(--font-riegraf);
     font-size: 1.125rem;
+    font-style: italic;
     font-weight: 400;
     line-height: 1.25rem;
     -webkit-font-smoothing: antialiased;
@@ -96,8 +139,9 @@
   .subheading-1 {
     font-family: var(--font-basel-grotesk);
     font-size: 1.125rem;
-    font-weight: 485;
-    line-height: 1.5rem;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 133.333%;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
@@ -105,8 +149,19 @@
   .subheading-2 {
     font-family: var(--font-basel-grotesk);
     font-size: 1rem;
-    font-weight: 485;
-    line-height: 1.5rem;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 150%;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  .serif-subheading-3 {
+    font-family: var(--font-riegraf);
+    font-size: 0.8125rem;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 1.25rem;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
@@ -114,8 +169,9 @@
   .body-1 {
     font-family: var(--font-basel-grotesk);
     font-size: 1.125rem;
-    font-weight: 485;
-    line-height: 1.5rem;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 1.4625rem;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
@@ -123,8 +179,9 @@
   .body-2 {
     font-family: var(--font-basel-grotesk);
     font-size: 1rem;
-    font-weight: 485;
-    line-height: 1/5rem;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 1.4rem;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
@@ -132,8 +189,9 @@
   .body-3 {
     font-family: var(--font-basel-grotesk);
     font-size: 0.875rem;
-    font-weight: 485;
-    line-height: 1/25rem;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 1.09375rem;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
@@ -141,46 +199,30 @@
   .body-4 {
     font-family: var(--font-basel-grotesk);
     font-size: 0.75rem;
-    font-weight: 485;
-    line-height: 1rem;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 133.333%;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
 
-  .serif-caption-1 {
+  .serif-body-5 {
     font-family: var(--font-riegraf);
     font-size: 0.875rem;
+    font-style: normal;
     font-weight: 400;
-    line-height: 1.25rem;
+    line-height: 1.05rem;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
 
-  .caption-1 {
+  .mono-body-5 {
     font-family: var(--font-fragment-mono);
     font-size: 0.8125rem;
+    font-style: normal;
     font-weight: 400;
-    line-height: 1.25rem;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-  }
-
-  .pullquote-1 {
-    font-family: var(--font-riegraf);
-    font-size: 2.5rem;
-    font-style: italic;
-    font-weight: 400;
-    line-height: 3rem;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-  }
-
-  .pullquote-2 {
-    font-family: var(--font-riegraf);
-    font-size: 1.5rem;
-    font-style: italic;
-    font-weight: 400;
-    line-height: 1.8rem;
+    line-height: 1.05625rem;
+    letter-spacing: -0.00813rem;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
@@ -188,7 +230,8 @@
   .button-label-1 {
     font-family: var(--font-basel-grotesk);
     font-size: 1.125rem;
-    font-weight: 600;
+    font-style: normal;
+    font-weight: 535;
     line-height: 1.5rem;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
@@ -197,7 +240,8 @@
   .button-label-2 {
     font-family: var(--font-basel-grotesk);
     font-size: 1rem;
-    font-weight: 600;
+    font-style: normal;
+    font-weight: 535;
     line-height: 1.5rem;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
@@ -206,7 +250,8 @@
   .button-label-3 {
     font-family: var(--font-basel-grotesk);
     font-size: 0.875rem;
-    font-weight: 600;
+    font-style: normal;
+    font-weight: 535;
     line-height: 1.25rem;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
@@ -215,7 +260,8 @@
   .button-label-4 {
     font-family: var(--font-basel-grotesk);
     font-size: 0.75rem;
-    font-weight: 600;
+    font-style: normal;
+    font-weight: 535;
     line-height: 1rem;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
diff --git a/src/modules/footer/FooterModule.tsx b/src/modules/footer/FooterModule.tsx
index 9c4860a1d..f6255a3b5 100644
--- a/src/modules/footer/FooterModule.tsx
+++ b/src/modules/footer/FooterModule.tsx
@@ -1,9 +1,9 @@
-import { FC } from "react";
-import { FooterPageData } from "../../lib/types";
+import { FC } from 'react';
+import { FooterPageData } from '../../lib/types';
 
-import { MiniUnicon } from "../../svgs/Logos";
-import { Github, X, Discord } from "../../svgs/Icons";
-import { LinkBase, TextButton } from "../../base/Button";
+import { MiniUnicon } from '../../svgs/Logos';
+import { Github, X, Discord } from '../../svgs/Icons';
+import { LinkBase, TextButton } from '../../base/Button';
 
 type Props = {
   footerPageData: FooterPageData;
@@ -24,12 +24,9 @@ const Footer: FC<Props> = ({ footerPageData }) => {
         </div>
         <div className="col-span-4 sm:col-span-8 sm:flex sm:grid-cols-8 md:col-span-4">
           <nav className="grid w-full grid-cols-2 gap-gap-large sm:grid-cols-4">
-            {footerPageData?.footerLinksSupport &&
-            footerPageData.footerLinksSupport.length > 0 ? (
+            {footerPageData?.footerLinksSupport && footerPageData.footerLinksSupport.length > 0 ? (
               <div className="space-y-[0.3125rem]">
-                <h3 className="body-1 text-light-neutral-1 dark:text-dark-neutral-1">
-                  Support
-                </h3>
+                <h3 className="body-1 text-light-neutral-1 dark:text-dark-neutral-1">Support</h3>
                 <ul>
                   {footerPageData?.footerLinksSupport.map((link) => (
                     <li key={link.name}>
@@ -46,9 +43,7 @@ const Footer: FC<Props> = ({ footerPageData }) => {
             {footerPageData?.footerLinksEcosystem &&
             footerPageData.footerLinksEcosystem.length > 0 ? (
               <div className="col-span-1 space-y-[0.3125rem]">
-                <h3 className="body-1 text-light-neutral-1 dark:text-dark-neutral-1">
-                  Ecosystem
-                </h3>
+                <h3 className="body-1 text-light-neutral-1 dark:text-dark-neutral-1">Ecosystem</h3>
                 <ul>
                   {footerPageData.footerLinksEcosystem.map((link) => (
                     <li key={link.name}>
@@ -62,12 +57,9 @@ const Footer: FC<Props> = ({ footerPageData }) => {
                 </ul>
               </div>
             ) : null}
-            {footerPageData?.footerLinksCompany &&
-            footerPageData?.footerLinksCompany.length > 0 ? (
+            {footerPageData?.footerLinksCompany && footerPageData?.footerLinksCompany.length > 0 ? (
               <div className="space-y-[0.3125rem]">
-                <h3 className="body-1 text-light-neutral-1 dark:text-dark-neutral-1">
-                  Company
-                </h3>
+                <h3 className="body-1 text-light-neutral-1 dark:text-dark-neutral-1">Company</h3>
                 <ul>
                   {footerPageData.footerLinksCompany.map((link) => (
                     <li key={link.name}>
@@ -81,12 +73,9 @@ const Footer: FC<Props> = ({ footerPageData }) => {
                 </ul>
               </div>
             ) : null}
-            {footerPageData?.footerLinksHelp &&
-            footerPageData.footerLinksHelp.length > 0 ? (
+            {footerPageData?.footerLinksHelp && footerPageData.footerLinksHelp.length > 0 ? (
               <div className="space-y-[0.3125rem]">
-                <h3 className="body-1 text-light-neutral-1 dark:text-dark-neutral-1">
-                  Need Help?
-                </h3>
+                <h3 className="body-1 text-light-neutral-1 dark:text-dark-neutral-1">Need Help?</h3>
                 <ul>
                   {footerPageData?.footerLinksHelp.map((link) => (
                     <li key={link.name}>
@@ -107,7 +96,7 @@ const Footer: FC<Props> = ({ footerPageData }) => {
         <p className="body-3 my-padding-large text-light-neutral-2 dark:text-dark-neutral-2 sm:my-0">
           @{new Date().getFullYear()} Uniswap Labs
         </p>
-        <div className="flex flex-row space-x-gap-large border-b border-light-surface-3 px-2 py-margin-web dark:border-dark-surface-3 sm:border-0 sm:px-0 sm:py-0">
+        <div className="flex flex-row space-x-gap-large border-b border-light-surface-3 py-margin-web dark:border-dark-surface-3 sm:border-0 sm:px-0 sm:py-0">
           {footerPageData?.footerGithubLink ? (
             <LinkBase
               className="group"
diff --git a/src/modules/homepage/HomepageModule.tsx b/src/modules/homepage/HomepageModule.tsx
index e5d03cb9f..22e1be6a4 100644
--- a/src/modules/homepage/HomepageModule.tsx
+++ b/src/modules/homepage/HomepageModule.tsx
@@ -80,7 +80,7 @@ const Homepage: FC<Props> = ({ homepageData }) => {
             </span>
             <span
               className={cn(
-                'serif-heading-0-mobile sm:serif-heading-0 italic text-center transition-opacity duration-500 delay-700',
+                'serif-heading-0-mobile sm:serif-heading-0 !italic text-center transition-opacity duration-500 delay-700',
                 {
                   'opacity-0': !heroTextReveal,
                   'opacity-100': heroTextReveal,
@@ -92,7 +92,7 @@ const Homepage: FC<Props> = ({ homepageData }) => {
           </h2>
           <div
             ref={searchBarRef}
-            className="relative z-nav bg-light-surface-2 dark:bg-dark-surface-2"
+            className="relative z-nav bg-light-surface-2 dark:bg-dark-surface-2 rounded-[1.25rem]"
           ></div>
         </div>
       )}
@@ -108,10 +108,10 @@ const Homepage: FC<Props> = ({ homepageData }) => {
                 className={cn(
                   'ColoredCard rounded-large p-padding-medium col-span-4 md:col-span-2',
                   {
-                    'bg-light-pink-light dark:bg-dark-pink-light': card.color === 'pink',
-                    'bg-light-green-light dark:bg-dark-green-light': card.color === 'green',
-                    'bg-light-blue-light dark:bg-dark-blue-light': card.color === 'blue',
-                    'bg-light-orange-light dark:bg-dark-orange-light': card.color === 'orange',
+                    'bg-light-pink-fade dark:bg-dark-pink-fade': card.color === 'pink',
+                    'bg-light-green dark:bg-dark-green': card.color === 'green',
+                    'bg-light-blue dark:bg-dark-blue': card.color === 'blue',
+                    'bg-light-orange-fade dark:bg-dark-orange-fade': card.color === 'orange',
                   }
                 )}
               >
@@ -121,10 +121,8 @@ const Homepage: FC<Props> = ({ homepageData }) => {
                     className={cn('subheading-1', {
                       'text-light-orange-vibrant dark:text-dark-orange-vibrant':
                         textColorName === 'orange-vibrant',
-                      'text-light-blue-vibrant dark:text-dark-blue-vibrant':
-                        textColorName === 'blue-vibrant',
-                      'text-light-green-base dark:text-dark-green-base':
-                        textColorName === 'green-base',
+                      'text-blue-base dark:text-blue-base': textColorName === 'blue-vibrant',
+                      'text-green-base dark:text-green-base': textColorName === 'green-base',
                       'text-light-pink-vibrant dark:text-dark-pink-vibrant':
                         textColorName === 'pink-vibrant',
                     })}
@@ -187,14 +185,14 @@ const Homepage: FC<Props> = ({ homepageData }) => {
             <Layers className="w-6 h-6 mr-2" color="neutral-1" />
             <h3 className="heading-2 text-light-neutral-1 dark:text-dark-neutral-2">Topics</h3>
           </div>
-          <div className="mt-padding-x-large w-full flex flex-row flex-wrap">
+          <div className="mt-padding-x-large w-full grid grid-cols-2 gap-x-4 sm:flex sm:flex-row sm:flex-wrap">
             {homepageData.topicsBlock.categories.map((category) => {
               return (
                 <a
                   key={category.name}
                   href={category.url}
                   target="_self"
-                  className="transition hover:text-light-pink-vibrant dark:hover:text-dark-pink-vibrant hover:bg-light-accent-2 hover:dark:bg-dark-accent-2 mr-4 mb-3 block rounded-medium py-margin-mobile-dense px-margin-extension text-light-neutral-1 dark:text-dark-neutral-1 bg-light-surface-2 dark:bg-dark-surface-2"
+                  className="transition hover:text-light-pink-vibrant dark:hover:text-dark-pink-vibrant hover:bg-light-accent-2 hover:dark:bg-dark-accent-2 mb-3 block rounded-medium py-margin-mobile-dense px-margin-extension text-light-neutral-1 dark:text-dark-neutral-1 bg-light-surface-2 dark:bg-dark-surface-2"
                 >
                   {category.name}
                 </a>
diff --git a/src/modules/homepage/Icons.tsx b/src/modules/homepage/Icons.tsx
index b050c44ca..d0009b937 100644
--- a/src/modules/homepage/Icons.tsx
+++ b/src/modules/homepage/Icons.tsx
@@ -1,29 +1,20 @@
-import { FC } from "react";
-import cn from "classnames";
-import React from "react";
+import { FC } from 'react';
+import cn from 'classnames';
+import React from 'react';
 
 export const HelpCircle: FC<{
   className?: string;
-  color?: "orange-vibrant" | "blue-vibrant" | "green-base" | "pink-vibrant";
-}> = ({ className, color = "orange-vibrant" }) => {
+  color?: 'orange-vibrant' | 'blue-vibrant' | 'green-base' | 'pink-vibrant';
+}> = ({ className, color = 'orange-vibrant' }) => {
   return (
-    <svg
-      className={className}
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
+    <svg className={className} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
         d="M12 2C6.477 2 2 6.477 2 12C2 17.523 6.477 22 12 22C17.523 22 22 17.523 22 12C22 6.477 17.523 2 12 2ZM12.02 17.5C11.468 17.5 11.0149 17.052 11.0149 16.5C11.0149 15.948 11.458 15.5 12.01 15.5H12.02C12.573 15.5 13.02 15.948 13.02 16.5C13.02 17.052 12.572 17.5 12.02 17.5ZM13.603 12.5281C12.872 13.0181 12.7359 13.291 12.7109 13.363C12.6059 13.676 12.314 13.874 12 13.874C11.921 13.874 11.841 13.862 11.762 13.835C11.369 13.703 11.1581 13.278 11.2891 12.885C11.4701 12.345 11.9391 11.836 12.7671 11.281C13.7881 10.597 13.657 9.84707 13.614 9.60107C13.501 8.94707 12.95 8.38988 12.303 8.27588C11.811 8.18588 11.3301 8.31488 10.9541 8.62988C10.5761 8.94688 10.3589 9.41391 10.3589 9.90991C10.3589 10.3239 10.0229 10.6599 9.60889 10.6599C9.19489 10.6599 8.85889 10.3239 8.85889 9.90991C8.85889 8.96891 9.27099 8.08396 9.98999 7.48096C10.702 6.88496 11.639 6.63605 12.564 6.80005C13.831 7.02405 14.8701 8.07097 15.0911 9.34497C15.3111 10.607 14.782 11.7381 13.603 12.5281Z"
         className={cn({
-          "fill-light-orange-vibrant dark:fill-dark-orange-vibrant":
-            color === "orange-vibrant",
-          "fill-light-blue-vibrant dark:fill-dark-blue-vibrant":
-            color === "blue-vibrant",
-          "fill-light-green-base dark:fill-dark-green-base":
-            color === "green-base",
-          "fill-light-pink-vibrant dark:fill-dark-pink-vibrant":
-            color === "pink-vibrant",
+          'fill-light-orange-vibrant dark:fill-dark-orange-vibrant': color === 'orange-vibrant',
+          'fill-blue-base dark:fill-blue-base': color === 'blue-vibrant',
+          'fill-green-base dark:fill-green-base': color === 'green-base',
+          'fill-light-pink-vibrant dark:fill-dark-pink-vibrant': color === 'pink-vibrant',
         })}
       />
     </svg>
@@ -32,26 +23,17 @@ export const HelpCircle: FC<{
 
 export const Lightbulb: FC<{
   className?: string;
-  color?: "orange-vibrant" | "blue-vibrant" | "green-base" | "pink-vibrant";
-}> = ({ className, color = "orange-vibrant" }) => {
+  color?: 'orange-vibrant' | 'blue-vibrant' | 'green-base' | 'pink-vibrant';
+}> = ({ className, color = 'orange-vibrant' }) => {
   return (
-    <svg
-      className={className}
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
+    <svg className={className} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
         d="M18 9.43997C18.03 11.4 17.0701 12.9201 15.8701 14.3101C15.3961 14.8651 14.9731 15.396 14.7271 16.052C14.6831 16.169 14.5769 16.25 14.4529 16.25H12.55C12.384 16.25 12.25 16.116 12.25 15.95V13.3101L14.03 11.5301C14.32 11.2401 14.32 10.76 14.03 10.47C13.74 10.18 13.26 10.18 12.97 10.47L11.5 11.94L10.03 10.47C9.74003 10.18 9.25997 10.18 8.96997 10.47C8.67997 10.76 8.67997 11.2401 8.96997 11.5301L10.75 13.3101V15.95C10.75 16.116 10.616 16.25 10.45 16.25H8.53491C8.41091 16.25 8.30596 16.17 8.26196 16.054C8.00696 15.386 7.57409 14.8451 7.09009 14.2801C6.00009 13.0001 5 11.39 5 9.50003C5 5.85003 8.00994 2.90003 11.6899 3.00003C15.1199 3.10003 17.94 6.01997 18 9.43997ZM14.2 17.75C14.082 17.75 8.91805 17.75 8.80005 17.75C8.50005 17.75 8.5 18 8.5 18C8.5 19 8.83988 19.75 9.37988 20.25C9.91988 20.75 10.67 21 11.5 21C12.33 21 13.0801 20.75 13.6201 20.25C14.1601 19.75 14.5 19 14.5 18C14.5 18 14.5 17.75 14.2 17.75Z"
         className={cn({
-          "fill-light-orange-vibrant dark:fill-dark-orange-vibrant":
-            color === "orange-vibrant",
-          "fill-light-blue-vibrant dark:fill-dark-blue-vibrant":
-            color === "blue-vibrant",
-          "fill-light-green-base dark:fill-dark-green-base":
-            color === "green-base",
-          "fill-light-pink-vibrant dark:fill-dark-pink-vibrant":
-            color === "pink-vibrant",
+          'fill-light-orange-vibrant dark:fill-dark-orange-vibrant': color === 'orange-vibrant',
+          'fill-blue-base dark:fill-blue-base': color === 'blue-vibrant',
+          'fill-green-base dark:fill-green-base': color === 'green-base',
+          'fill-light-pink-vibrant dark:fill-dark-pink-vibrant': color === 'pink-vibrant',
         })}
       />
     </svg>
@@ -60,33 +42,18 @@ export const Lightbulb: FC<{
 
 export const GraduationCap: FC<{
   className?: string;
-  color?:
-    | "orange-vibrant"
-    | "blue-vibrant"
-    | "green-base"
-    | "pink-vibrant"
-    | "neutral-1";
-}> = ({ className, color = "orange-vibrant" }) => {
+  color?: 'orange-vibrant' | 'blue-vibrant' | 'green-base' | 'pink-vibrant' | 'neutral-1';
+}> = ({ className, color = 'orange-vibrant' }) => {
   return (
-    <svg
-      className={className}
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
+    <svg className={className} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
         d="M17.9995 14.4189V16.6999C17.9995 17.3939 17.6324 18.035 17.0454 18.406C13.6814 20.531 10.3164 20.531 6.95242 18.406C6.36542 18.036 5.99856 17.3939 5.99856 16.6999V14.4189C5.99856 14.3429 6.07951 14.295 6.14651 14.331L9.81863 16.3399C10.4786 16.6999 11.2386 16.89 11.9986 16.89C12.7586 16.89 13.5185 16.6999 14.1785 16.3399L17.8506 14.331C17.9186 14.294 17.9995 14.3429 17.9995 14.4189ZM19.9365 7.90499L13.4656 4.37399C12.5526 3.87599 11.4484 3.87599 10.5344 4.37399L4.0635 7.90499C2.6455 8.67799 2.6455 10.714 4.0635 11.488L10.5344 15.019C11.4474 15.517 12.5516 15.517 13.4656 15.019L19.9365 11.488L19.2495 11.863V16C19.2495 16.414 19.5855 16.75 19.9995 16.75C20.4135 16.75 20.7495 16.414 20.7495 16V10.671C21.2535 9.73899 20.9855 8.47699 19.9365 7.90499Z"
         className={cn({
-          "fill-light-orange-vibrant dark:fill-dark-orange-vibrant":
-            color === "orange-vibrant",
-          "fill-light-blue-vibrant dark:fill-dark-blue-vibrant":
-            color === "blue-vibrant",
-          "fill-light-green-base dark:fill-dark-green-base":
-            color === "green-base",
-          "fill-light-pink-vibrant dark:fill-dark-pink-vibrant":
-            color === "pink-vibrant",
-          "fill-light-neutral-1 dark:fill-dark-neutral-1":
-            color === "neutral-1",
+          'fill-light-orange-vibrant dark:fill-dark-orange-vibrant': color === 'orange-vibrant',
+          'fill-blue-base dark:fill-blue-base': color === 'blue-vibrant',
+          'fill-green-base dark:fill-green-base': color === 'green-base',
+          'fill-light-pink-vibrant dark:fill-dark-pink-vibrant': color === 'pink-vibrant',
+          'fill-light-neutral-1 dark:fill-dark-neutral-1': color === 'neutral-1',
         })}
       />
     </svg>
@@ -95,20 +62,14 @@ export const GraduationCap: FC<{
 
 export const BookOpen: FC<{
   className?: string;
-  color?: "neutral-1";
-}> = ({ className, color = "neutral-1" }) => {
+  color?: 'neutral-1';
+}> = ({ className, color = 'neutral-1' }) => {
   return (
-    <svg
-      className={className}
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
+    <svg className={className} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
         d="M21 5.31967V18.3297C21 18.6597 20.6801 18.8898 20.3501 18.7998C17.9661 18.1208 15.573 18.1177 13.187 19.3077C12.986 19.4077 12.749 19.2717 12.749 19.0467V5.85276C12.749 5.78576 12.7701 5.71877 12.8091 5.66477C13.4321 4.80977 14.396 4.21471 15.519 4.07871C17.331 3.85871 19.0731 4.07879 20.7141 4.86179C20.8891 4.94479 21 5.12667 21 5.31967ZM8.47998 4.07968C6.66798 3.85968 4.92591 4.07976 3.28491 4.86276C3.11091 4.94576 3 5.12777 3 5.32077V18.3308C3 18.6608 3.3199 18.8908 3.6499 18.8008C6.0339 18.1218 8.42699 18.1187 10.813 19.3087C11.014 19.4087 11.251 19.2727 11.251 19.0477V5.85373C11.251 5.78673 11.2299 5.71974 11.1909 5.66574C10.5669 4.81074 9.60398 4.21568 8.47998 4.07968Z"
         className={cn({
-          "fill-light-neutral-1 dark:fill-dark-neutral-1":
-            color === "neutral-1",
+          'fill-light-neutral-1 dark:fill-dark-neutral-1': color === 'neutral-1',
         })}
       />
     </svg>
@@ -117,20 +78,14 @@ export const BookOpen: FC<{
 
 export const Layers: FC<{
   className?: string;
-  color?: "neutral-1";
-}> = ({ className, color = "neutral-1" }) => {
+  color?: 'neutral-1';
+}> = ({ className, color = 'neutral-1' }) => {
   return (
-    <svg
-      className={className}
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
+    <svg className={className} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
         d="M20.19 17.59L13.6 20.65C12.59 21.12 11.41 21.12 10.4 20.65L3.81 17.59C2.73 17.09 2.73 15.55 3.81 15.05L3.95001 14.99L9.76999 17.68C10.47 18.01 11.22 18.18 12 18.18C12.78 18.18 13.53 18.01 14.23 17.68L20.05 14.99L20.19 15.05C21.27 15.55 21.27 17.09 20.19 17.59ZM20.19 10.72L20.06 10.66L15.4 12.83L14.23 13.37C13.53 13.69 12.78 13.86 12 13.86C11.22 13.86 10.47 13.69 9.76999 13.37L8.60001 12.83L3.94 10.66L3.81 10.72C2.73 11.23 2.73 12.77 3.81 13.27L5.73001 14.16L10.4 16.32C10.91 16.56 11.45 16.68 12 16.68C12.55 16.68 13.09 16.56 13.6 16.32L18.27 14.16L20.19 13.27C21.27 12.77 21.27 11.23 20.19 10.72ZM20.19 6.41L13.6 3.35001C13.09 3.12001 12.55 3 12 3C11.45 3 10.91 3.12001 10.4 3.35001L3.81 6.41C2.73 6.91 2.73 8.45001 3.81 8.95001L3.94 9.01001L4.82999 9.42001L5.72 9.84L10.4 12.01C10.91 12.24 11.45 12.36 12 12.36C12.55 12.36 13.09 12.24 13.6 12.01L18.28 9.84L19.17 9.42001L20.06 9.01001L20.19 8.95001C21.27 8.45001 21.27 6.91 20.19 6.41Z"
         className={cn({
-          "fill-light-neutral-1 dark:fill-dark-neutral-1":
-            color === "neutral-1",
+          'fill-light-neutral-1 dark:fill-dark-neutral-1': color === 'neutral-1',
         })}
       />
     </svg>
@@ -139,21 +94,16 @@ export const Layers: FC<{
 
 export const ArrowRight: FC<{
   className?: string;
-  color?: "accent-1";
-}> = ({ className, color = "accent-1" }) => {
+  color?: 'accent-1';
+}> = ({ className, color = 'accent-1' }) => {
   return (
-    <svg
-      className={className}
-      viewBox="0 0 20 28"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
+    <svg className={className} viewBox="0 0 20 28" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
         fill-rule="evenodd"
         clip-rule="evenodd"
         d="M3.33325 14.0003C3.33325 13.5401 3.70635 13.167 4.16659 13.167L13.8214 13.167L9.41066 8.75625C9.08523 8.43081 9.08523 7.90317 9.41066 7.57774C9.7361 7.2523 10.2637 7.2523 10.5892 7.57774L16.4225 13.4111C16.7479 13.7365 16.7479 14.2641 16.4225 14.5896L10.5892 20.4229C10.2637 20.7484 9.7361 20.7484 9.41066 20.4229C9.08523 20.0975 9.08523 19.5698 9.41066 19.2444L13.8214 14.8337L4.16659 14.8337C3.70635 14.8337 3.33325 14.4606 3.33325 14.0003Z"
         className={cn({
-          "fill-light-accent-1 dark:fill-dark-accent-1": color === "accent-1",
+          'fill-light-accent-1 dark:fill-dark-accent-1': color === 'accent-1',
         })}
       />
     </svg>
@@ -162,26 +112,17 @@ export const ArrowRight: FC<{
 
 export const MessageQuestion: FC<{
   className?: string;
-  color?: "orange-vibrant" | "blue-vibrant" | "green-base" | "pink-vibrant";
-}> = ({ className, color = "orange-vibrant" }) => {
+  color?: 'orange-vibrant' | 'blue-vibrant' | 'green-base' | 'pink-vibrant';
+}> = ({ className, color = 'orange-vibrant' }) => {
   return (
-    <svg
-      className={className}
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
+    <svg className={className} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
         d="M18 3H6C4 3 3 4 3 6V21L6 18H18C20 18 21 17 21 15V6C21 4 20 3 18 3ZM12.02 15C11.468 15 11.0149 14.552 11.0149 14C11.0149 13.448 11.458 13 12.01 13H12.02C12.573 13 13.02 13.448 13.02 14C13.02 14.552 12.572 15 12.02 15ZM13.345 11.051C12.789 11.421 12.713 11.608 12.71 11.616C12.597 11.918 12.3051 12.1121 11.9971 12.1121C11.9151 12.1121 11.833 12.098 11.752 12.069C11.367 11.932 11.1581 11.523 11.2891 11.135C11.4921 10.535 12.0849 10.087 12.5149 9.802C13.1509 9.379 13.1579 8.95004 13.1079 8.66504C13.0299 8.22404 12.6529 7.84604 12.2109 7.76904C11.8749 7.70804 11.5381 7.79494 11.2781 8.01294C11.0221 8.22794 10.876 8.542 10.876 8.875C10.876 9.289 10.54 9.625 10.126 9.625C9.71198 9.625 9.37598 9.289 9.37598 8.875C9.37598 8.097 9.71796 7.36401 10.314 6.86401C10.91 6.36401 11.6939 6.15402 12.4709 6.29102C13.5299 6.47702 14.399 7.34603 14.585 8.40503C14.769 9.45803 14.329 10.397 13.345 11.051Z"
         className={cn({
-          "fill-light-orange-vibrant dark:fill-dark-orange-vibrant":
-            color === "orange-vibrant",
-          "fill-light-blue-vibrant dark:fill-dark-blue-vibrant":
-            color === "blue-vibrant",
-          "fill-light-green-base dark:fill-dark-green-base":
-            color === "green-base",
-          "fill-light-pink-vibrant dark:fill-dark-pink-vibrant":
-            color === "pink-vibrant",
+          'fill-light-orange-vibrant dark:fill-dark-orange-vibrant': color === 'orange-vibrant',
+          'fill-blue-base dark:fill-blue-base': color === 'blue-vibrant',
+          'fill-green-base dark:fill-green-base': color === 'green-base',
+          'fill-light-pink-vibrant dark:fill-dark-pink-vibrant': color === 'pink-vibrant',
         })}
       />
     </svg>
@@ -190,22 +131,15 @@ export const MessageQuestion: FC<{
 
 export const Envlope: FC<{
   className?: string;
-  color?: "pink-vibrant" | "neutral-2";
-}> = ({ className, color = "pink-vibrant" }) => {
+  color?: 'pink-vibrant' | 'neutral-2';
+}> = ({ className, color = 'pink-vibrant' }) => {
   return (
-    <svg
-      className={className}
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
+    <svg className={className} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
         d="M18 5H6C4 5 3 6 3 8V17C3 19 4 20 6 20H18C20 20 21 19 21 17V8C21 6 20 5 18 5ZM17.9409 9.606L13.0291 13.178C12.7211 13.402 12.36 13.514 12 13.514C11.64 13.514 11.2779 13.402 10.9709 13.179L6.05908 9.606C5.72408 9.363 5.65004 8.893 5.89404 8.558C6.13704 8.224 6.60389 8.14801 6.94189 8.39301L11.854 11.965C11.942 12.028 12.059 12.029 12.147 11.965L17.0591 8.39301C17.3961 8.14801 17.8639 8.224 18.1069 8.558C18.3509 8.894 18.2759 9.363 17.9409 9.606Z"
         className={cn({
-          "fill-light-pink-vibrant dark:fill-dark-pink-vibrant":
-            color === "pink-vibrant",
-          "fill-light-neutral-2 dark:fill-dark-neutral-2":
-            color === "neutral-2",
+          'fill-light-pink-vibrant dark:fill-dark-pink-vibrant': color === 'pink-vibrant',
+          'fill-light-neutral-2 dark:fill-dark-neutral-2': color === 'neutral-2',
         })}
       />
     </svg>
@@ -214,36 +148,26 @@ export const Envlope: FC<{
 
 export const Chat: FC<{
   className?: string;
-  color?: "brown-vibrant";
-}> = ({ className, color = "brown-vibrant" }) => {
+  color?: 'brown-vibrant';
+}> = ({ className, color = 'brown-vibrant' }) => {
   return (
-    <svg
-      className={className}
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
+    <svg className={className} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
         d="M20.8789 20.394C21.1189 20.594 20.9789 20.994 20.6689 20.994C19.6389 21.034 18.0591 20.894 17.0891 19.864C16.2991 20.144 15.419 20.2841 14.499 20.2841C12.481 20.2841 10.686 19.607 9.49902 18.368C9.31002 18.17 9.35802 17.785 9.79102 17.819C10.024 17.835 10.259 17.844 10.499 17.844C15.119 17.844 18.614 15.143 19.353 11.235C19.403 10.973 19.7291 10.886 19.8931 11.097C20.5931 12.003 20.998 13.1481 20.998 14.5031C20.998 16.0331 20.4679 17.314 19.5879 18.264C19.6989 18.964 20.0889 19.754 20.8789 20.394ZM17.998 9.67102C17.998 9.62402 17.992 9.58103 17.991 9.53503C17.917 5.44903 14.594 3 10.499 3C6.35802 3 3 5.50202 3 9.67102C3 11.439 3.608 12.915 4.625 14.015C4.5 14.816 4.05009 15.733 3.14209 16.467C2.86709 16.7 3.02503 17.159 3.38403 17.167C4.56703 17.209 6.39203 17.05 7.50903 15.858C7.73703 15.937 7.97094 16.006 8.21094 16.066C8.93194 16.247 9.69998 16.3409 10.501 16.3409C14.64 16.3419 17.998 13.84 17.998 9.67102Z"
         className={cn({
-          "fill-light-brown-vibrant dark:fill-dark-brown-vibrant":
-            color === "brown-vibrant",
+          'fill-light-brown-vibrant dark:fill-dark-brown-vibrant': color === 'brown-vibrant',
         })}
       />
     </svg>
   );
 };
 
-export type ColoredCardsIcon =
-  | "helpCircle"
-  | "lightbulb"
-  | "graduationCap"
-  | "messageQuestion";
+export type ColoredCardsIcon = 'helpCircle' | 'lightbulb' | 'graduationCap' | 'messageQuestion';
 export type ColoredCardsIconColor =
-  | "blue-vibrant"
-  | "green-base"
-  | "orange-vibrant"
-  | "pink-vibrant";
+  | 'blue-vibrant'
+  | 'green-base'
+  | 'orange-vibrant'
+  | 'pink-vibrant';
 
 export const ColoredCardsIconMap: FC<{
   icon: ColoredCardsIcon;
@@ -251,13 +175,13 @@ export const ColoredCardsIconMap: FC<{
   color?: ColoredCardsIconColor;
 }> = ({ icon, color, className }) => {
   switch (icon) {
-    case "helpCircle":
+    case 'helpCircle':
       return <HelpCircle color={color} className={className} />;
-    case "lightbulb":
+    case 'lightbulb':
       return <Lightbulb color={color} className={className} />;
-    case "graduationCap":
+    case 'graduationCap':
       return <GraduationCap color={color} className={className} />;
-    case "messageQuestion":
+    case 'messageQuestion':
       return <MessageQuestion color={color} className={className} />;
     default:
       console.warn(`Icon ${icon} not found`);
diff --git a/src/modules/new-request-form/fields/Input.tsx b/src/modules/new-request-form/fields/Input.tsx
index 0f9ffaf65..5fadd5394 100644
--- a/src/modules/new-request-form/fields/Input.tsx
+++ b/src/modules/new-request-form/fields/Input.tsx
@@ -4,9 +4,9 @@ import {
   Input as GardenInput,
   Label,
   Message,
-} from "@zendeskgarden/react-forms";
-import { Span } from "@zendeskgarden/react-typography";
-import type { Field } from "../data-types";
+} from '@zendeskgarden/react-forms';
+import { Span } from '@zendeskgarden/react-typography';
+import type { Field } from '../data-types';
 
 interface InputProps {
   field: Field;
@@ -16,14 +16,12 @@ interface InputProps {
 export function Input({ field, onChange }: InputProps): JSX.Element {
   const { label, error, value, name, required, description, type } = field;
   const stepProp: { step?: string } = {};
-  const inputType =
-    type === "integer" || type === "decimal" ? "number" : "text";
+  const inputType = type === 'integer' || type === 'decimal' ? 'number' : 'text';
 
-  if (type === "integer") stepProp.step = "1";
-  if (type === "decimal") stepProp.step = "any";
+  if (type === 'integer') stepProp.step = '1';
+  if (type === 'decimal') stepProp.step = 'any';
 
-  const autocomplete =
-    type === "anonymous_requester_email" ? "email" : undefined;
+  const autocomplete = type === 'anonymous_requester_email' ? 'email' : undefined;
 
   return (
     <GardenField className="custom-form-field-layout">
@@ -34,10 +32,9 @@ export function Input({ field, onChange }: InputProps): JSX.Element {
       <GardenInput
         name={name}
         type={inputType}
-        defaultValue={
-          value && value !== "" ? (value as string) : `Enter ${label}`
-        }
-        validation={error ? "error" : undefined}
+        defaultValue={value && value !== '' ? (value as string) : ''}
+        placeholder={`Enter ${label}`}
+        validation={error ? 'error' : undefined}
         required={required}
         onChange={(e) => {
           onChange && onChange(e.target.value);
@@ -47,9 +44,7 @@ export function Input({ field, onChange }: InputProps): JSX.Element {
         {...stepProp}
       />
       {error && <Message validation="error">{error}</Message>}
-      {description && (
-        <Hint dangerouslySetInnerHTML={{ __html: description }} />
-      )}
+      {description && <Hint dangerouslySetInnerHTML={{ __html: description }} />}
     </GardenField>
   );
 }
diff --git a/src/modules/new-request-form/fields/textarea/TextArea.tsx b/src/modules/new-request-form/fields/textarea/TextArea.tsx
index d673511d4..edd91feca 100644
--- a/src/modules/new-request-form/fields/textarea/TextArea.tsx
+++ b/src/modules/new-request-form/fields/textarea/TextArea.tsx
@@ -1,14 +1,8 @@
-import {
-  Field as GardenField,
-  Hint,
-  Textarea,
-  Label,
-  Message,
-} from "@zendeskgarden/react-forms";
-import { Span } from "@zendeskgarden/react-typography";
-import type { Field } from "../../data-types";
-import { useWysiwyg } from "./useWysiwyg";
-import styled from "styled-components";
+import { Field as GardenField, Hint, Textarea, Label, Message } from '@zendeskgarden/react-forms';
+import { Span } from '@zendeskgarden/react-typography';
+import type { Field } from '../../data-types';
+import { useWysiwyg } from './useWysiwyg';
+import styled from 'styled-components';
 
 interface TextAreaProps {
   field: Field;
@@ -54,10 +48,9 @@ export function TextArea({
       <Textarea
         ref={ref}
         name={name}
-        defaultValue={
-          value && value !== "" ? (value as string) : "Describe your issue."
-        }
-        validation={error ? "error" : undefined}
+        defaultValue={value && value !== '' ? (value as string) : ''}
+        placeholder="Describe your issue."
+        validation={error ? 'error' : undefined}
         required={required}
         onChange={(e) => onChange(e.target.value)}
         rows={6}
@@ -65,10 +58,7 @@ export function TextArea({
       />
       {error && <StyledMessage validation="error">{error}</StyledMessage>}
       {description && (
-        <Hint
-          className="custom-hint"
-          dangerouslySetInnerHTML={{ __html: description }}
-        />
+        <Hint className="custom-hint" dangerouslySetInnerHTML={{ __html: description }} />
       )}
     </GardenField>
   );
diff --git a/src/modules/side-nav/MobileMenuNavModule.tsx b/src/modules/side-nav/MobileMenuNavModule.tsx
index 1dc0a2bdc..b20f76ec7 100644
--- a/src/modules/side-nav/MobileMenuNavModule.tsx
+++ b/src/modules/side-nav/MobileMenuNavModule.tsx
@@ -8,7 +8,13 @@ type Props = {
 };
 
 export const MobileMenuNav: FC<Props> = ({ sideNavData, navState }) => {
-  const [selectedCategory, setSelectedCategory] = useState<NavCategory | null>(null);
+  const [selectedCategory, setSelectedCategory] = useState<NavCategory | null>(
+    (sideNavData &&
+      sideNavData.categories.find((category) =>
+        category.sections.find((section) => section.id === navState.section)
+      )) ||
+      null
+  );
   const [activeSection, setActiveSection] = useState<{ [key: number]: boolean }>({
     [navState.section || '']: true,
   });
@@ -90,8 +96,6 @@ export const MobileMenuNav: FC<Props> = ({ sideNavData, navState }) => {
           <ul className="accordion-body">
             {selectedCategory &&
               selectedCategory.sections.map((section) => {
-                const sectionIsActive = navState.section === section.id;
-
                 return (
                   <li key={section.id} className="mt-4 first:mt-5">
                     <button
@@ -100,11 +104,7 @@ export const MobileMenuNav: FC<Props> = ({ sideNavData, navState }) => {
                     >
                       <span
                         className={cn(
-                          'transition body-2 group-hover:text-light-accent-1 dark:group-hover:text-dark-accent-1',
-                          {
-                            'text-light-accent-1 dark:text-dark-accent-1': sectionIsActive,
-                            'text-light-neutral-1 dark:text-dark-neutral-1': !sectionIsActive,
-                          }
+                          'transition body-2 group-hover:text-light-accent-1 dark:group-hover:text-dark-accent-1'
                         )}
                       >
                         {section.name}
diff --git a/src/modules/side-nav/SideNavModule.tsx b/src/modules/side-nav/SideNavModule.tsx
index 8cc7302a8..ea7b9cc90 100644
--- a/src/modules/side-nav/SideNavModule.tsx
+++ b/src/modules/side-nav/SideNavModule.tsx
@@ -82,7 +82,7 @@ export const SideNav: FC<Props> = ({ sideNavData, navState }) => {
             onClick={() => setActiveNavState({})}
           >
             <ChevronLeft />
-            <span className="ml-2 transition text-light-neutral-2 dark:text-dark-neutral-2 group-hover:text-light-neutral-1 group-hover:dark:text-dark-neutral-1">
+            <span className="ml-2 transition text-light-neutral-2 dark:text-dark-neutral-2 group-hover:text-light-neutral-1 group-hover:dark:text-dark-neutral-1 body-3">
               All Topics
             </span>
           </button>
@@ -130,7 +130,7 @@ export const SideNav: FC<Props> = ({ sideNavData, navState }) => {
                         >
                           <span
                             className={cn(
-                              'transition body-3 group-hover:text-light-accent-1 dark:group-hover:text-dark-accent-1',
+                              'transition body-3 group-hover:text-light-accent-1 dark:group-hover:text-dark-accent-1 text-left',
                               {
                                 'text-light-accent-1 dark:text-dark-accent-1': sectionIsActive,
                                 'text-light-neutral-2 dark:text-dark-neutral-2': !sectionIsActive,
diff --git a/style.css b/style.css
index e100646ce..3cc40c3dc 100644
--- a/style.css
+++ b/style.css
@@ -197,23 +197,23 @@ template {
 }
 
 .avatar-wrapper g:nth-of-type(1) {
-  animation-duration: 5s;
+  animation-duration: 6s;
   animation-delay: 2s;
 }
 
 .avatar-wrapper g:nth-of-type(2) {
-  animation-duration: 4s;
+  animation-duration: 6s;
   animation-delay: 1s;
 }
 
 .avatar-wrapper g:nth-of-type(3) {
   animation-duration: 6s;
-  animation-delay: 2s;
+  animation-delay: 1s;
 }
 
 .avatar-wrapper g:nth-of-type(4) {
   animation-duration: 5s;
-  animation-delay: 2s;
+  animation-delay: 1s;
 }
 
 .avatar-wrapper g:nth-of-type(5) {
@@ -222,13 +222,13 @@ template {
 }
 
 .avatar-wrapper g:nth-of-type(6) {
-  animation-duration: 4s;
-  animation-delay: 1s;
+  animation-duration: 5s;
+  animation-delay: 2s;
 }
 
 .avatar-wrapper g:nth-of-type(7) {
-  animation-duration: 6s;
-  animation-delay: 2s;
+  animation-duration: 4s;
+  animation-delay: 1s;
 }
 
 .avatar-wrapper g:nth-of-type(8) {
@@ -242,6 +242,6 @@ template {
 }
 
 .avatar-wrapper g:nth-of-type(10) {
-  animation-duration: 5s;
-  animation-delay: 1s;
+  animation-duration: 4s;
+  animation-delay: 2s;
 }
diff --git a/styles/main.css b/styles/main.css
index 38c8fa0a2..1d972a62d 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -104,7 +104,7 @@
     .article-votes-question,
     .article-vote,
     .article-vote-divider {
-      @apply caption-1 text-light-neutral-1 dark:text-dark-neutral-1;
+      @apply button-label-4 text-light-neutral-1 dark:text-dark-neutral-1;
     }
 
     .article-vote-divider {
@@ -116,10 +116,9 @@
     }
 
     .article-updated-text {
-      @apply caption-1 text-light-neutral-2 dark:text-dark-neutral-2;
+      @apply button-label-4 text-light-neutral-2 dark:text-dark-neutral-2;
     }
   }
-
   .related-articles {
     @apply pt-margin-mobile sm:pt-padding-x-large;
     .related-articles-title {
@@ -127,10 +126,14 @@
     }
 
     ul {
-      @apply mt-padding-medium sm:mt-margin-mobile gap-y-4  grid grid-cols-4 gap-gap-large sm:grid-cols-6;
+      @apply mt-padding-medium sm:mt-margin-mobile gap-y-4 grid grid-cols-4 gap-gap-large sm:grid-cols-6;
+
+      li:not(:first-child, :nth-child(2)) {
+        @apply hidden;
+      }
 
       li {
-        @apply relative flex col-span-4 sm:col-span-3;
+        @apply relative flex col-span-4 sm:col-span-3 rounded-[1.25rem] bg-light-accent-2 dark:bg-dark-accent-2 max-h-[7.5rem];
 
         &:before {
           @apply top-padding-medium left-padding-medium dark:hidden;
@@ -156,7 +159,7 @@
         }
 
         a {
-          @apply relative body-2 text-light-accent-1 dark:text-dark-accent-1 bg-light-accent-2 dark:bg-dark-accent-2 p-padding-medium pt-20 rounded-x-small w-full flex;
+          @apply relative body-2 text-light-accent-1 dark:text-dark-accent-1 p-padding-medium pt-20 rounded-[1.25rem] w-full h-full flex items-end;
 
           &:before {
             @apply top-padding-medium right-padding-medium dark:hidden transition opacity-0;
@@ -277,7 +280,12 @@ html:has(.ArticlePage) {
 }
 
 :not(.ck.ck-content p) .ck.ck-content p {
-  @apply !body-2 dark:!text-dark-neutral-2 !text-light-neutral-2;
+  @apply !body-3 dark:!text-dark-neutral-2 !text-light-neutral-2;
+}
+
+:not(.ck.ck-content p) .ck.ck-content.ck-focused p,
+:not(.ck.ck-content p) .ck.ck-content.ck-blurred p {
+  @apply !body-3 !text-light-neutral-1 dark:!text-dark-neutral-1;
 }
 
 .custom-hint {
@@ -293,17 +301,17 @@ html:has(.ArticlePage) {
 }
 
 .custom-input {
-  @apply !bg-light-surface-3 dark:!bg-dark-surface-3 !border-0 !rounded-xl !py-3 !px-4 !body-2 dark:!text-dark-neutral-2 !text-light-neutral-2 active:!text-light-neutral-1 active:dark:!text-dark-neutral-1 focus-visible:!text-light-neutral-1 focus-visible:dark:!text-dark-neutral-1;
+  @apply !bg-light-surface-3 dark:!bg-dark-surface-3 !border-0 !rounded-xl !py-3 !px-4 !body-3 dark:!text-dark-neutral-1 !text-light-neutral-1 placeholder:dark:!text-dark-neutral-2 placeholder:!text-light-neutral-2 placeholder:!body-3 active:!text-light-neutral-1 active:dark:!text-dark-neutral-1 focus-visible:!text-light-neutral-1 focus-visible:dark:!text-dark-neutral-1;
 }
 
 .custom-combobox > div:first-child {
-  @apply !border-0 !bg-light-surface-3 dark:!bg-dark-surface-3 !rounded-xl !py-3 !px-4 !body-2 dark:!text-dark-neutral-2 !text-light-neutral-2 !max-h-none !h-auto;
+  @apply !border-0 !bg-light-surface-3 dark:!bg-dark-surface-3 !rounded-xl !py-3 !px-4 !body-3 placeholder:!body-3 dark:!text-dark-neutral-1 !text-light-neutral-1 placeholder:dark:!text-dark-neutral-2 placeholder:!text-light-neutral-2 !max-h-none !h-auto;
 }
 
 .custom-combobox > div:nth-child(2) {
-  @apply !bg-light-surface-1 dark:!bg-dark-surface-1 !rounded-t-none !body-2;
+  @apply !bg-light-surface-1 dark:!bg-dark-surface-1 !rounded-t-none !body-3;
   ul {
-    @apply !shadow-none !body-2 !border-0 !bg-light-surface-3 dark:!bg-dark-surface-3 !p-0 !rounded-xl;
+    @apply !shadow-none !body-3 !border-0 !bg-light-surface-3 dark:!bg-dark-surface-3 !p-0 !rounded-xl;
     li {
       @apply hover:!bg-light-surface-3-hovered hover:dark:!bg-dark-surface-3-hovered hover:!border-0 hover:!shadow-none !flex !flex-row !space-x-3 !justify-center;
     }
@@ -312,7 +320,7 @@ html:has(.ArticlePage) {
         @apply !fill-none dark:!text-dark-neutral-1 !text-light-neutral-1 !mt-2;
       }
       div {
-        @apply !my-2 dark:!text-dark-neutral-1 !text-light-neutral-1 !body-2 hover:!border-0 hover:!border-transparent;
+        @apply !my-2 dark:!text-dark-neutral-1 !text-light-neutral-1 !body-3 hover:!border-0 hover:!border-transparent;
       }
     }
   }
@@ -322,8 +330,12 @@ html:has(.ArticlePage) {
   @apply !my-0;
 }
 
-.custom-combobox > div span {
-  @apply !body-2 dark:!text-dark-neutral-2 !text-light-neutral-2;
+.custom-combobox div:not(:has(svg)) > span {
+  @apply !body-3 dark:!text-dark-neutral-2 !text-light-neutral-2;
+}
+
+.custom-combobox div:has(svg) > span {
+  @apply !body-3 placeholder:dark:!text-dark-neutral-2 placeholder:!text-light-neutral-2 dark:!text-dark-neutral-1 !text-light-neutral-1;
 }
 
 .custom-submit-button {
@@ -341,6 +353,10 @@ html:has(.ArticlePage) {
   }
 }
 
+.search-bar-container:has(input[aria-expanded='true']) {
+  @apply focus-within:!rounded-b-none focus-within:!rounded-t-xl;
+}
+
 .filters-in-section {
   @apply flex flex-col space-y-6;
   .sidenav-item {
@@ -350,20 +366,20 @@ html:has(.ArticlePage) {
 
 .search-result-description {
   em {
-    @apply bg-search-highlight !p-px !not-italic;
+    @apply bg-search-highlight dark:bg-light-pink-vibrant !p-px !not-italic;
   }
 }
 
 zd-autocomplete {
-  @apply !body-3 !bg-light-surface-1 dark:!bg-dark-surface-1 !text-light-neutral-1 dark:!text-dark-neutral-1;
+  @apply !body-3 !bg-light-surface-1 dark:!bg-dark-surface-1 !text-light-neutral-1 dark:!text-dark-neutral-1 md:!w-[25rem] !w-screen !-ml-[3.25rem] md:!-ml-12 !rounded-b-xl !shadow-none !border !border-light-surface-3 dark:!border-dark-surface-3;
 }
 
 zd-autocomplete-header {
-  @apply !body-2 !text-light-neutral-1 dark:!text-dark-neutral-1 !bg-light-surface-3 dark:!bg-dark-surface-3;
+  @apply !body-3 !text-light-neutral-2 dark:!text-dark-neutral-2 !bg-light-surface-1 dark:!bg-dark-surface-1 !text-left !border-b !border-b-light-surface-3 dark:!border-b-dark-surface-3;
 }
 
 zd-autocomplete-multibrand {
-  @apply !bg-light-surface-3 dark:!bg-dark-surface-3 hover:!bg-light-surface-3-hovered dark:hover:!bg-dark-surface-3-hovered;
+  @apply !bg-light-surface-1 dark:!bg-dark-surface-1 hover:!bg-light-surface-1-hovered dark:hover:!bg-dark-surface-1-hovered !border-b !border-b-light-surface-3 dark:!border-b-dark-surface-3;
 }
 
 zd-autocomplete-title-multibrand,
@@ -371,7 +387,7 @@ zd-autocomplete-breadcrumbs-multibrand {
   @apply !body-3 !text-light-neutral-1 dark:!text-dark-neutral-1;
 
   em {
-    @apply !text-light-neutral-1 dark:!text-dark-neutral-1 !bg-dark-accent-1;
+    @apply !text-light-neutral-1 dark:!text-dark-neutral-1 !bg-search-highlight dark:!bg-dark-pink-vibrant;
   }
 }
 
@@ -388,3 +404,7 @@ input::-webkit-search-cancel-button {
   content: URL();
   cursor: pointer;
 }
+
+iframe#launcher {
+  @apply !z-50;
+}
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 120abefc1..850a85e2f 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -142,8 +142,6 @@ const config: Config = {
         'light-status-success-2-hovered': '#BCEECC',
         'light-status-warning-2-hovered': '#FFFBD7',
         'light-status-critical-2-hovered': '#FFD5D4',
-        'light-orange-light': '#FEF5EA',
-        'dark-orange-light': 'rgba(55, 27, 12, 0.8)',
         'light-orange-vibrant': '#FF4D00',
         'light-orange-fade': '#FBF5F2',
         'dark-orange-vibrant': '#FF4D00',
@@ -154,21 +152,18 @@ const config: Config = {
         'dark-brown-vibrant': '#85754A',
         'dark-brown-fade': '#231E0F',
         'dark-brown-fade-80': 'rgba(35,30,15,0.80)',
-        'light-pink-fade': '#FEF4FF',
-        'dark-pink-fade-80': 'rgba(54,26,55,0.80)',
         'light-pink-vibrant': '#F50DB4',
-        'light-pink-light': '#FEF4FF',
+        'light-pink-fade': '#FEF4FF',
         'dark-pink-vibrant': '#FC74FE',
-        'dark-pink-light': '#361A37',
-        'dark-pink-light-80': 'rgba(54,26,55,0.80)',
-        'light-green-base': '#0C8911',
-        'dark-green-base': '#0C8911',
-        'light-green-light': '#EEFBF1',
-        'dark-green-light': 'rgba(15, 44, 26, 0.8)',
-        'light-blue-light': '#EFF4FF',
-        'dark-blue-light': 'rgba(16, 20, 61, 0.8)',
-        'light-blue-vibrant': '#0047FF',
-        'dark-blue-vibrant': '#0C8911',
+        'dark-pink-fade': '#361A37',
+        'dark-pink-fade-80': 'rgba(54,26,55,0.80)',
+        'blue-base': '#4981FF',
+        'green-base': '#0C8911',
+        'green-vibrant': '#21C95E',
+        'light-blue': '#EFF4FF',
+        'dark-blue': '#10143D',
+        'light-green': '#EEFBF1',
+        'dark-green': '#0F2C1A',
         'search-highlight': '#FDAFF0',
       },
     },
diff --git a/templates/header.hbs b/templates/header.hbs
index 1c23c71e1..cb16279e2 100644
--- a/templates/header.hbs
+++ b/templates/header.hbs
@@ -1,13 +1,12 @@
 <header class="Navigation fixed top-0 left-0 right-0 z-nav w-screen bg-light-surface-1 dark:border-dark-surface-3 dark:bg-dark-surface-1" id="new-navigation">
   {{!-- for desktop nav search bar --}}
   <div id="search-bar-placeholder" class="z-search absolute w-full pointer-events-none hidden md:block">
-    <div class="w-[25rem] m-auto flex flex-row space-x-2 p-3 rounded-[1.25rem] bg-light-surface-3 dark:!bg-dark-surface-3 items-center !pointer-events-auto !mt-4 border border-transparent focus-within:!border-light-surface-3 focus-within:dark:!border-dark-surface-3 focus-within:!bg-transparent focus-within:!text-light-neutral-1 focus-within:dark:!text-dark-neutral-1">
+    <div class="search-bar-container w-[25rem] m-auto flex flex-row space-x-2 p-3 rounded-[1.25rem] bg-light-surface-3 dark:!bg-dark-surface-3 items-center !pointer-events-auto !mt-4 border border-transparent focus-within:!border-light-surface-3 focus-within:dark:!border-dark-surface-3 focus-within:!bg-transparent focus-within:!text-light-neutral-1 focus-within:dark:!text-dark-neutral-1">
       <h2 class="sr-only">{{ t 'search' }}</h2>
       <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none" class="shrink-0">
         <path fill-rule="evenodd" clip-rule="evenodd" d="M9.16675 1.66699C5.02461 1.66699 1.66675 5.02486 1.66675 9.16699C1.66675 13.3091 5.02461 16.667 9.16675 16.667C10.9388 16.667 12.5673 16.0524 13.8508 15.0248L17.1126 18.2913C17.4378 18.617 17.9654 18.6174 18.2911 18.2922C18.6168 17.967 18.6172 17.4394 18.292 17.1137L15.0288 13.8458C16.0539 12.5631 16.6667 10.9366 16.6667 9.16699C16.6667 5.02486 13.3089 1.66699 9.16675 1.66699ZM9.16675 3.33366C5.94509 3.33366 3.33341 5.94533 3.33341 9.16699C3.33341 12.3887 5.94509 15.0003 9.16675 15.0003C12.3884 15.0003 15.0001 12.3887 15.0001 9.16699C15.0001 5.94533 12.3884 3.33366 9.16675 3.33366Z" fill="#6B6B6B"/>
       </svg>
       {{search submit=false instant=settings.instant_search class='search search-full peer'}}
-      <div class="body-3 text-light-neutral-2 dark:text-dark-neutral-2 shrink-0 bg-light-surface-3 dark:bg-dark-surface-3 px-1.5 rounded-[0.25rem]  peer-focus-within:hidden">⌘ K</div>
     </div>
   </div>
   {{!-- for mobile nav search bar --}}
diff --git a/templates/new_request_page.hbs b/templates/new_request_page.hbs
index 6f42688d6..c9636412c 100644
--- a/templates/new_request_page.hbs
+++ b/templates/new_request_page.hbs
@@ -71,7 +71,7 @@
 </script>
 
 <script type="module">
-  import { renderSideNav, sideNav } from "side-nav";
+  import { renderSideNav, renderMobileMenuNav, sideNav } from "side-nav";
 
   const container = document.getElementById("new-side-nav");
 
@@ -81,4 +81,21 @@
 
   // Make sure arguments are correctly typed. 
   renderSideNav(settings, sideNavData, {}, container);
+
+  // Add mobile nav
+  const addMobileNav = (sideNavData) => {
+
+    const container = document.getElementById("new-mobile-nav");
+
+    const settings = {{json settings}};
+
+    // Make sure arguments are correctly typed. 
+    renderMobileMenuNav(settings, sideNavData, {}, container);
+  }
+
+  const mobileMenuButton = document.getElementById("mobile-menu-button");
+    mobileMenuButton.addEventListener("click", (e) => {
+    // add setTimeout to ensure the mobile nav is added after mobile menu appears on DOM first
+    setTimeout(() => addMobileNav(sideNavData), 100);
+  });
 </script>
\ No newline at end of file