diff --git a/app/src/components/MerchesContent.tsx b/app/src/components/MerchesContent.tsx
index c836d34..a1ab52f 100644
--- a/app/src/components/MerchesContent.tsx
+++ b/app/src/components/MerchesContent.tsx
@@ -173,9 +173,20 @@ export default function MerchesContent() {
           </div>
 
           {items.length === 0 ? (
-            <div className="flex flex-col items-center justify-center py-24 text-gray-500 gap-2">
+            <div className="flex flex-col items-center justify-center py-24 text-center text-gray-500 gap-2">
+              <div className="mb-2 flex h-14 w-14 items-center justify-center rounded-full border border-[#2E2E2E] bg-[#111111]">
+                <ShoppingBag className="h-6 w-6 text-[#A3A3A3]" />
+              </div>
               <p className="text-lg font-semibold">No merch yet</p>
               <p className="text-sm">Add your first merch drop to get started.</p>
+              {!featureFlags.useMockMerches && (
+                <button
+                  onClick={() => setShowCreate(true)}
+                  className="mt-4 rounded-full bg-[#D2045B] px-6 py-2 text-sm font-semibold text-white shadow-[0_10px_30px_rgba(210,4,91,0.35)] transition-colors hover:bg-[#B8043F]"
+                >
+                  New Merch
+                </button>
+              )}
             </div>
           ) : (
             <div className="grid gap-6 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">