diff --git a/frontend/src/pages/admin/cloud-variables/[id]/records.vue b/frontend/src/pages/admin/cloud-variables/[id]/records.vue
index 67d1b23..fc47f92 100644
--- a/frontend/src/pages/admin/cloud-variables/[id]/records.vue
+++ b/frontend/src/pages/admin/cloud-variables/[id]/records.vue
@@ -13,6 +13,7 @@ import DataTable from '@/components/data-table/data-table.vue'
 import { SelectColumn } from '@/components/data-table/table-columns'
 import { generateVueTable } from '@/components/data-table/use-generate-vue-table'
 import DataTableViewOptions from '@/components/data-table/view-options.vue'
+import DateTimePicker from '@/components/ui/date-picker/DateTimePicker.vue'
 import { BasicPage } from '@/components/global-layout'
 import Badge from '@/components/ui/badge/Badge.vue'
 import Button from '@/components/ui/button/Button.vue'
@@ -89,14 +90,36 @@ const records = ref<VariableRecord[]>([])
 const total = ref(0)
 const page = ref(1)
 const pageSize = ref(10)
-const startDate = ref('')
-const endDate = ref('')
+const dateRange = ref<{ from: string, to: string }>({ from: '', to: '' })
 const searchQuery = ref('')
 const selectedIds = ref<number[]>([])
 const deleteDialogOpen = ref(false)
 const deleteTargetId = ref<number | null>(null)
 const batchDeleteDialogOpen = ref(false)
 
+function setQuickRange(range: 'today' | 'week' | 'month') {
+  const now = new Date()
+  const today = now.toISOString().split('T')[0]
+  const firstDayOfMonth = new Date(now.getFullYear(), now.getMonth(), 1).toISOString().split('T')[0]
+
+  switch (range) {
+    case 'today':
+      dateRange.value = { from: `${today}T00:00`, to: `${today}T23:59` }
+      break
+    case 'week': {
+      const weekAgo = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000)
+      dateRange.value = {
+        from: `${weekAgo.toISOString().split('T')[0]}T00:00`,
+        to: `${today}T23:59`,
+      }
+      break
+    }
+    case 'month':
+      dateRange.value = { from: `${firstDayOfMonth}T00:00`, to: `${today}T23:59` }
+      break
+  }
+}
+
 const dynamicKeys = computed(() => {
   const keys = new Set<string>()
   records.value.forEach((record) => {
@@ -278,8 +301,8 @@ async function fetchRecords() {
     const params = new URLSearchParams()
     params.append('page', String(page.value))
     params.append('page_size', String(pageSize.value))
-    if (startDate.value) params.append('start_date', startDate.value)
-    if (endDate.value) params.append('end_date', endDate.value)
+    if (dateRange.value.from) params.append('start_date', dateRange.value.from)
+    if (dateRange.value.to) params.append('end_date', dateRange.value.to)
     if (searchQuery.value) params.append('search', searchQuery.value)
 
     const data = await api.get<{ records: VariableRecord[], total: number }>(`/dev/cloud-variables/${variable.value.id}/records?${params}`)
@@ -447,20 +470,26 @@ onMounted(async () => {
                         @keydown.enter="handleSearch"
                       />
                     </div>
-                    <Input
-                      v-model="startDate"
-                      type="date"
-                      class="h-8 w-[140px]"
+                    <DateTimePicker
+                      v-model="dateRange.from"
+                      :placeholder="t('admin.cloudVariables.records.startDate')"
+                      class="w-[180px]"
                     />
-                    <Input
-                      v-model="endDate"
-                      type="date"
-                      class="h-8 w-[140px]"
+                    <span class="text-muted-foreground text-sm">{{ t('admin.finance.to') }}</span>
+                    <DateTimePicker
+                      v-model="dateRange.to"
+                      :placeholder="t('admin.cloudVariables.records.endDate')"
+                      class="w-[180px]"
                     />
-                    <Button variant="outline" size="sm" class="h-8" @click="handleSearch">
-                      <Search class="h-4 w-4 mr-1" />
-                      {{ t('admin.cloudVariables.records.search') }}
-                    </Button>
+                    <UiButton variant="ghost" size="sm" @click="setQuickRange('today')">
+                      {{ t('admin.finance.today') }}
+                    </UiButton>
+                    <UiButton variant="ghost" size="sm" @click="setQuickRange('week')">
+                      {{ t('admin.finance.last7Days') }}
+                    </UiButton>
+                    <UiButton variant="ghost" size="sm" @click="setQuickRange('month')">
+                      {{ t('admin.finance.thisMonth') }}
+                    </UiButton>
                   </div>
                   <DataTableViewOptions :table="table" :column-labels="columnLabels" />
                 </div>