diff --git a/src/pages/15_dash-board/MainPage.vue b/src/pages/15_dash-board/MainPage.vue
index 8688f49b..3e757a9e 100644
--- a/src/pages/15_dash-board/MainPage.vue
+++ b/src/pages/15_dash-board/MainPage.vue
@@ -97,7 +97,7 @@ watch(
         teleport
         auto-apply
         for="select-date-range"
-        class="col-md-4 col"
+        class="col-md-3 col"
         v-model="state.date"
         :dark="$q.dark.isActive"
         :locale="$i18n.locale === 'tha' ? 'th' : 'en'"
@@ -118,6 +118,13 @@ watch(
             <template #prepend>
               <q-icon name="mdi-calendar-outline" class="app-text-muted" />
             </template>
+            <q-tooltip>
+              {{
+                dateFormatJS({ date: state.date[0] }) +
+                '  -  ' +
+                dateFormatJS({ date: state.date[1] })
+              }}
+            </q-tooltip>
           </q-input>
         </template>
       </VueDatePicker>