diff --git a/src/client/routes/settings.tsx b/src/client/routes/settings.tsx
index 8d15193..eb56fd0 100644
--- a/src/client/routes/settings.tsx
+++ b/src/client/routes/settings.tsx
@@ -1,5 +1,67 @@
-import { createFileRoute } from '@tanstack/react-router'
+import { CommonHeader } from '@/components/CommonHeader';
+import { CommonList } from '@/components/CommonList';
+import { CommonWrapper } from '@/components/CommonWrapper';
+import { Layout } from '@/components/layout';
+// import { LayoutV2 } from '@/pages/LayoutV2';
+import { routeAuthBeforeLoad } from '@/utils/route';
+import { useTranslation } from '@i18next-toolkit/react';
+import {
+  createFileRoute,
+  useNavigate,
+  useRouterState,
+} from '@tanstack/react-router';
+import { useEffect } from 'react';
 
 export const Route = createFileRoute('/settings')({
-  component: () => <div>Hello /settings!</div>
-})
\ No newline at end of file
+  beforeLoad: routeAuthBeforeLoad,
+  component: PageComponent,
+});
+
+function PageComponent() {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const pathname = useRouterState({
+    select: (state) => state.location.pathname,
+  });
+
+  const items = [
+    {
+      id: 'profile',
+      title: t('Profile'),
+      href: '/settings/profile',
+    },
+    {
+      id: 'notifications',
+      title: t('Notifications'),
+      href: '/settings/notifications',
+    },
+    {
+      id: 'auditLog',
+      title: t('Audit Log'),
+      href: '/settings/auditLog',
+    },
+    {
+      id: 'usage',
+      title: t('Usage'),
+      href: '/settings/usage',
+    },
+  ];
+
+  useEffect(() => {
+    if (pathname === Route.fullPath) {
+      navigate({
+        to: '/settings/profile',
+      });
+    }
+  }, []);
+
+  return (
+    <Layout
+      list={
+        <CommonWrapper header={<CommonHeader title={t('Settings')} />}>
+          <CommonList items={items} />
+        </CommonWrapper>
+      }
+    />
+  );
+}