diff --git a/packages/docs/src/locales/en/en.json b/packages/docs/src/locales/en/en.json
index 8b13a0dff7..6175fea20c 100644
--- a/packages/docs/src/locales/en/en.json
+++ b/packages/docs/src/locales/en/en.json
@@ -1148,12 +1148,15 @@
     },
     "VaTimePicker": {
       "props": {
-        "ampm": "Use 12-hours time format.",
+        "ampm": "Use 12-hours time format",
         "hoursFilter": "Function that allows you to hide some specific hours",
         "minutesFilter": "Function that allows you to hide some specific minutes",
         "secondsFilter": "Function that allows you to hide some specific seconds",
         "view": "View specifying which columns will be shown",
-        "periodUpdatesModelValue": "If user will change period it will automatically update model value. You can turn off it and am/pm switch will only change view."
+        "periodUpdatesModelValue": "If user will change period it will automatically update model value. You can turn off it and am/pm switch will only change view.",
+        "framed": "Adds borders to center of the picker",
+        "cellHeight": "Height of the time cell",
+        "visibleCellsCount": "Count of time cells to display"
       },
       "events": {},
       "methods": {},
@@ -3957,6 +3960,14 @@
         "title": "Default",
         "text": ""
       },
+      "framed": {
+        "title": "Framed",
+        "text": ""
+      },
+      "visibleCellsCount": {
+        "title": "Controlling the count of displayed cells",
+        "text": "For the better view need to set odd numbers"
+      },
       "readonlyAndDisabled": {
         "title": "Readonly and disabled",
         "text": ""
diff --git a/packages/docs/src/locales/ru/ru.json b/packages/docs/src/locales/ru/ru.json
index 4a277344b5..e1862ff9c2 100644
--- a/packages/docs/src/locales/ru/ru.json
+++ b/packages/docs/src/locales/ru/ru.json
@@ -1134,7 +1134,17 @@
       }
     },
     "VaTimePicker": {
-      "props": {},
+      "props": {
+        "ampm": "12 часовой формат",
+        "hoursFilter": "Функция, позволяющая скрыть определенные часы",
+        "minutesFilter": "Функция, позволяющая скрыть определенные минуты",
+        "secondsFilter": "Функция, позволяющая скрыть определенные секунды",
+        "view": "Отображение только выбранных колонок",
+        "periodUpdatesModelValue": "Изменение периода времен автоматически обновит model value при переключении AM/PM",
+        "framed": "Добавляет рамки по центру компонента для выделения выбранных значений",
+        "cellHeight": "Высота ячейки времени",
+        "visibleCellsCount": "Количество ячеек времени для отображения"
+      },
       "events": {},
       "methods": {},
       "slots": {}
@@ -3831,6 +3841,14 @@
         "title": "Базовое использование",
         "text": ""
       },
+      "framed": {
+        "title": "Рамки",
+        "text": ""
+      },
+      "visibleCellsCount": {
+        "title": "Контроль количества отображаемых ячеек",
+        "text": "Для лучшего вида, нужно задавать нечетные числа"
+      },
       "readonlyAndDisabled": {
         "title": "Только для чтения и отключение",
         "text": ""
diff --git a/packages/docs/src/page-configs/ui-elements/time-picker/examples/framed.vue b/packages/docs/src/page-configs/ui-elements/time-picker/examples/framed.vue
new file mode 100644
index 0000000000..c60aca7143
--- /dev/null
+++ b/packages/docs/src/page-configs/ui-elements/time-picker/examples/framed.vue
@@ -0,0 +1,15 @@
+<template>
+  <h6>{{ value.getHours() }}:{{ value.getMinutes() }}:{{ value.getSeconds() }}</h6>
+
+  <va-time-picker v-model="value" framed />
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      value: new Date(),
+    }
+  },
+}
+</script>
diff --git a/packages/docs/src/page-configs/ui-elements/time-picker/examples/visibleCellsCount.vue b/packages/docs/src/page-configs/ui-elements/time-picker/examples/visibleCellsCount.vue
new file mode 100644
index 0000000000..1284fc257f
--- /dev/null
+++ b/packages/docs/src/page-configs/ui-elements/time-picker/examples/visibleCellsCount.vue
@@ -0,0 +1,21 @@
+<template>
+  <h6>{{ value.getHours() }}:{{ value.getMinutes() }}:{{ value.getSeconds() }}</h6>
+
+  <div class="d-flex">
+    <va-time-picker v-model="value" visible-cells-count="3" />
+    <va-divider vertical />
+    <va-time-picker v-model="value" visible-cells-count="8" />
+    <va-divider vertical />
+    <va-time-picker v-model="value" visible-cells-count="5" />
+    <va-divider vertical />
+    <va-time-picker v-model="value" visible-cells-count="9" />
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return { value: new Date() }
+  },
+}
+</script>
diff --git a/packages/docs/src/page-configs/ui-elements/time-picker/page-config.ts b/packages/docs/src/page-configs/ui-elements/time-picker/page-config.ts
index 808244b6ec..6fc94ebd37 100644
--- a/packages/docs/src/page-configs/ui-elements/time-picker/page-config.ts
+++ b/packages/docs/src/page-configs/ui-elements/time-picker/page-config.ts
@@ -20,6 +20,18 @@ const config: ApiDocsBlock[] = [
     'default',
   ),
 
+  ...block.exampleBlock(
+    'timePicker.examples.framed.title',
+    'timePicker.examples.framed.text',
+    'framed',
+  ),
+
+  ...block.exampleBlock(
+    'timePicker.examples.visibleCellsCount.title',
+    'timePicker.examples.visibleCellsCount.text',
+    'visibleCellsCount',
+  ),
+
   ...block.exampleBlock(
     'timePicker.examples.readonlyAndDisabled.title',
     'timePicker.examples.readonlyAndDisabled.text',
diff --git a/packages/ui/src/components/va-time-picker/VaTimePicker.demo.vue b/packages/ui/src/components/va-time-picker/VaTimePicker.demo.vue
index 01cb61305c..c103b5b6ac 100644
--- a/packages/ui/src/components/va-time-picker/VaTimePicker.demo.vue
+++ b/packages/ui/src/components/va-time-picker/VaTimePicker.demo.vue
@@ -13,29 +13,51 @@
     </VbCard>
 
     <VbCard title="view">
-      <VaTimePicker v-model="value" view="seconds" />
-      <br />
-      <VaTimePicker v-model="value" view="hours" />
+      <div class="d-flex">
+        <VaTimePicker v-model="value" view="seconds" />
+        <va-divider vertical />
+        <VaTimePicker v-model="value" view="hours" />
+      </div>
     </VbCard>
 
     <VbCard title="ampm">
-      <VaTimePicker v-model="value" :ampm="ampm" />
+      <div class="d-flex justify--center">
+        <va-switch
+          v-model="ampm"
+          label="ampm"
+          size="small"
+        />
+      </div>
       <br />
-      <VaTimePicker v-model="value" :ampm="ampm" />
+      <div class="d-flex">
+        <VaTimePicker v-model="value" :ampm="ampm" />
+        <va-divider vertical />
+        <VaTimePicker v-model="value" :ampm="ampm" />
+      </div>
     </VbCard>
 
     <VbCard title="value">
-      23:05:53
-      <br />
-      {{ value.getHours() }}:{{ value.getMinutes() }}:{{ value.getSeconds() }}
-      <br />
-      <VaTimePicker v-model="value" :ampm="true" />
+      <div class="d-flex justify--space-around">
+        <span>23:05:53</span>
+        <span>{{ selectedTime }}</span>
+      </div>
       <br />
-      <VaTimePicker v-model="value" :ampm="false" view="seconds" />
+      <div class="d-flex">
+        <VaTimePicker v-model="value" ampm />
+        <va-divider vertical />
+        <VaTimePicker v-model="value" :ampm="false" view="seconds" />
+      </div>
     </VbCard>
 
     <VbCard title="filter">
-      <VaTimePicker v-model="value" view="seconds" :ampm="false" :hoursFilter="(h) => h >= 9 && h <= 19" :minutesFilter="(m) => m % 10 === 0" :secondsFilter="(s) => s % 20 === 0" />
+      <VaTimePicker
+        v-model="value"
+        view="seconds"
+        :ampm="false"
+        :hoursFilter="(h) => h >= 9 && h <= 19"
+        :minutesFilter="(m) => m % 10 === 0"
+        :secondsFilter="(s) => s % 20 === 0"
+      />
     </VbCard>
 
     <VbCard title="readonly">
@@ -45,15 +67,39 @@
     <VbCard title="disabled">
       <VaTimePicker v-model="value" disabled />
     </VbCard>
+
+    <VbCard title="Framed">
+      <VaTimePicker v-model="value" framed />
+    </VbCard>
+
+    <VbCard title="Visible cells count">
+      <div class="d-flex justify--space-around">
+        <span>Show 2</span>
+        <span>Show 5</span>
+        <span>Show 12</span>
+      </div>
+      <br />
+      <div class="d-flex">
+        <VaTimePicker v-model="value" :visible-cells-count="2" />
+        <va-divider vertical />
+        <VaTimePicker v-model="value" :visible-cells-count="5" />
+        <va-divider vertical />
+        <VaTimePicker v-model="value" :visible-cells-count="9" />
+      </div>
+    </VbCard>
   </VbDemo>
 </template>
 
 <script>
-import { VaTimePicker } from './index'
+import VaTimePicker from './VaTimePicker.vue'
+import { VaDivider } from '../va-divider'
+import { VaSwitch } from '../va-switch'
 
 export default {
   components: {
     VaTimePicker,
+    VaDivider,
+    VaSwitch,
   },
 
   data () {
@@ -63,5 +109,16 @@ export default {
       ampm: false,
     }
   },
+
+  computed: {
+    selectedTime () {
+      const formatTime = (time) => time < 10 ? `0${time}` : time
+      const hours = formatTime(this.value.getHours())
+      const minutes = formatTime(this.value.getMinutes())
+      const seconds = formatTime(this.value.getSeconds())
+
+      return `${hours}:${minutes}:${seconds}`
+    },
+  },
 }
 </script>
diff --git a/packages/ui/src/components/va-time-picker/VaTimePicker.vue b/packages/ui/src/components/va-time-picker/VaTimePicker.vue
index 8974286d6c..ffb70032cc 100644
--- a/packages/ui/src/components/va-time-picker/VaTimePicker.vue
+++ b/packages/ui/src/components/va-time-picker/VaTimePicker.vue
@@ -1,10 +1,15 @@
 <template>
-  <div class="va-time-picker" :class="computedClasses">
+  <div
+    class="va-time-picker"
+    :class="computedClasses"
+    :style="computedStyles"
+  >
     <VaTimePickerColumn
       v-for="(column, idx) in columns" :key="idx"
       :ref="setItemRef"
       :items="column.items"
       :tabindex="disabled ? -1 : 0"
+      :cell-height="$props.cellHeight"
       v-model:activeItemIndex="column.activeItem.value"
       @keydown.right.stop.prevent="focusNext()"
       @keydown.tab.exact.stop.prevent="focusNext()"
@@ -16,16 +21,19 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, ref } from 'vue'
+import { defineComponent, ref, computed, PropType } from 'vue'
+import { useTimePicker } from './hooks/useTimePicker'
+
+import { VaTimePickerColumn } from './components/VaTimePickerColumn'
 
 import {
-  useStateful, useStatefulEmits, useStatefulProps,
-  useFormProps, useForm,
+  useStatefulProps,
+  useStatefulEmits,
+  useStateful,
+  useFormProps,
+  useForm,
   useArrayRefs,
 } from '../../composables'
-import { useTimePicker } from './hooks/useTimePicker'
-
-import VaTimePickerColumn from './components/VaTimePickerColumn.vue'
 
 export default defineComponent({
   name: 'VaTimePicker',
@@ -43,6 +51,9 @@ export default defineComponent({
     hoursFilter: { type: Function as PropType<(h: number) => boolean> },
     minutesFilter: { type: Function as PropType<(h: number) => boolean> },
     secondsFilter: { type: Function as PropType<(h: number) => boolean> },
+    framed: { type: Boolean, default: false },
+    cellHeight: { type: Number, default: 30 },
+    visibleCellsCount: { type: Number, default: 7 },
   },
 
   emits: useStatefulEmits,
@@ -63,22 +74,40 @@ export default defineComponent({
       idx ? pickers.value[idx]?.blur() : pickers.value.forEach((el) => el?.blur())
     }
 
-    const { computedClasses } = useForm('va-time-picker', props)
+    const { computedClasses: computedFormClasses } = useForm('va-time-picker', props)
 
     const focusNext = () => {
       const nextIndex = (activeColumnIndex?.value || 0) + 1
+
       activeColumnIndex.value = nextIndex % columns.value.length
       focus(activeColumnIndex.value)
     }
 
     const focusPrev = () => {
       const nextIndex = (activeColumnIndex?.value || 0) - 1 + columns.value.length
+
       activeColumnIndex.value = nextIndex % columns.value.length
       focus(activeColumnIndex.value)
     }
 
+    const computedClasses = computed(() => ({
+      ...computedFormClasses,
+      'va-time-picker--framed': props.framed,
+    }))
+
+    const computedStyles = computed(() => {
+      const gapHeight = (props.visibleCellsCount - 1) / 2 * props.cellHeight
+
+      return {
+        '--va-time-picker-height': `${props.cellHeight * props.visibleCellsCount}px`,
+        '--va-time-picker-cell-height': `${props.cellHeight}px`,
+        '--va-time-picker-column-gap-height': `${gapHeight}px`,
+      }
+    })
+
     return {
       columns,
+      computedStyles,
       computedClasses,
       isPM,
       pickers,
@@ -126,5 +155,22 @@ export default defineComponent({
 
       opacity: var(--va-time-picker-disabled-opacity);
     }
+
+    &--framed {
+      position: relative;
+
+      &::before {
+        content: "";
+        height: var(--va-time-picker-cell-height);
+        width: 100%;
+        position: absolute;
+        top: 50%;
+        left: 0;
+        transform: translateY(-50%);
+        border-top: 1px solid var(--va-divider);
+        border-bottom: 1px solid var(--va-divider);
+        z-index: 0;
+      }
+    }
   }
 </style>
diff --git a/packages/ui/src/components/va-time-picker/_variables.scss b/packages/ui/src/components/va-time-picker/_variables.scss
index e06e85efdb..511d6c5710 100644
--- a/packages/ui/src/components/va-time-picker/_variables.scss
+++ b/packages/ui/src/components/va-time-picker/_variables.scss
@@ -1,5 +1,4 @@
 .va-time-picker {
   --va-time-picker-display: inline-flex;
-  --va-time-picker-height: 200px;
   --va-time-picker-disabled-opacity: 0.4;
 }
diff --git a/packages/ui/src/components/va-time-picker/components/VaTimePickerColumn.vue b/packages/ui/src/components/va-time-picker/components/VaTimePickerColumn/VaTimePickerColumn.vue
similarity index 72%
rename from packages/ui/src/components/va-time-picker/components/VaTimePickerColumn.vue
rename to packages/ui/src/components/va-time-picker/components/VaTimePickerColumn/VaTimePickerColumn.vue
index 40e6549995..9b13573025 100644
--- a/packages/ui/src/components/va-time-picker/components/VaTimePickerColumn.vue
+++ b/packages/ui/src/components/va-time-picker/components/VaTimePickerColumn/VaTimePickerColumn.vue
@@ -6,8 +6,9 @@
     @keydown.down.stop.prevent="makeActiveNext()"
     @keydown.space.stop.prevent="makeActiveNext(5)"
     @keydown.up.stop.prevent="makeActivePrev()"
+    @scroll.passive="onScroll"
+    @touchmove.passive="onScroll"
   >
-    <div class="va-time-picker-cell va-time-picker-cell--fake" />
     <div
       v-for="(item, index) in items" :key="item"
       class="va-time-picker-cell"
@@ -18,14 +19,14 @@
         {{ formatCell(item) }}
       </slot>
     </div>
-    <div class="va-time-picker-cell va-time-picker-cell--fake" />
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, nextTick, onMounted, PropType, shallowRef, watch } from 'vue'
+import { defineComponent, nextTick, shallowRef, watch, onMounted, PropType } from 'vue'
 
-import { useSyncProp, useFocus, useFocusEmits } from '../../../composables'
+import debounce from 'lodash/debounce.js'
+import { useSyncProp, useFocus, useFocusEmits } from '../../../../composables'
 
 export default defineComponent({
   name: 'VaTimePickerColumn',
@@ -33,38 +34,25 @@ export default defineComponent({
   props: {
     items: { type: Array as PropType<string[] | number[]>, default: () => [] },
     activeItemIndex: { type: Number, default: 0 },
+    cellHeight: { type: Number, default: 30 },
   },
 
   emits: ['item-selected', 'update:activeItemIndex', ...useFocusEmits],
 
   setup (props, { emit }) {
     const rootElement = shallowRef<HTMLElement>()
-
     const { focus, blur } = useFocus(rootElement, emit)
-
     const [syncActiveItemIndex] = useSyncProp('activeItemIndex', props, emit)
 
     watch(syncActiveItemIndex, (newVal) => { scrollTo(newVal) })
 
     onMounted(() => scrollTo(syncActiveItemIndex.value, false))
 
-    const scrollTo = (index: number, animate = true) => {
+    const scrollTo = (index: number, animated = true) => {
       nextTick(() => {
-        const children = rootElement.value!.children
-
-        const element = children[index] as HTMLElement
-
-        if (!element) {
-          rootElement.value?.scrollTo({
-            behavior: animate ? 'smooth' : 'auto',
-            top: 0,
-          })
-          return
-        }
-
-        rootElement.value?.scrollTo({
-          behavior: animate ? 'smooth' : 'auto',
-          top: element.offsetTop - element.parentElement!.offsetTop,
+        rootElement.value!.scrollTo({
+          behavior: animated ? 'smooth' : 'auto',
+          top: index * props.cellHeight,
         })
       })
     }
@@ -94,12 +82,35 @@ export default defineComponent({
       return n < 10 ? `0${n}` : `${n}`
     }
 
+    const getIndex = () => {
+      const scrollTop = rootElement.value!.scrollTop
+      const calculatedIndex = Math.max(
+        (scrollTop - scrollTop % props.cellHeight) / props.cellHeight,
+        scrollTop / props.cellHeight,
+      )
+
+      if (syncActiveItemIndex.value * props.cellHeight < scrollTop) {
+        return Math.ceil(calculatedIndex)
+      } else if (syncActiveItemIndex.value * props.cellHeight > scrollTop) {
+        return Math.floor(calculatedIndex)
+      } else {
+        return Math.round(calculatedIndex)
+      }
+    }
+
+    const onScroll = debounce(() => {
+      if (rootElement.value && syncActiveItemIndex.value !== -1) {
+        syncActiveItemIndex.value = getIndex()
+      }
+    }, 200)
+
     return {
       rootElement,
 
       makeActiveNext,
       makeActivePrev,
       makeActiveByIndex,
+      onScroll,
 
       onCellClick,
       formatCell,
@@ -112,7 +123,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-  @import './_variables.scss';
+  @import 'variables';
 
   @mixin hiddenYScroll {
     overflow-y: scroll;
@@ -129,6 +140,14 @@ export default defineComponent({
     height: 100%;
     border-right: var(--va-time-picker-column-border-right);
 
+    &::before,
+    &::after {
+      content: "";
+      display: block;
+      height: var(--va-time-picker-column-gap-height);
+      width: 100%;
+    }
+
     &:last-child {
       border-right: 0;
     }
@@ -159,27 +178,9 @@ export default defineComponent({
         }
       }
 
-      &--fake {
-        visibility: hidden;
-
-        &:last-child {
-          height: calc(100% - var(--va-time-picker-cell-height) * 2);
-        }
-      }
-
       &:hover {
         background: var(--va-time-picker-cell-background-color-hover);
       }
     }
-
-    &:focus {
-      .va-time-picker-cell {
-        &--active {
-          &::before {
-            opacity: var(--va-time-picker-cell-active-background-opacity-hover);
-          }
-        }
-      }
-    }
   }
 </style>
diff --git a/packages/ui/src/components/va-time-picker/components/_variables.scss b/packages/ui/src/components/va-time-picker/components/VaTimePickerColumn/_variables.scss
similarity index 82%
rename from packages/ui/src/components/va-time-picker/components/_variables.scss
rename to packages/ui/src/components/va-time-picker/components/VaTimePickerColumn/_variables.scss
index f9698deb9b..fe91769d06 100644
--- a/packages/ui/src/components/va-time-picker/components/_variables.scss
+++ b/packages/ui/src/components/va-time-picker/components/VaTimePickerColumn/_variables.scss
@@ -1,11 +1,10 @@
 .va-time-picker-column {
   --va-time-picker-column-border-right: 1px solid var(--va-divider);
-  --va-time-picker-cell-height: 30px;
   --va-time-picker-cell-width: 40px;
   --va-time-picker-cell-cursor: pointer;
   --va-time-picker-cell-active-background: var(--va-primary);
   --va-time-picker-cell-active-color: var(--va-primary);
   --va-time-picker-cell-background-color-hover: var(--va-background-color-hover);
-  --va-time-picker-cell-active-background-opacity: 0;
+  --va-time-picker-cell-active-background-opacity: 0.05;
   --va-time-picker-cell-active-background-opacity-hover: 0.1;
 }
diff --git a/packages/ui/src/components/va-time-picker/components/VaTimePickerColumn/index.ts b/packages/ui/src/components/va-time-picker/components/VaTimePickerColumn/index.ts
new file mode 100644
index 0000000000..e2bfe192e0
--- /dev/null
+++ b/packages/ui/src/components/va-time-picker/components/VaTimePickerColumn/index.ts
@@ -0,0 +1,4 @@
+import withConfigTransport from '../../../../services/config-transport/withConfigTransport'
+import _VaTimePickerColumn from './VaTimePickerColumn.vue'
+
+export const VaTimePickerColumn = withConfigTransport(_VaTimePickerColumn)
diff --git a/packages/ui/src/components/va-time-picker/hooks/useTimePicker.ts b/packages/ui/src/components/va-time-picker/hooks/useTimePicker.ts
index 45c8119245..75fa074488 100644
--- a/packages/ui/src/components/va-time-picker/hooks/useTimePicker.ts
+++ b/packages/ui/src/components/va-time-picker/hooks/useTimePicker.ts
@@ -1,19 +1,5 @@
 import { computed, ref, Ref, toRefs, watch } from 'vue'
-
-interface TimePickerProps {
-  ampm: boolean;
-  hidePeriodSwitch: boolean;
-  periodUpdatesModelValue: boolean;
-  view: 'hours' | 'minutes' | 'seconds';
-  modelValue?: Date;
-  hoursFilter?: (h: number) => boolean,
-  minutesFilter?: (h: number) => boolean
-  secondsFilter?: (h: number) => boolean
-
-  readonly?: boolean;
-}
-
-type ModelValueRef = Ref<Date | null | undefined>
+import { TimePickerProps, ModelValueRef } from '../types'
 
 // Use safeModelValue if we need to update model value
 const safeModelValue = (m: ModelValueRef) => m.value ? m.value : new Date(new Date().setHours(0, 0, 0, 0))
diff --git a/packages/ui/src/components/va-time-picker/types.ts b/packages/ui/src/components/va-time-picker/types.ts
new file mode 100644
index 0000000000..4dda33bebf
--- /dev/null
+++ b/packages/ui/src/components/va-time-picker/types.ts
@@ -0,0 +1,15 @@
+import { Ref } from 'vue'
+
+export interface TimePickerProps {
+  ampm: boolean
+  hidePeriodSwitch: boolean
+  periodUpdatesModelValue: boolean
+  view: 'hours' | 'minutes' | 'seconds'
+  modelValue?: Date
+  hoursFilter?: (h: number) => boolean
+  minutesFilter?: (h: number) => boolean
+  secondsFilter?: (h: number) => boolean
+  readonly?: boolean
+}
+
+export type ModelValueRef = Ref<Date | null | undefined>