diff --git a/app/templates/shop/products.html b/app/templates/shop/products.html
index 43f3a6cb..7c4e2ddf 100644
--- a/app/templates/shop/products.html
+++ b/app/templates/shop/products.html
@@ -84,13 +84,19 @@
                             <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-2 line-clamp-2" x-text="product.marketplace_product?.title"></h3>
                         </a>
                         <p class="text-sm text-gray-600 dark:text-gray-400 mb-3 line-clamp-2" x-text="product.marketplace_product?.description"></p>
-                        <div class="flex items-center justify-between">
-                            <div>
-                                <span class="text-2xl font-bold text-primary" x-text="`${product.currency} ${product.price}`"></span>
-                                <span x-show="product.sale_price" class="text-sm text-gray-500 line-through ml-2" x-text="`${product.currency} ${product.sale_price}`"></span>
+                        <div class="flex items-center justify-between gap-2">
+                            <div class="min-w-0">
+                                <span class="text-xl sm:text-2xl font-bold text-primary" x-text="formatPrice(product.price)"></span>
+                                <span x-show="product.sale_price" class="text-sm text-gray-500 line-through ml-2" x-text="formatPrice(product.sale_price)"></span>
                             </div>
-                            <button @click.prevent="addToCart(product)" class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary-dark transition-colors">
-                                Add to Cart
+                            <button @click.prevent="addToCart(product)"
+                                    class="flex-shrink-0 p-2 sm:px-4 sm:py-2 bg-primary text-white rounded-lg hover:bg-primary-dark transition-colors flex items-center justify-center gap-2"
+                                    style="background-color: var(--color-primary)"
+                                    :title="'Add to Cart'">
+                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
+                                </svg>
+                                <span class="hidden sm:inline">Add to Cart</span>
                             </button>
                         </div>
                     </div>
@@ -201,6 +207,14 @@ document.addEventListener('alpine:init', () => {
             this.loadProducts();
         },
 
+        formatPrice(amount) {
+            if (!amount && amount !== 0) return '';
+            return new Intl.NumberFormat('de-DE', {
+                style: 'currency',
+                currency: 'EUR'
+            }).format(amount);
+        },
+
         async addToCart(product) {
             console.log('[SHOP] Adding to cart:', product);