diff --git a/frontend/src/app/(dashboard)/advanced/components/RebuildEmbeddings.tsx b/frontend/src/app/(dashboard)/advanced/components/RebuildEmbeddings.tsx
index 729d870..6a04596 100644
--- a/frontend/src/app/(dashboard)/advanced/components/RebuildEmbeddings.tsx
+++ b/frontend/src/app/(dashboard)/advanced/components/RebuildEmbeddings.tsx
@@ -123,10 +123,10 @@ export function RebuildEmbeddings() {
     <Card>
       <CardHeader>
         <CardTitle className="flex items-center gap-2">
-          {t.advanced.rebuildEmbeddings}
+          {t('advanced.rebuildEmbeddings')}
         </CardTitle>
         <CardDescription>
-          {t.advanced.rebuildEmbeddingsDesc}
+          {t('advanced.rebuildEmbeddingsDesc')}
         </CardDescription>
       </CardHeader>
       <CardContent className="space-y-6">
@@ -134,25 +134,25 @@ export function RebuildEmbeddings() {
         {!isRebuildActive && (
           <div className="space-y-6">
             <div className="space-y-3">
-              <Label htmlFor="mode">{t.advanced.rebuild.mode}</Label>
+              <Label htmlFor="mode">{t('advanced.rebuild.mode')}</Label>
               <Select value={mode} onValueChange={(value) => setMode(value as 'existing' | 'all')}>
                 <SelectTrigger id="mode">
                   <SelectValue />
                 </SelectTrigger>
                 <SelectContent>
-                  <SelectItem value="existing">{t.advanced.rebuild.existing}</SelectItem>
-                  <SelectItem value="all">{t.advanced.rebuild.all}</SelectItem>
+                  <SelectItem value="existing">{t('advanced.rebuild.existing')}</SelectItem>
+                  <SelectItem value="all">{t('advanced.rebuild.all')}</SelectItem>
                 </SelectContent>
               </Select>
               <p className="text-sm text-muted-foreground">
                 {mode === 'existing'
-                  ? t.advanced.rebuild.existingDesc
-                  : t.advanced.rebuild.allDesc}
+                  ? t('advanced.rebuild.existingDesc')
+                  : t('advanced.rebuild.allDesc')}
               </p>
             </div>
 
             <div className="space-y-3" role="group" aria-labelledby="include-label">
-              <span id="include-label" className="text-sm font-medium leading-none">{t.advanced.rebuild.include}</span>
+              <span id="include-label" className="text-sm font-medium leading-none">{t('advanced.rebuild.include')}</span>
               <div className="space-y-3">
                 <div className="flex items-center space-x-2">
                   <Checkbox
@@ -161,7 +161,7 @@ export function RebuildEmbeddings() {
                     onCheckedChange={(checked) => setIncludeSources(checked === true)}
                   />
                   <Label htmlFor="sources" className="font-normal cursor-pointer">
-                    {t.navigation.sources}
+                    {t('navigation.sources')}
                   </Label>
                 </div>
                 <div className="flex items-center space-x-2">
@@ -171,7 +171,7 @@ export function RebuildEmbeddings() {
                     onCheckedChange={(checked) => setIncludeNotes(checked === true)}
                   />
                   <Label htmlFor="notes" className="font-normal cursor-pointer">
-                    {t.common.notes}
+                    {t('common.notes')}
                   </Label>
                 </div>
                 <div className="flex items-center space-x-2">
@@ -181,7 +181,7 @@ export function RebuildEmbeddings() {
                     onCheckedChange={(checked) => setIncludeInsights(checked === true)}
                   />
                   <Label htmlFor="insights" className="font-normal cursor-pointer">
-                    {t.common.insights}
+                    {t('common.insights')}
                   </Label>
                 </div>
               </div>
@@ -189,7 +189,7 @@ export function RebuildEmbeddings() {
                 <Alert variant="destructive">
                   <AlertCircle className="h-4 w-4" />
                   <AlertDescription>
-                    {t.advanced.rebuild.selectOneError}
+                    {t('advanced.rebuild.selectOneError')}
                   </AlertDescription>
                 </Alert>
               )}
@@ -203,10 +203,10 @@ export function RebuildEmbeddings() {
               {rebuildMutation.isPending ? (
                 <>
                   <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                  {t.advanced.rebuild.starting}
+                  {t('advanced.rebuild.starting')}
                 </>
               ) : (
-                t.advanced.rebuild.startBtn
+                t('advanced.rebuild.startBtn')
               )}
             </Button>
 
@@ -214,7 +214,7 @@ export function RebuildEmbeddings() {
               <Alert variant="destructive">
                 <AlertCircle className="h-4 w-4" />
                 <AlertDescription>
-                  {t.advanced.rebuild.failed}: {(rebuildMutation.error as Error)?.message || t.common.error}
+                  {t('advanced.rebuild.failed')}: {(rebuildMutation.error as Error)?.message || t('common.error')}
                 </AlertDescription>
               </Alert>
             )}
@@ -232,21 +232,21 @@ export function RebuildEmbeddings() {
                 {status.status === 'failed' && <XCircle className="h-5 w-5 text-red-500" />}
                 <div className="flex flex-col">
                   <span className="font-medium">
-                    {status.status === 'queued' && t.advanced.rebuild.queued}
-                    {status.status === 'running' && t.advanced.rebuild.running}
-                    {status.status === 'completed' && t.advanced.rebuild.completed}
-                    {status.status === 'failed' && t.advanced.rebuild.failed}
+                    {status.status === 'queued' && t('advanced.rebuild.queued')}
+                    {status.status === 'running' && t('advanced.rebuild.running')}
+                    {status.status === 'completed' && t('advanced.rebuild.completed')}
+                    {status.status === 'failed' && t('advanced.rebuild.failed')}
                   </span>
                   {status.status === 'running' && (
                     <span className="text-sm text-muted-foreground">
-                      {t.advanced.rebuild.leavePageHint}
+                      {t('advanced.rebuild.leavePageHint')}
                     </span>
                   )}
                 </div>
               </div>
               {(status.status === 'completed' || status.status === 'failed') && (
                 <Button variant="outline" size="sm" onClick={handleReset}>
-                  {t.advanced.rebuild.startNew}
+                  {t('advanced.rebuild.startNew')}
                 </Button>
               )}
             </div>
@@ -254,9 +254,9 @@ export function RebuildEmbeddings() {
             {progressData && (
               <div className="space-y-2">
                 <div className="flex justify-between text-sm">
-                  <span>{t.common.progress}</span>
+                  <span>{t('common.progress')}</span>
                   <span className="font-medium">
-                    {t.advanced.rebuild.itemsProcessed
+                    {t('advanced.rebuild.itemsProcessed')
                       .replace('{processed}', processedItems.toString())
                       .replace('{total}', totalItems.toString())
                       .replace('{percent}', progressPercent.toFixed(1))}
@@ -265,7 +265,7 @@ export function RebuildEmbeddings() {
                 <Progress value={progressPercent} className="h-2" />
                 {failedItems > 0 && (
                   <p className="text-sm text-yellow-600">
-                    ⚠️ {t.advanced.rebuild.failedItems.replace('{count}', failedItems.toString())}
+                    ⚠️ {t('advanced.rebuild.failedItems').replace('{count}', failedItems.toString())}
                   </p>
                 )}
               </div>
@@ -274,19 +274,19 @@ export function RebuildEmbeddings() {
              {stats && (
               <div className="grid grid-cols-4 gap-4">
                 <div className="space-y-1">
-                  <p className="text-sm text-muted-foreground">{t.navigation.sources}</p>
+                  <p className="text-sm text-muted-foreground">{t('navigation.sources')}</p>
                   <p className="text-2xl font-bold">{sourcesProcessed}</p>
                 </div>
                 <div className="space-y-1">
-                  <p className="text-sm text-muted-foreground">{t.common.notes}</p>
+                  <p className="text-sm text-muted-foreground">{t('common.notes')}</p>
                   <p className="text-2xl font-bold">{notesProcessed}</p>
                 </div>
                 <div className="space-y-1">
-                  <p className="text-sm text-muted-foreground">{t.common.insights}</p>
+                  <p className="text-sm text-muted-foreground">{t('common.insights')}</p>
                   <p className="text-2xl font-bold">{insightsProcessed}</p>
                 </div>
                 <div className="space-y-1">
-                  <p className="text-sm text-muted-foreground">{t.advanced.rebuild.time}</p>
+                  <p className="text-sm text-muted-foreground">{t('advanced.rebuild.time')}</p>
                   <p className="text-2xl font-bold">
                     {processingTimeSeconds !== undefined ? `${processingTimeSeconds.toFixed(1)}s` : '—'}
                   </p>
@@ -303,9 +303,9 @@ export function RebuildEmbeddings() {
 
             {status.started_at && (
               <div className="text-sm text-muted-foreground space-y-1">
-                <p>{t.common.created.replace('{time}', new Date(status.started_at).toLocaleString())}</p>
+                <p>{t('common.created').replace('{time}', new Date(status.started_at).toLocaleString())}</p>
                 {status.completed_at && (
-                  <p>{t.notebooks.updated}: {new Date(status.completed_at).toLocaleString()}</p>
+                  <p>{t('notebooks.updated')}: {new Date(status.completed_at).toLocaleString()}</p>
                 )}
               </div>
             )}
@@ -315,23 +315,23 @@ export function RebuildEmbeddings() {
         {/* Help Section */}
          <Accordion type="single" collapsible className="w-full">
           <AccordionItem value="when">
-            <AccordionTrigger>{t.advanced.rebuild.whenToRebuild}</AccordionTrigger>
+            <AccordionTrigger>{t('advanced.rebuild.whenToRebuild')}</AccordionTrigger>
             <AccordionContent className="space-y-2 text-sm">
-              <p>{t.advanced.rebuild.whenToRebuildAns}</p>
+              <p>{t('advanced.rebuild.whenToRebuildAns')}</p>
             </AccordionContent>
           </AccordionItem>
 
           <AccordionItem value="time">
-            <AccordionTrigger>{t.advanced.rebuild.howLong}</AccordionTrigger>
+            <AccordionTrigger>{t('advanced.rebuild.howLong')}</AccordionTrigger>
             <AccordionContent className="space-y-2 text-sm">
-              <p>{t.advanced.rebuild.howLongAns}</p>
+              <p>{t('advanced.rebuild.howLongAns')}</p>
             </AccordionContent>
           </AccordionItem>
 
           <AccordionItem value="safe">
-            <AccordionTrigger>{t.advanced.rebuild.isSafe}</AccordionTrigger>
+            <AccordionTrigger>{t('advanced.rebuild.isSafe')}</AccordionTrigger>
             <AccordionContent className="space-y-2 text-sm">
-              <p>{t.advanced.rebuild.isSafeAns}</p>
+              <p>{t('advanced.rebuild.isSafeAns')}</p>
             </AccordionContent>
           </AccordionItem>
         </Accordion>
diff --git a/frontend/src/app/(dashboard)/advanced/components/SystemInfo.tsx b/frontend/src/app/(dashboard)/advanced/components/SystemInfo.tsx
index 2b411d4..1390822 100644
--- a/frontend/src/app/(dashboard)/advanced/components/SystemInfo.tsx
+++ b/frontend/src/app/(dashboard)/advanced/components/SystemInfo.tsx
@@ -34,8 +34,8 @@ export function SystemInfo() {
     return (
       <Card className="p-6">
         <div className="space-y-4">
-          <h2 className="text-xl font-semibold">{t.advanced.systemInfo}</h2>
-          <div className="text-sm text-muted-foreground">{t.common.loading}</div>
+          <h2 className="text-xl font-semibold">{t('advanced.systemInfo')}</h2>
+          <div className="text-sm text-muted-foreground">{t('common.loading')}</div>
         </div>
       </Card>
     )
@@ -44,37 +44,37 @@ export function SystemInfo() {
   return (
     <Card className="p-6">
       <div className="space-y-4">
-        <h2 className="text-xl font-semibold">{t.advanced.systemInfo}</h2>
+        <h2 className="text-xl font-semibold">{t('advanced.systemInfo')}</h2>
 
         <div className="space-y-3">
           {/* Current Version */}
           <div className="flex items-center justify-between">
-            <span className="text-sm font-medium">{t.advanced.currentVersion}</span>
-            <Badge variant="outline">{config?.version || t.advanced.unknown}</Badge>
+            <span className="text-sm font-medium">{t('advanced.currentVersion')}</span>
+            <Badge variant="outline">{config?.version || t('advanced.unknown')}</Badge>
           </div>
 
           {/* Latest Version */}
           {config?.latestVersion && (
             <div className="flex items-center justify-between">
-              <span className="text-sm font-medium">{t.advanced.latestVersion}</span>
+              <span className="text-sm font-medium">{t('advanced.latestVersion')}</span>
               <Badge variant="outline">{config.latestVersion}</Badge>
             </div>
           )}
 
           {/* Update Status */}
           <div className="flex items-center justify-between">
-            <span className="text-sm font-medium">{t.advanced.status}</span>
+            <span className="text-sm font-medium">{t('advanced.status')}</span>
             {config?.hasUpdate ? (
               <Badge variant="destructive">
-                {t.advanced.updateAvailable.replace('{version}', config.latestVersion || '')}
+                {t('advanced.updateAvailable').replace('{version}', config.latestVersion || '')}
               </Badge>
             ) : config?.latestVersion ? (
               <Badge variant="outline" className="text-green-600 border-green-600">
-                {t.advanced.upToDate}
+                {t('advanced.upToDate')}
               </Badge>
             ) : (
               <Badge variant="outline" className="text-muted-foreground">
-                {t.advanced.unknown}
+                {t('advanced.unknown')}
               </Badge>
             )}
           </div>
@@ -88,7 +88,7 @@ export function SystemInfo() {
                 rel="noopener noreferrer"
                 className="text-sm text-primary hover:underline inline-flex items-center gap-1"
               >
-                {t.advanced.viewOnGithub}
+                {t('advanced.viewOnGithub')}
                 <svg
                   className="w-4 h-4"
                   fill="none"
@@ -109,7 +109,7 @@ export function SystemInfo() {
           {/* Version Check Failed Message */}
           {!config?.latestVersion && config?.version && (
             <div className="pt-2 text-xs text-muted-foreground">
-              {t.advanced.updateCheckFailed}
+              {t('advanced.updateCheckFailed')}
             </div>
           )}
         </div>
diff --git a/frontend/src/app/(dashboard)/advanced/page.tsx b/frontend/src/app/(dashboard)/advanced/page.tsx
index d20331d..7eb14b2 100644
--- a/frontend/src/app/(dashboard)/advanced/page.tsx
+++ b/frontend/src/app/(dashboard)/advanced/page.tsx
@@ -13,9 +13,9 @@ export default function AdvancedPage() {
         <div className="p-6">
           <div className="max-w-4xl mx-auto space-y-6">
             <div>
-              <h1 className="text-3xl font-bold">{t.advanced.title}</h1>
+              <h1 className="text-3xl font-bold">{t('advanced.title')}</h1>
               <p className="text-muted-foreground mt-2">
-                {t.advanced.desc}
+                {t('advanced.desc')}
               </p>
             </div>
 
diff --git a/frontend/src/app/(dashboard)/notebooks/[id]/page.tsx b/frontend/src/app/(dashboard)/notebooks/[id]/page.tsx
index 16792a2..09085fe 100644
--- a/frontend/src/app/(dashboard)/notebooks/[id]/page.tsx
+++ b/frontend/src/app/(dashboard)/notebooks/[id]/page.tsx
@@ -119,8 +119,8 @@ export default function NotebookPage() {
     return (
       <AppShell>
         <div className="p-6">
-          <h1 className="text-2xl font-bold mb-4">{t.notebooks.notFound}</h1>
-          <p className="text-muted-foreground">{t.notebooks.notFoundDesc}</p>
+          <h1 className="text-2xl font-bold mb-4">{t('notebooks.notFound')}</h1>
+          <p className="text-muted-foreground">{t('notebooks.notFoundDesc')}</p>
         </div>
       </AppShell>
     )
@@ -142,15 +142,15 @@ export default function NotebookPage() {
                   <TabsList className="grid w-full grid-cols-3">
                     <TabsTrigger value="sources" className="gap-2">
                       <FileText className="h-4 w-4" />
-                      {t.navigation.sources}
+                      {t('navigation.sources')}
                     </TabsTrigger>
                     <TabsTrigger value="notes" className="gap-2">
                       <StickyNote className="h-4 w-4" />
-                      {t.common.notes}
+                      {t('common.notes')}
                     </TabsTrigger>
                     <TabsTrigger value="chat" className="gap-2">
                       <MessageSquare className="h-4 w-4" />
-                      {t.common.chat}
+                      {t('common.chat')}
                     </TabsTrigger>
                   </TabsList>
                 </Tabs>
diff --git a/frontend/src/app/(dashboard)/notebooks/components/ChatColumn.tsx b/frontend/src/app/(dashboard)/notebooks/components/ChatColumn.tsx
index 181e630..befc6f9 100644
--- a/frontend/src/app/(dashboard)/notebooks/components/ChatColumn.tsx
+++ b/frontend/src/app/(dashboard)/notebooks/components/ChatColumn.tsx
@@ -83,8 +83,8 @@ export function ChatColumn({ notebookId, contextSelections, sources, sourcesLoad
         <CardContent className="flex-1 flex items-center justify-center">
           <div className="text-center text-muted-foreground">
             <AlertCircle className="h-12 w-12 mx-auto mb-4 opacity-50" />
-            <p className="text-sm">{t.chat.unableToLoadChat}</p>
-            <p className="text-xs mt-2">{t.common.refreshPage || 'Please try refreshing the page'}</p>
+            <p className="text-sm">{t('chat.unableToLoadChat')}</p>
+            <p className="text-xs mt-2">{t('common.refreshPage') || 'Please try refreshing the page'}</p>
           </div>
         </CardContent>
       </Card>
@@ -93,7 +93,7 @@ export function ChatColumn({ notebookId, contextSelections, sources, sourcesLoad
 
   return (
     <ChatPanel
-      title={t.chat.chatWithNotebook}
+      title={t('chat.chatWithNotebook')}
       contextType="notebook"
       messages={chat.messages}
       isStreaming={chat.isSending}
diff --git a/frontend/src/app/(dashboard)/notebooks/components/NoteEditorDialog.tsx b/frontend/src/app/(dashboard)/notebooks/components/NoteEditorDialog.tsx
index 89604e0..f1bb01b 100644
--- a/frontend/src/app/(dashboard)/notebooks/components/NoteEditorDialog.tsx
+++ b/frontend/src/app/(dashboard)/notebooks/components/NoteEditorDialog.tsx
@@ -124,12 +124,12 @@ export function NoteEditorDialog({ open, onOpenChange, notebookId, note }: NoteE
           isEditorFullscreen && "!max-w-screen !max-h-screen border-none w-screen h-screen"
       )}>
         <DialogTitle className="sr-only">
-          {isEditing ? t.sources.editNote : t.sources.createNote}
+          {isEditing ? t('sources.editNote') : t('sources.createNote')}
         </DialogTitle>
         <form onSubmit={handleSubmit(onSubmit)} className="flex h-full flex-col min-w-0">
           {isEditing && noteLoading ? (
             <div className="flex-1 flex items-center justify-center py-10">
-              <span className="text-sm text-muted-foreground">{t.common.loading}</span>
+              <span className="text-sm text-muted-foreground">{t('common.loading')}</span>
             </div>
           ) : (
             <>
@@ -139,8 +139,8 @@ export function NoteEditorDialog({ open, onOpenChange, notebookId, note }: NoteE
                   name="title"
                   value={watchTitle ?? ''}
                   onSave={(value) => setValue('title', value || '')}
-                  placeholder={t.sources.addTitle}
-                  emptyText={t.sources.untitledNote}
+                  placeholder={t('sources.addTitle')}
+                  emptyText={t('sources.untitledNote')}
                   className="text-xl font-semibold"
                   inputClassName="text-xl font-semibold"
                 />
@@ -160,7 +160,7 @@ export function NoteEditorDialog({ open, onOpenChange, notebookId, note }: NoteE
                       value={field.value}
                       onChange={field.onChange}
                       height={420}
-                      placeholder={t.sources.writeNotePlaceholder}
+                      placeholder={t('sources.writeNotePlaceholder')}
                       className={cn(
                           "w-full h-full min-h-[420px] max-h-[500px] overflow-hidden [&_.w-md-editor]:!static [&_.w-md-editor]:!w-full [&_.w-md-editor]:!h-full [&_.w-md-editor-content]:overflow-y-auto",
                           !isEditorFullscreen && "rounded-md border"
@@ -177,17 +177,17 @@ export function NoteEditorDialog({ open, onOpenChange, notebookId, note }: NoteE
 
           <div className="border-t px-6 py-4 flex justify-end gap-2">
             <Button type="button" variant="outline" onClick={handleClose}>
-              {t.common.cancel}
+              {t('common.cancel')}
             </Button>
             <Button
               type="submit"
               disabled={isSaving || (isEditing && noteLoading)}
             >
               {isSaving
-                ? isEditing ? `${t.common.saving}...` : `${t.common.creating}...`
+                ? isEditing ? `${t('common.saving')}...` : `${t('common.creating')}...`
                 : isEditing
-                  ? t.sources.saveNote
-                  : t.sources.createNoteBtn}
+                  ? t('sources.saveNote')
+                  : t('sources.createNoteBtn')}
             </Button>
           </div>
         </form>
diff --git a/frontend/src/app/(dashboard)/notebooks/components/NotebookCard.tsx b/frontend/src/app/(dashboard)/notebooks/components/NotebookCard.tsx
index aa25e2c..a8937ae 100644
--- a/frontend/src/app/(dashboard)/notebooks/components/NotebookCard.tsx
+++ b/frontend/src/app/(dashboard)/notebooks/components/NotebookCard.tsx
@@ -55,7 +55,7 @@ export function NotebookCard({ notebook }: NotebookCardProps) {
                 </CardTitle>
                 {notebook.archived && (
                   <Badge variant="secondary" className="mt-1">
-                    {t.notebooks.archived}
+                    {t('notebooks.archived')}
                   </Badge>
                 )}
               </div>
@@ -76,12 +76,12 @@ export function NotebookCard({ notebook }: NotebookCardProps) {
                     {notebook.archived ? (
                       <>
                         <ArchiveRestore className="h-4 w-4 mr-2" />
-                        {t.notebooks.unarchive}
+                        {t('notebooks.unarchive')}
                       </>
                     ) : (
                       <>
                         <Archive className="h-4 w-4 mr-2" />
-                        {t.notebooks.archive}
+                        {t('notebooks.archive')}
                       </>
                     )}
                   </DropdownMenuItem>
@@ -93,7 +93,7 @@ export function NotebookCard({ notebook }: NotebookCardProps) {
                     className="text-red-600"
                   >
                     <Trash2 className="h-4 w-4 mr-2" />
-                    {t.common.delete}
+                    {t('common.delete')}
                   </DropdownMenuItem>
                 </DropdownMenuContent>
               </DropdownMenu>
@@ -102,11 +102,11 @@ export function NotebookCard({ notebook }: NotebookCardProps) {
           
           <CardContent>
             <CardDescription className="line-clamp-2 text-sm">
-              {notebook.description || t.chat.noDescription}
+              {notebook.description || t('chat.noDescription')}
             </CardDescription>
 
             <div className="mt-3 text-xs text-muted-foreground">
-              {t.common.updated.replace('{time}', formatDistanceToNow(new Date(notebook.updated), { 
+              {t('common.updated').replace('{time}', formatDistanceToNow(new Date(notebook.updated), { 
                 addSuffix: true,
                 locale: getDateLocale(language)
               }))}
diff --git a/frontend/src/app/(dashboard)/notebooks/components/NotebookDeleteDialog.tsx b/frontend/src/app/(dashboard)/notebooks/components/NotebookDeleteDialog.tsx
index 202f7ed..c99ca36 100644
--- a/frontend/src/app/(dashboard)/notebooks/components/NotebookDeleteDialog.tsx
+++ b/frontend/src/app/(dashboard)/notebooks/components/NotebookDeleteDialog.tsx
@@ -69,9 +69,9 @@ export function NotebookDeleteDialog({
     <AlertDialog open={open} onOpenChange={onOpenChange}>
       <AlertDialogContent>
         <AlertDialogHeader>
-          <AlertDialogTitle>{t.notebooks.deleteNotebook}</AlertDialogTitle>
+          <AlertDialogTitle>{t('notebooks.deleteNotebook')}</AlertDialogTitle>
           <AlertDialogDescription>
-            {t.notebooks.deleteNotebookDesc.replace('{name}', notebookName)}
+            {t('notebooks.deleteNotebookDesc').replace('{name}', notebookName)}
           </AlertDialogDescription>
         </AlertDialogHeader>
 
@@ -79,11 +79,11 @@ export function NotebookDeleteDialog({
           {isLoadingPreview ? (
             <div className="flex items-center gap-2 text-muted-foreground">
               <LoadingSpinner size="sm" />
-              <span>{t.notebooks.deleteNotebookLoading}</span>
+              <span>{t('notebooks.deleteNotebookLoading')}</span>
             </div>
           ) : previewError ? (
             <div className="text-sm text-destructive">
-              {t.common.error}: {previewError.message || 'Failed to load preview'}
+              {t('common.error')}: {previewError.message || 'Failed to load preview'}
             </div>
           ) : preview ? (
             <>
@@ -91,13 +91,13 @@ export function NotebookDeleteDialog({
               <div className="text-sm">
                 {preview.note_count > 0 ? (
                   <p className="text-destructive font-medium">
-                    {t.notebooks.deleteNotebookNotes.replace(
+                    {t('notebooks.deleteNotebookNotes').replace(
                       '{count}',
                       String(preview.note_count)
                     )}
                   </p>
                 ) : (
-                  <p className="text-muted-foreground">{t.notebooks.deleteNotebookNoNotes}</p>
+                  <p className="text-muted-foreground">{t('notebooks.deleteNotebookNoNotes')}</p>
                 )}
               </div>
 
@@ -105,7 +105,7 @@ export function NotebookDeleteDialog({
               {preview.shared_source_count > 0 && (
                 <div className="text-sm">
                   <p className="text-muted-foreground">
-                    {t.notebooks.deleteNotebookSharedSources.replace(
+                    {t('notebooks.deleteNotebookSharedSources').replace(
                       '{count}',
                       String(preview.shared_source_count)
                     )}
@@ -116,7 +116,7 @@ export function NotebookDeleteDialog({
               {/* No sources message */}
               {preview.exclusive_source_count === 0 && preview.shared_source_count === 0 && (
                 <div className="text-sm">
-                  <p className="text-muted-foreground">{t.notebooks.deleteNotebookNoSources}</p>
+                  <p className="text-muted-foreground">{t('notebooks.deleteNotebookNoSources')}</p>
                 </div>
               )}
 
@@ -124,7 +124,7 @@ export function NotebookDeleteDialog({
               {preview.exclusive_source_count > 0 && (
                 <div className="pt-3 border-t space-y-3">
                   <p className="text-sm text-destructive font-medium">
-                    {t.notebooks.deleteNotebookExclusiveSources.replace(
+                    {t('notebooks.deleteNotebookExclusiveSources').replace(
                       '{count}',
                       String(preview.exclusive_source_count)
                     )}
@@ -137,13 +137,13 @@ export function NotebookDeleteDialog({
                     <div className="flex items-center space-x-3">
                       <RadioGroupItem value="delete" id="delete-sources" />
                       <Label htmlFor="delete-sources" className="text-sm cursor-pointer">
-                        {t.notebooks.deleteExclusiveSourcesLabel}
+                        {t('notebooks.deleteExclusiveSourcesLabel')}
                       </Label>
                     </div>
                     <div className="flex items-center space-x-3">
                       <RadioGroupItem value="keep" id="keep-sources" />
                       <Label htmlFor="keep-sources" className="text-sm cursor-pointer">
-                        {t.notebooks.keepExclusiveSourcesLabel}
+                        {t('notebooks.keepExclusiveSourcesLabel')}
                       </Label>
                     </div>
                   </RadioGroup>
@@ -154,7 +154,7 @@ export function NotebookDeleteDialog({
         </div>
 
         <AlertDialogFooter>
-          <AlertDialogCancel disabled={isDeleting}>{t.common.cancel}</AlertDialogCancel>
+          <AlertDialogCancel disabled={isDeleting}>{t('common.cancel')}</AlertDialogCancel>
           <AlertDialogAction
             onClick={handleConfirm}
             disabled={isDeleting || isLoadingPreview}
@@ -163,10 +163,10 @@ export function NotebookDeleteDialog({
             {isDeleting ? (
               <>
                 <LoadingSpinner size="sm" className="mr-2" />
-                {t.common.deleting}
+                {t('common.deleting')}
               </>
             ) : (
-              t.common.delete
+              t('common.delete')
             )}
           </AlertDialogAction>
         </AlertDialogFooter>
diff --git a/frontend/src/app/(dashboard)/notebooks/components/NotebookHeader.tsx b/frontend/src/app/(dashboard)/notebooks/components/NotebookHeader.tsx
index 76e36e6..43d452c 100644
--- a/frontend/src/app/(dashboard)/notebooks/components/NotebookHeader.tsx
+++ b/frontend/src/app/(dashboard)/notebooks/components/NotebookHeader.tsx
@@ -61,10 +61,10 @@ export function NotebookHeader({ notebook }: NotebookHeaderProps) {
                 onSave={handleUpdateName}
                 className="text-2xl font-bold"
                 inputClassName="text-2xl font-bold"
-                placeholder={t.notebooks.namePlaceholder}
+                placeholder={t('notebooks.namePlaceholder')}
               />
               {notebook.archived && (
-                <Badge variant="secondary">{t.notebooks.archived}</Badge>
+                <Badge variant="secondary">{t('notebooks.archived')}</Badge>
               )}
             </div>
             <div className="flex gap-2">
@@ -76,12 +76,12 @@ export function NotebookHeader({ notebook }: NotebookHeaderProps) {
                 {notebook.archived ? (
                   <>
                     <ArchiveRestore className="h-4 w-4 mr-2" />
-                    {t.notebooks.unarchive}
+                    {t('notebooks.unarchive')}
                   </>
                 ) : (
                   <>
                     <Archive className="h-4 w-4 mr-2" />
-                    {t.notebooks.archive}
+                    {t('notebooks.archive')}
                   </>
                 )}
               </Button>
@@ -92,7 +92,7 @@ export function NotebookHeader({ notebook }: NotebookHeaderProps) {
                 className="text-red-600 hover:text-red-700"
               >
                 <Trash2 className="h-4 w-4 mr-2" />
-                {t.common.delete}
+                {t('common.delete')}
               </Button>
             </div>
           </div>
@@ -104,14 +104,14 @@ export function NotebookHeader({ notebook }: NotebookHeaderProps) {
             onSave={handleUpdateDescription}
             className="text-muted-foreground"
             inputClassName="text-muted-foreground"
-            placeholder={t.notebooks.addDescription}
+            placeholder={t('notebooks.addDescription')}
             multiline
-            emptyText={t.notebooks.addDescription}
+            emptyText={t('notebooks.addDescription')}
           />
           
           <div className="text-sm text-muted-foreground">
-            {t.common.created.replace('{time}', formatDistanceToNow(new Date(notebook.created), { addSuffix: true, locale: dfLocale }))} • 
-            {t.common.updated.replace('{time}', formatDistanceToNow(new Date(notebook.updated), { addSuffix: true, locale: dfLocale }))}
+            {t('common.created').replace('{time}', formatDistanceToNow(new Date(notebook.created), { addSuffix: true, locale: dfLocale }))} • 
+            {t('common.updated').replace('{time}', formatDistanceToNow(new Date(notebook.updated), { addSuffix: true, locale: dfLocale }))}
           </div>
         </div>
       </div>
diff --git a/frontend/src/app/(dashboard)/notebooks/components/NotebookList.tsx b/frontend/src/app/(dashboard)/notebooks/components/NotebookList.tsx
index a09efa8..c51ba4e 100644
--- a/frontend/src/app/(dashboard)/notebooks/components/NotebookList.tsx
+++ b/frontend/src/app/(dashboard)/notebooks/components/NotebookList.tsx
@@ -45,8 +45,8 @@ export function NotebookList({
     return (
       <EmptyState
         icon={Book}
-        title={emptyTitle ?? t.common.noResults}
-        description={emptyDescription ?? t.chat.startByCreating}
+        title={emptyTitle ?? t('common.noResults')}
+        description={emptyDescription ?? t('chat.startByCreating')}
         action={onAction && actionLabel ? (
           <Button onClick={onAction} variant="outline" className="mt-4">
             <Plus className="h-4 w-4 mr-2" />
diff --git a/frontend/src/app/(dashboard)/notebooks/components/NotesColumn.tsx b/frontend/src/app/(dashboard)/notebooks/components/NotesColumn.tsx
index bb915f2..cda02b3 100644
--- a/frontend/src/app/(dashboard)/notebooks/components/NotesColumn.tsx
+++ b/frontend/src/app/(dashboard)/notebooks/components/NotesColumn.tsx
@@ -51,8 +51,8 @@ export function NotesColumn({
   // Collapsible column state
   const { notesCollapsed, toggleNotes } = useNotebookColumnsStore()
   const collapseButton = useMemo(
-    () => createCollapseButton(toggleNotes, t.common.notes),
-    [toggleNotes, t.common.notes]
+    () => createCollapseButton(toggleNotes, t('common.notes')),
+    [toggleNotes, t('common.notes')]
   )
 
   const handleDeleteClick = (noteId: string) => {
@@ -78,12 +78,12 @@ export function NotesColumn({
         isCollapsed={notesCollapsed}
         onToggle={toggleNotes}
         collapsedIcon={StickyNote}
-        collapsedLabel={t.common.notes}
+        collapsedLabel={t('common.notes')}
       >
         <Card className="h-full flex flex-col flex-1 overflow-hidden">
           <CardHeader className="pb-3 flex-shrink-0">
             <div className="flex items-center justify-between gap-2">
-              <CardTitle className="text-lg">{t.common.notes}</CardTitle>
+              <CardTitle className="text-lg">{t('common.notes')}</CardTitle>
               <div className="flex items-center gap-2">
                 <Button
                   size="sm"
@@ -93,7 +93,7 @@ export function NotesColumn({
                   }}
                 >
                   <Plus className="h-4 w-4 mr-2" />
-                  {t.common.writeNote}
+                  {t('common.writeNote')}
                 </Button>
                 {collapseButton}
               </div>
@@ -108,8 +108,8 @@ export function NotesColumn({
             ) : !notes || notes.length === 0 ? (
               <EmptyState
                 icon={StickyNote}
-                title={t.notebooks.noNotesYet}
-                description={t.sources.createFirstNote}
+                title={t('notebooks.noNotesYet')}
+                description={t('sources.createFirstNote')}
               />
             ) : (
               <div className="space-y-3">
@@ -127,7 +127,7 @@ export function NotesColumn({
                           <User className="h-4 w-4 text-muted-foreground" />
                         )}
                         <Badge variant="secondary" className="text-xs">
-                          {note.note_type === 'ai' ? t.common.aiGenerated : t.common.human}
+                          {note.note_type === 'ai' ? t('common.aiGenerated') : t('common.human')}
                         </Badge>
                       </div>
 
@@ -171,7 +171,7 @@ export function NotesColumn({
                               className="text-red-600 focus:text-red-600"
                             >
                               <Trash2 className="h-4 w-4 mr-2" />
-                              {t.notebooks.deleteNote}
+                              {t('notebooks.deleteNote')}
                             </DropdownMenuItem>
                           </DropdownMenuContent>
                         </DropdownMenu>
@@ -212,9 +212,9 @@ export function NotesColumn({
       <ConfirmDialog
         open={deleteDialogOpen}
         onOpenChange={setDeleteDialogOpen}
-        title={t.notebooks.deleteNote}
-        description={t.notebooks.deleteNoteConfirm}
-        confirmText={t.common.delete}
+        title={t('notebooks.deleteNote')}
+        description={t('notebooks.deleteNoteConfirm')}
+        confirmText={t('common.delete')}
         onConfirm={handleDeleteConfirm}
         isLoading={deleteNote.isPending}
         confirmVariant="destructive"
diff --git a/frontend/src/app/(dashboard)/notebooks/components/SourcesColumn.tsx b/frontend/src/app/(dashboard)/notebooks/components/SourcesColumn.tsx
index b9bdb0c..addf160 100644
--- a/frontend/src/app/(dashboard)/notebooks/components/SourcesColumn.tsx
+++ b/frontend/src/app/(dashboard)/notebooks/components/SourcesColumn.tsx
@@ -66,8 +66,8 @@ export function SourcesColumn({
   // Collapsible column state
   const { sourcesCollapsed, toggleSources } = useNotebookColumnsStore()
   const collapseButton = useMemo(
-    () => createCollapseButton(toggleSources, t.navigation.sources),
-    [toggleSources, t.navigation.sources]
+    () => createCollapseButton(toggleSources, t('navigation.sources')),
+    [toggleSources, t('navigation.sources')]
   )
 
   // Scroll container ref for infinite scroll
@@ -151,29 +151,29 @@ export function SourcesColumn({
         isCollapsed={sourcesCollapsed}
         onToggle={toggleSources}
         collapsedIcon={FileText}
-        collapsedLabel={t.navigation.sources}
+        collapsedLabel={t('navigation.sources')}
       >
         <Card className="h-full flex flex-col flex-1 overflow-hidden">
           <CardHeader className="pb-3 flex-shrink-0">
             <div className="flex items-center justify-between gap-2">
-              <CardTitle className="text-lg">{t.navigation.sources}</CardTitle>
+              <CardTitle className="text-lg">{t('navigation.sources')}</CardTitle>
               <div className="flex items-center gap-2">
                 <DropdownMenu open={dropdownOpen} onOpenChange={setDropdownOpen}>
                   <DropdownMenuTrigger asChild>
                     <Button size="sm">
                       <Plus className="h-4 w-4 mr-2" />
-                      {t.sources.addSource}
+                      {t('sources.addSource')}
                       <ChevronDown className="h-4 w-4 ml-2" />
                     </Button>
                   </DropdownMenuTrigger>
                   <DropdownMenuContent align="end">
                     <DropdownMenuItem onClick={() => { setDropdownOpen(false); setAddDialogOpen(true); }}>
                       <Plus className="h-4 w-4 mr-2" />
-                      {t.sources.addSource}
+                      {t('sources.addSource')}
                     </DropdownMenuItem>
                     <DropdownMenuItem onClick={() => { setDropdownOpen(false); setAddExistingDialogOpen(true); }}>
                       <Link2 className="h-4 w-4 mr-2" />
-                      {t.sources.addExistingTitle}
+                      {t('sources.addExistingTitle')}
                     </DropdownMenuItem>
                   </DropdownMenuContent>
                 </DropdownMenu>
@@ -190,8 +190,8 @@ export function SourcesColumn({
             ) : !sources || sources.length === 0 ? (
               <EmptyState
                 icon={FileText}
-                title={t.sources.noSourcesYet}
-                description={t.sources.createFirstSource}
+                title={t('sources.noSourcesYet')}
+                description={t('sources.createFirstSource')}
               />
             ) : (
               <div className="space-y-3">
@@ -240,9 +240,9 @@ export function SourcesColumn({
       <ConfirmDialog
         open={deleteDialogOpen}
         onOpenChange={setDeleteDialogOpen}
-        title={t.sources.delete}
-        description={t.sources.deleteConfirm}
-        confirmText={t.common.delete}
+        title={t('sources.delete')}
+        description={t('sources.deleteConfirm')}
+        confirmText={t('common.delete')}
         onConfirm={handleDeleteConfirm}
         isLoading={deleteSource.isPending}
         confirmVariant="destructive"
@@ -251,9 +251,9 @@ export function SourcesColumn({
       <ConfirmDialog
         open={removeDialogOpen}
         onOpenChange={setRemoveDialogOpen}
-        title={t.sources.removeFromNotebook}
-        description={t.sources.removeConfirm}
-        confirmText={t.common.remove}
+        title={t('sources.removeFromNotebook')}
+        description={t('sources.removeConfirm')}
+        confirmText={t('common.remove')}
         onConfirm={handleRemoveConfirm}
         isLoading={removeFromNotebook.isPending}
         confirmVariant="default"
diff --git a/frontend/src/app/(dashboard)/notebooks/page.tsx b/frontend/src/app/(dashboard)/notebooks/page.tsx
index aaa4e88..6637e2b 100644
--- a/frontend/src/app/(dashboard)/notebooks/page.tsx
+++ b/frontend/src/app/(dashboard)/notebooks/page.tsx
@@ -53,7 +53,7 @@ export default function NotebooksPage() {
         <div className="p-6 space-y-6">
         <div className="flex items-center justify-between">
           <div className="flex items-center gap-4">
-            <h1 className="text-2xl font-bold">{t.notebooks.title}</h1>
+            <h1 className="text-2xl font-bold">{t('notebooks.title')}</h1>
             <Button variant="outline" size="sm" onClick={() => refetch()}>
               <RefreshCw className="h-4 w-4" />
             </Button>
@@ -64,14 +64,14 @@ export default function NotebooksPage() {
               name="notebook-search"
               value={searchTerm}
               onChange={(event) => setSearchTerm(event.target.value)}
-              placeholder={t.notebooks.searchPlaceholder}
+              placeholder={t('notebooks.searchPlaceholder')}
               autoComplete="off"
-              aria-label={t.common.accessibility?.searchNotebooks || "Search notebooks"}
+              aria-label={t('common.accessibility.searchNotebooks') || "Search notebooks"}
               className="w-full sm:w-64"
             />
             <Button onClick={() => setCreateDialogOpen(true)}>
               <Plus className="h-4 w-4 mr-2" />
-              {t.notebooks.newNotebook}
+              {t('notebooks.newNotebook')}
             </Button>
           </div>
         </div>
@@ -80,21 +80,21 @@ export default function NotebooksPage() {
           <NotebookList 
             notebooks={filteredActive} 
             isLoading={isLoading}
-            title={t.notebooks.activeNotebooks}
-            emptyTitle={isSearching ? t.common.noMatches : undefined}
-            emptyDescription={isSearching ? t.common.tryDifferentSearch : undefined}
+            title={t('notebooks.activeNotebooks')}
+            emptyTitle={isSearching ? t('common.noMatches') : undefined}
+            emptyDescription={isSearching ? t('common.tryDifferentSearch') : undefined}
             onAction={!isSearching ? () => setCreateDialogOpen(true) : undefined}
-            actionLabel={!isSearching ? t.notebooks.newNotebook : undefined}
+            actionLabel={!isSearching ? t('notebooks.newNotebook') : undefined}
           />
           
           {hasArchived && (
             <NotebookList 
               notebooks={filteredArchived} 
               isLoading={false}
-              title={t.notebooks.archivedNotebooks}
+              title={t('notebooks.archivedNotebooks')}
               collapsible
-              emptyTitle={isSearching ? t.common.noMatches : undefined}
-              emptyDescription={isSearching ? t.common.tryDifferentSearch : undefined}
+              emptyTitle={isSearching ? t('common.noMatches') : undefined}
+              emptyDescription={isSearching ? t('common.tryDifferentSearch') : undefined}
             />
           )}
         </div>
diff --git a/frontend/src/app/(dashboard)/podcasts/page.tsx b/frontend/src/app/(dashboard)/podcasts/page.tsx
index 8616464..2dddabc 100644
--- a/frontend/src/app/(dashboard)/podcasts/page.tsx
+++ b/frontend/src/app/(dashboard)/podcasts/page.tsx
@@ -29,18 +29,18 @@ export default function PodcastsPage() {
       <div className="flex-1 overflow-y-auto">
         <div className="px-6 py-6 space-y-6">
           <header className="space-y-1">
-            <h1 className="text-2xl font-semibold tracking-tight">{t.podcasts.listTitle}</h1>
+            <h1 className="text-2xl font-semibold tracking-tight">{t('podcasts.listTitle')}</h1>
             <p className="text-muted-foreground">
-              {t.podcasts.listDesc}
+              {t('podcasts.listDesc')}
             </p>
           </header>
 
           {hasUnconfiguredProfiles ? (
             <Alert className="bg-amber-50 text-amber-900 border-amber-200">
               <AlertTriangle className="h-4 w-4" />
-              <AlertTitle>{t.podcasts.setupRequired}</AlertTitle>
+              <AlertTitle>{t('podcasts.setupRequired')}</AlertTitle>
               <AlertDescription>
-                {t.podcasts.setupRequiredDesc}
+                {t('podcasts.setupRequiredDesc')}
               </AlertDescription>
             </Alert>
           ) : null}
@@ -51,15 +51,15 @@ export default function PodcastsPage() {
             className="space-y-6"
           >
             <div className="space-y-2">
-              <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">{t.podcasts.chooseAView}</p>
-              <TabsList aria-label={t.common.accessibility.podcastViews} className="w-full max-w-md">
+              <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">{t('podcasts.chooseAView')}</p>
+              <TabsList aria-label={t('common.accessibility.podcastViews')} className="w-full max-w-md">
                 <TabsTrigger value="episodes">
                   <Mic className="h-4 w-4" />
-                  {t.podcasts.episodesTab}
+                  {t('podcasts.episodesTab')}
                 </TabsTrigger>
                 <TabsTrigger value="templates">
                   <LayoutTemplate className="h-4 w-4" />
-                  {t.podcasts.templatesTab}
+                  {t('podcasts.templatesTab')}
                 </TabsTrigger>
               </TabsList>
             </div>
diff --git a/frontend/src/app/(dashboard)/search/page.tsx b/frontend/src/app/(dashboard)/search/page.tsx
index ffd3fd3..8c86429 100644
--- a/frontend/src/app/(dashboard)/search/page.tsx
+++ b/frontend/src/app/(dashboard)/search/page.tsx
@@ -72,7 +72,7 @@ export default function SearchPage() {
   }, [availableModels])
 
   const resolveModelName = (id?: string | null) => {
-    if (!id) return t.searchPage.notSet
+    if (!id) return t('searchPage.notSet')
     return modelNameById.get(id) ?? id
   }
 
@@ -159,19 +159,19 @@ export default function SearchPage() {
   return (
     <AppShell>
       <div className="p-4 md:p-6">
-        <h1 className="text-xl md:text-2xl font-bold mb-4 md:mb-6">{t.searchPage.askAndSearch}</h1>
+        <h1 className="text-xl md:text-2xl font-bold mb-4 md:mb-6">{t('searchPage.askAndSearch')}</h1>
 
         <Tabs value={activeTab} onValueChange={(v) => setActiveTab(v as 'ask' | 'search')} className="w-full space-y-6">
           <div className="space-y-2">
-            <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">{t.searchPage.chooseAMode}</p>
-            <TabsList aria-label={t.common.accessibility.searchKB} className="w-full max-w-xl">
+            <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">{t('searchPage.chooseAMode')}</p>
+            <TabsList aria-label={t('common.accessibility.searchKB')} className="w-full max-w-xl">
               <TabsTrigger value="ask">
                 <MessageCircleQuestion className="h-4 w-4" />
-                {t.searchPage.askBeta}
+                {t('searchPage.askBeta')}
               </TabsTrigger>
               <TabsTrigger value="search">
                 <Search className="h-4 w-4" />
-                {t.searchPage.search}
+                {t('searchPage.search')}
               </TabsTrigger>
             </TabsList>
           </div>
@@ -179,19 +179,19 @@ export default function SearchPage() {
           <TabsContent value="ask" className="mt-6">
             <Card>
               <CardHeader>
-                <CardTitle className="text-lg">{t.searchPage.askYourKb}</CardTitle>
+                <CardTitle className="text-lg">{t('searchPage.askYourKb')}</CardTitle>
                 <p className="text-sm text-muted-foreground">
-                  {t.searchPage.askYourKbDesc}
+                  {t('searchPage.askYourKbDesc')}
                 </p>
               </CardHeader>
               <CardContent className="space-y-4">
                 {/* Question Input */}
                 <div className="space-y-2">
-                  <Label htmlFor="ask-question">{t.searchPage.question}</Label>
+                  <Label htmlFor="ask-question">{t('searchPage.question')}</Label>
                   <Textarea
                     id="ask-question"
                     name="ask-question"
-                    placeholder={t.searchPage.enterQuestionPlaceholder}
+                    placeholder={t('searchPage.enterQuestionPlaceholder')}
                     value={askQuestion}
                     onChange={(e) => setAskQuestion(e.target.value)}
                     onKeyDown={(e) => {
@@ -203,23 +203,23 @@ export default function SearchPage() {
                     }}
                     disabled={ask.isStreaming}
                     rows={3}
-                    aria-label={t.common.accessibility.enterQuestion}
+                    aria-label={t('common.accessibility.enterQuestion')}
                   />
-                  <p className="text-xs text-muted-foreground">{t.searchPage.pressToSubmit}</p>
+                  <p className="text-xs text-muted-foreground">{t('searchPage.pressToSubmit')}</p>
                 </div>
 
                 {/* Models Display */}
                 {!hasEmbeddingModel ? (
                   <div className="flex items-center gap-2 p-3 text-sm text-amber-600 dark:text-amber-500 bg-amber-50 dark:bg-amber-950/20 rounded-md">
                     <AlertCircle className="h-4 w-4" />
-                    <span>{t.searchPage.noEmbeddingModel}</span>
+                    <span>{t('searchPage.noEmbeddingModel')}</span>
                   </div>
                 ) : (
                   <>
                     <div className="space-y-2">
                       <div className="flex items-center justify-between">
                         <Label className="text-xs text-muted-foreground">
-                          {customModels ? t.searchPage.usingCustomModels : t.searchPage.usingDefaultModels}
+                          {customModels ? t('searchPage.usingCustomModels') : t('searchPage.usingDefaultModels')}
                         </Label>
                         <Button
                           variant="ghost"
@@ -229,18 +229,18 @@ export default function SearchPage() {
                           className="h-auto py-1 px-2"
                         >
                           <Settings className="h-3 w-3 mr-1" />
-                          {t.searchPage.advanced}
+                          {t('searchPage.advanced')}
                         </Button>
                       </div>
                       <div className="flex gap-2 text-xs flex-wrap">
                         <Badge variant="secondary">
-                          {t.searchPage.strategy}: {resolveModelName(customModels?.strategy || modelDefaults?.default_chat_model)}
+                          {t('searchPage.strategy')}: {resolveModelName(customModels?.strategy || modelDefaults?.default_chat_model)}
                         </Badge>
                         <Badge variant="secondary">
-                          {t.searchPage.answer}: {resolveModelName(customModels?.answer || modelDefaults?.default_chat_model)}
+                          {t('searchPage.answer')}: {resolveModelName(customModels?.answer || modelDefaults?.default_chat_model)}
                         </Badge>
                         <Badge variant="secondary">
-                          {t.searchPage.final}: {resolveModelName(customModels?.finalAnswer || modelDefaults?.default_chat_model)}
+                          {t('searchPage.final')}: {resolveModelName(customModels?.finalAnswer || modelDefaults?.default_chat_model)}
                         </Badge>
                       </div>
                     </div>
@@ -254,10 +254,10 @@ export default function SearchPage() {
                         {ask.isStreaming ? (
                           <>
                             <LoadingSpinner size="sm" className="mr-2" />
-                            {t.searchPage.processing}
+                            {t('searchPage.processing')}
                           </>
                         ) : (
-                          t.searchPage.ask
+                          t('searchPage.ask')
                         )}
                       </Button>
 
@@ -268,7 +268,7 @@ export default function SearchPage() {
                           className="w-full"
                         >
                           <Save className="h-4 w-4 mr-2" />
-                          {t.searchPage.saveToNotebooks}
+                          {t('searchPage.saveToNotebooks')}
                         </Button>
                       )}
                     </div>
@@ -311,34 +311,34 @@ export default function SearchPage() {
           <TabsContent value="search" className="mt-6">
             <Card>
               <CardHeader>
-                <CardTitle className="text-lg">{t.searchPage.search}</CardTitle>
+                <CardTitle className="text-lg">{t('searchPage.search')}</CardTitle>
                 <p className="text-sm text-muted-foreground">
-                  {t.searchPage.searchDesc}
+                  {t('searchPage.searchDesc')}
                 </p>
               </CardHeader>
               <CardContent className="space-y-4">
                 {/* Search Input */}
                 <div className="space-y-2">
                   <Label htmlFor="search-query" className="sr-only">
-                    {t.searchPage.search}
+                    {t('searchPage.search')}
                   </Label>
                   <div className="flex flex-col sm:flex-row gap-2">
                     <Input
                       id="search-query"
                       name="search-query"
-                      placeholder={t.searchPage.enterSearchPlaceholder}
+                      placeholder={t('searchPage.enterSearchPlaceholder')}
                       value={searchQuery}
                       onChange={(e) => setSearchQuery(e.target.value)}
                       onKeyPress={handleKeyPress}
                       disabled={searchMutation.isPending}
                       className="flex-1"
-                      aria-label={t.common.accessibility.enterSearch}
+                      aria-label={t('common.accessibility.enterSearch')}
                       autoComplete="off"
                     />
                     <Button
                       onClick={handleSearch}
                       disabled={searchMutation.isPending || !searchQuery.trim()}
-                      aria-label={t.common.accessibility.searchKBBtn}
+                      aria-label={t('common.accessibility.searchKBBtn')}
                       className="w-full sm:w-auto"
                     >
                       {searchMutation.isPending ? (
@@ -346,21 +346,21 @@ export default function SearchPage() {
                       ) : (
                         <Search className="h-4 w-4 mr-2" />
                       )}
-                      {t.searchPage.search}
+                      {t('searchPage.search')}
                     </Button>
                   </div>
-                  <p className="text-xs text-muted-foreground">{t.searchPage.pressToSearch}</p>
+                  <p className="text-xs text-muted-foreground">{t('searchPage.pressToSearch')}</p>
                 </div>
 
                 {/* Search Options */}
                 <div className="space-y-4">
                   {/* Search Type */}
                   <div className="space-y-2" role="group" aria-labelledby="search-type-label">
-                    <span id="search-type-label" className="text-sm font-medium leading-none">{t.searchPage.searchType}</span>
+                    <span id="search-type-label" className="text-sm font-medium leading-none">{t('searchPage.searchType')}</span>
                     {!hasEmbeddingModel && (
                       <div className="flex items-center gap-2 text-sm text-amber-600 dark:text-amber-500">
                         <AlertCircle className="h-4 w-4" />
-                        <span>{t.searchPage.vectorSearchWarning}</span>
+                        <span>{t('searchPage.vectorSearchWarning')}</span>
                       </div>
                     )}
                     <RadioGroup
@@ -372,7 +372,7 @@ export default function SearchPage() {
                       <div className="flex items-center space-x-2">
                         <RadioGroupItem value="text" id="text" />
                         <Label htmlFor="text" className="font-normal cursor-pointer">
-                          {t.searchPage.textSearch}
+                          {t('searchPage.textSearch')}
                         </Label>
                       </div>
                       <div className="flex items-center space-x-2">
@@ -385,7 +385,7 @@ export default function SearchPage() {
                           htmlFor="vector"
                           className={`font-normal ${!hasEmbeddingModel ? 'text-muted-foreground cursor-not-allowed' : 'cursor-pointer'}`}
                         >
-                          {t.searchPage.vectorSearch}
+                          {t('searchPage.vectorSearch')}
                         </Label>
                       </div>
                     </RadioGroup>
@@ -393,7 +393,7 @@ export default function SearchPage() {
 
                   {/* Search Locations */}
                   <div className="space-y-2" role="group" aria-labelledby="search-in-label">
-                    <span id="search-in-label" className="text-sm font-medium leading-none">{t.searchPage.searchIn}</span>
+                    <span id="search-in-label" className="text-sm font-medium leading-none">{t('searchPage.searchIn')}</span>
                     <div className="space-y-2">
                       <div className="flex items-center space-x-2">
                         <Checkbox
@@ -404,7 +404,7 @@ export default function SearchPage() {
                           disabled={searchMutation.isPending}
                         />
                         <Label htmlFor="sources" className="font-normal cursor-pointer">
-                          {t.searchPage.searchSources}
+                          {t('searchPage.searchSources')}
                         </Label>
                       </div>
                       <div className="flex items-center space-x-2">
@@ -416,7 +416,7 @@ export default function SearchPage() {
                           disabled={searchMutation.isPending}
                         />
                         <Label htmlFor="notes" className="font-normal cursor-pointer">
-                          {t.searchPage.searchNotes}
+                          {t('searchPage.searchNotes')}
                         </Label>
                       </div>
                     </div>
@@ -428,15 +428,15 @@ export default function SearchPage() {
                   <div className="mt-6 space-y-3">
                     <div className="flex items-center justify-between">
                       <h3 className="text-sm font-medium">
-                        {t.searchPage.resultsFound.replace('{count}', searchMutation.data.total_count.toString())}
+                        {t('searchPage.resultsFound').replace('{count}', searchMutation.data.total_count.toString())}
                       </h3>
-                      <Badge variant="outline">{searchMutation.data.search_type === 'text' ? t.searchPage.textSearch : t.searchPage.vectorSearch}</Badge>
+                      <Badge variant="outline">{searchMutation.data.search_type === 'text' ? t('searchPage.textSearch') : t('searchPage.vectorSearch')}</Badge>
                     </div>
 
                     {searchMutation.data.results.length === 0 ? (
                       <Card>
                         <CardContent className="pt-6 text-center text-muted-foreground">
-                          {t.searchPage.noResultsFor.replace('{query}', searchQuery)}
+                          {t('searchPage.noResultsFor').replace('{query}', searchQuery)}
                         </CardContent>
                       </Card>
                     ) : (
@@ -472,7 +472,7 @@ export default function SearchPage() {
                                 <Collapsible className="mt-3">
                                   <CollapsibleTrigger className="flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground">
                                     <ChevronDown className="h-4 w-4" />
-                                    {t.searchPage.matches.replace('{count}', result.matches.length.toString())}
+                                    {t('searchPage.matches').replace('{count}', result.matches.length.toString())}
                                   </CollapsibleTrigger>
                                   <CollapsibleContent className="mt-2 space-y-1">
                                     {result.matches.map((match, i) => (
diff --git a/frontend/src/app/(dashboard)/settings/api-keys/page.tsx b/frontend/src/app/(dashboard)/settings/api-keys/page.tsx
index 086fb1a..280a303 100644
--- a/frontend/src/app/(dashboard)/settings/api-keys/page.tsx
+++ b/frontend/src/app/(dashboard)/settings/api-keys/page.tsx
@@ -255,14 +255,14 @@ function CredentialFormDialog({
         <DialogHeader>
           <DialogTitle>
             {isEditing
-              ? t.apiKeys.editConfig.replace('{provider}', PROVIDER_DISPLAY_NAMES[provider] || provider)
-              : t.apiKeys.addConfig.replace('{provider}', PROVIDER_DISPLAY_NAMES[provider] || provider)}
+              ? t('apiKeys.editConfig').replace('{provider}', PROVIDER_DISPLAY_NAMES[provider] || provider)
+              : t('apiKeys.addConfig').replace('{provider}', PROVIDER_DISPLAY_NAMES[provider] || provider)}
           </DialogTitle>
         </DialogHeader>
         <form onSubmit={handleSubmit} className="space-y-4">
           {/* Name */}
           <div className="space-y-2">
-            <Label htmlFor="cred-name">{t.apiKeys.configName}</Label>
+            <Label htmlFor="cred-name">{t('apiKeys.configName')}</Label>
             <input
               id="cred-name"
               className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
@@ -271,14 +271,14 @@ function CredentialFormDialog({
               placeholder={`${PROVIDER_DISPLAY_NAMES[provider] || provider} Production`}
               disabled={isSubmitting}
             />
-            <p className="text-xs text-muted-foreground">{t.apiKeys.configNameHint}</p>
+            <p className="text-xs text-muted-foreground">{t('apiKeys.configNameHint')}</p>
           </div>
 
           {/* Vertex fields */}
           {isVertex ? (
             <>
               <div className="space-y-2">
-                <Label htmlFor="vertex-project">{t.apiKeys.vertexProject}</Label>
+                <Label htmlFor="vertex-project">{t('apiKeys.vertexProject')}</Label>
                 <input
                   id="vertex-project"
                   className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
@@ -289,7 +289,7 @@ function CredentialFormDialog({
                 />
               </div>
               <div className="space-y-2">
-                <Label htmlFor="vertex-location">{t.apiKeys.vertexLocation}</Label>
+                <Label htmlFor="vertex-location">{t('apiKeys.vertexLocation')}</Label>
                 <input
                   id="vertex-location"
                   className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
@@ -301,8 +301,8 @@ function CredentialFormDialog({
               </div>
               <div className="space-y-2">
                 <Label htmlFor="vertex-creds">
-                  {t.apiKeys.vertexCredentials}
-                  <span className="text-muted-foreground font-normal ml-1">({t.common.optional})</span>
+                  {t('apiKeys.vertexCredentials')}
+                  <span className="text-muted-foreground font-normal ml-1">({t('common.optional')})</span>
                 </Label>
                 <input
                   id="vertex-creds"
@@ -318,8 +318,8 @@ function CredentialFormDialog({
             /* API Key */
             <div className="space-y-2">
               <Label htmlFor="api-key">
-                {t.models.apiKey}
-                {!requiresApiKey && <span className="text-muted-foreground font-normal ml-1">({t.common.optional})</span>}
+                {t('models.apiKey')}
+                {!requiresApiKey && <span className="text-muted-foreground font-normal ml-1">({t('common.optional')})</span>}
               </Label>
               <div className="relative">
                 <input
@@ -341,10 +341,10 @@ function CredentialFormDialog({
                   {showApiKey ? 'Hide' : 'Show'}
                 </button>
               </div>
-              {isEditing && <p className="text-xs text-muted-foreground">{t.apiKeys.apiKeyEditHint}</p>}
+              {isEditing && <p className="text-xs text-muted-foreground">{t('apiKeys.apiKeyEditHint')}</p>}
               {docsUrl && (
                 <a href={docsUrl} target="_blank" rel="noopener noreferrer" className="text-xs text-primary hover:underline">
-                  {t.apiKeys.getApiKey} &rarr;
+                  {t('apiKeys.getApiKey')} &rarr;
                 </a>
               )}
             </div>
@@ -353,7 +353,7 @@ function CredentialFormDialog({
           {/* Base URL (non-Vertex) */}
           {!isVertex && (
             <div className="space-y-2">
-              <Label htmlFor="base-url" className="text-muted-foreground">{t.apiKeys.baseUrl}</Label>
+              <Label htmlFor="base-url" className="text-muted-foreground">{t('apiKeys.baseUrl')}</Label>
               <input
                 id="base-url"
                 type="url"
@@ -363,18 +363,18 @@ function CredentialFormDialog({
                 placeholder={isOllama ? 'http://localhost:11434' : 'https://api.example.com/v1'}
                 disabled={isSubmitting}
               />
-              <p className="text-xs text-muted-foreground">{t.apiKeys.baseUrlOverrideHint}</p>
+              <p className="text-xs text-muted-foreground">{t('apiKeys.baseUrlOverrideHint')}</p>
             </div>
           )}
 
           {/* Actions */}
           <div className="flex justify-end gap-2 pt-4 border-t">
             <Button type="button" variant="outline" onClick={() => onOpenChange(false)} disabled={isSubmitting}>
-              {t.common.cancel}
+              {t('common.cancel')}
             </Button>
             <Button type="submit" disabled={!isValid || isSubmitting}>
               {isSubmitting && <Loader2 className="h-4 w-4 animate-spin mr-2" />}
-              {isEditing ? t.common.save : t.apiKeys.addConfig}
+              {isEditing ? t('common.save') : t('apiKeys.addConfig')}
             </Button>
           </div>
         </form>
@@ -518,7 +518,7 @@ function DiscoverModelsDialog({
       <DialogContent className="sm:max-w-lg max-h-[80vh] overflow-y-auto">
         <DialogHeader>
           <DialogTitle>
-            {t.models.discoverModels} - {PROVIDER_DISPLAY_NAMES[credential.provider] || credential.provider}
+            {t('models.discoverModels')} - {PROVIDER_DISPLAY_NAMES[credential.provider] || credential.provider}
           </DialogTitle>
           <DialogDescription>
             {credential.name}
@@ -538,7 +538,7 @@ function DiscoverModelsDialog({
           <div className="space-y-4">
             {/* Model type selector */}
             <div className="space-y-2">
-              <Label>{t.models.modelType}</Label>
+              <Label>{t('models.modelType')}</Label>
               <Select value={selectedType} onValueChange={(v) => setSelectedType(v as ModelType)}>
                 <SelectTrigger>
                   <SelectValue />
@@ -554,14 +554,14 @@ function DiscoverModelsDialog({
                   ))}
                 </SelectContent>
               </Select>
-              <p className="text-xs text-muted-foreground">{t.models.modelTypeHint}</p>
+              <p className="text-xs text-muted-foreground">{t('models.modelTypeHint')}</p>
             </div>
 
             {/* Search input */}
             <input
               type="text"
               className="flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm placeholder:text-muted-foreground"
-              placeholder={t.models.searchOrAddModel}
+              placeholder={t('models.searchOrAddModel')}
               value={searchQuery}
               onChange={(e) => setSearchQuery(e.target.value)}
             />
@@ -570,7 +570,7 @@ function DiscoverModelsDialog({
             {filteredModels.length > 0 && (
               <div className="flex items-center justify-between">
                 <Button variant="outline" size="sm" onClick={toggleAll}>
-                  {filteredModels.every(m => selectedModels.has(m.name)) ? t.common.remove : t.common.addSelected}
+                  {filteredModels.every(m => selectedModels.has(m.name)) ? t('common.remove') : t('common.addSelected')}
                   {' '}({selectedModels.size}/{filteredModels.length})
                 </Button>
               </div>
@@ -607,13 +607,13 @@ function DiscoverModelsDialog({
                   />
                   <Plus className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
                   <span className="truncate">
-                    {t.models.addCustomModel.replace('{name}', searchQuery.trim())}
+                    {t('models.addCustomModel').replace('{name}', searchQuery.trim())}
                   </span>
                 </label>
               )}
 
               {filteredModels.length === 0 && !showCustomOption && (
-                <p className="text-center py-4 text-muted-foreground text-sm">{t.models.noModelsFound}</p>
+                <p className="text-center py-4 text-muted-foreground text-sm">{t('models.noModelsFound')}</p>
               )}
             </div>
           </div>
@@ -621,14 +621,14 @@ function DiscoverModelsDialog({
 
         <DialogFooter>
           <Button variant="outline" onClick={() => onOpenChange(false)}>
-            {t.common.cancel}
+            {t('common.cancel')}
           </Button>
           <Button
             onClick={handleRegister}
             disabled={totalSelected === 0 || registerModels.isPending}
           >
             {registerModels.isPending && <Loader2 className="h-4 w-4 animate-spin mr-2" />}
-            {t.common.add} ({totalSelected})
+            {t('common.add')} ({totalSelected})
           </Button>
         </DialogFooter>
       </DialogContent>
@@ -685,9 +685,9 @@ function DeleteCredentialDialog({
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent>
         <DialogHeader>
-          <DialogTitle>{t.apiKeys.deleteConfig}</DialogTitle>
+          <DialogTitle>{t('apiKeys.deleteConfig')}</DialogTitle>
           <DialogDescription>
-            {t.apiKeys.deleteConfigConfirm.replace('{name}', credential.name)}
+            {t('apiKeys.deleteConfigConfirm').replace('{name}', credential.name)}
           </DialogDescription>
         </DialogHeader>
 
@@ -717,7 +717,7 @@ function DeleteCredentialDialog({
 
         <DialogFooter className="flex-col sm:flex-row gap-2">
           <Button variant="outline" onClick={() => onOpenChange(false)}>
-            {t.common.cancel}
+            {t('common.cancel')}
           </Button>
           {credential.model_count > 0 && migrateToId && (
             <Button onClick={handleMigrate} disabled={deleteCredential.isPending}>
@@ -731,7 +731,7 @@ function DeleteCredentialDialog({
             disabled={deleteCredential.isPending}
           >
             {deleteCredential.isPending && <Loader2 className="h-4 w-4 animate-spin mr-2" />}
-            {credential.model_count > 0 ? 'Delete with Models' : t.common.delete}
+            {credential.model_count > 0 ? 'Delete with Models' : t('common.delete')}
           </Button>
         </DialogFooter>
       </DialogContent>
@@ -769,8 +769,8 @@ function CredentialItem({
   const testResult = testResults[credential.id]
 
   // Extract translations used in model badge loops to avoid excessive Proxy accesses
-  const testModelLabel = t.models.testModel
-  const deleteModelLabel = t.models.deleteModel
+  const testModelLabel = t('models.testModel')
+  const deleteModelLabel = t('models.deleteModel')
 
   // Check which models are defaults
   const defaultSlots: Record<string, string> = {}
@@ -824,7 +824,7 @@ function CredentialItem({
               variant="ghost" size="sm"
               onClick={() => testCredential(credential.id)}
               disabled={isTestPending || !!credential.decryption_error}
-              title={t.apiKeys.testConnection}
+              title={t('apiKeys.testConnection')}
             >
               {isTestPending ? <Loader2 className="h-4 w-4 animate-spin" /> : <Plug className="h-4 w-4" />}
               <span className="hidden sm:inline text-xs">Test</span>
@@ -833,19 +833,19 @@ function CredentialItem({
               variant="ghost" size="sm"
               onClick={() => setDiscoverOpen(true)}
               disabled={!!credential.decryption_error}
-              title={t.apiKeys.syncModels}
+              title={t('apiKeys.syncModels')}
             >
               <Bot className="h-4 w-4" />
               <span className="hidden sm:inline text-xs">Models</span>
             </Button>
-            <Button variant="ghost" size="sm" onClick={() => setEditOpen(true)} disabled={!!credential.decryption_error} title={t.common.edit}>
+            <Button variant="ghost" size="sm" onClick={() => setEditOpen(true)} disabled={!!credential.decryption_error} title={t('common.edit')}>
               <Edit className="h-4 w-4" />
             </Button>
             <Button
               variant="ghost" size="sm"
               onClick={() => setDeleteOpen(true)}
               className="text-destructive hover:text-destructive hover:bg-destructive/10"
-              title={t.common.delete}
+              title={t('common.delete')}
             >
               <Trash2 className="h-4 w-4" />
             </Button>
@@ -856,9 +856,9 @@ function CredentialItem({
         {credential.decryption_error && (
           <Alert className="border-amber-500/50 bg-amber-50 dark:bg-amber-950/20">
             <AlertTriangle className="h-4 w-4 text-amber-600 dark:text-amber-400" />
-            <AlertTitle className="text-amber-800 dark:text-amber-200">{t.apiKeys.decryptionError}</AlertTitle>
+            <AlertTitle className="text-amber-800 dark:text-amber-200">{t('apiKeys.decryptionError')}</AlertTitle>
             <AlertDescription className="text-amber-700 dark:text-amber-300 text-sm">
-              {t.apiKeys.decryptionErrorDescription}
+              {t('apiKeys.decryptionErrorDescription')}
             </AlertDescription>
           </Alert>
         )}
@@ -1013,12 +1013,12 @@ function ProviderSection({
             {hasCredentials ? (
               <Badge className="bg-emerald-100 text-emerald-700 hover:bg-emerald-100 dark:bg-emerald-900/30 dark:text-emerald-300">
                 <Check className="mr-1 h-3 w-3" />
-                {t.apiKeys.configured}
+                {t('apiKeys.configured')}
               </Badge>
             ) : (
               <Badge variant="outline" className="text-muted-foreground border-dashed">
                 <X className="mr-1 h-3 w-3" />
-                {t.apiKeys.notConfigured}
+                {t('apiKeys.notConfigured')}
               </Badge>
             )}
           </div>
@@ -1043,7 +1043,7 @@ function ProviderSection({
           disabled={!encryptionReady}
         >
           <Plus className="h-4 w-4" />
-          {t.apiKeys.addConfig}
+          {t('apiKeys.addConfig')}
         </Button>
       </CardContent>
 
@@ -1098,16 +1098,16 @@ function DefaultModelSelectors({
   }
 
   const primaryConfigs: DefaultConfig[] = [
-    { key: 'default_chat_model', label: t.models.chatModelLabel, description: t.models.chatModelDesc, modelType: 'language', required: true, id: `${generatedId}-chat` },
-    { key: 'default_embedding_model', label: t.models.embeddingModelLabel, description: t.models.embeddingModelDesc, modelType: 'embedding', required: true, id: `${generatedId}-embed` },
-    { key: 'default_text_to_speech_model', label: t.models.ttsModelLabel, description: t.models.ttsModelDesc, modelType: 'text_to_speech', id: `${generatedId}-tts` },
-    { key: 'default_speech_to_text_model', label: t.models.sttModelLabel, description: t.models.sttModelDesc, modelType: 'speech_to_text', id: `${generatedId}-stt` },
+    { key: 'default_chat_model', label: t('models.chatModelLabel'), description: t('models.chatModelDesc'), modelType: 'language', required: true, id: `${generatedId}-chat` },
+    { key: 'default_embedding_model', label: t('models.embeddingModelLabel'), description: t('models.embeddingModelDesc'), modelType: 'embedding', required: true, id: `${generatedId}-embed` },
+    { key: 'default_text_to_speech_model', label: t('models.ttsModelLabel'), description: t('models.ttsModelDesc'), modelType: 'text_to_speech', id: `${generatedId}-tts` },
+    { key: 'default_speech_to_text_model', label: t('models.sttModelLabel'), description: t('models.sttModelDesc'), modelType: 'speech_to_text', id: `${generatedId}-stt` },
   ]
 
   const advancedConfigs: DefaultConfig[] = [
-    { key: 'default_transformation_model', label: t.models.transformationModelLabel, description: t.models.transformationModelDesc, modelType: 'language', required: true, id: `${generatedId}-transform` },
-    { key: 'default_tools_model', label: t.models.toolsModelLabel, description: t.models.toolsModelDesc, modelType: 'language', id: `${generatedId}-tools` },
-    { key: 'large_context_model', label: t.models.largeContextModelLabel, description: t.models.largeContextModelDesc, modelType: 'language', id: `${generatedId}-large` },
+    { key: 'default_transformation_model', label: t('models.transformationModelLabel'), description: t('models.transformationModelDesc'), modelType: 'language', required: true, id: `${generatedId}-transform` },
+    { key: 'default_tools_model', label: t('models.toolsModelLabel'), description: t('models.toolsModelDesc'), modelType: 'language', id: `${generatedId}-tools` },
+    { key: 'large_context_model', label: t('models.largeContextModelLabel'), description: t('models.largeContextModelDesc'), modelType: 'language', id: `${generatedId}-large` },
   ]
 
   const defaultConfigs = [...primaryConfigs, ...advancedConfigs]
@@ -1145,15 +1145,15 @@ function DefaultModelSelectors({
   return (
     <Card>
       <CardHeader>
-        <CardTitle>{t.models.defaultAssignments}</CardTitle>
-        <CardDescription>{t.models.defaultAssignmentsDesc}</CardDescription>
+        <CardTitle>{t('models.defaultAssignments')}</CardTitle>
+        <CardDescription>{t('models.defaultAssignmentsDesc')}</CardDescription>
       </CardHeader>
       <CardContent className="space-y-6">
         {missingRequired.length > 0 && (
           <Alert>
             <AlertCircle className="h-4 w-4" />
             <AlertDescription className="flex items-center justify-between gap-4">
-              <span>{t.models.missingRequiredModels.replace('{models}', missingRequired.join(', '))}</span>
+              <span>{t('models.missingRequiredModels').replace('{models}', missingRequired.join(', '))}</span>
               <Button
                 variant="outline" size="sm"
                 onClick={() => autoAssign.mutate()}
@@ -1161,7 +1161,7 @@ function DefaultModelSelectors({
                 className="shrink-0 gap-1.5"
               >
                 {autoAssign.isPending ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <Wand2 className="h-3.5 w-3.5" />}
-                {autoAssign.isPending ? t.models.autoAssigning : t.models.autoAssign}
+                {autoAssign.isPending ? t('models.autoAssigning') : t('models.autoAssign')}
               </Button>
             </AlertDescription>
           </Alert>
@@ -1191,8 +1191,8 @@ function DefaultModelSelectors({
                     >
                       <SelectValue placeholder={
                         config.required && !isValid && available.length > 0
-                          ? t.models.requiredModelPlaceholder
-                          : t.models.selectModelPlaceholder
+                          ? t('models.requiredModelPlaceholder')
+                          : t('models.selectModelPlaceholder')
                       } />
                     </SelectTrigger>
                     <SelectContent>
@@ -1219,7 +1219,7 @@ function DefaultModelSelectors({
 
         {/* Advanced models: Transformation, Tools, Large Context */}
         <div className="border-t pt-3">
-          <p className="text-xs text-muted-foreground mb-3">{t.navigation.advanced}</p>
+          <p className="text-xs text-muted-foreground mb-3">{t('navigation.advanced')}</p>
             <div className="grid gap-3 sm:grid-cols-3">
               {advancedConfigs.map(config => {
                 const available = getModelsForType(config.modelType)
@@ -1243,8 +1243,8 @@ function DefaultModelSelectors({
                         >
                           <SelectValue placeholder={
                             config.required && !isValid && available.length > 0
-                              ? t.models.requiredModelPlaceholder
-                              : t.models.selectModelPlaceholder
+                              ? t('models.requiredModelPlaceholder')
+                              : t('models.selectModelPlaceholder')
                           } />
                         </SelectTrigger>
                         <SelectContent>
@@ -1355,19 +1355,19 @@ export default function ApiKeysPage() {
           <div>
             <h1 className="text-2xl font-bold flex items-center gap-2">
               <Key className="h-6 w-6" />
-              {t.apiKeys.title}
+              {t('apiKeys.title')}
             </h1>
-            <p className="text-muted-foreground mt-1">{t.apiKeys.description}</p>
+            <p className="text-muted-foreground mt-1">{t('apiKeys.description')}</p>
           </div>
 
           {/* Encryption warning */}
           {!encryptionReady && (
             <Alert className="border-red-500/50 bg-red-50 dark:bg-red-950/20">
               <ShieldAlert className="h-4 w-4 text-red-600 dark:text-red-400" />
-              <AlertTitle className="text-red-800 dark:text-red-200">{t.apiKeys.encryptionRequired}</AlertTitle>
+              <AlertTitle className="text-red-800 dark:text-red-200">{t('apiKeys.encryptionRequired')}</AlertTitle>
               <AlertDescription className="text-red-700 dark:text-red-300">
                 <code className="text-xs bg-red-100 dark:bg-red-900/30 px-1 py-0.5 rounded">
-                  {t.apiKeys.encryptionRequiredDescription}
+                  {t('apiKeys.encryptionRequiredDescription')}
                 </code>
               </AlertDescription>
             </Alert>
@@ -1404,7 +1404,7 @@ export default function ApiKeysPage() {
               rel="noopener noreferrer"
               className="text-sm text-primary hover:underline"
             >
-              {t.apiKeys.learnMore}
+              {t('apiKeys.learnMore')}
             </a>
           </div>
         </div>
diff --git a/frontend/src/app/(dashboard)/settings/components/SettingsForm.tsx b/frontend/src/app/(dashboard)/settings/components/SettingsForm.tsx
index 2969672..f74f25f 100644
--- a/frontend/src/app/(dashboard)/settings/components/SettingsForm.tsx
+++ b/frontend/src/app/(dashboard)/settings/components/SettingsForm.tsx
@@ -85,9 +85,9 @@ export function SettingsForm() {
   if (error) {
     return (
       <Alert variant="destructive">
-        <AlertTitle>{t.settings.loadFailed}</AlertTitle>
+        <AlertTitle>{t('settings.loadFailed')}</AlertTitle>
         <AlertDescription>
-          {error instanceof Error ? error.message : t.common.error}
+          {error instanceof Error ? error.message : t('common.error')}
         </AlertDescription>
       </Alert>
     )
@@ -97,14 +97,14 @@ export function SettingsForm() {
     <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
       <Card>
         <CardHeader>
-          <CardTitle>{t.settings.contentProcessing}</CardTitle>
+          <CardTitle>{t('settings.contentProcessing')}</CardTitle>
           <CardDescription>
-            {t.settings.contentProcessingDesc}
+            {t('settings.contentProcessingDesc')}
           </CardDescription>
         </CardHeader>
         <CardContent className="space-y-6">
           <div className="space-y-3">
-            <Label htmlFor="doc_engine">{t.settings.docEngine}</Label>
+            <Label htmlFor="doc_engine">{t('settings.docEngine')}</Label>
             <Controller
               name="default_content_processing_engine_doc"
               control={control}
@@ -117,12 +117,12 @@ export function SettingsForm() {
                     disabled={field.disabled || isLoading}
                   >
                       <SelectTrigger id="doc_engine" className="w-full">
-                        <SelectValue placeholder={t.settings.docEnginePlaceholder} />
+                        <SelectValue placeholder={t('settings.docEnginePlaceholder')} />
                       </SelectTrigger>
                     <SelectContent>
-                      <SelectItem value="auto">{t.settings.autoRecommended}</SelectItem>
-                      <SelectItem value="docling">{t.settings.docling}</SelectItem>
-                      <SelectItem value="simple">{t.settings.simple}</SelectItem>
+                      <SelectItem value="auto">{t('settings.autoRecommended')}</SelectItem>
+                      <SelectItem value="docling">{t('settings.docling')}</SelectItem>
+                      <SelectItem value="simple">{t('settings.simple')}</SelectItem>
                     </SelectContent>
                   </Select>
               )}
@@ -130,16 +130,16 @@ export function SettingsForm() {
             <Collapsible open={expandedSections.doc} onOpenChange={() => toggleSection('doc')}>
               <CollapsibleTrigger className="flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors">
                 <ChevronDownIcon className={`h-4 w-4 transition-transform ${expandedSections.doc ? 'rotate-180' : ''}`} />
-                {t.settings.helpMeChoose}
+                {t('settings.helpMeChoose')}
               </CollapsibleTrigger>
               <CollapsibleContent className="mt-2 text-sm text-muted-foreground space-y-2">
-                <p>{t.settings.docHelp}</p>
+                <p>{t('settings.docHelp')}</p>
               </CollapsibleContent>
             </Collapsible>
           </div>
           
           <div className="space-y-3">
-            <Label htmlFor="url_engine">{t.settings.urlEngine}</Label>
+            <Label htmlFor="url_engine">{t('settings.urlEngine')}</Label>
             <Controller
               name="default_content_processing_engine_url"
               control={control}
@@ -152,13 +152,13 @@ export function SettingsForm() {
                   disabled={field.disabled || isLoading}
                 >
                   <SelectTrigger id="url_engine" className="w-full">
-                    <SelectValue placeholder={t.settings.urlEnginePlaceholder} />
+                    <SelectValue placeholder={t('settings.urlEnginePlaceholder')} />
                   </SelectTrigger>
                   <SelectContent>
-                    <SelectItem value="auto">{t.settings.autoRecommended}</SelectItem>
-                    <SelectItem value="firecrawl">{t.settings.firecrawl}</SelectItem>
-                    <SelectItem value="jina">{t.settings.jina}</SelectItem>
-                    <SelectItem value="simple">{t.settings.simple}</SelectItem>
+                    <SelectItem value="auto">{t('settings.autoRecommended')}</SelectItem>
+                    <SelectItem value="firecrawl">{t('settings.firecrawl')}</SelectItem>
+                    <SelectItem value="jina">{t('settings.jina')}</SelectItem>
+                    <SelectItem value="simple">{t('settings.simple')}</SelectItem>
                   </SelectContent>
                 </Select>
               )}
@@ -166,10 +166,10 @@ export function SettingsForm() {
              <Collapsible open={expandedSections.url} onOpenChange={() => toggleSection('url')}>
               <CollapsibleTrigger className="flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors">
                 <ChevronDownIcon className={`h-4 w-4 transition-transform ${expandedSections.url ? 'rotate-180' : ''}`} />
-                {t.settings.helpMeChoose}
+                {t('settings.helpMeChoose')}
               </CollapsibleTrigger>
               <CollapsibleContent className="mt-2 text-sm text-muted-foreground space-y-2">
-                <p>{t.settings.urlHelp}</p>
+                <p>{t('settings.urlHelp')}</p>
               </CollapsibleContent>
             </Collapsible>
           </div>
@@ -178,14 +178,14 @@ export function SettingsForm() {
 
        <Card>
         <CardHeader>
-          <CardTitle>{t.settings.embeddingAndSearch}</CardTitle>
+          <CardTitle>{t('settings.embeddingAndSearch')}</CardTitle>
           <CardDescription>
-            {t.settings.embeddingAndSearchDesc}
+            {t('settings.embeddingAndSearchDesc')}
           </CardDescription>
         </CardHeader>
         <CardContent className="space-y-6">
            <div className="space-y-3">
-            <Label htmlFor="embedding">{t.settings.defaultEmbeddingOption}</Label>
+            <Label htmlFor="embedding">{t('settings.defaultEmbeddingOption')}</Label>
             <Controller
               name="default_embedding_option"
               control={control}
@@ -198,12 +198,12 @@ export function SettingsForm() {
                   disabled={field.disabled || isLoading}
                 >
                   <SelectTrigger id="embedding" className="w-full">
-                    <SelectValue placeholder={t.settings.embeddingOptionPlaceholder} />
+                    <SelectValue placeholder={t('settings.embeddingOptionPlaceholder')} />
                   </SelectTrigger>
                   <SelectContent>
-                    <SelectItem value="ask">{t.settings.ask}</SelectItem>
-                    <SelectItem value="always">{t.settings.always}</SelectItem>
-                    <SelectItem value="never">{t.settings.never}</SelectItem>
+                    <SelectItem value="ask">{t('settings.ask')}</SelectItem>
+                    <SelectItem value="always">{t('settings.always')}</SelectItem>
+                    <SelectItem value="never">{t('settings.never')}</SelectItem>
                   </SelectContent>
                 </Select>
               )}
@@ -211,10 +211,10 @@ export function SettingsForm() {
              <Collapsible open={expandedSections.embedding} onOpenChange={() => toggleSection('embedding')}>
               <CollapsibleTrigger className="flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors">
                 <ChevronDownIcon className={`h-4 w-4 transition-transform ${expandedSections.embedding ? 'rotate-180' : ''}`} />
-                {t.settings.helpMeChoose}
+                {t('settings.helpMeChoose')}
               </CollapsibleTrigger>
               <CollapsibleContent className="mt-2 text-sm text-muted-foreground space-y-2">
-                <p>{t.settings.embeddingHelp}</p>
+                <p>{t('settings.embeddingHelp')}</p>
               </CollapsibleContent>
             </Collapsible>
           </div>
@@ -223,14 +223,14 @@ export function SettingsForm() {
 
        <Card>
         <CardHeader>
-          <CardTitle>{t.settings.fileManagement}</CardTitle>
+          <CardTitle>{t('settings.fileManagement')}</CardTitle>
           <CardDescription>
-            {t.settings.fileManagementDesc}
+            {t('settings.fileManagementDesc')}
           </CardDescription>
         </CardHeader>
         <CardContent className="space-y-6">
            <div className="space-y-3">
-            <Label htmlFor="auto_delete">{t.settings.autoDeleteFiles}</Label>
+            <Label htmlFor="auto_delete">{t('settings.autoDeleteFiles')}</Label>
             <Controller
               name="auto_delete_files"
               control={control}
@@ -243,11 +243,11 @@ export function SettingsForm() {
                   disabled={field.disabled || isLoading}
                 >
                   <SelectTrigger id="auto_delete" className="w-full">
-                    <SelectValue placeholder={t.settings.autoDeletePlaceholder} />
+                    <SelectValue placeholder={t('settings.autoDeletePlaceholder')} />
                   </SelectTrigger>
                    <SelectContent>
-                    <SelectItem value="yes">{t.common.yes}</SelectItem>
-                    <SelectItem value="no">{t.common.no}</SelectItem>
+                    <SelectItem value="yes">{t('common.yes')}</SelectItem>
+                    <SelectItem value="no">{t('common.no')}</SelectItem>
                   </SelectContent>
                 </Select>
               )}
@@ -255,10 +255,10 @@ export function SettingsForm() {
              <Collapsible open={expandedSections.files} onOpenChange={() => toggleSection('files')}>
               <CollapsibleTrigger className="flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors">
                 <ChevronDownIcon className={`h-4 w-4 transition-transform ${expandedSections.files ? 'rotate-180' : ''}`} />
-                {t.settings.helpMeChoose}
+                {t('settings.helpMeChoose')}
               </CollapsibleTrigger>
               <CollapsibleContent className="mt-2 text-sm text-muted-foreground space-y-2">
-                <p>{t.settings.filesHelp}</p>
+                <p>{t('settings.filesHelp')}</p>
               </CollapsibleContent>
             </Collapsible>
           </div>
@@ -270,7 +270,7 @@ export function SettingsForm() {
           type="submit" 
           disabled={!isDirty || updateSettings.isPending}
         >
-          {updateSettings.isPending ? t.common.saving : t.navigation.settings}
+          {updateSettings.isPending ? t('common.saving') : t('navigation.settings')}
         </Button>
       </div>
     </form>
diff --git a/frontend/src/app/(dashboard)/settings/page.tsx b/frontend/src/app/(dashboard)/settings/page.tsx
index 5f795ac..cdf3341 100644
--- a/frontend/src/app/(dashboard)/settings/page.tsx
+++ b/frontend/src/app/(dashboard)/settings/page.tsx
@@ -17,7 +17,7 @@ export default function SettingsPage() {
         <div className="p-6">
           <div className="max-w-4xl">
             <div className="flex items-center gap-4 mb-6">
-              <h1 className="text-2xl font-bold">{t.navigation.settings}</h1>
+              <h1 className="text-2xl font-bold">{t('navigation.settings')}</h1>
               <Button variant="outline" size="sm" onClick={() => refetch()}>
                 <RefreshCw className="h-4 w-4" />
               </Button>
diff --git a/frontend/src/app/(dashboard)/sources/page.tsx b/frontend/src/app/(dashboard)/sources/page.tsx
index 648c3a7..8669fce 100644
--- a/frontend/src/app/(dashboard)/sources/page.tsx
+++ b/frontend/src/app/(dashboard)/sources/page.tsx
@@ -75,14 +75,14 @@ export default function SourcesPage() {
       offsetRef.current += data.length
     } catch (err) {
       console.error('Failed to fetch sources:', err)
-      setError(t.sources.failedToLoad)
-      toast.error(t.sources.failedToLoad)
+      setError(t('sources.failedToLoad'))
+      toast.error(t('sources.failedToLoad'))
     } finally {
       setLoading(false)
       setLoadingMore(false)
       loadingMoreRef.current = false
     }
-  }, [sortBy, sortOrder, t.sources.failedToLoad])
+  }, [sortBy, sortOrder, t('sources.failedToLoad')])
 
   // Initial load and when sort changes
   useEffect(() => {
@@ -220,9 +220,9 @@ export default function SourcesPage() {
   }
 
   const getSourceType = (source: SourceListResponse) => {
-    if (source.asset?.url) return t.sources.type.link
-    if (source.asset?.file_path) return t.sources.type.file
-    return t.sources.type.text
+    if (source.asset?.url) return t('sources.type.link')
+    if (source.asset?.file_path) return t('sources.type.file')
+    return t('sources.type.text')
   }
 
   const handleRowClick = useCallback((index: number, sourceId: string) => {
@@ -240,7 +240,7 @@ export default function SourcesPage() {
 
     try {
       await sourcesApi.delete(deleteDialog.source.id)
-      toast.success(t.sources.deleteSuccess)
+      toast.success(t('sources.deleteSuccess'))
       // Remove the deleted source from the list
       setSources(prev => prev.filter(s => s.id !== deleteDialog.source?.id))
       setDeleteDialog({ open: false, source: null })
@@ -276,8 +276,8 @@ export default function SourcesPage() {
       <AppShell>
         <EmptyState
           icon={FileText}
-          title={t.sources.noSourcesYet}
-          description={t.sources.allSourcesDescShort}
+          title={t('sources.noSourcesYet')}
+          description={t('sources.allSourcesDescShort')}
         />
       </AppShell>
     )
@@ -287,9 +287,9 @@ export default function SourcesPage() {
     <AppShell>
       <div className="flex flex-col h-full w-full max-w-none px-6 py-6">
         <div className="mb-6 flex-shrink-0">
-          <h1 className="text-3xl font-bold">{t.sources.allSources}</h1>
+          <h1 className="text-3xl font-bold">{t('sources.allSources')}</h1>
           <p className="mt-2 text-muted-foreground">
-            {t.sources.allSourcesDesc}
+            {t('sources.allSourcesDesc')}
           </p>
         </div>
 
@@ -310,10 +310,10 @@ export default function SourcesPage() {
             <thead className="sticky top-0 bg-background z-10">
               <tr className="border-b bg-muted/50">
                 <th className="h-12 px-4 text-left align-middle font-medium text-muted-foreground">
-                  {t.common.type}
+                  {t('common.type')}
                 </th>
                 <th className="h-12 px-4 text-left align-middle font-medium text-muted-foreground">
-                  {t.common.title}
+                  {t('common.title')}
                 </th>
                 <th className="h-12 px-4 text-left align-middle font-medium text-muted-foreground hidden sm:table-cell">
                   <Button
@@ -322,7 +322,7 @@ export default function SourcesPage() {
                     onClick={() => toggleSort('created')}
                     className="h-8 px-2 hover:bg-muted"
                   >
-                    {t.common.created_label}
+                    {t('common.created_label')}
                     <ArrowUpDown className={cn(
                       "ml-2 h-3 w-3",
                       sortBy === 'created' ? 'opacity-100' : 'opacity-30'
@@ -335,13 +335,13 @@ export default function SourcesPage() {
                   </Button>
                 </th>
                 <th className="h-12 px-4 text-center align-middle font-medium text-muted-foreground hidden md:table-cell">
-                  {t.sources.insights}
+                  {t('sources.insights')}
                 </th>
                 <th className="h-12 px-4 text-center align-middle font-medium text-muted-foreground hidden lg:table-cell">
-                  {t.sources.embedded}
+                  {t('sources.embedded')}
                 </th>
                 <th className="h-12 px-4 text-right align-middle font-medium text-muted-foreground">
-                  {t.common.actions}
+                  {t('common.actions')}
                 </th>
               </tr>
             </thead>
@@ -369,7 +369,7 @@ export default function SourcesPage() {
                   <td className="h-12 px-4">
                     <div className="flex flex-col overflow-hidden">
                       <span className="font-medium truncate">
-                        {source.title || t.sources.untitledSource}
+                        {source.title || t('sources.untitledSource')}
                       </span>
                       {source.asset?.url && (
                         <span className="text-xs text-muted-foreground truncate">
@@ -389,7 +389,7 @@ export default function SourcesPage() {
                   </td>
                   <td className="h-12 px-4 text-center hidden lg:table-cell">
                     <Badge variant={source.embedded ? "default" : "secondary"} className="text-xs">
-                      {source.embedded ? t.sources.yes : t.sources.no}
+                      {source.embedded ? t('sources.yes') : t('sources.no')}
                     </Badge>
                   </td>
                   <td className="h-12 px-4 text-right">
@@ -409,7 +409,7 @@ export default function SourcesPage() {
                   <td colSpan={6} className="h-16 text-center">
                     <div className="flex items-center justify-center">
                       <LoadingSpinner />
-                      <span className="ml-2 text-muted-foreground">{t.sources.loadingMore}</span>
+                      <span className="ml-2 text-muted-foreground">{t('sources.loadingMore')}</span>
                     </div>
                   </td>
                 </tr>
@@ -422,9 +422,9 @@ export default function SourcesPage() {
       <ConfirmDialog
         open={deleteDialog.open}
         onOpenChange={(open) => setDeleteDialog({ open, source: deleteDialog.source })}
-        title={t.sources.delete}
-        description={t.sources.deleteConfirmWithTitle.replace('{title}', deleteDialog.source?.title || t.sources.untitledSource)}
-        confirmText={t.common.delete}
+        title={t('sources.delete')}
+        description={t('sources.deleteConfirmWithTitle').replace('{title}', deleteDialog.source?.title || t('sources.untitledSource'))}
+        confirmText={t('common.delete')}
         confirmVariant="destructive"
         onConfirm={handleDeleteConfirm}
       />
diff --git a/frontend/src/app/(dashboard)/transformations/components/DefaultPromptEditor.tsx b/frontend/src/app/(dashboard)/transformations/components/DefaultPromptEditor.tsx
index 3f90414..94397f7 100644
--- a/frontend/src/app/(dashboard)/transformations/components/DefaultPromptEditor.tsx
+++ b/frontend/src/app/(dashboard)/transformations/components/DefaultPromptEditor.tsx
@@ -37,9 +37,9 @@ export function DefaultPromptEditor() {
               <div className="flex items-center gap-2">
                 <Settings className="h-5 w-5" />
                 <div className="text-left">
-                  <CardTitle className="text-lg">{t.transformations.defaultPrompt}</CardTitle>
+                  <CardTitle className="text-lg">{t('transformations.defaultPrompt')}</CardTitle>
                   <CardDescription>
-                    {t.transformations.defaultPromptDesc}
+                    {t('transformations.defaultPromptDesc')}
                   </CardDescription>
                 </div>
               </div>
@@ -55,14 +55,14 @@ export function DefaultPromptEditor() {
           <CardContent className="space-y-4">
             <div className="space-y-2">
               <Label htmlFor={textareaId} className="sr-only">
-                {t.transformations.defaultPrompt}
+                {t('transformations.defaultPrompt')}
               </Label>
               <Textarea
                 id={textareaId}
                 name="default-prompt"
                 value={prompt}
                 onChange={(e) => setPrompt(e.target.value)}
-                placeholder={t.transformations.defaultPromptPlaceholder}
+                placeholder={t('transformations.defaultPromptPlaceholder')}
                 className="min-h-[200px] font-mono text-sm"
                 disabled={isLoading}
               />
@@ -72,7 +72,7 @@ export function DefaultPromptEditor() {
                 onClick={handleSave}
                 disabled={isLoading || updateDefaultPrompt.isPending}
               >
-                {t.common.save}
+                {t('common.save')}
               </Button>
             </div>
           </CardContent>
diff --git a/frontend/src/app/(dashboard)/transformations/components/TransformationCard.tsx b/frontend/src/app/(dashboard)/transformations/components/TransformationCard.tsx
index 4270456..c339566 100644
--- a/frontend/src/app/(dashboard)/transformations/components/TransformationCard.tsx
+++ b/frontend/src/app/(dashboard)/transformations/components/TransformationCard.tsx
@@ -49,7 +49,7 @@ export function TransformationCard({ transformation, onPlayground, onEdit }: Tra
                     )}
                   </div>
                   {transformation.apply_default && (
-                    <Badge variant="secondary">{t.common.default}</Badge>
+                    <Badge variant="secondary">{t('common.default')}</Badge>
                   )}
                 </div>
               </CollapsibleTrigger>
@@ -58,13 +58,13 @@ export function TransformationCard({ transformation, onPlayground, onEdit }: Tra
                 {onPlayground && (
                   <Button variant="outline" size="sm" onClick={onPlayground}>
                     <Wand2 className="h-4 w-4 mr-2" />
-                    {t.transformations.playground}
+                    {t('transformations.playground')}
                   </Button>
                 )}
                 {onEdit && (
                   <Button variant="outline" size="sm" onClick={onEdit}>
                     <Edit className="h-4 w-4 mr-2" />
-                    {t.common.edit}
+                    {t('common.edit')}
                   </Button>
                 )}
                 <Button
@@ -82,19 +82,19 @@ export function TransformationCard({ transformation, onPlayground, onEdit }: Tra
           <CollapsibleContent>
             <CardContent className="space-y-4">
               <div>
-                <p className="text-sm text-muted-foreground">{t.common.title}</p>
-                <p className="text-sm font-medium">{transformation.title || t.sources.untitledSource}</p>
+                <p className="text-sm text-muted-foreground">{t('common.title')}</p>
+                <p className="text-sm font-medium">{transformation.title || t('sources.untitledSource')}</p>
               </div>
 
               {transformation.description && (
                 <div>
-                  <p className="text-sm text-muted-foreground">{t.common.description}</p>
+                  <p className="text-sm text-muted-foreground">{t('common.description')}</p>
                   <p className="text-sm leading-6">{transformation.description}</p>
                 </div>
               )}
 
               <div>
-                <p className="text-sm text-muted-foreground">{t.transformations.systemPrompt}</p>
+                <p className="text-sm text-muted-foreground">{t('transformations.systemPrompt')}</p>
                 <pre className="mt-2 whitespace-pre-wrap rounded-md bg-muted p-3 text-sm font-mono">
                   {transformation.prompt}
                 </pre>
@@ -107,9 +107,9 @@ export function TransformationCard({ transformation, onPlayground, onEdit }: Tra
       <ConfirmDialog
         open={showDeleteDialog}
         onOpenChange={setShowDeleteDialog}
-        title={t.sources.delete}
-        description={t.transformations.deleteConfirm}
-        confirmText={t.common.delete}
+        title={t('sources.delete')}
+        description={t('transformations.deleteConfirm')}
+        confirmText={t('common.delete')}
         confirmVariant="destructive"
         onConfirm={handleDelete}
         isLoading={deleteTransformation.isPending}
diff --git a/frontend/src/app/(dashboard)/transformations/components/TransformationEditorDialog.tsx b/frontend/src/app/(dashboard)/transformations/components/TransformationEditorDialog.tsx
index 3f1b69d..4143270 100644
--- a/frontend/src/app/(dashboard)/transformations/components/TransformationEditorDialog.tsx
+++ b/frontend/src/app/(dashboard)/transformations/components/TransformationEditorDialog.tsx
@@ -118,22 +118,22 @@ export function TransformationEditorDialog({ open, onOpenChange, transformation
     <Dialog open={open} onOpenChange={handleClose}>
       <DialogContent className="sm:max-w-4xl w-full max-h-[90vh] overflow-hidden p-0">
         <DialogTitle className="sr-only">
-          {isEditing ? t.common.edit : t.transformations.createNew}
+          {isEditing ? t('common.edit') : t('transformations.createNew')}
         </DialogTitle>
         <DialogDescription className="sr-only">
-           {isEditing ? t.common.editTransformation : t.transformations.createNew}
+           {isEditing ? t('common.editTransformation') : t('transformations.createNew')}
         </DialogDescription>
         <form onSubmit={handleSubmit(onSubmit)} className="flex h-full flex-col">
           {isEditing && isLoading ? (
             <div className="flex-1 flex items-center justify-center py-10">
-              <span className="text-sm text-muted-foreground">{t.common.loading}</span>
+              <span className="text-sm text-muted-foreground">{t('common.loading')}</span>
             </div>
           ) : (
             <>
               <div className="border-b px-6 py-4 space-y-4">
                 <div>
                   <Label htmlFor={nameId} className="text-sm font-medium">
-                    {t.transformations.name}
+                    {t('transformations.name')}
                   </Label>
                   <Controller
                     control={control}
@@ -142,7 +142,7 @@ export function TransformationEditorDialog({ open, onOpenChange, transformation
                         <Input
                         id={nameId}
                         {...field}
-                        placeholder={t.transformations.namePlaceholder}
+                        placeholder={t('transformations.namePlaceholder')}
                         autoComplete="off"
                       />
                     )}
@@ -155,7 +155,7 @@ export function TransformationEditorDialog({ open, onOpenChange, transformation
                 <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                   <div>
                     <Label htmlFor={titleId} className="text-sm font-medium">
-                      {t.common.title}
+                      {t('common.title')}
                     </Label>
                     <Controller
                       control={control}
@@ -164,7 +164,7 @@ export function TransformationEditorDialog({ open, onOpenChange, transformation
                         <Input
                            id={titleId}
                            {...field}
-                           placeholder={t.transformations.titlePlaceholder}
+                           placeholder={t('transformations.titlePlaceholder')}
                            autoComplete="off"
                          />
                       )}
@@ -183,14 +183,14 @@ export function TransformationEditorDialog({ open, onOpenChange, transformation
                       )}
                     />
                      <Label htmlFor={defaultId} className="text-sm">
-                       {t.transformations.suggestDefault}
+                       {t('transformations.suggestDefault')}
                      </Label>
                   </div>
                 </div>
 
                 <div>
                    <Label htmlFor={descriptionId} className="text-sm font-medium">
-                     {t.notebooks.addDescription.replace('...', '')}
+                     {t('notebooks.addDescription').replace('...', '')}
                    </Label>
                   <Controller
                     control={control}
@@ -199,7 +199,7 @@ export function TransformationEditorDialog({ open, onOpenChange, transformation
                       <Textarea
                          id={descriptionId}
                          {...field}
-                         placeholder={t.transformations.descriptionPlaceholder}
+                         placeholder={t('transformations.descriptionPlaceholder')}
                          rows={2}
                          autoComplete="off"
                       />
@@ -209,7 +209,7 @@ export function TransformationEditorDialog({ open, onOpenChange, transformation
               </div>
 
               <div className="flex-1 overflow-y-auto px-6 py-4">
-                <Label htmlFor={promptId} className="text-sm font-medium">{t.transformations.systemPrompt}</Label>
+                <Label htmlFor={promptId} className="text-sm font-medium">{t('transformations.systemPrompt')}</Label>
                 <Controller
                   control={control}
                   name="prompt"
@@ -219,7 +219,7 @@ export function TransformationEditorDialog({ open, onOpenChange, transformation
                       value={field.value}
                       onChange={field.onChange}
                       height={420}
-                      placeholder={t.transformations.promptPlaceholder}
+                      placeholder={t('transformations.promptPlaceholder')}
                       className="rounded-md border"
                       textareaId={promptId}
                       name={field.name}
@@ -230,7 +230,7 @@ export function TransformationEditorDialog({ open, onOpenChange, transformation
                   <p className="text-sm text-red-600 mt-1">{errors.prompt.message}</p>
                 )}
                  <p className="text-xs text-muted-foreground mt-3">
-                   {t.transformations.promptHint}
+                   {t('transformations.promptHint')}
                  </p>
               </div>
             </>
@@ -238,14 +238,14 @@ export function TransformationEditorDialog({ open, onOpenChange, transformation
 
           <div className="border-t px-6 py-4 flex justify-end gap-2">
              <Button type="button" variant="outline" onClick={handleClose}>
-               {t.common.cancel}
+               {t('common.cancel')}
              </Button>
               <Button type="submit" disabled={isSaving || (isEditing && isLoading)}>
                 {isSaving
-                  ? isEditing ? `${t.common.saving}...` : `${t.common.creating}...`
+                  ? isEditing ? `${t('common.saving')}...` : `${t('common.creating')}...`
                   : isEditing
-                    ? t.common.editTransformation
-                    : t.transformations.createNew}
+                    ? t('common.editTransformation')
+                    : t('transformations.createNew')}
               </Button>
           </div>
         </form>
diff --git a/frontend/src/app/(dashboard)/transformations/components/TransformationPlayground.tsx b/frontend/src/app/(dashboard)/transformations/components/TransformationPlayground.tsx
index 5b747a4..f907ad2 100644
--- a/frontend/src/app/(dashboard)/transformations/components/TransformationPlayground.tsx
+++ b/frontend/src/app/(dashboard)/transformations/components/TransformationPlayground.tsx
@@ -49,18 +49,18 @@ export function TransformationPlayground({ transformations, selectedTransformati
     <div className="space-y-6">
       <Card>
         <CardHeader>
-          <CardTitle>{t.transformations.playground}</CardTitle>
+          <CardTitle>{t('transformations.playground')}</CardTitle>
           <CardDescription>
-            {t.transformations.desc}
+            {t('transformations.desc')}
           </CardDescription>
         </CardHeader>
         <CardContent className="space-y-6">
           <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
             <div>
-              <Label htmlFor="transformation">{t.navigation.transformation}</Label>
+              <Label htmlFor="transformation">{t('navigation.transformation')}</Label>
               <Select name="transformation" value={selectedId} onValueChange={setSelectedId}>
                 <SelectTrigger id="transformation">
-                  <SelectValue placeholder={t.transformations.selectToStart} />
+                  <SelectValue placeholder={t('transformations.selectToStart')} />
                 </SelectTrigger>
                 <SelectContent>
                   {transformations?.map((transformation) => (
@@ -74,24 +74,24 @@ export function TransformationPlayground({ transformations, selectedTransformati
 
             <div>
               <ModelSelector
-                label={t.transformations.model}
+                label={t('transformations.model')}
                 name="model"
                 modelType="language"
                 value={modelId}
                 onChange={setModelId}
-                placeholder={t.transformations.selectModel}
+                placeholder={t('transformations.selectModel')}
               />
             </div>
           </div>
 
           <div>
-            <Label htmlFor="input">{t.transformations.inputLabel}</Label>
+            <Label htmlFor="input">{t('transformations.inputLabel')}</Label>
             <Textarea
               id="input"
               name="input"
               value={inputText}
               onChange={(e) => setInputText(e.target.value)}
-              placeholder={t.transformations.inputPlaceholder}
+              placeholder={t('transformations.inputPlaceholder')}
               rows={8}
               className="font-mono text-sm"
             />
@@ -106,12 +106,12 @@ export function TransformationPlayground({ transformations, selectedTransformati
               {executeTransformation.isPending ? (
                 <>
                   <Loader2 className="h-4 w-4 mr-2 animate-spin" />
-                  {t.transformations.running}
+                  {t('transformations.running')}
                 </>
               ) : (
                 <>
                   <Play className="h-4 w-4 mr-2" />
-                  {t.transformations.runTest}
+                  {t('transformations.runTest')}
                 </>
               )}
             </Button>
@@ -119,7 +119,7 @@ export function TransformationPlayground({ transformations, selectedTransformati
 
           {output && (
             <div className="space-y-2">
-              <span className="text-sm font-medium leading-none">{t.transformations.outputLabel}</span>
+              <span className="text-sm font-medium leading-none">{t('transformations.outputLabel')}</span>
               <Card>
                 <ScrollArea className="h-[400px]">
                   <CardContent className="pt-6">
diff --git a/frontend/src/app/(dashboard)/transformations/components/TransformationsList.tsx b/frontend/src/app/(dashboard)/transformations/components/TransformationsList.tsx
index 6885f43..d3b298d 100644
--- a/frontend/src/app/(dashboard)/transformations/components/TransformationsList.tsx
+++ b/frontend/src/app/(dashboard)/transformations/components/TransformationsList.tsx
@@ -39,12 +39,12 @@ export function TransformationsList({ transformations, isLoading, onPlayground }
     return (
       <EmptyState
         icon={Wand2}
-        title={t.transformations.noTransformations}
-        description={t.transformations.createOne}
+        title={t('transformations.noTransformations')}
+        description={t('transformations.createOne')}
         action={
           <Button onClick={() => handleOpenEditor()}>
             <Plus className="h-4 w-4 mr-2" />
-            {t.transformations.createNew}
+            {t('transformations.createNew')}
           </Button>
         }
       />
@@ -55,10 +55,10 @@ export function TransformationsList({ transformations, isLoading, onPlayground }
     <>
       <div className="space-y-6">
         <div className="flex justify-between items-center">
-          <h2 className="text-lg font-semibold">{t.transformations.listTitle}</h2>
+          <h2 className="text-lg font-semibold">{t('transformations.listTitle')}</h2>
           <Button onClick={() => handleOpenEditor()}>
             <Plus className="h-4 w-4 mr-2" />
-            {t.transformations.createNew}
+            {t('transformations.createNew')}
           </Button>
         </div>
 
diff --git a/frontend/src/app/(dashboard)/transformations/page.tsx b/frontend/src/app/(dashboard)/transformations/page.tsx
index 20a9493..7314a17 100644
--- a/frontend/src/app/(dashboard)/transformations/page.tsx
+++ b/frontend/src/app/(dashboard)/transformations/page.tsx
@@ -29,7 +29,7 @@ export default function TransformationsPage() {
         <div className="p-6 space-y-6">
           <div className="flex items-center justify-between">
             <div className="flex items-center gap-4">
-              <h1 className="text-2xl font-bold">{t.transformations.title}</h1>
+              <h1 className="text-2xl font-bold">{t('transformations.title')}</h1>
               <Button variant="outline" size="sm" onClick={() => refetch()}>
                 <RefreshCw className="h-4 w-4" />
             </Button>
@@ -38,21 +38,21 @@ export default function TransformationsPage() {
 
         <div className="max-w-5xl">
           <p className="text-muted-foreground">
-            {t.transformations.desc}
+            {t('transformations.desc')}
           </p>
         </div>
 
         <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-6">
           <div className="space-y-2">
-            <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">{t.transformations.workspace}</p>
-            <TabsList aria-label={t.common.accessibility.transformationViews} className="w-full max-w-xl">
+            <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">{t('transformations.workspace')}</p>
+            <TabsList aria-label={t('common.accessibility.transformationViews')} className="w-full max-w-xl">
               <TabsTrigger value="transformations" className="flex items-center gap-2">
                 <Wand2 className="h-4 w-4" />
-                {t.transformations.title}
+                {t('transformations.title')}
               </TabsTrigger>
               <TabsTrigger value="playground" className="flex items-center gap-2">
                 <Play className="h-4 w-4" />
-                {t.transformations.playground}
+                {t('transformations.playground')}
               </TabsTrigger>
             </TabsList>
           </div>
diff --git a/frontend/src/components/auth/LoginForm.tsx b/frontend/src/components/auth/LoginForm.tsx
index 08597d9..468d289 100644
--- a/frontend/src/components/auth/LoginForm.tsx
+++ b/frontend/src/components/auth/LoginForm.tsx
@@ -83,9 +83,9 @@ export function LoginForm() {
       <div className="min-h-screen flex items-center justify-center bg-background p-4">
         <Card className="w-full max-w-md">
           <CardHeader className="text-center">
-            <CardTitle>{t.common.connectionError}</CardTitle>
+            <CardTitle>{t('common.connectionError')}</CardTitle>
             <CardDescription>
-              {t.common.unableToConnect}
+              {t('common.unableToConnect')}
             </CardDescription>
           </CardHeader>
           <CardContent>
@@ -93,21 +93,21 @@ export function LoginForm() {
               <div className="flex items-start gap-2 text-red-600 text-sm">
                 <AlertCircle className="h-4 w-4 mt-0.5 flex-shrink-0" />
                 <div className="flex-1">
-                  {error || t.auth.connectErrorHint}
+                  {error || t('auth.connectErrorHint')}
                 </div>
               </div>
 
               {configInfo && (
                 <div className="space-y-2 text-xs text-muted-foreground border-t pt-3">
-                  <div className="font-medium">{t.common.diagnosticInfo}:</div>
+                  <div className="font-medium">{t('common.diagnosticInfo')}:</div>
                   <div className="space-y-1 font-mono">
-                    <div>{t.common.version}: {configInfo.version}</div>
-                    <div>{t.common.built}: {new Date(configInfo.buildTime).toLocaleString(language === 'zh-CN' ? 'zh-CN' : language === 'zh-TW' ? 'zh-TW' : 'en-US')}</div>
-                    <div className="break-all">{t.common.apiUrl}: {configInfo.apiUrl}</div>
-                    <div className="break-all">{t.common.frontendUrl}: {typeof window !== 'undefined' ? window.location.href : 'N/A'}</div>
+                    <div>{t('common.version')}: {configInfo.version}</div>
+                    <div>{t('common.built')}: {new Date(configInfo.buildTime).toLocaleString(language === 'zh-CN' ? 'zh-CN' : language === 'zh-TW' ? 'zh-TW' : 'en-US')}</div>
+                    <div className="break-all">{t('common.apiUrl')}: {configInfo.apiUrl}</div>
+                    <div className="break-all">{t('common.frontendUrl')}: {typeof window !== 'undefined' ? window.location.href : 'N/A'}</div>
                   </div>
                   <div className="text-xs pt-2">
-                    {t.common.checkConsoleLogs}
+                    {t('common.checkConsoleLogs')}
                   </div>
                 </div>
               )}
@@ -116,7 +116,7 @@ export function LoginForm() {
                 onClick={() => window.location.reload()}
                 className="w-full"
               >
-                {t.common.retryConnection}
+                {t('common.retryConnection')}
               </Button>
             </div>
           </CardContent>
@@ -141,9 +141,9 @@ export function LoginForm() {
     <div className="min-h-screen flex items-center justify-center bg-background p-4">
       <Card className="w-full max-w-md">
         <CardHeader className="text-center">
-          <CardTitle>{t.auth.loginTitle}</CardTitle>
+          <CardTitle>{t('auth.loginTitle')}</CardTitle>
           <CardDescription>
-            {t.auth.loginDesc}
+            {t('auth.loginDesc')}
           </CardDescription>
         </CardHeader>
         <CardContent>
@@ -151,7 +151,7 @@ export function LoginForm() {
             <div>
               <Input
                 type="password"
-                placeholder={t.auth.passwordPlaceholder}
+                placeholder={t('auth.passwordPlaceholder')}
                 value={password}
                 onChange={(e) => setPassword(e.target.value)}
                 disabled={isLoading}
@@ -170,12 +170,12 @@ export function LoginForm() {
               className="w-full"
               disabled={isLoading || !password.trim()}
             >
-              {isLoading ? t.auth.signingIn : t.auth.signIn}
+              {isLoading ? t('auth.signingIn') : t('auth.signIn')}
             </Button>
 
             {configInfo && (
               <div className="text-xs text-center text-muted-foreground pt-2 border-t">
-                <div>{t.common.version} {configInfo.version}</div>
+                <div>{t('common.version')} {configInfo.version}</div>
                 <div className="font-mono text-[10px]">{configInfo.apiUrl}</div>
               </div>
             )}
diff --git a/frontend/src/components/common/CommandPalette.tsx b/frontend/src/components/common/CommandPalette.tsx
index 5bac0f5..143843b 100644
--- a/frontend/src/components/common/CommandPalette.tsx
+++ b/frontend/src/components/common/CommandPalette.tsx
@@ -30,29 +30,29 @@ import {
   Loader2,
 } from 'lucide-react'
 import { useTranslation } from '@/lib/hooks/use-translation'
-import { TranslationKeys } from '@/lib/locales'
+import type { TFunction } from 'i18next'
 
-const getNavigationItems = (t: TranslationKeys) => [
-  { name: t.navigation.sources, href: '/sources', icon: FileText, keywords: ['files', 'documents', 'upload'] },
-  { name: t.navigation.notebooks, href: '/notebooks', icon: Book, keywords: ['notes', 'research', 'projects'] },
-  { name: t.navigation.askAndSearch, href: '/search', icon: Search, keywords: ['find', 'query'] },
-  { name: t.navigation.podcasts, href: '/podcasts', icon: Mic, keywords: ['audio', 'episodes', 'generate'] },
-  { name: t.navigation.models, href: '/settings/api-keys', icon: Bot, keywords: ['ai', 'llm', 'providers', 'openai', 'anthropic'] },
-  { name: t.navigation.transformations, href: '/transformations', icon: Shuffle, keywords: ['prompts', 'templates', 'actions'] },
-  { name: t.navigation.settings, href: '/settings', icon: Settings, keywords: ['preferences', 'config', 'options'] },
-  { name: t.navigation.advanced, href: '/advanced', icon: Wrench, keywords: ['debug', 'system', 'tools'] },
+const getNavigationItems = (t: TFunction) => [
+  { name: t('navigation.sources'), href: '/sources', icon: FileText, keywords: ['files', 'documents', 'upload'] },
+  { name: t('navigation.notebooks'), href: '/notebooks', icon: Book, keywords: ['notes', 'research', 'projects'] },
+  { name: t('navigation.askAndSearch'), href: '/search', icon: Search, keywords: ['find', 'query'] },
+  { name: t('navigation.podcasts'), href: '/podcasts', icon: Mic, keywords: ['audio', 'episodes', 'generate'] },
+  { name: t('navigation.models'), href: '/settings/api-keys', icon: Bot, keywords: ['ai', 'llm', 'providers', 'openai', 'anthropic'] },
+  { name: t('navigation.transformations'), href: '/transformations', icon: Shuffle, keywords: ['prompts', 'templates', 'actions'] },
+  { name: t('navigation.settings'), href: '/settings', icon: Settings, keywords: ['preferences', 'config', 'options'] },
+  { name: t('navigation.advanced'), href: '/advanced', icon: Wrench, keywords: ['debug', 'system', 'tools'] },
 ]
 
-const getCreateItems = (t: TranslationKeys) => [
-  { name: t.common.newSource, action: 'source', icon: FileText },
-  { name: t.common.newNotebook, action: 'notebook', icon: Book },
-  { name: t.common.newPodcast, action: 'podcast', icon: Mic },
+const getCreateItems = (t: TFunction) => [
+  { name: t('common.newSource'), action: 'source', icon: FileText },
+  { name: t('common.newNotebook'), action: 'notebook', icon: Book },
+  { name: t('common.newPodcast'), action: 'podcast', icon: Mic },
 ]
 
-const getThemeItems = (t: TranslationKeys) => [
-  { name: t.common.light, value: 'light' as const, icon: Sun, keywords: ['bright', 'day'] },
-  { name: t.common.dark, value: 'dark' as const, icon: Moon, keywords: ['night'] },
-  { name: t.common.system, value: 'system' as const, icon: Monitor, keywords: ['auto', 'default'] },
+const getThemeItems = (t: TFunction) => [
+  { name: t('common.light'), value: 'light' as const, icon: Sun, keywords: ['bright', 'day'] },
+  { name: t('common.dark'), value: 'dark' as const, icon: Moon, keywords: ['night'] },
+  { name: t('common.system'), value: 'system' as const, icon: Monitor, keywords: ['auto', 'default'] },
 ]
 
 export function CommandPalette() {
@@ -164,30 +164,30 @@ export function CommandPalette() {
     <CommandDialog
       open={open}
       onOpenChange={setOpen}
-      title={t.common.quickActions}
-      description={t.common.quickActionsDesc}
+      title={t('common.quickActions')}
+      description={t('common.quickActionsDesc')}
       className="sm:max-w-lg"
     >
       <CommandInput
         id={commandInputId}
         name="command-search"
-        placeholder={t.searchPage.enterSearchPlaceholder}
+        placeholder={t('searchPage.enterSearchPlaceholder')}
         value={query}
         onValueChange={setQuery}
-        aria-label={t.common.search}
+        aria-label={t('common.search')}
         autoComplete="off"
       />
       <CommandList>
         {/* Search/Ask - show FIRST when there's a query with no command match */}
         {showSearchFirst && (
-          <CommandGroup heading={t.searchPage.searchAndAsk} forceMount>
+          <CommandGroup heading={t('searchPage.searchAndAsk')} forceMount>
             <CommandItem
               value={`__search__ ${query}`}
               onSelect={handleSearch}
               forceMount
             >
               <Search className="h-4 w-4" />
-              <span>{t.searchPage.searchResultsFor.replace('{query}', query)}</span>
+              <span>{t('searchPage.searchResultsFor').replace('{query}', query)}</span>
             </CommandItem>
             <CommandItem
               value={`__ask__ ${query}`}
@@ -195,13 +195,13 @@ export function CommandPalette() {
               forceMount
             >
               <MessageCircleQuestion className="h-4 w-4" />
-              <span>{t.searchPage.askAbout.replace('{query}', query)}</span>
+              <span>{t('searchPage.askAbout').replace('{query}', query)}</span>
             </CommandItem>
           </CommandGroup>
         )}
 
         {/* Navigation */}
-        <CommandGroup heading={t.navigation.nav}>
+        <CommandGroup heading={t('navigation.nav')}>
           {navigationItems.map((item) => (
             <CommandItem
               key={item.href}
@@ -215,11 +215,11 @@ export function CommandPalette() {
         </CommandGroup>
 
         {/* Notebooks */}
-        <CommandGroup heading={t.notebooks.title}>
+        <CommandGroup heading={t('notebooks.title')}>
           {notebooksLoading ? (
             <CommandItem disabled>
               <Loader2 className="h-4 w-4 animate-spin" />
-              <span>{t.common.loading}</span>
+              <span>{t('common.loading')}</span>
             </CommandItem>
           ) : notebooks && notebooks.length > 0 ? (
             notebooks.map((notebook) => (
@@ -236,7 +236,7 @@ export function CommandPalette() {
         </CommandGroup>
 
         {/* Create */}
-        <CommandGroup heading={t.navigation.create}>
+        <CommandGroup heading={t('navigation.create')}>
           {createItems.map((item) => (
             <CommandItem
               key={item.action}
@@ -250,7 +250,7 @@ export function CommandPalette() {
         </CommandGroup>
 
         {/* Theme */}
-        <CommandGroup heading={t.navigation.theme}>
+        <CommandGroup heading={t('navigation.theme')}>
           {themeItems.map((item) => (
             <CommandItem
               key={item.value}
@@ -267,14 +267,14 @@ export function CommandPalette() {
         {query.trim() && hasCommandMatch && (
           <>
             <CommandSeparator />
-            <CommandGroup heading={t.searchPage.orSearchKb} forceMount>
+            <CommandGroup heading={t('searchPage.orSearchKb')} forceMount>
               <CommandItem
                 value={`__search__ ${query}`}
                 onSelect={handleSearch}
                 forceMount
               >
                 <Search className="h-4 w-4" />
-                <span>{t.searchPage.searchResultsFor.replace('{query}', query)}</span>
+                <span>{t('searchPage.searchResultsFor').replace('{query}', query)}</span>
               </CommandItem>
               <CommandItem
                 value={`__ask__ ${query}`}
@@ -282,7 +282,7 @@ export function CommandPalette() {
                 forceMount
               >
                 <MessageCircleQuestion className="h-4 w-4" />
-                <span>{t.searchPage.askAbout.replace('{query}', query)}</span>
+                <span>{t('searchPage.askAbout').replace('{query}', query)}</span>
               </CommandItem>
             </CommandGroup>
           </>
diff --git a/frontend/src/components/common/ConfirmDialog.test.tsx b/frontend/src/components/common/ConfirmDialog.test.tsx
index a73d6de..36607e1 100644
--- a/frontend/src/components/common/ConfirmDialog.test.tsx
+++ b/frontend/src/components/common/ConfirmDialog.test.tsx
@@ -2,7 +2,7 @@ import { describe, it, expect, vi } from 'vitest'
 import { render, screen, fireEvent } from '@testing-library/react'
 import { ConfirmDialog } from './ConfirmDialog'
 
-// useTranslation is mocked globally in setup.ts
+// useTranslation is mocked globally in setup.ts (t returns the key string)
 
 describe('ConfirmDialog', () => {
   const onConfirmMock = vi.fn()
@@ -18,20 +18,19 @@ describe('ConfirmDialog', () => {
 
   it('should render correct titles and descriptions', () => {
     render(<ConfirmDialog {...defaultProps} />)
-    
+
     expect(screen.getByText('Test Title')).toBeInTheDocument()
     expect(screen.getByText('Test Description')).toBeInTheDocument()
-    // Localized text from our setup.ts mock should be visible
-    expect(screen.getByText('Confirm')).toBeInTheDocument()
-    expect(screen.getByText('Cancel')).toBeInTheDocument()
+    expect(screen.getByText('common.confirm')).toBeInTheDocument()
+    expect(screen.getByText('common.cancel')).toBeInTheDocument()
   })
 
   it('should call onConfirm when confirm button is clicked', () => {
     render(<ConfirmDialog {...defaultProps} />)
-    
-    const confirmBtn = screen.getByText('Confirm')
+
+    const confirmBtn = screen.getByText('common.confirm')
     fireEvent.click(confirmBtn)
-    
+
     expect(onConfirmMock).toHaveBeenCalledTimes(1)
   })
 
@@ -42,10 +41,10 @@ describe('ConfirmDialog', () => {
 
   it('should show loading state and disable buttons', () => {
     render(<ConfirmDialog {...defaultProps} isLoading={true} />)
-    
-    const confirmBtn = screen.getByText('Confirm').closest('button')
-    const cancelBtn = screen.getByText('Cancel').closest('button')
-    
+
+    const confirmBtn = screen.getByText('common.confirm').closest('button')
+    const cancelBtn = screen.getByText('common.cancel').closest('button')
+
     expect(confirmBtn).toBeDisabled()
     expect(cancelBtn).toBeDisabled()
   })
diff --git a/frontend/src/components/common/ConfirmDialog.tsx b/frontend/src/components/common/ConfirmDialog.tsx
index fc5d706..d404076 100644
--- a/frontend/src/components/common/ConfirmDialog.tsx
+++ b/frontend/src/components/common/ConfirmDialog.tsx
@@ -35,7 +35,7 @@ export function ConfirmDialog({
   isLoading = false,
 }: ConfirmDialogProps) {
   const { t } = useTranslation()
-  const finalConfirmText = confirmText || t.common.confirm
+  const finalConfirmText = confirmText || t('common.confirm')
 
   return (
     <AlertDialog open={open} onOpenChange={onOpenChange}>
@@ -45,7 +45,7 @@ export function ConfirmDialog({
           <AlertDialogDescription>{description}</AlertDialogDescription>
         </AlertDialogHeader>
         <AlertDialogFooter>
-          <AlertDialogCancel disabled={isLoading}>{t.common.cancel}</AlertDialogCancel>
+          <AlertDialogCancel disabled={isLoading}>{t('common.cancel')}</AlertDialogCancel>
           <AlertDialogAction
             onClick={onConfirm}
             disabled={isLoading}
diff --git a/frontend/src/components/common/ContextToggle.tsx b/frontend/src/components/common/ContextToggle.tsx
index 3cb0fbd..cb7ec8b 100644
--- a/frontend/src/components/common/ContextToggle.tsx
+++ b/frontend/src/components/common/ContextToggle.tsx
@@ -25,19 +25,19 @@ export function ContextToggle({ mode, hasInsights = false, onChange, className }
   const MODE_CONFIG = {
     off: {
       icon: EyeOff,
-      label: t.common.contextModes.off,
+      label: t('common.contextModes.off'),
       color: 'text-muted-foreground',
       bgColor: 'hover:bg-muted'
     },
     insights: {
       icon: Lightbulb,
-      label: t.common.contextModes.insights,
+      label: t('common.contextModes.insights'),
       color: 'text-amber-600',
       bgColor: 'hover:bg-amber-50'
     },
     full: {
       icon: FileText,
-      label: t.common.contextModes.full,
+      label: t('common.contextModes.full'),
       color: 'text-primary',
       bgColor: 'hover:bg-primary/10'
     }
@@ -79,7 +79,7 @@ export function ContextToggle({ mode, hasInsights = false, onChange, className }
         <TooltipContent>
           <p className="text-xs">{config.label}</p>
           <p className="text-[10px] text-muted-foreground mt-1">
-            {t.common.contextModes.clickToCycle}
+            {t('common.contextModes.clickToCycle')}
           </p>
         </TooltipContent>
       </Tooltip>
diff --git a/frontend/src/components/common/InlineEdit.tsx b/frontend/src/components/common/InlineEdit.tsx
index d1677ce..c3b45e4 100644
--- a/frontend/src/components/common/InlineEdit.tsx
+++ b/frontend/src/components/common/InlineEdit.tsx
@@ -32,7 +32,7 @@ export function InlineEdit({
   const generatedId = useId()
   const id = providedId || generatedId
   const { t } = useTranslation()
-  const defaultEmptyText = emptyText || t.common.clickToEdit
+  const defaultEmptyText = emptyText || t('common.clickToEdit')
   const [isEditing, setIsEditing] = useState(false)
   const [editValue, setEditValue] = useState(value)
   const [isSaving, setIsSaving] = useState(false)
diff --git a/frontend/src/components/common/LanguageToggle.tsx b/frontend/src/components/common/LanguageToggle.tsx
index d789061..492d523 100644
--- a/frontend/src/components/common/LanguageToggle.tsx
+++ b/frontend/src/components/common/LanguageToggle.tsx
@@ -29,8 +29,8 @@ export function LanguageToggle({ iconOnly = false }: LanguageToggleProps) {
           className={iconOnly ? "h-9 w-full sidebar-menu-item" : "w-full justify-start gap-2 sidebar-menu-item"}
         >
           <Languages className="h-[1.2rem] w-[1.2rem]" />
-          {!iconOnly && <span>{t.common.language}</span>}
-          <span className="sr-only">{t.navigation.language}</span>
+          {!iconOnly && <span>{t('common.language')}</span>}
+          <span className="sr-only">{t('navigation.language')}</span>
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end">
@@ -38,49 +38,49 @@ export function LanguageToggle({ iconOnly = false }: LanguageToggleProps) {
           onClick={() => setLanguage('en-US')}
           className={currentLang === 'en-US' || currentLang.startsWith('en') ? 'bg-accent' : ''}
         >
-          <span>{t.common.english}</span>
+          <span>{t('common.english')}</span>
         </DropdownMenuItem>
         <DropdownMenuItem 
           onClick={() => setLanguage('zh-CN')}
           className={currentLang === 'zh-CN' || currentLang.startsWith('zh-Hans') || currentLang === 'zh' ? 'bg-accent' : ''}
         >
-          <span>{t.common.chinese}</span>
+          <span>{t('common.chinese')}</span>
         </DropdownMenuItem>
         <DropdownMenuItem
           onClick={() => setLanguage('zh-TW')}
           className={currentLang === 'zh-TW' || currentLang.startsWith('zh-Hant') ? 'bg-accent' : ''}
         >
-          <span>{t.common.traditionalChinese}</span>
+          <span>{t('common.traditionalChinese')}</span>
         </DropdownMenuItem>
         <DropdownMenuItem
           onClick={() => setLanguage('pt-BR')}
           className={currentLang === 'pt-BR' || currentLang.startsWith('pt') ? 'bg-accent' : ''}
         >
-          <span>{t.common.portuguese}</span>
+          <span>{t('common.portuguese')}</span>
         </DropdownMenuItem>
         <DropdownMenuItem
           onClick={() => setLanguage('ja-JP')}
           className={currentLang === 'ja-JP' || currentLang.startsWith('ja') ? 'bg-accent' : ''}
         >
-          <span>{t.common.japanese}</span>
+          <span>{t('common.japanese')}</span>
         </DropdownMenuItem>
         <DropdownMenuItem
           onClick={() => setLanguage('fr-FR')}
           className={currentLang === 'fr-FR' || currentLang.startsWith('fr') ? 'bg-accent' : ''}
         >
-          <span>{t.common.french}</span>
+          <span>{t('common.french')}</span>
         </DropdownMenuItem>
         <DropdownMenuItem
           onClick={() => setLanguage('ru-RU')}
           className={currentLang === 'ru-RU' || currentLang.startsWith('ru') ? 'bg-accent' : ''}
         >
-          <span>{t.common.russian}</span>
+          <span>{t('common.russian')}</span>
         </DropdownMenuItem>
         <DropdownMenuItem
           onClick={() => setLanguage('bn-IN')}
           className={currentLang === 'bn-IN' || currentLang.startsWith('bn') ? 'bg-accent' : ''}
         >
-          <span>{t.common.bengali}</span>
+          <span>{t('common.bengali')}</span>
         </DropdownMenuItem>
       </DropdownMenuContent>
     </DropdownMenu>
diff --git a/frontend/src/components/common/ModelSelector.tsx b/frontend/src/components/common/ModelSelector.tsx
index c757b57..7f97b3b 100644
--- a/frontend/src/components/common/ModelSelector.tsx
+++ b/frontend/src/components/common/ModelSelector.tsx
@@ -38,7 +38,7 @@ export function ModelSelector({
       {label && <Label htmlFor={selectId}>{label}</Label>}
       <Select name={name} value={value} onValueChange={onChange} disabled={disabled || isLoading}>
         <SelectTrigger id={selectId}>
-          <SelectValue placeholder={placeholder || t.settings.embeddingOptionPlaceholder} />
+          <SelectValue placeholder={placeholder || t('settings.embeddingOptionPlaceholder')} />
         </SelectTrigger>
         <SelectContent>
           {isLoading ? (
@@ -47,7 +47,7 @@ export function ModelSelector({
             </div>
           ) : filteredModels.length === 0 ? (
             <div className="text-sm text-muted-foreground py-2 px-2">
-              {t.common.noResults}
+              {t('common.noResults')}
             </div>
           ) : (
             filteredModels.map((model) => (
diff --git a/frontend/src/components/common/ThemeToggle.tsx b/frontend/src/components/common/ThemeToggle.tsx
index 78edc85..bd60240 100644
--- a/frontend/src/components/common/ThemeToggle.tsx
+++ b/frontend/src/components/common/ThemeToggle.tsx
@@ -31,8 +31,8 @@ export function ThemeToggle({ iconOnly = false }: ThemeToggleProps) {
             <Sun className="absolute inset-0 h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
             <Moon className="absolute inset-0 h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
           </div>
-          {!iconOnly && <span>{t.common.theme}</span>}
-          <span className="sr-only">{t.navigation.theme}</span>
+          {!iconOnly && <span>{t('common.theme')}</span>}
+          <span className="sr-only">{t('navigation.theme')}</span>
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end">
@@ -41,21 +41,21 @@ export function ThemeToggle({ iconOnly = false }: ThemeToggleProps) {
           className={theme === 'light' ? 'bg-accent' : ''}
         >
           <Sun className="mr-2 h-4 w-4" />
-          <span>{t.common.light}</span>
+          <span>{t('common.light')}</span>
         </DropdownMenuItem>
         <DropdownMenuItem 
           onClick={() => setTheme('dark')}
           className={theme === 'dark' ? 'bg-accent' : ''}
         >
           <Moon className="mr-2 h-4 w-4" />
-          <span>{t.common.dark}</span>
+          <span>{t('common.dark')}</span>
         </DropdownMenuItem>
         <DropdownMenuItem 
           onClick={() => setTheme('system')}
           className={theme === 'system' ? 'bg-accent' : ''}
         >
           <Monitor className="mr-2 h-4 w-4" />
-          <span>{t.common.system}</span>
+          <span>{t('common.system')}</span>
         </DropdownMenuItem>
       </DropdownMenuContent>
     </DropdownMenu>
diff --git a/frontend/src/components/errors/ConnectionErrorOverlay.tsx b/frontend/src/components/errors/ConnectionErrorOverlay.tsx
index d4a3157..efdb351 100644
--- a/frontend/src/components/errors/ConnectionErrorOverlay.tsx
+++ b/frontend/src/components/errors/ConnectionErrorOverlay.tsx
@@ -43,56 +43,56 @@ export function ConnectionErrorOverlay({
           <div>
             <h1 className="text-2xl font-bold" id="error-title">
               {isApiError
-                ? t.connectionErrors.apiTitle
-                : t.connectionErrors.dbTitle}
+                ? t('connectionErrors.apiTitle')
+                : t('connectionErrors.dbTitle')}
             </h1>
             <p className="text-muted-foreground">
               {isApiError
-                ? t.connectionErrors.apiDesc
-                : t.connectionErrors.dbDesc}
+                ? t('connectionErrors.apiDesc')
+                : t('connectionErrors.dbDesc')}
             </p>
           </div>
         </div>
 
         {/* Troubleshooting instructions */}
         <div className="space-y-4 border-l-4 border-primary pl-4">
-          <h2 className="font-semibold">{t.connectionErrors.troubleshooting}</h2>
+          <h2 className="font-semibold">{t('connectionErrors.troubleshooting')}</h2>
           <ul className="list-disc list-inside space-y-2 text-sm">
             {isApiError ? (
               <>
-                <li>{t.connectionErrors.apiUnreachable1}</li>
-                <li>{t.connectionErrors.apiUnreachable2}</li>
-                <li>{t.connectionErrors.apiUnreachable3}</li>
+                <li>{t('connectionErrors.apiUnreachable1')}</li>
+                <li>{t('connectionErrors.apiUnreachable2')}</li>
+                <li>{t('connectionErrors.apiUnreachable3')}</li>
               </>
             ) : (
               <>
-                <li>{t.connectionErrors.dbFailed1}</li>
-                <li>{t.connectionErrors.dbFailed2}</li>
-                <li>{t.connectionErrors.dbFailed3}</li>
+                <li>{t('connectionErrors.dbFailed1')}</li>
+                <li>{t('connectionErrors.dbFailed2')}</li>
+                <li>{t('connectionErrors.dbFailed3')}</li>
               </>
             )}
           </ul>
 
-          <h2 className="font-semibold mt-4">{t.connectionErrors.quickFixes}</h2>
+          <h2 className="font-semibold mt-4">{t('connectionErrors.quickFixes')}</h2>
           {isApiError ? (
             <div className="space-y-2 text-sm bg-muted p-4 rounded">
-              <p className="font-medium">{t.connectionErrors.setApiUrl}</p>
+              <p className="font-medium">{t('connectionErrors.setApiUrl')}</p>
               <code className="block bg-background p-2 rounded text-xs">
-                # {t.connectionErrors.dockerLabel}:
+                # {t('connectionErrors.dockerLabel')}:
                 <br />
                 docker run -e API_URL=http://your-host:5055 ...
                 <br />
                 <br />
-                # {t.connectionErrors.localDevLabel}:
+                # {t('connectionErrors.localDevLabel')}:
                 <br />
                 API_URL=http://localhost:5055
               </code>
             </div>
           ) : (
             <div className="space-y-2 text-sm bg-muted p-4 rounded">
-              <p className="font-medium">{t.connectionErrors.checkSurreal}</p>
+              <p className="font-medium">{t('connectionErrors.checkSurreal')}</p>
               <code className="block bg-background p-2 rounded text-xs">
-                # {t.connectionErrors.dockerLabel}:
+                # {t('connectionErrors.dockerLabel')}:
                 <br />
                 docker compose ps | grep surrealdb
                 <br />
@@ -104,14 +104,14 @@ export function ConnectionErrorOverlay({
 
         {/* Documentation link */}
         <div className="text-sm">
-          <p>{t.connectionErrors.seeDocumentation}</p>
+          <p>{t('connectionErrors.seeDocumentation')}</p>
           <a
             href="https://github.com/lfnovo/open-notebook"
             target="_blank"
             rel="noopener noreferrer"
             className="text-primary hover:underline inline-flex items-center gap-1"
           >
-            {t.connectionErrors.docLink}
+            {t('connectionErrors.docLink')}
             <ExternalLink className="w-4 h-4" />
           </a>
         </div>
@@ -121,7 +121,7 @@ export function ConnectionErrorOverlay({
           <Collapsible open={showDetails} onOpenChange={setShowDetails}>
             <CollapsibleTrigger asChild>
               <Button variant="ghost" size="sm" className="w-full justify-between">
-                <span>{t.connectionErrors.showTechnical}</span>
+                <span>{t('connectionErrors.showTechnical')}</span>
                 <ChevronDown
                   className={`w-4 h-4 transition-transform ${
                     showDetails ? 'rotate-180' : ''
@@ -133,23 +133,23 @@ export function ConnectionErrorOverlay({
               <div className="space-y-2 text-sm bg-muted p-4 rounded font-mono">
                 {error.details.attemptedUrl && (
                   <div>
-                    <strong>{t.connectionErrors.attemptedUrl}:</strong> {error.details.attemptedUrl}
+                    <strong>{t('connectionErrors.attemptedUrl')}:</strong> {error.details.attemptedUrl}
                   </div>
                 )}
                 {error.details.message && (
                   <div>
-                    <strong>{t.connectionErrors.message}:</strong> {error.details.message}
+                    <strong>{t('connectionErrors.message')}:</strong> {error.details.message}
                   </div>
                 )}
                 {error.details.technicalMessage && (
                   <div>
-                    <strong>{t.connectionErrors.technicalDetails}:</strong>{' '}
+                    <strong>{t('connectionErrors.technicalDetails')}:</strong>{' '}
                     {error.details.technicalMessage}
                   </div>
                 )}
                 {error.details.stack && (
                   <div>
-                    <strong>{t.connectionErrors.stackTrace}:</strong>
+                    <strong>{t('connectionErrors.stackTrace')}:</strong>
                     <pre className="mt-2 overflow-x-auto text-xs">
                       {error.details.stack}
                     </pre>
@@ -163,10 +163,10 @@ export function ConnectionErrorOverlay({
         {/* Retry button */}
         <div className="pt-4 border-t">
           <Button onClick={onRetry} className="w-full" size="lg">
-            {t.connectionErrors.retryLabel}
+            {t('connectionErrors.retryLabel')}
           </Button>
           <p className="text-xs text-muted-foreground text-center mt-2">
-            {t.connectionErrors.retryHint}
+            {t('connectionErrors.retryHint')}
           </p>
         </div>
       </Card>
diff --git a/frontend/src/components/layout/AppSidebar.test.tsx b/frontend/src/components/layout/AppSidebar.test.tsx
index 00fa921..67621f8 100644
--- a/frontend/src/components/layout/AppSidebar.test.tsx
+++ b/frontend/src/components/layout/AppSidebar.test.tsx
@@ -11,18 +11,15 @@ vi.mock('@/components/ui/tooltip', () => ({
   TooltipTrigger: ({ children }: { children: React.ReactNode }) => <>{children}</>,
   TooltipContent: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
 }))
-// But setup.ts has some basic mocks, let's see.
 
 describe('AppSidebar', () => {
   it('renders correctly when expanded', () => {
     render(<AppSidebar />)
-    
-    // Check for logo or app name (using actual locale value)
-    expect(screen.getByText(/Open Notebook/i)).toBeDefined()
-    
-    // Check for navigation items (using actual locale values)
-    expect(screen.getByText(/Sources/i)).toBeDefined()
-    expect(screen.getByText(/Notebooks/i)).toBeDefined()
+
+    // With mocked t() returning keys, check for translation key strings
+    expect(screen.getByText('common.appName')).toBeDefined()
+    expect(screen.getByText('navigation.sources')).toBeDefined()
+    expect(screen.getByText('navigation.notebooks')).toBeDefined()
   })
 
   it('toggles collapse state when clicking handle', () => {
@@ -33,16 +30,9 @@ describe('AppSidebar', () => {
     } as any)
 
     render(<AppSidebar />)
-    
-    // The collapse button has ChevronLeft icon when expanded
-    // The collapse button has ChevronLeft icon when expanded
-    // const toggleButton = screen.getAllByRole('button')[0]
-    // Let's use more specific selector if possible, but AppSidebar has many buttons
-    // Actually, line 147 has the button
-    
-    // Use data-testid for reliable selection
+
     fireEvent.click(screen.getByTestId('sidebar-toggle'))
-    
+
     expect(toggleCollapse).toHaveBeenCalled()
   })
 
@@ -53,8 +43,8 @@ describe('AppSidebar', () => {
     } as any)
 
     render(<AppSidebar />)
-    
+
     // In collapsed mode, app name shouldn't be visible (as text)
-    expect(screen.queryByText(/Open Notebook/i)).toBeNull()
+    expect(screen.queryByText('common.appName')).toBeNull()
   })
 })
diff --git a/frontend/src/components/layout/AppSidebar.tsx b/frontend/src/components/layout/AppSidebar.tsx
index 08eb938..cabb889 100644
--- a/frontend/src/components/layout/AppSidebar.tsx
+++ b/frontend/src/components/layout/AppSidebar.tsx
@@ -24,7 +24,7 @@ import {
 } from '@/components/ui/dropdown-menu'
 import { ThemeToggle } from '@/components/common/ThemeToggle'
 import { LanguageToggle } from '@/components/common/LanguageToggle'
-import { TranslationKeys } from '@/lib/locales'
+import type { TFunction } from 'i18next'
 import { useTranslation } from '@/lib/hooks/use-translation'
 import { Separator } from '@/components/ui/separator'
 import {
@@ -43,33 +43,33 @@ import {
   Command,
 } from 'lucide-react'
 
-const getNavigation = (t: TranslationKeys) => [
+const getNavigation = (t: TFunction) => [
   {
-    title: t.navigation.collect,
+    title: t('navigation.collect'),
     items: [
-      { name: t.navigation.sources, href: '/sources', icon: FileText },
+      { name: t('navigation.sources'), href: '/sources', icon: FileText },
     ],
   },
   {
-    title: t.navigation.process,
+    title: t('navigation.process'),
     items: [
-      { name: t.navigation.notebooks, href: '/notebooks', icon: Book },
-      { name: t.navigation.askAndSearch, href: '/search', icon: Search },
+      { name: t('navigation.notebooks'), href: '/notebooks', icon: Book },
+      { name: t('navigation.askAndSearch'), href: '/search', icon: Search },
     ],
   },
   {
-    title: t.navigation.create,
+    title: t('navigation.create'),
     items: [
-      { name: t.navigation.podcasts, href: '/podcasts', icon: Mic },
+      { name: t('navigation.podcasts'), href: '/podcasts', icon: Mic },
     ],
   },
   {
-    title: t.navigation.manage,
+    title: t('navigation.manage'),
     items: [
-      { name: t.navigation.models, href: '/settings/api-keys', icon: Bot },
-      { name: t.navigation.transformations, href: '/transformations', icon: Shuffle },
-      { name: t.navigation.settings, href: '/settings', icon: Settings },
-      { name: t.navigation.advanced, href: '/advanced', icon: Wrench },
+      { name: t('navigation.models'), href: '/settings/api-keys', icon: Bot },
+      { name: t('navigation.transformations'), href: '/transformations', icon: Shuffle },
+      { name: t('navigation.settings'), href: '/settings', icon: Settings },
+      { name: t('navigation.advanced'), href: '/advanced', icon: Wrench },
     ],
   },
 ] as const
@@ -139,9 +139,9 @@ export function AppSidebar() {
           ) : (
             <>
               <div className="flex items-center gap-2">
-                <Image src="/logo.svg" alt={t.common.appName} width={32} height={32} />
+                <Image src="/logo.svg" alt={t('common.appName')} width={32} height={32} />
                 <span className="text-base font-medium text-sidebar-foreground">
-                  {t.common.appName}
+                  {t('common.appName')}
                 </span>
               </div>
               <Button
@@ -179,13 +179,13 @@ export function AppSidebar() {
                         variant="default"
                         size="sm"
                         className="w-full justify-center px-2 bg-primary hover:bg-primary/90 text-primary-foreground border-0"
-                        aria-label={t.common.create}
+                        aria-label={t('common.create')}
                       >
                         <Plus className="h-4 w-4" />
                       </Button>
                     </DropdownMenuTrigger>
                   </TooltipTrigger>
-                   <TooltipContent side="right">{t.common.create}</TooltipContent>
+                   <TooltipContent side="right">{t('common.create')}</TooltipContent>
                 </Tooltip>
               ) : (
                 <DropdownMenuTrigger asChild>
@@ -196,7 +196,7 @@ export function AppSidebar() {
                     className="w-full justify-start bg-primary hover:bg-primary/90 text-primary-foreground border-0"
                    >
                     <Plus className="h-4 w-4 mr-2" />
-                    {t.common.create}
+                    {t('common.create')}
                   </Button>
                 </DropdownMenuTrigger>
               )}
@@ -214,7 +214,7 @@ export function AppSidebar() {
                   className="gap-2"
                 >
                    <FileText className="h-4 w-4" />
-                  {t.common.source}
+                  {t('common.source')}
                 </DropdownMenuItem>
                 <DropdownMenuItem
                   onSelect={(event) => {
@@ -224,7 +224,7 @@ export function AppSidebar() {
                   className="gap-2"
                 >
                    <Book className="h-4 w-4" />
-                  {t.common.notebook}
+                  {t('common.notebook')}
                 </DropdownMenuItem>
                 <DropdownMenuItem
                   onSelect={(event) => {
@@ -234,7 +234,7 @@ export function AppSidebar() {
                   className="gap-2"
                 >
                    <Mic className="h-4 w-4" />
-                  {t.common.podcast}
+                  {t('common.podcast')}
                 </DropdownMenuItem>
               </DropdownMenuContent>
             </DropdownMenu>
@@ -304,14 +304,14 @@ export function AppSidebar() {
               <div className="flex items-center justify-between">
                  <span className="flex items-center gap-1.5">
                   <Command className="h-3 w-3" />
-                  {t.common.quickActions}
+                  {t('common.quickActions')}
                 </span>
                 <kbd className="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground">
                   {isMac ? <span className="text-xs">⌘</span> : <span>Ctrl+</span>}K
                 </kbd>
               </div>
                <p className="mt-1 text-[10px] text-sidebar-foreground/40">
-                {t.common.quickActionsDesc}
+                {t('common.quickActionsDesc')}
               </p>
             </div>
           )}
@@ -330,7 +330,7 @@ export function AppSidebar() {
                       <ThemeToggle iconOnly />
                     </div>
                   </TooltipTrigger>
-                  <TooltipContent side="right">{t.common.theme}</TooltipContent>
+                  <TooltipContent side="right">{t('common.theme')}</TooltipContent>
                 </Tooltip>
                 <Tooltip>
                   <TooltipTrigger asChild>
@@ -338,7 +338,7 @@ export function AppSidebar() {
                       <LanguageToggle iconOnly />
                     </div>
                   </TooltipTrigger>
-                  <TooltipContent side="right">{t.common.language}</TooltipContent>
+                  <TooltipContent side="right">{t('common.language')}</TooltipContent>
                 </Tooltip>
               </>
             ) : (
@@ -356,22 +356,22 @@ export function AppSidebar() {
                   variant="outline"
                   className="w-full justify-center sidebar-menu-item"
                   onClick={logout}
-                  aria-label={t.common.signOut}
+                  aria-label={t('common.signOut')}
                 >
                   <LogOut className="h-4 w-4" />
                 </Button>
               </TooltipTrigger>
-               <TooltipContent side="right">{t.common.signOut}</TooltipContent>
+               <TooltipContent side="right">{t('common.signOut')}</TooltipContent>
             </Tooltip>
           ) : (
             <Button
               variant="outline"
               className="w-full justify-start gap-3 sidebar-menu-item"
               onClick={logout}
-              aria-label={t.common.signOut}
+              aria-label={t('common.signOut')}
              >
               <LogOut className="h-4 w-4" />
-              {t.common.signOut}
+              {t('common.signOut')}
             </Button>
           )}
         </div>
diff --git a/frontend/src/components/layout/SetupBanner.tsx b/frontend/src/components/layout/SetupBanner.tsx
index 237ab98..a0c041c 100644
--- a/frontend/src/components/layout/SetupBanner.tsx
+++ b/frontend/src/components/layout/SetupBanner.tsx
@@ -36,17 +36,17 @@ export function SetupBanner() {
         <Alert className="border-red-500/50 bg-red-50 dark:bg-red-950/20">
           <ShieldAlert className="h-4 w-4 text-red-600 dark:text-red-400" />
           <AlertTitle className="text-red-800 dark:text-red-200">
-            {t.setupBanner.encryptionRequired}
+            {t('setupBanner.encryptionRequired')}
           </AlertTitle>
           <AlertDescription className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between text-red-700 dark:text-red-300">
-            <span>{t.setupBanner.encryptionRequiredDescription}</span>
+            <span>{t('setupBanner.encryptionRequiredDescription')}</span>
             <a
               href="https://github.com/lfnovo/open-notebook/blob/main/docs/3-USER-GUIDE/api-configuration.md#encryption-setup"
               target="_blank"
               rel="noopener noreferrer"
               className="inline-flex items-center shrink-0 text-sm font-medium underline underline-offset-2 hover:text-red-900 dark:hover:text-red-100"
             >
-              {t.setupBanner.viewDocs}
+              {t('setupBanner.viewDocs')}
               <ExternalLink className="ml-1 h-3 w-3" />
             </a>
           </AlertDescription>
@@ -60,11 +60,11 @@ export function SetupBanner() {
       <Alert className="border-amber-500/50 bg-amber-50 dark:bg-amber-950/20">
         <AlertTriangle className="h-4 w-4 text-amber-600 dark:text-amber-400" />
         <AlertTitle className="text-amber-800 dark:text-amber-200">
-          {t.setupBanner.migrationAvailable}
+          {t('setupBanner.migrationAvailable')}
         </AlertTitle>
         <AlertDescription className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
           <span className="text-amber-700 dark:text-amber-300">
-            {t.setupBanner.migrationDescription.replace('{count}', providersToMigrate.length.toString())}
+            {t('setupBanner.migrationDescription').replace('{count}', providersToMigrate.length.toString())}
           </span>
           <Button
             variant="outline"
@@ -73,7 +73,7 @@ export function SetupBanner() {
             className="shrink-0 border-amber-500 text-amber-700 hover:bg-amber-100 dark:border-amber-400 dark:text-amber-300 dark:hover:bg-amber-900/30"
           >
             <Link href="/settings/api-keys">
-              {t.setupBanner.goToSettings}
+              {t('setupBanner.goToSettings')}
               <ArrowRight className="ml-2 h-4 w-4" />
             </Link>
           </Button>
diff --git a/frontend/src/components/notebooks/CreateNotebookDialog.tsx b/frontend/src/components/notebooks/CreateNotebookDialog.tsx
index ced84c4..8610ef2 100644
--- a/frontend/src/components/notebooks/CreateNotebookDialog.tsx
+++ b/frontend/src/components/notebooks/CreateNotebookDialog.tsx
@@ -67,19 +67,19 @@ export function CreateNotebookDialog({ open, onOpenChange }: CreateNotebookDialo
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="sm:max-w-[480px]">
         <DialogHeader>
-          <DialogTitle>{t.notebooks.createNew}</DialogTitle>
+          <DialogTitle>{t('notebooks.createNew')}</DialogTitle>
           <DialogDescription>
-            {t.notebooks.createNewDesc}
+            {t('notebooks.createNewDesc')}
           </DialogDescription>
         </DialogHeader>
 
         <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
           <div className="space-y-2">
-            <Label htmlFor="notebook-name">{t.common.name} *</Label>
+            <Label htmlFor="notebook-name">{t('common.name')} *</Label>
             <Input
               id="notebook-name"
               {...register('name')}
-              placeholder={t.notebooks.namePlaceholder}
+              placeholder={t('notebooks.namePlaceholder')}
               autoComplete="off"
             />
             {errors.name && (
@@ -88,21 +88,21 @@ export function CreateNotebookDialog({ open, onOpenChange }: CreateNotebookDialo
           </div>
 
           <div className="space-y-2">
-            <Label htmlFor="notebook-description">{t.common.description}</Label>
+            <Label htmlFor="notebook-description">{t('common.description')}</Label>
             <Textarea
               id="notebook-description"
               {...register('description')}
-              placeholder={t.notebooks.descPlaceholder}
+              placeholder={t('notebooks.descPlaceholder')}
               rows={4}
             />
           </div>
 
           <DialogFooter className="gap-2 sm:gap-0">
             <Button type="button" variant="outline" onClick={closeDialog}>
-              {t.common.cancel}
+              {t('common.cancel')}
             </Button>
             <Button type="submit" disabled={!isValid || createNotebook.isPending}>
-              {createNotebook.isPending ? t.common.creating : t.notebooks.createNew}
+              {createNotebook.isPending ? t('common.creating') : t('notebooks.createNew')}
             </Button>
           </DialogFooter>
         </form>
diff --git a/frontend/src/components/podcasts/EpisodeCard.tsx b/frontend/src/components/podcasts/EpisodeCard.tsx
index 2caea50..38f20b1 100644
--- a/frontend/src/components/podcasts/EpisodeCard.tsx
+++ b/frontend/src/components/podcasts/EpisodeCard.tsx
@@ -33,7 +33,7 @@ import {
 import { ScrollArea } from '@/components/ui/scroll-area'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
 import { useTranslation } from '@/lib/hooks/use-translation'
-import { TranslationKeys } from '@/lib/locales'
+import type { TFunction } from 'i18next'
 
 interface EpisodeCardProps {
   episode: PodcastEpisode
@@ -43,40 +43,40 @@ interface EpisodeCardProps {
   retrying?: boolean
 }
 
-const getSTATUS_META = (t: TranslationKeys): Record<
+const getSTATUS_META = (t: TFunction): Record<
   EpisodeStatus | 'unknown',
   { label: string; className: string }
 > => ({
   running: {
-    label: t.podcasts.processingLabel,
+    label: t('podcasts.processingLabel'),
     className: 'bg-amber-100 text-amber-800 border-amber-200',
   },
   processing: {
-    label: t.podcasts.processingLabel,
+    label: t('podcasts.processingLabel'),
     className: 'bg-amber-100 text-amber-800 border-amber-200',
   },
   completed: {
-    label: t.podcasts.completedLabel,
+    label: t('podcasts.completedLabel'),
     className: 'bg-emerald-100 text-emerald-800 border-emerald-200',
   },
   failed: {
-    label: t.podcasts.failedLabel,
+    label: t('podcasts.failedLabel'),
     className: 'bg-red-100 text-red-800 border-red-200',
   },
   error: {
-    label: t.podcasts.failedLabel,
+    label: t('podcasts.failedLabel'),
     className: 'bg-red-100 text-red-800 border-red-200',
   },
   pending: {
-    label: t.podcasts.pendingLabel,
+    label: t('podcasts.pendingLabel'),
     className: 'bg-sky-100 text-sky-800 border-sky-200',
   },
   submitted: {
-    label: t.podcasts.pendingLabel,
+    label: t('podcasts.pendingLabel'),
     className: 'bg-sky-100 text-sky-800 border-sky-200',
   },
   unknown: {
-    label: t.common.unknown,
+    label: t('common.unknown'),
     className: 'bg-muted text-muted-foreground border-transparent',
   },
 })
@@ -190,7 +190,7 @@ export function EpisodeCard({ episode, onDelete, deleting, onRetry, retrying }:
         setAudioSrc(revokeUrl)
       } catch (error) {
         console.error('Unable to load podcast audio', error)
-        setAudioError(t.podcasts.audioUnavailable)
+        setAudioError(t('podcasts.audioUnavailable'))
         setAudioSrc(undefined)
       }
     }
@@ -212,7 +212,7 @@ export function EpisodeCard({ episode, onDelete, deleting, onRetry, retrying }:
     : null
 
   const createdLabel = distance
-    ? t.podcasts.created.replace('{time}', distance)
+    ? t('podcasts.created').replace('{time}', distance)
     : null
 
   const handleDelete = () => {
@@ -239,7 +239,7 @@ export function EpisodeCard({ episode, onDelete, deleting, onRetry, retrying }:
               <StatusBadge status={episode.job_status} />
             </div>
             <p className="text-xs text-muted-foreground">
-              {t.podcasts.profile}: {episode.episode_profile?.name || t.common.unknown}
+              {t('podcasts.profile')}: {episode.episode_profile?.name || t('common.unknown')}
               {createdLabel ? ` • ${createdLabel}` : ''}
             </p>
           </div>
@@ -247,14 +247,14 @@ export function EpisodeCard({ episode, onDelete, deleting, onRetry, retrying }:
             <Dialog open={detailsOpen} onOpenChange={setDetailsOpen}>
               <DialogTrigger asChild>
                 <Button variant="outline" size="sm">
-                  <InfoIcon className="mr-2 h-4 w-4" /> {t.podcasts.details}
+                  <InfoIcon className="mr-2 h-4 w-4" /> {t('podcasts.details')}
                 </Button>
               </DialogTrigger>
               <DialogContent className="w-[min(90vw,720px)] max-h-[85vh] overflow-hidden">
                 <DialogHeader>
                   <DialogTitle>{episode.name}</DialogTitle>
                   <DialogDescription>
-                    {episode.episode_profile?.name || t.common.unknown}
+                    {episode.episode_profile?.name || t('common.unknown')}
                     {createdLabel ? ` • ${createdLabel}` : ''}
                   </DialogDescription>
                 </DialogHeader>
@@ -267,19 +267,19 @@ export function EpisodeCard({ episode, onDelete, deleting, onRetry, retrying }:
 
                   <Tabs defaultValue="summary" className="h-[60vh] flex flex-col">
                     <TabsList className="grid w-full grid-cols-3">
-                      <TabsTrigger value="summary">{t.podcasts.summaryTab}</TabsTrigger>
-                      <TabsTrigger value="outline">{t.podcasts.outlineTab}</TabsTrigger>
-                      <TabsTrigger value="transcript">{t.podcasts.transcriptTab}</TabsTrigger>
+                      <TabsTrigger value="summary">{t('podcasts.summaryTab')}</TabsTrigger>
+                      <TabsTrigger value="outline">{t('podcasts.outlineTab')}</TabsTrigger>
+                      <TabsTrigger value="transcript">{t('podcasts.transcriptTab')}</TabsTrigger>
                     </TabsList>
 
                     <TabsContent value="summary" className="flex-1 overflow-hidden">
                       <ScrollArea className="h-full pr-4">
                         <div className="space-y-6">
                           <section className="space-y-2">
-                            <h4 className="text-sm font-semibold text-foreground">{t.podcasts.episodeProfile}</h4>
+                            <h4 className="text-sm font-semibold text-foreground">{t('podcasts.episodeProfile')}</h4>
                             <div className="grid gap-2 text-sm md:grid-cols-2">
                               <div>
-                                <p className="text-muted-foreground">{t.podcasts.outlineModel}</p>
+                                <p className="text-muted-foreground">{t('podcasts.outlineModel')}</p>
                                 <p>
                                   {episode.episode_profile?.outline_provider ?? '—'} /
                                   {' '}
@@ -287,7 +287,7 @@ export function EpisodeCard({ episode, onDelete, deleting, onRetry, retrying }:
                                 </p>
                               </div>
                               <div>
-                                <p className="text-muted-foreground">{t.podcasts.transcriptModel}</p>
+                                <p className="text-muted-foreground">{t('podcasts.transcriptModel')}</p>
                                 <p>
                                   {episode.episode_profile?.transcript_provider ?? '—'} /
                                   {' '}
@@ -295,7 +295,7 @@ export function EpisodeCard({ episode, onDelete, deleting, onRetry, retrying }:
                                 </p>
                               </div>
                               <div>
-                                <p className="text-muted-foreground">{t.podcasts.segments}</p>
+                                <p className="text-muted-foreground">{t('podcasts.segments')}</p>
                                 <p>{episode.episode_profile?.num_segments ?? '—'}</p>
                               </div>
                             </div>
@@ -307,7 +307,7 @@ export function EpisodeCard({ episode, onDelete, deleting, onRetry, retrying }:
                           </section>
 
                           <section className="space-y-2">
-                            <h4 className="text-sm font-semibold text-foreground">{t.podcasts.speakerProfile}</h4>
+                            <h4 className="text-sm font-semibold text-foreground">{t('podcasts.speakerProfile')}</h4>
                             <p className="text-xs text-muted-foreground">
                               {episode.speaker_profile?.tts_provider ?? '—'} /{' '}
                               {episode.speaker_profile?.tts_model ?? '—'}
@@ -318,12 +318,12 @@ export function EpisodeCard({ episode, onDelete, deleting, onRetry, retrying }:
                                 className="rounded-md border bg-muted/20 p-3 text-xs"
                               >
                                 <p className="font-semibold text-foreground">{speaker.name}</p>
-                                <p className="text-muted-foreground">{t.podcasts.voiceId}: {speaker.voice_id}</p>
+                                <p className="text-muted-foreground">{t('podcasts.voiceId')}: {speaker.voice_id}</p>
                                 <p className="mt-2 whitespace-pre-wrap text-muted-foreground">
-                                  <span className="font-semibold">{t.podcasts.backstory}:</span> {speaker.backstory}
+                                  <span className="font-semibold">{t('podcasts.backstory')}:</span> {speaker.backstory}
                                 </p>
                                 <p className="mt-2 whitespace-pre-wrap text-muted-foreground">
-                                  <span className="font-semibold">{t.podcasts.personality}:</span> {speaker.personality}
+                                  <span className="font-semibold">{t('podcasts.personality')}:</span> {speaker.personality}
                                 </p>
                               </div>
                             ))}
@@ -331,7 +331,7 @@ export function EpisodeCard({ episode, onDelete, deleting, onRetry, retrying }:
 
                           {episode.briefing ? (
                             <section className="space-y-2">
-                              <h4 className="text-sm font-semibold text-foreground">{t.podcasts.briefing}</h4>
+                              <h4 className="text-sm font-semibold text-foreground">{t('podcasts.briefing')}</h4>
                               <div className="rounded border bg-muted/30 p-3 text-xs whitespace-pre-wrap">
                                 {episode.briefing}
                               </div>
@@ -348,17 +348,17 @@ export function EpisodeCard({ episode, onDelete, deleting, onRetry, retrying }:
                             {outlineSegments.map((segment, index) => (
                               <div key={index} className="rounded border bg-muted/20 p-3 text-xs space-y-1">
                                 <div className="flex items-center justify-between gap-2">
-                                  <p className="font-semibold text-foreground">{segment.name ?? `${t.podcasts.segment} ${index + 1}`}</p>
+                                  <p className="font-semibold text-foreground">{segment.name ?? `${t('podcasts.segment')} ${index + 1}`}</p>
                                   {segment.size ? (
                                     <Badge variant="outline" className="text-[10px] uppercase tracking-wide">{segment.size}</Badge>
                                   ) : null}
                                 </div>
-                                <p className="text-muted-foreground whitespace-pre-wrap">{segment.description ?? t.podcasts.noDescription}</p>
+                                <p className="text-muted-foreground whitespace-pre-wrap">{segment.description ?? t('podcasts.noDescription')}</p>
                               </div>
                             ))}
                           </div>
                         ) : (
-                          <p className="text-xs text-muted-foreground">{t.podcasts.noOutline}</p>
+                          <p className="text-xs text-muted-foreground">{t('podcasts.noOutline')}</p>
                         )}
                       </ScrollArea>
                     </TabsContent>
@@ -368,12 +368,12 @@ export function EpisodeCard({ episode, onDelete, deleting, onRetry, retrying }:
                         {transcriptEntries.length > 0 ? (
                           transcriptEntries.map((entry, index) => (
                             <div key={index} className="rounded border bg-muted/20 p-3 text-xs space-y-1">
-                              <p className="font-semibold text-foreground">{entry.speaker ?? t.podcasts.speaker}</p>
+                              <p className="font-semibold text-foreground">{entry.speaker ?? t('podcasts.speaker')}</p>
                               <p className="text-muted-foreground whitespace-pre-wrap">{entry.dialogue ?? ''}</p>
                             </div>
                           ))
                         ) : (
-                          <p className="text-xs text-muted-foreground">{t.podcasts.noTranscript}</p>
+                          <p className="text-xs text-muted-foreground">{t('podcasts.noTranscript')}</p>
                         )}
                       </ScrollArea>
                     </TabsContent>
@@ -389,27 +389,27 @@ export function EpisodeCard({ episode, onDelete, deleting, onRetry, retrying }:
                 disabled={retrying}
               >
                 <RefreshCcw className={cn('mr-2 h-4 w-4', retrying && 'animate-spin')} />
-                {retrying ? t.podcasts.retrying : t.podcasts.retry}
+                {retrying ? t('podcasts.retrying') : t('podcasts.retry')}
               </Button>
             ) : null}
             <AlertDialog>
               <AlertDialogTrigger asChild>
                 <Button variant="ghost" size="sm" className="text-destructive">
                   <Trash2 className="mr-2 h-4 w-4" />
-                  {t.podcasts.delete}
+                  {t('podcasts.delete')}
                 </Button>
               </AlertDialogTrigger>
               <AlertDialogContent>
                 <AlertDialogHeader>
-                  <AlertDialogTitle>{t.podcasts.deleteEpisodeTitle}</AlertDialogTitle>
+                  <AlertDialogTitle>{t('podcasts.deleteEpisodeTitle')}</AlertDialogTitle>
                   <AlertDialogDescription>
-                    {t.podcasts.deleteEpisodeDesc.replace('{name}', episode.name)}
+                    {t('podcasts.deleteEpisodeDesc').replace('{name}', episode.name)}
                   </AlertDialogDescription>
                 </AlertDialogHeader>
                 <AlertDialogFooter>
-                  <AlertDialogCancel>{t.common.cancel}</AlertDialogCancel>
+                  <AlertDialogCancel>{t('common.cancel')}</AlertDialogCancel>
                   <AlertDialogAction onClick={handleDelete} disabled={deleting}>
-                    {deleting ? t.podcasts.deleting : t.podcasts.delete}
+                    {deleting ? t('podcasts.deleting') : t('podcasts.delete')}
                   </AlertDialogAction>
                 </AlertDialogFooter>
               </AlertDialogContent>
@@ -425,7 +425,7 @@ export function EpisodeCard({ episode, onDelete, deleting, onRetry, retrying }:
 
         {isFailed && episode.error_message ? (
           <div className="rounded-md border border-red-200 bg-red-50 p-3 dark:border-red-900 dark:bg-red-950/30">
-            <p className="text-xs font-medium text-red-800 dark:text-red-300">{t.podcasts.errorDetails}</p>
+            <p className="text-xs font-medium text-red-800 dark:text-red-300">{t('podcasts.errorDetails')}</p>
             <p className="mt-1 text-xs whitespace-pre-wrap text-red-700 dark:text-red-400">{episode.error_message}</p>
           </div>
         ) : null}
diff --git a/frontend/src/components/podcasts/EpisodeProfilesPanel.tsx b/frontend/src/components/podcasts/EpisodeProfilesPanel.tsx
index 44064a5..f19efe9 100644
--- a/frontend/src/components/podcasts/EpisodeProfilesPanel.tsx
+++ b/frontend/src/components/podcasts/EpisodeProfilesPanel.tsx
@@ -83,25 +83,25 @@ export function EpisodeProfilesPanel({
     <div className="space-y-6">
       <div className="flex items-center justify-between">
         <div>
-          <h2 className="text-lg font-semibold">{t.podcasts.episodeProfilesTitle}</h2>
+          <h2 className="text-lg font-semibold">{t('podcasts.episodeProfilesTitle')}</h2>
           <p className="text-sm text-muted-foreground">
-            {t.podcasts.episodeProfilesDesc}
+            {t('podcasts.episodeProfilesDesc')}
           </p>
         </div>
         <Button onClick={() => setCreateOpen(true)} disabled={disableCreate}>
-          {t.podcasts.createProfile}
+          {t('podcasts.createProfile')}
         </Button>
       </div>
 
       {disableCreate ? (
         <p className="rounded-lg border border-dashed bg-amber-50 p-4 text-sm text-amber-900">
-          {t.podcasts.createSpeakerFirst}
+          {t('podcasts.createSpeakerFirst')}
         </p>
       ) : null}
 
       {sortedProfiles.length === 0 ? (
         <div className="rounded-lg border border-dashed bg-muted/30 p-10 text-center text-sm text-muted-foreground">
-          {t.podcasts.noEpisodeProfiles}
+          {t('podcasts.noEpisodeProfiles')}
         </div>
       ) : (
         <div className="space-y-4">
@@ -123,12 +123,12 @@ export function EpisodeProfilesPanel({
                       {unconfigured ? (
                         <Badge variant="outline" className="text-amber-600 border-amber-300 text-xs">
                           <AlertTriangle className="h-3 w-3 mr-1" />
-                          {t.podcasts.setupRequired}
+                          {t('podcasts.setupRequired')}
                         </Badge>
                       ) : null}
                     </div>
                     <CardDescription className="text-sm text-muted-foreground">
-                      {profile.description || t.podcasts.noDescription}
+                      {profile.description || t('podcasts.noDescription')}
                     </CardDescription>
                   </div>
                   <div className="flex items-center gap-1">
@@ -137,7 +137,7 @@ export function EpisodeProfilesPanel({
                       size="sm"
                       onClick={() => setEditProfile(profile)}
                     >
-                      <Edit3 className="mr-2 h-4 w-4" /> {t.podcasts.edit}
+                      <Edit3 className="mr-2 h-4 w-4" /> {t('podcasts.edit')}
                     </Button>
                     <AlertDialog>
                       <DropdownMenu>
@@ -161,31 +161,31 @@ export function EpisodeProfilesPanel({
                             disabled={duplicateProfile.isPending}
                           >
                             <Copy className="h-4 w-4 mr-2" />
-                            {t.podcasts.duplicate}
+                            {t('podcasts.duplicate')}
                           </DropdownMenuItem>
                           <DropdownMenuSeparator />
                           <AlertDialogTrigger asChild>
                             <DropdownMenuItem className="text-destructive focus:text-destructive">
                               <Trash2 className="h-4 w-4 mr-2" />
-                              {t.podcasts.delete}
+                              {t('podcasts.delete')}
                             </DropdownMenuItem>
                           </AlertDialogTrigger>
                         </DropdownMenuContent>
                       </DropdownMenu>
                       <AlertDialogContent>
                         <AlertDialogHeader>
-                          <AlertDialogTitle>{t.podcasts.deleteProfileTitle}</AlertDialogTitle>
+                          <AlertDialogTitle>{t('podcasts.deleteProfileTitle')}</AlertDialogTitle>
                           <AlertDialogDescription>
-                            {t.podcasts.deleteProfileDesc.replace('{name}', profile.name)}
+                            {t('podcasts.deleteProfileDesc').replace('{name}', profile.name)}
                           </AlertDialogDescription>
                         </AlertDialogHeader>
                         <AlertDialogFooter>
-                          <AlertDialogCancel>{t.common.cancel}</AlertDialogCancel>
+                          <AlertDialogCancel>{t('common.cancel')}</AlertDialogCancel>
                           <AlertDialogAction
                             onClick={() => deleteProfile.mutate(profile.id)}
                             disabled={deleteProfile.isPending}
                           >
-                            {deleteProfile.isPending ? t.podcasts.deleting : t.podcasts.delete}
+                            {deleteProfile.isPending ? t('podcasts.deleting') : t('podcasts.delete')}
                           </AlertDialogAction>
                         </AlertDialogFooter>
                       </AlertDialogContent>
@@ -197,45 +197,45 @@ export function EpisodeProfilesPanel({
                   <div className="grid gap-3 md:grid-cols-2">
                     <div>
                       <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-                        {t.podcasts.outlineModel}
+                        {t('podcasts.outlineModel')}
                       </p>
                       <p className="text-foreground">
                         {profile.outline_llm
                           ? (modelNameMap[profile.outline_llm] ?? profile.outline_llm)
                           : (profile.outline_provider && profile.outline_model
                             ? `${profile.outline_provider} / ${profile.outline_model}`
-                            : t.podcasts.notConfigured)}
+                            : t('podcasts.notConfigured'))}
                       </p>
                     </div>
                     <div>
                       <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-                        {t.podcasts.transcriptModel}
+                        {t('podcasts.transcriptModel')}
                       </p>
                       <p className="text-foreground">
                         {profile.transcript_llm
                           ? (modelNameMap[profile.transcript_llm] ?? profile.transcript_llm)
                           : (profile.transcript_provider && profile.transcript_model
                             ? `${profile.transcript_provider} / ${profile.transcript_model}`
-                            : t.podcasts.notConfigured)}
+                            : t('podcasts.notConfigured'))}
                       </p>
                     </div>
                     <div>
                       <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-                        {t.podcasts.segments}
+                        {t('podcasts.segments')}
                       </p>
                       <p className="text-foreground">{profile.num_segments}</p>
                     </div>
                     {profile.language ? (
                       <div>
                         <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-                          {t.podcasts.language}
+                          {t('podcasts.language')}
                         </p>
                         <p className="text-foreground">{profile.language}</p>
                       </div>
                     ) : null}
                     <div>
                       <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-                        {t.podcasts.speakerProfile}
+                        {t('podcasts.speakerProfile')}
                       </p>
                       <div className="flex items-center gap-2 text-foreground">
                         <Users className="h-4 w-4" />
@@ -256,7 +256,7 @@ export function EpisodeProfilesPanel({
                   {profile.default_briefing ? (
                     <div>
                       <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-                        {t.podcasts.defaultBriefingTitle}
+                        {t('podcasts.defaultBriefingTitle')}
                       </p>
                       <p className="mt-1 whitespace-pre-wrap text-muted-foreground">
                         {profile.default_briefing}
diff --git a/frontend/src/components/podcasts/EpisodesTab.tsx b/frontend/src/components/podcasts/EpisodesTab.tsx
index 47742ad..2f8baf9 100644
--- a/frontend/src/components/podcasts/EpisodesTab.tsx
+++ b/frontend/src/components/podcasts/EpisodesTab.tsx
@@ -11,32 +11,32 @@ import { Button } from '@/components/ui/button'
 import { Separator } from '@/components/ui/separator'
 import { GeneratePodcastDialog } from '@/components/podcasts/GeneratePodcastDialog'
 import { useTranslation } from '@/lib/hooks/use-translation'
-import { TranslationKeys } from '@/lib/locales'
+import type { TFunction } from 'i18next'
 
-const getSTATUS_ORDER = (t: TranslationKeys): Array<{
+const getSTATUS_ORDER = (t: TFunction): Array<{
   key: 'running' | 'completed' | 'failed' | 'pending'
   title: string
   description?: string
 }> => [
   {
     key: 'running',
-    title: t.podcasts.statusRunningTitle,
-    description: t.podcasts.statusRunningDesc,
+    title: t('podcasts.statusRunningTitle'),
+    description: t('podcasts.statusRunningDesc'),
   },
   {
     key: 'pending',
-    title: t.podcasts.statusPendingTitle,
-    description: t.podcasts.statusPendingDesc,
+    title: t('podcasts.statusPendingTitle'),
+    description: t('podcasts.statusPendingDesc'),
   },
   {
     key: 'completed',
-    title: t.podcasts.statusCompletedTitle,
-    description: t.podcasts.statusCompletedDesc,
+    title: t('podcasts.statusCompletedTitle'),
+    description: t('podcasts.statusCompletedDesc'),
   },
   {
     key: 'failed',
-    title: t.podcasts.statusFailedTitle,
-    description: t.podcasts.statusFailedDesc,
+    title: t('podcasts.statusFailedTitle'),
+    description: t('podcasts.statusFailedDesc'),
   },
 ]
 
@@ -84,14 +84,14 @@ export function EpisodesTab() {
     <div className="space-y-6">
       <div className="flex flex-wrap items-center justify-between gap-3">
         <div className="space-y-1">
-          <h2 className="text-xl font-semibold">{t.podcasts.overviewTitle}</h2>
+          <h2 className="text-xl font-semibold">{t('podcasts.overviewTitle')}</h2>
           <p className="text-sm text-muted-foreground">
-            {t.podcasts.overviewDesc}
+            {t('podcasts.overviewDesc')}
           </p>
         </div>
         <div className="flex items-center gap-2">
           <Button onClick={() => setShowGenerateDialog(true)}>
-            {t.podcasts.generateBtn}
+            {t('podcasts.generateBtn')}
           </Button>
           <Button
             variant="outline"
@@ -104,25 +104,25 @@ export function EpisodesTab() {
             ) : (
               <RefreshCcw className="mr-2 h-4 w-4" />
             )}
-            {t.common.refresh}
+            {t('common.refresh')}
           </Button>
         </div>
       </div>
 
       <div className="flex flex-wrap gap-2">
-        <SummaryBadge label={t.podcasts.total} value={statusCounts.total} />
-        <SummaryBadge label={t.podcasts.processingLabel} value={statusCounts.running} />
-        <SummaryBadge label={t.podcasts.completedLabel} value={statusCounts.completed} />
-        <SummaryBadge label={t.podcasts.failedLabel} value={statusCounts.failed} />
-        <SummaryBadge label={t.podcasts.pendingLabel} value={statusCounts.pending} />
+        <SummaryBadge label={t('podcasts.total')} value={statusCounts.total} />
+        <SummaryBadge label={t('podcasts.processingLabel')} value={statusCounts.running} />
+        <SummaryBadge label={t('podcasts.completedLabel')} value={statusCounts.completed} />
+        <SummaryBadge label={t('podcasts.failedLabel')} value={statusCounts.failed} />
+        <SummaryBadge label={t('podcasts.pendingLabel')} value={statusCounts.pending} />
       </div>
 
       {isError ? (
         <Alert variant="destructive">
           <AlertCircle className="h-4 w-4" />
-          <AlertTitle>{t.podcasts.loadErrorTitle}</AlertTitle>
+          <AlertTitle>{t('podcasts.loadErrorTitle')}</AlertTitle>
           <AlertDescription>
-            {t.podcasts.loadErrorDesc}
+            {t('podcasts.loadErrorDesc')}
           </AlertDescription>
         </Alert>
       ) : null}
@@ -130,14 +130,14 @@ export function EpisodesTab() {
       {isLoading ? (
         <div className="flex items-center gap-3 rounded-lg border border-dashed p-6 text-sm text-muted-foreground">
           <Loader2 className="h-4 w-4 animate-spin" />
-          {t.podcasts.loadingEpisodes}
+          {t('podcasts.loadingEpisodes')}
         </div>
       ) : null}
 
       {emptyState ? (
         <div className="rounded-lg border border-dashed bg-muted/30 p-10 text-center">
           <p className="text-sm text-muted-foreground">
-            {t.podcasts.noEpisodesYet}
+            {t('podcasts.noEpisodesYet')}
           </p>
         </div>
       ) : null}
diff --git a/frontend/src/components/podcasts/GeneratePodcastDialog.tsx b/frontend/src/components/podcasts/GeneratePodcastDialog.tsx
index 81e4fad..0f76e74 100644
--- a/frontend/src/components/podcasts/GeneratePodcastDialog.tsx
+++ b/frontend/src/components/podcasts/GeneratePodcastDialog.tsx
@@ -117,28 +117,28 @@ function ContentSelectionPanel({
   // Cache all translation strings at render time to avoid repeated Proxy accesses in loops
   // This prevents the infinite loop detection from triggering
   const tr = {
-    content: t.podcasts.content,
-    contentDesc: t.podcasts.contentDesc,
-    itemsSelected: t.podcasts.itemsSelected,
-    tokens: t.podcasts.tokens,
-    chars: t.podcasts.chars,
-    loadingNotebooks: t.podcasts.loadingNotebooks,
-    noNotebooksFoundInPodcasts: t.podcasts.noNotebooksFoundInPodcasts,
-    sources: t.podcasts.sources,
-    notes: t.podcasts.notes,
-    noContentSelected: t.podcasts.noContentSelected,
-    noSources: t.podcasts.noSources,
-    untitledSource: t.podcasts.untitledSource,
-    link: t.podcasts.link,
-    file: t.podcasts.file,
-    embedded: t.podcasts.embedded,
-    notEmbedded: t.podcasts.notEmbedded,
-    selectMode: t.podcasts.selectMode,
-    noNotes: t.podcasts.noNotes,
-    untitledNote: t.podcasts.untitledNote,
-    commonUpdated: t.common.updated,
-    summary: t.podcasts.summary,
-    fullContent: t.podcasts.fullContent,
+    content: t('podcasts.content'),
+    contentDesc: t('podcasts.contentDesc'),
+    itemsSelected: t('podcasts.itemsSelected'),
+    tokens: t('podcasts.tokens'),
+    chars: t('podcasts.chars'),
+    loadingNotebooks: t('podcasts.loadingNotebooks'),
+    noNotebooksFoundInPodcasts: t('podcasts.noNotebooksFoundInPodcasts'),
+    sources: t('podcasts.sources'),
+    notes: t('podcasts.notes'),
+    noContentSelected: t('podcasts.noContentSelected'),
+    noSources: t('podcasts.noSources'),
+    untitledSource: t('podcasts.untitledSource'),
+    link: t('podcasts.link'),
+    file: t('podcasts.file'),
+    embedded: t('podcasts.embedded'),
+    notEmbedded: t('podcasts.notEmbedded'),
+    selectMode: t('podcasts.selectMode'),
+    noNotes: t('podcasts.noNotes'),
+    untitledNote: t('podcasts.untitledNote'),
+    commonUpdated: t('common.updated'),
+    summary: t('podcasts.summary'),
+    fullContent: t('podcasts.fullContent'),
   }
 
   // Pre-compute source modes once to avoid repeated t.podcasts access in loops
@@ -768,11 +768,11 @@ export function GeneratePodcastDialog({ open, onOpenChange }: GeneratePodcastDia
         const response = await chatApi.buildContext(task.payload)
         const notebookName = notebooks.find((nb) => nb.id === task.notebookId)?.name ?? task.notebookId
         const contextString = JSON.stringify(response.context, null, 2)
-        const snippet = `${t.common.notebookLabel.replace('{name}', notebookName)}\n${contextString}`
+        const snippet = `${t('common.notebookLabel').replace('{name}', notebookName)}\n${contextString}`
         parts.push(snippet)
       } catch (error) {
         console.error('Failed to build context for notebook', task.notebookId, error)
-        throw new Error(t.podcasts.buildContextFailed)
+        throw new Error(t('podcasts.buildContextFailed'))
       }
     }
 
@@ -782,8 +782,8 @@ export function GeneratePodcastDialog({ open, onOpenChange }: GeneratePodcastDia
   const handleSubmit = useCallback(async () => {
     if (!selectedEpisodeProfile) {
       toast({
-        title: t.podcasts.profileRequired,
-        description: t.podcasts.profileRequiredDesc,
+        title: t('podcasts.profileRequired'),
+        description: t('podcasts.profileRequiredDesc'),
         variant: 'destructive',
       })
       return
@@ -791,8 +791,8 @@ export function GeneratePodcastDialog({ open, onOpenChange }: GeneratePodcastDia
 
     if (!episodeName.trim()) {
       toast({
-        title: t.podcasts.nameRequired,
-        description: t.podcasts.nameRequiredDesc,
+        title: t('podcasts.nameRequired'),
+        description: t('podcasts.nameRequiredDesc'),
         variant: 'destructive',
       })
       return
@@ -803,8 +803,8 @@ export function GeneratePodcastDialog({ open, onOpenChange }: GeneratePodcastDia
       const content = await buildContentFromSelections()
       if (!content.trim()) {
         toast({
-          title: t.podcasts.addContext,
-          description: t.podcasts.addContextDesc,
+          title: t('podcasts.addContext'),
+          description: t('podcasts.addContextDesc'),
           variant: 'destructive',
         })
         return
@@ -821,8 +821,8 @@ export function GeneratePodcastDialog({ open, onOpenChange }: GeneratePodcastDia
       await generatePodcast.mutateAsync(payload)
 
       toast({
-        title: t.common.success,
-        description: t.podcasts.podcastTaskStarted,
+        title: t('common.success'),
+        description: t('podcasts.podcastTaskStarted'),
       })
 
       // Delay closing dialog slightly to ensure refetch completes
@@ -833,8 +833,8 @@ export function GeneratePodcastDialog({ open, onOpenChange }: GeneratePodcastDia
     } catch (error) {
       console.error('Failed to generate podcast', error)
       toast({
-        title: t.podcasts.generationFailed,
-        description: error instanceof Error ? error.message : t.common.refreshPage,
+        title: t('podcasts.generationFailed'),
+        description: error instanceof Error ? error.message : t('common.refreshPage'),
         variant: 'destructive',
       })
     } finally {
@@ -863,9 +863,9 @@ export function GeneratePodcastDialog({ open, onOpenChange }: GeneratePodcastDia
     }}>
       <DialogContent className="w-[80vw] max-w-[1080px] max-h-[90vh] overflow-hidden">
         <DialogHeader>
-          <DialogTitle>{t.podcasts.generateEpisode}</DialogTitle>
+          <DialogTitle>{t('podcasts.generateEpisode')}</DialogTitle>
           <DialogDescription>
-            {t.podcasts.generateEpisodeDesc}
+            {t('podcasts.generateEpisodeDesc')}
           </DialogDescription>
         </DialogHeader>
 
@@ -891,27 +891,27 @@ export function GeneratePodcastDialog({ open, onOpenChange }: GeneratePodcastDia
           <div className="space-y-6">
             <div className="space-y-3">
               <h3 className="text-sm font-semibold uppercase tracking-wide text-muted-foreground">
-                {t.podcasts.episodeSettings}
+                {t('podcasts.episodeSettings')}
               </h3>
               {episodeProfilesQuery.isLoading ? (
                 <div className="flex items-center gap-2 text-sm text-muted-foreground">
-                  <Loader2 className="h-4 w-4 animate-spin" /> {t.podcasts.loadingProfiles}
+                  <Loader2 className="h-4 w-4 animate-spin" /> {t('podcasts.loadingProfiles')}
                 </div>
               ) : episodeProfiles.length === 0 ? (
                 <div className="rounded-lg border border-dashed bg-muted/30 p-4 text-sm text-muted-foreground">
-                  {t.podcasts.noProfilesFound}
+                  {t('podcasts.noProfilesFound')}
                 </div>
               ) : (
                 <div className="space-y-4">
                   <div className="space-y-2">
-                    <Label htmlFor="episode_profile">{t.podcasts.episodeProfile}</Label>
+                    <Label htmlFor="episode_profile">{t('podcasts.episodeProfile')}</Label>
                     <Select
                       value={episodeProfileId}
                       onValueChange={setEpisodeProfileId}
                       disabled={episodeProfiles.length === 0}
                     >
                       <SelectTrigger id="episode_profile">
-                        <SelectValue placeholder={t.podcasts.episodeProfilePlaceholder} />
+                        <SelectValue placeholder={t('podcasts.episodeProfilePlaceholder')} />
                       </SelectTrigger>
                       <SelectContent>
                         {episodeProfiles.map((profile) => (
@@ -923,30 +923,30 @@ export function GeneratePodcastDialog({ open, onOpenChange }: GeneratePodcastDia
                     </Select>
                     {selectedEpisodeProfile && (
                       <p className="text-xs text-muted-foreground">
-                        {t.podcasts.usesSpeakerProfile}{' '}
+                        {t('podcasts.usesSpeakerProfile')}{' '}
                         <strong>{selectedEpisodeProfile.speaker_config}</strong>
                       </p>
                     )}
                   </div>
 
                   <div className="space-y-2">
-                    <Label htmlFor="episode_name">{t.podcasts.episodeName}</Label>
+                    <Label htmlFor="episode_name">{t('podcasts.episodeName')}</Label>
                     <Input
                       id="episode_name"
                       name="episode_name"
                       value={episodeName}
                       onChange={(event) => setEpisodeName(event.target.value)}
-                      placeholder={t.podcasts.episodeNamePlaceholder}
+                      placeholder={t('podcasts.episodeNamePlaceholder')}
                       autoComplete="off"
                     />
                   </div>
 
                    <div className="space-y-2">
-                    <Label htmlFor="instructions">{t.podcasts.additionalInstructions}</Label>
+                    <Label htmlFor="instructions">{t('podcasts.additionalInstructions')}</Label>
                     <Textarea
                       id="instructions"
                       name="instructions"
-                      placeholder={t.podcasts.instructionsPlaceholder}
+                      placeholder={t('podcasts.instructionsPlaceholder')}
                       value={instructions}
                       onChange={(event) => setInstructions(event.target.value)}
                       className="min-h-[100px] text-xs"
@@ -964,7 +964,7 @@ export function GeneratePodcastDialog({ open, onOpenChange }: GeneratePodcastDia
                 className="w-full"
               >
                 {isSubmitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
-                {isSubmitting ? t.podcasts.generating : t.podcasts.generate}
+                {isSubmitting ? t('podcasts.generating') : t('podcasts.generate')}
               </Button>
               <Button
                 variant="outline"
@@ -972,7 +972,7 @@ export function GeneratePodcastDialog({ open, onOpenChange }: GeneratePodcastDia
                 disabled={isSubmitting}
                 className="w-full"
               >
-                {t.common.cancel}
+                {t('common.cancel')}
               </Button>
             </div>
           </div>
diff --git a/frontend/src/components/podcasts/SpeakerProfilesPanel.tsx b/frontend/src/components/podcasts/SpeakerProfilesPanel.tsx
index dd5c504..e13ad1f 100644
--- a/frontend/src/components/podcasts/SpeakerProfilesPanel.tsx
+++ b/frontend/src/components/podcasts/SpeakerProfilesPanel.tsx
@@ -74,17 +74,17 @@ export function SpeakerProfilesPanel({
     <div className="space-y-6">
       <div className="flex items-center justify-between">
         <div>
-          <h2 className="text-lg font-semibold">{t.podcasts.speakerProfilesTitle}</h2>
+          <h2 className="text-lg font-semibold">{t('podcasts.speakerProfilesTitle')}</h2>
           <p className="text-sm text-muted-foreground">
-            {t.podcasts.speakerProfilesDesc}
+            {t('podcasts.speakerProfilesDesc')}
           </p>
         </div>
-        <Button onClick={() => setCreateOpen(true)}>{t.podcasts.createSpeaker}</Button>
+        <Button onClick={() => setCreateOpen(true)}>{t('podcasts.createSpeaker')}</Button>
       </div>
 
       {sortedProfiles.length === 0 ? (
         <div className="rounded-lg border border-dashed bg-muted/30 p-8 text-center text-sm text-muted-foreground">
-          {t.podcasts.noSpeakerProfiles}
+          {t('podcasts.noSpeakerProfiles')}
         </div>
       ) : (
         <div className="space-y-4">
@@ -105,12 +105,12 @@ export function SpeakerProfilesPanel({
                         {unconfigured ? (
                           <Badge variant="outline" className="text-amber-600 border-amber-300 text-xs">
                             <AlertTriangle className="h-3 w-3 mr-1" />
-                            {t.podcasts.setupRequired}
+                            {t('podcasts.setupRequired')}
                           </Badge>
                         ) : null}
                       </div>
                       <CardDescription className="text-sm text-muted-foreground">
-                        {profile.description || t.podcasts.noDescription}
+                        {profile.description || t('podcasts.noDescription')}
                       </CardDescription>
                     </div>
                     <Badge variant="outline" className="text-xs">
@@ -118,7 +118,7 @@ export function SpeakerProfilesPanel({
                         ? (modelNameMap[profile.voice_model] ?? profile.voice_model)
                         : (profile.tts_provider
                           ? `${profile.tts_provider} / ${profile.tts_model}`
-                          : t.podcasts.notConfigured)}
+                          : t('podcasts.notConfigured'))}
                     </Badge>
                   </div>
                   <div className="flex flex-wrap gap-2">
@@ -127,8 +127,8 @@ export function SpeakerProfilesPanel({
                       className="text-xs"
                     >
                       {usageCount > 0
-                        ? (usageCount === 1 ? t.podcasts.usedByCount_one : t.podcasts.usedByCount_other.replace('{count}', usageCount.toString()))
-                        : t.podcasts.unused}
+                        ? (usageCount === 1 ? t('podcasts.usedByCount_one') : t('podcasts.usedByCount_other').replace('{count}', usageCount.toString()))
+                        : t('podcasts.unused')}
                     </Badge>
                   </div>
                 </CardHeader>
@@ -149,7 +149,7 @@ export function SpeakerProfilesPanel({
                           </div>
                           <div className="flex items-center gap-2">
                             <span className="text-xs text-muted-foreground">
-                              {t.podcasts.voiceId}: {speaker.voice_id}
+                              {t('podcasts.voiceId')}: {speaker.voice_id}
                             </span>
                             {speaker.voice_model ? (
                               <Badge variant="secondary" className="text-xs">
@@ -159,10 +159,10 @@ export function SpeakerProfilesPanel({
                           </div>
                         </div>
                         <p className="mt-2 text-xs text-muted-foreground whitespace-pre-wrap">
-                          <span className="font-semibold">{t.podcasts.backstory}:</span> {speaker.backstory}
+                          <span className="font-semibold">{t('podcasts.backstory')}:</span> {speaker.backstory}
                         </p>
                         <p className="mt-2 text-xs text-muted-foreground whitespace-pre-wrap">
-                          <span className="font-semibold">{t.podcasts.personality}:</span> {speaker.personality}
+                          <span className="font-semibold">{t('podcasts.personality')}:</span> {speaker.personality}
                         </p>
                       </div>
                     ))}
@@ -174,7 +174,7 @@ export function SpeakerProfilesPanel({
                       size="sm"
                       onClick={() => setEditProfile(profile)}
                     >
-                      <Edit3 className="mr-2 h-4 w-4" /> {t.podcasts.edit}
+                      <Edit3 className="mr-2 h-4 w-4" /> {t('podcasts.edit')}
                     </Button>
                     <AlertDialog>
                       <DropdownMenu>
@@ -198,7 +198,7 @@ export function SpeakerProfilesPanel({
                             disabled={duplicateProfile.isPending}
                           >
                             <Copy className="h-4 w-4 mr-2" />
-                            {t.podcasts.duplicate}
+                            {t('podcasts.duplicate')}
                           </DropdownMenuItem>
                           <DropdownMenuSeparator />
                           <AlertDialogTrigger asChild>
@@ -207,30 +207,30 @@ export function SpeakerProfilesPanel({
                               disabled={deleteDisabled}
                             >
                               <Trash2 className="h-4 w-4 mr-2" />
-                              {t.podcasts.delete}
+                              {t('podcasts.delete')}
                             </DropdownMenuItem>
                           </AlertDialogTrigger>
                         </DropdownMenuContent>
                       </DropdownMenu>
                       <AlertDialogContent>
                         <AlertDialogHeader>
-                          <AlertDialogTitle>{t.podcasts.deleteSpeakerProfileTitle}</AlertDialogTitle>
+                          <AlertDialogTitle>{t('podcasts.deleteSpeakerProfileTitle')}</AlertDialogTitle>
                           <AlertDialogDescription>
-                            {t.podcasts.deleteSpeakerProfileDesc.replace('{name}', profile.name)}
+                            {t('podcasts.deleteSpeakerProfileDesc').replace('{name}', profile.name)}
                           </AlertDialogDescription>
                           {deleteDisabled ? (
                             <p className="mt-2 text-sm text-muted-foreground">
-                              {t.podcasts.deleteSpeakerDisabledHint}
+                              {t('podcasts.deleteSpeakerDisabledHint')}
                             </p>
                           ) : null}
                         </AlertDialogHeader>
                         <AlertDialogFooter>
-                          <AlertDialogCancel>{t.common.cancel}</AlertDialogCancel>
+                          <AlertDialogCancel>{t('common.cancel')}</AlertDialogCancel>
                           <AlertDialogAction
                             onClick={() => deleteProfile.mutate(profile.id)}
                             disabled={deleteDisabled || deleteProfile.isPending}
                           >
-                            {deleteProfile.isPending ? t.podcasts.deleting : t.podcasts.delete}
+                            {deleteProfile.isPending ? t('podcasts.deleting') : t('podcasts.delete')}
                           </AlertDialogAction>
                         </AlertDialogFooter>
                       </AlertDialogContent>
diff --git a/frontend/src/components/podcasts/TemplatesTab.tsx b/frontend/src/components/podcasts/TemplatesTab.tsx
index fa1eaea..695a3a6 100644
--- a/frontend/src/components/podcasts/TemplatesTab.tsx
+++ b/frontend/src/components/podcasts/TemplatesTab.tsx
@@ -30,9 +30,9 @@ export function TemplatesTab() {
   return (
     <div className="space-y-6">
       <div className="space-y-1">
-        <h2 className="text-xl font-semibold">{t.podcasts.templatesWorkspaceTitle}</h2>
+        <h2 className="text-xl font-semibold">{t('podcasts.templatesWorkspaceTitle')}</h2>
         <p className="text-sm text-muted-foreground">
-          {t.podcasts.templatesWorkspaceDesc}
+          {t('podcasts.templatesWorkspaceDesc')}
         </p>
       </div>
 
@@ -44,42 +44,42 @@ export function TemplatesTab() {
           <AccordionTrigger className="gap-2 py-4 text-left text-sm font-semibold">
             <div className="flex items-center gap-2">
               <Lightbulb className="h-4 w-4 text-primary" />
-              {t.podcasts.howTemplatesPowerTitle}
+              {t('podcasts.howTemplatesPowerTitle')}
             </div>
           </AccordionTrigger>
           <AccordionContent className="text-sm text-muted-foreground">
             <div className="space-y-4">
               <p className="text-muted-foreground/90">
-                {t.podcasts.howTemplatesPowerDesc}
+                {t('podcasts.howTemplatesPowerDesc')}
               </p>
 
               <div className="space-y-2">
-                <h4 className="font-medium text-foreground">{t.podcasts.episodeProfilesSetFormat}</h4>
+                <h4 className="font-medium text-foreground">{t('podcasts.episodeProfilesSetFormat')}</h4>
                 <ul className="list-disc space-y-1 pl-5">
-                  <li>{t.podcasts.episodeProfilesList1}</li>
-                  <li>{t.podcasts.episodeProfilesList2}</li>
-                  <li>{t.podcasts.episodeProfilesList3}</li>
+                  <li>{t('podcasts.episodeProfilesList1')}</li>
+                  <li>{t('podcasts.episodeProfilesList2')}</li>
+                  <li>{t('podcasts.episodeProfilesList3')}</li>
                 </ul>
               </div>
 
               <div className="space-y-2">
-                <h4 className="font-medium text-foreground">{t.podcasts.speakerProfilesBringVoices}</h4>
+                <h4 className="font-medium text-foreground">{t('podcasts.speakerProfilesBringVoices')}</h4>
                 <ul className="list-disc space-y-1 pl-5">
-                  <li>{t.podcasts.speakerProfilesList1}</li>
-                  <li>{t.podcasts.speakerProfilesList2}</li>
-                  <li>{t.podcasts.speakerProfilesList3}</li>
+                  <li>{t('podcasts.speakerProfilesList1')}</li>
+                  <li>{t('podcasts.speakerProfilesList2')}</li>
+                  <li>{t('podcasts.speakerProfilesList3')}</li>
                 </ul>
               </div>
 
               <div className="space-y-2">
-                <h4 className="font-medium text-foreground">{t.podcasts.recommendedWorkflow}</h4>
+                <h4 className="font-medium text-foreground">{t('podcasts.recommendedWorkflow')}</h4>
                 <ol className="list-decimal space-y-1 pl-5">
-                  <li>{t.podcasts.workflowStep1}</li>
-                  <li>{t.podcasts.workflowStep2}</li>
-                  <li>{t.podcasts.workflowStep3}</li>
+                  <li>{t('podcasts.workflowStep1')}</li>
+                  <li>{t('podcasts.workflowStep2')}</li>
+                  <li>{t('podcasts.workflowStep3')}</li>
                 </ol>
                 <p className="text-xs text-muted-foreground/80">
-                  {t.podcasts.workflowHint}
+                  {t('podcasts.workflowHint')}
                 </p>
               </div>
             </div>
@@ -90,9 +90,9 @@ export function TemplatesTab() {
       {hasError ? (
         <Alert variant="destructive">
           <AlertCircle className="h-4 w-4" />
-          <AlertTitle>{t.podcasts.failedToLoadTemplates}</AlertTitle>
+          <AlertTitle>{t('podcasts.failedToLoadTemplates')}</AlertTitle>
           <AlertDescription>
-            {t.podcasts.failedToLoadTemplatesDesc}
+            {t('podcasts.failedToLoadTemplatesDesc')}
           </AlertDescription>
         </Alert>
       ) : null}
@@ -100,7 +100,7 @@ export function TemplatesTab() {
       {isLoading ? (
         <div className="flex items-center gap-3 rounded-lg border border-dashed p-6 text-sm text-muted-foreground">
           <Loader2 className="h-4 w-4 animate-spin" />
-          {t.podcasts.loadingTemplates}
+          {t('podcasts.loadingTemplates')}
         </div>
       ) : (
         <div className="grid gap-6 lg:grid-cols-2">
diff --git a/frontend/src/components/podcasts/forms/EpisodeProfileFormDialog.tsx b/frontend/src/components/podcasts/forms/EpisodeProfileFormDialog.tsx
index 8df7143..80727dd 100644
--- a/frontend/src/components/podcasts/forms/EpisodeProfileFormDialog.tsx
+++ b/frontend/src/components/podcasts/forms/EpisodeProfileFormDialog.tsx
@@ -33,20 +33,20 @@ import {
 import { Textarea } from '@/components/ui/textarea'
 import { Separator } from '@/components/ui/separator'
 import { ModelSelector } from '@/components/common/ModelSelector'
-import { TranslationKeys } from '@/lib/locales'
+import type { TFunction } from 'i18next'
 
-const episodeProfileSchema = (t: TranslationKeys) => z.object({
-  name: z.string().min(1, t.podcasts.nameRequired || 'Name is required'),
+const episodeProfileSchema = (t: TFunction) => z.object({
+  name: z.string().min(1, t('podcasts.nameRequired') || 'Name is required'),
   description: z.string().optional(),
-  speaker_config: z.string().min(1, t.podcasts.profileRequired || 'Speaker profile is required'),
-  outline_llm: z.string().min(1, t.podcasts.outlineModelRequired || 'Outline model is required'),
-  transcript_llm: z.string().min(1, t.podcasts.transcriptModelRequired || 'Transcript model is required'),
+  speaker_config: z.string().min(1, t('podcasts.profileRequired') || 'Speaker profile is required'),
+  outline_llm: z.string().min(1, t('podcasts.outlineModelRequired') || 'Outline model is required'),
+  transcript_llm: z.string().min(1, t('podcasts.transcriptModelRequired') || 'Transcript model is required'),
   language: z.string().nullable().optional(),
-  default_briefing: z.string().min(1, t.podcasts.defaultBriefingRequired || 'Default briefing is required'),
+  default_briefing: z.string().min(1, t('podcasts.defaultBriefingRequired') || 'Default briefing is required'),
   num_segments: z.number()
-    .int(t.podcasts.segmentsInteger || 'Must be an integer')
-    .min(3, t.podcasts.segmentsMin || 'At least 3 segments')
-    .max(20, t.podcasts.segmentsMax || 'Maximum 20 segments'),
+    .int(t('podcasts.segmentsInteger') || 'Must be an integer')
+    .min(3, t('podcasts.segmentsMin') || 'At least 3 segments')
+    .max(20, t('podcasts.segmentsMax') || 'Maximum 20 segments'),
 })
 
 export type EpisodeProfileFormValues = z.infer<ReturnType<typeof episodeProfileSchema>>
@@ -145,18 +145,18 @@ export function EpisodeProfileFormDialog({
       <DialogContent className="max-h-[90vh] overflow-y-auto sm:max-w-2xl">
         <DialogHeader>
           <DialogTitle>
-            {isEdit ? t.podcasts.editEpisodeProfile : t.podcasts.createEpisodeProfile}
+            {isEdit ? t('podcasts.editEpisodeProfile') : t('podcasts.createEpisodeProfile')}
           </DialogTitle>
           <DialogDescription>
-            {t.podcasts.episodeProfileFormDesc}
+            {t('podcasts.episodeProfileFormDesc')}
           </DialogDescription>
         </DialogHeader>
 
         {speakerProfiles.length === 0 ? (
           <Alert className="bg-amber-50 text-amber-900 border-amber-200">
-            <AlertTitle>{t.podcasts.noSpeakerProfilesAvailable}</AlertTitle>
+            <AlertTitle>{t('podcasts.noSpeakerProfilesAvailable')}</AlertTitle>
             <AlertDescription>
-              {t.podcasts.noSpeakerProfilesDesc}
+              {t('podcasts.noSpeakerProfilesDesc')}
             </AlertDescription>
           </Alert>
         ) : null}
@@ -164,15 +164,15 @@ export function EpisodeProfileFormDialog({
         <form onSubmit={handleSubmit(onSubmit)} className="space-y-6 pt-2">
           <div className="grid gap-4 md:grid-cols-2">
             <div className="space-y-2">
-              <Label htmlFor="name">{t.podcasts.profileName} *</Label>
-              <Input id="name" placeholder={t.podcasts.profileNamePlaceholder} {...register('name')} />
+              <Label htmlFor="name">{t('podcasts.profileName')} *</Label>
+              <Input id="name" placeholder={t('podcasts.profileNamePlaceholder')} {...register('name')} />
               {errors.name ? (
                 <p className="text-xs text-red-600">{errors.name.message}</p>
               ) : null}
             </div>
 
             <div className="space-y-2">
-              <Label htmlFor="num_segments">{t.podcasts.segments} *</Label>
+              <Label htmlFor="num_segments">{t('podcasts.segments')} *</Label>
               <Input
                 id="num_segments"
                 type="number"
@@ -187,11 +187,11 @@ export function EpisodeProfileFormDialog({
             </div>
 
             <div className="md:col-span-2 space-y-2">
-              <Label htmlFor="description">{t.common.description}</Label>
+              <Label htmlFor="description">{t('common.description')}</Label>
               <Textarea
                 id="description"
                 rows={3}
-                placeholder={t.podcasts.descriptionPlaceholder}
+                placeholder={t('podcasts.descriptionPlaceholder')}
                 {...register('description')}
                 autoComplete="off"
               />
@@ -201,7 +201,7 @@ export function EpisodeProfileFormDialog({
           <div className="space-y-4">
             <div>
               <h3 className="text-sm font-semibold uppercase tracking-wide text-muted-foreground">
-                {t.podcasts.speakerConfig}
+                {t('podcasts.speakerConfig')}
               </h3>
               <Separator className="mt-2" />
             </div>
@@ -210,12 +210,12 @@ export function EpisodeProfileFormDialog({
               name="speaker_config"
               render={({ field }) => (
                 <div className="space-y-2">
-                  <Label htmlFor="speaker_config">{t.podcasts.speakerProfile} *</Label>
+                  <Label htmlFor="speaker_config">{t('podcasts.speakerProfile')} *</Label>
                   <Select value={field.value} onValueChange={field.onChange}>
                     <SelectTrigger id="speaker_config">
-                      <SelectValue placeholder={t.podcasts.selectSpeakerProfile} />
+                      <SelectValue placeholder={t('podcasts.selectSpeakerProfile')} />
                     </SelectTrigger>
-                    <SelectContent title={t.podcasts.speakerProfile}>
+                    <SelectContent title={t('podcasts.speakerProfile')}>
                       {speakerProfiles.map((profile) => (
                         <SelectItem key={profile.id} value={profile.name}>
                           {profile.name}
@@ -236,7 +236,7 @@ export function EpisodeProfileFormDialog({
           <div className="space-y-4">
             <div>
               <h3 className="text-sm font-semibold uppercase tracking-wide text-muted-foreground">
-                {t.podcasts.outlineGeneration}
+                {t('podcasts.outlineGeneration')}
               </h3>
               <Separator className="mt-2" />
             </div>
@@ -246,11 +246,11 @@ export function EpisodeProfileFormDialog({
               render={({ field }) => (
                 <div>
                   <ModelSelector
-                    label={`${t.podcasts.outlineModel} *`}
+                    label={`${t('podcasts.outlineModel')} *`}
                     modelType="language"
                     value={field.value}
                     onChange={field.onChange}
-                    placeholder={t.podcasts.selectOutlineModel}
+                    placeholder={t('podcasts.selectOutlineModel')}
                   />
                   {errors.outline_llm ? (
                     <p className="text-xs text-red-600 mt-1">
@@ -265,7 +265,7 @@ export function EpisodeProfileFormDialog({
           <div className="space-y-4">
             <div>
               <h3 className="text-sm font-semibold uppercase tracking-wide text-muted-foreground">
-                {t.podcasts.transcriptGeneration}
+                {t('podcasts.transcriptGeneration')}
               </h3>
               <Separator className="mt-2" />
             </div>
@@ -275,11 +275,11 @@ export function EpisodeProfileFormDialog({
               render={({ field }) => (
                 <div>
                   <ModelSelector
-                    label={`${t.podcasts.transcriptModel} *`}
+                    label={`${t('podcasts.transcriptModel')} *`}
                     modelType="language"
                     value={field.value}
                     onChange={field.onChange}
-                    placeholder={t.podcasts.selectTranscriptModel}
+                    placeholder={t('podcasts.selectTranscriptModel')}
                   />
                   {errors.transcript_llm ? (
                     <p className="text-xs text-red-600 mt-1">
@@ -294,7 +294,7 @@ export function EpisodeProfileFormDialog({
           <div className="space-y-4">
             <div>
               <h3 className="text-sm font-semibold uppercase tracking-wide text-muted-foreground">
-                {t.podcasts.podcastLanguage}
+                {t('podcasts.podcastLanguage')}
               </h3>
               <Separator className="mt-2" />
             </div>
@@ -303,15 +303,15 @@ export function EpisodeProfileFormDialog({
               name="language"
               render={({ field }) => (
                 <div className="space-y-2">
-                  <Label htmlFor="language">{t.podcasts.language}</Label>
+                  <Label htmlFor="language">{t('podcasts.language')}</Label>
                   <Select
                     value={field.value ?? ''}
                     onValueChange={(v) => field.onChange(v || null)}
                   >
                     <SelectTrigger id="language">
-                      <SelectValue placeholder={t.podcasts.languagePlaceholder} />
+                      <SelectValue placeholder={t('podcasts.languagePlaceholder')} />
                     </SelectTrigger>
-                    <SelectContent title={t.podcasts.language}>
+                    <SelectContent title={t('podcasts.language')}>
                       {languages.map((lang) => (
                         <SelectItem key={lang.code} value={lang.code}>
                           {lang.name} ({lang.code})
@@ -325,11 +325,11 @@ export function EpisodeProfileFormDialog({
           </div>
 
           <div className="space-y-2">
-            <Label htmlFor="default_briefing">{t.podcasts.defaultBriefingTitle} *</Label>
+            <Label htmlFor="default_briefing">{t('podcasts.defaultBriefingTitle')} *</Label>
             <Textarea
               id="default_briefing"
               rows={6}
-              placeholder={t.podcasts.defaultBriefingPlaceholder}
+              placeholder={t('podcasts.defaultBriefingPlaceholder')}
               {...register('default_briefing')}
             />
             {errors.default_briefing ? (
@@ -345,14 +345,14 @@ export function EpisodeProfileFormDialog({
               variant="outline"
               onClick={() => onOpenChange(false)}
             >
-              {t.common.cancel}
+              {t('common.cancel')}
             </Button>
             <Button type="submit" disabled={disableSubmit}>
               {isSubmitting
-                ? t.common.saving
+                ? t('common.saving')
                 : isEdit
-                  ? t.common.saveChanges
-                  : t.podcasts.createProfile}
+                  ? t('common.saveChanges')
+                  : t('podcasts.createProfile')}
             </Button>
           </div>
         </form>
diff --git a/frontend/src/components/podcasts/forms/SpeakerProfileFormDialog.tsx b/frontend/src/components/podcasts/forms/SpeakerProfileFormDialog.tsx
index efe6658..0627cd8 100644
--- a/frontend/src/components/podcasts/forms/SpeakerProfileFormDialog.tsx
+++ b/frontend/src/components/podcasts/forms/SpeakerProfileFormDialog.tsx
@@ -26,25 +26,25 @@ import { Textarea } from '@/components/ui/textarea'
 import { Separator } from '@/components/ui/separator'
 import { ModelSelector } from '@/components/common/ModelSelector'
 
-import { TranslationKeys } from '@/lib/locales'
+import type { TFunction } from 'i18next'
 import { useTranslation } from '@/lib/hooks/use-translation'
 
-const speakerConfigSchema = (t: TranslationKeys) => z.object({
-  name: z.string().min(1, t.common.nameRequired || 'Name is required'),
-  voice_id: z.string().min(1, t.podcasts.voiceIdRequired || 'Voice ID is required'),
-  backstory: z.string().min(1, t.podcasts.backstoryRequired || 'Backstory is required'),
-  personality: z.string().min(1, t.podcasts.personalityRequired || 'Personality is required'),
+const speakerConfigSchema = (t: TFunction) => z.object({
+  name: z.string().min(1, t('common.nameRequired') || 'Name is required'),
+  voice_id: z.string().min(1, t('podcasts.voiceIdRequired') || 'Voice ID is required'),
+  backstory: z.string().min(1, t('podcasts.backstoryRequired') || 'Backstory is required'),
+  personality: z.string().min(1, t('podcasts.personalityRequired') || 'Personality is required'),
   voice_model: z.string().nullable().optional(),
 })
 
-const speakerProfileSchema = (t: TranslationKeys) => z.object({
-  name: z.string().min(1, t.common.nameRequired || 'Name is required'),
+const speakerProfileSchema = (t: TFunction) => z.object({
+  name: z.string().min(1, t('common.nameRequired') || 'Name is required'),
   description: z.string().optional(),
-  voice_model: z.string().min(1, t.podcasts.voiceModelRequired || 'Voice model is required'),
+  voice_model: z.string().min(1, t('podcasts.voiceModelRequired') || 'Voice model is required'),
   speakers: z
     .array(speakerConfigSchema(t))
-    .min(1, t.podcasts.speakerCountMin || 'At least one speaker is required')
-    .max(4, t.podcasts.speakerCountMax || 'You can configure up to 4 speakers'),
+    .min(1, t('podcasts.speakerCountMin') || 'At least one speaker is required')
+    .max(4, t('podcasts.speakerCountMax') || 'You can configure up to 4 speakers'),
 })
 
 export type SpeakerProfileFormValues = z.infer<ReturnType<typeof speakerProfileSchema>>
@@ -157,29 +157,29 @@ export function SpeakerProfileFormDialog({
       <DialogContent className="max-h-[90vh] overflow-y-auto sm:max-w-2xl">
         <DialogHeader>
           <DialogTitle>
-            {isEdit ? t.podcasts.editSpeakerProfile : t.podcasts.createSpeakerProfile}
+            {isEdit ? t('podcasts.editSpeakerProfile') : t('podcasts.createSpeakerProfile')}
           </DialogTitle>
           <DialogDescription>
-            {t.podcasts.speakerProfileFormDesc}
+            {t('podcasts.speakerProfileFormDesc')}
           </DialogDescription>
         </DialogHeader>
 
         <form onSubmit={handleSubmit(onSubmit)} className="space-y-6 pt-2">
           <div className="grid gap-4 md:grid-cols-2">
             <div className="space-y-2">
-              <Label htmlFor="name">{t.podcasts.profileName} *</Label>
-              <Input id="name" placeholder={t.podcasts.profileNamePlaceholder} {...register('name')} />
+              <Label htmlFor="name">{t('podcasts.profileName')} *</Label>
+              <Input id="name" placeholder={t('podcasts.profileNamePlaceholder')} {...register('name')} />
               {errors.name ? (
                 <p className="text-xs text-red-600">{errors.name.message}</p>
               ) : null}
             </div>
 
             <div className="space-y-2">
-              <Label htmlFor="description">{t.common.description}</Label>
+              <Label htmlFor="description">{t('common.description')}</Label>
               <Textarea
                 id="description"
                 rows={3}
-                placeholder={t.podcasts.descriptionPlaceholder}
+                placeholder={t('podcasts.descriptionPlaceholder')}
                 {...register('description')}
               />
             </div>
@@ -188,7 +188,7 @@ export function SpeakerProfileFormDialog({
           <div className="space-y-4">
             <div>
               <h3 className="text-sm font-semibold uppercase tracking-wide text-muted-foreground">
-                {t.podcasts.voiceModel}
+                {t('podcasts.voiceModel')}
               </h3>
               <Separator className="mt-2" />
             </div>
@@ -198,11 +198,11 @@ export function SpeakerProfileFormDialog({
               render={({ field }) => (
                 <div>
                   <ModelSelector
-                    label={`${t.podcasts.voiceModel} *`}
+                    label={`${t('podcasts.voiceModel')} *`}
                     modelType="text_to_speech"
                     value={field.value}
                     onChange={field.onChange}
-                    placeholder={t.podcasts.selectVoiceModel}
+                    placeholder={t('podcasts.selectVoiceModel')}
                   />
                   {errors.voice_model ? (
                     <p className="text-xs text-red-600 mt-1">
@@ -218,10 +218,10 @@ export function SpeakerProfileFormDialog({
             <div className="flex items-center justify-between">
               <div>
                 <h3 className="text-sm font-semibold uppercase tracking-wide text-muted-foreground">
-                  {t.podcasts.speakers}
+                  {t('podcasts.speakers')}
                 </h3>
                 <p className="text-xs text-muted-foreground">
-                  {t.podcasts.speakersDesc}
+                  {t('podcasts.speakersDesc')}
                 </p>
               </div>
               <Button
@@ -231,7 +231,7 @@ export function SpeakerProfileFormDialog({
                 onClick={() => append({ ...EMPTY_SPEAKER })}
                 disabled={fields.length >= 4}
               >
-                <Plus className="mr-2 h-4 w-4" /> {t.podcasts.addSpeaker}
+                <Plus className="mr-2 h-4 w-4" /> {t('podcasts.addSpeaker')}
               </Button>
             </div>
             <Separator />
@@ -240,7 +240,7 @@ export function SpeakerProfileFormDialog({
               <div key={field.id} className="rounded-lg border p-4 space-y-4">
                 <div className="flex items-center justify-between">
                   <p className="text-sm font-semibold">
-                    {t.podcasts.speakerNumber.replace('{number}', (index + 1).toString())}
+                    {t('podcasts.speakerNumber').replace('{number}', (index + 1).toString())}
                   </p>
                   <Button
                     type="button"
@@ -250,16 +250,16 @@ export function SpeakerProfileFormDialog({
                     disabled={fields.length <= 1}
                     className="text-destructive"
                   >
-                    <Trash2 className="mr-2 h-4 w-4" /> {t.common.remove}
+                    <Trash2 className="mr-2 h-4 w-4" /> {t('common.remove')}
                   </Button>
                 </div>
                 <div className="grid gap-4 md:grid-cols-2">
                   <div className="space-y-2">
-                    <Label htmlFor={`speaker-name-${index}`}>{t.common.name} *</Label>
+                    <Label htmlFor={`speaker-name-${index}`}>{t('common.name')} *</Label>
                     <Input
                       id={`speaker-name-${index}`}
                       {...register(`speakers.${index}.name` as const)}
-                      placeholder={t.podcasts.hostPlaceholder.replace('{number}', (index + 1).toString())}
+                      placeholder={t('podcasts.hostPlaceholder').replace('{number}', (index + 1).toString())}
                       autoComplete="off"
                     />
                     {errors.speakers?.[index]?.name ? (
@@ -269,7 +269,7 @@ export function SpeakerProfileFormDialog({
                     ) : null}
                   </div>
                   <div className="space-y-2">
-                    <Label htmlFor={`speaker-voice-${index}`}>{t.podcasts.voiceId} *</Label>
+                    <Label htmlFor={`speaker-voice-${index}`}>{t('podcasts.voiceId')} *</Label>
                     <Input
                       id={`speaker-voice-${index}`}
                       {...register(`speakers.${index}.voice_id` as const)}
@@ -284,11 +284,11 @@ export function SpeakerProfileFormDialog({
                   </div>
                 </div>
                 <div className="space-y-2">
-                  <Label htmlFor={`speaker-backstory-${index}`}>{t.podcasts.backstory} *</Label>
+                  <Label htmlFor={`speaker-backstory-${index}`}>{t('podcasts.backstory')} *</Label>
                   <Textarea
                     id={`speaker-backstory-${index}`}
                     rows={3}
-                    placeholder={t.podcasts.backstoryPlaceholder}
+                    placeholder={t('podcasts.backstoryPlaceholder')}
                     {...register(`speakers.${index}.backstory` as const)}
                     autoComplete="off"
                   />
@@ -299,11 +299,11 @@ export function SpeakerProfileFormDialog({
                   ) : null}
                 </div>
                 <div className="space-y-2">
-                  <Label htmlFor={`speaker-personality-${index}`}>{t.podcasts.personality} *</Label>
+                  <Label htmlFor={`speaker-personality-${index}`}>{t('podcasts.personality')} *</Label>
                   <Textarea
                     id={`speaker-personality-${index}`}
                     rows={3}
-                    placeholder={t.podcasts.personalityPlaceholder}
+                    placeholder={t('podcasts.personalityPlaceholder')}
                     {...register(`speakers.${index}.personality` as const)}
                     autoComplete="off"
                   />
@@ -319,11 +319,11 @@ export function SpeakerProfileFormDialog({
                   render={({ field: vmField }) => (
                     <div>
                       <ModelSelector
-                        label={t.podcasts.perSpeakerTtsOverride}
+                        label={t('podcasts.perSpeakerTtsOverride')}
                         modelType="text_to_speech"
                         value={vmField.value ?? ''}
                         onChange={(v) => vmField.onChange(v || null)}
-                        placeholder={t.podcasts.useProfileDefault}
+                        placeholder={t('podcasts.useProfileDefault')}
                       />
                     </div>
                   )}
@@ -342,14 +342,14 @@ export function SpeakerProfileFormDialog({
               variant="outline"
               onClick={() => onOpenChange(false)}
             >
-              {t.common.cancel}
+              {t('common.cancel')}
             </Button>
             <Button type="submit" disabled={disableSubmit}>
               {isSubmitting
-                ? t.common.saving
+                ? t('common.saving')
                 : isEdit
-                  ? t.common.saveChanges
-                  : t.podcasts.createProfile}
+                  ? t('common.saveChanges')
+                  : t('podcasts.createProfile')}
             </Button>
           </div>
         </form>
diff --git a/frontend/src/components/search/AdvancedModelsDialog.tsx b/frontend/src/components/search/AdvancedModelsDialog.tsx
index b9ede6f..23bc772 100644
--- a/frontend/src/components/search/AdvancedModelsDialog.tsx
+++ b/frontend/src/components/search/AdvancedModelsDialog.tsx
@@ -59,44 +59,44 @@ export function AdvancedModelsDialog({
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="sm:max-w-[500px]">
         <DialogHeader>
-          <DialogTitle>{t.searchPage.advancedModelTitle}</DialogTitle>
+          <DialogTitle>{t('searchPage.advancedModelTitle')}</DialogTitle>
           <DialogDescription>
-            {t.searchPage.advancedModelDesc}
+            {t('searchPage.advancedModelDesc')}
           </DialogDescription>
         </DialogHeader>
 
         <div className="space-y-4 py-4">
           <ModelSelector
-            label={t.searchPage.strategyModel}
+            label={t('searchPage.strategyModel')}
             modelType="language"
             value={strategyModel}
             onChange={setStrategyModel}
-            placeholder={t.searchPage.selectStrategyPlaceholder}
+            placeholder={t('searchPage.selectStrategyPlaceholder')}
           />
 
           <ModelSelector
-            label={t.searchPage.answerModel}
+            label={t('searchPage.answerModel')}
             modelType="language"
             value={answerModel}
             onChange={setAnswerModel}
-            placeholder={t.searchPage.selectAnswerPlaceholder}
+            placeholder={t('searchPage.selectAnswerPlaceholder')}
           />
 
           <ModelSelector
-            label={t.searchPage.finalAnswerModel}
+            label={t('searchPage.finalAnswerModel')}
             modelType="language"
             value={finalAnswerModel}
             onChange={setFinalAnswerModel}
-            placeholder={t.searchPage.selectFinalPlaceholder}
+            placeholder={t('searchPage.selectFinalPlaceholder')}
           />
         </div>
 
         <DialogFooter>
           <Button variant="outline" onClick={() => onOpenChange(false)}>
-            {t.common.cancel}
+            {t('common.cancel')}
           </Button>
           <Button onClick={handleSave}>
-            {t.searchPage.saveChanges}
+            {t('searchPage.saveChanges')}
           </Button>
         </DialogFooter>
       </DialogContent>
diff --git a/frontend/src/components/search/SaveToNotebooksDialog.tsx b/frontend/src/components/search/SaveToNotebooksDialog.tsx
index 2fb92ca..93de2a7 100644
--- a/frontend/src/components/search/SaveToNotebooksDialog.tsx
+++ b/frontend/src/components/search/SaveToNotebooksDialog.tsx
@@ -45,7 +45,7 @@ export function SaveToNotebooksDialog({
 
   const handleSave = async () => {
     if (selectedNotebooks.length === 0) {
-      toast.error(t.searchPage.selectNotebook)
+      toast.error(t('searchPage.selectNotebook'))
       return
     }
 
@@ -60,11 +60,11 @@ export function SaveToNotebooksDialog({
         })
       }
 
-      toast.success(t.searchPage.saveSuccess)
+      toast.success(t('searchPage.saveSuccess'))
       setSelectedNotebooks([])
       onOpenChange(false)
     } catch {
-      toast.error(t.searchPage.saveError)
+      toast.error(t('searchPage.saveError'))
     }
   }
 
@@ -78,9 +78,9 @@ export function SaveToNotebooksDialog({
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="sm:max-w-[500px]">
         <DialogHeader>
-          <DialogTitle>{t.searchPage.saveToNotebooks}</DialogTitle>
+          <DialogTitle>{t('searchPage.saveToNotebooks')}</DialogTitle>
           <DialogDescription>
-            {t.searchPage.selectNotebook}
+            {t('searchPage.selectNotebook')}
           </DialogDescription>
         </DialogHeader>
 
@@ -94,14 +94,14 @@ export function SaveToNotebooksDialog({
               items={notebookItems}
               selectedIds={selectedNotebooks}
               onToggle={handleToggle}
-              emptyMessage={t.sources.noNotebooksFound}
+              emptyMessage={t('sources.noNotebooksFound')}
             />
           )}
         </div>
 
         <DialogFooter>
           <Button variant="outline" onClick={() => onOpenChange(false)}>
-            {t.common.cancel}
+            {t('common.cancel')}
           </Button>
           <Button
             onClick={handleSave}
@@ -110,10 +110,10 @@ export function SaveToNotebooksDialog({
             {createNote.isPending ? (
               <>
                 <LoadingSpinner size="sm" className="mr-2" />
-                {t.searchPage.saving}
+                {t('searchPage.saving')}
               </>
             ) : (
-              t.searchPage.saveToNotebook
+              t('searchPage.saveToNotebook')
             )}
           </Button>
         </DialogFooter>
diff --git a/frontend/src/components/search/StreamingResponse.tsx b/frontend/src/components/search/StreamingResponse.tsx
index bc1cc35..d53f99f 100644
--- a/frontend/src/components/search/StreamingResponse.tsx
+++ b/frontend/src/components/search/StreamingResponse.tsx
@@ -46,7 +46,7 @@ export function StreamingResponse({
       // This try-catch is here for future enhancements or unexpected errors.
     } catch {
       const typeLabel = type === 'source_insight' ? 'insight' : type
-      toast.error(t.common.itemNotFound.replace('{type}', typeLabel))
+      toast.error(t('common.itemNotFound').replace('{type}', typeLabel))
     }
   }
 
@@ -58,7 +58,7 @@ export function StreamingResponse({
     <div
       className="space-y-4 mt-6 max-h-[60vh] overflow-y-auto pr-2"
       role="region"
-      aria-label={t.common.accessibility.askResponse}
+      aria-label={t('common.accessibility.askResponse')}
       aria-live="polite"
       aria-busy={isStreaming}
     >
@@ -70,7 +70,7 @@ export function StreamingResponse({
               <CollapsibleTrigger className="flex items-center justify-between w-full hover:opacity-80">
                 <CardTitle className="text-base flex items-center gap-2">
                   <Sparkles className="h-4 w-4 text-primary" />
-                  {t.common.strategy}
+                  {t('common.strategy')}
                 </CardTitle>
                 <ChevronDown className={`h-4 w-4 transition-transform ${strategyOpen ? 'rotate-180' : ''}`} />
               </CollapsibleTrigger>
@@ -78,12 +78,12 @@ export function StreamingResponse({
             <CollapsibleContent>
               <CardContent className="space-y-3 pt-0">
                 <div>
-                  <p className="text-sm text-muted-foreground mb-2">{t.common.reasoning}:</p>
+                  <p className="text-sm text-muted-foreground mb-2">{t('common.reasoning')}:</p>
                   <p className="text-sm">{strategy.reasoning}</p>
                 </div>
                 {strategy.searches.length > 0 && (
                   <div>
-                    <p className="text-sm text-muted-foreground mb-2">{t.common.searchTerms}:</p>
+                    <p className="text-sm text-muted-foreground mb-2">{t('common.searchTerms')}:</p>
                     <div className="space-y-2">
                       {strategy.searches.map((search, i) => (
                         <div key={i} className="flex items-start gap-2">
@@ -111,7 +111,7 @@ export function StreamingResponse({
               <CollapsibleTrigger className="flex items-center justify-between w-full hover:opacity-80">
                 <CardTitle className="text-base flex items-center gap-2">
                   <Lightbulb className="h-4 w-4 text-primary" />
-                  {t.common.individualAnswers.replace('{count}', answers.length.toString())}
+                  {t('common.individualAnswers').replace('{count}', answers.length.toString())}
                 </CardTitle>
                 <ChevronDown className={`h-4 w-4 transition-transform ${answersOpen ? 'rotate-180' : ''}`} />
               </CollapsibleTrigger>
@@ -135,7 +135,7 @@ export function StreamingResponse({
           <CardHeader>
             <CardTitle className="text-base flex items-center gap-2">
               <CheckCircle className="h-4 w-4 text-primary" />
-              {t.common.finalAnswer}
+              {t('common.finalAnswer')}
             </CardTitle>
           </CardHeader>
           <CardContent>
@@ -151,7 +151,7 @@ export function StreamingResponse({
       {isStreaming && !finalAnswer && (
         <div className="flex items-center gap-2 text-sm text-muted-foreground">
           <LoadingSpinner size="sm" />
-          <span>{t.searchPage.processingQuestion}</span>
+          <span>{t('searchPage.processingQuestion')}</span>
         </div>
       )}
     </div>
diff --git a/frontend/src/components/settings/EmbeddingModelChangeDialog.tsx b/frontend/src/components/settings/EmbeddingModelChangeDialog.tsx
index b13b93a..a0969bb 100644
--- a/frontend/src/components/settings/EmbeddingModelChangeDialog.tsx
+++ b/frontend/src/components/settings/EmbeddingModelChangeDialog.tsx
@@ -57,49 +57,49 @@ export function EmbeddingModelChangeDialog({
         <AlertDialogHeader>
           <div className="flex items-center gap-2 mb-2">
             <AlertTriangle className="h-5 w-5 text-yellow-500" />
-            <AlertDialogTitle>{t.models.embeddingChangeTitle}</AlertDialogTitle>
+            <AlertDialogTitle>{t('models.embeddingChangeTitle')}</AlertDialogTitle>
           </div>
           <AlertDialogDescription asChild>
             <div className="space-y-3 text-base text-muted-foreground">
               <p>
-                {t.models.embeddingChangeConfirm
+                {t('models.embeddingChangeConfirm')
                   .replace('{from}', oldModelName || '...')
                   .replace('{to}', newModelName || '...')}
               </p>
 
               <div className="bg-muted p-4 rounded-md space-y-2">
-                <p className="font-semibold text-foreground">{t.models.rebuildRequired}</p>
+                <p className="font-semibold text-foreground">{t('models.rebuildRequired')}</p>
                 <p className="text-sm">
-                  {t.models.rebuildReason}
+                  {t('models.rebuildReason')}
                 </p>
               </div>
 
               <div className="space-y-2 text-sm">
-                <p className="font-medium text-foreground">{t.models.whatHappensNext}</p>
+                <p className="font-medium text-foreground">{t('models.whatHappensNext')}</p>
                 <ul className="list-disc list-inside space-y-1 ml-2">
-                  <li>{t.models.step1}</li>
-                  <li>{t.models.step2}</li>
-                  <li>{t.models.step3}</li>
-                  <li>{t.models.step4}</li>
+                  <li>{t('models.step1')}</li>
+                  <li>{t('models.step2')}</li>
+                  <li>{t('models.step3')}</li>
+                  <li>{t('models.step4')}</li>
                 </ul>
               </div>
 
               <p className="text-sm font-medium text-foreground">
-                {t.models.proceedToRebuildPrompt}
+                {t('models.proceedToRebuildPrompt')}
               </p>
             </div>
           </AlertDialogDescription>
         </AlertDialogHeader>
         <AlertDialogFooter className="flex-col sm:flex-row gap-2">
           <AlertDialogCancel disabled={isConfirming}>
-            {t.common.cancel}
+            {t('common.cancel')}
           </AlertDialogCancel>
           <Button
             variant="outline"
             onClick={handleConfirmOnly}
             disabled={isConfirming}
           >
-            {t.models.changeModelOnly}
+            {t('models.changeModelOnly')}
           </Button>
           <AlertDialogAction
             onClick={handleConfirmAndRebuild}
@@ -107,7 +107,7 @@ export function EmbeddingModelChangeDialog({
             className="bg-primary"
           >
             <ExternalLink className="mr-2 h-4 w-4" />
-            {t.models.changeAndRebuild}
+            {t('models.changeAndRebuild')}
           </AlertDialogAction>
         </AlertDialogFooter>
       </AlertDialogContent>
diff --git a/frontend/src/components/settings/MigrationBanner.tsx b/frontend/src/components/settings/MigrationBanner.tsx
index e23bcd5..c7bb912 100644
--- a/frontend/src/components/settings/MigrationBanner.tsx
+++ b/frontend/src/components/settings/MigrationBanner.tsx
@@ -22,11 +22,11 @@ export function MigrationBanner({ providersToMigrate }: MigrationBannerProps) {
     <Alert className="border-amber-500/50 bg-amber-50 dark:bg-amber-950/20">
       <AlertTriangle className="h-4 w-4 text-amber-600 dark:text-amber-400" />
       <AlertTitle className="text-amber-800 dark:text-amber-200">
-        {t.apiKeys.migrationAvailable}
+        {t('apiKeys.migrationAvailable')}
       </AlertTitle>
       <AlertDescription className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
         <span className="text-amber-700 dark:text-amber-300">
-          {t.apiKeys.migrationDescription.replace('{count}', providersToMigrate.length.toString())}
+          {t('apiKeys.migrationDescription').replace('{count}', providersToMigrate.length.toString())}
         </span>
         <Button
           variant="outline"
@@ -38,11 +38,11 @@ export function MigrationBanner({ providersToMigrate }: MigrationBannerProps) {
           {migrate.isPending ? (
             <>
               <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-              {t.apiKeys.migrating}
+              {t('apiKeys.migrating')}
             </>
           ) : (
             <>
-              {t.apiKeys.migrateToDatabase}
+              {t('apiKeys.migrateToDatabase')}
               <ArrowRight className="ml-2 h-4 w-4" />
             </>
           )}
diff --git a/frontend/src/components/settings/ModelTestResultDialog.tsx b/frontend/src/components/settings/ModelTestResultDialog.tsx
index 10be66a..153a610 100644
--- a/frontend/src/components/settings/ModelTestResultDialog.tsx
+++ b/frontend/src/components/settings/ModelTestResultDialog.tsx
@@ -37,7 +37,7 @@ export function ModelTestResultDialog({
             ) : (
               <X className="h-5 w-5 text-destructive" />
             )}
-            {result.success ? t.models.testModelSuccess : t.models.testModelFailed}
+            {result.success ? t('models.testModelSuccess') : t('models.testModelFailed')}
           </DialogTitle>
         </DialogHeader>
 
@@ -54,7 +54,7 @@ export function ModelTestResultDialog({
 
         <DialogFooter>
           <Button variant="outline" onClick={() => onOpenChange(false)}>
-            {t.common.done}
+            {t('common.done')}
           </Button>
         </DialogFooter>
       </DialogContent>
diff --git a/frontend/src/components/source/ChatPanel.tsx b/frontend/src/components/source/ChatPanel.tsx
index 058699d..3908082 100644
--- a/frontend/src/components/source/ChatPanel.tsx
+++ b/frontend/src/components/source/ChatPanel.tsx
@@ -92,7 +92,7 @@ export function ChatPanel({
       // The modal component itself will handle displaying "not found" states.
       // This try-catch is here for future enhancements or unexpected errors.
     } catch {
-      toast.error(t.common.noResults)
+      toast.error(t('common.noResults'))
     }
   }
 
@@ -130,7 +130,7 @@ export function ChatPanel({
         <div className="flex items-center justify-between">
           <CardTitle className="flex items-center gap-2">
             <Bot className="h-5 w-5" />
-            {title || (contextType === 'source' ? t.chat.chatWith.replace('{name}', t.navigation.sources) : t.chat.chatWith.replace('{name}', t.common.notebook))}
+            {title || (contextType === 'source' ? t('chat.chatWith').replace('{name}', t('navigation.sources')) : t('chat.chatWith').replace('{name}', t('common.notebook')))}
           </CardTitle>
           {onSelectSession && onCreateSession && onDeleteSession && (
             <Dialog open={sessionManagerOpen} onOpenChange={setSessionManagerOpen}>
@@ -142,10 +142,10 @@ export function ChatPanel({
                 disabled={loadingSessions}
               >
                 <Clock className="h-4 w-4" />
-                <span className="text-xs">{t.chat.sessions}</span>
+                <span className="text-xs">{t('chat.sessions')}</span>
               </Button>
               <DialogContent className="sm:max-w-[420px] p-0 overflow-hidden">
-                <DialogTitle className="sr-only">{t.chat.sessionsTitle}</DialogTitle>
+                <DialogTitle className="sr-only">{t('chat.sessionsTitle')}</DialogTitle>
                 <SessionManager
                   sessions={sessions}
                   currentSessionId={currentSessionId ?? null}
@@ -170,9 +170,9 @@ export function ChatPanel({
               <div className="text-center text-muted-foreground py-8">
                 <Bot className="h-12 w-12 mx-auto mb-4 opacity-50" />
                 <p className="text-sm">
-                  {t.chat.startConversation.replace('{type}', contextType === 'source' ? t.navigation.sources : t.common.notebook)}
+                  {t('chat.startConversation').replace('{type}', contextType === 'source' ? t('navigation.sources') : t('common.notebook'))}
                 </p>
-                <p className="text-xs mt-2">{t.chat.askQuestions}</p>
+                <p className="text-xs mt-2">{t('chat.askQuestions')}</p>
               </div>
             ) : (
               messages.map((message) => (
@@ -246,19 +246,19 @@ export function ChatPanel({
               {contextIndicators.sources?.length > 0 && (
                 <Badge variant="outline" className="gap-1">
                   <FileText className="h-3 w-3" />
-                  {contextIndicators.sources.length} {t.navigation.sources}
+                  {contextIndicators.sources.length} {t('navigation.sources')}
                 </Badge>
               )}
               {contextIndicators.insights?.length > 0 && (
                 <Badge variant="outline" className="gap-1">
                   <Lightbulb className="h-3 w-3" />
-                  {contextIndicators.insights.length} {contextIndicators.insights.length === 1 ? t.common.insight : t.common.insights}
+                  {contextIndicators.insights.length} {contextIndicators.insights.length === 1 ? t('common.insight') : t('common.insights')}
                 </Badge>
               )}
               {contextIndicators.notes?.length > 0 && (
                 <Badge variant="outline" className="gap-1">
                   <StickyNote className="h-3 w-3" />
-                  {contextIndicators.notes.length} {contextIndicators.notes.length === 1 ? t.common.note : t.common.notes}
+                  {contextIndicators.notes.length} {contextIndicators.notes.length === 1 ? t('common.note') : t('common.notes')}
                 </Badge>
               )}
             </div>
@@ -281,7 +281,7 @@ export function ChatPanel({
           {/* Model selector */}
           {onModelChange && (
             <div className="flex items-center justify-between">
-              <span className="text-xs text-muted-foreground">{t.chat.model}</span>
+              <span className="text-xs text-muted-foreground">{t('chat.model')}</span>
               <ModelSelector
                 currentModel={modelOverride}
                 onModelChange={onModelChange}
@@ -298,7 +298,7 @@ export function ChatPanel({
               value={input}
               onChange={(e) => setInput(e.target.value)}
               onKeyDown={handleKeyDown}
-              placeholder={`${t.chat.sendPlaceholder} (${t.chat.pressToSend.replace('{key}', keyHint)})`}
+              placeholder={`${t('chat.sendPlaceholder')} (${t('chat.pressToSend').replace('{key}', keyHint)})`}
               disabled={isStreaming}
               className="flex-1 min-h-[40px] max-h-[100px] resize-none py-2 px-3 min-w-0"
               rows={1}
@@ -334,7 +334,7 @@ function AIMessageContent({
 }) {
   const { t } = useTranslation()
   // Convert references to compact markdown with numbered citations
-  const markdownWithCompactRefs = convertReferencesToCompactMarkdown(content, t.common.references)
+  const markdownWithCompactRefs = convertReferencesToCompactMarkdown(content, t('common.references'))
 
   // Create custom link component for compact references
   const LinkComponent = createCompactReferenceLinkComponent(onReferenceClick)
diff --git a/frontend/src/components/source/MessageActions.tsx b/frontend/src/components/source/MessageActions.tsx
index 8ccb3f6..a878f4c 100644
--- a/frontend/src/components/source/MessageActions.tsx
+++ b/frontend/src/components/source/MessageActions.tsx
@@ -20,7 +20,7 @@ export function MessageActions({ content, notebookId }: MessageActionsProps) {
 
   const handleSaveToNote = () => {
     if (!notebookId) {
-      toast.error(t.sources.cannotSaveNoteNoNotebook)
+      toast.error(t('sources.cannotSaveNoteNoNotebook'))
       return
     }
 
@@ -37,7 +37,7 @@ export function MessageActions({ content, notebookId }: MessageActionsProps) {
       // Try modern clipboard API first
       if (navigator.clipboard && navigator.clipboard.writeText) {
         await navigator.clipboard.writeText(content)
-        toast.success(t.common.copyToClipboard)
+        toast.success(t('common.copyToClipboard'))
         setCopySuccess(true)
         setTimeout(() => setCopySuccess(false), 2000)
       } else {
@@ -53,18 +53,18 @@ export function MessageActions({ content, notebookId }: MessageActionsProps) {
 
         try {
           document.execCommand('copy')
-          toast.success(t.common.copyToClipboard)
+          toast.success(t('common.copyToClipboard'))
           setCopySuccess(true)
           setTimeout(() => setCopySuccess(false), 2000)
         } catch {
-          toast.error(t.common.error)
+          toast.error(t('common.error'))
         }
 
         document.body.removeChild(textArea)
       }
     } catch (err) {
       console.error('Failed to copy to clipboard:', err)
-      toast.error(t.common.error)
+      toast.error(t('common.error'))
     }
   }
 
@@ -89,7 +89,7 @@ export function MessageActions({ content, notebookId }: MessageActionsProps) {
               </Button>
             </TooltipTrigger>
             <TooltipContent>
-              <p>{t.common.saveToNote}</p>
+              <p>{t('common.saveToNote')}</p>
             </TooltipContent>
           </Tooltip>
         )}
@@ -110,7 +110,7 @@ export function MessageActions({ content, notebookId }: MessageActionsProps) {
             </Button>
           </TooltipTrigger>
           <TooltipContent>
-            <p>{t.common.copyToClipboard}</p>
+            <p>{t('common.copyToClipboard')}</p>
           </TooltipContent>
         </Tooltip>
       </div>
diff --git a/frontend/src/components/source/ModelSelector.tsx b/frontend/src/components/source/ModelSelector.tsx
index 02824e4..18595b6 100644
--- a/frontend/src/components/source/ModelSelector.tsx
+++ b/frontend/src/components/source/ModelSelector.tsx
@@ -67,8 +67,8 @@ export function ModelSelector({
     if (defaultModel) {
       return defaultModel.name
     }
-    return t.common.default
-  }, [currentModel, languageModels, defaultModel, t.common.default])
+    return t('common.default')
+  }, [currentModel, languageModels, defaultModel, t('common.default')])
 
   const handleSave = () => {
     onModelChange(selectedModel === 'default' ? undefined : selectedModel)
@@ -100,26 +100,26 @@ export function ModelSelector({
         <DialogHeader>
           <DialogTitle className="flex items-center gap-2">
             <Sparkles className="h-5 w-5" />
-            {t.common.modelConfiguration}
+            {t('common.modelConfiguration')}
           </DialogTitle>
           <DialogDescription>
-            {t.transformations.overrideModelDesc}
+            {t('transformations.overrideModelDesc')}
           </DialogDescription>
         </DialogHeader>
         <div className="grid gap-4 py-4">
           <div className="grid gap-2">
-            <Label htmlFor="model">{t.common.model}</Label>
+            <Label htmlFor="model">{t('common.model')}</Label>
             <Select value={selectedModel} onValueChange={setSelectedModel}>
               <SelectTrigger id="model">
-                <SelectValue placeholder={t.models.selectModelPlaceholder} />
+                <SelectValue placeholder={t('models.selectModelPlaceholder')} />
               </SelectTrigger>
               <SelectContent>
                 <SelectItem value="default">
                   <div className="flex items-center justify-between w-full">
                     <span>
                       {defaultModel 
-                        ? `${t.common.default} (${defaultModel.name})` 
-                        : t.transformations.systemDefault}
+                        ? `${t('common.default')} (${defaultModel.name})` 
+                        : t('transformations.systemDefault')}
                     </span>
                     {defaultModel?.provider && (
                       <span className="text-xs text-muted-foreground ml-2">
@@ -150,7 +150,7 @@ export function ModelSelector({
           {selectedModel && selectedModel !== 'default' && (
             <div className="rounded-lg bg-muted p-3">
               <p className="text-sm text-muted-foreground">
-                {t.transformations.sessionUseReplacement.replace(
+                {t('transformations.sessionUseReplacement').replace(
                   '{name}', 
                   languageModels.find(m => m.id === selectedModel)?.name || selectedModel
                 )}
@@ -160,10 +160,10 @@ export function ModelSelector({
         </div>
         <DialogFooter className="flex justify-between">
           <Button variant="outline" onClick={handleReset}>
-            {t.common.resetToDefault}
+            {t('common.resetToDefault')}
           </Button>
           <Button onClick={handleSave}>
-            {t.common.saveChanges}
+            {t('common.saveChanges')}
           </Button>
         </DialogFooter>
       </DialogContent>
diff --git a/frontend/src/components/source/NotebookAssociations.tsx b/frontend/src/components/source/NotebookAssociations.tsx
index cf037d7..a932322 100644
--- a/frontend/src/components/source/NotebookAssociations.tsx
+++ b/frontend/src/components/source/NotebookAssociations.tsx
@@ -110,10 +110,10 @@ export function NotebookAssociations({
         <CardHeader>
           <CardTitle className="flex items-center gap-2">
             <BookOpen className="h-5 w-5" />
-            {t.sources.manageNotebooks}
+            {t('sources.manageNotebooks')}
           </CardTitle>
           <CardDescription>
-            {t.sources.manageNotebooksDesc}
+            {t('sources.manageNotebooksDesc')}
           </CardDescription>
         </CardHeader>
         <CardContent>
@@ -131,14 +131,14 @@ export function NotebookAssociations({
         <CardHeader>
           <CardTitle className="flex items-center gap-2">
             <BookOpen className="h-5 w-5" />
-            {t.sources.manageNotebooks}
+            {t('sources.manageNotebooks')}
           </CardTitle>
           <CardDescription>
-            {t.sources.manageNotebooksDesc}
+            {t('sources.manageNotebooksDesc')}
           </CardDescription>
         </CardHeader>
         <CardContent>
-          <p className="text-sm text-muted-foreground">{t.sources.noNotebooksAvailable}</p>
+          <p className="text-sm text-muted-foreground">{t('sources.noNotebooksAvailable')}</p>
         </CardContent>
       </Card>
     )
@@ -149,10 +149,10 @@ export function NotebookAssociations({
       <CardHeader>
         <CardTitle className="flex items-center gap-2">
           <BookOpen className="h-5 w-5" />
-          {t.sources.manageNotebooks}
+          {t('sources.manageNotebooks')}
         </CardTitle>
         <CardDescription>
-          {t.sources.manageNotebooksDesc}
+          {t('sources.manageNotebooksDesc')}
         </CardDescription>
       </CardHeader>
       <CardContent className="space-y-4">
@@ -205,7 +205,7 @@ export function NotebookAssociations({
               onClick={handleCancel}
               disabled={isSaving}
             >
-              {t.common.cancel}
+              {t('common.cancel')}
             </Button>
             <Button
               size="sm"
@@ -215,10 +215,10 @@ export function NotebookAssociations({
               {isSaving ? (
                 <>
                   <LoaderIcon className="mr-2 h-4 w-4 animate-spin" />
-                  {t.common.saving}...
+                  {t('common.saving')}...
                 </>
               ) : (
-                t.common.saveChanges
+                t('common.saveChanges')
               )}
             </Button>
           </div>
diff --git a/frontend/src/components/source/SessionManager.tsx b/frontend/src/components/source/SessionManager.tsx
index 3a51905..d169f5f 100644
--- a/frontend/src/components/source/SessionManager.tsx
+++ b/frontend/src/components/source/SessionManager.tsx
@@ -60,7 +60,7 @@ export function SessionManager({
   const { data: models } = useModels()
 
   // Helper to get model name from ID
-  const customModelLabel = t.common.customModel
+  const customModelLabel = t('common.customModel')
   const getModelName = useMemo(() => {
     return (modelId: string) => {
       const model = models?.find(m => m.id === modelId)
@@ -108,7 +108,7 @@ export function SessionManager({
           <CardTitle className="flex items-center justify-between">
             <span className="flex items-center gap-2">
               <MessageSquare className="h-5 w-5" />
-              {t.chat.sessions}
+              {t('chat.sessions')}
             </span>
             <Button
               size="sm"
@@ -126,7 +126,7 @@ export function SessionManager({
                 <Input
                   value={newSessionTitle}
                   onChange={(e) => setNewSessionTitle(e.target.value)}
-                  placeholder={t.chat.sessionTitlePlaceholder}
+                  placeholder={t('chat.sessionTitlePlaceholder')}
                   className="mb-2"
                   autoFocus
                   onKeyPress={(e) => {
@@ -135,7 +135,7 @@ export function SessionManager({
                 />
                 <div className="flex gap-2">
                   <Button size="sm" onClick={handleCreateSession}>
-                    {t.common.create}
+                    {t('common.create')}
                   </Button>
                   <Button
                     size="sm"
@@ -145,7 +145,7 @@ export function SessionManager({
                       setNewSessionTitle('')
                     }}
                   >
-                    {t.common.cancel}
+                    {t('common.cancel')}
                   </Button>
                 </div>
               </div>
@@ -153,13 +153,13 @@ export function SessionManager({
 
             {loadingSessions ? (
               <div className="text-center py-8 text-muted-foreground">
-                {t.common.loading}
+                {t('common.loading')}
               </div>
             ) : sessions.length === 0 ? (
               <div className="text-center py-8 text-muted-foreground">
                 <MessageSquare className="h-12 w-12 mx-auto mb-4 opacity-50" />
-                <p className="text-sm">{t.chat.noSessions}</p>
-                <p className="text-xs mt-2">{t.chat.createToStart}</p>
+                <p className="text-sm">{t('chat.noSessions')}</p>
+                <p className="text-xs mt-2">{t('chat.createToStart')}</p>
               </div>
             ) : (
               <div className="space-y-2 pb-4">
@@ -231,7 +231,7 @@ export function SessionManager({
                         </div>
                         {session.message_count != null && session.message_count > 0 && (
                           <Badge variant="secondary" className="mt-2 text-xs">
-                            {t.chat.messagesCount.replace('{count}', session.message_count.toString())}
+                            {t('chat.messagesCount').replace('{count}', session.message_count.toString())}
                           </Badge>
                         )}
                         {session.model_override && (
@@ -252,15 +252,15 @@ export function SessionManager({
       <AlertDialog open={!!deleteConfirmId} onOpenChange={() => setDeleteConfirmId(null)}>
         <AlertDialogContent>
           <AlertDialogHeader>
-            <AlertDialogTitle>{t.chat.deleteSession}</AlertDialogTitle>
+            <AlertDialogTitle>{t('chat.deleteSession')}</AlertDialogTitle>
             <AlertDialogDescription>
-              {t.chat.deleteSessionDesc}
+              {t('chat.deleteSessionDesc')}
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
-            <AlertDialogCancel>{t.common.cancel}</AlertDialogCancel>
+            <AlertDialogCancel>{t('common.cancel')}</AlertDialogCancel>
             <AlertDialogAction onClick={handleDeleteConfirm}>
-              {t.common.delete}
+              {t('common.delete')}
             </AlertDialogAction>
           </AlertDialogFooter>
         </AlertDialogContent>
diff --git a/frontend/src/components/source/SourceDetailContent.tsx b/frontend/src/components/source/SourceDetailContent.tsx
index 87ebb40..0c24d28 100644
--- a/frontend/src/components/source/SourceDetailContent.tsx
+++ b/frontend/src/components/source/SourceDetailContent.tsx
@@ -113,7 +113,7 @@ export function SourceDetailContent({
       }
     } catch (err) {
       console.error('Failed to fetch source:', err)
-      setError(t.sources.loadFailed)
+      setError(t('sources.loadFailed'))
     } finally {
       setLoading(false)
     }
@@ -150,7 +150,7 @@ export function SourceDetailContent({
 
   const createInsight = async () => {
     if (!selectedTransformation) {
-      toast.error(t.sources.selectTransformation)
+      toast.error(t('sources.selectTransformation'))
       return
     }
 
@@ -160,7 +160,7 @@ export function SourceDetailContent({
         transformation_id: selectedTransformation
       })
       // Show toast for async operation
-      toast.success(t.sources.insightGenerationStarted)
+      toast.success(t('sources.insightGenerationStarted'))
       setSelectedTransformation('')
 
       // Poll for command completion if we have a command_id
@@ -188,7 +188,7 @@ export function SourceDetailContent({
       }
     } catch (err) {
       console.error('Failed to create insight:', err)
-      toast.error(t.common.error)
+      toast.error(t('common.error'))
     } finally {
       setCreatingInsight(false)
     }
@@ -201,12 +201,12 @@ export function SourceDetailContent({
     try {
       setDeletingInsight(true)
       await insightsApi.delete(insightToDelete)
-      toast.success(t.common.success)
+      toast.success(t('common.success'))
       setInsightToDelete(null)
       await fetchInsights()
     } catch (err) {
       console.error('Failed to delete insight:', err)
-      toast.error(t.common.error)
+      toast.error(t('common.error'))
     } finally {
       setDeletingInsight(false)
     }
@@ -217,11 +217,11 @@ export function SourceDetailContent({
 
     try {
       await sourcesApi.update(sourceId, { title })
-      toast.success(t.common.success)
+      toast.success(t('common.success'))
       setSource({ ...source, title })
     } catch (err) {
       console.error('Failed to update source title:', err)
-      toast.error(t.common.error)
+      toast.error(t('common.error'))
       await fetchSource()
     }
   }
@@ -232,11 +232,11 @@ export function SourceDetailContent({
     try {
       setIsEmbedding(true)
       const response = await embeddingApi.embedContent(sourceId, 'source')
-      toast.success(response.message || t.common.success)
+      toast.success(response.message || t('common.success'))
       await fetchSource()
     } catch (err) {
       console.error('Failed to embed content:', err)
-      toast.error(t.common.error)
+      toast.error(t('common.error'))
     } finally {
       setIsEmbedding(false)
     }
@@ -288,14 +288,14 @@ export function SourceDetailContent({
       document.body.removeChild(link)
       window.URL.revokeObjectURL(blobUrl)
       setFileAvailable(true)
-      toast.success(t.common.success)
+      toast.success(t('common.success'))
     } catch (err) {
       console.error('Failed to download file:', err)
       if (isAxiosError(err) && err.response?.status === 404) {
         setFileAvailable(false)
-        toast.error(t.sources.fileUnavailable)
+        toast.error(t('sources.fileUnavailable'))
       } else {
-        toast.error(t.common.error)
+        toast.error(t('common.error'))
       }
     } finally {
       setIsDownloadingFile(false)
@@ -320,7 +320,7 @@ export function SourceDetailContent({
     if (source?.asset?.url) {
       navigator.clipboard.writeText(source.asset.url)
       setCopied(true)
-      toast.success(t.sources.urlCopied)
+      toast.success(t('sources.urlCopied'))
       setTimeout(() => setCopied(false), 2000)
     }
   }, [source, t])
@@ -357,14 +357,14 @@ export function SourceDetailContent({
   const handleDelete = async () => {
     if (!source) return
 
-    if (confirm(t.sources.deleteSourceConfirm || t.common.confirm)) {
+    if (confirm(t('sources.deleteSourceConfirm') || t('common.confirm'))) {
       try {
         await sourcesApi.delete(source.id)
-        toast.success(t.common.success)
+        toast.success(t('common.success'))
         onClose?.()
       } catch (error) {
         console.error('Failed to delete source:', error)
-        toast.error(t.common.error)
+        toast.error(t('common.error'))
       }
     }
   }
@@ -380,7 +380,7 @@ export function SourceDetailContent({
   if (error || !source) {
     return (
       <div className="flex h-full flex-col items-center justify-center gap-4 p-8">
-        <p className="text-red-500">{error || t.sources.notFound}</p>
+        <p className="text-red-500">{error || t('sources.notFound')}</p>
       </div>
     )
   }
@@ -396,11 +396,11 @@ export function SourceDetailContent({
               onSave={handleUpdateTitle}
               className="text-2xl font-bold"
               inputClassName="text-2xl font-bold"
-              placeholder={t.sources.titlePlaceholder}
-              emptyText={t.sources.untitledSource}
+              placeholder={t('sources.titlePlaceholder')}
+              emptyText={t('sources.untitledSource')}
             />
             <p className="mt-1 text-sm text-muted-foreground">
-              {t.sources.id}: {source.id}
+              {t('sources.id')}: {source.id}
             </p>
           </div>
           <div className="flex items-center gap-2">
@@ -413,7 +413,7 @@ export function SourceDetailContent({
             {showChatButton && onChatClick && (
               <Button variant="outline" size="sm" onClick={onChatClick}>
                 <MessageSquare className="h-4 w-4 mr-2" />
-                {t.chat.chatWith.replace('{name}', t.navigation.sources)}
+                {t('chat.chatWith').replace('{name}', t('navigation.sources'))}
               </Button>
             )}
 
@@ -432,10 +432,10 @@ export function SourceDetailContent({
                     >
                       <Download className="mr-2 h-4 w-4" />
                       {fileAvailable === false
-                        ? t.sources.fileUnavailable
+                        ? t('sources.fileUnavailable')
                         : isDownloadingFile
-                          ? t.sources.preparing
-                          : t.sources.downloadFile}
+                          ? t('sources.preparing')
+                          : t('sources.downloadFile')}
                     </DropdownMenuItem>
                     <DropdownMenuSeparator />
                   </>
@@ -445,7 +445,7 @@ export function SourceDetailContent({
                   disabled={isEmbedding || source.embedded}
                 >
                   <Database className="mr-2 h-4 w-4" />
-                  {isEmbedding ? t.sources.embedding : source.embedded ? t.sources.alreadyEmbedded : t.sources.embedContent}
+                  {isEmbedding ? t('sources.embedding') : source.embedded ? t('sources.alreadyEmbedded') : t('sources.embedContent')}
                 </DropdownMenuItem>
                 <DropdownMenuSeparator />
                 <DropdownMenuItem
@@ -453,7 +453,7 @@ export function SourceDetailContent({
                   onClick={handleDelete}
                 >
                   <Trash2 className="mr-2 h-4 w-4" />
-                  {t.sources.deleteSource}
+                  {t('sources.deleteSource')}
                 </DropdownMenuItem>
               </DropdownMenuContent>
             </DropdownMenu>
@@ -465,11 +465,11 @@ export function SourceDetailContent({
       <div className="flex-1 overflow-y-auto px-2">
         <Tabs defaultValue="content" className="w-full">
           <TabsList className="grid w-full grid-cols-3 sticky top-0 z-10">
-            <TabsTrigger value="content">{t.sources.content}</TabsTrigger>
+            <TabsTrigger value="content">{t('sources.content')}</TabsTrigger>
             <TabsTrigger value="insights">
-              {t.common.insights} {insights.length > 0 && `(${insights.length})`}
+              {t('common.insights')} {insights.length > 0 && `(${insights.length})`}
             </TabsTrigger>
-            <TabsTrigger value="details">{t.sources.details}</TabsTrigger>
+            <TabsTrigger value="details">{t('sources.details')}</TabsTrigger>
           </TabsList>
 
           <TabsContent value="content" className="mt-6">
@@ -477,7 +477,7 @@ export function SourceDetailContent({
               <CardHeader>
                 <CardTitle className="flex items-center gap-2">
                   {isYouTubeUrl && <Youtube className="h-5 w-5" />}
-                  {t.sources.content}
+                  {t('sources.content')}
                 </CardTitle>
                 {source.asset?.url && !isYouTubeUrl && (
                   <CardDescription className="flex items-center gap-2">
@@ -499,7 +499,7 @@ export function SourceDetailContent({
                     <div className="aspect-video rounded-lg overflow-hidden bg-black">
                       <iframe
                         src={`https://www.youtube.com/embed/${youTubeVideoId}`}
-                        title={t.common.accessibility.ytVideo}
+                        title={t('common.accessibility.ytVideo')}
                         className="w-full h-full"
                         allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                         allowFullScreen
@@ -514,7 +514,7 @@ export function SourceDetailContent({
                           className="text-sm text-muted-foreground hover:underline inline-flex items-center gap-1"
                         >
                           <ExternalLink className="h-3 w-3" />
-                          {t.sources.openOnYoutube}
+                          {t('sources.openOnYoutube')}
                         </a>
                       </div>
                     )}
@@ -543,7 +543,7 @@ export function SourceDetailContent({
                       td: ({ children }) => <td className="border border-border px-3 py-2">{children}</td>,
                     }}
                   >
-                    {source.full_text || t.sources.noContent}
+                    {source.full_text || t('sources.noContent')}
                   </ReactMarkdown>
                 </div>
               </CardContent>
@@ -556,12 +556,12 @@ export function SourceDetailContent({
                 <CardTitle className="flex items-center justify-between">
                   <span className="flex items-center gap-2">
                     <Lightbulb className="h-5 w-5" />
-                    {t.common.insights}
+                    {t('common.insights')}
                   </span>
                   <Badge variant="secondary">{insights.length}</Badge>
                 </CardTitle>
                 <CardDescription>
-                  {t.sources.insightsDesc}
+                  {t('sources.insightsDesc')}
                 </CardDescription>
               </CardHeader>
               <CardContent className="space-y-4">
@@ -572,7 +572,7 @@ export function SourceDetailContent({
                     className="mb-3 text-sm font-semibold flex items-center gap-2"
                   >
                     <Sparkles className="h-4 w-4" />
-                    {t.sources.generateNewInsight}
+                    {t('sources.generateNewInsight')}
                   </Label>
                   <div className="flex gap-2">
                     <Select
@@ -582,7 +582,7 @@ export function SourceDetailContent({
                       disabled={creatingInsight}
                     >
                       <SelectTrigger id="transformation-select" className="flex-1">
-                        <SelectValue placeholder={t.sources.selectTransformation} />
+                        <SelectValue placeholder={t('sources.selectTransformation')} />
                       </SelectTrigger>
                       <SelectContent>
                         {transformations.map((trans) => (
@@ -600,12 +600,12 @@ export function SourceDetailContent({
                       {creatingInsight ? (
                         <>
                           <LoadingSpinner className="mr-2 h-3 w-3" />
-                          {t.common.creating}
+                          {t('common.creating')}
                         </>
                       ) : (
                         <>
                           <Plus className="mr-2 h-4 w-4" />
-                          {t.common.create}
+                          {t('common.create')}
                         </>
                       )}
                     </Button>
@@ -620,8 +620,8 @@ export function SourceDetailContent({
                 ) : insights.length === 0 ? (
                   <div className="text-center py-8 text-muted-foreground">
                     <Lightbulb className="h-12 w-12 mx-auto mb-3 opacity-50" />
-                    <p className="text-sm">{t.sources.noInsightsYet}</p>
-                    <p className="text-xs mt-1">{t.sources.createFirstInsight}</p>
+                    <p className="text-sm">{t('sources.noInsightsYet')}</p>
+                    <p className="text-xs mt-1">{t('sources.createFirstInsight')}</p>
                   </div>
                 ) : (
                   <div className="space-y-3">
@@ -639,7 +639,7 @@ export function SourceDetailContent({
                         </p>
                         <div className="mt-3 flex justify-end gap-2">
                           <Button size="sm" variant="outline" onClick={() => setSelectedInsight(insight)}>
-                            {t.sources.viewInsight}
+                            {t('sources.viewInsight')}
                           </Button>
                           <Button
                             size="sm"
@@ -661,7 +661,7 @@ export function SourceDetailContent({
           <TabsContent value="details" className="mt-6">
             <Card>
               <CardHeader>
-                <CardTitle>{t.sources.details}</CardTitle>
+                <CardTitle>{t('sources.details')}</CardTitle>
               </CardHeader>
               <CardContent className="space-y-6">
                 {/* Embedding Alert */}
@@ -669,10 +669,10 @@ export function SourceDetailContent({
                   <Alert>
                     <AlertCircle className="h-4 w-4" />
                     <AlertTitle>
-                      {t.sources.notEmbeddedAlert}
+                      {t('sources.notEmbeddedAlert')}
                     </AlertTitle>
                     <AlertDescription>
-                      {t.sources.notEmbeddedDesc}
+                      {t('sources.notEmbeddedDesc')}
                       <div className="mt-3">
                         <Button
                           onClick={handleEmbedContent}
@@ -680,7 +680,7 @@ export function SourceDetailContent({
                           size="sm"
                         >
                           <Database className="mr-2 h-4 w-4" />
-                          {isEmbedding ? t.sources.embedding : t.sources.embedContent}
+                          {isEmbedding ? t('sources.embedding') : t('sources.embedContent')}
                         </Button>
                       </div>
                     </AlertDescription>
@@ -691,7 +691,7 @@ export function SourceDetailContent({
                 <div className="space-y-4">
                   {source.asset?.url && (
                     <div>
-                      <h3 className="mb-2 text-sm font-semibold">{t.common.url}</h3>
+                      <h3 className="mb-2 text-sm font-semibold">{t('common.url')}</h3>
                       <div className="flex items-center gap-2">
                         <code className="flex-1 rounded bg-muted px-2 py-1 text-sm">
                           {source.asset.url}
@@ -720,7 +720,7 @@ export function SourceDetailContent({
 
                   {source.asset?.file_path && (
                     <div className="space-y-2">
-                      <h3 className="text-sm font-semibold">{t.sources.uploadedFile}</h3>
+                      <h3 className="text-sm font-semibold">{t('sources.uploadedFile')}</h3>
                       <div className="flex flex-wrap items-center gap-2">
                         <code className="rounded bg-muted px-2 py-1 text-sm">
                           {source.asset.file_path}
@@ -733,15 +733,15 @@ export function SourceDetailContent({
                         >
                           <Download className="mr-2 h-4 w-4" />
                           {fileAvailable === false
-                            ? t.sources.fileUnavailable
+                            ? t('sources.fileUnavailable')
                             : isDownloadingFile
-                              ? t.sources.preparing
-                              : t.common.download}
+                              ? t('sources.preparing')
+                              : t('common.download')}
                         </Button>
                       </div>
                       {fileAvailable === false ? (
                         <p className="text-xs text-muted-foreground">
-                          {t.sources.fileUnavailableDesc}
+                          {t('sources.fileUnavailableDesc')}
                         </p>
                       ) : null}
                     </div>
@@ -749,7 +749,7 @@ export function SourceDetailContent({
 
                   {source.topics && source.topics.length > 0 && (
                     <div>
-                      <h3 className="mb-2 text-sm font-semibold">{t.sources.topics}</h3>
+                      <h3 className="mb-2 text-sm font-semibold">{t('sources.topics')}</h3>
                       <div className="flex flex-wrap gap-2">
                         {source.topics.map((topic, idx) => (
                           <Badge key={idx} variant="outline">
@@ -764,17 +764,17 @@ export function SourceDetailContent({
                 {/* Metadata */}
                 <div>
                   <div className="flex items-center justify-between mb-3">
-                    <h3 className="text-sm font-semibold">{t.sources.metadata}</h3>
+                    <h3 className="text-sm font-semibold">{t('sources.metadata')}</h3>
                     <div className="flex items-center gap-2">
                       <Database className="h-3.5 w-3.5 text-muted-foreground" />
                       <Badge variant={source.embedded ? "default" : "secondary"} className="text-xs">
-                        {source.embedded ? t.sources.embedded : t.sources.notEmbedded}
+                        {source.embedded ? t('sources.embedded') : t('sources.notEmbedded')}
                       </Badge>
                     </div>
                   </div>
                   <div className="grid gap-4 sm:grid-cols-2">
                     <div>
-                      <p className="text-xs font-medium text-muted-foreground">{t.common.created_label}</p>
+                      <p className="text-xs font-medium text-muted-foreground">{t('common.created_label')}</p>
                       <p className="text-sm">
                         {formatDistanceToNow(new Date(source.created), {
                           addSuffix: true,
@@ -786,7 +786,7 @@ export function SourceDetailContent({
                       </p>
                     </div>
                     <div>
-                      <p className="text-xs font-medium text-muted-foreground">{t.common.updated_label}</p>
+                      <p className="text-xs font-medium text-muted-foreground">{t('common.updated_label')}</p>
                       <p className="text-sm">
                         {formatDistanceToNow(new Date(source.updated), {
                           addSuffix: true,
@@ -823,12 +823,12 @@ export function SourceDetailContent({
         onDelete={async (insightId) => {
           try {
             await insightsApi.delete(insightId)
-            toast.success(t.common.success)
+            toast.success(t('common.success'))
             setSelectedInsight(null)
             await fetchInsights()
           } catch (err) {
             console.error('Failed to delete insight:', err)
-            toast.error(t.common.error)
+            toast.error(t('common.error'))
           }
         }}
       />
@@ -836,20 +836,20 @@ export function SourceDetailContent({
       <AlertDialog open={!!insightToDelete} onOpenChange={() => setInsightToDelete(null)}>
         <AlertDialogContent>
           <AlertDialogHeader>
-            <AlertDialogTitle>{t.sources.deleteInsight}</AlertDialogTitle>
+            <AlertDialogTitle>{t('sources.deleteInsight')}</AlertDialogTitle>
             <AlertDialogDescription>
-              {t.sources.deleteInsightConfirm}
+              {t('sources.deleteInsightConfirm')}
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
-            <AlertDialogCancel disabled={deletingInsight}>{t.common.cancel}</AlertDialogCancel>
+            <AlertDialogCancel disabled={deletingInsight}>{t('common.cancel')}</AlertDialogCancel>
             <AlertDialogAction asChild>
               <Button
                 onClick={handleDeleteInsight}
                 disabled={deletingInsight}
                 variant="destructive"
               >
-                {deletingInsight ? t.common.deleting : t.common.delete}
+                {deletingInsight ? t('common.deleting') : t('common.delete')}
               </Button>
             </AlertDialogAction>
           </AlertDialogFooter>
diff --git a/frontend/src/components/source/SourceDialog.tsx b/frontend/src/components/source/SourceDialog.tsx
index d28b795..f87bbd5 100644
--- a/frontend/src/components/source/SourceDialog.tsx
+++ b/frontend/src/components/source/SourceDialog.tsx
@@ -42,7 +42,7 @@ export function SourceDialog({ open, onOpenChange, sourceId }: SourceDialogProps
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="max-w-5xl max-h-[90vh] flex flex-col p-0">
         {/* Accessibility title (hidden visually but read by screen readers) */}
-        <DialogTitle className="sr-only">{t.sources.detailsTitle}</DialogTitle>
+        <DialogTitle className="sr-only">{t('sources.detailsTitle')}</DialogTitle>
 
         {/* Source detail content */}
         <div className="flex-1 overflow-y-auto min-h-0">
diff --git a/frontend/src/components/source/SourceInsightDialog.tsx b/frontend/src/components/source/SourceInsightDialog.tsx
index a82b08e..40e4539 100644
--- a/frontend/src/components/source/SourceInsightDialog.tsx
+++ b/frontend/src/components/source/SourceInsightDialog.tsx
@@ -73,7 +73,7 @@ export function SourceInsightDialog({ open, onOpenChange, insight, onDelete }: S
       <DialogContent className="sm:max-w-3xl max-h-[90vh] flex flex-col">
         <DialogHeader>
           <DialogTitle className="flex items-center justify-between gap-2">
-            <span>{t.sources.sourceInsight}</span>
+            <span>{t('sources.sourceInsight')}</span>
             <div className="flex items-center gap-2">
               {displayInsight?.insight_type && (
                 <Badge variant="outline" className="text-xs uppercase">
@@ -88,7 +88,7 @@ export function SourceInsightDialog({ open, onOpenChange, insight, onDelete }: S
                   className="gap-1"
                 >
                   <FileText className="h-3 w-3" />
-                  {t.sources.viewSource}
+                  {t('sources.viewSource')}
                 </Button>
               )}
             </div>
@@ -98,8 +98,8 @@ export function SourceInsightDialog({ open, onOpenChange, insight, onDelete }: S
         {showDeleteConfirm ? (
           <div className="flex flex-col items-center justify-center py-8 gap-4">
             <p className="text-center text-muted-foreground">
-              {t.sources.deleteInsightConfirm.split(/[?？]/)[0]}?<br />
-              <span className="text-sm">{t.sources.deleteInsightConfirm.split(/[?？]/)[1]?.trim() || t.common.deleteForever}</span>
+              {t('sources.deleteInsightConfirm').split(/[?？]/)[0]}?<br />
+              <span className="text-sm">{t('sources.deleteInsightConfirm').split(/[?？]/)[1]?.trim() || t('common.deleteForever')}</span>
             </p>
             <div className="flex gap-2">
               <Button
@@ -107,14 +107,14 @@ export function SourceInsightDialog({ open, onOpenChange, insight, onDelete }: S
                 onClick={() => setShowDeleteConfirm(false)}
                 disabled={isDeleting}
               >
-                {t.common.cancel}
+                {t('common.cancel')}
               </Button>
               <Button
                 variant="destructive"
                 onClick={handleDelete}
                 disabled={isDeleting}
               >
-                {isDeleting ? t.common.deleting : t.common.delete}
+                {isDeleting ? t('common.deleting') : t('common.delete')}
               </Button>
             </div>
           </div>
@@ -122,7 +122,7 @@ export function SourceInsightDialog({ open, onOpenChange, insight, onDelete }: S
           <div className="flex-1 overflow-y-auto min-h-0">
             {isLoading ? (
               <div className="flex items-center justify-center py-10">
-                <span className="text-sm text-muted-foreground">{t.common.loading}</span>
+                <span className="text-sm text-muted-foreground">{t('common.loading')}</span>
               </div>
             ) : displayInsight ? (
               <div className="prose prose-sm prose-neutral dark:prose-invert max-w-none">
@@ -145,7 +145,7 @@ export function SourceInsightDialog({ open, onOpenChange, insight, onDelete }: S
                 </ReactMarkdown>
               </div>
             ) : (
-              <p className="text-sm text-muted-foreground">{t.sources.noInsightSelected}</p>
+              <p className="text-sm text-muted-foreground">{t('sources.noInsightSelected')}</p>
             )}
           </div>
         )}
diff --git a/frontend/src/components/sources/AddExistingSourceDialog.tsx b/frontend/src/components/sources/AddExistingSourceDialog.tsx
index 3291aab..d05a2c0 100644
--- a/frontend/src/components/sources/AddExistingSourceDialog.tsx
+++ b/frontend/src/components/sources/AddExistingSourceDialog.tsx
@@ -186,10 +186,10 @@ export function AddExistingSourceDialog({
         <DialogHeader>
           <DialogTitle className="flex items-center gap-2">
             <Link2 className="h-5 w-5" />
-            {t.sources.addExistingTitle}
+            {t('sources.addExistingTitle')}
           </DialogTitle>
           <DialogDescription>
-            {t.sources.addExistingDesc}
+            {t('sources.addExistingDesc')}
           </DialogDescription>
         </DialogHeader>
 
@@ -198,7 +198,7 @@ export function AddExistingSourceDialog({
           <div className="relative">
             <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
             <Input
-              placeholder={t.sources.searchPlaceholder}
+              placeholder={t('sources.searchPlaceholder')}
               value={searchQuery}
               onChange={(e) => setSearchQuery(e.target.value)}
               className="pl-10"
@@ -213,12 +213,12 @@ export function AddExistingSourceDialog({
             {isSearching && filteredSources.length === 0 ? (
               <div className="flex flex-col items-center justify-center h-[200px] text-muted-foreground">
                 <LoaderIcon className="h-12 w-12 mb-2 animate-spin" />
-                <p>{t.common.loading}</p>
+                <p>{t('common.loading')}</p>
               </div>
             ) : filteredSources.length === 0 ? (
               <div className="flex flex-col items-center justify-center h-[200px] text-muted-foreground">
                 <FileText className="h-12 w-12 mb-2 opacity-50" />
-                <p>{t.sources.noNotebooksFound}</p>
+                <p>{t('sources.noNotebooksFound')}</p>
               </div>
             ) : (
               <div className="space-y-2 p-4">
@@ -249,12 +249,12 @@ export function AddExistingSourceDialog({
                           </h4>
                           {isAlreadyLinked && (
                             <Badge variant="secondary" className="text-xs shrink-0">
-                              {t.common.linked}
+                              {t('common.linked')}
                             </Badge>
                           )}
                         </div>
                         <p className="text-xs text-muted-foreground truncate">
-                          {t.sources.added.replace('{date}', formatDate(source.created))}
+                          {t('sources.added').replace('{date}', formatDate(source.created))}
                         </p>
                       </div>
                     </div>
@@ -267,14 +267,14 @@ export function AddExistingSourceDialog({
           {/* Truncation Warning */}
           {allSources.length >= 100 && !debouncedSearchQuery && (
             <div className="text-xs text-muted-foreground bg-muted/50 p-2 rounded-md">
-              {t.sources.showingFirst100}
+              {t('sources.showingFirst100')}
             </div>
           )}
 
           {/* Selection Summary */}
           {selectedSourceIds.length > 0 && (
             <div className="text-sm text-muted-foreground">
-              {t.sources.selectedCount.replace('{count}', selectedSourceIds.length.toString())}
+              {t('sources.selectedCount').replace('{count}', selectedSourceIds.length.toString())}
             </div>
           )}
         </div>
@@ -285,7 +285,7 @@ export function AddExistingSourceDialog({
             onClick={() => onOpenChange(false)}
             disabled={addSources.isPending}
           >
-            {t.common.cancel}
+            {t('common.cancel')}
           </Button>
           <Button
             onClick={handleAddSelected}
@@ -294,10 +294,10 @@ export function AddExistingSourceDialog({
             {addSources.isPending ? (
               <>
                 <LoaderIcon className="mr-2 h-4 w-4 animate-spin" />
-                {t.common.adding}
+                {t('common.adding')}
               </>
             ) : (
-              <>{t.common.addSelected}</>
+              <>{t('common.addSelected')}</>
             )}
           </Button>
         </DialogFooter>
diff --git a/frontend/src/components/sources/AddSourceDialog.tsx b/frontend/src/components/sources/AddSourceDialog.tsx
index 3f31adb..5b77241 100644
--- a/frontend/src/components/sources/AddSourceDialog.tsx
+++ b/frontend/src/components/sources/AddSourceDialog.tsx
@@ -93,9 +93,9 @@ export function AddSourceDialog({
   const { t } = useTranslation()
 
   const WIZARD_STEPS: readonly WizardStep[] = [
-    { number: 1, title: t.sources.addSource, description: t.sources.processDescription },
-    { number: 2, title: t.navigation.notebooks, description: t.notebooks.searchPlaceholder },
-    { number: 3, title: t.navigation.process, description: t.sources.processDescription },
+    { number: 1, title: t('sources.addSource'), description: t('sources.processDescription') },
+    { number: 2, title: t('navigation.notebooks'), description: t('notebooks.searchPlaceholder') },
+    { number: 3, title: t('navigation.process'), description: t('sources.processDescription') },
   ]
 
   // Simplified state management
@@ -389,29 +389,29 @@ export function AddSourceDialog({
 
       if (isBatchMode) {
         // Batch submission
-        setProcessingStatus({ message: t.sources.processingFiles })
+        setProcessingStatus({ message: t('sources.processingFiles') })
         const results = await submitBatch(data)
 
         // Show summary toast
         if (results.failed === 0) {
-          toast.success(t.sources.batchSuccess.replace('{count}', results.success.toString()))
+          toast.success(t('sources.batchSuccess').replace('{count}', results.success.toString()))
         } else if (results.success === 0) {
-          toast.error(t.sources.batchFailed.replace('{count}', results.failed.toString()))
+          toast.error(t('sources.batchFailed').replace('{count}', results.failed.toString()))
         } else {
-          toast.warning(t.sources.batchPartial.replace('{success}', results.success.toString()).replace('{failed}', results.failed.toString()))
+          toast.warning(t('sources.batchPartial').replace('{success}', results.success.toString()).replace('{failed}', results.failed.toString()))
         }
 
         handleClose()
       } else {
         // Single source submission
-        setProcessingStatus({ message: t.sources.submittingSource })
+        setProcessingStatus({ message: t('sources.submittingSource') })
         await submitSingleSource(data)
         handleClose()
       }
     } catch (error) {
       console.error('Error creating source:', error)
       setProcessingStatus({
-        message: t.common.error,
+        message: t('common.error'),
       })
       timeoutRef.current = setTimeout(() => {
         setProcessing(false)
@@ -461,12 +461,12 @@ export function AddSourceDialog({
         <DialogContent className="sm:max-w-[500px]" showCloseButton={true}>
           <DialogHeader>
             <DialogTitle>
-              {batchProgress ? t.sources.processingFiles : t.sources.statusProcessing}
+              {batchProgress ? t('sources.processingFiles') : t('sources.statusProcessing')}
             </DialogTitle>
             <DialogDescription>
               {batchProgress
-                ? t.sources.processingBatchSources.replace('{count}', batchProgress.total.toString())
-                : t.sources.processingSource
+                ? t('sources.processingBatchSources').replace('{count}', batchProgress.total.toString())
+                : t('sources.processingSource')
               }
             </DialogDescription>
           </DialogHeader>
@@ -475,7 +475,7 @@ export function AddSourceDialog({
             <div className="flex items-center gap-3">
               <LoaderIcon className="h-5 w-5 animate-spin text-primary" />
               <span className="text-sm text-muted-foreground">
-                {processingStatus?.message || t.common.processing}
+                {processingStatus?.message || t('common.processing')}
               </span>
             </div>
 
@@ -493,12 +493,12 @@ export function AddSourceDialog({
                   <div className="flex items-center gap-4">
                     <span className="flex items-center gap-1.5 text-green-600">
                       <CheckCircleIcon className="h-4 w-4" />
-                      {batchProgress.completed} {t.common.completed}
+                      {batchProgress.completed} {t('common.completed')}
                     </span>
                     {batchProgress.failed > 0 && (
                       <span className="flex items-center gap-1.5 text-destructive">
                         <XCircleIcon className="h-4 w-4" />
-                        {batchProgress.failed} {t.common.failed}
+                        {batchProgress.failed} {t('common.failed')}
                       </span>
                     )}
                   </div>
@@ -509,7 +509,7 @@ export function AddSourceDialog({
 
                 {batchProgress.currentItem && (
                   <p className="text-xs text-muted-foreground truncate">
-                    {t.common.current}: {batchProgress.currentItem}
+                    {t('common.current')}: {batchProgress.currentItem}
                   </p>
                 )}
               </>
@@ -536,9 +536,9 @@ export function AddSourceDialog({
     <Dialog open={open} onOpenChange={handleClose}>
       <DialogContent className="sm:max-w-[700px] p-0">
         <DialogHeader className="px-6 pt-6 pb-0">
-          <DialogTitle>{t.sources.addNew}</DialogTitle>
+          <DialogTitle>{t('sources.addNew')}</DialogTitle>
           <DialogDescription>
-            {t.sources.processDescription}
+            {t('sources.processDescription')}
           </DialogDescription>
         </DialogHeader>
 
@@ -591,7 +591,7 @@ export function AddSourceDialog({
               variant="outline" 
               onClick={handleClose}
             >
-              {t.common.cancel}
+              {t('common.cancel')}
             </Button>
 
             <div className="flex gap-2">
@@ -601,7 +601,7 @@ export function AddSourceDialog({
                   variant="outline"
                   onClick={handlePrevStep}
                 >
-                  {t.common.back}
+                  {t('common.back')}
                 </Button>
               )}
 
@@ -613,7 +613,7 @@ export function AddSourceDialog({
                   onClick={(e) => handleNextStep(e)}
                   disabled={!currentStepValid}
                 >
-                  {t.common.next}
+                  {t('common.next')}
                 </Button>
               )}
 
@@ -623,7 +623,7 @@ export function AddSourceDialog({
                 disabled={!currentStepValid || createSource.isPending}
                 className="min-w-[120px]"
               >
-                {createSource.isPending ? t.common.adding : t.common.done}
+                {createSource.isPending ? t('common.adding') : t('common.done')}
               </Button>
             </div>
           </div>
diff --git a/frontend/src/components/sources/SourceCard.tsx b/frontend/src/components/sources/SourceCard.tsx
index 48c4013..3320220 100644
--- a/frontend/src/components/sources/SourceCard.tsx
+++ b/frontend/src/components/sources/SourceCard.tsx
@@ -27,7 +27,7 @@ import {
 } from 'lucide-react'
 import { useSourceStatus } from '@/lib/hooks/use-sources'
 import { useTranslation } from '@/lib/hooks/use-translation'
-import { TranslationKeys } from '@/lib/locales'
+import type { TFunction } from 'i18next'
 import { cn } from '@/lib/utils'
 import { ContextToggle } from '@/components/common/ContextToggle'
 import { ContextMode } from '@/app/(dashboard)/notebooks/[id]/page'
@@ -51,46 +51,46 @@ const SOURCE_TYPE_ICONS = {
   text: FileText,
 } as const
 
-const getStatusConfig = (t: TranslationKeys) => ({
+const getStatusConfig = (t: TFunction) => ({
   new: {
     icon: Clock,
     color: 'text-blue-600',
     bgColor: 'bg-blue-50',
     borderColor: 'border-blue-200',
-    label: t.sources.statusProcessing,
-    description: t.sources.statusPreparingDesc
+    label: t('sources.statusProcessing'),
+    description: t('sources.statusPreparingDesc')
   },
   queued: {
     icon: Clock,
     color: 'text-blue-600',
     bgColor: 'bg-blue-50',
     borderColor: 'border-blue-200',
-    label: t.sources.statusQueued,
-    description: t.sources.statusQueuedDesc
+    label: t('sources.statusQueued'),
+    description: t('sources.statusQueuedDesc')
   },
   running: {
     icon: Loader2,
     color: 'text-blue-600',
     bgColor: 'bg-blue-50',
     borderColor: 'border-blue-200',
-    label: t.sources.statusProcessing,
-    description: t.sources.statusProcessingDesc
+    label: t('sources.statusProcessing'),
+    description: t('sources.statusProcessingDesc')
   },
   completed: {
     icon: CheckCircle,
     color: 'text-green-600',
     bgColor: 'bg-green-50',
     borderColor: 'border-green-200',
-    label: t.sources.statusCompleted,
-    description: t.sources.statusCompletedDesc
+    label: t('sources.statusCompleted'),
+    description: t('sources.statusCompletedDesc')
   },
   failed: {
     icon: AlertTriangle,
     color: 'text-red-600',
     bgColor: 'bg-red-50',
     borderColor: 'border-red-200',
-    label: t.sources.statusFailed,
-    description: t.sources.statusFailedDesc
+    label: t('sources.statusFailed'),
+    description: t('sources.statusFailedDesc')
   }
 } as const)
 
@@ -172,7 +172,7 @@ export function SourceCard({
   const sourceType = getSourceType(source)
   const SourceTypeIcon = SOURCE_TYPE_ICONS[sourceType]
   
-   const title = source.title || t.sources.untitledSource
+   const title = source.title || t('sources.untitledSource')
 
   const handleRetry = () => {
     if (onRetry) {
@@ -226,13 +226,13 @@ export function SourceCard({
                     'h-3 w-3',
                     isProcessing && 'animate-spin'
                   )} />
-                  {statusLoading && shouldFetchStatus ? t.sources.checking : statusConfig.label}
+                  {statusLoading && shouldFetchStatus ? t('sources.checking') : statusConfig.label}
                 </div>
 
                 {/* Source type indicator */}
                 <div className="flex items-center gap-1 text-gray-500">
                   <SourceTypeIcon className="h-3 w-3" />
-                  <span className="text-xs capitalize">{t.common.source}</span>
+                  <span className="text-xs capitalize">{t('common.source')}</span>
                 </div>
               </div>
             )}
@@ -259,12 +259,12 @@ export function SourceCard({
               {/* Source type badge */}
               <Badge variant="secondary" className="text-xs flex items-center gap-1">
                 <SourceTypeIcon className="h-3 w-3" />
-                {sourceType === 'link' ? t.sources.addUrl : sourceType === 'upload' ? t.sources.uploadFile : t.sources.enterText}
+                {sourceType === 'link' ? t('sources.addUrl') : sourceType === 'upload' ? t('sources.uploadFile') : t('sources.enterText')}
               </Badge>
 
               {isCompleted && source.insights_count > 0 && (
                 <Badge variant="outline" className="text-xs">
-                  {t.sources.insightsCount.replace('{count}', source.insights_count.toString())}
+                  {t('sources.insightsCount').replace('{count}', source.insights_count.toString())}
                 </Badge>
               )}
               {source.topics && source.topics.length > 0 && isCompleted && (
@@ -318,7 +318,7 @@ export function SourceCard({
                     disabled={!onRemoveFromNotebook}
                   >
                     <Unlink className="h-4 w-4 mr-2" />
-                    {t.sources.removeFromNotebook}
+                    {t('sources.removeFromNotebook')}
                   </DropdownMenuItem>
                   <DropdownMenuSeparator />
                 </>
@@ -334,7 +334,7 @@ export function SourceCard({
                     disabled={!onRetry}
                   >
                     <RefreshCw className="h-4 w-4 mr-2" />
-                    {t.sources.retryProcessing}
+                    {t('sources.retryProcessing')}
                   </DropdownMenuItem>
                   <DropdownMenuSeparator />
                 </>
@@ -349,7 +349,7 @@ export function SourceCard({
                 className="text-red-600 focus:text-red-600"
               >
                 <Trash2 className="h-4 w-4 mr-2" />
-                {t.sources.deleteSource}
+                {t('sources.deleteSource')}
               </DropdownMenuItem>
             </DropdownMenuContent>
           </DropdownMenu>
@@ -366,7 +366,7 @@ export function SourceCard({
               className="h-7 text-xs"
             >
               <RefreshCw className="h-3 w-3 mr-1" />
-              {t.sources.retry}
+              {t('sources.retry')}
             </Button>
           </div>
         )}
@@ -375,7 +375,7 @@ export function SourceCard({
         {isProcessing && statusData?.processing_info?.progress && (
           <div className="mt-3 pt-2 border-t">
             <div className="flex justify-between items-center mb-1">
-            <span className="text-xs text-gray-600">{t.common.progress}</span>
+            <span className="text-xs text-gray-600">{t('common.progress')}</span>
               <span className="text-xs text-gray-600">
                 {Math.round(statusData.processing_info.progress as number)}%
               </span>
diff --git a/frontend/src/components/sources/steps/NotebooksStep.tsx b/frontend/src/components/sources/steps/NotebooksStep.tsx
index 50c9c2d..95bfe8a 100644
--- a/frontend/src/components/sources/steps/NotebooksStep.tsx
+++ b/frontend/src/components/sources/steps/NotebooksStep.tsx
@@ -28,15 +28,15 @@ export function NotebooksStep({
   return (
     <div className="space-y-6">
       <FormSection
-        title={`${t.notebooks.title} (${t.common.optional})`}
-        description={t.sources.addExistingDesc}
+        title={`${t('notebooks.title')} (${t('common.optional')})`}
+        description={t('sources.addExistingDesc')}
       >
         <CheckboxList
           items={notebookItems}
           selectedIds={selectedNotebooks}
           onToggle={onToggleNotebook}
           loading={loading}
-          emptyMessage={t.sources.noNotebooksFound}
+          emptyMessage={t('sources.noNotebooksFound')}
         />
       </FormSection>
     </div>
diff --git a/frontend/src/components/sources/steps/ProcessingStep.tsx b/frontend/src/components/sources/steps/ProcessingStep.tsx
index a8cba9b..3c3d793 100644
--- a/frontend/src/components/sources/steps/ProcessingStep.tsx
+++ b/frontend/src/components/sources/steps/ProcessingStep.tsx
@@ -47,21 +47,21 @@ export function ProcessingStep({
   return (
     <div className="space-y-8">
       <FormSection
-        title={`${t.navigation.transformations} (${t.common.optional})`}
-        description={t.sources.processDescription}
+        title={`${t('navigation.transformations')} (${t('common.optional')})`}
+        description={t('sources.processDescription')}
       >
         <CheckboxList
           items={transformationItems}
           selectedIds={selectedTransformations}
           onToggle={onToggleTransformation}
           loading={loading}
-          emptyMessage={t.common.noMatches}
+          emptyMessage={t('common.noMatches')}
         />
       </FormSection>
 
       <FormSection
-        title={t.navigation.settings}
-        description={t.sources.processDescription}
+        title={t('navigation.settings')}
+        description={t('sources.processDescription')}
       >
         <div className="space-y-4">
           {settings?.default_embedding_option === 'ask' && (
@@ -80,9 +80,9 @@ export function ProcessingStep({
                     className="mt-0.5"
                   />
                   <div className="flex-1">
-                    <span className="text-sm font-medium block">{t.sources.enableEmbedding}</span>
+                    <span className="text-sm font-medium block">{t('sources.enableEmbedding')}</span>
                     <p className="text-xs text-muted-foreground mt-1">
-                      {t.sources.embeddingDesc}
+                      {t('sources.embeddingDesc')}
                     </p>
                   </div>
                 </label>
@@ -95,10 +95,10 @@ export function ProcessingStep({
               <div className="flex items-start gap-3">
                 <div className="w-4 h-4 bg-primary rounded-full mt-0.5 flex-shrink-0"></div>
                 <div className="flex-1">
-                  <span className="text-sm font-medium block text-primary">{t.sources.embeddingAlways}</span>
+                  <span className="text-sm font-medium block text-primary">{t('sources.embeddingAlways')}</span>
                   <p className="text-xs text-primary mt-1">
-                    {t.sources.embeddingAlwaysDesc}
-                    {t.sources.changeInSettings} <span className="font-medium">{t.navigation.settings}</span>.
+                    {t('sources.embeddingAlwaysDesc')}
+                    {t('sources.changeInSettings')} <span className="font-medium">{t('navigation.settings')}</span>.
                   </p>
                 </div>
               </div>
@@ -110,10 +110,10 @@ export function ProcessingStep({
               <div className="flex items-start gap-3">
                 <div className="w-4 h-4 bg-muted-foreground rounded-full mt-0.5 flex-shrink-0"></div>
                 <div className="flex-1">
-                  <span className="text-sm font-medium block text-foreground">{t.sources.embeddingNever}</span>
+                  <span className="text-sm font-medium block text-foreground">{t('sources.embeddingNever')}</span>
                   <p className="text-xs text-muted-foreground mt-1">
-                    {t.sources.embeddingNeverDesc}
-                    {t.sources.changeInSettings} <span className="font-medium">{t.navigation.settings}</span>.
+                    {t('sources.embeddingNeverDesc')}
+                    {t('sources.changeInSettings')} <span className="font-medium">{t('navigation.settings')}</span>.
                   </p>
                 </div>
               </div>
diff --git a/frontend/src/components/sources/steps/SourceTypeStep.tsx b/frontend/src/components/sources/steps/SourceTypeStep.tsx
index a4c4756..f706422 100644
--- a/frontend/src/components/sources/steps/SourceTypeStep.tsx
+++ b/frontend/src/components/sources/steps/SourceTypeStep.tsx
@@ -63,26 +63,26 @@ export function parseAndValidateUrls(text: string): {
   return { valid, invalid }
 }
 
-import { TranslationKeys } from '@/lib/locales'
+import type { TFunction } from 'i18next'
 
-const getSourceTypes = (t: TranslationKeys) => [
+const getSourceTypes = (t: TFunction) => [
   {
     value: 'link' as const,
-    label: t.sources.addUrl,
+    label: t('sources.addUrl'),
     icon: LinkIcon,
-    description: t.sources.processDescription,
+    description: t('sources.processDescription'),
   },
   {
     value: 'upload' as const,
-    label: t.sources.uploadFile,
+    label: t('sources.uploadFile'),
     icon: FileIcon,
-    description: t.sources.processDescription,
+    description: t('sources.processDescription'),
   },
   {
     value: 'text' as const,
-    label: t.sources.enterText,
+    label: t('sources.enterText'),
     icon: FileTextIcon,
-    description: t.sources.processDescription,
+    description: t('sources.processDescription'),
   },
 ]
 
@@ -156,8 +156,8 @@ export function SourceTypeStep({ control, register, setValue, errors, urlValidat
   return (
     <div className="space-y-6">
       <FormSection
-        title={t.sources.title}
-        description={t.sources.processDescription}
+        title={t('sources.title')}
+        description={t('sources.processDescription')}
       >
         <Controller
           control={control}
@@ -188,11 +188,11 @@ export function SourceTypeStep({ control, register, setValue, errors, urlValidat
                   {type.value === 'link' && (
                     <div>
                       <div className="flex items-center justify-between mb-2">
-                        <Label htmlFor="url">{t.sources.urlLabel}</Label>
+                        <Label htmlFor="url">{t('sources.urlLabel')}</Label>
                         {urlCount > 0 && (
                           <Badge variant={isOverLimit ? "destructive" : "secondary"}>
-                            {t.sources.urlsCount.replace('{count}', urlCount.toString())}
-                            {isOverLimit && ` (${t.sources.maxItems.replace('{count}', MAX_BATCH_SIZE.toString())})`}
+                            {t('sources.urlsCount').replace('{count}', urlCount.toString())}
+                            {isOverLimit && ` (${t('sources.maxItems').replace('{count}', MAX_BATCH_SIZE.toString())})`}
                           </Badge>
                         )}
                       </div>
@@ -201,12 +201,12 @@ export function SourceTypeStep({ control, register, setValue, errors, urlValidat
                         {...register('url', {
                           onChange: () => onClearUrlErrors?.()
                         })}
-                        placeholder={t.sources.enterUrlsPlaceholder}
+                        placeholder={t('sources.enterUrlsPlaceholder')}
                         rows={urlCount > 1 ? 6 : 2}
                         className="font-mono text-sm"
                       />
                       <p className="text-xs text-muted-foreground mt-1">
-                        {t.sources.batchUrlHint}
+                        {t('sources.batchUrlHint')}
                       </p>
                       {errors.url && (
                         <p className="text-sm text-destructive mt-1">{errors.url.message}</p>
@@ -214,20 +214,20 @@ export function SourceTypeStep({ control, register, setValue, errors, urlValidat
                       {urlValidationErrors && urlValidationErrors.length > 0 && (
                         <div className="mt-2 p-3 bg-destructive/10 rounded-md border border-destructive/20">
                           <p className="text-sm font-medium text-destructive mb-2">
-                            {t.sources.invalidUrlsDetected}
+                            {t('sources.invalidUrlsDetected')}
                           </p>
                           <ul className="space-y-1">
                             {urlValidationErrors.map((error, idx) => (
                               <li key={idx} className="text-xs text-destructive flex items-start gap-2">
                                 <span className="font-mono bg-destructive/20 px-1 rounded">
-                                  {t.sources.lineLabel.replace('{line}', error.line.toString())}
+                                  {t('sources.lineLabel').replace('{line}', error.line.toString())}
                                 </span>
                                 <span className="truncate">{error.url}</span>
                               </li>
                             ))}
                           </ul>
                           <p className="text-xs text-muted-foreground mt-2">
-                            {t.sources.fixInvalidUrls}
+                            {t('sources.fixInvalidUrls')}
                           </p>
                         </div>
                       )}
@@ -237,11 +237,11 @@ export function SourceTypeStep({ control, register, setValue, errors, urlValidat
                   {type.value === 'upload' && (
                     <div>
                       <div className="flex items-center justify-between mb-2">
-                        <Label htmlFor="file">{t.sources.fileLabel}</Label>
+                        <Label htmlFor="file">{t('sources.fileLabel')}</Label>
                         {fileCount > 0 && (
                           <Badge variant={isOverLimit ? "destructive" : "secondary"}>
-                            {t.sources.filesCount.replace('{count}', fileCount.toString())}
-                            {isOverLimit && ` (${t.sources.maxItems.replace('{count}', MAX_BATCH_SIZE.toString())})`}
+                            {t('sources.filesCount').replace('{count}', fileCount.toString())}
+                            {isOverLimit && ` (${t('sources.maxItems').replace('{count}', MAX_BATCH_SIZE.toString())})`}
                           </Badge>
                         )}
                       </div>
@@ -253,11 +253,11 @@ export function SourceTypeStep({ control, register, setValue, errors, urlValidat
                         accept=".pdf,.doc,.docx,.pptx,.ppt,.xlsx,.xls,.txt,.md,.epub,.mp4,.avi,.mov,.wmv,.mp3,.wav,.m4a,.aac,.jpg,.jpeg,.png,.tiff,.zip,.tar,.gz,.html"
                       />
                       <p className="text-xs text-muted-foreground mt-1">
-                        {t.sources.selectMultipleFilesHint}
+                        {t('sources.selectMultipleFilesHint')}
                       </p>
                       {fileCount > 1 && fileInput instanceof FileList && (
                         <div className="mt-2 p-3 bg-muted rounded-md">
-                          <p className="text-xs font-medium mb-2">{t.sources.selectedFiles}</p>
+                          <p className="text-xs font-medium mb-2">{t('sources.selectedFiles')}</p>
                           <ul className="space-y-1 max-h-32 overflow-y-auto">
                             {Array.from(fileInput).map((file, idx) => (
                               <li key={idx} className="text-xs text-muted-foreground flex items-center gap-2">
@@ -276,7 +276,7 @@ export function SourceTypeStep({ control, register, setValue, errors, urlValidat
                       )}
                       {isOverLimit && selectedType === 'upload' && (
                         <p className="text-sm text-destructive mt-1">
-                          {t.sources.maxFilesAllowed.replace('{count}', MAX_BATCH_SIZE.toString())}
+                          {t('sources.maxFilesAllowed').replace('{count}', MAX_BATCH_SIZE.toString())}
                         </p>
                       )}
                     </div>
@@ -284,18 +284,18 @@ export function SourceTypeStep({ control, register, setValue, errors, urlValidat
                   
                   {type.value === 'text' && (
                     <div>
-                      <Label htmlFor="content" className="mb-2 block">{t.sources.textContentLabel}</Label>
+                      <Label htmlFor="content" className="mb-2 block">{t('sources.textContentLabel')}</Label>
                       {hasHtmlContent && (
                         <div className="mb-2 p-2 bg-blue-50 dark:bg-blue-950 border border-blue-200 dark:border-blue-800 rounded-md">
                           <p className="text-sm text-blue-700 dark:text-blue-300">
-                            {t.sources.htmlDetected}
+                            {t('sources.htmlDetected')}
                           </p>
                         </div>
                       )}
                       <Textarea
                         id="content"
                         {...register('content')}
-                        placeholder={t.sources.textPlaceholder}
+                        placeholder={t('sources.textPlaceholder')}
                         rows={6}
                         onPaste={handleTextPaste}
                       />
@@ -318,16 +318,16 @@ export function SourceTypeStep({ control, register, setValue, errors, urlValidat
       {!isBatchMode && (
         <FormSection
           htmlFor="source-title"
-          title={selectedType === 'text' ? `${t.common.title} *` : `${t.common.title} (${t.common.optional})`}
+          title={selectedType === 'text' ? `${t('common.title')} *` : `${t('common.title')} (${t('common.optional')})`}
           description={selectedType === 'text'
-            ? t.sources.titleRequired
-            : t.sources.titleGenerated
+            ? t('sources.titleRequired')
+            : t('sources.titleGenerated')
           }
         >
           <Input
             id="source-title"
             {...register('title')}
-            placeholder={t.sources.titlePlaceholder}
+            placeholder={t('sources.titlePlaceholder')}
             autoComplete="off"
           />
           {errors.title && (
@@ -340,14 +340,14 @@ export function SourceTypeStep({ control, register, setValue, errors, urlValidat
       {isBatchMode && (
         <div className="p-4 bg-primary/5 border border-primary/20 rounded-lg">
           <div className="flex items-center gap-2 mb-2">
-            <Badge variant="default">{t.common.batchMode}</Badge>
+            <Badge variant="default">{t('common.batchMode')}</Badge>
             <span className="text-sm font-medium">
-              {t.sources.batchCount.replace('{count}', itemCount.toString()).replace('{type}', selectedType === 'link' ? t.sources.addUrl : t.sources.uploadFile)}
+              {t('sources.batchCount').replace('{count}', itemCount.toString()).replace('{type}', selectedType === 'link' ? t('sources.addUrl') : t('sources.uploadFile'))}
             </span>
           </div>
           <p className="text-xs text-muted-foreground">
-            {t.sources.batchTitlesAuto}
-            {t.sources.batchCommonSettings}
+            {t('sources.batchTitlesAuto')}
+            {t('sources.batchCommonSettings')}
           </p>
         </div>
       )}
diff --git a/frontend/src/components/ui/dialog.tsx b/frontend/src/components/ui/dialog.tsx
index 14bfaa7..55bb7d5 100644
--- a/frontend/src/components/ui/dialog.tsx
+++ b/frontend/src/components/ui/dialog.tsx
@@ -72,7 +72,7 @@ const DialogContent = ({
         {showCloseButton && (
           <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
             <X className="h-4 w-4" />
-            <span className="sr-only">{t?.common?.close || 'Close'}</span>
+            <span className="sr-only">{t('common.close')}</span>
           </DialogPrimitive.Close>
         )}
       </DialogPrimitive.Content>
diff --git a/frontend/src/lib/hooks/use-credentials.ts b/frontend/src/lib/hooks/use-credentials.ts
index f514f37..3524ed9 100644
--- a/frontend/src/lib/hooks/use-credentials.ts
+++ b/frontend/src/lib/hooks/use-credentials.ts
@@ -87,14 +87,14 @@ export function useCreateCredential() {
       queryClient.invalidateQueries({ queryKey: CREDENTIAL_QUERY_KEYS.all })
       queryClient.invalidateQueries({ queryKey: MODEL_QUERY_KEYS.providers })
       toast({
-        title: t.common.success,
-        description: t.apiKeys.configSaveSuccess,
+        title: t('common.success'),
+        description: t('apiKeys.configSaveSuccess'),
       })
     },
     onError: (error: unknown) => {
       toast({
-        title: t.common.error,
-        description: getApiErrorKey(error, t.common.error),
+        title: t('common.error'),
+        description: getApiErrorKey(error, t('common.error')),
         variant: 'destructive',
       })
     },
@@ -121,14 +121,14 @@ export function useUpdateCredential() {
       queryClient.invalidateQueries({ queryKey: CREDENTIAL_QUERY_KEYS.all })
       queryClient.invalidateQueries({ queryKey: MODEL_QUERY_KEYS.providers })
       toast({
-        title: t.common.success,
-        description: t.apiKeys.configUpdateSuccess,
+        title: t('common.success'),
+        description: t('apiKeys.configUpdateSuccess'),
       })
     },
     onError: (error: unknown) => {
       toast({
-        title: t.common.error,
-        description: getApiErrorKey(error, t.common.error),
+        title: t('common.error'),
+        description: getApiErrorKey(error, t('common.error')),
         variant: 'destructive',
       })
     },
@@ -156,14 +156,14 @@ export function useDeleteCredential() {
       queryClient.invalidateQueries({ queryKey: MODEL_QUERY_KEYS.models })
       queryClient.invalidateQueries({ queryKey: MODEL_QUERY_KEYS.providers })
       toast({
-        title: t.common.success,
-        description: t.apiKeys.configDeleteSuccess,
+        title: t('common.success'),
+        description: t('apiKeys.configDeleteSuccess'),
       })
     },
     onError: (error: unknown) => {
       toast({
-        title: t.common.error,
-        description: getApiErrorKey(error, t.common.error),
+        title: t('common.error'),
+        description: getApiErrorKey(error, t('common.error')),
         variant: 'destructive',
       })
     },
@@ -184,21 +184,21 @@ export function useTestCredential() {
       setTestResults(prev => ({ ...prev, [credentialId]: result }))
       if (result.success) {
         toast({
-          title: t.common.success,
-          description: t.apiKeys.testSuccess,
+          title: t('common.success'),
+          description: t('apiKeys.testSuccess'),
         })
       } else {
         toast({
-          title: t.common.error,
-          description: result.message || t.apiKeys.testFailed,
+          title: t('common.error'),
+          description: result.message || t('apiKeys.testFailed'),
           variant: 'destructive',
         })
       }
     },
     onError: (error: unknown) => {
       toast({
-        title: t.common.error,
-        description: getApiErrorKey(error, t.apiKeys.testFailed),
+        title: t('common.error'),
+        description: getApiErrorKey(error, t('apiKeys.testFailed')),
         variant: 'destructive',
       })
     },
@@ -229,8 +229,8 @@ export function useDiscoverModels() {
     mutationFn: (credentialId: string) => credentialsApi.discover(credentialId),
     onError: (error: unknown) => {
       toast({
-        title: t.common.error,
-        description: getApiErrorKey(error, t.apiKeys.syncFailed),
+        title: t('common.error'),
+        description: getApiErrorKey(error, t('apiKeys.syncFailed')),
         variant: 'destructive',
       })
     },
@@ -259,22 +259,22 @@ export function useRegisterModels() {
 
       if (result.created > 0) {
         toast({
-          title: t.common.success,
-          description: t.apiKeys.syncSuccess
+          title: t('common.success'),
+          description: t('apiKeys.syncSuccess')
             .replace('{discovered}', (result.created + result.existing).toString())
             .replace('{new}', result.created.toString()),
         })
       } else {
         toast({
-          title: t.common.success,
-          description: t.apiKeys.syncNoNew.replace('{count}', result.existing.toString()),
+          title: t('common.success'),
+          description: t('apiKeys.syncNoNew').replace('{count}', result.existing.toString()),
         })
       }
     },
     onError: (error: unknown) => {
       toast({
-        title: t.common.error,
-        description: getApiErrorKey(error, t.apiKeys.syncFailed),
+        title: t('common.error'),
+        description: getApiErrorKey(error, t('apiKeys.syncFailed')),
         variant: 'destructive',
       })
     },
@@ -303,31 +303,31 @@ export function useMigrateFromEnv() {
 
       if (errorCount > 0 && migratedCount === 0) {
         toast({
-          title: t.common.error,
-          description: t.apiKeys.migrationErrors.replace('{count}', errorCount.toString()),
+          title: t('common.error'),
+          description: t('apiKeys.migrationErrors').replace('{count}', errorCount.toString()),
           variant: 'destructive',
         })
       } else if (migratedCount > 0 && errorCount > 0) {
         toast({
-          title: t.common.success,
-          description: `${t.apiKeys.migrationSuccess.replace('{count}', migratedCount.toString())}. ${t.apiKeys.migrationErrors.replace('{count}', errorCount.toString())}`,
+          title: t('common.success'),
+          description: `${t('apiKeys.migrationSuccess').replace('{count}', migratedCount.toString())}. ${t('apiKeys.migrationErrors').replace('{count}', errorCount.toString())}`,
         })
       } else if (migratedCount > 0) {
         toast({
-          title: t.common.success,
-          description: t.apiKeys.migrationSuccess.replace('{count}', migratedCount.toString()),
+          title: t('common.success'),
+          description: t('apiKeys.migrationSuccess').replace('{count}', migratedCount.toString()),
         })
       } else {
         toast({
-          title: t.common.success,
-          description: t.apiKeys.migrationNothingToMigrate,
+          title: t('common.success'),
+          description: t('apiKeys.migrationNothingToMigrate'),
         })
       }
     },
     onError: (error: unknown) => {
       toast({
-        title: t.common.error,
-        description: getApiErrorKey(error, t.common.error),
+        title: t('common.error'),
+        description: getApiErrorKey(error, t('common.error')),
         variant: 'destructive',
       })
     },
@@ -356,31 +356,31 @@ export function useMigrateFromProviderConfig() {
 
       if (errorCount > 0 && migratedCount === 0) {
         toast({
-          title: t.common.error,
-          description: t.apiKeys.migrationErrors.replace('{count}', errorCount.toString()),
+          title: t('common.error'),
+          description: t('apiKeys.migrationErrors').replace('{count}', errorCount.toString()),
           variant: 'destructive',
         })
       } else if (migratedCount > 0 && errorCount > 0) {
         toast({
-          title: t.common.success,
-          description: `${t.apiKeys.migrationSuccess.replace('{count}', migratedCount.toString())}. ${t.apiKeys.migrationErrors.replace('{count}', errorCount.toString())}`,
+          title: t('common.success'),
+          description: `${t('apiKeys.migrationSuccess').replace('{count}', migratedCount.toString())}. ${t('apiKeys.migrationErrors').replace('{count}', errorCount.toString())}`,
         })
       } else if (migratedCount > 0) {
         toast({
-          title: t.common.success,
-          description: t.apiKeys.migrationSuccess.replace('{count}', migratedCount.toString()),
+          title: t('common.success'),
+          description: t('apiKeys.migrationSuccess').replace('{count}', migratedCount.toString()),
         })
       } else {
         toast({
-          title: t.common.success,
-          description: t.apiKeys.migrationNothingToMigrate,
+          title: t('common.success'),
+          description: t('apiKeys.migrationNothingToMigrate'),
         })
       }
     },
     onError: (error: unknown) => {
       toast({
-        title: t.common.error,
-        description: getApiErrorKey(error, t.common.error),
+        title: t('common.error'),
+        description: getApiErrorKey(error, t('common.error')),
         variant: 'destructive',
       })
     },
diff --git a/frontend/src/lib/hooks/use-models.ts b/frontend/src/lib/hooks/use-models.ts
index ff38c0c..3f98da5 100644
--- a/frontend/src/lib/hooks/use-models.ts
+++ b/frontend/src/lib/hooks/use-models.ts
@@ -38,14 +38,14 @@ export function useCreateModel() {
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: MODEL_QUERY_KEYS.models })
       toast({
-        title: t.common.success,
-        description: t.models.saveSuccess,
+        title: t('common.success'),
+        description: t('models.saveSuccess'),
       })
     },
     onError: (error: unknown) => {
       toast({
-        title: t.common.error,
-        description: getApiErrorKey(error, t.common.error),
+        title: t('common.error'),
+        description: getApiErrorKey(error, t('common.error')),
         variant: 'destructive',
       })
     },
@@ -64,14 +64,14 @@ export function useDeleteModel() {
       queryClient.invalidateQueries({ queryKey: MODEL_QUERY_KEYS.defaults })
       queryClient.invalidateQueries({ queryKey: ['credentials'] })
       toast({
-        title: t.common.success,
-        description: t.models.deleteSuccess,
+        title: t('common.success'),
+        description: t('models.deleteSuccess'),
       })
     },
     onError: (error: unknown) => {
       toast({
-        title: t.common.error,
-        description: getApiErrorKey(error, t.common.error),
+        title: t('common.error'),
+        description: getApiErrorKey(error, t('common.error')),
         variant: 'destructive',
       })
     },
@@ -95,14 +95,14 @@ export function useUpdateModelDefaults() {
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: MODEL_QUERY_KEYS.defaults })
       toast({
-        title: t.common.success,
-        description: t.models.saveSuccess,
+        title: t('common.success'),
+        description: t('models.saveSuccess'),
       })
     },
     onError: (error: unknown) => {
       toast({
-        title: t.common.error,
-        description: getApiErrorKey(error, t.common.error),
+        title: t('common.error'),
+        description: getApiErrorKey(error, t('common.error')),
         variant: 'destructive',
       })
     },
@@ -131,26 +131,26 @@ export function useAutoAssignDefaults() {
 
       if (assignedCount > 0) {
         toast({
-          title: t.common.success,
-          description: t.models.autoAssignSuccess.replace('{count}', assignedCount.toString()),
+          title: t('common.success'),
+          description: t('models.autoAssignSuccess').replace('{count}', assignedCount.toString()),
         })
       } else if (missingCount > 0) {
         toast({
-          title: t.common.warning,
-          description: t.models.autoAssignNoModels,
+          title: t('common.warning'),
+          description: t('models.autoAssignNoModels'),
           variant: 'destructive',
         })
       } else {
         toast({
-          title: t.common.success,
-          description: t.models.autoAssignAlreadySet,
+          title: t('common.success'),
+          description: t('models.autoAssignAlreadySet'),
         })
       }
     },
     onError: (error: unknown) => {
       toast({
-        title: t.common.error,
-        description: getApiErrorKey(error, t.common.error),
+        title: t('common.error'),
+        description: getApiErrorKey(error, t('common.error')),
         variant: 'destructive',
       })
     },
diff --git a/frontend/src/lib/hooks/use-notebooks.ts b/frontend/src/lib/hooks/use-notebooks.ts
index 9315c32..fa97bf2 100644
--- a/frontend/src/lib/hooks/use-notebooks.ts
+++ b/frontend/src/lib/hooks/use-notebooks.ts
@@ -31,14 +31,14 @@ export function useCreateNotebook() {
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: QUERY_KEYS.notebooks })
       toast({
-        title: t.common.success,
-        description: t.notebooks.createSuccess,
+        title: t('common.success'),
+        description: t('notebooks.createSuccess'),
       })
     },
     onError: (error: unknown) => {
       toast({
-        title: t.common.error,
-        description: t(getApiErrorKey(error, t.common.error)),
+        title: t('common.error'),
+        description: t(getApiErrorKey(error, t('common.error'))),
         variant: 'destructive',
       })
     },
@@ -57,14 +57,14 @@ export function useUpdateNotebook() {
       queryClient.invalidateQueries({ queryKey: QUERY_KEYS.notebooks })
       queryClient.invalidateQueries({ queryKey: QUERY_KEYS.notebook(id) })
       toast({
-        title: t.common.success,
-        description: t.notebooks.updateSuccess,
+        title: t('common.success'),
+        description: t('notebooks.updateSuccess'),
       })
     },
     onError: (error: unknown) => {
       toast({
-        title: t.common.error,
-        description: t(getApiErrorKey(error, t.common.error)),
+        title: t('common.error'),
+        description: t(getApiErrorKey(error, t('common.error'))),
         variant: 'destructive',
       })
     },
@@ -97,14 +97,14 @@ export function useDeleteNotebook() {
       // Also invalidate sources since some may have been deleted
       queryClient.invalidateQueries({ queryKey: ['sources'] })
       toast({
-        title: t.common.success,
-        description: t.notebooks.deleteSuccess,
+        title: t('common.success'),
+        description: t('notebooks.deleteSuccess'),
       })
     },
     onError: (error: unknown) => {
       toast({
-        title: t.common.error,
-        description: t(getApiErrorKey(error, t.common.error)),
+        title: t('common.error'),
+        description: t(getApiErrorKey(error, t('common.error'))),
         variant: 'destructive',
       })
     },
diff --git a/frontend/src/lib/hooks/use-notes.ts b/frontend/src/lib/hooks/use-notes.ts
index f3fab05..c73d883 100644
--- a/frontend/src/lib/hooks/use-notes.ts
+++ b/frontend/src/lib/hooks/use-notes.ts
@@ -35,14 +35,14 @@ export function useCreateNote() {
         queryKey: QUERY_KEYS.notes(variables.notebook_id) 
       })
       toast({
-        title: t.common.success,
-        description: t.notebooks.noteCreatedSuccess,
+        title: t('common.success'),
+        description: t('notebooks.noteCreatedSuccess'),
       })
     },
     onError: (error: unknown) => {
       toast({
-        title: t.common.error,
-        description: getApiErrorKey(error, t.notebooks.failedToCreateNote),
+        title: t('common.error'),
+        description: getApiErrorKey(error, t('notebooks.failedToCreateNote')),
         variant: 'destructive',
       })
     },
@@ -61,14 +61,14 @@ export function useUpdateNote() {
       queryClient.invalidateQueries({ queryKey: QUERY_KEYS.notes() })
       queryClient.invalidateQueries({ queryKey: QUERY_KEYS.note(id) })
       toast({
-        title: t.common.success,
-        description: t.notebooks.noteUpdatedSuccess,
+        title: t('common.success'),
+        description: t('notebooks.noteUpdatedSuccess'),
       })
     },
     onError: (error: unknown) => {
       toast({
-        title: t.common.error,
-        description: getApiErrorKey(error, t.notebooks.failedToUpdateNote),
+        title: t('common.error'),
+        description: getApiErrorKey(error, t('notebooks.failedToUpdateNote')),
         variant: 'destructive',
       })
     },
@@ -86,14 +86,14 @@ export function useDeleteNote() {
       // Invalidate all notes queries (with and without notebook IDs)
       queryClient.invalidateQueries({ queryKey: ['notes'] })
       toast({
-        title: t.common.success,
-        description: t.notebooks.noteDeletedSuccess,
+        title: t('common.success'),
+        description: t('notebooks.noteDeletedSuccess'),
       })
     },
     onError: (error: unknown) => {
       toast({
-        title: t.common.error,
-        description: getApiErrorKey(error, t.notebooks.failedToDeleteNote),
+        title: t('common.error'),
+        description: getApiErrorKey(error, t('notebooks.failedToDeleteNote')),
         variant: 'destructive',
       })
     },
diff --git a/frontend/src/lib/hooks/use-podcasts.ts b/frontend/src/lib/hooks/use-podcasts.ts
index 491fa53..3f24e97 100644
--- a/frontend/src/lib/hooks/use-podcasts.ts
+++ b/frontend/src/lib/hooks/use-podcasts.ts
@@ -98,14 +98,14 @@ export function useRetryPodcastEpisode() {
     onSuccess: async () => {
       await queryClient.refetchQueries({ queryKey: QUERY_KEYS.podcastEpisodes })
       toast({
-        title: t.podcasts.retryStarted,
-        description: t.podcasts.retryStartedDesc,
+        title: t('podcasts.retryStarted'),
+        description: t('podcasts.retryStartedDesc'),
       })
     },
     onError: (error: unknown) => {
       toast({
-        title: t.podcasts.failedToRetry,
-        description: getApiErrorKey(error, t.common.error),
+        title: t('podcasts.failedToRetry'),
+        description: getApiErrorKey(error, t('common.error')),
         variant: 'destructive',
       })
     },
@@ -122,14 +122,14 @@ export function useDeletePodcastEpisode() {
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: QUERY_KEYS.podcastEpisodes })
       toast({
-        title: t.podcasts.episodeDeleted,
-        description: t.podcasts.episodeDeletedDesc,
+        title: t('podcasts.episodeDeleted'),
+        description: t('podcasts.episodeDeletedDesc'),
       })
     },
     onError: (error: unknown) => {
       toast({
-        title: t.podcasts.failedToDeleteEpisode,
-        description: getApiErrorKey(error, t.common.error),
+        title: t('podcasts.failedToDeleteEpisode'),
+        description: getApiErrorKey(error, t('common.error')),
         variant: 'destructive',
       })
     },
@@ -160,14 +160,14 @@ export function useCreateEpisodeProfile() {
       queryClient.invalidateQueries({ queryKey: QUERY_KEYS.episodeProfiles })
       queryClient.invalidateQueries({ queryKey: QUERY_KEYS.podcastEpisodes })
       toast({
-        title: t.podcasts.profileCreated,
-        description: t.podcasts.profileCreatedDesc,
+        title: t('podcasts.profileCreated'),
+        description: t('podcasts.profileCreatedDesc'),
       })
     },
     onError: (error: unknown) => {
       toast({
-        title: t.podcasts.failedToCreateProfile,
-        description: getApiErrorKey(error, t.common.error),
+        title: t('podcasts.failedToCreateProfile'),
+        description: getApiErrorKey(error, t('common.error')),
         variant: 'destructive',
       })
     },
@@ -191,14 +191,14 @@ export function useUpdateEpisodeProfile() {
       queryClient.invalidateQueries({ queryKey: QUERY_KEYS.episodeProfiles })
       queryClient.invalidateQueries({ queryKey: QUERY_KEYS.podcastEpisodes })
       toast({
-        title: t.podcasts.profileUpdated,
-        description: t.podcasts.profileUpdatedDesc,
+        title: t('podcasts.profileUpdated'),
+        description: t('podcasts.profileUpdatedDesc'),
       })
     },
     onError: (error: unknown) => {
       toast({
-        title: t.podcasts.failedToUpdateProfile,
-        description: getApiErrorKey(error, t.common.error),
+        title: t('podcasts.failedToUpdateProfile'),
+        description: getApiErrorKey(error, t('common.error')),
         variant: 'destructive',
       })
     },
@@ -216,14 +216,14 @@ export function useDeleteEpisodeProfile() {
       queryClient.invalidateQueries({ queryKey: QUERY_KEYS.episodeProfiles })
       queryClient.invalidateQueries({ queryKey: QUERY_KEYS.podcastEpisodes })
       toast({
-        title: t.podcasts.profileDeleted,
-        description: t.podcasts.profileDeletedDesc,
+        title: t('podcasts.profileDeleted'),
+        description: t('podcasts.profileDeletedDesc'),
       })
     },
     onError: (error: unknown) => {
       toast({
-        title: t.podcasts.failedToDeleteProfile,
-        description: getApiErrorKey(error, t.podcasts.failedToDeleteProfileDesc),
+        title: t('podcasts.failedToDeleteProfile'),
+        description: getApiErrorKey(error, t('podcasts.failedToDeleteProfileDesc')),
         variant: 'destructive',
       })
     },
@@ -242,14 +242,14 @@ export function useDuplicateEpisodeProfile() {
       queryClient.invalidateQueries({ queryKey: QUERY_KEYS.episodeProfiles })
       queryClient.invalidateQueries({ queryKey: QUERY_KEYS.podcastEpisodes })
       toast({
-        title: t.podcasts.profileDuplicated,
-        description: t.podcasts.profileDuplicatedDesc,
+        title: t('podcasts.profileDuplicated'),
+        description: t('podcasts.profileDuplicatedDesc'),
       })
     },
     onError: (error: unknown) => {
       toast({
-        title: t.podcasts.failedToDuplicateProfile,
-        description: getApiErrorKey(error, t.common.error),
+        title: t('podcasts.failedToDuplicateProfile'),
+        description: getApiErrorKey(error, t('common.error')),
         variant: 'destructive',
       })
     },
@@ -289,14 +289,14 @@ export function useCreateSpeakerProfile() {
       queryClient.invalidateQueries({ queryKey: QUERY_KEYS.episodeProfiles })
       queryClient.invalidateQueries({ queryKey: QUERY_KEYS.podcastEpisodes })
       toast({
-        title: t.podcasts.speakerCreated,
-        description: t.podcasts.speakerCreatedDesc,
+        title: t('podcasts.speakerCreated'),
+        description: t('podcasts.speakerCreatedDesc'),
       })
     },
     onError: (error: unknown) => {
       toast({
-        title: t.podcasts.failedToCreateSpeaker,
-        description: getApiErrorKey(error, t.common.error),
+        title: t('podcasts.failedToCreateSpeaker'),
+        description: getApiErrorKey(error, t('common.error')),
         variant: 'destructive',
       })
     },
@@ -321,14 +321,14 @@ export function useUpdateSpeakerProfile() {
       queryClient.invalidateQueries({ queryKey: QUERY_KEYS.episodeProfiles })
       queryClient.invalidateQueries({ queryKey: QUERY_KEYS.podcastEpisodes })
       toast({
-        title: t.podcasts.speakerUpdated,
-        description: t.podcasts.speakerUpdatedDesc,
+        title: t('podcasts.speakerUpdated'),
+        description: t('podcasts.speakerUpdatedDesc'),
       })
     },
     onError: (error: unknown) => {
       toast({
-        title: t.podcasts.failedToUpdateSpeaker,
-        description: getApiErrorKey(error, t.common.error),
+        title: t('podcasts.failedToUpdateSpeaker'),
+        description: getApiErrorKey(error, t('common.error')),
         variant: 'destructive',
       })
     },
@@ -347,14 +347,14 @@ export function useDeleteSpeakerProfile() {
       queryClient.invalidateQueries({ queryKey: QUERY_KEYS.episodeProfiles })
       queryClient.invalidateQueries({ queryKey: QUERY_KEYS.podcastEpisodes })
       toast({
-        title: t.podcasts.speakerDeleted,
-        description: t.podcasts.speakerDeletedDesc,
+        title: t('podcasts.speakerDeleted'),
+        description: t('podcasts.speakerDeletedDesc'),
       })
     },
     onError: (error: unknown) => {
       toast({
-        title: t.podcasts.failedToDeleteSpeaker,
-        description: getApiErrorKey(error, t.podcasts.failedToDeleteSpeakerDesc),
+        title: t('podcasts.failedToDeleteSpeaker'),
+        description: getApiErrorKey(error, t('podcasts.failedToDeleteSpeakerDesc')),
         variant: 'destructive',
       })
     },
@@ -372,14 +372,14 @@ export function useDuplicateSpeakerProfile() {
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: QUERY_KEYS.speakerProfiles })
       toast({
-        title: t.podcasts.speakerDuplicated,
-        description: t.podcasts.speakerDuplicatedDesc,
+        title: t('podcasts.speakerDuplicated'),
+        description: t('podcasts.speakerDuplicatedDesc'),
       })
     },
     onError: (error: unknown) => {
       toast({
-        title: t.podcasts.failedToDuplicateSpeaker,
-        description: getApiErrorKey(error, t.common.error),
+        title: t('podcasts.failedToDuplicateSpeaker'),
+        description: getApiErrorKey(error, t('common.error')),
         variant: 'destructive',
       })
     },
@@ -398,14 +398,14 @@ export function useGeneratePodcast() {
       // Immediately refetch to show the new episode
       await queryClient.refetchQueries({ queryKey: QUERY_KEYS.podcastEpisodes })
       toast({
-        title: t.podcasts.generationStarted,
-        description: t.podcasts.generationStartedDesc.replace('{name}', response.episode_name),
+        title: t('podcasts.generationStarted'),
+        description: t('podcasts.generationStartedDesc').replace('{name}', response.episode_name),
       })
     },
     onError: (error: unknown) => {
       toast({
-        title: t.podcasts.failedToStartGeneration,
-        description: getApiErrorKey(error, t.podcasts.tryAgainMoment),
+        title: t('podcasts.failedToStartGeneration'),
+        description: getApiErrorKey(error, t('podcasts.tryAgainMoment')),
         variant: 'destructive',
       })
     },
diff --git a/frontend/src/lib/hooks/use-settings.ts b/frontend/src/lib/hooks/use-settings.ts
index 181b058..f5416cc 100644
--- a/frontend/src/lib/hooks/use-settings.ts
+++ b/frontend/src/lib/hooks/use-settings.ts
@@ -23,14 +23,14 @@ export function useUpdateSettings() {
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: QUERY_KEYS.settings })
       toast({
-        title: t.common.success,
-        description: t.common.saveSuccess,
+        title: t('common.success'),
+        description: t('common.saveSuccess'),
       })
     },
     onError: (error: unknown) => {
       toast({
-        title: t.common.error,
-        description: getApiErrorKey(error, t.common.error),
+        title: t('common.error'),
+        description: getApiErrorKey(error, t('common.error')),
         variant: 'destructive',
       })
     },
diff --git a/frontend/src/lib/hooks/use-sources.ts b/frontend/src/lib/hooks/use-sources.ts
index 9770298..4ceb3ae 100644
--- a/frontend/src/lib/hooks/use-sources.ts
+++ b/frontend/src/lib/hooks/use-sources.ts
@@ -126,20 +126,20 @@ export function useCreateSource() {
       // Show different messages based on processing mode
       if (variables.async_processing) {
         toast({
-          title: t.sources.sourceQueued,
-          description: t.sources.sourceQueuedDesc,
+          title: t('sources.sourceQueued'),
+          description: t('sources.sourceQueuedDesc'),
         })
       } else {
         toast({
-          title: t.common.success,
-          description: t.sources.sourceAddedSuccess,
+          title: t('common.success'),
+          description: t('sources.sourceAddedSuccess'),
         })
       }
     },
     onError: (error: unknown) => {
       toast({
-        title: t.common.error,
-        description: getApiErrorMessage(error, (key) => t(key), t.sources.failedToAddSource),
+        title: t('common.error'),
+        description: getApiErrorMessage(error, (key) => t(key), t('sources.failedToAddSource')),
         variant: 'destructive',
       })
     },
@@ -159,14 +159,14 @@ export function useUpdateSource() {
       queryClient.invalidateQueries({ queryKey: ['sources'] })
       queryClient.invalidateQueries({ queryKey: QUERY_KEYS.source(id) })
       toast({
-        title: t.common.success,
-        description: t.sources.sourceUpdatedSuccess,
+        title: t('common.success'),
+        description: t('sources.sourceUpdatedSuccess'),
       })
     },
     onError: (error: unknown) => {
       toast({
-        title: t.common.error,
-        description: getApiErrorMessage(error, (key) => t(key), t.sources.failedToUpdateSource),
+        title: t('common.error'),
+        description: getApiErrorMessage(error, (key) => t(key), t('sources.failedToUpdateSource')),
         variant: 'destructive',
       })
     },
@@ -186,14 +186,14 @@ export function useDeleteSource() {
       // Also invalidate the specific source
       queryClient.invalidateQueries({ queryKey: QUERY_KEYS.source(id) })
       toast({
-        title: t.common.success,
-        description: t.sources.sourceDeletedSuccess,
+        title: t('common.success'),
+        description: t('sources.sourceDeletedSuccess'),
       })
     },
     onError: (error: unknown) => {
       toast({
-        title: t.common.error,
-        description: getApiErrorMessage(error, (key) => t(key), t.sources.failedToDeleteSource),
+        title: t('common.error'),
+        description: getApiErrorMessage(error, (key) => t(key), t('sources.failedToDeleteSource')),
         variant: 'destructive',
       })
     },
@@ -217,14 +217,14 @@ export function useFileUpload() {
         refetchType: 'active'
       })
       toast({
-        title: t.common.success,
-        description: t.sources.fileUploadedSuccess,
+        title: t('common.success'),
+        description: t('sources.fileUploadedSuccess'),
       })
     },
     onError: (error: unknown) => {
       toast({
-        title: t.common.error,
-        description: getApiErrorMessage(error, (key) => t(key), t.sources.failedToUploadFile),
+        title: t('common.error'),
+        description: getApiErrorMessage(error, (key) => t(key), t('sources.failedToUploadFile')),
         variant: 'destructive',
       })
     },
@@ -275,14 +275,14 @@ export function useRetrySource() {
       queryClient.invalidateQueries({ queryKey: QUERY_KEYS.source(sourceId) })
 
       toast({
-        title: t.sources.sourceRequeued,
-        description: t.sources.sourceRequeuedDesc,
+        title: t('sources.sourceRequeued'),
+        description: t('sources.sourceRequeuedDesc'),
       })
     },
     onError: (error: unknown) => {
       toast({
-        title: t.common.error,
-        description: getApiErrorMessage(error, (key) => t(key), t.sources.failedToRetry),
+        title: t('common.error'),
+        description: getApiErrorMessage(error, (key) => t(key), t('sources.failedToRetry')),
         variant: 'destructive',
       })
     },
@@ -322,19 +322,19 @@ export function useAddSourcesToNotebook() {
       // Show appropriate toast based on results
       if (result.failures === 0) {
         toast({
-          title: t.common.success,
-          description: t.sources.sourcesAddedToNotebook.replace('{count}', result.successes.toString()),
+          title: t('common.success'),
+          description: t('sources.sourcesAddedToNotebook').replace('{count}', result.successes.toString()),
         })
       } else if (result.successes === 0) {
         toast({
-          title: t.common.error,
-          description: t.sources.failedToAddSourcesToNotebook,
+          title: t('common.error'),
+          description: t('sources.failedToAddSourcesToNotebook'),
           variant: 'destructive',
         })
       } else {
         toast({
-          title: t.common.success,
-          description: t.sources.partialAddSuccess
+          title: t('common.success'),
+          description: t('sources.partialAddSuccess')
             .replace('{success}', result.successes.toString())
             .replace('{failed}', result.failures.toString()),
           variant: 'default',
@@ -343,8 +343,8 @@ export function useAddSourcesToNotebook() {
     },
     onError: (error: unknown) => {
       toast({
-        title: t.common.error,
-        description: getApiErrorMessage(error, (key) => t(key), t.sources.failedToAddSourcesToNotebook),
+        title: t('common.error'),
+        description: getApiErrorMessage(error, (key) => t(key), t('sources.failedToAddSourcesToNotebook')),
         variant: 'destructive',
       })
     },
@@ -371,14 +371,14 @@ export function useRemoveSourceFromNotebook() {
       queryClient.invalidateQueries({ queryKey: QUERY_KEYS.source(sourceId) })
 
       toast({
-        title: t.common.success,
-        description: t.sources.sourceRemovedFromNotebook,
+        title: t('common.success'),
+        description: t('sources.sourceRemovedFromNotebook'),
       })
     },
     onError: (error: unknown) => {
       toast({
-        title: t.common.error,
-        description: getApiErrorMessage(error, (key) => t(key), t.sources.failedToRemoveSourceFromNotebook),
+        title: t('common.error'),
+        description: getApiErrorMessage(error, (key) => t(key), t('sources.failedToRemoveSourceFromNotebook')),
         variant: 'destructive',
       })
     },
diff --git a/frontend/src/lib/hooks/use-toast.ts b/frontend/src/lib/hooks/use-toast.ts
index 1677bcf..6b177f1 100644
--- a/frontend/src/lib/hooks/use-toast.ts
+++ b/frontend/src/lib/hooks/use-toast.ts
@@ -13,11 +13,11 @@ export function useToast() {
   return {
     toast: ({ title, description, variant = 'default' }: ToastProps) => {
       if (variant === 'destructive') {
-        sonnerToast.error(title || t.common.error, {
+        sonnerToast.error(title || t('common.error'), {
           description,
         })
       } else {
-        sonnerToast.success(title || t.common.success, {
+        sonnerToast.success(title || t('common.success'), {
           description,
         })
       }
diff --git a/frontend/src/lib/hooks/use-transformations.ts b/frontend/src/lib/hooks/use-transformations.ts
index 3022bd4..abe477e 100644
--- a/frontend/src/lib/hooks/use-transformations.ts
+++ b/frontend/src/lib/hooks/use-transformations.ts
@@ -42,13 +42,13 @@ export function useCreateTransformation() {
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: TRANSFORMATION_QUERY_KEYS.transformations })
       toast({
-        title: t.common.success,
-        description: t.transformations.createSuccess,
+        title: t('common.success'),
+        description: t('transformations.createSuccess'),
       })
     },
     onError: (error: unknown) => {
       toast({
-        title: t.common.error,
+        title: t('common.error'),
         description: getApiErrorMessage(error, (key) => t(key)),
         variant: 'destructive',
       })
@@ -68,13 +68,13 @@ export function useUpdateTransformation() {
       queryClient.invalidateQueries({ queryKey: TRANSFORMATION_QUERY_KEYS.transformations })
       queryClient.invalidateQueries({ queryKey: TRANSFORMATION_QUERY_KEYS.transformation(id) })
       toast({
-        title: t.common.success,
-        description: t.transformations.updateSuccess,
+        title: t('common.success'),
+        description: t('transformations.updateSuccess'),
       })
     },
     onError: (error: unknown) => {
       toast({
-        title: t.common.error,
+        title: t('common.error'),
         description: getApiErrorMessage(error, (key) => t(key)),
         variant: 'destructive',
       })
@@ -92,13 +92,13 @@ export function useDeleteTransformation() {
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: TRANSFORMATION_QUERY_KEYS.transformations })
       toast({
-        title: t.common.success,
-        description: t.transformations.deleteSuccess,
+        title: t('common.success'),
+        description: t('transformations.deleteSuccess'),
       })
     },
     onError: (error: unknown) => {
       toast({
-        title: t.common.error,
+        title: t('common.error'),
         description: getApiErrorMessage(error, (key) => t(key)),
         variant: 'destructive',
       })
@@ -114,7 +114,7 @@ export function useExecuteTransformation() {
     mutationFn: (data: ExecuteTransformationRequest) => transformationsApi.execute(data),
     onError: (error: unknown) => {
       toast({
-        title: t.common.error,
+        title: t('common.error'),
         description: getApiErrorMessage(error, (key) => t(key)),
         variant: 'destructive',
       })
@@ -139,13 +139,13 @@ export function useUpdateDefaultPrompt() {
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: TRANSFORMATION_QUERY_KEYS.defaultPrompt })
       toast({
-        title: t.common.success,
-        description: t.transformations.updateSuccess,
+        title: t('common.success'),
+        description: t('transformations.updateSuccess'),
       })
     },
     onError: (error: unknown) => {
       toast({
-        title: t.common.error,
+        title: t('common.error'),
         description: getApiErrorMessage(error, (key) => t(key)),
         variant: 'destructive',
       })
diff --git a/frontend/src/lib/hooks/use-translation.test.ts b/frontend/src/lib/hooks/use-translation.test.ts
index 0f35881..e2ded9e 100644
--- a/frontend/src/lib/hooks/use-translation.test.ts
+++ b/frontend/src/lib/hooks/use-translation.test.ts
@@ -1,24 +1,22 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import { renderHook, act } from '@testing-library/react'
 // Ensure we are testing the real implementation
-vi.unmock('@/lib/hooks/use-translation') 
+vi.unmock('@/lib/hooks/use-translation')
 import { useTranslation } from './use-translation'
 import { useTranslation as useI18nTranslation } from 'react-i18next'
 
-// Mock react-i18next is already done in setup.ts, 
-// but we might need to control it per test
+// Mock react-i18next
 vi.mock('react-i18next', () => ({
   useTranslation: vi.fn()
 }))
 
 describe('useTranslation Hook', () => {
   const changeLanguageMock = vi.fn()
-  
+
   beforeEach(() => {
     vi.clearAllMocks()
     ;(useI18nTranslation as unknown as { mockReturnValue: (v: unknown) => void }).mockReturnValue({
       t: (key: string) => {
-        if (key === 'common') return { appName: 'Open Notebook' }
         if (key === 'common.appName') return 'Open Notebook'
         return key
       },
@@ -29,20 +27,19 @@ describe('useTranslation Hook', () => {
     })
   })
 
-  it('should return initial translations via proxy', () => {
+  it('should return standard t() function for translations', () => {
     const { result } = renderHook(() => useTranslation())
     expect(result.current.language).toBe('en-US')
-    // Test the proxy behavior t.common.appName -> t("common.appName")
-    expect(result.current.t.common.appName).toBe('Open Notebook')
+    expect(result.current.t('common.appName')).toBe('Open Notebook')
   })
 
-  it('should allow changing language via i18n.changeLanguage', () => {
+  it('should allow changing language via setLanguage', () => {
     const { result } = renderHook(() => useTranslation())
-    
+
     act(() => {
       result.current.setLanguage('zh-CN')
     })
-    
+
     expect(changeLanguageMock).toHaveBeenCalledWith('zh-CN')
   })
 })
diff --git a/frontend/src/lib/hooks/use-translation.ts b/frontend/src/lib/hooks/use-translation.ts
index 128c044..7765b7e 100644
--- a/frontend/src/lib/hooks/use-translation.ts
+++ b/frontend/src/lib/hooks/use-translation.ts
@@ -1,132 +1,13 @@
 import { useTranslation as useI18nTranslation } from 'react-i18next'
-import { useMemo, useCallback, useRef } from 'react'
+import { useMemo, useCallback } from 'react'
 import { emitLanguageChangeEnd, emitLanguageChangeStart } from '@/lib/i18n-events'
 
 /**
- * Custom useTranslation hook that provides a Proxy-based API for accessing translations.
- * 
- * CRITICAL: The Proxy implementation must be carefully designed to avoid infinite loops
- * during language switching. Key safeguards:
- * 1. Strict depth limit (max 4 levels)
- * 2. Blocked properties list to prevent React/JS internals from triggering recursion
- * 3. Early return for missing keys
- * 4. Memoization with stable dependencies
+ * Thin wrapper around react-i18next's useTranslation hook.
+ * Returns the standard t() function along with language utilities.
  */
 export function useTranslation() {
-  const { t: i18nTranslate, i18n } = useI18nTranslation()
-  
-  // Use a ref to track the current language to avoid unnecessary Proxy recreation
-  const languageRef = useRef(i18n.language)
-  languageRef.current = i18n.language
-  
-  // Loop detection
-  const accessCounts = useRef<Record<string, number>>({})
-  const lastResetTime = useRef(Date.now())
-
-  // High-performance Recursive Proxy with strict safety limits
-  const t = useMemo(() => {
-    const i18nTranslateCopy = i18nTranslate;
-    
-    // Set of properties to completely block from Proxy traversal
-    const BLOCKED_PROPS = new Set([
-      '__proto__', '__esModule', '$$typeof', 'toJSON', 'constructor',
-      'valueOf', 'toString', 'inspect', 'nodeType', 'tagName',
-      'then', 'catch', 'finally', // Promise methods
-      'prototype', 'caller', 'callee', 'arguments', // Function props
-      'Symbol(Symbol.toStringTag)', 'Symbol(Symbol.iterator)',
-    ]);
-    
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const createProxy = (path: string, depth: number = 0): any => {
-      // SAFETY: Strict depth limit to prevent stack overflow
-      if (depth > 3) {
-        return path; // Return the path string as fallback
-      }
-      
-      // Base function for t('key') or t.path({ options })
-      const proxyTarget = (keyOrOptions?: string | unknown, options?: unknown) => {
-        if (typeof keyOrOptions === 'string') {
-          const fullPath = path ? `${path}.${keyOrOptions}` : keyOrOptions;
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          return i18nTranslateCopy(fullPath, options as any);
-        }
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        return i18nTranslateCopy(path, keyOrOptions as any);
-      };
-
-      return new Proxy(proxyTarget, {
-        get(target, prop) {
-          // Reset counters every 1s
-          const now = Date.now()
-          if (now - lastResetTime.current > 1000) {
-            accessCounts.current = {}
-            lastResetTime.current = now
-          }
-
-          if (typeof prop === 'string') {
-             const key = path ? `${path}.${prop}` : prop;
-             accessCounts.current[key] = (accessCounts.current[key] || 0) + 1;
-             
-             if (accessCounts.current[key] > 1000) {
-               console.error(`[useTranslation] INFINITE LOOP DETECTED on key: "${key}". Breaking recursion.`);
-               return key; // Force break
-             }
-          }
-
-          // Handle Symbol properties immediately
-          if (typeof prop === 'symbol') {
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            return (target as any)[prop];
-          }
-
-          if (typeof prop !== 'string') return undefined;
-
-          // Block React internals and JS built-ins
-          if (prop.startsWith('__') || prop.startsWith('@@') || BLOCKED_PROPS.has(prop)) {
-            return undefined;
-          }
-
-          const currentPath = path ? `${path}.${prop}` : prop;
-
-          // Try to get the translation first (before checking target properties,
-          // since target is a function and has built-in properties like 'name'
-          // that would shadow translation keys)
-          const result = i18nTranslateCopy(currentPath, { returnObjects: true });
-
-          // If it's a leaf string, return it directly
-          if (typeof result === 'string') {
-            return result;
-          }
-
-          // Handle String.prototype methods on the current path
-          if (prop === 'replace' || prop === 'split' || prop === 'length' ||
-              prop === 'trim' || prop === 'toLowerCase' || prop === 'toUpperCase') {
-            const translated = i18nTranslateCopy(path);
-            if (typeof translated === 'string') {
-              // eslint-disable-next-line @typescript-eslint/no-explicit-any
-              const val = (translated as any)[prop];
-              return typeof val === 'function' ? val.bind(translated) : val;
-            }
-          }
-
-          // If i18n returned the key itself (meaning not found), stop recursion
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          if ((result as any) === currentPath || result === undefined || result === null) {
-            return currentPath; // Return path as fallback instead of continuing
-          }
-
-          // If it's an object (nested structure), continue with depth limit
-          if (typeof result === 'object') {
-            return createProxy(currentPath, depth + 1);
-          }
-
-          return result;
-        }
-      });
-    };
-
-    return createProxy('', 0);
-  }, [i18nTranslate])
+  const { t, i18n } = useI18nTranslation()
 
   const setLanguage = useCallback(async (lang: string) => {
     if (lang === i18n.language) {
@@ -143,11 +24,10 @@ export function useTranslation() {
     }
   }, [i18n])
 
-  return useMemo(() => ({ 
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    t: t as any,
+  return useMemo(() => ({
+    t,
     i18n,
-    language: i18n.language, 
-    setLanguage 
+    language: i18n.language,
+    setLanguage
   }), [t, i18n, setLanguage])
 }
diff --git a/frontend/src/lib/hooks/use-version-check.ts b/frontend/src/lib/hooks/use-version-check.ts
index 051d25f..fff8014 100644
--- a/frontend/src/lib/hooks/use-version-check.ts
+++ b/frontend/src/lib/hooks/use-version-check.ts
@@ -26,12 +26,12 @@ export function useVersionCheck() {
         const dismissKey = `version_notification_dismissed_${config.latestVersion}`
         if (sessionStorage.getItem(dismissKey)) return
 
-        toast.info(t.advanced.updateAvailable.replace('{version}', config.latestVersion), {
-          description: t.advanced.updateAvailableDesc,
+        toast.info(t('advanced.updateAvailable').replace('{version}', config.latestVersion), {
+          description: t('advanced.updateAvailableDesc'),
           duration: Infinity,
           closeButton: true,
           action: {
-            label: t.advanced.viewOnGithub,
+            label: t('advanced.viewOnGithub'),
             onClick: () => window.open('https://github.com/lfnovo/open-notebook', '_blank'),
           },
           onDismiss: () => sessionStorage.setItem(dismissKey, 'true'),
diff --git a/frontend/src/lib/hooks/useNotebookChat.ts b/frontend/src/lib/hooks/useNotebookChat.ts
index 77f0f00..92a7c89 100644
--- a/frontend/src/lib/hooks/useNotebookChat.ts
+++ b/frontend/src/lib/hooks/useNotebookChat.ts
@@ -80,7 +80,7 @@ export function useNotebookChat({ notebookId, sources, notes, contextSelections
         queryKey: QUERY_KEYS.notebookChatSessions(notebookId)
       })
       setCurrentSessionId(newSession.id)
-      toast.success(t.chat.sessionCreated)
+      toast.success(t('chat.sessionCreated'))
     },
     onError: (err: unknown) => {
       const error = err as { response?: { data?: { detail?: string } }, message?: string };
@@ -101,7 +101,7 @@ export function useNotebookChat({ notebookId, sources, notes, contextSelections
       queryClient.invalidateQueries({
         queryKey: QUERY_KEYS.notebookChatSession(currentSessionId!)
       })
-      toast.success(t.chat.sessionUpdated)
+      toast.success(t('chat.sessionUpdated'))
     },
     onError: (err: unknown) => {
       const error = err as { response?: { data?: { detail?: string } }, message?: string };
@@ -121,7 +121,7 @@ export function useNotebookChat({ notebookId, sources, notes, contextSelections
         setCurrentSessionId(null)
         setMessages([])
       }
-      toast.success(t.chat.sessionDeleted)
+      toast.success(t('chat.sessionDeleted'))
     },
     onError: (err: unknown) => {
       const error = err as { response?: { data?: { detail?: string } }, message?: string };
diff --git a/frontend/src/lib/hooks/useSourceChat.ts b/frontend/src/lib/hooks/useSourceChat.ts
index 4087b6b..4b69056 100644
--- a/frontend/src/lib/hooks/useSourceChat.ts
+++ b/frontend/src/lib/hooks/useSourceChat.ts
@@ -60,7 +60,7 @@ export function useSourceChat(sourceId: string) {
     onSuccess: (newSession) => {
       queryClient.invalidateQueries({ queryKey: ['sourceChatSessions', sourceId] })
       setCurrentSessionId(newSession.id)
-      toast.success(t.chat.sessionCreated)
+      toast.success(t('chat.sessionCreated'))
     },
     onError: (err: unknown) => {
       const error = err as { response?: { data?: { detail?: string } }, message?: string };
@@ -75,7 +75,7 @@ export function useSourceChat(sourceId: string) {
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['sourceChatSessions', sourceId] })
       queryClient.invalidateQueries({ queryKey: ['sourceChatSession', sourceId, currentSessionId] })
-      toast.success(t.chat.sessionUpdated)
+      toast.success(t('chat.sessionUpdated'))
     },
     onError: (err: unknown) => {
       const error = err as { response?: { data?: { detail?: string } }, message?: string };
@@ -93,7 +93,7 @@ export function useSourceChat(sourceId: string) {
         setCurrentSessionId(null)
         setMessages([])
       }
-      toast.success(t.chat.sessionDeleted)
+      toast.success(t('chat.sessionDeleted'))
     },
     onError: (err: unknown) => {
       const error = err as { response?: { data?: { detail?: string } }, message?: string };
diff --git a/frontend/src/test/setup.ts b/frontend/src/test/setup.ts
index 1a98dc0..7af5fe7 100644
--- a/frontend/src/test/setup.ts
+++ b/frontend/src/test/setup.ts
@@ -1,6 +1,5 @@
 import '@testing-library/jest-dom'
 import { vi } from 'vitest'
-import { enUS } from '../lib/locales/en-US'
 
 // Mock next/navigation
 vi.mock('next/navigation', () => ({
@@ -28,14 +27,11 @@ Object.defineProperty(window, 'matchMedia', {
   })),
 })
 
-// Mock @/lib/hooks/use-translation with full locale structure
+// Mock @/lib/hooks/use-translation with standard t() function
 vi.mock('../lib/hooks/use-translation', () => {
-  const t = (key: string) => key
-  Object.assign(t, enUS)
-  
   return {
     useTranslation: () => ({
-      t,
+      t: (key: string) => key,
       language: 'en-US',
       setLanguage: vi.fn(),
     }),