diff --git a/package-lock.json b/package-lock.json
index 69901a83..3595a950 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,7 +10,7 @@
       "license": "MIT",
       "dependencies": {
         "@mdi/js": "^7.4.47",
-        "@vuepic/vue-datepicker": "^8.3.2",
+        "@vuepic/vue-datepicker": "^8.7.0",
         "axios": "^1.6.8",
         "cbor-js": "^0.1.0",
         "clipboard": "^2.0.11",
@@ -3761,9 +3761,9 @@
       "license": "MIT"
     },
     "node_modules/@vuepic/vue-datepicker": {
-      "version": "8.3.2",
-      "resolved": "https://registry.npmjs.org/@vuepic/vue-datepicker/-/vue-datepicker-8.3.2.tgz",
-      "integrity": "sha512-kOAUl6EVGU7BgNByjUuLRBUWvTBiYJHUj9jll7fTQSz/vNNkhYoo8vEH75zPMXyVmn1gRmeoom4cMl77GtNraw==",
+      "version": "8.7.0",
+      "resolved": "https://registry.npmjs.org/@vuepic/vue-datepicker/-/vue-datepicker-8.7.0.tgz",
+      "integrity": "sha512-EqL51GdaRg6AExVuPCOmnO81n9+oLqgTi+LlST44TwU0UcX0UfefHx1HXwV948fAqBgj0ESgTyDvjXx7EFFL2A==",
       "dependencies": {
         "date-fns": "^3.6.0"
       },
diff --git a/package.json b/package.json
index 5231a6fe..ef367bde 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,7 @@
   },
   "dependencies": {
     "@mdi/js": "^7.4.47",
-    "@vuepic/vue-datepicker": "^8.3.2",
+    "@vuepic/vue-datepicker": "^8.7.0",
     "axios": "^1.6.8",
     "cbor-js": "^0.1.0",
     "clipboard": "^2.0.11",
diff --git a/src/styles/desktop/global.scss b/src/styles/desktop/global.scss
index f50ca2b0..18cc7236 100644
--- a/src/styles/desktop/global.scss
+++ b/src/styles/desktop/global.scss
@@ -317,37 +317,19 @@ body .v-btn-group {
 
 /** Fix @vuepic/vue-datepicker style issue **/
 .dp__main.dp__flex_display {
-    flex-direction: column
+    flex-direction: column;
 }
 
 .dp__main .dp--tp-wrap {
     max-width: 100%;
 }
 
-.dp__main .dp__preset_range {
-    white-space: inherit;
-}
-
 .dp__main .dp__menu_inner {
     padding-top: 0;
     padding-bottom: 0;
 }
 
-.dp__main .dp__menu_inner .dp__month_year_row > button {
-    width: inherit;
-}
-
-.dp__main .dp__menu_inner .dp__month_year_row > button.dp__button {
-    width: 100%;
-}
-
-.dp__main .dp__menu_inner .dp__month_year_row .dp__month_year_wrap > button {
-    line-height: inherit;
-}
-
 .dp__main .dp__calendar .dp__calendar_item {
-    display: flex;
-    justify-content: center;
     flex: 1;
 }
 
diff --git a/src/styles/mobile/global.css b/src/styles/mobile/global.css
index fdab953c..2135933f 100644
--- a/src/styles/mobile/global.css
+++ b/src/styles/mobile/global.css
@@ -578,37 +578,23 @@ i.icon.la, i.icon.las, i.icon.lab {
 
 /** Fix @vuepic/vue-datepicker style issue **/
 .dp__main.dp__flex_display {
-    flex-direction: column
+    flex-direction: column;
 }
 
 .dp__main .dp--tp-wrap {
     max-width: 100%;
 }
 
-.dp__main .dp__preset_range {
-    white-space: inherit;
-}
-
 .dp__main .dp__menu_inner {
     padding-top: 0;
     padding-bottom: 0;
 }
 
-.dp__main .dp__menu_inner .dp__month_year_row > button {
-    width: inherit;
-}
-
-.dp__main .dp__menu_inner .dp__month_year_row > button.dp__button {
-    width: 100%;
-}
-
-.dp__main .dp__menu_inner .dp__month_year_row .dp__month_year_wrap > button {
-    line-height: inherit;
+.dp__main .dp__menu_inner .dp--header-wrap > .dp__month_year_wrap > button {
+    width: unset;
 }
 
 .dp__main .dp__calendar .dp__calendar_item {
-    display: flex;
-    justify-content: center;
     flex: 1;
 }
 
diff --git a/third-party-dependencies.json b/third-party-dependencies.json
index 79f94df6..c4a9c21e 100644
--- a/third-party-dependencies.json
+++ b/third-party-dependencies.json
@@ -198,7 +198,7 @@
         "name": "@vuepic/vue-datepicker",
         "copyright": "Copyright (c) 2021-present Vuepic",
         "url": "https://vue3datepicker.com/",
-        "licenseUrl": "https://github.com/Vuepic/vue-datepicker/blob/v8.3.2/LICENSE"
+        "licenseUrl": "https://github.com/Vuepic/vue-datepicker/blob/v8.7.0/LICENSE"
     },
     {
         "name": "axios",