diff --git a/src/app/(main)/reports/[id]/FilterSelectForm.js b/src/app/(main)/reports/[id]/FilterSelectForm.js
index 5265c741..6ecd7751 100644
--- a/src/app/(main)/reports/[id]/FilterSelectForm.js
+++ b/src/app/(main)/reports/[id]/FilterSelectForm.js
@@ -1,16 +1,20 @@
 import { useState } from 'react';
 import FieldSelectForm from './FieldSelectForm';
 import FieldFilterForm from './FieldFilterForm';
-import { useApi } from 'components/hooks';
+import { useApi, useDateRange } from 'components/hooks';
 import { Loading } from 'react-basics';
 
 function useValues(websiteId, type) {
   const { get, useQuery } = useApi();
+  const [dateRange] = useDateRange(websiteId);
+  const { startDate, endDate } = dateRange;
   const { data, error, isLoading } = useQuery(
     ['websites:values', websiteId, type],
     () =>
       get(`/websites/${websiteId}/values`, {
         type,
+        startAt: +startDate,
+        endAt: +endDate,
       }),
     { enabled: !!(websiteId && type) },
   );
diff --git a/src/pages/api/websites/[id]/values.ts b/src/pages/api/websites/[id]/values.ts
index 85d029d0..64fad1f2 100644
--- a/src/pages/api/websites/[id]/values.ts
+++ b/src/pages/api/websites/[id]/values.ts
@@ -5,15 +5,20 @@ import { NextApiResponse } from 'next';
 import { badRequest, methodNotAllowed, ok, unauthorized } from 'next-basics';
 import { EVENT_COLUMNS, FILTER_COLUMNS, SESSION_COLUMNS } from 'lib/constants';
 import { getValues } from 'queries';
+import { parseDateRangeQuery } from 'lib/query';
 
 export interface ValuesRequestQuery {
   id: string;
+  startAt: number;
+  endAt: number;
 }
 
 import * as yup from 'yup';
 const schema = {
   GET: yup.object().shape({
     id: yup.string().uuid().required(),
+    startAt: yup.number().required(),
+    endAt: yup.number().required(),
   }),
 };
 
@@ -23,6 +28,7 @@ export default async (req: NextApiRequestQueryBody<ValuesRequestQuery>, res: Nex
   await useValidate(schema, req, res);
 
   const { id: websiteId, type } = req.query;
+  const { startDate, endDate } = await parseDateRangeQuery(req);
 
   if (req.method === 'GET') {
     if (!SESSION_COLUMNS.includes(type as string) && !EVENT_COLUMNS.includes(type as string)) {
@@ -33,7 +39,7 @@ export default async (req: NextApiRequestQueryBody<ValuesRequestQuery>, res: Nex
       return unauthorized(res);
     }
 
-    const values = await getValues(websiteId, FILTER_COLUMNS[type as string]);
+    const values = await getValues(websiteId, FILTER_COLUMNS[type as string], startDate, endDate);
 
     return ok(
       res,
diff --git a/src/queries/analytics/getValues.ts b/src/queries/analytics/getValues.ts
index 1f088e3b..bda07c72 100644
--- a/src/queries/analytics/getValues.ts
+++ b/src/queries/analytics/getValues.ts
@@ -2,14 +2,16 @@ import prisma from 'lib/prisma';
 import clickhouse from 'lib/clickhouse';
 import { runQuery, CLICKHOUSE, PRISMA } from 'lib/db';
 
-export async function getValues(...args: [websiteId: string, column: string]) {
+export async function getValues(
+  ...args: [websiteId: string, column: string, startDate: Date, endDate: Date]
+) {
   return runQuery({
     [PRISMA]: () => relationalQuery(...args),
     [CLICKHOUSE]: () => clickhouseQuery(...args),
   });
 }
 
-async function relationalQuery(websiteId: string, column: string) {
+async function relationalQuery(websiteId: string, column: string, startDate: Date, endDate: Date) {
   const { rawQuery } = prisma;
 
   return rawQuery(
@@ -19,12 +21,17 @@ async function relationalQuery(websiteId: string, column: string) {
     inner join session
       on session.session_id = website_event.session_id
     where website_event.website_id = {{websiteId::uuid}}
+      and created_at between {{startDate}} and {{endDate}}
     `,
-    { websiteId },
+    {
+      websiteId,
+      startDate,
+      endDate,
+    },
   );
 }
 
-async function clickhouseQuery(websiteId: string, column: string) {
+async function clickhouseQuery(websiteId: string, column: string, startDate: Date, endDate: Date) {
   const { rawQuery } = clickhouse;
 
   return rawQuery(
@@ -32,7 +39,12 @@ async function clickhouseQuery(websiteId: string, column: string) {
     select distinct ${column} as value
     from website_event
     where website_id = {websiteId:UUID}
+      and created_at between {startDate:DateTime64} and {endDate:DateTime64}
     `,
-    { websiteId },
+    {
+      websiteId,
+      startDate,
+      endDate,
+    },
   );
 }