diff --git a/assets/css/theme-semantic.css b/assets/css/theme-semantic.css
index 91de7cd..69f0e1b 100644
--- a/assets/css/theme-semantic.css
+++ b/assets/css/theme-semantic.css
@@ -221,17 +221,19 @@
 }
 
 /* Nav link styling with active state indicator */
-.shop-nav a {
+.shop-nav a,
+.shop-nav span {
   padding: 0.5rem 0;
   border-bottom: 2px solid transparent;
   transition: border-color 0.2s ease, color 0.2s ease;
-
-  &:hover {
-    color: var(--t-text-primary);
-  }
-
-  &[aria-current="page"] {
-    color: var(--t-text-primary);
-    border-bottom-color: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l));
-  }
+}
+
+.shop-nav a:hover {
+  color: var(--t-text-primary);
+}
+
+.shop-nav a[aria-current="page"],
+.shop-nav span[aria-current="page"] {
+  color: var(--t-text-primary);
+  border-bottom-color: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l));
 }
diff --git a/lib/simpleshop_theme_web/components/shop_components.ex b/lib/simpleshop_theme_web/components/shop_components.ex
index d64c791..51cb96c 100644
--- a/lib/simpleshop_theme_web/components/shop_components.ex
+++ b/lib/simpleshop_theme_web/components/shop_components.ex
@@ -281,55 +281,25 @@ defmodule SimpleshopThemeWeb.ShopComponents do
       <% end %>
 
       <div class="shop-logo" style="display: flex; align-items: center; position: relative; z-index: 1;">
-        <%= case @theme_settings.logo_mode do %>
-          <% "text-only" -> %>
-            <span class="shop-logo-text" style="font-family: var(--t-font-heading); font-size: var(--t-text-xl); font-weight: var(--t-heading-weight); color: var(--t-text-primary);">
-              <%= @theme_settings.site_name %>
-            </span>
-
-          <% "logo-text" -> %>
-            <%= if @logo_image do %>
-              <img
-                src={logo_url(@logo_image, @theme_settings)}
-                alt={@theme_settings.site_name}
-                style={"height: #{@theme_settings.logo_size}px; width: auto; margin-right: 0.5rem;"}
-              />
-            <% end %>
-            <span class="shop-logo-text" style="font-family: var(--t-font-heading); font-size: var(--t-text-xl); font-weight: var(--t-heading-weight); color: var(--t-text-primary);">
-              <%= @theme_settings.site_name %>
-            </span>
-
-          <% "logo-only" -> %>
-            <%= if @logo_image do %>
-              <img
-                src={logo_url(@logo_image, @theme_settings)}
-                alt={@theme_settings.site_name}
-                style={"height: #{@theme_settings.logo_size}px; width: auto;"}
-              />
-            <% else %>
-              <span class="shop-logo-text" style="font-family: var(--t-font-heading); font-size: var(--t-text-xl); font-weight: var(--t-heading-weight); color: var(--t-text-primary);">
-                <%= @theme_settings.site_name %>
-              </span>
-            <% end %>
-
-          <% _ -> %>
-            <span class="shop-logo-text" style="font-family: var(--t-font-heading); font-size: var(--t-text-xl); font-weight: var(--t-heading-weight); color: var(--t-text-primary);">
-              <%= @theme_settings.site_name %>
-            </span>
-        <% end %>
+        <.logo_content
+          theme_settings={@theme_settings}
+          logo_image={@logo_image}
+          active_page={@active_page}
+          mode={@mode}
+        />
       </div>
 
       <nav class="shop-nav hidden md:flex" style="gap: 1.5rem; position: relative; z-index: 1;">
         <%= if @mode == :preview do %>
-          <a href="#" phx-click="change_preview_page" phx-value-page="home" aria-current={if @active_page == "home", do: "page"} style="color: var(--t-text-secondary); text-decoration: none; cursor: pointer;">Home</a>
-          <a href="#" phx-click="change_preview_page" phx-value-page="collection" aria-current={if @active_page in ["collection", "pdp"], do: "page"} style="color: var(--t-text-secondary); text-decoration: none; cursor: pointer;">Shop</a>
-          <a href="#" phx-click="change_preview_page" phx-value-page="about" aria-current={if @active_page == "about", do: "page"} style="color: var(--t-text-secondary); text-decoration: none; cursor: pointer;">About</a>
-          <a href="#" phx-click="change_preview_page" phx-value-page="contact" aria-current={if @active_page == "contact", do: "page"} style="color: var(--t-text-secondary); text-decoration: none; cursor: pointer;">Contact</a>
+          <.nav_item label="Home" page="home" active_page={@active_page} mode={:preview} />
+          <.nav_item label="Shop" page="collection" active_page={@active_page} mode={:preview} active_pages={["collection", "pdp"]} />
+          <.nav_item label="About" page="about" active_page={@active_page} mode={:preview} />
+          <.nav_item label="Contact" page="contact" active_page={@active_page} mode={:preview} />
         <% else %>
-          <a href="/" aria-current={if @active_page == "home", do: "page"} style="color: var(--t-text-secondary); text-decoration: none;">Home</a>
-          <a href="/collections/all" aria-current={if @active_page in ["collection", "pdp"], do: "page"} style="color: var(--t-text-secondary); text-decoration: none;">Shop</a>
-          <a href="/about" aria-current={if @active_page == "about", do: "page"} style="color: var(--t-text-secondary); text-decoration: none;">About</a>
-          <a href="/contact" aria-current={if @active_page == "contact", do: "page"} style="color: var(--t-text-secondary); text-decoration: none;">Contact</a>
+          <.nav_item label="Home" href="/" active_page={@active_page} page="home" />
+          <.nav_item label="Shop" href="/collections/all" active_page={@active_page} page="collection" active_pages={["collection", "pdp"]} />
+          <.nav_item label="About" href="/about" active_page={@active_page} page="about" />
+          <.nav_item label="Contact" href="/contact" active_page={@active_page} page="contact" />
         <% end %>
       </nav>
 
@@ -375,6 +345,83 @@ defmodule SimpleshopThemeWeb.ShopComponents do
 
   defp logo_url(logo_image, _), do: "/images/#{logo_image.id}"
 
+  # Logo content that links to home, except when already on home page.
+  # This follows accessibility best practices - current page should not be a link.
+  attr :theme_settings, :map, required: true
+  attr :logo_image, :map, default: nil
+  attr :active_page, :string, default: nil
+  attr :mode, :atom, default: :live
+
+  defp logo_content(assigns) do
+    is_home = assigns.active_page == "home"
+    assigns = assign(assigns, :is_home, is_home)
+
+    ~H"""
+    <%= if @is_home do %>
+      <.logo_inner theme_settings={@theme_settings} logo_image={@logo_image} />
+    <% else %>
+      <%= if @mode == :preview do %>
+        <a
+          href="#"
+          phx-click="change_preview_page"
+          phx-value-page="home"
+          style="display: flex; align-items: center; text-decoration: none;"
+        >
+          <.logo_inner theme_settings={@theme_settings} logo_image={@logo_image} />
+        </a>
+      <% else %>
+        <a href="/" style="display: flex; align-items: center; text-decoration: none;">
+          <.logo_inner theme_settings={@theme_settings} logo_image={@logo_image} />
+        </a>
+      <% end %>
+    <% end %>
+    """
+  end
+
+  attr :theme_settings, :map, required: true
+  attr :logo_image, :map, default: nil
+
+  defp logo_inner(assigns) do
+    ~H"""
+    <%= case @theme_settings.logo_mode do %>
+      <% "text-only" -> %>
+        <span class="shop-logo-text" style="font-family: var(--t-font-heading); font-size: var(--t-text-xl); font-weight: var(--t-heading-weight); color: var(--t-text-primary);">
+          <%= @theme_settings.site_name %>
+        </span>
+
+      <% "logo-text" -> %>
+        <%= if @logo_image do %>
+          <img
+            src={logo_url(@logo_image, @theme_settings)}
+            alt={@theme_settings.site_name}
+            style={"height: #{@theme_settings.logo_size}px; width: auto; margin-right: 0.5rem;"}
+          />
+        <% end %>
+        <span class="shop-logo-text" style="font-family: var(--t-font-heading); font-size: var(--t-text-xl); font-weight: var(--t-heading-weight); color: var(--t-text-primary);">
+          <%= @theme_settings.site_name %>
+        </span>
+
+      <% "logo-only" -> %>
+        <%= if @logo_image do %>
+          <img
+            src={logo_url(@logo_image, @theme_settings)}
+            alt={@theme_settings.site_name}
+            style={"height: #{@theme_settings.logo_size}px; width: auto;"}
+          />
+        <% else %>
+          <span class="shop-logo-text" style="font-family: var(--t-font-heading); font-size: var(--t-text-xl); font-weight: var(--t-heading-weight); color: var(--t-text-primary);">
+            <%= @theme_settings.site_name %>
+          </span>
+        <% end %>
+
+      <% _ -> %>
+        <span class="shop-logo-text" style="font-family: var(--t-font-heading); font-size: var(--t-text-xl); font-weight: var(--t-heading-weight); color: var(--t-text-primary);">
+          <%= @theme_settings.site_name %>
+        </span>
+    <% end %>
+    """
+  end
+
   defp header_background_style(settings, header_image) do
     "position: absolute; top: 0; left: 0; right: 0; bottom: 0; " <>
       "background-image: url('/images/#{header_image.id}'); " <>
@@ -383,6 +430,45 @@ defmodule SimpleshopThemeWeb.ShopComponents do
       "background-repeat: no-repeat; z-index: 0;"
   end
 
+  # Navigation item that renders as a span (not a link) when on the current page.
+  # This follows accessibility best practices - current page should not be a link.
+  attr :label, :string, required: true
+  attr :page, :string, required: true
+  attr :active_page, :string, required: true
+  attr :href, :string, default: nil
+  attr :mode, :atom, default: :live
+  attr :active_pages, :list, default: nil
+
+  defp nav_item(assigns) do
+    # Allow matching multiple pages (e.g., "Shop" is active for both collection and pdp)
+    active_pages = assigns.active_pages || [assigns.page]
+    is_current = assigns.active_page in active_pages
+    assigns = assign(assigns, :is_current, is_current)
+
+    ~H"""
+    <%= if @is_current do %>
+      <span aria-current="page" style="color: var(--t-text-secondary); text-decoration: none;">
+        {@label}
+      </span>
+    <% else %>
+      <%= if @mode == :preview do %>
+        <a
+          href="#"
+          phx-click="change_preview_page"
+          phx-value-page={@page}
+          style="color: var(--t-text-secondary); text-decoration: none; cursor: pointer;"
+        >
+          {@label}
+        </a>
+      <% else %>
+        <a href={@href} style="color: var(--t-text-secondary); text-decoration: none;">
+          {@label}
+        </a>
+      <% end %>
+    <% end %>
+    """
+  end
+
   @doc """
   Renders the cart drawer (floating sidebar).