diff --git a/libs/components/layout/src/header/FileSystem.tsx b/libs/components/layout/src/header/FileSystem.tsx
index 30c2b68816..5e8440b4ce 100644
--- a/libs/components/layout/src/header/FileSystem.tsx
+++ b/libs/components/layout/src/header/FileSystem.tsx
@@ -3,8 +3,9 @@ import { useCallback, useMemo, useState } from 'react';
 import { CloseIcon } from '@toeverything/components/common';
 import { IconButton, MuiSnackbar, styled } from '@toeverything/components/ui';
 import { services } from '@toeverything/datasource/db-service';
+import { useTranslation } from '@toeverything/datasource/i18n';
 import { useLocalTrigger } from '@toeverything/datasource/state';
-import { useTranslation } from 'react-i18next';
+
 const cleanupWorkspace = (workspace: string) =>
     new Promise((resolve, reject) => {
         const req = indexedDB.deleteDatabase(workspace);
diff --git a/libs/components/layout/src/header/LayoutHeader.tsx b/libs/components/layout/src/header/LayoutHeader.tsx
index 9b104b4442..963843e0a0 100644
--- a/libs/components/layout/src/header/LayoutHeader.tsx
+++ b/libs/components/layout/src/header/LayoutHeader.tsx
@@ -5,13 +5,12 @@ import {
     SideBarViewIcon,
 } from '@toeverything/components/icons';
 import { IconButton, styled } from '@toeverything/components/ui';
+import { useTranslation } from '@toeverything/datasource/i18n';
 import {
     useCurrentEditors,
     useLocalTrigger,
     useShowSettingsSidebar,
 } from '@toeverything/datasource/state';
-import { useCallback, useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
 import { EditorBoardSwitcher } from './EditorBoardSwitcher';
 import { fsApiSupported } from './FileSystem';
 import { CurrentPageTitle } from './Title';
diff --git a/libs/components/layout/src/settings-sidebar/ContainerTabs/ContainerTabs.tsx b/libs/components/layout/src/settings-sidebar/ContainerTabs/ContainerTabs.tsx
index 4503482d05..3aab18642c 100644
--- a/libs/components/layout/src/settings-sidebar/ContainerTabs/ContainerTabs.tsx
+++ b/libs/components/layout/src/settings-sidebar/ContainerTabs/ContainerTabs.tsx
@@ -4,8 +4,8 @@ import {
     SettingsIcon,
 } from '@toeverything/components/icons';
 import { styled } from '@toeverything/components/ui';
+import { useTranslation } from '@toeverything/datasource/i18n';
 import { cloneElement, useCallback, useMemo, type ReactElement } from 'react';
-import { useTranslation } from 'react-i18next';
 import { Comments } from '../Comments';
 import { useActiveComment } from '../Comments/use-comments';
 import { LayoutSettings } from '../Layout';
diff --git a/libs/components/layout/src/settings-sidebar/Settings/SettingsList.tsx b/libs/components/layout/src/settings-sidebar/Settings/SettingsList.tsx
index f462ccf572..a308614d13 100644
--- a/libs/components/layout/src/settings-sidebar/Settings/SettingsList.tsx
+++ b/libs/components/layout/src/settings-sidebar/Settings/SettingsList.tsx
@@ -6,8 +6,7 @@ import {
     styled,
     Switch,
 } from '@toeverything/components/ui';
-import { useTranslation } from 'react-i18next';
-import { options } from '../../i18n';
+import { LOCALES, useTranslation } from '@toeverything/datasource/i18n';
 import { useSettings } from './use-settings';
 
 export const SettingsList = () => {
@@ -52,7 +51,7 @@ export const SettingsList = () => {
                                     defaultValue={i18n.language}
                                     onChange={changeLanguage}
                                 >
-                                    {options.map(option => (
+                                    {LOCALES.map(option => (
                                         <Option
                                             key={option.value}
                                             value={option.value}
diff --git a/libs/components/layout/src/settings-sidebar/Settings/footer/LastModified.tsx b/libs/components/layout/src/settings-sidebar/Settings/footer/LastModified.tsx
index 0c0b5c2efd..9269713ce4 100644
--- a/libs/components/layout/src/settings-sidebar/Settings/footer/LastModified.tsx
+++ b/libs/components/layout/src/settings-sidebar/Settings/footer/LastModified.tsx
@@ -1,7 +1,7 @@
 import { styled, Typography } from '@toeverything/components/ui';
+import { useTranslation } from '@toeverything/datasource/i18n';
 import { useUserAndSpaces } from '@toeverything/datasource/state';
 import format from 'date-fns/format';
-import { useTranslation } from 'react-i18next';
 import { usePageLastUpdated, useWorkspaceAndPageId } from '../util';
 
 export const LastModified = () => {
diff --git a/libs/components/layout/src/settings-sidebar/Settings/footer/Logout.tsx b/libs/components/layout/src/settings-sidebar/Settings/footer/Logout.tsx
index 3dfc7dffb9..d8d139a605 100644
--- a/libs/components/layout/src/settings-sidebar/Settings/footer/Logout.tsx
+++ b/libs/components/layout/src/settings-sidebar/Settings/footer/Logout.tsx
@@ -1,8 +1,8 @@
 import { MoveToIcon } from '@toeverything/components/icons';
 import { ListItem, styled, Typography } from '@toeverything/components/ui';
+import { useTranslation } from '@toeverything/datasource/i18n';
 import { LOGOUT_COOKIES, LOGOUT_LOCAL_STORAGE } from '@toeverything/utils';
 import { getAuth, signOut } from 'firebase/auth';
-import { useTranslation } from 'react-i18next';
 
 const logout = () => {
     LOGOUT_LOCAL_STORAGE.forEach(name => localStorage.removeItem(name));
diff --git a/libs/components/layout/src/settings-sidebar/Settings/use-settings.ts b/libs/components/layout/src/settings-sidebar/Settings/use-settings.ts
index 53b075db74..750f5d8d73 100644
--- a/libs/components/layout/src/settings-sidebar/Settings/use-settings.ts
+++ b/libs/components/layout/src/settings-sidebar/Settings/use-settings.ts
@@ -1,6 +1,6 @@
 import { message } from '@toeverything/components/ui';
+import { useTranslation } from '@toeverything/datasource/i18n';
 import { copyToClipboard } from '@toeverything/utils';
-import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import { useSettingFlags, type SettingFlags } from './use-setting-flags';