diff --git a/package.json b/package.json
index c731db6..d3e4e83 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,7 @@
   },
   "name": "vue-functional-calendar",
   "description": "A style-uninstallable datepicker component for Vue.js",
-  "version": "2.3.5",
+  "version": "2.3.6",
   "license": "MIT",
   "repository": {
     "type": "git",
diff --git a/src/Demo.vue b/src/Demo.vue
index 71706d1..ef6a45f 100644
--- a/src/Demo.vue
+++ b/src/Demo.vue
@@ -4,7 +4,7 @@
                              ref="Calendar"
                              v-model="calendarData2"
                              :sunday-start="false"
-                             :is-modal="true"
+                             :is-modal="false"
                              :date-format="'yyyy-mm-dd'"
                              :change-month-function="true"
                              :is-typeable="true"
diff --git a/src/assets/scss/calendar.scss b/src/assets/scss/calendar.scss
index 6ff8e3a..a1afca1 100644
--- a/src/assets/scss/calendar.scss
+++ b/src/assets/scss/calendar.scss
@@ -112,18 +112,67 @@ input.vfc-single-input {
   }
 
   .vfc-time-picker-container {
-    height: 100%;
     display: flex;
     flex-direction: column;
     justify-content: center;
 
+    .vfc-time-picker {
+      box-sizing: border-box;
+      &::after {
+        content: '';
+        display: table;
+        clear: both;
+      }
+      & * {
+        box-sizing: border-box;
+      }
+    }
+    .vfc-time-picker__list {
+      float: left;
+      width: 50%;
+      height: 200px;
+      overflow-y: scroll;
+      &::-webkit-scrollbar {
+        width: 3px;
+      }
+      &::-webkit-scrollbar-track {
+        background: #efefef;
+      }
+      &::-webkit-scrollbar-thumb {
+        background: #ccc;
+      }
+    }
+    .vfc-time-picker__with-suffix .vfc-time-picker__list {
+      width: 33.3%;
+    }
+    .vfc-time-picker__item {
+      padding: 10px 0;
+      font-size: 20px;
+      text-align: center;
+      cursor: pointer;
+      transition: font-size .3s;
+    }
+    .vfc-time-picker__item:hover {
+      font-size: 32px;
+    }
+    .vfc-time-picker__item--selected {
+      color: $royalblue;
+      font-size: 32px;
+    }
+    .vfc-time-picker__item--disabled {
+      opacity: 0.4;
+      cursor: default;
+      font-size: 20px !important;
+    }
+    
     .vfc-close {
       position: absolute;
-      right: 32px;
-      top: 32px;
+      right: 12px;
+      top: 16px;
       width: 32px;
       height: 32px;
       opacity: 0.3;
+      z-index: 10000;
     }
     .vfc-close:hover {
       opacity: 1;
@@ -132,9 +181,9 @@ input.vfc-single-input {
       position: absolute;
       left: 15px;
       content: ' ';
-      height: 33px;
+      height: 26px;
       width: 2px;
-      background-color: #333;
+      background-color: #FFFFFF;
     }
     .vfc-close:before {
       transform: rotate(45deg);
@@ -145,14 +194,20 @@ input.vfc-single-input {
 
     .vfc-modal-time-mechanic {
       position: relative;
-      width: 40%;
       margin: 0 auto;
+      width: 100%;
       .vfc-modal-time-line {
-        text-align: center;
-        color: #7d7d7d;
+        width: 100%;
+        background-color: $royalblue;
+        text-align: left;
+        color: #FFFFFF;
         font-size: 20px;
         padding-top: 15px;
         padding-bottom: 15px;
+        border-radius: .28571429rem .28571429rem 0 0;
+        span {
+          margin-left: 15px;
+        }
       }
     }
 
diff --git a/src/components/FunctionalCalendar.vue b/src/components/FunctionalCalendar.vue
index 343523f..d1ce231 100644
--- a/src/components/FunctionalCalendar.vue
+++ b/src/components/FunctionalCalendar.vue
@@ -60,41 +60,9 @@
                     </div>
                 </div>
             </template>
-            <template v-else-if="showTimePicker">
-                <div class="vfc-time-picker-container">
-                    <div class="vfc-close" @click="openCloseTimePicker()"></div>
-                    <div class="vfc-modal-time-mechanic">
-                        <div id="time-line" class="vfc-modal-time-line">
-                            {{ calendar.selectedDateTime }}
-                        </div>
-                        <div class="vfc-modal-append">
-                            <div class="vfc-arrow vfc-arrow-up"></div>
-                            <span class="vfc-modal-midle"></span>
-                            <div class="vfc-arrow vfc-arrow-up"></div>
-                        </div>
-                        <div class="vfc-modal-digits">
-                            <select class="vfc-modal-digit" @change="changedHour" v-model="calendar.selectedHour">
-                                <option value="00">00</option>
-                                <option :value="i < 10 ? '0'+i : i" v-for="i in 23">
-                                    {{ i < 10 ? '0'+i : i}}
-                                </option>
-                            </select>
-                            <span class="vfc-modal-midle-dig">:</span>
-                            <select class="vfc-modal-digit" @change="changedMinute" v-model="calendar.selectedMinute">
-                                <option value="00">00</option>
-                                <option :value="i < 10 ? '0'+i : i" v-for="i in 59">
-                                    {{ i < 10 ? '0'+i : i}}
-                                </option>
-                            </select>
-                        </div>
-                        <div class="vfc-modal-append">
-                            <div class="vfc-arrow vfc-arrow-down"></div>
-                            <span class="vfc-modal-midle"></span>
-                            <div class="vfc-arrow vfc-arrow-down"></div>
-                        </div>
-                    </div>
-                </div>
-            </template>
+            <div v-else-if="showTimePicker">
+                <time-picker></time-picker>
+            </div>
             <template v-else>
                 <div class="vfc-calendars-container">
                     <div class="vfc-navigation-buttons" ref="navigationButtons"
@@ -153,9 +121,11 @@
 <script>
     import helpCalendar from '../assets/js/calendar'
     import {propsAndData} from "../mixins/propsAndData";
+    import TimePicker from "./TimePicker";
 
     export default {
         name: "FunctionalCalendar",
+        components: {TimePicker},
         mixins: [propsAndData],
         created() {
             this.setConfigs();
@@ -186,7 +156,7 @@
                     this.$emit('opened');
                 else
                     this.$emit('closed');
-            }, {immediate: true, deep: true})
+            }, {immediate: true, deep: true});
 
             this.setCalendarStyles();
         },
@@ -499,9 +469,9 @@
                 // Time Picker
                 if (this.fConfigs.withTimePicker) {
                     if (this.fConfigs.isDateRange && this.calendar.dateRange.end.date) {
-                        this.openCloseTimePicker();
+                        this.openTimePicker();
                     } else if (this.fConfigs.isDatePicker) {
-                        this.openCloseTimePicker();
+                        this.openTimePicker();
                     }
                 }
             },
@@ -663,17 +633,6 @@
                 this.calendar.currentDate = newDate;
                 this.initCalendar();
             },
-            changedHour(e) {
-                this.calendar.selectedHour = e.target.value;
-                this.setSelectedDateTime();
-            },
-            changedMinute(e) {
-                this.calendar.selectedMinute = e.target.value;
-                this.setSelectedDateTime();
-            },
-            setSelectedDateTime() {
-                this.calendar.selectedDateTime = this.calendar.selectedDate + " " + this.calendar.selectedHour + ':' + this.calendar.selectedMinute;
-            },
             openMonthPicker() {
                 if (this.fConfigs.changeMonthFunction)
                     this.showMonthPicker = true;
@@ -682,9 +641,8 @@
                 if (this.fConfigs.changeYearFunction)
                     this.showYearPicker = true;
             },
-            openCloseTimePicker() {
-                this.setSelectedDateTime();
-                this.showTimePicker = !this.showTimePicker;
+            openTimePicker() {
+                this.showTimePicker = true;
             },
             pickMonth(key) {
                 this.showMonthPicker = false;
@@ -830,7 +788,7 @@
     }
 </script>
 
-<style scoped lang="scss">
+<style lang="scss">
     .vfc-styles-conditional-class {
         @import "../assets/scss/calendar.scss";
     }
diff --git a/src/components/TimePicker.vue b/src/components/TimePicker.vue
new file mode 100644
index 0000000..1f196f0
--- /dev/null
+++ b/src/components/TimePicker.vue
@@ -0,0 +1,61 @@
+<template>
+    <div class="vfc-time-picker-container">
+        <div class="vfc-close" @click="close()"></div>
+        <div class="vfc-modal-time-mechanic">
+            <div id="time-line" class="vfc-modal-time-line">
+                <span>{{ $parent.calendar.selectedDateTime }}</span>
+            </div>
+            <div class="vfc-time-picker">
+                <div class="vfc-time-picker__list vfc-time-picker__list--hours" ref="hourList">
+                    <div class="vfc-time-picker__item" :class="{'vfc-time-picker__item--selected': ($parent.calendar.selectedHour === (i < 10 ? '0'+(i-1) : i))}" v-for="i in 23" @click="changeHour(i < 10 ? '0'+(i-1) : i)">{{ i < 10 ? '0'+(i-1) : i}}</div>
+                </div>
+                <div class="vfc-time-picker__list vfc-time-picker__list--minutes" ref="minuteList">
+                    <div class="vfc-time-picker__item" :class="{'vfc-time-picker__item--selected': ($parent.calendar.selectedMinute === (i < 10 ? '0'+(i-1) : i))}" v-for="i in 59" @click="changeMinute(i < 10 ? '0'+(i-1) : i)">{{ i < 10 ? '0'+(i-1) : i}}</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "TimePicker",
+        mounted () {
+            this.setSelectedDateTime();
+            this.setStyles();
+        },
+        methods: {
+            close() {
+                this.$parent.showTimePicker = false;
+            },
+            changeHour(hour) {
+                this.$parent.calendar.selectedHour = hour;
+                this.setSelectedDateTime();
+            },
+            changeMinute(minute)
+            {
+                this.$parent.calendar.selectedMinute = minute;
+                this.setSelectedDateTime();
+            },
+            setSelectedDateTime() {
+                this.$parent.calendar.selectedDateTime = this.$parent.calendar.selectedDate + " " + this.$parent.calendar.selectedHour + ':' + this.$parent.calendar.selectedMinute;
+            },
+            setStyles() {
+                let container = this.$parent.$refs.mainContainer;
+
+                const selectedHour = this.$refs.hourList.querySelector('.vfc-time-picker__item--selected');
+                const selectedMinute = this.$refs.minuteList.querySelector('.vfc-time-picker__item--selected');
+                this.$refs.hourList.scrollTop = selectedHour ? selectedHour.offsetTop - container.clientHeight/2 : 0;
+                this.$refs.minuteList.scrollTop = selectedMinute ? selectedMinute.offsetTop - container.clientHeight/2 : 0;
+
+                let timeLine = document.getElementById('time-line');
+                document.getElementsByClassName('vfc-time-picker__list')[0].style.height = container.clientHeight - timeLine.clientHeight + 'px';
+                document.getElementsByClassName('vfc-time-picker__list')[1].style.height = container.clientHeight - timeLine.clientHeight + 'px';
+            }
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file