diff --git a/static/components/shopping-cart-list/shopping-cart-list.html b/static/components/shopping-cart-list/shopping-cart-list.html
index 7cabd7f..b326603 100644
--- a/static/components/shopping-cart-list/shopping-cart-list.html
+++ b/static/components/shopping-cart-list/shopping-cart-list.html
@@ -25,15 +25,57 @@
       <q-separator />
 
       <q-card-section horizontal>
-        <q-card-section>
+        <!-- <q-card-section >
+          xxx
         </q-card-section>
 
-        <q-separator vertical />
+        <q-separator vertical /> -->
 
-        <q-card-section class="col-10">
-          <div v-for="product in cart.products">
-            {{product.name}}
-          </div>
+        <q-card-section class="col-12 q-ml-xl">
+          <q-list class="q-mt-md">
+            <q-item v-for="product in cart.products" :key="product.id">
+
+              <q-item-section avatar>
+                <q-avatar>
+                  <img v-if="product.images[0] || product.image" :src="product.images[0] || product.image" />
+                  <img v-else src="/nostrmarket/static/images/placeholder.png" />
+                </q-avatar>
+              </q-item-section>
+              <q-item-section class="q-mt-sm">
+                <q-item-label>{{ product.name}}</q-item-label>
+                <q-item-label>
+                  <div class="text-caption text-grey ellipsis-2-lines">
+                    <p>{{ product.description }}</p>
+                  </div>
+                </q-item-label>
+              </q-item-section>
+              <q-item-section class="q-mt-sm">
+                <q-item-label><strong>{{ formatCurrency(product.price, product.currency)}}</strong></q-item-label>
+                <q-item-label></q-item-label>
+              </q-item-section>
+              <!-- @change="addQty(p.id, p.quantity)" -->
+              <q-item-section class="q-mt-sm">
+                <q-input v-model.number="product.orderedQuantity" type="number" rounded outlined
+                  :max="products.quantity"></q-input>
+              </q-item-section>
+              <q-item-section>
+                <!-- @click="add(p.id)"  -->
+                <q-item-label class="q-pl-md"><q-btn color="green" size="xs" icon="add" /></q-item-label>
+              </q-item-section>
+              <q-item-section>
+                <q-item-label><strong>{{ formatCurrency(product.price * product.orderedQuantity, product.currency)}}
+                  </strong></q-item-label>
+              </q-item-section>
+              <q-item-section side>
+                <div class="q-pr-xl">
+                  <q-btn class="gt-xs" size="12px" flat dense round icon="delete"
+                    @click="removeProduct(product.stall_id, product.id)" />
+                </div>
+              </q-item-section>
+
+            </q-item>
+
+          </q-list>
         </q-card-section>
       </q-card-section>
       <q-separator />
diff --git a/static/components/shopping-cart-list/shopping-cart-list.js b/static/components/shopping-cart-list/shopping-cart-list.js
index 369f6bb..b9024bc 100644
--- a/static/components/shopping-cart-list/shopping-cart-list.js
+++ b/static/components/shopping-cart-list/shopping-cart-list.js
@@ -11,7 +11,12 @@ async function shoppingCartList(path) {
     },
     computed: {},
     methods: {
-
+      formatCurrency: function(value, unit){
+        return formatCurrency(value, unit)
+      },
+      removeProduct: function (stallId, productId) {
+        console.log('### stallId, productId', stallId, productId)
+      }
     },
     created() { }
   })
diff --git a/static/js/utils.js b/static/js/utils.js
index 7cd1392..a28c455 100644
--- a/static/js/utils.js
+++ b/static/js/utils.js
@@ -136,4 +136,11 @@ function isValidKey(key, prefix = 'n') {
 
 function isValidKeyHex(key) {
   return key?.toLowerCase()?.match(/^[0-9a-f]{64}$/)
+}
+
+function formatCurrency(value, currency) {
+  return new Intl.NumberFormat(window.LOCALE, {
+    style: 'currency',
+    currency: currency
+  }).format(value)
 }
\ No newline at end of file