diff --git a/Gemfile b/Gemfile
index 995406a90..86fdf1993 100644
--- a/Gemfile
+++ b/Gemfile
@@ -177,6 +177,7 @@ group :development do
   gem 'bullet'
   gem 'letter_opener'
   gem 'web-console'
+  gem 'scss_lint', require: false
 
   # used in swagger build
   gem 'json_refs'
diff --git a/Gemfile.lock b/Gemfile.lock
index d980d4a40..3723a738c 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -643,6 +643,11 @@ GEM
       sexp_processor (~> 4.6)
     ruby_parser (3.20.0)
       sexp_processor (~> 4.16)
+    sass (3.7.4)
+      sass-listen (~> 4.0.0)
+    sass-listen (4.0.0)
+      rb-fsevent (~> 0.9, >= 0.9.4)
+      rb-inotify (~> 0.9, >= 0.9.7)
     sassc (2.4.0)
       ffi (~> 1.9)
     sassc-rails (2.1.2)
@@ -653,6 +658,8 @@ GEM
       tilt
     scout_apm (5.3.3)
       parser
+    scss_lint (0.60.0)
+      sass (~> 3.5, >= 3.5.5)
     seed_dump (3.3.1)
       activerecord (>= 4)
       activesupport (>= 4)
@@ -874,6 +881,7 @@ DEPENDENCIES
   rubocop-rails
   rubocop-rspec
   scout_apm
+  scss_lint
   seed_dump
   sentry-rails
   sentry-ruby
diff --git a/app/controllers/api/v1/accounts/portals_controller.rb b/app/controllers/api/v1/accounts/portals_controller.rb
index b1837acbd..fcc02c6ec 100644
--- a/app/controllers/api/v1/accounts/portals_controller.rb
+++ b/app/controllers/api/v1/accounts/portals_controller.rb
@@ -30,7 +30,7 @@ class Api::V1::Accounts::PortalsController < Api::V1::Accounts::BaseController
     ActiveRecord::Base.transaction do
       @portal.update!(portal_params) if params[:portal].present?
       # @portal.custom_domain = parsed_custom_domain
-      process_attached_logo
+      process_attached_logo if params[:blob_id].present?
     rescue StandardError => e
       Rails.logger.error e
       render json: { error: @portal.errors.messages }.to_json, status: :unprocessable_entity
diff --git a/app/javascript/portal/application.scss b/app/javascript/portal/application.scss
index 0c4703e0e..b657e2249 100644
--- a/app/javascript/portal/application.scss
+++ b/app/javascript/portal/application.scss
@@ -11,7 +11,7 @@
 
 html,
 body {
-  font-family: $font-family;
+  font-family: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   height: 100%;
diff --git a/app/javascript/portal/components/PublicArticleSearch.vue b/app/javascript/portal/components/PublicArticleSearch.vue
index 4ced0665b..6827c4762 100644
--- a/app/javascript/portal/components/PublicArticleSearch.vue
+++ b/app/javascript/portal/components/PublicArticleSearch.vue
@@ -1,8 +1,5 @@
 <template>
-  <div
-    v-on-clickaway="closeSearch"
-    class="mx-auto max-w-md w-full relative my-4"
-  >
+  <div v-on-clickaway="closeSearch" class="max-w-2xl w-full relative my-4">
     <public-search-input
       v-model="searchTerm"
       :search-placeholder="searchTranslations.searchPlaceholder"
@@ -10,7 +7,7 @@
     />
     <div
       v-if="shouldShowSearchBox"
-      class="absolute show-search-box w-full"
+      class="absolute top-16 w-full"
       @mouseover="openSearch"
     >
       <search-suggestions
@@ -122,8 +119,3 @@ export default {
   },
 };
 </script>
-<style lang="scss" scoped>
-.show-search-box {
-  top: 4rem;
-}
-</style>
diff --git a/app/javascript/portal/components/PublicSearchInput.vue b/app/javascript/portal/components/PublicSearchInput.vue
index 5183f3293..a1b36fd66 100644
--- a/app/javascript/portal/components/PublicSearchInput.vue
+++ b/app/javascript/portal/components/PublicSearchInput.vue
@@ -1,17 +1,16 @@
 <template>
   <div
-    class="w-full flex items-center rounded-md border-solid  h-16 bg-white px-4 py-2 text-slate-600"
+    class="w-full flex items-center rounded-md border-solid border-2 h-16 bg-white px-4 py-2 text-slate-600"
     :class="{
-      'shadow border-2 border-woot-100': isFocused,
-      'border border-slate-50 shadow-sm': !isFocused,
+      'shadow border-woot-100': isFocused,
+      'border-slate-50 shadow-sm': !isFocused,
     }"
   >
     <fluent-icon icon="search" />
     <input
       :value="value"
       type="text"
-      class="w-full search-input focus:outline-none text-base h-full bg-white px-2 py-2
-    text-slate-700 placeholder-slate-500 sm:text-sm"
+      class="w-full focus:outline-none text-base h-full bg-white px-2 py-2 text-slate-700 placeholder-slate-500"
       :placeholder="searchPlaceholder"
       role="search"
       @input="onChange"
diff --git a/app/javascript/shared/assets/stylesheets/shadows.scss b/app/javascript/shared/assets/stylesheets/shadows.scss
index 5eebc6f32..1fe65aa20 100644
--- a/app/javascript/shared/assets/stylesheets/shadows.scss
+++ b/app/javascript/shared/assets/stylesheets/shadows.scss
@@ -13,7 +13,7 @@
         0 0.4rem 1.2rem rgb(0 0 0 / 7%);
     --shadow-bulk-action-container:
         6px 3px 22px 9px rgb(181 181 181 / 25%);
-    --shadow-context-menu: rgb(22 23 24 / 35%) 0px 10px 38px -10px,
+    --shadow-context-menu: rgb(22 23 24 / 30%) 0px 10px 38px -10px,
     rgb(22 23 24 / 20%) 0px 10px 20px -15px;
     --shadow-widget-builder: 0 0px 20px 5px rgb(0 0 0 / 10%);
 }
diff --git a/app/views/public/api/v1/models/_article.json.jbuilder b/app/views/public/api/v1/models/_article.json.jbuilder
index 0fcdf2ed3..1660f7914 100644
--- a/app/views/public/api/v1/models/_article.json.jbuilder
+++ b/app/views/public/api/v1/models/_article.json.jbuilder
@@ -7,6 +7,7 @@ json.status article.status
 json.position article.position
 json.account_id article.account_id
 json.last_updated_at article.updated_at
+json.slug article.slug
 
 if article.portal.present?
   json.portal do
diff --git a/app/views/public/api/v1/portals/_category-block.html.erb b/app/views/public/api/v1/portals/_category-block.html.erb
index b147f27d2..aa1fbbd22 100644
--- a/app/views/public/api/v1/portals/_category-block.html.erb
+++ b/app/views/public/api/v1/portals/_category-block.html.erb
@@ -1,6 +1,6 @@
 <section class="bg-white lg:container w-full py-6 px-4 flex flex-col h-full">
   <div class="flex justify-between items-center w-full">
-    <h3 class="text-xl text-slate-900 font-semibold subpixel-antialiased leading-relaxed hover:underline">
+    <h3 class="text-xl text-slate-800 font-medium font-semibold leading-relaxed hover:underline">
       <a href="/hc/<%= portal.slug %>/<%= category.locale %>/categories/<%= category.slug %>">
         <%= category.name %>
       </a>
diff --git a/app/views/public/api/v1/portals/_header.html.erb b/app/views/public/api/v1/portals/_header.html.erb
index a532b9430..80880c2b9 100644
--- a/app/views/public/api/v1/portals/_header.html.erb
+++ b/app/views/public/api/v1/portals/_header.html.erb
@@ -1,8 +1,11 @@
 
-<header class="bg-white mx-auto px-4 max-w-5xl w-full">
-  <nav class="px-0 flex" aria-label="Top">
-    <div class="w-full py-8 flex items-center">
-      <a href="/hc/<%= @portal.slug %>/<%= @portal.config['default_locale'] || params[:locale] %>/" class="text-base font-semibold">
+<header class="bg-white w-full shadow-sm sticky top-0 z-50">
+  <nav class=" flex bg-white mx-auto max-w-6xl px-8" aria-label="Top">
+    <div class="w-full py-5 flex items-center">
+      <a href="/hc/<%= @portal.slug %>/<%= @portal.config['default_locale'] || params[:locale] %>/" class="h-10 text-lg flex items-center text-slate-900 font-semibold">
+        <% if @portal.logo.present? %>
+          <img src="<%= url_for(@portal.logo) %>" class="h-10 w-auto mr-2" />
+        <% end %>
         <%= @portal.name %>
       </a>
       <% if @portal.homepage_link %>
diff --git a/app/views/public/api/v1/portals/_hero.html.erb b/app/views/public/api/v1/portals/_hero.html.erb
index 7976f61e6..c4ec18e2b 100644
--- a/app/views/public/api/v1/portals/_hero.html.erb
+++ b/app/views/public/api/v1/portals/_hero.html.erb
@@ -1,10 +1,10 @@
-
-<section class="bg-gradient-to-b from-white to-slate-75 pt-8 pb-16 md:py-16 flex flex-col items-center justify-center">
-  <div class="mx-auto w-full max-w-2xl flex flex-col items-center">
-    <h1 class="text-2xl px-5 md:text-4xl text-slate-900 font-semibold subpixel-antialiased leading-normal text-center">
+<!-- The inline styles are intentional, migrate it to classes after upgrading to tailwind v3 -->
+<section class="pt-8 pb-16 md:py-20 w-full bg-woot-50 shadow-inner" style="background: url(/assets/images/hc/grid.svg) color-mix(in srgb, <%= @portal.color %> 10%, white)">
+  <div class="mx-auto max-w-6xl px-8 flex flex-col items-center sm:items-start">
+    <h1 class="text-2xl md:text-4xl text-slate-900 font-semibold leading-normal">
       <%= portal.header_text %>
     </h1>
-    <p class="text-slate-600 py-2 text-center my-2 max-w-sm leading-normal"><%= I18n.t('public_portal.hero.sub_title') %></p>
+    <p class="text-slate-600 text-center text-lg leading-normal pt-4 pb-4"><%= I18n.t('public_portal.hero.sub_title') %></p>
     <div id="search-wrap"></div>
   </div>
 </section>
diff --git a/app/views/public/api/v1/portals/_uncategorized-block.html.erb b/app/views/public/api/v1/portals/_uncategorized-block.html.erb
index 15cfb6004..47842a9ff 100644
--- a/app/views/public/api/v1/portals/_uncategorized-block.html.erb
+++ b/app/views/public/api/v1/portals/_uncategorized-block.html.erb
@@ -1,6 +1,6 @@
 <section class="bg-white lg:container w-full py-6 px-4 flex flex-col h-full">
   <div class="flex justify-between items-center w-full">
-    <h3 class="text-xl text-slate-900 font-semibold subpixel-antialiased leading-relaxed hover:underline">
+    <h3 class="text-xl text-slate-900 font-semibold leading-relaxed hover:underline">
       <%= category %>
     </h3>
     <span class="text-slate-500">
diff --git a/app/views/public/api/v1/portals/articles/index.html.erb b/app/views/public/api/v1/portals/articles/index.html.erb
index c505d6663..8709b3b00 100644
--- a/app/views/public/api/v1/portals/articles/index.html.erb
+++ b/app/views/public/api/v1/portals/articles/index.html.erb
@@ -12,7 +12,7 @@
 		<span>/</span>
 		</div>
 			<% @articles.each do |article| %>
-				<h1 class="text-4xl font-bold md:tracking-normal leading-snug md:text-5xl text-slate-900">
+				<h1 class="text-4xl font-semibold md:tracking-normal leading-snug md:text-5xl text-slate-900">
 				<%= article.title %></h1>
 				<div class="flex flex-col items-start justify-between w-full md:flex-row md:items-center pt-2">
 					<div class="flex items-center space-x-2">
@@ -28,9 +28,9 @@
 		</div>
 	</div>
 </div>
-<div class="max-w-4xl flex-grow w-full px-6 py-16 mx-auto space-y-12">
-	<article class="space-y-8 ">
-		<div class="text-slate-800 font-sans leading-8 text-lg subpixel-antialiased max-w-3xl blog-content">
+<div class="max-w-4xl flex-grow w-full px-8 py-16 mx-auto space-y-12">
+	<article class="space-y-8">
+		<div class="text-slate-800 font-sans leading-8 text-lg max-w-3xl blog-content">
 		</div>
 	</article>
 </div>
diff --git a/app/views/public/api/v1/portals/articles/show.html.erb b/app/views/public/api/v1/portals/articles/show.html.erb
index 3ad8b5e9a..bea1a20e8 100644
--- a/app/views/public/api/v1/portals/articles/show.html.erb
+++ b/app/views/public/api/v1/portals/articles/show.html.erb
@@ -11,26 +11,25 @@
   <% end %>
 <% end %>
 
-<div class="bg-gradient-to-b from-white to-slate-50">
-  <div class="max-w-5xl px-8 lg:px-4 pt-8 pb-16 mx-auto space-y-4 w-full">
-    <% if @article.category.present? %>
-      <div>
-        <a
-          class="text-slate-700 hover:underline leading-8 text-sm font-medium"
-          href="/hc/<%= @portal.slug %>/<%= @article.category.locale %>"
-        >
-          <%= I18n.t('public_portal.common.home') %>
-        </a>
-        <span class="text-xs text-slate-600 px-1">/</span>
-        <a
-          class="text-slate-700 hover:underline leading-8 text-sm font-medium"
-          href="/hc/<%= @portal.slug %>/<%= @article.category.locale %>/categories/<%= @article.category.slug %>"
-        >
-          <%= @article.category.name %>
-        </a>
-      </div>
-    <% end %>
-    <h1 class="text-3xl font-bold md:tracking-normal leading-snug md:text-5xl text-slate-900">
+<!-- The inline styles are intentional, migrate it to classes after upgrading to tailwind v3 -->
+<div class="bg-woot-50 py-8 shadow-inner" style="background: url(/assets/images/hc/grid.svg) color-mix(in srgb, <%= @portal.color %> 10%, white)">
+  <div class="max-w-6xl px-8 pt-8 pb-16 mx-auto space-y-4 w-full">
+    <div>
+      <a
+        class="text-slate-700 hover:underline leading-8 text-sm font-semibold"
+        href="/hc/<%= @portal.slug %>/<%= @article.category.locale %>"
+      >
+        Home
+      </a>
+      <span class="text-xs text-slate-600 px-1">/</span>
+      <a
+        class="text-slate-700 hover:underline leading-8 text-sm font-semibold"
+        href="/hc/<%= @portal.slug %>/<%= @article.category.locale %>/categories/<%= @article.category.slug %>"
+      >
+        <%= @article.category.name %>
+      </a>
+    </div>
+    <h1 class="text-3xl font-semibold md:tracking-normal leading-snug md:text-4xl text-slate-900">
       <%= @article.title %>
     </h1>
     <div class="flex flex-col items-start justify-between w-full md:flex-row md:items-center pt-2">
@@ -47,9 +46,9 @@
     </div>
   </div>
 </div>
-<div class="max-w-5xl flex-grow w-full px-6 py-8 mx-auto space-y-12">
-  <article class="space-y-8 ">
-    <div class="text-slate-800 leading-8 text-lg subpixel-antialiased max-w-3xl prose break-words">
+<div class="max-w-6xl flex-grow w-full px-8 py-8 mx-auto space-y-12">
+  <article class="space-y-8">
+    <div class="text-slate-800 text-lg max-w-3xl prose break-words">
       <p><%= @parsed_content %></p>
     </div>
   </article>
diff --git a/app/views/public/api/v1/portals/categories/_category-block.html.erb b/app/views/public/api/v1/portals/categories/_category-block.html.erb
index 7c8eced44..171b8ce97 100644
--- a/app/views/public/api/v1/portals/categories/_category-block.html.erb
+++ b/app/views/public/api/v1/portals/categories/_category-block.html.erb
@@ -1,7 +1,7 @@
 
 <section class="bg-white lg:container w-full py-6 px-4 flex flex-col h-full">
   <div class="flex justify-between items-center w-full">
-    <h3 class="text-xl text-slate-900 font-semibold subpixel-antialiased leading-relaxed hover:underline"">
+    <h3 class="text-xl text-slate-900 font-semibold leading-relaxed hover:underline"">
      <a href="/hc/<%= portal.slug %>/<%= category.locale %>/categories/<%= category.slug %>">
       <%= category.name %>
     </a>
diff --git a/app/views/public/api/v1/portals/categories/_hero.html.erb b/app/views/public/api/v1/portals/categories/_hero.html.erb
index f9a78c958..3529c08ac 100644
--- a/app/views/public/api/v1/portals/categories/_hero.html.erb
+++ b/app/views/public/api/v1/portals/categories/_hero.html.erb
@@ -1,7 +1,7 @@
 
 <section class="bg-slate-50 py-16 flex flex-col items-center justify-center">
   <div class="mx-auto max-w-2xl">
-    <h1 class="text-4xl text-slate-900 font-semibold subpixel-antialiased leading-relaxed text-center"><%= portal.header_text %></h1>
+    <h1 class="text-4xl text-slate-900 font-semibold leading-relaxed text-center"><%= portal.header_text %></h1>
     <p class="text-slate-700 py-2 text-center"><%= I18n.t('public_portal.hero.sub_title') %></p>
   </div>
 </section>
diff --git a/app/views/public/api/v1/portals/categories/index.html.erb b/app/views/public/api/v1/portals/categories/index.html.erb
index 3780b14ce..d27f5f1a7 100644
--- a/app/views/public/api/v1/portals/categories/index.html.erb
+++ b/app/views/public/api/v1/portals/categories/index.html.erb
@@ -1,6 +1,6 @@
 <%= render "hero", portal: @portal %>
 
-<div class="max-w-4xl w-full flex-grow mx-auto py-16">
+<div class="max-w-6xl w-full flex-grow mx-auto py-16">
   <div class="grid grid-cols-2 gap-x-32 gap-y-12">
     <% @categories.each do |category| %>
       <%= render "category-block", category: category, portal: @portal %>
diff --git a/app/views/public/api/v1/portals/categories/show.html.erb b/app/views/public/api/v1/portals/categories/show.html.erb
index f8b36e4da..0a30f44d9 100644
--- a/app/views/public/api/v1/portals/categories/show.html.erb
+++ b/app/views/public/api/v1/portals/categories/show.html.erb
@@ -5,17 +5,17 @@
   <% end %>
 <% end %>
 
-<div class="bg-gradient-to-b from-white to-black-50 pt-8 pb-16">
-  <div class="max-w-5xl px-4 mx-auto space-y-2">
+<div class="bg-woot-50 pt-16 pb-20" style="background: url(/assets/images/hc/grid.svg) color-mix(in srgb, <%= @portal.color %> 10%, white)">
+  <div class="max-w-6xl px-8 mx-auto space-y-2">
     <a
-      class="text-slate-700 text-sm hover:underline leading-8"
+      class="text-slate-700 text-sm hover:underline leading-8 font-semibold"
       href="/hc/<%= @portal.slug %>/<%= @category.locale %>"
     >
       <%= I18n.t('public_portal.common.home') %>
     </a>
     <span class="text-xs text-slate-600 px-1">/</span>
     <div class="flex justify-start items-center w-full">
-      <h1 class="text-3xl font-bold leading-snug md:tracking-normal text-slate-900">
+      <h1 class="text-3xl font-semibold leading-snug md:tracking-normal text-slate-900">
         <%= @category.name %>
       </h1>
       <div class="text-slate-500 px-8 mt-2">
@@ -25,7 +25,7 @@
   </div>
 </div>
 
-<section class="bg-white max-w-5xl w-full mx-auto py-6 px-4 flex flex-col items-center justify-center flex-grow">
+<section class="bg-white max-w-6xl w-full mx-auto py-6 px-8 flex flex-col items-center justify-center flex-grow">
   <div class="py-4 w-full mt-2 flex-grow">
     <% if @category.articles.published.size == 0 %>
     <div class="h-full flex items-center justify-center bg-slate-50 rounded-xl py-6">
@@ -38,7 +38,7 @@
         href="/hc/<%= @portal.slug %>/articles/<%= article.slug %>"
       >
         <div>
-          <p class="font-medium mb-2 hover:underline"><%= article.title %></p>
+          <p class="mb-2 hover:underline font-semibold"><%= article.title %></p>
           <p class="text-sm">
             <%= I18n.t('public_portal.common.last_updated_on', last_updated_on: article.updated_at.strftime("%b %d, %Y")) %>
           </p>
diff --git a/app/views/public/api/v1/portals/show.html.erb b/app/views/public/api/v1/portals/show.html.erb
index 9c151333d..339610045 100644
--- a/app/views/public/api/v1/portals/show.html.erb
+++ b/app/views/public/api/v1/portals/show.html.erb
@@ -1,5 +1,5 @@
 <%= render "public/api/v1/portals/hero", portal: @portal %>
-<div class="max-w-5xl w-full flex-grow mx-auto py-8 px-4">
+<div class="max-w-6xl w-full flex-grow mx-auto py-8 px-4">
   <div class="grid grid-cols-1 lg:grid-cols-2 gap-x-32 gap-y-0 lg:gap-y-12">
     <% @portal.categories.where(locale: @locale).joins(:articles).where(articles:{ status: :published }).order(position: :asc).group('categories.id').each do |category| %>
       <%= render "public/api/v1/portals/category-block", category: category, portal: @portal %>
diff --git a/public/assets/images/hc/grid.svg b/public/assets/images/hc/grid.svg
new file mode 100644
index 000000000..3fcabbb6e
--- /dev/null
+++ b/public/assets/images/hc/grid.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="#0f172a"
+  stroke-opacity="0.04">
+  <path d="M0 .5H31.5V32" />
+</svg>