diff --git a/_dev/elegance.css b/_dev/elegance.css
index d200eec..ea22670 100644
--- a/_dev/elegance.css
+++ b/_dev/elegance.css
@@ -32,3 +32,6 @@ a:hover .ti, a:hover .icon-tabler {
 ul {
   @apply !list-inside;
 }
+input[type="radio"],input[type="checkbox"] {
+  @apply focus:ring-transparent;
+}
diff --git a/templates/catalog/_partials/product-add-to-cart.tpl b/templates/catalog/_partials/product-add-to-cart.tpl
index 0aede1d..ea88b2a 100644
--- a/templates/catalog/_partials/product-add-to-cart.tpl
+++ b/templates/catalog/_partials/product-add-to-cart.tpl
@@ -77,15 +77,6 @@
         </div>
 
         {hook h='displayCustomProductActions'}
-
-        <div class='customize'>
-          <button
-            class="w-full h-12 border border-blue-950 text-blue-950 text-base font-normal"
-          >
-            CUSTOMIZE
-          </button>
-        </div>
-
         {hook h='displayProductActions' product=$product}
       </div>
     {/block}
diff --git a/templates/checkout/_partials/address-form.tpl b/templates/checkout/_partials/address-form.tpl
index 435d5f4..f09387e 100644
--- a/templates/checkout/_partials/address-form.tpl
+++ b/templates/checkout/_partials/address-form.tpl
@@ -14,16 +14,17 @@
       action="{url entity='order' params=['id_address' => $id_address]}"
       data-id-address="{$id_address}"
       data-refresh-url="{url entity='order' params=['ajax' => 1, 'action' => 'addressForm']}"
+      class="w-full flex"
     >
 {/block}
 
 {block name='form_fields' append}
   <input type="hidden" name="saveAddress" value="{$type}">
   {if $type === "delivery"}
-    <div class="form-group row">
-      <div class="col-md-9 col-md-offset-3">
+    <div class="form-group w-full">
+      <div class="col-md-9 col-md-offset-3 flex items-center gap-2 py-2">
         <input name = "use_same_address" id="use_same_address" type = "checkbox" value = "1" {if $use_same_address} checked {/if}>
-        <label for="use_same_address">{l s='Use this address for invoice too' d='Shop.Theme.Checkout'}</label>
+        <label for="use_same_address" class="font-semibold">{l s='Use this address for invoice too' d='Shop.Theme.Checkout'}</label>
       </div>
     </div>
   {/if}
@@ -31,15 +32,15 @@
 
 {block name='form_buttons'}
   {if !$form_has_continue_button}
-    <button type="submit" class="btn btn-primary float-xs-right">{l s='Save' d='Shop.Theme.Actions'}</button>
-    <a class="js-cancel-address cancel-address float-xs-right" href="{url entity='order' params=['cancelAddress' => {$type}]}">{l s='Cancel' d='Shop.Theme.Actions'}</a>
+    <button type="submit" class="btn btn-primary float-xs-right flex-1 uppercase py-2 font-medium text-center bg-blue-950 text-gray-50 hover:text-gray-50 hover:bg-blue-900">{l s='Save' d='Shop.Theme.Actions'}</button>
+    <a class="js-cancel-address cancel-address float-xs-right flex-1 uppercase py-2 font-medium text-center border border-blue-950 text-blue-950 hover:text-blue-900 hover:border-blue-900" href="{url entity='order' params=['cancelAddress' => {$type}]}">{l s='Cancel' d='Shop.Theme.Actions'}</a>
   {else}
-    <form>
-      <button type="submit" class="continue btn btn-primary float-xs-right" name="confirm-addresses" value="1">
+    <form class="w-full flex">
+      <button type="submit" class="continue btn btn-primary float-xs-right flex-1 uppercase py-2 font-medium text-center bg-blue-950 text-gray-50 hover:text-gray-50 hover:bg-blue-900" name="confirm-addresses" value="1">
           {l s='Continue' d='Shop.Theme.Actions'}
       </button>
       {if $customer.addresses|count > 0}
-        <a class="js-cancel-address cancel-address float-xs-right" href="{url entity='order' params=['cancelAddress' => {$type}]}">{l s='Cancel' d='Shop.Theme.Actions'}</a>
+        <a class="js-cancel-address cancel-address float-xs-right flex-1 uppercase py-2 font-medium text-center border border-blue-950 text-blue-950 hover:text-blue-900 hover:border-blue-900" href="{url entity='order' params=['cancelAddress' => {$type}]}">{l s='Cancel' d='Shop.Theme.Actions'}</a>
       {/if}
     </form>
   {/if}
diff --git a/templates/checkout/_partials/address-selector-block.tpl b/templates/checkout/_partials/address-selector-block.tpl
index d46347e..4a5dd75 100644
--- a/templates/checkout/_partials/address-selector-block.tpl
+++ b/templates/checkout/_partials/address-selector-block.tpl
@@ -24,11 +24,11 @@
  *}
 {block name='address_selector_blocks'}
   {foreach $addresses as $address}
-    <article
-      class="address-item{if $address.id == $selected} selected{/if}"
+    <div
+      class="address-item{if $address.id == $selected} selected{/if} w-full md:w-1/2 flex justify-between pr-4 md:pr-12  mb-2"
       id="{$name|classname}-address-{$address.id}"
     >
-      <header class="h4">
+      <div class="flex gap-2">
         <label class="radio-block">
           <span class="custom-radio">
             <input
@@ -39,34 +39,35 @@
             >
             <span></span>
           </span>
-          <span class="address-alias h4">{$address.alias}</span>
-          <div class="address">{$address.formatted nofilter}</div>
         </label>
-      </header>
-      <hr>
-      <footer class="address-footer">
+        <div class="flex flex-col gap-1">
+          <span class="address-alias font-semibold">{$address.alias}</span>
+          <div class="address">{$address.formatted nofilter}</div>
+        </div>
+      </div>
         {if $interactive}
-          <a
-            class="edit-address text-muted"
-            data-link-action="edit-address"
-            href="{url entity='order' params=['id_address' => $address.id, 'editAddress' => $type, 'token' => $token]}"
-          >
-            <i class="material-icons edit">&#xE254;</i>{l s='Edit' d='Shop.Theme.Actions'}
-          </a>
-          <a
-            class="delete-address text-muted"
-            data-link-action="delete-address"
-            href="{url entity='order' params=['id_address' => $address.id, 'deleteAddress' => true, 'token' => $token]}"
-          >
-            <i class="material-icons delete">&#xE872;</i>{l s='Delete' d='Shop.Theme.Actions'}
-          </a>
+        <div class="flex flex-col justify-center gap-4">
+            <a
+              class="edit-address text-muted"
+              data-link-action="edit-address"
+              href="{url entity='order' params=['id_address' => $address.id, 'editAddress' => $type, 'token' => $token]}"
+            >
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-edit" width="24" height="24" 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="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1" /><path d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z" /><path d="M16 5l3 3" /></svg>
+            </a>
+            <a
+              class="delete-address text-muted"
+              data-link-action="delete-address"
+              href="{url entity='order' params=['id_address' => $address.id, 'deleteAddress' => true, 'token' => $token]}"
+            >
+            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-trash" width="24" height="24" 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="M4 7l16 0" /><path d="M10 11l0 6" /><path d="M14 11l0 6" /><path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12" /><path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3" /></svg>
+            </a>
+          </div>
         {/if}
-      </footer>
-    </article>
+    </div>
   {/foreach}
   {if $interactive}
     <p>
-      <button class="ps-hidden-by-js form-control-submit center-block" type="submit">{l s='Save' d='Shop.Theme.Actions'}</button>
+      <button class="ps-hidden-by-js form-control-submit center-block flex-1 uppercase py-2 font-medium text-center bg-blue-950 text-gray-50 hover:text-gray-50 hover:bg-blue-900" type="submit">{l s='Save' d='Shop.Theme.Actions'}</button>
     </p>
   {/if}
 {/block}
diff --git a/templates/checkout/_partials/cart-summary-subtotals.tpl b/templates/checkout/_partials/cart-summary-subtotals.tpl
index a4a5938..b077457 100644
--- a/templates/checkout/_partials/cart-summary-subtotals.tpl
+++ b/templates/checkout/_partials/cart-summary-subtotals.tpl
@@ -23,7 +23,7 @@
  * International Registered Trademark & Property of PrestaShop SA
  *}
 
-<div class="flex">
+<div class="w-full flex flex-col gap-2">
   {foreach from=$cart.subtotals item="subtotal"}
     {if $subtotal && $subtotal.value|count_characters > 0 && $subtotal.type !== 'tax'}
       <div class="flex justify-between font-medium" id="cart-subtotal-{$subtotal.type}">
diff --git a/templates/checkout/_partials/cart-summary-totals.tpl b/templates/checkout/_partials/cart-summary-totals.tpl
index 05c79ea..020d738 100644
--- a/templates/checkout/_partials/cart-summary-totals.tpl
+++ b/templates/checkout/_partials/cart-summary-totals.tpl
@@ -22,7 +22,7 @@
  * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
  * International Registered Trademark & Property of PrestaShop SA
  *}
-<div class="flex flex-col my-8">
+<div class="flex flex-col gap-2 mt-2">
 
   {block name='cart_summary_total'}
     {if !$configuration.display_prices_tax_incl && $configuration.taxes_enabled}
diff --git a/templates/checkout/_partials/cart-summary.tpl b/templates/checkout/_partials/cart-summary.tpl
index fff6baf..77cfb18 100644
--- a/templates/checkout/_partials/cart-summary.tpl
+++ b/templates/checkout/_partials/cart-summary.tpl
@@ -31,8 +31,8 @@
     {block name='cart_summary_products'}
       <div class="cart-summary-products flex items-center">
 
-        <p>{$cart.summary_string}</p>
 
+        <p>{$cart.summary_string}</p>
         <p>
           <a href="#" data-toggle="collapse" data-target="#cart-summary-product-list">
             {l s='show details' d='Shop.Theme.Actions'}
diff --git a/templates/checkout/_partials/order-confirmation-table.tpl b/templates/checkout/_partials/order-confirmation-table.tpl
index 8708cea..21ffa54 100644
--- a/templates/checkout/_partials/order-confirmation-table.tpl
+++ b/templates/checkout/_partials/order-confirmation-table.tpl
@@ -22,115 +22,124 @@
  * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
  * International Registered Trademark & Property of PrestaShop SA
  *}
-<div id="order-items" class="col-md-12">
-  <div class="row">
+<div id="order-items" class="w-full flex flex-col gap-6 p-8 border border-gray-600">
+  <div class="flex w-full gap-4">
     {block name='order_items_table_head'}
-      <h3 class="card-title h3 col-md-6 col-12">{l s='Order items' d='Shop.Theme.Checkout'}</h3>
-      <h3 class="card-title h3 col-md-2 text-md-center _desktop-title">{l s='Unit price' d='Shop.Theme.Checkout'}</h3>
-      <h3 class="card-title h3 col-md-2 text-md-center _desktop-title">{l s='Quantity' d='Shop.Theme.Checkout'}</h3>
-      <h3 class="card-title h3 col-md-2 text-md-center _desktop-title">{l s='Total products' d='Shop.Theme.Checkout'}</h3>
+      <h3 class="card-title font-semibold w-1/3 md:w-3/6 text-lg uppercase col-12">{l s='Order items' d='Shop.Theme.Checkout'}</h3>
+      <h3 class="card-title max-md:hidden font-semibold w-1/6 text-lg uppercase _desktop-title">{l s='Unit price' d='Shop.Theme.Checkout'}</h3>
+      <h3 class="card-title font-semibold w-1/3 md:w-1/6 text-center text-lg uppercase _desktop-title">{l s='Quantity' d='Shop.Theme.Checkout'}</h3>
+      <h3 class="card-title font-semibold w-1/3 md:w-1/6 text-right text-lg uppercase _desktop-title">{l s='Total price' d='Shop.Theme.Checkout'}</h3>
     {/block}
   </div>
 
-  <div class="order-confirmation-table">
-
+  <div class="order-confirmation-table flex flex-col gap-8 w-full">
     {block name='order_confirmation_table'}
       {foreach from=$products item=product}
-        <div class="order-line row">
-          <div class="col-sm-2 col-xs-3">
-            <span class="image">
-              <img src="{$product.cover.medium.url}" />
+        <div class="flex w-full gap-4">
+          <div class="flex w-1/2 gap-8">
+            <span class="image max-md:hidden">
+              <img class="w-[160px]" src="{$product.cover.medium.url}" />
             </span>
-          </div>
-          <div class="col-sm-4 col-xs-9 details">
-            {if $add_product_link}<a href="{$product.url}" target="_blank">{/if}
-              <span>{$product.name}</span>
-            {if $add_product_link}</a>{/if}
-            {if is_array($product.customizations) && $product.customizations|count}
-              {foreach from=$product.customizations item="customization"}
-                <div class="customizations">
-                  <a href="#" data-toggle="modal" data-target="#product-customizations-modal-{$customization.id_customization}">{l s='Product customization' d='Shop.Theme.Catalog'}</a>
-                </div>
-                <div class="modal fade customization-modal" id="product-customizations-modal-{$customization.id_customization}" tabindex="-1" role="dialog" aria-hidden="true">
-                  <div class="modal-dialog" role="document">
-                    <div class="modal-content">
-                      <div class="modal-header">
-                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                          <span aria-hidden="true">&times;</span>
-                        </button>
-                        <h4 class="modal-title">{l s='Product customization' d='Shop.Theme.Catalog'}</h4>
-                      </div>
-                      <div class="modal-body">
-                        {foreach from=$customization.fields item="field"}
-                          <div class="product-customization-line row">
-                            <div class="col-sm-3 col-xs-4 label">
-                              {$field.label}
-                            </div>
-                            <div class="col-sm-9 col-xs-8 value">
-                              {if $field.type == 'text'}
-                                {if (int)$field.id_module}
-                                  {$field.text nofilter}
-                                {else}
-                                  {$field.text}
-                                {/if}
-                              {elseif $field.type == 'image'}
-                                <img src="{$field.image.small.url}">
-                              {/if}
-                            </div>
+              <div class="flex-1 md:pr-48 pt-4">
+                {if $add_product_link}<a href="{$product.url}" target="_blank">{/if}
+                  <span class="font-semibold text-lg">{$product.name}</span>
+                {if $add_product_link}</a>{/if}
+                {if is_array($product.customizations) && $product.customizations|count}
+                  {foreach from=$product.customizations item="customization"}
+                    <div class="customizations">
+                      <a href="#" data-toggle="modal" data-target="#product-customizations-modal-{$customization.id_customization}">{l s='Product customization' d='Shop.Theme.Catalog'}</a>
+                    </div>
+                    <div class="modal fade customization-modal" id="product-customizations-modal-{$customization.id_customization}" tabindex="-1" role="dialog" aria-hidden="true">
+                      <div class="modal-dialog" role="document">
+                        <div class="modal-content">
+                          <div class="modal-header">
+                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                              <span aria-hidden="true">&times;</span>
+                            </button>
+                            <h4 class="modal-title">{l s='Product customization' d='Shop.Theme.Catalog'}</h4>
                           </div>
-                        {/foreach}
+                          <div class="modal-body">
+                            {foreach from=$customization.fields item="field"}
+                              <div class="product-customization-line row">
+                                <div class="col-sm-3 col-xs-4 label">
+                                  {$field.label}
+                                </div>
+                                <div class="col-sm-9 col-xs-8 value">
+                                  {if $field.type == 'text'}
+                                    {if (int)$field.id_module}
+                                      {$field.text nofilter}
+                                    {else}
+                                      {$field.text}
+                                    {/if}
+                                  {elseif $field.type == 'image'}
+                                    <img src="{$field.image.small.url}">
+                                  {/if}
+                                </div>
+                              </div>
+                            {/foreach}
+                          </div>
+                        </div>
                       </div>
                     </div>
-                  </div>
-                </div>
-              {/foreach}
-            {/if}
-            {hook h='displayProductPriceBlock' product=$product type="unit_price"}
-          </div>
-          <div class="col-sm-6 col-xs-12 qty">
-            <div class="row">
-              <div class="col-xs-4 text-sm-center text-xs-left">{$product.price}</div>
-              <div class="col-xs-4 text-sm-center">{$product.quantity}</div>
-              <div class="col-xs-4 text-sm-center text-xs-right bold">{$product.total}</div>
-            </div>
+                  {/foreach}
+                {/if}
+                {hook h='displayProductPriceBlock' product=$product type="unit_price"}
+              </div>
           </div>
+            <div class="w-1/3 md:w-1/6 max-md:hidden font-semibold text-lg pt-4">{$product.price}</div>
+            <div class="w-1/3 md:w-1/6 text-center font-semibold text-lg pt-4">{$product.quantity}</div>
+            <div class="w-1/3 md:w-1/6 text-right font-bold text-lg pt-4">{$product.total}</div>
         </div>
       {/foreach}
 
       <hr>
+        <div class="w-full flex flex-col gap-2">
+            <div class="w-full flex gap-2">
+              <div class="flex flex-1 md:pl-4 flex-col gap-2">
+                {foreach $subtotals as $subtotal}
+                  {if $subtotal.type !== 'tax' && $subtotal.label !== null}
+                      <span class="font-semibold w-full">{$subtotal.label}</span>
+                  {/if}
+                {/foreach}
+                {if $subtotals.tax.label !== null}
+                    <span class="font-semibold w-full">{l s='%label%:' sprintf=['%label%' => $subtotals.tax.label] d='Shop.Theme.Global'}</span>
+                {/if}
 
-      <table>
-        {foreach $subtotals as $subtotal}
-          {if $subtotal.type !== 'tax' && $subtotal.label !== null}
-            <tr>
-              <td>{$subtotal.label}</td>
-              <td>{if 'discount' == $subtotal.type}-&nbsp;{/if}{$subtotal.value}</td>
-            </tr>
-          {/if}
-        {/foreach}
-
-        {if !$configuration.display_prices_tax_incl && $configuration.taxes_enabled}
-          <tr>
-            <td><span class="text-uppercase">{$totals.total.label}&nbsp;{$labels.tax_short}</span></td>
-            <td>{$totals.total.value}</td>
-          </tr>
-          <tr class="total-value font-weight-bold">
-            <td><span class="text-uppercase">{$totals.total_including_tax.label}</span></td>
-            <td>{$totals.total_including_tax.value}</td>
-          </tr>
-        {else}
-          <tr class="total-value font-weight-bold">
-            <td><span class="text-uppercase">{$totals.total.label}&nbsp;{if $configuration.taxes_enabled}{$labels.tax_short}{/if}</span></td>
-            <td>{$totals.total.value}</td>
-          </tr>
-        {/if}
-        {if $subtotals.tax.label !== null}
-          <tr class="sub taxes">
-            <td><span class="label">{l s='%label%:' sprintf=['%label%' => $subtotals.tax.label] d='Shop.Theme.Global'}</span>&nbsp;<span class="value">{$subtotals.tax.value}</span></td>
-          </tr>
-        {/if}
-      </table>
+                {if !$configuration.display_prices_tax_incl && $configuration.taxes_enabled}
+                    <span class="font-semibold">{$totals.total.label}&nbsp;{$labels.tax_short}</span>
+                {/if}
+              </div>
+              <div class="flex flex-col items-end md:pr-4 gap-2">
+                {foreach $subtotals as $subtotal}
+                  {if $subtotal.type !== 'tax' && $subtotal.label !== null}
+                      <span>{if 'discount' == $subtotal.type}-&nbsp;{/if}{$subtotal.value}</span>
+                  {/if}
+                {/foreach}
+                {if $subtotals.tax.label !== null}
+                    <span>{$subtotals.tax.value}</span>
+                {/if}
+                {if !$configuration.display_prices_tax_incl && $configuration.taxes_enabled}
+                    <span class="">{$totals.total.value}</span>
+                {/if}
+              </div>
+            </div>
+              <div class="w-full flex">
+                {if !$configuration.display_prices_tax_incl && $configuration.taxes_enabled}
+                  <span class="text-lg font-semibold w-full bg-gray-200 md:pl-4">
+                    {$totals.total_including_tax.label}
+                  </span>
+                {else}
+                  <span class="text-lg font-semibold w-full md:pl-4">{$totals.total.label}&nbsp;{if $configuration.taxes_enabled}{$labels.tax_short}{/if}</span>
+                {/if}
+                {if !$configuration.display_prices_tax_incl && $configuration.taxes_enabled}
+                  <span class="text-lg font-semibold bg-gray-200 md:pr-4">{$totals.total_including_tax.value}</span>
+                {else}
+                  <span class="text-lg font-semibold md:pl-4">{$totals.total.value}</span>
+                {/if}
+              <div>
+          </div>
+        </div>
+      </div>
     {/block}
-
   </div>
 </div>
diff --git a/templates/checkout/_partials/steps/addresses.tpl b/templates/checkout/_partials/steps/addresses.tpl
index a095b13..5699d15 100644
--- a/templates/checkout/_partials/steps/addresses.tpl
+++ b/templates/checkout/_partials/steps/addresses.tpl
@@ -26,25 +26,27 @@
 
 {block name='step_content'}
   {if !$step_is_complete}
-    <div class="js-address-form">
+    <div class="js-address-form p-4 flex flex-col gap-4">
       <form
         method="POST"
         action="{url entity='order' params=['id_address' => $id_address]}"
         data-refresh-url="{url entity='order' params=['ajax' => 1, 'action' => 'addressForm']}"
+        class="w-full flex flex-col gap-8"
       >
 
+      <div class="w-full flex flex-col gap-4">
         {if !$use_same_address}
-          <h2 class="h4">{l s='Shipping Address' d='Shop.Theme.Checkout'}</h2>
+          <h2 class="text-lg">{l s='Shipping Address' d='Shop.Theme.Checkout'}</h2>
         {/if}
 
         {if $use_same_address && !$cart.is_virtual}
-          <p>
+          <span class="font-semibold mb-2">
             {l s='The selected address will be used both as your personal address (for invoice) and as your delivery address.' d='Shop.Theme.Checkout'}
-          </p>
+          </span>
         {elseif $use_same_address && $cart.is_virtual}
-          <p>
+          <span class="font-semibold mb-2">
             {l s='The selected address will be used as your personal address (for invoice).' d='Shop.Theme.Checkout'}
-          </p>
+          </span>
         {/if}
 
         {if $show_delivery_address_form}
@@ -57,7 +59,7 @@
             }
           </div>
         {elseif $customer.addresses|count > 0}
-          <div id="delivery-addresses" class="address-selector js-address-selector">
+          <div id="delivery-addresses" class="address-selector js-address-selector w-full flex max-md:flex-col gap-4 flex-wrap md:gap-0">
             {include  file        = 'checkout/_partials/address-selector-block.tpl'
               addresses   = $customer.addresses
               name        = "id_address_delivery"
@@ -73,24 +75,24 @@
             <p class="alert alert-danger js-address-error" name="alert-delivery" style="display: none">{l s="Your address is incomplete, please update it." d="Shop.Notifications.Error"}</p>
           {/if}
 
-          <p class="add-address">
-            <a href="{$new_address_delivery_url}"><i class="material-icons">&#xE145;</i>{l s='add new address' d='Shop.Theme.Actions'}</a>
-          </p>
-
-          {if $use_same_address && !$cart.is_virtual}
-            <p>
-              <a data-link-action="different-invoice-address" href="{$use_different_address_url}">
+          <div class="add-address w-full flex flex-col gap-2">
+            <a href="{$new_address_delivery_url}" class="flex items-center gap-2">
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-home-plus" width="24" height="24" 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="M19 12h2l-9 -9l-9 9h2v7a2 2 0 0 0 2 2h5.5" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2" /><path d="M16 19h6" /><path d="M19 16v6" /></svg>
+              {l s='add new address' d='Shop.Theme.Actions'}
+            </a>
+            {if $use_same_address && !$cart.is_virtual}
+              <a data-link-action="different-invoice-address" class="flex items-center gap-2" href="{$use_different_address_url}">
+                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-layers-difference" width="24" height="24" 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="M16 16v2a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2v-8a2 2 0 0 1 2 -2h2v-2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-2" /><path d="M10 8l-2 0l0 2" /><path d="M8 14l0 2l2 0" /><path d="M14 8l2 0l0 2" /><path d="M16 14l0 2l-2 0" /></svg>
                 {l s='Billing address differs from shipping address' d='Shop.Theme.Checkout'}
               </a>
-            </p>
-          {/if}
-
+            {/if}
+          </div>
         {/if}
-
+      </div>
         {if !$use_same_address}
-
-          <h2 class="h4">{l s='Your Invoice Address' d='Shop.Theme.Checkout'}</h2>
-
+      <hr>
+      <div class="w-full flex flex-col gap-4">
+          <h2 class="text-lg">{l s='Your Invoice Address' d='Shop.Theme.Checkout'}</h2>
           {if $show_invoice_address_form}
             <div id="invoice-address">
               {render file                      = 'checkout/_partials/address-form.tpl'
@@ -101,7 +103,7 @@
               }
             </div>
           {else}
-            <div id="invoice-addresses" class="address-selector js-address-selector">
+            <div id="invoice-addresses" class="address-selector js-address-selector w-full flex max-md:flex-col gap-4 flex-wrap md:gap-0">
               {include  file        = 'checkout/_partials/address-selector-block.tpl'
                 addresses   = $customer.addresses
                 name        = "id_address_invoice"
@@ -117,16 +119,20 @@
               <p class="alert alert-danger js-address-error" name="alert-invoice" style="display: none">{l s="Your address is incomplete, please update it." d="Shop.Notifications.Error"}</p>
             {/if}
 
-            <p class="add-address">
-              <a href="{$new_address_invoice_url}"><i class="material-icons">&#xE145;</i>{l s='add new address' d='Shop.Theme.Actions'}</a>
-            </p>
+            <div class="add-address w-full">
+              <a href="{$new_address_invoice_url}"  class="flex items-center gap-2">
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-home-plus" width="24" height="24" 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="M19 12h2l-9 -9l-9 9h2v7a2 2 0 0 0 2 2h5.5" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2" /><path d="M16 19h6" /><path d="M19 16v6" /></svg>
+              {l s='add new address' d='Shop.Theme.Actions'}
+              </a>
+            </div>
+          </div>
           {/if}
 
         {/if}
 
         {if !$form_has_continue_button}
-          <div class="clearfix">
-            <button type="submit" class="btn btn-primary continue float-xs-right" name="confirm-addresses" value="1">
+          <div class="clearfix w-full flex">
+            <button type="submit" class="flex-1 uppercase py-2 font-medium text-center bg-blue-950 text-gray-50 hover:text-gray-50 hover:bg-blue-900" name="confirm-addresses" value="1">
               {l s='Continue' d='Shop.Theme.Actions'}
             </button>
             <input type="hidden" id="not-valid-addresses" value="{$not_valid_addresses}">
diff --git a/templates/checkout/_partials/steps/personal-information.tpl b/templates/checkout/_partials/steps/personal-information.tpl
index d38ce1d..c1656e9 100644
--- a/templates/checkout/_partials/steps/personal-information.tpl
+++ b/templates/checkout/_partials/steps/personal-information.tpl
@@ -1,70 +1,72 @@
 {extends file='checkout/_partials/steps/checkout-step.tpl'}
 
 {block name='step_content'}
-  {if $customer.is_logged && !$customer.is_guest}
-    <div class="flex flex-col">
-      <span class="identity">
-        {l s='Connected as [1]%firstname% %lastname%[/1].'
-          d='Shop.Theme.Customeraccount'
-          sprintf=[
-            '[1]' => "<a href='{$urls.pages.identity}'>",
-            '[/1]' => "</a>",
-            '%firstname%' => $customer.firstname,
-            '%lastname%' => $customer.lastname
-          ]
-        }
-      </span>
-      <span>
-        {l
-          s='Not you? [1]Log out[/1]'
-          d='Shop.Theme.Customeraccount'
-          sprintf=[
-          '[1]' => "<a href='{$urls.actions.logout}'>",
-          '[/1]' => "</a>"
-          ]
-        }
-      </span>
-    </div>
-  {else}
-    <div class="flex w-full flex-col tabs">
-      <ul class="tabs-list flex w-full">
-        <li class="flex flex-1 p-4 items-center justify-center">
-          <a
-            class="nav-link {if !$show_login_form}active{/if}"
-            data-toggle="tab"
-            href="#checkout-guest-form"
-            role="tab"
-            aria-controls="checkout-guest-form"
-            {if !$show_login_form} aria-selected="true"{/if}
+  {if !$step_is_complete}
+    {if $customer.is_logged && !$customer.is_guest}
+      <div class="flex flex-col">
+        <span class="identity">
+          {l s='Connected as [1]%firstname% %lastname%[/1].'
+            d='Shop.Theme.Customeraccount'
+            sprintf=[
+              '[1]' => "<a href='{$urls.pages.identity}'>",
+              '[/1]' => "</a>",
+              '%firstname%' => $customer.firstname,
+              '%lastname%' => $customer.lastname
+            ]
+          }
+        </span>
+        <span>
+          {l
+            s='Not you? [1]Log out[/1]'
+            d='Shop.Theme.Customeraccount'
+            sprintf=[
+            '[1]' => "<a href='{$urls.actions.logout}'>",
+            '[/1]' => "</a>"
+            ]
+          }
+        </span>
+      </div>
+    {else}
+      <div class="flex w-full flex-col tabs">
+        <ul class="tabs-list flex w-full">
+          <li class="flex flex-1 p-4 items-center justify-center">
+            <a
+              class="nav-link {if !$show_login_form}active{/if}"
+              data-toggle="tab"
+              href="#checkout-guest-form"
+              role="tab"
+              aria-controls="checkout-guest-form"
+              {if !$show_login_form} aria-selected="true"{/if}
+              >
+              {if $guest_allowed}
+                {l s='Order as a guest' d='Shop.Theme.Checkout'}
+              {else}
+                {l s='Create an account' d='Shop.Theme.Customeraccount'}
+              {/if}
+            </a>
+          </li>
+          <li class="flex flex-1 p-4 items-center justify-center">
+            <a
+              class="nav-link {if $show_login_form}active{/if}"
+              data-link-action="show-login-form"
+              data-toggle="tab"
+              href="#checkout-login-form"
+              role="tab"
+              aria-controls="checkout-login-form"
+              {if $show_login_form} aria-selected="true"{/if}
             >
-            {if $guest_allowed}
-              {l s='Order as a guest' d='Shop.Theme.Checkout'}
-            {else}
-              {l s='Create an account' d='Shop.Theme.Customeraccount'}
-            {/if}
-          </a>
-        </li>
-        <li class="flex flex-1 p-4 items-center justify-center">
-          <a
-            class="nav-link {if $show_login_form}active{/if}"
-            data-link-action="show-login-form"
-            data-toggle="tab"
-            href="#checkout-login-form"
-            role="tab"
-            aria-controls="checkout-login-form"
-            {if $show_login_form} aria-selected="true"{/if}
-          >
-            {l s='Sign in' d='Shop.Theme.Actions'}
-          </a>
-        </li>
-      </ul>
-      <div id="checkout-guest-form" class="tabs-content w-full">
-        {render file='checkout/_partials/customer-form.tpl' ui=$register_form guest_allowed=$guest_allowed}
+              {l s='Sign in' d='Shop.Theme.Actions'}
+            </a>
+          </li>
+        </ul>
+        <div id="checkout-guest-form" class="tabs-content w-full">
+          {render file='checkout/_partials/customer-form.tpl' ui=$register_form guest_allowed=$guest_allowed}
+        </div>
+        <div id="checkout-login-form" class="tabs-content w-full">
+          {render file='checkout/_partials/login-form.tpl' ui=$login_form}
+        </div>
       </div>
-      <div id="checkout-login-form" class="tabs-content w-full">
-        {render file='checkout/_partials/login-form.tpl' ui=$login_form}
-      </div>
-    </div>
+    {/if}
   {/if}
 {/block}
 
diff --git a/templates/checkout/order-confirmation.tpl b/templates/checkout/order-confirmation.tpl
index d73a970..22a4af6 100644
--- a/templates/checkout/order-confirmation.tpl
+++ b/templates/checkout/order-confirmation.tpl
@@ -1,18 +1,19 @@
 {extends file='page.tpl'}
 
 {block name='page_content_container' prepend}
-    <section id="content-hook_order_confirmation" class="card">
-      <div class="card-block">
-        <div class="row">
-          <div class="col-md-12">
+    <section id="content-hook_order_confirmation" class="card w-full">
+      <div class="card-block w-full">
+        <div class="w-full flex">
+          <div class="w-full p-8 flex flex-col gap-2 border border-gray-600">
 
             {block name='order_confirmation_header'}
-              <h3 class="h1 card-title">
-                <i class="material-icons rtl-no-flip done">&#xE876;</i>{l s='Your order is confirmed' d='Shop.Theme.Checkout'}
-              </h3>
+              <div class="h1 card-title flex items-center gap-4 text-2xl">
+                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-checks" width="32" height="32" 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="M7 12l5 5l10 -10" /><path d="M2 12l5 5m5 -5l5 -5" /></svg>
+                {l s='Your order is confirmed.' d='Shop.Theme.Checkout'}
+              </div>
             {/block}
 
-            <p>
+            <span class="pl-12">
               {l s='An email has been sent to your mail address %email%.' d='Shop.Theme.Checkout' sprintf=['%email%' => $customer.email]}
               {if $order.details.invoice_url}
                 {* [1][/1] is for a HTML tag. *}
@@ -25,7 +26,7 @@
                   ]
                 }
               {/if}
-            </p>
+            </span>
 
             {block name='hook_order_confirmation'}
               {$HOOK_ORDER_CONFIRMATION nofilter}
@@ -38,10 +39,8 @@
 {/block}
 
 {block name='page_content_container'}
-  <section id="content" class="page-content page-order-confirmation card">
-    <div class="card-block">
-      <div class="row">
-
+  <section id="content" class="page-content page-order-confirmation card w-full">
+      <div class="flex flex-col w-full gap-4 mt-8">
         {block name='order_confirmation_table'}
           {include
             file='checkout/_partials/order-confirmation-table.tpl'
@@ -54,23 +53,24 @@
         {/block}
 
         {block name='order_details'}
-          <div id="order-details" class="col-md-4">
-            <h3 class="h3 card-title">{l s='Order details' d='Shop.Theme.Checkout'}:</h3>
-            <ul>
-              <li>{l s='Order reference: %reference%' d='Shop.Theme.Checkout' sprintf=['%reference%' => $order.details.reference]}</li>
-              <li>{l s='Payment method: %method%' d='Shop.Theme.Checkout' sprintf=['%method%' => $order.details.payment]}</li>
-              {if !$order.details.is_virtual}
-                <li>
-                  {l s='Shipping method: %method%' d='Shop.Theme.Checkout' sprintf=['%method%' => $order.carrier.name]}<br>
-                  <em>{$order.carrier.delay}</em>
-                </li>
-              {/if}
-            </ul>
+          <div id="order-details" class="w-full px-8 py-4 md:p-8 border border-gray-600 flex flex-col gap-3">
+            <h3 class="text-lg font-semibold">{l s='Order details' d='Shop.Theme.Checkout'}:</h3>
+            <div class="w-full flex">
+              <div class="w-1/2 md:w-2/3 flex flex-col gap-1">
+                <span >Order reference:</span>
+                <span >Payment method:</span>
+                <span >Shipping method:</span>
+              </div>
+              <div class="w-1/2 md:w-1/3 flex flex-col items-end gap-1">
+                <span>{$order.details.reference}</span>
+                <span>{$order.details.payment}</span>
+                <span>{$order.carrier.name}</span>
+              </div>
+          </div>
           </div>
         {/block}
 
       </div>
-    </div>
   </section>
 
   {block name='hook_payment_return'}
@@ -79,7 +79,6 @@
       <div class="card-block">
         <div class="row">
           <div class="col-md-12">
-            {$HOOK_PAYMENT_RETURN nofilter}
           </div>
         </div>
       </div>
@@ -103,7 +102,7 @@
   {/block}
 
   {block name='hook_order_confirmation_2'}
-    <section id="content-hook-order-confirmation-footer">
+    <section id="content-hook-order-confirmation-footer" class="mt-8">
       {hook h='displayOrderConfirmation2'}
     </section>
   {/block}
diff --git a/templates/customer/_partials/address-form.tpl b/templates/customer/_partials/address-form.tpl
index 3f30e0f..e43ddc5 100644
--- a/templates/customer/_partials/address-form.tpl
+++ b/templates/customer/_partials/address-form.tpl
@@ -48,7 +48,7 @@
       {/block}
 
       {block name="address_form_footer"}
-      <footer class="form-footer clearfix">
+      <footer class="form-footer w-full flex max-md:flex-col gap-2">
         <input type="hidden" name="submitAddress" value="1">
         {block name='form_buttons'}
           <button class="btn btn-primary float-xs-right" type="submit" class="form-control-submit">
diff --git a/templates/customer/history.tpl b/templates/customer/history.tpl
index 63b36d3..c3d3e61 100644
--- a/templates/customer/history.tpl
+++ b/templates/customer/history.tpl
@@ -34,7 +34,7 @@
   <h6 class='text-lg'>{l s='Here are the orders you\'ve placed since your account was created.' d='Shop.Theme.Customeraccount'}</h6>
 
   {if $orders}
-    <table class="mt-2 w-full">
+    <table class="mt-2 w-full border-separate border-spacing-x-0 border-spacing-y-[12px]">
       <thead class="thead-default">
         <tr>
           <th>{l s='Order reference' d='Shop.Theme.Checkout'}</th>