diff --git a/app/views/assets/_display_image.html.erb b/app/views/assets/_display_image.html.erb
index bc0dd3196..840a85684 100644
--- a/app/views/assets/_display_image.html.erb
+++ b/app/views/assets/_display_image.html.erb
@@ -9,6 +9,7 @@
 <% display_open_pdf_link ||= false %>
 <% idx ||= 0 %>
 <% item_type ||= "PrimaryAsset" %>
+<% extra_image_classes ||= "" %>
 
 <% width ||= "32" %>
 <% height ||= width %>
@@ -48,20 +49,20 @@
   sizes = {
     hero: {
       wrapper: "mb-8",
-      image:   "w-full rounded-lg shadow-sm border border-gray-200",
+      image:   "hero-size w-full rounded-lg shadow-sm border border-gray-200 #{extra_image_classes}",
       preview: [1200, 1200]
     },
 
     gallery: {
       wrapper: "flex grow",
-      image:   "#{width_class} #{height_class} object-cover rounded border border-gray-300
-                shadow-sm hover:opacity-90 transition-opacity",
+      image:   "gallery-size #{width_class} #{height_class} object-cover rounded border border-gray-300
+                shadow-sm hover:opacity-90 transition-opacity #{extra_image_classes}",
       preview: [300, 300]
     },
 
     index: {
-      wrapper: "#{width_class} #{height_class} shrink-0 overflow-hidden rounded border border-gray-300",
-      image:   "w-full h-full object-cover"
+      wrapper: "index-size #{width_class} #{height_class} shrink-0 overflow-hidden rounded border border-gray-300",
+      image:   "w-full h-full object-cover #{extra_image_classes}"
     }
   }.fetch(variant)
 
diff --git a/app/views/shared/_share_portal_navbar.html.erb b/app/views/shared/_share_portal_navbar.html.erb
index f26f8183d..0fc7b28ca 100644
--- a/app/views/shared/_share_portal_navbar.html.erb
+++ b/app/views/shared/_share_portal_navbar.html.erb
@@ -98,12 +98,12 @@
     <!-- Row 2: Focus Area Navigation -->
     <div class="nav-row">
       <div class="hidden lg:flex items-center justify-center py-3 space-x-6">
-        <%= link_to "Home", share_portal_stories_path, class: "font-telefon text-gray-800 hover:bg-gray-100 px-3 py-1 rounded text-sm font-medium transition-all" %>
+        <%= link_to "Home", share_portal_stories_path, class: "font-telefon text-[#5B2C8A] hover:bg-gray-100 px-3 py-1 rounded text-sm font-medium transition-all" %>
         <%= link_to "Domestic Violence", share_portal_stories_path(focus: "domestic_violence"), class: "font-telefon text-red-700 hover:bg-gray-100 px-3 py-1 rounded text-sm font-medium transition-all" %>
-        <%= link_to "Self-Care & Personal Growth", share_portal_stories_path(focus: "self_care"), class: "font-telefon text-gray-600 hover:bg-gray-100 px-3 py-1 rounded text-sm font-medium transition-all" %>
+        <%= link_to "Self-Care & Personal Growth", share_portal_stories_path(focus: "self_care"), class: "font-telefon text-[#1F6F8B] hover:bg-gray-100 px-3 py-1 rounded text-sm font-medium transition-all" %>
         <%= link_to "Social Justice", share_portal_stories_path(focus: "social_justice"), class: "font-telefon text-green-700 hover:bg-gray-100 px-3 py-1 rounded text-sm font-medium transition-all" %>
-        <%= link_to "Facilitator Spotlights", share_portal_stories_path(focus: "facilitator_spotlights"), class: "font-telefon text-purple-700 hover:bg-gray-100 px-3 py-1 rounded text-sm font-medium transition-all" %>
-        <%= link_to "Additional Focus Areas", "#", class: "font-telefon text-orange-600 hover:bg-gray-100 px-3 py-1 rounded text-sm font-medium transition-all" %>
+        <%= link_to "Facilitator Spotlights", share_portal_stories_path(focus: "facilitator_spotlights"), class: "font-telefon text-[#8B004B] hover:bg-gray-100 px-3 py-1 rounded text-sm font-medium transition-all" %>
+        <%= link_to "Additional Focus Areas", "#", class: "font-telefon text-[#F28C00] hover:bg-gray-100 px-3 py-1 rounded text-sm font-medium transition-all" %>
       </div>
     </div>
 
diff --git a/app/views/stories/share_portal.html.erb b/app/views/stories/share_portal.html.erb
index 3c73bbd45..5cd39b06d 100644
--- a/app/views/stories/share_portal.html.erb
+++ b/app/views/stories/share_portal.html.erb
@@ -32,9 +32,10 @@
     <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
       <div class="relative rounded-lg overflow-hidden shadow-lg" id="hero-carousel">
         <%= link_to story_path(@featured_story), class: "block relative carousel-item active" do %>
-          <div class="aspect-[16/6] bg-gray-200">
+          <div class="h-96 max-h-96 bg-gray-200 overflow-hidden">
             <%= render "assets/display_image",
                        resource: @featured_story,
+                       extra_image_classes: "!w-full h-full object-cover",
                        variant: :hero %>
           </div>
           <!-- Blue Sector Box on Top Left -->