diff --git a/CHANGELOG.md b/CHANGELOG.md
index 425bccd..29e5652 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -15,7 +15,7 @@ All notable changes to this project will be documented in this file.
 
 ## [1.0.2]
 
-- Expose `placeholder`, `clear` function to slot.
+- Expose `placeholder`, `clear` function to slot, work if using slot, [Example](https://litepie.com/#use-slot).
 
 ## [1.0.3]
 
@@ -23,13 +23,19 @@ All notable changes to this project will be documented in this file.
 
 ## [1.0.4]
 
-- Fixed `shortcuts` when use custom.
+- Fixed `shortcuts` if custom, [Example](https://litepie.com/#custom-shortcuts).
 
 ## [1.0.5]
 
 - Added dayjs `customParseFormat` plugin, to correctly parse from `formatter` props ([#3](https://github.com/kenhyuwa/litepie-datepicker/pull/3)).
 - Added keyboard event `keyup` for update value ([#5](https://github.com/kenhyuwa/litepie-datepicker/pull/5)).
 
+## [1.0.6]
+
+- New props `footer`, [Example](https://litepie.com/#footer).
+- Redesign layout, for breakpoint `768 ~ 1024`.
+- Hide Next/Prev button if months active.
+
 [Released]: https://github.com/kenhyuwa/litepie-datepicker/
 [1.0.0]: https://github.com/kenhyuwa/litepie-datepicker/releases/tag/v1.0.0
 [1.0.1]: https://github.com/kenhyuwa/litepie-datepicker/releases/tag/v1.0.1
@@ -37,3 +43,4 @@ All notable changes to this project will be documented in this file.
 [1.0.3]: https://github.com/kenhyuwa/litepie-datepicker/releases/tag/v1.0.3
 [1.0.4]: https://github.com/kenhyuwa/litepie-datepicker/releases/tag/v1.0.4
 [1.0.5]: https://github.com/kenhyuwa/litepie-datepicker/releases/tag/v1.0.5
+[1.0.6]: https://github.com/kenhyuwa/litepie-datepicker/releases/tag/v1.0.6
diff --git a/dev/serve.vue b/dev/serve.vue
index af195f9..face785 100644
--- a/dev/serve.vue
+++ b/dev/serve.vue
@@ -99,11 +99,11 @@ export default defineComponent({
       ];
     };
     onMounted(() => {
-      // dateValue.value = {
-      //   startDate: new Date(2021, 9, 1),
-      //   endDate: '2021-09-01'
-      // };
-      dateValue.value = [new Date(2019, 9, 8), new Date(2019, 9, 19)];
+      dateValue.value = {
+        startDate: '20 Mar 2021',
+        endDate: '20 Aug 2021'
+      };
+      // dateValue.value = [new Date(2019, 9, 8), new Date(2019, 9, 19)];
       // dateValue.value = `${new Date(2019, 9, 8).toString()} ~ ${new Date(
       //   2019,
       //   9,
diff --git a/docs/src/App.vue b/docs/src/App.vue
index b30f8bf..bcad712 100644
--- a/docs/src/App.vue
+++ b/docs/src/App.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="relative min-h-screen overflow-hidden bg-light-blue-500">
-    <div class="absolute inset-0 bg-black bg-opacity-80"></div>
+    <div class="absolute inset-0 bg-black bg-opacity-85"></div>
     <div
       class="absolute right-1.5 top-1/3 mt-40 sm:mt-0 sm:top-0 bottom-0 w-full xl:w-1/2 bg-light-blue-500 shadow-2xl rounded-tl-3xl transform translate-x-10 sm:translate-x-24 translate-y-32 sm:translate-y-1/2 lg:translate-y-1/2 xl:translate-y-36 -rotate-6"
     ></div>
@@ -106,10 +106,14 @@
             <h1
               class="text-4xl sm:text-6xl lg:text-7xl leading-none font-extrabold tracking-tight text-white mt-10 mb-8 sm:mt-14 sm:mb-10"
             >
-              Litepie Datepicker
+              <span
+                class="bg-gradient-to-r bg-clip-text text-transparent from-gray-200 to-light-blue-400"
+              >
+                Litepie Datepicker
+              </span>
             </h1>
             <p
-              class="max-w-screen-lg text-lg sm:text-2xl sm:leading-10 text-gray-300 font-medium tracking-tight mb-10 sm:mb-11"
+              class="max-w-screen-lg text-lg sm:text-2xl sm:leading-10 text-gray-400 font-medium tracking-tight mb-10 sm:mb-11"
             >
               A date range picker component for Vue.js and Tailwind CSS,
               dependent to day.js.
@@ -940,6 +944,41 @@
                 </div>
               </div>
             </div>
+            <div id="footer" class="pt-6 sm:pt-8">
+              <h3 class="group flex items-center font-semibold">
+                <a
+                  href="#footer"
+                  class="absolute after:hash opacity-0 group-hover:opacity-100 -ml-4 text-light-blue-400"
+                  aria-label="Anchor"
+                ></a>
+                <span class="text-lg text-gray-900">
+                  Footer
+                </span>
+              </h3>
+              <div
+                class="mt-6 grid grid-cols-1 lg:grid-cols-3 gap-y-8 sm:gap-y-12 lg:gap-y-0 lg:gap-x-8"
+              >
+                <div class="w-full max-w-md">
+                  <litepie-datepicker
+                    :footer="{
+                      apply: 'OK',
+                      cancel: 'Close'
+                    }"
+                    :auto-apply="false"
+                    :formatter="playFormatter"
+                    v-model="dateValue.footer"
+                  />
+                </div>
+                <div class="col-span-2">
+                  <div class="rounded-xl overflow-hidden">
+                    <div class="bg-light-blue-500">
+                      <v-prims language="html" :code="playground.footer">
+                      </v-prims>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
         </section>
         <section
@@ -1256,6 +1295,7 @@ export default {
       disableInRange: [],
       trigger: [],
       slots: [],
+      footer: [],
       useArray: [],
       useObject: {
         startDate: '',
diff --git a/docs/src/content.js b/docs/src/content.js
index cac1761..5e62f71 100644
--- a/docs/src/content.js
+++ b/docs/src/content.js
@@ -465,6 +465,38 @@ export default {
 };
 </script>`;
 
+  const footer = `<template>
+  <div class="flex">
+    <litepie-datepicker
+      :footer="footerProps"
+      v-model="dateValue"
+    ></litepie-datepicker>
+  </div>
+</template>
+
+<script>
+import { ref } from 'vue';
+
+export default {
+  name: 'MyComponent',
+  setup() {
+    const dateValue = ref([]);
+    const footerProps = {
+      apply: 'OK',
+      cancel: 'Close'
+    };
+
+    return {
+      dateValue,
+      footerProps
+    };
+  }
+};
+</script>`;
+
+  /**
+   * Advance
+   */
   const useArray = `<template>
   <div class="flex">
     <litepie-datepicker
@@ -543,7 +575,7 @@ export default {
   const customShortcuts = `<template>
   <div class="flex">
     <litepie-datepicker
-      :shortcuts='customShortcuts'
+      :shortcuts="customShortcuts"
       v-model="dateValue"
     ></litepie-datepicker>
   </div>
@@ -606,7 +638,8 @@ export default {
       disableDate,
       disableInRange,
       trigger,
-      useSlot
+      useSlot,
+      footer
     },
     advance: {
       useArray,
diff --git a/package.json b/package.json
index dee0732..bc93a59 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "litepie-datepicker",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "A date range picker component for Vue.js and Tailwind CSS, dependent to day.js",
   "main": "dist/litepie-datepicker.ssr.js",
   "browser": "dist/litepie-datepicker.esm.js",
diff --git a/src/components/Calendar.vue b/src/components/Calendar.vue
index cd1b012..26bf1c6 100644
--- a/src/components/Calendar.vue
+++ b/src/components/Calendar.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-wrap -m-px py-1">
+  <div class="grid grid-cols-7 gap-y-0.5 my-1">
     <transition-group
       enter-from-class="opacity-0"
       enter-to-class="opacity-100"
@@ -8,16 +8,9 @@
       leave-from-class="opacity-100"
       leave-to-class="opacity-0"
     >
-      <div
-        v-for="(date, keyDate) in calendar.date()"
-        :key="keyDate"
-        :style="{
-          width: `calc(100% / ${weeks.length})`
-        }"
-        class="my-px"
-      >
+      <div v-for="(date, keyDate) in calendar.date()" :key="keyDate">
         <div
-          class="relative flex-1 flex justify-center"
+          class="relative"
           :class="{ 'litepie-tooltip': asRange && date.duration() }"
           :data-tooltip="`${date.duration()}`"
         >
@@ -37,7 +30,7 @@
           </transition>
           <button
             type="button"
-            class="litepie-datepicker-date relative w-full h-10 lg:w-9 lg:h-9 flex justify-center items-center text-xs 2xl:text-sm focus:outline-none"
+            class="litepie-datepicker-date relative w-12 h-12 lg:w-10 lg:h-10 flex justify-center items-center text-xs 2xl:text-sm focus:outline-none"
             :class="[
               datepickerClasses(date),
               asRange ? 'transition-all' : 'transition-colors'
diff --git a/src/components/Header.vue b/src/components/Header.vue
index 7f62adc..29e5557 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -3,7 +3,10 @@
     class="flex justify-between items-center px-2 py-1.5 rounded-md border border-black border-opacity-10 dark:border-litepie-secondary-700 dark:border-opacity-100"
   >
     <div class="flex-shrink-0">
-      <span class="inline-flex rounded-full">
+      <span
+        v-show="panel.calendar || panel.year"
+        class="inline-flex rounded-full"
+      >
         <button
           type="button"
           class="p-1.5 rounded-full bg-white text-litepie-secondary-600 transition-colors border border-transparent hover:bg-litepie-secondary-100 hover:text-litepie-secondary-900 focus:bg-litepie-primary-50 focus:text-litepie-secondary-900 focus:border-litepie-primary-300 focus:ring focus:ring-litepie-primary-500 focus:ring-opacity-10 focus:outline-none dark:bg-litepie-secondary-800 dark:text-litepie-secondary-300 dark:hover:bg-litepie-secondary-700 dark:hover:text-litepie-secondary-300 dark:focus:bg-litepie-secondary-600 dark:focus:text-litepie-secondary-100 dark:focus:border-litepie-primary-500 dark:focus:ring-opacity-25"
@@ -36,7 +39,7 @@
       <span class="flex-1 flex rounded-md">
         <button
           type="button"
-          class="px-3 py-1.5 block w-full leading-relaxed rounded-md bg-white text-xs 2xl:text-sm tracking-wide text-litepie-secondary-600 font-medium transition-colors border border-transparent hover:bg-litepie-secondary-100 hover:text-litepie-secondary-900 focus:bg-litepie-primary-50 focus:text-litepie-secondary-900 focus:border-litepie-primary-300 focus:ring focus:ring-litepie-primary-500 focus:ring-opacity-10 focus:outline-none uppercase dark:bg-litepie-secondary-800 dark:text-litepie-secondary-300 dark:hover:bg-litepie-secondary-700 dark:hover:text-litepie-secondary-300 dark:focus:bg-litepie-secondary-600 dark:focus:text-litepie-secondary-100 dark:focus:border-litepie-primary-500 dark:focus:ring-opacity-25"
+          class="px-3 py-1.5 block w-full leading-relaxed rounded-md bg-white text-xs 2xl:text-sm tracking-wide text-litepie-secondary-600 font-semibold sm:font-medium transition-colors border border-transparent hover:bg-litepie-secondary-100 hover:text-litepie-secondary-900 focus:bg-litepie-primary-50 focus:text-litepie-secondary-900 focus:border-litepie-primary-300 focus:ring focus:ring-litepie-primary-500 focus:ring-opacity-10 focus:outline-none uppercase dark:bg-litepie-secondary-800 dark:text-litepie-secondary-300 dark:hover:bg-litepie-secondary-700 dark:hover:text-litepie-secondary-300 dark:focus:bg-litepie-secondary-600 dark:focus:text-litepie-secondary-100 dark:focus:border-litepie-primary-500 dark:focus:ring-opacity-25"
           v-text="calendar.month"
           @click="calendar.openMonth()"
         ></button>
@@ -44,14 +47,17 @@
       <span class="flex-1 flex rounded-md">
         <button
           type="button"
-          class="px-3 py-1.5 block w-full leading-relaxed rounded-md bg-white text-xs 2xl:text-sm tracking-wide text-litepie-secondary-600 font-medium transition-colors border border-transparent hover:bg-litepie-secondary-100 hover:text-litepie-secondary-900 focus:bg-litepie-primary-50 focus:text-litepie-secondary-900 focus:border-litepie-primary-300 focus:ring focus:ring-litepie-primary-500 focus:ring-opacity-10 focus:outline-none uppercase dark:bg-litepie-secondary-800 dark:text-litepie-secondary-300 dark:hover:bg-litepie-secondary-700 dark:hover:text-litepie-secondary-300 dark:focus:bg-litepie-secondary-600 dark:focus:text-litepie-secondary-100 dark:focus:border-litepie-primary-500 dark:focus:ring-opacity-25"
+          class="px-3 py-1.5 block w-full leading-relaxed rounded-md bg-white text-xs 2xl:text-sm tracking-wide text-litepie-secondary-600 font-semibold sm:font-medium transition-colors border border-transparent hover:bg-litepie-secondary-100 hover:text-litepie-secondary-900 focus:bg-litepie-primary-50 focus:text-litepie-secondary-900 focus:border-litepie-primary-300 focus:ring focus:ring-litepie-primary-500 focus:ring-opacity-10 focus:outline-none uppercase dark:bg-litepie-secondary-800 dark:text-litepie-secondary-300 dark:hover:bg-litepie-secondary-700 dark:hover:text-litepie-secondary-300 dark:focus:bg-litepie-secondary-600 dark:focus:text-litepie-secondary-100 dark:focus:border-litepie-primary-500 dark:focus:ring-opacity-25"
           v-text="calendar.year"
           @click="calendar.openYear()"
         ></button>
       </span>
     </div>
     <div class="flex-shrink-0">
-      <span class="inline-flex rounded-full">
+      <span
+        v-show="panel.calendar || panel.year"
+        class="inline-flex rounded-full"
+      >
         <button
           type="button"
           class="p-1.5 rounded-full bg-white text-litepie-secondary-600 transition-colors border border-transparent hover:bg-litepie-secondary-100 hover:text-litepie-secondary-900 focus:bg-litepie-primary-50 focus:text-litepie-secondary-900 focus:border-litepie-primary-300 focus:ring focus:ring-litepie-primary-500 focus:ring-opacity-10 focus:outline-none dark:bg-litepie-secondary-800 dark:text-litepie-secondary-300 dark:hover:bg-litepie-secondary-700 dark:hover:text-litepie-secondary-300 dark:focus:bg-litepie-secondary-600 dark:focus:text-litepie-secondary-100 dark:focus:border-litepie-primary-500 dark:focus:ring-opacity-25"
diff --git a/src/components/Shortcut.vue b/src/components/Shortcut.vue
index 6917d75..72c35ed 100644
--- a/src/components/Shortcut.vue
+++ b/src/components/Shortcut.vue
@@ -1,16 +1,16 @@
 <template>
   <div
     v-if="asRange && !asSingle"
-    class="relative w-full border-t sm:border-t-0 sm:border-r border-black border-opacity-10 order-last sm:order-none dark:border-litepie-secondary-700 dark:border-opacity-100 sm:mt-1 sm:mr-1"
+    class="relative w-full border-t border-b-0 sm:border-t-0 sm:border-b lg:border-b-0 lg:border-r border-black border-opacity-10 order-last sm:order-none dark:border-litepie-secondary-700 dark:border-opacity-100 sm:mt-1 lg:mr-1 sm:mb-1 lg:mb-0 sm:mx-1 lg:mx-0"
   >
     <ol
       v-if="withShortcut()"
-      class="grid grid-cols-2 gap-1 sm:block w-full pr-0 sm:pr-1 mt-1.5 sm:mt-0"
+      class="grid grid-cols-2 sm:grid-cols-3 gap-1 lg:block w-full pr-0 sm:pr-1 mt-1.5 sm:mt-0 sm:mb-1.5 lg:mb-0"
     >
       <li v-for="(item, i) in withShortcut()" :key="i">
         <a
           href="#"
-          class="block text-xs 2xl:text-sm px-2 py-1.5 whitespace-nowrap font-medium rounded text-litepie-primary-600 hover:text-litepie-primary-700 transition-colors hover:bg-litepie-secondary-100 focus:bg-litepie-secondary-100 focus:text-litepie-primary-600 dark:hover:bg-litepie-secondary-700 dark:hover:text-litepie-primary-300 dark:text-litepie-primary-400 dark:focus:bg-litepie-secondary-700 dark:focus:text-litepie-primary-300"
+          class="block text-sm lg:text-xs px-2 py-2 sm:leading-4 whitespace-nowrap font-medium rounded text-litepie-primary-600 hover:text-litepie-primary-700 transition-colors hover:bg-litepie-secondary-100 focus:bg-litepie-secondary-100 focus:text-litepie-primary-600 dark:hover:bg-litepie-secondary-700 dark:hover:text-litepie-primary-300 dark:text-litepie-primary-400 dark:focus:bg-litepie-secondary-700 dark:focus:text-litepie-primary-300"
           @click.prevent="setToCustomShortcut(item)"
           v-text="item.label"
         >
@@ -19,12 +19,12 @@
     </ol>
     <ol
       v-else
-      class="grid grid-cols-2 gap-1 sm:block w-full pr-0 sm:pr-1 mt-1.5 sm:mt-0"
+      class="grid grid-cols-2 sm:grid-cols-3 gap-1 lg:block w-full pr-0 sm:pr-1 mt-1.5 sm:mt-0 sm:mb-1.5 lg:mb-0"
     >
       <li>
         <a
           href="#"
-          class="block text-xs 2xl:text-sm px-2 py-1.5 whitespace-nowrap font-medium rounded text-litepie-primary-600 hover:text-litepie-primary-700 transition-colors hover:bg-litepie-secondary-100 focus:bg-litepie-secondary-100 focus:text-litepie-primary-600 dark:hover:bg-litepie-secondary-700 dark:hover:text-litepie-primary-300 dark:text-litepie-primary-400 dark:focus:bg-litepie-secondary-700 dark:focus:text-litepie-primary-300"
+          class="block text-sm lg:text-xs px-2 py-2 sm:leading-4 whitespace-nowrap font-medium rounded text-litepie-primary-600 hover:text-litepie-primary-700 transition-colors hover:bg-litepie-secondary-100 focus:bg-litepie-secondary-100 focus:text-litepie-primary-600 dark:hover:bg-litepie-secondary-700 dark:hover:text-litepie-primary-300 dark:text-litepie-primary-400 dark:focus:bg-litepie-secondary-700 dark:focus:text-litepie-primary-300"
           @click.prevent="setToToday"
         >
           Today
@@ -33,7 +33,7 @@
       <li>
         <a
           href="#"
-          class="block text-xs 2xl:text-sm px-2 py-1.5 whitespace-nowrap font-medium rounded text-litepie-primary-600 hover:text-litepie-primary-700 transition-colors hover:bg-litepie-secondary-100 focus:bg-litepie-secondary-100 focus:text-litepie-primary-600 dark:hover:bg-litepie-secondary-700 dark:hover:text-litepie-primary-300 dark:text-litepie-primary-400 dark:focus:bg-litepie-secondary-700 dark:focus:text-litepie-primary-300"
+          class="block text-sm lg:text-xs px-2 py-2 sm:leading-4 whitespace-nowrap font-medium rounded text-litepie-primary-600 hover:text-litepie-primary-700 transition-colors hover:bg-litepie-secondary-100 focus:bg-litepie-secondary-100 focus:text-litepie-primary-600 dark:hover:bg-litepie-secondary-700 dark:hover:text-litepie-primary-300 dark:text-litepie-primary-400 dark:focus:bg-litepie-secondary-700 dark:focus:text-litepie-primary-300"
           @click.prevent="setToYesterday"
         >
           Yesterday
@@ -42,7 +42,7 @@
       <li>
         <a
           href="#"
-          class="block text-xs 2xl:text-sm px-2 py-1.5 whitespace-nowrap font-medium rounded text-litepie-primary-600 hover:text-litepie-primary-700 transition-colors hover:bg-litepie-secondary-100 focus:bg-litepie-secondary-100 focus:text-litepie-primary-600 dark:hover:bg-litepie-secondary-700 dark:hover:text-litepie-primary-300 dark:text-litepie-primary-400 dark:focus:bg-litepie-secondary-700 dark:focus:text-litepie-primary-300"
+          class="block text-sm lg:text-xs px-2 py-2 sm:leading-4 whitespace-nowrap font-medium rounded text-litepie-primary-600 hover:text-litepie-primary-700 transition-colors hover:bg-litepie-secondary-100 focus:bg-litepie-secondary-100 focus:text-litepie-primary-600 dark:hover:bg-litepie-secondary-700 dark:hover:text-litepie-primary-300 dark:text-litepie-primary-400 dark:focus:bg-litepie-secondary-700 dark:focus:text-litepie-primary-300"
           @click.prevent="setToLastDay(7)"
         >
           Last 7 Days
@@ -51,7 +51,7 @@
       <li>
         <a
           href="#"
-          class="block text-xs 2xl:text-sm px-2 py-1.5 whitespace-nowrap font-medium rounded text-litepie-primary-600 hover:text-litepie-primary-700 transition-colors hover:bg-litepie-secondary-100 focus:bg-litepie-secondary-100 focus:text-litepie-primary-600 dark:hover:bg-litepie-secondary-700 dark:hover:text-litepie-primary-300 dark:text-litepie-primary-400 dark:focus:bg-litepie-secondary-700 dark:focus:text-litepie-primary-300"
+          class="block text-sm lg:text-xs px-2 py-2 sm:leading-4 whitespace-nowrap font-medium rounded text-litepie-primary-600 hover:text-litepie-primary-700 transition-colors hover:bg-litepie-secondary-100 focus:bg-litepie-secondary-100 focus:text-litepie-primary-600 dark:hover:bg-litepie-secondary-700 dark:hover:text-litepie-primary-300 dark:text-litepie-primary-400 dark:focus:bg-litepie-secondary-700 dark:focus:text-litepie-primary-300"
           @click.prevent="setToLastDay(30)"
         >
           Last 30 Days
@@ -60,7 +60,7 @@
       <li>
         <a
           href="#"
-          class="block text-xs 2xl:text-sm px-2 py-1.5 whitespace-nowrap font-medium rounded text-litepie-primary-600 hover:text-litepie-primary-700 transition-colors hover:bg-litepie-secondary-100 focus:bg-litepie-secondary-100 focus:text-litepie-primary-600 dark:hover:bg-litepie-secondary-700 dark:hover:text-litepie-primary-300 dark:text-litepie-primary-400 dark:focus:bg-litepie-secondary-700 dark:focus:text-litepie-primary-300"
+          class="block text-sm lg:text-xs px-2 py-2 sm:leading-4 whitespace-nowrap font-medium rounded text-litepie-primary-600 hover:text-litepie-primary-700 transition-colors hover:bg-litepie-secondary-100 focus:bg-litepie-secondary-100 focus:text-litepie-primary-600 dark:hover:bg-litepie-secondary-700 dark:hover:text-litepie-primary-300 dark:text-litepie-primary-400 dark:focus:bg-litepie-secondary-700 dark:focus:text-litepie-primary-300"
           @click.prevent="setToThisMonth"
         >
           This Month
@@ -69,7 +69,7 @@
       <li>
         <a
           href="#"
-          class="block text-xs 2xl:text-sm px-2 py-1.5 whitespace-nowrap font-medium rounded text-litepie-primary-600 hover:text-litepie-primary-700 transition-colors hover:bg-litepie-secondary-100 focus:bg-litepie-secondary-100 focus:text-litepie-primary-600 dark:hover:bg-litepie-secondary-700 dark:hover:text-litepie-primary-300 dark:text-litepie-primary-400 dark:focus:bg-litepie-secondary-700 dark:focus:text-litepie-primary-300"
+          class="block text-sm lg:text-xs px-2 py-2 sm:leading-4 whitespace-nowrap font-medium rounded text-litepie-primary-600 hover:text-litepie-primary-700 transition-colors hover:bg-litepie-secondary-100 focus:bg-litepie-secondary-100 focus:text-litepie-primary-600 dark:hover:bg-litepie-secondary-700 dark:hover:text-litepie-primary-300 dark:text-litepie-primary-400 dark:focus:bg-litepie-secondary-700 dark:focus:text-litepie-primary-300"
           @click.prevent="setToLastMonth"
         >
           Last Month
diff --git a/src/components/Week.vue b/src/components/Week.vue
index b626d35..f372ea0 100644
--- a/src/components/Week.vue
+++ b/src/components/Week.vue
@@ -1,11 +1,10 @@
 <template>
-  <div class="flex py-2 mt-0.5 border-b border-black border-opacity-10 dark:border-litepie-secondary-700 dark:border-opacity-100">
+  <div
+    class="grid grid-cols-7 py-2 mt-0.5 border-b border-black border-opacity-10 dark:border-litepie-secondary-700 dark:border-opacity-100"
+  >
     <div
       v-for="(day, keyDay) in weeks"
       :key="keyDay"
-      :style="{
-        width: `calc(100% / ${weeks.length})`
-      }"
       class="text-litepie-secondary-500 text-xs 2xl:text-sm tracking-wide font-medium text-center cursor-default dark:text-litepie-secondary-400"
     >
       <span v-text="day"> </span>
diff --git a/src/lib/fn.js b/src/lib/fn.js
index 39680a9..bc89c76 100644
--- a/src/lib/fn.js
+++ b/src/lib/fn.js
@@ -41,7 +41,13 @@ export const useDisableDate = (date, { disableDate }) => {
 };
 
 export const useBetweenRange = (date, { previous, next }) => {
-  return !!(date.isBetween(previous, next, 'date', '[]') && !date.off);
+  let pattern;
+  if (previous.isAfter(next, 'date')) {
+    pattern = '(]';
+  } else {
+    pattern = '[)';
+  }
+  return !!(date.isBetween(previous, next, 'date', pattern) && !date.off);
 };
 
 export const useToValueFromString = (date, { formatter }) => {
diff --git a/src/litepie-datepicker.vue b/src/litepie-datepicker.vue
index b2124ce..336f86e 100644
--- a/src/litepie-datepicker.vue
+++ b/src/litepie-datepicker.vue
@@ -72,7 +72,7 @@
           <div
             class="litepie-datepicker static sm:relative w-full bg-white sm:rounded-lg sm:shadow-sm border-0 sm:border border-black border-opacity-10 px-3 py-3 sm:px-1 sm:py-1.5 dark:bg-litepie-secondary-800 dark:border-litepie-secondary-700 dark:border-opacity-100"
           >
-            <div class="flex flex-wrap sm:flex-nowrap">
+            <div class="flex flex-wrap lg:flex-nowrap">
               <!--          Shortcut-->
               <litepie-shortcut
                 v-if="shortcuts"
@@ -91,7 +91,7 @@
                   ></div>
                 </div>
                 <div
-                  class="relative w-full sm:w-60 xl:w-72 2xl:w-80"
+                  class="relative w-full sm:w-80"
                   :class="{
                     'mb-3 sm:mb-0 sm:mr-2': asRange() && !asSingle
                   }"
@@ -132,7 +132,7 @@
                 <!--          If use range-->
                 <div
                   v-if="asRange() && !asSingle"
-                  class="relative w-full sm:w-60 xl:w-72 2xl:w-80 overflow-hidden mt-3 sm:mt-0 sm:ml-2"
+                  class="relative w-full sm:w-80 overflow-hidden mt-3 sm:mt-0 sm:ml-2"
                 >
                   <!--            Header-->
                   <litepie-header
@@ -184,15 +184,13 @@
                       asSingle ? applyValue.length < 1 : applyValue.length < 2
                     "
                     @click="applyDate"
-                  >
-                    Apply
-                  </button>
+                    v-text="footer.apply"
+                  ></button>
                   <button
                     type="button"
                     class="mt-3 away-cancel-picker w-full transition ease-out duration-300 inline-flex justify-center rounded-md border border-litepie-secondary-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-litepie-secondary-700 hover:bg-litepie-secondary-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-litepie-primary-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm dark:ring-offset-litepie-secondary-800"
-                  >
-                    Cancel
-                  </button>
+                    v-text="footer.cancel"
+                  ></button>
                 </div>
               </div>
             </div>
@@ -204,9 +202,8 @@
                   <button
                     type="button"
                     class="away-cancel-picker w-full transition ease-out duration-300 inline-flex justify-center rounded-md border border-litepie-secondary-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-litepie-secondary-700 hover:bg-litepie-secondary-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-litepie-primary-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm dark:ring-offset-litepie-secondary-800"
-                  >
-                    Cancel
-                  </button>
+                    v-text="footer.cancel"
+                  ></button>
                 </div>
               </div>
             </div>
@@ -333,6 +330,13 @@ export default /*#__PURE__*/ defineComponent({
     startFrom: {
       type: [Object, String],
       default: () => new Date()
+    },
+    footer: {
+      type: Object,
+      default: () => ({
+        apply: 'Apply',
+        cancel: 'Cancel'
+      })
     }
   },
   inheritAttrs: false,
@@ -674,6 +678,10 @@ export default /*#__PURE__*/ defineComponent({
       LitepieInputRef.value && LitepieInputRef.value.focus();
     };
 
+    /**
+     * keyUp event
+     * @since v1.0.5
+     */
     const keyUp = () => {
       if (asRange()) {
         const [s, e] = value.value.split(props.separator);
@@ -1142,20 +1150,20 @@ export default /*#__PURE__*/ defineComponent({
       if (s && e) {
         if (date.isSame(s, 'date')) {
           if (e.isBefore(s)) {
-            classes += ` rounded-r-full inset-y-0 left-0 right-0.5`;
+            classes += ` rounded-r-full inset-0`;
           }
           if (s.isBefore(e)) {
-            classes += ` rounded-l-full inset-y-0 left-0.5 right-0`;
+            classes += ` rounded-l-full inset-0`;
           }
         } else if (date.isSame(e, 'date')) {
           if (e.isBefore(s)) {
-            classes += ` rounded-l-full inset-y-0 left-0.5 right-0`;
+            classes += ` rounded-l-full inset-0`;
           }
           if (s.isBefore(e)) {
-            classes += ` rounded-r-full inset-y-0 left-0 right-0.5`;
+            classes += ` rounded-r-full inset-0`;
           }
         } else {
-          classes += ` inset-y-0 left-0 right-0`;
+          classes += ` inset-0`;
         }
       }
       return classes;
diff --git a/tailwind.config.js b/tailwind.config.js
index 025bc6e..bb83022 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -17,11 +17,14 @@ module.exports = {
         lime: colors.lime,
         orange: colors.orange,
         'light-blue': colors.lightBlue,
-        'litepie-primary': colors.lightBlue,
+        'litepie-primary': colors.emerald,
         'litepie-secondary': colors.coolGray
       },
       fontFamily: {
         sans: ['Inter', ...fontFamily.sans]
+      },
+      opacity: {
+        85: '0.85'
       }
     }
   },