Merge commit 'refs/pull/242/head' of https://github.com/getmaxun/maxun into internationalization2

2024-12-19 03:34:53 +05:30
parent c25975bf98 100fdb9f0d
commit 783466029d
15 changed files with 806 additions and 445 deletions
--- a/package.json
+++ b/package.json
@@ -36,7 +36,13 @@
    "fortawesome": "^0.0.1-security",
    "google-auth-library": "^9.14.1",
    "googleapis": "^144.0.0",
+
+    "i18next": "^24.0.2",
+    "i18next-browser-languagedetector": "^8.0.0",
+    "i18next-http-backend": "^3.0.1",
+
    "idcac-playwright": "^0.1.3",
+
    "ioredis": "^5.4.1",
    "joi": "^17.6.0",
    "jsonwebtoken": "^9.0.2",
@@ -57,6 +63,7 @@
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-highlight": "0.15.0",
+    "react-i18next": "^15.1.3",
    "react-router-dom": "^6.26.1",
    "react-simple-code-editor": "^0.11.2",
    "react-transition-group": "^4.4.2",
--- a/public/locales/de.json
+++ b/public/locales/de.json
@@ -0,0 +1,50 @@
+{
+    "login": {
+        "title": "Willkommen zurück!",
+        "email": "E-Mail",
+        "password": "Passwort",
+        "button": "Einloggen",
+        "loading": "Lädt",
+        "register_prompt": "Noch keinen Account?",
+        "register_link": "Registrieren",
+        "welcome_notification": "Willkommen bei Maxun!",
+        "error_notification": "Anmeldung fehlgeschlagen. Bitte versuchen Sie es erneut."
+    },
+    "register": {
+        "title": "Konto registrieren",
+        "email": "E-Mail",
+        "password": "Passwort",
+        "button": "Registrieren",
+        "loading": "Lädt",
+        "register_prompt": "Bereits ein Konto?",
+        "login_link": "Einloggen",
+        "welcome_notification": "Willkommen bei Maxun!",
+        "error_notification": "Registrierung fehlgeschlagen. Bitte versuchen Sie es erneut."
+    },
+    "recordingtable": {
+        "run": "Ausführen",
+        "name": "Name",
+        "schedule": "Zeitplan",
+        "integrate": "Integrieren",
+        "settings": "Einstellungen",
+        "options": "Optionen",
+        "heading": "Meine Roboter",
+        "new": "Roboter erstellen",
+        "modal": {
+            "title": "Geben Sie die URL ein",
+            "label": "URL",
+            "button": "Aufnahme starten"
+        },
+        "edit": "Bearbeiten",
+        "delete": "Löschen",
+        "duplicate": "Duplizieren"
+    },
+    "mainmenu": {
+        "recordings": "Roboter",
+        "runs": "Ausführungen",
+        "proxy": "Proxy",
+        "apikey": "API-Schlüssel",
+        "feedback": "Maxun Cloud beitreten",
+        "apidocs": "API-Dokumentation"
+    }
+}
--- a/public/locales/en.json
+++ b/public/locales/en.json
@@ -0,0 +1,66 @@
+{
+    "login": {
+      "title": "Welcome Back!",
+      "email": "Email",
+      "password": "Password",
+      "button": "Login",
+      "loading": "Loading",
+      "register_prompt": "Don't have an account?",
+      "register_link": "Register",
+      "welcome_notification": "Welcome to Maxun!",
+      "error_notification": "Login Failed. Please try again."
+    },
+    "register": {
+      "title": "Register Account",
+      "email": "Email",
+      "password": "Password",
+      "button": "Register",
+      "loading": "Loading",
+      "register_prompt": "Already have an account?",
+      "login_link": "Login",
+      "welcome_notification": "Welcome to Maxun!",
+      "error_notification": "Registeration Failed. Please try again."
+    },
+    "recordingtable":{
+      "run": "Run",
+      "name": "Name",
+      "schedule": "Schedule",
+      "integrate": "Integrate",
+      "settings": "Settings",
+      "options": "Options",
+      "heading":"My Robots",
+      "new":"Create Robot",
+      "modal":{
+        "title":"Enter the URL",
+        "label":"URL",
+        "button":"Start Recording"
+      },
+      "edit":"Edit",
+      "delete":"Delete",
+      "duplicate":"Duplicate",
+      "search":"Search Robots..."
+      
+    },
+    "mainmenu":{
+      "recordings": "Robots",
+      "runs": "Runs",
+      "proxy": "Proxy",
+      "apikey": "API Key",
+      "feedback":"Join Maxun Cloud",
+      "apidocs":"API Docs"
+
+    },
+    "runstable":{
+      "runs":"All Runs",
+      "runStatus":"Status",
+      "runName":"Name",
+      "startedAt":"Started At",
+      "finishedAt":"Finished At",
+      "delete":"Delete",
+      "settings":"Settings",
+      "search":"Search Runs..."
+
+
+
+    }
+  } 
--- a/public/locales/es.json
+++ b/public/locales/es.json
@@ -0,0 +1,13 @@
+{
+    "app": {
+      "name": "Maxun",
+      "version": "beta"
+    },
+    "login": {
+      "title": "¡Bienvenido de nuevo!",
+      "email": "Correo electrónico",
+      "password": "Contraseña",
+      "button": "Iniciar sesión",
+      "register_prompt": "¿No tienes una cuenta? Regístrate"
+    }
+  }
--- a/public/locales/ja.json
+++ b/public/locales/ja.json
@@ -0,0 +1,61 @@
+{
+  "login": {
+      "title": "お帰りなさい！",
+      "email": "メールアドレス",
+      "password": "パスワード",
+      "button": "ログイン",
+      "loading": "読み込み中",
+      "register_prompt": "アカウントをお持ちでないですか？",
+      "register_link": "登録する",
+      "welcome_notification": "Maxunへようこそ！",
+      "error_notification": "ログインに失敗しました。もう一度お試しください。"
+  },
+  "register": {
+      "title": "アカウントを登録する",
+      "email": "メールアドレス",
+      "password": "パスワード",
+      "button": "登録する",
+      "loading": "読み込み中",
+      "register_prompt": "既にアカウントをお持ちですか？",
+      "login_link": "ログイン",
+      "welcome_notification": "Maxunへようこそ！",
+      "error_notification": "登録に失敗しました。もう一度お試しください。"
+  },
+  "recordingtable": {
+      "run": "実行",
+      "name": "名前",
+      "schedule": "スケジュール",
+      "integrate": "統合",
+      "settings": "設定",
+      "options": "オプション",
+      "heading": "私のロボット",
+      "new": "ロボットを作成",
+      "modal": {
+          "title": "URLを入力してください",
+          "label": "URL",
+          "button": "録画を開始"
+      },
+      "edit": "編集",
+      "delete": "削除",
+      "duplicate": "複製",
+      "search": "ロボットを検索..."
+  },
+  "mainmenu": {
+      "recordings": "ロボット",
+      "runs": "実行",
+      "proxy": "プロキシ",
+      "apikey": "APIキー",
+      "feedback": "Maxunクラウドに参加する",
+      "apidocs": "APIドキュメント"
+  },
+  "runstable": {
+      "runs": "すべての実行",
+      "runStatus": "ステータス",
+      "runName": "名前",
+      "startedAt": "開始日時",
+      "finishedAt": "終了日時",
+      "delete": "削除",
+      "settings": "設定",
+      "search": "実行を検索..."
+  }
+}
--- a/public/locales/zh.json
+++ b/public/locales/zh.json
@@ -0,0 +1,13 @@
+{
+    "app": {
+      "name": "Maxun",
+      "version": "beta"
+    },
+    "login": {
+      "title": "欢迎回来！",
+      "email": "电子邮件",
+      "password": "密码",
+      "button": "登录",
+      "register_prompt": "没有账号？注册"
+    }
+  }
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,8 +1,10 @@
-import React from 'react';
-import { Routes, Route } from 'react-router-dom';
+import React from "react";
+import { Routes, Route } from "react-router-dom";
 import { ThemeProvider, createTheme } from "@mui/material/styles";
 import { GlobalInfoProvider } from "./context/globalInfo";
 import { PageWrapper } from "./pages/PageWrappper";
+import i18n from "./i18n";
+

 const theme = createTheme({
  palette: {
@@ -20,14 +22,14 @@ const theme = createTheme({
        },
        containedPrimary: {
          // Styles for 'contained' variant with 'primary' color
-          '&:hover': {
+          "&:hover": {
            backgroundColor: "#ff66d9",
          },
        },
        outlined: {
          // Apply white background for all 'outlined' variant buttons
          backgroundColor: "#ffffff",
-          '&:hover': {
+          "&:hover": {
            backgroundColor: "#f0f0f0", // Optional lighter background on hover
          },
        },
@@ -36,7 +38,7 @@ const theme = createTheme({
    MuiLink: {
      styleOverrides: {
        root: {
-          '&:hover': {
+          "&:hover": {
            color: "#ff00c3",
          },
        },
@@ -63,7 +65,7 @@ const theme = createTheme({
        standardInfo: {
          backgroundColor: "#fce1f4",
          color: "#ff00c3",
-          '& .MuiAlert-icon': {
+          "& .MuiAlert-icon": {
            color: "#ff00c3",
          },
        },
@@ -72,7 +74,7 @@ const theme = createTheme({
    MuiAlertTitle: {
      styleOverrides: {
        root: {
-          '& .MuiAlert-icon': {
+          "& .MuiAlert-icon": {
            color: "#ffffff",
          },
        },
@@ -81,15 +83,16 @@ const theme = createTheme({
  },
 });

-
 function App() {
  return (
    <ThemeProvider theme={theme}>
-      <GlobalInfoProvider>
-        <Routes>
-          <Route path="/*" element={<PageWrapper />} />
-        </Routes>
-      </GlobalInfoProvider>
+      
+        <GlobalInfoProvider>
+          <Routes>
+            <Route path="/*" element={<PageWrapper />} />
+          </Routes>
+        </GlobalInfoProvider>
+     
    </ThemeProvider>
  );
 }
--- a/src/components/molecules/NavBar.tsx
+++ b/src/components/molecules/NavBar.tsx
@@ -1,10 +1,24 @@
+
+
+
+
+
+
+
+
+
+
+
+
+import { useTranslation } from "react-i18next"; // Import useTranslation hook
+
 import React, { useState, useContext, useEffect } from 'react';
 import axios from 'axios';
 import styled from "styled-components";
 import { stopRecording } from "../../api/recording";
 import { useGlobalInfoStore } from "../../context/globalInfo";
 import { IconButton, Menu, MenuItem, Typography, Chip, Button, Modal, Tabs, Tab, Box, Snackbar } from "@mui/material";
-import { AccountCircle, Logout, Clear, YouTube, X, Update, Close } from "@mui/icons-material";
+import { AccountCircle, Logout, Clear, YouTube, X, Update, Close,Language } from "@mui/icons-material";
 import { useNavigate } from 'react-router-dom';
 import { AuthContext } from '../../context/auth';
 import { SaveRecording } from '../molecules/SaveRecording';
@@ -13,18 +27,26 @@ import { apiUrl } from '../../apiConfig';
 import MaxunLogo from "../../assets/maxunlogo.png";
 import packageJson from "../../../package.json"

+
 interface NavBarProps {
  recordingName: string;
  isRecording: boolean;
 }

-export const NavBar: React.FC<NavBarProps> = ({ recordingName, isRecording }) => {
-  const { notify, browserId, setBrowserId, recordingUrl } = useGlobalInfoStore();
+export const NavBar: React.FC<NavBarProps> = ({
+  recordingName,
+  isRecording,
+}) => {
+  const { notify, browserId, setBrowserId } = useGlobalInfoStore();
  const { state, dispatch } = useContext(AuthContext);
  const { user } = state;
  const navigate = useNavigate();
+  const { t, i18n } = useTranslation(); // Get translation function and i18n methods

  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+
+  const [langAnchorEl, setLangAnchorEl] = useState<null | HTMLElement>(null);
+
  const currentVersion = packageJson.version;

  const [open, setOpen] = useState(false);
@@ -58,29 +80,40 @@ export const NavBar: React.FC<NavBarProps> = ({ recordingName, isRecording }) =>
    setTab(newValue);
  };

+
  const handleMenuOpen = (event: React.MouseEvent<HTMLElement>) => {
    setAnchorEl(event.currentTarget);
  };

+  const handleLangMenuOpen = (event: React.MouseEvent<HTMLElement>) => {
+    setLangAnchorEl(event.currentTarget);
+  };
+
  const handleMenuClose = () => {
    setAnchorEl(null);
+    setLangAnchorEl(null);
  };

  const logout = async () => {
-    dispatch({ type: 'LOGOUT' });
-    window.localStorage.removeItem('user');
+    dispatch({ type: "LOGOUT" });
+    window.localStorage.removeItem("user");
    const { data } = await axios.get(`${apiUrl}/auth/logout`);
-    notify('success', data.message);
-    navigate('/login');
+    notify("success", data.message);
+    navigate("/login");
  };

  const goToMainMenu = async () => {
    if (browserId) {
      await stopRecording(browserId);
-      notify('warning', 'Current Recording was terminated');
+      notify("warning", "Current Recording was terminated");
      setBrowserId(null);
    }
-    navigate('/');
+    navigate("/");
+  };
+
+  const changeLanguage = (lang: string) => {
+    i18n.changeLanguage(lang); // Change language dynamically
+    localStorage.setItem("language", lang); // Persist language to localStorage
  };

  useEffect(() => {
@@ -95,228 +128,281 @@ export const NavBar: React.FC<NavBarProps> = ({ recordingName, isRecording }) =>
  }, []);

  return (
-    <>
-      {isUpdateAvailable && (
-        <Snackbar
-          open={isUpdateAvailable}
-          onClose={() => setIsUpdateAvailable(false)}
-          message={
-            `New version ${latestVersion} available! Click "Upgrade" to update.`
-          }
-          action={
-            <>
-              <Button
-                color="primary"
-                size="small"
-                onClick={handleUpdateOpen}
-                style={{
-                  backgroundColor: '#ff00c3',
-                  color: 'white',
-                  fontWeight: 'bold',
-                  textTransform: 'none',
-                  marginRight: '8px',
-                  borderRadius: '5px',
-                }}
-              >
-                Upgrade
-              </Button>
-              <IconButton
-                size="small"
-                aria-label="close"
-                color="inherit"
-                onClick={() => setIsUpdateAvailable(false)}
-                style={{ color: 'black' }}
-              >
-                <Close />
-              </IconButton>
-            </>
-          }
-          ContentProps={{
-            sx: {
-              background: "white",
-              color: "black",
-            }
-          }}
+
+    <NavBarWrapper>
+
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "flex-start",
+        }}
+      >
+        <img
+          src={MaxunLogo}
+          width={45}
+          height={40}
+          style={{ borderRadius: "5px", margin: "5px 0px 5px 15px" }}
+        />
+        <div style={{ padding: "11px" }}>
+          <ProjectName>Maxun</ProjectName>
+        </div>
+        <Chip
+          label="beta"
+          color="primary"
+          variant="outlined"
+          sx={{ marginTop: "10px" }}
        />

-      )}
-      <NavBarWrapper>
-        <div style={{
-          display: 'flex',
-          justifyContent: 'flex-start',
-        }}>
-          <img src={MaxunLogo} width={45} height={40} style={{ borderRadius: '5px', margin: '5px 0px 5px 15px' }} />
-          <div style={{ padding: '11px' }}><ProjectName>Maxun</ProjectName></div>
-          <Chip
-            label={`${currentVersion}`}
-            color="primary"
-            variant="outlined"
-            sx={{ marginTop: '10px' }}
-          />
+     
+      </div>
+      {user ? (
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "flex-end",
+          }}
+        >
+          {!isRecording ? (
+            <>
+              <IconButton
+                component="a"
+                href="https://discord.gg/5GbPjBUkws"
+                target="_blank"
+                rel="noopener noreferrer"
+                sx={{
+                  display: "flex",
+                  alignItems: "center",
+                  borderRadius: "5px",
+                  padding: "8px",
+                  marginRight: "30px",
+                }}
+              >
+                <DiscordIcon sx={{ marginRight: "5px" }} />
+              </IconButton>
+              <iframe
+                src="https://ghbtns.com/github-btn.html?user=getmaxun&repo=maxun&type=star&count=true&size=large"
+                frameBorder="0"
+                scrolling="0"
+                width="170"
+                height="30"
+                title="GitHub"
+              ></iframe>
+              <IconButton
+                onClick={handleMenuOpen}
+                sx={{
+                  display: "flex",
+                  alignItems: "center",
+                  borderRadius: "5px",
+                  padding: "8px",
+                  marginRight: "10px",
+                  "&:hover": { backgroundColor: "white", color: "#ff00c3" },
+                }}
+              >
+                <AccountCircle sx={{ marginRight: "5px" }} />
+                <Typography variant="body1">{user.email}</Typography>
+              </IconButton>
+              <Menu
+                anchorEl={anchorEl}
+                open={Boolean(anchorEl)}
+                onClose={handleMenuClose}
+                anchorOrigin={{
+                  vertical: "bottom",
+                  horizontal: "right",
+                }}
+                transformOrigin={{
+                  vertical: "top",
+                  horizontal: "right",
+                }}
+              >
+                <MenuItem
+                  onClick={() => {
+                    handleMenuClose();
+                    logout();
+                  }}
+                >
+                  <Logout sx={{ marginRight: "5px" }} /> {t("logout")}
+                </MenuItem>
+              </Menu>
+              
+            </>
+          ) : (
+            <>
+              <IconButton
+                onClick={goToMainMenu}
+                sx={{
+                  borderRadius: "5px",
+                  padding: "8px",
+                  background: "red",
+                  color: "white",
+                  marginRight: "10px",
+                  "&:hover": { color: "white", backgroundColor: "red" },
+                }}
+              >
+                <Clear sx={{ marginRight: "5px" }} />
+                {t("discard")}
+              </IconButton>
+              <SaveRecording fileName={recordingName} />
+            </>
+          )}
+          <IconButton
+            onClick={handleLangMenuOpen}
+            sx={{
+              display: "flex",
+              alignItems: "center",
+              borderRadius: "5px",
+              padding: "8px",
+              marginRight: "10px",
+            }}
+          >
+            <Typography variant="body1">
+              <Language />
+              </Typography>
+          </IconButton>
+          <Menu
+            anchorEl={langAnchorEl}
+            open={Boolean(langAnchorEl)}
+            onClose={handleMenuClose}
+            anchorOrigin={{
+              vertical: "bottom",
+              horizontal: "right",
+            }}
+            transformOrigin={{
+              vertical: "top",
+              horizontal: "right",
+            }}
+          >
+            <MenuItem
+              onClick={() => {
+                changeLanguage("en");
+                handleMenuClose();
+              }}
+            >
+              English
+            </MenuItem>
+            <MenuItem
+              onClick={() => {
+                changeLanguage("es");
+                handleMenuClose();
+              }}
+            >
+              Español
+            </MenuItem>
+            <MenuItem
+              onClick={() => {
+                changeLanguage("ja");
+                handleMenuClose();
+              }}
+            >
+              日本語
+            </MenuItem>
+            <MenuItem
+              onClick={() => {
+                changeLanguage("ar");
+                handleMenuClose();
+              }}
+            >
+              العربية
+            </MenuItem>
+            <MenuItem
+              onClick={() => {
+                changeLanguage("zh");
+                handleMenuClose();
+              }}
+            >
+              中文
+            </MenuItem>
+            <MenuItem
+              onClick={() => {
+                changeLanguage("de");
+                handleMenuClose();
+              }}
+            >
+              German
+            
+            </MenuItem>
+          </Menu>
        </div>
-        {
-          user ? (
-            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end' }}>
-              {!isRecording ? (
-                <>
-                  <Button variant="outlined" onClick={handleUpdateOpen} sx={{
-                    marginRight: '40px',
-                    color: "#00000099",
-                    border: "#00000099 1px solid",
-                    '&:hover': { color: '#ff00c3', border: '#ff00c3 1px solid' }
-                  }}>
-                    <Update sx={{ marginRight: '5px' }} /> Upgrade Maxun
-                  </Button>
-                  <Modal open={open} onClose={handleUpdateClose}>
-                    <Box
-                      sx={{
-                        position: "absolute",
-                        top: "50%",
-                        left: "50%",
-                        transform: "translate(-50%, -50%)",
-                        width: 500,
-                        bgcolor: "background.paper",
-                        boxShadow: 24,
-                        p: 4,
-                        borderRadius: 2,
-                      }}
-                    >
-                      {latestVersion === null ? (
-                        <Typography>Checking for updates...</Typography>
-                      ) : currentVersion === latestVersion ? (
-                        <Typography variant="h6" textAlign="center">
-                          🎉 You're up to date!
-                        </Typography>
-                      ) : (
-                        <>
-                          <Typography variant="body1" textAlign="left" sx={{ marginLeft: '30px' }}>
-                            A new version is available: {latestVersion}. Upgrade to the latest version for bug fixes, enhancements and new features!
-                            <br />
-                            View all the new updates
-                            <a href="https://github.com/getmaxun/maxun/releases/" target="_blank" style={{ textDecoration: 'none' }}>{' '}here.</a>
-                          </Typography>
-                          <Tabs
-                            value={tab}
-                            onChange={handleUpdateTabChange}
-                            sx={{ marginTop: 2, marginBottom: 2 }}
-                            centered
-                          >
-                            <Tab label="Manual Setup Upgrade" />
-                            <Tab label="Docker Compose Setup Upgrade" />
-                          </Tabs>
-                          {tab === 0 && (
-                            <Box sx={{ marginLeft: '30px', background: '#cfd0d1', padding: 1, borderRadius: 3 }}>
-                              <code style={{ color: 'black' }}>
-                                <p>Run the commands below</p>
-                                # pull latest changes
-                                <br />
-                                git pull origin master
-                                <br />
-                                <br />
-                                # install dependencies
-                                <br />
-                                npm install
-                                <br />
-                                <br />
-                                # start maxun
-                                <br />
-                                npm run start
-                              </code>
-                            </Box>
-                          )}
-                          {tab === 1 && (
-                            <Box sx={{ marginLeft: '30px', background: '#cfd0d1', padding: 1, borderRadius: 3 }}>
-                              <code style={{ color: 'black' }}>
-                                <p>Run the commands below</p>
-                                # pull latest docker images
-                                <br />
-                                docker-compose pull
-                                <br />
-                                <br />
-                                # start maxun
-                                <br />
-                                docker-compose up -d
-                              </code>
-                            </Box>
-                          )}
-                        </>
-                      )}
-                    </Box>
-                  </Modal>
-                  <iframe src="https://ghbtns.com/github-btn.html?user=getmaxun&repo=maxun&type=star&count=true&size=large" frameBorder="0" scrolling="0" width="170" height="30" title="GitHub"></iframe>
-                  <IconButton onClick={handleMenuOpen} sx={{
-                    display: 'flex',
-                    alignItems: 'center',
-                    borderRadius: '5px',
-                    padding: '8px',
-                    marginRight: '10px',
-                    '&:hover': { backgroundColor: 'white', color: '#ff00c3' }
-                  }}>
-                    <AccountCircle sx={{ marginRight: '5px' }} />
-                    <Typography variant="body1">{user.email}</Typography>
-                  </IconButton>
-                  <Menu
-                    anchorEl={anchorEl}
-                    open={Boolean(anchorEl)}
-                    onClose={handleMenuClose}
-                    anchorOrigin={{
-                      vertical: 'bottom',
-                      horizontal: 'right',
-                    }}
-                    transformOrigin={{
-                      vertical: 'top',
-                      horizontal: 'right',
-                    }}
-                    PaperProps={{ sx: { width: '180px' } }}
-                  >
-                    <MenuItem onClick={() => { handleMenuClose(); logout(); }}>
-                      <Logout sx={{ marginRight: '5px' }} /> Logout
-                    </MenuItem>
-                    <MenuItem onClick={() => {
-                      window.open('https://discord.gg/5GbPjBUkws', '_blank');
-                    }}>
-                      <DiscordIcon sx={{ marginRight: '5px' }} /> Discord
-                    </MenuItem>
-                    <MenuItem onClick={() => {
-                      window.open('https://www.youtube.com/@MaxunOSS/videos?ref=app', '_blank');
-                    }}>
-                      <YouTube sx={{ marginRight: '5px' }} /> YouTube
-                    </MenuItem>
-                    <MenuItem onClick={() => {
-                      window.open('https://x.com/maxun_io?ref=app', '_blank');
-                    }}>
-                      <X sx={{ marginRight: '5px' }} /> Twiiter (X)
-                    </MenuItem>
-                  </Menu>
-                </>
-              ) : (
-                <>
-                  <IconButton onClick={goToMainMenu} sx={{
-                    borderRadius: '5px',
-                    padding: '8px',
-                    background: 'red',
-                    color: 'white',
-                    marginRight: '10px',
-                    '&:hover': { color: 'white', backgroundColor: 'red' }
-                  }}>
-                    <Clear sx={{ marginRight: '5px' }} />
-                    Discard
-                  </IconButton>
-                  <SaveRecording fileName={recordingName} />
-                </>
-              )}
-            </div>
-          ) : ""
-        }
-      </NavBarWrapper>
-    </>
+      ) : (
+       <><IconButton
+       onClick={handleLangMenuOpen}
+       sx={{
+         display: "flex",
+         alignItems: "center",
+         borderRadius: "5px",
+         padding: "8px",
+         marginRight: "10px",
+       }}
+     >
+       <Typography variant="body1">{t("language")}</Typography>
+     </IconButton>
+     <Menu
+       anchorEl={langAnchorEl}
+       open={Boolean(langAnchorEl)}
+       onClose={handleMenuClose}
+       anchorOrigin={{
+         vertical: "bottom",
+         horizontal: "right",
+       }}
+       transformOrigin={{
+         vertical: "top",
+         horizontal: "right",
+       }}
+     >
+       <MenuItem
+         onClick={() => {
+           changeLanguage("en");
+           handleMenuClose();
+         }}
+       >
+         English
+       </MenuItem>
+       <MenuItem
+         onClick={() => {
+           changeLanguage("es");
+           handleMenuClose();
+         }}
+       >
+         Español
+       </MenuItem>
+       <MenuItem
+         onClick={() => {
+           changeLanguage("ja");
+           handleMenuClose();
+         }}
+       >
+         日本語
+       </MenuItem>
+       <MenuItem
+         onClick={() => {
+           changeLanguage("ar");
+           handleMenuClose();
+         }}
+       >
+         العربية
+       </MenuItem>
+       <MenuItem
+         onClick={() => {
+           changeLanguage("zh");
+           handleMenuClose();
+         }}
+       >
+         中文
+       </MenuItem>
+     </Menu></>
+      )}
+
+
+    </NavBarWrapper>
+
+  
  );
 };

 const NavBarWrapper = styled.div`
  grid-area: navbar;
  background-color: white;
-  padding:5px;
+  padding: 5px;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #e0e0e0;
--- a/src/components/molecules/RecordingsTable.tsx
+++ b/src/components/molecules/RecordingsTable.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useTranslation } from 'react-i18next';
 import Paper from '@mui/material/Paper';
 import Table from '@mui/material/Table';
 import TableBody from '@mui/material/TableBody';
@@ -19,6 +20,7 @@ import { useNavigate } from 'react-router-dom';
 import { stopRecording } from "../../api/recording";
 import { GenericModal } from '../atoms/GenericModal';

+
 /** TODO:
 *  1. allow editing existing robot after persisting browser steps
 */
@@ -31,30 +33,9 @@ interface Column {
  format?: (value: string) => string;
 }

-const columns: readonly Column[] = [
-  { id: 'interpret', label: 'Run', minWidth: 80 },
-  { id: 'name', label: 'Name', minWidth: 80 },
-  {
-    id: 'schedule',
-    label: 'Schedule',
-    minWidth: 80,
-  },
-  {
-    id: 'integrate',
-    label: 'Integrate',
-    minWidth: 80,
-  },
-  {
-    id: 'settings',
-    label: 'Settings',
-    minWidth: 80,
-  },
-  {
-    id: 'options',
-    label: 'Options',
-    minWidth: 80,
-  },
-];
+
+
+

 interface Data {
  id: string;
@@ -76,12 +57,38 @@ interface RecordingsTableProps {
 }

 export const RecordingsTable = ({ handleEditRecording, handleRunRecording, handleScheduleRecording, handleIntegrateRecording, handleSettingsRecording, handleEditRobot, handleDuplicateRobot }: RecordingsTableProps) => {
+  const {t} = useTranslation();
  const [page, setPage] = React.useState(0);
  const [rowsPerPage, setRowsPerPage] = React.useState(10);
  const [rows, setRows] = React.useState<Data[]>([]);
  const [isModalOpen, setModalOpen] = React.useState(false);
  const [searchTerm, setSearchTerm] = React.useState('');

+  const columns: readonly Column[] = [
+    { id: 'interpret', label: t('recordingtable.run'), minWidth: 80 },
+    { id: 'name', label: t('recordingtable.name'), minWidth: 80 },
+    {
+      id: 'schedule',
+      label: t('recordingtable.schedule'),
+      minWidth: 80,
+    },
+    {
+      id: 'integrate',
+      label: t('recordingtable.integrate'),
+      minWidth: 80,
+    },
+    {
+      id: 'settings',
+      label: t('recordingtable.settings'),
+      minWidth: 80,
+    },
+    {
+      id: 'options',
+      label: t('recordingtable.options'),
+      minWidth: 80,
+    },
+  ];
+
  const { notify, setRecordings, browserId, setBrowserId, recordingUrl, setRecordingUrl, recordingName, setRecordingName, recordingId, setRecordingId } = useGlobalInfoStore();
  const navigate = useNavigate();

@@ -151,16 +158,17 @@ export const RecordingsTable = ({ handleEditRecording, handleRunRecording, handl
    row.name.toLowerCase().includes(searchTerm.toLowerCase())
  );

+
  return (
    <React.Fragment>
      <Box display="flex" justifyContent="space-between" alignItems="center">
        <Typography variant="h6" gutterBottom>
-          My Robots
+          {t('recordingtable.heading')}
        </Typography>
        <Box display="flex" alignItems="center" gap={2}>
          <TextField
            size="small"
-            placeholder="Search robots..."
+            placeholder={t('recordingtable.search')}
            value={searchTerm}
            onChange={handleSearchChange}
            InputProps={{
@@ -187,7 +195,7 @@ export const RecordingsTable = ({ handleEditRecording, handleRunRecording, handl
              '&:hover': { color: 'white', backgroundColor: '#ff00c3' }
            }}
          >
-            <Add sx={{ marginRight: '5px' }} /> Create Robot
+            <Add sx={{ marginRight: '5px' }} /> {t('recordingtable.new')}
          </IconButton>
        </Box>
      </Box>
@@ -297,9 +305,9 @@ export const RecordingsTable = ({ handleEditRecording, handleRunRecording, handl
      />
      <GenericModal isOpen={isModalOpen} onClose={() => setModalOpen(false)} modalStyle={modalStyle}>
        <div style={{ padding: '20px' }}>
-          <Typography variant="h6" gutterBottom>Enter URL To Extract Data</Typography>
+          <Typography variant="h6" gutterBottom>{t('recordingtable.modal.title')}</Typography>
          <TextField
-            label="URL"
+            label={t('recordingtable.modal.label')}
            variant="outlined"
            fullWidth
            value={recordingUrl}
@@ -312,7 +320,7 @@ export const RecordingsTable = ({ handleEditRecording, handleRunRecording, handl
            onClick={startRecording}
            disabled={!recordingUrl}
          >
-            Start Training Robot
+            {t('recordingtable.modal.button')}
          </Button>
        </div>
      </GenericModal>
@@ -397,6 +405,8 @@ const OptionsButton = ({ handleEdit, handleDelete, handleDuplicate }: OptionsBut
    setAnchorEl(null);
  };

+  const {t} = useTranslation();
+
  return (
    <>
      <IconButton
@@ -415,20 +425,23 @@ const OptionsButton = ({ handleEdit, handleDelete, handleDuplicate }: OptionsBut
          <ListItemIcon>
            <Edit fontSize="small" />
          </ListItemIcon>
-          <ListItemText>Edit</ListItemText>
-        </MenuItem>
-        <MenuItem onClick={() => { handleDuplicate(); handleClose(); }}>
-          <ListItemIcon>
-            <ContentCopy fontSize="small" />
-          </ListItemIcon>
-          <ListItemText>Duplicate</ListItemText>
+          <ListItemText>{t('recordingtable.edit')}</ListItemText>
        </MenuItem>
+
        <MenuItem onClick={() => { handleDelete(); handleClose(); }}>
          <ListItemIcon>
            <DeleteForever fontSize="small" />
          </ListItemIcon>
-          <ListItemText>Delete</ListItemText>
+          <ListItemText>{t('recordingtable.delete')}</ListItemText>
        </MenuItem>
+
+        <MenuItem onClick={() => { handleDuplicate(); handleClose(); }}>
+          <ListItemIcon>
+            <ContentCopy fontSize="small" />
+          </ListItemIcon>
+          <ListItemText>{t('recordingtable.duplicate')}</ListItemText>
+        </MenuItem>
+        
      </Menu>
    </>
  );
--- a/src/components/molecules/RunsTable.tsx
+++ b/src/components/molecules/RunsTable.tsx
@@ -1,4 +1,6 @@
 import * as React from 'react';
+import { useEffect, useState } from "react";
+import { useTranslation } from 'react-i18next';
 import Paper from '@mui/material/Paper';
 import Table from '@mui/material/Table';
 import TableBody from '@mui/material/TableBody';
@@ -7,14 +9,24 @@ import TableContainer from '@mui/material/TableContainer';
 import TableHead from '@mui/material/TableHead';
 import TablePagination from '@mui/material/TablePagination';
 import TableRow from '@mui/material/TableRow';
-import { useEffect, useState } from "react";
+import { Accordion, AccordionSummary, AccordionDetails, Typography, Box, TextField } from '@mui/material';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import SearchIcon from '@mui/icons-material/Search';
+
 import { useGlobalInfoStore } from "../../context/globalInfo";
 import { getStoredRuns } from "../../api/storage";
 import { RunSettings } from "./RunSettings";
 import { CollapsibleRow } from "./ColapsibleRow";
-import { Accordion, AccordionSummary, AccordionDetails, Typography, Box, TextField } from '@mui/material';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import SearchIcon from '@mui/icons-material/Search';
+
+// Export columns before the component
+export const columns: readonly Column[] = [
+  { id: 'runStatus', label: 'Status', minWidth: 80 },
+  { id: 'name', label: 'Name', minWidth: 80 },
+  { id: 'startedAt', label: 'Started At', minWidth: 80 },
+  { id: 'finishedAt', label: 'Finished At', minWidth: 80 },
+  { id: 'settings', label: 'Settings', minWidth: 80 },
+  { id: 'delete', label: 'Delete', minWidth: 80 },
+];

 interface Column {
  id: 'runStatus' | 'name' | 'startedAt' | 'finishedAt' | 'delete' | 'settings';
@@ -24,16 +36,7 @@ interface Column {
  format?: (value: string) => string;
 }

-export const columns: readonly Column[] = [
-  { id: 'runStatus', label: 'Status', minWidth: 80 },
-  { id: 'name', label: 'Robot Name', minWidth: 80 },
-  { id: 'startedAt', label: 'Started at', minWidth: 80 },
-  { id: 'finishedAt', label: 'Finished at', minWidth: 80 },
-  { id: 'settings', label: 'Settings', minWidth: 80 },
-  { id: 'delete', label: 'Delete', minWidth: 80 },
-];
-
-export interface Data {
+interface Data {
  id: number;
  status: string;
  name: string;
@@ -58,15 +61,25 @@ interface RunsTableProps {
  runningRecordingName: string;
 }

-export const RunsTable = (
-  { currentInterpretationLog, abortRunHandler, runId, runningRecordingName }: RunsTableProps) => {
+export const RunsTable: React.FC<RunsTableProps> = ({ 
+  currentInterpretationLog, 
+  abortRunHandler, 
+  runId, 
+  runningRecordingName 
+}) => {
+  const { t } = useTranslation();
+
+  // Update column labels using translation if needed
+  const translatedColumns = columns.map(column => ({
+    ...column,
+    label: t(`runstable.${column.id}`, column.label)
+  }));
+
  const [page, setPage] = useState(0);
  const [rowsPerPage, setRowsPerPage] = useState(10);
  const [rows, setRows] = useState<Data[]>([]);
-
  const [searchTerm, setSearchTerm] = useState('');

-
  const { notify, rerenderRuns, setRerenderRuns } = useGlobalInfoStore();

  const handleChangePage = (event: unknown, newPage: number) => {
@@ -86,16 +99,13 @@ export const RunsTable = (
  const fetchRuns = async () => {
    const runs = await getStoredRuns();
    if (runs) {
-      const parsedRows: Data[] = [];
-      runs.map((run: any, index) => {
-        parsedRows.push({
-          id: index,
-          ...run,
-        });
-      });
+      const parsedRows: Data[] = runs.map((run: any, index: number) => ({
+        id: index,
+        ...run,
+      }));
      setRows(parsedRows);
    } else {
-      notify('error', 'No runs found. Please try again.')
+      notify('error', 'No runs found. Please try again.');
    }
  };

@@ -104,7 +114,7 @@ export const RunsTable = (
      fetchRuns();
      setRerenderRuns(false);
    }
-  }, [rerenderRuns]);
+  }, [rerenderRuns, rows.length, setRerenderRuns]);

  const handleDelete = () => {
    setRows([]);
@@ -112,7 +122,6 @@ export const RunsTable = (
    fetchRuns();
  };

-
  // Filter rows based on search term
  const filteredRows = rows.filter((row) =>
    row.name.toLowerCase().includes(searchTerm.toLowerCase())
@@ -120,7 +129,6 @@ export const RunsTable = (

  // Group filtered rows by robot meta id
  const groupedRows = filteredRows.reduce((acc, row) => {
-
    if (!acc[row.robotMetaId]) {
      acc[row.robotMetaId] = [];
    }
@@ -132,11 +140,11 @@ export const RunsTable = (
    <React.Fragment>
      <Box display="flex" justifyContent="space-between" alignItems="center" mb={2}>
        <Typography variant="h6" gutterBottom>
-          All Runs
+          {t('runstable.runs', 'Runs')}
        </Typography>
        <TextField
          size="small"
-          placeholder="Search runs..."
+          placeholder={t('runstable.search', 'Search runs...')}
          value={searchTerm}
          onChange={handleSearchChange}
          InputProps={{
@@ -149,16 +157,14 @@ export const RunsTable = (
        {Object.entries(groupedRows).map(([id, data]) => (
          <Accordion key={id}>
            <AccordionSummary expandIcon={<ExpandMoreIcon />}>
-
              <Typography variant="h6">{data[data.length - 1].name}</Typography>
-
            </AccordionSummary>
            <AccordionDetails>
              <Table stickyHeader aria-label="sticky table">
                <TableHead>
                  <TableRow>
                    <TableCell />
-                    {columns.map((column) => (
+                    {translatedColumns.map((column) => (
                      <TableCell
                        key={column.id}
                        align={column.align}
@@ -200,4 +206,4 @@ export const RunsTable = (
      />
    </React.Fragment>
  );
-};
+};
--- a/src/components/organisms/MainMenu.tsx
+++ b/src/components/organisms/MainMenu.tsx
@@ -5,6 +5,9 @@ import Box from '@mui/material/Box';
 import { Paper, Button } from "@mui/material";
 import { AutoAwesome, FormatListBulleted, VpnKey, Usb, CloudQueue, Code } from "@mui/icons-material";
 import { apiUrl } from "../../apiConfig";
+import { useTranslation } from 'react-i18next';
+import i18n from '../../i18n';
+

 interface MainMenuProps {
  value: string;
@@ -12,6 +15,7 @@ interface MainMenuProps {
 }

 export const MainMenu = ({ value = 'recordings', handleChangeContent }: MainMenuProps) => {
+  const {t} = useTranslation();

  const handleChange = (event: React.SyntheticEvent, newValue: string) => {
    handleChangeContent(newValue);
@@ -47,7 +51,7 @@ export const MainMenu = ({ value = 'recordings', handleChangeContent }: MainMenu
              fontSize: 'medium',
            }}
            value="recordings"
-            label="Robots"
+            label={t('mainmenu.recordings')}
            icon={<AutoAwesome />}
            iconPosition="start"
          />
@@ -58,7 +62,7 @@ export const MainMenu = ({ value = 'recordings', handleChangeContent }: MainMenu
              fontSize: 'medium',
            }}
            value="runs"
-            label="Runs"
+            label={t('mainmenu.runs')}
            icon={<FormatListBulleted />}
            iconPosition="start"
          />
@@ -69,7 +73,7 @@ export const MainMenu = ({ value = 'recordings', handleChangeContent }: MainMenu
              fontSize: 'medium',
            }}
            value="proxy"
-            label="Proxy"
+            label={t('mainmenu.proxy')}
            icon={<Usb />}
            iconPosition="start"
          />
@@ -80,7 +84,7 @@ export const MainMenu = ({ value = 'recordings', handleChangeContent }: MainMenu
              fontSize: 'medium',
            }}
            value="apikey"
-            label="API Key"
+            label={t('mainmenu.apikey')}
            icon={<VpnKey />}
            iconPosition="start"
          />
@@ -88,10 +92,10 @@ export const MainMenu = ({ value = 'recordings', handleChangeContent }: MainMenu
        <hr />
        <Box sx={{ display: 'flex', flexDirection: 'column', gap: '1rem', textAlign: 'left' }}>
          <Button href={`${apiUrl}/api-docs/`} target="_blank" rel="noopener noreferrer" sx={buttonStyles} startIcon={<Code />}>
-            Website To API
+            {t('mainmenu.apidocs')}
          </Button>
          <Button href="https://forms.gle/hXjgqDvkEhPcaBW76" target="_blank" rel="noopener noreferrer" sx={buttonStyles} startIcon={<CloudQueue />}>
-            Join Maxun Cloud
+            {t('mainmenu.feedback')}
          </Button>
        </Box>
      </Box>
--- a/src/i18n.ts
+++ b/src/i18n.ts
@@ -0,0 +1,22 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import Backend from 'i18next-http-backend';
+import LanguageDetector from 'i18next-browser-languagedetector';
+
+i18n
+  .use(Backend)
+  .use(LanguageDetector)
+  .use(initReactI18next)
+  .init({
+    fallbackLng: 'en',
+    debug: import.meta.env.DEV,
+    supportedLngs: ['en', 'es', 'ja', 'zh','de'],
+    interpolation: {
+      escapeValue: false, // React already escapes
+    },
+    backend: {
+      loadPath: '/locales/{{lng}}.json',
+    },
+  });
+
+export default i18n;
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom/client';
 import './index.css';
 import { BrowserRouter } from 'react-router-dom';
 import App from './App';
+import i18n from "./i18n"

 const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
--- a/src/pages/Login.tsx
+++ b/src/pages/Login.tsx
@@ -1,134 +1,142 @@
-import axios from "axios";
-import { useState, useContext, useEffect, FormEvent } from "react";
-import { useNavigate, Link } from "react-router-dom";
-import { AuthContext } from "../context/auth";
-import { Box, Typography, TextField, Button, CircularProgress, Grid } from "@mui/material";
-import { useGlobalInfoStore } from "../context/globalInfo";
+import axios from "axios"; 
+import { useState, useContext, useEffect, FormEvent } from "react"; 
+import { useNavigate, Link } from "react-router-dom"; 
+import { AuthContext } from "../context/auth"; 
+import { Box, Typography, TextField, Button, CircularProgress, Grid } from "@mui/material"; 
+import { useGlobalInfoStore } from "../context/globalInfo"; 
 import { apiUrl } from "../apiConfig";
+import { useTranslation } from 'react-i18next';
+import i18n from '../i18n'; 

 const Login = () => {
-  const [form, setForm] = useState({
-    email: "",
-    password: "",
-  });
-  const [loading, setLoading] = useState(false);
-  const { notify } = useGlobalInfoStore();
-  const { email, password } = form;
+   const { t } = useTranslation();
+   console.log(i18n) 
+   console.log(t)
+   const [form, setForm] = useState({
+     email: "",
+     password: "",
+   });
+   const [loading, setLoading] = useState(false);
+   const { notify } = useGlobalInfoStore();
+   const { email, password } = form;

-  const { state, dispatch } = useContext(AuthContext);
-  const { user } = state;
+   const { state, dispatch } = useContext(AuthContext);
+   const { user } = state;

-  const navigate = useNavigate();
+   const navigate = useNavigate();

-  useEffect(() => {
-    if (user) {
-      navigate("/");
-    }
-  }, [user, navigate]);
+   useEffect(() => {
+     if (user) {
+       navigate("/");
+     }
+   }, [user, navigate]);

-  const handleChange = (e: any) => {
-    const { name, value } = e.target;
-    setForm({ ...form, [name]: value });
-  };
+   const handleChange = (e: any) => {
+     const { name, value } = e.target;
+     setForm({ ...form, [name]: value });
+   };

-  const submitForm = async (e: any) => {
-    e.preventDefault();
-    setLoading(true);
-    try {
-      const { data } = await axios.post(`${apiUrl}/auth/login`, {
-        email,
-        password,
-      });
-      dispatch({ type: "LOGIN", payload: data });
-      notify("success", "Welcome to Maxun!");
-      window.localStorage.setItem("user", JSON.stringify(data));
-      navigate("/");
-    } catch (err) {
-      notify("error", "Login Failed. Please try again.");
-      setLoading(false);
-    }
-  };
+   const submitForm = async (e: any) => {
+     e.preventDefault();
+     setLoading(true);
+     try {
+       const { data } = await axios.post(`${apiUrl}/auth/login`, {
+         email,
+         password,
+       });
+       dispatch({ type: "LOGIN", payload: data });
+       notify("success", t('login.welcome_notification')); // Translated notification
+       window.localStorage.setItem("user", JSON.stringify(data));
+       navigate("/");
+     } catch (err) {
+       notify("error", t('login.error_notification')); // Translated error
+       setLoading(false);
+     }
+   };

-  return (
-    <Box
-      sx={{
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center",
-        maxHeight: "100vh",
-        mt: 6,
-        padding: 4,
-      }}
-    >
-    
-        <Box
-          component="form"
-          onSubmit={submitForm}
-          sx={{
-            textAlign: "center",
-            backgroundColor: "#ffffff",
-            padding: 6,
-            borderRadius: 5,
-            boxShadow: "0px 20px 40px rgba(0, 0, 0, 0.2), 0px -5px 10px rgba(0, 0, 0, 0.15)",
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "center",
-            maxWidth: 400,
-            width: "100%",
-          }}
-        >
-          <img src="../src/assets/maxunlogo.png" alt="logo" height={55} width={60} style={{ marginBottom: 20, borderRadius: "20%", alignItems: "center" }} />
-          <Typography variant="h4" gutterBottom>
-            Welcome Back!
-          </Typography>
-          <TextField
-            fullWidth
-            label="Email"
-            name="email"
-            value={email}
-            onChange={handleChange}
-            margin="normal"
-            variant="outlined"
-            required
-          />
-          <TextField
-            fullWidth
-            label="Password"
-            name="password"
-            type="password"
-            value={password}
-            onChange={handleChange}
-            margin="normal"
-            variant="outlined"
-            required
-          />
-          <Button
-            type="submit"
-            fullWidth
-            variant="contained"
-            color="primary"
-            sx={{ mt: 2, mb: 2 }}
-            disabled={loading || !email || !password}
-          >
-            {loading ? (
-              <>
-                <CircularProgress size={20} sx={{ mr: 2 }} />
-                Loading
-              </>
-            ) : (
-              "Login"
-            )}
-          </Button>
-          <Typography variant="body2" align="center">
-            Don’t have an account?{" "}
-            <Link to="/register" style={{ textDecoration: "none", color: "#ff33cc" }}>
-              Register
-            </Link>
-          </Typography>
-        </Box>
-        </Box>
-     
-  );
+   // Language switcher function
+   
+
+   return (
+     <Box
+       sx={{
+         display: "flex",
+         justifyContent: "center",
+         alignItems: "center",
+         maxHeight: "100vh",
+         mt: 6,
+         padding: 4,
+       }}
+     >
+       {/* Language Switcher Buttons */}
+
+       <Box
+         component="form"
+         onSubmit={submitForm}
+         sx={{
+           textAlign: "center",
+           backgroundColor: "#ffffff",
+           padding: 6,
+           borderRadius: 5,
+           boxShadow: "0px 20px 40px rgba(0, 0, 0, 0.2), 0px -5px 10px rgba(0, 0, 0, 0.15)",
+           display: "flex",
+           flexDirection: "column",
+           alignItems: "center",
+           maxWidth: 400,
+           width: "100%",
+         }}
+       >
+         <img src="../src/assets/maxunlogo.png" alt="logo" height={55} width={60} style={{ marginBottom: 20, borderRadius: "20%", alignItems: "center" }} />
+         <Typography variant="h4" gutterBottom>
+           {t('login.title')}
+         </Typography>
+         <TextField
+           fullWidth
+           label={t('login.email')}
+           name="email"
+           value={email}
+           onChange={handleChange}
+           margin="normal"
+           variant="outlined"
+           required
+         />
+         <TextField
+           fullWidth
+           label={t('login.password')}
+           name="password"
+           type="password"
+           value={password}
+           onChange={handleChange}
+           margin="normal"
+           variant="outlined"
+           required
+         />
+         <Button
+           type="submit"
+           fullWidth
+           variant="contained"
+           color="primary"
+           sx={{ mt: 2, mb: 2 }}
+           disabled={loading || !email || !password}
+         >
+           {loading ? (
+             <>
+               <CircularProgress size={20} sx={{ mr: 2 }} />
+               {t('login.loading')}
+             </>
+           ) : (
+             t('login.button')
+           )}
+         </Button>
+         <Typography variant="body2" align="center">
+           {t('login.register_prompt')}{" "}
+           <Link to="/register" style={{ textDecoration: "none", color: "#ff33cc" }}>
+             {t('login.register_link')}
+           </Link>
+         </Typography>
+       </Box>
+     </Box>
+   );
 };

-export default Login;
+export default Login;
--- a/src/pages/Register.tsx
+++ b/src/pages/Register.tsx
@@ -5,8 +5,13 @@ import { AuthContext } from "../context/auth";
 import { Box, Typography, TextField, Button, CircularProgress } from "@mui/material";
 import { useGlobalInfoStore } from "../context/globalInfo";
 import { apiUrl } from "../apiConfig";
+import { useTranslation } from 'react-i18next';
+import i18n from '../i18n';
+
+

 const Register = () => {
+  const {t} = useTranslation();
  const [form, setForm] = useState({
    email: "",
    password: "",
@@ -40,11 +45,13 @@ const Register = () => {
        password,
      });
      dispatch({ type: "LOGIN", payload: data });
-      notify("success", "Registration Successful!");
+      notify("success", t('register.welcome_notification'));
      window.localStorage.setItem("user", JSON.stringify(data));
      navigate("/");
    } catch (error:any) {
-      notify("error",  `Registration Failed. Please try again. ${error.response.data}`);
+
+      notify("error", error.response.data || t('register.error_notification'));
+
      setLoading(false);
    }
  };
@@ -78,11 +85,11 @@ const Register = () => {
      >
        <img src="../src/assets/maxunlogo.png" alt="logo" height={55} width={60} style={{ marginBottom: 20, borderRadius: "20%", alignItems: "center" }} />
        <Typography variant="h4" gutterBottom>
-          Create an Account
+          {t('register.title')}
        </Typography>
        <TextField
          fullWidth
-          label="Email"
+          label={t('register.email')}
          name="email"
          value={email}
          onChange={handleChange}
@@ -92,7 +99,7 @@ const Register = () => {
        />
        <TextField
          fullWidth
-          label="Password"
+          label={t('register.password')}
          name="password"
          type="password"
          value={password}
@@ -115,13 +122,14 @@ const Register = () => {
              Loading
            </>
          ) : (
-            "Register"
+            t('register.button')
          )}
        </Button>
        <Typography variant="body2" align="center">
-          Already have an account?{" "}
+          {t('register.register_prompt')}{" "}
          <Link to="/login" style={{ textDecoration: "none", color: "#ff33cc" }}>
-            Login
+            
+            {t('register.login_link')}
          </Link>
        </Typography>
      </Box>