diff --git a/package-lock.json b/package-lock.json
index 63486fc0..bf185e0d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -38,12 +38,14 @@
         "dexie": "^4.0.8",
         "eslint-config-airbnb-typescript": "^18.0.0",
         "html-to-image": "^1.11.11",
+        "i18next": "^23.14.0",
         "lucide-react": "^0.424.0",
         "nanoid": "^5.0.7",
         "react": "^18.3.1",
         "react-code-blocks": "^0.1.6",
         "react-dom": "^18.3.1",
         "react-hotkeys-hook": "^4.5.0",
+        "react-i18next": "^15.0.1",
         "react-resizable-panels": "^2.0.22",
         "react-responsive": "^10.0.0",
         "react-router-dom": "^6.26.0",
@@ -6329,6 +6331,15 @@
         "node": "*"
       }
     },
+    "node_modules/html-parse-stringify": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz",
+      "integrity": "sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==",
+      "license": "MIT",
+      "dependencies": {
+        "void-elements": "3.1.0"
+      }
+    },
     "node_modules/html-to-image": {
       "version": "1.11.11",
       "resolved": "https://registry.npmjs.org/html-to-image/-/html-to-image-1.11.11.tgz",
@@ -6357,6 +6368,29 @@
       "integrity": "sha512-WDC/ui2VVRrz3jOVi+XtjqkDjiVjTtFaAGiW37k6b+ohyQ5wYDOGkvCZa8+H0nx3gyvv0+BST9xuOgIyGQ00gw==",
       "license": "BSD-3-Clause"
     },
+    "node_modules/i18next": {
+      "version": "23.14.0",
+      "resolved": "https://registry.npmjs.org/i18next/-/i18next-23.14.0.tgz",
+      "integrity": "sha512-Y5GL4OdA8IU2geRrt2+Uc1iIhsjICdHZzT9tNwQ3TVqdNzgxHToGCKf/TPRP80vTCAP6svg2WbbJL+Gx5MFQVA==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://locize.com"
+        },
+        {
+          "type": "individual",
+          "url": "https://locize.com/i18next.html"
+        },
+        {
+          "type": "individual",
+          "url": "https://www.i18next.com/how-to/faq#i18next-is-awesome.-how-can-i-support-the-project"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.23.2"
+      }
+    },
     "node_modules/ignore": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.1.tgz",
@@ -8030,6 +8064,28 @@
         "react-dom": ">=16.8.1"
       }
     },
+    "node_modules/react-i18next": {
+      "version": "15.0.1",
+      "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-15.0.1.tgz",
+      "integrity": "sha512-NwxLqNM6CLbeGA9xPsjits0EnXdKgCRSS6cgkgOdNcPXqL+1fYNl8fBg1wmnnHvFy812Bt4IWTPE9zjoPmFj3w==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.24.8",
+        "html-parse-stringify": "^3.0.1"
+      },
+      "peerDependencies": {
+        "i18next": ">= 23.2.3",
+        "react": ">= 16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -9683,6 +9739,15 @@
         }
       }
     },
+    "node_modules/void-elements": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz",
+      "integrity": "sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/vue": {
       "version": "3.4.38",
       "resolved": "https://registry.npmjs.org/vue/-/vue-3.4.38.tgz",
diff --git a/package.json b/package.json
index 87c9787a..13be9f7a 100644
--- a/package.json
+++ b/package.json
@@ -42,12 +42,14 @@
     "dexie": "^4.0.8",
     "eslint-config-airbnb-typescript": "^18.0.0",
     "html-to-image": "^1.11.11",
+    "i18next": "^23.14.0",
     "lucide-react": "^0.424.0",
     "nanoid": "^5.0.7",
     "react": "^18.3.1",
     "react-code-blocks": "^0.1.6",
     "react-dom": "^18.3.1",
     "react-hotkeys-hook": "^4.5.0",
+    "react-i18next": "^15.0.1",
     "react-resizable-panels": "^2.0.22",
     "react-responsive": "^10.0.0",
     "react-router-dom": "^6.26.0",
diff --git a/src/context/storage-context/storage-provider.tsx b/src/context/storage-context/storage-provider.tsx
index 161cf3c9..408b2951 100644
--- a/src/context/storage-context/storage-provider.tsx
+++ b/src/context/storage-context/storage-provider.tsx
@@ -68,9 +68,11 @@ export const StorageProvider: React.FC<React.PropsWithChildren> = ({
         const config = await getConfig();
 
         if (!config) {
+            const diagrams = await db.diagrams.toArray();
+
             await db.config.add({
                 id: 1,
-                defaultDiagramId: '',
+                defaultDiagramId: diagrams?.[0]?.id ?? '',
             });
         }
     });
diff --git a/src/dialogs/create-diagram-dialog/create-diagram-dialog-import-database/create-diagram-dialog-import-database.tsx b/src/dialogs/create-diagram-dialog/create-diagram-dialog-import-database/create-diagram-dialog-import-database.tsx
index 9678dd47..521dd73f 100644
--- a/src/dialogs/create-diagram-dialog/create-diagram-dialog-import-database/create-diagram-dialog-import-database.tsx
+++ b/src/dialogs/create-diagram-dialog/create-diagram-dialog-import-database/create-diagram-dialog-import-database.tsx
@@ -25,6 +25,7 @@ import {
 } from '@/components/avatar/avatar';
 import { CreateDiagramDialogStep } from '../create-diagram-dialog-step';
 import { SSMSInfo } from './ssms-info/ssms-info';
+import { useTranslation } from 'react-i18next';
 
 export interface CreateDiagramDialogImportDatabaseProps {
     setStep: React.Dispatch<React.SetStateAction<CreateDiagramDialogStep>>;
@@ -51,6 +52,7 @@ export const CreateDiagramDialogImportDatabase: React.FC<
     setDatabaseEdition,
     errorMessage,
 }) => {
+    const { t } = useTranslation();
     const handleInputChange = useCallback(
         (e: React.ChangeEvent<HTMLTextAreaElement>) => {
             const inputValue = e.target.value;
@@ -62,10 +64,12 @@ export const CreateDiagramDialogImportDatabase: React.FC<
     const renderHeader = useCallback(() => {
         return (
             <DialogHeader>
-                <DialogTitle>Import your Database</DialogTitle>
+                <DialogTitle>
+                    {t('new_diagram_dialog.import_database.title')}
+                </DialogTitle>
             </DialogHeader>
         );
-    }, []);
+    }, [t]);
 
     const renderContent = useCallback(() => {
         return (
@@ -73,7 +77,9 @@ export const CreateDiagramDialogImportDatabase: React.FC<
                 {databaseTypeToEditionMap[databaseType].length > 0 ? (
                     <div className="flex flex-col gap-1 md:flex-row">
                         <p className="text-sm leading-6 text-muted-foreground">
-                            Database edition:
+                            {t(
+                                'new_diagram_dialog.import_database.database_edition'
+                            )}
                         </p>
                         <ToggleGroup
                             type="single"
@@ -145,7 +151,9 @@ export const CreateDiagramDialogImportDatabase: React.FC<
                 ) : null}
                 <div className="flex flex-col gap-1">
                     <div className="flex flex-col gap-1 text-sm text-muted-foreground md:flex-row md:justify-between">
-                        <div>1. Run this script in your database:</div>
+                        <div>
+                            1. {t('new_diagram_dialog.import_database.step_1')}
+                        </div>
                         {databaseType === DatabaseType.SQL_SERVER && (
                             <SSMSInfo />
                         )}
@@ -159,11 +167,13 @@ export const CreateDiagramDialogImportDatabase: React.FC<
                 </div>
                 <div className="flex h-48 flex-col gap-1">
                     <p className="text-sm text-muted-foreground">
-                        2. Paste the script result here:
+                        2. {t('new_diagram_dialog.import_database.step_2')}
                     </p>
                     <Textarea
                         className="w-full flex-1 rounded-md bg-muted p-2 text-sm"
-                        placeholder="Script result here..."
+                        placeholder={t(
+                            'new_diagram_dialog.import_database.script_results_placeholder'
+                        )}
                         value={scriptResult}
                         onChange={handleInputChange}
                     />
@@ -182,6 +192,7 @@ export const CreateDiagramDialogImportDatabase: React.FC<
         handleInputChange,
         scriptResult,
         setDatabaseEdition,
+        t,
     ]);
 
     const renderFooter = useCallback(() => {
@@ -195,7 +206,7 @@ export const CreateDiagramDialogImportDatabase: React.FC<
                             setStep(CreateDiagramDialogStep.SELECT_DATABASE)
                         }
                     >
-                        Back
+                        {t('new_diagram_dialog.back')}
                     </Button>
                 </div>
                 <div className="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end sm:space-x-2">
@@ -205,7 +216,7 @@ export const CreateDiagramDialogImportDatabase: React.FC<
                             variant="outline"
                             onClick={createNewDiagram}
                         >
-                            Empty diagram
+                            {t('new_diagram_dialog.empty_diagram')}
                         </Button>
                     </DialogClose>
                     <DialogClose asChild>
@@ -218,13 +229,13 @@ export const CreateDiagramDialogImportDatabase: React.FC<
                             }
                             onClick={createNewDiagram}
                         >
-                            Import
+                            {t('new_diagram_dialog.import')}
                         </Button>
                     </DialogClose>
                 </div>
             </DialogFooter>
         );
-    }, [createNewDiagram, errorMessage.length, scriptResult, setStep]);
+    }, [createNewDiagram, errorMessage.length, scriptResult, setStep, t]);
 
     return (
         <>
diff --git a/src/dialogs/create-diagram-dialog/create-diagram-dialog-import-database/ssms-info/ssms-info.tsx b/src/dialogs/create-diagram-dialog/create-diagram-dialog-import-database/ssms-info/ssms-info.tsx
index a9fb3427..892e6d04 100644
--- a/src/dialogs/create-diagram-dialog/create-diagram-dialog-import-database/ssms-info/ssms-info.tsx
+++ b/src/dialogs/create-diagram-dialog/create-diagram-dialog-import-database/ssms-info/ssms-info.tsx
@@ -8,6 +8,7 @@ import { Info } from 'lucide-react';
 import React from 'react';
 import SSMSInstructions from '@/assets/ssms-instructions.png';
 import { ZoomableImage } from '@/components/zoomable-image/zoomable-image';
+import { useTranslation } from 'react-i18next';
 
 export interface SSMSInfoProps {}
 
@@ -16,6 +17,7 @@ export const SSMSInfo = React.forwardRef<
     SSMSInfoProps
 >((props, ref) => {
     const [open, setOpen] = React.useState(false);
+    const { t } = useTranslation();
     return (
         <HoverCard
             open={open}
@@ -31,22 +33,32 @@ export const SSMSInfo = React.forwardRef<
                     }}
                 >
                     <Info size={14} />
-                    <Label className="text-xs">SSMS Instructions</Label>
+                    <Label className="text-xs">
+                        {t(
+                            'new_diagram_dialog.import_database.ssms_instructions.button_text'
+                        )}
+                    </Label>
                 </div>
             </HoverCardTrigger>
             <HoverCardContent className="w-80">
                 <div className="flex">
                     <div className="space-y-1">
-                        <h4 className="text-sm font-semibold">Instructions</h4>
+                        <h4 className="text-sm font-semibold">
+                            {t(
+                                'new_diagram_dialog.import_database.ssms_instructions.title'
+                            )}
+                        </h4>
                         <p className="text-xs text-muted-foreground">
                             <span className="font-semibold">1. </span>
-                            {
-                                'Go to Tools > Options > Query Results > SQL Server.'
-                            }
+                            {t(
+                                'new_diagram_dialog.import_database.ssms_instructions.step_1'
+                            )}
                         </p>
                         <p className="text-xs text-muted-foreground">
                             <span className="font-semibold">2. </span>
-                            {`If you're using "Results to Grid," change the Maximum Characters Retrieved for Non-XML data (set to 9999999).`}
+                            {t(
+                                'new_diagram_dialog.import_database.ssms_instructions.step_2'
+                            )}
                         </p>
                         <div className="flex items-center pt-2">
                             <ZoomableImage src={SSMSInstructions} />
diff --git a/src/dialogs/create-diagram-dialog/create-diagram-dialog-select-database/create-diagram-dialog-select-database.tsx b/src/dialogs/create-diagram-dialog/create-diagram-dialog-select-database/create-diagram-dialog-select-database.tsx
index 9d3643e1..eb97e584 100644
--- a/src/dialogs/create-diagram-dialog/create-diagram-dialog-select-database/create-diagram-dialog-select-database.tsx
+++ b/src/dialogs/create-diagram-dialog/create-diagram-dialog-select-database/create-diagram-dialog-select-database.tsx
@@ -14,6 +14,7 @@ import { databaseLogoMap } from '@/lib/databases';
 import { Link } from '@/components/link/link';
 import { LayoutGrid } from 'lucide-react';
 import { CreateDiagramDialogStep } from '../create-diagram-dialog-step';
+import { useTranslation } from 'react-i18next';
 
 export interface CreateDiagramDialogSelectDatabaseProps {
     setStep: React.Dispatch<React.SetStateAction<CreateDiagramDialogStep>>;
@@ -32,6 +33,7 @@ export const CreateDiagramDialogSelectDatabase: React.FC<
     hasExistingDiagram,
     createNewDiagram,
 }) => {
+    const { t } = useTranslation();
     const renderDatabaseOption = useCallback((type: DatabaseType) => {
         const logo = databaseLogoMap[type];
         return (
@@ -54,28 +56,34 @@ export const CreateDiagramDialogSelectDatabase: React.FC<
                     </div>
                     <div className="flex flex-col-reverse">
                         <div className="hidden text-sm text-primary md:flex">
-                            Check Examples
+                            {t(
+                                'new_diagram_dialog.database_selection.check_examples_long'
+                            )}
                         </div>
                         <div className="flex text-xs text-primary md:hidden">
-                            Examples
+                            {t(
+                                'new_diagram_dialog.database_selection.check_examples_short'
+                            )}
                         </div>
                     </div>
                 </div>
             </Link>
         ),
-        []
+        [t]
     );
 
     const renderHeader = useCallback(() => {
         return (
             <DialogHeader>
-                <DialogTitle>What is your Database?</DialogTitle>
+                <DialogTitle>
+                    {t('new_diagram_dialog.database_selection.title')}
+                </DialogTitle>
                 <DialogDescription>
-                    Each database has its own unique features and capabilities.
+                    {t('new_diagram_dialog.database_selection.description')}
                 </DialogDescription>
             </DialogHeader>
         );
-    }, []);
+    }, [t]);
 
     const renderContent = useCallback(() => {
         return (
@@ -116,7 +124,7 @@ export const CreateDiagramDialogSelectDatabase: React.FC<
                 {hasExistingDiagram ? (
                     <DialogClose asChild>
                         <Button type="button" variant="secondary">
-                            Cancel
+                            {t('new_diagram_dialog.cancel')}
                         </Button>
                     </DialogClose>
                 ) : (
@@ -128,7 +136,7 @@ export const CreateDiagramDialogSelectDatabase: React.FC<
                         variant="outline"
                         onClick={createNewDiagram}
                     >
-                        Empty diagram
+                        {t('new_diagram_dialog.empty_diagram')}
                     </Button>
                     <Button
                         type="button"
@@ -138,12 +146,12 @@ export const CreateDiagramDialogSelectDatabase: React.FC<
                             setStep(CreateDiagramDialogStep.IMPORT_DATABASE)
                         }
                     >
-                        Continue
+                        {t('new_diagram_dialog.continue')}
                     </Button>
                 </div>
             </DialogFooter>
         );
-    }, [createNewDiagram, databaseType, hasExistingDiagram, setStep]);
+    }, [createNewDiagram, databaseType, hasExistingDiagram, setStep, t]);
 
     return (
         <>
diff --git a/src/dialogs/export-sql-dialog/export-sql-dialog.tsx b/src/dialogs/export-sql-dialog/export-sql-dialog.tsx
index d6ec8ce0..bc958ce6 100644
--- a/src/dialogs/export-sql-dialog/export-sql-dialog.tsx
+++ b/src/dialogs/export-sql-dialog/export-sql-dialog.tsx
@@ -22,6 +22,7 @@ import { DatabaseType } from '@/lib/domain/database-type';
 import { DialogProps } from '@radix-ui/react-dialog';
 import { Annoyed, Sparkles } from 'lucide-react';
 import React, { useCallback, useEffect } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
 
 export interface ExportSQLDialogProps {
     dialog: DialogProps;
@@ -34,6 +35,7 @@ export const ExportSQLDialog: React.FC<ExportSQLDialogProps> = ({
 }) => {
     const { closeExportSQLDialog } = useDialog();
     const { currentDiagram } = useChartDB();
+    const { t } = useTranslation();
     const [script, setScript] = React.useState<string>();
     const [error, setError] = React.useState<boolean>(false);
 
@@ -66,26 +68,32 @@ export const ExportSQLDialog: React.FC<ExportSQLDialogProps> = ({
                 <div className="flex flex-col items-center justify-center gap-1 text-sm">
                     <Annoyed className="size-10" />
                     <Label className="text-sm">
-                        Error generating SQL script. Please try again later or{' '}
-                        <a
-                            href="mailto:chartdb.io@gmail.com"
-                            target="_blank"
-                            className="text-pink-600 hover:underline"
-                            rel="noreferrer"
-                        >
-                            contact us.
-                        </a>
+                        <Trans
+                            i18nKey="export_sql_dialog.error.message" // optional -> fallbacks to defaults if not provided
+                            components={[
+                                <a
+                                    key={0}
+                                    href="mailto:chartdb.io@gmail.com"
+                                    target="_blank"
+                                    className="text-pink-600 hover:underline"
+                                    rel="noreferrer"
+                                />,
+                            ]}
+                        />
                     </Label>
                     <div>
-                        Feel free to use your OPENAI_TOKEN, see the manual{' '}
-                        <a
-                            href="https://github.com/chartdb/chartdb"
-                            target="_blank"
-                            rel="noreferrer"
-                            className="text-pink-600 hover:underline"
-                        >
-                            here.
-                        </a>
+                        <Trans
+                            i18nKey="export_sql_dialog.error.description" // optional -> fallbacks to defaults if not provided
+                            components={[
+                                <a
+                                    key={0}
+                                    href="https://github.com/chartdb/chartdb"
+                                    target="_blank"
+                                    rel="noreferrer"
+                                    className="text-pink-600 hover:underline"
+                                />,
+                            ]}
+                        />
                     </div>
                 </div>
             </div>
@@ -100,18 +108,20 @@ export const ExportSQLDialog: React.FC<ExportSQLDialogProps> = ({
                 <div className="flex items-center justify-center gap-1">
                     <Sparkles className="h-5" />
                     <Label className="text-lg">
-                        AI is generating SQL for{' '}
-                        {databaseTypeToLabelMap[targetDatabaseType]}...
+                        {t('export_sql_dialog.loading.text', {
+                            databaseType:
+                                databaseTypeToLabelMap[targetDatabaseType],
+                        })}
                     </Label>
                 </div>
                 <div className="flex items-center justify-center gap-1">
                     <Label className="text-sm">
-                        This should take up to 30 seconds.
+                        {t('export_sql_dialog.loading.description')}
                     </Label>
                 </div>
             </div>
         ),
-        [targetDatabaseType]
+        [targetDatabaseType, t]
     );
     return (
         <Dialog
@@ -127,13 +137,16 @@ export const ExportSQLDialog: React.FC<ExportSQLDialogProps> = ({
                 showClose
             >
                 <DialogHeader>
-                    <DialogTitle>Export SQL</DialogTitle>
+                    <DialogTitle>{t('export_sql_dialog.title')}</DialogTitle>
                     <DialogDescription>
-                        {`Export your diagram schema to ${
-                            targetDatabaseType === DatabaseType.GENERIC
-                                ? 'SQL'
-                                : databaseTypeToLabelMap[targetDatabaseType]
-                        } script`}
+                        {t('export_sql_dialog.description', {
+                            databaseType:
+                                targetDatabaseType === DatabaseType.GENERIC
+                                    ? 'SQL'
+                                    : databaseTypeToLabelMap[
+                                          targetDatabaseType
+                                      ],
+                        })}
                     </DialogDescription>
                 </DialogHeader>
                 <div className="flex flex-1 items-center justify-center">
@@ -154,7 +167,9 @@ export const ExportSQLDialog: React.FC<ExportSQLDialogProps> = ({
                 <DialogFooter className="flex !justify-between gap-2">
                     <div />
                     <DialogClose asChild>
-                        <Button type="button">Close</Button>
+                        <Button type="button">
+                            {t('export_sql_dialog.close')}
+                        </Button>
                     </DialogClose>
                 </DialogFooter>
             </DialogContent>
diff --git a/src/dialogs/open-diagram-dialog/open-diagram-dialog.tsx b/src/dialogs/open-diagram-dialog/open-diagram-dialog.tsx
index e1f16827..b9d3ed88 100644
--- a/src/dialogs/open-diagram-dialog/open-diagram-dialog.tsx
+++ b/src/dialogs/open-diagram-dialog/open-diagram-dialog.tsx
@@ -24,6 +24,7 @@ import { useStorage } from '@/hooks/use-storage';
 import { Diagram } from '@/lib/domain/diagram';
 import { DialogProps } from '@radix-ui/react-dialog';
 import React, { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 
 export interface OpenDiagramDialogProps {
@@ -34,6 +35,7 @@ export const OpenDiagramDialog: React.FC<OpenDiagramDialogProps> = ({
     dialog,
 }) => {
     const { closeOpenDiagramDialog } = useDialog();
+    const { t } = useTranslation();
     const { updateConfig } = useConfig();
     const navigate = useNavigate();
     const { listDiagrams } = useStorage();
@@ -78,9 +80,9 @@ export const OpenDiagramDialog: React.FC<OpenDiagramDialogProps> = ({
                 showClose
             >
                 <DialogHeader>
-                    <DialogTitle>Open Diagram</DialogTitle>
+                    <DialogTitle>{t('open_diagram_dialog.title')}</DialogTitle>
                     <DialogDescription>
-                        Select a diagram to open from the list below.
+                        {t('open_diagram_dialog.description')}
                     </DialogDescription>
                 </DialogHeader>
                 <div className="flex flex-1 items-center justify-center">
@@ -89,13 +91,25 @@ export const OpenDiagramDialog: React.FC<OpenDiagramDialogProps> = ({
                             <TableHeader className="sticky top-0 bg-background">
                                 <TableRow>
                                     <TableHead />
-                                    <TableHead>Name</TableHead>
-                                    <TableHead className="hidden items-center sm:inline-flex">
-                                        Created at
+                                    <TableHead>
+                                        {t(
+                                            'open_diagram_dialog.table_columns.name'
+                                        )}
+                                    </TableHead>
+                                    <TableHead className="hidden items-center sm:inline-flex">
+                                        {t(
+                                            'open_diagram_dialog.table_columns.created_at'
+                                        )}
+                                    </TableHead>
+                                    <TableHead>
+                                        {t(
+                                            'open_diagram_dialog.table_columns.last_modified'
+                                        )}
                                     </TableHead>
-                                    <TableHead>Last modified</TableHead>
                                     <TableHead className="text-center">
-                                        Tables
+                                        {t(
+                                            'open_diagram_dialog.table_columns.tables_count'
+                                        )}
                                     </TableHead>
                                 </TableRow>
                             </TableHeader>
@@ -145,7 +159,7 @@ export const OpenDiagramDialog: React.FC<OpenDiagramDialogProps> = ({
                 <DialogFooter className="flex !justify-between gap-2">
                     <DialogClose asChild>
                         <Button type="button" variant="secondary">
-                            Cancel
+                            {t('open_diagram_dialog.cancel')}
                         </Button>
                     </DialogClose>
                     <DialogClose asChild>
@@ -154,7 +168,7 @@ export const OpenDiagramDialog: React.FC<OpenDiagramDialogProps> = ({
                             disabled={!selectedDiagramId}
                             onClick={() => openDiagram(selectedDiagramId ?? '')}
                         >
-                            Open
+                            {t('open_diagram_dialog.open')}
                         </Button>
                     </DialogClose>
                 </DialogFooter>
diff --git a/src/i18n/i18n.ts b/src/i18n/i18n.ts
new file mode 100644
index 00000000..a5a93dc8
--- /dev/null
+++ b/src/i18n/i18n.ts
@@ -0,0 +1,19 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import { en } from './locales/en';
+
+const resources = {
+    en,
+};
+
+i18n.use(initReactI18next).init({
+    resources,
+    lng: 'en',
+    interpolation: {
+        escapeValue: false,
+    },
+    fallbackLng: 'en',
+    debug: false,
+});
+
+export { i18n };
diff --git a/src/i18n/locales/en.ts b/src/i18n/locales/en.ts
new file mode 100644
index 00000000..90401cb9
--- /dev/null
+++ b/src/i18n/locales/en.ts
@@ -0,0 +1,182 @@
+import { ResourceLanguage } from 'i18next';
+
+export const en: ResourceLanguage = {
+    translation: {
+        menu: {
+            file: {
+                file: 'File',
+                new: 'New',
+                open: 'Open',
+                export_sql: 'Export SQL',
+                export_as: 'Export as',
+                delete_diagram: 'Delete Diagram',
+                exit: 'Exit',
+            },
+            edit: {
+                edit: 'Edit',
+                undo: 'Undo',
+                redo: 'Redo',
+                clear: 'Clear',
+            },
+            help: {
+                help: 'Help',
+                visit_website: 'Visit ChartDB',
+                join_discord: 'Join us on Discord',
+            },
+        },
+
+        delete_diagram_alert: {
+            title: 'Delete Diagram',
+            description:
+                'This action cannot be undone. This will permanently delete the diagram.',
+            cancel: 'Cancel',
+            delete: 'Delete',
+        },
+
+        clear_diagram_alert: {
+            title: 'Clear Diagram',
+            description:
+                'This action cannot be undone. This will permanently delete all the data in the diagram.',
+            cancel: 'Cancel',
+            clear: 'Clear',
+        },
+
+        last_saved: 'Last saved',
+        saved: 'Saved',
+        diagrams: 'Diagrams',
+
+        side_panel: {
+            tables_section: {
+                tables: 'Tables',
+                add_table: 'Add Table',
+                filter: 'Filter',
+
+                table: {
+                    fields: 'Fields',
+                    nullable: 'Nullable?',
+                    primary_key: 'Primary Key',
+                    indexes: 'Indexes',
+                    add_field: 'Add Field',
+                    add_index: 'Add Index',
+                    index_select_fields: 'Select fields',
+                    field_name: 'Name',
+                    field_type: 'Type',
+                    field_actions: {
+                        title: 'Field Attributes',
+                        unique: 'Unique',
+                        delete_field: 'Delete Field',
+                    },
+                    index_actions: {
+                        title: 'Index Attributes',
+                        name: 'Name',
+                        unique: 'Unique',
+                        delete_index: 'Delete Index',
+                    },
+                    table_actions: {
+                        title: 'Table Actions',
+                        add_field: 'Add Field',
+                        add_index: 'Add Index',
+                        delete_table: 'Delete Table',
+                    },
+                },
+                empty_state: {
+                    title: 'No tables',
+                    description: 'Create a table to get started',
+                },
+            },
+            relationships_section: {
+                relationships: 'Relationships',
+                filter: 'Filter',
+                relationship: {
+                    primary: 'Primary',
+                    foreign: 'Foreign',
+                    cardinality: 'Cardinality',
+                    delete_relationship: 'Delete',
+                    relationship_actions: {
+                        title: 'Actions',
+                        delete_relationship: 'Delete',
+                    },
+                },
+                empty_state: {
+                    title: 'No relationships',
+                    description: 'Create a relationship to connect tables',
+                },
+            },
+        },
+
+        toolbar: {
+            zoom_in: 'Zoom In',
+            zoom_out: 'Zoom Out',
+            save: 'Save',
+            show_all: 'Show All',
+            undo: 'Undo',
+            redo: 'Redo',
+        },
+
+        new_diagram_dialog: {
+            database_selection: {
+                title: 'What is your Database?',
+                description:
+                    'Each database has its own unique features and capabilities.',
+                check_examples_long: 'Check Examples',
+                check_examples_short: 'Examples',
+            },
+
+            import_database: {
+                title: 'Import your Database',
+                database_edition: 'Database Edition:',
+                step_1: 'Run this script in your database:',
+                step_2: 'Paste the script result here:',
+                script_results_placeholder: 'Script results here...',
+                ssms_instructions: {
+                    button_text: 'SSMS Instructions',
+                    title: 'Instructions',
+                    step_1: 'Go to Tools > Options > Query Results > SQL Server.',
+                    step_2: 'If you\'re using "Results to Grid," change the Maximum Characters Retrieved for Non-XML data (set to 9999999).',
+                },
+            },
+
+            cancel: 'Cancel',
+            back: 'Back',
+            empty_diagram: 'Empty diagram',
+            continue: 'Continue',
+            import: 'Import',
+        },
+
+        open_diagram_dialog: {
+            title: 'Open Diagram',
+            description: 'Select a diagram to open from the list below.',
+            table_columns: {
+                name: 'Name',
+                created_at: 'Created at',
+                last_modified: 'Last modified',
+                tables_count: 'Tables',
+            },
+            cancel: 'Cancel',
+            open: 'Open',
+        },
+
+        export_sql_dialog: {
+            title: 'Export SQL',
+            description:
+                'Export your diagram schema to {{databaseType}} script',
+            close: 'Close',
+            loading: {
+                text: 'AI is generating SQL for {{databaseType}}...',
+                description: 'This should take up to 30 seconds.',
+            },
+            error: {
+                message:
+                    'Error generating SQL script. Please try again later or <0>contact us</0>.',
+                description:
+                    'Feel free to use your OPENAI_TOKEN, see the manual <0>here</0>.',
+            },
+        },
+
+        relationship_type: {
+            one_to_one: 'One to One',
+            one_to_many: 'One to Many',
+            many_to_one: 'Many to One',
+        },
+    },
+};
diff --git a/src/main.tsx b/src/main.tsx
index 6597bb2f..c0884698 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom/client';
 import './index.css';
 import './globals.css';
 import { App } from './app';
+import './i18n/i18n';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
     <React.StrictMode>
diff --git a/src/pages/editor-page/canvas/toolbar/toolbar.tsx b/src/pages/editor-page/canvas/toolbar/toolbar.tsx
index 106b9d89..cd28c2bb 100644
--- a/src/pages/editor-page/canvas/toolbar/toolbar.tsx
+++ b/src/pages/editor-page/canvas/toolbar/toolbar.tsx
@@ -11,6 +11,7 @@ import {
     TooltipTrigger,
     TooltipContent,
 } from '@/components/tooltip/tooltip';
+import { useTranslation } from 'react-i18next';
 
 const convertToPercentage = (value: number) => `${Math.round(value * 100)}%`;
 
@@ -18,6 +19,7 @@ export interface ToolbarProps {}
 
 export const Toolbar: React.FC<ToolbarProps> = () => {
     const { updateDiagramUpdatedAt } = useChartDB();
+    const { t } = useTranslation();
     const { redo, undo, hasRedo, hasUndo } = useHistory();
     const { getZoom, zoomIn, zoomOut, fitView } = useReactFlow();
     const [zoom, setZoom] = useState<string>(convertToPercentage(getZoom()));
@@ -60,7 +62,7 @@ export const Toolbar: React.FC<ToolbarProps> = () => {
                                 </ToolbarButton>
                             </span>
                         </TooltipTrigger>
-                        <TooltipContent>Save</TooltipContent>
+                        <TooltipContent>{t('toolbar.save')}</TooltipContent>
                     </Tooltip>
                     <Separator orientation="vertical" />
                     <Tooltip>
@@ -71,7 +73,7 @@ export const Toolbar: React.FC<ToolbarProps> = () => {
                                 </ToolbarButton>
                             </span>
                         </TooltipTrigger>
-                        <TooltipContent>Show All</TooltipContent>
+                        <TooltipContent>{t('toolbar.show_all')}</TooltipContent>
                     </Tooltip>
                     <Separator orientation="vertical" />
                     <Tooltip>
@@ -82,7 +84,7 @@ export const Toolbar: React.FC<ToolbarProps> = () => {
                                 </ToolbarButton>
                             </span>
                         </TooltipTrigger>
-                        <TooltipContent>Zoom Out</TooltipContent>
+                        <TooltipContent>{t('toolbar.zoom_out')}</TooltipContent>
                     </Tooltip>
                     <ToolbarButton onClick={resetZoom}>{zoom}</ToolbarButton>
                     <Tooltip>
@@ -93,7 +95,7 @@ export const Toolbar: React.FC<ToolbarProps> = () => {
                                 </ToolbarButton>
                             </span>
                         </TooltipTrigger>
-                        <TooltipContent>Zoom In</TooltipContent>
+                        <TooltipContent>{t('toolbar.zoom_in')}</TooltipContent>
                     </Tooltip>
                     <Separator orientation="vertical" />
                     <Tooltip>
@@ -107,7 +109,7 @@ export const Toolbar: React.FC<ToolbarProps> = () => {
                                 </ToolbarButton>
                             </span>
                         </TooltipTrigger>
-                        <TooltipContent>Undo</TooltipContent>
+                        <TooltipContent>{t('toolbar.undo')}</TooltipContent>
                     </Tooltip>
                     <Tooltip>
                         <TooltipTrigger asChild>
@@ -120,7 +122,7 @@ export const Toolbar: React.FC<ToolbarProps> = () => {
                                 </ToolbarButton>
                             </span>
                         </TooltipTrigger>
-                        <TooltipContent>Redo</TooltipContent>
+                        <TooltipContent>{t('toolbar.redo')}</TooltipContent>
                     </Tooltip>
                 </CardContent>
             </Card>
diff --git a/src/pages/editor-page/side-panel/relationships-section/relationship-list/relationship-list-item/relationship-list-item-content/relationship-list-item-content.tsx b/src/pages/editor-page/side-panel/relationships-section/relationship-list/relationship-list-item/relationship-list-item-content/relationship-list-item-content.tsx
index 82d7af85..de9c40df 100644
--- a/src/pages/editor-page/side-panel/relationships-section/relationship-list/relationship-list-item/relationship-list-item-content/relationship-list-item-content.tsx
+++ b/src/pages/editor-page/side-panel/relationships-section/relationship-list/relationship-list-item/relationship-list-item-content/relationship-list-item-content.tsx
@@ -17,6 +17,7 @@ import { DBRelationship, RelationshipType } from '@/lib/domain/db-relationship';
 import { useReactFlow } from '@xyflow/react';
 import { FileMinus2, FileOutput, Trash2 } from 'lucide-react';
 import React, { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
 
 export interface RelationshipListItemContentProps {
     relationship: DBRelationship;
@@ -28,6 +29,7 @@ export const RelationshipListItemContent: React.FC<
     const { getTable, getField, updateRelationship, removeRelationship } =
         useChartDB();
     const { deleteElements } = useReactFlow();
+    const { t } = useTranslation();
 
     const targetTable = getTable(relationship.targetTableId);
     const targetField = getField(
@@ -56,7 +58,9 @@ export const RelationshipListItemContent: React.FC<
                         <div className="flex flex-row items-center gap-1">
                             <FileMinus2 className="size-4 text-slate-700" />
                             <div className="font-bold text-slate-700">
-                                Primary
+                                {t(
+                                    'side_panel.relationships_section.relationship.primary'
+                                )}
                             </div>
                         </div>
                         <Tooltip>
@@ -74,7 +78,9 @@ export const RelationshipListItemContent: React.FC<
                         <div className="flex flex-row items-center gap-1">
                             <FileOutput className="size-4 text-slate-700" />
                             <div className="font-bold text-slate-700">
-                                Foreign
+                                {t(
+                                    'side_panel.relationships_section.relationship.foreign'
+                                )}
                             </div>
                         </div>
                         <Tooltip>
@@ -93,7 +99,9 @@ export const RelationshipListItemContent: React.FC<
                     <div className="flex flex-row items-center gap-1">
                         <FileOutput className="size-4 text-slate-700" />
                         <div className="font-bold text-slate-700">
-                            Cardinality
+                            {t(
+                                'side_panel.relationships_section.relationship.cardinality'
+                            )}
                         </div>
                     </div>
 
@@ -109,13 +117,13 @@ export const RelationshipListItemContent: React.FC<
                         <SelectContent>
                             <SelectGroup>
                                 <SelectItem value="one_to_one">
-                                    One to One
+                                    {t('relationship_type.one_to_one')}
                                 </SelectItem>
                                 <SelectItem value="one_to_many">
-                                    One to Many
+                                    {t('relationship_type.one_to_many')}
                                 </SelectItem>
                                 <SelectItem value="many_to_one">
-                                    Many to One
+                                    {t('relationship_type.many_to_one')}
                                 </SelectItem>
                             </SelectGroup>
                         </SelectContent>
@@ -129,7 +137,11 @@ export const RelationshipListItemContent: React.FC<
                     onClick={deleteRelationshipHandler}
                 >
                     <Trash2 className="mr-1 size-3.5 text-red-700" />
-                    <div className="text-red-700">Delete</div>
+                    <div className="text-red-700">
+                        {t(
+                            'side_panel.relationships_section.relationship.delete_relationship'
+                        )}
+                    </div>
                 </Button>
             </div>
         </div>
diff --git a/src/pages/editor-page/side-panel/relationships-section/relationship-list/relationship-list-item/relationship-list-item-header/relationship-list-item-header.tsx b/src/pages/editor-page/side-panel/relationships-section/relationship-list/relationship-list-item/relationship-list-item-header/relationship-list-item-header.tsx
index affb8ba1..24d58549 100644
--- a/src/pages/editor-page/side-panel/relationships-section/relationship-list/relationship-list-item/relationship-list-item-header/relationship-list-item-header.tsx
+++ b/src/pages/editor-page/side-panel/relationships-section/relationship-list/relationship-list-item/relationship-list-item-header/relationship-list-item-header.tsx
@@ -23,6 +23,7 @@ import {
 import { Input } from '@/components/input/input';
 import { useLayout } from '@/hooks/use-layout';
 import { useBreakpoint } from '@/hooks/use-breakpoint';
+import { useTranslation } from 'react-i18next';
 
 export interface RelationshipListItemHeaderProps {
     relationship: DBRelationship;
@@ -33,6 +34,7 @@ export const RelationshipListItemHeader: React.FC<
 > = ({ relationship }) => {
     const { updateRelationship, removeRelationship } = useChartDB();
     const { fitView, deleteElements, setEdges } = useReactFlow();
+    const { t } = useTranslation();
     const { hideSidePanel } = useLayout();
     const [editMode, setEditMode] = React.useState(false);
     const { isMd: isDesktop } = useBreakpoint('md');
@@ -125,21 +127,27 @@ export const RelationshipListItemHeader: React.FC<
                     </ListItemHeaderButton>
                 </DropdownMenuTrigger>
                 <DropdownMenuContent className="w-40">
-                    <DropdownMenuLabel>Actions</DropdownMenuLabel>
+                    <DropdownMenuLabel>
+                        {t(
+                            'side_panel.relationships_section.relationship.relationship_actions.title'
+                        )}
+                    </DropdownMenuLabel>
                     <DropdownMenuSeparator />
                     <DropdownMenuGroup>
                         <DropdownMenuItem
                             onClick={deleteRelationshipHandler}
                             className="flex justify-between !text-red-700"
                         >
-                            Delete
+                            {t(
+                                'side_panel.relationships_section.relationship.relationship_actions.delete_relationship'
+                            )}
                             <Trash2 className="size-3.5 text-red-700" />
                         </DropdownMenuItem>
                     </DropdownMenuGroup>
                 </DropdownMenuContent>
             </DropdownMenu>
         ),
-        [deleteRelationshipHandler]
+        [deleteRelationshipHandler, t]
     );
 
     return (
diff --git a/src/pages/editor-page/side-panel/relationships-section/relationships-section.tsx b/src/pages/editor-page/side-panel/relationships-section/relationships-section.tsx
index 4057c171..d847f48c 100644
--- a/src/pages/editor-page/side-panel/relationships-section/relationships-section.tsx
+++ b/src/pages/editor-page/side-panel/relationships-section/relationships-section.tsx
@@ -8,6 +8,7 @@ import { DBRelationship } from '@/lib/domain/db-relationship';
 import { useLayout } from '@/hooks/use-layout';
 import { EmptyState } from '@/components/empty-state/empty-state';
 import { ScrollArea } from '@/components/scroll-area/scroll-area';
+import { useTranslation } from 'react-i18next';
 
 export interface RelationshipsSectionProps {}
 
@@ -15,6 +16,7 @@ export const RelationshipsSection: React.FC<RelationshipsSectionProps> = () => {
     const { relationships } = useChartDB();
     const [filterText, setFilterText] = React.useState('');
     const { closeAllRelationshipsInSidebar } = useLayout();
+    const { t } = useTranslation();
 
     const filteredRelationships = useMemo(() => {
         const filter: (relationship: DBRelationship) => boolean = (
@@ -41,7 +43,9 @@ export const RelationshipsSection: React.FC<RelationshipsSectionProps> = () => {
                 <div className="flex-1">
                     <Input
                         type="text"
-                        placeholder="Filter"
+                        placeholder={t(
+                            'side_panel.relationships_section.filter'
+                        )}
                         className="h-8 w-full focus-visible:ring-0"
                         value={filterText}
                         onChange={(e) => setFilterText(e.target.value)}
@@ -52,8 +56,12 @@ export const RelationshipsSection: React.FC<RelationshipsSectionProps> = () => {
                 <ScrollArea className="h-full">
                     {relationships.length === 0 ? (
                         <EmptyState
-                            title="No relationships"
-                            description="Create a relationship to connect tables"
+                            title={t(
+                                'side_panel.relationships_section.empty_state.title'
+                            )}
+                            description={t(
+                                'side_panel.relationships_section.empty_state.description'
+                            )}
                             className="mt-20"
                         />
                     ) : (
diff --git a/src/pages/editor-page/side-panel/side-panel.tsx b/src/pages/editor-page/side-panel/side-panel.tsx
index 20c7d687..155fafad 100644
--- a/src/pages/editor-page/side-panel/side-panel.tsx
+++ b/src/pages/editor-page/side-panel/side-panel.tsx
@@ -11,11 +11,12 @@ import { TablesSection } from './tables-section/tables-section';
 import { RelationshipsSection } from './relationships-section/relationships-section';
 import { useLayout } from '@/hooks/use-layout';
 import { SidebarSection } from '@/context/layout-context/layout-context';
+import { useTranslation } from 'react-i18next';
 
 export interface SidePanelProps {}
 
 export const SidePanel: React.FC<SidePanelProps> = () => {
-    // const [selected, setSelected] = React.useState('tables');
+    const { t } = useTranslation();
     const { selectSidebarSection, selectedSidebarSection } = useLayout();
     return (
         <aside className="flex h-full flex-col overflow-hidden">
@@ -31,9 +32,13 @@ export const SidePanel: React.FC<SidePanelProps> = () => {
                     </SelectTrigger>
                     <SelectContent>
                         <SelectGroup>
-                            <SelectItem value="tables">Tables</SelectItem>
+                            <SelectItem value="tables">
+                                {t('side_panel.tables_section.tables')}
+                            </SelectItem>
                             <SelectItem value="relationships">
-                                Relationships
+                                {t(
+                                    'side_panel.relationships_section.relationships'
+                                )}
                             </SelectItem>
                         </SelectGroup>
                     </SelectContent>
diff --git a/src/pages/editor-page/side-panel/tables-section/table-list/table-list-item/table-list-item-content/table-field/table-field.tsx b/src/pages/editor-page/side-panel/tables-section/table-list/table-list-item/table-list-item-content/table-field/table-field.tsx
index af9c0fa1..a6c6870c 100644
--- a/src/pages/editor-page/side-panel/tables-section/table-list/table-list-item/table-list-item-content/table-field/table-field.tsx
+++ b/src/pages/editor-page/side-panel/tables-section/table-list/table-list-item/table-list-item-content/table-field/table-field.tsx
@@ -22,6 +22,7 @@ import {
 } from '@/components/popover/popover';
 import { Label } from '@/components/label/label';
 import { Checkbox } from '@/components/checkbox/checkbox';
+import { useTranslation } from 'react-i18next';
 
 export interface TableFieldProps {
     field: DBField;
@@ -35,6 +36,7 @@ export const TableField: React.FC<TableFieldProps> = ({
     removeField,
 }) => {
     const { databaseType } = useChartDB();
+    const { t } = useTranslation();
 
     const dataFieldOptions = dataTypeMap[databaseType].map((type) => ({
         label: type.name,
@@ -50,7 +52,9 @@ export const TableField: React.FC<TableFieldProps> = ({
                             <Input
                                 className="h-8 w-full !truncate focus-visible:ring-0"
                                 type="text"
-                                placeholder="Name"
+                                placeholder={t(
+                                    'side_panel.tables_section.table.field_name'
+                                )}
                                 value={field.name}
                                 onChange={(e) =>
                                     updateField({
@@ -69,7 +73,9 @@ export const TableField: React.FC<TableFieldProps> = ({
                                 className="flex h-8 w-full"
                                 mode="single"
                                 options={dataFieldOptions}
-                                placeholder="Type"
+                                placeholder={t(
+                                    'side_panel.tables_section.table.field_type'
+                                )}
                                 selected={field.type.id}
                                 onChange={(value) =>
                                     updateField({
@@ -103,7 +109,9 @@ export const TableField: React.FC<TableFieldProps> = ({
                             </Toggle>
                         </span>
                     </TooltipTrigger>
-                    <TooltipContent>Nullable?</TooltipContent>
+                    <TooltipContent>
+                        {t('side_panel.tables_section.table.nullable')}
+                    </TooltipContent>
                 </Tooltip>
                 <Tooltip>
                     <TooltipTrigger asChild>
@@ -123,7 +131,9 @@ export const TableField: React.FC<TableFieldProps> = ({
                             </Toggle>
                         </span>
                     </TooltipTrigger>
-                    <TooltipContent>Primary Key</TooltipContent>
+                    <TooltipContent>
+                        {t('side_panel.tables_section.table.primary_key')}
+                    </TooltipContent>
                 </Tooltip>
                 <Popover>
                     <PopoverTrigger asChild>
@@ -137,7 +147,9 @@ export const TableField: React.FC<TableFieldProps> = ({
                     <PopoverContent className="w-52">
                         <div className="flex flex-col gap-2">
                             <div className="text-sm font-semibold">
-                                Field Attributes
+                                {t(
+                                    'side_panel.tables_section.table.field_actions.title'
+                                )}
                             </div>
                             <Separator orientation="horizontal" />
                             <div className="flex items-center justify-between">
@@ -145,7 +157,9 @@ export const TableField: React.FC<TableFieldProps> = ({
                                     htmlFor="width"
                                     className="text-gray-700"
                                 >
-                                    Unique
+                                    {t(
+                                        'side_panel.tables_section.table.field_actions.unique'
+                                    )}
                                 </Label>
                                 <Checkbox
                                     checked={field.unique}
@@ -164,7 +178,9 @@ export const TableField: React.FC<TableFieldProps> = ({
                                 onClick={removeField}
                             >
                                 <Trash2 className="size-3.5 text-red-700" />
-                                Delete field
+                                {t(
+                                    'side_panel.tables_section.table.field_actions.delete_field'
+                                )}
                             </Button>
                         </div>
                     </PopoverContent>
diff --git a/src/pages/editor-page/side-panel/tables-section/table-list/table-list-item/table-list-item-content/table-index/table-index.tsx b/src/pages/editor-page/side-panel/tables-section/table-list/table-list-item/table-list-item-content/table-index/table-index.tsx
index 121c53d6..7b87a1fd 100644
--- a/src/pages/editor-page/side-panel/tables-section/table-list/table-list-item/table-list-item-content/table-index/table-index.tsx
+++ b/src/pages/editor-page/side-panel/tables-section/table-list/table-list-item/table-list-item-content/table-index/table-index.tsx
@@ -13,6 +13,7 @@ import { Separator } from '@/components/separator/separator';
 import { Checkbox } from '@/components/checkbox/checkbox';
 import { Label } from '@/components/label/label';
 import { Input } from '@/components/input/input';
+import { useTranslation } from 'react-i18next';
 
 export interface TableIndexProps {
     index: DBIndex;
@@ -27,6 +28,7 @@ export const TableIndex: React.FC<TableIndexProps> = ({
     updateIndex,
     removeIndex,
 }) => {
+    const { t } = useTranslation();
     const fieldOptions = fields.map((field) => ({
         label: field.name,
         value: field.id,
@@ -42,7 +44,9 @@ export const TableIndex: React.FC<TableIndexProps> = ({
                 popoverClassName="w-48"
                 mode="multiple"
                 options={fieldOptions}
-                placeholder="Select fields"
+                placeholder={t(
+                    'side_panel.tables_section.table.index_select_fields'
+                )}
                 selected={index.fieldIds}
                 onChange={updateIndexFields}
                 emptyText="No types found."
@@ -60,7 +64,9 @@ export const TableIndex: React.FC<TableIndexProps> = ({
                     <PopoverContent className="w-52">
                         <div className="flex flex-col gap-2">
                             <div className="text-sm font-semibold">
-                                Index Attributes
+                                {t(
+                                    'side_panel.tables_section.table.index_actions.title'
+                                )}
                             </div>
                             <Separator orientation="horizontal" />
                             <div className="flex flex-col gap-2">
@@ -68,7 +74,9 @@ export const TableIndex: React.FC<TableIndexProps> = ({
                                     htmlFor="width"
                                     className="text-gray-700"
                                 >
-                                    Name
+                                    {t(
+                                        'side_panel.tables_section.table.index_actions.name'
+                                    )}
                                 </Label>
                                 <Input
                                     value={index.name}
@@ -84,7 +92,9 @@ export const TableIndex: React.FC<TableIndexProps> = ({
                                     htmlFor="width"
                                     className="text-gray-700"
                                 >
-                                    Unique
+                                    {t(
+                                        'side_panel.tables_section.table.index_actions.unique'
+                                    )}
                                 </Label>
                                 <Checkbox
                                     checked={index.unique}
@@ -102,7 +112,9 @@ export const TableIndex: React.FC<TableIndexProps> = ({
                                 onClick={removeIndex}
                             >
                                 <Trash2 className="size-3.5 text-red-700" />
-                                Delete index
+                                {t(
+                                    'side_panel.tables_section.table.index_actions.delete_index'
+                                )}
                             </Button>
                         </div>
                     </PopoverContent>
diff --git a/src/pages/editor-page/side-panel/tables-section/table-list/table-list-item/table-list-item-content/table-list-item-content.tsx b/src/pages/editor-page/side-panel/tables-section/table-list/table-list-item/table-list-item-content/table-list-item-content.tsx
index e6a22cb0..85c264fc 100644
--- a/src/pages/editor-page/side-panel/tables-section/table-list/table-list-item/table-list-item-content/table-list-item-content.tsx
+++ b/src/pages/editor-page/side-panel/tables-section/table-list/table-list-item/table-list-item-content/table-list-item-content.tsx
@@ -14,6 +14,7 @@ import { useChartDB } from '@/hooks/use-chartdb';
 import { TableField } from './table-field/table-field';
 import { TableIndex } from './table-index/table-index';
 import { DBIndex } from '@/lib/domain/db-index';
+import { useTranslation } from 'react-i18next';
 
 type AccordionItemValue = 'fields' | 'indexes';
 
@@ -32,6 +33,7 @@ export const TableListItemContent: React.FC<TableListItemContentProps> = ({
         removeIndex,
         updateIndex,
     } = useChartDB();
+    const { t } = useTranslation();
     const { color } = table;
     const [selectedItems, setSelectedItems] = React.useState<
         AccordionItemValue[]
@@ -73,7 +75,7 @@ export const TableListItemContent: React.FC<TableListItemContentProps> = ({
                         <div className="flex flex-1 items-center justify-between">
                             <div className="flex flex-row items-center gap-1">
                                 <FileType2 className="size-4" />
-                                Fields
+                                {t('side_panel.tables_section.table.fields')}
                             </div>
                             <div className="flex flex-row-reverse">
                                 <div className="hidden flex-row-reverse group-hover:flex">
@@ -116,7 +118,7 @@ export const TableListItemContent: React.FC<TableListItemContentProps> = ({
                         <div className="flex flex-1 items-center justify-between">
                             <div className="flex flex-row items-center gap-1">
                                 <FileKey2 className="size-4" />
-                                Indexes
+                                {t('side_panel.tables_section.table.indexes')}
                             </div>
                             <div className="flex flex-row-reverse">
                                 <div className="hidden flex-row-reverse group-hover:flex">
@@ -160,7 +162,7 @@ export const TableListItemContent: React.FC<TableListItemContentProps> = ({
                         onClick={createIndexHandler}
                     >
                         <FileKey2 className="h-4" />
-                        Add Index
+                        {t('side_panel.tables_section.table.add_index')}
                     </Button>
                 </div>
                 <div>
@@ -170,7 +172,7 @@ export const TableListItemContent: React.FC<TableListItemContentProps> = ({
                         onClick={() => createField(table.id)}
                     >
                         <FileType2 className="h-4" />
-                        Add Field
+                        {t('side_panel.tables_section.table.add_field')}
                     </Button>
                 </div>
             </div>
diff --git a/src/pages/editor-page/side-panel/tables-section/table-list/table-list-item/table-list-item-header/table-list-item-header.tsx b/src/pages/editor-page/side-panel/tables-section/table-list/table-list-item/table-list-item-header/table-list-item-header.tsx
index fce02334..7612aee5 100644
--- a/src/pages/editor-page/side-panel/tables-section/table-list/table-list-item/table-list-item-header/table-list-item-header.tsx
+++ b/src/pages/editor-page/side-panel/tables-section/table-list/table-list-item/table-list-item-header/table-list-item-header.tsx
@@ -25,6 +25,7 @@ import {
 import { useReactFlow } from '@xyflow/react';
 import { useLayout } from '@/hooks/use-layout';
 import { useBreakpoint } from '@/hooks/use-breakpoint';
+import { useTranslation } from 'react-i18next';
 
 export interface TableListItemHeaderProps {
     table: DBTable;
@@ -34,6 +35,7 @@ export const TableListItemHeader: React.FC<TableListItemHeaderProps> = ({
     table,
 }) => {
     const { updateTable, removeTable, createIndex, createField } = useChartDB();
+    const { t } = useTranslation();
     const { fitView, setNodes } = useReactFlow();
     const { hideSidePanel } = useLayout();
     const [editMode, setEditMode] = React.useState(false);
@@ -107,7 +109,11 @@ export const TableListItemHeader: React.FC<TableListItemHeaderProps> = ({
                     </ListItemHeaderButton>
                 </DropdownMenuTrigger>
                 <DropdownMenuContent className="w-40">
-                    <DropdownMenuLabel>Table Actions</DropdownMenuLabel>
+                    <DropdownMenuLabel>
+                        {t(
+                            'side_panel.tables_section.table.table_actions.title'
+                        )}
+                    </DropdownMenuLabel>
                     <DropdownMenuSeparator />
                     <DropdownMenuGroup>
                         <DropdownMenuItem
@@ -117,7 +123,9 @@ export const TableListItemHeader: React.FC<TableListItemHeaderProps> = ({
                                 createField(table.id);
                             }}
                         >
-                            Add field
+                            {t(
+                                'side_panel.tables_section.table.table_actions.add_field'
+                            )}
                             <FileType2 className="size-3.5" />
                         </DropdownMenuItem>
                         <DropdownMenuItem
@@ -127,7 +135,9 @@ export const TableListItemHeader: React.FC<TableListItemHeaderProps> = ({
                                 createIndex(table.id);
                             }}
                         >
-                            Add index
+                            {t(
+                                'side_panel.tables_section.table.table_actions.add_index'
+                            )}
                             <FileKey2 className="size-3.5" />
                         </DropdownMenuItem>
                     </DropdownMenuGroup>
@@ -137,14 +147,16 @@ export const TableListItemHeader: React.FC<TableListItemHeaderProps> = ({
                             onClick={deleteTableHandler}
                             className="flex justify-between !text-red-700"
                         >
-                            Delete table
+                            {t(
+                                'side_panel.tables_section.table.table_actions.delete_table'
+                            )}
                             <Trash2 className="size-3.5 text-red-700" />
                         </DropdownMenuItem>
                     </DropdownMenuGroup>
                 </DropdownMenuContent>
             </DropdownMenu>
         ),
-        [table.id, createField, createIndex, deleteTableHandler]
+        [table.id, createField, createIndex, deleteTableHandler, t]
     );
 
     return (
diff --git a/src/pages/editor-page/side-panel/tables-section/tables-section.tsx b/src/pages/editor-page/side-panel/tables-section/tables-section.tsx
index 93ab1701..fd4f992e 100644
--- a/src/pages/editor-page/side-panel/tables-section/tables-section.tsx
+++ b/src/pages/editor-page/side-panel/tables-section/tables-section.tsx
@@ -9,11 +9,13 @@ import { useChartDB } from '@/hooks/use-chartdb';
 import { useLayout } from '@/hooks/use-layout';
 import { EmptyState } from '@/components/empty-state/empty-state';
 import { ScrollArea } from '@/components/scroll-area/scroll-area';
+import { useTranslation } from 'react-i18next';
 
 export interface TablesSectionProps {}
 
 export const TablesSection: React.FC<TablesSectionProps> = () => {
     const { createTable, tables } = useChartDB();
+    const { t } = useTranslation();
     const { closeAllTablesInSidebar } = useLayout();
     const [filterText, setFilterText] = React.useState('');
 
@@ -40,7 +42,7 @@ export const TablesSection: React.FC<TablesSectionProps> = () => {
                 <div className="flex-1">
                     <Input
                         type="text"
-                        placeholder="Filter"
+                        placeholder={t('side_panel.tables_section.filter')}
                         className="h-8 w-full focus-visible:ring-0"
                         value={filterText}
                         onChange={(e) => setFilterText(e.target.value)}
@@ -52,15 +54,19 @@ export const TablesSection: React.FC<TablesSectionProps> = () => {
                     onClick={createTable}
                 >
                     <Table className="h-4" />
-                    Add Table
+                    {t('side_panel.tables_section.add_table')}
                 </Button>
             </div>
             <div className="flex flex-1 flex-col overflow-hidden">
                 <ScrollArea className="h-full">
                     {tables.length === 0 ? (
                         <EmptyState
-                            title="No tables"
-                            description="Create a table to get started"
+                            title={t(
+                                'side_panel.tables_section.empty_state.title'
+                            )}
+                            description={t(
+                                'side_panel.tables_section.empty_state.description'
+                            )}
                             className="mt-20"
                         />
                     ) : (
diff --git a/src/pages/editor-page/top-navbar/top-navbar.tsx b/src/pages/editor-page/top-navbar/top-navbar.tsx
index 1218bdd6..a52da8dd 100644
--- a/src/pages/editor-page/top-navbar/top-navbar.tsx
+++ b/src/pages/editor-page/top-navbar/top-navbar.tsx
@@ -38,6 +38,7 @@ import {
     keyboardShortcutsForOS,
 } from '@/context/keyboard-shortcuts-context/keyboard-shortcuts';
 import { useHistory } from '@/hooks/use-history';
+import { useTranslation } from 'react-i18next';
 
 export interface TopNavbarProps {}
 
@@ -55,6 +56,7 @@ export const TopNavbar: React.FC<TopNavbarProps> = () => {
         openExportSQLDialog,
         showAlert,
     } = useDialog();
+    const { t } = useTranslation();
     const { redo, undo, hasRedo, hasUndo } = useHistory();
     const { isMd: isDesktop } = useBreakpoint('md');
     const { config, updateConfig } = useConfig();
@@ -195,7 +197,7 @@ export const TopNavbar: React.FC<TopNavbarProps> = () => {
             <Tooltip>
                 <TooltipTrigger>
                     <Badge variant="secondary" className="flex gap-1">
-                        {isDesktop ? 'Last saved' : 'Saved'}
+                        {isDesktop ? t('last_saved') : t('saved')}
                         <TimeAgo datetime={currentDiagram.updatedAt} />
                     </Badge>
                 </TooltipTrigger>
@@ -204,14 +206,14 @@ export const TopNavbar: React.FC<TopNavbarProps> = () => {
                 </TooltipContent>
             </Tooltip>
         );
-    }, [currentDiagram.updatedAt, isDesktop]);
+    }, [currentDiagram.updatedAt, isDesktop, t]);
 
     const renderDiagramName = useCallback(() => {
         return (
             <>
                 <DiagramIcon diagram={currentDiagram} />
                 <div className="flex">
-                    {isDesktop ? <Label>Diagrams/</Label> : null}
+                    {isDesktop ? <Label>{t('diagrams')}/</Label> : null}
                 </div>
                 <div className="flex flex-row items-center gap-1">
                     {editMode ? (
@@ -258,6 +260,7 @@ export const TopNavbar: React.FC<TopNavbarProps> = () => {
         editMode,
         editedDiagramName,
         isDesktop,
+        t,
     ]);
 
     const emojiAI = '✨';
@@ -281,18 +284,20 @@ export const TopNavbar: React.FC<TopNavbarProps> = () => {
                 <div>
                     <Menubar className="border-none shadow-none">
                         <MenubarMenu>
-                            <MenubarTrigger>File</MenubarTrigger>
+                            <MenubarTrigger>
+                                {t('menu.file.file')}
+                            </MenubarTrigger>
                             <MenubarContent>
                                 <MenubarItem onClick={createNewDiagram}>
-                                    New
+                                    {t('menu.file.new')}
                                 </MenubarItem>
                                 <MenubarItem onClick={openDiagram}>
-                                    Open
+                                    {t('menu.file.open')}
                                 </MenubarItem>
                                 <MenubarSeparator />
                                 <MenubarSub>
                                     <MenubarSubTrigger>
-                                        Export SQL
+                                        {t('menu.file.export_sql')}
                                     </MenubarSubTrigger>
                                     <MenubarSubContent>
                                         <MenubarItem
@@ -368,7 +373,7 @@ export const TopNavbar: React.FC<TopNavbarProps> = () => {
                                 </MenubarSub>
                                 <MenubarSub>
                                     <MenubarSubTrigger>
-                                        Export as
+                                        {t('menu.file.export_as')}
                                     </MenubarSubTrigger>
                                     <MenubarSubContent>
                                         <MenubarItem onClick={exportPNG}>
@@ -386,26 +391,35 @@ export const TopNavbar: React.FC<TopNavbarProps> = () => {
                                 <MenubarItem
                                     onClick={() =>
                                         showAlert({
-                                            title: 'Delete Diagram',
-                                            description:
-                                                'This action cannot be undone. This will permanently delete the diagram.',
-                                            actionLabel: 'Delete',
-                                            closeLabel: 'Cancel',
+                                            title: t(
+                                                'delete_diagram_alert.title'
+                                            ),
+                                            description: t(
+                                                'delete_diagram_alert.description'
+                                            ),
+                                            actionLabel: t(
+                                                'delete_diagram_alert.delete'
+                                            ),
+                                            closeLabel: t(
+                                                'delete_diagram_alert.cancel'
+                                            ),
                                             onAction: deleteDiagram,
                                         })
                                     }
                                 >
-                                    Delete Diagram
+                                    {t('menu.file.delete_diagram')}
                                 </MenubarItem>
                                 <MenubarSeparator />
-                                <MenubarItem>Exit</MenubarItem>
+                                <MenubarItem>{t('menu.file.exit')}</MenubarItem>
                             </MenubarContent>
                         </MenubarMenu>
                         <MenubarMenu>
-                            <MenubarTrigger>Edit</MenubarTrigger>
+                            <MenubarTrigger>
+                                {t('menu.edit.edit')}
+                            </MenubarTrigger>
                             <MenubarContent>
                                 <MenubarItem onClick={undo} disabled={!hasUndo}>
-                                    Undo
+                                    {t('menu.edit.undo')}
                                     <MenubarShortcut>
                                         {
                                             keyboardShortcutsForOS[
@@ -415,7 +429,7 @@ export const TopNavbar: React.FC<TopNavbarProps> = () => {
                                     </MenubarShortcut>
                                 </MenubarItem>
                                 <MenubarItem onClick={redo} disabled={!hasRedo}>
-                                    Redo
+                                    {t('menu.edit.redo')}
                                     <MenubarShortcut>
                                         {
                                             keyboardShortcutsForOS[
@@ -428,16 +442,23 @@ export const TopNavbar: React.FC<TopNavbarProps> = () => {
                                 <MenubarItem
                                     onClick={() =>
                                         showAlert({
-                                            title: 'Clear Diagram',
-                                            description:
-                                                'This action cannot be undone. This will permanently delete all the data in the diagram.',
-                                            actionLabel: 'Clear',
-                                            closeLabel: 'Cancel',
+                                            title: t(
+                                                'clear_diagram_alert.title'
+                                            ),
+                                            description: t(
+                                                'clear_diagram_alert.description'
+                                            ),
+                                            actionLabel: t(
+                                                'clear_diagram_alert.clear'
+                                            ),
+                                            closeLabel: t(
+                                                'clear_diagram_alert.cancel'
+                                            ),
                                             onAction: clearDiagramData,
                                         })
                                     }
                                 >
-                                    Clear
+                                    {t('menu.edit.clear')}
                                 </MenubarItem>
                             </MenubarContent>
                         </MenubarMenu>
@@ -473,13 +494,15 @@ export const TopNavbar: React.FC<TopNavbarProps> = () => {
                             </MenubarContent>
                         </MenubarMenu> */}
                         <MenubarMenu>
-                            <MenubarTrigger>Help</MenubarTrigger>
+                            <MenubarTrigger>
+                                {t('menu.help.help')}
+                            </MenubarTrigger>
                             <MenubarContent>
                                 <MenubarItem onClick={openChartDBIO}>
-                                    Visit ChartDB
+                                    {t('menu.help.visit_website')}
                                 </MenubarItem>
                                 <MenubarItem onClick={openJoinDiscord}>
-                                    Join us on Discord
+                                    {t('menu.help.join_discord')}
                                 </MenubarItem>
                             </MenubarContent>
                         </MenubarMenu>