diff --git a/admin-spa/src/components/nav/SubmenuBar.tsx b/admin-spa/src/components/nav/SubmenuBar.tsx
index 2518272..f09b013 100644
--- a/admin-spa/src/components/nav/SubmenuBar.tsx
+++ b/admin-spa/src/components/nav/SubmenuBar.tsx
@@ -30,6 +30,11 @@ export default function SubmenuBar({ items = [], fullscreen = false, headerVisib
             // Only ONE submenu item should be active at a time
             const isActive = it.path === pathname;
             
+            // Debug logging for Dashboard Overview issue
+            if (it.label === 'Overview' && pathname.includes('dashboard')) {
+              console.log('Overview check:', { label: it.label, path: it.path, pathname, isActive });
+            }
+            
             const cls = [
               'ui-ctrl inline-flex items-center gap-2 rounded-md px-2.5 py-1.5 border text-sm whitespace-nowrap',
               'focus:outline-none focus:ring-0 focus:shadow-none',
diff --git a/customer-spa/src/App.tsx b/customer-spa/src/App.tsx
index 6927d6c..bff2b40 100644
--- a/customer-spa/src/App.tsx
+++ b/customer-spa/src/App.tsx
@@ -14,6 +14,7 @@ import Cart from './pages/Cart';
 import Checkout from './pages/Checkout';
 import ThankYou from './pages/ThankYou';
 import Account from './pages/Account';
+import Wishlist from './pages/Wishlist';
 
 // Create QueryClient instance
 const queryClient = new QueryClient({
@@ -64,6 +65,9 @@ function App() {
               <Route path="/checkout" element={<Checkout />} />
               <Route path="/order-received/:orderId" element={<ThankYou />} />
               
+              {/* Wishlist - Public route accessible to guests */}
+              <Route path="/wishlist" element={<Wishlist />} />
+              
               {/* My Account */}
               <Route path="/my-account/*" element={<Account />} />
               
diff --git a/customer-spa/src/hooks/useWishlist.ts b/customer-spa/src/hooks/useWishlist.ts
index 6a3e524..c5db5bc 100644
--- a/customer-spa/src/hooks/useWishlist.ts
+++ b/customer-spa/src/hooks/useWishlist.ts
@@ -146,6 +146,7 @@ export function useWishlist() {
     isEnabled,
     isLoggedIn,
     count: items.length,
+    productIds,
     addToWishlist,
     removeFromWishlist,
     toggleWishlist,
diff --git a/customer-spa/src/layouts/BaseLayout.tsx b/customer-spa/src/layouts/BaseLayout.tsx
index 8c11669..4263af8 100644
--- a/customer-spa/src/layouts/BaseLayout.tsx
+++ b/customer-spa/src/layouts/BaseLayout.tsx
@@ -136,7 +136,7 @@ function ClassicLayout({ children }: BaseLayoutProps) {
               
               {/* Wishlist */}
               {headerSettings.elements.wishlist && isEnabled('wishlist') && (wishlistSettings.show_in_header ?? true) && (
-                <Link to="/my-account/wishlist" className="flex items-center gap-2 text-sm font-medium text-gray-700 hover:text-gray-900 transition-colors no-underline">
+                <Link to="/wishlist" className="flex items-center gap-2 text-sm font-medium text-gray-700 hover:text-gray-900 transition-colors no-underline">
                   <Heart className="h-5 w-5" />
                   <span className="hidden lg:block">Wishlist</span>
                 </Link>
@@ -429,7 +429,7 @@ function ModernLayout({ children }: BaseLayoutProps) {
                   )
                 )}
                 {headerSettings.elements.wishlist && isEnabled('wishlist') && (wishlistSettings.show_in_header ?? true) && (
-                  <Link to="/my-account/wishlist" className="flex items-center gap-1 text-sm font-medium text-gray-700 hover:text-gray-900 transition-colors no-underline">
+                  <Link to="/wishlist" className="flex items-center gap-1 text-sm font-medium text-gray-700 hover:text-gray-900 transition-colors no-underline">
                     <Heart className="h-4 w-4" /> Wishlist
                   </Link>
                 )}
@@ -562,7 +562,7 @@ function BoutiqueLayout({ children }: BaseLayoutProps) {
                     </a>
                   ))}
                   {headerSettings.elements.wishlist && isEnabled('wishlist') && (wishlistSettings.show_in_header ?? true) && (
-                    <Link to="/my-account/wishlist" className="flex items-center gap-1 text-sm uppercase tracking-wider text-gray-700 hover:text-gray-900 transition-colors no-underline">
+                    <Link to="/wishlist" className="flex items-center gap-1 text-sm uppercase tracking-wider text-gray-700 hover:text-gray-900 transition-colors no-underline">
                       <Heart className="h-4 w-4" /> Wishlist
                     </Link>
                   )}
diff --git a/customer-spa/src/pages/Wishlist.tsx b/customer-spa/src/pages/Wishlist.tsx
new file mode 100644
index 0000000..04adc04
--- /dev/null
+++ b/customer-spa/src/pages/Wishlist.tsx
@@ -0,0 +1,168 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Trash2, ShoppingCart, Heart } from 'lucide-react';
+import { useWishlist } from '@/hooks/useWishlist';
+import { useCartStore } from '@/lib/cart/store';
+import { Button } from '@/components/ui/button';
+import { toast } from 'sonner';
+
+/**
+ * Public Wishlist Page - Accessible to both guests and logged-in users
+ * Guests: Shows items from localStorage
+ * Logged-in: Shows items from database via API
+ */
+export default function Wishlist() {
+  const navigate = useNavigate();
+  const { items, isLoading, isLoggedIn, removeFromWishlist, productIds } = useWishlist();
+  const { addItem } = useCartStore();
+
+  const handleRemove = async (productId: number) => {
+    await removeFromWishlist(productId);
+  };
+
+  const handleAddToCart = (productId: number, productName: string) => {
+    // For guests with localStorage wishlist, we only have IDs
+    // Navigate to product page for now
+    navigate(`/product/${productId}`);
+  };
+
+  if (isLoading) {
+    return (
+      <div className="container mx-auto px-4 py-8">
+        <div className="text-center">
+          <p className="text-gray-600">Loading wishlist...</p>
+        </div>
+      </div>
+    );
+  }
+
+  // Guest mode: only have product IDs from localStorage
+  const guestWishlistIds = !isLoggedIn ? Array.from(productIds) : [];
+  const hasGuestItems = guestWishlistIds.length > 0;
+  const hasLoggedInItems = items.length > 0;
+
+  if (!hasGuestItems && !hasLoggedInItems) {
+    return (
+      <div className="container mx-auto px-4 py-8">
+        <div className="max-w-4xl mx-auto">
+          <h1 className="text-3xl font-bold mb-6">My Wishlist</h1>
+          
+          <div className="text-center py-12 bg-gray-50 rounded-lg">
+            <Heart className="w-16 h-16 mx-auto mb-4 text-gray-400" />
+            <h2 className="text-xl font-semibold mb-2">Your wishlist is empty</h2>
+            <p className="text-gray-600 mb-6">
+              Start adding products you love to your wishlist
+            </p>
+            <Button onClick={() => navigate('/shop')}>
+              Browse Products
+            </Button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="container mx-auto px-4 py-8">
+      <div className="max-w-4xl mx-auto">
+        <div className="flex items-center justify-between mb-6">
+          <h1 className="text-3xl font-bold">My Wishlist</h1>
+          <p className="text-gray-600">
+            {isLoggedIn ? `${items.length} items` : `${guestWishlistIds.length} items`}
+          </p>
+        </div>
+
+        {/* Guest Mode: Show IDs only with limited functionality */}
+        {!isLoggedIn && hasGuestItems && (
+          <div className="mb-6 p-4 bg-blue-50 border border-blue-200 rounded-lg">
+            <p className="text-sm text-blue-800">
+              <strong>Guest Wishlist:</strong> You have {guestWishlistIds.length} items saved locally. 
+              <a href="/wp-login.php" className="underline ml-1">Login</a> to see full details and sync your wishlist.
+            </p>
+          </div>
+        )}
+
+        {/* Guest Wishlist Items (localStorage only - show IDs) */}
+        {!isLoggedIn && hasGuestItems && (
+          <div className="space-y-4">
+            {guestWishlistIds.map((productId: number) => (
+              <div key={`guest-${productId}`} className="bg-white border rounded-lg p-4 flex items-center justify-between">
+                <div className="flex items-center gap-4">
+                  <div className="w-20 h-20 bg-gray-200 rounded flex items-center justify-center">
+                    <Heart className="w-8 h-8 text-gray-400" />
+                  </div>
+                  <div>
+                    <h3 className="font-semibold">Product #{productId}</h3>
+                    <p className="text-sm text-gray-600">Login to see details</p>
+                  </div>
+                </div>
+                <div className="flex items-center gap-2">
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => navigate(`/product/${productId.toString()}`)}
+                  >
+                    View Product
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => handleRemove(productId)}
+                  >
+                    <Trash2 className="w-4 h-4" />
+                  </Button>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+
+        {/* Logged-in Wishlist Items (full details from API) */}
+        {isLoggedIn && hasLoggedInItems && (
+          <div className="space-y-4">
+            {items.map((item) => (
+              <div key={item.product_id} className="bg-white border rounded-lg p-4 flex items-center justify-between">
+                <div className="flex items-center gap-4">
+                  {item.image ? (
+                    <img
+                      src={item.image}
+                      alt={item.name}
+                      className="w-20 h-20 object-cover rounded"
+                    />
+                  ) : (
+                    <div className="w-20 h-20 bg-gray-200 rounded flex items-center justify-center">
+                      <Heart className="w-8 h-8 text-gray-400" />
+                    </div>
+                  )}
+                  <div>
+                    <h3 className="font-semibold">{item.name}</h3>
+                    <p className="text-sm text-gray-600">{item.price}</p>
+                    {item.stock_status === 'outofstock' && (
+                      <p className="text-sm text-red-600">Out of stock</p>
+                    )}
+                  </div>
+                </div>
+                <div className="flex items-center gap-2">
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => navigate(`/product/${item.slug}`)}
+                  >
+                    View
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => handleRemove(item.product_id)}
+                  >
+                    <Trash2 className="w-4 h-4" />
+                  </Button>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}