diff --git a/storefront/app/app.vue b/storefront/app/app.vue
index 72b3ee50..ee5b22b9 100644
--- a/storefront/app/app.vue
+++ b/storefront/app/app.vue
@@ -1,9 +1,9 @@
 <template>
   <div
       class="main"
-      :style="{ 'padding-top': uiConfig.isHeaderFixed ? '83px': '0' }"
+      :style="{ 'padding-top': uiConfig.isHeaderFixed ? '84px': '0' }"
   >
-    <nuxt-loading-indicator :color="accentColor" />
+    <nuxt-loading-indicator :color="primaryColor" />
     <base-header />
     <ui-breadcrumbs v-if="uiConfig.showBreadcrumbs && showBreadcrumbs" />
     <transition
@@ -134,7 +134,7 @@ if (locale.value !== cookieLocale.value) {
   }
 }
 
-const accentColor = ref('');
+const primaryColor = ref('');
 
 const getCssVariable = (name: string): string => {
   if (import.meta.client) {
@@ -166,7 +166,7 @@ onMounted( async () => {
       { immediate: true }
   );
 
-  accentColor.value = getCssVariable('--accent');
+  primaryColor.value = getCssVariable('--primary');
 
   useHead({
     htmlAttrs: {
@@ -184,7 +184,7 @@ onBeforeUnmount(() => {
 
 <style lang="scss">
 .main {
-  background-color: $light;
+  background-color: $main_hover;
   position: relative;
 }
 
diff --git a/storefront/app/assets/styles/global/variables.scss b/storefront/app/assets/styles/global/variables.scss
index 8e783340..e66d44e7 100644
--- a/storefront/app/assets/styles/global/variables.scss
+++ b/storefront/app/assets/styles/global/variables.scss
@@ -1,45 +1,105 @@
 $font_default: 'Inter', sans-serif;
-$default_border_radius: 4px;
 
-$white: var(--color-neutral-50, #fff);
-$light: var(--color-neutral-100, #f8f7fc);
-$black: var(--color-neutral-900, #000);
+$default_border_radius: 8px;
+$less_border_radius: 4px;
 
-$accent: var(--color-accent, #111827);
-$accentDark: var(--color-accent-dark, #242c38);
-$accentLight: var(--color-accent-light, #465267);
-$accentDisabled: var(--color-accent-disabled, #826fa2);
-$accentSmooth: var(--color-accent-smooth, #656bd1);
-$accentNeon: var(--color-accent-neon, #F200FF);
-$contrast: var(--color-contrast, #FFC107);
-$error: var(--color-error, #f13838);
+$main: var(--main);
+$main_hover: var(--main_hover);
+$title_bg: var(--title_bg);
+$primary: var(--primary);
+$primary_hover: var(--primary_hover);
+$primary_dark: var(--primary_dark);
+$primary_gradient: var(--primary_gradient);
+$primary_shadow: var(--primary_shadow);
+$primary_shadow_hover: var(--primary_shadow_hover);
+$blackout: var(--blackout);
 
-$background: var(--color-background);
-$background-secondary: var(--color-background-secondary);
-$background-elevated: var(--color-background-elevated);
+$secondary: var(--secondary);
+$secondary_hover: var(--secondary_hover);
 
-$text-primary: var(--color-text-primary);
-$text-secondary: var(--color-text-secondary);
-$text-tertiary: var(--color-text-tertiary);
-$text-accent: var(--color-text-accent);
-$text-inverse: var(--color-text-inverse);
+$disabled: var(--disabled);
+$disabled_secondary: var(--disabled_secondary);
+$border: var(--border);
+$border_hover: var(--border_hover);
 
-$border: var(--color-border);
-$border-hover: var(--color-border-hover);
-$divider: var(--color-divider);
+$text: var(--text);
+$link_primary: var(--link_primary);
+$link_primary_hover: var(--link_primary_hover);
+$link_secondary: var(--link_secondary);
+$link_secondary_hover: var(--link_secondary_hover);
+$skeleton: var(--skeleton);
 
-$surface: var(--color-surface);
-$surface-hover: var(--color-surface-hover);
-$surface-active: var(--color-surface-active);
+$rating: var(--rating);
+$success: var(--success);
+$error: var(--error);
+$info: var(--info);
+$warning: var(--warning);
 
-$success: var(--color-success, #10b981);
-$warning: var(--color-warning, #f59e0b);
-$info: var(--color-info, #3b82f6);
 
-$success-bg: var(--color-success-bg, #d1fae5);
-$warning-bg: var(--color-warning-bg, #fef3c7);
-$info-bg: var(--color-info-bg, #dbeafe);
-$error-bg: var(--color-error-bg, #fee2e2);
+:root {
+  --main: #fff;
+  --main_hover: #f9fafb;
+  --title_bg: #f8f8f8;
+  --primary: #111827;
+  --primary_hover: #242c38;
+  --primary_dark: #1a1a1a;
+  --primary_gradient: linear-gradient(to bottom, rgba(26, 26, 26, 1) 0%,rgba(31, 41, 55, 1) 100%);
+  --primary_shadow: rgba(0, 0, 0, 0.1);
+  --primary_shadow_hover: rgba(0, 0, 0, 0.3);
+  --blackout: rgba(0, 0, 0, 0.4);
 
-$accent-hover: var(--color-accent-hover);
-$accent-active: var(--color-accent-active);
\ No newline at end of file
+  --secondary: #374151;
+  --secondary_hover: #29323f;
+
+  --disabled: #0a0f1a;
+  --disabled_secondary: #9a9a9a;
+  --border: #e5e7eb;
+  --border_hover: #505052;
+
+  --text: #4b5563;
+  --link_primary: #1f2937;
+  --link_primary_hover: #29323f;
+  --link_secondary: #c2c7ce;
+  --link_secondary_hover: #a4a8ad;
+  --skeleton: rgba(255, 255, 255, 0.61);
+
+  --rating: #facc15;
+  --success: #67c23a;
+  --error: #f56c6c;
+  --info: #909399;
+  --warning: #e6a23c;
+}
+
+[data-theme='dark'] {
+  --main: #1a1a1a;
+  --main_hover: #242424;
+  --title_bg: #111111;
+  --primary: #f3f4f6;
+  --primary_hover: #ffffff;
+  --primary_dark: #e5e7eb;
+  --primary_gradient: linear-gradient(to bottom, rgba(243, 244, 246, 1) 0%, rgba(229, 231, 235, 1) 100%);
+  --primary_shadow: rgba(0, 0, 0, 0.5);
+  --primary_shadow_hover: rgba(0, 0, 0, 0.7);
+  --blackout: rgba(0, 0, 0, 0.5);
+
+  --secondary: #9ca3af;
+  --secondary_hover: #d1d5db;
+
+  --disabled: #4b5563;
+  --disabled_secondary: #6b7280;
+  --border: #374151;
+  --border_hover: #4b5563;
+
+  --text: #e5e7eb;
+  --link_primary: #aba7a7;
+  --link_primary_hover: #858282;
+  --link_secondary: #9ca3af;
+  --link_secondary_hover: #cbd5e1;
+  --skeleton: rgba(255, 255, 255, 0.1);
+
+  --rating: #facc15;
+  --success: #67c23a;
+  --error: #f56c6c;
+  --info: #909399;
+  --warning: #e6a23c;
+}
\ No newline at end of file
diff --git a/storefront/app/assets/styles/main.scss b/storefront/app/assets/styles/main.scss
index 3942e783..91455306 100644
--- a/storefront/app/assets/styles/main.scss
+++ b/storefront/app/assets/styles/main.scss
@@ -4,114 +4,10 @@
 @use "global/variables";
 
 // UI
+@use "ui/badge";
 @use "ui/collapse";
 @use "ui/notification";
 @use "ui/rating";
 @use "ui/select";
 
-:root {
-  --color-accent: #111827;
-  --color-accent-dark: #242c38;
-  --color-accent-light: #465267;
-  --color-accent-smooth: #656bd1;
-  --color-accent-neon: #f200ff;
-  --color-contrast: #ffc107;
-  --color-error: #f13838;
-
-
-  --color-neutral-50: #ffffff;
-  --color-neutral-100: #f8f7fc;
-  --color-neutral-200: #f0eefa;
-  --color-neutral-300: #e2dfed;
-  --color-neutral-400: #c5c1d9;
-  --color-neutral-500: #8c8a9e;
-  --color-neutral-600: #5a5869;
-  --color-neutral-700: #3d3b47;
-  --color-neutral-800: #23222a;
-  --color-neutral-900: #000000;
-
-  --color-background: var(--color-neutral-50);
-  --color-background-secondary: var(--color-neutral-100);
-  --color-background-elevated: var(--color-neutral-50);
-
-  --color-text-primary: var(--color-neutral-900);
-  --color-text-secondary: var(--color-neutral-600);
-  --color-text-tertiary: var(--color-neutral-500);
-  --color-text-accent: var(--color-accent);
-  --color-text-inverse: var(--color-neutral-50);
-
-  --color-border: var(--color-neutral-300);
-  --color-border-hover: var(--color-accent-light);
-  --color-divider: var(--color-neutral-200);
-
-  --color-surface: var(--color-neutral-50);
-  --color-surface-hover: var(--color-neutral-100);
-  --color-surface-active: var(--color-neutral-200);
-
-  --color-success: #10b981;
-  --color-warning: #f59e0b;
-  --color-info: #3b82f6;
-
-  --color-success-bg: #d1fae5;
-  --color-warning-bg: #fef3c7;
-  --color-info-bg: #dbeafe;
-  --color-error-bg: #fee2e2;
-
-  --color-accent-hover: var(--color-accent-dark);
-  --color-accent-active: var(--color-accent-smooth);
-  --color-accent-disabled: #c7bfe9;
-}
-
-.dark {
-  --color-accent: #8d7bdb;
-  --color-accent-dark: #6b58c7;
-  --color-accent-light: #b3a9e5;
-  --color-accent-smooth: #7a80e1;
-  --color-accent-neon: #ff1aff;
-  --color-contrast: #ffd54f;
-  --color-error: #ff6b6b;
-
-  --color-neutral-50: #000000;
-  --color-neutral-100: #0f0e14;
-  --color-neutral-200: #1d1b26;
-  --color-neutral-300: #2d2b3a;
-  --color-neutral-400: #4a4858;
-  --color-neutral-500: #6d6b7a;
-  --color-neutral-600: #a19fae;
-  --color-neutral-700: #c9c7d6;
-  --color-neutral-800: #e2e0ef;
-  --color-neutral-900: #ffffff;
-
-  --color-background: var(--color-neutral-100);
-  --color-background-secondary: var(--color-neutral-200);
-  --color-background-elevated: var(--color-neutral-300);
-
-  --color-text-primary: var(--color-neutral-800);
-  --color-text-secondary: var(--color-neutral-600);
-  --color-text-tertiary: var(--color-neutral-500);
-  --color-text-accent: var(--color-accent-light);
-  --color-text-inverse: var(--color-neutral-900);
-
-  --color-border: var(--color-neutral-400);
-  --color-border-hover: var(--color-accent);
-  --color-divider: var(--color-neutral-300);
-
-  --color-surface: var(--color-neutral-200);
-  --color-surface-hover: var(--color-neutral-300);
-  --color-surface-active: var(--color-neutral-400);
-
-  --color-success: #34d399;
-  --color-warning: #fbbf24;
-  --color-info: #60a5fa;
-
-  --color-success-bg: rgba(16, 185, 129, 0.2);
-  --color-warning-bg: rgba(245, 158, 11, 0.2);
-  --color-info-bg: rgba(59, 130, 246, 0.2);
-  --color-error-bg: rgba(239, 68, 68, 0.2);
-
-  --color-accent-hover: var(--color-accent);
-  --color-accent-active: var(--color-accent-dark);
-  --color-accent-disabled: #4a4269;
-}
-
 
diff --git a/storefront/app/assets/styles/modules/normalize.scss b/storefront/app/assets/styles/modules/normalize.scss
index 5d737f0d..ca64c149 100644
--- a/storefront/app/assets/styles/modules/normalize.scss
+++ b/storefront/app/assets/styles/modules/normalize.scss
@@ -5,6 +5,7 @@
   padding: 0;
   border: none;
   box-sizing: border-box;
+  transition: all 0.2s;
 }
 
 html {
@@ -38,19 +39,19 @@ button:focus-visible {
 }
 
 ::-webkit-scrollbar-thumb {
-  background: $accent;
+  background: $primary;
 }
 
 ::-webkit-scrollbar-track {
-  background: $light;
+  background: $main_hover;
 }
 
 * {
-  scrollbar-color: $accent $light;
+  scrollbar-color: $primary $main_hover;
 }
 
 :root {
-  --el-color-primary: #{$accent} !important;
+  --el-color-primary: #{$primary} !important;
 }
 
 .el-skeleton__item {
diff --git a/storefront/app/assets/styles/ui/badge.scss b/storefront/app/assets/styles/ui/badge.scss
new file mode 100644
index 00000000..4fcbbe0d
--- /dev/null
+++ b/storefront/app/assets/styles/ui/badge.scss
@@ -0,0 +1,5 @@
+@use "../global/variables" as *;
+
+.el-badge__content {
+  background-color: $disabled !important;
+}
\ No newline at end of file
diff --git a/storefront/app/assets/styles/ui/collapse.scss b/storefront/app/assets/styles/ui/collapse.scss
index 0eaf36c2..29064202 100644
--- a/storefront/app/assets/styles/ui/collapse.scss
+++ b/storefront/app/assets/styles/ui/collapse.scss
@@ -8,8 +8,8 @@
   padding-block: 20px
 }
 .el-collapse-item {
-  border-radius: 8px;
-  border: 1px solid #e5e7eb;
+  border-radius: $default_border_radius;
+  border: 1px solid $border;
 }
 .el-collapse-item__header {
   background-color: transparent !important;
@@ -18,13 +18,13 @@
   font-size: 14px !important;
   font-weight: 600 !important;
   padding-inline: 8px !important;
-  color: $accentDark !important;
+  color: $primary_dark !important;
 }
 .el-collapse-item__header.focusing:focus:not(:hover) {
-  color: $accentDark !important;
+  color: $primary_dark !important;
 }
 .el-collapse-item__wrap {
-  border-top: 2px solid #e5e7eb;
+  border-top: 2px solid $border;
   border-bottom: none !important;
   background-color: transparent !important;
 }
diff --git a/storefront/app/assets/styles/ui/notification.scss b/storefront/app/assets/styles/ui/notification.scss
index 48d39916..b07021f8 100644
--- a/storefront/app/assets/styles/ui/notification.scss
+++ b/storefront/app/assets/styles/ui/notification.scss
@@ -1,7 +1,7 @@
 @use "../global/variables" as *;
 
 .el-notification {
-  border: 2px solid $accent !important;
+  border: 2px solid $primary !important;
   transition: all 0.3s ease !important;
 
   &__progress {
@@ -10,22 +10,35 @@
     bottom: 0;
     width: 100%;
     height: 3px;
-    background-color: $accentDark;
+    background-color: $primary_dark;
     animation: progress-animation linear forwards;
+
+    &.success {
+      background-color: $success;
+    }
+    &.error {
+      background-color: $error;
+    }
+    &.info {
+      background-color: $info;
+    }
+    &.warning {
+      background-color: $warning;
+    }
   }
 
   &__button {
     margin-top: 10px;
     padding: 6px 12px;
-    background-color: $accent;
-    border-radius: $default_border_radius;
-    color: #fff;
+    background-color: $primary;
+    border-radius: $less_border_radius;
+    color: $main;
     border: none;
     cursor: pointer;
   }
 
   .el-notification__closeBtn {
-    color: $accent !important;
+    color: $primary !important;
   }
 }
 
diff --git a/storefront/app/assets/styles/ui/rating.scss b/storefront/app/assets/styles/ui/rating.scss
index bf5531e4..b46e9970 100644
--- a/storefront/app/assets/styles/ui/rating.scss
+++ b/storefront/app/assets/styles/ui/rating.scss
@@ -4,15 +4,10 @@
   height: unset !important;
 }
 .el-rate .el-rate__icon.is-active {
-  color: #facc15 !important;
+  color: $rating !important;
 }
 .el-rate .el-rate__icon {
-  color: #facc15 !important;
+  color: $rating !important;
   font-size: 16px !important;
   margin-right: 0 !important;
-}
-
-.white .el-rate__icon.is-active {
-  color: $white !important;
-  font-size: 18px !important;
 }
\ No newline at end of file
diff --git a/storefront/app/components/base/auth.vue b/storefront/app/components/base/auth.vue
index c116c713..b531f672 100644
--- a/storefront/app/components/base/auth.vue
+++ b/storefront/app/components/base/auth.vue
@@ -38,10 +38,10 @@ onClickOutside(modalRef, () => closeModal());
     position: absolute;
     z-index: 2;
     top: 125px;
-    background-color: $white;
+    background-color: $main;
     width: 600px;
     padding: 30px;
-    border-radius: $default_border_radius;
+    border-radius: $less_border_radius;
   }
 }
 
diff --git a/storefront/app/components/base/footer/index.vue b/storefront/app/components/base/footer/index.vue
index 19002d76..ba67b4c6 100644
--- a/storefront/app/components/base/footer/index.vue
+++ b/storefront/app/components/base/footer/index.vue
@@ -50,7 +50,7 @@ const encodedCompanyAddress = computed(() => {
 
 <style scoped lang="scss">
 .footer {
-  background-color: #1a1a1a;
+  background-color: #000;
 
   &__wrapper {
     padding-block: 64px;
@@ -72,15 +72,14 @@ const encodedCompanyAddress = computed(() => {
   }
 
   &__logo {
-    transition: 0.2s;
-    color: $white;
+    color: #fff;
     font-size: 24px;
     font-weight: 600;
     letter-spacing: 6.7px;
     font-family: 'Playfair Display', sans-serif;
 
     @include hover {
-      text-shadow: 0 0 5px #1a1a1a;
+      text-shadow: 0 0 5px #fff;
     }
   }
 
@@ -104,28 +103,27 @@ const encodedCompanyAddress = computed(() => {
     gap: 14px;
 
     & h6 {
-      color: $white;
+      color: $link_primary;
       font-size: 16px;
       font-weight: 600;
       letter-spacing: -0.5px;
     }
 
     & p, a {
-      transition: 0.2s;
-      color: #d1d5db;
+      color: $link_secondary;
       font-size: 16px;
       font-weight: 400;
       letter-spacing: -0.5px;
 
       @include hover {
-        color: #acafb4;
+        color: $link_secondary_hover;
       }
     }
   }
 
   &__bottom {
     & p {
-      color: #d1d5db;
+      color: $link_secondary;
       font-size: 14px;
       font-weight: 400;
       letter-spacing: -0.5px;
diff --git a/storefront/app/components/base/header/catalog.vue b/storefront/app/components/base/header/catalog.vue
index d2340d74..067d46fb 100644
--- a/storefront/app/components/base/header/catalog.vue
+++ b/storefront/app/components/base/header/catalog.vue
@@ -82,32 +82,30 @@ const setActiveCategory = (category: ICategory) => {
 .catalog {
   &__button {
     cursor: pointer;
-    border-radius: $default_border_radius;
-    background-color: rgba($accent, 0.2);
-    border: 1px solid $accent;
+    border-radius: $less_border_radius;
+    background-color: rgba($primary, 0.2);
+    border: 1px solid $primary;
     padding: 5px 20px;
     display: flex;
     align-items: center;
     gap: 10px;
-    transition: 0.2s;
 
-    color: $accent;
+    color: $primary;
     font-size: 16px;
     font-weight: 600;
 
     @include hover {
-      background-color: $accent;
-      color: $white;
+      background-color: $primary;
+      color: $main;
     }
 
     & span {
-      transition: 0.2s;
       font-size: 26px;
     }
 
     &.active {
-      background-color: $accent;
-      color: $white;
+      background-color: $primary;
+      color: $main;
 
       & span {
         transform: rotate(-180deg);
@@ -125,10 +123,10 @@ const setActiveCategory = (category: ICategory) => {
 }
 
 .categories {
-  border-radius: $default_border_radius;
+  border-radius: $less_border_radius;
   width: 100%;
-  background-color: $white;
-  box-shadow: 0 0 15px 1px $accentLight;
+  background-color: $main;
+  box-shadow: 0 0 15px 1px $secondary;
   display: grid;
   grid-template-rows: 0fr;
   transition: grid-template-rows 0.2s ease;
@@ -159,13 +157,12 @@ const setActiveCategory = (category: ICategory) => {
       & p {
         cursor: pointer;
         padding: 5px 20px;
-        transition: 0.2s;
 
         font-size: 16px;
         font-weight: 600;
 
         @include hover {
-          color: $accent;
+          color: $primary;
         }
       }
     }
@@ -178,26 +175,25 @@ const setActiveCategory = (category: ICategory) => {
 
     & p {
       cursor: pointer;
-      transition: 0.2s;
       flex-shrink: 0;
       padding: 10px;
-      border-left: 3px solid $white;
+      border-left: 3px solid $main;
       font-weight: 700;
 
       @include hover {
-        color: $accent;
+        color: $primary;
       }
 
       &.active {
-        border-color: $accent;
-        color: $accent;
+        border-color: $primary;
+        color: $primary;
       }
     }
   }
 
   &__main {
     padding: 20px;
-    border-left: 2px solid $accentDark;
+    border-left: 2px solid $primary_dark;
     overflow: auto;
 
     &-block {
@@ -227,7 +223,7 @@ const setActiveCategory = (category: ICategory) => {
         height: 2px;
         width: 0;
         transition: all .3s ease;
-        background-color: $accent;
+        background-color: $primary;
       }
 
       @include hover {
@@ -246,12 +242,11 @@ const setActiveCategory = (category: ICategory) => {
 
       & a {
         cursor: pointer;
-        transition: 0.1s;
 
         font-size: 14px;
 
         @include hover {
-          color: $accent;
+          color: $primary;
         }
       }
     }
diff --git a/storefront/app/components/base/header/index.vue b/storefront/app/components/base/header/index.vue
index ac7ffc57..ecf2c2cc 100644
--- a/storefront/app/components/base/header/index.vue
+++ b/storefront/app/components/base/header/index.vue
@@ -61,12 +61,13 @@
                 size="20"
             />
             <ui-language-switcher />
-            <el-badge :value="productsInWishlistQuantity" color="#111827">
+            <ui-theme-toggle />
+            <el-badge :value="productsInWishlistQuantity">
               <nuxt-link-locale to="/wishlist">
                 <icon class="header__block-wishlist" name="material-symbols:favorite-rounded" size="20" />
               </nuxt-link-locale>
             </el-badge>
-            <el-badge :value="productsInCartQuantity" color="#111827">
+            <el-badge :value="productsInCartQuantity">
               <nuxt-link-locale to="/cart">
                 <icon class="header__block-cart" name="bx:bxs-shopping-bag" size="20" />
               </nuxt-link-locale>
@@ -173,16 +174,8 @@ const redirectTo = (to) => {
   top: 0;
   left: 0;
   width: 100vw;
-  background-color: rgba(255, 255, 255, 0.9);
-  border-bottom: 1px solid #f3f4f6;
-
-  &__no-search {
-    padding-inline: 75px;
-
-    & .header__inner {
-      gap: 75px;
-    }
-  }
+  background-color: $main;
+  border-bottom: 1px solid $border;
 
   &__fixed {
     position: fixed;
@@ -194,6 +187,7 @@ const redirectTo = (to) => {
     justify-content: space-between;
     gap: 25px;
     padding-block: 25px;
+    background-color: $main;
   }
 
   &__inner {
@@ -211,15 +205,14 @@ const redirectTo = (to) => {
   }
 
   &__logo {
-    transition: 0.2s;
     font-size: 24px;
     font-weight: 600;
     letter-spacing: 6.7px;
     font-family: 'Playfair Display', sans-serif;
-    color: #1a1a1a;
+    color: $primary_dark;
 
     @include hover {
-      text-shadow: 0 0 5px #1a1a1a;
+      text-shadow: 0 0 5px $primary_dark;
     }
   }
 
@@ -230,8 +223,7 @@ const redirectTo = (to) => {
 
     &-item {
       position: relative;
-      transition: 0.2s;
-      color: #1f2937;
+      color: $link_primary;
       font-size: 16px;
       font-weight: 500;
       letter-spacing: -0.5px;
@@ -244,7 +236,7 @@ const redirectTo = (to) => {
         height: 2px;
         width: 0;
         transition: all .3s ease;
-        background-color: #1f2937;
+        background-color: $link_primary;
       }
 
       &.active::after {
@@ -273,55 +265,50 @@ const redirectTo = (to) => {
     &-search {
       cursor: pointer;
       display: block;
-      transition: 0.2s;
-      color: #374151;
+      color: $secondary;
 
       @include hover {
-        color: #29323f;
+        color: $secondary_hover;
       }
     }
 
     &-wishlist {
       display: block;
       cursor: pointer;
-      transition: 0.2s;
-      color: #374151;
+      color: $secondary;
 
       @include hover {
-        color: #29323f;
+        color: $secondary_hover;
       }
     }
 
     &-cart {
       display: block;
       cursor: pointer;
-      transition: 0.2s;
-      color: #374151;
+      color: $secondary;
 
       @include hover {
-        color: #29323f;
+        color: $secondary_hover;
       }
     }
 
     &-auth {
-      transition: 0.2s;
-      border-bottom: 1px solid #111827;
+      border-bottom: 1px solid $secondary;
       padding-bottom: 2px;
-      color: #111827;
+      color: $secondary;
       font-size: 16px;
       font-weight: 500;
       letter-spacing: -0.5px;
 
       @include hover {
-        color: #424c62;
+        color: $secondary_hover;
       }
     }
 
     &-avatar {
       width: 28px;
       border-radius: 50%;
-      border: 1px solid #374151;
-      transition: 0.2s;
+      border: 1px solid $secondary;
 
       & span {
         display: block;
@@ -336,10 +323,10 @@ const redirectTo = (to) => {
       width: 28px;
       border-radius: 50%;
       padding: 5px;
-      border: 1px solid #374151;
-      transition: 0.2s;
+      border: 1px solid $secondary;
 
       & span {
+        color: $primary;
         display: block;
       }
 
@@ -350,17 +337,20 @@ const redirectTo = (to) => {
   }
 
   &__search {
-    position: absolute;
+    position: relative;
     width: 100%;
     top: 100%;
     left: 0;
-    overflow: hidden;
     display: grid;
     grid-template-rows: 0fr;
-    transition: grid-template-rows 0.2s ease;
+    //transition: grid-template-rows 0.2s ease;
+    opacity: 0;
+    visibility: hidden;
 
     &.active {
       grid-template-rows: 1fr;
+      opacity: 1;
+      visibility: visible;
     }
 
     & > * {
diff --git a/storefront/app/components/cards/brand.vue b/storefront/app/components/cards/brand.vue
index c62e1507..02901d3f 100644
--- a/storefront/app/components/cards/brand.vue
+++ b/storefront/app/components/cards/brand.vue
@@ -33,16 +33,15 @@ const props = defineProps<{
   flex-direction: column;
   align-items: center;
   gap: 20px;
-  background-color: $white;
-  border-radius: 8px;
-  border: 1px solid #e5e7eb;
+  background-color: $main;
+  border-radius: $default_border_radius;
+  border: 1px solid $border;
   height: 100%;
   padding: 23px;
-  transition: 0.2s;
 
   @include hover {
-    box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.3);
-    border-color: #505052;
+    box-shadow: 0 0 10px 2px $primary_shadow_hover;
+    border-color: $border_hover;
   }
 
   &__image {
@@ -54,13 +53,13 @@ const props = defineProps<{
     &-placeholder {
       width: 100%;
       aspect-ratio: 1;
-      background-color: $accentLight;
-      border-radius: $default_border_radius;
+      background-color: $primary;
+      border-radius: $less_border_radius;
     }
   }
 
   & p {
-    color: #1a1a1a;
+    color: $primary_dark;
     text-align: center;
     font-size: 16px;
     font-weight: 500;
diff --git a/storefront/app/components/cards/category.vue b/storefront/app/components/cards/category.vue
index 415259ba..2d15419a 100644
--- a/storefront/app/components/cards/category.vue
+++ b/storefront/app/components/cards/category.vue
@@ -33,16 +33,15 @@ const props = defineProps<{
   flex-direction: column;
   align-items: center;
   gap: 20px;
-  background-color: $white;
-  border-radius: 8px;
-  border: 1px solid #e5e7eb;
+  background-color: $main;
+  border-radius: $default_border_radius;
+  border: 1px solid $border;
   height: 100%;
   padding: 23px;
-  transition: 0.2s;
 
   @include hover {
-    box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.3);
-    border-color: #505052;
+    box-shadow: 0 0 10px 2px $primary_shadow_hover;
+    border-color: $border_hover;
   }
 
   &__image {
@@ -54,13 +53,13 @@ const props = defineProps<{
     &-placeholder {
       width: 100%;
       aspect-ratio: 1;
-      background-color: $accentLight;
-      border-radius: $default_border_radius;
+      background-color: $primary;
+      border-radius: $less_border_radius;
     }
   }
 
   & p {
-    color: #1a1a1a;
+    color: $primary_dark;
     text-align: center;
     font-size: 16px;
     font-weight: 500;
diff --git a/storefront/app/components/cards/order.vue b/storefront/app/components/cards/order.vue
index 1a2214d3..cbab13e6 100644
--- a/storefront/app/components/cards/order.vue
+++ b/storefront/app/components/cards/order.vue
@@ -125,20 +125,19 @@ const statusColor = (status: string) => {
         align-items: center;
         gap: 5px;
 
-        color: #4b5563;
+        color: $secondary;
         font-size: 14px;
         font-weight: 400;
 
         &.status {
-          border-radius: $default_border_radius;
+          border-radius: $less_border_radius;
           padding: 3px 7px;
         }
       }
     }
 
     &-icon {
-      transition: 0.2s;
-      color: #4b5563;
+      color: $secondary;
 
       &.active {
         transform: rotate(-180deg);
@@ -162,7 +161,7 @@ const statusColor = (status: string) => {
       & div {
         & div {
           padding-top: 10px;
-          border-top: 1px solid #e5e7eb;
+          border-top: 1px solid $border;
           display: flex;
           align-items: flex-start;
           justify-content: space-between;
@@ -177,12 +176,12 @@ const statusColor = (status: string) => {
 
             & img {
               height: 65px;
-              border-radius: $default_border_radius;
+              border-radius: $less_border_radius;
             }
           }
 
           & p {
-            color: #4b5563;
+            color: $secondary;
             font-size: 18px;
             font-weight: 600;
           }
@@ -202,7 +201,7 @@ const statusColor = (status: string) => {
     align-items: flex-start;
     justify-content: space-between;
     padding-bottom: 15px;
-    border-bottom: 2px solid #e5e7eb;
+    border-bottom: 2px solid $border;
 
     &-left {
       display: flex;
@@ -211,11 +210,11 @@ const statusColor = (status: string) => {
 
       & img {
         height: 150px;
-        border-radius: $default_border_radius;
+        border-radius: $less_border_radius;
       }
 
       & p {
-        color: #4b5563;
+        color: $secondary;
         font-size: 18px;
         font-weight: 600;
       }
@@ -227,13 +226,13 @@ const statusColor = (status: string) => {
       align-items: flex-end;
 
       & h6 {
-        color: #4b5563;
+        color: $secondary;
         font-size: 18px;
         font-weight: 600;
       }
 
       & p {
-        color: #4b5563;
+        color: $secondary;
         font-size: 14px;
         font-weight: 400;
       }
diff --git a/storefront/app/components/cards/post.vue b/storefront/app/components/cards/post.vue
index 0904e3cd..a7d0f1df 100644
--- a/storefront/app/components/cards/post.vue
+++ b/storefront/app/components/cards/post.vue
@@ -22,7 +22,12 @@ const {t} = useI18n();
   gap: 10px;
 
   &__title {
-    color: #1a1a1a;
+    word-break: break-all;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+    overflow: hidden;
+    color: $primary_dark;
     font-family: "Playfair Display", sans-serif;
     font-size: 20px;
     font-weight: 600;
@@ -32,8 +37,7 @@ const {t} = useI18n();
   &__button {
     width: fit-content;
     position: relative;
-    color: #1a1a1a;
-    transition: 0.2s;
+    color: $primary_dark;
     font-size: 14px;
     font-weight: 500;
     letter-spacing: -0.5px;
@@ -46,7 +50,7 @@ const {t} = useI18n();
       height: 2px;
       width: 0;
       transition: all .3s ease;
-      background-color: #1f2937;
+      background-color: $primary_dark;
     }
 
     &.active::after {
diff --git a/storefront/app/components/cards/product.vue b/storefront/app/components/cards/product.vue
index 2d263140..bce677cd 100644
--- a/storefront/app/components/cards/product.vue
+++ b/storefront/app/components/cards/product.vue
@@ -108,6 +108,15 @@
           >
             {{ t('buttons.addToCart') }}
           </ui-button>
+          <ui-button
+              :type="'button'"
+              class="card__bottom-button"
+              :style="'secondary'"
+              @click="buyProduct(product.uuid)"
+              :isLoading="buyLoading"
+          >
+            {{ t('buttons.buyNow') }}
+          </ui-button>
         </div>
       </div>
     </div>
@@ -120,6 +129,7 @@ import { Swiper, SwiperSlide } from 'swiper/vue';
 import { EffectFade, Pagination } from 'swiper/modules';
 import {useWishlistOverwrite} from '@composables/wishlist';
 import {useOrderOverwrite} from '@composables/orders';
+import {useProductBuy} from "@composables/products";
 
 const props = defineProps<{
   product: IProduct;
@@ -134,6 +144,7 @@ const { $appHelpers } = useNuxtApp();
 
 const { overwriteWishlist } = useWishlistOverwrite();
 const { addLoading, removeLoading, overwriteOrder } = useOrderOverwrite();
+const { buyProduct, loading: buyLoading } = useProductBuy();
 
 const cookieWishlist = useCookie($appHelpers.COOKIES_WISHLIST_KEY, {
   default: () => [],
@@ -211,11 +222,10 @@ function goTo(index: number) {
 
 <style lang="scss" scoped>
 .card {
-  border-radius: 8px;
-  border: 1px solid #e5e7eb;
+  border-radius: $default_border_radius;
+  border: 1px solid $border;
   width: 100%;
-  background-color: $white;
-  transition: 0.2s;
+  background-color: $main;
   position: relative;
   height: 100%;
   display: flex;
@@ -281,8 +291,8 @@ function goTo(index: number) {
   }
 
   @include hover {
-    border-color: #b7b8bb;
-    box-shadow: 0 0 10px 1px #e5e7eb;
+    border-color: $border_hover;
+    box-shadow: 0 0 10px 1px $border;
   }
 
   &__wrapper {
@@ -332,7 +342,7 @@ function goTo(index: number) {
     &-placeholder {
       width: 100%;
       height: 200px;
-      background-color: $accentLight;
+      background-color: $primary;
     }
   }
 
@@ -353,14 +363,14 @@ function goTo(index: number) {
     font-size: 12px;
     font-weight: 400;
     letter-spacing: -0.2px;
-    color: #6b7280;
+    color: $text;
   }
 
   &__price {
     font-weight: 600;
     font-size: 16px;
     letter-spacing: -0.5px;
-    color: #1a1a1a;
+    color: $primary_dark;
   }
 
   &__rating {
@@ -368,10 +378,12 @@ function goTo(index: number) {
   }
 
   &__name {
+    word-break: break-all;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
     overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    color: $black;
+    color: $primary_dark;
     font-weight: 500;
     font-size: 14px;
     letter-spacing: -0.5px;
@@ -379,8 +391,8 @@ function goTo(index: number) {
 
   &__quantity {
     width: fit-content;
-    background-color: rgba($contrast, 0.5);
-    border-radius: $default_border_radius;
+    background-color: rgba($secondary, 0.5);
+    border-radius: $less_border_radius;
     padding: 5px 10px;
     font-size: 14px;
   }
@@ -388,22 +400,21 @@ function goTo(index: number) {
   &__wishlist {
     cursor: pointer;
     width: fit-content;
-    background-color: $white;
-    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
+    background-color: $main;
+    box-shadow: 0 2px 4px 0 $primary_shadow;
     position: absolute;
     top: 16px;
     right: 16px;
     z-index: 3;
     border-radius: 50%;
     padding: 12px;
-    transition: 0.2s;
 
     @include hover {
-      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.3);
+      box-shadow: 0 2px 4px 0 $primary_shadow_hover;
     }
 
     & span {
-      color: #4b5563;
+      color: $secondary;
       display: block;
     }
   }
@@ -411,14 +422,13 @@ function goTo(index: number) {
   &__bottom {
     &-inner {
       display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: 5px;
+      flex-direction: column;
+      gap: 10px;
     }
 
     &-button {
       padding-block: 10px !important;
-      border-radius: 4px;
+      border-radius: $less_border_radius;
     }
 
     &-wishlist {
@@ -426,17 +436,16 @@ function goTo(index: number) {
       width: 34px;
       height: 34px;
       flex-shrink: 0;
-      background-color: $accent;
-      border-radius: $default_border_radius;
+      background-color: $primary;
+      border-radius: $less_border_radius;
       display: grid;
       place-items: center;
-      transition: 0.2s;
 
       font-size: 22px;
-      color: $white;
+      color: $main;
 
       @include hover {
-        background-color: $accentLight;
+        background-color: $primary_hover;
       }
     }
   }
@@ -444,8 +453,8 @@ function goTo(index: number) {
 
 .tools {
   width: 100%;
-  border-radius: 4px;
-  background-color: #111827;
+  border-radius: $less_border_radius;
+  background-color: $primary;
   display: grid;
   grid-template-columns: 1fr 2fr 1fr;
   height: 40px;
@@ -458,31 +467,30 @@ function goTo(index: number) {
     height: 100%;
 
     &-count {
-      border-left: 1px solid $accent;
-      border-right: 1px solid $accent;
+      border-left: 1px solid $primary_hover;
+      border-right: 1px solid $primary_hover;
 
-      color: $white;
+      color: $main;
       font-size: 16px;
       font-weight: 600;
     }
 
     &-button {
       cursor: pointer;
-      background-color: #111827;
-      border-radius: 4px 0 0 4px;
-      transition: 0.2s;
+      background-color: $primary;
+      border-radius: $less_border_radius 0 0 $less_border_radius;
 
-      color: $white;
+      color: $main;
       font-size: 18px;
       font-weight: 500;
 
       @include hover {
-        background-color: #222c41;
-        color: $white;
+        background-color: $primary_hover;
+        color: $main;
       }
 
       &:last-child {
-        border-radius: 0 4px 4px 0;
+        border-radius: 0 $less_border_radius $less_border_radius 0;
       }
     }
   }
@@ -499,13 +507,12 @@ function goTo(index: number) {
   display: inline-block;
   width: 24px;
   height: 2px;
-  background-color: rgba($accentDark, 0.3);
+  background-color: rgba($primary_dark, 0.3);
   border-radius: 0;
   opacity: 1;
-  transition: 0.2s;
 }
 
 :deep(.swiper-pagination-line--active) {
-  background-color: $accentDark;
+  background-color: $primary_dark;
 }
 </style>
\ No newline at end of file
diff --git a/storefront/app/components/demo/settings.vue b/storefront/app/components/demo/settings.vue
index 1cee3cab..49463211 100644
--- a/storefront/app/components/demo/settings.vue
+++ b/storefront/app/components/demo/settings.vue
@@ -170,9 +170,9 @@ const codePreview = computed(() => {
     position: absolute;
     z-index: 2;
     inset: 100px;
-    background-color: #0d0d0d;
+    background-color: $primary_dark;
     padding: 50px;
-    border-radius: $default_border_radius;
+    border-radius: $less_border_radius;
     display: flex;
     flex-direction: column;
     align-items: stretch;
@@ -191,9 +191,9 @@ const codePreview = computed(() => {
     text-align: center;
     font-size: 40px;
     font-weight: 500;
-    text-shadow: 0 0 5px $accentNeon;
+    text-shadow: 0 0 5px $primary_shadow;
     text-transform: uppercase;
-    color: $accentNeon;
+    color: $text;
   }
 
   &__inner {
@@ -205,7 +205,7 @@ const codePreview = computed(() => {
     align-items: center;
     gap: 50px;
     padding: 10px 20px;
-    scrollbar-color: $accentNeon transparent;
+    scrollbar-color: $text transparent;
   }
 
   &__block {
@@ -218,10 +218,10 @@ const codePreview = computed(() => {
       width: fit-content;
       margin-bottom: 20px;
       padding-bottom: 5px;
-      border-bottom: 2px solid $accentNeon;
-      color: $accentNeon;
+      border-bottom: 2px solid $text;
+      color: $text;
       font-weight: 500;
-      text-shadow: 0 0 5px $accentNeon;
+      text-shadow: 0 0 5px $text;
       text-transform: uppercase;
       font-size: 22px;
     }
@@ -233,7 +233,7 @@ const codePreview = computed(() => {
 
       & p {
         padding-left: 50px;
-        color: #8c8c8c;
+        color: $text;
         font-weight: 500;
         font-size: 16px;
       }
@@ -248,19 +248,19 @@ const codePreview = computed(() => {
 
     &-wrapper {
       position: relative;
-      background-color: #1a1a1a;
-      border-radius: $default_border_radius;
+      background-color: $primary_dark;
+      border-radius: $less_border_radius;
       padding: 20px;
-      border: 1px solid rgba($accentNeon, 0.3);
+      border: 1px solid rgba($text, 0.3);
     }
 
     &-code {
       margin: 0;
-      color: #f8f8f2;
+      color: $main_hover;
       font-family: 'Fira Code', 'Courier New', monospace;
       font-size: 14px;
       line-height: 1.5;
-      white-space: pre-wrap;
+      main-space: pre-wrap;
       overflow-x: auto;
 
       .language-typescript {
@@ -298,7 +298,7 @@ const codePreview = computed(() => {
     }
 
     &-text {
-      color: #8c8c8c;
+      color: $text;
       font-weight: 500;
       font-size: 14px;
       text-align: center;
@@ -306,7 +306,7 @@ const codePreview = computed(() => {
   }
 
   &__buttons {
-    border-top: 1px solid $white;
+    border-top: 1px solid $main;
     padding-top: 25px;
     display: flex;
     align-items: center;
diff --git a/storefront/app/components/demo/ui/button.vue b/storefront/app/components/demo/ui/button.vue
index 58ec8337..b20d223e 100644
--- a/storefront/app/components/demo/ui/button.vue
+++ b/storefront/app/components/demo/ui/button.vue
@@ -23,11 +23,10 @@ const props = defineProps<{
   width: fit-content;
   cursor: pointer;
   flex-shrink: 0;
-  transition: 0.2s;
-  border: 1px solid $accentNeon;
-  box-shadow: 0 0 10px 1px $accentNeon;
+  border: 1px solid $text;
+  box-shadow: 0 0 10px 1px $text;
   background-color: transparent;
-  border-radius: $default_border_radius;
+  border-radius: $less_border_radius;
   padding: 7px 15px;
   display: flex;
   align-items: center;
@@ -35,31 +34,31 @@ const props = defineProps<{
   gap: 10px;
   z-index: 1;
 
-  color: $accentNeon;
-  text-shadow: 0 0 10px $accentNeon;
+  color: $text;
+  text-shadow: 0 0 10px $text;
   text-align: center;
   font-size: 16px;
   font-weight: 500;
 
   @include hover {
-    background-color: $accentNeon;
-    color: $white;
+    background-color: $text;
+    color: $main;
   }
 
   &.active {
-    background-color: $accentNeon;
-    color: $white;
+    background-color: $text;
+    color: $main;
   }
 
   &:disabled {
     cursor: not-allowed;
     background-color: transparent;
-    color: #fff;
+    color: $main;
   }
 
   &:disabled:hover, &.active {
     background-color: transparent;
-    color: #fff;
+    color: $main;
   }
 
   &__loader {
diff --git a/storefront/app/components/demo/ui/checkbox.vue b/storefront/app/components/demo/ui/checkbox.vue
index 4dfd4020..9c07e4bd 100644
--- a/storefront/app/components/demo/ui/checkbox.vue
+++ b/storefront/app/components/demo/ui/checkbox.vue
@@ -52,7 +52,7 @@ defineEmits<{
   &__box {
     width: 1.5em;
     height: 1.5em;
-    border: 2px solid $accentNeon;
+    border: 2px solid $text;
     position: relative;
     transition: all 0.3s ease;
 
@@ -74,7 +74,7 @@ defineEmits<{
     left: 50%;
     width: 60%;
     height: 60%;
-    background-color: $accentNeon;
+    background-color: $text;
     transform: translate(-50%, -50%) scale(0);
     opacity: 0;
     transition: all 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
@@ -82,7 +82,7 @@ defineEmits<{
   }
 
   &__label {
-    color: $white;
+    color: $main;
     font-weight: 500;
     font-size: 18px;
     text-transform: uppercase;
@@ -100,12 +100,12 @@ defineEmits<{
 }
 
 .checkbox input:checked ~ .checkbox__label {
-  color: $accentNeon;
-  text-shadow: 0 0 8px $accentNeon;
+  color: $text;
+  text-shadow: 0 0 8px $text;
 }
 
 .checkbox:hover .checkbox__box {
-  box-shadow: 0 0 10px $accentNeon;
+  box-shadow: 0 0 10px $text;
 }
 
 .checkbox:hover .checkbox__label::before,
@@ -116,17 +116,17 @@ defineEmits<{
   left: 0;
   width: 100%;
   height: 100%;
-  background-color: #050505;
+  background-color: $primary_dark;
 }
 
 .checkbox:hover .checkbox__label::before {
-  color: #a855f7;
+  color: $text;
   animation: glitch-anim-text var(--glitch-anim-duration)
   cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
 }
 
 .checkbox:hover .checkbox__label::after {
-  color: $accentNeon;
+  color: $text;
   animation: glitch-anim-text var(--glitch-anim-duration)
   cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both;
 }
diff --git a/storefront/app/components/forms/contact.vue b/storefront/app/components/forms/contact.vue
index 6b6b8660..f7cca377 100644
--- a/storefront/app/components/forms/contact.vue
+++ b/storefront/app/components/forms/contact.vue
@@ -92,11 +92,11 @@ async function handleContactUs() {
   flex-direction: column;
   gap: 24px;
   border-radius: 16px;
-  border: 1px solid #e5e7eb;
+  border: 1px solid $border;
   padding: 32px;
 
   &__title {
-    color: #1a1a1a;
+    color: $primary_dark;
     font-family: "Playfair Display", sans-serif;
     font-size: 24px;
     font-weight: 700;
diff --git a/storefront/app/components/forms/login.vue b/storefront/app/components/forms/login.vue
index 6e6b351a..301cb8a2 100644
--- a/storefront/app/components/forms/login.vue
+++ b/storefront/app/components/forms/login.vue
@@ -108,7 +108,7 @@ async function handleLogin() {
   }
 
   &__title {
-    color: #111827;
+    color: $primary;
     font-family: "Playfair Display", sans-serif;
     font-size: 30px;
     font-weight: 700;
@@ -117,7 +117,7 @@ async function handleLogin() {
 
   &__subtitle {
     text-align: center;
-    color: #4b5563;
+    color: $text;
     font-size: 16px;
     font-weight: 400;
     letter-spacing: -0.5px;
@@ -142,7 +142,7 @@ async function handleLogin() {
     font-size: 14px;
     font-weight: 400;
     letter-spacing: -0.5px;
-    color: #6b7280;
+    color: $text;
   }
 }
 </style>
\ No newline at end of file
diff --git a/storefront/app/components/forms/new-password.vue b/storefront/app/components/forms/new-password.vue
index 1ec6df70..e4ff5b4f 100644
--- a/storefront/app/components/forms/new-password.vue
+++ b/storefront/app/components/forms/new-password.vue
@@ -77,7 +77,7 @@ async function handleReset() {
   }
 
   &__title {
-    color: #111827;
+    color: $primary;
     font-family: "Playfair Display", sans-serif;
     font-size: 30px;
     font-weight: 700;
@@ -86,7 +86,7 @@ async function handleReset() {
 
   &__subtitle {
     text-align: center;
-    color: #4b5563;
+    color: $text;
     font-size: 16px;
     font-weight: 400;
     letter-spacing: -0.5px;
diff --git a/storefront/app/components/forms/register.vue b/storefront/app/components/forms/register.vue
index c18db4b8..b32ce595 100644
--- a/storefront/app/components/forms/register.vue
+++ b/storefront/app/components/forms/register.vue
@@ -182,7 +182,7 @@ async function handleRegister() {
   }
 
   &__title {
-    color: #111827;
+    color: $primary;
     font-family: "Playfair Display", sans-serif;
     font-size: 30px;
     font-weight: 700;
@@ -191,7 +191,7 @@ async function handleRegister() {
 
   &__subtitle {
     text-align: center;
-    color: #4b5563;
+    color: $text;
     font-size: 16px;
     font-weight: 400;
     letter-spacing: -0.5px;
@@ -218,11 +218,10 @@ async function handleRegister() {
   }
 
   &__link {
-    transition: 0.2s;
-    color: #111827;
+    color: $primary;
 
     @include hover {
-      color: #2b3752;
+      color: $primary_hover;
     }
   }
 
@@ -234,7 +233,7 @@ async function handleRegister() {
 
     & p {
       text-align: center;
-      color: #4b5563;
+      color: $text;
       font-size: 14px;
       font-weight: 400;
       letter-spacing: -0.5px;
diff --git a/storefront/app/components/forms/reset-password.vue b/storefront/app/components/forms/reset-password.vue
index 9b6efdc9..ce765feb 100644
--- a/storefront/app/components/forms/reset-password.vue
+++ b/storefront/app/components/forms/reset-password.vue
@@ -82,7 +82,7 @@ async function handleReset() {
   }
 
   &__title {
-    color: #111827;
+    color: $primary;
     font-family: "Playfair Display", sans-serif;
     font-size: 30px;
     font-weight: 700;
@@ -91,7 +91,7 @@ async function handleReset() {
 
   &__subtitle {
     text-align: center;
-    color: #4b5563;
+    color: $text;
     font-size: 16px;
     font-weight: 400;
     letter-spacing: -0.5px;
diff --git a/storefront/app/components/home/ad.vue b/storefront/app/components/home/ad.vue
index 935e4f4b..a329bdea 100644
--- a/storefront/app/components/home/ad.vue
+++ b/storefront/app/components/home/ad.vue
@@ -27,10 +27,10 @@ const {t} = useI18n();
 <style lang="scss" scoped>
 .ad {
   &__wrapper {
-    background: linear-gradient(to bottom, rgba(26, 26, 26, 1) 0%,rgba(31, 41, 55, 1) 100%);
-    border-radius: 8px;
+    background: $primary_gradient;
+    border-radius: $default_border_radius;
     padding: 32px 32px 32px 50px;
-    display: flex;
+    display: flex !important;
     align-items: center;
     justify-content: space-between;
   }
@@ -43,7 +43,7 @@ const {t} = useI18n();
 
   &__title {
     margin-bottom: 10px;
-    color: $white;
+    color: $main;
     font-family: "Playfair Display", sans-serif;
     font-size: 36px;
     font-weight: 700;
@@ -51,14 +51,14 @@ const {t} = useI18n();
   }
 
   &__subtext {
-    color: $white;
+    color: $main;
     font-size: 20px;
     font-weight: 400;
     letter-spacing: -0.5px;
   }
 
   &__text {
-    color: #d1d5db;
+    color: $border;
     font-size: 16px;
     font-weight: 400;
     letter-spacing: -0.5px;
@@ -67,18 +67,18 @@ const {t} = useI18n();
   &__button {
     margin-top: 20px;
     width: fit-content;
-    background-color: $white;
+    background-color: $main;
     padding: 15px 35px;
-    transition: 0.2s;
 
     text-transform: uppercase;
-    color: #1a1a1a;
+    color: $primary_dark;
     font-size: 16px;
     font-weight: 500;
     letter-spacing: -0.1px;
 
     @include hover {
-      background-color: #cbcbcb;
+      background-color: $primary_dark;
+      color: $main;
     }
   }
 }
diff --git a/storefront/app/components/home/blog.vue b/storefront/app/components/home/blog.vue
index 9fda0419..a6c2433d 100644
--- a/storefront/app/components/home/blog.vue
+++ b/storefront/app/components/home/blog.vue
@@ -41,7 +41,7 @@ const filteredPosts = computed(() => {
   }
 
   &__title {
-    color: $black;
+    color: $primary_dark;
     font-family: "Playfair Display", sans-serif;
     font-size: 30px;
     font-weight: 600;
diff --git a/storefront/app/components/home/brands.vue b/storefront/app/components/home/brands.vue
index b8945ddd..8f0741e5 100644
--- a/storefront/app/components/home/brands.vue
+++ b/storefront/app/components/home/brands.vue
@@ -28,20 +28,19 @@ const props = defineProps<{
 
 <style lang="scss" scoped>
 .brands {
-  background-color: #e5e7eb;
+  background-color: $border;
   padding-block: 65px;
 
   &__item {
-    transition: 0.2s;
     margin-right: 65px;
-    color: #4b5563;
+    color: $text;
     font-family: "Playfair Display", sans-serif;
     font-size: 24px;
     font-weight: 400;
     letter-spacing: 1.9px;
 
     @include hover {
-      text-shadow: 0 0 10px #1a1a1a;
+      text-shadow: 0 0 10px $primary_dark;
     }
   }
 }
diff --git a/storefront/app/components/home/categories.vue b/storefront/app/components/home/categories.vue
index 8d1b7d4b..6331299d 100644
--- a/storefront/app/components/home/categories.vue
+++ b/storefront/app/components/home/categories.vue
@@ -57,7 +57,7 @@ const categories = computed(() => categoryStore.categories);
   }
 
   &__title {
-    color: $black;
+    color: $primary_dark;
     font-family: "Playfair Display", sans-serif;
     font-size: 30px;
     font-weight: 600;
@@ -81,7 +81,7 @@ const categories = computed(() => categoryStore.categories);
         padding: 25px;
 
         & p {
-          color: $white;
+          color: $secondary;
           font-size: 20px;
           font-weight: 500;
           letter-spacing: -0.5px;
diff --git a/storefront/app/components/home/hero.vue b/storefront/app/components/home/hero.vue
index f367a142..30d9bfec 100644
--- a/storefront/app/components/home/hero.vue
+++ b/storefront/app/components/home/hero.vue
@@ -30,7 +30,7 @@ const {t} = useI18n();
     left: 0;
     width: 100%;
     height: 100%;
-    background-color: rgba(0, 0, 0, 0.4)
+    background-color: $blackout;
   }
 
   &__wrapper {
@@ -47,7 +47,7 @@ const {t} = useI18n();
   }
 
   &__title {
-    color: $white;
+    color: $main;
     text-align: center;
     font-family: "Playfair Display", sans-serif;
     font-size: 60px;
@@ -57,7 +57,7 @@ const {t} = useI18n();
 
   &__text {
     text-align: center;
-    color: $white;
+    color: $main;
     font-size: 20px;
     font-weight: 300;
     letter-spacing: -0.5px;
@@ -65,17 +65,17 @@ const {t} = useI18n();
 
   &__button {
     margin-top: 10px;
-    background-color: $white;
+    background-color: $main;
     padding: 10px 35px;
-    transition: 0.2s;
 
-    color: #1a1a1a;
+    color: $primary_dark;
     font-size: 16px;
     font-weight: 500;
     letter-spacing: -0.1px;
 
     @include hover {
-      background-color: #cbcbcb;
+      background-color: $primary_dark;
+      color: $main;
     }
   }
 }
diff --git a/storefront/app/components/profile/navigation.vue b/storefront/app/components/profile/navigation.vue
index 67d899bb..4e9b65fb 100644
--- a/storefront/app/components/profile/navigation.vue
+++ b/storefront/app/components/profile/navigation.vue
@@ -59,11 +59,11 @@ const { logout } = useLogout();
   height: fit-content;
 
   &__inner {
-    background-color: $white;
-    border-radius: 8px;
+    background-color: $main;
+    border-radius: $default_border_radius;
     display: flex;
     flex-direction: column;
-    border: 1px solid #e5e7eb;
+    border: 1px solid $border;
     overflow: hidden;
   }
 
@@ -71,48 +71,46 @@ const { logout } = useLogout();
     cursor: pointer;
     padding: 16px 24px;
     border-right: 2px solid transparent;
-    border-bottom: 1px solid #e5e7eb;
+    border-bottom: 1px solid $border;
     display: flex;
     align-items: center;
     gap: 10px;
-    transition: 0.2s;
 
-    color: #374151;
+    color: $text;
     font-size: 16px;
     font-weight: 500;
 
     @include hover {
-      color: $accentDark;
-      background-color: #f9fafb;
+      color: $primary;
+      background-color: $main_hover;
     }
 
     &.active {
-      border-right-color: #111827;
-      color: #111827;
-      background-color: #f9fafb;
+      border-right-color: $primary;
+      color: $primary;
+      background-color: $main_hover;
     }
   }
 
   &__logout {
     cursor: pointer;
     margin-top: 25px;
-    border-radius: $default_border_radius;
-    background-color: rgba($accent, 0.2);
-    border: 1px solid $accent;
+    border-radius: $less_border_radius;
+    background-color: rgba($primary, 0.2);
+    border: 1px solid $primary;
     padding: 7px 20px;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 10px;
-    transition: 0.2s;
 
-    color: $accent;
+    color: $primary;
     font-size: 16px;
     font-weight: 600;
 
     @include hover {
-      background-color: $accent;
-      color: $white;
+      background-color: $primary;
+      color: $main;
     }
   }
 }
diff --git a/storefront/app/components/skeletons/cards/brand.vue b/storefront/app/components/skeletons/cards/brand.vue
index 3782bae7..613d9a15 100644
--- a/storefront/app/components/skeletons/cards/brand.vue
+++ b/storefront/app/components/skeletons/cards/brand.vue
@@ -25,19 +25,19 @@ const props = defineProps<{
 <style lang="scss" scoped>
 .sk {
   width: 100%;
-  background-color: rgba(255, 255, 255, 0.61);
-  border-radius: 8px;
+  background-color: $skeleton;
+  border-radius: $default_border_radius;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 20px;
-  border: 1px solid #e5e7eb;
+  border: 1px solid $border;
   padding: 23px;
 
   &__image {
     width: 100%;
     height: 233px;
-    border-radius: $default_border_radius;
+    border-radius: $less_border_radius;
   }
 
   &__name {
diff --git a/storefront/app/components/skeletons/cards/order.vue b/storefront/app/components/skeletons/cards/order.vue
index 3a6846db..41cca44a 100644
--- a/storefront/app/components/skeletons/cards/order.vue
+++ b/storefront/app/components/skeletons/cards/order.vue
@@ -39,9 +39,9 @@
 <style lang="scss" scoped>
 .sk {
   width: 100%;
-  border-radius: $default_border_radius;
-  background-color: rgba(255, 255, 255, 0.61);
-  border: 1px solid $accent;
+  border-radius: $less_border_radius;
+  background-color: $skeleton;
+  border: 1px solid $primary;
   display: flex;
   flex-direction: column;
   align-items: stretch;
@@ -58,11 +58,11 @@
   &__text {
     width: 100px;
     height: 20px;
-    border-radius: $default_border_radius;
+    border-radius: $less_border_radius;
   }
 
   &__bottom {
-    border-top: 1px solid $accent;
+    border-top: 1px solid $primary;
     padding-top: 10px;
     display: flex;
     justify-content: space-between;
@@ -77,7 +77,7 @@
   &__image {
     width: 52px;
     height: 65px;
-    border-radius: $default_border_radius;
+    border-radius: $less_border_radius;
   }
 
   &__price {
diff --git a/storefront/app/components/skeletons/cards/product.vue b/storefront/app/components/skeletons/cards/product.vue
index 5b7e228e..9a05acd9 100644
--- a/storefront/app/components/skeletons/cards/product.vue
+++ b/storefront/app/components/skeletons/cards/product.vue
@@ -34,6 +34,10 @@
                 variant="p"
                 class="sk__button"
             />
+            <el-skeleton-item
+                variant="p"
+                class="sk__button"
+            />
           </div>
         </div>
       </div>
@@ -50,9 +54,9 @@ const props = defineProps<{
 <style lang="scss" scoped>
 .sk {
   width: 100%;
-  border-radius: 8px;
-  border: 1px solid #e5e7eb;
-  background-color: rgba(255, 255, 255, 0.61);
+  border-radius: $default_border_radius;
+  border: 1px solid $border;
+  background-color: $skeleton;
   display: flex;
   flex-direction: column;
 
@@ -111,7 +115,7 @@ const props = defineProps<{
   &__image {
     width: 100%;
     height: 200px;
-    border-radius: $default_border_radius;
+    border-radius: $less_border_radius;
   }
 
   &__content {
@@ -152,6 +156,9 @@ const props = defineProps<{
 
   &__buttons {
     width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
   }
 
   &__button {
diff --git a/storefront/app/components/skeletons/docs.vue b/storefront/app/components/skeletons/docs.vue
index 0514f3e4..e85e1e95 100644
--- a/storefront/app/components/skeletons/docs.vue
+++ b/storefront/app/components/skeletons/docs.vue
@@ -20,6 +20,7 @@
   display: flex;
   flex-direction: column;
   gap: 20px;
+  background-color: $skeleton;
 
   &__block {
     display: flex;
@@ -38,8 +39,8 @@
   }
 }
 
-:deep(.el-skeleton__item) {
-  --el-skeleton-color: #c9ccd0 !important;
-  --el-skeleton-to-color: #c3c3c7 !important;
-}
+//:deep(.el-skeleton__item) {
+//  --el-skeleton-color: #c9ccd0 !important;
+//  --el-skeleton-to-color: #c3c3c7 !important;
+//}
 </style>
\ No newline at end of file
diff --git a/storefront/app/components/store/filter.vue b/storefront/app/components/store/filter.vue
index 83935040..0b81e0e1 100644
--- a/storefront/app/components/store/filter.vue
+++ b/storefront/app/components/store/filter.vue
@@ -236,8 +236,8 @@ const formatPriceTooltip = (value: number) => `€${value.toFixed(2)}`;
 <style scoped lang="scss">
 .filter {
   width: 290px;
-  border: 1px solid #e5e7ebFF;
-  border-radius: 8px;
+  border: 1px solid $border;
+  border-radius: $default_border_radius;
   display: flex;
   flex-direction: column;
   gap: 24px;
@@ -249,7 +249,7 @@ const formatPriceTooltip = (value: number) => `€${value.toFixed(2)}`;
     justify-content: space-between;
 
     & h2 {
-      color: $black;
+      color: $primary_dark;
       font-size: 18px;
       font-weight: 600;
       letter-spacing: -0.5px;
@@ -257,14 +257,13 @@ const formatPriceTooltip = (value: number) => `€${value.toFixed(2)}`;
 
     & span {
       cursor: pointer;
-      transition: 0.2s;
-      color: #4b5563;
+      color: $link_primary;
       font-size: 14px;
       font-weight: 400;
       letter-spacing: -0.5px;
 
       @include hover {
-        color: #313944;
+        color: $link_primary_hover;
       }
     }
   }
diff --git a/storefront/app/components/store/index.vue b/storefront/app/components/store/index.vue
index 61ce956f..6332c4b9 100644
--- a/storefront/app/components/store/index.vue
+++ b/storefront/app/components/store/index.vue
@@ -29,6 +29,7 @@
               :isList="productView === 'list'"
           />
           <skeletons-cards-product
+              v-if="pending"
               v-for="idx in 12"
               :key="idx"
               :isList="productView === 'list'"
@@ -36,6 +37,7 @@
         </div>
       </client-only>
       <div class="store__list-observer" ref="observer"></div>
+      <p class="store__empty" v-if="!products.length && !pending">{{ t('store.empty') }}</p>
     </div>
   </div>
 </template>
@@ -46,7 +48,7 @@ import {useCategoryBySlug} from '@composables/categories';
 import {useBrandBySlug} from '@composables/brands';
 import {useDefaultSeo} from '@composables/seo';
 
-const { locale } = useI18n();
+const { t, locale } = useI18n();
 const { $appHelpers } = useNuxtApp();
 
 const productView = useCookie<string>(
@@ -214,5 +216,11 @@ watch(maxPrice, async (newVal) => {
       height: 10px;
     }
   }
+
+  &__empty {
+    color: $primary;
+    font-weight: 500;
+    font-size: 18px;
+  }
 }
 </style>
\ No newline at end of file
diff --git a/storefront/app/components/store/top.vue b/storefront/app/components/store/top.vue
index c5e03ac4..077971b7 100644
--- a/storefront/app/components/store/top.vue
+++ b/storefront/app/components/store/top.vue
@@ -89,8 +89,8 @@ watch(select, value => {
   align-items: flex-start;
   justify-content: space-between;
   gap: 40px;
-  border-radius: 8px;
-  border: 1px solid #e5e7eb;
+  border-radius: $default_border_radius;
+  border: 1px solid $border;
   padding: 16px;
 
   &.filters {
@@ -106,31 +106,30 @@ watch(select, value => {
       font-weight: 400;
       font-size: 14px;
       letter-spacing: -0.5px;
-      color: #4b5563;
+      color: $text;
     }
   }
 
   &__view {
     display: flex;
     align-items: center;
-    border-radius: 4px;
-    border: 1px solid #e5e7eb;
+    border-radius: $less_border_radius;
+    border: 1px solid $border;
 
     &-button {
       cursor: pointer;
-      background-color: transparent;
+      background-color: $main;
       display: grid;
       place-items: center;
       padding: 10px;
-      transition: 0.2s;
-      color: #000;
+      color: $primary_dark;
 
       @include hover {
-        background-color: rgba(0, 0, 0, 0.1);
+        background-color: $main_hover;
       }
 
       &.active {
-        background-color: rgba(0, 0, 0, 0.1);
+        background-color: $link_secondary;
       }
     }
   }
diff --git a/storefront/app/components/ui/breadcrumbs.vue b/storefront/app/components/ui/breadcrumbs.vue
index 16facbc7..a8677d50 100644
--- a/storefront/app/components/ui/breadcrumbs.vue
+++ b/storefront/app/components/ui/breadcrumbs.vue
@@ -28,25 +28,24 @@ const { breadcrumbs } = useBreadcrumbs();
 
 <style scoped lang="scss">
 .breadcrumbs {
-  background-color: #f8f8f8;
+  background-color: $title_bg;
   padding: 15px 250px 15px 50px;
   line-height: 140%;
-  border-bottom: 1px solid #e5e7eb;
+  border-bottom: 1px solid $border;
 
   &__link {
     cursor: pointer !important;
-    transition: 0.2s;
-    color: $accent !important;
+    color: $primary !important;
     font-weight: 600 !important;
 
     @include hover {
-      color: $accentDark !important;
+      color: $primary_dark !important;
     }
   }
 
   &__current {
     font-weight: 600;
-    color: #333;
+    color: $primary_dark;
   }
 }
 </style>
\ No newline at end of file
diff --git a/storefront/app/components/ui/button.vue b/storefront/app/components/ui/button.vue
index 615d8f69..f1a8459f 100644
--- a/storefront/app/components/ui/button.vue
+++ b/storefront/app/components/ui/button.vue
@@ -28,9 +28,8 @@ const props = defineProps<{
   width: 100%;
   cursor: pointer;
   flex-shrink: 0;
-  transition: 0.2s;
-  background-color: #111827;
-  border-radius: 8px;
+  background-color: $primary;
+  border-radius: $default_border_radius;
   padding-block: 14px;
   display: flex;
   align-items: center;
@@ -38,49 +37,49 @@ const props = defineProps<{
   gap: 10px;
   z-index: 1;
 
-  color: $white;
+  color: $main;
   text-align: center;
   font-size: 16px;
   font-weight: 500;
 
   &.secondary {
-    background-color: $white;
-    border: 1px solid #d1d5db;
-    color: #374151;
+    background-color: $main;
+    border: 1px solid $border;
+    color: $secondary;
 
     @include hover {
-      background-color: #d1d5db;
+      background-color: $border;
     }
 
     &.active {
-      background-color: #d1d5db;
+      background-color: $border;
     }
 
     &:disabled {
       cursor: not-allowed;
-      background-color: #9a9a9a;
+      background-color: $disabled_secondary;
     }
 
     &:disabled:hover, &.active {
-      background-color: #9a9a9a;
+      background-color: $disabled_secondary;
     }
   }
 
   @include hover {
-    background-color: #222c41;
+    background-color: $primary_hover;
   }
 
   &.active {
-    background-color: #222c41;
+    background-color: $primary_hover;
   }
 
   &:disabled {
     cursor: not-allowed;
-    background-color: #0a0f1a;
+    background-color: $disabled;
   }
 
   &:disabled:hover, &.active {
-    background-color: #0a0f1a;
+    background-color: $disabled;
   }
 
   &__loader {
diff --git a/storefront/app/components/ui/checkbox.vue b/storefront/app/components/ui/checkbox.vue
index 52a56712..a0f52e55 100644
--- a/storefront/app/components/ui/checkbox.vue
+++ b/storefront/app/components/ui/checkbox.vue
@@ -1,5 +1,5 @@
 <template>
-  <label class="checkbox" :class="{ isAccent }">
+  <label class="checkbox" :class="{ isPrimary }">
     <input
       :id="id"
       class="checkbox__input"
@@ -18,7 +18,7 @@
 const props = defineProps<{
   id?: string;
   modelValue: boolean;
-  isAccent?: boolean;
+  isPrimary?: boolean;
 }>();
 const emit = defineEmits<{
   (e: 'update:modelValue', v: boolean): void;
@@ -37,14 +37,14 @@ function onChange(e: Event) {
   gap: 5px;
   cursor: pointer;
 
-  &.isAccent {
+  &.isPrimary {
     & .checkbox__block {
-      border: 2px solid $accentDark;
-      border-radius: $default_border_radius;
+      border: 2px solid $primary_dark;
+      border-radius: $less_border_radius;
     }
 
     & .checkbox__label {
-      color: $accentDark;
+      color: $primary_dark;
       font-weight: 600;
     }
   }
@@ -59,7 +59,7 @@ function onChange(e: Event) {
     display: inline-block;
     width: 16px;
     height: 16px;
-    border: 0.5px solid $black;
+    border: 0.5px solid $primary_dark;
     border-radius: 1px;
     position: relative;
 
@@ -71,7 +71,7 @@ function onChange(e: Event) {
       transform: translate(-50%, -50%);
       width: 10px;
       height: 10px;
-      background-color: $black;
+      background-color: $primary_dark;
       border-radius: 2px;
       opacity: 0;
     }
@@ -79,7 +79,7 @@ function onChange(e: Event) {
 
   &__label {
     cursor: pointer;
-    color: #374151;
+    color: $secondary;
     font-size: 14px;
     font-weight: 400;
     letter-spacing: -0.5px;
diff --git a/storefront/app/components/ui/input.vue b/storefront/app/components/ui/input.vue
index 0eed11ff..2e1898c4 100644
--- a/storefront/app/components/ui/input.vue
+++ b/storefront/app/components/ui/input.vue
@@ -111,7 +111,7 @@ function onInput(e: Event) {
   }
 
   &__label {
-    color: #374151;
+    color: $secondary;
     font-size: 14px;
     font-weight: 500;
     letter-spacing: -0.5px;
@@ -120,17 +120,17 @@ function onInput(e: Event) {
   &__input {
     width: 100%;
     padding: 14px 12px;
-    border: 1px solid #d1d5db;
-    border-radius: 8px;
-    background-color: $white;
+    border: 1px solid $border;
+    border-radius: $default_border_radius;
+    background-color: $main;
 
-    color: #1f1f1f;
+    color: $primary_dark;
     font-size: 16px;
     font-weight: 400;
     letter-spacing: -0.5px;
 
     &::placeholder {
-      color: #868686;
+      color: $disabled_secondary;
     }
   }
 
@@ -144,7 +144,7 @@ function onInput(e: Event) {
     display: grid;
     place-items: center;
     font-size: 18px;
-    color: #838383;
+    color: $disabled_secondary;
   }
 
   &__error {
diff --git a/storefront/app/components/ui/language-switcher.vue b/storefront/app/components/ui/language-switcher.vue
index 4c3920bf..3a885ad1 100644
--- a/storefront/app/components/ui/language-switcher.vue
+++ b/storefront/app/components/ui/language-switcher.vue
@@ -80,15 +80,14 @@ const uiSwitchLanguage = (localeCode: string) => {
     display: flex;
     gap: 5px;
     padding: 5px;
-    border-radius: $default_border_radius;
-    transition: 0.2s;
+    border-radius: $less_border_radius;
 
     @include hover {
-      background-color: rgba(0, 0, 0, 0.2);
+      background-color: $primary_shadow;
     }
 
     &.active {
-      background-color: rgba(0, 0, 0, 0.2);
+      background-color: $primary_shadow;
     }
 
     & img {
@@ -104,7 +103,7 @@ const uiSwitchLanguage = (localeCode: string) => {
     transform: translateX(-50%);
     width: 100%;
     overflow: hidden;
-    border-radius: $default_border_radius;
+    border-radius: $less_border_radius;
     display: grid;
     grid-template-rows: 0fr;
     transition: grid-template-rows 0.2s ease;
@@ -126,8 +125,7 @@ const uiSwitchLanguage = (localeCode: string) => {
       width: 100%;
       cursor: pointer;
       padding: 3px 5px;
-      background-color: #cccccc;
-      transition: 0.1s;
+      background-color: $link_secondary;
 
       &:first-child {
         padding-top: 5px;
@@ -137,7 +135,7 @@ const uiSwitchLanguage = (localeCode: string) => {
       }
 
       @include hover {
-        background-color: #b2b2b2;
+        background-color: $link_secondary_hover;
       }
     }
   }
diff --git a/storefront/app/components/ui/link.vue b/storefront/app/components/ui/link.vue
index 51f03bd1..b18e46aa 100644
--- a/storefront/app/components/ui/link.vue
+++ b/storefront/app/components/ui/link.vue
@@ -39,9 +39,8 @@ const handleClick = () => {
   display: flex;
   align-items: center;
   gap: 5px;
-  transition: 0.2s;
   cursor: pointer;
-  color: #111827;
+  color: $primary;
   font-size: 14px;
   font-weight: 400;
 
@@ -50,7 +49,7 @@ const handleClick = () => {
   }
 
   @include hover {
-    color: #364565;
+    color: $secondary;
   }
 }
 </style>
\ No newline at end of file
diff --git a/storefront/app/components/ui/loader.vue b/storefront/app/components/ui/loader.vue
index e6e08dbe..c18fee08 100644
--- a/storefront/app/components/ui/loader.vue
+++ b/storefront/app/components/ui/loader.vue
@@ -20,7 +20,7 @@
     width: 10px;
     height: 10px;
     border-radius: 50%;
-    background-color: $white;
+    background-color: $main;
   }
 }
 
diff --git a/storefront/app/components/ui/search.vue b/storefront/app/components/ui/search.vue
index 179951ce..54988ab4 100644
--- a/storefront/app/components/ui/search.vue
+++ b/storefront/app/components/ui/search.vue
@@ -136,7 +136,7 @@ function goTo(category: string, item: any) {
 <style lang="scss" scoped>
 .search {
   width: 100%;
-  background-color: $white;
+  background-color: $main;
 
   &__inner {
     padding-block: 10px;
@@ -154,24 +154,30 @@ function goTo(category: string, item: any) {
     top: 0;
     width: 100vw;
     z-index: 1;
-    transition: 0.2s;
   }
 
   &__wrapper {
     width: 100%;
-    background-color: #f7f7f7;
-    border-radius: $default_border_radius;
-    transition: 0.2s;
+    background-color: $border;
+    border-radius: $less_border_radius;
     position: relative;
     z-index: 2;
 
     &.active {
-      background-color: $white;
+      background-color: $main;
       box-shadow: 0 0 0 1px #0000000a,0 4px 4px #0000000a,0 20px 40px #00000014;
+
+      & .search__wrapper {
+        border-radius: $less_border_radius $less_border_radius 0 0;
+      }
+
+      & .search__form input {
+        border-radius: $less_border_radius $less_border_radius 0 0;
+      }
     }
 
     @include hover {
-      background-color: $white;
+      background-color: $main;
       box-shadow: 0 0 0 1px #0000000a,0 4px 4px #0000000a,0 20px 40px #00000014;
     }
   }
@@ -186,9 +192,10 @@ function goTo(category: string, item: any) {
       width: 100%;
       height: 100%;
       padding-inline: 20px 150px;
-      border: 1px solid #dedede;
-      border-radius: $default_border_radius;
+      border: 1px solid $link_secondary;
+      border-radius: $less_border_radius;
 
+      color: $secondary;
       font-size: 16px;
       font-weight: 500;
     }
@@ -207,39 +214,43 @@ function goTo(category: string, item: any) {
       cursor: pointer;
       display: grid;
       place-items: center;
-      border-radius: $default_border_radius;
+      border-radius: $less_border_radius;
       padding: 5px 12px;
-      border: 1px solid $accent;
-      background-color: rgba($accent, 0.2);
-      transition: 0.2s;
+      border: 1px solid $primary;
+      background-color: transparent;
 
       font-size: 12px;
-      color: $accent;
+      color: $primary;
 
       @include hover {
-        background-color: rgba($accent, 1);
-        color: $white;
+        background-color: $primary;
+        color: $main;
       }
     }
 
     &-line {
-      background-color: $accent;
+      background-color: $primary;
       height: 15px;
       width: 1px;
     }
   }
 
   &__results {
+    position: absolute;
+    z-index: 1;
+    top: 100%;
+    width: 100%;
     max-height: 0;
     overflow: auto;
-    transition: 0.2s;
+    background-color: $main;
+    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.0392156863), 0 4px 4px rgba(0, 0, 0, 0.0392156863), 0 20px 40px rgba(0, 0, 0, 0.0784313725);
 
     &.active {
       max-height: 40vh;
     }
 
     &-title {
-      background-color: rgba($accent, 0.2);
+      background-color: rgba($primary, 0.2);
       padding: 7px 20px;
 
       font-weight: 600;
@@ -258,11 +269,10 @@ function goTo(category: string, item: any) {
     align-items: center;
     justify-content: space-between;
     gap: 30px;
-    transition: 0.2s;
     font-size: 14px;
 
     @include hover {
-      background-color: #efefef;
+      background-color: $main_hover;
     }
 
     &-left {
@@ -280,7 +290,7 @@ function goTo(category: string, item: any) {
     }
 
     & span {
-      color: #7c7c7c;
+      color: $text;
     }
   }
 }
diff --git a/storefront/app/components/ui/textarea.vue b/storefront/app/components/ui/textarea.vue
index 03847b64..71e9de0a 100644
--- a/storefront/app/components/ui/textarea.vue
+++ b/storefront/app/components/ui/textarea.vue
@@ -66,7 +66,7 @@ const onInput = (e: Event) => {
   }
 
   &__label {
-    color: #374151;
+    color: $secondary;
     font-size: 14px;
     font-weight: 500;
     letter-spacing: -0.5px;
@@ -77,17 +77,17 @@ const onInput = (e: Event) => {
     height: 150px;
     resize: none;
     padding: 6px 12px;
-    border: 1px solid #e0e0e0;
-    border-radius: $default_border_radius;
-    background-color: $white;
+    border: 1px solid $border;
+    border-radius: $less_border_radius;
+    background-color: $main;
 
-    color: #1f1f1f;
-    font-size: 12px;
+    color: $primary_dark;
+    font-size: 16px;
     font-weight: 400;
-    line-height: 20px;
+    letter-spacing: -0.5px;
 
     &::placeholder {
-      color: #2B2B2B;
+      color: $disabled_secondary;
     }
   }
 
diff --git a/storefront/app/components/ui/theme-toggle.vue b/storefront/app/components/ui/theme-toggle.vue
index 83acc2af..6a5de936 100644
--- a/storefront/app/components/ui/theme-toggle.vue
+++ b/storefront/app/components/ui/theme-toggle.vue
@@ -1,11 +1,10 @@
 <template>
   <button
       @click="toggleTheme"
-      class="theme-toggle"
-      :aria-label="`Переключить на ${theme === 'light' ? 'тёмную' : 'светлую'} тему`"
+      class="theme"
   >
-    <Icon v-if="theme === 'light'" name="line-md:moon-alt-loop" size="24" />
-    <Icon v-else name="line-md:sunny-outline-loop" size="24" />
+    <icon v-if="theme === 'light'" name="line-md:moon-alt-loop" size="22" />
+    <icon v-else name="line-md:sunny-outline-loop" size="22" />
   </button>
 </template>
 
@@ -16,18 +15,20 @@ const { theme, toggleTheme } = useThemes();
 </script>
 
 <style scoped lang="scss">
-.theme-toggle {
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-radius: $default_border_radius;
-  padding: 8px;
+.theme {
+  background-color: transparent;
+  border-radius: $less_border_radius;
+  padding: 5px;
   cursor: pointer;
-  color: var(--color-text-primary);
+  color: $primary;
   transition: all 0.3s ease;
 
-  &:hover {
-    background: var(--color-surface-hover);
-    border-color: var(--color-accent);
+  @include hover {
+    background-color: $primary_shadow;
+  }
+
+  & span {
+    display: block;
   }
 }
 </style>
\ No newline at end of file
diff --git a/storefront/app/components/ui/title.vue b/storefront/app/components/ui/title.vue
index ea3df51d..8a90db41 100644
--- a/storefront/app/components/ui/title.vue
+++ b/storefront/app/components/ui/title.vue
@@ -1,8 +1,10 @@
 <template>
   <div class="title">
-    <h2>
-      <slot />
-    </h2>
+    <div class="container">
+      <div class="title__wrapper">
+        <slot />
+      </div>
+    </div>
   </div>
 </template>
 
@@ -12,17 +14,57 @@
 
 <style scoped lang="scss">
 .title {
-  padding-block: 10px 50px;
-  display: grid;
-  place-items: center;
-  margin-bottom: 50px;
-  background: linear-gradient(0deg, $light 0%, $accentSmooth 100%);
+  padding-block: 50px;
+  background-color: $title_bg;
 
-  & h2 {
-    text-align: center;
-    font-size: 48px;
-    font-weight: 900;
-    color: $white;
+  &__wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 20px;
+  }
+}
+
+:deep(.title__wrapper h1) {
+  color: $primary_dark;
+  font-family: "Playfair Display", sans-serif;
+  font-weight: 700;
+  font-size: 36px;
+  letter-spacing: -0.5px;
+}
+:deep(.title__wrapper p) {
+  max-width: 600px;
+  text-align: center;
+  color: $text;
+  font-size: 18px;
+  font-weight: 400;
+  letter-spacing: -0.5px;
+}
+:deep(.title__wrapper div) {
+  position: relative;
+
+  & span {
+    position: absolute;
+    top: 50%;
+    right: 24px;
+    transform: translateY(-50%);
+    color: $disabled_secondary;
+  }
+
+  & input {
+    background-color: $main;
+    border: 1px solid $border;
+    border-radius: 50px;
+    padding: 18px 70px 18px 50px;
+
+    color: $text;
+    font-size: 16px;
+    font-weight: 400;
+    letter-spacing: -0.5px;
+
+    &::placeholder {
+      color: $text;
+    }
   }
 }
 </style>
\ No newline at end of file
diff --git a/storefront/app/composables/themes/useThemes.ts b/storefront/app/composables/themes/useThemes.ts
index e7529031..310909ea 100644
--- a/storefront/app/composables/themes/useThemes.ts
+++ b/storefront/app/composables/themes/useThemes.ts
@@ -1,7 +1,7 @@
 export const useThemes = () => {
 	const { $appHelpers } = useNuxtApp();
 
-	const themeCookie = useCookie<'light' | 'dark'>($appHelpers.COOKIES_THEME_KEY || 'schon-theme', {
+	const themeCookie = useCookie<'light' | 'dark'>($appHelpers.COOKIES_THEME_KEY, {
 		default: () => 'light',
 		path: '/',
 	});
@@ -13,12 +13,7 @@ export const useThemes = () => {
 		themeCookie.value = newTheme;
 
 		if (import.meta.client) {
-			const html = document.documentElement;
-			if (newTheme === 'dark') {
-				html.classList.add('dark');
-			} else {
-				html.classList.remove('dark');
-			}
+			document.documentElement.setAttribute('data-theme', newTheme);
 		}
 	};
 
diff --git a/storefront/app/pages/auth/reset-password.vue b/storefront/app/pages/auth/reset-password.vue
index a9fa3fd0..83ed59c7 100644
--- a/storefront/app/pages/auth/reset-password.vue
+++ b/storefront/app/pages/auth/reset-password.vue
@@ -20,7 +20,7 @@ setPageTitle(t('breadcrumbs.resetPassword'));
 
 <style lang="scss" scoped>
 .auth {
-  background-color: #e5e7eb;
+  background-color: $border;
 
   &__wrapper {
     padding-block: 100px;
diff --git a/storefront/app/pages/auth/sign-in.vue b/storefront/app/pages/auth/sign-in.vue
index 77a24b79..52ebeb96 100644
--- a/storefront/app/pages/auth/sign-in.vue
+++ b/storefront/app/pages/auth/sign-in.vue
@@ -25,7 +25,7 @@ setPageTitle(t('breadcrumbs.login'));
 
 <style lang="scss"  scoped>
 .auth {
-  background-color: $white;
+  background-color: $main;
   display: flex;
   align-items: stretch;
 
diff --git a/storefront/app/pages/auth/sign-up.vue b/storefront/app/pages/auth/sign-up.vue
index 75212e39..a3147276 100644
--- a/storefront/app/pages/auth/sign-up.vue
+++ b/storefront/app/pages/auth/sign-up.vue
@@ -25,7 +25,7 @@ setPageTitle(t('breadcrumbs.register'));
 
 <style lang="scss"  scoped>
 .auth {
-  background-color: $white;
+  background-color: $main;
   display: flex;
   align-items: stretch;
 
diff --git a/storefront/app/pages/blog/[slug].vue b/storefront/app/pages/blog/[slug].vue
index 56113385..b5079a50 100644
--- a/storefront/app/pages/blog/[slug].vue
+++ b/storefront/app/pages/blog/[slug].vue
@@ -28,9 +28,5 @@ setPageTitle(post.value?.title ? post.value?.title : t('breadcrumbs.blog'));
 <style lang="scss" scoped>
 .post {
   padding-block: 50px 100px;
-
-  &__wrapper {
-
-  }
 }
 </style>
\ No newline at end of file
diff --git a/storefront/app/pages/blog/index.vue b/storefront/app/pages/blog/index.vue
index f9a2d466..731866b3 100644
--- a/storefront/app/pages/blog/index.vue
+++ b/storefront/app/pages/blog/index.vue
@@ -1,13 +1,9 @@
 <template>
   <div class="blog">
-    <div class="blog__top">
-      <div class="container">
-        <div class="blog__top-wrapper">
-          <h1>{{ t('blog.title') }}</h1>
-          <p>{{ t('blog.text') }}</p>
-        </div>
-      </div>
-    </div>
+    <ui-title>
+      <h1>{{ t('blog.title') }}</h1>
+      <p>{{ t('blog.text') }}</p>
+    </ui-title>
     <div class="blog__main">
       <div class="container">
         <div class="blog__main-wrapper">
@@ -42,39 +38,10 @@ setPageTitle(t('breadcrumbs.blog'));
 
 <style lang="scss" scoped>
 .blog {
-  &__top {
-    padding-block: 70px;
-    background-color: #f8f8f8;
-
-    &-wrapper {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      gap: 24px;
-
-      & h1 {
-        color: #1a1a1a;
-        font-family: "Playfair Display", sans-serif;
-        font-size: 48px;
-        font-weight: 700;
-        letter-spacing: -0.5px;
-      }
-
-      & p {
-        max-width: 600px;
-        text-align: center;
-        color: #4b5563;
-        font-size: 18px;
-        font-weight: 400;
-        letter-spacing: -0.5px;
-      }
-    }
-  }
-
   &__main {
-    background-color: $white;
+    background-color: $main;
     padding-block: 70px;
-    border-top: 1px solid #f3f4f6;
+    border-top: 1px solid $border;
 
     &-wrapper {
       display: grid;
diff --git a/storefront/app/pages/brand/[brandSlug].vue b/storefront/app/pages/brand/[brandSlug].vue
index 36e5d508..7e0bee76 100644
--- a/storefront/app/pages/brand/[brandSlug].vue
+++ b/storefront/app/pages/brand/[brandSlug].vue
@@ -1,20 +1,16 @@
 <template>
   <div class="brand">
-    <div class="brand__top">
-      <div class="container">
-        <div class="brand__top-wrapper" v-if="brand">
-          <nuxt-img
-              format="webp"
-              width="150px"
-              densities="x1"
-              :src="brand.image"
-              :alt="brand.name"
-          />
-          <h1 class="brand__top-title">{{ brand.name }}</h1>
-          <p class="brand__top-text">{{ brand.description }}</p>
-        </div>
-      </div>
-    </div>
+    <ui-title v-if="brand">
+      <nuxt-img
+          format="webp"
+          width="150px"
+          densities="x1"
+          :src="brand.image"
+          :alt="brand.name"
+      />
+      <h1>{{ brand.name }}</h1>
+      <p>{{ brand.description }}</p>
+    </ui-title>
     <div class="brand__main">
       <div class="container">
         <div class="brand__main-wrapper">
@@ -77,42 +73,10 @@ setPageTitle(brand.value?.name ?? 'Brand');
 
 <style lang="scss" scoped>
 .brand {
-  &__top {
-    padding-block: 50px;
-    background-color: #f8f8f8;
-
-    &-wrapper {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      gap: 20px;
-    }
-
-    &-title {
-      font-family: "Playfair Display", sans-serif;
-      font-weight: 700;
-      font-size: 36px;
-      letter-spacing: -0.5px;
-    }
-
-    &-text {
-      max-width: 600px;
-      text-align: center;
-      color: #4b5563;
-      font-size: 18px;
-      font-weight: 400;
-      letter-spacing: -0.5px;
-    }
-  }
-
   &__main {
-    background-color: $white;
+    background-color: $main;
     padding-block: 70px;
-    border-top: 1px solid #f3f4f6;
-
-    &-wrapper {
-
-    }
+    border-top: 1px solid $border;
   }
 }
 </style>
\ No newline at end of file
diff --git a/storefront/app/pages/brands.vue b/storefront/app/pages/brands.vue
index 88ae6fcb..fab39de9 100644
--- a/storefront/app/pages/brands.vue
+++ b/storefront/app/pages/brands.vue
@@ -1,22 +1,18 @@
 <template>
   <div class="brands">
-    <div class="brands__top">
-      <div class="container">
-        <div class="brands__top-wrapper">
-          <h1>{{ t('brands.title') }}</h1>
-          <p>{{ t('brands.text') }}</p>
-          <div class="brands__top-search">
-            <input
-                type="text"
-                inputmode="text"
-                :placeholder="t('fields.brandsSearch')"
-                v-model="searchInput"
-            >
-            <icon name="tabler:search" size="20" />
-          </div>
-        </div>
+    <ui-title>
+      <h1>{{ t('brands.title') }}</h1>
+      <p>{{ t('brands.text') }}</p>
+      <div class="brands__top-search">
+        <input
+            type="text"
+            inputmode="text"
+            :placeholder="t('fields.brandsSearch')"
+            v-model="searchInput"
+        >
+        <icon name="tabler:search" size="20" />
       </div>
-    </div>
+    </ui-title>
     <div class="brands__main">
       <div class="container">
         <div class="brands__main-wrapper">
@@ -83,71 +79,10 @@ setPageTitle(t('breadcrumbs.brands'));
 
 <style lang="scss" scoped>
 .brands {
-  &__wrapper {
-
-  }
-
-  &__top {
-    padding-block: 70px;
-    background-color: #f8f8f8;
-
-    &-wrapper {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      gap: 24px;
-
-      & h1 {
-        color: #1a1a1a;
-        font-family: "Playfair Display", sans-serif;
-        font-size: 48px;
-        font-weight: 700;
-        letter-spacing: -0.5px;
-      }
-
-      & p {
-        max-width: 600px;
-        text-align: center;
-        color: #4b5563;
-        font-size: 18px;
-        font-weight: 400;
-        letter-spacing: -0.5px;
-      }
-    }
-
-    &-search {
-      position: relative;
-
-      & span {
-        position: absolute;
-        top: 50%;
-        right: 24px;
-        transform: translateY(-50%);
-        color: #8c8c8c;
-      }
-
-      & input {
-        background-color: $white;
-        border: 1px solid #e5e7eb;
-        border-radius: 50px;
-        padding: 18px 50px;
-
-        color: #8c8c8c;
-        font-size: 16px;
-        font-weight: 400;
-        letter-spacing: -0.5px;
-
-        &::placeholder {
-          color: #8c8c8c;
-        }
-      }
-    }
-  }
-
   &__main {
-    background-color: $white;
+    background-color: $main;
     padding-block: 70px;
-    border-top: 1px solid #f3f4f6;
+    border-top: 1px solid $border;
 
     &-wrapper {
       display: grid;
diff --git a/storefront/app/pages/cart.vue b/storefront/app/pages/cart.vue
index 04798ed8..917d3782 100644
--- a/storefront/app/pages/cart.vue
+++ b/storefront/app/pages/cart.vue
@@ -92,7 +92,7 @@ setPageTitle(t('breadcrumbs.cart'));
 <style lang="scss" scoped>
 .cart {
   padding-block: 50px 100px;
-  background-color: $white;
+  background-color: $main;
 
   &__wrapper {
     display: flex;
@@ -112,7 +112,7 @@ setPageTitle(t('breadcrumbs.cart'));
     }
 
     &-title {
-      color: #1a1a1a;
+      color: $primary_dark;
       font-family: "Playfair Display", sans-serif;
       font-size: 36px;
       font-weight: 600;
@@ -120,7 +120,7 @@ setPageTitle(t('breadcrumbs.cart'));
     }
 
     & p {
-      color: #4b5563;
+      color: $text;
       font-size: 18px;
       font-weight: 400;
       letter-spacing: -0.5px;
@@ -139,5 +139,11 @@ setPageTitle(t('breadcrumbs.cart'));
       gap: 25px;
     }
   }
+
+  &__empty {
+    font-weight: 500;
+    font-size: 18px;
+    color: $primary;
+  }
 }
 </style>
\ No newline at end of file
diff --git a/storefront/app/pages/catalog/[categorySlug].vue b/storefront/app/pages/catalog/[categorySlug].vue
index 434952e1..8addffc6 100644
--- a/storefront/app/pages/catalog/[categorySlug].vue
+++ b/storefront/app/pages/catalog/[categorySlug].vue
@@ -1,13 +1,9 @@
 <template>
   <div class="category">
-    <div class="category__top">
-      <div class="container">
-        <div class="category__top-wrapper">
-          <h1>{{ category?.name }}</h1>
-          <p>{{ category?.description }}</p>
-        </div>
-      </div>
-    </div>
+    <ui-title>
+      <h1>{{ category?.name }}</h1>
+      <p>{{ category?.description }}</p>
+    </ui-title>
     <div class="category__main">
       <div class="container">
         <div class="category__main-wrapper">
@@ -93,68 +89,10 @@ function findBySlug(nodes: ICategory[], slug: string): ICategory | undefined {
 
 <style scoped lang="scss">
 .category {
-
-  &__top {
-    padding-block: 70px;
-    background-color: #f8f8f8;
-
-    &-wrapper {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      gap: 24px;
-
-      & h1 {
-        color: #1a1a1a;
-        font-family: "Playfair Display", sans-serif;
-        font-size: 48px;
-        font-weight: 700;
-        letter-spacing: -0.5px;
-      }
-
-      & p {
-        max-width: 600px;
-        text-align: center;
-        color: #4b5563;
-        font-size: 18px;
-        font-weight: 400;
-        letter-spacing: -0.5px;
-      }
-    }
-
-    &-search {
-      position: relative;
-
-      & span {
-        position: absolute;
-        top: 50%;
-        right: 24px;
-        transform: translateY(-50%);
-        color: #8c8c8c;
-      }
-
-      & input {
-        background-color: $white;
-        border: 1px solid #e5e7eb;
-        border-radius: 50px;
-        padding: 18px 50px;
-
-        color: #8c8c8c;
-        font-size: 16px;
-        font-weight: 400;
-        letter-spacing: -0.5px;
-
-        &::placeholder {
-          color: #8c8c8c;
-        }
-      }
-    }
-  }
-
   &__main {
-    background-color: $white;
+    background-color: $main;
     padding-block: 70px;
-    border-top: 1px solid #f3f4f6;
+    border-top: 1px solid $border;
 
     &-list {
       display: grid;
diff --git a/storefront/app/pages/catalog/index.vue b/storefront/app/pages/catalog/index.vue
index 72651b53..8da97f98 100644
--- a/storefront/app/pages/catalog/index.vue
+++ b/storefront/app/pages/catalog/index.vue
@@ -1,13 +1,9 @@
 <template>
   <div class="catalog">
-    <div class="catalog__top">
-      <div class="container">
-        <div class="catalog__top-wrapper">
-          <h1>{{ t('catalog.title') }}</h1>
-          <p>{{ t('catalog.text') }}</p>
-        </div>
-      </div>
-    </div>
+    <ui-title>
+      <h1>{{ t('catalog.title') }}</h1>
+      <p>{{ t('catalog.text') }}</p>
+    </ui-title>
     <div class="catalog__main">
       <div class="container">
         <div class="catalog__main-wrapper">
@@ -37,39 +33,10 @@ setPageTitle(t('breadcrumbs.catalog'));
 
 <style lang="scss" scoped>
 .catalog {
-  &__top {
-    padding-block: 70px;
-    background-color: #f8f8f8;
-
-    &-wrapper {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      gap: 24px;
-
-      & h1 {
-        color: #1a1a1a;
-        font-family: "Playfair Display", sans-serif;
-        font-size: 48px;
-        font-weight: 700;
-        letter-spacing: -0.5px;
-      }
-
-      & p {
-        max-width: 600px;
-        text-align: center;
-        color: #4b5563;
-        font-size: 18px;
-        font-weight: 400;
-        letter-spacing: -0.5px;
-      }
-    }
-  }
-
   &__main {
-    background-color: $white;
+    background-color: $main;
     padding-block: 70px;
-    border-top: 1px solid #f3f4f6;
+    border-top: 1px solid $border;
 
     &-wrapper {
       display: grid;
diff --git a/storefront/app/pages/contact.vue b/storefront/app/pages/contact.vue
index 6f6b13dc..197caab3 100644
--- a/storefront/app/pages/contact.vue
+++ b/storefront/app/pages/contact.vue
@@ -1,13 +1,9 @@
 <template>
   <div class="contact">
-    <div class="contact__top">
-      <div class="container">
-        <div class="contact__top-wrapper">
-          <h1>{{ t('contact.title') }}</h1>
-          <p>{{ t('contact.text') }}</p>
-        </div>
-      </div>
-    </div>
+    <ui-title>
+      <h1>{{ t('contact.title') }}</h1>
+      <p>{{ t('contact.text') }}</p>
+    </ui-title>
     <div class="contact__main">
       <div class="container">
         <div class="contact__main-wrapper">
@@ -66,39 +62,10 @@ setPageTitle(t('breadcrumbs.contact'));
 
 <style lang="scss" scoped>
 .contact {
-  &__top {
-    padding-block: 70px;
-    background-color: #f8f8f8;
-
-    &-wrapper {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      gap: 24px;
-
-      & h1 {
-        color: #1a1a1a;
-        font-family: "Playfair Display", sans-serif;
-        font-size: 48px;
-        font-weight: 700;
-        letter-spacing: -0.5px;
-      }
-
-      & p {
-        max-width: 600px;
-        text-align: center;
-        color: #4b5563;
-        font-size: 18px;
-        font-weight: 400;
-        letter-spacing: -0.5px;
-      }
-    }
-  }
-
   &__main {
-    background-color: $white;
+    background-color: $main;
     padding-block: 70px;
-    border-top: 1px solid #f3f4f6;
+    border-top: 1px solid $border;
 
     &-wrapper {
       display: flex;
@@ -114,7 +81,7 @@ setPageTitle(t('breadcrumbs.contact'));
       gap: 40px;
 
       & .title {
-        color: #1a1a1a;
+        color: $primary_dark;
         font-family: "Playfair Display", sans-serif;
         font-size: 30px;
         font-weight: 700;
@@ -122,7 +89,7 @@ setPageTitle(t('breadcrumbs.contact'));
       }
 
       & .subtitle {
-        color: #4b5563;
+        color: $text;
         font-size: 16px;
         font-weight: 400;
         letter-spacing: -0.5px;
@@ -139,12 +106,12 @@ setPageTitle(t('breadcrumbs.contact'));
           gap: 15px;
 
           &-icon {
-            background-color: #1a1a1a;
-            border-radius: 8px;
+            background-color: $primary_dark;
+            border-radius: $default_border_radius;
             padding: 14px;
 
             & span {
-              color: $white;
+              color: $main;
               display: block;
             }
           }
@@ -155,21 +122,20 @@ setPageTitle(t('breadcrumbs.contact'));
             gap: 6px;
 
             & h6 {
-              color: #1a1a1a;
+              color: $primary_dark;
               font-size: 16px;
               font-weight: 500;
               letter-spacing: -0.5px;
             }
 
             & a {
-              transition: 0.2s;
-              color: #4b5563;
+              color: $secondary;
               font-size: 16px;
               font-weight: 400;
               letter-spacing: -0.5px;
 
               @include hover {
-                color: #1c2126;
+                color: $secondary_hover;
               }
             }
           }
diff --git a/storefront/app/pages/docs/about-us.vue b/storefront/app/pages/docs/about-us.vue
index 0887a707..a3b28b3b 100644
--- a/storefront/app/pages/docs/about-us.vue
+++ b/storefront/app/pages/docs/about-us.vue
@@ -1,12 +1,8 @@
 <template>
   <div class="docs">
-    <div class="docs__top">
-      <div class="container">
-        <div class="docs__top-wrapper">
-          <h1 class="docs__top-title">{{ t('docs.about.title') }}</h1>
-        </div>
-      </div>
-    </div>
+    <ui-title>
+      <h1>{{ t('docs.about.title') }}</h1>
+    </ui-title>
     <div class="docs__main">
       <div class="container">
         <div
@@ -35,36 +31,8 @@ setPageTitle(t('breadcrumbs.about'));
 
 <style lang="scss" scoped>
 .docs {
-  &__top {
-    padding-block: 50px;
-    background-color: #f8f8f8;
-
-    &-wrapper {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      gap: 20px;
-    }
-
-    &-title {
-      font-family: "Playfair Display", sans-serif;
-      font-weight: 700;
-      font-size: 36px;
-      letter-spacing: -0.5px;
-    }
-
-    &-text {
-      max-width: 600px;
-      text-align: center;
-      color: #4b5563;
-      font-size: 18px;
-      font-weight: 400;
-      letter-spacing: -0.5px;
-    }
-  }
-
   &__main {
-    background-color: $white;
+    background-color: $main;
     padding-block: 50px 100px;
 
     &-wrapper {
@@ -77,7 +45,7 @@ setPageTitle(t('breadcrumbs.about'));
         flex-direction: column;
         gap: 30px;
 
-        color: #1a1a1a;
+        color: $primary_dark;
         font-size: 16px;
         font-weight: 500;
         letter-spacing: -0.5px;
diff --git a/storefront/app/pages/docs/faq.vue b/storefront/app/pages/docs/faq.vue
index 4b50fe15..f0103094 100644
--- a/storefront/app/pages/docs/faq.vue
+++ b/storefront/app/pages/docs/faq.vue
@@ -1,12 +1,8 @@
 <template>
   <div class="docs">
-    <div class="docs__top">
-      <div class="container">
-        <div class="docs__top-wrapper">
-          <h1 class="docs__top-title">{{ t('docs.faq.title') }}</h1>
-        </div>
-      </div>
-    </div>
+    <ui-title>
+      <h1>{{ t('docs.faq.title') }}</h1>
+    </ui-title>
     <div class="docs__main">
       <div class="container">
         <div
@@ -35,36 +31,8 @@ setPageTitle(t('breadcrumbs.faq'));
 
 <style lang="scss" scoped>
 .docs {
-  &__top {
-    padding-block: 50px;
-    background-color: #f8f8f8;
-
-    &-wrapper {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      gap: 20px;
-    }
-
-    &-title {
-      font-family: "Playfair Display", sans-serif;
-      font-weight: 700;
-      font-size: 36px;
-      letter-spacing: -0.5px;
-    }
-
-    &-text {
-      max-width: 600px;
-      text-align: center;
-      color: #4b5563;
-      font-size: 18px;
-      font-weight: 400;
-      letter-spacing: -0.5px;
-    }
-  }
-
   &__main {
-    background-color: $white;
+    background-color: $main;
     padding-block: 50px 100px;
 
     &-wrapper {
@@ -77,7 +45,7 @@ setPageTitle(t('breadcrumbs.faq'));
         flex-direction: column;
         gap: 30px;
 
-        color: #1a1a1a;
+        color: $primary_dark;
         font-size: 16px;
         font-weight: 500;
         letter-spacing: -0.5px;
diff --git a/storefront/app/pages/docs/privacy-policy.vue b/storefront/app/pages/docs/privacy-policy.vue
index 913366e9..40bc52d3 100644
--- a/storefront/app/pages/docs/privacy-policy.vue
+++ b/storefront/app/pages/docs/privacy-policy.vue
@@ -1,12 +1,8 @@
 <template>
   <div class="docs">
-    <div class="docs__top">
-      <div class="container">
-        <div class="docs__top-wrapper">
-          <h1 class="docs__top-title">{{ t('docs.policy.title') }}</h1>
-        </div>
-      </div>
-    </div>
+    <ui-title>
+      <h1>{{ t('docs.policy.title') }}</h1>
+    </ui-title>
     <div class="docs__main">
       <div class="container">
         <div
@@ -35,36 +31,8 @@ setPageTitle(t('breadcrumbs.policy'));
 
 <style lang="scss" scoped>
 .docs {
-  &__top {
-    padding-block: 50px;
-    background-color: #f8f8f8;
-
-    &-wrapper {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      gap: 20px;
-    }
-
-    &-title {
-      font-family: "Playfair Display", sans-serif;
-      font-weight: 700;
-      font-size: 36px;
-      letter-spacing: -0.5px;
-    }
-
-    &-text {
-      max-width: 600px;
-      text-align: center;
-      color: #4b5563;
-      font-size: 18px;
-      font-weight: 400;
-      letter-spacing: -0.5px;
-    }
-  }
-
   &__main {
-    background-color: $white;
+    background-color: $main;
     padding-block: 50px 100px;
 
     &-wrapper {
@@ -77,7 +45,7 @@ setPageTitle(t('breadcrumbs.policy'));
         flex-direction: column;
         gap: 30px;
 
-        color: #1a1a1a;
+        color: $primary_dark;
         font-size: 16px;
         font-weight: 500;
         letter-spacing: -0.5px;
diff --git a/storefront/app/pages/docs/return-policy.vue b/storefront/app/pages/docs/return-policy.vue
index d8e1e83d..b0dfe030 100644
--- a/storefront/app/pages/docs/return-policy.vue
+++ b/storefront/app/pages/docs/return-policy.vue
@@ -1,12 +1,8 @@
 <template>
   <div class="docs">
-    <div class="docs__top">
-      <div class="container">
-        <div class="docs__top-wrapper">
-          <h1 class="docs__top-title">{{ t('docs.return.title') }}</h1>
-        </div>
-      </div>
-    </div>
+    <ui-title>
+      <h1>{{ t('docs.return.title') }}</h1>
+    </ui-title>
     <div class="docs__main">
       <div class="container">
         <div
@@ -35,36 +31,8 @@ setPageTitle(t('breadcrumbs.return'));
 
 <style lang="scss" scoped>
 .docs {
-  &__top {
-    padding-block: 50px;
-    background-color: #f8f8f8;
-
-    &-wrapper {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      gap: 20px;
-    }
-
-    &-title {
-      font-family: "Playfair Display", sans-serif;
-      font-weight: 700;
-      font-size: 36px;
-      letter-spacing: -0.5px;
-    }
-
-    &-text {
-      max-width: 600px;
-      text-align: center;
-      color: #4b5563;
-      font-size: 18px;
-      font-weight: 400;
-      letter-spacing: -0.5px;
-    }
-  }
-
   &__main {
-    background-color: $white;
+    background-color: $main;
     padding-block: 50px 100px;
 
     &-wrapper {
@@ -77,7 +45,7 @@ setPageTitle(t('breadcrumbs.return'));
         flex-direction: column;
         gap: 30px;
 
-        color: #1a1a1a;
+        color: $primary_dark;
         font-size: 16px;
         font-weight: 500;
         letter-spacing: -0.5px;
diff --git a/storefront/app/pages/docs/shipping-information.vue b/storefront/app/pages/docs/shipping-information.vue
index 85c91a8e..8f0ac3fa 100644
--- a/storefront/app/pages/docs/shipping-information.vue
+++ b/storefront/app/pages/docs/shipping-information.vue
@@ -1,12 +1,8 @@
 <template>
   <div class="docs">
-    <div class="docs__top">
-      <div class="container">
-        <div class="docs__top-wrapper">
-          <h1 class="docs__top-title">{{ t('docs.shipping.title') }}</h1>
-        </div>
-      </div>
-    </div>
+    <ui-title>
+      <h1>{{ t('docs.shipping.title') }}</h1>
+    </ui-title>
     <div class="docs__main">
       <div class="container">
         <div
@@ -35,36 +31,8 @@ setPageTitle(t('breadcrumbs.shipping'));
 
 <style lang="scss" scoped>
 .docs {
-  &__top {
-    padding-block: 50px;
-    background-color: #f8f8f8;
-
-    &-wrapper {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      gap: 20px;
-    }
-
-    &-title {
-      font-family: "Playfair Display", sans-serif;
-      font-weight: 700;
-      font-size: 36px;
-      letter-spacing: -0.5px;
-    }
-
-    &-text {
-      max-width: 600px;
-      text-align: center;
-      color: #4b5563;
-      font-size: 18px;
-      font-weight: 400;
-      letter-spacing: -0.5px;
-    }
-  }
-
   &__main {
-    background-color: $white;
+    background-color: $main;
     padding-block: 50px 100px;
 
     &-wrapper {
@@ -77,7 +45,7 @@ setPageTitle(t('breadcrumbs.shipping'));
         flex-direction: column;
         gap: 30px;
 
-        color: #1a1a1a;
+        color: $primary_dark;
         font-size: 16px;
         font-weight: 500;
         letter-spacing: -0.5px;
diff --git a/storefront/app/pages/docs/terms-and-conditions.vue b/storefront/app/pages/docs/terms-and-conditions.vue
index 9f1cc230..42a080d0 100644
--- a/storefront/app/pages/docs/terms-and-conditions.vue
+++ b/storefront/app/pages/docs/terms-and-conditions.vue
@@ -1,12 +1,8 @@
 <template>
   <div class="docs">
-    <div class="docs__top">
-      <div class="container">
-        <div class="docs__top-wrapper">
-          <h1 class="docs__top-title">{{ t('docs.terms.title') }}</h1>
-        </div>
-      </div>
-    </div>
+    <ui-title>
+      <h1>{{ t('docs.terms.title') }}</h1>
+    </ui-title>
     <div class="docs__main">
       <div class="container">
         <div
@@ -35,36 +31,8 @@ setPageTitle(t('breadcrumbs.terms'));
 
 <style lang="scss" scoped>
 .docs {
-  &__top {
-    padding-block: 50px;
-    background-color: #f8f8f8;
-
-    &-wrapper {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      gap: 20px;
-    }
-
-    &-title {
-      font-family: "Playfair Display", sans-serif;
-      font-weight: 700;
-      font-size: 36px;
-      letter-spacing: -0.5px;
-    }
-
-    &-text {
-      max-width: 600px;
-      text-align: center;
-      color: #4b5563;
-      font-size: 18px;
-      font-weight: 400;
-      letter-spacing: -0.5px;
-    }
-  }
-
   &__main {
-    background-color: $white;
+    background-color: $main;
     padding-block: 50px 100px;
 
     &-wrapper {
@@ -77,7 +45,7 @@ setPageTitle(t('breadcrumbs.terms'));
         flex-direction: column;
         gap: 30px;
 
-        color: #1a1a1a;
+        color: $primary_dark;
         font-size: 16px;
         font-weight: 500;
         letter-spacing: -0.5px;
diff --git a/storefront/app/pages/product/[slug].vue b/storefront/app/pages/product/[slug].vue
index 0ea2d0c0..5d882d35 100644
--- a/storefront/app/pages/product/[slug].vue
+++ b/storefront/app/pages/product/[slug].vue
@@ -76,7 +76,6 @@
               {{ t('buttons.addToCart') }}
             </ui-button>
             <ui-button
-                class="product__main-button"
                 @click="overwriteWishlist({
                     type: (isProductInWishlist ? 'remove' : 'add'),
                     productUuid: product.uuid,
@@ -88,6 +87,13 @@
               <icon name="mdi:cards-heart-outline" size="16" />
               {{ isProductInWishlist ? t('buttons.removeFromWishlist') : t('buttons.addToWishlist') }}
             </ui-button>
+            <ui-button
+                :type="'button'"
+                @click="buyProduct(product.uuid)"
+                :isLoading="buyLoading"
+            >
+              {{ t('buttons.buyNow') }}
+            </ui-button>
           </div>
         </div>
       </div>
@@ -153,7 +159,7 @@
 </template>
 
 <script setup lang="ts">
-import {useProductBySlug, useProducts} from '@composables/products';
+import {useProductBySlug, useProducts, useProductBuy} from '@composables/products';
 import {usePageTitle} from '@composables/utils';
 import {useScrollTo} from '@composables/scrollTo';
 import { Swiper, SwiperSlide } from 'swiper/vue';
@@ -171,6 +177,7 @@ const { $appHelpers } = useNuxtApp();
 
 const { setPageTitle } = usePageTitle();
 const { scrollTo } = useScrollTo();
+const { buyProduct, loading: buyLoading } = useProductBuy();
 
 const slug = useRouteParams<string>('slug');
 
@@ -306,12 +313,12 @@ watch(
 
 <style scoped lang="scss">
 .product {
-  background-color: $white;
+  background-color: $main;
   padding-block: 50px 100px;
 
   &__title {
     font-family: "Playfair Display", sans-serif;
-    color: #1e1e1e;
+    color: $primary_dark;
     font-size: 36px;
     font-weight: 600;
   }
@@ -338,13 +345,12 @@ watch(
         width: 75px;
         height: 75px;
         padding: 5px;
-        border-radius: $default_border_radius;
-        background-color: $white;
-        border: 2px solid $white;
-        transition: 0.2s;
+        border-radius: $less_border_radius;
+        background-color: $main;
+        border: 2px solid $main;
 
         @include hover {
-          box-shadow: 0 0 10px 1px $accent;
+          box-shadow: 0 0 10px 1px $primary;
 
           &.active {
             box-shadow: 0 0 0 0 transparent;
@@ -352,21 +358,21 @@ watch(
         }
 
         &.active {
-          border: 2px solid $accent;
+          border: 2px solid $primary;
         }
 
         & img {
           width: 100%;
           height: 100%;
           object-fit: contain;
-          border-radius: $default_border_radius;
+          border-radius: $less_border_radius;
         }
       }
     }
 
     &-main {
       width: 550px;
-      border-radius: $default_border_radius;
+      border-radius: $less_border_radius;
       object-fit: contain;
     }
   }
@@ -377,7 +383,7 @@ watch(
     gap: 10px;
 
     &-brand {
-      color: #1a1a1a;
+      color: $primary_dark;
       font-size: 14px;
       font-weight: 500;
       letter-spacing: -0.15px;
@@ -388,21 +394,21 @@ watch(
     }
 
     &-price {
-      color: #1a1a1a;
+      color: $primary_dark;
       font-size: 30px;
       font-weight: 600;
       letter-spacing: -0.5px;
     }
 
     &-quantity {
-      color: #1a1a1a;
+      color: $primary_dark;
       font-size: 14px;
       font-weight: 500;
       letter-spacing: -0.15px;
     }
 
     &-description {
-      color: #374151;
+      color: $secondary;
       font-size: 16px;
       font-weight: 400;
       letter-spacing: -0.5px;
@@ -416,13 +422,13 @@ watch(
   &__info {
     width: 400px;
     flex-shrink: 0;
-    border-radius: $default_border_radius;
-    background-color: $accent;
+    border-radius: $less_border_radius;
+    background-color: $primary;
     padding: 5px;
 
     &-inner {
-      border-radius: $default_border_radius;
-      border: 2px solid $white;
+      border-radius: $less_border_radius;
+      border: 2px solid $main;
       padding: 25px;
       display: flex;
       flex-direction: column;
@@ -435,27 +441,27 @@ watch(
       justify-content: space-between;
 
       & p {
-        color: $white;
+        color: $main;
         font-size: 16px;
         font-weight: 500;
       }
 
       & img {
         width: 75px;
-        border-radius: $default_border_radius;
+        border-radius: $less_border_radius;
       }
     }
 
     &-price {
       width: fit-content;
-      background-color: $accentDark;
-      border-radius: $default_border_radius;
-      border: 1px solid $white;
+      background-color: $primary_dark;
+      border-radius: $less_border_radius;
+      border: 1px solid $main;
       padding: 7px 20px;
 
       font-size: 40px;
       font-weight: 700;
-      color: $white;
+      color: $main;
     }
 
     &-bottom {
@@ -470,13 +476,13 @@ watch(
     &-button {
       width: unset !important;
       padding-inline: 25px !important;
-      background-color: $white !important;
-      color: $accent !important;
+      background-color: $main !important;
+      color: $primary !important;
 
       font-size: 20px !important;
 
       @include hover {
-        background-color: #e3e3e3 !important;
+        background-color: $main_hover !important;
       }
     }
 
@@ -485,17 +491,16 @@ watch(
       width: 41px;
       height: 41px;
       flex-shrink: 0;
-      background-color: $white;
-      border-radius: $default_border_radius;
+      background-color: $main;
+      border-radius: $less_border_radius;
       display: grid;
       place-items: center;
-      transition: 0.2s;
 
       font-size: 22px;
-      color: $accent;
+      color: $primary;
 
       @include hover {
-        background-color: #e3e3e3;
+        background-color: $main_hover;
       }
     }
   }
@@ -503,8 +508,8 @@ watch(
 
 .tools {
   width: 100%;
-  border-radius: 4px;
-  background-color: #111827;
+  border-radius: $less_border_radius;
+  background-color: $primary;
   display: grid;
   grid-template-columns: 1fr 2fr 1fr;
   height: 40px;
@@ -517,31 +522,30 @@ watch(
     height: 100%;
 
     &-count {
-      border-left: 1px solid $accent;
-      border-right: 1px solid $accent;
+      border-left: 1px solid $primary;
+      border-right: 1px solid $primary;
 
-      color: $white;
+      color: $main;
       font-size: 16px;
       font-weight: 600;
     }
 
     &-button {
       cursor: pointer;
-      background-color: #111827;
-      border-radius: 4px 0 0 4px;
-      transition: 0.2s;
+      background-color: $primary;
+      border-radius: $less_border_radius 0 0 $less_border_radius;
 
-      color: $white;
+      color: $main;
       font-size: 18px;
       font-weight: 500;
 
       @include hover {
-        background-color: #222c41;
-        color: $white;
+        background-color: $primary_hover;
+        color: $main;
       }
 
       &:last-child {
-        border-radius: 0 4px 4px 0;
+        border-radius: 0 $less_border_radius $less_border_radius 0;
       }
     }
   }
@@ -551,16 +555,16 @@ watch(
   padding-top: 100px;
 
   &__wrapper {
-    background-color: $white;
-    border-radius: $default_border_radius;
+    background-color: $main;
+    border-radius: $less_border_radius;
     box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.2);
     padding: 20px;
   }
 
   &__title {
     padding-bottom: 10px;
-    border-bottom: 2px solid $accentDark;
-    color: $black;
+    border-bottom: 2px solid $primary_dark;
+    color: $primary_dark;
     font-size: 24px;
     font-weight: 700;
   }
@@ -579,7 +583,7 @@ watch(
 
     &-title {
       margin-bottom: 5px;
-      color: $black;
+      color: $primary_dark;
       font-weight: 700;
       font-size: 16px;
     }
@@ -599,12 +603,12 @@ watch(
       & span {
         position: relative;
         z-index: 1;
-        background-color: $white;
+        background-color: $main;
         padding-bottom: 1px;
       }
 
       &::after {
-        border-bottom: 1px dashed $accent;
+        border-bottom: 1px dashed $primary;
         content: "";
         min-width: 100%;
         position: absolute;
@@ -629,17 +633,17 @@ watch(
 
 .similar {
   margin-top: 100px;
-  background-color: $white;
+  background-color: $main;
   display: flex;
   flex-direction: column;
   gap: 25px;
   padding: 45px 25px;
-  border-radius: 8px;
-  border: 1px solid #e5e7eb;
+  border-radius: $default_border_radius;
+  border: 1px solid $border;
 
   &__title {
     font-family: "Playfair Display", sans-serif;
-    color: $black;
+    color: $primary_dark;
     font-size: 30px;
     font-weight: 600;
     letter-spacing: -0.5px;
@@ -666,20 +670,18 @@ watch(
     padding-inline: 10px;
     aspect-ratio: 1;
     border-radius: 50%;
-    background-color: $white;
-    transition: 0.2s;
+    background-color: $main;
 
     @include hover {
-      background-color: $accentLight;
+      background-color: $main_hover;
 
       & span {
-        color: $white;
+        color: $main;
       }
     }
 
     & span {
-      transition: 0.2s;
-      color: $accent;
+      color: $primary;
     }
 
     &.next {
diff --git a/storefront/app/pages/profile/balance.vue b/storefront/app/pages/profile/balance.vue
index e402c015..03ca22b8 100644
--- a/storefront/app/pages/profile/balance.vue
+++ b/storefront/app/pages/profile/balance.vue
@@ -20,11 +20,11 @@ setPageTitle(t('breadcrumbs.balance'));
 
 <style lang="scss" scoped>
 .balance {
-  background-color: $white;
+  background-color: $main;
   width: 100%;
   box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.2);
   padding: 20px;
-  border-radius: $default_border_radius;
+  border-radius: $less_border_radius;
   height: fit-content;
   display: flex;
   flex-direction: column;
diff --git a/storefront/app/pages/profile/orders.vue b/storefront/app/pages/profile/orders.vue
index 1b30d1d7..c4ffd0e6 100644
--- a/storefront/app/pages/profile/orders.vue
+++ b/storefront/app/pages/profile/orders.vue
@@ -144,9 +144,9 @@ setPageTitle(t('breadcrumbs.orders'));
 
 <style lang="scss" scoped>
 .orders {
-  background-color: $white;
-  border: 1px solid #e5e7eb;
-  border-radius: 8px;
+  background-color: $main;
+  border: 1px solid $border;
+  border-radius: $default_border_radius;
   width: 100%;
   flex: 1;
   min-height: 0;
@@ -160,7 +160,7 @@ setPageTitle(t('breadcrumbs.orders'));
     gap: 50px;
 
     &-title {
-      color: #111827;
+      color: $primary;
       font-family: "Playfair Display", sans-serif;
       font-size: 24px;
       font-weight: 700;
@@ -168,10 +168,10 @@ setPageTitle(t('breadcrumbs.orders'));
   }
 
   &__search {
-    border-radius: $default_border_radius;
-    border: 1px solid #dedede;
+    border-radius: $less_border_radius;
+    border: 1px solid $border;
     overflow: hidden;
-    background-color: $white;
+    background-color: $main;
     display: flex;
     align-items: center;
     width: 100%;
@@ -182,25 +182,24 @@ setPageTitle(t('breadcrumbs.orders'));
       padding-inline: 15px;
       width: 100%;
 
-      color: #606266;
+      color: $text;
     }
 
     & button {
       height: 100%;
       padding-inline: 10px;
       cursor: pointer;
-      border-radius: $default_border_radius;
-      background-color: rgba($accent, 0.2);
-      border: 1px solid $accent;
+      border-radius: $less_border_radius;
+      background-color: rgba($primary, 0.2);
+      border: 1px solid $primary;
       display: grid;
       place-items: center;
-      transition: 0.2s;
 
-      color: $accent;
+      color: $primary;
 
       @include hover {
-        background-color: $accent;
-        color: $white;
+        background-color: $primary;
+        color: $main;
       }
     }
   }
@@ -222,13 +221,14 @@ setPageTitle(t('breadcrumbs.orders'));
   }
 
   &__empty {
-    background-color: $white;
-    padding: 20px;
-    box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.2);
-    border-radius: $default_border_radius;
+    background-color: $main;
+    padding: 24px 32px;
+    border-radius: $less_border_radius;
 
     & p {
-      font-weight: 600;
+      font-weight: 500;
+      font-size: 18px;
+      color: $primary;
     }
   }
 }
diff --git a/storefront/app/pages/profile/promocodes.vue b/storefront/app/pages/profile/promocodes.vue
index 8a1093e7..23ee51d8 100644
--- a/storefront/app/pages/profile/promocodes.vue
+++ b/storefront/app/pages/profile/promocodes.vue
@@ -68,15 +68,15 @@ setPageTitle(t('breadcrumbs.promocodes'));
 
 <style lang="scss" scoped>
 .promocodes {
-  background-color: $white;
+  background-color: $main;
   width: 100%;
-  border: 1px solid #e5e7eb;
-  border-radius: 8px;
+  border: 1px solid $border;
+  border-radius: $default_border_radius;
   height: fit-content;
   padding: 24px 32px;
 
   &__title {
-    color: #111827;
+    color: $primary;
     font-family: "Playfair Display", sans-serif;
     font-size: 24px;
     font-weight: 700;
@@ -90,8 +90,8 @@ setPageTitle(t('breadcrumbs.promocodes'));
   }
 
   &__item {
-    border-radius: $default_border_radius;
-    border: 1px solid #e5e7eb;
+    border-radius: $less_border_radius;
+    border: 1px solid $border;
     display: flex;
     align-items: stretch;
     justify-content: space-between;
@@ -103,7 +103,7 @@ setPageTitle(t('breadcrumbs.promocodes'));
       padding: 7px 15px;
 
       & p {
-        color: #4b5563;
+        color: $secondary;
         font-size: 16px;
         font-weight: 400;
       }
@@ -111,11 +111,10 @@ setPageTitle(t('breadcrumbs.promocodes'));
 
     &-button {
       cursor: pointer;
-      transition: 0.2s;
-      color: #4b5563;
+      color: $secondary;
 
       @include hover {
-        color: #2f353f;
+        color: $secondary_hover;
       }
     }
 
@@ -126,19 +125,19 @@ setPageTitle(t('breadcrumbs.promocodes'));
     }
 
     &-text {
-      color: #4b5563;
+      color: $secondary;
       font-size: 16px;
       font-weight: 700;
     }
 
     &-expire {
       height: 100%;
-      background-color: #e5e7eb;
+      background-color: $border;
       padding-inline: 15px;
       display: grid;
       place-items: center;
 
-      color: #4b5563;
+      color: $secondary;
     }
   }
 
diff --git a/storefront/app/pages/profile/settings.vue b/storefront/app/pages/profile/settings.vue
index 014f4b7e..8df45b68 100644
--- a/storefront/app/pages/profile/settings.vue
+++ b/storefront/app/pages/profile/settings.vue
@@ -103,10 +103,10 @@ setPageTitle(t('breadcrumbs.settings'));
 
 <style lang="scss" scoped>
 .settings {
-  background-color: $white;
+  background-color: $main;
   width: 100%;
-  border: 1px solid #e5e7eb;
-  border-radius: 8px;
+  border: 1px solid $border;
+  border-radius: $default_border_radius;
   height: fit-content;
 
   &__top {
@@ -115,7 +115,7 @@ setPageTitle(t('breadcrumbs.settings'));
     justify-content: space-between;
     gap: 25px;
     padding: 24px 32px;
-    border-bottom: 1px solid #e5e7eb;
+    border-bottom: 1px solid $border;
 
     &-left {
       display: flex;
@@ -129,14 +129,14 @@ setPageTitle(t('breadcrumbs.settings'));
       gap: 5px;
 
       & h2 {
-        color: #111827;
+        color: $primary;
         font-family: "Playfair Display", sans-serif;
         font-size: 24px;
         font-weight: 700;
       }
 
       & p {
-        color: #4b5563;
+        color: $text;
         font-size: 16px;
         font-weight: 400;
       }
@@ -147,8 +147,8 @@ setPageTitle(t('breadcrumbs.settings'));
     width: 80px;
     height: 80px;
     border-radius: 50%;
-    border: 2px solid #e5e7eb;
-    background-color: rgba($accent, 0.2);
+    border: 2px solid $border;
+    background-color: rgba($primary, 0.2);
     position: relative;
     overflow: hidden;
 
@@ -166,7 +166,7 @@ setPageTitle(t('breadcrumbs.settings'));
       height: 100%;
 
       & span {
-        color: #a9a9a9;
+        color: $disabled_secondary;
       }
     }
 
@@ -185,11 +185,10 @@ setPageTitle(t('breadcrumbs.settings'));
       display: grid;
       place-items: center;
       opacity: 0;
-      transition: 0.2s;
       background-color: rgba(0, 0, 0, 0.5);
 
       & span {
-        color: $white !important;
+        color: $main !important;
       }
     }
 
@@ -200,28 +199,27 @@ setPageTitle(t('breadcrumbs.settings'));
 
   &__button {
     cursor: pointer;
-    border-radius: $default_border_radius;
+    border-radius: $less_border_radius;
     padding: 5px 15px;
     display: flex;
     align-items: center;
     gap: 10px;
-    transition: 0.2s;
 
-    color: #4b5563;
+    color: $text;
     font-size: 16px;
     font-weight: 500;
 
     @include hover {
-      background-color: #c0c0c0;
-      color: #373f49;
+      background-color: $main_hover;
+      color: $secondary;
     }
 
     &:disabled {
       cursor: not-allowed;
 
       @include hover {
-        background-color: #c0c0c0;
-        color: #4b5563;
+        background-color: $main_hover;
+        color: $secondary;
       }
     }
   }
@@ -235,7 +233,7 @@ setPageTitle(t('breadcrumbs.settings'));
     & p {
       font-size: 24px;
       font-weight: 600;
-      color: $accentDark;
+      color: $primary_dark;
     }
   }
 }
diff --git a/storefront/app/pages/reset-password.vue b/storefront/app/pages/reset-password.vue
index 48680297..86848926 100644
--- a/storefront/app/pages/reset-password.vue
+++ b/storefront/app/pages/reset-password.vue
@@ -20,7 +20,7 @@ setPageTitle(t('breadcrumbs.newPassword'));
 
 <style lang="scss" scoped>
 .auth {
-  background-color: #e5e7eb;
+  background-color: $border;
 
   &__wrapper {
     padding-block: 100px;
diff --git a/storefront/app/pages/search.vue b/storefront/app/pages/search.vue
index b6f3bb20..107d12ed 100644
--- a/storefront/app/pages/search.vue
+++ b/storefront/app/pages/search.vue
@@ -142,7 +142,7 @@ const hasData = (blockKey: string): boolean => {
   }
 
   &__title {
-    color: #1a1a1a;
+    color: $primary_dark;
     font-family: "Playfair Display", sans-serif;
     font-size: 30px;
     font-weight: 600;
@@ -158,29 +158,29 @@ const hasData = (blockKey: string): boolean => {
       top: 50%;
       right: 24px;
       transform: translateY(-50%);
-      color: #8c8c8c;
+      color: $disabled_secondary;
     }
 
     & input {
       width: 100%;
       border-radius: 12px;
-      border: 2px solid #e5e7eb;
+      border: 2px solid $border;
       padding: 15px 20px;
 
-      color: $black;
+      color: $primary_dark;
       font-size: 18px;
       font-weight: 400;
       letter-spacing: -0.5px;
 
       &::placeholder {
-        color: #444444;
+        color: $secondary_hover;
       }
     }
   }
 
   &__block {
     width: 100%;
-    border-radius: $default_border_radius;
+    border-radius: $less_border_radius;
     padding: 25px;
 
     &-top {
@@ -190,10 +190,10 @@ const hasData = (blockKey: string): boolean => {
 
       & h6 {
         padding-bottom: 10px;
-        border-bottom: 2px solid $accentDark;
+        border-bottom: 2px solid $primary_dark;
 
         font-family: "Playfair Display", sans-serif;
-        color: #1a1a1a;
+        color: $primary_dark;
         font-size: 24px;
         font-weight: 600;
         letter-spacing: -0.5px;
@@ -203,19 +203,16 @@ const hasData = (blockKey: string): boolean => {
         cursor: pointer;
         display: grid;
         place-items: center;
-        border-radius: 8px;
+        border-radius: $default_border_radius;
         padding: 5px 12px;
         background-color: transparent;
-        transition: 0.2s;
-        color: #000;
+        color: $primary_dark;
 
         @include hover {
-          background-color: #dcdcdc;
+          background-color: $main_hover;
         }
 
         & span {
-          transition: 0.2s;
-
           &.rotated {
             transform: rotate(-180deg);
           }
diff --git a/storefront/app/pages/shop.vue b/storefront/app/pages/shop.vue
index e27514c2..86e1c9f1 100644
--- a/storefront/app/pages/shop.vue
+++ b/storefront/app/pages/shop.vue
@@ -1,13 +1,9 @@
 <template>
   <div class="shop">
-    <div class="shop__top">
-      <div class="container">
-        <div class="shop__top-wrapper">
-          <h1 class="shop__top-title">{{ t('shop.title') }}</h1>
-          <p class="shop__top-text">{{ t('shop.text') }}</p>
-        </div>
-      </div>
-    </div>
+    <ui-title>
+      <h1>{{ t('shop.title') }}</h1>
+      <p>{{ t('shop.text') }}</p>
+    </ui-title>
     <div class="shop__main">
       <div class="container">
         <div class="shop__main-wrapper">
@@ -30,42 +26,10 @@ setPageTitle(t('breadcrumbs.shop'));
 
 <style lang="scss" scoped>
 .shop {
-  &__top {
-    padding-block: 50px;
-    background-color: #f8f8f8;
-
-    &-wrapper {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      gap: 20px;
-    }
-
-    &-title {
-      font-family: "Playfair Display", sans-serif;
-      font-weight: 700;
-      font-size: 36px;
-      letter-spacing: -0.5px;
-    }
-
-    &-text {
-      max-width: 600px;
-      text-align: center;
-      color: #4b5563;
-      font-size: 18px;
-      font-weight: 400;
-      letter-spacing: -0.5px;
-    }
-  }
-
   &__main {
-    background-color: $white;
+    background-color: $main;
     padding-block: 70px;
-    border-top: 1px solid #f3f4f6;
-
-    &-wrapper {
-
-    }
+    border-top: 1px solid $border;
   }
 }
 </style>
\ No newline at end of file
diff --git a/storefront/app/pages/wishlist.vue b/storefront/app/pages/wishlist.vue
index d9b88344..57918fa5 100644
--- a/storefront/app/pages/wishlist.vue
+++ b/storefront/app/pages/wishlist.vue
@@ -107,7 +107,7 @@ setPageTitle(t('breadcrumbs.wishlist'));
 <style lang="scss" scoped>
 .wishlist {
   padding-block: 50px 100px;
-  background-color: $white;
+  background-color: $main;
 
   &__wrapper {
     display: flex;
@@ -121,7 +121,7 @@ setPageTitle(t('breadcrumbs.wishlist'));
     justify-content: space-between;
 
     &-title {
-      color: #1a1a1a;
+      color: $primary_dark;
       font-family: "Playfair Display", sans-serif;
       font-size: 36px;
       font-weight: 600;
@@ -135,7 +135,7 @@ setPageTitle(t('breadcrumbs.wishlist'));
     }
 
     & p {
-      color: #4b5563;
+      color: $text;
       font-size: 18px;
       font-weight: 400;
       letter-spacing: -0.5px;
@@ -154,5 +154,11 @@ setPageTitle(t('breadcrumbs.wishlist'));
       gap: 25px;
     }
   }
+
+  &__empty {
+    font-weight: 500;
+    font-size: 18px;
+    color: $primary;
+  }
 }
 </style>
\ No newline at end of file
diff --git a/storefront/app/plugins/03.notification.ts b/storefront/app/plugins/02.notification.ts
similarity index 95%
rename from storefront/app/plugins/03.notification.ts
rename to storefront/app/plugins/02.notification.ts
index 5a41bcc8..c033c246 100644
--- a/storefront/app/plugins/03.notification.ts
+++ b/storefront/app/plugins/02.notification.ts
@@ -15,7 +15,7 @@ export default defineNuxtPlugin(() => {
 
     const duration = 5000;
     const progressBar = h('div', {
-      class: 'el-notification__progress',
+      class: `el-notification__progress ${args.type}`,
       style: {
         animationDuration: `${duration}ms`,
       },
diff --git a/storefront/app/plugins/02.theme.ts b/storefront/app/plugins/02.theme.ts
deleted file mode 100644
index 81dfa9be..00000000
--- a/storefront/app/plugins/02.theme.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-export default defineNuxtPlugin((nuxtApp) => {
-	const { $appHelpers } = nuxtApp;
-
-	const themeCookie = useCookie<'light' | 'dark'>($appHelpers.COOKIES_THEME_KEY, {
-		default: () => 'light',
-		path: '/',
-	});
-
-	const currentTheme = themeCookie.value || 'light';
-
-	if (import.meta.server) {
-		const event = useRequestEvent();
-		if (event) {
-			event.context.theme = currentTheme;
-		}
-	}
-
-	if (import.meta.client) {
-		const html = document.documentElement;
-		if (currentTheme === 'dark') {
-			html.classList.add('dark');
-		} else {
-			html.classList.remove('dark');
-		}
-	}
-});
diff --git a/storefront/app/plugins/03.theme.ts b/storefront/app/plugins/03.theme.ts
new file mode 100644
index 00000000..b3ee9c73
--- /dev/null
+++ b/storefront/app/plugins/03.theme.ts
@@ -0,0 +1,16 @@
+export default defineNuxtPlugin((nuxtApp) => {
+  const { $appHelpers } = nuxtApp;
+
+  const themeCookie = useCookie<'light' | 'dark'>($appHelpers.COOKIES_THEME_KEY, {
+    default: () => 'light',
+    path: '/',
+  })
+
+  const theme = themeCookie.value || 'light'
+
+  useHead({
+    htmlAttrs: {
+      'data-theme': theme,
+    },
+  })
+})
\ No newline at end of file
diff --git a/storefront/i18n/locales/en-gb.json b/storefront/i18n/locales/en-gb.json
index e1051fe2..a6b48f57 100644
--- a/storefront/i18n/locales/en-gb.json
+++ b/storefront/i18n/locales/en-gb.json
@@ -20,7 +20,8 @@
 		"readMore": "Read More",
 		"sendMessage": "Send Message",
 		"saveChanges": "Save Changes",
-		"clearAll": "Clear All"
+		"clearAll": "Clear All",
+		"buyNow": "Buy Now"
 	},
 	"errors": {
 		"required": "This field is required!",
@@ -216,7 +217,8 @@
 			"apply": "Apply",
 			"reset": "Reset",
 			"all": "All"
-		}
+		},
+		"empty": "There are no products by these parameters."
 	},
 	"search": {
 		"title": "Search Results",
diff --git a/storefront/i18n/locales/ru-ru.json b/storefront/i18n/locales/ru-ru.json
index 17e65c21..efc150d9 100644
--- a/storefront/i18n/locales/ru-ru.json
+++ b/storefront/i18n/locales/ru-ru.json
@@ -20,7 +20,8 @@
 		"readMore": "Читать далее",
 		"sendMessage": "Отправить сообщение",
 		"saveChanges": "Сохранить изменения",
-		"clearAll": "Очистить всё"
+		"clearAll": "Очистить всё",
+		"buyNow": "Купить Сейчас"
 	},
 	"errors": {
 		"required": "Это поле обязательно!",
@@ -216,7 +217,8 @@
 			"apply": "Применить",
 			"reset": "Сбросить",
 			"all": "Все"
-		}
+		},
+		"empty": "По этим параметрам нет товаров."
 	},
 	"search": {
 		"title": "Результаты поиска",
diff --git a/storefront/nuxt-app.d.ts b/storefront/nuxt-app.d.ts
index 85252eb9..dc9005e8 100644
--- a/storefront/nuxt-app.d.ts
+++ b/storefront/nuxt-app.d.ts
@@ -1,6 +1,6 @@
 import type { ApolloClient, NormalizedCacheObject } from '@apollo/client/core';
 import type { ApolloError } from '@apollo/client/errors';
-import type { INotificationArguments } from '~/plugins/03.notification'
+import type { INotificationArguments } from '~/plugins/02.notification'
 
 declare module '#app' {
 	interface NuxtApp {