diff --git a/src/App.tsx b/src/App.tsx
index be28b63..b864703 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -88,6 +88,7 @@ import {AcceptWorkspaceInvitePage} from '@/app/auth/accept-workspace-invite-page
 import {WorkspaceRedirect} from '@/app/workspace/redirect';
 import {InitWorkspace} from '@/app/init/workspace';
 import HomePage from '@/app/homepage/page';
+import I18nDemo from '@/app/i18n-demo/page';
 
 function App() {
     return (
@@ -123,6 +124,7 @@ function App() {
 
             <Route element={<ProtectedRoute/>}>
                 <Route path="/homepage" element={<HomePage/>}/>
+                <Route path="/i18n-demo" element={<I18nDemo/>}/>
                 <Route path="/search" element={<SearchPage/>}/>
 
                 <Route path="/init">
diff --git a/src/app/settings/account.tsx b/src/app/settings/account.tsx
index 8923775..575c391 100644
--- a/src/app/settings/account.tsx
+++ b/src/app/settings/account.tsx
@@ -11,6 +11,7 @@ import { Separator } from '@/components/ui/separator';
 import { Switch } from '@/components/ui/switch';
 import { apiUserChangePassword, apiEmailChange, apiEmailGet, getPreferences, updatePreferences } from '@/client';
 import {getApiErrorMessage} from '@/lib/api-error';
+import i18n from '@/lib/i18n';
 
 const LANGUAGES = [
     { value: 'en', label: 'English' },
@@ -388,7 +389,12 @@ export function SettingsAccount() {
                                     <Select
                                         key={`language-${language}`}
                                         value={language}
-                                        onValueChange={(value) => value && setLanguage(value)}
+                                        onValueChange={(value) => {
+                                            if (value) {
+                                                setLanguage(value);
+                                                i18n.changeLanguage(value);
+                                            }
+                                        }}
                                     >
                                         <SelectTrigger id="language" className="w-full">
                                             <SelectValue />
diff --git a/src/main.tsx b/src/main.tsx
index 144de39..cde3bc3 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -4,8 +4,10 @@ import {BrowserRouter} from 'react-router-dom';
 import {Toaster} from 'sonner';
 import {UserProvider} from '@/contexts';
 import {ThemeProvider} from '@/contexts/theme-context';
+import {LanguageProvider} from '@/lib/language-provider';
 import './index.css';
 import App from './App.tsx';
+import '@/lib/i18n';
 import {CommandPalette} from '@/components/shared/CommandPalette';
 import {KeyboardShortcutsSheet} from '@/components/shared/KeyboardShortcutsSheet';
 import {GlobalNavigationShortcuts} from '@/components/shared/GlobalNavigationShortcuts';
@@ -31,6 +33,7 @@ createRoot(document.getElementById('root')!).render(
         <QueryClientProvider client={queryClient}>
             <BrowserRouter>
                 <UserProvider>
+                    <LanguageProvider>
                     <ThemeProvider>
                         <App/>
                         <CommandPalette/>
@@ -38,6 +41,7 @@ createRoot(document.getElementById('root')!).render(
                         <GlobalNavigationShortcuts/>
                         <Toaster richColors position="bottom-right"/>
                     </ThemeProvider>
+                    </LanguageProvider>
                 </UserProvider>
             </BrowserRouter>
         </QueryClientProvider>