diff --git a/_dev/elegance.css b/_dev/elegance.css
index be5d721..d9bdcca 100644
--- a/_dev/elegance.css
+++ b/_dev/elegance.css
@@ -4,13 +4,21 @@
 
 body {
   @apply bg-white;
-  @apply text-gray-500;
+  @apply text-gray-600;
   @apply font-normal;
 }
 
+a {
+  apply text-gray-600;
+}
+
 .icon-tabler {
   stroke-width: 1px;
   fill: none;
-  @apply text-gray-700;
-  @apply stroke-gray-700;
+  @apply text-gray-500;
+  @apply stroke-gray-500;
+}
+
+a:hover .icon-tabler {
+  @apply stroke-blue-900;
 }
diff --git a/assets/css/theme.css b/assets/css/theme.css
index 3f2d836..f949145 100644
--- a/assets/css/theme.css
+++ b/assets/css/theme.css
@@ -645,11 +645,21 @@ video {
   margin-right: -1rem;
 }
 
+.mx-4 {
+  margin-left: 1rem;
+  margin-right: 1rem;
+}
+
 .mx-auto {
   margin-left: auto;
   margin-right: auto;
 }
 
+.my-12 {
+  margin-top: 3rem;
+  margin-bottom: 3rem;
+}
+
 .my-2 {
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
@@ -665,14 +675,8 @@ video {
   margin-bottom: 2rem;
 }
 
-.my-12 {
-  margin-top: 3rem;
-  margin-bottom: 3rem;
-}
-
-.mx-4 {
-  margin-left: 1rem;
-  margin-right: 1rem;
+.mb-1 {
+  margin-bottom: 0.25rem;
 }
 
 .mb-4 {
@@ -683,26 +687,34 @@ video {
   margin-left: 0.25rem;
 }
 
+.mr-4 {
+  margin-right: 1rem;
+}
+
 .mt-1 {
   margin-top: 0.25rem;
 }
 
-.mt-2 {
-  margin-top: 0.5rem;
-}
-
-.mt-3 {
-  margin-top: 0.75rem;
-}
-
 .mt-16 {
   margin-top: 4rem;
 }
 
+.mt-2 {
+  margin-top: 0.5rem;
+}
+
 .mt-24 {
   margin-top: 6rem;
 }
 
+.mt-3 {
+  margin-top: 0.75rem;
+}
+
+.mt-8 {
+  margin-top: 2rem;
+}
+
 .block {
   display: block;
 }
@@ -755,10 +767,6 @@ video {
   height: 2rem;
 }
 
-.h-96 {
-  height: 24rem;
-}
-
 .h-auto {
   height: auto;
 }
@@ -767,10 +775,22 @@ video {
   height: 100%;
 }
 
+.w-1\/3 {
+  width: 33.333333%;
+}
+
+.w-1\/4 {
+  width: 25%;
+}
+
 .w-12 {
   width: 3rem;
 }
 
+.w-14 {
+  width: 3.5rem;
+}
+
 .w-24 {
   width: 6rem;
 }
@@ -791,22 +811,12 @@ video {
   width: 100%;
 }
 
-.w-14 {
-  width: 3.5rem;
+.max-w-2xl {
+  max-width: 42rem;
 }
 
-.w-28 {
-  width: 7rem;
-}
-
-.min-w-fit {
-  min-width: -moz-fit-content;
-  min-width: fit-content;
-}
-
-.min-w-min {
-  min-width: -moz-min-content;
-  min-width: min-content;
+.max-w-\[140px\] {
+  max-width: 140px;
 }
 
 .max-w-\[200px\] {
@@ -821,18 +831,6 @@ video {
   max-width: 100%;
 }
 
-.max-w-2xl {
-  max-width: 42rem;
-}
-
-.max-w-\[112px\] {
-  max-width: 112px;
-}
-
-.max-w-\[140px\] {
-  max-width: 140px;
-}
-
 .flex-1 {
   flex: 1 1 0%;
 }
@@ -896,6 +894,10 @@ video {
   justify-content: space-around;
 }
 
+.gap-1 {
+  gap: 0.25rem;
+}
+
 .gap-2 {
   gap: 0.5rem;
 }
@@ -904,18 +906,14 @@ video {
   gap: 1rem;
 }
 
-.gap-8 {
-  gap: 2rem;
-}
-
-.gap-1 {
-  gap: 0.25rem;
-}
-
 .gap-6 {
   gap: 1.5rem;
 }
 
+.gap-8 {
+  gap: 2rem;
+}
+
 .truncate {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -935,14 +933,14 @@ video {
   border-color: rgb(23 37 84 / var(--tw-border-opacity));
 }
 
-.bg-gray-100 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
+.border-gray-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(209 213 219 / var(--tw-border-opacity));
 }
 
-.bg-white {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+.border-red-100 {
+  --tw-border-opacity: 1;
+  border-color: rgb(254 226 226 / var(--tw-border-opacity));
 }
 
 .bg-blue-950 {
@@ -950,6 +948,21 @@ video {
   background-color: rgb(23 37 84 / var(--tw-bg-opacity));
 }
 
+.bg-gray-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
+}
+
+.bg-red-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 242 242 / var(--tw-bg-opacity));
+}
+
+.bg-white {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+}
+
 .object-cover {
   -o-object-fit: cover;
      object-fit: cover;
@@ -1002,6 +1015,10 @@ video {
   padding-right: 0px;
 }
 
+.pr-6 {
+  padding-right: 1.5rem;
+}
+
 .pr-8 {
   padding-right: 2rem;
 }
@@ -1014,14 +1031,14 @@ video {
   padding-top: 1rem;
 }
 
-.pr-6 {
-  padding-right: 1.5rem;
-}
-
 .text-left {
   text-align: left;
 }
 
+.text-center {
+  text-align: center;
+}
+
 .text-justify {
   text-align: justify;
 }
@@ -1055,48 +1072,42 @@ video {
   font-weight: 700;
 }
 
-.font-medium {
-  font-weight: 500;
-}
-
-.font-semibold {
-  font-weight: 600;
-}
-
 .font-light {
   font-weight: 300;
 }
 
+.font-medium {
+  font-weight: 500;
+}
+
 .font-normal {
   font-weight: 400;
 }
 
+.font-semibold {
+  font-weight: 600;
+}
+
+.uppercase {
+  text-transform: uppercase;
+}
+
+.leading-6 {
+  line-height: 1.5rem;
+}
+
 .leading-none {
   line-height: 1;
 }
 
-.text-red-400 {
-  --tw-text-opacity: 1;
-  color: rgb(248 113 113 / var(--tw-text-opacity));
-}
-
-.text-red-700 {
-  --tw-text-opacity: 1;
-  color: rgb(185 28 28 / var(--tw-text-opacity));
-}
-
-.text-red-700\/50 {
-  color: rgb(185 28 28 / 0.5);
-}
-
 .text-blue-950 {
   --tw-text-opacity: 1;
   color: rgb(23 37 84 / var(--tw-text-opacity));
 }
 
-.text-white {
+.text-gray-50 {
   --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity));
+  color: rgb(249 250 251 / var(--tw-text-opacity));
 }
 
 .text-gray-500 {
@@ -1104,10 +1115,28 @@ video {
   color: rgb(107 114 128 / var(--tw-text-opacity));
 }
 
+.text-red-700\/50 {
+  color: rgb(185 28 28 / 0.5);
+}
+
+.text-red-900 {
+  --tw-text-opacity: 1;
+  color: rgb(127 29 29 / var(--tw-text-opacity));
+}
+
+.text-white {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
 .line-through {
   text-decoration-line: line-through;
 }
 
+.underline-offset-2 {
+  text-underline-offset: 2px;
+}
+
 .shadow {
   --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
@@ -1122,7 +1151,7 @@ body {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
   --tw-text-opacity: 1;
-  color: rgb(107 114 128 / var(--tw-text-opacity));
+  color: rgb(75 85 99 / var(--tw-text-opacity));
   font-weight: 400;
 }
 
@@ -1130,22 +1159,35 @@ body {
   stroke-width: 1px;
   fill: none;
   --tw-text-opacity: 1;
-  color: rgb(55 65 81 / var(--tw-text-opacity));
-  stroke: #374151;
+  color: rgb(107 114 128 / var(--tw-text-opacity));
+  stroke: #6b7280;
+}
+
+a:hover .icon-tabler {
+  stroke: #1e3a8a;
 }
 
 .hover\:stroke-2:hover {
   stroke-width: 2;
 }
 
+.hover\:text-blue-900:hover {
+  --tw-text-opacity: 1;
+  color: rgb(30 58 138 / var(--tw-text-opacity));
+}
+
+.hover\:text-gray-950:hover {
+  --tw-text-opacity: 1;
+  color: rgb(3 7 18 / var(--tw-text-opacity));
+}
+
 .hover\:text-yellow-700:hover {
   --tw-text-opacity: 1;
   color: rgb(161 98 7 / var(--tw-text-opacity));
 }
 
-.hover\:text-gray-950:hover {
-  --tw-text-opacity: 1;
-  color: rgb(3 7 18 / var(--tw-text-opacity));
+.hover\:underline:hover {
+  text-decoration-line: underline;
 }
 
 .focus\:ring-2:focus {
@@ -1158,11 +1200,6 @@ body {
   display: flex;
 }
 
-.group:hover .group-hover\:text-gray-900 {
-  --tw-text-opacity: 1;
-  color: rgb(17 24 39 / var(--tw-text-opacity));
-}
-
 .group:hover .group-hover\:text-gray-950 {
   --tw-text-opacity: 1;
   color: rgb(3 7 18 / var(--tw-text-opacity));
@@ -1183,6 +1220,10 @@ body {
     display: none;
   }
 
+  .md\:w-1\/2 {
+    width: 50%;
+  }
+
   .md\:w-24 {
     width: 6rem;
   }
@@ -1217,6 +1258,10 @@ body {
     display: none;
   }
 
+  .lg\:w-1\/3 {
+    width: 33.333333%;
+  }
+
   .lg\:w-full {
     width: 100%;
   }
diff --git a/modules/ps_customeraccountlinks/ps_customeraccountlinks.tpl b/modules/ps_customeraccountlinks/ps_customeraccountlinks.tpl
index ee8832e..efb5b6f 100644
--- a/modules/ps_customeraccountlinks/ps_customeraccountlinks.tpl
+++ b/modules/ps_customeraccountlinks/ps_customeraccountlinks.tpl
@@ -24,19 +24,13 @@
  *}
 
 <div id="block_myaccount_infos" class="col-md-3 links wrapper">
-  <p class="h3 myaccount-title hidden-sm-down">
+  <p class="font-bold">
     <a class="text-uppercase" href="{$urls.pages.my_account}" rel="nofollow">
       {l s='Your account' d='Shop.Theme.Customeraccount'}
     </a>
   </p>
   <div class="title clearfix hidden-md-up" data-target="#footer_account_list" data-toggle="collapse">
-    <span class="h3">{l s='Your account' d='Shop.Theme.Customeraccount'}</span>
-    <span class="float-xs-right">
-      <span class="navbar-toggler collapse-icons">
-        <i class="material-icons add">&#xE313;</i>
-        <i class="material-icons remove">&#xE316;</i>
-      </span>
-    </span>
+    <span class="text-base">{l s='Your account' d='Shop.Theme.Customeraccount'}</span>
   </div>
   <ul class="account-list collapse" id="footer_account_list">
     {foreach from=$my_account_urls item=my_account_url}
diff --git a/modules/ps_customersignin/ps_customersignin.tpl b/modules/ps_customersignin/ps_customersignin.tpl
index 0383acf..35df7fd 100644
--- a/modules/ps_customersignin/ps_customersignin.tpl
+++ b/modules/ps_customersignin/ps_customersignin.tpl
@@ -23,15 +23,19 @@
  * International Registered Trademark & Property of PrestaShop SA
  *}
 <div id="_desktop_user_info" class="relative">
-  <div class="flex max-w-[200px] justify-end">
+  <div class="flex max-w-[200px] justify-end mx-4">
     {if $logged}
       <a
-        class="logout hidden-sm-down"
+        class="logout hidden-sm-down mr-4"
         href="{$logout_url}"
         rel="nofollow"
       >
-        <i class="material-icons">&#xE7FF;</i>
-        {l s='Sign out' d='Shop.Theme.Actions'}
+        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-logout" width="24" height="24" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round">
+          <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+          <path d="M14 8v-2a2 2 0 0 0 -2 -2h-7a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2 -2v-2"></path>
+          <path d="M9 12h12l-3 -3"></path>
+          <path d="M18 15l3 -3"></path>
+        </svg>
       </a>
       <a
         class="account"
@@ -39,8 +43,12 @@
         title="{l s='View my customer account' d='Shop.Theme.Customeraccount'}"
         rel="nofollow"
       >
-        <i class="material-icons hidden-md-up logged">&#xE7FF;</i>
-        <span class="hidden-sm-down">{$customerName}</span>
+        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-user-circle" width="24" height="24" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round">
+          <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+          <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
+          <path d="M12 10m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path>
+          <path d="M6.168 18.849a4 4 0 0 1 3.832 -2.849h4a4 4 0 0 1 3.834 2.855"></path>
+        </svg>
       </a>
     {else}
       <a 
diff --git a/modules/ps_linklist/views/templates/hook/linkblock.tpl b/modules/ps_linklist/views/templates/hook/linkblock.tpl
index 61a1bbb..c319477 100644
--- a/modules/ps_linklist/views/templates/hook/linkblock.tpl
+++ b/modules/ps_linklist/views/templates/hook/linkblock.tpl
@@ -22,16 +22,16 @@
  * @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="container">
+<div class="flex flex-wrap flex-1">
 {foreach $linkBlocks as $linkBlock}
-  <div class="flex flex-col mb-4">
+  <div class="flex flex-col mb-4 w-1/3">
     <div class="font-bold mb-4">
       {$linkBlock.title}
     </div>
-    <ul>
+    <ul class="flex flex-col">
       {foreach $linkBlock.links as $link}
-        <li>
-          <a id="{$link.id}-{$linkBlock.id}" class="{$link.class}" href="{$link.url}" title="{$link.description}" {if !empty($link.target)} target="{$link.target}" {/if}>
+        <li class="flex">
+          <a id="{$link.id}-{$linkBlock.id}" class="text-sm font-normal leading-6 {$link.class}" href="{$link.url}" title="{$link.description}" {if !empty($link.target)} target="{$link.target}" {/if}>
             {$link.title}
           </a>
         </li>
diff --git a/templates/_partials/breadcrumb.tpl b/templates/_partials/breadcrumb.tpl
index 037ceff..17ffcec 100644
--- a/templates/_partials/breadcrumb.tpl
+++ b/templates/_partials/breadcrumb.tpl
@@ -31,9 +31,9 @@
             <a itemprop="item" href="{$path.url}">
               <span itemprop="name">{$path.title}</span>
             </a>
-            <span class="mx-4">
-            /
-            </span>
+            {if !$smarty.foreach.breadcrumb.last}
+              <span class="mx-4">/</span>
+            {/if}
             <meta itemprop="position" content="{$smarty.foreach.breadcrumb.iteration}">
           </li>
         {/block}
diff --git a/templates/_partials/footer.tpl b/templates/_partials/footer.tpl
index d927149..7b98c75 100644
--- a/templates/_partials/footer.tpl
+++ b/templates/_partials/footer.tpl
@@ -27,13 +27,17 @@
       {hook h='displayFooterBefore'}
     {/block}
 </div>
-<div class="container mx-auto">
-    <div class="flex items-center">
+<div class="container mx-auto flex flex-col">
+    <div class="flex">
       <div class="w-48 h-48 flex flex-col justify-center">
           <a class="w-24 h-24" href="{$urls.base_url}">
             <img class="logo w-full aspect-square object-fit" src="{$shop.logo}" alt="{$shop.name}">
           </a>
-      <div class="h-96">
+      </div>
+      <div class="w-full flex flex-1">
+      {block name='hook_footer'}
+        {hook h='displayFooter'}
+      {/block}
       </div>
     </div>
     <div class="flex">
@@ -41,13 +45,9 @@
         {hook h='displayFooterAfter'}
       {/block}
     </div>
-    <div class="container">
-      <div class="flex justify-center py-8">
-          {block name='copyright_link'}
-            <a class="_blank" href="https://www.prestashop.com" target="_blank" rel="nofollow">
-              {l s='%copyright% %year% - Ecommerce software by %prestashop%' sprintf=['%prestashop%' => 'PrestaShop™', '%year%' => 'Y'|date, '%copyright%' => '©'] d='Shop.Theme.Global'}
-            </a>
-          {/block}
-      </div>
+    <div class="flex py-8">
+      <a href="{$shop.url}">
+      <span class="text-sm">© 2023 Brooksbingham Clothing</span>
+      </a>
     </div>
 </div>
diff --git a/templates/_partials/form-errors.tpl b/templates/_partials/form-errors.tpl
index 73e3948..8b9d251 100644
--- a/templates/_partials/form-errors.tpl
+++ b/templates/_partials/form-errors.tpl
@@ -23,11 +23,11 @@
  * International Registered Trademark & Property of PrestaShop SA
  *}
 {if $errors|count}
-  <div class="help-block">
+  <div class="help-block mb-4">
     {block name='form_errors'}
       <ul>
         {foreach $errors as $error}
-          <li class="alert alert-danger">{$error|nl2br nofilter}</li>
+          <li class="alert alert-danger px-4 py-2 border border-red-100 bg-red-50 text-red-900">{$error|nl2br nofilter}</li>
         {/foreach}
       </ul>
     {/block}
diff --git a/templates/_partials/form-fields.tpl b/templates/_partials/form-fields.tpl
index 32ffe5a..ce2d197 100644
--- a/templates/_partials/form-fields.tpl
+++ b/templates/_partials/form-fields.tpl
@@ -30,8 +30,8 @@
 
 {else}
 
-  <div class="form-group row {if !empty($field.errors)}has-error{/if}">
-    <label class="col-md-3 form-control-label{if $field.required} required{/if}">
+  <div class="form-group row {if !empty($field.errors)}has-error{/if} flex flex-col">
+    <label class="font-medium form-control-label{if $field.required} required{/if} mb-1">
       {if $field.type !== 'checkbox'}
         {$field.label}
       {/if}
@@ -88,9 +88,8 @@
 
         {block name='form_field_item_checkbox'}
           <span class="custom-checkbox">
-            <label>
+            <label class="font-light text-sm">
               <input name="{$field.name}" type="checkbox" value="1" {if $field.value}checked="checked"{/if} {if $field.required}required{/if}>
-              <span><i class="material-icons rtl-no-flip checkbox-checked">&#xE5CA;</i></span>
               {$field.label nofilter}
             </label>
           </span>
@@ -132,9 +131,9 @@
       {elseif $field.type === 'password'}
 
         {block name='form_field_item_password'}
-          <div class="input-group js-parent-focus">
+          <div class="input-group js-parent-focus relative">
             <input
-              class="form-control js-child-focus js-visible-password"
+              class="form-control js-child-focus js-visible-password px-2 py-1 border border-gray-300 w-full"
               name="{$field.name}"
               title="{l s='At least 5 characters long' d='Shop.Forms.Help'}"
               type="password"
@@ -142,17 +141,6 @@
               pattern=".{literal}{{/literal}5,{literal}}{/literal}"
               {if $field.required}required{/if}
             >
-            <span class="input-group-btn">
-              <button
-                class="btn"
-                type="button"
-                data-action="show-password"
-                data-text-show="{l s='Show' d='Shop.Theme.Actions'}"
-                data-text-hide="{l s='Hide' d='Shop.Theme.Actions'}"
-              >
-                {l s='Show' d='Shop.Theme.Actions'}
-              </button>
-            </span>
           </div>
         {/block}
 
@@ -160,7 +148,7 @@
 
         {block name='form_field_item_other'}
           <input
-            class="form-control"
+            class="form-control px-2 py-1 border border-gray-300 w-full"
             name="{$field.name}"
             type="{$field.type}"
             value="{$field.value}"
diff --git a/templates/catalog/_partials/miniatures/product.tpl b/templates/catalog/_partials/miniatures/product.tpl
index 600a5f4..68a9a0d 100644
--- a/templates/catalog/_partials/miniatures/product.tpl
+++ b/templates/catalog/_partials/miniatures/product.tpl
@@ -40,19 +40,19 @@
       </div>
     {/if}
   {/block}
-  <div class="product-description flex flex-col pt-4 group-hover:text-gray-950 gap-1">
+  <div class="product-description flex flex-col pt-4 group-hover:text-blue-900 gap-1">
     {block name='product_price_and_shipping'}
       <div class="flex w-full justify-between items-center">
         {if $product.has_discount}
-          <span class="regular-price line-through text-red-700/50 leading-none">{$product.regular_price}</span>
+          <span class="regular-price line-through leading-none font-medium">{$product.regular_price}</span>
         {/if}
-        <div class="font-semibold text-lg">
+        <div class="font-bold text-lg">
           <span>{$product.price}</span>
         </div>
       </div>
     {/block}
     {block name='product_name'}
-        <span class="text-xl" itemprop="name">{$product.name|truncate:30:'...'}</span>
+        <span class="text-xl font-medium" itemprop="name">{$product.name|truncate:30:'...'}</span>
     {/block}
   </div>
 </a>
diff --git a/templates/customer/_partials/customer-form.tpl b/templates/customer/_partials/customer-form.tpl
index dba04d0..f0100e1 100644
--- a/templates/customer/_partials/customer-form.tpl
+++ b/templates/customer/_partials/customer-form.tpl
@@ -28,7 +28,7 @@
   {/block}
 
 <form action="{block name='customer_form_actionurl'}{$action}{/block}" id="customer-form" class="js-customer-form" method="post">
-  <section>
+  <section class="flex flex-col gap-2">
     {block "form_fields"}
       {foreach from=$formFields item="field"}
         {block "form_field"}
@@ -40,10 +40,10 @@
   </section>
 
   {block name='customer_form_footer'}
-    <footer class="form-footer clearfix">
+    <footer class="flex w-full mt-8">
       <input type="hidden" name="submitCreate" value="1">
       {block "form_buttons"}
-        <button class="btn btn-primary form-control-submit float-xs-right" data-link-action="save-customer" type="submit">
+        <button class="py-2 w-full uppercase font-medium bg-blue-950 text-gray-50" data-link-action="save-customer" type="submit">
           {l s='Save' d='Shop.Theme.Actions'}
         </button>
       {/block}
diff --git a/templates/customer/_partials/login-form.tpl b/templates/customer/_partials/login-form.tpl
index 932480e..590af4b 100644
--- a/templates/customer/_partials/login-form.tpl
+++ b/templates/customer/_partials/login-form.tpl
@@ -29,8 +29,7 @@
   {/block}
 
   <form id="login-form" action="{block name='login_form_actionurl'}{$action}{/block}" method="post">
-
-    <section>
+    <section class="flex flex-col gap-2">
       {block name='login_form_fields'}
         {foreach from=$formFields item="field"}
           {block name='form_field'}
@@ -39,17 +38,17 @@
         {/foreach}
       {/block}
       <div class="forgot-password">
-        <a href="{$urls.pages.password}" rel="nofollow">
+        <a class="text-base hover:underline underline-offset-2 hover:text-blue-900" href="{$urls.pages.password}" rel="nofollow">
           {l s='Forgot your password?' d='Shop.Theme.Customeraccount'}
         </a>
       </div>
     </section>
 
     {block name='login_form_footer'}
-      <footer class="form-footer text-sm-center clearfix">
+      <footer class="form-footer w-full mt-8">
         <input type="hidden" name="submitLogin" value="1">
         {block name='form_buttons'}
-          <button id="submit-login" class="btn btn-primary" data-link-action="sign-in" type="submit" class="form-control-submit">
+          <button id="submit-login" class="uppercase font-medium py-2 text-center w-full bg-blue-950 text-gray-50" data-link-action="sign-in" type="submit" >
             {l s='Sign in' d='Shop.Theme.Actions'}
           </button>
         {/block}
diff --git a/templates/customer/authentication.tpl b/templates/customer/authentication.tpl
index 3d940b9..e2cd697 100644
--- a/templates/customer/authentication.tpl
+++ b/templates/customer/authentication.tpl
@@ -22,25 +22,27 @@
  * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
  * International Registered Trademark & Property of PrestaShop SA
  *}
-{extends file='page.tpl'}
-
-{block name='page_title'}
-  {l s='Log in to your account' d='Shop.Theme.Customeraccount'}
-{/block}
-
-{block name='page_content'}
+{extends file=$layout}
+{block name='content'}
+  <div class="flex items-center flex-col">
+    {block name='page_title'}
+      <span class="text-lg font-medium mb-4">
+      {l s='Log in to your account' d='Shop.Theme.Customeraccount'}
+      </span>
+    {/block}
     {block name='login_form_container'}
-      <section class="login-form">
+      <section class="login-form w-1/4">
         {render file='customer/_partials/login-form.tpl' ui=$login_form}
       </section>
       <hr/>
       {block name='display_after_login_form'}
         {hook h='displayCustomerLoginFormAfter'}
       {/block}
-      <div class="no-account">
-        <a href="{$urls.pages.register}" data-link-action="display-register-form">
+      <div class="no-account mt-2">
+        <a class="text-base hover:underline underline-offset-2 hover:text-blue-900 font-normal" href="{$urls.pages.register}" data-link-action="display-register-form">
           {l s='No account? Create one here' d='Shop.Theme.Customeraccount'}
         </a>
       </div>
     {/block}
+  </div>
 {/block}
diff --git a/templates/customer/registration.tpl b/templates/customer/registration.tpl
index 9f71703..d7539b4 100644
--- a/templates/customer/registration.tpl
+++ b/templates/customer/registration.tpl
@@ -22,18 +22,26 @@
  * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
  * International Registered Trademark & Property of PrestaShop SA
  *}
-{extends file='page.tpl'}
-
-{block name='page_title'}
-  {l s='Create an account' d='Shop.Theme.Customeraccount'}
-{/block}
-
-{block name='page_content'}
+{extends file=$layout}
+{block name='content'}
+  <div class="flex flex-col items-center">
+    {block name='page_title'}
+      <span class="text-lg font-medium mb-4">
+      {l s='Create an account' d='Shop.Theme.Customeraccount'}
+      </span>
+    {/block}
     {block name='register_form_container'}
+      <div class="w-full md:w-1/2 lg:w-1/3">
       {$hook_create_account_top nofilter}
       <section class="register-form">
-        <p>{l s='Already have an account?' d='Shop.Theme.Customeraccount'} <a href="{$urls.pages.authentication}">{l s='Log in instead!' d='Shop.Theme.Customeraccount'}</a></p>
         {render file='customer/_partials/customer-form.tpl' ui=$register_form}
+        <div class="flex justify-center mt-8">
+          <a class="text-base hover:underline underline-offset-2 hover:text-blue-900 font-normal" href="{$urls.pages.authentication}">
+            {l s='Already have an account? Log in instead!' d='Shop.Theme.Customeraccount'}
+          </a>
+        </div>
       </section>
+      </div>
     {/block}
+  </div>
 {/block}