diff --git a/src/client/components/DateFilter.tsx b/src/client/components/DateFilter.tsx
index bae8c28..ed87152 100644
--- a/src/client/components/DateFilter.tsx
+++ b/src/client/components/DateFilter.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { Button, DatePicker, Dropdown, MenuProps, Modal, Space } from 'antd';
 import { Dayjs } from 'dayjs';
 import { DownOutlined } from '@ant-design/icons';
@@ -19,82 +19,85 @@ export const DateFilter: React.FC<DateFilterProps> = React.memo((props) => {
   const { label, startDate, endDate } = useGlobalRangeDate();
   const [range, setRange] = useState<[Dayjs, Dayjs]>([startDate, endDate]);
 
-  const menu: MenuProps = {
-    onClick: () => {
-      setShowDropdown(false);
-    },
-    items: compact([
-      {
-        label: 'Today',
-        onClick: () => {
-          useGlobalStateStore.setState({ dateRange: DateRange.Today });
+  const menu: MenuProps = useMemo(
+    () => ({
+      onClick: () => {
+        setShowDropdown(false);
+      },
+      items: compact([
+        {
+          label: 'Today',
+          onClick: () => {
+            useGlobalStateStore.setState({ dateRange: DateRange.Today });
+          },
         },
-      },
-      {
-        label: 'Last 24 Hours',
-        onClick: () => {
-          useGlobalStateStore.setState({ dateRange: DateRange.Last24Hours });
+        {
+          label: 'Last 24 Hours',
+          onClick: () => {
+            useGlobalStateStore.setState({ dateRange: DateRange.Last24Hours });
+          },
         },
-      },
-      {
-        label: 'Yesterday',
-        onClick: () => {
-          useGlobalStateStore.setState({ dateRange: DateRange.Yesterday });
+        {
+          label: 'Yesterday',
+          onClick: () => {
+            useGlobalStateStore.setState({ dateRange: DateRange.Yesterday });
+          },
         },
-      },
-      {
-        type: 'divider',
-      },
-      {
-        label: 'This week',
-        onClick: () => {
-          useGlobalStateStore.setState({ dateRange: DateRange.ThisWeek });
+        {
+          type: 'divider',
         },
-      },
-      {
-        label: 'Last 7 days',
-        onClick: () => {
-          useGlobalStateStore.setState({ dateRange: DateRange.Last7Days });
+        {
+          label: 'This week',
+          onClick: () => {
+            useGlobalStateStore.setState({ dateRange: DateRange.ThisWeek });
+          },
         },
-      },
-      {
-        type: 'divider',
-      },
-      {
-        label: 'This Month',
-        onClick: () => {
-          useGlobalStateStore.setState({ dateRange: DateRange.ThisMonth });
+        {
+          label: 'Last 7 days',
+          onClick: () => {
+            useGlobalStateStore.setState({ dateRange: DateRange.Last7Days });
+          },
         },
-      },
-      {
-        label: 'Last 30 days',
-        onClick: () => {
-          useGlobalStateStore.setState({ dateRange: DateRange.Last30Days });
+        {
+          type: 'divider',
         },
-      },
-      {
-        label: 'Last 90 days',
-        onClick: () => {
-          useGlobalStateStore.setState({ dateRange: DateRange.Last90Days });
+        {
+          label: 'This Month',
+          onClick: () => {
+            useGlobalStateStore.setState({ dateRange: DateRange.ThisMonth });
+          },
         },
-      },
-      {
-        label: 'This year',
-        onClick: () => {
-          useGlobalStateStore.setState({ dateRange: DateRange.ThisYear });
+        {
+          label: 'Last 30 days',
+          onClick: () => {
+            useGlobalStateStore.setState({ dateRange: DateRange.Last30Days });
+          },
         },
-      },
-      {
-        type: 'divider',
-      },
-      {
-        label: 'Custom',
-        onClick: () => {
-          setShowPicker(true);
+        {
+          label: 'Last 90 days',
+          onClick: () => {
+            useGlobalStateStore.setState({ dateRange: DateRange.Last90Days });
+          },
         },
-      },
-    ] as MenuProps['items']),
-  };
+        {
+          label: 'This year',
+          onClick: () => {
+            useGlobalStateStore.setState({ dateRange: DateRange.ThisYear });
+          },
+        },
+        {
+          type: 'divider',
+        },
+        {
+          label: 'Custom',
+          onClick: () => {
+            setShowPicker(true);
+          },
+        },
+      ] as MenuProps['items']),
+    }),
+    []
+  );
 
   return (
     <>
diff --git a/src/client/components/MetricCard.tsx b/src/client/components/website/MetricCard.tsx
similarity index 95%
rename from src/client/components/MetricCard.tsx
rename to src/client/components/website/MetricCard.tsx
index c9e058a..3713a5b 100644
--- a/src/client/components/MetricCard.tsx
+++ b/src/client/components/website/MetricCard.tsx
@@ -1,6 +1,6 @@
 import { Tag } from 'antd';
 import React from 'react';
-import { formatNumber } from '../utils/common';
+import { formatNumber } from '../../utils/common';
 
 interface MetricCardProps {
   value?: number;
diff --git a/src/client/components/WebsiteInfo.tsx b/src/client/components/website/WebsiteInfo.tsx
similarity index 83%
rename from src/client/components/WebsiteInfo.tsx
rename to src/client/components/website/WebsiteInfo.tsx
index 029cb7f..456f9e9 100644
--- a/src/client/components/WebsiteInfo.tsx
+++ b/src/client/components/website/WebsiteInfo.tsx
@@ -1,21 +1,21 @@
 import { Button, Form, Input, message, Popconfirm, Tabs } from 'antd';
 import React from 'react';
 import { useNavigate, useParams } from 'react-router';
-import { deleteWorkspaceWebsite } from '../api/model/website';
-import { useRequest } from '../hooks/useRequest';
-import { useCurrentWorkspaceId } from '../store/user';
-import { ErrorTip } from './ErrorTip';
-import { Loading } from './Loading';
-import { NoWorkspaceTip } from './NoWorkspaceTip';
-import { MonitorPicker } from './monitor/MonitorPicker';
+import { deleteWorkspaceWebsite } from '../../api/model/website';
+import { useRequest } from '../../hooks/useRequest';
+import { useCurrentWorkspaceId } from '../../store/user';
+import { ErrorTip } from '../ErrorTip';
+import { Loading } from '../Loading';
+import { NoWorkspaceTip } from '../NoWorkspaceTip';
+import { MonitorPicker } from '../monitor/MonitorPicker';
 import {
   defaultErrorHandler,
   defaultSuccessHandler,
   getQueryKey,
   trpc,
-} from '../api/trpc';
+} from '../../api/trpc';
 import { useQueryClient } from '@tanstack/react-query';
-import { useEvent } from '../hooks/useEvent';
+import { useEvent } from '../../hooks/useEvent';
 
 export const WebsiteInfo: React.FC = React.memo(() => {
   const workspaceId = useCurrentWorkspaceId();
@@ -107,7 +107,11 @@ export const WebsiteInfo: React.FC = React.memo(() => {
                 <Input size="large" />
               </Form.Item>
 
-              <Form.Item label="Monitor" name="monitorId" tooltip="You can bind a monitor which will display health status in website overview">
+              <Form.Item
+                label="Monitor"
+                name="monitorId"
+                tooltip="You can bind a monitor which will display health status in website overview"
+              >
                 <MonitorPicker size="large" allowClear={true} />
               </Form.Item>
 
diff --git a/src/client/components/WebsiteList.tsx b/src/client/components/website/WebsiteList.tsx
similarity index 93%
rename from src/client/components/WebsiteList.tsx
rename to src/client/components/website/WebsiteList.tsx
index 7aa197b..f599dcd 100644
--- a/src/client/components/WebsiteList.tsx
+++ b/src/client/components/website/WebsiteList.tsx
@@ -12,15 +12,15 @@ import {
   refreshWorkspaceWebsites,
   useWorspaceWebsites,
   WebsiteInfo,
-} from '../api/model/website';
-import { Loading } from './Loading';
-import { NoWorkspaceTip } from './NoWorkspaceTip';
-import { useRequest } from '../hooks/useRequest';
-import { useUserStore } from '../store/user';
-import { useEvent } from '../hooks/useEvent';
+} from '../../api/model/website';
+import { Loading } from '../Loading';
+import { NoWorkspaceTip } from '../NoWorkspaceTip';
+import { useRequest } from '../../hooks/useRequest';
+import { useUserStore } from '../../store/user';
+import { useEvent } from '../../hooks/useEvent';
 import { useNavigate } from 'react-router';
-import { PageHeader } from './PageHeader';
-import { ModalButton } from './ModalButton';
+import { PageHeader } from '../PageHeader';
+import { ModalButton } from '../ModalButton';
 
 export const WebsiteList: React.FC = React.memo(() => {
   const [isModalOpen, setIsModalOpen] = useState(false);
diff --git a/src/client/components/WebsiteOnlineCount.tsx b/src/client/components/website/WebsiteOnlineCount.tsx
similarity index 94%
rename from src/client/components/WebsiteOnlineCount.tsx
rename to src/client/components/website/WebsiteOnlineCount.tsx
index 50ce6f1..233b74e 100644
--- a/src/client/components/WebsiteOnlineCount.tsx
+++ b/src/client/components/website/WebsiteOnlineCount.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { trpc } from '../api/trpc';
+import { trpc } from '../../api/trpc';
 
 export const WebsiteOnlineCount: React.FC<{
   workspaceId: string;
diff --git a/src/client/components/website/WebsiteOverview.tsx b/src/client/components/website/WebsiteOverview.tsx
index b47ef1b..677c923 100644
--- a/src/client/components/website/WebsiteOverview.tsx
+++ b/src/client/components/website/WebsiteOverview.tsx
@@ -16,10 +16,10 @@ import {
   getDateArray,
 } from '../../utils/date';
 import { useEvent } from '../../hooks/useEvent';
-import { MetricCard } from '../MetricCard';
+import { MetricCard } from './MetricCard';
 import { formatNumber, formatShortTime } from '../../utils/common';
 import { useTheme } from '../../hooks/useTheme';
-import { WebsiteOnlineCount } from '../WebsiteOnlineCount';
+import { WebsiteOnlineCount } from './WebsiteOnlineCount';
 import { useGlobalRangeDate } from '../../hooks/useGlobalRangeDate';
 import { MonitorHealthBar } from '../monitor/MonitorHealthBar';
 import { useNavigate } from 'react-router';
diff --git a/src/client/pages/Settings/index.tsx b/src/client/pages/Settings/index.tsx
index 04d04b1..890d3b2 100644
--- a/src/client/pages/Settings/index.tsx
+++ b/src/client/pages/Settings/index.tsx
@@ -1,8 +1,8 @@
 import { Menu, MenuProps } from 'antd';
 import React from 'react';
 import { Routes, Route, useLocation, useNavigate } from 'react-router-dom';
-import { WebsiteInfo } from '../../components/WebsiteInfo';
-import { WebsiteList } from '../../components/WebsiteList';
+import { WebsiteInfo } from '../../components/website/WebsiteInfo';
+import { WebsiteList } from '../../components/website/WebsiteList';
 import { useEvent } from '../../hooks/useEvent';
 import { NotificationList } from './NotificationList';
 import { Profile } from './Profile';
diff --git a/src/client/pages/Website/index.tsx b/src/client/pages/Website/index.tsx
index d7da661..a769dd5 100644
--- a/src/client/pages/Website/index.tsx
+++ b/src/client/pages/Website/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Route, Routes } from 'react-router';
-import { WebsiteList } from '../../components/WebsiteList';
+import { WebsiteList } from '../../components/website/WebsiteList';
 import { WebsiteDetail } from './Detail';
 
 export const WebsitePage: React.FC = React.memo(() => {