diff --git a/packages/app/.gitignore b/packages/app/.gitignore
index d16c893..a1cb8fa 100644
--- a/packages/app/.gitignore
+++ b/packages/app/.gitignore
@@ -27,3 +27,7 @@ gitignore
 # System Files
 .DS_Store
 Thumbs.db
+
+# i18n
+src/locale/locales/_build/
+src/locale/locales/**/*.mjs
diff --git a/packages/app/app.config.ts b/packages/app/app.config.ts
index 5e287e0..b6a5e8a 100644
--- a/packages/app/app.config.ts
+++ b/packages/app/app.config.ts
@@ -16,11 +16,13 @@ import remarkGfm from 'remark-gfm';
 import {rehypeBlockquote} from './rehype-custom/rehypeCustomBlockquote';
 
 import {statebuilder} from 'statebuilder/compiler';
+import {lingui} from '@lingui/vite-plugin';
 
 const defaultConfig: ViteCustomizableConfig = {
   plugins: [
     viteTsConfigPaths(),
     customMdxConfig(),
+    lingui(),
     statebuilder({
       transformStores: ['eDefineAsync'],
       autoKey: true,
@@ -46,6 +48,11 @@ const defaultConfig: ViteCustomizableConfig = {
 
 export default defineConfig({
   middleware: './src/middleware.ts',
+  solid: {
+    babel: {
+      plugins: ['macros'],
+    },
+  },
   server: {
     prerender: {
       routes: ['/about', '/about/supported-workflow-features'],
diff --git a/packages/app/lingui.config.ts b/packages/app/lingui.config.ts
new file mode 100644
index 0000000..93658f6
--- /dev/null
+++ b/packages/app/lingui.config.ts
@@ -0,0 +1,15 @@
+import type {LinguiConfig} from '@lingui/conf';
+
+const config: LinguiConfig = {
+  locales: ['en'],
+  compileNamespace: 'es',
+  catalogs: [
+    {
+      path: '<rootDir>/src/locales/{locale}',
+      include: ['src'],
+    },
+  ],
+  format: 'po',
+};
+
+export default config;
diff --git a/packages/app/package.json b/packages/app/package.json
index fc48d5b..66fdcc7 100644
--- a/packages/app/package.json
+++ b/packages/app/package.json
@@ -11,6 +11,9 @@
     "dev": "vinxi dev",
     "build": "vinxi build",
     "start": "vinxi start",
+    "intl:build": "pnpm intl:extract && pnpm intl:compile",
+    "intl:extract": "lingui extract",
+    "intl:compile": "lingui compile",
     "version": "vinxi version"
   },
   "dependencies": {
@@ -29,6 +32,8 @@
     "@kobalte/core": "^0.13.7",
     "@kobalte/utils": "^0.9.1",
     "@lezer/highlight": "^1.2.1",
+    "@lingui/conf": "^4.14.0",
+    "@lingui/core": "^4.14.0",
     "@mdx-js/mdx": "^3.1.0",
     "@open-rpc/client-js": "^1.8.1",
     "@pipelineui/workflow-languageserver": "workspace:*",
@@ -69,7 +74,12 @@
     "node": ">=18"
   },
   "devDependencies": {
+    "@babel/core": "^7.26.0",
+    "@lingui/cli": "^4.14.0",
+    "@lingui/macro": "^4.14.0",
+    "@lingui/vite-plugin": "^4.14.0",
     "@types/ws": "^8.5.12",
+    "babel-plugin-macros": "^3.1.0",
     "rehype-autolink-headings": "^7.1.0",
     "rehype-raw": "^7.0.0",
     "rehype-slug": "^6.0.0",
diff --git a/packages/app/src/app.tsx b/packages/app/src/app.tsx
index d472527..f4608dc 100644
--- a/packages/app/src/app.tsx
+++ b/packages/app/src/app.tsx
@@ -1,24 +1,33 @@
+import {setupI18n} from '@lingui/core';
 import {MetaProvider, Title} from '@solidjs/meta';
 import {Router} from '@solidjs/router';
 import {FileRoutes} from '@solidjs/start/router';
 import {Suspense} from 'solid-js';
-import './global-codeui.css';
-import './app.css';
 import {StateProvider} from 'statebuilder';
+import './app.css';
+import './global-codeui.css';
+import {I18nProvider} from './locales/i18n';
+
+const {messages: enMessages} = await import('./locales/en.po');
 
 export default function App() {
+  const i18n = setupI18n();
+  i18n.loadAndActivate({locale: 'en', messages: enMessages});
+
   return (
-    <Router
-      root={props => (
-        <MetaProvider>
-          <Title>PipelineUI</Title>
-          <Suspense>
-            <StateProvider>{props.children}</StateProvider>
-          </Suspense>
-        </MetaProvider>
-      )}
-    >
-      <FileRoutes />
-    </Router>
+    <I18nProvider value={i18n}>
+      <Router
+        root={props => (
+          <MetaProvider>
+            <Title>PipelineUI</Title>
+            <Suspense>
+              <StateProvider>{props.children}</StateProvider>
+            </Suspense>
+          </MetaProvider>
+        )}
+      >
+        <FileRoutes />
+      </Router>
+    </I18nProvider>
   );
 }
diff --git a/packages/app/src/components/Editor/Header/CurrentUser/CurrentUser.tsx b/packages/app/src/components/Editor/Header/CurrentUser/CurrentUser.tsx
index 830d1f3..a571ae7 100644
--- a/packages/app/src/components/Editor/Header/CurrentUser/CurrentUser.tsx
+++ b/packages/app/src/components/Editor/Header/CurrentUser/CurrentUser.tsx
@@ -11,11 +11,15 @@ import type {Models} from 'appwrite';
 import {Show} from 'solid-js';
 import {logout, signupWithGithub} from '~/lib/session';
 import {badge, currentUser} from './CurrentUser.css';
+import {useI18n} from '~/locales/i18n';
+import {msg} from '@lingui/macro';
 export interface CurrentUserBarProps {
   user: Models.User<any> | null;
 }
 
 export function EditorHeaderCurrentUser(props: CurrentUserBarProps) {
+  const {_} = useI18n();
+
   const initials = (user: Models.User<any>) => {
     if (user.name) {
       const [firstName, lastName] = user.name.split(' ');
@@ -43,7 +47,7 @@ export function EditorHeaderCurrentUser(props: CurrentUserBarProps) {
             type={'submit'}
             loading={isSignup.pending}
           >
-            Signup with Github
+            {_(msg`Signup with GitHub`)}
           </Button>
         </form>
       }
@@ -74,7 +78,7 @@ export function EditorHeaderCurrentUser(props: CurrentUserBarProps) {
                 logoutAction().then(() => window.location.reload());
               }}
             >
-              Logout
+              {_(msg`Logout`)}
             </DropdownMenuItem>
           </DropdownMenuContent>
         </DropdownMenu>
diff --git a/packages/app/src/components/Editor/Header/Header.tsx b/packages/app/src/components/Editor/Header/Header.tsx
index 5e18ffe..7d0d34d 100644
--- a/packages/app/src/components/Editor/Header/Header.tsx
+++ b/packages/app/src/components/Editor/Header/Header.tsx
@@ -16,6 +16,8 @@ import {EditorContext} from '../editor.context';
 import {EditorUiStore} from '../../../store/editor/ui.store';
 import * as styles from './EditorHeader.css';
 import {EditorHeaderCurrentUser} from './CurrentUser/CurrentUser';
+import {useI18n} from '~/locales/i18n';
+import {msg} from '@lingui/macro';
 
 export interface EditorHeaderProps {
   showBack: boolean;
@@ -42,6 +44,7 @@ function EditorHeaderActionButton(
 }
 
 function EditorHeaderForkButton() {
+  const {_} = useI18n();
   const [isOpen, setOpen] = createSignal(false);
   const editorStore = provideState(EditorStore);
   const editorContext = useContext(EditorContext)!;
@@ -51,13 +54,14 @@ function EditorHeaderForkButton() {
       <PopoverTrigger
         as={triggerProps => (
           <Button theme={'primary'} {...triggerProps}>
-            Fork
+            {_(msg`Fork`)}
           </Button>
         )}
       />
       <PopoverContent variant={'bordered'}>
-        Forking this source will create a new scratch remotely connected to your
-        profile, that can be modified only by you.
+        {_(
+          msg`Forking this source will create a new scratch remotely connected to your profile, that can be modified only by you`,
+        )}
         <div>
           <form
             method={'post'}
@@ -68,11 +72,11 @@ function EditorHeaderForkButton() {
             )}
           >
             <Button size={'xs'} theme={'primary'} type={'submit'}>
-              Confirm
+              {_(msg`Confirm`)}
             </Button>
           </form>
           <Button size={'xs'} theme={'secondary'}>
-            Cancel
+            {_(msg`Cancel`)}
           </Button>
         </div>
       </PopoverContent>
@@ -81,6 +85,7 @@ function EditorHeaderForkButton() {
 }
 
 export function EditorHeader(props: EditorHeaderProps) {
+  const {_} = useI18n();
   const editorUi = provideState(EditorUiStore);
   const editorStore = provideState(EditorStore);
   const user = provideState(UserStore);
@@ -92,7 +97,7 @@ export function EditorHeader(props: EditorHeaderProps) {
       <header class={styles.header}>
         <Show when={props.showBack}>
           <IconButton
-            aria-label={'Go back'}
+            aria-label={_(msg`Go back`)}
             size={'xs'}
             theme={'secondary'}
             pill
@@ -131,7 +136,7 @@ export function EditorHeader(props: EditorHeaderProps) {
                       size={'sm'}
                       loading={isUpdating.pending}
                     >
-                      Save
+                      {_(msg`Save`)}
                     </Button>
                   </form>
                 </Show>
@@ -147,13 +152,13 @@ export function EditorHeader(props: EditorHeaderProps) {
           active={editorUi.get.leftPanel === 'code'}
           onClick={() => editorUi.actions.toggleLeftPanel('code')}
         >
-          Code
+          {_(msg`Code`)}
         </EditorHeaderActionButton>
         <EditorHeaderActionButton
           active={editorUi.get.leftPanel === 'merge'}
           onClick={() => editorUi.actions.toggleLeftPanel('merge')}
         >
-          Merge view
+          {_(msg`Merge view`)}
         </EditorHeaderActionButton>
 
         <div class={styles.subHeaderRightContent}>
@@ -161,7 +166,7 @@ export function EditorHeader(props: EditorHeaderProps) {
             active={editorUi.get.rightPanel === 'properties'}
             onClick={() => editorUi.actions.toggleRightPanel('properties')}
           >
-            Properties
+            {_(msg`Properties`)}
           </EditorHeaderActionButton>
         </div>
       </div>
diff --git a/packages/app/src/components/Editor/RightSidebar/RightSidebar.tsx b/packages/app/src/components/Editor/RightSidebar/RightSidebar.tsx
deleted file mode 100644
index e69de29..0000000
diff --git a/packages/app/src/components/Editor/StatusBar/StatusBar.tsx b/packages/app/src/components/Editor/StatusBar/StatusBar.tsx
index 3003085..56909e3 100644
--- a/packages/app/src/components/Editor/StatusBar/StatusBar.tsx
+++ b/packages/app/src/components/Editor/StatusBar/StatusBar.tsx
@@ -1,3 +1,11 @@
+import {Icon} from '#ui/components/Icon';
+import {Button, IconButton, Tooltip} from '@codeui/kit';
+import {msg} from '@lingui/macro';
+import {provideState} from 'statebuilder';
+import {useI18n} from '~/locales/i18n';
+import {EditorStore} from '~/store/editor/editor.store';
+import {EditorUiStore} from '~/store/editor/ui.store';
+import {CanvasStore} from '../../../store/editor/canvas.store';
 import {
   diagnosticCounter,
   diagnosticCounterBar,
@@ -6,18 +14,12 @@ import {
   statusBar,
   statusBarAction,
 } from './EditorStatusBar.css';
-import {provideState} from 'statebuilder';
-import {CanvasStore} from '../../../store/editor/canvas.store';
-import {Button, IconButton, Tooltip} from '@codeui/kit';
-import {Icon} from '#ui/components/Icon';
-import {EditorStore} from '~/store/editor/editor.store';
-import {EditorUiStore} from '~/store/editor/ui.store';
-import {createEffect} from 'solid-js';
 
 export function EditorStatusBar() {
   const canvasState = provideState(CanvasStore);
   const editorUiStore = provideState(EditorUiStore);
   const editorStore = provideState(EditorStore);
+  const {_} = useI18n();
 
   const size = () => Math.floor(canvasState.get.scale * 100);
 
@@ -37,7 +39,7 @@ export function EditorStatusBar() {
         <div class={diagnosticCounterBar}>
           <Tooltip
             theme={'secondary'}
-            content={`Errors: ${errors()}, Warnings: ${warnings()}`}
+            content={_(msg`Errors: ${errors()}, Warnings: ${warnings()}`)}
           >
             <Button
               class={statusBarAction()}
@@ -66,12 +68,12 @@ export function EditorStatusBar() {
       </div>
 
       <div class={rightSide}>
-        <Tooltip theme={'secondary'} content={'Fit to screen'}>
+        <Tooltip theme={'secondary'} content={_(msg`Fit to screen`)}>
           <IconButton
             size={'xs'}
             theme={'secondary'}
             variant={'ghost'}
-            aria-label={'Fit'}
+            aria-label={_(msg`Fit to screen`)}
             onClick={() => canvasState.fitToCenter()}
           >
             <Icon name={'fit_screen'} />
diff --git a/packages/app/src/components/Home/CurrentUser/CurrentUser.tsx b/packages/app/src/components/Home/CurrentUser/CurrentUser.tsx
index 080dd10..f92ba79 100644
--- a/packages/app/src/components/Home/CurrentUser/CurrentUser.tsx
+++ b/packages/app/src/components/Home/CurrentUser/CurrentUser.tsx
@@ -11,11 +11,14 @@ import type {Models} from 'appwrite';
 import {Show} from 'solid-js';
 import {logout, signupWithGithub} from '~/lib/session';
 import {badge, currentUser} from './CurrentUser.css';
+import {useI18n} from '~/locales/i18n';
+import {msg} from '@lingui/macro';
 export interface CurrentUserBarProps {
   user: Models.User<any> | null;
 }
 
 export function CurrentUserBar(props: CurrentUserBarProps) {
+  const {_} = useI18n();
   const initials = (user: Models.User<any>) => {
     if (user.name) {
       const [firstName, lastName] = user.name.split(' ');
@@ -43,7 +46,7 @@ export function CurrentUserBar(props: CurrentUserBarProps) {
             type={'submit'}
             loading={isSignup.pending}
           >
-            Signup with Github
+            {_(msg`Signup with GitHub`)}
           </Button>
         </form>
       }
@@ -76,7 +79,7 @@ export function CurrentUserBar(props: CurrentUserBarProps) {
                 logoutAction().then(() => window.location.reload());
               }}
             >
-              Logout
+              {_(msg`Logout`)}
             </DropdownMenuItem>
           </DropdownMenuContent>
         </DropdownMenu>
diff --git a/packages/app/src/components/Home/Footer/Footer.tsx b/packages/app/src/components/Home/Footer/Footer.tsx
index 415a76d..34be2a0 100644
--- a/packages/app/src/components/Home/Footer/Footer.tsx
+++ b/packages/app/src/components/Home/Footer/Footer.tsx
@@ -1,13 +1,16 @@
+import {msg} from '@lingui/macro';
 import {A} from '@solidjs/router';
-import {footer, footerContent, footerLinks, footerLink} from './Footer.css';
+import {useI18n} from '~/locales/i18n';
+import {footer, footerContent, footerLink, footerLinks} from './Footer.css';
 
 export function HomeFooter() {
+  const {_} = useI18n();
   return (
     <footer class={footer}>
       <div class={footerContent}>
         <div class={footerLinks}>
           <A class={footerLink} href={'/about'}>
-            About
+            {_(msg`About`)}
           </A>
 
           <A
@@ -15,11 +18,11 @@ export function HomeFooter() {
             target="blank"
             href={'https://github.com/riccardoperra/pipelineui'}
           >
-            Source
+            {_(msg`Source`)}
           </A>
         </div>
         <span style={{color: '#ddd'}}>
-          Built with{' '}
+          {_(msg`Built with`)}
           <A class={footerLink} href="https://github.com/solidjs/solid">
             Solid
           </A>{' '}
diff --git a/packages/app/src/components/Home/Home.tsx b/packages/app/src/components/Home/Home.tsx
index 3a1444b..ed923d6 100644
--- a/packages/app/src/components/Home/Home.tsx
+++ b/packages/app/src/components/Home/Home.tsx
@@ -1,22 +1,12 @@
 import {Button} from '@codeui/kit';
-import {
-  query,
-  createAsync,
-  useSearchParams,
-  useSubmission,
-} from '@solidjs/router';
-import {
-  createMemo,
-  createResource,
-  ErrorBoundary,
-  Match,
-  Show,
-  Suspense,
-  Switch,
-  useTransition,
-} from 'solid-js';
+import {msg} from '@lingui/macro';
+import {query, useSearchParams, useSubmission} from '@solidjs/router';
+import {createResource, Match, Show, Suspense, Switch} from 'solid-js';
+import {provideState} from 'statebuilder';
 import {getGithubData} from '~/lib/githubApi';
-import {loggedInUser} from '~/lib/session';
+import {useI18n} from '~/locales/i18n';
+import {UserStore} from '~/store/user.store';
+import {OverlayLoader} from '~/ui/components/Loader/Loader';
 import {createScratch} from '../../lib/scratchApi';
 import {CurrentUserBar} from './CurrentUser/CurrentUser';
 import {HomeFooter} from './Footer/Footer';
@@ -34,9 +24,6 @@ import {RepoCard} from './RepoCard/RepoCard';
 import {RepoCardFallback} from './RepoCard/RepoCardFallback';
 import {RepoSearch} from './RepoSearch/RepoSearch';
 import {ScratchList} from './ScratchList/ScratchList';
-import {OverlayLoader} from '~/ui/components/Loader/Loader';
-import {provideState} from 'statebuilder';
-import {UserStore} from '~/store/user.store';
 
 export const searchRepo = query(async (path: string | null) => {
   'use server';
@@ -52,6 +39,7 @@ export const searchRepo = query(async (path: string | null) => {
 }, 'repository');
 
 export function Home() {
+  const {_} = useI18n();
   const user = provideState(UserStore);
   const isCreatingScratch = useSubmission(createScratch);
   const [params] = useSearchParams();
@@ -113,13 +101,15 @@ export function Home() {
                   type={'submit'}
                   size={'lg'}
                 >
-                  Create from scratch
+                  {_(msg`Create from scratch`)}
                 </Button>
               </form>
             </Show>
 
             <Show when={user()}>
-              <div class={choiceSeparator}>Your scratches & forks</div>
+              <div class={choiceSeparator}>
+                {_(msg`Your scratches & forks`)}
+              </div>
 
               <ScratchList />
             </Show>
diff --git a/packages/app/src/components/Home/RepoCard/RepoCard.tsx b/packages/app/src/components/Home/RepoCard/RepoCard.tsx
index 3ce6354..daeb2ca 100644
--- a/packages/app/src/components/Home/RepoCard/RepoCard.tsx
+++ b/packages/app/src/components/Home/RepoCard/RepoCard.tsx
@@ -4,6 +4,8 @@ import {A} from '@solidjs/router';
 import {For} from 'solid-js';
 import {GithubRepositoryFile, type GithubRepository} from '~/lib/githubApi';
 import * as styles from './RepoCard.css';
+import {useI18n} from '~/locales/i18n';
+import {msg} from '@lingui/macro';
 
 export interface RepoCardProps {
   repo: GithubRepository;
@@ -11,6 +13,8 @@ export interface RepoCardProps {
 }
 
 export function RepoCard(props: RepoCardProps) {
+  const {_} = useI18n();
+
   return (
     <div class={styles.repoCard}>
       <div class={styles.repoCardInfoWrapper}>
@@ -32,7 +36,7 @@ export function RepoCard(props: RepoCardProps) {
               class={styles.repoCardWorkflowItem}
               as={A}
               pill
-              title={`Edit ${workflow.path}`}
+              title={_(msg`Edit ${workflow.path}`)}
               href={`/editor/${props.repo.repo}/${props.repo.defaultBranch}/${workflow.path}`}
               size={'md'}
               theme={'secondary'}
diff --git a/packages/app/src/components/Home/RepoSearch/RepoSearch.tsx b/packages/app/src/components/Home/RepoSearch/RepoSearch.tsx
index d2329f2..a57ed91 100644
--- a/packages/app/src/components/Home/RepoSearch/RepoSearch.tsx
+++ b/packages/app/src/components/Home/RepoSearch/RepoSearch.tsx
@@ -11,8 +11,11 @@ import {
   submitRepoSubmitButton,
   wrapper,
 } from './RepoSearch.css';
+import {useI18n} from '~/locales/i18n';
+import {defineMessage, msg} from '@lingui/macro';
 
 export function RepoSearch() {
+  const {_} = useI18n();
   const [params, setParams] = useSearchParams();
   const [searchTextValue, setSearchTextValue] = createSignal<string>(
     (params.repo as string) ?? '',
@@ -42,7 +45,12 @@ export function RepoSearch() {
               input: submitRepoInput,
             }}
             size={'lg'}
-            placeholder={'e.g. riccardoperra/codeimage'}
+            placeholder={_(
+              defineMessage({
+                comment: 'Repository search example',
+                message: 'e.g. riccardoperra/codeimage',
+              }),
+            )}
             theme={'filled'}
             value={searchTextValue()}
             onChange={setSearchTextValue}
diff --git a/packages/app/src/components/Home/ScratchList/ScratchList.tsx b/packages/app/src/components/Home/ScratchList/ScratchList.tsx
index 5bfcec7..c42dae0 100644
--- a/packages/app/src/components/Home/ScratchList/ScratchList.tsx
+++ b/packages/app/src/components/Home/ScratchList/ScratchList.tsx
@@ -17,6 +17,8 @@ import {
   scratchListItemLink,
 } from './ScratchList.css';
 import {ConfirmPopover} from '#ui/components/ConfirmPopover/ConfirmPopover';
+import {useI18n} from '~/locales/i18n';
+import {msg} from '@lingui/macro';
 
 function ScratchListForkLabel(props: {url: string}) {
   const parsedUrl = () => {
@@ -50,12 +52,13 @@ export interface ScratchListItemDeleteActionProps {
 }
 
 function ScratchListItemDeleteAction(props: ScratchListItemDeleteActionProps) {
+  const {_} = useI18n();
   const deleteScratchAction = useAction(deleteScratch);
 
   return (
     <ConfirmPopover
       actionType={'destructive'}
-      description={'Do you want to delete this scratch file?'}
+      description={_(msg`Do you want do delete this scratch file?`)}
       onConfirm={() => {
         deleteScratchAction(props.scratchId).then(props.onDelete);
       }}
@@ -77,6 +80,7 @@ function ScratchListItemDeleteAction(props: ScratchListItemDeleteActionProps) {
 }
 
 export function ScratchList() {
+  const {_} = useI18n();
   const scratches = createAsync(() => listUserScratches(), {
     initialValue: {documents: [], total: 0},
   });
@@ -128,7 +132,7 @@ export function ScratchList() {
                       </Match>
 
                       <Match when={scratch.type === 'scratch'}>
-                        Scratch file
+                        {_(msg`Scratch file`)}
                       </Match>
                     </Switch>
                   </small>
diff --git a/packages/app/src/locales/en.po b/packages/app/src/locales/en.po
new file mode 100644
index 0000000..78cc805
--- /dev/null
+++ b/packages/app/src/locales/en.po
@@ -0,0 +1,100 @@
+msgid ""
+msgstr ""
+"POT-Creation-Date: 2024-11-10 13:06+0100\n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=utf-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"X-Generator: @lingui/cli\n"
+"Language: en\n"
+
+#: src/components/Home/Footer/Footer.tsx:13
+msgid "About"
+msgstr ""
+
+#: src/components/Home/Footer/Footer.tsx:25
+msgid "Built with"
+msgstr ""
+
+#: src/components/Editor/Header/Header.tsx:79
+msgid "Cancel"
+msgstr ""
+
+#: src/components/Editor/Header/Header.tsx:155
+msgid "Code"
+msgstr ""
+
+#: src/components/Editor/Header/Header.tsx:75
+msgid "Confirm"
+msgstr ""
+
+#: src/components/Home/Home.tsx:104
+msgid "Create from scratch"
+msgstr ""
+
+#: src/components/Home/ScratchList/ScratchList.tsx:61
+msgid "Do you want do delete this scratch file?"
+msgstr ""
+
+#. Repository search example
+#: src/components/Home/RepoSearch/RepoSearch.tsx:49
+msgid "e.g. riccardoperra/codeimage"
+msgstr ""
+
+#: src/components/Home/RepoCard/RepoCard.tsx:39
+msgid "Edit {0}"
+msgstr ""
+
+#: src/components/Editor/StatusBar/StatusBar.tsx:42
+msgid "Errors: {0}, Warnings: {1}"
+msgstr ""
+
+#: src/components/Editor/StatusBar/StatusBar.tsx:71
+#: src/components/Editor/StatusBar/StatusBar.tsx:76
+msgid "Fit to screen"
+msgstr ""
+
+#: src/components/Editor/Header/Header.tsx:57
+msgid "Fork"
+msgstr ""
+
+#: src/components/Editor/Header/Header.tsx:63
+msgid "Forking this source will create a new scratch remotely connected to your profile, that can be modified only by you"
+msgstr ""
+
+#: src/components/Editor/Header/Header.tsx:100
+msgid "Go back"
+msgstr ""
+
+#: src/components/Editor/Header/CurrentUser/CurrentUser.tsx:81
+#: src/components/Home/CurrentUser/CurrentUser.tsx:82
+msgid "Logout"
+msgstr ""
+
+#: src/components/Editor/Header/Header.tsx:161
+msgid "Merge view"
+msgstr ""
+
+#: src/components/Editor/Header/Header.tsx:169
+msgid "Properties"
+msgstr ""
+
+#: src/components/Editor/Header/Header.tsx:139
+msgid "Save"
+msgstr ""
+
+#: src/components/Home/ScratchList/ScratchList.tsx:135
+msgid "Scratch file"
+msgstr ""
+
+#: src/components/Editor/Header/CurrentUser/CurrentUser.tsx:50
+#: src/components/Home/CurrentUser/CurrentUser.tsx:49
+msgid "Signup with GitHub"
+msgstr ""
+
+#: src/components/Home/Footer/Footer.tsx:21
+msgid "Source"
+msgstr ""
+
+#: src/components/Home/Home.tsx:111
+msgid "Your scratches & forks"
+msgstr ""
diff --git a/packages/app/src/locales/i18n.ts b/packages/app/src/locales/i18n.ts
new file mode 100644
index 0000000..b40aaf3
--- /dev/null
+++ b/packages/app/src/locales/i18n.ts
@@ -0,0 +1,44 @@
+import {I18n} from '@lingui/core';
+import {
+  createComponent,
+  createContext,
+  createSignal,
+  ParentProps,
+  useContext,
+} from 'solid-js';
+
+export interface I18nContext {
+  i18n: I18n;
+  _: I18n['t'];
+}
+export const I18nContext = createContext<I18nContext>();
+
+export function I18nProvider(props: ParentProps<{value: I18n}>) {
+  const i18n = props.value;
+  const [notifier, notify] = createSignal({}, {equals: false});
+
+  i18n.on('change', () => notify({}));
+
+  const t: (typeof i18n)['t'] = (...args: any[]) => {
+    notifier();
+    return i18n.t.apply(i18n, args as any);
+  };
+
+  return createComponent(I18nContext.Provider, {
+    value: {
+      i18n,
+      _: t,
+    },
+    get children() {
+      return props.children;
+    },
+  });
+}
+
+export function useI18n() {
+  const i18n = useContext(I18nContext);
+  if (!i18n) {
+    throw new Error('Cannot use `useI18n` outside of I18nContext provider');
+  }
+  return i18n;
+}