diff --git a/src/lib/components/checkout.svelte b/src/lib/components/checkout.svelte
index fa9f140..86251e7 100644
--- a/src/lib/components/checkout.svelte
+++ b/src/lib/components/checkout.svelte
@@ -36,6 +36,7 @@
             });
             const data = await response.json();
             shippingOptions = data.shipping_options;
+            console.log(shippingOptions);
             
             // If there's only one option, select it automatically
             if (shippingOptions.length === 1) {
@@ -66,9 +67,15 @@
     }
 
     function calculateTotal(items: any[]) {
-        return items.reduce((sum, item) => 
+        const itemsTotal = items.reduce((sum, item) => 
             sum + (item.unit_price * item.quantity), 0
-        ).toFixed(2);
+        );
+        
+        const shippingCost = selectedShippingOption 
+            ? shippingOptions.find(opt => opt.id === selectedShippingOption)?.amount || 0
+            : 0;
+            
+        return (itemsTotal + shippingCost).toFixed(2);
     }
 
     function getCurrencySymbol(currency_code: string) {
@@ -135,13 +142,8 @@
                                     />
                                     <div class="flex-1">
                                         <p class="text-sm font-medium">{option.name}</p>
-                                        {#if option.data}
-                                            <p class="text-xs text-base-content/70">{option.data.id}</p>
-                                        {/if}
+                                            <p class="text-xs text-base-content/70">{option.amount} {currencySymbol}</p>
                                     </div>
-                                    <!-- {#if option.insufficient_inventory}
-                                        <span class="badge badge-warning badge-sm">Limited Stock</span>
-                                    {/if} -->
                                 </label>
                             {/each}
                         </div>