diff --git a/.prettierignore b/.prettierignore
index b6d6f4433..58ad2bacf 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -2,4 +2,6 @@
 /*
 
 # Except packages:
-!/packages
\ No newline at end of file
+!/packages
+!/themes
+!/extensions
\ No newline at end of file
diff --git a/packages/evershop/bin/extension/index.js b/packages/evershop/bin/extension/index.js
index b68687e27..460238a22 100644
--- a/packages/evershop/bin/extension/index.js
+++ b/packages/evershop/bin/extension/index.js
@@ -5,7 +5,7 @@ const { getConfig } = require('@evershop/evershop/src/lib/util/getConfig');
 const { getCoreModules } = require('@evershop/evershop/bin/lib/loadModules');
 const { warning } = require('@evershop/evershop/src/lib/log/logger');
 
-let extensions = [];
+let extensions;
 
 function loadExtensions() {
   const coreModules = getCoreModules();
@@ -42,7 +42,7 @@ function loadExtensions() {
 }
 
 module.exports.getEnabledExtensions = function getEnabledExtensions() {
-  if (extensions.length === 0) {
+  if (extensions === undefined) {
     extensions = loadExtensions();
   }
   return extensions;
diff --git a/packages/evershop/src/components/frontStore/catalog/categoryView/filter/AttributeFilter.jsx b/packages/evershop/src/components/frontStore/catalog/categoryView/filter/AttributeFilter.jsx
index 233f3c1cf..7b79084ee 100644
--- a/packages/evershop/src/components/frontStore/catalog/categoryView/filter/AttributeFilter.jsx
+++ b/packages/evershop/src/components/frontStore/catalog/categoryView/filter/AttributeFilter.jsx
@@ -66,7 +66,7 @@ export function AttributeFilter({
   return (
     <>
       {availableAttributes.map((a) => (
-        <div key={a.attributeCode} className="attribute-filter mt-2">
+        <div key={a.attributeCode} className="attribute-filter mt-10">
           <div className="filter-item-title">
             <span className="font-medium">{a.attributeName}</span>
           </div>
@@ -79,7 +79,7 @@ export function AttributeFilter({
               );
 
               return (
-                <li key={o.optionId} className="mt-05 mr-05">
+                <li key={o.optionId} className="mt-1 mr-1">
                   <a
                     href="#"
                     className="flex justify-start items-center"
diff --git a/packages/evershop/src/components/frontStore/catalog/categoryView/filter/CategoryFilter.jsx b/packages/evershop/src/components/frontStore/catalog/categoryView/filter/CategoryFilter.jsx
index 322ab35ad..da50d19b1 100644
--- a/packages/evershop/src/components/frontStore/catalog/categoryView/filter/CategoryFilter.jsx
+++ b/packages/evershop/src/components/frontStore/catalog/categoryView/filter/CategoryFilter.jsx
@@ -61,7 +61,7 @@ export function CategoryFilter({ currentFilters, categories, updateFilter }) {
   }
 
   return (
-    <div className="category-filter mt-2">
+    <div className="category-filter mt-10">
       <div className="filter-item-title">
         <span className="font-medium">{_('Category')}</span>
       </div>
diff --git a/packages/evershop/src/components/frontStore/catalog/product/list/List.jsx b/packages/evershop/src/components/frontStore/catalog/product/list/List.jsx
index db6020151..cd4bb5240 100644
--- a/packages/evershop/src/components/frontStore/catalog/product/list/List.jsx
+++ b/packages/evershop/src/components/frontStore/catalog/product/list/List.jsx
@@ -19,16 +19,16 @@ export default function ProductList({ products = [], countPerRow = 3 }) {
   let className;
   switch (countPerRow) {
     case 3:
-      className = 'grid grid-cols-2 md:grid-cols-3 gap-2';
+      className = 'grid grid-cols-2 md:grid-cols-3 gap-10';
       break;
     case 4:
-      className = 'grid grid-cols-2 md:grid-cols-4 gap-2';
+      className = 'grid grid-cols-2 md:grid-cols-4 gap-10';
       break;
     case 5:
-      className = 'grid grid-cols-2 md:grid-cols-5 gap-2';
+      className = 'grid grid-cols-2 md:grid-cols-5 gap-10';
       break;
     default:
-      className = 'grid grid-cols-2 md:grid-cols-3 gap-2';
+      className = 'grid grid-cols-2 md:grid-cols-3 gap-10';
   }
 
   return (
diff --git a/packages/evershop/src/components/frontStore/catalog/product/list/Pagination.jsx b/packages/evershop/src/components/frontStore/catalog/product/list/Pagination.jsx
index 54c22824c..d0ac632b2 100644
--- a/packages/evershop/src/components/frontStore/catalog/product/list/Pagination.jsx
+++ b/packages/evershop/src/components/frontStore/catalog/product/list/Pagination.jsx
@@ -67,7 +67,7 @@ export function Pagination({ total, limit, currentPage }) {
 
   return (
     <div className="products-pagination">
-      <ul className="pagination flex justify-center space-x-1">
+      <ul className="pagination flex justify-center space-x-5">
         {currentPage > 1 && (
           <li className="page-item prev self-center">
             <button
diff --git a/packages/evershop/src/components/frontStore/catalog/product/list/Sorting.jsx b/packages/evershop/src/components/frontStore/catalog/product/list/Sorting.jsx
index e75678fee..c9d058652 100644
--- a/packages/evershop/src/components/frontStore/catalog/product/list/Sorting.jsx
+++ b/packages/evershop/src/components/frontStore/catalog/product/list/Sorting.jsx
@@ -58,8 +58,8 @@ export default function Sorting() {
   };
 
   return (
-    <div className="product-sorting mb-1">
-      <div className="product-sorting-inner flex justify-end items-center space-x-05">
+    <div className="product-sorting mb-10">
+      <div className="product-sorting-inner flex justify-end items-center space-x-2">
         <div>
           <span>{_('Sort By')}:</span>
         </div>
diff --git a/packages/evershop/src/components/frontStore/catalog/product/list/item/Name.jsx b/packages/evershop/src/components/frontStore/catalog/product/list/item/Name.jsx
index d5f94021d..ff6261a1d 100644
--- a/packages/evershop/src/components/frontStore/catalog/product/list/item/Name.jsx
+++ b/packages/evershop/src/components/frontStore/catalog/product/list/item/Name.jsx
@@ -3,7 +3,7 @@ import React from 'react';
 
 function Name({ name, url }) {
   return (
-    <div className="product-name product-list-name mt-1 mb-025">
+    <div className="product-name product-list-name mt-5 mb-1">
       <a href={url} className="font-bold hover:underline h5">
         <span>{name}</span>
       </a>
diff --git a/packages/evershop/src/components/frontStore/checkout/cart/Empty.jsx b/packages/evershop/src/components/frontStore/checkout/cart/Empty.jsx
index 9f2cada2c..b5f8229cf 100644
--- a/packages/evershop/src/components/frontStore/checkout/cart/Empty.jsx
+++ b/packages/evershop/src/components/frontStore/checkout/cart/Empty.jsx
@@ -16,14 +16,14 @@ export function Empty() {
         <div className="text-center">
           <h2>{_('Shopping cart')}</h2>
         </div>
-        <div className="mt-2 text-center">
+        <div className="mt-10 text-center">
           <span>{_('Your cart is empty!')}</span>
         </div>
-        <div className="flex justify-center mt-2">
+        <div className="flex justify-center mt-5">
           <Button
             url="/"
             title={
-              <span className="flex space-x-1">
+              <span className="flex space-x-3">
                 <span className="self-center">{_('CONTINUE SHOPPING')}</span>{' '}
                 <svg
                   className="self-center"
diff --git a/packages/evershop/src/components/frontStore/checkout/cart/items/ItemOptions.jsx b/packages/evershop/src/components/frontStore/checkout/cart/items/ItemOptions.jsx
index 009e7eced..d319c8f37 100644
--- a/packages/evershop/src/components/frontStore/checkout/cart/items/ItemOptions.jsx
+++ b/packages/evershop/src/components/frontStore/checkout/cart/items/ItemOptions.jsx
@@ -11,7 +11,7 @@ export function ItemOptions({ options = [] }) {
   const language = get(useAppState(), 'language', 'en');
 
   return (
-    <div className="cart-item-options mt-05">
+    <div className="cart-item-options mt-2">
       <ul className="list-basic">
         {options.map((o, i) => (
           // eslint-disable-next-line react/no-array-index-key
diff --git a/packages/evershop/src/components/frontStore/checkout/cart/items/ItemVariantOptions.jsx b/packages/evershop/src/components/frontStore/checkout/cart/items/ItemVariantOptions.jsx
index 48bb244e2..26181e6a0 100644
--- a/packages/evershop/src/components/frontStore/checkout/cart/items/ItemVariantOptions.jsx
+++ b/packages/evershop/src/components/frontStore/checkout/cart/items/ItemVariantOptions.jsx
@@ -7,7 +7,7 @@ export function ItemVariantOptions({ options = [] }) {
   }
 
   return (
-    <div className="cart-item-variant-options mt-05">
+    <div className="cart-item-variant-options mt-2">
       <ul>
         {options.map((o, i) => (
           // eslint-disable-next-line react/no-array-index-key
diff --git a/packages/evershop/src/components/frontStore/checkout/cart/items/Items.jsx b/packages/evershop/src/components/frontStore/checkout/cart/items/Items.jsx
index 129b7528d..109b5c251 100644
--- a/packages/evershop/src/components/frontStore/checkout/cart/items/Items.jsx
+++ b/packages/evershop/src/components/frontStore/checkout/cart/items/Items.jsx
@@ -54,7 +54,7 @@ function Items({ items, setting: { displayCheckoutPriceIncludeTax } }) {
             // eslint-disable-next-line react/no-array-index-key
             <tr key={index}>
               <td>
-                <div className="flex justify-start space-x-1 product-info">
+                <div className="flex justify-start space-x-5 product-info">
                   <div className="product-image flex justify-center items-center">
                     {item.thumbnail && (
                       <img
@@ -85,14 +85,14 @@ function Items({ items, setting: { displayCheckoutPriceIncludeTax } }) {
                     <ItemVariantOptions
                       options={JSON.parse(item.variantOptions || '[]')}
                     />
-                    <div className="mt-05">
+                    <div className="mt-2">
                       <a
                         onClick={async (e) => {
                           e.preventDefault();
                           await removeItem(item);
                         }}
                         href="#"
-                        className="text-textSubdued underline"
+                        className="underline text-gray-500"
                       >
                         <span>{_('Remove')}</span>
                       </a>
diff --git a/packages/evershop/src/components/frontStore/checkout/checkout/payment/paymentStep/StepContent.jsx b/packages/evershop/src/components/frontStore/checkout/checkout/payment/paymentStep/StepContent.jsx
index 889ca32a6..df1965204 100644
--- a/packages/evershop/src/components/frontStore/checkout/checkout/payment/paymentStep/StepContent.jsx
+++ b/packages/evershop/src/components/frontStore/checkout/checkout/payment/paymentStep/StepContent.jsx
@@ -81,13 +81,13 @@ export function StepContent({
 
   if (fetching) {
     return (
-      <div className="flex justify-center items-center p-3">
+      <div className="flex justify-center items-center p-5">
         <Spinner width={25} height={25} />
       </div>
     );
   }
   if (error) {
-    return <div className="p-2 text-critical">{error.message}</div>;
+    return <div className="p-5 text-red-700">{error.message}</div>;
   }
   return (
     <div>
@@ -100,7 +100,7 @@ export function StepContent({
         submitBtn={false}
         isJSON
       >
-        <h4 className="mb-1 mt-3">{_('Billing Address')}</h4>
+        <h4 className="mb-3 mt-7">{_('Billing Address')}</h4>
         <BillingAddress
           useShippingAddress={useShippingAddress}
           setUseShippingAddress={setUseShippingAddress}
@@ -123,16 +123,16 @@ export function StepContent({
           </div>
         )}
 
-        <h4 className="mb-1 mt-3">{_('Payment Method')}</h4>
+        <h4 className="mb-3 mt-7">{_('Payment Method')}</h4>
         {paymentMethods && paymentMethods.length > 0 && (
           <>
-            <div className="divide-y border rounded border-divider px-2 mb-2">
+            <div className="divide-y border rounded border-divider p-5 mb-5">
               {paymentMethods.map((method) => (
                 <div
                   key={method.code}
                   className="border-divider payment-method-list"
                 >
-                  <div className="py-2">
+                  <div className="py-5">
                     <Area id={`checkoutPaymentMethod${method.code}`} />
                   </div>
                 </div>
diff --git a/packages/evershop/src/components/frontStore/checkout/checkout/summary/Items.jsx b/packages/evershop/src/components/frontStore/checkout/checkout/summary/Items.jsx
index 6d77e5456..f9e8618eb 100644
--- a/packages/evershop/src/components/frontStore/checkout/checkout/summary/Items.jsx
+++ b/packages/evershop/src/components/frontStore/checkout/checkout/summary/Items.jsx
@@ -9,7 +9,7 @@ function ItemVariantOptions({ options = [] }) {
   }
 
   return (
-    <div className="cart-item-variant-options mt-05">
+    <div className="cart-item-variant-options mt-2">
       <ul>
         {options.map((o, i) => (
           // eslint-disable-next-line react/no-array-index-key
diff --git a/packages/evershop/src/components/frontStore/checkout/checkout/summary/Items.scss b/packages/evershop/src/components/frontStore/checkout/checkout/summary/Items.scss
index 59e7823a6..68da81b74 100644
--- a/packages/evershop/src/components/frontStore/checkout/checkout/summary/Items.scss
+++ b/packages/evershop/src/components/frontStore/checkout/checkout/summary/Items.scss
@@ -1,7 +1,6 @@
 .product-thumbnail {
   position: relative;
   width: 6rem;
-  height: 6rem;
   display: flex;
   justify-content: center;
   border: 1px solid var(--divider);
diff --git a/packages/evershop/src/components/frontStore/customer/checkout/Edit.jsx b/packages/evershop/src/components/frontStore/customer/checkout/Edit.jsx
index 035eabac4..8d8151cf0 100644
--- a/packages/evershop/src/components/frontStore/customer/checkout/Edit.jsx
+++ b/packages/evershop/src/components/frontStore/customer/checkout/Edit.jsx
@@ -52,11 +52,11 @@ export function Edit({
 
   return (
     <div className="">
-      <h4 className="mb-1 mt-1">{_('Contact information')}</h4>
+      <h4 className="mb-3 mt-3">{_('Contact information')}</h4>
       {!customer && (
-        <div className="mb-1">
+        <div className="mb-3">
           <span>{_('Already have an account?')}</span>{' '}
-          <a className="text-interactive hover:underline" href={loginUrl}>
+          <a className="text-blue-500 hover:underline" href={loginUrl}>
             {_('Login')}
           </a>
         </div>
diff --git a/packages/evershop/src/components/frontStore/stripe/checkout/CheckoutForm.jsx b/packages/evershop/src/components/frontStore/stripe/checkout/CheckoutForm.jsx
index 5dba0f935..0f4013a8e 100644
--- a/packages/evershop/src/components/frontStore/stripe/checkout/CheckoutForm.jsx
+++ b/packages/evershop/src/components/frontStore/stripe/checkout/CheckoutForm.jsx
@@ -167,7 +167,7 @@ export default function CheckoutForm({ stripePublishableKey }) {
 
   if (result.error) {
     return (
-      <div className="flex p-2 justify-center items-center text-critical">
+      <div className="flex p-5 justify-center items-center text-red-700">
         {error.message}
       </div>
     );
@@ -197,7 +197,7 @@ export default function CheckoutForm({ stripePublishableKey }) {
       </div>
       {/* Show any error that happens when processing the payment */}
       {error && (
-        <div className="card-error text-critical mb-2" role="alert">
+        <div className="card-error text-red-700 mb-2" role="alert">
           {error}
         </div>
       )}
@@ -208,7 +208,7 @@ export default function CheckoutForm({ stripePublishableKey }) {
         validationRules={[
           {
             rule: 'notEmpty',
-            message: 'Please complete the card information'
+            message: _('Please complete the card information')
           }
         ]}
       />
diff --git a/packages/evershop/src/components/frontStore/stripe/checkout/TestCards.jsx b/packages/evershop/src/components/frontStore/stripe/checkout/TestCards.jsx
index f367182be..ed3fb95d6 100644
--- a/packages/evershop/src/components/frontStore/stripe/checkout/TestCards.jsx
+++ b/packages/evershop/src/components/frontStore/stripe/checkout/TestCards.jsx
@@ -22,7 +22,7 @@ function TestCards({ showTestCard, testSuccess, testFailure }) {
             <div className="text-sm text-gray-600">
               Test card number: 4242 4242 4242 4242
             </div>
-            <div className="text-sm text-gray-600">Test card expiry: 04/24</div>
+            <div className="text-sm text-gray-600">Test card expiry: 04/29</div>
             <div className="text-sm text-gray-600">Test card CVC: 242</div>
           </div>
         )}
@@ -34,7 +34,7 @@ function TestCards({ showTestCard, testSuccess, testFailure }) {
             <div className="text-sm text-gray-600">
               Test card number: 4000 0000 0000 9995
             </div>
-            <div className="text-sm text-gray-600">Test card expiry: 04/24</div>
+            <div className="text-sm text-gray-600">Test card expiry: 04/29</div>
             <div className="text-sm text-gray-600">Test card CVC: 242</div>
           </div>
         )}
diff --git a/packages/evershop/src/modules/catalog/graphql/types/Category/Category.graphql b/packages/evershop/src/modules/catalog/graphql/types/Category/Category.graphql
index 7e94d42f5..f464c8520 100644
--- a/packages/evershop/src/modules/catalog/graphql/types/Category/Category.graphql
+++ b/packages/evershop/src/modules/catalog/graphql/types/Category/Category.graphql
@@ -2,7 +2,7 @@
 The `Category` type represents a category object.
 """
 type Category {
-  categoryId: ID!
+  categoryId: Int!
   uuid: String!
   name: String!
   status: Int!
diff --git a/packages/evershop/src/modules/catalog/graphql/types/Collection/Collection.graphql b/packages/evershop/src/modules/catalog/graphql/types/Collection/Collection.graphql
index de0015b8c..9009540a0 100644
--- a/packages/evershop/src/modules/catalog/graphql/types/Collection/Collection.graphql
+++ b/packages/evershop/src/modules/catalog/graphql/types/Collection/Collection.graphql
@@ -2,7 +2,7 @@
 The `Collection` type represents a product collection.
 """
 type Collection {
-  collectionId: ID!
+  collectionId: Int!
   uuid: String!
   name: String!
   description: String
diff --git a/packages/evershop/src/modules/catalog/pages/frontStore/categoryView/CategoryView.jsx b/packages/evershop/src/modules/catalog/pages/frontStore/categoryView/CategoryView.jsx
index 2aac83652..82d1dfd2f 100644
--- a/packages/evershop/src/modules/catalog/pages/frontStore/categoryView/CategoryView.jsx
+++ b/packages/evershop/src/modules/catalog/pages/frontStore/categoryView/CategoryView.jsx
@@ -3,7 +3,7 @@ import Area from '@components/common/Area';
 
 export default function CategoryView() {
   return (
-    <div className="page-width grid grid-cols-1 md:grid-cols-4 gap-2">
+    <div className="page-width grid grid-cols-1 md:grid-cols-4 gap-10">
       <Area id="leftColumn" className="md:col-span-1" />
       <Area id="rightColumn" className="md:col-span-3" />
     </div>
diff --git a/packages/evershop/src/modules/catalog/pages/frontStore/homepage/FeaturedCategories.jsx b/packages/evershop/src/modules/catalog/pages/frontStore/homepage/FeaturedCategories.jsx
index dfee9bb80..ba79f5527 100644
--- a/packages/evershop/src/modules/catalog/pages/frontStore/homepage/FeaturedCategories.jsx
+++ b/packages/evershop/src/modules/catalog/pages/frontStore/homepage/FeaturedCategories.jsx
@@ -3,14 +3,14 @@ import Button from '@components/frontStore/cms/Button';
 
 export default function FeaturedCategories() {
   return (
-    <div className="mt-15">
-      <div className="grid grid-cols-1 md:grid-cols-3 gap-2 page-width">
+    <div className="mt-12">
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-10 page-width">
         <div>
           <div className="text-center">
             <img src="/assets/homepage/banner/men-shoes.jpeg" alt="" />
           </div>
-          <h3 className="h4 uppercase mt-1 mb-1">Men shoes collection</h3>
-          <div className="mb-1">
+          <h3 className="h4 uppercase mt-5 mb-5">Men shoes collection</h3>
+          <div className="mb-5">
             <p>
               Constructed from luxury nylons, leathers, and custom hardware,
               featuring sport details such as hidden breathing vents, waterproof
@@ -23,8 +23,8 @@ export default function FeaturedCategories() {
           <div>
             <img src="/assets/homepage/banner/women-shoes.jpeg" alt="" />
           </div>
-          <h3 className="h4 uppercase mt-1 mb-1">Women shoes collection</h3>
-          <div className="mb-1">
+          <h3 className="h4 uppercase mt-5 mb-5">Women shoes collection</h3>
+          <div className="mb-5">
             <p>
               Constructed from luxury nylons, leathers, and custom hardware,
               featuring sport details such as hidden breathing vents, waterproof
@@ -37,8 +37,8 @@ export default function FeaturedCategories() {
           <div>
             <img src="/assets/homepage/banner/kid-shoes.jpeg" alt="" />
           </div>
-          <h3 className="h4 uppercase mt-1 mb-1">Men shoes collection</h3>
-          <div className="mb-1">
+          <h3 className="h4 uppercase mt-5 mb-5">Men shoes collection</h3>
+          <div className="mb-5">
             <p>
               Constructed from luxury nylons, leathers, and custom hardware,
               featuring sport details such as hidden breathing vents, waterproof
diff --git a/packages/evershop/src/modules/catalog/pages/frontStore/homepage/FeaturedProducts.jsx b/packages/evershop/src/modules/catalog/pages/frontStore/homepage/FeaturedProducts.jsx
index 3366e8be4..f304a3dee 100644
--- a/packages/evershop/src/modules/catalog/pages/frontStore/homepage/FeaturedProducts.jsx
+++ b/packages/evershop/src/modules/catalog/pages/frontStore/homepage/FeaturedProducts.jsx
@@ -7,9 +7,9 @@ export default function FeaturedProducts({ collection }) {
     return null;
   }
   return (
-    <div className="pt-3">
+    <div className="pt-10">
       <div className="page-width">
-        <h3 className="mt-3 mb-3 text-center uppercase h5 tracking-widest">
+        <h3 className="mt-20 mb-10 text-center uppercase h5 tracking-widest">
           {collection.name}
         </h3>
         <ProductList products={collection.products.items} countPerRow={4} />
diff --git a/packages/evershop/src/modules/catalog/pages/frontStore/productView/Form.jsx b/packages/evershop/src/modules/catalog/pages/frontStore/productView/Form.jsx
index ac3b170ac..acf4195a5 100644
--- a/packages/evershop/src/modules/catalog/pages/frontStore/productView/Form.jsx
+++ b/packages/evershop/src/modules/catalog/pages/frontStore/productView/Form.jsx
@@ -86,7 +86,7 @@ ToastMessage.propTypes = {
 
 function AddToCart({ stockAvaibility, loading = false, error }) {
   return (
-    <div className="add-to-cart mt-2">
+    <div className="add-to-cart mt-10">
       <div style={{ width: '8rem' }}>
         <Field
           type="text"
@@ -98,8 +98,8 @@ function AddToCart({ stockAvaibility, loading = false, error }) {
           formId="productForm"
         />
       </div>
-      {error && <div className="text-critical mt-1">{error}</div>}
-      <div className="mt-1">
+      {error && <div className="text-red-700 mt-5">{error}</div>}
+      <div className="mt-5">
         {stockAvaibility === true && (
           <Button
             title={_('ADD TO CART')}
diff --git a/packages/evershop/src/modules/catalog/pages/frontStore/productView/GeneralInfo.jsx b/packages/evershop/src/modules/catalog/pages/frontStore/productView/GeneralInfo.jsx
index 25211da85..fc5958080 100644
--- a/packages/evershop/src/modules/catalog/pages/frontStore/productView/GeneralInfo.jsx
+++ b/packages/evershop/src/modules/catalog/pages/frontStore/productView/GeneralInfo.jsx
@@ -10,7 +10,7 @@ export default function GeneralInfo({ product }) {
   return (
     <Area
       id="productViewGeneralInfo"
-      className="flex flex-col gap-1"
+      className="flex flex-col gap-5"
       coreComponents={[
         {
           component: { default: Name },
diff --git a/packages/evershop/src/modules/catalog/pages/frontStore/productView/Images.jsx b/packages/evershop/src/modules/catalog/pages/frontStore/productView/Images.jsx
index 6af94c724..091856fe7 100644
--- a/packages/evershop/src/modules/catalog/pages/frontStore/productView/Images.jsx
+++ b/packages/evershop/src/modules/catalog/pages/frontStore/productView/Images.jsx
@@ -51,7 +51,7 @@ export default function Images({ product: { uuid, image, gallery = [] } }) {
   return (
     <div className="product-single-media">
       <Current image={current} />
-      <ul className="more-view-thumbnail product-gallery mt-2 grid grid-cols-4 gap-1">
+      <ul className="more-view-thumbnail product-gallery mt-10 grid grid-cols-4 gap-5">
         {thumbs.map((i, j) => (
           <li key={j} className="flex justify-center items-center">
             <a
diff --git a/packages/evershop/src/modules/catalog/pages/frontStore/productView/Layout.jsx b/packages/evershop/src/modules/catalog/pages/frontStore/productView/Layout.jsx
index 99a57770c..04d30c497 100644
--- a/packages/evershop/src/modules/catalog/pages/frontStore/productView/Layout.jsx
+++ b/packages/evershop/src/modules/catalog/pages/frontStore/productView/Layout.jsx
@@ -6,7 +6,7 @@ export default function ProductPageLayout() {
     <div className="product-detail">
       <Area id="productPageTop" className="product-page-top" />
       <div className="product-page-middle page-width">
-        <div className="grid grid-cols-1 gap-3 md:grid-cols-2">
+        <div className="grid grid-cols-1 gap-10 md:grid-cols-2">
           <Area id="productPageMiddleLeft" />
           <Area id="productPageMiddleRight" />
         </div>
diff --git a/packages/evershop/src/modules/catalog/pages/frontStore/productView/Variants.jsx b/packages/evershop/src/modules/catalog/pages/frontStore/productView/Variants.jsx
index 678399817..d91b16990 100644
--- a/packages/evershop/src/modules/catalog/pages/frontStore/productView/Variants.jsx
+++ b/packages/evershop/src/modules/catalog/pages/frontStore/productView/Variants.jsx
@@ -145,15 +145,18 @@ export default function Variants({
     dispatchEvent(popStateEvent);
   };
 
+  if (!vs) {
+    return null;
+  }
   return (
-    <div className="variant variant-container grid grid-cols-1 gap-1 mt-2">
+    <div className="variant variant-container grid grid-cols-1 gap-3 mt-10">
       {attributes.map((a, i) => {
         const options = a.options.filter(
           (v, j, s) =>
             s.findIndex((o) => o.optionId === v.optionId) === j && v.productId
         );
         return (
-          <div key={a.attributeCode}>
+          <div key={a.attributeCode} className="mt-2">
             <input
               name={`variant_options[${i}][attribute_id]`}
               type="hidden"
@@ -164,10 +167,10 @@ export default function Variants({
               type="hidden"
               value={a.selectedOption}
             />
-            <div className="mb-05 text-textSubdued uppercase">
-              <span>{a.attribute_name}</span>
+            <div className="mb-2 font-semibold">
+              <span>{a.attributeName}</span>
             </div>
-            <ul className="variant-option-list flex justify-start gap-05 flex-wrap">
+            <ul className="variant-option-list flex justify-start gap-3 flex-wrap">
               {options.map((o) => {
                 let className = '';
                 if (a.selected && a.selectedOption === o.optionId) {
@@ -198,7 +201,7 @@ export default function Variants({
         );
       })}
       {error && (
-        <div className="variant-validate error text-critical">{error}</div>
+        <div className="variant-validate error text-red-700">{error}</div>
       )}
     </div>
   );
@@ -239,8 +242,8 @@ Variants.propTypes = {
 };
 
 export const layout = {
-  areaId: 'productPageMiddleRight',
-  sortOrder: 40
+  areaId: 'productSinglePageForm',
+  sortOrder: 35
 };
 
 export const query = `
diff --git a/packages/evershop/src/modules/checkout/pages/frontStore/cart/ShoppingCart.jsx b/packages/evershop/src/modules/checkout/pages/frontStore/cart/ShoppingCart.jsx
index 571718ad4..8d3e6e7f4 100644
--- a/packages/evershop/src/modules/checkout/pages/frontStore/cart/ShoppingCart.jsx
+++ b/packages/evershop/src/modules/checkout/pages/frontStore/cart/ShoppingCart.jsx
@@ -46,7 +46,7 @@ export default function ShoppingCart({ cart, setting, removeUrl }) {
             ]}
           />
           <div className="cart-page-middle">
-            <div className="grid gap-4 grid-cols-1 md:grid-cols-4">
+            <div className="grid gap-10 grid-cols-1 md:grid-cols-4">
               <Area
                 id="shoppingCartLeft"
                 className="col-span-1 md:col-span-3"
diff --git a/packages/evershop/src/modules/checkout/pages/frontStore/cart/Summary.jsx b/packages/evershop/src/modules/checkout/pages/frontStore/cart/Summary.jsx
index 321b9f2b2..99443f92c 100644
--- a/packages/evershop/src/modules/checkout/pages/frontStore/cart/Summary.jsx
+++ b/packages/evershop/src/modules/checkout/pages/frontStore/cart/Summary.jsx
@@ -8,7 +8,7 @@ import { Total } from '@components/frontStore/checkout/checkout/summary/cart/Tot
 
 function Subtotal({ subTotal }) {
   return (
-    <div className="flex justify-between gap-3">
+    <div className="flex justify-between gap-5">
       <div>{_('Sub total')}</div>
       <div className="text-right">{subTotal.text}</div>
     </div>
@@ -28,7 +28,7 @@ function Discount({ discountAmount, coupon }) {
     return null;
   }
   return (
-    <div className="flex justify-between gap-3">
+    <div className="flex justify-between gap-5">
       <div>{_('Discount(${coupon})', { coupon })}</div>
       <div className="text-right">{discountAmount.text}</div>
     </div>
@@ -63,7 +63,7 @@ function Summary({
   }
   return (
     <div className="summary">
-      <div className="grid grid-cols-1 gap-2">
+      <div className="grid grid-cols-1 gap-5">
         <h4>{_('Order summary')}</h4>
         <Area
           id="shoppingCartSummary"
@@ -112,7 +112,7 @@ function Summary({
           ]}
         />
       </div>
-      <div className="shopping-cart-checkout-btn flex justify-between mt-2">
+      <div className="shopping-cart-checkout-btn flex justify-between mt-5">
         <Button url={checkoutUrl} title={_('CHECKOUT')} variant="primary" />
       </div>
     </div>
diff --git a/packages/evershop/src/modules/checkout/pages/frontStore/checkout/Checkout.jsx b/packages/evershop/src/modules/checkout/pages/frontStore/checkout/Checkout.jsx
index 576467e0d..fcc07b134 100644
--- a/packages/evershop/src/modules/checkout/pages/frontStore/checkout/Checkout.jsx
+++ b/packages/evershop/src/modules/checkout/pages/frontStore/checkout/Checkout.jsx
@@ -20,7 +20,7 @@ function Steps() {
 function Breadcrumb() {
   const steps = useCheckoutSteps();
   return (
-    <div className="mb-2 mt-1 flex checkout-breadcrumb">
+    <div className="mb-5 mt-3 flex checkout-breadcrumb">
       {steps.map((step, index) => {
         const separator =
           index < steps.length - 1 ? (
@@ -57,12 +57,12 @@ function CompletedSteps() {
   }
 
   return (
-    <div className="mt-1">
-      <div className="checkout-completed-steps border rounded px-2 border-divider divide-y">
+    <div className="mt-3">
+      <div className="checkout-completed-steps border rounded px-5 border-divider divide-y">
         {completedSteps.map((step) => (
           <div
             key={step.id}
-            className="grid gap-1 grid-cols-4 py-1 border-divider"
+            className="grid gap-2 grid-cols-4 py-5 border-divider"
           >
             <div className="col-span-1">
               <span>{step.previewTitle}</span>
@@ -105,7 +105,7 @@ export default function CheckoutPage({
         getPaymentMethodAPI={getPaymentMethodAPI}
         checkoutSuccessUrl={checkoutSuccessUrl}
       >
-        <div className="page-width grid grid-cols-1 md:grid-cols-2 gap-3">
+        <div className="page-width grid grid-cols-1 md:grid-cols-2 gap-10">
           <Area
             id="checkoutPageLeft"
             coreComponents={[
diff --git a/packages/evershop/src/modules/checkout/pages/frontStore/checkout/ShippingMethods.jsx b/packages/evershop/src/modules/checkout/pages/frontStore/checkout/ShippingMethods.jsx
index ac6689b69..8ef1b6c83 100644
--- a/packages/evershop/src/modules/checkout/pages/frontStore/checkout/ShippingMethods.jsx
+++ b/packages/evershop/src/modules/checkout/pages/frontStore/checkout/ShippingMethods.jsx
@@ -172,19 +172,19 @@ export default function ShippingMethods({
           </svg>
         </div>
       )}
-      <h4 className="mt-3 mb-1">{_('Shipping Method')}</h4>
+      <h4 className="mt-5 mb-3">{_('Shipping Method')}</h4>
       {addressProvided === true && methods.length === 0 && (
-        <div className="text-center p-3 border border-divider rounded text-textSubdued">
+        <div className="text-center p-5 border border-divider rounded text-textSubdued">
           {_('Sorry, there is no available method for your address')}
         </div>
       )}
       {addressProvided === false && (
-        <div className="text-center p-3 border border-divider rounded text-textSubdued">
+        <div className="text-center p-5 border border-divider rounded text-textSubdued">
           {_('Please enter a shipping address in order to see shipping quotes')}
         </div>
       )}
       {methods.length > 0 && (
-        <div className="divide-y border rounded border-divider p-1 mb-2">
+        <div className="divide-y border rounded border-divider p-3 mb-5">
           <Field
             type="radio"
             name="method"
diff --git a/packages/evershop/src/modules/checkout/pages/frontStore/checkoutSuccess/CheckoutSuccess.jsx b/packages/evershop/src/modules/checkout/pages/frontStore/checkoutSuccess/CheckoutSuccess.jsx
index fa1b22220..3e2939f13 100644
--- a/packages/evershop/src/modules/checkout/pages/frontStore/checkoutSuccess/CheckoutSuccess.jsx
+++ b/packages/evershop/src/modules/checkout/pages/frontStore/checkoutSuccess/CheckoutSuccess.jsx
@@ -4,7 +4,7 @@ import './CheckoutSuccess.scss';
 
 export default function CheckoutSuccessPage() {
   return (
-    <div className="page-width grid grid-cols-1 md:grid-cols-2 gap-3">
+    <div className="page-width grid grid-cols-1 md:grid-cols-2 gap-10">
       <Area id="checkoutSuccessPageLeft" />
       <Area id="checkoutSuccessPageRight" />
     </div>
diff --git a/packages/evershop/src/modules/checkout/pages/frontStore/checkoutSuccess/CustomerInfo.jsx b/packages/evershop/src/modules/checkout/pages/frontStore/checkoutSuccess/CustomerInfo.jsx
index 82c3846dd..c560d4d64 100644
--- a/packages/evershop/src/modules/checkout/pages/frontStore/checkoutSuccess/CustomerInfo.jsx
+++ b/packages/evershop/src/modules/checkout/pages/frontStore/checkoutSuccess/CustomerInfo.jsx
@@ -46,11 +46,11 @@ export default function CustomerInfo({
         </div>
       </h3>
 
-      <div className="customer-info mt-3 mb-2">
-        <div className="grid grid-cols-2 gap-3">
-          <div className="grid grid-cols-1 gap-3">
-            <div className="mb-2">
-              <div className="mb-075">
+      <div className="customer-info mt-7 mb-5">
+        <div className="grid grid-cols-2 gap-5">
+          <div className="grid grid-cols-1 gap-5">
+            <div className="mb-5">
+              <div className="mb-5">
                 <h3>{_('Contact information')}</h3>
               </div>
               <div className="text-textSubdued">
@@ -59,7 +59,7 @@ export default function CustomerInfo({
               <div className="text-textSubdued">{customerEmail}</div>
             </div>
             <div>
-              <div className="mb-075">
+              <div className="mb-5">
                 <h3>{_('Shipping Address')}</h3>
               </div>
               <div className="text-textSubdued">
@@ -67,15 +67,15 @@ export default function CustomerInfo({
               </div>
             </div>
           </div>
-          <div className="grid grid-cols-1 gap-3">
-            <div className="mb-2">
-              <div className="mb-075">
+          <div className="grid grid-cols-1 gap-5">
+            <div className="mb-5">
+              <div className="mb-5">
                 <h3>{_('Payment Method')}</h3>
               </div>
               <div className="text-textSubdued">{paymentMethodName}</div>
             </div>
             <div>
-              <div className="mb-075">
+              <div className="mb-5">
                 <h3>{_('Billing Address')}</h3>
               </div>
               <div className="text-textSubdued">
diff --git a/packages/evershop/src/modules/cms/pages/frontStore/all/Breadcrumb.jsx b/packages/evershop/src/modules/cms/pages/frontStore/all/Breadcrumb.jsx
index 5a5555c9e..6fec69f18 100644
--- a/packages/evershop/src/modules/cms/pages/frontStore/all/Breadcrumb.jsx
+++ b/packages/evershop/src/modules/cms/pages/frontStore/all/Breadcrumb.jsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 
 function Breadcrumb({ pageInfo: { breadcrumbs } }) {
   return breadcrumbs.length ? (
-    <div className="page-width my-2">
+    <div className="page-width my-10">
       {breadcrumbs.map((breadcrumb, index) =>
         index === breadcrumbs.length - 1 ? (
           <span key={index}>{breadcrumb.title}</span>
diff --git a/packages/evershop/src/modules/cms/pages/frontStore/all/Layout.jsx b/packages/evershop/src/modules/cms/pages/frontStore/all/Layout.jsx
index d65b168eb..fc54cf2e4 100644
--- a/packages/evershop/src/modules/cms/pages/frontStore/all/Layout.jsx
+++ b/packages/evershop/src/modules/cms/pages/frontStore/all/Layout.jsx
@@ -17,7 +17,7 @@ export default function Layout() {
               component: { default: Area },
               props: {
                 id: 'icon-wrapper',
-                className: 'icon-wrapper flex justify-between space-x-1'
+                className: 'icon-wrapper flex justify-between space-x-5'
               },
               sortOrder: 20
             }
diff --git a/packages/evershop/src/modules/cms/pages/frontStore/all/Menu.jsx b/packages/evershop/src/modules/cms/pages/frontStore/all/Menu.jsx
index 2fd1cd0e4..ec5c45c48 100644
--- a/packages/evershop/src/modules/cms/pages/frontStore/all/Menu.jsx
+++ b/packages/evershop/src/modules/cms/pages/frontStore/all/Menu.jsx
@@ -5,7 +5,7 @@ import './Menu.scss';
 export default function Menu({ menu: { items } }) {
   return (
     <div className="main-menu self-center hidden md:block">
-      <ul className="nav flex space-x-275 justify-content-center">
+      <ul className="nav flex space-x-7 justify-content-center">
         {items.map((i, index) => (
           // eslint-disable-next-line react/no-array-index-key
           <li className="nav-item" key={index}>
diff --git a/packages/evershop/src/modules/cms/services/tailwind.frontStore.config.js b/packages/evershop/src/modules/cms/services/tailwind.frontStore.config.js
index b0e9860f6..9f06aead8 100644
--- a/packages/evershop/src/modules/cms/services/tailwind.frontStore.config.js
+++ b/packages/evershop/src/modules/cms/services/tailwind.frontStore.config.js
@@ -1,120 +1,10 @@
 module.exports = {
-  corePlugins: {
-    // ...
-    lineHeight: false,
-    placeholder: false,
-    placeholderOpacity: false,
-    textOpacity: false,
-    backgroundOpacity: false,
-    backgroundPosition: false,
-    backgroundImage: false,
-    gradientColorStops: false,
-    borderOpacity: false,
-    divideColor: false,
-    divideOpacity: false,
-    ringOpacity: false,
-    ringOffsetColor: false,
-    mixBlendMode: false,
-    backgroundBlendMode: false,
-    brightness: false,
-    contrast: false,
-    dropShadow: false,
-    hueRotate: false,
-    invert: false,
-    saturate: false,
-    sepia: false,
-    backdropFilter: false,
-    backdropBlur: false,
-    backdropBrightness: false,
-    backdropContrast: false,
-    backdropGrayscale: false,
-    backdropHueRotate: false,
-    backdropInvert: false,
-    backdropOpacity: false,
-    backdropSaturate: false,
-    backdropSepia: false,
-    transitionDelay: false,
-    transform: false,
-    transformOrigin: false,
-    scale: false,
-    rotate: false,
-    translate: false,
-    skew: false
-  },
   theme: {
     fontFamily: {
       sans: 'Helvetica,Helvetica Neue,Arial,Lucida Grande,sans-serif'
     },
     fontSize: {
       base: '.875rem'
-    },
-    colors: {
-      white: '#ffffff',
-      primary: '#3a3a3a',
-      secondary: '#111213',
-      surface: '#111213',
-      onSurface: '#111213',
-      interactive: '#2c6ecb',
-      critical: '#fa4545',
-      warning: '#FFC453',
-      highlight: '#5BCDDA',
-      success: '#008060',
-      decorative: '#FFC96B',
-      border: '#8c9196',
-      icon: '#5c5f62',
-      divider: '#e1e3e5',
-      textSubdued: '#737373',
-      button: '#3a3a3a'
-    },
-    spacing: {
-      0: '0px',
-      '025': '.25rem',
-      '05': '.5rem',
-      '075': '.75rem',
-      1: '1rem',
-      125: '1.25rem',
-      15: '1.5rem',
-      2: '2rem',
-      225: '2.25rem',
-      25: '2.5rem',
-      275: '2.75rem',
-      3: '3rem',
-      4: '4rem'
-    },
-    margin: {
-      0: '0px',
-      '025': '.25rem',
-      '05': '.5rem',
-      '075': '.75rem',
-      1: '1rem',
-      125: '1.25rem',
-      15: '1.5rem',
-      2: '2rem',
-      225: '2.25rem',
-      25: '2.5rem',
-      275: '2.75rem',
-      3: '3rem',
-      4: '4rem'
-    },
-    borderRadius: {
-      DEFAULT: '0.25rem',
-      100: '100%'
-    },
-    borderWidth: {
-      0: '0px',
-      DEFAULT: '1px'
-    },
-    opacity: {},
-    boxShadow: {
-      DEFAULT: '0 0 0 1px rgba(63,63,68,.05),0 1px 3px 0 rgba(63,63,68,.15)'
-    }
-  },
-  variants: {
-    extend: {
-      borderWidth: ['first', 'last'],
-      margin: ['first', 'last'],
-      padding: ['first', 'last']
     }
-  },
-  plugins: []
+  }
 };
diff --git a/packages/evershop/src/modules/cod/pages/frontStore/checkout/CashOnDelivery.jsx b/packages/evershop/src/modules/cod/pages/frontStore/checkout/CashOnDelivery.jsx
index ea9764f55..2b6929000 100644
--- a/packages/evershop/src/modules/cod/pages/frontStore/checkout/CashOnDelivery.jsx
+++ b/packages/evershop/src/modules/cod/pages/frontStore/checkout/CashOnDelivery.jsx
@@ -39,7 +39,7 @@ export default function CashOnDeliveryMethod() {
 
   return (
     <div>
-      <div className="flex justify-start items-center gap-1">
+      <div className="flex justify-start items-center gap-5">
         {(!selectedPaymentMethod || selectedPaymentMethod.code !== 'cod') && (
           <a
             href="#"
diff --git a/packages/evershop/src/modules/customer/pages/frontStore/account/AccountDetails.jsx b/packages/evershop/src/modules/customer/pages/frontStore/account/AccountDetails.jsx
index 3b0c56de2..a3b8c6c0b 100644
--- a/packages/evershop/src/modules/customer/pages/frontStore/account/AccountDetails.jsx
+++ b/packages/evershop/src/modules/customer/pages/frontStore/account/AccountDetails.jsx
@@ -7,14 +7,14 @@ export default function AccountDetails({ account }) {
   return (
     <div className="account-details">
       <div className="account-details-inner">
-        <div className="grid grid-cols-1 gap-1">
-          <div className="account-details-name flex gap-1">
+        <div className="grid grid-cols-1 gap-3">
+          <div className="account-details-name flex gap-3">
             <div>
               <User width={20} height={20} />
             </div>
             <div>{account.fullName}</div>
           </div>
-          <div className="account-details-email flex gap-1">
+          <div className="account-details-email flex gap-3">
             <div>
               <EmailIcon width={20} height={20} />
             </div>
diff --git a/packages/evershop/src/modules/customer/pages/frontStore/account/Layout.jsx b/packages/evershop/src/modules/customer/pages/frontStore/account/Layout.jsx
index 3f2b6853c..a8de1dfd6 100644
--- a/packages/evershop/src/modules/customer/pages/frontStore/account/Layout.jsx
+++ b/packages/evershop/src/modules/customer/pages/frontStore/account/Layout.jsx
@@ -19,18 +19,18 @@ export default function Layout({ logoutUrl }) {
   };
   return (
     <div>
-      <h1 className="text-center">{_('My Account')}</h1>
-      <div className="page-width mt-3 grid grid-cols-1 md:grid-cols-3 gap-3">
+      <h1 className="text-center mb-10">{_('My Account')}</h1>
+      <div className="page-width mt-5 grid grid-cols-1 md:grid-cols-3 gap-10">
         <div className="col-span-1 md:col-span-2">
-          <div className="border-b mb-1 border-textSubdued">
+          <div className="border-b mb-3 border-textSubdued">
             <h2>{_('Order History')}</h2>
           </div>
           <Area id="accountPageLeft" noOuter />
         </div>
         <div className="col-span-1">
-          <div className="border-b mb-1 flex justify-between items-center  border-textSubdued">
+          <div className="border-b mb-5 flex justify-between items-center  border-textSubdued">
             <h2>{_('Account Details')}</h2>
-            <a className="text-interactive" href="#" onClick={(e) => logout(e)}>
+            <a className="text-blue-500" href="#" onClick={(e) => logout(e)}>
               {_('Logout')}
             </a>
           </div>
diff --git a/packages/evershop/src/modules/customer/pages/frontStore/account/OrderHistory.jsx b/packages/evershop/src/modules/customer/pages/frontStore/account/OrderHistory.jsx
index 6d3b05319..18c72ca37 100644
--- a/packages/evershop/src/modules/customer/pages/frontStore/account/OrderHistory.jsx
+++ b/packages/evershop/src/modules/customer/pages/frontStore/account/OrderHistory.jsx
@@ -12,7 +12,7 @@ export default function OrderHistory({ customer: { orders = [] } }) {
         </div>
       )}
       {orders.map((order) => (
-        <div className="order-history-order border-divider py-2">
+        <div className="order-history-order border-divider py-5">
           <Order order={order} key={order.orderId} />
         </div>
       ))}
diff --git a/packages/evershop/src/modules/paypal/pages/frontStore/checkout/Paypal.jsx b/packages/evershop/src/modules/paypal/pages/frontStore/checkout/Paypal.jsx
index 20241d59e..3f428f2b8 100644
--- a/packages/evershop/src/modules/paypal/pages/frontStore/checkout/Paypal.jsx
+++ b/packages/evershop/src/modules/paypal/pages/frontStore/checkout/Paypal.jsx
@@ -4,7 +4,6 @@ import { useCheckout } from '@components/common/context/checkout';
 import PaypalLogo from '@components/frontStore/paypal/PaypalLogo';
 import { _ } from '@evershop/evershop/src/lib/locale/translate';
 
-
 export function Paypal({
   getAccessTokenAPI,
   createOrderAPI,
@@ -68,8 +67,8 @@ export function Paypal({
 
   return (
     <div>
-      {error && <div className="text-critical mb-1">{error}</div>}
-      <div className="p-2 text-center border rounded mt-1 border-divider">
+      {error && <div className="text-red-700 mb-5">{error}</div>}
+      <div className="p-10 text-center border rounded mt-3 border-divider">
         {_('You will be redirected to PayPal')}
       </div>
     </div>
@@ -93,7 +92,7 @@ export default function PaypalMethod({ getAccessTokenAPI, createOrderAPI }) {
 
   return (
     <div>
-      <div className="flex justify-start items-center gap-1">
+      <div className="flex justify-start items-center gap-5">
         {(!selectedPaymentMethod ||
           selectedPaymentMethod.code !== 'paypal') && (
           <a
diff --git a/packages/evershop/src/modules/promotion/pages/frontStore/cart/Coupon.jsx b/packages/evershop/src/modules/promotion/pages/frontStore/cart/Coupon.jsx
index f970a59c4..d58cadde1 100644
--- a/packages/evershop/src/modules/promotion/pages/frontStore/cart/Coupon.jsx
+++ b/packages/evershop/src/modules/promotion/pages/frontStore/cart/Coupon.jsx
@@ -11,7 +11,7 @@ export default function CouponForm({ cart: { applyCouponApi } }) {
   const AppContextDispatch = useAppDispatch();
 
   return (
-    <div className="mt-4">
+    <div className="mt-10">
       <Form
         method="POST"
         isJSON
@@ -34,7 +34,7 @@ export default function CouponForm({ cart: { applyCouponApi } }) {
         id="couponForm"
       >
         <p style={{ fontWeight: 600 }}>{_('Promotion code?')}</p>
-        <div className="grid grid-cols-3 gap-2" style={{ width: '300px' }}>
+        <div className="grid grid-cols-3 gap-5" style={{ width: '300px' }}>
           <div className="col-span-2">
             <Field
               type="text"
diff --git a/packages/evershop/src/modules/stripe/pages/frontStore/checkout/Stripe.jsx b/packages/evershop/src/modules/stripe/pages/frontStore/checkout/Stripe.jsx
index 40420f499..4970bf457 100644
--- a/packages/evershop/src/modules/stripe/pages/frontStore/checkout/Stripe.jsx
+++ b/packages/evershop/src/modules/stripe/pages/frontStore/checkout/Stripe.jsx
@@ -20,7 +20,7 @@ const stripeLoader = (publishKey) => {
 function StripeApp({ stripePublishableKey }) {
   return (
     // eslint-disable-next-line react/jsx-filename-extension
-    <div className="App">
+    <div className="mt-5">
       <Elements stripe={stripeLoader(stripePublishableKey)}>
         <CheckoutForm stripePublishableKey={stripePublishableKey} />
       </Elements>
@@ -42,7 +42,7 @@ export default function StripeMethod({ setting }) {
 
   return (
     <div>
-      <div className="flex justify-start items-center gap-1">
+      <div className="flex justify-start items-center gap-5">
         {(!selectedPaymentMethod ||
           selectedPaymentMethod.code !== 'stripe') && (
           <a