From cfad0deb9835f2ec2250f4dda2fa385f0d57c319 Mon Sep 17 00:00:00 2001
From: Paul Ccari <46382556+paulclindo@users.noreply.github.com>
Date: Fri, 14 Jun 2024 21:22:21 -0500
Subject: [PATCH] feat: support i18n (#333)

* setup i18n

* setup i18n

* setup i18n

* refactor: i18n

* refactor: i18n

* fixes

* fixes

* fix package lock

* install i18next

* refactor: i18n in visor

* fix: remove i18n lib

* add readme

* add readme

* add readme

* fix
---
 apps/shinkai-app/.nvmrc                       |   1 -
 apps/shinkai-desktop/.nvmrc                   |   1 -
 apps/shinkai-desktop/src/pages/agents.tsx     |  58 +++---
 .../src/pages/ai-model-installation.tsx       |   6 +-
 .../src/pages/ai-model-locally.tsx            |   9 +-
 apps/shinkai-desktop/src/pages/analytics.tsx  |  10 +-
 .../src/pages/chat/chat-conversation.tsx      |  48 +++--
 .../src/pages/chat/empty-message.tsx          |  13 +-
 .../shinkai-desktop/src/pages/chat/layout.tsx |  29 +--
 .../src/pages/create-agent.tsx                |  23 +-
 apps/shinkai-desktop/src/pages/create-job.tsx |  23 +-
 .../src/pages/layout/main-layout.tsx          |  75 +++----
 .../src/pages/layout/simple-layout.tsx        |   8 +-
 .../action-button/action-button.tsx           |   7 +-
 .../src/components/agents/add-agent.tsx       |  42 ++--
 .../src/components/agents/agents.tsx          |  23 +-
 .../connect-method-qr-code.tsx                |  29 +--
 .../connect-method-quick-start.tsx            |  30 +--
 .../connect-method-restore-connection.tsx     |  17 +-
 .../components/create-inbox/create-inbox.tsx  |  15 +-
 .../src/components/create-job/create-job.tsx  |  20 +-
 .../create-registration-code.tsx              |  35 ++--
 .../edit-inbox-name-dialog.tsx                |  14 +-
 .../components/empty-agents/empty-agents.tsx  |  15 +-
 .../empty-inboxes/empty-inboxes.tsx           |  16 +-
 .../export-connection/export-connection.tsx   |  19 +-
 .../iframe-embeder/installed-popup.tsx        |  13 +-
 .../image-capture/image-capture.tsx           |  10 +-
 .../components/inbox-input/inbox-input.tsx    |   5 +-
 .../src/components/inbox/inbox.tsx            |  23 +-
 .../src/components/inboxes/inboxes.tsx        |  12 +-
 .../installed-popup copy/installed-popup.tsx  |  13 +-
 .../installed-popup/installed-popup.tsx       |  13 +-
 apps/shinkai-visor/src/components/nav/nav.tsx |  73 +++----
 .../node-files/vector-fs-general-options.tsx  |   7 +-
 .../src/components/popup/popup.tsx            |  16 +-
 .../src/components/settings/settings.tsx      |  48 ++---
 .../src/components/setup/setup.tsx            |  18 +-
 .../src/components/welcome/welcome.tsx        |   7 +-
 apps/shinkai-visor/src/lang/en.json           | 116 -----------
 apps/shinkai-visor/src/lang/es.json           | 114 ----------
 apps/shinkai-visor/src/lang/intl.ts           |  15 --
 .../src/service-worker/service-worker.ts      |   4 +-
 libs/shinkai-i18n/.babelrc                    |  12 ++
 libs/shinkai-i18n/.eslintrc.json              |  18 ++
 libs/shinkai-i18n/README.md                   |  44 ++++
 libs/shinkai-i18n/package.json                |  12 ++
 libs/shinkai-i18n/project.json                |   9 +
 libs/shinkai-i18n/src/index.ts                |   2 +
 libs/shinkai-i18n/src/lib/init.ts             |  24 +++
 libs/shinkai-i18n/src/lib/locales/en.json     | 161 ++++++++++++++
 libs/shinkai-i18n/src/lib/providers.tsx       |   8 +
 libs/shinkai-i18n/src/lib/useTranslation.tsx  |  28 +++
 libs/shinkai-i18n/tsconfig.json               |  20 ++
 libs/shinkai-i18n/tsconfig.lib.json           |  28 +++
 libs/shinkai-i18n/vite.config.ts              |  49 +++++
 package-lock.json                             | 197 ++++++------------
 package.json                                  |   2 +-
 tsconfig.base.json                            |  21 +-
 59 files changed, 885 insertions(+), 843 deletions(-)
 delete mode 100644 apps/shinkai-app/.nvmrc
 delete mode 100644 apps/shinkai-desktop/.nvmrc
 delete mode 100644 apps/shinkai-visor/src/lang/en.json
 delete mode 100644 apps/shinkai-visor/src/lang/es.json
 delete mode 100644 apps/shinkai-visor/src/lang/intl.ts
 create mode 100644 libs/shinkai-i18n/.babelrc
 create mode 100644 libs/shinkai-i18n/.eslintrc.json
 create mode 100644 libs/shinkai-i18n/README.md
 create mode 100644 libs/shinkai-i18n/package.json
 create mode 100644 libs/shinkai-i18n/project.json
 create mode 100644 libs/shinkai-i18n/src/index.ts
 create mode 100644 libs/shinkai-i18n/src/lib/init.ts
 create mode 100644 libs/shinkai-i18n/src/lib/locales/en.json
 create mode 100644 libs/shinkai-i18n/src/lib/providers.tsx
 create mode 100644 libs/shinkai-i18n/src/lib/useTranslation.tsx
 create mode 100644 libs/shinkai-i18n/tsconfig.json
 create mode 100644 libs/shinkai-i18n/tsconfig.lib.json
 create mode 100644 libs/shinkai-i18n/vite.config.ts

diff --git a/apps/shinkai-app/.nvmrc b/apps/shinkai-app/.nvmrc
deleted file mode 100644
index f6ee89c7c..000000000
--- a/apps/shinkai-app/.nvmrc
+++ /dev/null
@@ -1 +0,0 @@
-v18.17
\ No newline at end of file
diff --git a/apps/shinkai-desktop/.nvmrc b/apps/shinkai-desktop/.nvmrc
deleted file mode 100644
index f6ee89c7c..000000000
--- a/apps/shinkai-desktop/.nvmrc
+++ /dev/null
@@ -1 +0,0 @@
-v18.17
\ No newline at end of file
diff --git a/apps/shinkai-desktop/src/pages/agents.tsx b/apps/shinkai-desktop/src/pages/agents.tsx
index dff62c778..011946a9e 100644
--- a/apps/shinkai-desktop/src/pages/agents.tsx
+++ b/apps/shinkai-desktop/src/pages/agents.tsx
@@ -1,5 +1,6 @@
 import { zodResolver } from '@hookform/resolvers/zod';
 import { DotsVerticalIcon } from '@radix-ui/react-icons';
+import { useTranslation } from '@shinkai_network/shinkai-i18n';
 import {
   EditAgentFormSchema,
   editAgentSchema,
@@ -39,6 +40,7 @@ import { getModelObject } from './create-agent';
 import { SimpleLayout } from './layout/simple-layout';
 
 const AgentsPage = () => {
+  const { t } = useTranslation();
   const auth = useAuth((state) => state.auth);
   const navigate = useNavigate();
   const { agents } = useAgents({
@@ -63,7 +65,7 @@ const AgentsPage = () => {
     navigate('/add-agent');
   };
   return (
-    <SimpleLayout classname="relative" title="AIs">
+    <SimpleLayout classname="relative" title={t('agents.label')}>
       <div className="absolute right-3 top-[36px]">
         <Button
           className="h-[40px] gap-2"
@@ -71,7 +73,7 @@ const AgentsPage = () => {
           size="auto"
         >
           <Plus className="h-4 w-4" />
-          <span>Add AI</span>
+          <span>{t('agents.add')}</span>
         </Button>
       </div>
       <div className="flex h-full flex-col space-y-3">
@@ -81,14 +83,15 @@ const AgentsPage = () => {
               <span aria-hidden className="text-5xl">
                 🤖
               </span>
-              <p className="text-2xl font-semibold">No available agents</p>
+              <p className="text-2xl font-semibold">
+                {t('agents.notFound.title')}
+              </p>
               <p className="text-center text-sm font-medium text-gray-100">
-                Connect your first agent to start asking Shinkai AI. Try
-                connecting OpenAI
+                {t('agents.notFound.description')}
               </p>
             </div>
 
-            <Button onClick={onAddAgentClick}>Add AI</Button>
+            <Button onClick={onAddAgentClick}>{t('agents.add')}</Button>
           </div>
         ) : (
           <ScrollArea className="flex h-full flex-col justify-between [&>div>div]:!block">
@@ -123,6 +126,7 @@ function AgentCard({
   externalUrl: string;
   agentApiKey: string;
 }) {
+  const { t } = useTranslation();
   const [isDeleteAgentDrawerOpen, setIsDeleteAgentDrawerOpen] =
     React.useState(false);
   const [isEditAgentDrawerOpen, setIsEditAgentDrawerOpen] =
@@ -141,7 +145,7 @@ function AgentCard({
         role="button"
       >
         <div className="flex items-center gap-3">
-          <div className="flex h-8 w-8 items-center justify-center rounded-lg ">
+          <div className="flex h-8 w-8 items-center justify-center rounded-lg">
             <BotIcon className="h-6 w-6" />
           </div>
           <div className="flex flex-col items-baseline gap-2">
@@ -169,7 +173,7 @@ function AgentCard({
               role="button"
               tabIndex={0}
             >
-              <span className="sr-only">More options</span>
+              <span className="sr-only">{t('common.moreOptions')}</span>
               <DotsVerticalIcon className="text-gray-100" />
             </div>
           </DropdownMenuTrigger>
@@ -179,14 +183,14 @@ function AgentCard({
           >
             {[
               {
-                name: 'Edit',
+                name: t('common.edit'),
                 icon: <Edit className="mr-3 h-4 w-4" />,
                 onClick: () => {
                   setIsEditAgentDrawerOpen(true);
                 },
               },
               {
-                name: 'Delete',
+                name: t('common.delete'),
                 icon: <TrashIcon className="mr-3 h-4 w-4" />,
                 onClick: () => {
                   setIsDeleteAgentDrawerOpen(true);
@@ -247,6 +251,7 @@ const EditAgentDrawer = ({
   agentExternalUrl: string;
   agentApiKey: string;
 }) => {
+  const { t } = useTranslation();
   const auth = useAuth((state) => state.auth);
 
   const form = useForm<EditAgentFormSchema>({
@@ -272,10 +277,10 @@ const EditAgentDrawer = ({
   const { mutateAsync: updateAgent, isPending } = useUpdateAgent({
     onSuccess: () => {
       onOpenChange(false);
-      toast.success('AI updated successfully');
+      toast.success(t('agents.success.updateAgent'));
     },
     onError: (error) => {
-      toast.error('Error updating agent', {
+      toast.error(t('agents.errors.updateAgent'), {
         description: typeof error === 'string' ? error : error.message,
       });
     },
@@ -313,7 +318,7 @@ const EditAgentDrawer = ({
       <SheetContent>
         <SheetHeader className="mb-6">
           <SheetTitle className="font-normal">
-            Update <span className="font-medium">{agentId}</span>{' '}
+            {t('common.update')} <span className="font-medium">{agentId}</span>{' '}
           </SheetTitle>
         </SheetHeader>
         <Form {...form}>
@@ -327,7 +332,7 @@ const EditAgentDrawer = ({
                 disabled
                 name="agentName"
                 render={({ field }) => (
-                  <TextField field={field} label="AI Name" />
+                  <TextField field={field} label={t('agents.form.agentName')} />
                 )}
               />
 
@@ -335,7 +340,10 @@ const EditAgentDrawer = ({
                 control={form.control}
                 name="externalUrl"
                 render={({ field }) => (
-                  <TextField field={field} label="External URL" />
+                  <TextField
+                    field={field}
+                    label={t('agents.form.externalUrl')}
+                  />
                 )}
               />
 
@@ -343,7 +351,7 @@ const EditAgentDrawer = ({
                 control={form.control}
                 name="apikey"
                 render={({ field }) => (
-                  <TextField field={field} label="API Key" />
+                  <TextField field={field} label={t('agents.form.apiKey')} />
                 )}
               />
 
@@ -351,14 +359,14 @@ const EditAgentDrawer = ({
                 control={form.control}
                 name="modelCustom"
                 render={({ field }) => (
-                  <TextField field={field} label={'Model Name'} />
+                  <TextField field={field} label={t('agents.form.modelName')} />
                 )}
               />
               <FormField
                 control={form.control}
                 name="modelTypeCustom"
                 render={({ field }) => (
-                  <TextField field={field} label={'Model ID'} />
+                  <TextField field={field} label={t('agents.form.modelId')} />
                 )}
               />
             </div>
@@ -368,7 +376,7 @@ const EditAgentDrawer = ({
               isLoading={isPending}
               type="submit"
             >
-              Save
+              {t('common.save')}
             </Button>
           </form>
         </Form>
@@ -385,14 +393,15 @@ const RemoveAgentDrawer = ({
   onOpenChange: (open: boolean) => void;
   agentId: string;
 }) => {
+  const { t } = useTranslation();
   const auth = useAuth((state) => state.auth);
   const { mutateAsync: deleteAgent, isPending } = useDeleteAgent({
     onSuccess: () => {
       onOpenChange(false);
-      toast.success('AI deleted successfully');
+      toast.success(t('agents.success.deleteAgent'));
     },
     onError: (error) => {
-      toast.error('Error deleting agent', {
+      toast.error(t('agents.errors.deleteAgent'), {
         description: typeof error === 'string' ? error : error.message,
       });
     },
@@ -403,13 +412,12 @@ const RemoveAgentDrawer = ({
       <SheetContent>
         <SheetHeader>
           <SheetTitle className="font-normal">
-            Delete AI
+            {t('agents.delete.label')}
             <span className="font-medium">{agentId}</span>{' '}
           </SheetTitle>
         </SheetHeader>
         <p className="text-gray-80 my-3 text-base">
-          Are you sure you want to delete this agent? This action cannot be
-          undone.
+          {t('agents.delete.description')}
         </p>
         <SheetFooter>
           <Button
@@ -431,7 +439,7 @@ const RemoveAgentDrawer = ({
             }}
             variant="destructive"
           >
-            Delete
+            {t('common.delete')}
           </Button>
         </SheetFooter>
       </SheetContent>
diff --git a/apps/shinkai-desktop/src/pages/ai-model-installation.tsx b/apps/shinkai-desktop/src/pages/ai-model-installation.tsx
index 0bb457669..eb1ff8bc9 100644
--- a/apps/shinkai-desktop/src/pages/ai-model-installation.tsx
+++ b/apps/shinkai-desktop/src/pages/ai-model-installation.tsx
@@ -1,3 +1,4 @@
+import { useTranslation } from '@shinkai_network/shinkai-i18n';
 import { buttonVariants } from '@shinkai_network/shinkai-ui';
 import { cn } from '@shinkai_network/shinkai-ui/utils';
 import { QueryClientProvider } from '@tanstack/react-query';
@@ -10,11 +11,12 @@ import { shinkaiNodeQueryClient } from '../lib/shinkai-node-manager/shinkai-node
 import { FixedHeaderLayout } from './layout/simple-layout';
 
 const AIModelInstallation = () => {
+  const { t } = useTranslation();
   return (
     <QueryClientProvider client={shinkaiNodeQueryClient}>
       <FixedHeaderLayout
         className="relative flex w-full max-w-6xl flex-col gap-2 px-4"
-        title="Install AI"
+        title={t('agents.installAI')}
       >
         <ResourcesBanner />
         <OllamaModels />
@@ -28,7 +30,7 @@ const AIModelInstallation = () => {
             )}
             to={{ pathname: '/' }}
           >
-            Continue
+            {t('common.continue')}
             <ArrowRight className="h-4 w-4" />
           </Link>
         </div>
diff --git a/apps/shinkai-desktop/src/pages/ai-model-locally.tsx b/apps/shinkai-desktop/src/pages/ai-model-locally.tsx
index 6c33cd6b1..ca116896a 100644
--- a/apps/shinkai-desktop/src/pages/ai-model-locally.tsx
+++ b/apps/shinkai-desktop/src/pages/ai-model-locally.tsx
@@ -1,3 +1,4 @@
+import { useTranslation } from '@shinkai_network/shinkai-i18n';
 import { buttonVariants } from '@shinkai_network/shinkai-ui';
 import { cn } from '@shinkai_network/shinkai-ui/utils';
 import { QueryClientProvider } from '@tanstack/react-query';
@@ -9,15 +10,15 @@ import { shinkaiNodeQueryClient } from '../lib/shinkai-node-manager/shinkai-node
 import { SubpageLayout } from './layout/simple-layout';
 
 const AgentsLocally = () => {
+  const { t } = useTranslation();
   return (
     <QueryClientProvider client={shinkaiNodeQueryClient}>
       <SubpageLayout
         className="relative flex w-full max-w-6xl flex-col gap-2 px-4"
-        title="Install AI Models"
+        title={t('agents.localAI.installTitle')}
       >
         <p className="text-gray-80 pb-2 text-sm">
-          After installing AI models on your local machine, they will become
-          available as AI
+          {t('agents.localAI.installText')}
         </p>
         <OllamaModels />
         <div className="absolute right-4 top-6 flex justify-center pt-3">
@@ -31,7 +32,7 @@ const AgentsLocally = () => {
             to={{ pathname: '/add-agent' }}
           >
             <Plus className="h-4 w-4" />
-            Manually Add AI
+            {t('agents.addManually')}
           </Link>
         </div>
       </SubpageLayout>
diff --git a/apps/shinkai-desktop/src/pages/analytics.tsx b/apps/shinkai-desktop/src/pages/analytics.tsx
index 2eae00b9c..1a0b79b62 100644
--- a/apps/shinkai-desktop/src/pages/analytics.tsx
+++ b/apps/shinkai-desktop/src/pages/analytics.tsx
@@ -1,3 +1,4 @@
+import { useTranslation } from '@shinkai_network/shinkai-i18n';
 import { Button } from '@shinkai_network/shinkai-ui';
 import { useNavigate } from 'react-router-dom';
 
@@ -6,6 +7,7 @@ import OnboardingLayout from './layout/onboarding-layout';
 
 const AnalyticsPage = () => {
   const navigate = useNavigate();
+  const { t } = useTranslation();
   const denyAnalytics = useSettings((state) => state.denyAnalytics);
   const acceptAnalytics = useSettings((state) => state.acceptAnalytics);
 
@@ -13,10 +15,10 @@ const AnalyticsPage = () => {
     <OnboardingLayout>
       <div className="mx-auto flex h-full max-w-lg flex-col">
         <p className="text-center text-3xl font-medium leading-[1.5] tracking-wide">
-          Help us improve Shinkai
+          {t('analytics.title')}
         </p>
         <div className="mt-10 flex flex-1 flex-col gap-10 text-sm text-gray-50">
-          <ul className="space-y-3  text-gray-50">
+          <ul className="space-y-3 text-gray-50">
             {[
               '✅ Always allow you to opt-out via Settings',
 
@@ -57,7 +59,7 @@ const AnalyticsPage = () => {
             size="lg"
             variant="ghost"
           >
-            No Thanks
+            {t('common.noThanks')}
           </Button>
           <Button
             className="w-full"
@@ -67,7 +69,7 @@ const AnalyticsPage = () => {
             }}
             size="lg"
           >
-            I Agree
+            {t('common.iAgree')}
           </Button>
         </div>
       </div>
diff --git a/apps/shinkai-desktop/src/pages/chat/chat-conversation.tsx b/apps/shinkai-desktop/src/pages/chat/chat-conversation.tsx
index 959d1bec1..17d5307e7 100644
--- a/apps/shinkai-desktop/src/pages/chat/chat-conversation.tsx
+++ b/apps/shinkai-desktop/src/pages/chat/chat-conversation.tsx
@@ -1,4 +1,5 @@
 import { zodResolver } from '@hookform/resolvers/zod';
+import { useTranslation } from '@shinkai_network/shinkai-i18n';
 import {
   extractErrorPropertyOrContent,
   extractJobIdFromInbox,
@@ -77,7 +78,7 @@ enum ErrorCodes {
 
 const ChatConversation = () => {
   const { captureAnalyticEvent } = useAnalytics();
-
+  const { t } = useTranslation();
   const size = partial({ standard: 'jedec' });
   const { inboxId: encodedInboxId = '' } = useParams();
   const auth = useAuth((state) => state.auth);
@@ -230,12 +231,12 @@ const ChatConversation = () => {
       {isLimitReachedErrorLastMessage && (
         <Alert className="mx-auto w-[98%] shadow-lg" variant="destructive">
           <AlertCircle className="h-4 w-4" />
-          <AlertTitle className="text-sm">Limit Reached</AlertTitle>
+          <AlertTitle className="text-sm">
+            {t('chat.limitReachedTitle')}
+          </AlertTitle>
           <AlertDescription className="text-gray-80 text-xs">
             <div className="flex flex-row items-center space-x-2">
-              {/* eslint-disable-next-line react/no-unescaped-entities */}
-              You've used all of your queries for the month on this model/agent.
-              Please start a new chat with another agent.
+              {t('chat.limitReachedDescription')}
             </div>
           </AlertDescription>
         </Alert>
@@ -250,7 +251,9 @@ const ChatConversation = () => {
                 name="message"
                 render={({ field }) => (
                   <FormItem className="flex-1 space-y-0">
-                    <FormLabel className="sr-only">Enter message</FormLabel>
+                    <FormLabel className="sr-only">
+                      {t('chat.enterMessage')}
+                    </FormLabel>
                     <FormControl>
                       <div className="">
                         <div className="flex items-center gap-2.5 px-1 pb-2 pt-1">
@@ -281,7 +284,7 @@ const ChatConversation = () => {
                                   className="bg-neutral-900"
                                   side="top"
                                 >
-                                  Upload a File
+                                  {t('common.uploadFile')}
                                 </TooltipContent>
                               </TooltipPortal>
                             </Tooltip>
@@ -297,7 +300,9 @@ const ChatConversation = () => {
                               variant="tertiary"
                             >
                               <SendIcon className="h-full w-full" />
-                              <span className="sr-only">Send Message</span>
+                              <span className="sr-only">
+                                {t('chat.sendMessage')}
+                              </span>
                             </Button>
                           }
                           disabled={isLoadingMessage}
@@ -310,17 +315,17 @@ const ChatConversation = () => {
                                 {getFileExt(file?.name) &&
                                 fileIconMap[getFileExt(file?.name)] ? (
                                   <FileTypeIcon
-                                    className="text-gray-80 h-7 w-7 shrink-0 "
+                                    className="text-gray-80 h-7 w-7 shrink-0"
                                     type={getFileExt(file?.name)}
                                   />
                                 ) : (
                                   <Paperclip className="text-gray-80 h-4 w-4 shrink-0" />
                                 )}
                                 <div className="space-y-1">
-                                  <span className="line-clamp-1 break-all text-left text-xs ">
+                                  <span className="line-clamp-1 break-all text-left text-xs">
                                     {file?.name}
                                   </span>
-                                  <span className="line-clamp-1 break-all text-left text-xs text-gray-100 ">
+                                  <span className="line-clamp-1 break-all text-left text-xs text-gray-100">
                                     {size(file?.size)}
                                   </span>
                                 </div>
@@ -358,6 +363,7 @@ const ChatConversation = () => {
 export default ChatConversation;
 
 function AgentSelection() {
+  const { t } = useTranslation();
   const auth = useAuth((state) => state.auth);
   const currentInbox = useGetCurrentInbox();
   const { agents } = useAgents({
@@ -374,7 +380,7 @@ function AgentSelection() {
 
   const { mutateAsync: updateAgentInJob } = useUpdateAgentInJob({
     onError: (error) => {
-      toast.error('Failed to update agent', {
+      toast.error(t('agents.errors.updateAgent'), {
         description: error.message,
       });
     },
@@ -384,7 +390,7 @@ function AgentSelection() {
       <TooltipProvider delayDuration={0}>
         <Tooltip>
           <TooltipTrigger asChild>
-            <DropdownMenuTrigger className="bg-gray-350 inline-flex cursor-pointer items-center justify-between gap-1 truncate rounded-xl px-2.5 py-1.5 text-start text-xs font-normal text-gray-50  hover:text-white  [&[data-state=open]>.icon]:rotate-180">
+            <DropdownMenuTrigger className="bg-gray-350 inline-flex cursor-pointer items-center justify-between gap-1 truncate rounded-xl px-2.5 py-1.5 text-start text-xs font-normal text-gray-50 hover:text-white [&[data-state=open]>.icon]:rotate-180">
               <BotIcon className="mr-1 h-4 w-4" />
               <span>{currentInbox?.agent?.id}</span>
               <ChevronDownIcon className="icon h-3 w-3" />
@@ -396,7 +402,7 @@ function AgentSelection() {
               className="bg-neutral-900"
               side="top"
             >
-              Switch AI
+              {t('agents.switch')}
             </TooltipContent>
           </TooltipPortal>
           <DropdownMenuContent
@@ -447,7 +453,7 @@ function AgentSelection() {
 
 export const ConversationHeader = () => {
   const currentInbox = useGetCurrentInbox();
-
+  const { t } = useTranslation();
   const hasFolders =
     (currentInbox?.job_scope?.vector_fs_folders ?? [])?.length > 0;
   const hasFiles = (currentInbox?.job_scope?.vector_fs_items ?? [])?.length > 0;
@@ -491,14 +497,16 @@ export const ConversationHeader = () => {
           </SheetTrigger>
           <SheetContent className="max-w-md">
             <SheetHeader>
-              <SheetTitle>Conversation Context</SheetTitle>
+              <SheetTitle>{t('chat.context.title')}</SheetTitle>
               <SheetDescription className="mb-4 mt-2">
-                List of folders and files used as context for this conversation
+                {t('chat.context.description')}
               </SheetDescription>
               <div className="space-y-3 pt-4">
                 {hasFolders && (
                   <div className="space-y-1">
-                    <span className="font-medium text-white">Folders</span>
+                    <span className="font-medium text-white">
+                      {t('common.folders')}
+                    </span>
                     <ul>
                       {currentInbox?.job_scope?.vector_fs_folders?.map(
                         (folder) => (
@@ -518,7 +526,9 @@ export const ConversationHeader = () => {
                 )}
                 {hasFiles && (
                   <div className="space-y-1">
-                    <span className="font-medium text-white">Files</span>
+                    <span className="font-medium text-white">
+                      {t('common.files')}
+                    </span>
                     <ul>
                       {currentInbox?.job_scope?.vector_fs_items?.map((file) => (
                         <li
diff --git a/apps/shinkai-desktop/src/pages/chat/empty-message.tsx b/apps/shinkai-desktop/src/pages/chat/empty-message.tsx
index 951a7f9f5..7223ae608 100644
--- a/apps/shinkai-desktop/src/pages/chat/empty-message.tsx
+++ b/apps/shinkai-desktop/src/pages/chat/empty-message.tsx
@@ -1,3 +1,4 @@
+import { useTranslation } from '@shinkai_network/shinkai-i18n';
 import { useAgents } from '@shinkai_network/shinkai-node-state/lib/queries/getAgents/useGetAgents';
 import { buttonVariants } from '@shinkai_network/shinkai-ui';
 import { Link } from 'react-router-dom';
@@ -23,6 +24,7 @@ const EmptyMessage = () => {
   const isLocalShinkaiNodeIsUse = useShinkaiNodeManager(
     (state) => state.isInUse,
   );
+  const { t } = useTranslation();
 
   return (
     <div className="flex w-full items-center justify-center p-6">
@@ -31,10 +33,11 @@ const EmptyMessage = () => {
           🤖
         </span>
 
-        <h1 className="text-2xl font-bold text-white">Ask Shinkai AI</h1>
+        <h1 className="text-2xl font-bold text-white">
+          {t('chat.emptyStateTitle')}
+        </h1>
         <p className="text-gray-80 text-sm">
-          Try “How to make a HTTP request in JavaScript” , “Give me the top 10
-          rock music in the 80s”, “Explain me how internet works”
+          {t('chat.emptyStateDescription')}
         </p>
 
         <div className="mt-4">
@@ -45,7 +48,7 @@ const EmptyMessage = () => {
               })}
               to={isLocalShinkaiNodeIsUse ? '/agents-locally' : '/add-agent'}
             >
-              <span>Add AI</span>
+              <span>{t('agents.add')}</span>
             </Link>
           ) : (
             <Link
@@ -54,7 +57,7 @@ const EmptyMessage = () => {
               })}
               to={CREATE_JOB_PATH}
             >
-              <span>Create AI Chat</span>
+              <span>{t('chat.create')}</span>
             </Link>
           )}
         </div>
diff --git a/apps/shinkai-desktop/src/pages/chat/layout.tsx b/apps/shinkai-desktop/src/pages/chat/layout.tsx
index 49f94e71c..328720ee7 100644
--- a/apps/shinkai-desktop/src/pages/chat/layout.tsx
+++ b/apps/shinkai-desktop/src/pages/chat/layout.tsx
@@ -1,4 +1,5 @@
 import { zodResolver } from '@hookform/resolvers/zod';
+import { useTranslation } from '@shinkai_network/shinkai-i18n';
 // import { PlusCircledIcon } from '@radix-ui/react-icons';
 import { SmartInbox } from '@shinkai_network/shinkai-message-ts/models';
 import {
@@ -59,6 +60,7 @@ const InboxNameInput = ({
   inboxId: string;
   inboxName: string;
 }) => {
+  const { t } = useTranslation();
   const auth = useAuth((state) => state.auth);
   const updateInboxNameForm = useForm<UpdateInboxNameFormSchema>({
     resolver: zodResolver(updateInboxNameFormSchema),
@@ -107,7 +109,7 @@ const InboxNameInput = ({
 
                 <FormItem className="space-y-0 pl-7 text-xs">
                   <FormLabel className="sr-only static">
-                    Update inbox name
+                    {t('inboxes.updateName')}
                   </FormLabel>
                   <FormControl>
                     <Input
@@ -130,7 +132,7 @@ const InboxNameInput = ({
             type="submit"
             variant="default"
           >
-            Save
+            {t('common.save')}
           </Button>
         ) : (
           <Button
@@ -139,7 +141,7 @@ const InboxNameInput = ({
             size="sm"
             variant="ghost"
           >
-            Cancel
+            {t('common.cancel')}
           </Button>
         )}
       </form>
@@ -157,7 +159,7 @@ const MessageButton = ({
   inbox: SmartInbox;
 }) => {
   const auth = useAuth((state) => state.auth);
-
+  const { t } = useTranslation();
   const inboxId = inbox.inbox_id;
   const inboxName =
     inbox.last_message && inbox.custom_name === inbox.inbox_id
@@ -267,7 +269,7 @@ const MessageButton = ({
             </TooltipTrigger>
             <TooltipPortal>
               <TooltipContent>
-                <p>Rename</p>
+                <p>{t('common.rename')}</p>
               </TooltipContent>
             </TooltipPortal>
           </Tooltip>
@@ -288,7 +290,7 @@ const MessageButton = ({
               </TooltipTrigger>
               <TooltipPortal>
                 <TooltipContent>
-                  <p>Archive</p>
+                  <p>{t('chat.archives.archive')}</p>
                 </TooltipContent>
               </TooltipPortal>
             </Tooltip>
@@ -300,6 +302,7 @@ const MessageButton = ({
 };
 
 const ChatLayout = () => {
+  const { t } = useTranslation();
   const auth = useAuth((state) => state.auth);
   const navigate = useNavigate();
   const { inboxes } = useGetInboxes(
@@ -348,7 +351,7 @@ const ChatLayout = () => {
         <>
           <div className="flex h-full max-w-[280px] flex-[280px] shrink-0 flex-col px-2 py-4">
             <div className="mb-4 flex items-center justify-between gap-2 px-2">
-              <h2>Chats</h2>
+              <h2>{t('chat.chats')}</h2>
               <TooltipProvider delayDuration={0}>
                 <Tooltip>
                   <TooltipTrigger asChild>
@@ -361,12 +364,12 @@ const ChatLayout = () => {
                       variant="ghost"
                     >
                       <CreateAIIcon className="h-4 w-4 shrink-0" />
-                      <span className="sr-only">Create AI Chat</span>
+                      <span className="sr-only">{t('chat.create')}</span>
                     </Button>
                   </TooltipTrigger>
                   <TooltipPortal>
                     <TooltipContent>
-                      <p>Create AI Chat</p>
+                      <p>{t('chat.create')}</p>
                     </TooltipContent>
                   </TooltipPortal>
                 </Tooltip>
@@ -380,14 +383,14 @@ const ChatLayout = () => {
                     value="actives"
                   >
                     <ActiveIcon className="h-4 w-4" />
-                    Actives
+                    {t('chat.actives.label')}
                   </TabsTrigger>
                   <TabsTrigger
                     className="flex items-center gap-1.5"
                     value="archives"
                   >
                     <ArchiveIcon className="h-4 w-4" />
-                    Archives
+                    {t('chat.archives.label')}
                   </TabsTrigger>
                 </TabsList>
                 <TabsContent value="actives">
@@ -402,7 +405,7 @@ const ChatLayout = () => {
                       ))
                     ) : (
                       <p className="text-gray-80 py-3 text-center text-sm">
-                        No active conversations found.{' '}
+                        {t('chat.actives.notFound')}{' '}
                       </p>
                     )}
                   </div>
@@ -420,7 +423,7 @@ const ChatLayout = () => {
                       ))
                     ) : (
                       <p className="text-gray-80 py-3 text-center text-sm">
-                        No archived conversations found.{' '}
+                        {t('chat.archives.notFound')}{' '}
                       </p>
                     )}
                   </div>
diff --git a/apps/shinkai-desktop/src/pages/create-agent.tsx b/apps/shinkai-desktop/src/pages/create-agent.tsx
index 79d2d46b2..dfc517fc8 100644
--- a/apps/shinkai-desktop/src/pages/create-agent.tsx
+++ b/apps/shinkai-desktop/src/pages/create-agent.tsx
@@ -1,4 +1,5 @@
 import { zodResolver } from '@hookform/resolvers/zod';
+import { useTranslation } from '@shinkai_network/shinkai-i18n';
 import { AgentAPIModel } from '@shinkai_network/shinkai-message-ts/models';
 import {
   addAgentFormDefault,
@@ -70,6 +71,7 @@ export const getModelObject = (
 };
 
 const CreateAgentPage = () => {
+  const { t } = useTranslation();
   const auth = useAuth((state) => state.auth);
   const navigate = useNavigate();
   const addAgentForm = useForm<AddAgentFormSchema>({
@@ -211,7 +213,7 @@ const CreateAgentPage = () => {
   };
 
   return (
-    <SubpageLayout title="Add AI">
+    <SubpageLayout title={t('agents.add')}>
       <Form {...addAgentForm}>
         <form
           className="space-y-10"
@@ -312,14 +314,17 @@ const CreateAgentPage = () => {
                   control={addAgentForm.control}
                   name="modelCustom"
                   render={({ field }) => (
-                    <TextField field={field} label={'Model Name'} />
+                    <TextField
+                      field={field}
+                      label={t('agents.form.modelName')}
+                    />
                   )}
                 />
                 <FormField
                   control={addAgentForm.control}
                   name="modelTypeCustom"
                   render={({ field }) => (
-                    <TextField field={field} label={'Model ID'} />
+                    <TextField field={field} label={t('agents.form.modelId')} />
                   )}
                 />
               </>
@@ -329,21 +334,25 @@ const CreateAgentPage = () => {
               control={addAgentForm.control}
               name="agentName"
               render={({ field }) => (
-                <TextField autoFocus field={field} label="AI Name" />
+                <TextField
+                  autoFocus
+                  field={field}
+                  label={t('agents.form.agentName')}
+                />
               )}
             />
             <FormField
               control={addAgentForm.control}
               name="externalUrl"
               render={({ field }) => (
-                <TextField field={field} label="External URL" />
+                <TextField field={field} label={t('agents.form.externalUrl')} />
               )}
             />
             <FormField
               control={addAgentForm.control}
               name="apikey"
               render={({ field }) => (
-                <TextField field={field} label="Api Key" />
+                <TextField field={field} label={t('agents.form.apiKey')} />
               )}
             />
           </div>
@@ -356,7 +365,7 @@ const CreateAgentPage = () => {
             isLoading={isPending}
             type="submit"
           >
-            Add AI
+            {t('agents.add')}
           </Button>
         </form>
       </Form>
diff --git a/apps/shinkai-desktop/src/pages/create-job.tsx b/apps/shinkai-desktop/src/pages/create-job.tsx
index 0a88a3c15..b21f8545a 100644
--- a/apps/shinkai-desktop/src/pages/create-job.tsx
+++ b/apps/shinkai-desktop/src/pages/create-job.tsx
@@ -1,4 +1,5 @@
 import { zodResolver } from '@hookform/resolvers/zod';
+import { useTranslation } from '@shinkai_network/shinkai-i18n';
 import { buildInboxIdFromJobId } from '@shinkai_network/shinkai-message-ts/utils';
 import {
   CreateJobFormSchema,
@@ -58,6 +59,7 @@ import { useSettings } from '../store/settings';
 import { SubpageLayout } from './layout/simple-layout';
 
 const CreateJobPage = () => {
+  const { t } = useTranslation();
   const auth = useAuth((state) => state.auth);
   const defaulAgentId = useSettings((state) => state.defaultAgentId);
   const navigate = useNavigate();
@@ -240,7 +242,7 @@ const CreateJobPage = () => {
   // }, []);
 
   return (
-    <SubpageLayout title="Create AI Chat">
+    <SubpageLayout title={t('chat.create')}>
       <Form {...createJobForm}>
         <form
           className="space-y-8"
@@ -252,7 +254,7 @@ const CreateJobPage = () => {
               name="content"
               render={({ field }) => (
                 <FormItem>
-                  <FormLabel>Tell us the job you want to do</FormLabel>
+                  <FormLabel>{t('chat.form.message')}</FormLabel>
                   <FormControl>
                     <Textarea
                       autoFocus={true}
@@ -265,7 +267,7 @@ const CreateJobPage = () => {
                           createJobForm.handleSubmit(onSubmit)();
                         }
                       }}
-                      placeholder="Eg: Explain me how internet works..."
+                      placeholder={t('chat.form.messagePlaceholder')}
                       {...field}
                     />
                   </FormControl>
@@ -279,7 +281,7 @@ const CreateJobPage = () => {
                 name="workflow"
                 render={({ field }) => (
                   <FormItem>
-                    <FormLabel>Workflows</FormLabel>
+                    <FormLabel>{t('chat.form.workflows')}</FormLabel>
                     <FormControl>
                       <Textarea
                         autoFocus={true}
@@ -298,11 +300,11 @@ const CreateJobPage = () => {
               name="agent"
               render={({ field }) => (
                 <FormItem>
-                  <FormLabel>Select your AI</FormLabel>
+                  <FormLabel>{t('chat.form.selectAI')}</FormLabel>
                   <Select onValueChange={field.onChange} value={field.value}>
                     <FormControl>
                       <SelectTrigger>
-                        <SelectValue placeholder="Select your AI" />
+                        <SelectValue placeholder={t('chat.form.selectAI')} />
                       </SelectTrigger>
                     </FormControl>
                     <SelectContent>
@@ -320,7 +322,7 @@ const CreateJobPage = () => {
                           variant="ghost"
                         >
                           <PlusIcon className="mr-2" />
-                          Add AI
+                          {t('agents.add')}
                         </Button>
                       )}
                     </SelectContent>
@@ -332,11 +334,10 @@ const CreateJobPage = () => {
               <div className="mb-5 flex items-start justify-between gap-4">
                 <div className="space-y-1">
                   <h2 className="text-sm font-medium text-gray-100">
-                    Set Chat Context
+                    {t('chat.form.setContext')}
                   </h2>
                   <p className="text-gray-80 text-xs">
-                    Add files or folders for your AI to use as context during
-                    your conversation.
+                    {t('chat.form.setContextText')}
                   </p>
                 </div>
                 <TooltipProvider delayDuration={0}>
@@ -412,7 +413,7 @@ const CreateJobPage = () => {
             isLoading={isPending}
             type="submit"
           >
-            Create AI Chat
+            {t('chat.create')}
           </Button>
         </form>
       </Form>
diff --git a/apps/shinkai-desktop/src/pages/layout/main-layout.tsx b/apps/shinkai-desktop/src/pages/layout/main-layout.tsx
index 0d7506dd3..2ff57923a 100644
--- a/apps/shinkai-desktop/src/pages/layout/main-layout.tsx
+++ b/apps/shinkai-desktop/src/pages/layout/main-layout.tsx
@@ -1,4 +1,5 @@
 import { ExitIcon, GearIcon } from '@radix-ui/react-icons';
+import { useTranslation } from '@shinkai_network/shinkai-i18n';
 import { useGetHealth } from '@shinkai_network/shinkai-node-state/lib/queries/getHealth/useGetHealth';
 import {
   AlertDialog,
@@ -93,6 +94,7 @@ const NavLink = ({
   title: string;
   disabled?: boolean;
 }) => {
+  const { t } = useTranslation();
   const sidebarExpanded = useSettings((state) => state.sidebarExpanded);
 
   const isMatch = useMatch({
@@ -120,8 +122,8 @@ const NavLink = ({
               variants={showAnimation}
             >
               <span className="max-w-[100px] truncate">{title} </span>
-              <Badge className="text-[10px]" variant="inputAdornment">
-                SOON
+              <Badge className="text-[10px] uppercase" variant="inputAdornment">
+                {t('common.soon')}
               </Badge>
             </motion.div>
           )}
@@ -207,6 +209,7 @@ const ShinkaiLogo = ({ className }: { className?: string }) => (
 );
 
 export function MainNav() {
+  const { t, Trans } = useTranslation();
   const navigate = useNavigate();
   const logout = useAuth((state) => state.setLogout);
   const isGetStartedChecklistHidden = useSettings(
@@ -230,12 +233,12 @@ export function MainNav() {
 
   const navigationLinks = [
     {
-      title: 'Chats',
+      title: t('layout.menuItems.chats'),
       href: '/inboxes',
       icon: <InboxIcon className="h-5 w-5" />,
     },
     {
-      title: 'AI Tasks',
+      title: t('layout.menuItems.aiTasks'),
       href: '/ai-tasks',
       icon: <AiTasksIcon className="h-5 w-5" />,
       disabled: true,
@@ -247,23 +250,23 @@ export function MainNav() {
     // },
 
     {
-      title: 'My AI Files Explorer',
+      title: t('layout.menuItems.vectorFs'),
       href: '/vector-fs',
       icon: <FilesIcon className="h-5 w-5" />,
     },
     {
-      title: 'AI Files Content Search',
+      title: t('layout.menuItems.vectorSearch'),
       href: '/vector-search',
       icon: <AISearchContentIcon className="h-5 w-5" />,
     },
     {
-      title: 'Browse Subscriptions',
+      title: t('layout.menuItems.subscriptions'),
       href: '/public-subscriptions',
       icon: <BrowseSubscriptionIcon className="h-5 w-5" />,
       disabled: config.isProduction,
     },
     {
-      title: 'My Subscriptions',
+      title: t('layout.menuItems.mySubscriptions'),
       href: '/my-subscriptions',
       icon: <MySubscriptionsIcon className="h-5 w-5" />,
       disabled: config.isProduction,
@@ -272,17 +275,17 @@ export function MainNav() {
 
   const footerNavigationLinks = [
     {
-      title: 'AIs',
+      title: t('layout.menuItems.agents'),
       href: '/agents',
       icon: <BotIcon className="h-5 w-5" />,
     },
     {
-      title: 'Settings',
+      title: t('layout.menuItems.settings'),
       href: '/settings',
       icon: <GearIcon className="h-5 w-5" />,
     },
     {
-      title: 'Disconnect',
+      title: t('layout.menuItems.disconnect'),
       href: '#',
       icon: <ExitIcon className="h-5 w-5" />,
       onClick: () => confirmDisconnect(),
@@ -295,7 +298,7 @@ export function MainNav() {
         width: sidebarExpanded ? '230px' : '70px',
         transition: sidebarTransition,
       }}
-      className="fixed inset-0 z-30 flex w-auto shrink-0 flex-col gap-2 overflow-y-auto overflow-x-hidden border-r border-gray-400/30  bg-gradient-to-b from-gray-300 to-gray-400/70 px-2 py-6 shadow-xl"
+      className="fixed inset-0 z-30 flex w-auto shrink-0 flex-col gap-2 overflow-y-auto overflow-x-hidden border-r border-gray-400/30 bg-gradient-to-b from-gray-300 to-gray-400/70 px-2 py-6 shadow-xl"
       initial={{
         width: sidebarExpanded ? '230px' : '70px',
       }}
@@ -326,7 +329,7 @@ export function MainNav() {
             </TooltipTrigger>
             <TooltipPortal>
               <TooltipContent align="center" side="right">
-                Toggle Sidebar
+                {t('layout.sidebar.toggle')}
               </TooltipContent>
             </TooltipPortal>
           </Tooltip>
@@ -358,7 +361,7 @@ export function MainNav() {
                         initial="hidden"
                         variants={showAnimation}
                       >
-                        Create AI Chat
+                        {t('chat.create')}
                       </motion.span>
                     )}
                   </AnimatePresence>
@@ -366,7 +369,7 @@ export function MainNav() {
               </TooltipTrigger>
               <TooltipPortal>
                 <TooltipContent align="center" side="right">
-                  Create AI Chat
+                  {t('chat.create')}
                 </TooltipContent>
               </TooltipPortal>
             </Tooltip>
@@ -403,7 +406,7 @@ export function MainNav() {
                             <>
                               {item.title} <br />
                               <span className="text-gray-80 text-xs">
-                                Coming Soon - Early July
+                                {t('common.comingSoon')}
                               </span>
                             </>
                           ) : (
@@ -465,27 +468,29 @@ export function MainNav() {
       >
         <AlertDialogContent className="w-[75%]">
           <AlertDialogHeader>
-            <AlertDialogTitle>Disconnect Shinkai</AlertDialogTitle>
+            <AlertDialogTitle>{t('disconnect.modalTitle')}</AlertDialogTitle>
             <AlertDialogDescription>
               <div className="flex flex-col space-y-3 text-left text-white/70">
-                <div className="flex flex-col space-y-1 ">
+                <div className="flex flex-col space-y-1">
                   <span className="text-sm">
-                    Are you sure you want to disconnect? This will permanently
-                    delete your data
+                    {t('disconnect.modalDescription')}
                   </span>
                 </div>
                 <div className="text-sm">
-                  Before continuing, please
-                  <Link
-                    className="mx-1 inline-block cursor-pointer text-white underline"
-                    onClick={() => {
-                      setIsConfirmLogoutDialogOpened(false);
+                  <Trans
+                    components={{
+                      Link: (
+                        <Link
+                          className="mx-0.5 inline-block cursor-pointer text-white underline"
+                          onClick={() => {
+                            setIsConfirmLogoutDialogOpened(false);
+                          }}
+                          to={'/export-connection'}
+                        />
+                      ),
                     }}
-                    to={'/export-connection'}
-                  >
-                    export your connection
-                  </Link>
-                  to restore your connection at any time.
+                    i18nKey="disconnect.exportConnection"
+                  />
                 </div>
               </div>
             </AlertDialogDescription>
@@ -497,10 +502,10 @@ export function MainNav() {
                 setIsConfirmLogoutDialogOpened(false);
               }}
             >
-              Cancel
+              {t('common.cancel')}
             </AlertDialogCancel>
             <AlertDialogAction className="flex-1" onClick={handleDisconnect}>
-              Disconnect
+              {t('common.disconnect')}
             </AlertDialogAction>
           </AlertDialogFooter>
         </AlertDialogContent>
@@ -510,6 +515,7 @@ export function MainNav() {
 }
 
 const MainLayout = () => {
+  const { t } = useTranslation();
   const location = useLocation();
   const auth = useAuth((state) => state.auth);
   const sidebarExpanded = useSettings((state) => state.sidebarExpanded);
@@ -521,9 +527,8 @@ const MainLayout = () => {
 
   useEffect(() => {
     if (isSuccess && nodeInfo?.status !== 'ok') {
-      toast.error('Node Unavailable', {
-        description:
-          'Visor is having trouble connecting to your Shinkai Node. Your node may be offline, or your internet connection may be down.',
+      toast.error(t('errors.nodeUnavailable.title'), {
+        description: t('errors.nodeUnavailable.description'),
         important: true,
         id: 'node-unavailable',
         duration: 20000,
diff --git a/apps/shinkai-desktop/src/pages/layout/simple-layout.tsx b/apps/shinkai-desktop/src/pages/layout/simple-layout.tsx
index 80b11046b..69cbc15f9 100644
--- a/apps/shinkai-desktop/src/pages/layout/simple-layout.tsx
+++ b/apps/shinkai-desktop/src/pages/layout/simple-layout.tsx
@@ -1,3 +1,4 @@
+import { useTranslation } from '@shinkai_network/shinkai-i18n';
 import { cn } from '@shinkai_network/shinkai-ui/utils';
 import { LucideArrowLeft } from 'lucide-react';
 import React from 'react';
@@ -12,11 +13,12 @@ export const SubpageLayout = ({
   children: React.ReactNode;
   className?: string;
 }) => {
+  const { t } = useTranslation();
   return (
     <div className={cn('relative mx-auto max-w-lg py-10', className)}>
       <Link className="absolute left-4" to={-1 as To}>
         <LucideArrowLeft />
-        <span className="sr-only">Back</span>
+        <span className="sr-only">{t('common.back')}</span>
       </Link>
       <h1 className="mb-8 text-center text-2xl font-semibold tracking-tight">
         {title}
@@ -34,12 +36,14 @@ export const FixedHeaderLayout = ({
   children: React.ReactNode;
   className?: string;
 }) => {
+  const { t } = useTranslation();
+
   return (
     <div className={cn('mx-auto h-screen max-w-lg py-10 pb-4', className)}>
       <div className="mx-2 flex justify-between">
         <Link className="" to={-1 as To}>
           <LucideArrowLeft />
-          <span className="sr-only">Back</span>
+          <span className="sr-only">{t('common.back')}</span>
         </Link>
         <h1 className="mb-8 text-center text-2xl font-semibold tracking-tight">
           {title}
diff --git a/apps/shinkai-visor/src/components/action-button/action-button.tsx b/apps/shinkai-visor/src/components/action-button/action-button.tsx
index 72e42b860..e4f39c005 100644
--- a/apps/shinkai-visor/src/components/action-button/action-button.tsx
+++ b/apps/shinkai-visor/src/components/action-button/action-button.tsx
@@ -32,11 +32,9 @@ import {
 } from 'lucide-react';
 import * as React from 'react';
 import { useEffect, useRef } from 'react';
-import { IntlProvider } from 'react-intl';
 
 import { useGlobalActionButtonChromeMessage } from '../../hooks/use-global-action-button-chrome-message';
 import useKeyboardShortcut from '../../hooks/use-keyboard-shortcut';
-import { langMessages, locale } from '../../lang/intl';
 import { OPEN_SIDEPANEL_DELAY_MS } from '../../service-worker/action';
 import { ServiceWorkerInternalMessageType } from '../../service-worker/communication/internal/types';
 import { useSettings } from '../../store/settings/settings';
@@ -302,8 +300,7 @@ root.render(
         className: 'bg-neutral-900 rounded-full text-sm font-medium px-3 py-2',
       }}
     />
-    <IntlProvider locale={locale} messages={langMessages}>
-      <ActionButton />
-    </IntlProvider>
+
+    <ActionButton />
   </React.StrictMode>,
 );
diff --git a/apps/shinkai-visor/src/components/agents/add-agent.tsx b/apps/shinkai-visor/src/components/agents/add-agent.tsx
index 082470b74..5d098551c 100644
--- a/apps/shinkai-visor/src/components/agents/add-agent.tsx
+++ b/apps/shinkai-visor/src/components/agents/add-agent.tsx
@@ -1,4 +1,5 @@
 import { zodResolver } from '@hookform/resolvers/zod';
+import { useTranslation } from '@shinkai_network/shinkai-i18n';
 import { AgentAPIModel } from '@shinkai_network/shinkai-message-ts/models';
 import {
   addAgentFormDefault,
@@ -30,7 +31,6 @@ import {
 import { cn } from '@shinkai_network/shinkai-ui/utils';
 import { useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
-import { FormattedMessage, useIntl } from 'react-intl';
 import { useNavigate } from 'react-router-dom';
 import { toast } from 'sonner';
 
@@ -54,14 +54,13 @@ export const getModelObject = (
 
 export const AddAgent = () => {
   const navigate = useNavigate();
+  const { t } = useTranslation();
   const auth = useAuth((state) => state.auth);
   const form = useForm<AddAgentFormSchema>({
     resolver: zodResolver(addAgentSchema),
     defaultValues: addAgentFormDefault,
   });
 
-  const intl = useIntl();
-
   const {
     model: currentModel,
     isCustomModel: isCustomModelMode,
@@ -119,15 +118,15 @@ export const AddAgent = () => {
   const modelOptions: { value: Models; label: string }[] = [
     {
       value: Models.OpenAI,
-      label: intl.formatMessage({ id: 'openai' }),
+      label: 'OpenAI',
     },
     {
       value: Models.TogetherComputer,
-      label: intl.formatMessage({ id: 'togethercomputer' }),
+      label: 'Together AI',
     },
     {
       value: Models.Ollama,
-      label: intl.formatMessage({ id: 'ollama' }),
+      label: 'Ollama',
     },
   ];
   const submit = async (values: AddAgentFormSchema) => {
@@ -213,7 +212,7 @@ export const AddAgent = () => {
               control={form.control}
               name="isCustomModel"
               render={({ field }) => (
-                <FormItem className="flex flex-row items-center space-x-3  py-2">
+                <FormItem className="flex flex-row items-center space-x-3 py-2">
                   <FormControl>
                     <Switch
                       checked={field.value}
@@ -244,9 +243,7 @@ export const AddAgent = () => {
                       onValueChange={field.onChange}
                       value={field.value}
                     >
-                      <FormLabel>
-                        <FormattedMessage id="model.one" />
-                      </FormLabel>
+                      <FormLabel>Model</FormLabel>
                       <FormControl>
                         <SelectTrigger>
                           <SelectValue placeholder="Models place" />
@@ -275,9 +272,7 @@ export const AddAgent = () => {
                 name="modelType"
                 render={({ field }) => (
                   <FormItem>
-                    <FormLabel>
-                      <FormattedMessage id="model.other" />
-                    </FormLabel>
+                    <FormLabel>Models</FormLabel>
                     <Select
                       defaultValue={field.value as unknown as string}
                       disabled={!!isCustomModelMode}
@@ -312,14 +307,17 @@ export const AddAgent = () => {
                   control={form.control}
                   name="modelCustom"
                   render={({ field }) => (
-                    <TextField field={field} label={'Model Name'} />
+                    <TextField
+                      field={field}
+                      label={t('agents.form.modelName')}
+                    />
                   )}
                 />
                 <FormField
                   control={form.control}
                   name="modelTypeCustom"
                   render={({ field }) => (
-                    <TextField field={field} label={'Model ID'} />
+                    <TextField field={field} label={t('agents.form.modelId')} />
                   )}
                 />
               </>
@@ -333,7 +331,7 @@ export const AddAgent = () => {
                   autoFocus
                   data-testid="agent-name-input"
                   field={field}
-                  label={<FormattedMessage id="agent-name" />}
+                  label={t('agents.form.agentName')}
                 />
               )}
             />
@@ -342,10 +340,7 @@ export const AddAgent = () => {
               control={form.control}
               name="externalUrl"
               render={({ field }) => (
-                <TextField
-                  field={field}
-                  label={<FormattedMessage id="external-url" />}
-                />
+                <TextField field={field} label={t('agents.form.externalUrl')} />
               )}
             />
 
@@ -353,10 +348,7 @@ export const AddAgent = () => {
               control={form.control}
               name="apikey"
               render={({ field }) => (
-                <TextField
-                  field={field}
-                  label={<FormattedMessage id="api-key" />}
-                />
+                <TextField field={field} label={t('agents.form.apiKey')} />
               )}
             />
           </div>
@@ -367,7 +359,7 @@ export const AddAgent = () => {
             isLoading={isPending}
             type="submit"
           >
-            <FormattedMessage id="add-agent" />
+            {t('agents.add')}
           </Button>
         </form>
       </Form>
diff --git a/apps/shinkai-visor/src/components/agents/agents.tsx b/apps/shinkai-visor/src/components/agents/agents.tsx
index b525af484..d7945be02 100644
--- a/apps/shinkai-visor/src/components/agents/agents.tsx
+++ b/apps/shinkai-visor/src/components/agents/agents.tsx
@@ -1,5 +1,6 @@
 import { zodResolver } from '@hookform/resolvers/zod';
 import { DotsVerticalIcon } from '@radix-ui/react-icons';
+import { useTranslation } from '@shinkai_network/shinkai-i18n';
 import {
   EditAgentFormSchema,
   editAgentSchema,
@@ -30,7 +31,6 @@ import { cn } from '@shinkai_network/shinkai-ui/utils';
 import { BotIcon, Edit, Plus, TrashIcon } from 'lucide-react';
 import React, { useEffect } from 'react';
 import { useForm } from 'react-hook-form';
-import { FormattedMessage } from 'react-intl';
 import { useNavigate } from 'react-router-dom';
 import { toast } from 'sonner';
 
@@ -121,7 +121,7 @@ function AgentCard({
         role="button"
       >
         <div className="flex items-center gap-3">
-          <div className="flex h-8 w-8 items-center justify-center rounded-lg ">
+          <div className="flex h-8 w-8 items-center justify-center rounded-lg">
             <BotIcon className="h-6 w-6" />
           </div>
           <div className="flex flex-col items-baseline gap-2">
@@ -228,6 +228,7 @@ const EditAgentDrawer = ({
   agentApiKey: string;
 }) => {
   const auth = useAuth((state) => state.auth);
+  const { t } = useTranslation();
 
   const form = useForm<EditAgentFormSchema>({
     resolver: zodResolver(editAgentSchema),
@@ -307,10 +308,7 @@ const EditAgentDrawer = ({
                 disabled
                 name="agentName"
                 render={({ field }) => (
-                  <TextField
-                    field={field}
-                    label={<FormattedMessage id="agent-name" />}
-                  />
+                  <TextField field={field} label={t('agents.form.agentName')} />
                 )}
               />
 
@@ -320,7 +318,7 @@ const EditAgentDrawer = ({
                 render={({ field }) => (
                   <TextField
                     field={field}
-                    label={<FormattedMessage id="external-url" />}
+                    label={t('agents.form.externalUrl')}
                   />
                 )}
               />
@@ -329,10 +327,7 @@ const EditAgentDrawer = ({
                 control={form.control}
                 name="apikey"
                 render={({ field }) => (
-                  <TextField
-                    field={field}
-                    label={<FormattedMessage id="api-key" />}
-                  />
+                  <TextField field={field} label={t('agents.form.apiKey')} />
                 )}
               />
 
@@ -340,14 +335,14 @@ const EditAgentDrawer = ({
                 control={form.control}
                 name="modelCustom"
                 render={({ field }) => (
-                  <TextField field={field} label={'Model Name'} />
+                  <TextField field={field} label={t('agents.form.modelName')} />
                 )}
               />
               <FormField
                 control={form.control}
                 name="modelTypeCustom"
                 render={({ field }) => (
-                  <TextField field={field} label={'Model ID'} />
+                  <TextField field={field} label={t('agents.form.modelId')} />
                 )}
               />
             </div>
@@ -357,7 +352,7 @@ const EditAgentDrawer = ({
               isLoading={isPending}
               type="submit"
             >
-              Save
+              {t('common.save')}
             </Button>
           </form>
         </Form>
diff --git a/apps/shinkai-visor/src/components/connect-method-qr-code/connect-method-qr-code.tsx b/apps/shinkai-visor/src/components/connect-method-qr-code/connect-method-qr-code.tsx
index 4a897dd2c..6875e884c 100644
--- a/apps/shinkai-visor/src/components/connect-method-qr-code/connect-method-qr-code.tsx
+++ b/apps/shinkai-visor/src/components/connect-method-qr-code/connect-method-qr-code.tsx
@@ -13,7 +13,6 @@ import { BrowserQRCodeReader } from '@zxing/browser';
 import { QrCode, Trash, Upload } from 'lucide-react';
 import React, { useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
-import { FormattedMessage } from 'react-intl';
 import { useNavigate } from 'react-router-dom';
 import * as z from 'zod';
 
@@ -152,14 +151,7 @@ export const ConnectMethodQrCode = () => {
 
   return (
     <div className="flex h-full flex-col space-y-3">
-      <Header
-        description={
-          <FormattedMessage id="qr-code-connection-connection-method-description" />
-        }
-        title={
-          <FormattedMessage id="qr-code-connection-connection-method-title" />
-        }
-      />
+      <Header description="Use a QR code to connect" title={'QR Code'} />
 
       <Form {...form}>
         <form
@@ -204,7 +196,7 @@ export const ConnectMethodQrCode = () => {
                           <Upload className="h-4 w-4" />
                         </div>
                         <p className="text-sm text-white">
-                          <FormattedMessage id="click-to-upload" />
+                          Click to upload or drag and drop
                         </p>
                         <p className="text-gray-80 text-xs">JPG | PNG</p>
                       </div>
@@ -227,10 +219,7 @@ export const ConnectMethodQrCode = () => {
                   control={form.control}
                   name="registration_name"
                   render={({ field }) => (
-                    <TextField
-                      field={field}
-                      label={<FormattedMessage id="registration-name" />}
-                    />
+                    <TextField field={field} label={'Device Nickname'} />
                   )}
                 />
 
@@ -238,10 +227,7 @@ export const ConnectMethodQrCode = () => {
                   control={form.control}
                   name="node_address"
                   render={({ field }) => (
-                    <TextField
-                      field={field}
-                      label={<FormattedMessage id="node-address" />}
-                    />
+                    <TextField field={field} label={'Node Address'} />
                   )}
                 />
 
@@ -249,10 +235,7 @@ export const ConnectMethodQrCode = () => {
                   control={form.control}
                   name="shinkai_identity"
                   render={({ field }) => (
-                    <TextField
-                      field={field}
-                      label={<FormattedMessage id="shinkai-identity" />}
-                    />
+                    <TextField field={field} label="Shinkai Identity" />
                   )}
                 />
               </>
@@ -266,7 +249,7 @@ export const ConnectMethodQrCode = () => {
             isLoading={isPending}
             type="submit"
           >
-            <FormattedMessage id="connect" />
+            Connect
           </Button>
         </form>
       </Form>
diff --git a/apps/shinkai-visor/src/components/connect-method-quick-start/connect-method-quick-start.tsx b/apps/shinkai-visor/src/components/connect-method-quick-start/connect-method-quick-start.tsx
index edeeb7bc5..4eae27424 100644
--- a/apps/shinkai-visor/src/components/connect-method-quick-start/connect-method-quick-start.tsx
+++ b/apps/shinkai-visor/src/components/connect-method-quick-start/connect-method-quick-start.tsx
@@ -1,4 +1,5 @@
 import { zodResolver } from '@hookform/resolvers/zod';
+import { useTranslation } from '@shinkai_network/shinkai-i18n';
 import {
   QuickConnectFormSchema,
   quickConnectFormSchema,
@@ -23,7 +24,6 @@ import {
 // import { QrCode } from 'lucide-react';
 import { useEffect } from 'react';
 import { useForm } from 'react-hook-form';
-import { FormattedMessage } from 'react-intl';
 import { useLocation, useNavigate } from 'react-router-dom';
 
 import { SetupData, useAuth } from '../../store/auth/auth';
@@ -32,6 +32,7 @@ import { Header } from '../header/header';
 
 export const ConnectMethodQuickStart = () => {
   const navigate = useNavigate();
+  const { t } = useTranslation();
   const location = useLocation() as {
     state: { nodeAddress: string };
   };
@@ -102,12 +103,8 @@ export const ConnectMethodQuickStart = () => {
     <div className="flex h-full flex-col justify-between gap-6 overflow-auto pr-2">
       <div>
         <Header
-          description={
-            <FormattedMessage id="quick-connection-connection-method-description" />
-          }
-          title={
-            <FormattedMessage id="quick-connection-connection-method-title" />
-          }
+          description={'Use address to connect for first time'}
+          title={'Quick connection ⚡'}
         />
         <Form {...form}>
           <form
@@ -121,7 +118,7 @@ export const ConnectMethodQuickStart = () => {
                 render={({ field }) => (
                   <TextField
                     field={field}
-                    label={<FormattedMessage id="node-address" />}
+                    label={t('shinkaiNode.nodeAddress')}
                   />
                 )}
               />
@@ -129,7 +126,7 @@ export const ConnectMethodQuickStart = () => {
               <Accordion collapsible type="single">
                 <AccordionItem value="item-1">
                   <AccordionTrigger className="pl-2">
-                    <FormattedMessage id="advanced-options" />
+                    Advanced options
                   </AccordionTrigger>
 
                   <AccordionContent className="flex flex-col justify-between space-y-2 pb-0">
@@ -137,10 +134,7 @@ export const ConnectMethodQuickStart = () => {
                       control={form.control}
                       name="registration_name"
                       render={({ field }) => (
-                        <TextField
-                          field={field}
-                          label={<FormattedMessage id="registration-name" />}
-                        />
+                        <TextField field={field} label="Device Nickname" />
                       )}
                     />
                     {/*<FormField*/}
@@ -171,7 +165,7 @@ export const ConnectMethodQuickStart = () => {
               isLoading={isPending}
               type="submit"
             >
-              <FormattedMessage id="connect" />
+              {t('common.connect')}
             </Button>
           </form>
         </Form>
@@ -214,18 +208,14 @@ export const ConnectMethodQuickStart = () => {
         {/*/>*/}
 
         <ConnectionMethodOption
-          description={
-            <FormattedMessage id="restore-connection-connection-method-description" />
-          }
+          description={'Use a connection file and passphrase'}
           icon={
             <span aria-hidden className="text-base">
               🔑
             </span>
           }
           onClick={() => selectRestoreMethod()}
-          title={
-            <FormattedMessage id="restore-connection-connection-method-title" />
-          }
+          title={'Restore'}
         />
       </div>
     </div>
diff --git a/apps/shinkai-visor/src/components/connect-method-restore-connection/connect-method-restore-connection.tsx b/apps/shinkai-visor/src/components/connect-method-restore-connection/connect-method-restore-connection.tsx
index 147d4f815..17942fd08 100644
--- a/apps/shinkai-visor/src/components/connect-method-restore-connection/connect-method-restore-connection.tsx
+++ b/apps/shinkai-visor/src/components/connect-method-restore-connection/connect-method-restore-connection.tsx
@@ -1,4 +1,5 @@
 import { zodResolver } from '@hookform/resolvers/zod';
+import { useTranslation } from '@shinkai_network/shinkai-i18n';
 import { decryptMessageWithPassphrase } from '@shinkai_network/shinkai-message-ts/cryptography';
 import {
   RestoreConnectionFormSchema,
@@ -18,7 +19,6 @@ import {
 } from '@shinkai_network/shinkai-ui';
 import React, { useState } from 'react';
 import { useForm } from 'react-hook-form';
-import { FormattedMessage } from 'react-intl';
 import { useNavigate } from 'react-router-dom';
 
 import { useAuth } from '../../store/auth/auth';
@@ -26,6 +26,7 @@ import { Header } from '../header/header';
 
 export const ConnectMethodRestoreConnection = () => {
   const navigate = useNavigate();
+  const { t } = useTranslation();
   const setAuth = useAuth((state) => state.setAuth);
   const [error, setError] = useState<boolean>(false);
 
@@ -75,12 +76,8 @@ export const ConnectMethodRestoreConnection = () => {
   return (
     <div className="flex h-full flex-col space-y-3">
       <Header
-        description={
-          <FormattedMessage id="restore-connection-connection-method-description" />
-        }
-        title={
-          <FormattedMessage id="restore-connection-connection-method-title" />
-        }
+        description={'Use a connection file and passphrase'}
+        title={'Restore'}
       />
 
       <Form {...form}>
@@ -95,7 +92,7 @@ export const ConnectMethodRestoreConnection = () => {
               render={({ field }) => (
                 <FormItem>
                   <FormLabel className="sr-only">
-                    <FormattedMessage id="encrypted-connection" />
+                    Encrypted connection
                   </FormLabel>
                   <FormControl>
                     <div className="flex flex-col space-y-1">
@@ -129,7 +126,7 @@ export const ConnectMethodRestoreConnection = () => {
               render={({ field }) => (
                 <TextField
                   field={field}
-                  label={<FormattedMessage id="passphrase" />}
+                  label={t('common.passphrase')}
                   type={'password'}
                 />
               )}
@@ -138,7 +135,7 @@ export const ConnectMethodRestoreConnection = () => {
           </div>
 
           <Button className="w-full" type="submit">
-            <FormattedMessage id="restore-connection" />
+            Restore connection
           </Button>
         </form>
       </Form>
diff --git a/apps/shinkai-visor/src/components/create-inbox/create-inbox.tsx b/apps/shinkai-visor/src/components/create-inbox/create-inbox.tsx
index 7ce1cf420..96b4b7051 100644
--- a/apps/shinkai-visor/src/components/create-inbox/create-inbox.tsx
+++ b/apps/shinkai-visor/src/components/create-inbox/create-inbox.tsx
@@ -16,7 +16,6 @@ import {
   TextField,
 } from '@shinkai_network/shinkai-ui';
 import { useForm } from 'react-hook-form';
-import { FormattedMessage, useIntl } from 'react-intl';
 import { useNavigate } from 'react-router-dom';
 
 import { useAuth } from '../../store/auth/auth';
@@ -24,7 +23,7 @@ import { useAuth } from '../../store/auth/auth';
 export const CreateInbox = () => {
   const navigate = useNavigate();
   const auth = useAuth((state) => state.auth);
-  const intl = useIntl();
+
   const form = useForm<CreateDMFormSchema>({
     resolver: zodResolver(createDMFormSchema),
     defaultValues: {
@@ -78,7 +77,7 @@ export const CreateInbox = () => {
                 <TextField
                   endAdornment={endAdornment}
                   field={field}
-                  label={<FormattedMessage id="message-receiver" />}
+                  label="Message receiver"
                   startAdornment={'@@'}
                 />
               )}
@@ -89,9 +88,7 @@ export const CreateInbox = () => {
               name="message"
               render={({ field }) => (
                 <FormItem>
-                  <FormLabel>
-                    <FormattedMessage id="message.one" />
-                  </FormLabel>
+                  <FormLabel>Message</FormLabel>
                   <FormControl>
                     <Textarea
                       autoFocus
@@ -104,9 +101,7 @@ export const CreateInbox = () => {
                           form.handleSubmit(submit)();
                         }
                       }}
-                      placeholder={intl.formatMessage({
-                        id: 'tmwtd',
-                      })}
+                      placeholder="Tell me what to do"
                       {...field}
                     />
                   </FormControl>
@@ -121,7 +116,7 @@ export const CreateInbox = () => {
             isLoading={isPending}
             type="submit"
           >
-            <FormattedMessage id="create-inbox" />
+            Create DM Chat
           </Button>
         </form>
       </Form>
diff --git a/apps/shinkai-visor/src/components/create-job/create-job.tsx b/apps/shinkai-visor/src/components/create-job/create-job.tsx
index 0d203dd06..2edca7710 100644
--- a/apps/shinkai-visor/src/components/create-job/create-job.tsx
+++ b/apps/shinkai-visor/src/components/create-job/create-job.tsx
@@ -1,4 +1,5 @@
 import { zodResolver } from '@hookform/resolvers/zod';
+import { useTranslation } from '@shinkai_network/shinkai-i18n';
 import { buildInboxIdFromJobId } from '@shinkai_network/shinkai-message-ts/utils';
 import {
   CreateJobFormSchema,
@@ -43,7 +44,6 @@ import { TreeCheckboxSelectionKeys } from 'primereact/tree';
 import { TreeNode } from 'primereact/treenode';
 import React, { useEffect, useRef, useState } from 'react';
 import { useForm } from 'react-hook-form';
-import { FormattedMessage, useIntl } from 'react-intl';
 import { useLocation, useNavigate } from 'react-router-dom';
 
 import { useQuery } from '../../hooks/use-query';
@@ -54,7 +54,7 @@ import { KnowledgeSearchDrawer, VectorFsScopeDrawer } from './vector-fs-scope';
 
 export const CreateJob = () => {
   const navigate = useNavigate();
-  const intl = useIntl();
+  const { t } = useTranslation();
   const location = useLocation() as {
     state: {
       agentName: string;
@@ -242,9 +242,7 @@ export const CreateJob = () => {
               name="agent"
               render={({ field }) => (
                 <FormItem>
-                  <FormLabel>
-                    <FormattedMessage id="agent.one" />
-                  </FormLabel>
+                  <FormLabel>AI</FormLabel>
                   <Select
                     defaultValue={field.value}
                     name={field.name}
@@ -287,9 +285,7 @@ export const CreateJob = () => {
               name="content"
               render={({ field }) => (
                 <FormItem className="mt-3">
-                  <FormLabel>
-                    <FormattedMessage id="message.one" />
-                  </FormLabel>
+                  <FormLabel>Message</FormLabel>
                   <FormControl>
                     <Textarea
                       autoFocus
@@ -302,9 +298,7 @@ export const CreateJob = () => {
                           form.handleSubmit(submit)();
                         }
                       }}
-                      placeholder={intl.formatMessage({
-                        id: 'tmwtd',
-                      })}
+                      placeholder={t('chat.form.message')}
                       {...field}
                     />
                   </FormControl>
@@ -372,7 +366,7 @@ export const CreateJob = () => {
                   render={({ field }) => (
                     <FormItem>
                       <FormLabel className="sr-only">
-                        <FormattedMessage id="file.one" />
+                        {t('common.file')}
                       </FormLabel>
                       <FormControl>
                         <FileUploader
@@ -401,7 +395,7 @@ export const CreateJob = () => {
             isLoading={isPending}
             type="submit"
           >
-            <FormattedMessage id="create-job" />
+            {t('chat.create')}
           </Button>
         </form>
       </Form>
diff --git a/apps/shinkai-visor/src/components/create-registration-code/create-registration-code.tsx b/apps/shinkai-visor/src/components/create-registration-code/create-registration-code.tsx
index e2c950c34..02a00f8b7 100644
--- a/apps/shinkai-visor/src/components/create-registration-code/create-registration-code.tsx
+++ b/apps/shinkai-visor/src/components/create-registration-code/create-registration-code.tsx
@@ -1,4 +1,5 @@
 import { zodResolver } from '@hookform/resolvers/zod';
+import { useTranslation } from '@shinkai_network/shinkai-i18n';
 import { QRSetupData } from '@shinkai_network/shinkai-message-ts/models';
 import { useCreateRegistrationCode } from '@shinkai_network/shinkai-node-state/lib/mutations/createRegistrationCode/useCreateRegistrationCode';
 import {
@@ -19,7 +20,6 @@ import {
 } from '@shinkai_network/shinkai-ui';
 import { useEffect, useState } from 'react';
 import { useForm, useWatch } from 'react-hook-form';
-import { FormattedMessage, useIntl } from 'react-intl';
 import { z } from 'zod';
 
 import { useAuth } from '../../store/auth/auth';
@@ -43,7 +43,8 @@ const formSchema = z.object({
 });
 
 export const CreateRegistrationCode = () => {
-  const intl = useIntl();
+  const { t } = useTranslation();
+
   type FormSchemaType = z.infer<typeof formSchema>;
   const auth = useAuth((state) => state.auth);
   const form = useForm<FormSchemaType>({
@@ -88,25 +89,25 @@ export const CreateRegistrationCode = () => {
     });
   const identityTypeOptions: { value: IdentityType; label: string }[] = [
     {
-      label: intl.formatMessage({ id: 'profile.one' }),
+      label: 'Profile',
       value: IdentityType.Profile,
     },
     {
-      label: intl.formatMessage({ id: 'device.one' }),
+      label: 'Device',
       value: IdentityType.Device,
     },
   ];
   const permissionOptions: { value: PermissionType; label: string }[] = [
     {
-      label: intl.formatMessage({ id: 'admin' }),
+      label: 'Admin',
       value: PermissionType.Admin,
     },
     {
-      label: intl.formatMessage({ id: 'standard' }),
+      label: 'Standard',
       value: PermissionType.Standard,
     },
     {
-      label: intl.formatMessage({ id: 'none' }),
+      label: 'None',
       value: PermissionType.None,
     },
   ];
@@ -151,7 +152,7 @@ export const CreateRegistrationCode = () => {
   }, [form, identityType, auth]);
   return (
     <div className="flex h-full flex-col space-y-8">
-      <Header title={<FormattedMessage id="create-registration-code" />} />
+      <Header title={t('settings.registerNewCode.label')} />
       <div className="flex grow flex-col space-y-2">
         <Form {...form}>
           <form
@@ -166,9 +167,7 @@ export const CreateRegistrationCode = () => {
                   name="identityType"
                   render={({ field }) => (
                     <FormItem>
-                      <FormLabel>
-                        <FormattedMessage id="identity-type" />
-                      </FormLabel>
+                      <FormLabel>Identity type</FormLabel>
                       <Select
                         defaultValue={field.value}
                         name={field.name}
@@ -203,7 +202,7 @@ export const CreateRegistrationCode = () => {
                   render={({ field }) => (
                     <TextField
                       field={{ ...field, readOnly: true }}
-                      label={<FormattedMessage id="profile.one" />}
+                      label="Profile"
                     />
                   )}
                 />
@@ -213,9 +212,7 @@ export const CreateRegistrationCode = () => {
                 name="permissionType"
                 render={({ field }) => (
                   <FormItem>
-                    <FormLabel>
-                      <FormattedMessage id="permission-type" />
-                    </FormLabel>
+                    <FormLabel>Permission type</FormLabel>
                     <Select
                       defaultValue={field.value}
                       name={field.name}
@@ -244,18 +241,20 @@ export const CreateRegistrationCode = () => {
               />
             </div>
             <Button className="w-full" isLoading={isPending} type="submit">
-              <FormattedMessage id="generate-registration-code" />
+              Generate registration code
             </Button>
           </form>
         </Form>
 
         <QrCodeModal
-          description={<FormattedMessage id="use-it-to-register-and-connect" />}
+          description={
+            'Scan the QR code with your Shinkai app or download it to register'
+          }
           modalClassName={'w-[85%]'}
           onOpenChange={setQrCodeModalOpen}
           onSave={download}
           open={qrCodeModalOpen}
-          title={<FormattedMessage id="scan-or-download-registration-code" />}
+          title={"Here's your QR Code"}
           value={JSON.stringify(generatedSetupData)}
         />
       </div>
diff --git a/apps/shinkai-visor/src/components/edit-inbox-name-dialog/edit-inbox-name-dialog.tsx b/apps/shinkai-visor/src/components/edit-inbox-name-dialog/edit-inbox-name-dialog.tsx
index 1c60a64b8..b68c1a0a8 100644
--- a/apps/shinkai-visor/src/components/edit-inbox-name-dialog/edit-inbox-name-dialog.tsx
+++ b/apps/shinkai-visor/src/components/edit-inbox-name-dialog/edit-inbox-name-dialog.tsx
@@ -1,4 +1,5 @@
 import { zodResolver } from '@hookform/resolvers/zod';
+import { useTranslation } from '@shinkai_network/shinkai-i18n';
 import {
   UpdateInboxNameFormSchema,
   updateInboxNameFormSchema,
@@ -17,7 +18,6 @@ import {
 } from '@shinkai_network/shinkai-ui';
 import { useEffect } from 'react';
 import { useForm } from 'react-hook-form';
-import { FormattedMessage } from 'react-intl';
 
 import { useAuth } from '../../store/auth/auth';
 
@@ -38,6 +38,7 @@ export const EditInboxNameDialog = ({
   inboxId,
   onOpenChange,
 }: EditInboxNameDialogProps) => {
+  const { t } = useTranslation();
   const auth = useAuth((state) => state.auth);
   const form = useForm<UpdateInboxNameFormSchema>({
     resolver: zodResolver(updateInboxNameFormSchema),
@@ -76,10 +77,7 @@ export const EditInboxNameDialog = ({
       <DrawerContent>
         <DrawerHeader className="mb-6">
           <DrawerTitle>
-            <FormattedMessage id="edit" />{' '}
-            <span className="mr-1 capitalize">
-              <FormattedMessage id="inbox.one" />
-            </span>
+            {t('common.edit')} <span className="mr-1 capitalize">Chat</span>
             Name
           </DrawerTitle>
         </DrawerHeader>
@@ -96,7 +94,7 @@ export const EditInboxNameDialog = ({
                   <TextField
                     autoFocus
                     field={field}
-                    label={<FormattedMessage id="name.one" />}
+                    label={t('inboxes.inboxName')}
                   />
                 )}
               />
@@ -109,7 +107,7 @@ export const EditInboxNameDialog = ({
                   type="button"
                   variant="ghost"
                 >
-                  <FormattedMessage id="cancel" />
+                  {t('common.cancel')}
                 </Button>
                 <Button
                   className="flex-1"
@@ -117,7 +115,7 @@ export const EditInboxNameDialog = ({
                   isLoading={isPending}
                   type="submit"
                 >
-                  <FormattedMessage id="save" />
+                  {t('common.save')}
                 </Button>
               </div>
             </DialogFooter>
diff --git a/apps/shinkai-visor/src/components/empty-agents/empty-agents.tsx b/apps/shinkai-visor/src/components/empty-agents/empty-agents.tsx
index 5ef0bf68b..c46702958 100644
--- a/apps/shinkai-visor/src/components/empty-agents/empty-agents.tsx
+++ b/apps/shinkai-visor/src/components/empty-agents/empty-agents.tsx
@@ -1,29 +1,26 @@
+import { useTranslation } from '@shinkai_network/shinkai-i18n';
 import { Button } from '@shinkai_network/shinkai-ui';
 import React from 'react';
-import { FormattedMessage } from 'react-intl';
 import { useNavigate } from 'react-router-dom';
 
-type EmptyAgentsProps = React.HTMLAttributes<HTMLDivElement>
+type EmptyAgentsProps = React.HTMLAttributes<HTMLDivElement>;
 
 export const EmptyAgents = ({ ...props }: EmptyAgentsProps) => {
   const navigate = useNavigate();
+  const { t } = useTranslation();
   return (
     <div className="flex grow flex-col items-center justify-center" {...props}>
       <div className="mb-8 space-y-3 text-center">
         <span aria-hidden className="text-5xl">
           🤖
         </span>
-        <p className="text-2xl font-semibold">
-          <FormattedMessage id="empty-agents-title" />
-        </p>
+        <p className="text-2xl font-semibold">{t('agents.notFound.title')}</p>
         <p className="text-center text-sm font-medium text-gray-100">
-          <FormattedMessage id="empty-agents-message" />
+          {t('agents.notFound.description')}
         </p>
       </div>
 
-      <Button onClick={() => navigate('/agents/add')}>
-        <FormattedMessage id="add-agent" />
-      </Button>
+      <Button onClick={() => navigate('/agents/add')}>{t('agents.add')}</Button>
     </div>
   );
 };
diff --git a/apps/shinkai-visor/src/components/empty-inboxes/empty-inboxes.tsx b/apps/shinkai-visor/src/components/empty-inboxes/empty-inboxes.tsx
index d9cb62e57..1ef164385 100644
--- a/apps/shinkai-visor/src/components/empty-inboxes/empty-inboxes.tsx
+++ b/apps/shinkai-visor/src/components/empty-inboxes/empty-inboxes.tsx
@@ -1,28 +1,26 @@
+import { useTranslation } from '@shinkai_network/shinkai-i18n';
 import { Button } from '@shinkai_network/shinkai-ui';
 import React from 'react';
-import { FormattedMessage } from 'react-intl';
 import { useNavigate } from 'react-router-dom';
 
-type EmptyInboxesProps = React.HTMLAttributes<HTMLDivElement>
+type EmptyInboxesProps = React.HTMLAttributes<HTMLDivElement>;
 
 export const EmptyInboxes = ({ ...props }: EmptyInboxesProps) => {
   const navigate = useNavigate();
+  const { t } = useTranslation();
+
   return (
     <div className="flex grow flex-col items-center justify-center" {...props}>
       <div className="mb-8 space-y-3 text-center">
         <span aria-hidden className="text-5xl">
           🤖
         </span>
-        <p className="text-lg font-semibold">
-          <FormattedMessage id="empty-inboxes-title" />
-        </p>
-        <p className="text-center text-sm">
-          <FormattedMessage id="empty-inboxes-message" />
-        </p>
+        <p className="text-lg font-semibold">{t('chat.emptyStateTitle')}</p>
+        <p className="text-center text-sm">{t('chat.emptyStateDescription')}</p>
       </div>
 
       <Button onClick={() => navigate('/inboxes/create-job')}>
-        <FormattedMessage id="create-job" />
+        {t('chat.create')}
       </Button>
     </div>
   );
diff --git a/apps/shinkai-visor/src/components/export-connection/export-connection.tsx b/apps/shinkai-visor/src/components/export-connection/export-connection.tsx
index 24e21a04f..f795236ac 100644
--- a/apps/shinkai-visor/src/components/export-connection/export-connection.tsx
+++ b/apps/shinkai-visor/src/components/export-connection/export-connection.tsx
@@ -1,4 +1,5 @@
 import { zodResolver } from '@hookform/resolvers/zod';
+import { useTranslation } from '@shinkai_network/shinkai-i18n';
 import { encryptMessageWithPassphrase } from '@shinkai_network/shinkai-message-ts/cryptography';
 import {
   ExportConnectionFormSchema,
@@ -14,12 +15,12 @@ import {
 import { Download } from 'lucide-react';
 import { useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
-import { FormattedMessage } from 'react-intl';
 
 import { useAuth } from '../../store/auth/auth';
 import { Header } from '../header/header';
 
 export const ExportConnection = () => {
+  const { t } = useTranslation();
   const auth = useAuth((state) => state.auth);
   const form = useForm<ExportConnectionFormSchema>({
     resolver: zodResolver(exportConnectionFormSchema),
@@ -59,7 +60,7 @@ export const ExportConnection = () => {
   };
   return (
     <div className="flex h-full flex-col gap-8">
-      <Header title={<FormattedMessage id="export-connection" />} />
+      <Header title={t('exportConnection.label')} />
       <div className="flex grow flex-col space-y-2">
         <Form {...form}>
           <form
@@ -73,7 +74,7 @@ export const ExportConnection = () => {
                 render={({ field }) => (
                   <TextField
                     field={field}
-                    label={<FormattedMessage id="passphrase" />}
+                    label={t('common.passphrase')}
                     type="password"
                   />
                 )}
@@ -84,27 +85,25 @@ export const ExportConnection = () => {
                 render={({ field }) => (
                   <TextField
                     field={field}
-                    label={<FormattedMessage id="confirm-passphrase" />}
+                    label={t('common.repeatPassphrase')}
                     type="password"
                   />
                 )}
               />
             </div>
             <Button className="w-full" type="submit">
-              <FormattedMessage id="generate-connection-file" />
+              {t('exportConnection.generateFile')}
             </Button>
           </form>
         </Form>
 
         {encryptedSetupData && (
-          <div className=" flex grow flex-col items-center justify-center space-y-3">
+          <div className="flex grow flex-col items-center justify-center space-y-3">
             <div className="flex flex-col space-y-1">
               <span className="font-semibold">
-                <FormattedMessage id="download-keep-safe-place" />
-              </span>
-              <span>
-                <FormattedMessage id="use-it-to-restore" />
+                {t('exportConnection.downloadText')}
               </span>
+              <span>{t('exportConnection.restoreText')}</span>
             </div>
             <div className="flex w-full flex-row space-x-1">
               <div className="grow cursor-pointer" onClick={() => download()}>
diff --git a/apps/shinkai-visor/src/components/iframe-embeder/installed-popup.tsx b/apps/shinkai-visor/src/components/iframe-embeder/installed-popup.tsx
index aa5640b53..9bd194e6b 100644
--- a/apps/shinkai-visor/src/components/iframe-embeder/installed-popup.tsx
+++ b/apps/shinkai-visor/src/components/iframe-embeder/installed-popup.tsx
@@ -3,12 +3,10 @@ import '../../theme/styles.css';
 import { Player } from '@lottiefiles/react-lottie-player';
 import * as React from 'react';
 import { createRoot } from 'react-dom/client';
-import { FormattedMessage, IntlProvider } from 'react-intl';
 
 import InstalledPopupAnimation from '../../assets/animations/installed-popup.json';
 import logo from '../../assets/icons/visor.svg';
 import { srcUrlResolver } from '../../helpers/src-url-resolver';
-import { langMessages, locale } from '../../lang/intl';
 
 const InstalledPopup = () => {
   return (
@@ -32,7 +30,8 @@ const InstalledPopup = () => {
         </div>
 
         <p className="text-md text-center text-white" data-cy="welcome-message">
-          <FormattedMessage id="installed-sucessfully" />
+          Shinkai Visor was installed successfully, navigate to a website and
+          use the action button to start asking Shinkai AI
         </p>
       </div>
     </div>
@@ -45,10 +44,8 @@ if (!container) {
 const root = createRoot(container);
 root.render(
   <React.StrictMode>
-    <IntlProvider locale={locale} messages={langMessages}>
-      <div className="font-inter h-full w-full overflow-hidden bg-gray-500 p-3 shadow-xl">
-        <InstalledPopup />
-      </div>
-    </IntlProvider>
+    <div className="font-inter h-full w-full overflow-hidden bg-gray-500 p-3 shadow-xl">
+      <InstalledPopup />
+    </div>
   </React.StrictMode>,
 );
diff --git a/apps/shinkai-visor/src/components/image-capture/image-capture.tsx b/apps/shinkai-visor/src/components/image-capture/image-capture.tsx
index efd3ad746..5d193bb2f 100644
--- a/apps/shinkai-visor/src/components/image-capture/image-capture.tsx
+++ b/apps/shinkai-visor/src/components/image-capture/image-capture.tsx
@@ -8,10 +8,8 @@ import * as React from 'react';
 import { useRef, useState } from 'react';
 import ReactCrop, { Crop, PixelCrop } from 'react-image-crop';
 import reactCropStyle from 'react-image-crop/dist/ReactCrop.css?inline';
-import { IntlProvider } from 'react-intl';
 
 import { useGlobalImageCaptureChromeMessage } from '../../hooks/use-global-image-capture-message';
-import { langMessages, locale } from '../../lang/intl';
 import themeStyle from '../../theme/styles.css?inline';
 
 export const ImageCapture = () => {
@@ -93,10 +91,8 @@ const root = createShadowRoot(
 );
 root.render(
   <React.StrictMode>
-    <IntlProvider locale={locale} messages={langMessages}>
-      <div className="z-max pointer-events-none fixed h-full w-full overflow-hidden">
-        <ImageCapture />
-      </div>
-    </IntlProvider>
+    <div className="z-max pointer-events-none fixed h-full w-full overflow-hidden">
+      <ImageCapture />
+    </div>
   </React.StrictMode>,
 );
diff --git a/apps/shinkai-visor/src/components/inbox-input/inbox-input.tsx b/apps/shinkai-visor/src/components/inbox-input/inbox-input.tsx
index 00948d752..d24d64083 100644
--- a/apps/shinkai-visor/src/components/inbox-input/inbox-input.tsx
+++ b/apps/shinkai-visor/src/components/inbox-input/inbox-input.tsx
@@ -13,7 +13,6 @@ import {
 import { motion } from 'framer-motion';
 import { SendHorizonal } from 'lucide-react';
 import { useForm } from 'react-hook-form';
-import { useIntl } from 'react-intl';
 
 type InboxInputProps = {
   onSubmit: (value: string) => void;
@@ -30,7 +29,7 @@ export const InboxInput = (props: InboxInputProps) => {
     },
   });
   const { message } = form.watch();
-  const intl = useIntl();
+
   const submit = (values: ChatMessageFormSchema) => {
     const value = values?.message?.trim();
     if (value) {
@@ -65,7 +64,7 @@ export const InboxInput = (props: InboxInputProps) => {
                     isLoading={props.loading}
                     onChange={field.onChange}
                     onSubmit={form.handleSubmit(submit)}
-                    placeholder={intl.formatMessage({ id: 'tmwtd' })}
+                    placeholder="Tell me what to do"
                     value={field.value}
                   />
                 </FormItem>
diff --git a/apps/shinkai-visor/src/components/inbox/inbox.tsx b/apps/shinkai-visor/src/components/inbox/inbox.tsx
index 88f02258d..6a5280e48 100644
--- a/apps/shinkai-visor/src/components/inbox/inbox.tsx
+++ b/apps/shinkai-visor/src/components/inbox/inbox.tsx
@@ -1,4 +1,5 @@
 import { zodResolver } from '@hookform/resolvers/zod';
+import { useTranslation } from '@shinkai_network/shinkai-i18n';
 import {
   extractErrorPropertyOrContent,
   extractJobIdFromInbox,
@@ -38,7 +39,7 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from '@shinkai_network/shinkai-ui';
-import { fileIconMap,FileTypeIcon } from '@shinkai_network/shinkai-ui/assets';
+import { fileIconMap, FileTypeIcon } from '@shinkai_network/shinkai-ui/assets';
 import { getFileExt } from '@shinkai_network/shinkai-ui/helpers';
 import { cn } from '@shinkai_network/shinkai-ui/utils';
 import { partial } from 'filesize';
@@ -54,7 +55,6 @@ import {
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { useDropzone } from 'react-dropzone';
 import { useForm } from 'react-hook-form';
-import { FormattedMessage } from 'react-intl';
 import { useParams } from 'react-router-dom';
 import { toast } from 'sonner';
 
@@ -93,7 +93,7 @@ function AgentSelection() {
       <TooltipProvider delayDuration={0}>
         <Tooltip>
           <TooltipTrigger asChild>
-            <DropdownMenuTrigger className="bg-gray-350 inline-flex cursor-pointer items-center justify-between gap-1 truncate rounded-xl px-2.5 py-1.5 text-start text-xs font-normal text-gray-50  hover:text-white  [&[data-state=open]>.icon]:rotate-180">
+            <DropdownMenuTrigger className="bg-gray-350 inline-flex cursor-pointer items-center justify-between gap-1 truncate rounded-xl px-2.5 py-1.5 text-start text-xs font-normal text-gray-50 hover:text-white [&[data-state=open]>.icon]:rotate-180">
               <BotIcon className="mr-1 h-4 w-4" />
               <span>{currentInbox?.agent?.id}</span>
               <ChevronDownIcon className="icon h-3 w-3" />
@@ -156,6 +156,7 @@ function AgentSelection() {
 
 export const Inbox = () => {
   const size = partial({ standard: 'jedec' });
+  const { t } = useTranslation();
   const { inboxId: encodedInboxId = '' } = useParams<{ inboxId: string }>();
   const auth = useAuth((state) => state.auth);
   const inboxId = decodeURIComponent(encodedInboxId);
@@ -310,13 +311,11 @@ export const Inbox = () => {
         <Alert className="shadow-lg">
           <Terminal className="h-4 w-4" />
           <AlertTitle className="text-sm">
-            <FormattedMessage id="file-processing-alert-title" />
+            Your file is being processed
           </AlertTitle>
           <AlertDescription className="text-xs">
             <div className="flex flex-row items-center space-x-2">
-              <span>
-                <FormattedMessage id="file-processing-alert-description" />
-              </span>
+              <span>It can take a few minutes</span>
             </div>
           </AlertDescription>
           <Terminal className="h-4 w-4" />
@@ -326,11 +325,11 @@ export const Inbox = () => {
         <Alert className="shadow-lg" variant="destructive">
           <AlertCircle className="h-4 w-4" />
           <AlertTitle className="text-sm">
-            <FormattedMessage id="limit-reached" />
+            {t('chat.limitReachedTitle')}
           </AlertTitle>
           <AlertDescription className="text-gray-80 text-xs">
             <div className="flex flex-row items-center space-x-2">
-              <FormattedMessage id="limit-reached-description" />
+              {t('chat.limitReachedDescription')}
             </div>
           </AlertDescription>
         </Alert>
@@ -406,17 +405,17 @@ export const Inbox = () => {
                                 {getFileExt(file?.name) &&
                                 fileIconMap[getFileExt(file?.name)] ? (
                                   <FileTypeIcon
-                                    className="text-gray-80 h-7 w-7 shrink-0 "
+                                    className="text-gray-80 h-7 w-7 shrink-0"
                                     type={getFileExt(file?.name)}
                                   />
                                 ) : (
                                   <Paperclip className="text-gray-80 h-4 w-4 shrink-0" />
                                 )}
                                 <div className="space-y-1">
-                                  <span className="line-clamp-1 break-all text-left text-xs ">
+                                  <span className="line-clamp-1 break-all text-left text-xs">
                                     {file?.name}
                                   </span>
-                                  <span className="line-clamp-1 break-all text-left text-xs text-gray-100 ">
+                                  <span className="line-clamp-1 break-all text-left text-xs text-gray-100">
                                     {size(file?.size)}
                                   </span>
                                 </div>
diff --git a/apps/shinkai-visor/src/components/inboxes/inboxes.tsx b/apps/shinkai-visor/src/components/inboxes/inboxes.tsx
index 286f0c457..4108aaa63 100644
--- a/apps/shinkai-visor/src/components/inboxes/inboxes.tsx
+++ b/apps/shinkai-visor/src/components/inboxes/inboxes.tsx
@@ -1,3 +1,4 @@
+import { useTranslation } from '@shinkai_network/shinkai-i18n';
 import { useAgents } from '@shinkai_network/shinkai-node-state/lib/queries/getAgents/useGetAgents';
 import { useGetInboxes } from '@shinkai_network/shinkai-node-state/lib/queries/getInboxes/useGetInboxes';
 import {
@@ -19,7 +20,6 @@ import { ActiveIcon, ArchiveIcon } from '@shinkai_network/shinkai-ui/assets';
 // import { cn } from '@shinkai_network/shinkai-ui/utils';
 import { Plus } from 'lucide-react';
 import React, { useMemo, useRef } from 'react';
-// import { FormattedMessage } from 'react-intl';
 import { useNavigate } from 'react-router-dom';
 
 import { useAuth } from '../../store/auth/auth';
@@ -29,6 +29,8 @@ import { EmptyInboxes } from '../empty-inboxes/empty-inboxes';
 import { ActiveInboxItem, ArchiveInboxItem } from './inbox-item';
 
 export const Inboxes = () => {
+  const { t } = useTranslation();
+
   const navigate = useNavigate();
   const auth = useAuth((state) => state.auth);
   const dialContainerRef = useRef<HTMLDivElement>(null);
@@ -140,14 +142,14 @@ export const Inboxes = () => {
                   value="actives"
                 >
                   <ActiveIcon className="h-4 w-4" />
-                  Active
+                  {t('chat.actives.label')}
                 </TabsTrigger>
                 <TabsTrigger
                   className="flex items-center gap-1.5"
                   value="archives"
                 >
                   <ArchiveIcon className="h-4 w-4" />
-                  Archived
+                  {t('chat.archives.label')}
                 </TabsTrigger>
               </TabsList>
               <TabsContent value="actives">
@@ -158,7 +160,7 @@ export const Inboxes = () => {
                     ))
                   ) : (
                     <p className="py-5 text-center">
-                      No actives conversations found.{' '}
+                      {t('chat.actives.notFound')}{' '}
                     </p>
                   )}
                 </div>
@@ -171,7 +173,7 @@ export const Inboxes = () => {
                     ))
                   ) : (
                     <p className="py-5 text-center">
-                      No archived conversations found.{' '}
+                      {t('chat.archives.notFound')}{' '}
                     </p>
                   )}
                 </div>
diff --git a/apps/shinkai-visor/src/components/installed-popup copy/installed-popup.tsx b/apps/shinkai-visor/src/components/installed-popup copy/installed-popup.tsx
index aa5640b53..9bd194e6b 100644
--- a/apps/shinkai-visor/src/components/installed-popup copy/installed-popup.tsx	
+++ b/apps/shinkai-visor/src/components/installed-popup copy/installed-popup.tsx	
@@ -3,12 +3,10 @@ import '../../theme/styles.css';
 import { Player } from '@lottiefiles/react-lottie-player';
 import * as React from 'react';
 import { createRoot } from 'react-dom/client';
-import { FormattedMessage, IntlProvider } from 'react-intl';
 
 import InstalledPopupAnimation from '../../assets/animations/installed-popup.json';
 import logo from '../../assets/icons/visor.svg';
 import { srcUrlResolver } from '../../helpers/src-url-resolver';
-import { langMessages, locale } from '../../lang/intl';
 
 const InstalledPopup = () => {
   return (
@@ -32,7 +30,8 @@ const InstalledPopup = () => {
         </div>
 
         <p className="text-md text-center text-white" data-cy="welcome-message">
-          <FormattedMessage id="installed-sucessfully" />
+          Shinkai Visor was installed successfully, navigate to a website and
+          use the action button to start asking Shinkai AI
         </p>
       </div>
     </div>
@@ -45,10 +44,8 @@ if (!container) {
 const root = createRoot(container);
 root.render(
   <React.StrictMode>
-    <IntlProvider locale={locale} messages={langMessages}>
-      <div className="font-inter h-full w-full overflow-hidden bg-gray-500 p-3 shadow-xl">
-        <InstalledPopup />
-      </div>
-    </IntlProvider>
+    <div className="font-inter h-full w-full overflow-hidden bg-gray-500 p-3 shadow-xl">
+      <InstalledPopup />
+    </div>
   </React.StrictMode>,
 );
diff --git a/apps/shinkai-visor/src/components/installed-popup/installed-popup.tsx b/apps/shinkai-visor/src/components/installed-popup/installed-popup.tsx
index ab61e5ac9..2b24cf281 100644
--- a/apps/shinkai-visor/src/components/installed-popup/installed-popup.tsx
+++ b/apps/shinkai-visor/src/components/installed-popup/installed-popup.tsx
@@ -3,12 +3,10 @@ import '../../theme/styles.css';
 import { Player } from '@lottiefiles/react-lottie-player';
 import * as React from 'react';
 import { createRoot } from 'react-dom/client';
-import { FormattedMessage, IntlProvider } from 'react-intl';
 
 import logo from '../../../src/assets/icons/visor.svg';
 import InstalledPopupAnimation from '../../assets/animations/installed-popup.json';
 import { srcUrlResolver } from '../../helpers/src-url-resolver';
-import { langMessages, locale } from '../../lang/intl';
 
 const InstalledPopup = () => {
   return (
@@ -32,7 +30,8 @@ const InstalledPopup = () => {
         </div>
 
         <p className="text-md text-center text-white" data-cy="welcome-message">
-          <FormattedMessage id="installed-sucessfully" />
+          Shinkai Visor was installed successfully, navigate to a website and
+          use the action button to start asking Shinkai AI
         </p>
       </div>
     </div>
@@ -45,10 +44,8 @@ if (!container) {
 const root = createRoot(container);
 root.render(
   <React.StrictMode>
-    <IntlProvider locale={locale} messages={langMessages}>
-      <div className="font-inter h-full w-full overflow-hidden bg-gray-500 p-3 shadow-xl">
-        <InstalledPopup />
-      </div>
-    </IntlProvider>
+    <div className="font-inter h-full w-full overflow-hidden bg-gray-500 p-3 shadow-xl">
+      <InstalledPopup />
+    </div>
   </React.StrictMode>,
 );
diff --git a/apps/shinkai-visor/src/components/nav/nav.tsx b/apps/shinkai-visor/src/components/nav/nav.tsx
index 6917e852c..b1ce71023 100644
--- a/apps/shinkai-visor/src/components/nav/nav.tsx
+++ b/apps/shinkai-visor/src/components/nav/nav.tsx
@@ -1,3 +1,4 @@
+import { useTranslation } from '@shinkai_network/shinkai-i18n';
 import { useArchiveJob } from '@shinkai_network/shinkai-node-state/lib/mutations/archiveJob/useArchiveJob';
 import {
   AlertDialog,
@@ -47,7 +48,6 @@ import {
 import { cn } from '@shinkai_network/shinkai-ui/utils';
 import { ArrowLeft, Menu, Settings, X, XIcon } from 'lucide-react';
 import React, { ReactNode, useState } from 'react';
-import { FormattedMessage } from 'react-intl';
 import { Link, useLocation, useNavigate } from 'react-router-dom';
 import { toast } from 'sonner';
 
@@ -84,15 +84,15 @@ const routeTitleDescriptionMapping: Record<
   string,
   { title: ReactNode; description?: ReactNode }
 > = {
-  [routes.CreateJob]: { title: <FormattedMessage id="create-job" /> },
-  [routes.CreateInbox]: { title: <FormattedMessage id="create-inbox" /> },
-  [routes.Inboxes]: { title: <FormattedMessage id="inbox.other" /> },
+  [routes.CreateJob]: { title: 'Create AI Chat' },
+  [routes.CreateInbox]: { title: 'Create DM Chat' },
+  [routes.Inboxes]: { title: 'Chats' },
   [routes.VectorFs]: { title: 'My AI Files Explorer' },
   [routes.Subscriptions]: { title: 'My Subscriptions' },
   [routes.PublicFolders]: { title: 'Browse Public Subscriptions' },
-  [routes.Settings]: { title: <FormattedMessage id="setting.other" /> },
-  [routes.Agents]: { title: <FormattedMessage id="agent.other" /> },
-  [routes.AddAgent]: { title: <FormattedMessage id="add-agent" /> },
+  [routes.Settings]: { title: 'Settings' },
+  [routes.Agents]: { title: 'AIs' },
+  [routes.AddAgent]: { title: 'Add AI' },
   [routes.PublicKeys]: { title: 'Public Keys' },
 };
 
@@ -251,7 +251,7 @@ const ArchiveJobButton = () => {
             className={cn(
               'absolute right-10 shrink-0 bg-inherit hover:bg-gray-400',
               currentInbox?.is_finished &&
-                'text-gray-80 hover:bg-inherit hover:text-white ',
+                'text-gray-80 hover:bg-inherit hover:text-white',
             )}
             disabled={currentInbox?.is_finished}
             onClick={handleArchiveJob}
@@ -277,6 +277,7 @@ const ArchiveJobButton = () => {
 
 export default function NavBar() {
   const navigate = useNavigate();
+  const { t } = useTranslation();
   const location = useLocation();
   const setLastPage = useSettings((state) => state.setLastPage);
 
@@ -424,14 +425,12 @@ export default function NavBar() {
       <AlertDialog open={isConfirmLogoutDialogOpened}>
         <AlertDialogContent className="w-[75%]">
           <AlertDialogHeader>
-            <AlertDialogTitle>
-              <FormattedMessage id="are-you-sure" />
-            </AlertDialogTitle>
+            <AlertDialogTitle>{t('disconnect.modalTitle')}</AlertDialogTitle>
             <AlertDialogDescription>
               <div className="flex flex-col space-y-3 text-left text-white/70">
-                <div className="flex flex-col space-y-1 ">
+                <div className="flex flex-col space-y-1">
                   <span className="text-sm">
-                    <FormattedMessage id="permanently-lose-connection" />
+                    {t('disconnect.modalDescription')}
                   </span>
                 </div>
                 <div className="text-sm">
@@ -452,10 +451,10 @@ export default function NavBar() {
               className="mt-0 flex-1"
               onClick={() => setIsConfirmLogoutDialogOpened(false)}
             >
-              <FormattedMessage id="cancel" />
+              {t('common.cancel')}
             </AlertDialogCancel>
             <AlertDialogAction className="flex-1" onClick={() => logout()}>
-              <FormattedMessage id="continue" />
+              {t('common.continue')}
             </AlertDialogAction>
           </AlertDialogFooter>
         </AlertDialogContent>
@@ -495,31 +494,27 @@ export default function NavBar() {
                 sideOffset={10}
               >
                 <DropdownMenuLabel>
-                  <FormattedMessage id="inbox.other" />
+                  {t('layout.menuItems.chats')}
                 </DropdownMenuLabel>
                 <DropdownMenuItem
                   onClick={() => onClickMenuOption(MenuOption.Inboxes)}
                 >
                   <InboxIcon className="mr-2 h-4 w-4" />
-                  <span>
-                    <FormattedMessage id="inbox.other" />
-                  </span>
+                  <span>{t('layout.menuItems.chats')}</span>
                 </DropdownMenuItem>
                 <DropdownMenuItem
                   data-testid="nav-menu-create-job-button"
                   onClick={() => onClickMenuOption(MenuOption.CreateJob)}
                 >
                   <JobBubbleIcon className="mr-2 h-4 w-4" />
-                  <span>
-                    <FormattedMessage id="create-job" />
-                  </span>
+                  <span>{t('chat.create')}</span>
                 </DropdownMenuItem>
                 <DropdownMenuItem
                   disabled={true}
                   onClick={() => onClickMenuOption(MenuOption.CreateAITask)}
                 >
                   <AiTasksIcon className="mr-2 h-4 w-4" />
-                  <span className="mr-3">AI Tasks</span>
+                  <span className="mr-3">{t('layout.menuItems.aiTasks')}</span>
                   <Badge className="text-[10px]" variant="inputAdornment">
                     SOON
                   </Badge>
@@ -541,67 +536,55 @@ export default function NavBar() {
                   onClick={() => onClickMenuOption(MenuOption.NodeFiles)}
                 >
                   <FilesIcon className="mr-2 h-4 w-4" />
-                  <span>My AI Files Explorer</span>
+                  <span>{t('layout.menuItems.vectorFs')}</span>
                 </DropdownMenuItem>
                 <DropdownMenuItem
                   onClick={() => onClickMenuOption(MenuOption.SearchNodeFiles)}
                 >
                   <AISearchContentIcon className="mr-2 h-4 w-4" />
-                  <span>AI Files Content Search</span>
+                  <span>{t('layout.menuItems.vectorSearch')}</span>
                 </DropdownMenuItem>
                 <DropdownMenuLabel>Subscriptions</DropdownMenuLabel>
                 <DropdownMenuItem
                   onClick={() => onClickMenuOption(MenuOption.PublicItems)}
                 >
                   <BrowseSubscriptionIcon className="mr-2 h-4 w-4" />
-                  <span>Browse Public Subscriptions</span>
+                  <span>{t('layout.menuItems.subscriptions')}</span>
                 </DropdownMenuItem>
                 <DropdownMenuItem
                   onClick={() => onClickMenuOption(MenuOption.MySubscriptions)}
                 >
                   <MySubscriptionsIcon className="mr-2 h-4 w-4" />
-                  <span>My Subscriptions</span>
+                  <span>{t('layout.menuItems.mySubscriptions')}</span>
                 </DropdownMenuItem>
 
-                <DropdownMenuLabel>
-                  <FormattedMessage id="agent.other" />
-                </DropdownMenuLabel>
+                <DropdownMenuLabel>AIs</DropdownMenuLabel>
                 <DropdownMenuItem
                   data-testid="nav-menu-agents-button"
                   onClick={() => onClickMenuOption(MenuOption.Agents)}
                 >
                   <AgentIcon className="mr-2 h-4 w-4" />
-                  <span>
-                    <FormattedMessage id="agent.other" />
-                  </span>
+                  <span>AIs</span>
                 </DropdownMenuItem>
                 <DropdownMenuItem
                   data-testid="nav-menu-add-agent-button"
                   onClick={() => onClickMenuOption(MenuOption.AddAgent)}
                 >
                   <AddAgentIcon className="mr-2 h-4 w-4" />
-                  <span>
-                    <FormattedMessage id="add-agent" />
-                  </span>
+                  <span>Add AI</span>
                 </DropdownMenuItem>
-                <DropdownMenuLabel>
-                  <FormattedMessage id="account.one" />
-                </DropdownMenuLabel>
+                <DropdownMenuLabel>Account</DropdownMenuLabel>
                 <DropdownMenuItem
                   onClick={() => onClickMenuOption(MenuOption.Settings)}
                 >
                   <Settings className="mr-2 h-4 w-4" />
-                  <span>
-                    <FormattedMessage id="setting.other" />
-                  </span>
+                  <span>{t('layout.menuItems.settings')}</span>
                 </DropdownMenuItem>
                 <DropdownMenuItem
                   onClick={() => onClickMenuOption(MenuOption.Logout)}
                 >
                   <DisconnectIcon className="mr-2 h-4 w-4" />
-                  <span>
-                    <FormattedMessage id="disconnect" />
-                  </span>
+                  <span>{t('layout.menuItems.disconnect')}</span>
                 </DropdownMenuItem>
               </DropdownMenuContent>
             </DropdownMenu>
diff --git a/apps/shinkai-visor/src/components/node-files/vector-fs-general-options.tsx b/apps/shinkai-visor/src/components/node-files/vector-fs-general-options.tsx
index d4fc1e17f..e85e7f82d 100644
--- a/apps/shinkai-visor/src/components/node-files/vector-fs-general-options.tsx
+++ b/apps/shinkai-visor/src/components/node-files/vector-fs-general-options.tsx
@@ -1,4 +1,5 @@
 import { zodResolver } from '@hookform/resolvers/zod';
+import { useTranslation } from '@shinkai_network/shinkai-i18n';
 import {
   CreateFolderFormSchema,
   createFolderFormSchema,
@@ -30,7 +31,6 @@ import {
 } from '@shinkai_network/shinkai-ui/assets';
 import React, { useEffect } from 'react';
 import { useForm } from 'react-hook-form';
-import { FormattedMessage } from 'react-intl';
 import { useLocation } from 'react-router-dom';
 import { toast } from 'sonner';
 
@@ -140,6 +140,7 @@ export const AddNewFolderAction = () => {
 };
 
 export const UploadVRFilesAction = () => {
+  const { t } = useTranslation();
   const auth = useAuth((state) => state.auth);
   const closeDrawerMenu = useVectorFsStore((state) => state.closeDrawerMenu);
   const currentGlobalPath = useVectorFsStore(
@@ -210,9 +211,7 @@ export const UploadVRFilesAction = () => {
             name="files"
             render={({ field }) => (
               <FormItem className="mt-3">
-                <FormLabel className="sr-only">
-                  <FormattedMessage id="file.one" />
-                </FormLabel>
+                <FormLabel className="sr-only">{t('common.file')}</FormLabel>
                 <FormControl>
                   <div className="flex flex-col space-y-1">
                     <div className="flex items-center justify-center">
diff --git a/apps/shinkai-visor/src/components/popup/popup.tsx b/apps/shinkai-visor/src/components/popup/popup.tsx
index 4a3572e29..46914a867 100644
--- a/apps/shinkai-visor/src/components/popup/popup.tsx
+++ b/apps/shinkai-visor/src/components/popup/popup.tsx
@@ -7,12 +7,10 @@ import { PrimeReactProvider } from 'primereact/api';
 import * as React from 'react';
 import { useEffect } from 'react';
 import { createRoot } from 'react-dom/client';
-import { IntlProvider } from 'react-intl';
 import { MemoryRouter as Router } from 'react-router-dom';
 import { Route, Routes, useLocation, useNavigate } from 'react-router-dom';
 
 import { useGlobalPopupChromeMessage } from '../../hooks/use-global-popup-chrome-message';
-import { langMessages, locale } from '../../lang/intl';
 import { useAuth } from '../../store/auth/auth';
 import { useSettings } from '../../store/settings/settings';
 import { AddAgent } from '../agents/add-agent';
@@ -170,14 +168,12 @@ root.render(
   <React.StrictMode>
     <PrimeReactProvider>
       <QueryProvider>
-        <IntlProvider locale={locale} messages={langMessages}>
-          <div className="font-inter h-full w-full">
-            <Router>
-              <Popup />
-            </Router>
-          </div>
-          <Toaster />
-        </IntlProvider>
+        <div className="font-inter h-full w-full">
+          <Router>
+            <Popup />
+          </Router>
+        </div>
+        <Toaster />
       </QueryProvider>
     </PrimeReactProvider>
   </React.StrictMode>,
diff --git a/apps/shinkai-visor/src/components/settings/settings.tsx b/apps/shinkai-visor/src/components/settings/settings.tsx
index 9c7673c1b..c9283dfda 100644
--- a/apps/shinkai-visor/src/components/settings/settings.tsx
+++ b/apps/shinkai-visor/src/components/settings/settings.tsx
@@ -1,4 +1,5 @@
 import { zodResolver } from '@hookform/resolvers/zod';
+import { useTranslation } from '@shinkai_network/shinkai-i18n';
 import { isShinkaiIdentityLocalhost } from '@shinkai_network/shinkai-message-ts/utils';
 import { useUpdateNodeName } from '@shinkai_network/shinkai-node-state/lib/mutations/updateNodeName/useUpdateNodeName';
 import { useAgents } from '@shinkai_network/shinkai-node-state/lib/queries/getAgents/useGetAgents';
@@ -27,7 +28,6 @@ import { motion } from 'framer-motion';
 import { ExternalLinkIcon, TrashIcon } from 'lucide-react';
 import { useEffect } from 'react';
 import { useForm, useWatch } from 'react-hook-form';
-import { FormattedMessage, useIntl } from 'react-intl';
 import { useNavigate } from 'react-router-dom';
 import { toast } from 'sonner';
 import { z } from 'zod';
@@ -62,7 +62,7 @@ const formSchema = z.object({
 type FormSchemaType = z.infer<typeof formSchema>;
 const MotionButton = motion(Button);
 export const Settings = () => {
-  const intl = useIntl();
+  const { t } = useTranslation();
   const navigate = useNavigate();
   const auth = useAuth((authStore) => authStore.auth);
   const setAuth = useAuth((authStore) => authStore.setAuth);
@@ -162,15 +162,13 @@ export const Settings = () => {
   const { mutateAsync: updateNodeName, isPending: isUpdateNodeNamePending } =
     useUpdateNodeName({
       onSuccess: () => {
-        toast.success(
-          intl.formatMessage({ id: 'shinkai-identity-updated-successfully' }),
-        );
+        toast.success(t('settings.shinkaiIdentity.updatedIdentity'));
         if (!auth) return;
         const isHostingShinkaiNode = auth?.node_address.includes(
           'hosting.shinkai.com',
         );
         if (!isHostingShinkaiNode) {
-          toast.info(intl.formatMessage({ id: 'restart-your-shinkai-node' }));
+          toast.info(t('shinkaiNode.restartNode'));
         }
         const newAuth: SetupData = { ...auth };
         setAuth({
@@ -254,9 +252,7 @@ export const Settings = () => {
                     <SelectValue />
                   </SelectTrigger>
                 </FormControl>
-                <FormLabel>
-                  <FormattedMessage id="default-agent" />
-                </FormLabel>
+                <FormLabel>{t('settings.defaultAgent')}</FormLabel>
                 <SelectContent>
                   {agents?.map((agent) => (
                     <SelectItem key={agent.id} value={agent.id}>
@@ -274,10 +270,7 @@ export const Settings = () => {
               disabled
               name="nodeAddress"
               render={({ field }) => (
-                <TextField
-                  field={field}
-                  label={<FormattedMessage id="node-address" />}
-                />
+                <TextField field={field} label={t('shinkaiNode.nodeAddress')} />
               )}
             />
             <FormField
@@ -334,7 +327,7 @@ export const Settings = () => {
                       <ExternalLinkIcon className="h-4 w-4" />
                     </span>
                   }
-                  label={<FormattedMessage id="shinkai-identity" />}
+                  label={t('settings.shinkaiIdentity.label')}
                 />
               )}
             />
@@ -348,7 +341,7 @@ export const Settings = () => {
                   size="auto"
                   type="button"
                 >
-                  <FormattedMessage id="save" />
+                  {t('common.save')}
                 </MotionButton>
                 <Button
                   className="h-10 min-w-10 rounded-lg text-sm"
@@ -361,7 +354,7 @@ export const Settings = () => {
                   type="button"
                   variant="outline"
                 >
-                  <FormattedMessage id="cancel" />
+                  {t('common.cancel')}
                 </Button>
               </div>
             )}
@@ -370,10 +363,7 @@ export const Settings = () => {
               disabled
               name="nodeVersion"
               render={({ field }) => (
-                <TextField
-                  field={field}
-                  label={<FormattedMessage id="node-version" />}
-                />
+                <TextField field={field} label={t('shinkaiNode.nodeVersion')} />
               )}
             />
             <h2 className="pt-4 text-lg font-medium">Sidebar</h2>
@@ -396,10 +386,10 @@ export const Settings = () => {
                           className="static space-y-1.5 text-sm text-white"
                           htmlFor="displayActionButton"
                         >
-                          <FormattedMessage id="show-action-button-label" />
+                          {t('settings.quickAccessButton.label')}
                         </FormLabel>
                         <FormDescription>
-                          <FormattedMessage id="show-action-button-description" />
+                          {t('settings.quickAccessButton.description')}
                         </FormDescription>
                       </div>
                     </FormItem>
@@ -519,10 +509,8 @@ export const Settings = () => {
                       form.setValue('shortcutSidebar', keyInfo);
                     },
                   }}
-                  helperMessage={
-                    <FormattedMessage id="shortcut-key-description" />
-                  }
-                  label={<FormattedMessage id="shortcut-key" />}
+                  helperMessage={t('settings.shortcutKey.description')}
+                  label={t('settings.shortcutKey.label')}
                 />
               )}
             />
@@ -536,7 +524,7 @@ export const Settings = () => {
                   }}
                   type="button"
                 >
-                  <FormattedMessage id="save" />
+                  {t('common.save')}
                 </Button>
                 <Button
                   className="h-10 w-10 rounded-lg text-sm"
@@ -546,7 +534,7 @@ export const Settings = () => {
                   type="button"
                   variant="outline"
                 >
-                  <FormattedMessage id="cancel" />
+                  {t('common.cancel')}
                 </Button>
               </div>
             ) : null}
@@ -561,7 +549,7 @@ export const Settings = () => {
           >
             <ExportIcon />
             <p className="text-smm text-white">
-              <FormattedMessage id="export-connection" />
+              {t('settings.exportConnection.label')}
             </p>
           </Button>
           <Button
@@ -574,7 +562,7 @@ export const Settings = () => {
               <QrIcon />
             </div>
             <p className="text-smm text-white">
-              <FormattedMessage id="create-registration-code" />
+              {t('settings.registerNewCode.label')}
             </p>
           </Button>
           <Button
diff --git a/apps/shinkai-visor/src/components/setup/setup.tsx b/apps/shinkai-visor/src/components/setup/setup.tsx
index 5468c9112..da6cdce2a 100644
--- a/apps/shinkai-visor/src/components/setup/setup.tsx
+++ b/apps/shinkai-visor/src/components/setup/setup.tsx
@@ -5,13 +5,11 @@ import { CornerRightUp } from 'lucide-react';
 import * as React from 'react';
 import { useEffect } from 'react';
 import { createRoot } from 'react-dom/client';
-import { IntlProvider } from 'react-intl';
 import { MemoryRouter as Router } from 'react-router-dom';
 
 import visorLogo from '../../assets/icons/visor.svg';
 import coverImage from '../../assets/images/setup-cover.png';
 import { srcUrlResolver } from '../../helpers/src-url-resolver';
-import { langMessages, locale } from '../../lang/intl';
 import { sendMessage } from '../../service-worker/communication/internal';
 import { ServiceWorkerInternalMessageType } from '../../service-worker/communication/internal/types';
 
@@ -34,7 +32,7 @@ const SetupStepOne = ({
 
   return (
     <div className="flex h-full items-center justify-center">
-      <div className="absolute right-[70px] top-10 flex flex-col items-center gap-6 ">
+      <div className="absolute right-[70px] top-10 flex flex-col items-center gap-6">
         <CornerRightUp />
         <div className="flex gap-2 font-semibold">
           <span>Click</span>
@@ -48,7 +46,7 @@ const SetupStepOne = ({
         </div>
       </div>
 
-      <div className=" flex h-[532px] w-[506px] flex-col items-center justify-between rounded-2xl bg-gray-400 px-6 py-7">
+      <div className="flex h-[532px] w-[506px] flex-col items-center justify-between rounded-2xl bg-gray-400 px-6 py-7">
         <img
           alt="shinkai-app-logo"
           className="w-[90px] self-start"
@@ -146,12 +144,10 @@ if (!container) {
 const root = createRoot(container);
 root.render(
   <React.StrictMode>
-    <IntlProvider locale={locale} messages={langMessages}>
-      <div className="font-inter h-full w-full">
-        <Router>
-          <Setup />
-        </Router>
-      </div>
-    </IntlProvider>
+    <div className="font-inter h-full w-full">
+      <Router>
+        <Setup />
+      </Router>
+    </div>
   </React.StrictMode>,
 );
diff --git a/apps/shinkai-visor/src/components/welcome/welcome.tsx b/apps/shinkai-visor/src/components/welcome/welcome.tsx
index 001bcf6c2..fa28861e1 100644
--- a/apps/shinkai-visor/src/components/welcome/welcome.tsx
+++ b/apps/shinkai-visor/src/components/welcome/welcome.tsx
@@ -1,6 +1,6 @@
+import { useTranslation } from '@shinkai_network/shinkai-i18n';
 import { Button, Checkbox } from '@shinkai_network/shinkai-ui';
 import { useState } from 'react';
-import { FormattedMessage } from 'react-intl';
 import { useNavigate } from 'react-router-dom';
 
 import logo from '../../../src/assets/icons/visor.svg';
@@ -8,6 +8,7 @@ import { srcUrlResolver } from '../../helpers/src-url-resolver';
 
 export default function Welcome() {
   const navigate = useNavigate();
+  const { t } = useTranslation();
   const [acceptedTermsAndContidions, setAcceptedTermsAndContidions] = useState<
     boolean | 'indeterminate'
   >(false);
@@ -31,7 +32,7 @@ export default function Welcome() {
           />
         </div>
         <p className="text-2xl font-semibold" data-cy="welcome-message">
-          <FormattedMessage id="welcome" />
+          {t('extension.welcome')}
         </p>
       </div>
       <div className="flex items-start space-x-2">
@@ -75,7 +76,7 @@ export default function Welcome() {
         disabled={!acceptedTermsAndContidions}
         onClick={() => navigate('/nodes/connect/method/quick-start')}
       >
-        <FormattedMessage id="setup" />
+        {t('common.getStarted')}
       </Button>
     </div>
   );
diff --git a/apps/shinkai-visor/src/lang/en.json b/apps/shinkai-visor/src/lang/en.json
deleted file mode 100644
index 96e4e2d26..000000000
--- a/apps/shinkai-visor/src/lang/en.json
+++ /dev/null
@@ -1,116 +0,0 @@
-{
-  "app-name": "Shinkai Visor",
-  "welcome": "Transform your web browsing experience using AI with Shinkai Visor ✨",
-  "setup": "Get started",
-  "inbox.one": "Chat",
-  "inbox.other": "Chats",
-  "setting.one": "Setting",
-  "setting.other": "Settings",
-  "about": "About Shinkai",
-  "add-node": "Add Node",
-  "advanced-options": "Advanced options",
-  "registration-code": "Registration Code",
-  "registration-name": "Device Nickname",
-  "node-address": "Node Address",
-  "node-version": "Node Version",
-  "shinkai-identity": "Shinkai Identity",
-  "node-encryption-public-key": "Node Encryption Public Key",
-  "node-signature-public-key": "Node Signature Public Key",
-  "profile-encryption-public-key": "Profile Encryption Public Key",
-  "profile-signature-public-key": "Profile Signature Public Key",
-  "my-encryption-public-key": "My Encryption Public Key",
-  "my-signature-public-key": "My Signature Public Key",
-  "upload-qr-code": "Upload QR Code",
-  "connect": "Connect",
-  "use-qr-code": "Use a QR code to fill these fields",
-  "connect-manually": "Do not have a QR Code? Connect manually",
-  "scan": "Scan",
-  "review": "Review",
-  "disconnect": "Disconnect",
-  "message-receiver": "Message receiver",
-  "message.one": "Message",
-  "message.other": "Messages",
-  "create-inbox": "Create DM Chat",
-  "send": "Send",
-  "agent.one": "AI",
-  "agent.other": "AIs",
-  "agent-name": "AI name",
-  "external-url": "External URL",
-  "api-key": "API Key",
-  "add-agent": "Add AI",
-  "model.one": "Model",
-  "model.other": "Models",
-  "openai": "OpenAI",
-  "tmwtd": "Tell me what to do",
-  "create-job": "Create AI Chat",
-  "menu": "Menu",
-  "account.one": "Account",
-  "account.other": "Accounts",
-  "all-messages-loaded": "All previous messages have been loaded ✅",
-  "empty-inboxes-title": "Ask Shinkai AI",
-  "empty-inboxes-message": "Create your first AI Chat. Try \"How to make a HTTP request in Javascript\" or \"Give me the top 10 rock music in the 80s\"",
-  "empty-agents-title": "Ask Shinkai AI",
-  "empty-agents-message": "Connect your first agent to start asking Shinkai AI. Try connecting OpenAI",
-  "today": "Today",
-  "yesterday": "Yesterday",
-  "installed-sucessfully": "Shinkai Visor was installed sucessfully, navigate to a website and use the action button to start asking Shinkai AI",
-  "file-processing-alert-title": "Your file is being processed",
-  "file-processing-alert-description": "It can take a few minutes",
-  "export-connection": "Export connection",
-  "generate-connection-file": "Generate connection file",
-  "passphrase": "Passphrase",
-  "confirm-passphrase": "Confirm passphrase",
-  "download": "Download",
-  "download-keep-safe-place": "Download and keep this connection file in a safe place",
-  "use-it-to-restore": "Use it with your passphrase to restore the connection to your Shinkai Node",
-  "passphrases-dont-match": "Passphrases don't match",
-  "connect-your-shinkai-node": "Connect your Shinkai Node",
-  "select-connection-method": "Select a method to connect your Shinkai Node",
-  "quick-connection-connection-method-title": "Quick connection ⚡",
-  "quick-connection-connection-method-description": "Use address to connect for first time",
-  "qr-code-connection-connection-method-title": "QR Code",
-  "qr-code-connection-connection-method-description": "Use a QR code to connect",
-  "restore-connection-connection-method-title": "Restore",
-  "restore-connection-connection-method-description": "Use a connection file and passphrase",
-  "encrypted-connection": "Encrypted connection",
-  "click-to-upload": "Click to upload or drag and drop",
-  "restore-connection": "Restore connection",
-  "did-you-connected-before": "Do you have experience using shinkai?",
-  "cancel": "Cancel",
-  "continue": "Continue",
-  "are-you-sure": "Disconnect Shinkai Visor",
-  "permanently-lose-connection": "Are you sure you want to disconnect? You will be unable to access your Shinkai node without re-connecting again.",
-  "action-cant-be-undone": "This action cannot be undone",
-  "file.one": "File",
-  "file.other": "Files",
-  "save": "Save",
-  "name.one": "Name",
-  "edit": "Edit",
-  "togethercomputer": "Together AI",
-  "alphanumeric_with_underscore": "It just accepts alphanumeric characters and underscores",
-  "default-agent": "Default agent",
-  "create-registration-code": "Register new device",
-  "profile.one": "Profile",
-  "profile.other": "Profiles",
-  "device.one": "Device",
-  "device.other": "Devices",
-  "generate-registration-code": "Generate registration code",
-  "permission-type": "Permission type",
-  "admin": "Admin",
-  "standard": "Standard",
-  "none": "None",
-  "scan-or-download-registration-code": "Here's your QR Code",
-  "use-it-to-register-and-connect": "Scan the QR code with your Shinkai app or download it to register",
-  "identity-type": "Identity type",
-  "disconnect-warning-link": "Export your connection",
-  "disconnect-warning-link-description": "If you want to use it later",
-  "show-action-button-label": "Show Shinkai Quick Access Button",
-  "show-action-button-description": "The Quick Access Button can be moved by clicking and holding.",
-  "shortcut-key": "Shortcut Key",
-  "shortcut-key-description": "Modify the shortcut key to launch sidebar",
-  "limit-reached": "Limit Reached",
-  "limit-reached-description": "You've used all of your queries for this agent. Please start a new chat with another agent.",
-  "ollama": "Ollama",
-  "shinkai-identity-updated-successfully": "Shinkai Identity updated successfully.",
-  "restart-your-shinkai-node": "Please restart your Shinkai Node."
-}
diff --git a/apps/shinkai-visor/src/lang/es.json b/apps/shinkai-visor/src/lang/es.json
deleted file mode 100644
index 7390ef458..000000000
--- a/apps/shinkai-visor/src/lang/es.json
+++ /dev/null
@@ -1,114 +0,0 @@
-{
-  "app-name": "Shinkai Visor",
-  "app-description": "Transforma tu experiencia de navegación web usando AI con Shinkai Visor",
-  "setup": "Configurar",
-  "inbox.one": "Chat",
-  "inbox.other": "Conversaciones",
-  "setting.one": "Configuración",
-  "setting.other": "Configuraciones",
-  "about": "Acerca de Shinkai",
-  "add-node": "Conectar nodo",
-  "registration-code": "Código de registro",
-  "registration-name": "Apodo del dispositivo",
-  "node-address": "Dirección del nodo",
-  "shinkai-identity": "Shinkai Identity",
-  "node-encryption-public-key": "Clave pública de encriptación del nodo",
-  "node-signature-public-key": "Clave pública de cifrado del nodo",
-  "profile-encryption-public-key": "Clave pública de cifrado de perfil",
-  "profile-signature-public-key": "Clave pública de firma de perfil",
-  "my-encryption-public-key": "Mi clave pública de cifrado",
-  "my-signature-public-key": "Mi clave pública de firma",
-  "upload-qr-code": "Subir código QR",
-  "connect": "Conectar",
-  "use-qr-code": "Usa un código QR para llenar estos campos",
-  "connect-manually": "¿No tienes un código QR? Conectar manualmente",
-  "scan": "Escanear",
-  "review": "Revisar",
-  "disconnect": "Desconectar",
-  "message-receiver": "Message receiver",
-  "message.one": "Mensaje",
-  "message.other": "Mensajes",
-  "create-inbox": "Crear MD Chat",
-  "send": "Enviar",
-  "agent.one": "Agente",
-  "agent.other": "Agentes",
-  "agent-name": "Nombre del agente",
-  "external-url": "URL externa",
-  "api-key": "API Key",
-  "add-agent": "Añadir agente",
-  "model.one": "Modelo",
-  "model.other": "Modelos",
-  "openai": "OpenAI",
-  "tmwtd": "Dime qué hacer",
-  "create-job": "Crear IA Chat",
-  "menu": "Menu",
-  "account.one": "Cuenta",
-  "account.other": "Cuentas",
-  "all-messages-loaded": "Todos los mensajes fueron descargados ✅",
-  "empty-inboxes-title": "Pregunta a Shinkai AI",
-  "empty-inboxes-message": "Crea tu primer IA Chat. Intenta \"Cómo hacer una solicitud HTTP en Javascript\" o \"Dame las 10 mejores canciones de rock de los 80s\"",
-  "empty-agents-title": "Pregunta a Shinkai AI",
-  "empty-agents-message": "Conecta tu primer agente para comenzar a preguntar a Shinkai AI",
-  "today": "Hoy",
-  "yesterday": "Ayer",
-  "installed-sucessfully": "Shinkai Visor se instaló correctamente, navega a un sitio web y usa el botón de acción para comenzar a preguntar a Shinkai AI",
-  "file-processing-alert-title": "Tu archivo está siendo procesado",
-  "file-processing-alert-description": "Puede tardar unos minutos",
-  "export-connection": "Exportar conexión",
-  "generate-connection-file": "Generar archivo de conexión",
-  "passphrase": "Frase de contraseña",
-  "confirm-passphrase": "Confirmar frase de contraseña",
-  "download": "Descargar",
-  "download-keep-safe-place": "Descarga y guarda este archivo de conexión en un lugar seguro",
-  "use-it-to-restore": "Úsalo con tu frase de contraseña para restaurar la conexión a tu Nodo Shinkai",
-  "passphrases-dont-match": "Las frases de contraseña no coinciden",
-  "connect-your-shinkai-node": "Conecta tu Nodo Shinkai",
-  "select-connection-method": "Selecciona un método para conectar tu Nodo Shinkai",
-  "quick-connection-connection-method-title": "Conexión rápida",
-  "quick-connection-connection-method-description": "Usa la dirección para conectar por primera vez",
-  "qr-code-connection-connection-method-title": "Código QR",
-  "qr-code-connection-connection-method-description": "Usa un código QR para conectar",
-  "restore-connection-connection-method-title": "Restaurar desde archivo de conexión",
-  "restore-connection-connection-method-description": "Usa un archivo de conexión y frase de contraseña",
-  "encrypted-connection": "Conexión cifrada",
-  "click-to-upload": "Haz clic para subir o arrastra y suelta",
-  "restore-connection": "Restaurar conexión",
-  "did-you-connected-before": "¿Tienes experiencia usando shinkai?",
-  "cancel": "Cancelar",
-  "continue": "Continuar",
-  "are-you-sure": "Desconectar Shinkai Visor",
-  "permanently-lose-connection": "¿Estás seguro de que quieres desconectarte? No podrás acceder a tu nodo Shinkai sin volver a conectarte.",
-  "action-cant-be-undone": "Esta acción no se puede revertir",
-  "file.one": "Archivo",
-  "file.other": "Archivos",
-  "save": "Guardar",
-  "name.one": "Nombre",
-  "edit": "Editar",
-  "togethercomputer": "Together AI",
-  "alphanumeric_with_underscore": "Solo se permiten caracteres alfanuméricos y guiones bajos",
-  "default-agent": "Agente por defecto",
-  "create-registration-code": "Registrar nuevo dispositivo",
-  "profile.one": "Perfil",
-  "profile.other": "Perfiles",
-  "device.one": "Dispositivo",
-  "device.other": "Dispositivos",
-  "generate-registration-code": "Generar código de registro",
-  "permission-type": "Tipo de permiso",
-  "admin": "Administrador",
-  "standard": "Estándar",
-  "none": "Ninguno",
-  "scan-or-download-registration-code": "Escanea o descarga este código de registro",
-  "use-it-to-register-and-connect": "Usa este código para registrar un nuevo dispositivo y conectarlo a tu Shinkai Node",
-  "identity-type": "Tipo de identidad",
-  "disconnect-warning-link": "Exporta tu conexión",
-  "disconnect-warning-link-description": "Si quieres usarla más tarde",
-  "show-action-button-label": "Mostrar botón de acceso rápido de Shinkai",
-  "show-action-button-description": "El botón de acceso rápido se puede mover haciendo clic y manteniendo presionado.",
-  "shortcut-key": "Tecla de acceso rápido",
-  "shortcut-key-description": "Presiona la tecla de acceso rápido para abrir Shinkai Visor",
-  "limit-reached": "Límite alcanzado",
-  "limit-reached-description": "Has utilizado todas tus consultas para el mes en este modelo/agente. Por favor, inicia un nuevo chat con otro agente.",
-  "ollama": "Ollama",
-  "shinkai-identity-updated-successfully": "Shinkai Identity actualizada correctamente.",
-  "restart-your-shinkai-node": "Por favor reinicia tu Shinkai Node."
-}
diff --git a/apps/shinkai-visor/src/lang/intl.ts b/apps/shinkai-visor/src/lang/intl.ts
deleted file mode 100644
index cfd759ac0..000000000
--- a/apps/shinkai-visor/src/lang/intl.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { MessageFormatElement } from 'react-intl';
-
-import english from './en.json';
-import spanish from './es.json';
-
-type LangMessage = Record<string, MessageFormatElement[]>;
-const langMap = new Map<string, LangMessage>([
-  ['en', english as unknown as LangMessage],
-  ['es', spanish as unknown as LangMessage],
-]);
-const DEFAULT_LOCALE = 'en';
-
-export const locale = navigator.language || DEFAULT_LOCALE;
-export const langMessages: LangMessage =
-  langMap.get(locale) || (english as unknown as LangMessage);
diff --git a/apps/shinkai-visor/src/service-worker/service-worker.ts b/apps/shinkai-visor/src/service-worker/service-worker.ts
index a88ac750e..754423707 100644
--- a/apps/shinkai-visor/src/service-worker/service-worker.ts
+++ b/apps/shinkai-visor/src/service-worker/service-worker.ts
@@ -1,9 +1,9 @@
 import './context-menu';
 
-import { listen as listenExternal } from './communication/external';
+// import { listen as listenExternal } from './communication/external';
 import { listen as listenInternal } from './communication/internal';
 
 listenInternal();
 // TODO: need to refactor async await
 // ERROR: Top-level await is disallowed in service worker (ONLY REPRODUCED IN LOCAL DEV)
-listenExternal();
+// listenExternal();
diff --git a/libs/shinkai-i18n/.babelrc b/libs/shinkai-i18n/.babelrc
new file mode 100644
index 000000000..1ea870ead
--- /dev/null
+++ b/libs/shinkai-i18n/.babelrc
@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nx/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}
diff --git a/libs/shinkai-i18n/.eslintrc.json b/libs/shinkai-i18n/.eslintrc.json
new file mode 100644
index 000000000..a39ac5d05
--- /dev/null
+++ b/libs/shinkai-i18n/.eslintrc.json
@@ -0,0 +1,18 @@
+{
+  "extends": ["plugin:@nx/react", "../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}
diff --git a/libs/shinkai-i18n/README.md b/libs/shinkai-i18n/README.md
new file mode 100644
index 000000000..c4b470181
--- /dev/null
+++ b/libs/shinkai-i18n/README.md
@@ -0,0 +1,44 @@
+# Shinkai i18n
+
+This package uses [i18next](https://react.i18next.com/) to translate the app. All the translations
+are stored inside the [locales](./src/lib/locales) directory. This means all texts within the app
+need to be rendered using the `t` function, returned by `useTranslation`:
+
+```tsx
+import { useTranslation } from '@shinkai_network/shinkai-i18n';
+
+const Component: React.FC = () => {
+  const { t } = useTranslation();
+
+  return <>{t('componentName.textKey')}</>;
+};
+```
+
+If a text contains HTML or JSX elements, then the `Trans` component can be used instead:
+
+```tsx
+import { useTranslation } from '@shinkai_network/shinkai-i18n';
+
+const Component: React.FC = () => {
+  const { Trans } = useTranslation();
+
+  return (
+    <Trans i18nKey="componentName.textKey" components={{ Anchor: <a href="https://acme.com" /> }} />
+  );
+};
+```
+
+If a text needs to be accessed from outside of a component, then the `t` function exported by the
+translation client can be used:
+
+```tsx
+import { t } from '@shinkai_network/shinkai-i18n';
+
+const myFunction
+() => t('functionName.textKey');
+```
+
+Note that this should only be used in cases where we can't use `useTranslation`. The hook does extra
+processing, hence why it is preferred in all other cases.
+
+
diff --git a/libs/shinkai-i18n/package.json b/libs/shinkai-i18n/package.json
new file mode 100644
index 000000000..faaac52f5
--- /dev/null
+++ b/libs/shinkai-i18n/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "@shinkai_network/shinkai-i18n",
+  "version": "0.0.1",
+  "main": "./index.js",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./index.mjs",
+      "require": "./index.js"
+    }
+  }
+}
diff --git a/libs/shinkai-i18n/project.json b/libs/shinkai-i18n/project.json
new file mode 100644
index 000000000..9fa7d234d
--- /dev/null
+++ b/libs/shinkai-i18n/project.json
@@ -0,0 +1,9 @@
+{
+  "name": "shinkai-i18n",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/shinkai-i18n/src",
+  "projectType": "library",
+  "tags": [],
+  "// targets": "to see all targets run: nx show project shinkai-i18n --web",
+  "targets": {}
+}
diff --git a/libs/shinkai-i18n/src/index.ts b/libs/shinkai-i18n/src/index.ts
new file mode 100644
index 000000000..cbe235fb9
--- /dev/null
+++ b/libs/shinkai-i18n/src/index.ts
@@ -0,0 +1,2 @@
+export * from './lib/init';
+export * from './lib/providers';
diff --git a/libs/shinkai-i18n/src/lib/init.ts b/libs/shinkai-i18n/src/lib/init.ts
new file mode 100644
index 000000000..780b9ba59
--- /dev/null
+++ b/libs/shinkai-i18n/src/lib/init.ts
@@ -0,0 +1,24 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+
+import EnLocales from './locales/en.json';
+
+i18n.use(initReactI18next).init({
+  resources: {
+    en: {
+      translation: EnLocales,
+    },
+  },
+  lng: 'en',
+  fallbackLng: 'en',
+  interpolation: {
+    escapeValue: false,
+  },
+});
+
+export default i18n;
+
+/*  Only use this function when you need to render a string from outside a
+component. */
+export const { t } = i18n;
+export * from './useTranslation';
diff --git a/libs/shinkai-i18n/src/lib/locales/en.json b/libs/shinkai-i18n/src/lib/locales/en.json
new file mode 100644
index 000000000..265187062
--- /dev/null
+++ b/libs/shinkai-i18n/src/lib/locales/en.json
@@ -0,0 +1,161 @@
+{
+  "extension": {
+    "welcome": "Transform your web browsing experience using AI with Shinkai Visor ✨"
+  },
+  "layout": {
+    "sidebar": {
+      "toggle": "Toggle Sidebar"
+    },
+    "menuItems": {
+      "chats": "Chats",
+      "aiTasks": "AI Tasks",
+      "vectorFs": "My AI Files Explorer",
+      "vectorSearch": "AI Files Content Search",
+      "subscriptions": "Browse Subscriptions",
+      "mySubscriptions": "My Subscriptions",
+      "agents": "AIs",
+      "settings": "Settings",
+      "disconnect": "Disconnect"
+    }
+  },
+  "chat": {
+    "chats": "Chats",
+    "emptyStateTitle": "Ask Shinkai AI",
+    "emptyStateDescription": "Try “How to make a HTTP request in JavaScript” , “Give me the top 10 rock music in the 80s”, “Explain me how internet works”",
+    "create": "Create AI Chat",
+    "limitReachedTitle": "Limit Reached",
+    "limitReachedDescription": "You've used all of your queries for the month on this model/agent. Please start a new chat with another agent.",
+    "enterMessage": "Enter Message",
+    "sendMessage": "Send Message",
+    "form": {
+      "message": "Tell us the job you want to do",
+      "messagePlaceholder": "Eg: Explain me how internet works...",
+      "workflows": "Workflows",
+      "selectAI": "Select your AI",
+      "setContext": "Set Chat Context",
+      "setContextText": "Add files or folders for your AI to use as context during your conversation."
+    },
+    "context": {
+      "title": "Conversation Context",
+      "description": "List of folders and files used as context for this conversation"
+    },
+    "actives": {
+      "label": "Actives",
+      "notFound": "No active conversations found."
+    },
+    "archives": {
+      "label": "Archives",
+      "archive": "Archive",
+      "notFound": "No archived conversations found."
+    }
+  },
+  "inboxes": {
+    "updateName": "Update inbox name",
+    "inboxName": "Name"
+  },
+  "shinkaiNode": {
+    "restartNode": "Please restart your Shinkai Node",
+    "nodeAddress": "Node Address",
+    "nodeVersion": "Node Version"
+  },
+  "settings": {
+    "defaultAgent": "Default AI",
+    "shinkaiIdentity":{
+      "label": "Shinkai Identity",
+      "updatedIdentity": "Shinkai Identity updated successfully."
+    },
+    "quickAccessButton": {
+      "label": "Show Shinkai Quick Access Button",
+      "description": "The Quick Access Button can be moved by clicking and holding."
+    },
+    "shortcutKey": {
+      "label": "Shortcut Key",
+      "description": "Modify the shortcut key to launch sidebar"
+    },
+    "exportConnection": {
+      "label": "Export connection"
+    },
+    "registerNewCode": {
+      "label": "Register new device"
+    }
+  },
+  "exportConnection": {
+    "label": "Export Connection",
+    "generateFile": "Generate connection file",
+    "downloadText": "Download and keep this connection file in a safe place",
+    "restoreText": "Use it with your passphrase to restore the connection to your Shinkai Node"
+  },
+  "common": {
+    "uploadFile": "Upload a File",
+    "folders": "Folders",
+    "files": "Files",
+    "file": "File",
+    "save": "Save",
+    "cancel": "Cancel",
+    "continue": "Continue",
+    "connect": "Connect",
+    "rename": "Rename",
+    "disconnect": "Disconnect",
+    "soon": "soon",
+    "back": "Back",
+    "edit": "Edit",
+    "delete": "Delete",
+    "update": "Update",
+    "moreOptions": "More Options",
+    "comingSoon": "Coming soon - Early July",
+    "noThanks": "No, Thanks",
+    "iAgree": "I Agree",
+    "getStarted": "Get Started",
+    "passphrase": "Passphrase",
+    "repeatPassphrase": "Confirm passphrase"
+  },
+  "analytics": {
+    "title": "Help us improve Shinkai"
+  },
+  "agents": {
+    "label": "AIs",
+    "add": "Add AI",
+    "addManually": "Manually Add AI",
+    "delete": {
+      "label": "Delete AI",
+      "description": "Are you sure you want to delete this AI? This action cannot be undone."
+    },
+    "switch": "Switch AI",
+    "notFound": {
+      "title": "No available AIs",
+      "description": "Connect your first AI to start asking Shinkai AI. Try connecting OpenAI"
+    },
+    "localAI": {
+      "installTitle": "Install AI Models",
+      "installText": "After installing AI models on your local machine, they will become available as AI"
+    },
+    "form": {
+      "agentName": "AI Name",
+      "externalUrl": "External URL",
+      "apiKey": "API Key",
+      "modelName": "Model Name",
+      "modelId": "Model ID"
+    },
+    "success": {
+      "createAgent": "AI created successfully",
+      "deleteAgent": "AI deleted successfully",
+      "updateAgent": "AI updated successfully"
+    },
+    "errors": {
+      "createAgent": "Error adding AI",
+      "updateAgent": "Error updating AI",
+      "deleteAgent": "Error deleting AI"
+    }
+  },
+  "disconnect": {
+    "modalTitle": "Disconnect Shinkai",
+    "modalDescription": "Are you sure you want to disconnect? This will permanently delete your data",
+    "exportConnection": "Before continuing, please<Link>export your connection</Link>to restore your connection at any time."
+  },
+  "errors": {
+    "nodeUnavailable": {
+      "title": "Node Unavailable",
+      "description": "We're having trouble connecting to your Shinkai Node. Your node may be offline, or your internet connection may be down."
+    }
+  }
+}
diff --git a/libs/shinkai-i18n/src/lib/providers.tsx b/libs/shinkai-i18n/src/lib/providers.tsx
new file mode 100644
index 000000000..85bb48cc7
--- /dev/null
+++ b/libs/shinkai-i18n/src/lib/providers.tsx
@@ -0,0 +1,8 @@
+import React from 'react';
+import { I18nextProvider } from 'react-i18next';
+
+import i18n from './init';
+
+export const I18nProvider = ({ children }: { children: React.ReactNode }) => (
+  <I18nextProvider i18n={i18n}>{children}</I18nextProvider>
+);
diff --git a/libs/shinkai-i18n/src/lib/useTranslation.tsx b/libs/shinkai-i18n/src/lib/useTranslation.tsx
new file mode 100644
index 000000000..312283c15
--- /dev/null
+++ b/libs/shinkai-i18n/src/lib/useTranslation.tsx
@@ -0,0 +1,28 @@
+import { useCallback } from 'react';
+import {
+  Trans as I18NextTrans,
+  type TransProps as I18NextTransProps,
+  useTranslation as useI18NextTranslation,
+} from 'react-i18next';
+
+interface TransProps extends Omit<I18NextTransProps<'t'>, 't' | 'i18nKey'> {
+  i18nKey: string;
+}
+
+export const useTranslation = () => {
+  const { t } = useI18NextTranslation();
+
+  const Trans: React.FC<TransProps> = useCallback(
+    ({ children, ...otherProps }) => (
+      <I18NextTrans t={t} {...otherProps}>
+        {children}
+      </I18NextTrans>
+    ),
+    [t],
+  );
+
+  return {
+    t,
+    Trans,
+  };
+};
diff --git a/libs/shinkai-i18n/tsconfig.json b/libs/shinkai-i18n/tsconfig.json
new file mode 100644
index 000000000..ba9e1abb2
--- /dev/null
+++ b/libs/shinkai-i18n/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "allowJs": false,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "resolveJsonModule": true,
+    "types": [
+      "vite/client"
+    ]
+  },
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    }
+  ],
+  "extends": "../../tsconfig.base.json"
+}
diff --git a/libs/shinkai-i18n/tsconfig.lib.json b/libs/shinkai-i18n/tsconfig.lib.json
new file mode 100644
index 000000000..0cf346b95
--- /dev/null
+++ b/libs/shinkai-i18n/tsconfig.lib.json
@@ -0,0 +1,28 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": [
+      "node",
+      "@nx/react/typings/cssmodule.d.ts",
+      "@nx/react/typings/image.d.ts",
+      "vite/client"
+    ]
+  },
+  "exclude": [
+    "**/*.spec.ts",
+    "**/*.test.ts",
+    "**/*.spec.tsx",
+    "**/*.test.tsx",
+    "**/*.spec.js",
+    "**/*.test.js",
+    "**/*.spec.jsx",
+    "**/*.test.jsx"
+  ],
+  "include": [
+    "src/**/*.js",
+    "src/**/*.jsx",
+    "src/**/*.ts",
+    "src/**/*.tsx"
+  ]
+}
diff --git a/libs/shinkai-i18n/vite.config.ts b/libs/shinkai-i18n/vite.config.ts
new file mode 100644
index 000000000..0b02ea9b0
--- /dev/null
+++ b/libs/shinkai-i18n/vite.config.ts
@@ -0,0 +1,49 @@
+/// <reference types='vitest' />
+import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
+import react from '@vitejs/plugin-react';
+import * as path from 'path';
+import { defineConfig } from 'vite';
+import dts from 'vite-plugin-dts';
+
+export default defineConfig({
+  root: __dirname,
+  cacheDir: '../../node_modules/.vite/libs/shinkai-i18n',
+
+  plugins: [
+    react(),
+    nxViteTsPaths(),
+    dts({
+      entryRoot: 'src',
+      tsconfigPath: path.join(__dirname, 'tsconfig.lib.json'),
+    }),
+  ],
+
+  // Uncomment this if you are using workers.
+  // worker: {
+  //  plugins: [ nxViteTsPaths() ],
+  // },
+
+  // Configuration for building your library.
+  // See: https://vitejs.dev/guide/build.html#library-mode
+  build: {
+    outDir: '../../dist/libs/shinkai-i18n',
+    emptyOutDir: true,
+    reportCompressedSize: true,
+    commonjsOptions: {
+      transformMixedEsModules: true,
+    },
+    lib: {
+      // Could also be a dictionary or array of multiple entry points.
+      entry: 'src/index.ts',
+      name: 'shinkai-i18n',
+      fileName: 'index',
+      // Change this to the formats you want to support.
+      // Don't forget to update your package.json as well.
+      formats: ['es'],
+    },
+    rollupOptions: {
+      // External packages that should not be bundled into your library.
+      external: ['react', 'react-dom', 'react/jsx-runtime'],
+    },
+  },
+});
diff --git a/package-lock.json b/package-lock.json
index aea04fe00..d174a13fd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6,7 +6,7 @@
   "packages": {
     "": {
       "name": "@shinkai/source",
-      "version": "0.7.17",
+      "version": "0.7.18",
       "hasInstallScript": true,
       "license": "SEE LICENSE IN LICENSE",
       "workspaces": [
@@ -77,9 +77,9 @@
         "react-dropzone": "^14.2.3",
         "react-error-boundary": "^4.0.13",
         "react-hook-form": "^7.51.5",
+        "react-i18next": "^14.1.2",
         "react-image-crop": "^11.0.5",
         "react-intersection-observer": "^9.10.2",
-        "react-intl": "^6.4.5",
         "react-qrcode-logo": "^3.0.0",
         "react-router-dom": "^6.23.1",
         "rxjs": "^7.8.1",
@@ -4121,92 +4121,6 @@
       "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.2.tgz",
       "integrity": "sha512-J4yDIIthosAsRZ5CPYP/jQvUAQtlZTTD/4suA08/FEnlxqW3sKS9iAhgsa9VYLZ6vDHn/ixJgIqRQPotoBjxIw=="
     },
-    "node_modules/@formatjs/ecma402-abstract": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-2.0.0.tgz",
-      "integrity": "sha512-rRqXOqdFmk7RYvj4khklyqzcfQl9vEL/usogncBHRZfZBDOwMGuSRNFl02fu5KGHXdbinju+YXyuR+Nk8xlr/g==",
-      "dependencies": {
-        "@formatjs/intl-localematcher": "0.5.4",
-        "tslib": "^2.4.0"
-      }
-    },
-    "node_modules/@formatjs/fast-memoize": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/@formatjs/fast-memoize/-/fast-memoize-2.2.0.tgz",
-      "integrity": "sha512-hnk/nY8FyrL5YxwP9e4r9dqeM6cAbo8PeU9UjyXojZMNvVad2Z06FAVHyR3Ecw6fza+0GH7vdJgiKIVXTMbSBA==",
-      "dependencies": {
-        "tslib": "^2.4.0"
-      }
-    },
-    "node_modules/@formatjs/icu-messageformat-parser": {
-      "version": "2.7.8",
-      "resolved": "https://registry.npmjs.org/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.7.8.tgz",
-      "integrity": "sha512-nBZJYmhpcSX0WeJ5SDYUkZ42AgR3xiyhNCsQweFx3cz/ULJjym8bHAzWKvG5e2+1XO98dBYC0fWeeAECAVSwLA==",
-      "dependencies": {
-        "@formatjs/ecma402-abstract": "2.0.0",
-        "@formatjs/icu-skeleton-parser": "1.8.2",
-        "tslib": "^2.4.0"
-      }
-    },
-    "node_modules/@formatjs/icu-skeleton-parser": {
-      "version": "1.8.2",
-      "resolved": "https://registry.npmjs.org/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.8.2.tgz",
-      "integrity": "sha512-k4ERKgw7aKGWJZgTarIcNEmvyTVD9FYh0mTrrBMHZ1b8hUu6iOJ4SzsZlo3UNAvHYa+PnvntIwRPt1/vy4nA9Q==",
-      "dependencies": {
-        "@formatjs/ecma402-abstract": "2.0.0",
-        "tslib": "^2.4.0"
-      }
-    },
-    "node_modules/@formatjs/intl": {
-      "version": "2.10.4",
-      "resolved": "https://registry.npmjs.org/@formatjs/intl/-/intl-2.10.4.tgz",
-      "integrity": "sha512-56483O+HVcL0c7VucAS2tyH020mt9XTozZO67cwtGg0a7KWDukS/FzW3OnvaHmTHDuYsoPIzO+ZHVfU6fT/bJw==",
-      "dependencies": {
-        "@formatjs/ecma402-abstract": "2.0.0",
-        "@formatjs/fast-memoize": "2.2.0",
-        "@formatjs/icu-messageformat-parser": "2.7.8",
-        "@formatjs/intl-displaynames": "6.6.8",
-        "@formatjs/intl-listformat": "7.5.7",
-        "intl-messageformat": "10.5.14",
-        "tslib": "^2.4.0"
-      },
-      "peerDependencies": {
-        "typescript": "^4.7 || 5"
-      },
-      "peerDependenciesMeta": {
-        "typescript": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@formatjs/intl-displaynames": {
-      "version": "6.6.8",
-      "resolved": "https://registry.npmjs.org/@formatjs/intl-displaynames/-/intl-displaynames-6.6.8.tgz",
-      "integrity": "sha512-Lgx6n5KxN16B3Pb05z3NLEBQkGoXnGjkTBNCZI+Cn17YjHJ3fhCeEJJUqRlIZmJdmaXQhjcQVDp6WIiNeRYT5g==",
-      "dependencies": {
-        "@formatjs/ecma402-abstract": "2.0.0",
-        "@formatjs/intl-localematcher": "0.5.4",
-        "tslib": "^2.4.0"
-      }
-    },
-    "node_modules/@formatjs/intl-listformat": {
-      "version": "7.5.7",
-      "resolved": "https://registry.npmjs.org/@formatjs/intl-listformat/-/intl-listformat-7.5.7.tgz",
-      "integrity": "sha512-MG2TSChQJQT9f7Rlv+eXwUFiG24mKSzmF144PLb8m8OixyXqn4+YWU+5wZracZGCgVTVmx8viCf7IH3QXoiB2g==",
-      "dependencies": {
-        "@formatjs/ecma402-abstract": "2.0.0",
-        "@formatjs/intl-localematcher": "0.5.4",
-        "tslib": "^2.4.0"
-      }
-    },
-    "node_modules/@formatjs/intl-localematcher": {
-      "version": "0.5.4",
-      "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.5.4.tgz",
-      "integrity": "sha512-zTwEpWOzZ2CiKcB93BLngUX59hQkuZjT2+SAQEscSm52peDW/getsawMcWF1rGRpMCX6D7nSJA3CzJ8gn13N/g==",
-      "dependencies": {
-        "tslib": "^2.4.0"
-      }
-    },
     "node_modules/@hookform/error-message": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/@hookform/error-message/-/error-message-2.0.1.tgz",
@@ -10302,15 +10216,6 @@
       "integrity": "sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA==",
       "dev": true
     },
-    "node_modules/@types/hoist-non-react-statics": {
-      "version": "3.3.5",
-      "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.5.tgz",
-      "integrity": "sha512-SbcrWzkKBw2cdwRTwQAswfpB9g9LJWfjtUeW/jvNwbhC8cpmmNYVePa+ncbUe0rGTQ7G3Ff6mYUN2VMfLVr+Sg==",
-      "dependencies": {
-        "@types/react": "*",
-        "hoist-non-react-statics": "^3.3.0"
-      }
-    },
     "node_modules/@types/http-cache-semantics": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/@types/http-cache-semantics/-/http-cache-semantics-4.0.4.tgz",
@@ -19486,6 +19391,14 @@
       "integrity": "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==",
       "dev": true
     },
+    "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==",
+      "dependencies": {
+        "void-elements": "3.1.0"
+      }
+    },
     "node_modules/html-url-attributes": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/html-url-attributes/-/html-url-attributes-3.0.0.tgz",
@@ -19696,6 +19609,29 @@
         "node": ">=4"
       }
     },
+    "node_modules/i18next": {
+      "version": "23.11.5",
+      "resolved": "https://registry.npmjs.org/i18next/-/i18next-23.11.5.tgz",
+      "integrity": "sha512-41pvpVbW9rhZPk5xjCX2TPJi2861LEig/YRhUkY+1FQ2IQPS0bKUDYnEqY8XPPbB48h1uIwLnP9iiEfuSl20CA==",
+      "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"
+        }
+      ],
+      "peer": true,
+      "dependencies": {
+        "@babel/runtime": "^7.23.2"
+      }
+    },
     "node_modules/iconv-lite": {
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
@@ -19862,17 +19798,6 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/intl-messageformat": {
-      "version": "10.5.14",
-      "resolved": "https://registry.npmjs.org/intl-messageformat/-/intl-messageformat-10.5.14.tgz",
-      "integrity": "sha512-IjC6sI0X7YRjjyVH9aUgdftcmZK7WXdHeil4KwbjDnRWjnVitKpAx3rr6t6di1joFp5188VqKcobOPA6mCLG/w==",
-      "dependencies": {
-        "@formatjs/ecma402-abstract": "2.0.0",
-        "@formatjs/fast-memoize": "2.2.0",
-        "@formatjs/icu-messageformat-parser": "2.7.8",
-        "tslib": "^2.4.0"
-      }
-    },
     "node_modules/invariant": {
       "version": "2.2.4",
       "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
@@ -28514,6 +28439,28 @@
         "react": "^16.8.0 || ^17 || ^18"
       }
     },
+    "node_modules/react-i18next": {
+      "version": "14.1.2",
+      "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-14.1.2.tgz",
+      "integrity": "sha512-FSIcJy6oauJbGEXfhUgVeLzvWBhIBIS+/9c6Lj4niwKZyGaGb4V4vUbATXSlsHJDXXB+ociNxqFNiFuV1gmoqg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9",
+        "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-image-crop": {
       "version": "11.0.5",
       "resolved": "https://registry.npmjs.org/react-image-crop/-/react-image-crop-11.0.5.tgz",
@@ -28536,32 +28483,6 @@
         }
       }
     },
-    "node_modules/react-intl": {
-      "version": "6.6.8",
-      "resolved": "https://registry.npmjs.org/react-intl/-/react-intl-6.6.8.tgz",
-      "integrity": "sha512-M0pkhzcgV31h++2901BiRXWl69hp2zPyLxRrSwRjd1ErXbNoubz/f4M6DrRTd4OiSUrT4ajRQzrmtS5plG4FtA==",
-      "dependencies": {
-        "@formatjs/ecma402-abstract": "2.0.0",
-        "@formatjs/icu-messageformat-parser": "2.7.8",
-        "@formatjs/intl": "2.10.4",
-        "@formatjs/intl-displaynames": "6.6.8",
-        "@formatjs/intl-listformat": "7.5.7",
-        "@types/hoist-non-react-statics": "^3.3.1",
-        "@types/react": "16 || 17 || 18",
-        "hoist-non-react-statics": "^3.3.2",
-        "intl-messageformat": "10.5.14",
-        "tslib": "^2.4.0"
-      },
-      "peerDependencies": {
-        "react": "^16.6.0 || 17 || 18",
-        "typescript": "^4.7 || 5"
-      },
-      "peerDependenciesMeta": {
-        "typescript": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -33974,6 +33895,14 @@
         "url": "https://opencollective.com/vitest"
       }
     },
+    "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==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/vue-template-compiler": {
       "version": "2.7.16",
       "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.7.16.tgz",
diff --git a/package.json b/package.json
index 34e2ac985..735f0fa59 100644
--- a/package.json
+++ b/package.json
@@ -76,9 +76,9 @@
     "react-dropzone": "^14.2.3",
     "react-error-boundary": "^4.0.13",
     "react-hook-form": "^7.51.5",
+    "react-i18next": "^14.1.2",
     "react-image-crop": "^11.0.5",
     "react-intersection-observer": "^9.10.2",
-    "react-intl": "^6.4.5",
     "react-qrcode-logo": "^3.0.0",
     "react-router-dom": "^6.23.1",
     "rxjs": "^7.8.1",
diff --git a/tsconfig.base.json b/tsconfig.base.json
index 52fa20618..85a5e7405 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -10,11 +10,17 @@
     "importHelpers": true,
     "target": "es2015",
     "module": "esnext",
-    "lib": ["es2020", "dom"],
+    "lib": [
+      "es2020",
+      "dom"
+    ],
     "skipLibCheck": true,
     "skipDefaultLibCheck": true,
     "baseUrl": ".",
     "paths": {
+      "@shinkai_network/shinkai-i18n": [
+        "libs/shinkai-i18n/src/index.ts"
+      ],
       "@shinkai_network/shinkai-message-ts/*": [
         "libs/shinkai-message-ts/src/*.ts"
       ],
@@ -24,7 +30,9 @@
       "@shinkai_network/shinkai-node-state/*": [
         "libs/shinkai-node-state/src/*.ts"
       ],
-      "@shinkai_network/shinkai-ui": ["libs/shinkai-ui/src/index.ts"],
+      "@shinkai_network/shinkai-ui": [
+        "libs/shinkai-ui/src/index.ts"
+      ],
       "@shinkai_network/shinkai-ui/assets": [
         "libs/shinkai-ui/src/assets/index.ts"
       ],
@@ -34,8 +42,13 @@
       "@shinkai_network/shinkai-ui/hooks": [
         "libs/shinkai-ui/src/hooks/index.ts"
       ],
-      "@shinkai_network/shinkai-ui/utils": ["libs/shinkai-ui/src/utils.ts"]
+      "@shinkai_network/shinkai-ui/utils": [
+        "libs/shinkai-ui/src/utils.ts"
+      ]
     }
   },
-  "exclude": ["node_modules", "tmp"]
+  "exclude": [
+    "node_modules",
+    "tmp"
+  ]
 }