From 4c0fb8ea535beaa1cfc6fa3ff40b602ea7125d77 Mon Sep 17 00:00:00 2001
From: Nelya Klyusa <77396171+nelyaklyusa@users.noreply.github.com>
Date: Thu, 9 May 2024 16:17:44 +0300
Subject: [PATCH] add components (#15)

---
 package.json                                  |   4 +-
 src/assets/arrow-left-primary.svg             |   5 +
 src/assets/arrow-right-primary.svg            |   5 +
 src/assets/upload.svg                         |   5 +
 .../BaseAccordion/BaseAccordion.vue           |   4 +-
 .../BaseAccordion/BaseAccordionItem.vue       |  10 +-
 src/components/BaseAccordion/index.sass       |   4 +
 .../BaseBreadcrumbs/BaseBreadcrumbs.vue       |  68 ++
 src/components/BaseBreadcrumbs/index.sass     |   2 +
 src/components/BaseButton/BaseButton.vue      |   4 +-
 .../BaseContentSwitcher.vue                   |  83 +++
 src/components/BaseContentSwitcher/index.sass |   2 +
 src/components/BaseContentSwitcher/index.ts   |   4 +
 src/components/BaseContentSwitcher/types.ts   |   4 +
 src/components/BaseDropdown/BaseDropdown.vue  |  85 +++
 .../BaseDropdown/assets/chevron-down.svg      |   5 +
 src/components/BaseDropdown/index.sass        |   3 +
 src/components/BaseFilter/BaseFilter.vue      | 184 ++++++
 src/components/BaseFilter/filter.svg          |   5 +
 src/components/BaseFilter/index.sass          |   2 +
 src/components/BaseForm/index.sass            |   2 +
 .../BaseFormCheckbox/BaseFormCheckbox.vue     |   6 +-
 .../BaseFormCheckboxGroup.vue                 |  13 +-
 .../BaseFormGroup/BaseFormGroup.vue           | 108 ++--
 src/components/BaseFormGroup/index.sass       |   2 +
 .../BaseFormInput/BaseFormInput.vue           |  10 +-
 .../BaseFormInputSearch.vue                   |  69 ++
 src/components/BaseFormInputSearch/index.sass |   3 +
 src/components/BaseFormInputSearch/index.ts   |   4 +
 .../BaseFormRadio/BaseFormRadio.vue           |   6 +-
 src/components/BaseFormRadio/index.sass       |   6 +-
 .../BaseFormSelect/BaseFormSelect.vue         |  15 +-
 .../BaseFormTextarea/BaseFormTextarea.vue     |   5 +-
 src/components/BaseFormTextarea/index.sass    |  13 +-
 .../BaseModal/BaseModal.component.ts          |  89 +++
 src/components/BaseModal/BaseModal.vue        |  86 +++
 src/components/BaseModal/BaseModalLayout.vue  | 309 +++++++++
 src/components/BaseModal/blocked-body.ts      |  55 ++
 src/components/BaseModal/index.sass           |   2 +
 src/components/BaseModal/index.ts             |   1 +
 src/components/BaseModal/useModal.ts          | 167 +++++
 .../BaseProgressBar/BaseProgressBar.vue       |  61 ++
 src/components/BaseProgressBar/index.sass     |   2 +
 src/components/BaseSkeleton/BaseSkeleton.vue  |  60 +-
 src/components/BaseSkeleton/index.sass        |   2 +
 src/components/BaseSpinner/BaseSpinner.vue    |   3 +-
 src/components/BaseSpinner/index.sass         |   2 +
 src/components/BaseStepper/BaseStepper.vue    | 159 +++++
 src/components/BaseStepper/index.sass         |   2 +
 src/components/BaseTable/BaseTable.vue        |  32 +-
 src/components/BaseTable/index.sass           |  16 +-
 src/components/BaseTag/BaseTag.vue            |   4 +-
 src/components/BaseTimeline/BaseTimeline.vue  |  40 ++
 .../BaseTimeline/BaseTimelineCard.vue         | 168 +++++
 .../BaseTimeline/BaseTimelineCircle.vue       |  88 +++
 .../BaseTimeline/BaseTimelineItem.vue         | 126 ++++
 src/components/BaseTimeline/assets/check.svg  |   5 +
 src/components/BaseTimeline/index.sass        |   2 +
 src/components/BaseTooltip/BaseTooltip.vue    | 605 ++++++++----------
 src/components/BaseTooltip/index.sass         |   2 +
 src/components/BaseUploader/BaseUploader.vue  | 240 +++++++
 src/components/BaseUploader/file.svg          |   5 +
 src/components/BaseUploader/index.sass        |   2 +
 src/components/BaseUploader/upload.svg        |   5 +
 .../CardCheckmarked/CardCheckmarked.vue       |  94 +++
 .../common/CardCheckmarked/assets/check.svg   |   5 +
 .../common/CardCheckmarked/index.sass         |   2 +
 .../common/CardCheckmarked/types.ts           |   6 +
 .../common/SliderSwiper/SliderSwiper.vue      |  79 +++
 src/components/common/SliderSwiper/index.sass |   2 +
 .../SliderWithPaginationAutoPlay.vue          | 114 ++++
 .../SliderWithPaginationAutoPlay/index.sass   |   2 +
 .../WhatOurClientsSay/WhatOurClientsSay.vue   |  69 ++
 .../WhatOurClientsSaySlider.vue               | 112 ++++
 .../common/WhatOurClientsSay/index.sass       |   2 +
 .../common/WhatOurClientsSay/utils.ts         |  39 ++
 src/helpers/blocked-body.ts                   |  55 ++
 src/styles/_fonts.sass                        |  14 +-
 src/styles/_global.sass                       |   7 +-
 yarn.lock                                     |  82 ++-
 80 files changed, 3308 insertions(+), 466 deletions(-)
 create mode 100644 src/assets/arrow-left-primary.svg
 create mode 100644 src/assets/arrow-right-primary.svg
 create mode 100644 src/assets/upload.svg
 create mode 100644 src/components/BaseBreadcrumbs/BaseBreadcrumbs.vue
 create mode 100644 src/components/BaseBreadcrumbs/index.sass
 create mode 100644 src/components/BaseContentSwitcher/BaseContentSwitcher.vue
 create mode 100644 src/components/BaseContentSwitcher/index.sass
 create mode 100644 src/components/BaseContentSwitcher/index.ts
 create mode 100644 src/components/BaseContentSwitcher/types.ts
 create mode 100644 src/components/BaseDropdown/BaseDropdown.vue
 create mode 100644 src/components/BaseDropdown/assets/chevron-down.svg
 create mode 100644 src/components/BaseDropdown/index.sass
 create mode 100644 src/components/BaseFilter/BaseFilter.vue
 create mode 100644 src/components/BaseFilter/filter.svg
 create mode 100644 src/components/BaseFilter/index.sass
 create mode 100644 src/components/BaseForm/index.sass
 create mode 100644 src/components/BaseFormGroup/index.sass
 create mode 100644 src/components/BaseFormInputSearch/BaseFormInputSearch.vue
 create mode 100644 src/components/BaseFormInputSearch/index.sass
 create mode 100644 src/components/BaseFormInputSearch/index.ts
 create mode 100644 src/components/BaseModal/BaseModal.component.ts
 create mode 100644 src/components/BaseModal/BaseModal.vue
 create mode 100644 src/components/BaseModal/BaseModalLayout.vue
 create mode 100644 src/components/BaseModal/blocked-body.ts
 create mode 100644 src/components/BaseModal/index.sass
 create mode 100644 src/components/BaseModal/index.ts
 create mode 100644 src/components/BaseModal/useModal.ts
 create mode 100644 src/components/BaseProgressBar/BaseProgressBar.vue
 create mode 100644 src/components/BaseProgressBar/index.sass
 create mode 100644 src/components/BaseSkeleton/index.sass
 create mode 100644 src/components/BaseSpinner/index.sass
 create mode 100644 src/components/BaseStepper/BaseStepper.vue
 create mode 100644 src/components/BaseStepper/index.sass
 create mode 100644 src/components/BaseTimeline/BaseTimeline.vue
 create mode 100644 src/components/BaseTimeline/BaseTimelineCard.vue
 create mode 100644 src/components/BaseTimeline/BaseTimelineCircle.vue
 create mode 100644 src/components/BaseTimeline/BaseTimelineItem.vue
 create mode 100644 src/components/BaseTimeline/assets/check.svg
 create mode 100644 src/components/BaseTimeline/index.sass
 create mode 100644 src/components/BaseTooltip/index.sass
 create mode 100644 src/components/BaseUploader/BaseUploader.vue
 create mode 100644 src/components/BaseUploader/file.svg
 create mode 100644 src/components/BaseUploader/index.sass
 create mode 100644 src/components/BaseUploader/upload.svg
 create mode 100644 src/components/common/CardCheckmarked/CardCheckmarked.vue
 create mode 100644 src/components/common/CardCheckmarked/assets/check.svg
 create mode 100644 src/components/common/CardCheckmarked/index.sass
 create mode 100644 src/components/common/CardCheckmarked/types.ts
 create mode 100644 src/components/common/SliderSwiper/SliderSwiper.vue
 create mode 100644 src/components/common/SliderSwiper/index.sass
 create mode 100644 src/components/common/SliderWithPaginationAutoPlay/SliderWithPaginationAutoPlay.vue
 create mode 100644 src/components/common/SliderWithPaginationAutoPlay/index.sass
 create mode 100644 src/components/common/WhatOurClientsSay/WhatOurClientsSay.vue
 create mode 100644 src/components/common/WhatOurClientsSay/WhatOurClientsSaySlider.vue
 create mode 100644 src/components/common/WhatOurClientsSay/index.sass
 create mode 100644 src/components/common/WhatOurClientsSay/utils.ts
 create mode 100644 src/helpers/blocked-body.ts

diff --git a/package.json b/package.json
index e3a0104..925821e 100644
--- a/package.json
+++ b/package.json
@@ -12,9 +12,11 @@
     "build": "storybook build -o dist/"
   },
   "dependencies": {
-    "@dafcoe/vue-collapsible-panel": "^0.2.0",
+    "@swoga/vue-collapsible-panel": "^0.3.0",
     "@vue/compiler-core": "^3.4.19",
+    "@vueuse/core": "^10.9.0",
     "sass": "^1.71.1",
+    "swiper": "^11.1.1",
     "vite-svg-loader": "^5.1.0",
     "vue": "^3.4.19",
     "vue-select": "^4.0.0-beta.6"
diff --git a/src/assets/arrow-left-primary.svg b/src/assets/arrow-left-primary.svg
new file mode 100644
index 0000000..47e4f0f
--- /dev/null
+++ b/src/assets/arrow-left-primary.svg
@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="arrow-left">
+<path id="Vector" d="M2.81563 10.8357L2 10L2.81204 9.16429L7.98608 3.83941L8.80171 3L10.4258 4.67512L9.61374 5.51083L6.40153 8.81669H16.8502H18V11.1833H16.8502H6.40512L9.61734 14.4892L10.4258 15.3249L8.80171 17L7.98967 16.1643L2.81563 10.8394V10.8357Z" fill="#004FFF"/>
+</g>
+</svg>
diff --git a/src/assets/arrow-right-primary.svg b/src/assets/arrow-right-primary.svg
new file mode 100644
index 0000000..7652cfb
--- /dev/null
+++ b/src/assets/arrow-right-primary.svg
@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="arrow-right">
+<path id="Vector" d="M17.1844 10.8357L18 10L17.188 9.16429L12.0139 3.83941L11.1983 3L9.57422 4.67512L10.3863 5.51083L13.5985 8.81669H3.14979H2V11.1833H3.14979H13.5949L10.3827 14.4892L9.57422 15.3249L11.1983 17L12.0103 16.1643L17.1844 10.8394V10.8357Z" fill="#004FFF"/>
+</g>
+</svg>
diff --git a/src/assets/upload.svg b/src/assets/upload.svg
new file mode 100644
index 0000000..94046fb
--- /dev/null
+++ b/src/assets/upload.svg
@@ -0,0 +1,5 @@
+<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="upload">
+<path id="Vector" d="M9.28307 2.61172L8.67404 2L8.06501 2.61172L4.61565 6.06108L4.00393 6.67011L5.22468 7.89086L5.83371 7.28183L7.8117 5.30384V9.6883V10.5506H9.53638V9.6883V5.30384L11.5144 7.28183L12.1234 7.89086L13.3441 6.67011L12.7351 6.06108L9.28576 2.61172H9.28307ZM4.36234 12.2753H3.5V14H4.36234H12.9857H13.8481V12.2753H12.9857H4.36234Z" fill="currentColor"/>
+</g>
+</svg>
diff --git a/src/components/BaseAccordion/BaseAccordion.vue b/src/components/BaseAccordion/BaseAccordion.vue
index 2057e1e..0a3b78c 100644
--- a/src/components/BaseAccordion/BaseAccordion.vue
+++ b/src/components/BaseAccordion/BaseAccordion.vue
@@ -1,10 +1,10 @@
 <script lang="ts" setup>
 import {
   VueCollapsiblePanelGroup,
-} from '@dafcoe/vue-collapsible-panel';
+} from '@swoga/vue-collapsible-panel';
 
 // IMPORTANT: before using this component you need to install library
-// type in the terminal: yarn add @dafcoe/vue-collapsible-panel
+// type in the terminal: yarn add @swoga/vue-collapsible-panel
 
 </script>
 
diff --git a/src/components/BaseAccordion/BaseAccordionItem.vue b/src/components/BaseAccordion/BaseAccordionItem.vue
index f9e291f..7009e9a 100644
--- a/src/components/BaseAccordion/BaseAccordionItem.vue
+++ b/src/components/BaseAccordion/BaseAccordionItem.vue
@@ -2,10 +2,10 @@
 import { withDefaults } from 'vue';
 import {
   VueCollapsiblePanel,
-} from '@dafcoe/vue-collapsible-panel';
+} from '@swoga/vue-collapsible-panel';
 
 // IMPORTANT: before using this component you need to install library
-// type in the terminal: yarn add @dafcoe/vue-collapsible-panel
+// type in the terminal: yarn add @swoga/vue-collapsible-panel
 
 withDefaults(defineProps<{
   /**
@@ -93,6 +93,12 @@ withDefaults(defineProps<{
         +mt(.2s)
     :deep(.vcp__body)
       height: 0
+      background-color: $accordion-item-active-content-background
+    :deep(.vcp__header)
+      background-color: $accordion-item-active-header-background
+      box-shadow: $accordion-item-active-header-box-shadow
+      z-index: 1
+      position: relative
   &__title-text
     padding: 12px 16px
     margin-bottom: 0
diff --git a/src/components/BaseAccordion/index.sass b/src/components/BaseAccordion/index.sass
index 3b13150..c8498c2 100644
--- a/src/components/BaseAccordion/index.sass
+++ b/src/components/BaseAccordion/index.sass
@@ -1,5 +1,6 @@
 @import 'UiKit/styles/_colors.sass'
 @import 'UiKit/styles/_mixins.sass'
+@import 'UiKit/styles/_global.sass'
 
 $border-color: $gray-30
 $border-color-white: $gray-10
@@ -8,3 +9,6 @@ $white-link-color: $gray-10
 $link-color: $primary
 
 $open-close-icon-fill: $black
+$accordion-item-active-header-background: $white
+$accordion-item-active-header-box-shadow: $box-shadow-small
+$accordion-item-active-content-background: $gray-10
\ No newline at end of file
diff --git a/src/components/BaseBreadcrumbs/BaseBreadcrumbs.vue b/src/components/BaseBreadcrumbs/BaseBreadcrumbs.vue
new file mode 100644
index 0000000..ecb21da
--- /dev/null
+++ b/src/components/BaseBreadcrumbs/BaseBreadcrumbs.vue
@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { PropType } from 'vue';
+
+export interface IBreadcrumb {
+  name: string;
+  routeName?: string;
+}
+
+defineProps({
+  data: {
+    type: Array as PropType<IBreadcrumb[]>,
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <section class="BaseBreadcrumbs base-breadcrumbs">
+    <div class="base-breadcrumbs__container">
+      <div
+        v-for="item in data"
+        :key="item.routeName"
+        class="base-breadcrumbs__item-wrap"
+      >
+        <component
+          :is="item.routeName ? 'router-link' : 'span'"
+          :to="{ name: item.routeName }"
+          class="base-breadcrumbs__item"
+        >
+          <span class="is--h6__title">
+            {{ item.name }}
+          </span>
+        </component>
+        <span class="base-breadcrumbs__divider">
+          /
+        </span>
+      </div>
+    </div>
+  </section>
+</template>
+
+<style lang="sass" scoped>
+@import 'index.sass'
+.base-breadcrumbs
+  $root: &
+
+  &__container
+    gap: 8px
+    display: flex
+    flex-wrap: wrap
+
+  &__item
+    color: $black
+
+  &__divider
+    color: $gray-50
+
+  &__item-wrap
+    gap: 8px
+    display: flex
+
+    &:last-of-type
+      #{$root}__item
+        color: $gray-50
+
+      #{$root}__divider
+        display: none
+</style>
diff --git a/src/components/BaseBreadcrumbs/index.sass b/src/components/BaseBreadcrumbs/index.sass
new file mode 100644
index 0000000..6b6f492
--- /dev/null
+++ b/src/components/BaseBreadcrumbs/index.sass
@@ -0,0 +1,2 @@
+@import 'UiKit/styles/_colors.sass'
+@import 'UiKit/styles/_global.sass'
diff --git a/src/components/BaseButton/BaseButton.vue b/src/components/BaseButton/BaseButton.vue
index f95952d..7452046 100644
--- a/src/components/BaseButton/BaseButton.vue
+++ b/src/components/BaseButton/BaseButton.vue
@@ -147,7 +147,7 @@
 		&:hover
 			background-color: $base-button-danger-hover-color
 	&.is--variant-outlined
-		background-color: transparent
+		background-color: $white
 		border-style: solid
 		border-width: $base-button-border-width
 		&.is--color-primary
@@ -190,7 +190,7 @@
 			&:hover
 				background-color: rgba($base-button-secondary-color, 0.1)
 		&.is--color-success
-			color: $base-button-success-color
+			color: $base-button-success-text-color
 			&:hover
 				background-color: rgba($base-button-success-color, 0.1)
 		&.is--color-warning
diff --git a/src/components/BaseContentSwitcher/BaseContentSwitcher.vue b/src/components/BaseContentSwitcher/BaseContentSwitcher.vue
new file mode 100644
index 0000000..bb9a0db
--- /dev/null
+++ b/src/components/BaseContentSwitcher/BaseContentSwitcher.vue
@@ -0,0 +1,83 @@
+<script lang="ts" setup>
+import { withDefaults } from 'vue';
+import { Tab } from './types';
+
+const props = withDefaults(defineProps<{
+  tabs: Tab[];
+  modelValue?: string | number;
+  fullWidth?: boolean,
+}>(), {
+});
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: Tab['value']): void;
+  (e: 'itemClick', value: Tab): void;
+}>();
+
+function onItemClick(tab: Tab) {
+  emit('update:modelValue', tab.value);
+  emit('itemClick', tab);
+}
+</script>
+
+<template>
+  <div
+    class="BaseContentSwitcher base-content-switcher"
+  >
+    <div
+      v-for="tab in props.tabs"
+      :key="tab.value"
+      class="base-content-switcher__item"
+      :class="[{ 'is--active': modelValue === tab.value, 'is--full-width': fullWidth }]"
+      :style="{width: fullWidth ? `${100/(props.tabs.length)}%` : 'auto'}"
+      @click="onItemClick(tab)"
+    >
+      <slot
+        name="tab"
+        :tab="tab"
+      >
+        <span
+          class="base-content-switcher__item-label is--small-2"
+          :title="tab.label"
+        >
+          {{ tab.label }}
+        </span>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<style lang="sass" scoped>
+@import 'index.sass'
+.base-content-switcher
+  height: 32px
+  display: flex
+  flex-direction: row
+  align-items: center
+  gap: 4px
+  border-radius: 2px
+  background: $gray-20
+  padding: 4px
+
+  &.is--full-width
+    width: 100%
+
+  &__item
+    cursor: pointer
+    display: flex
+    padding: 3px 12px
+    align-items: center
+    gap: 4px
+    align-self: stretch
+    border-radius: 2px
+    color: $gray-60
+    +mt(.2s)
+    &.is--active
+      +mt(.2s)
+      background-color: $white
+      color: $black
+    &:hover
+      color: $black
+  &__item-label
+    flex-shrink: 0
+</style>
diff --git a/src/components/BaseContentSwitcher/index.sass b/src/components/BaseContentSwitcher/index.sass
new file mode 100644
index 0000000..f765c89
--- /dev/null
+++ b/src/components/BaseContentSwitcher/index.sass
@@ -0,0 +1,2 @@
+@import 'UiKit/styles/_colors.sass'
+@import 'UiKit/styles/_mixins.sass'
diff --git a/src/components/BaseContentSwitcher/index.ts b/src/components/BaseContentSwitcher/index.ts
new file mode 100644
index 0000000..eca0c5a
--- /dev/null
+++ b/src/components/BaseContentSwitcher/index.ts
@@ -0,0 +1,4 @@
+import BaseContentSwitcher from './BaseContentSwitcher.vue';
+
+export { BaseContentSwitcher };
+export * from './types';
diff --git a/src/components/BaseContentSwitcher/types.ts b/src/components/BaseContentSwitcher/types.ts
new file mode 100644
index 0000000..44d3b22
--- /dev/null
+++ b/src/components/BaseContentSwitcher/types.ts
@@ -0,0 +1,4 @@
+export type Tab = object & {
+  value: string | number;
+  label?: string;
+};
diff --git a/src/components/BaseDropdown/BaseDropdown.vue b/src/components/BaseDropdown/BaseDropdown.vue
new file mode 100644
index 0000000..18d164f
--- /dev/null
+++ b/src/components/BaseDropdown/BaseDropdown.vue
@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { onClickOutside } from '@vueuse/core';
+import ArrowDown from './assets/chevron-down.svg';
+
+const isActive = ref(false);
+const target = ref(null);
+
+onClickOutside(target, () => {
+  isActive.value = false;
+})
+</script>
+
+
+<template>
+  <div
+    ref="target"
+    class="BaseDropdown base-dropdown"
+  >
+    <div
+      class="base-dropdown__selected"
+      :class="{ 'is-active': isActive }"
+      @click="isActive = !isActive"
+    >
+      <slot />
+
+      <img
+        v-svg-inline
+        :src="ArrowDown"
+        class="base-dropdown__selected-arrow"
+        alt="dropdown selected arrow"
+      >
+    </div>
+    <Transition name="fade" mode="out-in">
+      <div
+        v-show="isActive"
+        class="base-dropdown__items"
+      >
+          <slot name="listItem" />
+      </div>
+    </Transition>
+  </div>
+</template>
+
+
+<style lang="sass" scoped>
+@import 'index.sass'
+.base-dropdown
+  $root: &
+
+  position: relative
+  width: fit-content
+
+  &__selected
+    position: relative
+    display: flex
+    align-items: center
+    cursor: pointer
+    width: fit-content
+
+    &.is-active
+      .base-dropdown
+        &__selected-arrow
+          transform: rotate(180deg)
+
+  &__selected-arrow
+    width: 14px
+    color: $gray-70
+    transition: all 0.3s
+    transform-origin: center
+
+  &__items
+    position: absolute
+    right: 0
+    top: calc(100% + 13px)
+    z-index: 1
+    display: flex
+    width: 100%
+    padding: 8px 0px
+    flex-direction: column
+    align-items: flex-start
+    border-radius: 2px
+    background: $white
+    box-shadow: $box-shadow-small
+</style>
diff --git a/src/components/BaseDropdown/assets/chevron-down.svg b/src/components/BaseDropdown/assets/chevron-down.svg
new file mode 100644
index 0000000..d0331b6
--- /dev/null
+++ b/src/components/BaseDropdown/assets/chevron-down.svg
@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="chevron-down">
+<path id="Vector" d="M8 11.1454L8.57143 10.574L13.426 5.71934L14 5.14539L12.8546 4L12.2832 4.57143L8 8.85461L3.71681 4.57396L3.14539 4L2 5.14539L2.57143 5.71681L7.42604 10.5714L8 11.1454Z" fill="currentColor"/>
+</g>
+</svg>
diff --git a/src/components/BaseDropdown/index.sass b/src/components/BaseDropdown/index.sass
new file mode 100644
index 0000000..ba26af6
--- /dev/null
+++ b/src/components/BaseDropdown/index.sass
@@ -0,0 +1,3 @@
+@import 'UiKit/styles/_colors.sass'
+@import 'UiKit/styles/_mixins.sass'
+@import 'UiKit/styles/_global.sass'
diff --git a/src/components/BaseFilter/BaseFilter.vue b/src/components/BaseFilter/BaseFilter.vue
new file mode 100644
index 0000000..a330808
--- /dev/null
+++ b/src/components/BaseFilter/BaseFilter.vue
@@ -0,0 +1,184 @@
+<script setup lang="ts">
+import BaseButton from 'UiKit/components/BaseButton';
+import BaseFormCheckboxGroup from 'UiKit/components/BaseFormCheckbox/BaseFormCheckboxGroup.vue';
+import filterIcon from 'UiKit/components/BaseFilter/filter.svg';
+import { PropType, watch, ref, toRaw } from 'vue';
+import { onClickOutside } from '@vueuse/core';
+
+export interface IBaseFilter {
+  value: string;
+  title: string;
+  options: string[];
+}
+
+const props = defineProps({
+  items: {
+    type: Array as PropType<IBaseFilter[]>,
+    required: true,
+  },
+});
+
+const emits = defineEmits(['apply']);
+
+const showDropdown = ref(false);
+const target = ref(null);
+const selectedFilters = ref(0);
+const itemsFormatted = ref();
+
+const updateItemsFormatted = () => {
+  itemsFormatted.value = props.items.map((item) => ({
+    ...item,
+    model: [],
+  }))
+};
+
+const updateFilters = () => {
+  selectedFilters.value = 0;
+  itemsFormatted.value.reduce((countLocal, item) => {
+    selectedFilters.value = selectedFilters.value + item.model.length
+    return selectedFilters.value
+  }, 0)
+};
+
+const onFilterButtonClick = () => {
+  showDropdown.value = !showDropdown.value;
+};
+
+const close = () => {
+  showDropdown.value = false;
+};
+
+const onApplyClick = () => {
+  emits('apply', itemsFormatted.value);
+  updateFilters();
+  close();
+};
+
+const onClearClick = () => {
+  updateItemsFormatted();
+  updateFilters();
+  emits('apply');
+  close();
+};
+
+onClickOutside(target, () => close())
+
+watch(() => props.items, () => {
+  updateItemsFormatted()
+}, { immediate: true });
+</script>
+
+<template>
+  <div
+    ref="target"
+    class="BaseFilter base-filter"
+  >
+    <BaseButton
+      size="small"
+      variant="link"
+      icon-placement="left"
+      class="base-filter__button"
+      @click="onFilterButtonClick"
+    >
+      <img
+        v-svg-inline
+        :src="filterIcon"
+        alt="filter image"
+        class="base-filter__button-icon"
+      />
+      Filters&nbsp;
+      <span
+        v-if="selectedFilters && selectedFilters > 0"
+        class="base-filter__button-number"
+      >
+        ({{ selectedFilters }})
+      </span>
+    </BaseButton>
+    <Transition>
+      <div
+        v-if="showDropdown"
+        class="base-filter__dropdown"
+      >
+
+        <div
+          v-for="(item, index) in itemsFormatted"
+          :key="index"
+          class="base-filter__group"
+        >
+          <div class="base-filter__title is--h6__title">
+            {{ item.title }}
+          </div>
+          <BaseFormCheckboxGroup
+            :options="item.options"
+            :model-value="item.model"
+            class="base-filter__checkbox-group"
+            @update:model-value="item.model = toRaw($event)"
+          />
+        </div>
+
+        <div class="base-filter__cta">
+          <BaseButton
+            size="small"
+            block
+            class="base-filter__button"
+            @click="onApplyClick"
+          >
+            Apply
+          </BaseButton>
+          <BaseButton
+            size="small"
+            variant="link"
+            block
+            class="base-filter__button"
+            @click="onClearClick"
+          >
+            Clear Selected
+          </BaseButton>
+        </div>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<style lang="sass" scoped>
+@import 'index.sass'
+.base-filter
+  --base-filter-dropdown--min-width: 150px
+
+  position: relative
+
+  &__button-icon
+    color: inherit
+
+  &__dropdown
+    position: absolute
+    top: 100%
+    left: 0
+    min-width: var(--base-filter-dropdown--min-width)
+    width: fit-content
+    display: flex
+    flex-direction: column
+    align-items: flex-start
+    background-color: $gray-10
+    box-shadow: $box-shadow-small
+    z-index: 2
+
+  &__cta
+    display: flex
+    padding: 12px
+    flex-direction: column
+    align-items: flex-start
+    gap: 4px
+    align-self: stretch
+
+  &__title
+    color: $gray-70
+    padding: 12px 12px 2px 12px
+    text-transform: capitalize
+
+  &__group
+    width: 100%
+
+  &__checkbox-group
+    width: 100%
+</style>
diff --git a/src/components/BaseFilter/filter.svg b/src/components/BaseFilter/filter.svg
new file mode 100644
index 0000000..6ff7a77
--- /dev/null
+++ b/src/components/BaseFilter/filter.svg
@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="filter">
+<path id="Vector" d="M6.5 11V8.75L2 3.5V2H14V3.5L9.5 8.75V13.25L6.5 11Z" fill="currentColor"/>
+</g>
+</svg>
diff --git a/src/components/BaseFilter/index.sass b/src/components/BaseFilter/index.sass
new file mode 100644
index 0000000..6b6f492
--- /dev/null
+++ b/src/components/BaseFilter/index.sass
@@ -0,0 +1,2 @@
+@import 'UiKit/styles/_colors.sass'
+@import 'UiKit/styles/_global.sass'
diff --git a/src/components/BaseForm/index.sass b/src/components/BaseForm/index.sass
new file mode 100644
index 0000000..6b6f492
--- /dev/null
+++ b/src/components/BaseForm/index.sass
@@ -0,0 +1,2 @@
+@import 'UiKit/styles/_colors.sass'
+@import 'UiKit/styles/_global.sass'
diff --git a/src/components/BaseFormCheckbox/BaseFormCheckbox.vue b/src/components/BaseFormCheckbox/BaseFormCheckbox.vue
index b424af7..122f6f2 100644
--- a/src/components/BaseFormCheckbox/BaseFormCheckbox.vue
+++ b/src/components/BaseFormCheckbox/BaseFormCheckbox.vue
@@ -102,7 +102,7 @@ function onChange(event: Event) {
 	</div>
 </template>
 
-<style lang="sass">
+<style lang="sass" scoped>
 @import 'index.sass'
 .base-form-checkbox
 	$root: &
@@ -140,7 +140,6 @@ function onChange(event: Event) {
 		height: $checkbox-size
 		margin-right: 8px
 		position: relative
-		background-color: #fff
 		display: flex
 		flex-direction: row
 		justify-content: center
@@ -167,7 +166,8 @@ function onChange(event: Event) {
 		pointer-events: none
 	&.is--disabled
 		pointer-events: none
-		opacity: .3
+		#{$root}__icon-wrap
+			opacity: .3
 	
 	&__input:focus + #{$root}__icon-wrap
 		outline: none !important
diff --git a/src/components/BaseFormCheckbox/BaseFormCheckboxGroup.vue b/src/components/BaseFormCheckbox/BaseFormCheckboxGroup.vue
index 393d962..f012ae0 100644
--- a/src/components/BaseFormCheckbox/BaseFormCheckboxGroup.vue
+++ b/src/components/BaseFormCheckbox/BaseFormCheckboxGroup.vue
@@ -44,14 +44,23 @@ function onUpdate(option: string, checked: boolean) {
 	</div>
 </template>
 
-<style lang="sass">
+<style lang="sass" scoped>
 .base-form-checkbox-group
 	$root: &
+	width: 100%
+
+	--base-form-checkbox-group-item--padding: 12px 12px
+	--base-form-checkbox-group-item--background-color: #E9ECEF
 	
 	display: flex
 	flex-direction: column
 	align-items: flex-start
 	
 	&__item
-		margin: 10px 0
+		padding: var(--base-form-checkbox-group-item--padding)
+		width: 100%
+		cursor: pointer
+		transition: all 0.2s ease 
+		&:hover
+			background: var(--base-form-checkbox-group-item--background-color)
 </style>
diff --git a/src/components/BaseFormGroup/BaseFormGroup.vue b/src/components/BaseFormGroup/BaseFormGroup.vue
index 9ba4dec..671b7b1 100644
--- a/src/components/BaseFormGroup/BaseFormGroup.vue
+++ b/src/components/BaseFormGroup/BaseFormGroup.vue
@@ -4,7 +4,7 @@ import {
 } from 'vue';
 import get from 'lodash/get';
 import merge from 'lodash/merge';
-import { resolveRef } from '@/helpers/validation/general';
+import { toRaw } from 'vue';
 
 const props = defineProps<{
   label?: string;
@@ -14,23 +14,46 @@ const props = defineProps<{
   schemaBack?: object;
   schemaFront?: object;
   errorText?: string[];
+  required?: boolean;
 }>();
 
 const schema = ref();
 
-function extractFieldName(path: string): string | null {
-  const parts = path.split('/');
-  if (parts.length > 1) return parts[parts.length - 1];
-  if (parts.length === 1) return parts[0];
-  return null;
+function resolveRef(ref, schema) {
+    const refPath = ref.replace('#/', '').split('/');
+    let currentSchema = schema;
+    return get(currentSchema, refPath.join('.'));
+}
+
+function isFieldRequiredInSchema(fieldName, schema) {
+    return schema.required ? schema.required.includes(fieldName) : false;
+}
+
+function getFieldSchema(path, ref, schema) {
+  if (!path || !ref) return undefined;
+    const objectFromRefPath = resolveRef(ref, schema);
+    const pathSegments = path.split('.');
+    const firstChild = pathSegments.shift();
+    const restSegments = pathSegments.join('.');
+    const segment0Property = objectFromRefPath.properties[firstChild];
+    if (segment0Property?.$ref) {
+      return getFieldSchema(restSegments, segment0Property.$ref, schema);
+    }
+    return objectFromRefPath;
+}
+
+function isFieldRequiredAtPath(path, schema) {
+    const parentSchema = getFieldSchema(path, schema.$ref, schema);
+    if (!parentSchema) return false;
+    const fieldName = path.split('.').pop();
+    return isFieldRequiredInSchema(fieldName, parentSchema);
 }
 
 const required = computed(() => {
-  if (!props.path) return false;
-  const fieldName = extractFieldName(props.path);
-  const schemaObject = resolveRef(schema.value);
+  if (props.required) return true;
+  if (!props.path || !schema.value) return false;
   // eslint-disable-next-line
-  return schemaObject?.required?.includes(fieldName);
+  return isFieldRequiredAtPath(props.path, schema.value);
 });
 
 const errorText = computed(() => {
@@ -45,7 +68,9 @@ const errorText = computed(() => {
 const isError = computed(() => (errorText.value.length > 0));
 
 watch(() => [props.schemaBack, props.schemaFront], () => {
-  schema.value = merge(props.schemaBack, props.schemaFront);
+  const schema1 = structuredClone(toRaw(props.schemaBack))
+  const schema2 = structuredClone(toRaw(props.schemaFront))
+  schema.value = merge(schema1, schema2);
 }, { immediate: true, deep: true });
 </script>
 
@@ -80,37 +105,32 @@ watch(() => [props.schemaBack, props.schemaFront], () => {
   </div>
 </template>
 
-<style lang="scss" scoped>
-.base-form-group {
-  display: flex;
-  flex-direction: column;
-  position: relative;
-
-  &__label {
-    display: inline-block;
-    position: relative;
-    color: $gray-70;
-    text-align: left;
-    margin-bottom: 8px;
-  }
-
-  &__label-link {
-    position: absolute;
-    right: 0;
-    top: 0;
-  }
-
-  &__label-required {
-    color: $wd-color-red;
-  }
-
-  &__error {
-    margin-top: 4px;
-    color: $red-dark;
-  }
-
-  &__input {
-    width: 100%;
-  }
-}
+<style lang="sass" scoped>
+@import 'index.sass'
+.base-form-group
+  display: flex
+  flex-direction: column
+  position: relative
+
+  &__label
+    display: inline-block
+    position: relative
+    color: $gray-70
+    text-align: left
+    margin-bottom: 8px
+
+  &__label-link
+    position: absolute
+    right: 0
+    top: 0
+
+  &__label-required
+    color: $red
+
+  &__error
+    margin-top: 4px
+    color: $red-dark
+
+  &__input
+    width: 100%
 </style>
diff --git a/src/components/BaseFormGroup/index.sass b/src/components/BaseFormGroup/index.sass
new file mode 100644
index 0000000..6b6f492
--- /dev/null
+++ b/src/components/BaseFormGroup/index.sass
@@ -0,0 +1,2 @@
+@import 'UiKit/styles/_colors.sass'
+@import 'UiKit/styles/_global.sass'
diff --git a/src/components/BaseFormInput/BaseFormInput.vue b/src/components/BaseFormInput/BaseFormInput.vue
index 31fe06f..abbdd02 100644
--- a/src/components/BaseFormInput/BaseFormInput.vue
+++ b/src/components/BaseFormInput/BaseFormInput.vue
@@ -52,7 +52,10 @@ const moneyFormatOptions = {
       },
     }
 
-const emit = defineEmits<{ (e: 'update:modelValue', value: string): void }>();
+const emit = defineEmits<{
+	(e: 'update:modelValue', value: string): void,
+	(e: 'enter'): void,
+}>();
 
 const localValue = ref('');
 const focused = ref(false);
@@ -131,7 +134,7 @@ function onInput(value: string) {
 	// set filtered value
 	localValue.value = String(value).replace(charsToCheck, '');
 	if (props.mask) localValue.value = mask.masked(localValue.value);
-	emit('update:modelValue', returnValue.value);
+	emit('update:modelValue', returnValue.value.trim());
 }
 
 function onInputEvent() {
@@ -192,6 +195,7 @@ watch(() => props.modelValue, () => onInput(props.modelValue));
 			@beforeinput="onBeforeInput"
 			@focus="onFocus"
 			@blur="onBlur"
+			@keypress.enter="emit('enter')"
 		>
 		<span
 			v-if="prepend"
@@ -202,7 +206,7 @@ watch(() => props.modelValue, () => onInput(props.modelValue));
 	</div>
 </template>
 
-<style lang="sass">
+<style lang="sass" scoped>
 @import 'index.sass'
 .base-form-input
 	color: $input-color
diff --git a/src/components/BaseFormInputSearch/BaseFormInputSearch.vue b/src/components/BaseFormInputSearch/BaseFormInputSearch.vue
new file mode 100644
index 0000000..7831376
--- /dev/null
+++ b/src/components/BaseFormInputSearch/BaseFormInputSearch.vue
@@ -0,0 +1,69 @@
+<script lang="ts" setup>
+import BaseFormInput from 'UiKit/components/BaseFormInput';
+import searchIcon from '@/assets/images/icons/search.svg';
+import closeIcon from '@/assets/images/icons/close.svg';
+import { computed, ref, watch } from 'vue';
+
+const props = defineProps({
+	modelValue: String,
+})
+const emit = defineEmits(['@update:modelValue']);
+
+const model = ref(props.modelValue);
+
+const showClearButton = computed(() => Boolean(model.value));
+
+const onClearClick = () => {
+  model.value = '';
+}
+watch(() => model.value, () => {
+    emit('@update:modelValue', model.value);
+});
+</script>
+
+<template>
+	<div
+		class="BaseFormInputSearch base-form-input-search"
+	>
+        <BaseFormInput
+			:model-value="model"
+          	name="search"
+          	append
+          	prepend
+			v-bind="$attrs"
+          	placeholder="Search"
+			@update:model-value="model = $event"
+        >
+          <template #append>
+            <img
+              v-svg-inline
+              :src="searchIcon"
+              alt="search icon"
+			  class="base-form-input-search__search-icon"
+            >
+          </template>
+          <template #prepend>
+			<div v-if="showClearButton" @click="onClearClick">
+				<img
+				v-svg-inline
+				:src="closeIcon"
+				alt="clear icon"
+				class="base-form-input-search__close-icon"
+				>
+			</div>
+          </template>
+        </BaseFormInput>
+	</div>
+</template>
+
+<style lang="sass" scoped>
+@import 'index.sass'
+.base-form-input-search
+	&__search-icon
+		width: 20px
+		color: $gray-70
+	&__close-icon
+		width: 10px !important
+		color: $gray-80
+		cursor: pointer
+</style>
diff --git a/src/components/BaseFormInputSearch/index.sass b/src/components/BaseFormInputSearch/index.sass
new file mode 100644
index 0000000..825b792
--- /dev/null
+++ b/src/components/BaseFormInputSearch/index.sass
@@ -0,0 +1,3 @@
+@import 'UiKit/styles/_colors.sass'
+@import 'UiKit/styles/_mixins.sass'
+
diff --git a/src/components/BaseFormInputSearch/index.ts b/src/components/BaseFormInputSearch/index.ts
new file mode 100644
index 0000000..06b3c8f
--- /dev/null
+++ b/src/components/BaseFormInputSearch/index.ts
@@ -0,0 +1,4 @@
+import BaseFormInputSearch from './BaseFormInputSearch.vue';
+
+export { BaseFormInputSearch };
+export default BaseFormInputSearch;
diff --git a/src/components/BaseFormRadio/BaseFormRadio.vue b/src/components/BaseFormRadio/BaseFormRadio.vue
index a0e1261..5a33f54 100644
--- a/src/components/BaseFormRadio/BaseFormRadio.vue
+++ b/src/components/BaseFormRadio/BaseFormRadio.vue
@@ -8,7 +8,7 @@ type FormRadioOption = {
 };
 
 const props = withDefaults(defineProps<{
-	modelValue: string | string[] | number[]
+	modelValue: string | string[] | number[] | boolean
 	options?: Record<string | number, unknown> | string[] | FormRadioOption[],
 	row?: boolean,
 	disabled?: boolean,
@@ -91,7 +91,7 @@ function getLabelValue(option: string | number | FormRadioOption) {
 					tabindex="1"
 					class="base-form-radio__input"
 					v-bind="$attrs"
-					@change="$emit('update:modelValue', $event.target.value)"
+					@change="$emit('update:modelValue', selectedOption);"
 				>
 				<label
 					:for="index"
@@ -104,7 +104,7 @@ function getLabelValue(option: string | number | FormRadioOption) {
 	</div>
 </template>
 
-<style lang="sass">
+<style lang="sass" scoped>
 @import 'index.sass'
 .base-form-radio
 	$root: &
diff --git a/src/components/BaseFormRadio/index.sass b/src/components/BaseFormRadio/index.sass
index 13f5d35..7583fa2 100644
--- a/src/components/BaseFormRadio/index.sass
+++ b/src/components/BaseFormRadio/index.sass
@@ -3,10 +3,10 @@
 
 $radio-input-size: 16px
 $radio-input-border: solid 1px $gray-40
-$radio-input-circle-color: $gray-60
+$radio-input-circle-color: $primary
 
-$radio-input-label-color: $black
-$radio-input-label-font-weight: 500
+$radio-input-label-color: $gray-80
+$radio-input-label-font-weight: 400
 $radio-input-label-font-family: 'Avenir'
 $radio-input-label-font-size: 16px
 
diff --git a/src/components/BaseFormSelect/BaseFormSelect.vue b/src/components/BaseFormSelect/BaseFormSelect.vue
index 3995f50..265e70e 100644
--- a/src/components/BaseFormSelect/BaseFormSelect.vue
+++ b/src/components/BaseFormSelect/BaseFormSelect.vue
@@ -226,6 +226,7 @@ function onSearch(searchString: string) {
 			position: absolute
 			top: 100%
 			width: 100%
+			z-index: 10
 	&__append
 		position: absolute
 		left: 15px
@@ -242,7 +243,7 @@ function onSearch(searchString: string) {
 		display: flex
 		align-items: center
 		justify-content: space-between
-		padding: 8px 15px
+		padding: 12.5px 12px
 		height: $select-height
 		.vs__selected-options
 			display: flex
@@ -259,16 +260,24 @@ function onSearch(searchString: string) {
 			outline: none
 			background: none
 			box-shadow: none
+			color: inherit
+			font-size: inherit
+			font-weight: inherit
+			font-family: inherit
+			line-height: inherit
 			width: 0
 			max-width: 100%
 			flex-grow: 1
 			z-index: 1
-			color: inherit
 			appearance: none
 			padding: 0
 			&::placeholder
 				color: $select-placeholder-color
-				line-height: 22px
+				font-size: inherit
+				font-weight: inherit
+				font-family: inherit
+				line-height: inherit
+				opacity: 1
 		.vs__open-indicator
 			background-image: url(./arrow.svg)
 			width: 16px
diff --git a/src/components/BaseFormTextarea/BaseFormTextarea.vue b/src/components/BaseFormTextarea/BaseFormTextarea.vue
index 98ef127..c2d64cd 100644
--- a/src/components/BaseFormTextarea/BaseFormTextarea.vue
+++ b/src/components/BaseFormTextarea/BaseFormTextarea.vue
@@ -42,12 +42,12 @@ defineEmits<{
 	</div>
 </template>
 
-<style lang="sass">
+<style lang="sass" scoped>
 @import 'index.sass'
 .base-form-textarea
 	color: $textarea-color
 	caret-color: $textarea-caret-color
-	background-color: white
+	background-color: $textarea-background-color
 	font-size: $textarea-font-size
 	line-height: $textarea-line-height
 	font-weight: $textarea-font-weight
@@ -75,7 +75,6 @@ defineEmits<{
 		line-height: inherit
 		background-color: transparent
 		width: 100% !important
-		min-height: 200px
 		position: relative
 		z-index: 2
 		padding: $textarea-padding
diff --git a/src/components/BaseFormTextarea/index.sass b/src/components/BaseFormTextarea/index.sass
index 4c3d8f1..8f05ef6 100644
--- a/src/components/BaseFormTextarea/index.sass
+++ b/src/components/BaseFormTextarea/index.sass
@@ -3,14 +3,15 @@
 
 $textarea-color: $black
 $textarea-caret-color: $black
-$textarea-font-size: 12px
-$textarea-line-height: 12px
-$textarea-font-weight: 600
+$textarea-font-size: 16px
+$textarea-line-height: 26px
+$textarea-font-weight: 400
 $textarea-font-family: 'Avenir'
 $textarea-border: solid 1px $gray-40
-$textarea-border-radius: 6px
+$textarea-border-radius: 2px
 $textarea-height: 100%
 $textarea-padding: 12px
-$textarea-border-focus-color: $gray-50
+$textarea-border-focus-color: $primary
 $textarea-border-error-color: $red
-$textarea-placeholder-color: $gray-50
+$textarea-placeholder-color: $gray-60
+$textarea-background-color: $gray-10
diff --git a/src/components/BaseModal/BaseModal.component.ts b/src/components/BaseModal/BaseModal.component.ts
new file mode 100644
index 0000000..a0dc791
--- /dev/null
+++ b/src/components/BaseModal/BaseModal.component.ts
@@ -0,0 +1,89 @@
+// eslint-disable-next-line object-curly-newline
+import { defineComponent, ref, PropType, onMounted, onBeforeUnmount } from 'vue';
+import { blockedBody, unBlockedBody } from './blocked-body.js';
+
+
+export type IWdModalBase = InstanceType<typeof Component>;
+
+const listeners = {
+  list: [] as Array<(event: KeyboardEvent) => void>,
+
+  add(callback: (event: KeyboardEvent) => void) {
+    this.list.push(callback);
+
+    if (this.list.length === 1) {
+      window.addEventListener('keydown', this.listener);
+    }
+  },
+
+  remove(callback: (event: KeyboardEvent) => void) {
+    const index = this.list.indexOf(callback);
+    if (index > -1) this.list.splice(index, 1);
+
+    if (this.list.length === 0) {
+      window.addEventListener('keydown', this.listener);
+    }
+  },
+
+  listener: (event: KeyboardEvent) => {
+    // only last !!!
+    const callback = listeners.list[listeners.list.length - 1];
+    if (callback) callback(event);
+  },
+};
+
+const TIMEOUT = 200;
+
+const Component = defineComponent({
+  name: 'WdModalBase',
+  props: {
+    noBackdropDismiss: Boolean as PropType<boolean>,
+    noRouteDismiss: Boolean as PropType<boolean>,
+    noEscDismiss: Boolean as PropType<boolean>,
+    maximized: Boolean as PropType<boolean>,
+  },
+  emits: ['close'],
+  setup(props, context) {
+    const isActive = ref(true);
+
+    const onClose = (...args: unknown[]) => {
+      isActive.value = false;
+      setTimeout(() => {
+        context.emit('close', ...args);
+      }, TIMEOUT);
+    };
+
+    const onCloseBackdrop = () => {
+      if (props.noBackdropDismiss) return;
+      onClose();
+    };
+
+    if (!props.noEscDismiss) {
+      const closeOnEsc = (event: KeyboardEvent) => {
+        // eslint-disable-next-line no-underscore-dangle
+        if (event.keyCode === 27) {
+          onClose();
+        }
+      };
+
+      onMounted(() => {
+        listeners.add(closeOnEsc);
+      });
+
+      onBeforeUnmount(() => {
+        listeners.remove(closeOnEsc);
+      });
+    }
+
+    onMounted(() => blockedBody());
+    onBeforeUnmount(() => unBlockedBody());
+
+    return {
+      isActive,
+      onClose,
+      onCloseBackdrop,
+    };
+  },
+});
+
+export default Component;
diff --git a/src/components/BaseModal/BaseModal.vue b/src/components/BaseModal/BaseModal.vue
new file mode 100644
index 0000000..d0c9146
--- /dev/null
+++ b/src/components/BaseModal/BaseModal.vue
@@ -0,0 +1,86 @@
+<template>
+  <transition
+    name="transition-fade"
+    appear
+  >
+    <div class="wd-modal-base">
+      <div
+        class="wd-modal-base__backdrop"
+        :class="{ 'is-backdrop-close': !noBackdropDismiss }"
+        @click="onCloseBackdrop"
+      />
+
+      <transition
+        name="transition-fade"
+        appear
+      >
+        <div
+          v-if="isActive"
+          class="wd-modal-base__wrapper"
+          :class="{ 'is-maximized': maximized }"
+        >
+          <div class="wd-modal-base__container">
+            <slot>
+              the content
+            </slot>
+          </div>
+        </div>
+      </transition>
+    </div>
+  </transition>
+</template>
+
+<script lang="ts" src="./BaseModal.component.ts"></script>
+
+<style lang="sass" scoped>
+@import 'index.sass'
+.wd-modal-base
+  $root: &
+
+  position: fixed
+  top: 0
+  left: 0
+  z-index: 11000
+  display: table
+  width: 100%
+  height: 100%
+
+  &__backdrop
+    position: absolute
+    top: 0
+    right: 0
+    bottom: 0
+    left: 0
+    background: rgba(18, 22, 31, 0.40)
+
+    &.is-backdrop-close
+      cursor: pointer
+
+    .app-modal-root + .app-modal-root &
+      background-color: transparent
+
+  &__wrapper
+    display: flex
+    flex-wrap: wrap
+    align-items: center
+    justify-content: center
+    width: 100vw
+    height: calc(var(--vh, 1vh) * 100)
+    padding: 50px 0
+    overflow: auto
+
+    @media screen and (max-width: 767px)
+      padding: 0
+
+    &.is-maximized
+      padding: 0
+      #{$root}__container
+        width: 100%
+        height: 100%
+
+  &__container
+    position: relative
+
+    @media screen and (max-width: 767px)
+      width: 100%
+</style>
diff --git a/src/components/BaseModal/BaseModalLayout.vue b/src/components/BaseModal/BaseModalLayout.vue
new file mode 100644
index 0000000..9ea638a
--- /dev/null
+++ b/src/components/BaseModal/BaseModalLayout.vue
@@ -0,0 +1,309 @@
+<script lang="ts" setup>
+import BaseButton from 'UiKit/components/BaseButton/BaseButton.vue';
+
+defineProps({
+  title: String,
+  titleBold: Boolean,
+  titleLeft: Boolean,
+  subtitle: String,
+  headerLined: Boolean,
+  fullWidthHeader: Boolean,
+  circle: Boolean,
+  dark: Boolean,
+  footerUp: Boolean,
+  footerLined: Boolean,
+  contentNoPadding: Boolean,
+  closable: {
+    type: Boolean,
+    default: true,
+  },
+  mobileFullScreen: {
+    type: Boolean,
+    default: true,
+  },
+  fullScreen: Boolean,
+});
+
+defineEmits(['close']);
+</script>
+
+<template>
+  <div
+    :class="[{
+      'is-circle': circle,
+      'is-dark': dark,
+      'is-mobile-full-screen': mobileFullScreen,
+      'is--full-screen': fullScreen,
+    }, $attrs.class]"
+    :style="$attrs.style"
+    class="wd-modal-layout"
+  >
+
+    <BaseButton
+      v-if="closable"
+      size="large"
+      variant="link"
+      icon-only
+      class="wd-modal-layout__close"
+      data-testid="close-button"
+      @click="$emit('close')"
+    >
+      <img
+        v-svg-inline
+        src="@/assets/images/icons/close.svg"
+        class="wd-modal-layout__close-icon"
+        alt="modal layout close icon"
+        @click="$emit('close')"
+      >
+    </BaseButton>
+    <header
+      :class="{
+        'is-lined': headerLined,
+        'is-full-width': fullWidthHeader,
+        'is-left': titleLeft,
+      }"
+      class="wd-modal-layout__header"
+    >
+      <slot name="prepend-header" />
+      <div
+        v-if="circle"
+        class="wd-modal-layout__circle"
+      />
+      <slot name="header">
+        <div class="wd-modal-layout__header-inner">
+          <h3
+            v-if="title"
+            :class="{ 'is-bold': titleBold }"
+            class="wd-modal-layout__title"
+            data-testid="modal-title"
+            v-text="title"
+          />
+          <h4
+            v-if="subtitle"
+            class="wd-modal-layout__subtitle"
+            data-testid="modal-subtitle"
+            v-text="subtitle"
+          />
+        </div>
+      </slot>
+    </header>
+
+    <main
+      class="wd-modal-layout__main"
+      :class="{
+        'no-grow': footerUp,
+        'no-padding': contentNoPadding,
+      }"
+    >
+      <slot>
+        the content
+      </slot>
+    </main>
+
+    <footer
+      :class="{
+        'is-lined': footerLined,
+        'is-lined-mobile': headerLined,
+      }"
+      class="wd-modal-layout__footer"
+    >
+      <slot name="footer" />
+    </footer>
+  </div>
+</template>
+
+<style lang="sass" scoped>
+@import 'index.sass'
+.wd-modal-layout
+  $root: &
+
+  display: flex
+  flex-direction: column
+  padding-bottom: 15px
+  color: $black
+  background: $white
+  position: relative
+
+  &.is--full-screen
+    width: 100%
+    min-height: 100%
+
+  &__header
+    display: flex
+    padding: 8px 8px 0px 8px
+    align-items: flex-start
+    gap: 10px
+    width: 100%
+    justify-content: space-between
+
+    &.is-lined
+      border-bottom-color: $gray-10
+
+    &.is-full-width
+      margin: 0
+
+    &:not(.is-left)
+      text-align: center
+
+  &__close
+    position: absolute !important
+    right: 8px
+    top: 8px
+
+  @media screen and (max-width: 767px)
+    &.is-mobile-full-screen
+      width: 100vw
+      height: 100%
+      min-height: calc(var(--vh, 1vh) * 100)
+
+    &:not(.is-mobile-full-screen)
+      width: calc(100% - 32px)
+      margin: 0 auto
+      border-radius: 40px
+
+    &__header
+      #{$root}.is-mobile-full-screen &
+        padding: 30px 15px 20px 15px
+
+      #{$root}:not(.is-mobile-full-screen) &
+        padding: 30px 15px 0 15px
+
+      &.is-full-width
+        padding: 30px 0 20px 0
+        margin-top: 50px
+
+    &__main
+      padding: 10px 15px 0 15px
+
+    &__footer
+      padding: 20px 15px 10px 15px
+
+  @media screen and (min-width: 767px)
+    width: 500px
+    border-radius: 2px
+
+    &__header
+      display: flex
+      padding: 8px 8px 0px 8px
+      align-items: flex-start
+      gap: 10px
+      align-self: stretch
+
+    &__main
+      padding: 0 30px
+
+    &__footer
+      padding: 10px 0
+      margin: 0 30px
+
+    &.is-circle
+      background: transparent
+
+      &::before
+        position: absolute
+        top: 95px
+        left: 0
+        z-index: 1
+        width: 100%
+        height: calc(100% - 95px)
+        content: ""
+        background: $white
+        border-bottom-right-radius: 37px
+        border-bottom-left-radius: 37px
+
+      #{$root}__main,
+      #{$root}__footer
+        position: relative
+        z-index: 2
+
+      #{$root}__close
+        z-index: 2
+        display: none
+
+        @media screen and (max-width: 767px)
+          display: block
+
+    #{$root}__circle
+      position: absolute
+      top: 0
+      left: 0
+      z-index: 1
+      width: 500px
+      height: 95px
+      margin: 0 auto
+      overflow: hidden
+      border-top-left-radius: 37px
+      border-top-right-radius: 37px
+
+      &::before
+        position: absolute
+        top: -50px
+        left: 198px
+        z-index: -1
+        width: 105px
+        height: 105px
+        content: ""
+        border-radius: 50%
+        box-shadow: 0 0 0 9999px $white
+
+      &::after
+        position: absolute
+        top: 0
+        left: 0
+        z-index: -1
+        width: 100%
+        height: 100%
+        content: ""
+
+  &__header-inner
+    width: 100%
+
+  &__footer
+    border-top: 1px solid transparent
+
+    &.is-lined
+      border-top-color: #1a327c
+
+    @media screen and (max-width: 767px)
+      &.is-lined-mobile
+        border-top-color: $gray-10
+
+  &__main
+    display: flex
+    flex-direction: column
+
+    &:not(.no-grow)
+      flex-grow: 1
+
+    &.no-padding
+      padding: 0
+
+  &__title
+    font-size: 24px
+    font-weight: 800
+    line-height: 34px
+
+    &.is-bold
+      font-size: 25px
+      font-weight: 700
+
+  &__subtitle
+    margin-bottom: 0
+    font-size: 14px
+    font-weight: 500
+    color: #798dca
+
+    @media screen and (min-width: 767px)
+      font-size: 16px
+
+  &__default-button
+    display: block
+    margin-top: 1rem
+
+  &.is-dark
+    color: #fff
+    background: linear-gradient(180deg, #13296d 0%, rgba(19, 41, 109, 1) 100%)
+
+    @media screen and (min-width: 767px)
+      border-radius: 37px
+</style>
diff --git a/src/components/BaseModal/blocked-body.ts b/src/components/BaseModal/blocked-body.ts
new file mode 100644
index 0000000..154d027
--- /dev/null
+++ b/src/components/BaseModal/blocked-body.ts
@@ -0,0 +1,55 @@
+
+// https://stackoverflow.com/a/13382873
+const getScrollbarWidth = () => {
+  const outer = document.createElement('div');
+  outer.style.visibility = 'hidden';
+  outer.style.overflow = 'scroll';
+  document.body.appendChild(outer);
+
+  const inner = document.createElement('div');
+  outer.appendChild(inner);
+
+  const scrollbarWidth = (outer.offsetWidth - inner.offsetWidth);
+
+  outer.parentNode?.removeChild(outer);
+
+  return scrollbarWidth;
+};
+
+
+const scrollbarVisible = (element: HTMLElement) => (
+  element.scrollHeight > element.clientHeight
+);
+
+
+// from https://css-tricks.com/prevent-page-scrolling-when-a-modal-is-open/
+
+let counter = 0;
+
+export const unBlockedBody = () => {
+  counter -= 1;
+
+  if (counter) return;
+  const { style } = document.body;
+  style.paddingRight = '';
+  style.overflow = '';
+  style.backgroundColor = '';
+};
+
+export const blockedBody = () => {
+  counter += 1;
+
+  if (counter === 1) {
+    const { style } = document.body;
+
+    if (scrollbarVisible(document.body)) {
+      const width = getScrollbarWidth();
+      style.paddingRight = `${width}px`;
+      style.backgroundColor = '#f1f4fc'; // 'whitesmoke';
+    }
+
+    style.overflow = 'hidden';
+  }
+
+  return () => unBlockedBody();
+};
diff --git a/src/components/BaseModal/index.sass b/src/components/BaseModal/index.sass
new file mode 100644
index 0000000..6b6f492
--- /dev/null
+++ b/src/components/BaseModal/index.sass
@@ -0,0 +1,2 @@
+@import 'UiKit/styles/_colors.sass'
+@import 'UiKit/styles/_global.sass'
diff --git a/src/components/BaseModal/index.ts b/src/components/BaseModal/index.ts
new file mode 100644
index 0000000..fcaecea
--- /dev/null
+++ b/src/components/BaseModal/index.ts
@@ -0,0 +1 @@
+export * from './useModal';
diff --git a/src/components/BaseModal/useModal.ts b/src/components/BaseModal/useModal.ts
new file mode 100644
index 0000000..89c82b1
--- /dev/null
+++ b/src/components/BaseModal/useModal.ts
@@ -0,0 +1,167 @@
+/* eslint-disable @typescript-eslint/unbound-method */
+/* eslint-disable vue/one-component-per-file */
+
+// eslint-disable-next-line object-curly-newline
+import {
+  App,
+  DefineComponent,
+  Component,
+  ComponentInternalInstance,
+  onBeforeUnmount,
+
+  createApp,
+  defineAsyncComponent,
+  getCurrentInstance,
+  h,
+} from 'vue';
+import { IWdModalBase } from './BaseModal.component';
+
+
+// From https://git.io/JlvW9
+function createChildApp(appCfg: Component, parentApp: App) {
+  const app = createApp(appCfg);
+
+  app.config.globalProperties = parentApp.config.globalProperties;
+
+  // @ts-ignore TODO: for reload
+  // eslint-disable-next-line no-underscore-dangle, @typescript-eslint/no-unused-vars
+  const { reload, ...appContext } = parentApp._context;
+  // eslint-disable-next-line no-underscore-dangle
+  Object.assign(app._context, appContext);
+
+  return app;
+}
+
+const WdModalBase = defineAsyncComponent(() => import(
+  './BaseModal.vue'
+));
+
+const MODAL_PARENT_KEY = '__modal_parent__';
+
+const useModalInner = <
+  IPropsData extends Record<string, unknown> = Record<string, unknown>,
+  IReturnData = boolean
+  >(
+    asyncComponent: DefineComponent | ReturnType<typeof defineAsyncComponent>,
+    modalPropsData: IWdModalBase['$props'],
+    defaultPopsData: Record<string, unknown>,
+    instance: ComponentInternalInstance,
+  ) => {
+  let isMounted = false;
+  let onCloseModal = (result?: IReturnData) => {
+    if (!isMounted) return;
+    // eslint-disable-next-line no-console
+    console.warn('[App warn]: empty onCloseModal', result);
+  };
+
+  const createAppModal = (
+    defaultPopsData_2: typeof defaultPopsData,
+    propsData: IPropsData,
+  ) => {
+    const appModal = createChildApp({
+      name: 'UnModal',
+      setup() {
+        const childProps = {
+          ...defaultPopsData_2,
+          ...propsData,
+          [MODAL_PARENT_KEY]: instance,
+          onClose: onCloseModal,
+        };
+
+        const component = asyncComponent as unknown as DefineComponent;
+        const getChildren = () => h(component, childProps);
+
+        return () => h(WdModalBase, {
+          ...modalPropsData,
+          onClose: onCloseModal,
+        }, { default: getChildren });
+      },
+    }, instance.appContext.app);
+
+    return appModal;
+  };
+
+  const show = (
+    propsData: IPropsData,
+  ) => {
+    // eslint-disable-next-line no-underscore-dangle
+    const parentNode = instance.appContext.app._container as HTMLElement;
+    const element = document.createElement('div');
+    element.classList.add('app-modal-root');
+    parentNode.appendChild(element);
+
+    return new Promise<IReturnData | undefined>((resolve) => {
+      const appModal = createAppModal(defaultPopsData, propsData);
+      isMounted = true;
+
+      onCloseModal = (result?: IReturnData) => {
+        try {
+          appModal.unmount();
+        } catch {
+          // eslint-disable-next-line no-empty
+        }
+
+        try {
+          element.parentNode?.removeChild(element);
+        } catch {
+          // eslint-disable-next-line no-empty
+        }
+
+        resolve(result);
+      };
+
+      appModal.mount(element);
+
+      // @ts-ignore TODO
+      // eslint-disable-next-line @typescript-eslint/no-use-before-define, no-underscore-dangle
+      result._appModal = appModal;
+    });
+  };
+
+  // on hook @vnode-before
+  onBeforeUnmount(() => {
+    onCloseModal();
+  }, instance);
+
+  const result = {
+    show,
+    // TODO: close modal by instance
+    hide: () => onCloseModal(),
+  };
+
+  return result;
+};
+
+export const useModal = <
+  IPropsData extends Record<string, unknown> = Record<string, unknown>,
+  IReturnData = boolean
+  >(
+    asyncComponent: DefineComponent | ReturnType<typeof defineAsyncComponent>,
+    modalPropsData: IWdModalBase['$props'] = {},
+    defaultPopsData: Record<string, unknown> = {},
+    parent: ComponentInternalInstance | null = null,
+  ) => {
+  let instance = (parent || getCurrentInstance()) as ComponentInternalInstance;
+
+  {
+    let parent2: ComponentInternalInstance | null = instance;
+    while (parent2) {
+      if (parent2?.attrs[MODAL_PARENT_KEY]) {
+        instance = parent2?.attrs[MODAL_PARENT_KEY] as ComponentInternalInstance;
+        break;
+      }
+      parent2 = parent2?.parent;
+    }
+  }
+
+  if (!instance) {
+    throw new Error('useModal: needs args.parent or use in hooks');
+  }
+
+  return useModalInner<IPropsData, IReturnData>(
+    asyncComponent,
+    modalPropsData,
+    defaultPopsData,
+    instance,
+  );
+};
diff --git a/src/components/BaseProgressBar/BaseProgressBar.vue b/src/components/BaseProgressBar/BaseProgressBar.vue
new file mode 100644
index 0000000..29fb1d1
--- /dev/null
+++ b/src/components/BaseProgressBar/BaseProgressBar.vue
@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+
+const props = defineProps({
+  total: {
+    type: Number,
+    default: 100,
+  },
+  current: {
+    type: Number,
+    required: true,
+    default: 0,
+  },
+});
+
+const progress = computed(() => {
+  const rawProgress = (props.current / props.total) * 100;
+  return parseFloat(rawProgress.toFixed(2));
+});
+</script>
+
+<template>
+  <section class="BaseProgressBar base-progressbar">
+    <div class="base-progressbar__top is--h5__title">
+      {{ progress }}% Funded
+    </div>
+    <div class="base-progressbar__progress">
+      <div class="base-progressbar__progress-bar" :style="{ width: progress + '%' }">
+      </div>
+    </div>
+  </section>
+</template>
+
+<style lang="sass" scoped>
+@import 'index.sass'
+.base-progressbar
+  width: 100%
+  display: flex
+  flex-direction: column
+  justify-content: flex-end
+  align-items: flex-start
+  gap: 8px
+  flex: 1 0 0
+
+  &__top
+    color: $secondary-dark
+
+  &__progress
+    display: flex
+    align-items: flex-end
+    align-self: stretch
+    height: 3px
+    flex: 1 0 0
+    border-radius: 2px
+    background: $gray-30
+
+  &__progress-bar
+    height: 3px
+    background: $secondary
+</style>
diff --git a/src/components/BaseProgressBar/index.sass b/src/components/BaseProgressBar/index.sass
new file mode 100644
index 0000000..6b6f492
--- /dev/null
+++ b/src/components/BaseProgressBar/index.sass
@@ -0,0 +1,2 @@
+@import 'UiKit/styles/_colors.sass'
+@import 'UiKit/styles/_global.sass'
diff --git a/src/components/BaseSkeleton/BaseSkeleton.vue b/src/components/BaseSkeleton/BaseSkeleton.vue
index 86889f6..3df927c 100644
--- a/src/components/BaseSkeleton/BaseSkeleton.vue
+++ b/src/components/BaseSkeleton/BaseSkeleton.vue
@@ -21,45 +21,29 @@ defineProps({
   />
 </template>
 
-<style lang="scss">
-.base-skeleton {
-  position: relative;
-  overflow: hidden;
-  background:
-    linear-gradient(
-      90deg,
-      rgba(207, 219, 255, 0.34) 0%,
-      rgba(235, 243, 255, 0.34) 35.42%,
-      rgba(203, 216, 255, 0.34) 100%
-    );
-  border-radius: 25px;
+<style lang="sass" scoped>
+@import 'index.sass'
+.base-skeleton
+  position: relative
+  overflow: hidden
+  background: linear-gradient( 90deg, rgba(207, 219, 255, 0.34) 0%, rgba(235, 243, 255, 0.34) 35.42%, rgba(203, 216, 255, 0.34) 100%)
+  border-radius: 25px
 
-  &::before {
-    position: absolute;
-    top: 0;
-    left: -100%;
-    display: block;
-    width: 100%;
-    height: 100%;
-    content: "";
-    background:
-      linear-gradient(
-        90deg,
-        rgba(207, 219, 255, 0.34) 0%,
-        rgba(235, 243, 255, 0.34) 35.42%,
-        rgba(203, 216, 255, 0.34) 100%
-      );
-    animation: load 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
-  }
+  &::before
+    position: absolute
+    top: 0
+    left: -100%
+    display: block
+    width: 100%
+    height: 100%
+    content: ""
+    background: linear-gradient( 90deg, rgba(207, 219, 255, 0.34) 0%, rgba(235, 243, 255, 0.34) 35.42%, rgba(203, 216, 255, 0.34) 100% )
+    animation: load 1s cubic-bezier(0.4, 0, 0.2, 1) infinite
 
-  @keyframes load {
-    from {
-      left: -100%;
-    }
+  @keyframes load
+    from
+      left: -100%
 
-    to {
-      left: 100%;
-    }
-  }
-}
+    to
+      left: 100%
 </style>
diff --git a/src/components/BaseSkeleton/index.sass b/src/components/BaseSkeleton/index.sass
new file mode 100644
index 0000000..6b6f492
--- /dev/null
+++ b/src/components/BaseSkeleton/index.sass
@@ -0,0 +1,2 @@
+@import 'UiKit/styles/_colors.sass'
+@import 'UiKit/styles/_global.sass'
diff --git a/src/components/BaseSpinner/BaseSpinner.vue b/src/components/BaseSpinner/BaseSpinner.vue
index aed2ce9..cb5bf45 100644
--- a/src/components/BaseSpinner/BaseSpinner.vue
+++ b/src/components/BaseSpinner/BaseSpinner.vue
@@ -70,7 +70,8 @@ const circleSizeAttrs = computed(() => {
   </transition>
 </template>
 
-<style lang="sass">
+<style lang="sass" scoped>
+@import 'index.sass'
 .spinner
 	position: absolute
 	width: 100%
diff --git a/src/components/BaseSpinner/index.sass b/src/components/BaseSpinner/index.sass
new file mode 100644
index 0000000..6b6f492
--- /dev/null
+++ b/src/components/BaseSpinner/index.sass
@@ -0,0 +1,2 @@
+@import 'UiKit/styles/_colors.sass'
+@import 'UiKit/styles/_global.sass'
diff --git a/src/components/BaseStepper/BaseStepper.vue b/src/components/BaseStepper/BaseStepper.vue
new file mode 100644
index 0000000..7840101
--- /dev/null
+++ b/src/components/BaseStepper/BaseStepper.vue
@@ -0,0 +1,159 @@
+<script lang="ts" setup>
+import { PropType, computed } from 'vue';
+import checkIcon from '@/assets/images/icons/check.svg';
+
+export interface Step {
+	title: string;
+	value: string;
+}
+
+const props = defineProps({
+	steps: Array as PropType<Step[]>,
+  	modelValue: {
+		type: Number,
+		required: true,
+	}
+});
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void;
+  (e: 'itemClick', value: string): void;
+}>();
+
+function onItemClick(step: Step, index: number) {
+  if (props.modelValue <= index) return;
+  emit('update:modelValue', step.value);
+  emit('itemClick', step.value);
+}
+</script>
+
+<template>
+	<div class="BaseStepper base-stepper">
+        <div
+			v-for="(step, index) in props.steps"
+			:key="step.value"
+			class="base-stepper__step"
+			:class="[{
+				'is--active': modelValue === index,
+				'is--completed': props.modelValue > index,
+				'is--last': (index + 1) === props.steps?.length,
+			}]"
+			@click="onItemClick(step, index)"
+		>
+		<slot
+			name="step"
+			:step="step"
+		>
+			<div class="base-stepper__step-point">
+				<div class="base-stepper__circle">
+					<img
+						v-if="modelValue > index"
+						v-svg-inline
+						:src="checkIcon"
+						alt="check icon"
+						class="base-stepper__check-icon"
+					/>
+				</div>
+			</div>
+			<div class="base-stepper__label">
+				<span class="base-stepper__label-step is--small">
+					Step {{ index + 1 }}
+				</span>
+				<span class="base-stepper__label-title is--h5__title">
+					{{ step.title }}
+				</span>
+			</div>
+		</slot>
+		</div>
+	</div>
+</template>
+
+<style lang="sass" scoped>
+@import 'index.sass'
+.base-stepper
+	$root: &
+
+	display: flex
+	flex-direction: column
+	justify-content: center
+	align-items: flex-start
+	border-radius: 2px
+
+	&__step
+		display: flex
+		height: 90px
+		align-items: flex-start
+		gap: 8px
+
+	&__step-point
+		display: flex
+		width: 24px
+		flex-direction: column
+		align-items: flex-start
+		gap: 8px
+		align-self: stretch
+		flex: 1 0 0
+		position: relative
+
+		&::after
+			content: ''
+			position: absolute
+			bottom: 0
+			height: calc(100% - 24px)
+			right: 50%
+			transform: translateX(-50%)
+			width: 1px
+			background: $gray-30
+
+	&__label
+		display: flex
+		flex-direction: column
+		align-items: flex-start
+
+	&__circle
+		display: flex
+		width: 24px
+		height: 24px
+		align-items: flex-start
+		gap: 10px
+		border-radius: 100%
+		border: 5px solid $gray-30
+
+	&__label-step
+		color: $gray-60
+
+	&__label-title 
+		color: $gray-80
+
+	&__check-icon
+		display: none
+
+	.is--last
+		#{$root}__step
+			height: auto
+
+		#{$root}__step-point
+			&::after
+				display: none
+
+	.is--active
+		#{$root}__circle
+			border-color: $primary
+		#{$root}__label-step
+			color: $primary
+
+	.is--completed
+		cursor: pointer
+
+		&:hover
+			#{$root}__label-step
+				color: $primary
+
+		#{$root}__circle
+			border-color: $primary
+			background: $primary
+			color: $white
+
+		#{$root}__check-icon
+			display: block
+</style>
diff --git a/src/components/BaseStepper/index.sass b/src/components/BaseStepper/index.sass
new file mode 100644
index 0000000..6b6f492
--- /dev/null
+++ b/src/components/BaseStepper/index.sass
@@ -0,0 +1,2 @@
+@import 'UiKit/styles/_colors.sass'
+@import 'UiKit/styles/_global.sass'
diff --git a/src/components/BaseTable/BaseTable.vue b/src/components/BaseTable/BaseTable.vue
index f2a9c35..ed8d22a 100644
--- a/src/components/BaseTable/BaseTable.vue
+++ b/src/components/BaseTable/BaseTable.vue
@@ -1,10 +1,18 @@
 <script lang="ts" setup="">
+import { computed } from 'vue';
 
-withDefaults(defineProps<{
+const props = withDefaults(defineProps<{
 	fixedHeader?: boolean;
 	height?: string,
+	size: 'large' | 'small'
 }>(), {
 	height: '100%',
+	size: 'large',
+});
+
+const btnClasses = computed(() => {
+	let classes = `is--size-${props.size} `;
+	return classes;
 });
 
 </script>
@@ -12,7 +20,7 @@ withDefaults(defineProps<{
 <template>
 	<div
 		class="BaseTable base-table"
-		:class="{'is--fixed-header': fixedHeader}"
+		:class="[btnClasses, { 'is--fixed-header': fixedHeader }]"
 		:style="{'height': height}"
 	>
 		<table class="base-table__table">
@@ -44,15 +52,16 @@ withDefaults(defineProps<{
 	:deep(thead)
 		th
 			background: $table-thead-background-color
-			+font(500)
+			color: $table-tbody-th-color
 
-	:deep(td),
 	:deep(th)
-		font-size: $table-th-td-font-size
-		line-height: $table-th-td-line-height
-		padding: $table-th-td-padding
-		+font(400)
+		font-size: $table-th-font-size
+		line-height: $table-th-line-height
+		padding: $table-th-padding
+		+font(800)
 		text-align: left
+		@media screen and (max-width: 768)
+			padding: $table-th-padding-mobile
 
 	:deep(tbody)
 		border-style: none !important
@@ -64,6 +73,13 @@ withDefaults(defineProps<{
 			td
 				background: $table-tbody-tr-td-background-color
 				+mt(.3s)
+				font-size: $table-td-font-size
+				line-height: $table-td-line-height
+				padding: $table-td-padding
+				+font(400)
+				text-align: left
+				@media screen and (max-width: 768)
+					padding: $table-td-padding-mobile
 			&:hover
 				td
 					background: $table-tbody-td-hover-background-color
diff --git a/src/components/BaseTable/index.sass b/src/components/BaseTable/index.sass
index eb22511..0deae18 100644
--- a/src/components/BaseTable/index.sass
+++ b/src/components/BaseTable/index.sass
@@ -5,9 +5,17 @@ $table-thead-background-color: $white
 $table-tbody-tr-border-bottom-color: $gray-20
 $table-tbody-tr-td-background-color: $white
 $table-tbody-td-background-color: $white
-$table-tbody-td-color: $gray-60
+$table-tbody-td-color: $gray-80
+$table-tbody-th-color: $gray-60
 $table-tbody-td-hover-background-color: $gray-10
 
-$table-th-td-font-size: 14px
-$table-th-td-line-height: 19.6px
-$table-th-td-padding: 12px
+$table-td-font-size: 16px
+$table-td-line-height: 26px
+$table-td-padding: 16px
+$table-td-padding-small: 12px
+$table-td-padding-mobile: 12px
+$table-th-font-size: 14px
+$table-th-line-height: 21px
+$table-th-padding: 16px
+$table-th-padding-mobile: 12px
+$table-th-padding-small: 12px
diff --git a/src/components/BaseTag/BaseTag.vue b/src/components/BaseTag/BaseTag.vue
index f2fcbc8..27fb2f4 100644
--- a/src/components/BaseTag/BaseTag.vue
+++ b/src/components/BaseTag/BaseTag.vue
@@ -57,16 +57,16 @@ const tagClasses = computed(() => {
 	$root: &
 	&.is--size-small
 		padding: $base-tag-small-padding
+		color: $base-tag-small-color
 		#{$root}__text
 			font-weight: $base-tag-small-font-weight
-			color: $base-tag-small-color
 	&.is--round
 		border-radius: $base-tag-round-border-radius
 	&.is--strong-text
 		#{$root}__text
 			font-weight: $base-tag-font-weight
 	&.is--white-text
-		color: $base-tag-white-text-color
+		color: $base-tag-white-text-color !important
 	&__text
 		font-size: $base-tag-font-size
 		font-weight: $base-tag-font-weight
diff --git a/src/components/BaseTimeline/BaseTimeline.vue b/src/components/BaseTimeline/BaseTimeline.vue
new file mode 100644
index 0000000..037ed5e
--- /dev/null
+++ b/src/components/BaseTimeline/BaseTimeline.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+  defineProps({
+    title: {
+      type: String,
+      required: false,
+    },
+  })
+</script>
+
+<template>
+  <div class="BaseTimeline base-timeline">
+    <div class="base-timeline__content">
+      <h3
+        v-if="title"
+        class="base-timeline__title"
+      >
+        {{ title }}
+      </h3>
+      <slot />
+    </div>
+  </div>
+</template>
+
+<style lang="sass" scoped>
+@import 'index.sass'
+.base-timeline
+  position: relative
+
+  &__title
+    margin-bottom: 20px
+    color: $black
+
+  &__content
+    width: 100%
+    max-width: 740px
+    margin: 108px auto 0
+    position: relative
+    @media screen and (max-width: 767px)
+      margin: 80px auto 0
+</style>
diff --git a/src/components/BaseTimeline/BaseTimelineCard.vue b/src/components/BaseTimeline/BaseTimelineCard.vue
new file mode 100644
index 0000000..71bd31d
--- /dev/null
+++ b/src/components/BaseTimeline/BaseTimelineCard.vue
@@ -0,0 +1,168 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import BaseTimelineCircle from './BaseTimelineCircle.vue';
+
+interface Props {
+  type?: 'active' | 'complete' | 'not-complete'
+  variant?: 'primary' | 'inner' | 'highlight' | 'inner-highlight'
+  title?: string
+  duration?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  type: 'active',
+  variant: 'primary',
+})
+
+const btnClasses = computed(() => {
+  let classes = `is--type-${props.type} `;
+  classes += `is--variant-${props.variant} `;
+  return classes;
+});
+</script>
+
+<template>
+  <div
+    class="BaseTimelineCard base-timeline-card is--card is--body"
+    :class="[btnClasses]"
+  >
+    <div
+      v-if="title"
+      class="base-timeline-card__header"
+    >
+      <BaseTimelineCircle
+        v-if="(variant === 'inner') || (variant === 'inner-highlight')"
+        :type="(variant === 'inner') ? 'inner' : 'inner-highlight'"
+        class="base-timeline-card__circle"
+      />
+
+      <h4 class="base-timeline-card__title">
+        {{ title }}
+      </h4>
+
+      <div
+        v-if="duration"
+        class="base-timeline-card__duration"
+      >
+        <span class="base-timeline-card__duration-title is--small">
+          Duration:
+          <span class="base-timeline-card__duration-text is--h6__title">
+            {{ duration }}
+          </span>
+        </span>
+      </div>
+    </div>
+    <slot />
+  </div>
+</template>
+
+<style lang="sass" scoped>
+@import 'index.sass'
+.base-timeline-card
+  $root: &
+
+  flex-direction: column
+  padding: 40px !important
+  position: relative
+  color: $gray-80
+
+  &__duration-title
+    color: $black
+  &__duration-text
+    color: $primary
+
+  &__circle
+    position: absolute
+    left: 16px
+    top: 50px
+    @media screen and (max-width: 767px)
+      left: 10px
+
+  &__header
+    display: flex
+    flex-direction: row
+    justify-content: space-between
+    align-items: center
+    margin-bottom: 10px
+    padding-bottom: 15px
+    border-bottom: 1px dashed rgba(51,51,51,.1)
+    @media screen and (max-width: 767px)
+      flex-direction: column
+      justify-content: flex-start
+      align-items: flex-start
+
+  &__title
+    color: $black
+    @media screen and (max-width: 767px)
+      margin-bottom: 10px
+
+  &.is--variant-inner
+    margin-bottom: 32px
+    color: $gray-80
+    &::before // inner lines between cards
+      content: ""
+      position: absolute
+      left: 20px
+      bottom: -32px
+      width: 2px
+      height: 32px
+      background-color: $gray-30
+      @media screen and (max-width: 767px)
+        left: 15px
+
+    &:last-child
+      margin-bottom: 0
+      &::before
+        display: none
+
+  &.is--variant-inner-highlight
+    background-color: $primary-dark
+    color: $gray-10
+
+    &::before // inner lines between cards
+      content: ""
+      position: absolute
+      left: 20px
+      bottom: -32px
+      width: 2px
+      height: 32px
+      background-color: $gray-30
+      @media screen and (max-width: 767px)
+        left: 15px
+
+    #{$root}__title
+      color: $white
+
+    #{$root}__duration-title, 
+    #{$root}__duration-text
+      color: $white
+
+    #{$root}__header
+      border-color: $white
+
+    &:last-child
+      margin-bottom: 0
+      &::before
+        display: none
+
+  &.is--variant-highlight
+    background-color: $primary-dark
+    color: $gray-10
+
+    #{$root}__title
+      color: $gray-10
+
+    #{$root}__duration-title, 
+    #{$root}__duration-text
+      color: $white
+
+    #{$root}__header
+      border-color: $white
+
+  &.is--type-not-complete
+    opacity: 0.3
+  &.is--type-complete
+    background-color: $gray-10
+    border: 1px solid $gray-20
+    box-shadow: $box-shadow-small
+</style>
diff --git a/src/components/BaseTimeline/BaseTimelineCircle.vue b/src/components/BaseTimeline/BaseTimelineCircle.vue
new file mode 100644
index 0000000..0fbe56e
--- /dev/null
+++ b/src/components/BaseTimeline/BaseTimelineCircle.vue
@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import check from './assets/check.svg';
+
+interface Props {
+  type?: 'active' | 'inner' | 'not-complete' | 'complete' | 'highlight' | 'inner-ighlight'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  type: 'active',
+})
+
+const btnClasses = computed(() => {
+  let classes = `is--type-${props.type} `;
+  return classes;
+});
+</script>
+
+<template>
+  <div
+    class="BaseTimelineCircle base-timeline-circle"
+    :class="[btnClasses]"
+  >
+    <img
+      v-if="type === 'complete'"
+      :src="check"
+      alt="check icon"
+      class="base-timeline-circle__icon"
+    />
+  </div>
+</template>
+
+<style lang="sass" scoped>
+@import 'index.sass'
+.base-timeline-circle
+  $root: &
+
+  display: flex
+  justify-content: center
+  align-items: center
+  border-style: solid
+  gap: 10px
+  border-radius: 100%
+
+  &.is--type-inner
+    width: 9px
+    height: 9px
+    border-width: 3px
+    border-color: $primary
+
+  &.is--type-inner-highlight
+    width: 9px
+    height: 9px
+    border-width: 3px
+    border-color: $white
+
+  &.is--type-active
+    width: 24px
+    height: 24px
+    border-width: 5px
+    border-color: $primary
+  
+  &.is--type-not-complete
+    width: 24px
+    height: 24px
+    border-width: 5px
+    border-color: $gray-30
+  
+  &.is--type-complete
+    width: 24px
+    height: 24px
+    border-color: $primary
+    background-color: $primary
+
+  &.is--type-highlight
+    width: 24px
+    height: 24px
+    border-width: 5px
+    border-color: $primary
+
+    &::before
+      content: ''
+      width: 40px
+      height: 40px
+      border: 1px solid $primary
+      position: absolute
+      border-radius: 100%
+</style>
diff --git a/src/components/BaseTimeline/BaseTimelineItem.vue b/src/components/BaseTimeline/BaseTimelineItem.vue
new file mode 100644
index 0000000..78ecf13
--- /dev/null
+++ b/src/components/BaseTimeline/BaseTimelineItem.vue
@@ -0,0 +1,126 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import BaseTimelineCircle from './BaseTimelineCircle.vue';
+
+interface Props {
+  type?: 'active' | 'complete' | 'not-complete'
+  variant?: 'primary' | 'inner' | 'highlight'
+  circleType?: 'active' | 'not-complete' | 'complete' | 'highlight'
+  line?: 'regular' | 'hidden'
+  title?: string
+  duration?: string
+  active?: boolean
+  to?: [Boolean, Object],
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  type: 'active',
+  variant: 'primary',
+  circleType: 'active',
+  line: 'regular',
+})
+
+const btnClasses = computed(() => {
+  let classes = `is--type-${props.type} `;
+  classes += `is--variant-${props.variant} `;
+  classes += `is--circle-type-${props.circleType} `;
+  classes += `is--line-${props.line} `;
+  return classes;
+});
+</script>
+
+<template>
+  <div
+    class="BaseTimelineItem base-timeline-item"
+    :class="[btnClasses, { 'is--title': title }]"
+  >
+    <BaseTimelineCircle
+      :type="circleType"
+      class="base-timeline-item__circle"
+    />
+
+    <div
+      v-if="title"
+      class="base-timeline-item__step"
+    >
+      <component
+        :is="to ? 'router-link' : 'h6'"
+        :to="to"
+        class="step"
+      >
+        {{ title }}
+      </component>
+    </div>
+
+    <div
+      v-if="$slots.default"
+      class="items base-timeline-item__items"
+    >
+      <slot />
+    </div>
+  </div>
+</template>
+
+<style lang="sass" scoped>
+@import 'index.sass'
+.base-timeline-item
+  --top: 42px
+
+  $root: &
+
+  padding-bottom: 30px
+  position: relative
+  left: 0
+  top: 0
+  height: 100%
+  @media screen and (max-width: 767px)
+    padding-bottom: 35px
+    margin-left: 8px
+
+  &::before
+    content: ""
+    position: absolute
+    top: calc(var(--top) + 24px)
+    left: 11px
+    z-index: 1
+    width: 2px
+    height: calc(100% - 24px)
+    background-color: $gray-30
+
+  &.is--line-regular:last-child
+    &::before
+      display: none
+  &.is--line-hidden:last-child
+    &::before
+      background: linear-gradient($gray-30, rgba($gray-30, 0)) !important
+
+  &__items
+    margin-left: 50px
+
+  &__step
+    display: flex
+    flex-direction: row
+    align-items: center
+    position: relative
+    // margin-bottom: 15px
+    .step
+      font-weight: 800
+      font-size: 14px
+      line-height: 19px
+      letter-spacing: 2.5px
+      text-transform: uppercase
+      color: $black
+
+    a.step
+      &:hover
+        color: $primary
+
+  &__circle
+    top: var(--top)
+    position: absolute
+
+  &.is--circle-type-highlight
+    &::before
+      top: calc(var(--top) + 32px)
+      height: calc(100% - 32px)
+</style>
diff --git a/src/components/BaseTimeline/assets/check.svg b/src/components/BaseTimeline/assets/check.svg
new file mode 100644
index 0000000..0905853
--- /dev/null
+++ b/src/components/BaseTimeline/assets/check.svg
@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="check">
+<path id="Vector" d="M14 4.14539L13.4286 4.71681L6.95575 11.1896L6.3818 11.7636L5.81037 11.1922L2.57396 7.95575L2 7.3818L3.14539 6.23641L3.71681 6.80784L6.3818 9.47282L12.2832 3.57396L12.8546 3L14 4.14539Z" fill="white"/>
+</g>
+</svg>
diff --git a/src/components/BaseTimeline/index.sass b/src/components/BaseTimeline/index.sass
new file mode 100644
index 0000000..6b6f492
--- /dev/null
+++ b/src/components/BaseTimeline/index.sass
@@ -0,0 +1,2 @@
+@import 'UiKit/styles/_colors.sass'
+@import 'UiKit/styles/_global.sass'
diff --git a/src/components/BaseTooltip/BaseTooltip.vue b/src/components/BaseTooltip/BaseTooltip.vue
index d1e448f..96cfd0a 100644
--- a/src/components/BaseTooltip/BaseTooltip.vue
+++ b/src/components/BaseTooltip/BaseTooltip.vue
@@ -1,90 +1,37 @@
-<template>
-  <!-- eslint-disable vue/no-multiple-template-root -->
-
-  <slot
-    v-if="disabled"
-    name="activator"
-  >
-    <span
-      :style="$attrs.style"
-      :class="$attrs.class"
-      class="wd-tooltip__activator"
-      v-html="activatorText"
-    />
-  </slot>
-
-  <div
-    v-else
-    :class="[$attrs.class, {
-      'is-critical': critical,
-      'is-block': block,
-    }]"
-    :style="$attrs.style"
-    class="wd-tooltip"
-  >
-    <div
-      ref="activatorRef"
-      :class="{
-        'is-bordered': bordered,
-        'is-blue': blue,
-        'is-solid': solidBorder,
-      }"
-      class="wd-tooltip__activator"
-      @mouseenter="onMouseEnter"
-      @mouseleave="onMouseLeave"
-    >
-      <slot name="activator">
-        <span
-          class="wd-tooltip__activator"
-          v-html="activatorText"
-        />
-      </slot>
-    </div>
-
-    <div
-      ref="contentRef"
-      :class="[{
-        [side]: true,
-        'is-active': isActive,
-        'is-show': isShow,
-        'is-critical': critical,
-        'is-blue': blue,
-        'is-block': block,
-        'is-small-text': contentSmallText,
-      }, contentClass]"
-      :style="contentStyles"
-      :data-testid="isActive ? 'tooltip-active' : 'tooltip'"
-      class="wd-tooltip__content is--small"
-    >
-      <slot>
-        <span
-          data-testid="tooltip-content"
-          v-html="contentText"
-        />
-      </slot>
-
-      <slot name="content" />
-
-      <div
-        :style="arrowStyles"
-        class="wd-tooltip__arrow"
-      />
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
+<script lang="ts" setup>
 import {
-  PropType,
-  CSSProperties,
-  defineComponent,
-  ref,
-  computed,
-  nextTick,
-  onBeforeUnmount,
-  watch,
+  PropType, CSSProperties, ref, computed, nextTick,
+  onBeforeUnmount, watch,
 } from 'vue';
 
+const emit = defineEmits(['update:modelValue']);
+
+const props = defineProps({
+  critical: Boolean,
+  blue: Boolean,
+  modelValue: Boolean,
+  disabled: Boolean,
+  bordered: Boolean,
+  solidBorder: Boolean,
+  block: Boolean,
+  activatorText: String,
+  contentText: String,
+  contentClass: [Object, String, Array],
+  contentSmallText: Boolean,
+  bottom: Boolean,
+  contentWidth: {
+    type: String,
+  },
+  handler: {
+    type: String as PropType<HandlerTypes>,
+    default: HandlerTypes.hover,
+  },
+  contentMinWidth: {
+    type: String,
+    default: '240px',
+  },
+})
+
 
 const enum SideTypes {
   top = 'is-top',
@@ -145,255 +92,267 @@ const calculateArrowOffsetTop = (activator: HTMLElement, side: SideTypes) => {
   return activatorPos.top - 10;
 };
 
-export default defineComponent({
-  name: 'WdTooltip',
-  inheritAttrs: false,
-  props: {
-    critical: Boolean,
-    blue: Boolean,
-    modelValue: Boolean,
-    disabled: Boolean,
-    bordered: Boolean,
-    solidBorder: Boolean,
-    block: Boolean,
-    activatorText: String,
-    contentText: String,
-    contentClass: [Object, String, Array],
-    contentSmallText: Boolean,
-    bottom: Boolean,
-    contentWidth: {
-      type: String,
-    },
-    handler: {
-      type: String as PropType<HandlerTypes>,
-      default: HandlerTypes.hover,
-    },
-    contentMinWidth: {
-      type: String,
-      default: '240px',
-    },
-  },
-  emits: ['update:modelValue'],
-  setup(props, ctx) {
-    const activatorRef = ref<HTMLElement>();
-    const contentRef = ref<HTMLElement>();
-    const isActive = ref(false);
-    const isShow = ref(false);
-    const contentOffsetLeft = ref(0);
-    const contentOffsetTop = ref(0);
-    const arrowOffsetLeft = ref(0);
-    const arrowOffsetTop = ref(0);
-    const side = ref<SideTypes>(SideTypes.top);
-
-    const contentStyles = computed(() => {
-      const left = contentOffsetLeft.value && `${contentOffsetLeft.value}px`;
-      const top = contentOffsetTop.value && `${contentOffsetTop.value}px`;
-
-      const styles: CSSProperties = {
-        width: props.contentWidth,
-        minWidth: props.contentMinWidth,
-        left,
-        top,
-      };
-      return styles;
-    });
-
-    const arrowStyles = computed(() => {
-      const left = arrowOffsetLeft.value && `${arrowOffsetLeft.value}px`;
-      const top = arrowOffsetTop.value && `${arrowOffsetTop.value}px`;
-
-      const styles: CSSProperties = {
-        left,
-        top,
-      };
-      return styles;
-    });
-
-    const open = async () => {
-      isActive.value = true;
-      await nextTick();
-      if (!activatorRef.value || !contentRef.value) return;
-
-      document.body.appendChild(contentRef.value);
-      side.value = calculateSide(activatorRef.value, contentRef.value, props.bottom);
-      contentOffsetLeft.value = calculateOffsetLeft(activatorRef.value, contentRef.value);
-      contentOffsetTop.value = calculateOffsetTop(activatorRef.value, contentRef.value, side.value);
-      arrowOffsetLeft.value = calculateArrowOffsetLeft(activatorRef.value);
-      arrowOffsetTop.value = calculateArrowOffsetTop(activatorRef.value, side.value);
-      isShow.value = true;
-      ctx.emit('update:modelValue', true);
-    };
-
-    const close = () => {
-      if (contentRef.value && isShow.value) {
-        document.body.removeChild(contentRef.value);
-      }
-
-      isShow.value = false;
-      ctx.emit('update:modelValue', false);
-      isActive.value = isShow.value;
-    };
-
-    const onMouseEnter = () => {
-      if (props.handler === HandlerTypes.custom) return;
-      void open();
-    };
-
-    const onMouseLeave = () => {
-      if (props.handler === HandlerTypes.custom) return;
-      void close();
-    };
-
-    const onScroll = () => {
-      if (!isActive.value) return;
-      void open();
-    };
-
-    watch(() => props.modelValue, (value) => {
-      if (props.handler !== HandlerTypes.custom) return;
-
-      if (value) {
-        void open();
-      } else {
-        void close();
-      }
-    }, { immediate: true });
-
-    watch(() => props.handler, (value) => {
-      if (value !== HandlerTypes.custom) return;
-      void close();
-    }, { immediate: true });
-
-    watch(() => props.disabled, (value) => {
-      if (!value) return;
-      void close();
-    });
-
-    window.addEventListener('scroll', onScroll, { passive: true });
-
-    onBeforeUnmount(() => {
-      window.removeEventListener('scroll', onScroll);
-
-      if (contentRef.value && isShow.value) {
-        document.body.removeChild(contentRef.value);
-      }
-    });
-
-    return {
-      isActive,
-      isShow,
-      activatorRef,
-      contentRef,
-      contentStyles,
-      arrowStyles,
-      side,
-      onMouseEnter,
-      onMouseLeave,
-    };
-  },
+const activatorRef = ref<HTMLElement>();
+const contentRef = ref<HTMLElement>();
+const isActive = ref(false);
+const isShow = ref(false);
+const contentOffsetLeft = ref(0);
+const contentOffsetTop = ref(0);
+const arrowOffsetLeft = ref(0);
+const arrowOffsetTop = ref(0);
+const side = ref<SideTypes>(SideTypes.top);
+
+const contentStyles = computed(() => {
+  const left = contentOffsetLeft.value && `${contentOffsetLeft.value}px`;
+  const top = contentOffsetTop.value && `${contentOffsetTop.value}px`;
+
+  const styles: CSSProperties = {
+    width: props.contentWidth,
+    minWidth: props.contentMinWidth,
+    left,
+    top,
+  };
+  return styles;
 });
-</script>
 
-<style lang="scss">
-.wd-tooltip {
-  $root: &;
+const arrowStyles = computed(() => {
+  const left = arrowOffsetLeft.value && `${arrowOffsetLeft.value}px`;
+  const top = arrowOffsetTop.value && `${arrowOffsetTop.value}px`;
 
-  display: inline-flex;
+  const styles: CSSProperties = {
+    left,
+    top,
+  };
+  return styles;
+});
 
-  &.is-block {
-    display: block;
+const open = async () => {
+  isActive.value = true;
+  await nextTick();
+  if (!activatorRef.value || !contentRef.value) return;
+
+  document.body.appendChild(contentRef.value);
+  side.value = calculateSide(activatorRef.value, contentRef.value, props.bottom);
+  contentOffsetLeft.value = calculateOffsetLeft(activatorRef.value, contentRef.value);
+  contentOffsetTop.value = calculateOffsetTop(activatorRef.value, contentRef.value, side.value);
+  arrowOffsetLeft.value = calculateArrowOffsetLeft(activatorRef.value);
+  arrowOffsetTop.value = calculateArrowOffsetTop(activatorRef.value, side.value);
+  isShow.value = true;
+  emit('update:modelValue', true);
+};
+
+const close = () => {
+  if (contentRef.value && isShow.value) {
+    document.body.removeChild(contentRef.value);
   }
 
-  &__activator {
-    display: flex;
-    cursor: default;
+  isShow.value = false;
+  emit('update:modelValue', false);
+  isActive.value = isShow.value;
+};
 
-    &.is-bordered {
-      border-bottom: 1px dashed $gray-10;
-    }
+const onMouseEnter = () => {
+  if (props.handler === HandlerTypes.custom) return;
+  void open();
+};
 
-    &.is-solid.is-bordered {
-      border-bottom: 1px solid white;
-    }
-  }
+const onMouseLeave = () => {
+  if (props.handler === HandlerTypes.custom) return;
+  void close();
+};
+
+const onScroll = () => {
+  if (!isActive.value) return;
+  void open();
+};
 
-  &__arrow {
-    position: fixed;
-    z-index: 1;
-    width: 0;
-    height: 0;
-    border-color: $gray-10;
-    border-style: solid;
-    border-right-color: transparent;
-    border-left-color: transparent;
+watch(() => props.modelValue, (value) => {
+  if (props.handler !== HandlerTypes.custom) return;
+
+  if (value) {
+    void open();
+  } else {
+    void close();
   }
+}, { immediate: true });
+
+watch(() => props.handler, (value) => {
+  if (value !== HandlerTypes.custom) return;
+  void close();
+}, { immediate: true });
 
-  &__content {
-    position: fixed;
-    z-index: $wd-z-index-tooltip;
-    display: none;
-    padding: 8px;
-    /* Small */
-    box-shadow: $box-shadow-small;
-    border-radius: 2px;
-    background: $gray-10;
-    opacity: 0;
-    transition: opacity 0.3s;
-    color: $black;
-
-    h2, h3, h4, h5, h6 {
-      color: $white;
-    }
-
-    &.is-top {
-      #{$root}__arrow {
-        border-width: 5px 5px 0;
-        border-bottom-color: transparent;
-      }
-    }
-
-    &.is-bottom {
-      #{$root}__arrow {
-        border-width: 0 5px 5px;
-        border-top-color: transparent;
-      }
-    }
-
-    &.is-active {
-      display: block;
-    }
-
-    &.is-show {
-      opacity: 1;
-    }
-
-    &.is-critical {
-      color: $white;
-      background-color: $red;
-
-      #{$root}__arrow {
-        border-color: $red;
-        border-right-color: transparent;
-        border-left-color: transparent;
-      }
-    }
-
-    &.is-blue {
-      font-size: 13px;
-      color: $white;
-      background-color: #091844;
-
-      #{$root}__arrow {
-        border-color: #091844;
-        border-right-color: transparent;
-        border-left-color: transparent;
-      }
-    }
-
-    &.is-small-text {
-      font-size: 13px;
-      line-height: 19px;
-    }
+watch(() => props.disabled, (value) => {
+  if (!value) return;
+  void close();
+});
+
+window.addEventListener('scroll', onScroll, { passive: true });
+
+onBeforeUnmount(() => {
+  window.removeEventListener('scroll', onScroll);
+
+  if (contentRef.value && isShow.value) {
+    document.body.removeChild(contentRef.value);
   }
-}
+});
+</script>
+
+<template>
+  <!-- eslint-disable vue/no-multiple-template-root -->
+
+  <slot
+    v-if="disabled"
+    name="activator"
+  >
+    <span
+      :style="$attrs.style"
+      :class="$attrs.class"
+      class="wd-tooltip__activator"
+      v-html="activatorText"
+    />
+  </slot>
+
+  <div
+    v-else
+    :class="[$attrs.class, {
+      'is-critical': critical,
+      'is-block': block,
+    }]"
+    :style="$attrs.style"
+    class="wd-tooltip"
+  >
+    <div
+      ref="activatorRef"
+      :class="{
+        'is-bordered': bordered,
+        'is-blue': blue,
+        'is-solid': solidBorder,
+      }"
+      class="wd-tooltip__activator"
+      @mouseenter="onMouseEnter"
+      @mouseleave="onMouseLeave"
+    >
+      <slot name="activator">
+        <span
+          class="wd-tooltip__activator"
+          v-html="activatorText"
+        />
+      </slot>
+    </div>
+
+    <div
+      ref="contentRef"
+      :class="[{
+        [side]: true,
+        'is-active': isActive,
+        'is-show': isShow,
+        'is-critical': critical,
+        'is-blue': blue,
+        'is-block': block,
+        'is-small-text': contentSmallText,
+      }, contentClass]"
+      :style="contentStyles"
+      :data-testid="isActive ? 'tooltip-active' : 'tooltip'"
+      class="wd-tooltip__content is--small"
+    >
+      <slot>
+        <span
+          data-testid="tooltip-content"
+          v-html="contentText"
+        />
+      </slot>
+
+      <slot name="content" />
+
+      <div
+        :style="arrowStyles"
+        class="wd-tooltip__arrow"
+      />
+    </div>
+  </div>
+</template>
+
+<style lang="sass" scoped>
+@import 'index.sass'
+.wd-tooltip
+  $root: &
+
+  display: inline-flex
+
+  &.is-block
+    display: block
+
+  &__activator
+    display: flex
+    cursor: default
+
+    &.is-bordered
+      border-bottom: 1px dashed $gray-10
+
+    &.is-solid.is-bordered
+      border-bottom: 1px solid white
+
+  &__arrow
+    position: fixed
+    z-index: 1
+    width: 0
+    height: 0
+    border-color: $gray-10
+    border-style: solid
+    border-right-color: transparent
+    border-left-color: transparent
+
+  &__content
+    position: fixed
+    z-index: 1000
+    display: none
+    padding: 8px
+    box-shadow: $box-shadow-small
+    border-radius: 2px
+    background: $gray-10
+    opacity: 0
+    transition: opacity 0.3s
+    color: $black
+
+    h2, h3, h4, h5, h6
+      color: $white
+
+    &.is-top
+      #{$root}__arrow
+        border-width: 5px 5px 0
+        border-bottom-color: transparent
+
+    &.is-bottom
+      #{$root}__arrow
+        border-width: 0 5px 5px
+        border-top-color: transparent
+
+    &.is-active
+      display: block
+
+    &.is-show
+      opacity: 1
+
+    &.is-critical
+      color: $white
+      background-color: $red
+
+      #{$root}__arrow
+        border-color: $red
+        border-right-color: transparent
+        border-left-color: transparent
+
+    &.is-blue
+      font-size: 13px
+      color: $white
+      background-color: #091844
+
+      #{$root}__arrow
+        border-color: #091844
+        border-right-color: transparent
+        border-left-color: transparent
+
+    &.is-small-text
+      font-size: 13px
+      line-height: 19px
 </style>
diff --git a/src/components/BaseTooltip/index.sass b/src/components/BaseTooltip/index.sass
new file mode 100644
index 0000000..6b6f492
--- /dev/null
+++ b/src/components/BaseTooltip/index.sass
@@ -0,0 +1,2 @@
+@import 'UiKit/styles/_colors.sass'
+@import 'UiKit/styles/_global.sass'
diff --git a/src/components/BaseUploader/BaseUploader.vue b/src/components/BaseUploader/BaseUploader.vue
new file mode 100644
index 0000000..73ef2c6
--- /dev/null
+++ b/src/components/BaseUploader/BaseUploader.vue
@@ -0,0 +1,240 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import BaseButton from 'UiKit/components/BaseButton/BaseButton.vue';
+import UploadIcon from 'UiKit/components/BaseUploader/upload.svg';
+import FileIcon from 'UiKit/components/BaseUploader/file.svg';
+
+defineProps({
+  isError: Boolean,
+  isDisabled: Boolean,
+});
+const emit = defineEmits(['update:files', 'remove']);
+
+const filesUploadError = ref('');
+const isDragging = ref(false);
+const refFiles = ref<HTMLInputElement>();
+
+const allFiles = ref<File[]>([]);
+
+const onFileChange = () => {
+  const fileList = refFiles.value?.files as FileList;
+  const incomingFiles = Array.from(fileList);
+  const maxAllowedSize = 100 * 1024 * 1024; // 100MB
+  filesUploadError.value = '';
+
+  const fileExist = allFiles.value.some((r) => incomingFiles.some(
+    (file) => file.name === r.name && file.size === r.size,
+  ));
+
+  if (fileExist) {
+    filesUploadError.value = 'New upload contains files that already exist';
+    return;
+  }
+
+  if (incomingFiles.length + allFiles.value.length > 5) {
+    filesUploadError.value = 'You are only allowed to upload a maximum of 5 files at a time';
+    setTimeout(() => {
+      filesUploadError.value = '';
+    }, 4000);
+    return;
+  }
+
+  incomingFiles.forEach((file: File) => {
+    if (file.size >= maxAllowedSize) {
+      filesUploadError.value = 'Please upload a smaller file size. Limit 100MB';
+    }
+  });
+
+  if (filesUploadError.value) return;
+
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+  allFiles.value = [...allFiles.value, ...incomingFiles];
+  emit('update:files', allFiles.value);
+};
+
+const triggerFileInput = () => {
+  refFiles.value?.click();
+};
+
+const dragover = () => {
+  isDragging.value = true;
+};
+
+const dragleave = () => {
+  isDragging.value = false;
+};
+
+const drop = (e: DragEvent) => {
+  const files = e.dataTransfer?.files as FileList;
+  if (refFiles.value) refFiles.value.files = files;
+  onFileChange();
+  isDragging.value = false;
+};
+
+const removeFile = (index: number) => {
+  allFiles.value.splice(index, 1);
+  filesUploadError.value = '';
+  emit('remove', index);
+};
+</script>
+
+<template>
+    <div class="BaseUploader base-uploader">
+      <div
+        class="base-uploader__dropzone"
+        :class="{
+          'is--dragging': isDragging,
+          'is--error': filesUploadError || isError,
+          'is--disabled': isDisabled,
+          'is--files': allFiles?.length > 0,
+        }"
+        @dragover.prevent="dragover"
+        @dragleave.prevent="dragleave"
+        @drop.prevent="drop"
+      >
+        <input
+          id="file-control"
+          ref="refFiles"
+          name="file"
+          multiple
+          type="file"
+          accept="application/pdf"
+          data-testid="accreditation-input-file"
+          @change="onFileChange"
+        >
+
+        <label
+          class="base-uploader__label"
+          for="file-control"
+          :class="{ disabled: isDisabled }"
+        >
+          Drag & drop files here or click to upload
+        </label>
+
+        <BaseButton
+          size="small"
+          variant="outlined"
+          icon-placement="left"
+          class="base-uploader__file-button"
+          @click="triggerFileInput"
+        >
+          <img
+            v-svg-inline
+            :src="UploadIcon"
+            alt="upload icon"
+          />
+          Upload
+        </BaseButton>
+        <div
+          v-if="allFiles?.length"
+          class="base-uploader__preview"
+        >
+          <div
+            v-for="(file, index) in allFiles"
+            :key="file.name"
+            class="base-uploader__preview-card"
+          >
+            <div class="base-uploader__preview-card-info">
+              <img
+                v-svg-inline
+                :src="FileIcon"
+                alt="file icon"
+                class="base-uploader__preview-card-icon"
+              />
+              <span class="base-uploader__preview-card-name is--small">
+                {{ file.name }}
+              </span>
+            </div>
+            <div
+              class="base-uploader__preview-card-remove"
+              title="Remove file"
+              @click="removeFile(index)"
+            >
+              <b>×</b>
+            </div>
+          </div>
+        </div>
+      </div>
+      <p
+        v-if="filesUploadError"
+        class="base-uploader__error is--small"
+      >
+        {{ filesUploadError }}
+      </p>
+      <div class="base-uploader__comment is--small">
+        Supported files: pdf. Maximum size 100mb.
+      </div>
+    </div>
+</template>
+
+<style lang="sass" scoped>
+@import 'index.sass'
+.base-uploader
+  $root: &
+
+  &__dropzone
+    display: flex
+    padding: 32px 12px
+    flex-direction: column
+    justify-content: center
+    align-items: center
+    gap: 12px
+    align-self: stretch
+    border-radius: 2px
+    border: 1px dashed $gray-40
+    background: $gray-10
+    &.is--dragging
+      border-color: $primary
+
+    &.is--error
+      border-color: $red
+
+    &.is--files
+      padding: 32px 12px 12px 12px
+
+    &.is--disabled
+      opacity: 0.3
+
+  input[type="file"]
+    opacity: 0
+    overflow: hidden
+    position: absolute
+    width: 1px
+    height: 1px
+
+  &__label
+    color: $gray-60
+
+  &__file-button
+    #{$root}__dropzone.is--files &
+      margin-bottom: 32px
+
+  &__preview
+    width: 100%
+
+  &__preview-card
+    width: 100%
+    display: flex
+    border-top: 1px solid $gray-20
+    padding: 12px
+    align-items: center
+    gap: 12px
+    justify-content: space-between
+
+  &__preview-card-info
+    display: flex
+    align-items: center
+    gap: 12px
+    color: $gray-80
+
+  &__preview-card-remove
+    cursor: pointer
+
+  &__comment
+    color: $gray-70
+    margin-top: 4px
+
+  &__error
+    margin-top: 4px
+    color: $red
+</style>
diff --git a/src/components/BaseUploader/file.svg b/src/components/BaseUploader/file.svg
new file mode 100644
index 0000000..e2d2669
--- /dev/null
+++ b/src/components/BaseUploader/file.svg
@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="file">
+<path id="Vector" d="M9.25 2H4V14H13V5.75H9.25V2ZM10 2V5H13L10 2ZM6.625 8H10.375H10.75V8.75H10.375H6.625H6.25V8H6.625ZM6.625 9.5H10.375H10.75V10.25H10.375H6.625H6.25V9.5H6.625ZM6.625 11H10.375H10.75V11.75H10.375H6.625H6.25V11H6.625Z" fill="currentColor"/>
+</g>
+</svg>
diff --git a/src/components/BaseUploader/index.sass b/src/components/BaseUploader/index.sass
new file mode 100644
index 0000000..6b6f492
--- /dev/null
+++ b/src/components/BaseUploader/index.sass
@@ -0,0 +1,2 @@
+@import 'UiKit/styles/_colors.sass'
+@import 'UiKit/styles/_global.sass'
diff --git a/src/components/BaseUploader/upload.svg b/src/components/BaseUploader/upload.svg
new file mode 100644
index 0000000..94046fb
--- /dev/null
+++ b/src/components/BaseUploader/upload.svg
@@ -0,0 +1,5 @@
+<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="upload">
+<path id="Vector" d="M9.28307 2.61172L8.67404 2L8.06501 2.61172L4.61565 6.06108L4.00393 6.67011L5.22468 7.89086L5.83371 7.28183L7.8117 5.30384V9.6883V10.5506H9.53638V9.6883V5.30384L11.5144 7.28183L12.1234 7.89086L13.3441 6.67011L12.7351 6.06108L9.28576 2.61172H9.28307ZM4.36234 12.2753H3.5V14H4.36234H12.9857H13.8481V12.2753H12.9857H4.36234Z" fill="currentColor"/>
+</g>
+</svg>
diff --git a/src/components/common/CardCheckmarked/CardCheckmarked.vue b/src/components/common/CardCheckmarked/CardCheckmarked.vue
new file mode 100644
index 0000000..8536073
--- /dev/null
+++ b/src/components/common/CardCheckmarked/CardCheckmarked.vue
@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import CheckedIcon from './assets/check.svg';
+
+
+export interface ICardCheckmarked {
+  title: string;
+  description: string;
+}
+
+defineProps({
+  title: String,
+  description: String,
+  noCard: Boolean,
+  dark: Boolean,
+});
+</script>
+
+<template>
+  <div
+    class="CardCheckmarked card-checkmarked"
+    :class="{ 'is--no-card': noCard, 'is--dark': dark }"
+  >
+    <div class="card-checkmarked__top">
+      <div class="card-checkmarked__icon-wrap">
+        <img
+          v-svg-inline
+          :src="CheckedIcon"
+          alt="checked icon"
+          class="card-checkmarked__icon"
+        >
+      </div>
+      <span class="is--h4__title">
+        {{ title }}
+      </span>
+    </div>
+    <div
+      v-if="description"
+      class="card-checkmarked__bottom"
+    >
+      {{ description }}
+    </div>
+  </div>
+</template>
+
+<style lang="sass" scoped>
+@import 'index.sass'
+.card-checkmarked
+  $root: &
+
+  display: flex
+  flex-direction: column
+  align-items: flex-start
+  gap: 8px
+  align-self: stretch
+  &:not(.is--no-card)
+    border-radius: 2px
+    border: 1px solid $gray-20
+    background: $gray-10
+    padding: 20px
+
+  &__top
+    display: flex
+    align-items: center
+    gap: 8px
+    align-self: stretch
+
+    @media screen and (max-width: 767px)
+      align-items: flex-start
+
+  &__icon
+    width: 16px
+    height: auto
+    color: $secondary-dark
+
+  &__icon-wrap
+    display: flex
+    padding: 4px
+    align-items: center
+    gap: 10px
+    border-radius: 50px
+    box-shadow: $box-shadow-small
+    background-color: $secondary-light
+
+    #{$root}.is--dark &
+      background-color: transparent
+      border: 1px solid $secondary
+      padding: 3px
+
+  &__bottom
+    opacity: 0.9
+    color: $gray-80
+    #{$root}.is--dark &
+      color: $gray-10
+</style>
diff --git a/src/components/common/CardCheckmarked/assets/check.svg b/src/components/common/CardCheckmarked/assets/check.svg
new file mode 100644
index 0000000..b12af60
--- /dev/null
+++ b/src/components/common/CardCheckmarked/assets/check.svg
@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="check">
+<path id="Vector" d="M14 4.14539L13.4286 4.71681L6.95575 11.1896L6.3818 11.7636L5.81037 11.1922L2.57396 7.95575L2 7.3818L3.14539 6.23641L3.71681 6.80784L6.3818 9.47282L12.2832 3.57396L12.8546 3L14 4.14539Z" fill="#36BE83"/>
+</g>
+</svg>
diff --git a/src/components/common/CardCheckmarked/index.sass b/src/components/common/CardCheckmarked/index.sass
new file mode 100644
index 0000000..6b6f492
--- /dev/null
+++ b/src/components/common/CardCheckmarked/index.sass
@@ -0,0 +1,2 @@
+@import 'UiKit/styles/_colors.sass'
+@import 'UiKit/styles/_global.sass'
diff --git a/src/components/common/CardCheckmarked/types.ts b/src/components/common/CardCheckmarked/types.ts
new file mode 100644
index 0000000..95fc97b
--- /dev/null
+++ b/src/components/common/CardCheckmarked/types.ts
@@ -0,0 +1,6 @@
+
+
+export interface ICardCheckmarked {
+  title: string;
+  description: string;
+}
diff --git a/src/components/common/SliderSwiper/SliderSwiper.vue b/src/components/common/SliderSwiper/SliderSwiper.vue
new file mode 100644
index 0000000..0c18376
--- /dev/null
+++ b/src/components/common/SliderSwiper/SliderSwiper.vue
@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { Navigation } from 'swiper/modules';
+import { Swiper } from 'swiper/vue';
+
+defineProps({
+  breakpoints: {
+    type: Object,
+    default: {
+      767: {
+        slidesPerView: 2,
+        spaceBetween: 30,
+      },
+    }
+  }
+})
+
+const modules = [Navigation];
+
+</script>
+
+<template>
+  <Swiper
+    :modules="modules"
+    :space-between="20"
+    navigation
+    :slides-per-view="1"
+    :breakpoints="breakpoints"
+    class="swiper-container SliderSwiper slider-swiper"
+  >
+    <slot />
+  </Swiper>
+</template>
+// scoped cannot add
+<style lang="sass">
+@import 'index.sass'
+.slider-swiper
+  display: flex
+  flex-direction: row
+  position: relative
+
+  @media screen and (max-width: 767px)
+    margin-top: 55px
+
+  .swiper-wrapper
+    display: flex
+
+.swiper-button-prev,
+.swiper-button-next
+  position: absolute
+  right: 0
+  top: -87px
+  width: 48px
+  height: 48px
+  z-index: 2
+  cursor: pointer
+  padding: 12px
+  transition: all 0.3s ease
+  &.swiper-button-disabled
+    opacity: 0.3
+    pointer-events: none
+
+  &:hover
+    background-color: $primary-light
+    transition: all 0.3s ease
+
+.swiper-button-prev
+  right: 51px
+  background-image: url("UiKit/assets/arrow-left-primary.svg")
+  background-repeat: no-repeat
+  background-size: 20px
+  background-position: center
+
+.swiper-button-next
+  right: -3px
+  background-image: url("UiKit/assets/arrow-right-primary.svg")
+  background-repeat: no-repeat
+  background-size: 20px
+  background-position: center
+</style>
diff --git a/src/components/common/SliderSwiper/index.sass b/src/components/common/SliderSwiper/index.sass
new file mode 100644
index 0000000..6b6f492
--- /dev/null
+++ b/src/components/common/SliderSwiper/index.sass
@@ -0,0 +1,2 @@
+@import 'UiKit/styles/_colors.sass'
+@import 'UiKit/styles/_global.sass'
diff --git a/src/components/common/SliderWithPaginationAutoPlay/SliderWithPaginationAutoPlay.vue b/src/components/common/SliderWithPaginationAutoPlay/SliderWithPaginationAutoPlay.vue
new file mode 100644
index 0000000..e35e441
--- /dev/null
+++ b/src/components/common/SliderWithPaginationAutoPlay/SliderWithPaginationAutoPlay.vue
@@ -0,0 +1,114 @@
+<script setup lang="ts">
+import {
+  ref, onBeforeUnmount, onMounted, nextTick, PropType, watch,
+} from 'vue';
+
+interface ISliderWithPaginationAutoPlay {
+  id: number;
+}
+
+const props = defineProps({
+  slider: {
+    type: Array as PropType<ISliderWithPaginationAutoPlay[]>,
+    required: true,
+  },
+  autoplay: {
+    type: Boolean,
+    default: true,
+  },
+  activecolor: {
+    type: String,
+    default: '#004FFF',
+  },
+});
+
+let intervalId: NodeJS.Timeout = null;
+const itemCount = props.slider?.length;
+const activeElementId = ref(1);
+const active = ref({});
+
+const setActiveElement = () => {
+  active.value = props.slider.find((item) => item.id === activeElementId.value);
+};
+const setAutoPlay = () => {
+  if (itemCount) {
+    intervalId = setInterval(() => {
+      if (activeElementId.value < itemCount) activeElementId.value += 1;
+      else activeElementId.value = 1;
+      setActiveElement();
+    }, 6000);
+  }
+};
+
+const changeSlide = (index: number) => {
+  clearInterval(intervalId);
+  activeElementId.value = index; // Update the active element
+  if (props.autoplay) setAutoPlay();
+};
+
+watch(() => activeElementId.value, () => {
+  setActiveElement();
+}, { immediate: true });
+
+onMounted(async () => {
+  setActiveElement();
+  await nextTick();
+  if (props.autoplay) setAutoPlay();
+});
+
+onBeforeUnmount(() => {
+  clearInterval(intervalId);
+});
+</script>
+
+<template>
+  <div class="SliderWithPaginationAutoPlay slider-with-pagination-auto-play">
+    <slot v-bind="active" />
+    <div class="slider-with-pagination-auto-play__pagination">
+      <div
+        v-for="item in slider"
+        :key="item.id"
+        class="slider-with-pagination-auto-play__pagination-item-wrap"
+        @click="changeSlide(item.id)"
+      >
+        <div
+          class="slider-with-pagination-auto-play__pagination-item"
+          :class="{ 'is--active': item.id === activeElementId }"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="sass" scoped>
+@import 'index.sass'
+.slider-with-pagination-auto-play
+  position: relative
+
+  &__pagination
+    display: flex
+    flex-direction: row
+    gap: 4px
+    justify-content: center
+    margin-top: 25px
+
+  &__pagination-item
+    width: 31px
+    height: 2px
+    background-color: $gray-30
+
+    &.is--active
+      background-color: v-bind(activecolor)
+
+  &__pagination-item-wrap
+    padding: 9px 0
+    cursor: pointer
+
+.fade-enter-active,
+.fade-leave-active
+  transition: opacity 0.5s ease
+
+.fade-enter-from,
+.fade-leave-to
+  opacity: 0
+</style>
diff --git a/src/components/common/SliderWithPaginationAutoPlay/index.sass b/src/components/common/SliderWithPaginationAutoPlay/index.sass
new file mode 100644
index 0000000..6b6f492
--- /dev/null
+++ b/src/components/common/SliderWithPaginationAutoPlay/index.sass
@@ -0,0 +1,2 @@
+@import 'UiKit/styles/_colors.sass'
+@import 'UiKit/styles/_global.sass'
diff --git a/src/components/common/WhatOurClientsSay/WhatOurClientsSay.vue b/src/components/common/WhatOurClientsSay/WhatOurClientsSay.vue
new file mode 100644
index 0000000..45b9749
--- /dev/null
+++ b/src/components/common/WhatOurClientsSay/WhatOurClientsSay.vue
@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import WhatOurClientsSaySlider, { IWhatOurClientsSaySlider } from './WhatOurClientsSaySlider.vue';
+import { PropType } from 'vue';
+
+defineProps({
+  title: String,
+  text: String,
+  slider: Array as PropType<IWhatOurClientsSaySlider[]>,
+});
+</script>
+
+<template>
+  <div class="WhatOurClientsSay what-our-clients-say">
+    <div class="wd-container what-our-clients-say__container">
+      <div class="what-our-clients-say__left">
+        <WhatOurClientsSaySlider
+          :slider="slider"
+        />
+      </div>
+      <div class="what-our-clients-say__right">
+        <div class="what-our-clients-say__content">
+          <h2 class="what-our-clients-say__title">
+            {{ title }}
+          </h2>
+          <p class="what-our-clients-say__text is--subheading-2">
+            {{ text }}
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="sass" scoped>
+@import 'index.sass'
+.what-our-clients-say
+
+  &__container
+    display: flex
+    align-items: center
+    gap: 80px
+    align-self: stretch
+    @media screen and (max-width: 767px)
+      flex-direction: column-reverse
+      justify-content: center
+      align-items: flex-start
+      gap: 60px
+
+  &__left
+    display: flex
+    flex-direction: column
+    align-items: center
+    gap: 8px
+    width: 49%
+    @media screen and (max-width: 767px)
+      width: 100%
+
+  &__right
+    width: 44%
+    display: flex
+    flex-direction: column
+    align-items: flex-start
+    flex: 1 0 0
+    @media screen and (max-width: 767px)
+      width: 100%
+
+  &__title
+    margin-bottom: 10px
+</style>
diff --git a/src/components/common/WhatOurClientsSay/WhatOurClientsSaySlider.vue b/src/components/common/WhatOurClientsSay/WhatOurClientsSaySlider.vue
new file mode 100644
index 0000000..3c8b159
--- /dev/null
+++ b/src/components/common/WhatOurClientsSay/WhatOurClientsSaySlider.vue
@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import { PropType } from 'vue';
+import SliderWithPaginationAutoPlay from 'UiKit/components/common/SliderWithPaginationAutoPlay/SliderWithPaginationAutoPlay.vue';
+
+export interface IWhatOurClientsSaySlider {
+  id: number;
+  text1: string;
+  author1: string;
+  text2: string;
+  author2: string;
+}
+
+defineProps({
+  slider: Array as PropType<IWhatOurClientsSaySlider[]>,
+});
+
+</script>
+
+<template>
+  <SliderWithPaginationAutoPlay
+    v-slot="active"
+    :slider="slider"
+    :autoplay="false"
+    active-color="#F1AF32"
+  >
+      <div
+        class="what-our-clients-say-slider__item is--card"
+      >
+        <div class="what-our-clients-say-slider__item-card">
+          <transition
+            name="fade"
+            mode="out-in"
+          >
+          <div :key="active.id" v-bind="active">
+            <p :key="active.id" class="what-our-clients-say-slider__text">
+              {{ active?.text1 }}
+            </p>
+            <div :key="active.id" class="what-our-clients-say-slider__author is--h5__title">
+              {{ active?.author1 }}
+            </div>
+          </div>
+          </transition>
+        </div>
+        <div class="what-our-clients-say-slider__item-card">
+          <transition
+            name="fade"
+            mode="out-in"
+          >
+          <div :key="active.id" v-bind="active">
+            <p :key="active.id" class="what-our-clients-say-slider__text">
+              {{ active?.text2 }}
+            </p>
+            <div :key="active.id" class="what-our-clients-say-slider__author is--h5__title">
+              {{ active?.author2 }}
+            </div>
+          </div>
+          </transition>
+        </div>
+      </div>
+  </SliderWithPaginationAutoPlay>
+</template>
+
+<style lang="sass" scoped>
+@import 'index.sass'
+.what-our-clients-say-slider
+
+  &__item
+    display: flex
+    flex-direction: column
+    justify-content: center
+    align-items: flex-start
+    gap: 8px
+    align-self: stretch
+    top: 0
+    left: 0
+    width: 100%
+
+    &.is--active
+      position: relative
+      transition: opacity 3s ease
+
+  &__text
+    color: $gray-80
+    font-style: italic
+
+  &__item-card
+    display: flex
+    padding: 20px
+    align-self: stretch
+    flex-direction: column
+    border-radius: 2px
+    background: $yellow-light
+    @media screen and (min-width: 767px)
+      height: 196px
+
+.fade-enter-active,
+.fade-leave-active
+  transition: opacity 0.5s ease
+
+.fade-enter-from,
+.fade-leave-to
+  opacity: 0
+
+.transition-translate-right
+  &-enter-active,
+  &-leave-active
+    transition: transform 0.2s ease
+
+  &-enter-from,
+  &-leave-to
+    transform: translateX(100%)
+</style>
diff --git a/src/components/common/WhatOurClientsSay/index.sass b/src/components/common/WhatOurClientsSay/index.sass
new file mode 100644
index 0000000..6b6f492
--- /dev/null
+++ b/src/components/common/WhatOurClientsSay/index.sass
@@ -0,0 +1,2 @@
+@import 'UiKit/styles/_colors.sass'
+@import 'UiKit/styles/_global.sass'
diff --git a/src/components/common/WhatOurClientsSay/utils.ts b/src/components/common/WhatOurClientsSay/utils.ts
new file mode 100644
index 0000000..5752fe3
--- /dev/null
+++ b/src/components/common/WhatOurClientsSay/utils.ts
@@ -0,0 +1,39 @@
+
+export const WhatOurClientsSayTitle = 'What Our Clients Have to Say';
+export const WhatOurClientsSayText = 'From small businesses to large enterprises, our software solutions have helped many clients'
+  + 'streamline their operations, boost productivity, and achieve their goals.';
+
+export const WhatOurClientsSaySlider = [
+  {
+    id: 1,
+    text1: '“The development work delivered by Webdevelop PRO completely exceeded the '
+      + 'client’s expectations for the project and enabled them to successfully launch '
+      + 'and maintain their platform. Their team is dedicated to the long-term quality '
+      + 'of what they create and put effort into meeting all deadlines.”',
+    author1: 'Ken Staut, Head of Corporate Development at Yieldstreet',
+    text2: '“Outstanding partnership with Webdevelop. Exceptional full-stack expertise '
+      + 'tailored to our crypto needs. On-time delivery, cost-efficient, and superb '
+      + 'post-launch support. A crucial asset for our growth. Highly recommend for any complex project.”',
+    author2: 'Howard Krieger, CEO at Unfederal Reserve',
+  },
+  {
+    id: 2,
+    text1: '“Webdevelop PRO help us to build platform from scratch, affordably and efficiently. '
+      + 'Their approach ensured that tech solutions perfectly aligned with our operational needs. Their '
+      + 'helped  us to allocate resources smartly. A transformative partnership we highly recommend.”',
+    author1: 'Leon Stiel, Head of Equities Risk Technology at Millennium',
+    text2: '“High-quality tech solutions at great value. Made complex tech simple for us, boosting '
+      + 'our retail operations. A game-changer in quality-to-cost ratio.”',
+    author2: 'Ulrich Kratz, Co-Founder & CEO unybrands',
+  },
+  {
+    id: 3,
+    text1: '“Exceptional full-stack capabilities enabled rapid project completion. Their end-to-end '
+      + 'solution saved time, letting us focus on AI innovations. Essential partner for accelerated growth.”',
+    author1: 'Ryan Medlin, Speechlab.ai Head of Engineering',
+    text2: '“As a result of Webdevelop PRO’s work, I saw an improvement in page load time and a reduction in '
+      + 'the bounce rate. Team was quick to act, understanding, and innovative. They brought great ideas to '
+      + 'the table that added value to the project.”',
+    author2: 'Rick Richman, CEO at FirePie ',
+  },
+];
diff --git a/src/helpers/blocked-body.ts b/src/helpers/blocked-body.ts
new file mode 100644
index 0000000..154d027
--- /dev/null
+++ b/src/helpers/blocked-body.ts
@@ -0,0 +1,55 @@
+
+// https://stackoverflow.com/a/13382873
+const getScrollbarWidth = () => {
+  const outer = document.createElement('div');
+  outer.style.visibility = 'hidden';
+  outer.style.overflow = 'scroll';
+  document.body.appendChild(outer);
+
+  const inner = document.createElement('div');
+  outer.appendChild(inner);
+
+  const scrollbarWidth = (outer.offsetWidth - inner.offsetWidth);
+
+  outer.parentNode?.removeChild(outer);
+
+  return scrollbarWidth;
+};
+
+
+const scrollbarVisible = (element: HTMLElement) => (
+  element.scrollHeight > element.clientHeight
+);
+
+
+// from https://css-tricks.com/prevent-page-scrolling-when-a-modal-is-open/
+
+let counter = 0;
+
+export const unBlockedBody = () => {
+  counter -= 1;
+
+  if (counter) return;
+  const { style } = document.body;
+  style.paddingRight = '';
+  style.overflow = '';
+  style.backgroundColor = '';
+};
+
+export const blockedBody = () => {
+  counter += 1;
+
+  if (counter === 1) {
+    const { style } = document.body;
+
+    if (scrollbarVisible(document.body)) {
+      const width = getScrollbarWidth();
+      style.paddingRight = `${width}px`;
+      style.backgroundColor = '#f1f4fc'; // 'whitesmoke';
+    }
+
+    style.overflow = 'hidden';
+  }
+
+  return () => unBlockedBody();
+};
diff --git a/src/styles/_fonts.sass b/src/styles/_fonts.sass
index 0b9189e..266c029 100644
--- a/src/styles/_fonts.sass
+++ b/src/styles/_fonts.sass
@@ -177,6 +177,7 @@ h6
   text-decoration: underline
   transition: 0.3s all  ease-in-out
   color: $primary
+  cursor: pointer
   &:hover
     text-decoration: none
 .is--link-2
@@ -186,10 +187,21 @@ h6
   text-decoration: underline
   transition: 0.3s all  ease-in-out
   color: $primary
+  cursor: pointer
   &:hover
     text-decoration: none
 .is--h1__mobile
   +font(900)
   font-size: 38px
   font-style: normal
-  line-height: 57px
\ No newline at end of file
+  line-height: 57px
+.is--link-regular
+  +font(800)
+  font-size: 14px
+  line-height: 21px
+  text-decoration: underline
+  transition: 0.3s all  ease-in-out
+  color: $primary
+  cursor: pointer
+  &:hover
+    text-decoration: none
\ No newline at end of file
diff --git a/src/styles/_global.sass b/src/styles/_global.sass
index 21e54d2..2f9b0a3 100644
--- a/src/styles/_global.sass
+++ b/src/styles/_global.sass
@@ -11,4 +11,9 @@ $box-shadow-large: 0 6px 7px -4px rgba(18, 22, 31, 0.05), 0 10px 32px 4px rgba(1
   border-radius: 2px
   background: $white
   box-shadow: $box-shadow-medium
-  
\ No newline at end of file
+  
+.is--table-cell
+  display: flex
+  padding: 16px
+  align-items: center
+  gap: 16px
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 9953a98..1e39351 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1439,16 +1439,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@dafcoe/vue-collapsible-panel@npm:^0.2.0":
-  version: 0.2.0
-  resolution: "@dafcoe/vue-collapsible-panel@npm:0.2.0"
-  dependencies:
-    "@types/uuid": ^8.3.0
-    uuid: ^8.3.2
-  checksum: 470017c8058a4e4cdc40b0d2e42593ec0cf3177707977809a21c9f5fd34590600f8518fb0abbf50c533837b57362da20662efafbd924e9944e74b0c6bc485572
-  languageName: node
-  linkType: hard
-
 "@discoveryjs/json-ext@npm:^0.5.3":
   version: 0.5.7
   resolution: "@discoveryjs/json-ext@npm:0.5.7"
@@ -3442,6 +3432,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@swoga/vue-collapsible-panel@npm:^0.3.0":
+  version: 0.3.0
+  resolution: "@swoga/vue-collapsible-panel@npm:0.3.0"
+  dependencies:
+    "@types/uuid": ^8.3.0
+    uuid: ^8.3.2
+  checksum: a47725f514ff1c488040992c5ac5245a0bd7d714792f0ac6e588e0480c932b587d3769dd0fed42b990b819573d4f65aebed53e3aa5463f2666c8d48c58fc2a4c
+  languageName: node
+  linkType: hard
+
 "@testing-library/dom@npm:^9.0.0":
   version: 9.3.4
   resolution: "@testing-library/dom@npm:9.3.4"
@@ -3822,6 +3822,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/web-bluetooth@npm:^0.0.20":
+  version: 0.0.20
+  resolution: "@types/web-bluetooth@npm:0.0.20"
+  checksum: d6d61da683e876e8995ac57e2e5229d829d0f536deb3568d4430898fc626ebcb7e065fe7f655ac6a5205702f7f7049e6335abe689cd5291241eef6e39e8a4371
+  languageName: node
+  linkType: hard
+
 "@types/yargs-parser@npm:*":
   version: 21.0.3
   resolution: "@types/yargs-parser@npm:21.0.3"
@@ -4016,6 +4023,34 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@vueuse/core@npm:^10.9.0":
+  version: 10.9.0
+  resolution: "@vueuse/core@npm:10.9.0"
+  dependencies:
+    "@types/web-bluetooth": ^0.0.20
+    "@vueuse/metadata": 10.9.0
+    "@vueuse/shared": 10.9.0
+    vue-demi: ">=0.14.7"
+  checksum: 6d26660e4e88e2e6b34f84cb832d919d296a198e6c7f8ef93fb5d0442b53ba3872c617c1144190328992b44dde33a8e249b3182ac35128d460a457488a6df940
+  languageName: node
+  linkType: hard
+
+"@vueuse/metadata@npm:10.9.0":
+  version: 10.9.0
+  resolution: "@vueuse/metadata@npm:10.9.0"
+  checksum: e381d3134e1a5965e157503ddb1187f671316386ab0c779d3fc1b9c91d6658086c417414f4642554382ac43fd800d7565f5f25824b678433f937a917e931387e
+  languageName: node
+  linkType: hard
+
+"@vueuse/shared@npm:10.9.0":
+  version: 10.9.0
+  resolution: "@vueuse/shared@npm:10.9.0"
+  dependencies:
+    vue-demi: ">=0.14.7"
+  checksum: e6fc1e04aa63ead37694b5543cacd8c1b55ade5ce7416699302a4db5e5c3c083b7ecda9156445e07a477eb86664740d368a03584b55859dbe0cf0abbec3e21ab
+  languageName: node
+  linkType: hard
+
 "@yarnpkg/esbuild-plugin-pnp@npm:^3.0.0-rc.10":
   version: 3.0.0-rc.15
   resolution: "@yarnpkg/esbuild-plugin-pnp@npm:3.0.0-rc.15"
@@ -4373,7 +4408,6 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "base-components@workspace:."
   dependencies:
-    "@dafcoe/vue-collapsible-panel": ^0.2.0
     "@storybook/addon-essentials": ^7.6.17
     "@storybook/addon-interactions": ^7.6.17
     "@storybook/addon-links": ^7.6.17
@@ -4381,13 +4415,16 @@ __metadata:
     "@storybook/testing-library": ^0.2.2
     "@storybook/vue3": ^7.6.17
     "@storybook/vue3-vite": ^7.6.17
+    "@swoga/vue-collapsible-panel": ^0.3.0
     "@vitejs/plugin-vue": ^5.0.4
     "@vue/compiler-core": ^3.4.19
+    "@vueuse/core": ^10.9.0
     maska: ^2.1.11
     react: ^18.2.0
     react-dom: ^18.2.0
     sass: ^1.71.1
     storybook: ^7.6.17
+    swiper: ^11.1.1
     typescript: ^5.3.3
     vite: ^5.1.4
     vite-svg-loader: ^5.1.0
@@ -9445,6 +9482,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"swiper@npm:^11.1.1":
+  version: 11.1.1
+  resolution: "swiper@npm:11.1.1"
+  checksum: fb3b12034f94036a32c3d229cc2a630d281d56100ec78f948a69d7a49892f6c744291e2a2c6ed89c0058dcb8718c24cc8535194c4a1e42f4de4f59c961472ee1
+  languageName: node
+  linkType: hard
+
 "synchronous-promise@npm:^2.0.15":
   version: 2.0.17
   resolution: "synchronous-promise@npm:2.0.17"
@@ -10027,6 +10071,22 @@ vue-component-type-helpers@latest:
   languageName: node
   linkType: hard
 
+"vue-demi@npm:>=0.14.7":
+  version: 0.14.7
+  resolution: "vue-demi@npm:0.14.7"
+  peerDependencies:
+    "@vue/composition-api": ^1.0.0-rc.1
+    vue: ^3.0.0-0 || ^2.6.0
+  peerDependenciesMeta:
+    "@vue/composition-api":
+      optional: true
+  bin:
+    vue-demi-fix: bin/vue-demi-fix.js
+    vue-demi-switch: bin/vue-demi-switch.js
+  checksum: 6819b1cd52355047ae899d7cdfa32f1b00e806e6c67455601d33ab0226f3172c48a5f6c3d547cb7fa32925b3b7100448bf18f98ea4d5f8bc4b9d28ae005a805d
+  languageName: node
+  linkType: hard
+
 "vue-docgen-api@npm:^4.40.0":
   version: 4.75.1
   resolution: "vue-docgen-api@npm:4.75.1"