diff --git a/templates/checkout/_partials/cart-detailed-product-line.tpl b/templates/checkout/_partials/cart-detailed-product-line.tpl
index 810e2cf..2e7861d 100644
--- a/templates/checkout/_partials/cart-detailed-product-line.tpl
+++ b/templates/checkout/_partials/cart-detailed-product-line.tpl
@@ -23,7 +23,7 @@
  * International Registered Trademark & Property of PrestaShop SA
  *}
 
-<div class="flex flex-1 gap-4 items-center">
+<div class="flex max-md:flex-col flex-1 gap-4 items-center">
   <div class="w-40 h-40">
     <img class="object-cover w-full h-full" src="{$product.cover.bySize.cart_default.url}" alt="{$product.name|escape:'quotes'}">
   </div>
@@ -44,7 +44,7 @@
     </div>
     <div class="flex items-center w-max">
         <input
-          class="js-cart-line-product-quantity px-2 py-1"
+          class="js-cart-line-product-quantity px-2 py-1 w-12"
           data-down-url="{$product.down_quantity_url}"
           data-up-url="{$product.up_quantity_url}"
           data-update-url="{$product.update_quantity_url}"
diff --git a/templates/checkout/_partials/cart-summary-product-line.tpl b/templates/checkout/_partials/cart-summary-product-line.tpl
index bea5fa0..258522b 100644
--- a/templates/checkout/_partials/cart-summary-product-line.tpl
+++ b/templates/checkout/_partials/cart-summary-product-line.tpl
@@ -29,12 +29,15 @@
     </a>
   </div>
   <div class="media-body">
-    <span class="product-name">{$product.name}</span>
-    <span class="product-quantity">x{$product.quantity}</span>
-    <span class="product-price float-xs-right">{$product.price}</span>
+    <span class="product-name md:text-lg font-medium">{$product.name}</span>
+    <div class="flex items-center gap-2 max-md:mt-2">
+      <span class="product-price font-semibold md:font-bold">{$product.price}</span>
+      <span>x</span>
+      <span class="product-quantity text-lg font-medium">{$product.quantity}</span>
+    </div>
     {hook h='displayProductPriceBlock' product=$product type="unit_price"}
     {foreach from=$product.attributes key="attribute" item="value"}
-        <div class="product-line-info product-line-info-secondary text-muted">
+        <div class="hidden product-line-info product-line-info-secondary text-muted">
             <span class="label">{$attribute}:</span>
             <span class="value">{$value}</span>
         </div>
diff --git a/templates/checkout/_partials/cart-summary-totals.tpl b/templates/checkout/_partials/cart-summary-totals.tpl
index 020d738..10772d8 100644
--- a/templates/checkout/_partials/cart-summary-totals.tpl
+++ b/templates/checkout/_partials/cart-summary-totals.tpl
@@ -24,24 +24,6 @@
  *}
 <div class="flex flex-col gap-2 mt-2">
 
-  {block name='cart_summary_total'}
-    {if !$configuration.display_prices_tax_incl && $configuration.taxes_enabled}
-      <div class="flex justify-between font-medium">
-        <span class="label">{$cart.totals.total.label}&nbsp;{$cart.labels.tax_short}</span>
-        <span class="value">{$cart.totals.total.value}</span>
-      </div>
-      <div class="flex justify-between font-medium">
-        <span class="label">{$cart.totals.total_including_tax.label}</span>
-        <span class="value">{$cart.totals.total_including_tax.value}</span>
-      </div>
-    {else}
-      <div class="flex justify-between font-medium">
-        <span class="label">{$cart.totals.total.label}&nbsp;{if $configuration.taxes_enabled}{$cart.labels.tax_short}{/if}</span>
-        <span class="value">{$cart.totals.total.value}</span>
-      </div>
-    {/if}
-  {/block}
-
   {block name='cart_summary_tax'}
     {if $cart.subtotals.tax}
       <div class="flex justify-between font-medium">
@@ -51,4 +33,22 @@
     {/if}
   {/block}
 
+  {block name='cart_summary_total'}
+    {if !$configuration.display_prices_tax_incl && $configuration.taxes_enabled}
+      <div class="flex justify-between font-medium">
+        <span class="label">{$cart.totals.total.label}&nbsp;{$cart.labels.tax_short}</span>
+        <span class="value">{$cart.totals.total.value}</span>
+      </div>
+      <div class="flex justify-between font-bold text-lg">
+        <span class="label">{$cart.totals.total_including_tax.label}</span>
+        <span class="value">{$cart.totals.total_including_tax.value}</span>
+      </div>
+    {else}
+      <div class="flex justify-between font-bold text-lg">
+        <span class="label">{$cart.totals.total.label}&nbsp;{if $configuration.taxes_enabled}{$cart.labels.tax_short}{/if}</span>
+        <span class="value">{$cart.totals.total.value}</span>
+      </div>
+    {/if}
+  {/block}
+
 </div>
diff --git a/templates/checkout/_partials/cart-summary.tpl b/templates/checkout/_partials/cart-summary.tpl
index 0977f4b..bdd1f12 100644
--- a/templates/checkout/_partials/cart-summary.tpl
+++ b/templates/checkout/_partials/cart-summary.tpl
@@ -23,29 +23,29 @@
  * International Registered Trademark & Property of PrestaShop SA
  *}
 <section id="js-checkout-summary" class="card js-cart" data-refresh-url="{$urls.pages.cart}?ajax=1&action=refresh">
-  <div class="card-block">
+  <div class="card-block w-full flex flex-col gap-16 th-accordion">
     {block name='hook_checkout_summary_top'}
       {hook h='displayCheckoutSummaryTop'}
     {/block}
 
     {block name='cart_summary_products'}
-      <div class="w-full flex item-center justify-center mb-8 uppercase">
+      <div class="w-full flex item-center justify-center uppercase">
         <span class="font-medium text-lg">Cart Summary</span>
       </div>
-      <div class="cart-summary-products flex items-center gap-2 w-full hidden">
-        <span>{$cart.summary_string}</>
-        <p>
-          <a href="#" data-toggle="collapse" class="flex items-center gap-2" data-target="#cart-summary-product-list">
-            {l s='show details' d='Shop.Theme.Actions'}
-            <i class="ti ti-chevron-down"></i>
-          </a>
-        </p>
+      <div class="cart-summary-products th-accordion-item flex flex-col gap-2 w-full">
+        <div class="w-full flex items-center justify-between ">
+          <span class="font-bold">{$cart.summary_string}</span>
+          <span data-toggle="collapse" class="th-accordion-item-trigger flex items-center font-medium cursor-pointer hover:text-blue-900 stroke-gray-500 hover:stroke-blue-900" >
+            {l s='Show details' d='Shop.Theme.Actions'}
+            <svg xmlns="http://www.w3.org/2000/svg" class="th-accordion-item-trigger-svg stroke-[3px] stroke-inherit icon icon-tabler icon-tabler-chevron-right" width="20" height="20" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 6l6 6l-6 6" /></svg>
+          </span>
+        </div>
 
         {block name='cart_summary_product_list'}
-          <div class="collapse" id="cart-summary-product-list">
-            <ul class="media-list">
+          <div class="th-accordion-item-content p-4 border border-gray-200" id="cart-summary-product-list">
+            <ul class="media-list w-full flex flex-col gap-4 ">
               {foreach from=$cart.products item=product}
-                <li class="media">{include file='checkout/_partials/cart-summary-product-line.tpl' product=$product}</li>
+                <li class="media w-full flex gap-4">{include file='checkout/_partials/cart-summary-product-line.tpl' product=$product}</li>
               {/foreach}
             </ul>
           </div>