diff --git a/apps/web-app/app/components/Cart/Button.vue b/apps/web-app/app/components/Cart/Button.vue
index 8301c555..9523381f 100644
--- a/apps/web-app/app/components/Cart/Button.vue
+++ b/apps/web-app/app/components/Cart/Button.vue
@@ -1,15 +1,17 @@
 <template>
   <ClientOnly>
     <div v-if="!isEmpty" class="block xl:hidden">
-      <UiButton
-        class="px-4 flex flex-row gap-2 items-center"
+      <UButton
+        variant="gradient"
+        size="lg"
+        class="items-center"
         @click="isCartDrawerOpened = !isCartDrawerOpened"
       >
         <p>{{ $t('app.cart.title') }}</p>
-        <div class="rounded-full bg-white w-6 h-6 text-center">
+        <div class="rounded-full bg-white size-6 text-center">
           {{ checkout?.lines?.length }}
         </div>
-      </UiButton>
+      </UButton>
     </div>
   </ClientOnly>
 </template>
diff --git a/apps/web-app/app/components/Cart/DeliveryMethodSwitch.vue b/apps/web-app/app/components/Cart/DeliveryMethodSwitch.vue
index 041cd237..c775e028 100644
--- a/apps/web-app/app/components/Cart/DeliveryMethodSwitch.vue
+++ b/apps/web-app/app/components/Cart/DeliveryMethodSwitch.vue
@@ -1,22 +1,22 @@
 <template>
   <ClientOnly>
-    <div class="px-0 py-0 flex flex-row gap-0 justify-center bg-neutral-50 dark:bg-neutral-500 rounded-2xl">
-      <UiButton
+    <div class="px-0 py-0 flex flex-row gap-0 justify-center bg-(--ui-bg-elevated) rounded-xl">
+      <UButton
         v-if="channel?.isDeliveryAvailable"
-        class="w-full px-2 py-2"
-        :variant="checkout?.deliveryMethod === 'DELIVERY' ? 'default' : 'ghost'"
+        class="w-full justify-center"
+        :variant="checkout?.deliveryMethod === 'DELIVERY' ? 'gradient' : 'ghost'"
         @click="update({ deliveryMethod: 'DELIVERY' })"
       >
         {{ $t('app.cart.delivery') }}
-      </UiButton>
-      <UiButton
+      </UButton>
+      <UButton
         v-if="channel?.isPickupAvailable"
-        class="w-full px-2 py-2"
-        :variant="checkout?.deliveryMethod === 'WAREHOUSE' ? 'default' : 'ghost'"
+        class="w-full justify-center"
+        :variant="checkout?.deliveryMethod === 'WAREHOUSE' ? 'gradient' : 'ghost'"
         @click="update({ deliveryMethod: 'WAREHOUSE' })"
       >
         {{ $t('app.cart.pickup') }}
-      </UiButton>
+      </UButton>
     </div>
   </ClientOnly>
 </template>
diff --git a/apps/web-app/app/components/Cart/index.vue b/apps/web-app/app/components/Cart/index.vue
index 63d66928..c841db1c 100644
--- a/apps/web-app/app/components/Cart/index.vue
+++ b/apps/web-app/app/components/Cart/index.vue
@@ -1,6 +1,6 @@
 <template>
   <ClientOnly>
-    <div v-if="checkout" class="relative bg-white dark:bg-neutral-600 rounded-2xl px-4 py-4 h-full flex flex-col justify-between">
+    <div v-if="checkout" class="relative rounded-2xl border border-(--ui-border) px-4 py-4 h-full flex flex-col justify-between">
       <div class="h-screen overflow-y-auto">
         <div class="mb-48">
           <div class="mb-4 flex flex-row justify-between items-center">
@@ -32,7 +32,7 @@
         </div>
       </div>
 
-      <div class="absolute bottom-0 left-0 right-0 rounded-2xl bg-neutral-50 dark:bg-neutral-700">
+      <div class="absolute bottom-0 left-0 right-0 rounded-2xl bg-(--ui-bg-muted)">
         <button
           class="relative my-4 mx-4 flex flex-row gap-3 flex-wrap items-center active:scale-95 lg:hover:scale-95 lg:active:scale-90 duration-200"
           @click="isDeliveryInfoModalOpened = !isDeliveryInfoModalOpened"
@@ -47,14 +47,17 @@
         </button>
 
         <div v-if="!isEmpty" class="my-4 mx-4">
-          <NuxtLink to="/checkout">
-            <UiButton class="py-4 flex flex-row gap-2 flex-wrap justify-between items-center">
-              <p>{{ $t('app.cart.next-label') }}</p>
-              <div class="text-lg tracking-tight">
-                {{ getLocalizedPrice(checkout?.totalPrice) }} <span class="text-base">{{ getCurrencySign(channel?.currencyCode) }}</span>
-              </div>
-            </UiButton>
-          </NuxtLink>
+          <UButton
+            to="/checkout"
+            variant="gradient"
+            size="xl"
+            class="w-full justify-between items-center"
+          >
+            <p>{{ $t('app.cart.next-label') }}</p>
+            <div class="text-lg tracking-tight">
+              {{ getLocalizedPrice(checkout?.totalPrice) }} <span class="text-base">{{ getCurrencySign(channel?.currencyCode) }}</span>
+            </div>
+          </UButton>
         </div>
       </div>
     </div>
diff --git a/apps/web-app/app/components/CatalogBreadcrumb.vue b/apps/web-app/app/components/CatalogBreadcrumb.vue
index a5564f44..af6eb239 100644
--- a/apps/web-app/app/components/CatalogBreadcrumb.vue
+++ b/apps/web-app/app/components/CatalogBreadcrumb.vue
@@ -8,8 +8,8 @@
 
     <UButton
       variant="soft"
-      color="primary"
-      size="md"
+      color="neutral"
+      size="lg"
       icon="food:undo"
       class="w-full md:w-auto mx-auto md:mx-0 justify-center"
       @click="back()"
diff --git a/apps/web-app/app/components/CategoryBlock.vue b/apps/web-app/app/components/CategoryBlock.vue
index 9f0dc951..d65255ef 100644
--- a/apps/web-app/app/components/CategoryBlock.vue
+++ b/apps/web-app/app/components/CategoryBlock.vue
@@ -4,17 +4,19 @@
       {{ category?.name }}
     </h2>
 
-    <NuxtLink :to="`/catalog/${category?.slug}`">
-      <UiButton variant="secondary" class="bg-neutral-200">
-        <div class="flex flex-row gap-2 items-center">
-          {{ $t('app.open-category') }} <Icon :name="icons.arrowRight" />
-        </div>
-      </UiButton>
-    </NuxtLink>
+    <UButton
+      :to="`/catalog/${category?.slug}`"
+      size="lg"
+      variant="soft"
+      color="neutral"
+      trailing-icon="food:arrow-right"
+    >
+      {{ $t('app.open-category') }}
+    </UButton>
   </div>
 
   <div
-    class="mb-12 grid grid-cols-2 sm:grid-cols-3 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-3 2xl:grid-cols-4 gap-2"
+    class="mb-12 grid grid-cols-2 sm:grid-cols-3 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-3 2xl:grid-cols-4 gap-4 md:gap-6"
   >
     <ProductCard
       v-for="product in categoryProducts"
@@ -31,7 +33,6 @@ const { categoryId } = defineProps<{
   isFirst?: boolean
 }>()
 
-const { icons } = useAppConfig()
 const { categories } = await useChannel()
 const category = computed(() => categories.value.find(({ id }) => id === categoryId))
 const categoryProducts = computed(() => category.value?.products.filter((p) => p.variants.length > 0).splice(0, 8))
diff --git a/apps/web-app/app/components/Checkout/Header.vue b/apps/web-app/app/components/Checkout/Header.vue
index 2863e0e1..afd8f27f 100644
--- a/apps/web-app/app/components/Checkout/Header.vue
+++ b/apps/web-app/app/components/Checkout/Header.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="z-10 w-full h-full px-4 md:px-4 flex flex-row flex-nowrap justify-between content-center items-center border-b border-neutral-100 dark:border-neutral-500">
+  <div class="z-10 w-full h-full px-4 md:px-4 flex flex-row flex-nowrap justify-between content-center items-center border-b border-(--ui-border)">
     <NuxtLink
       to="/"
       class="mr-2 md:mr-0 flex flex-row gap-2 items-center active:scale-95 lg:hover:scale-95 lg:active:scale-90 duration-200"
diff --git a/apps/web-app/app/components/CommandCenter/StaffBar.vue b/apps/web-app/app/components/CommandCenter/StaffBar.vue
index 141c19af..be689790 100644
--- a/apps/web-app/app/components/CommandCenter/StaffBar.vue
+++ b/apps/web-app/app/components/CommandCenter/StaffBar.vue
@@ -1,15 +1,17 @@
 <template>
   <div class="relative max-w-7xl">
-    <div class="bg-white dark:bg-neutral-600 p-4 flex justify-between items-center rounded-2xl">
+    <div class="flex justify-between items-center">
       <p class="grow text-lg">
         {{ $t('common.hello') }}, {{ user?.name ?? $t('common.colleague') }}!
       </p>
 
-      <NuxtLink to="/command-center">
-        <UiButton>
-          {{ $t('common.continue-working') }}
-        </UiButton>
-      </NuxtLink>
+      <UButton
+        to="/command-center"
+        size="lg"
+        variant="gradient"
+      >
+        {{ $t('common.continue-working') }}
+      </UButton>
     </div>
   </div>
 </template>
diff --git a/apps/web-app/app/components/DeliveryInfoModal.vue b/apps/web-app/app/components/DeliveryInfoModal.vue
index c2cc7fc4..f7395442 100644
--- a/apps/web-app/app/components/DeliveryInfoModal.vue
+++ b/apps/web-app/app/components/DeliveryInfoModal.vue
@@ -21,13 +21,13 @@
       </div>
     </div>
 
-    <UiButton
-      variant="secondary"
+    <UButton
+      variant="soft"
       class="mt-4"
       @click="isDeliveryInfoModalOpened = false"
     >
       {{ $t('common.ok') }}
-    </UiButton>
+    </UButton>
   </UiModal>
 </template>
 
diff --git a/apps/web-app/app/components/Footer.vue b/apps/web-app/app/components/Footer.vue
index 04680a28..980e9649 100644
--- a/apps/web-app/app/components/Footer.vue
+++ b/apps/web-app/app/components/Footer.vue
@@ -2,17 +2,17 @@
   <div class="px-4 lg:px-12 mt-20 mb-4 text-center">
     <div class="flex flex-row gap-1 justify-center items-center">
       {{ $t('common.footer.copyright-part-one') }}
-      <NuxtLink
+      <ULink
         :to="projectUrl"
         target="_blank"
         class="font-semibold hover:opacity-80 duration-200"
       >
         {{ $t('common.footer.copyright-part-two') }}
-      </NuxtLink>
+      </ULink>
     </div>
   </div>
 
-  <div class="w-fit mx-auto">
+  <div class="mb-20 w-fit mx-auto">
     <LanguageSelect />
   </div>
 </template>
diff --git a/apps/web-app/app/components/Header.vue b/apps/web-app/app/components/Header.vue
index 63453e57..972078a6 100644
--- a/apps/web-app/app/components/Header.vue
+++ b/apps/web-app/app/components/Header.vue
@@ -1,6 +1,6 @@
 <template>
-  <header class="z-20 h-16 bg-white dark:bg-neutral-600 fixed top-0 left-0 right-0">
-    <div class="z-10 w-full h-full px-2 md:px-4 flex flex-row flex-nowrap justify-between content-center items-center border-b border-neutral-100 dark:border-neutral-500">
+  <header class="bg-(--ui-bg)/75 backdrop-blur border-b border-(--ui-border) sticky top-0 h-16 z-50">
+    <div class="z-10 w-full h-full px-2 md:px-4 flex flex-row flex-nowrap justify-between content-center items-center">
       <div class="mr-2 md:mr-0 flex justify-center items-center justify-items-center lg:hidden h-full lg:hover:scale-110 transition duration-200">
         <button
           aria-label="Close Navigation"
diff --git a/apps/web-app/app/components/LanguageSwitch.vue b/apps/web-app/app/components/LanguageSwitch.vue
deleted file mode 100644
index a0a7ea1c..00000000
--- a/apps/web-app/app/components/LanguageSwitch.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<template>
-  <div class="relative">
-    <UiButton
-      variant="secondary"
-      class="flex justify-center items-center gap-2"
-      @click="isOpened = !isOpened"
-    >
-      <Icon :name="icons.globe" class="w-6 h-6 opacity-40" />
-      <span>{{ $t('short-name') }}</span>
-    </UiButton>
-
-    <div v-if="isOpened" class="dropdown-menu">
-      <button
-        v-for="chooseLocale in locales"
-        :key="chooseLocale.code"
-        @click="() => handleLocaleSwitch(chooseLocale.code)"
-      >
-        {{ chooseLocale.name }}
-      </button>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-const { icons } = useAppConfig()
-const { locales, setLocale } = useI18n()
-const isOpened = ref(false)
-
-function handleLocaleSwitch(code: Locale) {
-  isOpened.value = false
-  setLocale(code)
-}
-</script>
diff --git a/apps/web-app/app/components/Navigation/index.vue b/apps/web-app/app/components/Navigation/index.vue
index a8d6e460..2b13335f 100644
--- a/apps/web-app/app/components/Navigation/index.vue
+++ b/apps/web-app/app/components/Navigation/index.vue
@@ -3,7 +3,7 @@
     :data-active="isNavbarOpened"
     class="z-10 w-0 h-[calc(100dvh-64px)] invisible lg:visible lg:w-72 fixed top-16 data-[active=true]:w-full data-[active=true]:visible lg:data-[active=true]:w-72"
   >
-    <div class="w-full h-full bg-(--ui-bg-muted) px-2 md:px-4 pt-4 border-r border-neutral-100 dark:border-neutral-500">
+    <div class="w-full h-full bg-(--ui-bg-muted) px-2 md:px-4 pt-4 border-r border-(--ui-border)">
       <div class="h-full overflow-y-auto flex flex-col justify-between">
         <slot />
       </div>
diff --git a/apps/web-app/app/components/ProductCard.vue b/apps/web-app/app/components/ProductCard.vue
index c8f82ecc..ff0a6323 100644
--- a/apps/web-app/app/components/ProductCard.vue
+++ b/apps/web-app/app/components/ProductCard.vue
@@ -1,19 +1,20 @@
 <template>
-  <NuxtLink
+  <ULink
     :to="productUrl"
-    class="bg-white dark:bg-neutral-600 rounded-2xl h-auto w-auto p-3 cursor-pointer active:scale-95 lg:active:scale-90 lg:hover:scale-95 duration-200"
+    :active="true"
+    class="h-auto w-auto cursor-pointer active:scale-95 lg:active:scale-90 lg:hover:scale-95 duration-200"
   >
-    <div class="flex flex-col justify-between h-full">
-      <div>
-        <div class="relative w-full aspect-square">
-          <ProductImage
-            :id="product?.mediaId"
-            :lazy="lazy"
-            size="sm"
-          />
-        </div>
+    <div class="flex flex-col justify-between gap-2 h-full">
+      <div class="relative w-full aspect-square">
+        <ProductImage
+          :id="product?.mediaId"
+          :lazy="lazy"
+          size="md"
+        />
+      </div>
 
-        <div class="mt-2 text-xl font-medium">
+      <div>
+        <div class="text-xl font-medium">
           <span v-if="!withSingleVariant" class="pr-1">{{ $t('app.cart.from') }}</span>
           <span>{{ price }}</span>
           <span class="pl-1 text-lg">{{ getCurrencySign(channel?.currencyCode) }}</span>
@@ -27,14 +28,17 @@
         </div>
       </div>
 
-      <div class="flex flex-row gap-2 items-center justify-center mt-2 w-full h-12 bg-neutral-100 dark:bg-neutral-700 rounded-xl">
-        <Icon :name="icons.plus" class="w-5 h-5" />
-        <div class="text-center text-base font-normal">
-          {{ $t('app.cart.add') }}
-        </div>
-      </div>
+      <UButton
+        variant="soft"
+        color="neutral"
+        size="xl"
+        icon="food:plus"
+        class="justify-center items-center font-normal"
+      >
+        {{ $t('app.cart.add') }}
+      </UButton>
     </div>
-  </NuxtLink>
+  </ULink>
 </template>
 
 <script setup lang="ts">
@@ -43,7 +47,6 @@ const { productId } = defineProps<{
   lazy?: boolean
 }>()
 
-const { icons } = useAppConfig()
 const { channel, categories, products } = await useChannel()
 const product = computed(() => products.value?.find(({ id }) => id === productId))
 
diff --git a/apps/web-app/app/components/form/DeleteProductVariant.vue b/apps/web-app/app/components/form/DeleteProductVariant.vue
index 0d3823d6..ec4ac6ae 100644
--- a/apps/web-app/app/components/form/DeleteProductVariant.vue
+++ b/apps/web-app/app/components/form/DeleteProductVariant.vue
@@ -1,8 +1,14 @@
 <template>
   <form class="mt-3" @submit="onSubmit">
-    <UiButton type="submit" variant="destructive">
+    <UButton
+      type="submit"
+      size="xl"
+      variant="soft"
+      color="error"
+      class="w-full justify-center"
+    >
       {{ $t('center.delete.title') }}
-    </UiButton>
+    </UButton>
   </form>
 </template>
 
diff --git a/apps/web-app/app/components/ui/button/Button.vue b/apps/web-app/app/components/ui/button/Button.vue
deleted file mode 100644
index ad463236..00000000
--- a/apps/web-app/app/components/ui/button/Button.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<template>
-  <button :class="cn(buttonVariants({ variant, size }), $attrs.class ?? '')">
-    <slot />
-  </button>
-</template>
-
-<script setup lang="ts">
-import { buttonVariants } from '.'
-
-interface Props {
-  variant?: NonNullable<Parameters<typeof buttonVariants>[0]>['variant']
-  size?: NonNullable<Parameters<typeof buttonVariants>[0]>['size']
-}
-
-defineProps<Props>()
-</script>
diff --git a/apps/web-app/app/components/ui/button/index.ts b/apps/web-app/app/components/ui/button/index.ts
deleted file mode 100644
index a71ef218..00000000
--- a/apps/web-app/app/components/ui/button/index.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import type { VariantProps } from 'class-variance-authority'
-import { cva } from 'class-variance-authority'
-
-export { default as Button } from './Button.vue'
-
-export const buttonVariants = cva(
-  'relative w-full rounded-2xl text-base font-medium ring-offset-background active:scale-95 md:active:scale-90 hover:scale-95 duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
-  {
-    variants: {
-      variant: {
-        default: 'bg-gradient-to-br hover:bg-gradient-to-r from-lime-300 to-emerald-400 font-medium text-neutral-950 dark:text-neutral-950',
-        destructive: 'bg-amber-200 hover:bg-amber-200/90',
-        secondary: 'bg-neutral-100 dark:bg-neutral-500 border border-neutral-200 dark:border-neutral-500 hover:bg-neutral-200/60 dark:hover:bg-neutral-500/60',
-        ghost: 'hover:bg-neutral-100 dark:hover:bg-neutral-600',
-        link: 'text-primary underline-offset-4 hover:underline',
-      },
-      size: {
-        default: 'px-5 py-3',
-        sm: 'h-9 rounded-md px-3',
-        lg: 'h-11 rounded-md px-8',
-        icon: 'h-10 w-10',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-      size: 'default',
-    },
-  },
-)
-
-export type ButtonVariants = VariantProps<typeof buttonVariants>
diff --git a/apps/web-app/app/layouts/checkout.vue b/apps/web-app/app/layouts/checkout.vue
index 760818ba..fbb2df36 100644
--- a/apps/web-app/app/layouts/checkout.vue
+++ b/apps/web-app/app/layouts/checkout.vue
@@ -1,9 +1,9 @@
 <template>
-  <header class="z-10 h-16 bg-white dark:bg-neutral-600 fixed top-0 left-0 right-0">
+  <header class="z-10 h-16 bg-(--ui-bg)/75 fixed top-0 left-0 right-0">
     <CheckoutHeader />
   </header>
 
-  <main class="relative top-16 bg-neutral-100 dark:bg-neutral-800">
+  <main class="relative top-16 min-h-dvh">
     <div class="px-2 md:px-4 pb-10 mx-auto max-w-5xl">
       <slot />
     </div>
diff --git a/apps/web-app/app/layouts/default.vue b/apps/web-app/app/layouts/default.vue
index a08dfcb7..5fa780a0 100644
--- a/apps/web-app/app/layouts/default.vue
+++ b/apps/web-app/app/layouts/default.vue
@@ -2,7 +2,7 @@
   <Header />
   <NavigationMain />
 
-  <main class="relative w-auto min-h-dvh lg:pl-72 xl:pr-80 top-16">
+  <main class="relative w-auto min-h-dvh lg:pl-72 xl:pr-80 top-0">
     <UContainer class="pb-10 pt-4 max-w-7xl">
       <NuxtErrorBoundary>
         <slot />
@@ -15,7 +15,7 @@
   </main>
 
   <aside class="hidden w-0 xl:block xl:w-80 fixed right-0 bottom-0 top-16">
-    <div class="pr-4 py-4 h-full ">
+    <div class="pr-4 py-4 h-full">
       <Cart />
     </div>
   </aside>
diff --git a/apps/web-app/app/pages/catalog/[categorySlug]/[productSlug]/index.vue b/apps/web-app/app/pages/catalog/[categorySlug]/[productSlug]/index.vue
index 13368238..5f581af0 100644
--- a/apps/web-app/app/pages/catalog/[categorySlug]/[productSlug]/index.vue
+++ b/apps/web-app/app/pages/catalog/[categorySlug]/[productSlug]/index.vue
@@ -19,24 +19,14 @@
           {{ weightValue }}{{ weightUnit }}
         </div>
 
-        <div v-if="!withSingleVariant" class="mt-4 mb-6 grid grid-cols-1 xs:grid-cols-2 md:grid-cols-3 2xl:grid-cols-4 gap-2">
-          <UiButton
-            v-for="variant in product?.variants"
-            :key="variant.id"
-            variant="secondary"
-            class="w-full min-h-14 flex flex-row flex-wrap gap-2 justify-start items-center"
-            @click="variantId = variant.id"
-          >
-            <UiCheckBadge v-if="variant.id === selectedVariant?.id" />
-            <Icon
-              :name="variant.id === selectedVariant?.id ? icons.bookmarkCheck : icons.bookmark"
-              class="w-6 h-6 text-neutral-300"
-              :class="{ '!text-emerald-500': variant.id === selectedVariant?.id }"
-            />
-            <p class="font-medium leading-tight break-all">
-              {{ variant.name }}
-            </p>
-          </UiButton>
+        <div v-if="!withSingleVariant" class="mt-4 mb-6">
+          <USelect
+            v-model="variantId"
+            :items="product?.variants.map((variant) => ({ label: variant.name, value: variant.id }))"
+            size="xl"
+            icon="food:bookmark-check"
+            class="min-w-56"
+          />
         </div>
 
         <div class="mt-4 flex flex-row gap-6 items-center">
@@ -45,13 +35,16 @@
           </div>
 
           <CartLineCounter v-if="inCart" :line-id="inCart.id" />
-          <UiButton
+          <UButton
             v-else
+            size="xl"
+            variant="gradient"
+            icon="food:busket"
             class="w-fit flex flex-row gap-2 items-center"
             @click="addProduct(variantId ?? '')"
           >
-            <Icon :name="icons.basket" size="24" /> {{ $t('app.cart.add-to-cart') }}
-          </UiButton>
+            {{ $t('app.cart.add-to-cart') }}
+          </UButton>
         </div>
       </div>
     </div>
@@ -112,7 +105,6 @@
 <script setup lang="ts">
 const { t } = useI18n()
 const { params } = useRoute('catalog-categorySlug-productSlug')
-const { icons } = useAppConfig()
 const { channel } = await useChannel()
 const { addProduct, checkout } = useCheckout()
 
diff --git a/apps/web-app/app/pages/checkout/index.vue b/apps/web-app/app/pages/checkout/index.vue
index f91dd463..04376433 100644
--- a/apps/web-app/app/pages/checkout/index.vue
+++ b/apps/web-app/app/pages/checkout/index.vue
@@ -7,7 +7,7 @@
 
       <div class="grid grid-cols-1 md:grid-cols-12 gap-6 md:gap-8">
         <div class="col-span-full md:col-span-7 space-y-6">
-          <div class="p-3 md:p-6 bg-white dark:bg-neutral-600 rounded-3xl space-y-5">
+          <div class="p-3 md:p-6 bg-(--ui-bg-muted) rounded-3xl space-y-5">
             <CartDeliveryMethodSwitch />
 
             <div class="w-full">
@@ -110,25 +110,14 @@
                 {{ $t('app.checkout.select-address') }}
               </h3>
 
-              <div class="grid grid-cols-1 md:grid-cols-1 gap-2">
-                <UiButton
-                  v-for="warehouse in channel?.warehouses"
-                  :key="warehouse.id"
-                  variant="secondary"
-                  class="w-full min-h-14 flex flex-row flex-wrap gap-2 justify-start items-center"
-                  @click="remainingCheckout.warehouseId = warehouse.id"
-                >
-                  <UiCheckBadge v-if="warehouse.id === remainingCheckout.warehouseId" />
-                  <Icon
-                    :name="warehouse.id === remainingCheckout.warehouseId ? icons.mapPinCheck : icons.mapPinWarehouse"
-                    class="w-6 h-6 text-neutral-300"
-                    :class="{ '!text-emerald-500': warehouse.id === remainingCheckout.warehouseId }"
-                  />
-                  <p class="font-medium leading-tight break-all">
-                    {{ warehouse.address }}
-                  </p>
-                </UiButton>
-              </div>
+              <USelect
+                v-model="remainingCheckout.warehouseId"
+                :items="channel?.warehouses.map(warehouse => ({ label: warehouse.address, value: warehouse.id }))"
+                :placeholder="$t('common.select')"
+                size="xl"
+                icon="food:warehouse"
+                class="w-full"
+              />
             </div>
 
             <div class="w-full">
@@ -136,43 +125,21 @@
                 {{ $t('app.checkout.time-title') }}
               </h3>
 
-              <div class="grid grid-cols-1 md:grid-cols-2 gap-2 items-center">
-                <UiButton
-                  variant="secondary"
-                  class="w-full min-h-14 flex flex-row flex-wrap gap-2 justify-start items-center"
-                  @click="() => { remainingCheckout.timeType = 'ASAP'; selectedTimeLabel = '' }"
-                >
-                  <UiCheckBadge v-if="remainingCheckout.timeType === 'ASAP'" />
-                  <Icon
-                    :name="remainingCheckout.timeType === 'ASAP' ? icons.clockCheck : icons.clock"
-                    class="w-6 h-6 text-neutral-300"
-                    :class="{ '!text-emerald-500': remainingCheckout.timeType === 'ASAP' }"
-                  />
-                  <p class="font-medium leading-tight break-all">
-                    {{ $t('app.checkout.as-soon-as-possible') }}
-                  </p>
-                </UiButton>
-
-                <UiButton
-                  variant="secondary"
-                  class="w-full min-h-14 flex flex-row flex-wrap gap-2 justify-start items-center"
-                  @click="isSelectTimeModalOpened = true"
-                >
-                  <UiCheckBadge v-if="remainingCheckout.timeType === 'SCHEDULED'" />
-                  <Icon
-                    :name="remainingCheckout.timeType === 'SCHEDULED' ? icons.alarmClockCheck : icons.alarmClock"
-                    class="w-6 h-6 text-neutral-300"
-                    :class="{ '!text-emerald-500': remainingCheckout.timeType === 'SCHEDULED' }"
-                  />
-                  <p class="font-medium leading-tight break-all">
-                    {{ selectedTimeLabel || $t('app.checkout.on-time') }}
-                  </p>
-                </UiButton>
-              </div>
+              <USelect
+                v-model="remainingCheckout.time"
+                :items="[
+                  { label: $t('app.checkout.as-soon-as-possible'), value: 0 },
+                  ...slots,
+                ]"
+                :placeholder="$t('app.checkout.select-time')"
+                size="xl"
+                icon="food:clock"
+                class="w-full"
+              />
             </div>
           </div>
 
-          <div class="p-3 md:p-6 bg-white dark:bg-neutral-600 rounded-3xl">
+          <div class="p-3 md:p-6 bg-(--ui-bg-muted) rounded-3xl">
             <h2 class="mb-4 text-xl md:text-2xl font-medium">
               {{ $t('app.checkout.order-title') }}
             </h2>
@@ -198,18 +165,19 @@
         </div>
 
         <div class="col-span-full md:col-span-5 h-fit sticky top-20">
-          <div class="mb-6 p-3 md:p-6 bg-white dark:bg-neutral-600 rounded-3xl space-y-5">
+          <div class="mb-6 p-3 md:p-6 bg-(--ui-bg-muted) rounded-3xl space-y-5">
             <div>
               <h3 class="mb-2 text-lg md:text-xl font-medium">
                 {{ $t('app.checkout.payment-title') }}
               </h3>
 
               <div class="grid grid-cols-2 md:grid-cols-2 gap-2">
-                <UiButton
+                <UButton
                   v-for="method in paymentMethods"
                   :key="method.type"
-                  variant="secondary"
-                  class="w-full min-h-14 flex flex-col flex-wrap gap-1 justify-center items-center"
+                  variant="soft"
+                  color="neutral"
+                  class="relative w-full min-h-14 justify-center items-center"
                   @click="remainingCheckout.paymentMethodId = method.id"
                 >
                   <UiCheckBadge v-if="remainingCheckout.paymentMethodId === method.id" />
@@ -221,7 +189,7 @@
                   <p class="font-medium leading-tight break-all">
                     {{ method.name }}
                   </p>
-                </UiButton>
+                </UButton>
               </div>
 
               <div v-if="selectedPaymentMethod?.type === 'CASH'" class="mt-4">
@@ -268,13 +236,15 @@
             </div>
 
             <div class="flex flex-row flex-nowrap gap-4 items-center">
-              <UiButton
-                class="grow w-full px-4 py-4 text-lg text-center"
+              <UButton
+                size="xl"
+                variant="gradient"
+                class="grow w-full justify-center"
                 :disabled="!isValidCheckout"
                 @click="updateCheckout"
               >
                 {{ $t('app.checkout.create-order') }}
-              </UiButton>
+              </UButton>
 
               <div class="font-medium text-right text-2xl min-w-[5rem] tracking-tight">
                 {{ totalPrice }} <span class="text-base">{{ getCurrencySign(channel?.currencyCode) }}</span>
@@ -290,11 +260,13 @@
         {{ $t('app.cart.empty-label') }}
       </h1>
 
-      <NuxtLink to="/">
-        <UiButton class="max-w-sm">
-          {{ $t('common.to-home') }}
-        </UiButton>
-      </NuxtLink>
+      <UButton
+        to="/"
+        size="xl"
+        variant="gradient"
+      >
+        {{ $t('common.to-home') }}
+      </UButton>
     </div>
 
     <template #fallback>
@@ -302,48 +274,6 @@
         <Icon :name="icons.loader" class="w-24 h-24 text-neutral-300 animate-pulse" />
       </div>
     </template>
-
-    <UiModal
-      :title="$t('app.checkout.select-time-title')"
-      :is-opened="isSelectTimeModalOpened"
-      @close="isSelectTimeModalOpened = false"
-    >
-      <div class="flex flex-col gap-2">
-        <UiButton
-          variant="secondary"
-          class="w-full min-h-14 flex flex-row flex-wrap gap-2 justify-start items-center"
-          @click="() => { remainingCheckout.timeType = 'ASAP'; selectedTimeLabel = ''; isSelectTimeModalOpened = false }"
-        >
-          <UiCheckBadge v-if="remainingCheckout.timeType === 'ASAP'" />
-          <Icon
-            :name="remainingCheckout.timeType === 'ASAP' ? icons.clockCheck : icons.clock"
-            class="w-6 h-6 text-neutral-300"
-            :class="{ '!text-emerald-500': remainingCheckout.timeType === 'ASAP' }"
-          />
-          <p class="font-medium leading-tight break-all">
-            {{ $t('app.checkout.as-soon-as-possible') }}
-          </p>
-        </UiButton>
-
-        <UiButton
-          v-for="slot in slots"
-          :key="slot.id"
-          variant="secondary"
-          class="w-full min-h-14 flex flex-row flex-wrap gap-2 justify-start items-center"
-          @click="() => { remainingCheckout.timeType = 'SCHEDULED'; remainingCheckout.time = new Date(slot.value); selectedTimeLabel = slot.label; isSelectTimeModalOpened = false }"
-        >
-          <UiCheckBadge v-if="remainingCheckout.timeType === 'SCHEDULED' && remainingCheckout.time?.getTime() === slot.value" />
-          <Icon
-            :name="remainingCheckout.timeType === 'SCHEDULED' ? icons.alarmClockCheck : icons.alarmClock"
-            class="w-6 h-6 text-neutral-300"
-            :class="{ '!text-emerald-500': remainingCheckout.timeType === 'SCHEDULED' && remainingCheckout.time?.getTime() === slot.value }"
-          />
-          <p class="font-medium leading-tight break-all">
-            {{ slot.label }}
-          </p>
-        </UiButton>
-      </div>
-    </UiModal>
   </ClientOnly>
 </template>
 
@@ -363,8 +293,7 @@ const paymentMethods = computed(() => channel.value?.paymentMethods)
 const remainingCheckout = reactive<CheckoutDraft>({
   name: '',
   phone: '',
-  time: undefined,
-  timeType: 'ASAP',
+  time: 0,
   change: undefined,
   note: undefined,
   warehouseId: undefined,
@@ -382,8 +311,6 @@ const isOkForData = computed(() => !!remainingCheckout.name && !!remainingChecko
 const isOkForAmount = computed<boolean>(() => checkout.value?.deliveryMethod === 'DELIVERY' && channel.value?.minAmountForDelivery ? channel.value?.minAmountForDelivery <= (checkout.value?.totalPrice || 0) : true)
 const isValidCheckout = computed(() => isOkForAmount.value && isOkForData.value)
 const isValidPhone = ref(false)
-const selectedTimeLabel = ref('')
-const isSelectTimeModalOpened = ref(false)
 const selectedPaymentMethod = computed(() => paymentMethods.value?.find((m) => m.id === remainingCheckout.paymentMethodId))
 const totalPrice = computed(() => getLocalizedPrice(checkout.value?.totalPrice) ?? 0)
 
@@ -412,8 +339,6 @@ function formatPhone() {
 }
 
 async function updateCheckout() {
-  const time = remainingCheckout.time ? new Date(remainingCheckout.time) : undefined
-
   const finishedCheckout = await update({
     phone: remainingCheckout.phone,
     name: remainingCheckout.name,
@@ -425,8 +350,7 @@ async function updateCheckout() {
     floor: remainingCheckout.floor,
     addressNote: remainingCheckout.addressNote,
     paymentMethodId: remainingCheckout.paymentMethodId,
-    time,
-    timeType: remainingCheckout.timeType,
+    time: remainingCheckout.time,
     change: remainingCheckout.change,
     note: remainingCheckout.note,
   })
diff --git a/apps/web-app/app/pages/command-center/menu/[id]/index.vue b/apps/web-app/app/pages/command-center/menu/[id]/index.vue
index 43c15cc1..0056ffe5 100644
--- a/apps/web-app/app/pages/command-center/menu/[id]/index.vue
+++ b/apps/web-app/app/pages/command-center/menu/[id]/index.vue
@@ -9,9 +9,14 @@
     <div class="flex flex-col md:flex-row gap-4">
       <FormUpdateMenuActivity :menu-id="menu?.id ?? ''" :is-active="menu?.isActive ?? false" />
 
-      <UiButton class="w-full md:w-fit" @click="isCreateMenuCategoryOpened = true">
+      <UButton
+        size="xl"
+        variant="gradient"
+        class="w-full md:w-fit"
+        @click="isCreateMenuCategoryOpened = true"
+      >
         {{ t('center.add.menu-category') }}
-      </UiButton>
+      </UButton>
     </div>
   </div>
 
diff --git a/apps/web-app/app/pages/command-center/product/[id]/index.vue b/apps/web-app/app/pages/command-center/product/[id]/index.vue
index 30fc923a..410ae702 100644
--- a/apps/web-app/app/pages/command-center/product/[id]/index.vue
+++ b/apps/web-app/app/pages/command-center/product/[id]/index.vue
@@ -17,9 +17,14 @@
         :is-available-for-purchase="product?.isAvailableForPurchase ?? false"
       />
 
-      <UiButton class="min-w-48" @click="isUpdateProductOpened = true">
+      <UButton
+        variant="gradient"
+        size="xl"
+        class="justify-center min-w-48"
+        @click="isUpdateProductOpened = true"
+      >
         {{ $t('center.edit.title') }}
-      </UiButton>
+      </UButton>
     </div>
   </div>
 
@@ -31,13 +36,16 @@
         size="md"
       />
 
-      <UiButton
-        variant="secondary"
-        class="absolute flex justify-center items-center w-18 top-2 left-2 bg-neutral-200 dark:bg-neutral-600"
-        @click="isUploadProductImageOpened = true"
-      >
-        <Icon :name="icons.editImage" class="w-6 h-6" />
-      </UiButton>
+      <div class="absolute top-2 left-2">
+        <UButton
+          variant="outline"
+          color="neutral"
+          size="xl"
+          icon="food:image-upload"
+          class="p-3 justify-center items-center"
+          @click="isUploadProductImageOpened = true"
+        />
+      </div>
     </div>
 
     <div class="md:col-span-2">
@@ -185,7 +193,6 @@ const isUpdateProductOpened = ref(false)
 const isCreateProductVariantOpened = ref(false)
 const isUpdateProductVariantOpened = ref(false)
 
-const { icons } = useAppConfig()
 const { params } = useRoute('command-center-product-id')
 const { t } = useI18n()
 
diff --git a/apps/web-app/app/pages/command-center/system/index.vue b/apps/web-app/app/pages/command-center/system/index.vue
index 9f5364f0..d9256dd9 100644
--- a/apps/web-app/app/pages/command-center/system/index.vue
+++ b/apps/web-app/app/pages/command-center/system/index.vue
@@ -8,9 +8,14 @@
           {{ t('center.data.general-title') }}
         </h2>
 
-        <UiButton class="w-full md:w-fit" @click="isUpdateChannelOpened = true">
+        <UButton
+          size="md"
+          variant="gradient"
+          class="w-full md:w-fit"
+          @click="isUpdateChannelOpened = true"
+        >
           {{ t('center.edit.title') }}
-        </UiButton>
+        </UButton>
       </div>
 
       <div class="w-full md:max-w-sm flex flex-col gap-2">
@@ -67,9 +72,14 @@
           {{ t('center.data.online-ordering-time-title') }}
         </h2>
 
-        <UiButton class="w-full md:w-fit" @click="isUpdateWorkingDaysOpened = true">
+        <UButton
+          size="md"
+          variant="gradient"
+          class="w-full md:w-fit"
+          @click="isUpdateWorkingDaysOpened = true"
+        >
           {{ t('center.edit.title') }}
-        </UiButton>
+        </UButton>
       </div>
 
       <div class="space-y-2 w-full md:max-w-sm">
diff --git a/apps/web-app/app/pages/finish/index.vue b/apps/web-app/app/pages/finish/index.vue
index ab88e93e..ffe0bb39 100644
--- a/apps/web-app/app/pages/finish/index.vue
+++ b/apps/web-app/app/pages/finish/index.vue
@@ -79,11 +79,9 @@
       </div>
     </ClientOnly>
 
-    <NuxtLink to="/" class="block grow">
-      <UiButton class="w-full px-4 py-4 text-lg text-center">
-        {{ $t('common.to-home') }}
-      </UiButton>
-    </NuxtLink>
+    <UButton to="/" class="block grow w-full px-4 py-4 text-lg text-center">
+      {{ $t('common.to-home') }}
+    </UButton>
   </div>
 </template>
 
diff --git a/apps/web-app/app/pages/index.vue b/apps/web-app/app/pages/index.vue
index f349cd40..bc75160b 100644
--- a/apps/web-app/app/pages/index.vue
+++ b/apps/web-app/app/pages/index.vue
@@ -5,7 +5,7 @@
   <h1 class="mb-2 text-3xl font-medium">
     {{ channel?.name }}
   </h1>
-  <div class="mb-6">
+  <div class="mb-8">
     {{ channel?.description }}
   </div>
 
diff --git a/apps/web-app/package.json b/apps/web-app/package.json
index 2c415c15..d5794310 100644
--- a/apps/web-app/package.json
+++ b/apps/web-app/package.json
@@ -13,7 +13,6 @@
     "postinstall": "nuxt prepare"
   },
   "dependencies": {
-    "@date-fns/tz": "catalog:",
     "@neoconfetti/vue": "catalog:",
     "@next-orders/core": "workspace:*",
     "@next-orders/database": "workspace:*",
diff --git a/packages/core/package.json b/packages/core/package.json
index 8473a1a4..f88a34e2 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -8,6 +8,7 @@
     "postinstall": "nuxt prepare"
   },
   "dependencies": {
+    "@date-fns/tz": "catalog:",
     "@dicebear/collection": "catalog:",
     "@dicebear/core": "catalog:",
     "@next-orders/database": "workspace:*",
diff --git a/packages/core/server/api/checkout/index.patch.ts b/packages/core/server/api/checkout/index.patch.ts
index f5461720..e6f408ca 100644
--- a/packages/core/server/api/checkout/index.patch.ts
+++ b/packages/core/server/api/checkout/index.patch.ts
@@ -37,7 +37,11 @@ export default defineEventHandler(async (event) => {
       }
     }
 
-    const updatedCheckout = await repository.checkout.patch(secure.checkout.id, data)
+    const updatedCheckout = await repository.checkout.patch(secure.checkout.id, {
+      ...data,
+      time: data.time ? new Date(data.time).toDateString() : new Date().toDateString(),
+      timeType: data.time ? 'SCHEDULED' : 'ASAP',
+    })
 
     if (needToBeFinalized) {
       await repository.checkout.setAsFinished(secure.checkout.id)
@@ -96,7 +100,7 @@ async function sendToReceivers(checkoutId: string) {
       id: checkout.id,
       deliveryMethod: checkout.deliveryMethod as Checkout['deliveryMethod'],
       time,
-      timeType: checkout.timeType as Checkout['timeType'],
+      timeType: checkout.timeType as 'ASAP' | 'SCHEDULED',
       paymentMethodName,
       change: checkout.change ?? undefined,
       name: checkout.name,
diff --git a/packages/core/shared/services/checkout.ts b/packages/core/shared/services/checkout.ts
index c36397a9..47899a99 100644
--- a/packages/core/shared/services/checkout.ts
+++ b/packages/core/shared/services/checkout.ts
@@ -12,8 +12,7 @@ export const checkoutUpdateSchema = z.object({
   floor: z.string().max(10).optional(),
   addressNote: z.string().max(250).optional(),
   paymentMethodId: z.string().max(50).optional(),
-  time: z.string().optional(),
-  timeType: z.enum(['ASAP', 'SCHEDULED']).optional(),
+  time: z.number().optional(),
   change: z.string().max(10).optional(),
   note: z.string().max(250).optional(),
 })
diff --git a/packages/core/types/index.d.ts b/packages/core/types/index.d.ts
index b6d671f2..4584bc42 100644
--- a/packages/core/types/index.d.ts
+++ b/packages/core/types/index.d.ts
@@ -131,8 +131,7 @@ declare global {
     totalPrice: number
     discount: number | null
     note: string | null
-    time: Date
-    timeType: 'ASAP' | 'SCHEDULED'
+    time: number
     change: string | null
     warehouseId: string | null
     street: string
@@ -146,8 +145,8 @@ declare global {
 
   type CheckoutDeliveryMethod = 'DELIVERY' | 'WAREHOUSE'
 
-  interface CheckoutDraft extends Pick<Checkout, 'name' | 'phone' | 'paymentMethodId' | 'note' | 'time' | 'timeType' | 'change' | 'warehouseId' | 'street' | 'flat' | 'doorphone' | 'entrance' | 'floor'> {
-    time: Date | undefined
+  interface CheckoutDraft extends Pick<Checkout, 'name' | 'phone' | 'paymentMethodId' | 'note' | 'time' | 'change' | 'warehouseId' | 'street' | 'flat' | 'doorphone' | 'entrance' | 'floor'> {
+    time: number
     note: string | undefined
     change: string | undefined
     warehouseId: string | undefined
diff --git a/packages/ui/app/app.config.ts b/packages/ui/app/app.config.ts
index fec5b06e..06e53234 100644
--- a/packages/ui/app/app.config.ts
+++ b/packages/ui/app/app.config.ts
@@ -12,7 +12,16 @@ export default defineAppConfig({
       'food:loader': 'lucide:loader-circle',
       'food:arrow-right': 'lucide:arrow-right',
       'food:arrow-left': 'lucide:arrow-left',
+      'food:plus': 'lucide:plus',
+      'food:minus': 'lucide:minus',
       'food:undo': 'lucide:undo-2',
+      'food:image-upload': 'lucide:image-down',
+      'food:busket': 'lucide:shopping-basket',
+      'food:bookmark': 'lucide:bookmark',
+      'food:bookmark-check': 'lucide:bookmark-check',
+      'food:warehouse': 'lucide:map-pin-house',
+      'food:map-pin-check': 'lucide:map-pin-check',
+      'food:clock': 'lucide:clock',
       'food:home': 'lucide:home',
       'food:brand-assets': 'lucide:text-select',
       'food:flag-ru': 'circle-flags:ru',
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8b26d93f..af1d1ede 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -270,9 +270,6 @@ importers:
 
   apps/web-app:
     dependencies:
-      '@date-fns/tz':
-        specifier: 'catalog:'
-        version: 1.2.0
       '@neoconfetti/vue':
         specifier: 'catalog:'
         version: 2.2.1
@@ -326,6 +323,9 @@ importers:
 
   packages/core:
     dependencies:
+      '@date-fns/tz':
+        specifier: 'catalog:'
+        version: 1.2.0
       '@dicebear/collection':
         specifier: 'catalog:'
         version: 9.2.2(@dicebear/core@9.2.2)