diff --git a/frontend/src/assets/datepicker.css b/frontend/src/assets/datepicker.css
index 8825029..6dfee65 100644
--- a/frontend/src/assets/datepicker.css
+++ b/frontend/src/assets/datepicker.css
@@ -11,6 +11,9 @@
 	/* 次要颜色 */
 	--dp-secondary-color: #9ca3af; /* 对应 Flowbite 的 gray-400 */
 
+	/* 背景颜色 */
+	--dp-background-color: var(--color-gray-50);
+
 	/* 边框颜色 */
 	--dp-border-color: var(--color-gray-300); /* 对应 Flowbite 的 gray-200 */
 	--dp-menu-border-color: #e5e7eb;
diff --git a/frontend/src/components/DateRangePicker.vue b/frontend/src/components/DateRangePicker.vue
deleted file mode 100644
index d675779..0000000
--- a/frontend/src/components/DateRangePicker.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<template>
-  <div id="date-range-picker" date-rangepicker class="flex items-center">
-    <div class="relative">
-      <div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
-        <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
-          fill="currentColor" viewBox="0 0 20 20">
-          <path
-            d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z" />
-        </svg>
-      </div>
-      <input id="datepicker-range-start" name="start" type="text"
-        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full ps-10 p-2.5  dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-        placeholder="Select date start">
-    </div>
-    <span class="mx-4 text-gray-500">to</span>
-    <div class="relative">
-      <div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
-        <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
-          fill="currentColor" viewBox="0 0 20 20">
-          <path
-            d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z" />
-        </svg>
-      </div>
-      <input id="datepicker-range-end" name="end" type="text"
-        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full ps-10 p-2.5  dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-        placeholder="Select date end">
-    </div>
-  </div>
-</template>
-
-<script setup>
-
-</script>
-
-<style scoped></style>