diff --git a/client/bun.lockb b/client/bun.lockb
index eb505f9..2bd5376 100755
Binary files a/client/bun.lockb and b/client/bun.lockb differ
diff --git a/client/package.json b/client/package.json
index 52400cf..9dea249 100644
--- a/client/package.json
+++ b/client/package.json
@@ -32,6 +32,7 @@
     "cmdk": "1.0.0",
     "emoji-picker-react": "^4.12.0",
     "export-from-json": "^1.7.4",
+    "i18next": "^23.16.4",
     "lucide-react": "^0.453.0",
     "moment": "^2.30.1",
     "next-themes": "^0.3.0",
@@ -39,6 +40,7 @@
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.53.1",
     "react-hot-toast": "^2.4.1",
+    "react-i18next": "^15.1.0",
     "react-markdown": "^9.0.1",
     "react-router-dom": "^6.27.0",
     "react-scroll-to-top": "^3.0.0",
diff --git a/client/src/components/ChatbotCard.tsx b/client/src/components/ChatbotCard.tsx
index 573f80f..e53628c 100644
--- a/client/src/components/ChatbotCard.tsx
+++ b/client/src/components/ChatbotCard.tsx
@@ -6,6 +6,7 @@ import { Card, CardContent, CardFooter, CardHeader } from "./ui/card";
 import { Avatar, AvatarFallback, AvatarImage } from "./ui/avatar";
 import { Button } from "./ui/button";
 import { Link, useNavigate } from "react-router-dom";
+import { useTranslation } from "react-i18next";
 
 export function ChatbotCard({
   chatbot,
@@ -16,6 +17,7 @@ export function ChatbotCard({
 }) {
   const shareModel = useShareModal();
   const rq = useQueryClient();
+  const { t } = useTranslation();
   const navigate = useNavigate();
   const likeMutation = useMutation({
     mutationFn: likeAndReport,
@@ -40,7 +42,7 @@ export function ChatbotCard({
               {chatbot.latest_version.name}
             </h2>
             <p className="text-sm text-muted-foreground">
-              Created by @{chatbot.latest_version.modified_by}
+              {t("created_by")}@{chatbot.latest_version.modified_by}
             </p>
           </div>
         </CardHeader>
@@ -64,7 +66,7 @@ export function ChatbotCard({
             }
           >
             <Heart className="h-4 w-4" />
-            <span className="sr-only">Like</span>
+            <span className="sr-only">{t("like")}</span>
           </Button>
           <span
             className="inline-flex items-center text-sm text-muted-foreground"
@@ -84,7 +86,7 @@ export function ChatbotCard({
             }
           >
             <Flag className="h-4 w-4" />
-            <span className="sr-only">Report</span>
+            <span className="sr-only">{t("report")}</span>
           </Button>
           <span
             className="inline-flex items-center text-sm text-muted-foreground"
@@ -99,7 +101,7 @@ export function ChatbotCard({
             onClick={() => navigate(`/chatbot/${chatbot.id}`)}
           >
             <MessageSquare className="h-4 w-4 mr-1" />
-            Chat
+            {t("chat")}
           </Button>
           <Button
             variant="outline"
@@ -112,7 +114,7 @@ export function ChatbotCard({
             }
           >
             <Share2 className="h-4 w-4" />
-            <span className="sr-only">Share</span>
+            <span className="sr-only">{t("share")}</span>
           </Button>
         </div>
       </CardFooter>
diff --git a/client/src/components/ImageCard.tsx b/client/src/components/ImageCard.tsx
index 000584d..5339bcd 100644
--- a/client/src/components/ImageCard.tsx
+++ b/client/src/components/ImageCard.tsx
@@ -4,6 +4,7 @@ import { Card, CardContent, CardFooter, CardHeader } from "./ui/card";
 import { Button } from "./ui/button";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { likeAndReport } from "@/lib/queries";
+import { useTranslation } from "react-i18next";
 
 export function ImageCard({
   image,
@@ -13,6 +14,7 @@ export function ImageCard({
   queryKeys: string[];
 }) {
   const qc = useQueryClient();
+  const { t } = useTranslation();
   const mutation = useMutation({
     mutationFn: likeAndReport,
     onSuccess: () => qc.invalidateQueries({ queryKey: queryKeys }),
@@ -73,7 +75,7 @@ export function ImageCard({
         >
           <Button variant="ghost" size="sm">
             <Download className="h-4 w-4 mr-2" />
-            Download
+            {t("download")}
           </Button>
         </a>
       </CardFooter>
diff --git a/client/src/components/LikeAndReport.tsx b/client/src/components/LikeAndReport.tsx
index 8ef5d05..280acc7 100644
--- a/client/src/components/LikeAndReport.tsx
+++ b/client/src/components/LikeAndReport.tsx
@@ -15,7 +15,6 @@ export function LikeAndReport({
   queryKeys: string[];
 }) {
   const qc = useQueryClient();
-
   const mutation = useMutation({
     mutationFn: likeAndReport,
     onSuccess: () => qc.invalidateQueries({ queryKey: queryKeys }),
@@ -59,7 +58,6 @@ export function LikeAndReport({
           }
         >
           <Ban />
-          {/* Display reports count on top of the button */}
           <span className="absolute -bottom-2 -right-2 bg-red-500 text-white text-xs rounded-full px-1.5 py-0.5">
             {reports}
           </span>
diff --git a/client/src/components/Navbar.tsx b/client/src/components/Navbar.tsx
index 8c99d16..985cece 100644
--- a/client/src/components/Navbar.tsx
+++ b/client/src/components/Navbar.tsx
@@ -4,14 +4,33 @@ import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
+  DropdownMenuPortal,
   DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { useSettingsModal } from "@/stores/modal-store";
+import { useTranslation } from "react-i18next";
+
+const languages = [
+  { label: "English", code: "en" },
+  { label: "हिन्दी", code: "hi" },
+  { label: "Español", code: "es" },
+  { label: "Français", code: "fr" },
+  { label: "日本語", code: "ja" },
+];
 
 export default function Navbar() {
   const { user, loading, logout } = useAuth();
   const settingsModal = useSettingsModal();
+  const { t, i18n } = useTranslation();
+
+  const changeLanguage = (lng: string) => {
+    i18n.changeLanguage(lng);
+  };
+
   return (
     <nav className="flex justify-between items-center px-6 py-4 rounded-md border-b-2 dark:border-darker border-lighter">
       <Link to="/dashboard" className="text-5xl brand font-extrabold">
@@ -25,12 +44,12 @@ export default function Navbar() {
             <ul className="flex space-x-6 items-center">
               <li>
                 <Link to="/leaderboard" className="py-2">
-                  Leaderboard
+                  {t("navbar.leaderboard")}
                 </Link>
               </li>
               <li>
                 <Link to="/hub" className="py-2">
-                  Hub
+                  {t("navbar.hub")}
                 </Link>
               </li>
 
@@ -38,12 +57,12 @@ export default function Navbar() {
                 <>
                   <li className="w-full">
                     <Link to="/signup" className="py-2">
-                      SignUp
+                      {t("navbar.sign_up")}
                     </Link>
                   </li>
                   <li className="w-full ">
                     <Link to="/login" className="py-2">
-                      LogIn
+                      {t("navbar.login")}
                     </Link>
                   </li>
                 </>
@@ -60,27 +79,49 @@ export default function Navbar() {
                       </DropdownMenuTrigger>
                       <DropdownMenuContent>
                         <Link to={`/profile/${user.username}`}>
-                          <DropdownMenuItem>Profile</DropdownMenuItem>
+                          <DropdownMenuItem>
+                            {t("navbar.profile")}
+                          </DropdownMenuItem>
                         </Link>
 
                         <Link to={`/images`}>
-                          <DropdownMenuItem>My Images</DropdownMenuItem>
+                          <DropdownMenuItem>
+                            {t("navbar.my_images")}
+                          </DropdownMenuItem>
                         </Link>
                         <Link to={`/chatbots`}>
-                          <DropdownMenuItem>My Chatbots</DropdownMenuItem>
+                          <DropdownMenuItem>
+                            {t("navbar.my_chatbots")}
+                          </DropdownMenuItem>
                         </Link>
                         <DropdownMenuSeparator />
                         <DropdownMenuItem
                           onClick={() => settingsModal.onOpen()}
                         >
-                          Settings
+                          {t("navbar.settings")}
                         </DropdownMenuItem>
+                        <DropdownMenuSub>
+                          <DropdownMenuSubTrigger>
+                            {t("navbar.language")}
+                          </DropdownMenuSubTrigger>
+                          <DropdownMenuPortal>
+                            <DropdownMenuSubContent>
+                              {languages.map((lang) => (
+                                <DropdownMenuItem
+                                  onClick={() => changeLanguage(lang.code)}
+                                >
+                                  {lang.label}
+                                </DropdownMenuItem>
+                              ))}
+                            </DropdownMenuSubContent>
+                          </DropdownMenuPortal>
+                        </DropdownMenuSub>
                         <DropdownMenuSeparator />
                         <DropdownMenuItem
                           onClick={() => logout()}
                           className="text-destructive hover:text-destructive/10 focus:text-destructive/90 focus:bg-destructive/10"
                         >
-                          Log out
+                          {t("navbar.logout")}
                         </DropdownMenuItem>
                       </DropdownMenuContent>
                     </DropdownMenu>
diff --git a/client/src/components/modals/Tts-magic-modal.tsx b/client/src/components/modals/Tts-magic-modal.tsx
index 1d17173..b6eb40b 100644
--- a/client/src/components/modals/Tts-magic-modal.tsx
+++ b/client/src/components/modals/Tts-magic-modal.tsx
@@ -15,6 +15,7 @@ import toast from "react-hot-toast";
 import { Textarea } from "../ui/textarea";
 
 import { AudioLines, Download, X } from "lucide-react";
+import { useTranslation } from "react-i18next";
 
 const markdownToPlainText = (markdown: string) => {
   return markdown
@@ -34,7 +35,7 @@ const markdownToPlainText = (markdown: string) => {
 export default function TtsMagicModal() {
   const modal = useTtsMagicModal();
   const initialText = modal.extras.text || "";
-
+  const { t } = useTranslation();
   const [text, setText] = useState("");
   const [loading, setLoading] = useState(false);
 
@@ -93,7 +94,7 @@ export default function TtsMagicModal() {
         <AlertDialogHeader>
           <AlertDialogTitle>
             <div className="flex items-center justify-between">
-              <p>Convert Text to speech and download</p>
+              <p>{t("tts_modal.title")}</p>
               <Button
                 variant={"outline"}
                 size={"icon"}
@@ -105,8 +106,7 @@ export default function TtsMagicModal() {
             </div>
           </AlertDialogTitle>
           <AlertDialogDescription>
-            text is converted to audio file in mp3 format that will be
-            downloaded automatically.
+            {t("tts_modal.sub_title")}
           </AlertDialogDescription>
           <div className="my-4">
             <Textarea
@@ -115,7 +115,7 @@ export default function TtsMagicModal() {
               onChange={(e) => setText(e.target.value)} // Update state on change
               rows={5}
               className="w-full p-2 border rounded"
-              placeholder="Enter text here..."
+              placeholder={t("tts_modal.text")}
             />
           </div>
         </AlertDialogHeader>
@@ -126,7 +126,7 @@ export default function TtsMagicModal() {
             className="btn btn-secondary ml-2"
             variant={"secondary"}
           >
-            <Download /> Text
+            <Download /> {t("tts_modal.text")}
           </Button>
           <Button
             disabled={loading}
@@ -134,7 +134,7 @@ export default function TtsMagicModal() {
             className="btn btn-primary"
           >
             <AudioLines />
-            {loading ? "Generating..." : "Generate"}
+            {loading ? t("tts_modal.generating") : t("tts_modal.generate")}
           </Button>
         </AlertDialogFooter>
       </AlertDialogContent>
diff --git a/client/src/components/modals/command-modal.tsx b/client/src/components/modals/command-modal.tsx
index c554bc4..6d70dab 100644
--- a/client/src/components/modals/command-modal.tsx
+++ b/client/src/components/modals/command-modal.tsx
@@ -29,10 +29,11 @@ import {
   useTtsMagicModal,
 } from "@/stores/modal-store";
 import { useNavigate } from "react-router-dom";
+import { useTranslation } from "react-i18next";
 
 export function CommandModal() {
   const [open, setOpen] = React.useState(false);
-
+  const { t } = useTranslation();
   const createBotModal = useCreateChatbotModal();
   const settingsModal = useSettingsModal();
   const imagineModal = useImagineModal();
@@ -54,37 +55,26 @@ export function CommandModal() {
 
   return (
     <>
-      <div className="flex justify-between p-1">
-        <p className="text-sm text-muted-foreground font-mono ">
-          Open Command Panel
-        </p>
-        <p className="text-sm text-muted-foreground">
-          Press{" "}
-          <kbd className="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100">
-            <span className="text-xs">⌘</span>K
-          </kbd>
-        </p>
-      </div>
       <CommandDialog open={open} onOpenChange={setOpen}>
-        <CommandInput placeholder="Type a command or search..." />
+        <CommandInput placeholder={t("commandbox.input_ph")} />
         <CommandList>
-          <CommandEmpty>No results found.</CommandEmpty>
+          <CommandEmpty>{t("commandbox.no_result")}</CommandEmpty>
           <CommandGroup heading="Suggestions">
             <CommandItem onSelect={() => createBotModal.onOpen()}>
               <Plus />
-              <span>Create Chatbot</span>
+              <span>{t("commandbox.create_chatbot")}</span>
             </CommandItem>
             <CommandItem onSelect={() => ttsModal.onOpen({ text: "" })}>
               <AudioWaveform />
-              <span>Text-to-Speech Magic</span>
+              <span>{t("commandbox.tts")}</span>
             </CommandItem>
             <CommandItem onSelect={() => translateModal.onOpen({ text: "" })}>
               <Languages />
-              <span>Translate Magic</span>
+              <span>{t("commandbox.translate")}</span>
             </CommandItem>
             <CommandItem onSelect={() => imagineModal.onOpen()}>
               <Image />
-              <span>Generate Images</span>
+              <span>{t("commandbox.image_generation")}</span>
             </CommandItem>
             <CommandItem
               onSelect={() => {
@@ -93,11 +83,11 @@ export function CommandModal() {
               }}
             >
               <Bot />
-              <span>Anonymous Chat</span>
+              <span>{t("commandbox.anonymous_chat")}</span>
             </CommandItem>
           </CommandGroup>
           <CommandSeparator />
-          <CommandGroup heading="Socialize">
+          <CommandGroup heading={t("commandbox.socialize")}>
             <CommandItem
               onSelect={() => {
                 setOpen(false);
@@ -105,7 +95,7 @@ export function CommandModal() {
               }}
             >
               <PanelTopInactive />
-              <span>Marketplace Hub</span>
+              <span>{t("commandbox.hub")}</span>
             </CommandItem>
             <CommandItem
               onSelect={() => {
@@ -114,13 +104,13 @@ export function CommandModal() {
               }}
             >
               <ChartColumn />
-              <span>Leaderboard</span>
+              <span>{t("navbar.leaderboard")}</span>
             </CommandItem>
           </CommandGroup>
-          <CommandGroup heading="Settings">
+          <CommandGroup heading={t("navbar.settings")}>
             <CommandItem onSelect={() => settingsModal.onOpen()}>
               <GearIcon />
-              <span>Settings</span>
+              <span>{t("navbar.settings")}</span>
             </CommandItem>
           </CommandGroup>
         </CommandList>
diff --git a/client/src/components/modals/create-chatbot-modal.tsx b/client/src/components/modals/create-chatbot-modal.tsx
index 0167f08..1bbacdb 100644
--- a/client/src/components/modals/create-chatbot-modal.tsx
+++ b/client/src/components/modals/create-chatbot-modal.tsx
@@ -40,9 +40,11 @@ import {
   SelectTrigger,
   SelectValue,
 } from "../ui/select";
+import { useTranslation } from "react-i18next";
 
 export default function CreateChatbotModal() {
   const modal = useCreateChatbotModal();
+  const { t } = useTranslation();
   const [loading, setLoading] = useState(false); // Loading state for request
   const rq = useQueryClient();
   const form = useForm<z.infer<typeof createChatbotSchema>>({
@@ -121,10 +123,10 @@ export default function CreateChatbotModal() {
       <AlertDialogContent>
         <AlertDialogHeader>
           <AlertDialogTitle className="text-xl font-bold mb-4">
-            Create a new Chatbot
+            {t("create_chatbot.title")}
           </AlertDialogTitle>
         </AlertDialogHeader>
-        <label className="font-medium">Select a Template:</label>
+        <label className="font-medium">{t("create_chatbot.templates")}:</label>
         <ScrollArea className="mt-2 mb-4">
           <div className="mb-4 w-[60%]">
             <div className="flex space-x-2">
@@ -153,7 +155,7 @@ export default function CreateChatbotModal() {
               name="name"
               render={({ field }) => (
                 <FormItem>
-                  <FormLabel>Name</FormLabel>
+                  <FormLabel>{t("auth.name")}</FormLabel>
                   <FormControl>
                     <Input {...field} />
                   </FormControl>
@@ -168,7 +170,7 @@ export default function CreateChatbotModal() {
               name="prompt"
               render={({ field }) => (
                 <FormItem>
-                  <FormLabel>Prompt</FormLabel>
+                  <FormLabel>{t("create_chatbot.prompt")}</FormLabel>
                   <FormControl>
                     <Textarea {...field} />
                   </FormControl>
@@ -182,7 +184,7 @@ export default function CreateChatbotModal() {
               name="category"
               render={({ field }) => (
                 <FormItem>
-                  <FormLabel>Category</FormLabel>
+                  <FormLabel>{t("create_chatbot.category")}</FormLabel>
                   <Select
                     onValueChange={field.onChange}
                     defaultValue={"General"}
@@ -203,13 +205,17 @@ export default function CreateChatbotModal() {
               )}
             />
             <Button className="w-full" type="submit" disabled={loading}>
-              {loading ? <Loader2 className="animate-spin" /> : "Create"}
+              {loading ? (
+                <Loader2 className="animate-spin" />
+              ) : (
+                t("auth.create")
+              )}
             </Button>
           </form>
         </Form>
         <AlertDialogFooter>
           <AlertDialogCancel className="w-full" disabled={loading}>
-            Cancel
+            {t("cancel")}
           </AlertDialogCancel>
         </AlertDialogFooter>
       </AlertDialogContent>
diff --git a/client/src/components/modals/delete-chatbot-modal.tsx b/client/src/components/modals/delete-chatbot-modal.tsx
index 4c59e02..29fb0fa 100644
--- a/client/src/components/modals/delete-chatbot-modal.tsx
+++ b/client/src/components/modals/delete-chatbot-modal.tsx
@@ -12,10 +12,12 @@ import { deleteObj } from "@/lib/queries";
 import { useDeleteChatbotModal } from "@/stores/modal-store";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import toast from "react-hot-toast";
+import { useTranslation } from "react-i18next";
 
 export default function DeleteChatbotModal() {
   const modal = useDeleteChatbotModal();
   const qc = useQueryClient();
+  const { t } = useTranslation();
   const { queryKeys, id, obj } = modal.extras;
   const mutation = useMutation({
     mutationFn: deleteObj,
@@ -31,14 +33,13 @@ export default function DeleteChatbotModal() {
     <AlertDialog open={modal.isOpen} onOpenChange={() => modal.onClose()}>
       <AlertDialogContent>
         <AlertDialogHeader>
-          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+          <AlertDialogTitle>{t("delete_modal.title")}</AlertDialogTitle>
           <AlertDialogDescription>
-            This action cannot be undone. This will permanently delete your
-            chatbot and remove it's data from our servers.
+            {t("delete_modal.sub_title")}
           </AlertDialogDescription>
         </AlertDialogHeader>
         <AlertDialogFooter>
-          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <AlertDialogCancel>{t("cancel")}</AlertDialogCancel>
           <AlertDialogAction
             onClick={() =>
               mutation.mutate({
@@ -47,7 +48,7 @@ export default function DeleteChatbotModal() {
               })
             }
           >
-            Continue
+            {t("continue")}
           </AlertDialogAction>
         </AlertDialogFooter>
       </AlertDialogContent>
diff --git a/client/src/components/modals/imgine-modal.tsx b/client/src/components/modals/imgine-modal.tsx
index 8e8e787..a5b4f60 100644
--- a/client/src/components/modals/imgine-modal.tsx
+++ b/client/src/components/modals/imgine-modal.tsx
@@ -15,9 +15,11 @@ import { Textarea } from "../ui/textarea";
 import { Pickaxe, X } from "lucide-react";
 import { useState } from "react";
 import { Skeleton } from "../ui/skeleton";
+import { useTranslation } from "react-i18next";
 
 export default function ImagineModal() {
   const modal = useImagineModal();
+  const { t } = useTranslation();
   const [text, setText] = useState<string>("");
   const [loading, setLoading] = useState<boolean>(false);
   const [generated, setGenerated] = useState<boolean>(false);
@@ -80,7 +82,7 @@ export default function ImagineModal() {
         <AlertDialogHeader>
           <AlertDialogTitle>
             <div className="flex items-center justify-between">
-              <p>Imgine a image and generate it</p>
+              <p>{t("generate_image.title")}</p>
               <Button
                 variant={"outline"}
                 size={"icon"}
@@ -92,7 +94,7 @@ export default function ImagineModal() {
             </div>
           </AlertDialogTitle>
           <AlertDialogDescription>
-            Let's see how you imagination is. I know you are creative enough.
+            {t("generate_image.sub_title")}
           </AlertDialogDescription>
           <div className="my-4 space-y-2">
             {generated && imagePrompt && (
@@ -107,7 +109,7 @@ export default function ImagineModal() {
                 onChange={(e) => setText(e.target.value)} // Update state on change
                 rows={5}
                 className="w-full p-2 border rounded"
-                placeholder="Enter your imagination prompt here..."
+                placeholder={t("generate_image.ph")}
               />
               <Button
                 onClick={GenerateImage} // Function to handle icon generation
@@ -125,14 +127,14 @@ export default function ImagineModal() {
         <AlertDialogFooter>
           <div className="flex items-center justify-between w-full">
             <p className="text-muted-foreground text-sm px-2">
-              If you want to save this Image in database then Click 'Capture'
+              {t("generate_image.info")}
             </p>
             <Button
               disabled={loading}
               onClick={SaveImage}
               className="btn btn-primary"
             >
-              Capture
+              {t("generate_image.capture")}
             </Button>
           </div>
         </AlertDialogFooter>
diff --git a/client/src/components/modals/settings-modal.tsx b/client/src/components/modals/settings-modal.tsx
index 22cf550..7e84dfa 100644
--- a/client/src/components/modals/settings-modal.tsx
+++ b/client/src/components/modals/settings-modal.tsx
@@ -21,6 +21,8 @@ import { Input } from "../ui/input";
 import { Button } from "../ui/button";
 import { Save } from "lucide-react";
 import { useState } from "react";
+import toast from "react-hot-toast";
+import { useTranslation } from "react-i18next";
 
 const chatbotEngines = ["openai", "groq", "anthropic", "gemini"];
 
@@ -33,7 +35,7 @@ export default function SettingsModal() {
     currentConfig,
     setCurrentConfig,
   } = useSettings();
-
+  const { t } = useTranslation();
   const [apiKey, setApiKey] = useState(
     currentConfig ? currentConfig.apiKey : ""
   );
@@ -44,7 +46,7 @@ export default function SettingsModal() {
 
   const handleSaveConfig = () => {
     if (!selectedEngine) {
-      alert("Please select a chatbot engine.");
+      toast.error("Please select a chatbot engine.");
       return;
     }
 
@@ -62,7 +64,10 @@ export default function SettingsModal() {
     }
 
     // Save to local storage
-    localStorage.setItem("chatbotConfigurations", JSON.stringify(configurations));
+    localStorage.setItem(
+      "chatbotConfigurations",
+      JSON.stringify(configurations)
+    );
     setCurrentConfig(newConfig);
   };
 
@@ -71,22 +76,24 @@ export default function SettingsModal() {
       <AlertDialogContent>
         <AlertDialogHeader>
           <AlertDialogTitle className="text-xl font-bold mb-4">
-            Site Settings
+            {t("settings_modal.title")}
           </AlertDialogTitle>
         </AlertDialogHeader>
 
         <div className="flex items-center justify-between">
           <Label htmlFor="fontSize" className="text-center w-full">
-            Font Size
+            {t("settings_modal.font_size")}
           </Label>
           <Select value={fontSize} onValueChange={setFontSize}>
             <SelectTrigger className="col-span-3">
-              <SelectValue placeholder="Select font size" />
+              <SelectValue placeholder={t("settings_modal.font_size_ph")} />
             </SelectTrigger>
             <SelectContent>
-              <SelectItem value="small">Small</SelectItem>
-              <SelectItem value="medium">Medium</SelectItem>
-              <SelectItem value="large">Large</SelectItem>
+              <SelectItem value="small">{t("settings_modal.small")}</SelectItem>
+              <SelectItem value="medium">
+                {t("settings_modal.medium")}
+              </SelectItem>
+              <SelectItem value="large">{t("settings_modal.large")}</SelectItem>
             </SelectContent>
           </Select>
         </div>
@@ -95,7 +102,9 @@ export default function SettingsModal() {
         </div>
 
         <div className="flex flex-col space-y-4">
-          <Label className="text-center">API Keys and Engines</Label>
+          <Label className="text-center">
+            {t("settings_modal.select_engine_title")}
+          </Label>
           <div className="flex items-center justify-between">
             <Select
               value={selectedEngine || ""}
@@ -112,7 +121,7 @@ export default function SettingsModal() {
               }}
             >
               <SelectTrigger className="w-[40%]">
-                <SelectValue placeholder="Select engine" />
+                <SelectValue placeholder={t("settings_modal.select_engine")} />
               </SelectTrigger>
               <SelectContent>
                 {chatbotEngines.map((engine) => (
@@ -125,7 +134,7 @@ export default function SettingsModal() {
             <div className="relative w-[50%] mr-10">
               <Input
                 value={apiKey}
-                placeholder="Your API key"
+                placeholder={t("settings_modal.api_key_ph")}
                 className="pr-2"
                 onChange={(e) => setApiKey(e.target.value)}
               />
@@ -144,7 +153,9 @@ export default function SettingsModal() {
         </div>
 
         <AlertDialogFooter>
-          <AlertDialogCancel className="w-full">Ok</AlertDialogCancel>
+          <AlertDialogCancel className="w-full">
+            {t("continue")}
+          </AlertDialogCancel>
         </AlertDialogFooter>
       </AlertDialogContent>
     </AlertDialog>
diff --git a/client/src/components/modals/share-modal.tsx b/client/src/components/modals/share-modal.tsx
index 5006ce6..7a94d95 100644
--- a/client/src/components/modals/share-modal.tsx
+++ b/client/src/components/modals/share-modal.tsx
@@ -8,6 +8,7 @@ import {
   AlertDialogTitle,
 } from "@/components/ui/alert-dialog";
 import { useShareModal } from "@/stores/modal-store";
+import { useTranslation } from "react-i18next";
 import {
   EmailIcon,
   EmailShareButton,
@@ -28,6 +29,7 @@ import {
 export default function ShareModal() {
   const modal = useShareModal();
   const { title, shareUrl } = modal.extras;
+  const { t } = useTranslation();
 
   return (
     <AlertDialog open={modal.isOpen} onOpenChange={() => modal.onClose()}>
@@ -63,7 +65,7 @@ export default function ShareModal() {
           </AlertDialogDescription>
         </AlertDialogHeader>
         <AlertDialogFooter>
-          <AlertDialogCancel>Close</AlertDialogCancel>
+          <AlertDialogCancel>{t("continue")}</AlertDialogCancel>
         </AlertDialogFooter>
       </AlertDialogContent>
     </AlertDialog>
diff --git a/client/src/components/modals/translate-magic-modal.tsx b/client/src/components/modals/translate-magic-modal.tsx
index 694271a..f51d12b 100644
--- a/client/src/components/modals/translate-magic-modal.tsx
+++ b/client/src/components/modals/translate-magic-modal.tsx
@@ -22,6 +22,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "../ui/select";
+import { useTranslation } from "react-i18next";
 
 const markdownToPlainText = (markdown: string) => {
   return markdown
@@ -53,7 +54,7 @@ const languageOptions = [
 export default function TranslateMagicModal() {
   const modal = useTranslateMagicModal();
   const initialText = modal.extras.text || "";
-
+  const { t } = useTranslation();
   const [text, setText] = useState("");
   const [language, setLanguage] = useState("");
   const [loading, setLoading] = useState(false);
@@ -116,7 +117,7 @@ export default function TranslateMagicModal() {
         <AlertDialogHeader>
           <AlertDialogTitle>
             <div className="flex items-center justify-between">
-              <p>Translate Text to Different Languages</p>
+              <p>{t("translate_modal.title")}</p>
               <Button
                 variant={"outline"}
                 size={"icon"}
@@ -128,13 +129,12 @@ export default function TranslateMagicModal() {
             </div>
           </AlertDialogTitle>
           <AlertDialogDescription>
-            Select a language to translate your text and view it in markdown
-            format.
+            {t("translate_modal.sub_title")}
           </AlertDialogDescription>
           <div className="my-4 space-y-2">
             <Select onValueChange={(c) => setLanguage(c)}>
               <SelectTrigger>
-                <SelectValue placeholder="language" />
+                <SelectValue placeholder={t("navbar.language")} />
               </SelectTrigger>
               <SelectContent>
                 {languageOptions.map((lang) => (
@@ -150,7 +150,7 @@ export default function TranslateMagicModal() {
               onChange={(e) => setText(e.target.value)} // Update state on change
               rows={5}
               className="w-full p-2 border rounded"
-              placeholder="Enter text here..."
+              placeholder={t("tts_modal.text")}
             />
           </div>
         </AlertDialogHeader>
@@ -161,7 +161,7 @@ export default function TranslateMagicModal() {
             className="btn btn-secondary ml-2"
             variant={"secondary"}
           >
-            <Download /> Text
+            <Download /> {t("tts_modal.text")}
           </Button>
           <Button
             disabled={loading}
diff --git a/client/src/components/modals/update-chatbot-modal.tsx b/client/src/components/modals/update-chatbot-modal.tsx
index 2898c0a..87f854b 100644
--- a/client/src/components/modals/update-chatbot-modal.tsx
+++ b/client/src/components/modals/update-chatbot-modal.tsx
@@ -36,6 +36,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "../ui/select";
+import { useTranslation } from "react-i18next";
 
 interface Extras {
   id: number;
@@ -47,7 +48,6 @@ interface Extras {
 
 export default function UpdateChatbotModal() {
   const modal = useUpdateChatbotModal();
-
   const {
     id,
     prevName,
@@ -58,6 +58,7 @@ export default function UpdateChatbotModal() {
   const [selectedVersion, setSelectedVersion] = useState<number | null>(null); // State for selected version
   const [versions, setVersions] = useState<ChatbotVersion[]>([]);
   const [loading, setLoading] = useState(false); // Loading state for request
+  const { t } = useTranslation();
   const rq = useQueryClient();
   const form = useForm<z.infer<typeof createChatbotSchema>>({
     resolver: zodResolver(createChatbotSchema),
@@ -162,7 +163,7 @@ export default function UpdateChatbotModal() {
       <AlertDialogContent>
         <AlertDialogHeader>
           <AlertDialogTitle className="text-xl font-bold mb-4">
-            Update The chatbot
+            {t("chatbot_update.title")}
           </AlertDialogTitle>
         </AlertDialogHeader>
         <Form {...form}>
@@ -176,7 +177,7 @@ export default function UpdateChatbotModal() {
               name="name"
               render={({ field }) => (
                 <FormItem>
-                  <FormLabel>Name</FormLabel>
+                  <FormLabel>{t("auth.name")}</FormLabel>
                   <FormControl>
                     <Input {...field} />
                   </FormControl>
@@ -191,7 +192,7 @@ export default function UpdateChatbotModal() {
               name="prompt"
               render={({ field }) => (
                 <FormItem>
-                  <FormLabel>Prompt</FormLabel>
+                  <FormLabel>{t("create_chatbot.prompt")}</FormLabel>
                   <FormControl>
                     <Textarea {...field} />
                   </FormControl>
@@ -205,7 +206,7 @@ export default function UpdateChatbotModal() {
               name="category"
               render={({ field }) => (
                 <FormItem>
-                  <FormLabel>Category</FormLabel>
+                  <FormLabel>{t("create_chatbot.category")}</FormLabel>
                   <Select
                     onValueChange={field.onChange}
                     defaultValue={field.value}
@@ -228,7 +229,7 @@ export default function UpdateChatbotModal() {
             {versions.length <= 1 ? null : (
               <>
                 <div>
-                  <FormLabel>Select Version to Revert</FormLabel>
+                  <FormLabel>{t("chatbot_update.revert_title")}</FormLabel>
                   <Select
                     onValueChange={(value) => {
                       const index = versions.findIndex(
@@ -243,13 +244,15 @@ export default function UpdateChatbotModal() {
                   >
                     <FormControl>
                       <SelectTrigger>
-                        <SelectValue placeholder="Select a version" />
+                        <SelectValue
+                          placeholder={t("chatbot_update.select_version")}
+                        />
                       </SelectTrigger>
                     </FormControl>
                     <SelectContent>
                       {versions.map((version) => (
                         <SelectItem value={`${version.id}`} key={version.id}>
-                          Version {version.version_number}
+                          {t("chatbot_update.version")} {version.version_number}
                         </SelectItem>
                       ))}
                     </SelectContent>
@@ -266,19 +269,19 @@ export default function UpdateChatbotModal() {
                   ) : (
                     <StepBack className="mr-2" />
                   )}
-                  Revert
+                  {t("chatbot_update.revert")}
                 </Button>
               </>
             )}
 
             <Button className="w-full" type="submit" disabled={loading}>
-              {loading ? <Loader2 className="animate-spin" /> : "Save"}
+              {loading ? <Loader2 className="animate-spin" /> : t("save")}
             </Button>
           </form>
         </Form>
         <AlertDialogFooter>
           <AlertDialogCancel className="w-full" disabled={loading}>
-            Cancel
+            {t("cancel")}
           </AlertDialogCancel>
         </AlertDialogFooter>
       </AlertDialogContent>
diff --git a/client/src/components/modals/update-profile-modal.tsx b/client/src/components/modals/update-profile-modal.tsx
index 1a8fcbc..71de139 100644
--- a/client/src/components/modals/update-profile-modal.tsx
+++ b/client/src/components/modals/update-profile-modal.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 import {
   AlertDialog,
@@ -29,13 +29,14 @@ import { SERVER_URL } from "@/lib/utils";
 import { Loader2 } from "lucide-react";
 import { Textarea } from "../ui/textarea";
 import { useQueryClient } from "@tanstack/react-query";
+import { useTranslation } from "react-i18next";
 
 export default function UpdateProfileModal() {
   const modal = useUpdateProfileModal();
-
   const { prevName, prevBio, prevUsername } = modal.extras;
 
   const [loading, setLoading] = useState(false); // Loading state for request
+  const { t } = useTranslation();
   const rq = useQueryClient();
   const form = useForm<z.infer<typeof updateProfileSchema>>({
     resolver: zodResolver(updateProfileSchema),
@@ -79,20 +80,22 @@ export default function UpdateProfileModal() {
     }
   }
 
-  if (form.getValues().name === "" || form.getValues().name === undefined) {
-    form.reset({
-      name: prevName,
-      bio: prevBio,
-      username: prevUsername,
-    });
-  }
+  useEffect(() => {
+    if (modal.isOpen) {
+      form.reset({
+        name: prevName,
+        bio: prevBio,
+        username: prevUsername,
+      });
+    }
+  }, [modal.isOpen, prevName, prevBio, prevUsername]); // Depend on modal open state and initial text
 
   return (
     <AlertDialog open={modal.isOpen} onOpenChange={() => modal.onClose()}>
       <AlertDialogContent>
         <AlertDialogHeader>
           <AlertDialogTitle className="text-xl font-bold mb-4">
-            Update The Profile
+            {t("profile_update.title")}
           </AlertDialogTitle>
         </AlertDialogHeader>
         <Form {...form}>
@@ -106,7 +109,7 @@ export default function UpdateProfileModal() {
               name="name"
               render={({ field }) => (
                 <FormItem>
-                  <FormLabel>Name</FormLabel>
+                  <FormLabel>{t("auth.name")}</FormLabel>
                   <FormControl>
                     <Input {...field} />
                   </FormControl>
@@ -121,7 +124,7 @@ export default function UpdateProfileModal() {
               name="username"
               render={({ field }) => (
                 <FormItem>
-                  <FormLabel>Username</FormLabel>
+                  <FormLabel>{t("auth.username")}</FormLabel>
                   <FormControl>
                     <Input {...field} />
                   </FormControl>
@@ -136,7 +139,7 @@ export default function UpdateProfileModal() {
               name="bio"
               render={({ field }) => (
                 <FormItem>
-                  <FormLabel>Bio</FormLabel>
+                  <FormLabel>{t("profile_update.bio")}</FormLabel>
                   <FormControl>
                     <Textarea {...field} />
                   </FormControl>
@@ -146,13 +149,13 @@ export default function UpdateProfileModal() {
               )}
             />
             <Button className="w-full" type="submit" disabled={loading}>
-              {loading ? <Loader2 className="animate-spin" /> : "Save"}
+              {loading ? <Loader2 className="animate-spin" /> : t("save")}
             </Button>
           </form>
         </Form>
         <AlertDialogFooter>
           <AlertDialogCancel className="w-full" disabled={loading}>
-            Cancel
+            {t("cancel")}
           </AlertDialogCancel>
         </AlertDialogFooter>
       </AlertDialogContent>
diff --git a/client/src/i18n/i18n.ts b/client/src/i18n/i18n.ts
new file mode 100644
index 0000000..ae6952b
--- /dev/null
+++ b/client/src/i18n/i18n.ts
@@ -0,0 +1,27 @@
+import i18n from "i18next";
+import { initReactI18next } from "react-i18next";
+import { en, enMetadata } from "./locales/en";
+import { es } from "./locales/es";
+import { hi } from "./locales/hi";
+import { ja } from "./locales/ja";
+import { fr } from "./locales/fr";
+const resources = {
+  en,
+  es,
+  hi,
+  ja,
+  fr,
+};
+
+i18n.use(initReactI18next).init({
+  resources,
+  lng: enMetadata.code,
+  interpolation: {
+    escapeValue: false,
+  },
+  fallbackLng: enMetadata.code,
+
+  debug: false,
+});
+
+export { i18n };
diff --git a/client/src/i18n/locales/en.ts b/client/src/i18n/locales/en.ts
new file mode 100644
index 0000000..8270451
--- /dev/null
+++ b/client/src/i18n/locales/en.ts
@@ -0,0 +1,213 @@
+import { LanguageMetadata } from "../types";
+
+export const en = {
+  translation: {
+    like: "Like",
+    report: "Report",
+    chat: "Chat",
+    edit: "Edit",
+    share: "Share",
+    delete: "Delete",
+    publish: "Publish",
+    unpublish: "Unpublish",
+    no_bots: "No bots available.",
+    no_images: "No Images available.",
+    contributions: "Contributions",
+    created_by: "Created by",
+    download: "Download",
+    joined: "Joined",
+    cancel: "Cancel",
+    continue: "Continue",
+    save: "Save",
+    navbar: {
+      leaderboard: "Leaderboard",
+      language: "Language",
+      hub: "Hub",
+      sign_up: "sign Up",
+      login: "Login",
+      logout: "Log out",
+      settings: "Settings",
+      my_chatbots: "My Chatbots",
+      my_images: "My Images",
+      profile: "Profile",
+    },
+    notfound: {
+      heading: "Oops! Looks like the page doesn't exist anymore",
+      goto: "To go to the Home Page",
+      click: "Click Here",
+    },
+    commandbox: {
+      no_result: "No results found.",
+      create_chatbot: "Create Chatbot",
+      tts: "Text-to-Speech Magic",
+      translate: "Translate Magic",
+      image_generation: "Generate Images",
+      anonymous_chat: "Anonymous Chat",
+      hub: "Marketplace Hub",
+      socialize: "Socialize",
+      input_ph: "Type a command or search...",
+    },
+    message: {
+      ph: "Type your message..",
+      loading: "Loading previous data..",
+    },
+    chatbot_page: {
+      export: "Export",
+      delete_all: "Delete All",
+      action: "Action",
+      translate: "Translate",
+      listen: "Listen",
+    },
+    chatbot_view: {
+      not_found: "No Chatbot data available.",
+      goto: "Go to Hub",
+      creator: "Creator",
+      prompt: "Prompt",
+      current_ver: "Current Version",
+      comments: "Comments",
+      comment: "Comment",
+      leave_comment: "Leave a Comment",
+      name: "Name",
+      submit_comment: "Submit Comment",
+    },
+    dashboard: {
+      welcome: "Welcome",
+      chatbot_of_day: "Chatbot of the Day",
+      image_of_day: "Image of the Day",
+      tip_of_day: "Tip of the Day",
+      message_of_day: "Message of the Day",
+      your_chatbots: "Your Chatbots",
+      new_chatbot: "New Chatbot",
+      system_chatbots: "System Chatbots",
+      no: "No chatbots!",
+    },
+    hub_page: {
+      heading: "Chatbots and AI Images Hub",
+      search: "Search...",
+      chatbots: "Chatbots",
+      images: "Images",
+      no_bots: "No bots available.",
+      no_images: "No Images available.",
+    },
+    leaderboard_page: {
+      no: "No leaderboard data available.",
+      goto: "Go to Dashboard",
+    },
+    landing: {
+      get_started: "Get Started",
+      top_heading: "Welcome to Bot Verse",
+      top_subheading: "Your hub for AI chatbots to solve queries effortlessly.",
+      about_heading: "About Bot Verse",
+      about_subheading:
+        "A platform for creating, sharing, and interacting with AI chatbots to enhance your productivity.",
+      feature_heading: "Features",
+      f1_heading: "Manage Your Chatbots",
+      f1_subheading:
+        "Effortlessly create, update, or delete your chatbots all in one place.",
+      f2_heading: "Share and Discover",
+      f2_subheading:
+        "Show off your chatbots and explore others’ creations for inspiration.",
+      f3_heading: "Chatbot Hub",
+      f3_subheading:
+        "Interact with multiple chatbots in one convenient location.",
+      f4_heading: "Helpful Chatbots",
+      f4_subheading:
+        "Utilize our pre-made chatbots for quick solutions to common tasks.",
+
+      contribute: "Contribute",
+      contribute_heading: "Open Source",
+      contribute_subheading1: "Bot Verse is an open-source project.",
+      contribute_subheading2:
+        "Contribute to our development and join our growing community of contributors!",
+    },
+    analytics: {
+      title: "Analytics Summary",
+      total_likes: "Total Likes",
+      total_reports: "Total Reports",
+      top_ranked_bot: "Top Ranked Bot",
+      top_ranked_image: "Top Ranked Image",
+      likes: "Likes",
+      my_images: "My Images",
+      my_chatbots: "My Chatbots",
+    },
+    auth: {
+      dont_account: "Don't have an account.",
+      create_one: "Create One",
+      login: "Login",
+      password: "Password",
+      username: "Username",
+      login_title: "Login to your account",
+      login_subtitle: "Use all new chatbots by other people like you.",
+      signup_title: "Create a new account",
+      signup_subtitle: "Use all new chatbots by other people like you.",
+      name: "Name",
+      email: "Email",
+      create: "Create",
+      have_account: "Already have an account",
+    },
+    create_chatbot: {
+      title: "Create a new Chatbot",
+      templates: "Select a Template",
+      prompt: "Prompt",
+      category: "Category",
+    },
+    delete_modal: {
+      title: "Are you absolutely sure?",
+      sub_title:
+        "This action cannot be undone. This will permanently delete your chatbot and remove it's data from our servers.",
+    },
+
+    generate_image: {
+      title: "Imgine a image and generate it",
+      sub_title:
+        "Let's see how you imagination is. I know you are creative enough.",
+      ph: "Enter your imagination prompt here...",
+      info: "If you want to save this Image in database then Click 'Capture'",
+      capture: "Capture",
+    },
+
+    profile_update: {
+      title: "Update The Profile",
+      bio: "Bio",
+    },
+    chatbot_update: {
+      title: "Update The chatbot",
+      revert: "Revert",
+      version: "Version",
+      select_version: "Select a version",
+      revert_title: "Select Version to Revert",
+    },
+
+    tts_modal: {
+      title: "Convert Text to speech and download",
+      sub_title:
+        "text is converted to audio file in mp3 format that will be downloaded automatically.",
+      generate: "Generate",
+      generating: "Generating...",
+      text: "Text",
+    },
+    translate_modal: {
+      title: "Translate Text to Different Languages",
+      sub_title:
+        "Select a language to translate your text and view it in markdown format.",
+      translating: "Translating...",
+      translate: "Translate",
+    },
+    settings_modal: {
+      title: "Site Settings",
+      font_size: "Font Size",
+      font_size_ph: "Select font size",
+      small: "Small",
+      medium: "Medium",
+      large: "Large",
+      select_engine_title: "API Keys and Engines",
+      select_engine: "Select engine",
+      api_key_ph: "Your API key",
+    },
+  },
+};
+
+export const enMetadata: LanguageMetadata = {
+  name: "English",
+  code: "en",
+};
diff --git a/client/src/i18n/locales/es.ts b/client/src/i18n/locales/es.ts
new file mode 100644
index 0000000..42b03a2
--- /dev/null
+++ b/client/src/i18n/locales/es.ts
@@ -0,0 +1,212 @@
+import { LanguageMetadata } from "../types";
+
+export const es = {
+  translation: {
+    like: "Me gusta",
+    report: "Reportar",
+    chat: "Chat",
+    edit: "Editar",
+    share: "Compartir",
+    delete: "Eliminar",
+    publish: "Publicar",
+    unpublish: "Despublicar",
+    no_bots: "No hay bots disponibles.",
+    no_images: "No hay imágenes disponibles.",
+    contributions: "Contribuciones",
+    created_by: "Creado por",
+    download: "Descargar",
+    joined: "Unido",
+    cancel: "Cancelar",
+    continue: "Continuar",
+    save: "Guardar",
+    navbar: {
+      leaderboard: "Clasificación",
+      language: "Idioma",
+      hub: "Centro",
+      sign_up: "Registrarse",
+      login: "Iniciar sesión",
+      logout: "Cerrar sesión",
+      settings: "Configuración",
+      my_chatbots: "Mis Chatbots",
+      my_images: "Mis Imágenes",
+      profile: "Perfil",
+    },
+    notfound: {
+      heading: "¡Ups! Parece que la página ya no existe",
+      goto: "Para ir a la página principal",
+      click: "Haga clic aquí",
+    },
+    commandbox: {
+      no_result: "No se encontraron resultados.",
+      create_chatbot: "Crear Chatbot",
+      tts: "Magia de Texto a Voz",
+      translate: "Magia de Traducción",
+      image_generation: "Generar Imágenes",
+      anonymous_chat: "Chat Anónimo",
+      hub: "Centro de Mercado",
+      socialize: "Socializar",
+      input_ph: "Escriba un comando o busque...",
+    },
+    message: {
+      ph: "Escriba su mensaje...",
+      loading: "Cargando datos anteriores...",
+    },
+    chatbot_page: {
+      export: "Exportar",
+      delete_all: "Eliminar Todo",
+      action: "Acción",
+      translate: "Traducir",
+      listen: "Escuchar",
+    },
+    chatbot_view: {
+      not_found: "No hay datos de chatbot disponibles.",
+      goto: "Ir al Centro",
+      creator: "Creador",
+      prompt: "Instrucción",
+      current_ver: "Versión Actual",
+      comments: "Comentarios",
+      comment: "Comentario",
+      leave_comment: "Dejar un Comentario",
+      name: "Nombre",
+      submit_comment: "Enviar Comentario",
+    },
+    dashboard: {
+      welcome: "Bienvenido",
+      chatbot_of_day: "Chatbot del Día",
+      image_of_day: "Imagen del Día",
+      tip_of_day: "Consejo del Día",
+      message_of_day: "Mensaje del Día",
+      your_chatbots: "Tus Chatbots",
+      new_chatbot: "Nuevo Chatbot",
+      system_chatbots: "Chatbots del Sistema",
+      no: "¡No hay chatbots!",
+    },
+    hub_page: {
+      heading: "Centro de Chatbots e Imágenes AI",
+      search: "Buscar...",
+      chatbots: "Chatbots",
+      images: "Imágenes",
+      no_bots: "No hay bots disponibles.",
+      no_images: "No hay imágenes disponibles.",
+    },
+    leaderboard_page: {
+      no: "No hay datos de clasificación disponibles.",
+      goto: "Ir al Panel",
+    },
+    landing: {
+      get_started: "Comenzar",
+      top_heading: "Bienvenido a Bot Verse",
+      top_subheading:
+        "Tu centro para chatbots de IA que resuelven consultas sin esfuerzo.",
+      about_heading: "Acerca de Bot Verse",
+      about_subheading:
+        "Una plataforma para crear, compartir e interactuar con chatbots de IA para mejorar tu productividad.",
+      feature_heading: "Características",
+      f1_heading: "Gestiona Tus Chatbots",
+      f1_subheading:
+        "Crea, actualiza o elimina tus chatbots fácilmente en un solo lugar.",
+      f2_heading: "Compartir y Descubrir",
+      f2_subheading:
+        "Muestra tus chatbots y explora las creaciones de otros para inspirarte.",
+      f3_heading: "Centro de Chatbots",
+      f3_subheading:
+        "Interactúa con múltiples chatbots en una ubicación conveniente.",
+      f4_heading: "Chatbots Útiles",
+      f4_subheading:
+        "Utiliza nuestros chatbots pre-hechos para soluciones rápidas a tareas comunes.",
+      contribute: "Contribuir",
+      contribute_heading: "Código Abierto",
+      contribute_subheading1: "Bot Verse es un proyecto de código abierto.",
+      contribute_subheading2:
+        "¡Contribuye a nuestro desarrollo y únete a nuestra comunidad creciente de colaboradores!",
+    },
+    analytics: {
+      title: "Resumen de Análisis",
+      total_likes: "Total de Me Gusta",
+      total_reports: "Total de Reportes",
+      top_ranked_bot: "Bot Mejor Calificado",
+      top_ranked_image: "Imagen Mejor Calificada",
+      likes: "Me Gusta",
+      my_images: "Mis Imágenes",
+      my_chatbots: "Mis Chatbots",
+    },
+    auth: {
+      dont_account: "¿No tienes una cuenta?",
+      create_one: "Crear una",
+      login: "Iniciar sesión",
+      password: "Contraseña",
+      username: "Nombre de usuario",
+      login_title: "Inicia sesión en tu cuenta",
+      login_subtitle:
+        "Utiliza los nuevos chatbots creados por otras personas como tú.",
+      signup_title: "Crear una cuenta nueva",
+      signup_subtitle:
+        "Utiliza los nuevos chatbots creados por otras personas como tú.",
+      name: "Nombre",
+      email: "Correo electrónico",
+      create: "Crear",
+      have_account: "¿Ya tienes una cuenta?",
+    },
+    create_chatbot: {
+      title: "Crear un nuevo Chatbot",
+      templates: "Selecciona una Plantilla",
+      prompt: "Instrucción",
+      category: "Categoría",
+    },
+    delete_modal: {
+      title: "¿Estás absolutamente seguro?",
+      sub_title:
+        "Esta acción no se puede deshacer. Esto eliminará permanentemente tu chatbot y eliminará sus datos de nuestros servidores.",
+    },
+    generate_image: {
+      title: "Imagina una imagen y créala",
+      sub_title:
+        "Veamos qué tan creativa es tu imaginación. Sé que eres lo suficientemente creativo.",
+      ph: "Escribe tu instrucción imaginativa aquí...",
+      info: "Si deseas guardar esta imagen en la base de datos, haz clic en 'Capturar'",
+      capture: "Capturar",
+    },
+    profile_update: {
+      title: "Actualizar Perfil",
+      bio: "Biografía",
+    },
+    chatbot_update: {
+      title: "Actualizar el Chatbot",
+      revert: "Revertir",
+      version: "Versión",
+      select_version: "Selecciona una versión",
+      revert_title: "Selecciona la Versión para Revertir",
+    },
+    tts_modal: {
+      title: "Convertir Texto a Voz y Descargar",
+      sub_title:
+        "El texto se convierte en un archivo de audio en formato MP3 que se descargará automáticamente.",
+      generate: "Generar",
+      generating: "Generando...",
+      text: "Texto",
+    },
+    translate_modal: {
+      title: "Traducir Texto a Diferentes Idiomas",
+      sub_title:
+        "Selecciona un idioma para traducir tu texto y verlo en formato markdown.",
+      translating: "Traduciendo...",
+      translate: "Traducir",
+    },
+    settings_modal: {
+      title: "Configuración del Sitio",
+      font_size: "Tamaño de Fuente",
+      font_size_ph: "Selecciona el tamaño de fuente",
+      small: "Pequeño",
+      medium: "Medio",
+      large: "Grande",
+      select_engine_title: "Claves API y Motores",
+      select_engine: "Selecciona el motor",
+      api_key_ph: "Tu clave API",
+    },
+  },
+};
+
+export const esMetadata: LanguageMetadata = {
+  name: "Español",
+  code: "es",
+};
diff --git a/client/src/i18n/locales/fr.ts b/client/src/i18n/locales/fr.ts
new file mode 100644
index 0000000..b039793
--- /dev/null
+++ b/client/src/i18n/locales/fr.ts
@@ -0,0 +1,212 @@
+import { LanguageMetadata } from "../types";
+
+export const fr = {
+  translation: {
+    like: "J'aime",
+    report: "Signaler",
+    chat: "Chat",
+    edit: "Éditer",
+    share: "Partager",
+    delete: "Supprimer",
+    publish: "Publier",
+    unpublish: "Dépublier",
+    no_bots: "Pas de bots disponibles.",
+    no_images: "Pas d'images disponibles.",
+    contributions: "Contributions",
+    created_by: "Créé par",
+    download: "Télécharger",
+    joined: "Rejoint",
+    cancel: "Annuler",
+    continue: "Continuer",
+    save: "Enregistrer",
+    navbar: {
+      leaderboard: "Classement",
+      language: "Langue",
+      hub: "Hub",
+      sign_up: "S'inscrire",
+      login: "Se connecter",
+      logout: "Se déconnecter",
+      settings: "Paramètres",
+      my_chatbots: "Mes Chatbots",
+      my_images: "Mes Images",
+      profile: "Profil",
+    },
+    notfound: {
+      heading: "Oups ! Il semble que la page n'existe plus",
+      goto: "Pour aller à la page d'accueil",
+      click: "Cliquez ici",
+    },
+    commandbox: {
+      no_result: "Aucun résultat trouvé.",
+      create_chatbot: "Créer un Chatbot",
+      tts: "Texte en Parole",
+      translate: "Traduction",
+      image_generation: "Générer des Images",
+      anonymous_chat: "Chat Anonyme",
+      hub: "Hub de Marché",
+      socialize: "Socialiser",
+      input_ph: "Tapez une commande ou cherchez...",
+    },
+    message: {
+      ph: "Tapez votre message...",
+      loading: "Chargement des données précédentes...",
+    },
+    chatbot_page: {
+      export: "Exporter",
+      delete_all: "Tout Supprimer",
+      action: "Action",
+      translate: "Traduire",
+      listen: "Écouter",
+    },
+    chatbot_view: {
+      not_found: "Aucune donnée de chatbot disponible.",
+      goto: "Aller au Hub",
+      creator: "Créateur",
+      prompt: "Instruction",
+      current_ver: "Version Actuelle",
+      comments: "Commentaires",
+      comment: "Commentaire",
+      leave_comment: "Laisser un Commentaire",
+      name: "Nom",
+      submit_comment: "Soumettre le Commentaire",
+    },
+    dashboard: {
+      welcome: "Bienvenue",
+      chatbot_of_day: "Chatbot du Jour",
+      image_of_day: "Image du Jour",
+      tip_of_day: "Astuce du Jour",
+      message_of_day: "Message du Jour",
+      your_chatbots: "Vos Chatbots",
+      new_chatbot: "Nouveau Chatbot",
+      system_chatbots: "Chatbots du Système",
+      no: "Aucun chatbot !",
+    },
+    hub_page: {
+      heading: "Hub des Chatbots et Images IA",
+      search: "Recherche...",
+      chatbots: "Chatbots",
+      images: "Images",
+      no_bots: "Pas de bots disponibles.",
+      no_images: "Pas d'images disponibles.",
+    },
+    leaderboard_page: {
+      no: "Pas de données de classement disponibles.",
+      goto: "Aller au Tableau de Bord",
+    },
+    landing: {
+      get_started: "Commencer",
+      top_heading: "Bienvenue dans Bot Verse",
+      top_subheading:
+        "Votre hub pour des chatbots IA pour résoudre des requêtes facilement.",
+      about_heading: "À propos de Bot Verse",
+      about_subheading:
+        "Une plateforme pour créer, partager et interagir avec des chatbots IA pour améliorer votre productivité.",
+      feature_heading: "Fonctionnalités",
+      f1_heading: "Gérer Vos Chatbots",
+      f1_subheading:
+        "Créez, mettez à jour ou supprimez facilement vos chatbots en un seul endroit.",
+      f2_heading: "Partager et Découvrir",
+      f2_subheading:
+        "Montrez vos chatbots et explorez les créations des autres pour vous inspirer.",
+      f3_heading: "Hub de Chatbots",
+      f3_subheading:
+        "Interagissez avec plusieurs chatbots en un seul endroit pratique.",
+      f4_heading: "Chatbots Utiles",
+      f4_subheading:
+        "Utilisez nos chatbots pré-faits pour des solutions rapides aux tâches courantes.",
+      contribute: "Contribuer",
+      contribute_heading: "Open Source",
+      contribute_subheading1: "Bot Verse est un projet open source.",
+      contribute_subheading2:
+        "Contribuez à notre développement et rejoignez notre communauté croissante de contributeurs !",
+    },
+    analytics: {
+      title: "Résumé des Analyses",
+      total_likes: "Total des J'aime",
+      total_reports: "Total des Signalements",
+      top_ranked_bot: "Bot le Mieux Classé",
+      top_ranked_image: "Image la Mieux Classée",
+      likes: "J'aime",
+      my_images: "Mes Images",
+      my_chatbots: "Mes Chatbots",
+    },
+    auth: {
+      dont_account: "Vous n'avez pas de compte.",
+      create_one: "Créez-en un",
+      login: "Connexion",
+      password: "Mot de passe",
+      username: "Nom d'utilisateur",
+      login_title: "Connectez-vous à votre compte",
+      login_subtitle:
+        "Utilisez tous les nouveaux chatbots créés par d'autres personnes comme vous.",
+      signup_title: "Créer un nouveau compte",
+      signup_subtitle:
+        "Utilisez tous les nouveaux chatbots créés par d'autres personnes comme vous.",
+      name: "Nom",
+      email: "Email",
+      create: "Créer",
+      have_account: "Vous avez déjà un compte",
+    },
+    create_chatbot: {
+      title: "Créer un nouveau Chatbot",
+      templates: "Sélectionnez un Modèle",
+      prompt: "Instruction",
+      category: "Catégorie",
+    },
+    delete_modal: {
+      title: "Êtes-vous absolument sûr ?",
+      sub_title:
+        "Cette action est irréversible. Cela supprimera définitivement votre chatbot et effacera ses données de nos serveurs.",
+    },
+    generate_image: {
+      title: "Imaginez une image et créez-la",
+      sub_title:
+        "Voyons à quel point votre imagination est créative. Je sais que vous êtes assez créatif.",
+      ph: "Entrez votre commande imaginative ici...",
+      info: "Si vous souhaitez enregistrer cette image dans la base de données, cliquez sur 'Capturer'",
+      capture: "Capturer",
+    },
+    profile_update: {
+      title: "Mettre à Jour le Profil",
+      bio: "Biographie",
+    },
+    chatbot_update: {
+      title: "Mettre à Jour le Chatbot",
+      revert: "Revenir",
+      version: "Version",
+      select_version: "Sélectionnez une version",
+      revert_title: "Sélectionnez la Version pour Revenir",
+    },
+    tts_modal: {
+      title: "Convertir du Texte en Parole et Télécharger",
+      sub_title:
+        "Le texte est converti en fichier audio au format MP3 qui sera téléchargé automatiquement.",
+      generate: "Générer",
+      generating: "Génération...",
+      text: "Texte",
+    },
+    translate_modal: {
+      title: "Traduire du Texte en Différentes Langues",
+      sub_title:
+        "Sélectionnez une langue pour traduire votre texte et le voir au format markdown.",
+      translating: "Traduction...",
+      translate: "Traduire",
+    },
+    settings_modal: {
+      title: "Paramètres du Site",
+      font_size: "Taille de la Police",
+      font_size_ph: "Sélectionnez la taille de la police",
+      small: "Petit",
+      medium: "Moyen",
+      large: "Grand",
+      select_engine_title: "Clés API et Moteurs",
+      select_engine: "Sélectionnez un moteur",
+      api_key_ph: "Votre clé API",
+    },
+  },
+};
+
+export const frMetadata: LanguageMetadata = {
+  name: "Français",
+  code: "fr",
+};
diff --git a/client/src/i18n/locales/hi.ts b/client/src/i18n/locales/hi.ts
new file mode 100644
index 0000000..6edb2d0
--- /dev/null
+++ b/client/src/i18n/locales/hi.ts
@@ -0,0 +1,205 @@
+import { LanguageMetadata } from "../types";
+
+export const hi = {
+  translation: {
+    like: "पसंद",
+    report: "रिपोर्ट",
+    chat: "चैट",
+    edit: "संपादित करें",
+    share: "साझा करें",
+    delete: "हटाएं",
+    publish: "प्रकाशित करें",
+    unpublish: "अप्रकाशित करें",
+    no_bots: "कोई बॉट उपलब्ध नहीं है।",
+    no_images: "कोई छवियां उपलब्ध नहीं हैं।",
+    contributions: "योगदान",
+    created_by: "द्वारा निर्मित",
+    download: "डाउनलोड",
+    joined: "शामिल हो गए",
+    cancel: "रद्द करें",
+    continue: "जारी रखें",
+    save: "सहेजें",
+    navbar: {
+      leaderboard: "नेतृत्वकर्ता बोर्ड",
+      language: "भाषा",
+      hub: "हब",
+      sign_up: "साइन अप",
+      login: "लॉग इन",
+      logout: "लॉग आउट",
+      settings: "सेटिंग्स",
+      my_chatbots: "मेरे चैटबॉट्स",
+      my_images: "मेरी छवियां",
+      profile: "प्रोफ़ाइल",
+    },
+    notfound: {
+      heading: "ओह! ऐसा लगता है कि पेज अब उपलब्ध नहीं है",
+      goto: "मुख पृष्ठ पर जाने के लिए",
+      click: "यहाँ क्लिक करें",
+    },
+    commandbox: {
+      no_result: "कोई परिणाम नहीं मिला।",
+      create_chatbot: "चैटबॉट बनाएं",
+      tts: "टेक्स्ट-टू-स्पीच मैजिक",
+      translate: "अनुवाद मैजिक",
+      image_generation: "छवियां उत्पन्न करें",
+      anonymous_chat: "अनाम चैट",
+      hub: "मार्केटप्लेस हब",
+      socialize: "सामाजिककरण",
+      input_ph: "एक कमांड टाइप करें या खोजें...",
+    },
+    message: {
+      ph: "अपना संदेश टाइप करें...",
+      loading: "पिछला डेटा लोड हो रहा है...",
+    },
+    chatbot_page: {
+      export: "निर्यात",
+      delete_all: "सभी हटाएं",
+      action: "क्रिया",
+      translate: "अनुवाद करें",
+      listen: "सुनें",
+    },
+    chatbot_view: {
+      not_found: "कोई चैटबॉट डेटा उपलब्ध नहीं है।",
+      goto: "हब पर जाएं",
+      creator: "निर्माता",
+      prompt: "प्रॉम्प्ट",
+      current_ver: "वर्तमान संस्करण",
+      comments: "टिप्पणियाँ",
+      comment: "टिप्पणी",
+      leave_comment: "टिप्पणी छोड़ें",
+      name: "नाम",
+      submit_comment: "टिप्पणी सबमिट करें",
+    },
+    dashboard: {
+      welcome: "स्वागत है",
+      chatbot_of_day: "दिन का चैटबॉट",
+      image_of_day: "दिन की छवि",
+      tip_of_day: "दिन की टिप",
+      message_of_day: "दिन का संदेश",
+      your_chatbots: "आपके चैटबॉट्स",
+      new_chatbot: "नया चैटबॉट",
+      system_chatbots: "सिस्टम चैटबॉट्स",
+      no: "कोई चैटबॉट्स नहीं!",
+    },
+    hub_page: {
+      heading: "चैटबॉट्स और एआई छवियां हब",
+      search: "खोजें...",
+      chatbots: "चैटबॉट्स",
+      images: "छवियां",
+      no_bots: "कोई बॉट उपलब्ध नहीं है।",
+      no_images: "कोई छवियां उपलब्ध नहीं हैं।",
+    },
+    leaderboard_page: {
+      no: "कोई नेतृत्वकर्ता डेटा उपलब्ध नहीं है।",
+      goto: "डैशबोर्ड पर जाएं",
+    },
+    landing: {
+      get_started: "शुरू करें",
+      top_heading: "बॉट वर्स में आपका स्वागत है",
+      top_subheading: "एआई चैटबॉट्स के साथ आसानी से सवालों का हल करें।",
+      about_heading: "बॉट वर्स के बारे में",
+      about_subheading:
+        "एआई चैटबॉट्स का निर्माण, साझा करना, और इंटरैक्ट करने का एक मंच जो आपकी उत्पादकता को बढ़ाता है।",
+      feature_heading: "विशेषताएं",
+      f1_heading: "अपने चैटबॉट्स को प्रबंधित करें",
+      f1_subheading:
+        "अपने चैटबॉट्स को आसानी से बनाएं, अपडेट करें, या हटाएं सब एक ही जगह।",
+      f2_heading: "साझा करें और खोजें",
+      f2_subheading:
+        "अपने चैटबॉट्स को दिखाएं और दूसरों के निर्माणों से प्रेरणा लें।",
+      f3_heading: "चैटबॉट हब",
+      f3_subheading: "एक सुविधाजनक स्थान पर कई चैटबॉट्स के साथ इंटरैक्ट करें।",
+      f4_heading: "सहायक चैटबॉट्स",
+      f4_subheading:
+        "तेजी से हल पाने के लिए हमारे पूर्व-निर्मित चैटबॉट्स का उपयोग करें।",
+
+      contribute: "योगदान करें",
+      contribute_heading: "ओपन सोर्स",
+      contribute_subheading1: "बॉट वर्स एक ओपन-सोर्स परियोजना है।",
+      contribute_subheading2:
+        "हमारे विकास में योगदान करें और योगदानकर्ताओं के बढ़ते समुदाय में शामिल हों!",
+    },
+    analytics: {
+      title: "विश्लेषण सारांश",
+      total_likes: "कुल पसंद",
+      total_reports: "कुल रिपोर्ट",
+      top_ranked_bot: "शीर्ष रैंक बॉट",
+      top_ranked_image: "शीर्ष रैंक छवि",
+      likes: "पसंद",
+      my_images: "मेरी छवियां",
+      my_chatbots: "मेरे चैटबॉट्स",
+    },
+    auth: {
+      dont_account: "खाता नहीं है।",
+      create_one: "एक बनाएं",
+      login: "लॉगिन",
+      password: "पासवर्ड",
+      username: "उपयोगकर्ता नाम",
+      login_title: "अपने खाते में लॉगिन करें",
+      login_subtitle: "अन्य लोगों के नए चैटबॉट्स का उपयोग करें।",
+      signup_title: "एक नया खाता बनाएं",
+      signup_subtitle: "अन्य लोगों के नए चैटबॉट्स का उपयोग करें।",
+      name: "नाम",
+      email: "ईमेल",
+      create: "बनाएं",
+      have_account: "पहले से खाता है",
+    },
+    create_chatbot: {
+      title: "नया चैटबॉट बनाएं",
+      templates: "एक टेम्पलेट चुनें",
+      prompt: "प्रॉम्प्ट",
+      category: "श्रेणी",
+    },
+    delete_modal: {
+      title: "क्या आप वाकई सुनिश्चित हैं?",
+      sub_title:
+        "यह क्रिया उलटी नहीं की जा सकती। यह आपके चैटबॉट को स्थायी रूप से हटा देगा और हमारे सर्वर से इसके डेटा को हटा देगा।",
+    },
+    generate_image: {
+      title: "एक छवि की कल्पना करें और इसे उत्पन्न करें",
+      sub_title:
+        "चलो देखते हैं आपकी कल्पना कैसी है। मुझे पता है कि आप काफी रचनात्मक हैं।",
+      ph: "यहां अपनी कल्पना का प्रॉम्प्ट दर्ज करें...",
+      info: "यदि आप इस छवि को डेटाबेस में सहेजना चाहते हैं तो 'कैप्चर' पर क्लिक करें",
+      capture: "कैप्चर करें",
+    },
+    profile_update: {
+      title: "प्रोफ़ाइल अपडेट करें",
+      bio: "जीवनी",
+    },
+    chatbot_update: {
+      title: "चैटबॉट अपडेट करें",
+      revert: "पुनःस्थापित करें",
+      version: "संस्करण",
+      select_version: "एक संस्करण चुनें",
+      revert_title: "पुनःस्थापित करने के लिए संस्करण चुनें",
+    },
+    tts_modal: {
+      title: "टेक्स्ट को स्पीच में बदलें और डाउनलोड करें",
+      sub_title:
+        "पाठ को एमपी3 प्रारूप में ऑडियो फ़ाइल में बदला जाता है जो स्वचालित रूप से डाउनलोड हो जाएगा।",
+      generate: "उत्पन्न करें",
+      generating: "उत्पन्न हो रहा है...",
+      text: "पाठ",
+    },
+    translate_modal: {
+      title: "पाठ का विभिन्न भाषाओं में अनुवाद करें",
+      sub_title:
+        "अपने पाठ को अनुवादित करने के लिए एक भाषा चुनें और इसे मार्कडाउन प्रारूप में देखें।",
+      translating: "अनुवाद कर रहा है...",
+      translate: "अनुवाद करें",
+    },
+    settings_modal: {
+      title: "साइट सेटिंग्स",
+      font_size: "फ़ॉन्ट आकार",
+      font_size_ph: "फ़ॉन्ट आकार चुनें",
+      small: "छोटा",
+      medium: "मध्यम",
+      large: "बड़ा",
+      select_engine_title: "API कीज और इंजन",
+      select_engine: "इंजन चुनें",
+      api_key_ph: "आपकी API कुंजी",
+    },
+  },
+};
+export const hiMetadata: LanguageMetadata = { name: "Hindi", code: "hi" };
diff --git a/client/src/i18n/locales/ja.ts b/client/src/i18n/locales/ja.ts
new file mode 100644
index 0000000..396006a
--- /dev/null
+++ b/client/src/i18n/locales/ja.ts
@@ -0,0 +1,207 @@
+import { LanguageMetadata } from "../types";
+
+export const ja = {
+  translation: {
+    like: "いいね",
+    report: "報告",
+    chat: "チャット",
+    edit: "編集",
+    share: "共有",
+    delete: "削除",
+    publish: "公開",
+    unpublish: "非公開",
+    no_bots: "利用可能なボットがありません。",
+    no_images: "利用可能な画像がありません。",
+    contributions: "貢献",
+    created_by: "作成者",
+    download: "ダウンロード",
+    joined: "参加済み",
+    cancel: "キャンセル",
+    continue: "続行",
+    save: "保存",
+    navbar: {
+      leaderboard: "リーダーボード",
+      language: "言語",
+      hub: "ハブ",
+      sign_up: "サインアップ",
+      login: "ログイン",
+      logout: "ログアウト",
+      settings: "設定",
+      my_chatbots: "私のチャットボット",
+      my_images: "私の画像",
+      profile: "プロフィール",
+    },
+    notfound: {
+      heading: "おっと！ページが存在しなくなったようです",
+      goto: "ホームページに移動するには",
+      click: "ここをクリック",
+    },
+    commandbox: {
+      no_result: "結果が見つかりませんでした。",
+      create_chatbot: "チャットボットを作成",
+      tts: "テキスト読み上げ",
+      translate: "翻訳",
+      image_generation: "画像生成",
+      anonymous_chat: "匿名チャット",
+      hub: "マーケットプレイスハブ",
+      socialize: "交流する",
+      input_ph: "コマンドを入力または検索...",
+    },
+    message: {
+      ph: "メッセージを入力...",
+      loading: "以前のデータを読み込んでいます...",
+    },
+    chatbot_page: {
+      export: "エクスポート",
+      delete_all: "すべて削除",
+      action: "アクション",
+      translate: "翻訳",
+      listen: "聞く",
+    },
+    chatbot_view: {
+      not_found: "利用可能なチャットボットデータがありません。",
+      goto: "ハブに移動",
+      creator: "作成者",
+      prompt: "プロンプト",
+      current_ver: "現在のバージョン",
+      comments: "コメント",
+      comment: "コメント",
+      leave_comment: "コメントを残す",
+      name: "名前",
+      submit_comment: "コメントを送信",
+    },
+    dashboard: {
+      welcome: "ようこそ",
+      chatbot_of_day: "今日のチャットボット",
+      image_of_day: "今日の画像",
+      tip_of_day: "今日のヒント",
+      message_of_day: "今日のメッセージ",
+      your_chatbots: "あなたのチャットボット",
+      new_chatbot: "新しいチャットボット",
+      system_chatbots: "システムチャットボット",
+      no: "チャットボットがありません！",
+    },
+    hub_page: {
+      heading: "チャットボットとAI画像ハブ",
+      search: "検索...",
+      chatbots: "チャットボット",
+      images: "画像",
+      no_bots: "利用可能なボットがありません。",
+      no_images: "利用可能な画像がありません。",
+    },
+    leaderboard_page: {
+      no: "リーダーボードデータがありません。",
+      goto: "ダッシュボードに移動",
+    },
+    landing: {
+      get_started: "始める",
+      top_heading: "Bot Verseへようこそ",
+      top_subheading:
+        "AIチャットボットで簡単に問い合わせを解決できるハブです。",
+      about_heading: "Bot Verseについて",
+      about_subheading:
+        "AIチャットボットを作成、共有、活用して生産性を向上するためのプラットフォームです。",
+      feature_heading: "機能",
+      f1_heading: "チャットボットの管理",
+      f1_subheading: "チャットボットを簡単に作成、更新、削除できます。",
+      f2_heading: "共有と発見",
+      f2_subheading:
+        "自分のチャットボットを見せたり、他の人の作品からインスピレーションを得たりできます。",
+      f3_heading: "チャットボットハブ",
+      f3_subheading: "複数のチャットボットと便利な場所でやり取りできます。",
+      f4_heading: "便利なチャットボット",
+      f4_subheading:
+        "よくあるタスクの迅速な解決のためのプリメイドチャットボットを活用してください。",
+      contribute: "貢献する",
+      contribute_heading: "オープンソース",
+      contribute_subheading1: "Bot Verseはオープンソースプロジェクトです。",
+      contribute_subheading2:
+        "開発に貢献し、成長するコミュニティに参加してください！",
+    },
+    analytics: {
+      title: "分析サマリー",
+      total_likes: "総いいね数",
+      total_reports: "総報告数",
+      top_ranked_bot: "最上位のボット",
+      top_ranked_image: "最上位の画像",
+      likes: "いいね",
+      my_images: "私の画像",
+      my_chatbots: "私のチャットボット",
+    },
+    auth: {
+      dont_account: "アカウントをお持ちではありませんか。",
+      create_one: "アカウントを作成する",
+      login: "ログイン",
+      password: "パスワード",
+      username: "ユーザー名",
+      login_title: "アカウントにログイン",
+      login_subtitle: "他の人と同じように新しいチャットボットを利用できます。",
+      signup_title: "新しいアカウントを作成",
+      signup_subtitle: "他の人と同じように新しいチャットボットを利用できます。",
+      name: "名前",
+      email: "メールアドレス",
+      create: "作成",
+      have_account: "すでにアカウントをお持ちですか",
+    },
+    create_chatbot: {
+      title: "新しいチャットボットを作成",
+      templates: "テンプレートを選択",
+      prompt: "プロンプト",
+      category: "カテゴリー",
+    },
+    delete_modal: {
+      title: "本当に実行してもよろしいですか？",
+      sub_title:
+        "この操作は元に戻せません。これにより、チャットボットが永久に削除され、サーバーからデータが削除されます。",
+    },
+    generate_image: {
+      title: "イメージを思い描き、それを生成",
+      sub_title:
+        "あなたの想像力を試してみましょう。きっと創造力に自信があるはずです。",
+      ph: "ここに想像するプロンプトを入力してください...",
+      info: "この画像をデータベースに保存したい場合は、「キャプチャ」をクリックしてください。",
+      capture: "キャプチャ",
+    },
+    profile_update: {
+      title: "プロフィールを更新",
+      bio: "自己紹介",
+    },
+    chatbot_update: {
+      title: "チャットボットを更新",
+      revert: "元に戻す",
+      version: "バージョン",
+      select_version: "バージョンを選択",
+      revert_title: "元に戻すバージョンを選択",
+    },
+    tts_modal: {
+      title: "テキストを音声に変換しダウンロード",
+      sub_title:
+        "テキストが自動的にMP3形式の音声ファイルに変換されダウンロードされます。",
+      generate: "生成",
+      generating: "生成中...",
+      text: "テキスト",
+    },
+    translate_modal: {
+      title: "テキストを異なる言語に翻訳",
+      sub_title: "テキストを翻訳する言語を選択し、Markdown形式で表示します。",
+      translating: "翻訳中...",
+      translate: "翻訳",
+    },
+    settings_modal: {
+      title: "サイト設定",
+      font_size: "フォントサイズ",
+      font_size_ph: "フォントサイズを選択",
+      small: "小",
+      medium: "中",
+      large: "大",
+      select_engine_title: "APIキーとエンジン",
+      select_engine: "エンジンを選択",
+      api_key_ph: "あなたのAPIキー",
+    },
+  },
+};
+
+export const jaMetadata: LanguageMetadata = {
+  name: "日本語",
+  code: "ja",
+};
diff --git a/client/src/i18n/types.ts b/client/src/i18n/types.ts
new file mode 100644
index 0000000..9fea563
--- /dev/null
+++ b/client/src/i18n/types.ts
@@ -0,0 +1,8 @@
+import type { en } from "./locales/en";
+
+export type LanguageTranslation = typeof en;
+
+export type LanguageMetadata = {
+  name: string;
+  code: string;
+};
diff --git a/client/src/main.tsx b/client/src/main.tsx
index 9230150..765712f 100644
--- a/client/src/main.tsx
+++ b/client/src/main.tsx
@@ -3,7 +3,7 @@ import { createRoot } from "react-dom/client";
 import { BrowserRouter } from "react-router-dom";
 import App from "./App.tsx";
 import "./index.css";
-
+import "./i18n/i18n";
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
     <BrowserRouter>
diff --git a/client/src/pages/404.tsx b/client/src/pages/404.tsx
index 32564ce..89277ed 100644
--- a/client/src/pages/404.tsx
+++ b/client/src/pages/404.tsx
@@ -1,15 +1,17 @@
+import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 
 export default function NotFound() {
+  const { t } = useTranslation();
   return (
     <div className="flex flex-col items-center justify-center h-full w-full">
       <h1 className="text-4xl font-bold text-gray-800 mb-4">
-        Oops! Looks like the page doesn't exist anymore
+        {t("notfound.heading")}
       </h1>
       <Link to="/" className="text-lg text-blue-500 hover:underline">
-        Click Here
+        {t("notfound.click")}
       </Link>
-      <p className="text-lg text-gray-600">To go to the Home Page</p>
+      <p className="text-lg text-gray-600">{t("notfound.goto")}</p>
     </div>
   );
 }
diff --git a/client/src/pages/Anonymous.tsx b/client/src/pages/Anonymous.tsx
index 0cc7f24..ca6ab87 100644
--- a/client/src/pages/Anonymous.tsx
+++ b/client/src/pages/Anonymous.tsx
@@ -17,6 +17,7 @@ import { ArrowLeft, Loader2, SendIcon } from "lucide-react";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
 import toast from "react-hot-toast";
+import { useTranslation } from "react-i18next";
 import Markdown from "react-markdown";
 import { Link } from "react-router-dom";
 import { z } from "zod";
@@ -24,6 +25,7 @@ import { z } from "zod";
 export default function AnonymousPage() {
   const [loading, setLoading] = useState(false); // Loading state for request
   const [messages, setMessages] = useState<Chat[]>([]);
+  const { t } = useTranslation();
   const { currentConfig } = useSettings();
   const form = useForm<z.infer<typeof messageSchema>>({
     resolver: zodResolver(messageSchema),
@@ -133,7 +135,7 @@ export default function AnonymousPage() {
                 <FormControl>
                   <Input
                     className="w-full"
-                    placeholder="Type your message.."
+                    placeholder={t("message.ph")}
                     {...field}
                   />
                 </FormControl>
diff --git a/client/src/pages/Chatbot.tsx b/client/src/pages/Chatbot.tsx
index 171b154..0728b79 100644
--- a/client/src/pages/Chatbot.tsx
+++ b/client/src/pages/Chatbot.tsx
@@ -49,7 +49,8 @@ import {
 } from "@/components/ui/dropdown-menu";
 import useSpeech from "@/hooks/useSpeech";
 import EmojiPicker from "emoji-picker-react";
-import exportFromJSON, { ExportType } from "export-from-json"; // Correct import statement
+import exportFromJSON, { ExportType } from "export-from-json";
+import { useTranslation } from "react-i18next";
 
 export default function ChatbotPage() {
   const { id } = useParams();
@@ -68,6 +69,7 @@ export default function ChatbotPage() {
   const [loading, setLoading] = useState(false);
   const [showEmojiPicker, setShowEmojiPicker] = useState(false);
   const rq = useQueryClient();
+  const { t } = useTranslation();
   const navigate = useNavigate();
   const form = useForm<z.infer<typeof messageSchema>>({
     resolver: zodResolver(messageSchema),
@@ -228,10 +230,12 @@ export default function ChatbotPage() {
           </DropdownMenuTrigger>
           <DropdownMenuContent className="mr-8">
             <DropdownMenuItem onClick={() => settingsModal.onOpen()}>
-              Settings
+              {t("navbar.settings")}
             </DropdownMenuItem>
             <DropdownMenuSub>
-              <DropdownMenuSubTrigger>Export</DropdownMenuSubTrigger>
+              <DropdownMenuSubTrigger>
+                {t("chatbot_page.export")}
+              </DropdownMenuSubTrigger>
               <DropdownMenuPortal>
                 <DropdownMenuSubContent>
                   <DropdownMenuItem
@@ -275,7 +279,7 @@ export default function ChatbotPage() {
                 mutation.mutate(id); // Trigger the double-click delete action
               }}
             >
-              Delete All
+              {t("chatbot_page.delete_all")}
             </DropdownMenuItem>
           </DropdownMenuContent>
         </DropdownMenu>
@@ -309,7 +313,9 @@ export default function ChatbotPage() {
                           size={"icon"}
                         >
                           <Sparkles className="text-primary-foreground" />
-                          <span className="sr-only">Action</span>
+                          <span className="sr-only">
+                            {t("chatbot_page.action")}
+                          </span>
                         </Button>
                       </DropdownMenuTrigger>
                       <DropdownMenuContent>
@@ -320,7 +326,7 @@ export default function ChatbotPage() {
                             })
                           }
                         >
-                          Translate
+                          {t("chatbot_page.translate")}
                         </DropdownMenuItem>
                         <DropdownMenuItem
                           onClick={() =>
@@ -329,7 +335,7 @@ export default function ChatbotPage() {
                             })
                           }
                         >
-                          Listen
+                          {t("chatbot_page.listen")}
                         </DropdownMenuItem>
                       </DropdownMenuContent>
                     </DropdownMenu>
@@ -356,7 +362,7 @@ export default function ChatbotPage() {
                 <FormControl>
                   <Input
                     className="w-full"
-                    placeholder="Type your message.."
+                    placeholder={t("message.ph")}
                     {...field}
                   />
                 </FormControl>
@@ -374,8 +380,6 @@ export default function ChatbotPage() {
           </Button>
           {showEmojiPicker && (
             <div className="absolute left-1/2 bottom-full w-1 h-1 transform -translate-x-1/2 translate-y-52">
-              {" "}
-              {/* Positioned above */}
               <EmojiPicker onEmojiClick={handleEmojiSelect} />
             </div>
           )}
diff --git a/client/src/pages/ChatbotView.tsx b/client/src/pages/ChatbotView.tsx
index 4bfe970..4b41bc6 100644
--- a/client/src/pages/ChatbotView.tsx
+++ b/client/src/pages/ChatbotView.tsx
@@ -32,6 +32,7 @@ import {
 } from "lucide-react";
 import { useState } from "react";
 import toast from "react-hot-toast";
+import { useTranslation } from "react-i18next";
 import { Link, useNavigate, useParams } from "react-router-dom";
 
 export default function ChatbotViewPage() {
@@ -43,6 +44,7 @@ export default function ChatbotViewPage() {
   const qc = useQueryClient();
   const deleteModal = useDeleteChatbotModal();
   const updateModal = useUpdateChatbotModal();
+  const { t } = useTranslation();
   if (!chatbotId) return null;
   const { data, isLoading } = useQuery({
     queryKey: ["chatbot_view", chatbotId],
@@ -119,8 +121,10 @@ export default function ChatbotViewPage() {
   if (!data) {
     return (
       <div className="text-center p-6 space-y-4">
-        <p>No Chatbot data available.</p>
-        <Button onClick={() => navigate("/hub")}>Go to Hub</Button>
+        <p>{t("chatbot_view.not_found")}</p>
+        <Button onClick={() => navigate("/hub")}>
+          {t("chatbot_view.goto")}
+        </Button>
       </div>
     );
   }
@@ -141,16 +145,17 @@ export default function ChatbotViewPage() {
             <div>
               <CardTitle>{bot.latest_version.name}</CardTitle>
               <CardDescription>
-                Creator: @{bot.latest_version.modified_by}
+                {t("chatbot_view.creator")}: @{bot.latest_version.modified_by}
               </CardDescription>
             </div>
           </CardHeader>
           <CardContent>
             <p className="text-muted-foreground">
-              Prompt: {bot.latest_version.prompt}
+              {t("chatbot_view.prompt")}: {bot.latest_version.prompt}
             </p>
             <p className="text-muted-foreground font-bold my-2 underline cursor-pointer">
-              Current Version: {bot.latest_version.version_number}
+              {t("chatbot_view.current_ver")}:{" "}
+              {bot.latest_version.version_number}
             </p>
             <div className="flex justify-between mt-4">
               <div className="flex gap-2">
@@ -166,7 +171,7 @@ export default function ChatbotViewPage() {
                   }
                 >
                   <Heart className="h-4 w-4" />
-                  <span className="sr-only">Like</span>
+                  <span className="sr-only">{t("like")}</span>
                 </Button>
                 <span
                   className="inline-flex items-center text-sm text-muted-foreground"
@@ -186,7 +191,7 @@ export default function ChatbotViewPage() {
                   }
                 >
                   <Flag className="h-4 w-4" />
-                  <span className="sr-only">Report</span>
+                  <span className="sr-only">{t("report")}</span>
                 </Button>
                 <span
                   className="inline-flex items-center text-sm text-muted-foreground"
@@ -199,7 +204,7 @@ export default function ChatbotViewPage() {
                 <Link to={`/chatbot/${bot.id}`}>
                   <Button variant="default">
                     <MessageSquare className="h-4 w-4 mr-2" />
-                    Chat
+                    {t("chat")}
                   </Button>
                 </Link>
               </div>
@@ -222,7 +227,7 @@ export default function ChatbotViewPage() {
                   }
                 >
                   <Pencil className="h-4 w-4 mr-2" />
-                  Edit
+                  {t("edit")}
                 </Button>
 
                 <Button
@@ -237,7 +242,7 @@ export default function ChatbotViewPage() {
                   }
                 >
                   <Trash2 className="h-4 w-4 mr-2" />
-                  Delete
+                  {t("delete")}
                 </Button>
 
                 <Button
@@ -251,13 +256,15 @@ export default function ChatbotViewPage() {
                   }
                 >
                   <Send className="h-4 w-4 mr-2" />
-                  {bot.public ? "Unpublish" : "Publish"}
+                  {bot.public ? t("unpublish") : t("publish")}
                 </Button>
               </div>
             </CardFooter>
           )}
         </Card>
-        <h2 className="text-2xl font-bold mb-4">Comments</h2>
+        <h2 className="text-2xl font-bold mb-4">
+          {t("chatbot_view.comments")}
+        </h2>
         <div
           className="space-y-4 mb-8 max-h-[500px] overflow-auto [&::-webkit-scrollbar]:w-2
           [&::-webkit-scrollbar-track]:rounded-full
@@ -329,7 +336,7 @@ export default function ChatbotViewPage() {
 
         <Card>
           <CardHeader>
-            <CardTitle>Leave a Comment</CardTitle>
+            <CardTitle>{t("chatbot_view.leave_comment")}</CardTitle>
           </CardHeader>
           <CardContent>
             <form className="space-y-4" onSubmit={handleSubmitComment}>
@@ -338,7 +345,7 @@ export default function ChatbotViewPage() {
                   htmlFor="name"
                   className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                 >
-                  Name
+                  {t("chatbot_view.name")}
                 </label>
                 <Input
                   id="name"
@@ -352,7 +359,7 @@ export default function ChatbotViewPage() {
                   htmlFor="comment"
                   className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                 >
-                  Comment
+                  {t("chatbot_view.comment")}
                 </label>
                 <Textarea
                   id="comment"
@@ -363,7 +370,7 @@ export default function ChatbotViewPage() {
               </div>
               <Button>
                 <Send className="mr-2 h-4 w-4" type="submit" />
-                Submit Comment
+                {t("chatbot_view.submit_comment")}
               </Button>
             </form>
           </CardContent>
diff --git a/client/src/pages/Dashboard.tsx b/client/src/pages/Dashboard.tsx
index 9e25905..ff69f46 100644
--- a/client/src/pages/Dashboard.tsx
+++ b/client/src/pages/Dashboard.tsx
@@ -10,11 +10,12 @@ import { Skeleton } from "@/components/ui/skeleton";
 import { ChatbotCard } from "@/components/ChatbotCard";
 import BotsLoading from "@/components/BotsLoading";
 import { imageSrc, welcomeMessages } from "@/lib/utils";
+import { useTranslation } from "react-i18next";
 
 export default function DashboardPage() {
   const { user, loading } = useAuth();
   const createChatbotModal = useCreateChatbotModal();
-
+  const { t } = useTranslation();
   const {
     data: botsData,
     isLoading: botsLoading,
@@ -56,7 +57,7 @@ export default function DashboardPage() {
           <Skeleton className="h-10 w-[40%] rounded-xl my-2" />
         ) : (
           <h2 className="text-3xl font-bold mb-6">
-            Welcome 👋, <span>{user.name}</span>!
+            {t("dashboard.welcome")} 👋, <span>{user.name}</span>!
           </h2>
         )}
 
@@ -65,7 +66,9 @@ export default function DashboardPage() {
             <div className="flex flex-col gap-6 flex-1">
               <div className="flex gap-6">
                 <div className="border border-lighter dark:border-darker p-4 rounded-lg shadow-sm flex-1">
-                  <h3 className="text-xl font-semibold ">Chatbot of the Day</h3>
+                  <h3 className="text-xl font-semibold ">
+                    {t("dashboard.chatbot_of_day")}
+                  </h3>
                   {trendsLoading ? (
                     <>
                       <Skeleton className="h-10 w-[35%] rounded-xl my-2" />
@@ -88,7 +91,9 @@ export default function DashboardPage() {
                 </div>
 
                 <div className="border border-lighter dark:border-darker p-4 rounded-lg shadow-sm flex-1">
-                  <h3 className="text-xl font-semibold">Message of the Day</h3>
+                  <h3 className="text-xl font-semibold">
+                    {t("dashboard.message_of_day")}
+                  </h3>
                   <blockquote
                     id="message-of-the-day"
                     className="italic text-lg"
@@ -99,7 +104,9 @@ export default function DashboardPage() {
               </div>
 
               <div className="border border-lighter dark:border-darker p-4 rounded-lg shadow-sm flex-1">
-                <h3 className="text-xl font-semibold">Tip of the Day</h3>
+                <h3 className="text-xl font-semibold">
+                  {t("dashboard.tip_of_day")}
+                </h3>
                 <blockquote id="tip-of-the-day" className="italic text-lg">
                   "{tip}"
                 </blockquote>
@@ -107,7 +114,9 @@ export default function DashboardPage() {
             </div>
 
             <div className="border border-lighter dark:border-darker p-4 rounded-lg shadow-sm flex-1">
-              <h3 className="text-xl font-semibold">Image of the Day</h3>
+              <h3 className="text-xl font-semibold">
+                {t("dashboard.image_of_day")}
+              </h3>
               {trendsLoading ? (
                 <>
                   <Skeleton className="h-[125px] w-[250px] rounded-xl" />
@@ -133,7 +142,9 @@ export default function DashboardPage() {
             </div>
           </div>
           <Separator />
-          <h2 className="text-2xl font-bold mb-6 p-3">Your Chatbots</h2>
+          <h2 className="text-2xl font-bold mb-6 p-3">
+            {t("dashboard.your_chatbots")}
+          </h2>
 
           {botsLoading ? (
             <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 p-3">
@@ -149,7 +160,7 @@ export default function DashboardPage() {
               className="h-72 max-w-sm rounded-lg border-[10px] border-dashed shadow flex items-center justify-center hover:cursor-pointer hover:border-primary/10 transition-colors"
             >
               <p className="text-muted text-2xl font-bold font-mono hover:text-muted/10 transition-colors">
-                New Chatbot
+                {t("dashboard.new_chatbot")}
               </p>
             </div>
           ) : (
@@ -159,7 +170,7 @@ export default function DashboardPage() {
                 className="h-72 max-w-sm rounded-lg border-[10px] border-dashed shadow flex items-center justify-center hover:cursor-pointer hover:border-primary/10 transition-colors"
               >
                 <p className="text-muted text-2xl font-bold font-mono hover:text-muted/10 transition-colors">
-                  New Chatbot
+                  {t("dashboard.new_chatbot")}
                 </p>
               </div>
               {botsData?.my_bots!.map((bot) => (
@@ -173,7 +184,9 @@ export default function DashboardPage() {
           )}
 
           <Separator />
-          <h2 className="text-2xl font-bold mb-6 p-3">System Chatbots</h2>
+          <h2 className="text-2xl font-bold mb-6 p-3">
+            {t("dashboard.system_chatbots")}
+          </h2>
           {systemBotsLoading ? (
             <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 p-3">
               <BotsLoading />
@@ -184,7 +197,7 @@ export default function DashboardPage() {
             </div>
           ) : systemBotsData && systemBotsData?.system_bots!.length == 0 ? (
             <div className="mt-8 flex items-center space-x-2">
-              <p className="text-center">No chatbots! </p>
+              <p className="text-center">{t("dashboard.no")}</p>
             </div>
           ) : (
             <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 p-3">
diff --git a/client/src/pages/Hub.tsx b/client/src/pages/Hub.tsx
index 32752b9..1e8bb0c 100644
--- a/client/src/pages/Hub.tsx
+++ b/client/src/pages/Hub.tsx
@@ -16,9 +16,11 @@ import { useQuery } from "@tanstack/react-query";
 import { useState } from "react";
 
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { useTranslation } from "react-i18next";
 
 export default function HubPage() {
   const [searchTerm, setSearchTerm] = useState("");
+  const { t } = useTranslation();
   const [selectedCategory, setSelectedCategory] = useState("All");
   const {
     data: botsData,
@@ -55,7 +57,7 @@ export default function HubPage() {
       <Navbar />
       <div className="container mt-4 w-full flex flex-col items-center">
         <h2 className="text-2xl font-semibold mb-6 p-3">
-          Chatbots and AI Images Hub
+          {t("hub_page.heading")}
         </h2>
 
         <Tabs defaultValue="chatbots">
@@ -63,7 +65,7 @@ export default function HubPage() {
             <div className="flex gap-4 mb-6 w-full max-w-2xl">
               <Input
                 type="text"
-                placeholder="Search..."
+                placeholder={t("hub_page.search")}
                 value={searchTerm}
                 onChange={(e) => setSearchTerm(e.target.value)}
               />
@@ -84,8 +86,10 @@ export default function HubPage() {
               </Select>
             </div>
             <TabsList>
-              <TabsTrigger value="chatbots">Chatbots</TabsTrigger>
-              <TabsTrigger value="images">Images</TabsTrigger>
+              <TabsTrigger value="chatbots">
+                {t("hub_page.chatbots")}
+              </TabsTrigger>
+              <TabsTrigger value="images">{t("hub_page.images")}</TabsTrigger>
             </TabsList>
           </div>
 
@@ -106,7 +110,9 @@ export default function HubPage() {
                   />
                 ))
               ) : (
-                <div className="col-span-1 text-center">No bots available.</div>
+                <div className="col-span-1 text-center">
+                  {t("hub_page.no_bots")}
+                </div>
               )}
             </div>
           </TabsContent>
@@ -128,7 +134,7 @@ export default function HubPage() {
                 ))
               ) : (
                 <div className="col-span-1 text-center">
-                  No Images available.
+                  {t("hub_page.no_images")}
                 </div>
               )}
             </div>
diff --git a/client/src/pages/Landing.tsx b/client/src/pages/Landing.tsx
index 205add8..a2b0ef8 100644
--- a/client/src/pages/Landing.tsx
+++ b/client/src/pages/Landing.tsx
@@ -3,68 +3,69 @@ import Navbar from "../components/Navbar";
 import Separator from "../components/Separator";
 import Footer from "@/components/Footer";
 import { useAuth } from "@/contexts/auth-context";
+import { useTranslation } from "react-i18next";
 
 export default function LandingPage() {
   const { user } = useAuth();
+  const { t } = useTranslation();
   return (
     <>
       <Navbar />
       <section className="text-center p-16 rounded-lg mt-8 dark:text-white">
         <h1 className="text-5xl lg:text-7xl font-extrabold mb-4">
-          Welcome to Bot Verse
+          {t("landing.top_heading")}
         </h1>
-        <p className="text-lg mb-8">
-          Your hub for AI chatbots to solve queries effortlessly.
-        </p>
+        <p className="text-lg mb-8">{t("landing.top_subheading")}</p>
 
         <Link
           to={user == null ? "/login" : "/dashboard"}
           className="inline-block bg-blue-600 text-white rounded-full px-4 py-2 transition hover:bg-blue-500 dark:bg-blue-500 dark:hover:bg-blue-400"
         >
-          Get Started
+          {t("landing.get_started")}
         </Link>
       </section>
       <Separator />
       <section className="relative text-gray-800 text-center p-16 mt-8 dark:text-gray-300">
-        <h2 className="text-3xl font-bold mb-4">About Bot Verse</h2>
-        <p className="text-lg">
-          A platform for creating, sharing, and interacting with AI chatbots to
-          enhance your productivity.
-        </p>
+        <h2 className="text-3xl font-bold mb-4">
+          {t("landing.about_heading")}
+        </h2>
+        <p className="text-lg">{t("landing.about_subheading")}</p>
       </section>
       <Separator />
 
       <section className="text-gray-800 text-center p-16 mt-8 dark:text-gray-300">
-        <h2 className="text-3xl font-bold mb-6">Features</h2>
+        <h2 className="text-3xl font-bold mb-6">
+          {t("landing.feature_heading")}
+        </h2>
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12">
           <div className="p-6 border border-lighter rounded-lg shadow transition dark:border-darker hover:bg-lighter dark:hover:bg-darker">
             <i className="fas fa-tachometer-alt text-3xl mb-4"></i>
-            <h3 className="text-xl font-semibold mb-2">Manage Your Chatbots</h3>
-            <p>
-              Effortlessly create, update, or delete your chatbots all in one
-              place.
-            </p>
+            <h3 className="text-xl font-semibold mb-2">
+              {t("landing.f1_heading")}
+            </h3>
+            <p>{t("landing.f1_subheading")}</p>
           </div>
 
           <div className="p-6 border border-lighter rounded-lg shadow transition dark:border-darker hover:bg-lighter dark:hover:bg-darker">
             <i className="fas fa-share-alt text-3xl mb-4"></i>
-            <h3 className="text-xl font-semibold mb-2">Share and Discover</h3>
-            <p>
-              Show off your chatbots and explore others’ creations for
-              inspiration.
-            </p>
+            <h3 className="text-xl font-semibold mb-2">
+              {t("landing.f2_heading")}
+            </h3>
+            <p>{t("landing.f2_subheading")}</p>
           </div>
           <div className="p-6 border border-lighter rounded-lg shadow transition dark:border-darker hover:bg-lighter dark:hover:bg-darker">
             <i className="fas fa-comments text-3xl mb-4"></i>
-            <h3 className="text-xl font-semibold mb-2">Chatbot Hub</h3>
-            <p>Interact with multiple chatbots in one convenient location.</p>
+            <h3 className="text-xl font-semibold mb-2">
+              {t("landing.f3_heading")}
+            </h3>
+            <p>{t("landing.f3_subheading")}</p>{" "}
           </div>
           <div className="p-6 border border-lighter rounded-lg shadow transition dark:border-darker hover:bg-lighter dark:hover:bg-darker">
             <i className="fas fa-cogs text-3xl mb-4"></i>
-            <h3 className="text-xl font-semibold mb-2">Helpful Chatbots</h3>
-            <p>
-              Utilize our pre-made chatbots for quick solutions to common tasks.
-            </p>
+            <h3 className="text-xl font-semibold mb-2">
+              {t("landing.f4_heading")}
+            </h3>
+            <p>{t("landing.f4_subheading")}</p>
           </div>
         </div>
       </section>
@@ -72,19 +73,20 @@ export default function LandingPage() {
       <Separator />
 
       <section className="relative text-center p-16 mt-8">
-        <h2 className="text-3xl font-bold mb-4 dark:text-white">Open Source</h2>
+        <h2 className="text-3xl font-bold mb-4 dark:text-white">
+          {t("landing.contribute_heading")}
+        </h2>
         <p className="text-lg mb-6 dark:text-white">
-          Bot Verse is an open-source project.
+          {t("landing.contribute_subheading1")}
           <br />
-          Contribute to our development and join our growing community of
-          contributors!
+          {t("landing.contribute_subheading2")}
         </p>
         <a
           href="https://github.com/kom-senapati/bot-verse"
           target="_blank"
           className="inline-block bg-gray-600 text-white rounded-full px-4 py-2 transition hover:bg-gray-500 dark:bg-gray-500 dark:hover:bg-gray-400"
         >
-          Contribute
+          {t("landing.contribute")}
         </a>
       </section>
 
diff --git a/client/src/pages/Leaderboard.tsx b/client/src/pages/Leaderboard.tsx
index 141bce4..03f63d0 100644
--- a/client/src/pages/Leaderboard.tsx
+++ b/client/src/pages/Leaderboard.tsx
@@ -4,8 +4,10 @@ import { Button } from "@/components/ui/button";
 import { useNavigate } from "react-router-dom"; // Assuming you're using react-router for navigation
 import { Skeleton } from "@/components/ui/skeleton";
 import Navbar from "@/components/Navbar";
+import { useTranslation } from "react-i18next";
 
 export default function LeaderboardPage() {
+  const { t } = useTranslation();
   const { data, isLoading } = useQuery({
     queryFn: () =>
       fetchData({
@@ -40,8 +42,10 @@ export default function LeaderboardPage() {
     // No data found, button redirects to dashboard
     return (
       <div className="text-center p-6 space-y-4">
-        <p>No leaderboard data available.</p>
-        <Button onClick={() => navigate("/dashboard")}>Go to Dashboard</Button>
+        <p>{t("leaderboard_page.no")}</p>
+        <Button onClick={() => navigate("/dashboard")}>
+          {t("leaderboard_page.goto")}
+        </Button>
       </div>
     );
   }
@@ -51,7 +55,9 @@ export default function LeaderboardPage() {
   return (
     <div className="container mx-auto p-6 h-full min-h-screen">
       <Navbar />
-      <h1 className="text-4xl font-bold my-6 text-center">Leaderboard</h1>
+      <h1 className="text-4xl font-bold my-6 text-center">
+        {t("navbar.leaderboard")}
+      </h1>
       <div className="space-y-4">
         {leaderboard.map((user, idx: number) => (
           <div
diff --git a/client/src/pages/Login.tsx b/client/src/pages/Login.tsx
index 173c24d..af8ca8e 100644
--- a/client/src/pages/Login.tsx
+++ b/client/src/pages/Login.tsx
@@ -27,9 +27,11 @@ import { useState } from "react";
 import toast from "react-hot-toast";
 import { useAuth } from "@/contexts/auth-context";
 import { Loader2 } from "lucide-react";
+import { useTranslation } from "react-i18next";
 
 export default function LoginPage() {
   const { login } = useAuth();
+  const { t } = useTranslation();
   const navigate = useNavigate();
   const [loading, setLoading] = useState(false);
   const form = useForm<z.infer<typeof loginSchema>>({
@@ -63,10 +65,8 @@ export default function LoginPage() {
       <div className="w-full max-w-md">
         <Card className="w-full">
           <CardHeader>
-            <CardTitle>Login to your account</CardTitle>
-            <CardDescription>
-              Use all new chatbots by other people like you.
-            </CardDescription>
+            <CardTitle>{t("auth.login_title")}</CardTitle>
+            <CardDescription>{t("auth.login_subtitle")}</CardDescription>
           </CardHeader>
           <CardContent>
             <Form {...form}>
@@ -80,7 +80,7 @@ export default function LoginPage() {
                   disabled={loading}
                   render={({ field }) => (
                     <FormItem>
-                      <FormLabel>Username</FormLabel>
+                      <FormLabel>{t("auth.username")}</FormLabel>
                       <FormControl>
                         <Input placeholder="botz" {...field} />
                       </FormControl>
@@ -96,7 +96,7 @@ export default function LoginPage() {
                   disabled={loading}
                   render={({ field }) => (
                     <FormItem>
-                      <FormLabel>Password</FormLabel>
+                      <FormLabel>{t("auth.password")}</FormLabel>
                       <FormControl>
                         <Input placeholder="I don't know" {...field} />
                       </FormControl>
@@ -106,16 +106,20 @@ export default function LoginPage() {
                   )}
                 />
                 <Button className="w-full" type="submit" disabled={loading}>
-                  {loading ? <Loader2 className="animate-spin" /> : "Login"}
+                  {loading ? (
+                    <Loader2 className="animate-spin" />
+                  ) : (
+                    t("auth.login")
+                  )}
                 </Button>
               </form>
             </Form>
           </CardContent>
           <CardFooter>
             <p>
-              Don't have an account.{" "}
+              {t("auth.dont_account")}{" "}
               <Link className="text-blue-400 underline" to={"/signup"}>
-                create one
+                {t("auth.create_one")}
               </Link>
             </p>
           </CardFooter>
diff --git a/client/src/pages/MyChatbots.tsx b/client/src/pages/MyChatbots.tsx
index b11af04..0cad675 100644
--- a/client/src/pages/MyChatbots.tsx
+++ b/client/src/pages/MyChatbots.tsx
@@ -16,11 +16,13 @@ import {
 } from "@/stores/modal-store";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { Flag, Heart, Pencil, Send, Trash2 } from "lucide-react";
+import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 
 export default function MyChatbotsPage() {
   const { loading, user } = useAuth();
   const qc = useQueryClient();
+  const { t } = useTranslation();
   const deleteModal = useDeleteChatbotModal();
   const updateModal = useUpdateChatbotModal();
   const {
@@ -66,17 +68,19 @@ export default function MyChatbotsPage() {
       <div className="min-h-screen container mt-4 w-full flex flex-col items-center">
         <Card className="w-full mb-6 max-w-3xl">
           <CardHeader className="p-4">
-            <h3 className="text-xl font-semibold">Analytics Summary</h3>
+            <h3 className="text-xl font-semibold">{t("analytics.title")}</h3>
           </CardHeader>
           <CardContent className="p-4 grid grid-cols-2 md:grid-cols-3 gap-4">
             <div className="flex items-center space-x-2">
               <Heart className="h-5 w-5 text-red-500" />
-              <span className="font-medium">Total Likes:</span>
+              <span className="font-medium">{t("analytics.total_likes")}:</span>
               <span>{totalLikes}</span>
             </div>
             <div className="flex items-center space-x-2">
               <Flag className="h-5 w-5 text-yellow-500" />
-              <span className="font-medium">Total Reports:</span>
+              <span className="font-medium">
+                {t("analytics.total_reports")}:
+              </span>
               <span>{totalReports}</span>
             </div>
             {topRankedBot && (
@@ -90,18 +94,22 @@ export default function MyChatbotsPage() {
                     {topRankedBot.latest_version.name.slice(0, 2).toUpperCase()}
                   </AvatarFallback>
                 </Avatar>
-                <p className="text-sm font-medium">Top Ranked Bot</p>
+                <p className="text-sm font-medium">
+                  {t("analytics.top_ranked_bot")}
+                </p>
                 <p className="text-lg font-semibold">
                   {topRankedBot.latest_version.name}
                 </p>
                 <p className="text-sm text-muted-foreground">
-                  Likes: {topRankedBot.likes}
+                  {t("analytics.likes")}: {topRankedBot.likes}
                 </p>
               </div>
             )}
           </CardContent>
         </Card>
-        <h2 className="text-2xl font-semibold mb-6 p-3">My Images</h2>
+        <h2 className="text-2xl font-semibold mb-6 p-3">
+          {t("analytics.my_chatbots")}
+        </h2>
         <div className="grid grid-flow-dense grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-3 w-full">
           {botsLoading ? (
             <BotsLoading />
@@ -161,7 +169,7 @@ export default function MyChatbotsPage() {
                       }
                     >
                       <Send className="h-4 w-4 mr-2" />
-                      {chatbot.public ? "Unpublish" : "Publish"}
+                      {chatbot.public ? t("unpublish") : t("publish")}
                     </Button>
                     <Button
                       variant="outline"
@@ -192,14 +200,14 @@ export default function MyChatbotsPage() {
                       }
                     >
                       <Trash2 className="h-2 w-2" />
-                      <span className="sr-only">Delete</span>
+                      <span className="sr-only">{t("delete")}</span>
                     </Button>
                   </div>
                 </CardFooter>
               </Card>
             ))
           ) : (
-            <div className="col-span-1 text-center">No Images available.</div>
+            <div className="col-span-1 text-center">{t("no_bots")}</div>
           )}
         </div>
       </div>
diff --git a/client/src/pages/MyImages.tsx b/client/src/pages/MyImages.tsx
index efc5da7..0054ef2 100644
--- a/client/src/pages/MyImages.tsx
+++ b/client/src/pages/MyImages.tsx
@@ -14,12 +14,13 @@ import { useDeleteChatbotModal } from "@/stores/modal-store";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { Flag, Heart, Send, Trash2 } from "lucide-react";
 import { useMemo } from "react";
+import { useTranslation } from "react-i18next";
 
 export default function MyImagesPage() {
   const { loading, user } = useAuth();
   const qc = useQueryClient();
   const deleteModal = useDeleteChatbotModal();
-
+  const { t } = useTranslation();
   const {
     data: imagesData,
     isLoading: imagesLoading,
@@ -69,33 +70,41 @@ export default function MyImagesPage() {
       <div className="min-h-screen container mt-4 w-full flex flex-col items-center">
         <Card className="w-full mb-6 max-w-3xl">
           <CardHeader className="p-4">
-            <h3 className="text-xl font-semibold">Image Analytics</h3>
+            <h3 className="text-xl font-semibold">{t("analytics.title")}</h3>
           </CardHeader>
           <CardContent className="p-4 grid grid-cols-2 md:grid-cols-3 gap-4">
             <div className="flex items-center space-x-2">
               <Heart className="h-5 w-5 text-red-500" />
-              <span className="font-medium">Total Likes:</span>
+              <span className="font-medium">{t("analytics.total_likes")}:</span>
               <span>{totalLikes}</span>
             </div>
             <div className="flex items-center space-x-2">
               <Flag className="h-5 w-5 text-yellow-500" />
-              <span className="font-medium">Total Reports:</span>
+              <span className="font-medium">
+                {t("analytics.total_reports")}:
+              </span>
               <span>{totalReports}</span>
             </div>
             {topRankedImage && (
               <div className="flex items-center space-x-2 col-span-2 md:col-span-1">
-                <span className="font-medium">Top Image:</span>
+                <span className="font-medium">
+                  {t("analytics.top_ranked_image")}:
+                </span>
                 <img
                   src={imageSrc(topRankedImage.prompt)}
                   alt={topRankedImage.prompt}
                   className="w-12 h-12 rounded-full"
                 />
-                <span>{topRankedImage.likes} Likes</span>
+                <span>
+                  {topRankedImage.likes} {t("analytics.likes")}
+                </span>
               </div>
             )}
           </CardContent>
         </Card>
-        <h2 className="text-2xl font-semibold mb-6 p-3">My Images</h2>
+        <h2 className="text-2xl font-semibold mb-6 p-3">
+          {t("analytics.my_images")}
+        </h2>
         <div className="grid grid-flow-dense grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-3 w-full">
           {imagesLoading ? (
             <BotsLoading />
@@ -143,7 +152,7 @@ export default function MyImagesPage() {
                       }
                     >
                       <Send className="h-4 w-4 mr-2" />
-                      {image.public ? "Unpublish" : "Publish"}
+                      {image.public ? t("unpublish") : t("publish")}
                     </Button>
                     <Button
                       variant="destructive" // Use a destructive variant for delete
@@ -158,14 +167,14 @@ export default function MyImagesPage() {
                       }
                     >
                       <Trash2 className="h-2 w-2" />
-                      <span className="sr-only">Delete</span>
+                      <span className="sr-only">{t("delete")}</span>
                     </Button>
                   </div>
                 </CardFooter>
               </Card>
             ))
           ) : (
-            <div className="col-span-1 text-center">No Images available.</div>
+            <div className="col-span-1 text-center">{t("no_images")}</div>
           )}
         </div>
       </div>
diff --git a/client/src/pages/Profile.tsx b/client/src/pages/Profile.tsx
index 34c2e19..cd79447 100644
--- a/client/src/pages/Profile.tsx
+++ b/client/src/pages/Profile.tsx
@@ -24,11 +24,13 @@ import { Badge } from "@/components/ui/badge";
 import { useEffect, useState } from "react";
 import { Skeleton } from "@/components/ui/skeleton";
 import { ImageCard } from "@/components/ImageCard";
+import { useTranslation } from "react-i18next";
 
 export default function ProfilePage() {
   const { username } = useParams();
   const profileUpdateModal = useUpdateProfileModal();
   const settingsModal = useSettingsModal();
+  const { t } = useTranslation();
   const [userId, setUserId] = useState<number | undefined>(undefined);
   const { user: currentUser, logout } = useAuth();
   const { data, isLoading, isError, error } = useQuery({
@@ -89,7 +91,7 @@ export default function ProfilePage() {
       <div className="container mx-auto p-4 space-y-8 min-h-screen">
         {self && (
           <div className="flex justify-between items-center">
-            <h2 className="text-4xl font-semibold">Profile</h2>
+            <h2 className="text-4xl font-semibold">{t("navbar.profile")}</h2>
             <div className="flex space-x-2 mr-2">
               <Button
                 size="icon"
@@ -136,11 +138,11 @@ export default function ProfilePage() {
                 <div className="flex flex-wrap justify-center md:justify-start gap-2">
                   <Badge variant="outline">
                     <Activity className="w-4 h-4 mr-1" />
-                    Joined {moment(user.created_at).fromNow()}
+                    {t("joined")} {moment(user.created_at).fromNow()}
                   </Badge>
                   <Badge variant="outline">
                     <Code className="w-4 h-4 mr-1" />
-                    {contribution_score} Contributions
+                    {contribution_score} {t("contributions")}
                   </Badge>
                 </div>
               </div>
@@ -183,8 +185,8 @@ export default function ProfilePage() {
         </Card>
         <Tabs defaultValue="chatbots">
           <TabsList>
-            <TabsTrigger value="chatbots">Chatbots</TabsTrigger>
-            <TabsTrigger value="images">Images</TabsTrigger>
+            <TabsTrigger value="chatbots">{t("hub_page.chatbots")}</TabsTrigger>
+            <TabsTrigger value="images">{t("hub_page.images")}</TabsTrigger>
           </TabsList>
           <TabsContent value="chatbots">
             <div className="grid grid-flow-dense grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-3 w-full">
@@ -203,7 +205,7 @@ export default function ProfilePage() {
                   />
                 ))
               ) : (
-                <div className="col-span-1 text-center">No bots available.</div>
+                <div className="col-span-1 text-center">{t("no_bots")}</div>
               )}
             </div>
           </TabsContent>
@@ -224,9 +226,7 @@ export default function ProfilePage() {
                   />
                 ))
               ) : (
-                <div className="col-span-1 text-center">
-                  No Images available.
-                </div>
+                <div className="col-span-1 text-center">{t("no_images")}</div>
               )}
             </div>
           </TabsContent>
diff --git a/client/src/pages/Signup.tsx b/client/src/pages/Signup.tsx
index ae3cddd..6d550cd 100644
--- a/client/src/pages/Signup.tsx
+++ b/client/src/pages/Signup.tsx
@@ -28,9 +28,11 @@ import axios from "axios";
 import { SERVER_URL } from "@/lib/utils";
 import { useState } from "react";
 import { Loader2 } from "lucide-react";
+import { useTranslation } from "react-i18next";
 
 export default function SignupPage() {
   const navigate = useNavigate();
+  const { t } = useTranslation();
   const [loading, setLoading] = useState(false);
   const form = useForm<z.infer<typeof signupSchema>>({
     resolver: zodResolver(signupSchema),
@@ -71,10 +73,8 @@ export default function SignupPage() {
       <div className="w-full max-w-md">
         <Card className="w-full">
           <CardHeader>
-            <CardTitle>Create a new account</CardTitle>
-            <CardDescription>
-              Use all new chatbots by other people like you.
-            </CardDescription>
+            <CardTitle>{t("auth.signup_title")}</CardTitle>
+            <CardDescription>{t("auth.signup_subtitle")}</CardDescription>
           </CardHeader>
           <CardContent>
             <Form {...form}>
@@ -88,7 +88,7 @@ export default function SignupPage() {
                   name="name"
                   render={({ field }) => (
                     <FormItem>
-                      <FormLabel>Name</FormLabel>
+                      <FormLabel>{t("auth.name")}</FormLabel>
                       <FormControl>
                         <Input placeholder="botz musk" {...field} />
                       </FormControl>
@@ -103,7 +103,7 @@ export default function SignupPage() {
                   name="username"
                   render={({ field }) => (
                     <FormItem>
-                      <FormLabel>Username</FormLabel>
+                      <FormLabel>{t("auth.username")}</FormLabel>
                       <FormControl>
                         <Input placeholder="botz" {...field} />
                       </FormControl>
@@ -118,7 +118,7 @@ export default function SignupPage() {
                   name="email"
                   render={({ field }) => (
                     <FormItem>
-                      <FormLabel>Email</FormLabel>
+                      <FormLabel>{t("auth.email")}</FormLabel>
                       <FormControl>
                         <Input placeholder="email@space.x" {...field} />
                       </FormControl>
@@ -133,7 +133,7 @@ export default function SignupPage() {
                   name="password"
                   render={({ field }) => (
                     <FormItem>
-                      <FormLabel>Password</FormLabel>
+                      <FormLabel>{t("auth.password")}</FormLabel>
                       <FormControl>
                         <Input placeholder="I don't know" {...field} />
                       </FormControl>
@@ -143,16 +143,20 @@ export default function SignupPage() {
                   )}
                 />
                 <Button className="w-full" type="submit" disabled={loading}>
-                  {loading ? <Loader2 className="animate-spin" /> : "Create"}
+                  {loading ? (
+                    <Loader2 className="animate-spin" />
+                  ) : (
+                    t("auth.create")
+                  )}
                 </Button>
               </form>
             </Form>
           </CardContent>
           <CardFooter>
             <p>
-              Already have an account{" "}
+              {t("auth.have_account")}{" "}
               <Link className="text-blue-400 underline" to={"/login"}>
-                login here
+                {t("auth.login")}
               </Link>
               .
             </p>