diff --git a/templates/checkout/_partials/steps/addresses.tpl b/templates/checkout/_partials/steps/addresses.tpl
index 2dc14b6..a095b13 100644
--- a/templates/checkout/_partials/steps/addresses.tpl
+++ b/templates/checkout/_partials/steps/addresses.tpl
@@ -25,113 +25,115 @@
 {extends file='checkout/_partials/steps/checkout-step.tpl'}
 
 {block name='step_content'}
-  <div class="js-address-form">
-    <form
-      method="POST"
-      action="{url entity='order' params=['id_address' => $id_address]}"
-      data-refresh-url="{url entity='order' params=['ajax' => 1, 'action' => 'addressForm']}"
-    >
+  {if !$step_is_complete}
+    <div class="js-address-form">
+      <form
+        method="POST"
+        action="{url entity='order' params=['id_address' => $id_address]}"
+        data-refresh-url="{url entity='order' params=['ajax' => 1, 'action' => 'addressForm']}"
+      >
 
-      {if !$use_same_address}
-        <h2 class="h4">{l s='Shipping Address' d='Shop.Theme.Checkout'}</h2>
-      {/if}
-
-      {if $use_same_address && !$cart.is_virtual}
-        <p>
-          {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>
-      {elseif $use_same_address && $cart.is_virtual}
-        <p>
-          {l s='The selected address will be used as your personal address (for invoice).' d='Shop.Theme.Checkout'}
-        </p>
-      {/if}
-
-      {if $show_delivery_address_form}
-        <div id="delivery-address">
-          {render file                      = 'checkout/_partials/address-form.tpl'
-            ui                        = $address_form
-            use_same_address          = $use_same_address
-            type                      = "delivery"
-            form_has_continue_button  = $form_has_continue_button
-          }
-        </div>
-      {elseif $customer.addresses|count > 0}
-        <div id="delivery-addresses" class="address-selector js-address-selector">
-          {include  file        = 'checkout/_partials/address-selector-block.tpl'
-            addresses   = $customer.addresses
-            name        = "id_address_delivery"
-            selected    = $id_address_delivery
-            type        = "delivery"
-            interactive = !$show_delivery_address_form and !$show_invoice_address_form
-          }
-        </div>
-
-        {if isset($delivery_address_error)}
-          <p class="alert alert-danger js-address-error" name="alert-delivery" id="id-failure-address-{$delivery_address_error.id_address}">{$delivery_address_error.exception}</p>
-        {else}
-          <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 !$use_same_address}
+          <h2 class="h4">{l s='Shipping Address' d='Shop.Theme.Checkout'}</h2>
         {/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}">
-              {l s='Billing address differs from shipping address' d='Shop.Theme.Checkout'}
-            </a>
+            {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>
+        {elseif $use_same_address && $cart.is_virtual}
+          <p>
+            {l s='The selected address will be used as your personal address (for invoice).' d='Shop.Theme.Checkout'}
           </p>
         {/if}
 
-      {/if}
-
-      {if !$use_same_address}
-
-        <h2 class="h4">{l s='Your Invoice Address' d='Shop.Theme.Checkout'}</h2>
-
-        {if $show_invoice_address_form}
-          <div id="invoice-address">
+        {if $show_delivery_address_form}
+          <div id="delivery-address">
             {render file                      = 'checkout/_partials/address-form.tpl'
               ui                        = $address_form
               use_same_address          = $use_same_address
-              type                      = "invoice"
+              type                      = "delivery"
               form_has_continue_button  = $form_has_continue_button
             }
           </div>
-        {else}
-          <div id="invoice-addresses" class="address-selector js-address-selector">
+        {elseif $customer.addresses|count > 0}
+          <div id="delivery-addresses" class="address-selector js-address-selector">
             {include  file        = 'checkout/_partials/address-selector-block.tpl'
               addresses   = $customer.addresses
-              name        = "id_address_invoice"
-              selected    = $id_address_invoice
-              type        = "invoice"
+              name        = "id_address_delivery"
+              selected    = $id_address_delivery
+              type        = "delivery"
               interactive = !$show_delivery_address_form and !$show_invoice_address_form
             }
           </div>
 
-          {if isset($invoice_address_error)}
-            <p class="alert alert-danger js-address-error" name="alert-invoice" id="id-failure-address-{$invoice_address_error.id_address}">{$invoice_address_error.exception}</p>
+          {if isset($delivery_address_error)}
+            <p class="alert alert-danger js-address-error" name="alert-delivery" id="id-failure-address-{$delivery_address_error.id_address}">{$delivery_address_error.exception}</p>
           {else}
-            <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>
+            <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_invoice_url}"><i class="material-icons">&#xE145;</i>{l s='add new address' d='Shop.Theme.Actions'}</a>
+            <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}">
+                {l s='Billing address differs from shipping address' d='Shop.Theme.Checkout'}
+              </a>
+            </p>
+          {/if}
+
         {/if}
 
-      {/if}
+        {if !$use_same_address}
 
-      {if !$form_has_continue_button}
-        <div class="clearfix">
-          <button type="submit" class="btn btn-primary continue float-xs-right" name="confirm-addresses" value="1">
-            {l s='Continue' d='Shop.Theme.Actions'}
-          </button>
-          <input type="hidden" id="not-valid-addresses" value="{$not_valid_addresses}">
-        </div>
-      {/if}
+          <h2 class="h4">{l s='Your Invoice Address' d='Shop.Theme.Checkout'}</h2>
 
-    </form>
-  </div>
+          {if $show_invoice_address_form}
+            <div id="invoice-address">
+              {render file                      = 'checkout/_partials/address-form.tpl'
+                ui                        = $address_form
+                use_same_address          = $use_same_address
+                type                      = "invoice"
+                form_has_continue_button  = $form_has_continue_button
+              }
+            </div>
+          {else}
+            <div id="invoice-addresses" class="address-selector js-address-selector">
+              {include  file        = 'checkout/_partials/address-selector-block.tpl'
+                addresses   = $customer.addresses
+                name        = "id_address_invoice"
+                selected    = $id_address_invoice
+                type        = "invoice"
+                interactive = !$show_delivery_address_form and !$show_invoice_address_form
+              }
+            </div>
+
+            {if isset($invoice_address_error)}
+              <p class="alert alert-danger js-address-error" name="alert-invoice" id="id-failure-address-{$invoice_address_error.id_address}">{$invoice_address_error.exception}</p>
+            {else}
+              <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>
+          {/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">
+              {l s='Continue' d='Shop.Theme.Actions'}
+            </button>
+            <input type="hidden" id="not-valid-addresses" value="{$not_valid_addresses}">
+          </div>
+        {/if}
+
+      </form>
+    </div>
+  {/if}
 {/block}
diff --git a/templates/checkout/_partials/steps/payment.tpl b/templates/checkout/_partials/steps/payment.tpl
index 2f14dfd..81c9cde 100644
--- a/templates/checkout/_partials/steps/payment.tpl
+++ b/templates/checkout/_partials/steps/payment.tpl
@@ -1,167 +1,166 @@
 {extends file='checkout/_partials/steps/checkout-step.tpl'}
 
 {block name='step_content'}
+  {if !$step_is_complete}
+  <div class="w-full flex flex-col gap-4 p-4">
 
-  {hook h='displayPaymentTop'}
+      {hook h='displayPaymentTop'}
 
-  {* used by javascript to correctly handle cart updates when we are on payment step (eg vouchers added) *}
-  <div style="display:none" class="js-cart-payment-step-refresh"></div>
+      {* used by javascript to correctly handle cart updates when we are on payment step (eg vouchers added) *}
+      <div style="display:none" class="js-cart-payment-step-refresh"></div>
 
-  {if !empty($display_transaction_updated_info)}
-  <p class="cart-payment-step-refreshed-info">
-    {l s='Transaction amount has been correctly updated' d='Shop.Theme.Checkout'}
-  </p>
-  {/if}
+      {if !empty($display_transaction_updated_info)}
+      <p class="cart-payment-step-refreshed-info">
+        {l s='Transaction amount has been correctly updated' d='Shop.Theme.Checkout'}
+      </p>
+      {/if}
 
-  {if $is_free}
-    <p>{l s='No payment needed for this order' d='Shop.Theme.Checkout'}</p>
-  {/if}
-  <div class="payment-options {if $is_free}hidden-xs-up{/if}">
-    {foreach from=$payment_options item="module_options"}
-      {foreach from=$module_options item="option"}
-        <div>
-          <div id="{$option.id}-container" class="payment-option clearfix">
-            {* This is the way an option should be selected when Javascript is enabled *}
-            <span class="custom-radio float-xs-left">
-              <input
-                class="ps-shown-by-js {if $option.binary} binary {/if}"
-                id="{$option.id}"
-                data-module-name="{$option.module_name}"
-                name="payment-option"
-                type="radio"
-                required
-                {if $selected_payment_option == $option.id || $is_free} checked {/if}
+      {if $is_free}
+        <p>{l s='No payment needed for this order' d='Shop.Theme.Checkout'}</p>
+      {/if}
+      <div class="payment-options flex flex-col gap-2 {if $is_free}hidden-xs-up{/if}">
+        {foreach from=$payment_options item="module_options"}
+          {foreach from=$module_options item="option"}
+            <div>
+              <div id="{$option.id}-container" class="payment-option clearfix">
+                {* This is the way an option should be selected when Javascript is enabled *}
+                <span class="custom-radio float-xs-left">
+                  <input
+                    class="ps-shown-by-js {if $option.binary} binary {/if}"
+                    id="{$option.id}"
+                    data-module-name="{$option.module_name}"
+                    name="payment-option"
+                    type="radio"
+                    required
+                    {if $selected_payment_option == $option.id || $is_free} checked {/if}
+                  >
+                  <span></span>
+                </span>
+                {* This is the way an option should be selected when Javascript is disabled *}
+                <form method="GET" class="ps-hidden-by-js">
+                  {if $option.id === $selected_payment_option}
+                    {l s='Selected' d='Shop.Theme.Checkout'}
+                  {else}
+                    <button class="ps-hidden-by-js" type="submit" name="select_payment_option" value="{$option.id}">
+                      {l s='Choose' d='Shop.Theme.Actions'}
+                    </button>
+                  {/if}
+                </form>
+
+                <label for="{$option.id}">
+                  <span>{$option.call_to_action_text}</span>
+                  {if $option.logo}
+                    <img src="{$option.logo}">
+                  {/if}
+                </label>
+
+              </div>
+            </div>
+
+            {if $option.additionalInformation}
+              <div
+                id="{$option.id}-additional-information"
+                class="js-additional-information definition-list additional-information{if $option.id != $selected_payment_option} ps-hidden {/if}"
               >
-              <span></span>
-            </span>
-            {* This is the way an option should be selected when Javascript is disabled *}
-            <form method="GET" class="ps-hidden-by-js">
-              {if $option.id === $selected_payment_option}
-                {l s='Selected' d='Shop.Theme.Checkout'}
+                {$option.additionalInformation nofilter}
+              </div>
+            {/if}
+
+            <div
+              id="pay-with-{$option.id}-form"
+              class="js-payment-option-form {if $option.id != $selected_payment_option} ps-hidden {/if}"
+            >
+              {if $option.form}
+                {$option.form nofilter}
               {else}
-                <button class="ps-hidden-by-js" type="submit" name="select_payment_option" value="{$option.id}">
-                  {l s='Choose' d='Shop.Theme.Actions'}
-                </button>
+                <form id="payment-form" method="POST" action="{$option.action nofilter}">
+                  {foreach from=$option.inputs item=input}
+                    <input type="{$input.type}" name="{$input.name}" value="{$input.value}">
+                  {/foreach}
+                  <button style="display:none" id="pay-with-{$option.id}" type="submit"></button>
+                </form>
               {/if}
-            </form>
+            </div>
+          {/foreach}
+        {foreachelse}
+          <p class="alert alert-danger">{l s='Unfortunately, there are no payment method available.' d='Shop.Theme.Checkout'}</p>
+        {/foreach}
+      </div>
 
-            <label for="{$option.id}">
-              <span>{$option.call_to_action_text}</span>
-              {if $option.logo}
-                <img src="{$option.logo}">
-              {/if}
-            </label>
+      {if $conditions_to_approve|count}
+        <p class="ps-hidden-by-js">
+          {* At the moment, we're not showing the checkboxes when JS is disabled
+            because it makes ensuring they were checked very tricky and overcomplicates
+            the template. Might change later.
+          *}
+          {l s='By confirming the order, you certify that you have read and agree with all of the conditions below:' d='Shop.Theme.Checkout'}
+        </p>
 
-          </div>
-        </div>
+        <form id="conditions-to-approve" method="GET">
+          <ul class="flex flex-col gap-2">
+            {foreach from=$conditions_to_approve item="condition" key="condition_name"}
+              <li>
+                <div class="flex items-center gap-2 focus:border-0">
+                    <input  id    = "conditions_to_approve[{$condition_name}]"
+                            name  = "conditions_to_approve[{$condition_name}]"
+                            required
+                            type  = "checkbox"
+                            value = "1"
+                            class = "ps-shown-by-js"
+                    >
+                  </span>
+                  <label class="js-terms" for="conditions_to_approve[{$condition_name}]">
+                    {$condition nofilter}
+                  </label>
+              </li>
+            {/foreach}
+          </ul>
+        </form>
+      {/if}
 
-        {if $option.additionalInformation}
-          <div
-            id="{$option.id}-additional-information"
-            class="js-additional-information definition-list additional-information{if $option.id != $selected_payment_option} ps-hidden {/if}"
-          >
-            {$option.additionalInformation nofilter}
-          </div>
-        {/if}
+      {if $show_final_summary}
+        {include file='checkout/_partials/order-final-summary.tpl'}
+      {/if}
 
-        <div
-          id="pay-with-{$option.id}-form"
-          class="js-payment-option-form {if $option.id != $selected_payment_option} ps-hidden {/if}"
-        >
-          {if $option.form}
-            {$option.form nofilter}
-          {else}
-            <form id="payment-form" method="POST" action="{$option.action nofilter}">
-              {foreach from=$option.inputs item=input}
-                <input type="{$input.type}" name="{$input.name}" value="{$input.value}">
-              {/foreach}
-              <button style="display:none" id="pay-with-{$option.id}" type="submit"></button>
-            </form>
+      <div id="payment-confirmation">
+        <div class="ps-shown-by-js">
+          <button type="submit" {if !$selected_payment_option} disabled {/if} class="uppercase font-medium py-2 text-center w-full bg-blue-950 text-gray-50 disabled:bg-gray-600">
+            {l s='Order with an obligation to pay' d='Shop.Theme.Checkout'}
+          </button>
+          {if $show_final_summary}
+            <article class="alert alert-danger mt-2 js-alert-payment-conditions" role="alert" data-alert="danger">
+              {l
+                s='Please make sure you\'ve chosen a [1]payment method[/1] and accepted the [2]terms and conditions[/2].'
+                sprintf=[
+                  '[1]' => '<a href="#checkout-payment-step">',
+                  '[/1]' => '</a>',
+                  '[2]' => '<a href="#conditions-to-approve">',
+                  '[/2]' => '</a>'
+                ]
+                d='Shop.Theme.Checkout'
+              }
+            </article>
+          {/if}
+        </div>
+        <div class="ps-hidden-by-js">
+          {if $selected_payment_option and $all_conditions_approved}
+            <label for="pay-with-{$selected_payment_option}">{l s='Order with an obligation to pay' d='Shop.Theme.Checkout'}</label>
           {/if}
         </div>
-      {/foreach}
-    {foreachelse}
-      <p class="alert alert-danger">{l s='Unfortunately, there are no payment method available.' d='Shop.Theme.Checkout'}</p>
-    {/foreach}
-  </div>
-
-  {if $conditions_to_approve|count}
-    <p class="ps-hidden-by-js">
-      {* At the moment, we're not showing the checkboxes when JS is disabled
-         because it makes ensuring they were checked very tricky and overcomplicates
-         the template. Might change later.
-      *}
-      {l s='By confirming the order, you certify that you have read and agree with all of the conditions below:' d='Shop.Theme.Checkout'}
-    </p>
-
-    <form id="conditions-to-approve" method="GET">
-      <ul>
-        {foreach from=$conditions_to_approve item="condition" key="condition_name"}
-          <li>
-            <div class="float-xs-left">
-              <span class="custom-checkbox">
-                <input  id    = "conditions_to_approve[{$condition_name}]"
-                        name  = "conditions_to_approve[{$condition_name}]"
-                        required
-                        type  = "checkbox"
-                        value = "1"
-                        class = "ps-shown-by-js"
-                >
-                <span><i class="material-icons rtl-no-flip checkbox-checked">&#xE5CA;</i></span>
-              </span>
-            </div>
-            <div class="condition-label">
-              <label class="js-terms" for="conditions_to_approve[{$condition_name}]">
-                {$condition nofilter}
-              </label>
-            </div>
-          </li>
-        {/foreach}
-      </ul>
-    </form>
-  {/if}
-
-  {if $show_final_summary}
-    {include file='checkout/_partials/order-final-summary.tpl'}
-  {/if}
-
-  <div id="payment-confirmation">
-    <div class="ps-shown-by-js">
-      <button type="submit" {if !$selected_payment_option} disabled {/if} class="btn btn-primary center-block">
-        {l s='Order with an obligation to pay' d='Shop.Theme.Checkout'}
-      </button>
-      {if $show_final_summary}
-        <article class="alert alert-danger mt-2 js-alert-payment-conditions" role="alert" data-alert="danger">
-          {l
-            s='Please make sure you\'ve chosen a [1]payment method[/1] and accepted the [2]terms and conditions[/2].'
-            sprintf=[
-              '[1]' => '<a href="#checkout-payment-step">',
-              '[/1]' => '</a>',
-              '[2]' => '<a href="#conditions-to-approve">',
-              '[/2]' => '</a>'
-            ]
-            d='Shop.Theme.Checkout'
-          }
-        </article>
-      {/if}
-    </div>
-    <div class="ps-hidden-by-js">
-      {if $selected_payment_option and $all_conditions_approved}
-        <label for="pay-with-{$selected_payment_option}">{l s='Order with an obligation to pay' d='Shop.Theme.Checkout'}</label>
-      {/if}
-    </div>
-  </div>
-
-  {hook h='displayPaymentByBinaries'}
-
-  <div class="modal fade" id="modal">
-    <div class="modal-dialog" role="document">
-      <div class="modal-content">
-        <button type="button" class="close" data-dismiss="modal" aria-label="{l s='Close' d='Shop.Theme.Global'}">
-          <span aria-hidden="true">&times;</span>
-        </button>
-        <div class="js-modal-content"></div>
       </div>
-    </div>
+
+      {hook h='displayPaymentByBinaries'}
+
+      <div class="modal fade hidden" id="modal">
+        <div class="modal-dialog" role="document">
+          <div class="modal-content">
+            <button type="button" class="close" data-dismiss="modal" aria-label="{l s='Close' d='Shop.Theme.Global'}">
+              <span aria-hidden="true">&times;</span>
+            </button>
+            <div class="js-modal-content"></div>
+          </div>
+        </div>
+      </div>
+    {/if}
   </div>
 {/block}
diff --git a/templates/checkout/_partials/steps/shipping.tpl b/templates/checkout/_partials/steps/shipping.tpl
index d6b5182..635476b 100644
--- a/templates/checkout/_partials/steps/shipping.tpl
+++ b/templates/checkout/_partials/steps/shipping.tpl
@@ -25,100 +25,104 @@
 {extends file='checkout/_partials/steps/checkout-step.tpl'}
 
 {block name='step_content'}
-  <div id="hook-display-before-carrier">
-    {$hookDisplayBeforeCarrier nofilter}
-  </div>
+  {if !$step_is_complete}
+    <div id="hook-display-before-carrier">
+      {$hookDisplayBeforeCarrier nofilter}
+    </div>
 
-  <div class="delivery-options-list">
-    {if $delivery_options|count}
-      <form
-        class="clearfix"
-        id="js-delivery"
-        data-url-update="{url entity='order' params=['ajax' => 1, 'action' => 'selectDeliveryOption']}"
-        method="post"
-      >
-        <div class="form-fields">
-          {block name='delivery_options'}
-            <div class="delivery-options">
-              {foreach from=$delivery_options item=carrier key=carrier_id}
-                  <div class="row delivery-option">
-                    <div class="col-sm-1">
-                      <span class="custom-radio float-xs-left">
-                        <input type="radio" name="delivery_option[{$id_address}]" id="delivery_option_{$carrier.id}" value="{$carrier_id}"{if $delivery_option == $carrier_id} checked{/if}>
-                        <span></span>
-                      </span>
-                    </div>
-                    <label for="delivery_option_{$carrier.id}" class="col-sm-11 delivery-option-2">
-                      <div class="row">
-                        <div class="col-sm-5 col-xs-12">
-                          <div class="row">
-                            {if $carrier.logo}
-                            <div class="col-xs-3">
-                                <img src="{$carrier.logo}" alt="{$carrier.name}" />
+    <div class="flex w-full p-4">
+      {if $delivery_options|count}
+        <form
+          class="flex flex-col w-full gap-4"
+          id="js-delivery"
+          data-url-update="{url entity='order' params=['ajax' => 1, 'action' => 'selectDeliveryOption']}"
+          method="post"
+        >
+          <div class="form-fields">
+            {block name='delivery_options'}
+              <div class="delivery-options flex flex-col gap-2">
+                {foreach from=$delivery_options item=carrier key=carrier_id}
+                    <div class="flex items-center delivery-option">
+                      <div class="col-sm-1">
+                        <span class="custom-radio float-xs-left">
+                          <input type="radio" name="delivery_option[{$id_address}]" id="delivery_option_{$carrier.id}" value="{$carrier_id}"{if $delivery_option == $carrier_id} checked{/if}>
+                          <span></span>
+                        </span>
+                      </div>
+                      <label for="delivery_option_{$carrier.id}" class="col-sm-11 delivery-option-2">
+                        <div class="flex items-center gap-2">
+                          <div class="col-sm-5 col-xs-12">
+                            <div class=" flex items-center gap-2">
+                              {if $carrier.logo}
+                              <div>
+                                  <img src="{$carrier.logo}" alt="{$carrier.name}" />
+                              </div>
+                              {/if}
+                              <div class="text-lg font-semibold">
+                                <span class="h6 carrier-name">{$carrier.name}</span>
+                              </div>
                             </div>
-                            {/if}
-                            <div class="{if $carrier.logo}col-xs-9{else}col-xs-12{/if}">
-                              <span class="h6 carrier-name">{$carrier.name}</span>
+                          </div>
+                          <div class="flex gap-2 flex-wrap">
+                            <div class="">
+                              <span class="carrier-delay">( {$carrier.delay} )</span>
+                            </div>
+                            <div class="">
+                              <span class="carrier-price">( {$carrier.price} )</span>
                             </div>
                           </div>
                         </div>
-                        <div class="col-sm-4 col-xs-12">
-                          <span class="carrier-delay">{$carrier.delay}</span>
-                        </div>
-                        <div class="col-sm-3 col-xs-12">
-                          <span class="carrier-price">{$carrier.price}</span>
-                        </div>
-                      </div>
-                    </label>
-                  </div>
-                  <div class="row carrier-extra-content"{if $delivery_option != $carrier_id} style="display:none;"{/if}>
-                    {$carrier.extraContent nofilter}
-                  </div>
-                  <div class="clearfix"></div>
-              {/foreach}
-            </div>
-          {/block}
-          <div class="order-options">
-            <div id="delivery">
-              <label for="delivery_message">{l s='If you would like to add a comment about your order, please write it in the field below.' d='Shop.Theme.Checkout'}</label>
-              <textarea rows="2" cols="120" id="delivery_message" name="delivery_message">{$delivery_message}</textarea>
-            </div>
-
-            {if $recyclablePackAllowed}
-              <span class="custom-checkbox">
-                <input type="checkbox" id="input_recyclable" name="recyclable" value="1" {if $recyclable} checked {/if}>
-                <span><i class="material-icons rtl-no-flip checkbox-checked">&#xE5CA;</i></span>
-                <label for="input_recyclable">{l s='I would like to receive my order in recycled packaging.' d='Shop.Theme.Checkout'}</label>
-              </span>
-            {/if}
-
-            {if $gift.allowed}
-              <span class="custom-checkbox">
-                <input class="js-gift-checkbox" id="input_gift" name="gift" type="checkbox" value="1" {if $gift.isGift}checked="checked"{/if}>
-                <span><i class="material-icons rtl-no-flip checkbox-checked">&#xE5CA;</i></span>
-                <label for="input_gift">{$gift.label}</label >
-              </span>
-
-              <div id="gift" class="collapse{if $gift.isGift} in{/if}">
-                <label for="gift_message">{l s='If you\'d like, you can add a note to the gift:' d='Shop.Theme.Checkout'}</label>
-                <textarea rows="2" cols="120" id="gift_message" name="gift_message">{$gift.message}</textarea>
+                      </label>
+                    </div>
+                    <div class="row carrier-extra-content"{if $delivery_option != $carrier_id} style="display:none;"{/if}>
+                      {$carrier.extraContent nofilter}
+                    </div>
+                    <div class="clearfix"></div>
+                {/foreach}
+              </div>
+            {/block}
+            <div class="flex w-full">
+              <div id="delivery" class="flex w-full flex-col gap-2">
+                <label for="delivery_message" class="text-sm">{l s='If you would like to add a comment about your order, please write it in the field below.' d='Shop.Theme.Checkout'}</label>
+                <textarea rows="2" id="delivery_message" name="delivery_message">{$delivery_message}</textarea>
               </div>
-            {/if}
 
+              {if $recyclablePackAllowed}
+                <span class="custom-checkbox">
+                  <input type="checkbox" id="input_recyclable" name="recyclable" value="1" {if $recyclable} checked {/if}>
+                  <span><i class="material-icons rtl-no-flip checkbox-checked">&#xE5CA;</i></span>
+                  <label for="input_recyclable">{l s='I would like to receive my order in recycled packaging.' d='Shop.Theme.Checkout'}</label>
+                </span>
+              {/if}
+
+              {if $gift.allowed}
+                <span class="custom-checkbox">
+                  <input class="js-gift-checkbox" id="input_gift" name="gift" type="checkbox" value="1" {if $gift.isGift}checked="checked"{/if}>
+                  <span><i class="material-icons rtl-no-flip checkbox-checked">&#xE5CA;</i></span>
+                  <label for="input_gift">{$gift.label}</label >
+                </span>
+
+                <div id="gift" class="collapse{if $gift.isGift} in{/if}">
+                  <label for="gift_message">{l s='If you\'d like, you can add a note to the gift:' d='Shop.Theme.Checkout'}</label>
+                  <textarea rows="2" cols="120" id="gift_message" name="gift_message">{$gift.message}</textarea>
+                </div>
+              {/if}
+
+            </div>
           </div>
-        </div>
-        <button type="submit" class="continue btn btn-primary float-xs-right" name="confirmDeliveryOption" value="1">
-          {l s='Continue' d='Shop.Theme.Actions'}
-        </button>
-      </form>
-    {else}
-      <p class="alert alert-danger">{l s='Unfortunately, there are no carriers available for your delivery address.' d='Shop.Theme.Checkout'}</p>
-    {/if}
-  </div>
+          <button type="submit" class="uppercase font-medium py-2 text-center w-full bg-blue-950 text-gray-50" name="confirmDeliveryOption" value="1">
+            {l s='Continue' d='Shop.Theme.Actions'}
+          </button>
+        </form>
+      {else}
+      <p class="font-semibold text-red-500">{l s='Unfortunately, there are no carriers available for your delivery address.' d='Shop.Theme.Checkout'}</p>
+      {/if}
+    </div>
 
-  <div id="hook-display-after-carrier">
-    {$hookDisplayAfterCarrier nofilter}
-  </div>
+    <div id="hook-display-after-carrier">
+      {$hookDisplayAfterCarrier nofilter}
+    </div>
 
-  <div id="extra_carrier"></div>
+    <div id="extra_carrier"></div>
+  {/if}
 {/block}