diff --git a/backend/routes/auth.js b/backend/routes/auth.js
index 7cc1a80c..c93fb1b1 100644
--- a/backend/routes/auth.js
+++ b/backend/routes/auth.js
@@ -9,7 +9,7 @@ const loginLimiter = rateLimit({
   max: Number(process.env.ZT_TRIES_TO_BAN) || 50, // limit each IP to 50 requests per windowMs
   message: {
     status: 429,
-    error: "Too many login attempts, please try again in 15 minutes.",
+    error: "tooManyAttemps",
   },
 });
 
diff --git a/backend/services/auth.js b/backend/services/auth.js
index c7e1d7cf..43832a5e 100644
--- a/backend/services/auth.js
+++ b/backend/services/auth.js
@@ -8,12 +8,12 @@ export async function authorize(username, password, callback) {
     throw err;
   }
   const user = users.find({ username: username });
-  if (!user.value()) return callback(new Error("Invalid username or password")); // If return "user not found" someone can do a user listing
+  if (!user.value()) return callback(new Error("logInFailed")); // If return "user not found" someone can do a user listing
   const verified = await verifyHash(password, user.value()["password_hash"]);
   if (verified) {
     return callback(null, user.value());
   } else {
-    return callback(new Error("Invalid username or password"));
+    return callback(new Error("logInFailed"));
   }
 }
 
diff --git a/frontend/package.json b/frontend/package.json
index ff003128..e5a40bab 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,6 +1,7 @@
 {
   "name": "frontend",
   "private": true,
+  "type": "module",
   "dependencies": {
     "@fontsource/roboto": "^4.5.8",
     "@material-ui/core": "^4.12.4",
@@ -11,11 +12,16 @@
     "codemirror": "^5.62.3",
     "date-fns": "^2.29.2",
     "history": "^5.3.0",
+    "i18next": "^23.5.1",
+    "i18next-browser-languagedetector": "^7.1.0",
+    "i18next-http-backend": "^2.2.2",
     "ipaddr.js": "^2.0.1",
     "lodash": "^4.17.21",
+    "ninja-keys": "^1.2.2",
     "react": "^17.0.2",
     "react-data-table-component": "^6.11.8",
     "react-dom": "^17.0.2",
+    "react-i18next": "^13.3.0",
     "react-is": "^17.0.2",
     "react-router-dom": "^5.2.0",
     "react-use": "^17.4.0",
diff --git a/frontend/public/locales/en/common.json b/frontend/public/locales/en/common.json
new file mode 100644
index 00000000..a6e25f29
--- /dev/null
+++ b/frontend/public/locales/en/common.json
@@ -0,0 +1,61 @@
+{
+  "flowRules": "Flow Rules",
+  "createNetwork": "Create A Network",
+  "createOneNetwork": "Please create at least one network",
+  "controllerNetworks": "Controller networks",
+  "network_one": "Network",
+  "network_other": "Networks",
+  "controllerAddress": "Network controller address",
+  "loginToContinue": "Please, Log In to continue",
+  "zerouiDesc": "ZeroUI - ZeroTier Controller Web UI - is a web user interface for a self-hosted ZeroTier network controller.",
+  "logIn": "Log In",
+  "logInToken": "Token Log In",
+  "cancel": "Cancel",
+  "management": "Management",
+  "deleteNetwork": "Delete Network",
+  "deleteAlert": "This action cannot be undone.",
+  "deleteNetworkConfirm": "Are you sure you want to delete this network?",
+  "deleteMemberConfirm": "Are you sure you want to delete this member?",
+  "delete": "Delete",
+  "logOut": "Log out",
+  "advancedFeature": "ADVANCED FEATURE",
+  "noDevices": "No devices have joined this network. Use the app on your devices to join",
+  "member_one": "Member",
+  "member_other": "Members",
+  "addMemberMan": "Manually Add Member",
+  "name": "Name",
+  "description": "Description",
+  "allowBridging": "Allow Ethernet Bridging",
+  "noAutoIP": "Do Not Auto-Assign IPs",
+  "capabilities": "Capabilities",
+  "noCapDef": "No capabilities defined",
+  "tags": "Tags",
+  "noTagDef": "No tags defined",
+  "authorized": "Authorized",
+  "address": "Address",
+  "ips": "Managed IPs",
+  "status": "Last seen",
+  "version": "Version",
+  "physIp": "Physical IP",
+  "latency": "Latency",
+  "settings": "Settings",
+  "generalSettings": "General settings",
+  "netId": "Network ID",
+  "accessControl": "Access control",
+  "public": "Public",
+  "private": "Private",
+  "managedRoutes": "Managed routes",
+  "addRoute": "Add route",
+  "target": "Target",
+  "via": "Via",
+  "start": "Start",
+  "end": "End",
+  "ipv4AutoAssign": "IPv4 Auto-Assign",
+  "autoAssignPool": "IPv4 Auto-Assign",
+  "addIPv4Pool": "Add IPv4 Pool",
+  "multicastLimit": "Multicast Recipient Limit",
+  "enaBroadcast": "Enable Broadcast",
+  "logInFailed": "Invalid username or password",
+  "tooManyAttemps": "Too many login attempts, please try again in 15 minutes.",
+  "language": "Language"
+}
diff --git a/frontend/public/locales/es-ES/common.json b/frontend/public/locales/es-ES/common.json
new file mode 100644
index 00000000..eb70d238
--- /dev/null
+++ b/frontend/public/locales/es-ES/common.json
@@ -0,0 +1,61 @@
+{
+  "flowRules": "Reglas de flujo",
+  "createNetwork": "Crear una red",
+  "createOneNetwork": "Por favor, crea al menos una red",
+  "controllerNetworks": "Controlador de redes",
+  "network_one": "Red",
+  "network_other": "Redes",
+  "controllerAddress": "Dirección del controlador",
+  "loginToContinue": "Por favor, inicia sesión para continuar",
+  "zerouiDesc": "ZeroUI - ZeroTier Controller Web UI - es una interfaz de usuario web para un controlador de red ZeroTier self-hosted.",
+  "logIn": "Iniciar sesión",
+  "logInToken": "Iniciar sesión con token",
+  "cancel": "Cancelar",
+  "management": "Gestión",
+  "deleteNetwork": "Borrar red",
+  "deleteAlert": "Esta acción no puede ser revertida.",
+  "deleteNetworkConfirm": "¿Seguro que deseas borrar esta red?",
+  "deleteMemberConfirm": "¿Seguro que deseas borrar este usuario?",
+  "delete": "Borrar",
+  "logOut": "Cerrar sesión",
+  "advancedFeature": "CARACTERÍSTICA AVANZADA",
+  "noDevices": "Ningún dispositivo se ha unido a esta red. Utilice la aplicación en sus dispositivos para unirse",
+  "member_one": "Miembro",
+  "member_other": "Miembros",
+  "addMemberMan": "Añadir miembro manualmente",
+  "name": "Nombre",
+  "description": "Descripción",
+  "allowBridging": "Permitir puente Ethernet",
+  "noAutoIP": "No autoasignar IPs",
+  "capabilities": "Permisos",
+  "noCapDef": "No hay permisos definidos",
+  "tags": "Etiquetas",
+  "noTagDef": "No hay etiquetas definidas",
+  "authorized": "Autorizado",
+  "address": "Dirección",
+  "ips": "IPs asignadas",
+  "status": "Visto por última vez",
+  "version": "Versión",
+  "physIp": "IP pública",
+  "latency": "Latencia",
+  "settings": "Ajustes",
+  "generalSettings": "Ajustes generales",
+  "netId": "ID de red",
+  "accessControl": "Control de acceso",
+  "public": "Público",
+  "private": "Privado",
+  "managedRoutes": "Rutas gestionadas",
+  "addRoute": "Añadir ruta",
+  "target": "Objetivo",
+  "via": "Vía",
+  "start": "Inicio",
+  "end": "Final",
+  "autoAssignPool": "Rango de IPv4 autoasignables",
+  "ipv4AutoAssign": "IPv4 Auto-Assign",
+  "addIPv4Pool": "Añadir rango IPv4",
+  "multicastLimit": "Límite de destinatarios multicast",
+  "enaBroadcast": "Habilitar broadcast",
+  "logInFailed": "Nombre de usuario o contraseña incorrecto",
+  "tooManyAttemps": "Demasiados intentos de inicio de sesión. Vuelvee a intentarlo en 15 minutos",
+  "language": "Idioma"
+}
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 04c9dc19..8b035cb9 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -2,12 +2,13 @@ import "@fontsource/roboto";
 
 import { BrowserRouter, Route, Redirect, Switch } from "react-router-dom";
 
-import Theme from "./components/Theme";
-import Bar from "./components/Bar";
+import Theme from "./components/Theme/Theme.jsx";
+import Bar from "./components/Bar/Bar.jsx";
 
-import Home from "./routes/Home";
-import NotFound from "./routes/NotFound";
-import Network from "./routes/Network/Network";
+import Home from "./routes/Home/Home.jsx";
+import NotFound from "./routes/NotFound/NotFound.jsx";
+import Network from "./routes/Network/Network.jsx";
+import Settings from "./routes/Settings/Settings.jsx";
 
 function App() {
   return (
@@ -17,6 +18,7 @@ function App() {
         <Switch>
           <Route exact path="/" component={Home} />
           <Route path="/network/:nwid" component={Network} />
+          <Route path="/settings" component={Settings} />
           <Route path="/404" component={NotFound} />
           <Redirect to="/404" />
         </Switch>
diff --git a/frontend/src/components/Bar/Bar.jsx b/frontend/src/components/Bar/Bar.jsx
index 2b91eda4..2fff6134 100644
--- a/frontend/src/components/Bar/Bar.jsx
+++ b/frontend/src/components/Bar/Bar.jsx
@@ -1,8 +1,8 @@
 import logo from "./assets/logo.png";
 
-import { useState } from "react";
-import { Link as RouterLink, useHistory } from "react-router-dom";
-import { useLocalStorage } from "react-use";
+import { useEffect, useRef, useState } from "react";
+import { Redirect, Link as RouterLink, useHistory } from "react-router-dom";
+import { useLocalStorage, useWindowScroll } from "react-use";
 
 import {
   AppBar,
@@ -15,16 +15,56 @@ import {
   MenuItem,
   Link,
 } from "@material-ui/core";
-import MenuIcon from "@material-ui/icons/Menu";
+import MenuIcon from "@material-ui/icons/Menu.js";
 
-import LogIn from "components/LogIn";
+import LogIn from "components/LogIn/LogIn.jsx";
+import "ninja-keys";
+
+import { useTranslation } from "react-i18next";
+import API from "utils/API.js";
+import { generateNetworkConfig } from "utils/NetworkConfig.js";
 
 function Bar() {
+  const ninjaKeys = useRef(null);
+  const history = useHistory();
+  const { t, i18n } = useTranslation();
+
+  const [hotkeys, setHotkeys] = useState([
+    {
+      id: "Settings",
+      title: t("settings"),
+      hotkey: "cmd+shift+s",
+      handler: () => {
+        history.push("/settings");
+      },
+    },
+    {
+      id: "createNet",
+      title: t("createNetwork"),
+      hotkey: "cmd+shift+n",
+      handler: () => {
+        createNetwork();
+      },
+    },
+    {
+      id: "LogOut",
+      title: t("logOut"),
+      hotkey: "cmd+shift+g",
+      handler: () => {
+        onLogOutClick();
+      },
+    },
+  ]);
+
   const [loggedIn, setLoggedIn] = useLocalStorage("loggedIn", false);
   const [disabledAuth] = useLocalStorage("disableAuth", false);
   const [anchorEl, setAnchorEl] = useState(null);
 
-  const history = useHistory();
+  const createNetwork = async () => {
+    const network = await API.post("network", generateNetworkConfig());
+    console.log(network);
+    history.push("/network/" + network.data["config"]["id"]);
+  };
 
   const openMenu = (event) => {
     setAnchorEl(event.currentTarget);
@@ -41,16 +81,22 @@ function Bar() {
     history.go(0);
   };
 
+  useEffect(() => {
+    if (ninjaKeys.current) {
+      ninjaKeys.current.data = hotkeys;
+    }
+  }, []);
+
   const menuItems = [
     // TODO: add settings page
-    // {
-    //   name: "Settings",
-    //   to: "/settings",
-    // },
+    {
+      name: t("settings"),
+      to: "/settings",
+    },
     ...(!disabledAuth
       ? [
           {
-            name: "Log out",
+            name: t("logOut"),
             divide: true,
             onClick: onLogOutClick,
           },
@@ -64,6 +110,11 @@ function Bar() {
       style={{ background: "#000000" }}
       position="static"
     >
+      {loggedIn && (
+        <>
+          <ninja-keys ref={ninjaKeys}></ninja-keys>
+        </>
+      )}
       <Toolbar>
         <Box display="flex" flexGrow={1}>
           <Typography color="inherit" variant="h6">
@@ -115,7 +166,6 @@ function Bar() {
                       key={index}
                       onClick={() => {
                         closeMenu();
-
                         menuItem.onClick();
                       }}
                     >
diff --git a/frontend/src/components/Bar/index.jsx b/frontend/src/components/Bar/index.jsx
index d23f0fdf..f27f7dd0 100644
--- a/frontend/src/components/Bar/index.jsx
+++ b/frontend/src/components/Bar/index.jsx
@@ -1 +1 @@
-export { default } from "./Bar";
+export { default } from "./Bar.jsx";
diff --git a/frontend/src/components/HomeLoggedIn/HomeLoggedIn.jsx b/frontend/src/components/HomeLoggedIn/HomeLoggedIn.jsx
index ff45f768..e5b8eaa0 100644
--- a/frontend/src/components/HomeLoggedIn/HomeLoggedIn.jsx
+++ b/frontend/src/components/HomeLoggedIn/HomeLoggedIn.jsx
@@ -2,12 +2,14 @@ import { useState, useEffect } from "react";
 import { useHistory } from "react-router-dom";
 
 import { Divider, Button, Grid, Typography, Box } from "@material-ui/core";
-import useStyles from "./HomeLoggedIn.styles";
+import useStyles from "./HomeLoggedIn.styles.jsx";
 
-import NetworkButton from "./components/NetworkButton";
+import NetworkButton from "./components/NetworkButton/NetworkButton.jsx";
 
-import API from "utils/API";
-import { generateNetworkConfig } from "utils/NetworkConfig";
+import API from "utils/API.js";
+import { generateNetworkConfig } from "utils/NetworkConfig.js";
+
+import { useTranslation } from "react-i18next";
 
 function HomeLoggedIn() {
   const [networks, setNetworks] = useState([]);
@@ -30,6 +32,8 @@ function HomeLoggedIn() {
     fetchData();
   }, []);
 
+  const { t, i18n } = useTranslation();
+
   return (
     <div className={classes.root}>
       <Button
@@ -38,19 +42,19 @@ function HomeLoggedIn() {
         className={classes.createBtn}
         onClick={createNetwork}
       >
-        Create A Network
+        {t("createNetwork")}
       </Button>
       <Divider />
       <Grid container spacing={3} className={classes.container}>
         <Grid item xs={6}>
-          <Typography variant="h5">Controller networks</Typography>
-          {networks[0] && "Network controller address"}
+          <Typography variant="h5">{t("controllerNetworks")}</Typography>
+          {networks[0] && t("controllerAddress")}
           <Box fontWeight="fontWeightBold">
-            {networks[0] && networks[0]["id"].slice(0, 10)}
+            {networks[0] && String(networks[0]["id"]).slice(0, 10)}
           </Box>
         </Grid>
         <Grid item xs="auto">
-          <Typography>Networks</Typography>
+          <Typography>{t("network", { count: networks.length })}</Typography>
           <Grid item>
             {networks[0] ? (
               networks.map((network) => (
@@ -59,7 +63,7 @@ function HomeLoggedIn() {
                 </Grid>
               ))
             ) : (
-              <div>Please create at least one network</div>
+              <div>{t("createOneNetwork")}</div>
             )}
           </Grid>
         </Grid>
diff --git a/frontend/src/components/HomeLoggedIn/index.jsx b/frontend/src/components/HomeLoggedIn/index.jsx
index 5e81fc49..e532a122 100644
--- a/frontend/src/components/HomeLoggedIn/index.jsx
+++ b/frontend/src/components/HomeLoggedIn/index.jsx
@@ -1 +1 @@
-export { default } from "./HomeLoggedIn";
+export { default } from "./HomeLoggedIn.jsx";
diff --git a/frontend/src/components/HomeLoggedOut/HomeLoggedOut.jsx b/frontend/src/components/HomeLoggedOut/HomeLoggedOut.jsx
index 0de5572d..7ec32181 100644
--- a/frontend/src/components/HomeLoggedOut/HomeLoggedOut.jsx
+++ b/frontend/src/components/HomeLoggedOut/HomeLoggedOut.jsx
@@ -3,6 +3,8 @@ import { Grid, Typography } from "@material-ui/core";
 import { useLocalStorage } from "react-use";
 import { useHistory } from "react-router-dom";
 
+import { useTranslation } from "react-i18next";
+
 import axios from "axios";
 
 function HomeLoggedOut() {
@@ -29,6 +31,8 @@ function HomeLoggedOut() {
     fetchData();
   }, [history, setDisableAuth, setLoggedIn, setToken]);
 
+  const { t, i18n } = useTranslation();
+
   return (
     <Grid
       container
@@ -42,14 +46,11 @@ function HomeLoggedOut() {
     >
       <Grid item xs={10}>
         <Typography variant="h5">
-          <span>
-            ZeroUI - ZeroTier Controller Web UI - is a web user interface for a
-            self-hosted ZeroTier network controller.
-          </span>
+          <span>{t("zerouiDesc")}</span>
         </Typography>
 
         <Typography>
-          <span>Please Log In to continue</span>
+          <span>{t("loginToContinue")}</span>
         </Typography>
       </Grid>
     </Grid>
diff --git a/frontend/src/components/HomeLoggedOut/index.jsx b/frontend/src/components/HomeLoggedOut/index.jsx
index bfd68924..094d9825 100644
--- a/frontend/src/components/HomeLoggedOut/index.jsx
+++ b/frontend/src/components/HomeLoggedOut/index.jsx
@@ -1 +1 @@
-export { default } from "./HomeLoggedOut";
+export { default } from "./HomeLoggedOut.jsx";
diff --git a/frontend/src/components/LogIn/LogIn.jsx b/frontend/src/components/LogIn/LogIn.jsx
index 36ea9a29..73e06336 100644
--- a/frontend/src/components/LogIn/LogIn.jsx
+++ b/frontend/src/components/LogIn/LogIn.jsx
@@ -1,7 +1,7 @@
 import { Divider } from "@material-ui/core";
 
-import LogInUser from "./components/LogInUser";
-import LogInToken from "./components/LogInToken";
+import LogInUser from "./components/LogInUser/LogInUser.jsx";
+import LogInToken from "./components/LogInToken/LogInToken.jsx";
 
 function LogIn() {
   return (
@@ -12,6 +12,7 @@ function LogIn() {
           <Divider orientation="vertical" />
         </>
       )}
+      &nbsp;
       <LogInUser />
     </>
   );
diff --git a/frontend/src/components/LogIn/components/LogInToken/LogInToken.jsx b/frontend/src/components/LogIn/components/LogInToken/LogInToken.jsx
index a4140755..b39b4156 100644
--- a/frontend/src/components/LogIn/components/LogInToken/LogInToken.jsx
+++ b/frontend/src/components/LogIn/components/LogInToken/LogInToken.jsx
@@ -12,6 +12,8 @@ import {
   DialogTitle,
 } from "@material-ui/core";
 
+import { useTranslation } from "react-i18next";
+
 function LogInToken() {
   const [open, setOpen] = useState(false);
   const [errorText, setErrorText] = useState("");
@@ -41,6 +43,8 @@ function LogInToken() {
     }
   };
 
+  const { t, i18n } = useTranslation();
+
   const LogIn = () => {
     if (token.length !== 32) {
       setErrorText("Token length error");
@@ -55,12 +59,12 @@ function LogInToken() {
   return (
     <div>
       <Button onClick={handleClickOpen} color="inherit" variant="outlined">
-        Token Log In
+        {t("logInToken")}
       </Button>
       <Dialog open={open} onClose={handleClose} onKeyPress={handleKeyPress}>
-        <DialogTitle>Log In</DialogTitle>
+        <DialogTitle>{t("logIn")}</DialogTitle>
         <DialogContent>
-          <DialogContentText>ADVANCED FEATURE.</DialogContentText>
+          <DialogContentText>{t("advancedFeature")}</DialogContentText>
           <TextField
             value={token}
             onChange={(e) => {
@@ -76,10 +80,10 @@ function LogInToken() {
         </DialogContent>
         <DialogActions>
           <Button onClick={handleClose} color="primary">
-            Cancel
+            {t("cancel")}
           </Button>
           <Button onClick={LogIn} color="primary">
-            Log In
+            {t("logIn")}
           </Button>
         </DialogActions>
       </Dialog>
diff --git a/frontend/src/components/LogIn/components/LogInToken/index.jsx b/frontend/src/components/LogIn/components/LogInToken/index.jsx
index 32428b0d..eccdd52a 100644
--- a/frontend/src/components/LogIn/components/LogInToken/index.jsx
+++ b/frontend/src/components/LogIn/components/LogInToken/index.jsx
@@ -1 +1 @@
-export { default } from "./LogInToken";
+export { default } from "./LogInToken.jsx";
diff --git a/frontend/src/components/LogIn/components/LogInUser/LogInUser.jsx b/frontend/src/components/LogIn/components/LogInUser/LogInUser.jsx
index 0658d3c3..d6d1af0f 100644
--- a/frontend/src/components/LogIn/components/LogInUser/LogInUser.jsx
+++ b/frontend/src/components/LogIn/components/LogInUser/LogInUser.jsx
@@ -13,6 +13,8 @@ import {
 
 import axios from "axios";
 
+import { useTranslation } from "react-i18next";
+
 function LogInUser() {
   const [open, setOpen] = useState(false);
   const [snackbarOpen, setSnackbarOpen] = useState(false);
@@ -72,13 +74,15 @@ function LogInUser() {
       });
   };
 
+  const { t, i18n } = useTranslation();
+
   return (
     <>
       <Button onClick={handleClickOpen} color="primary" variant="contained">
-        Log In
+        {t("logIn")}
       </Button>
       <Dialog open={open} onClose={handleClose} onKeyPress={handleKeyPress}>
-        <DialogTitle>Log In</DialogTitle>
+        <DialogTitle>{t("logIn")}</DialogTitle>
         <DialogContent>
           <TextField
             autoFocus
@@ -104,10 +108,10 @@ function LogInUser() {
         </DialogContent>
         <DialogActions>
           <Button onClick={handleClose} color="primary">
-            Cancel
+            {t("cancel")}
           </Button>
           <Button onClick={LogIn} color="primary">
-            Log In
+            {t("logIn")}
           </Button>
         </DialogActions>
       </Dialog>
@@ -117,7 +121,7 @@ function LogInUser() {
           vertical: "top",
           horizontal: "center",
         }}
-        message={error}
+        message={t(error)}
       />
     </>
   );
diff --git a/frontend/src/components/LogIn/components/LogInUser/index.jsx b/frontend/src/components/LogIn/components/LogInUser/index.jsx
index 92fb0ca3..202ce94d 100644
--- a/frontend/src/components/LogIn/components/LogInUser/index.jsx
+++ b/frontend/src/components/LogIn/components/LogInUser/index.jsx
@@ -1 +1 @@
-export { default } from "./LogInUser";
+export { default } from "./LogInUser.jsx";
diff --git a/frontend/src/components/LogIn/index.jsx b/frontend/src/components/LogIn/index.jsx
index 7b22dd87..016d22cf 100644
--- a/frontend/src/components/LogIn/index.jsx
+++ b/frontend/src/components/LogIn/index.jsx
@@ -1 +1 @@
-export { default } from "./LogIn";
+export { default } from "./LogIn.jsx";
diff --git a/frontend/src/components/NetworkHeader/index.jsx b/frontend/src/components/NetworkHeader/index.jsx
index 788a9750..1927b0ce 100644
--- a/frontend/src/components/NetworkHeader/index.jsx
+++ b/frontend/src/components/NetworkHeader/index.jsx
@@ -1 +1 @@
-export { default } from "./NetworkHeader";
+export { default } from "./NetworkHeader.jsx";
diff --git a/frontend/src/components/NetworkManagement/NetworkManagement.jsx b/frontend/src/components/NetworkManagement/NetworkManagement.jsx
index fab98cce..152ef203 100644
--- a/frontend/src/components/NetworkManagement/NetworkManagement.jsx
+++ b/frontend/src/components/NetworkManagement/NetworkManagement.jsx
@@ -13,10 +13,12 @@ import {
   DialogActions,
   Typography,
 } from "@material-ui/core";
-import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
-import DeleteIcon from "@material-ui/icons/Delete";
+import ExpandMoreIcon from "@material-ui/icons/ExpandMore.js";
+import DeleteIcon from "@material-ui/icons/Delete.js";
 
-import API from "utils/API";
+import API from "utils/API.js";
+
+import { useTranslation } from "react-i18next";
 
 function NetworkManagement() {
   const { nwid } = useParams();
@@ -42,10 +44,12 @@ function NetworkManagement() {
     history.go(0);
   };
 
+  const { t, i18n } = useTranslation();
+
   return (
     <Accordion>
       <AccordionSummary expandIcon={<ExpandMoreIcon />}>
-        <Typography>Management</Typography>
+        <Typography>{t("management")}</Typography>
       </AccordionSummary>
       <AccordionDetails>
         <Button
@@ -54,21 +58,19 @@ function NetworkManagement() {
           startIcon={<DeleteIcon />}
           onClick={handleClickOpen}
         >
-          Delete Network
+          {t("deleteNetwork")}
         </Button>
         <Dialog open={open} onClose={handleClose}>
-          <DialogTitle>
-            {"Are you sure you want to delete this network?"}
-          </DialogTitle>
+          <DialogTitle>{t("deleteNetworkConfirm")}</DialogTitle>
           <DialogContent>
-            <DialogContentText>This action cannot be undone.</DialogContentText>
+            <DialogContentText>{t("deleteAlert")}</DialogContentText>
           </DialogContent>
           <DialogActions>
             <Button onClick={handleClose} color="primary">
-              Cancel
+              {t("cancel")}
             </Button>
             <Button onClick={deleteNetwork} color="secondary">
-              Delete
+              {t("delete")}
             </Button>
           </DialogActions>
         </Dialog>
diff --git a/frontend/src/components/NetworkManagement/index.jsx b/frontend/src/components/NetworkManagement/index.jsx
index 281dbc95..d54147da 100644
--- a/frontend/src/components/NetworkManagement/index.jsx
+++ b/frontend/src/components/NetworkManagement/index.jsx
@@ -1 +1 @@
-export { default } from "./NetworkManagement";
+export { default } from "./NetworkManagement.jsx";
diff --git a/frontend/src/components/NetworkMembers/NetworkMembers.jsx b/frontend/src/components/NetworkMembers/NetworkMembers.jsx
index b6f843c8..90ce7e51 100644
--- a/frontend/src/components/NetworkMembers/NetworkMembers.jsx
+++ b/frontend/src/components/NetworkMembers/NetworkMembers.jsx
@@ -7,19 +7,21 @@ import {
   IconButton,
   Typography,
 } from "@material-ui/core";
-import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
-import RefreshIcon from "@material-ui/icons/Refresh";
+import ExpandMoreIcon from "@material-ui/icons/ExpandMore.js";
+import RefreshIcon from "@material-ui/icons/Refresh.js";
 import { useCallback, useEffect, useState } from "react";
 import DataTable from "react-data-table-component";
 import { useParams } from "react-router-dom";
-import API from "utils/API";
-import { parseValue, replaceValue, setValue } from "utils/ChangeHelper";
+import API from "utils/API.js";
+import { parseValue, replaceValue, setValue } from "utils/ChangeHelper.js";
 import { formatDistance } from "date-fns";
-import AddMember from "./components/AddMember";
-import DeleteMember from "./components/DeleteMember";
-import ManagedIP from "./components/ManagedIP";
-import MemberName from "./components/MemberName";
-import MemberSettings from "./components/MemberSettings";
+import AddMember from "./components/AddMember/AddMember.jsx";
+import DeleteMember from "./components/DeleteMember/DeleteMember.jsx";
+import ManagedIP from "./components/ManagedIP/ManagedIP.jsx";
+import MemberName from "./components/MemberName/MemberName.jsx";
+import MemberSettings from "./components/MemberSettings/MemberSettings.jsx";
+
+import { useTranslation } from "react-i18next";
 
 function NetworkMembers({ network }) {
   const { nwid } = useParams();
@@ -46,6 +48,8 @@ function NetworkMembers({ network }) {
     console.log("Action:", req);
   };
 
+  const { t, i18n } = useTranslation();
+
   const handleChange =
     (member, key1, key2 = null, mode = "text", id = null) =>
     (event) => {
@@ -67,7 +71,7 @@ function NetworkMembers({ network }) {
   const columns = [
     {
       id: "auth",
-      name: "Authorized",
+      name: t("authorized"),
       minWidth: "80px",
       cell: (row) => (
         <Checkbox
@@ -79,7 +83,7 @@ function NetworkMembers({ network }) {
     },
     {
       id: "address",
-      name: "Address",
+      name: t("address"),
       minWidth: "150px",
       cell: (row) => (
         <Typography variant="body2">{row.config.address}</Typography>
@@ -87,19 +91,19 @@ function NetworkMembers({ network }) {
     },
     {
       id: "name",
-      name: "Name / Description",
+      name: t("name") + "/" + t("description"),
       minWidth: "250px",
       cell: (row) => <MemberName member={row} handleChange={handleChange} />,
     },
     {
       id: "ips",
-      name: "Managed IPs",
+      name: t("ips"),
       minWidth: "220px",
       cell: (row) => <ManagedIP member={row} handleChange={handleChange} />,
     },
     {
       id: "status",
-      name: "Last Seen",
+      name: t("status"),
       minWidth: "100px",
       cell: (row) =>
         row.online === 1 ? (
@@ -121,7 +125,7 @@ function NetworkMembers({ network }) {
     },
     {
       id: "physicalip",
-      name: "Version / Physical IP / Latency",
+      name: t("version") + " / " + t("physIp") + " / " + t("latency"),
       minWidth: "220px",
       cell: (row) =>
         row.online === 1 ? (
@@ -143,7 +147,7 @@ function NetworkMembers({ network }) {
     },
     {
       id: "delete",
-      name: "",
+      name: t("settings"),
       minWidth: "50px",
       right: true,
       cell: (row) => (
@@ -162,7 +166,7 @@ function NetworkMembers({ network }) {
   return (
     <Accordion defaultExpanded={true}>
       <AccordionSummary expandIcon={<ExpandMoreIcon />}>
-        <Typography>Members</Typography>
+        <Typography>{t("member", { count: members.length })}</Typography>
       </AccordionSummary>
       <AccordionDetails>
         <Grid container direction="column" spacing={3}>
@@ -188,8 +192,7 @@ function NetworkMembers({ network }) {
                 }}
               >
                 <Typography variant="h6" style={{ padding: "10%" }}>
-                  No devices have joined this network. Use the app on your
-                  devices to join <b>{nwid}</b>.
+                  {t("noDevices")} <b>{nwid}</b>.
                 </Typography>
               </Grid>
             )}
diff --git a/frontend/src/components/NetworkMembers/components/AddMember/AddMember.jsx b/frontend/src/components/NetworkMembers/components/AddMember/AddMember.jsx
index af256d63..862cfda4 100644
--- a/frontend/src/components/NetworkMembers/components/AddMember/AddMember.jsx
+++ b/frontend/src/components/NetworkMembers/components/AddMember/AddMember.jsx
@@ -1,9 +1,11 @@
 import { useState } from "react";
 
 import { List, Typography, IconButton, TextField } from "@material-ui/core";
-import AddIcon from "@material-ui/icons/Add";
+import AddIcon from "@material-ui/icons/Add.js";
 
-import API from "utils/API";
+import API from "utils/API.js";
+
+import { useTranslation } from "react-i18next";
 
 function AddMember({ nwid, callback }) {
   const [member, setMember] = useState("");
@@ -24,9 +26,11 @@ function AddMember({ nwid, callback }) {
     setMember("");
   };
 
+  const { t, i18n } = useTranslation();
+
   return (
     <>
-      <Typography>Manually Add Member</Typography>
+      <Typography>{t("addMemberMan")}</Typography>
       <List
         disablePadding={true}
         style={{
diff --git a/frontend/src/components/NetworkMembers/components/AddMember/index.jsx b/frontend/src/components/NetworkMembers/components/AddMember/index.jsx
index a2f4a67d..1a96d3aa 100644
--- a/frontend/src/components/NetworkMembers/components/AddMember/index.jsx
+++ b/frontend/src/components/NetworkMembers/components/AddMember/index.jsx
@@ -1 +1 @@
-export { default } from "./AddMember";
+export { default } from "./AddMember.jsx";
diff --git a/frontend/src/components/NetworkMembers/components/DeleteMember/DeleteMember.jsx b/frontend/src/components/NetworkMembers/components/DeleteMember/DeleteMember.jsx
index e5b00163..aa79065f 100644
--- a/frontend/src/components/NetworkMembers/components/DeleteMember/DeleteMember.jsx
+++ b/frontend/src/components/NetworkMembers/components/DeleteMember/DeleteMember.jsx
@@ -9,11 +9,13 @@ import {
   DialogActions,
   IconButton,
 } from "@material-ui/core";
-import DeleteOutlineIcon from "@material-ui/icons/DeleteOutline";
+import DeleteOutlineIcon from "@material-ui/icons/DeleteOutline.js";
 
-import API from "utils/API";
+import API from "utils/API.js";
+import { useTranslation } from "react-i18next";
 
 function DeleteMember({ nwid, mid, callback }) {
+  const { t, i18n } = useTranslation();
   const [open, setOpen] = useState(false);
 
   const handleClickOpen = () => {
@@ -37,18 +39,16 @@ function DeleteMember({ nwid, mid, callback }) {
         <DeleteOutlineIcon color="secondary" style={{ fontSize: 20 }} />
       </IconButton>
       <Dialog open={open} onClose={handleClose}>
-        <DialogTitle>
-          {"Are you sure you want to delete this member?"}
-        </DialogTitle>
+        <DialogTitle>{t("deleteMemberConfirm")}</DialogTitle>
         <DialogContent>
-          <DialogContentText>This action cannot be undone.</DialogContentText>
+          <DialogContentText>{t("deleteAlert")}</DialogContentText>
         </DialogContent>
         <DialogActions>
           <Button onClick={handleClose} color="primary">
-            Cancel
+            {t("cancel")}
           </Button>
           <Button onClick={deleteMemberReq} color="secondary">
-            Delete
+            {t("delete")}
           </Button>
         </DialogActions>
       </Dialog>
diff --git a/frontend/src/components/NetworkMembers/components/DeleteMember/index.jsx b/frontend/src/components/NetworkMembers/components/DeleteMember/index.jsx
index f9e57f41..cc788a32 100644
--- a/frontend/src/components/NetworkMembers/components/DeleteMember/index.jsx
+++ b/frontend/src/components/NetworkMembers/components/DeleteMember/index.jsx
@@ -1 +1 @@
-export { default } from "./DeleteMember";
+export { default } from "./DeleteMember.jsx";
diff --git a/frontend/src/components/NetworkMembers/components/ManagedIP/ManagedIP.jsx b/frontend/src/components/NetworkMembers/components/ManagedIP/ManagedIP.jsx
index f01bbac2..5ed11c82 100644
--- a/frontend/src/components/NetworkMembers/components/ManagedIP/ManagedIP.jsx
+++ b/frontend/src/components/NetworkMembers/components/ManagedIP/ManagedIP.jsx
@@ -1,10 +1,10 @@
 import { useState } from "react";
 
 import { Grid, List, TextField, IconButton } from "@material-ui/core";
-import AddIcon from "@material-ui/icons/Add";
-import DeleteOutlineIcon from "@material-ui/icons/DeleteOutline";
+import AddIcon from "@material-ui/icons/Add.js";
+import DeleteOutlineIcon from "@material-ui/icons/DeleteOutline.js";
 
-import { validateIP, normilizeIP } from "utils/IP";
+import { validateIP, normilizeIP } from "utils/IP.js";
 
 function ManagedIP({ member, handleChange }) {
   const [ipInput, setIpInput] = useState();
diff --git a/frontend/src/components/NetworkMembers/components/ManagedIP/index.jsx b/frontend/src/components/NetworkMembers/components/ManagedIP/index.jsx
index 87fede3e..a412c544 100644
--- a/frontend/src/components/NetworkMembers/components/ManagedIP/index.jsx
+++ b/frontend/src/components/NetworkMembers/components/ManagedIP/index.jsx
@@ -1 +1 @@
-export { default } from "./ManagedIP";
+export { default } from "./ManagedIP.jsx";
diff --git a/frontend/src/components/NetworkMembers/components/MemberName/MemberName.jsx b/frontend/src/components/NetworkMembers/components/MemberName/MemberName.jsx
index 65032cc0..ea7f8e9d 100644
--- a/frontend/src/components/NetworkMembers/components/MemberName/MemberName.jsx
+++ b/frontend/src/components/NetworkMembers/components/MemberName/MemberName.jsx
@@ -1,12 +1,14 @@
 import { Grid, TextField } from "@material-ui/core";
+import { useTranslation } from "react-i18next";
 
 function MemberName({ member, handleChange }) {
+  const { t, i18n } = useTranslation();
   return (
     <Grid>
       <TextField
         value={member.name}
         onChange={handleChange(member, "name")}
-        label="Name"
+        label={t("name")}
         variant="filled"
         InputLabelProps={{
           shrink: true,
@@ -15,7 +17,7 @@ function MemberName({ member, handleChange }) {
       <TextField
         value={member.description}
         onChange={handleChange(member, "description")}
-        label="Description"
+        label={t("description")}
         variant="filled"
         InputLabelProps={{
           shrink: true,
diff --git a/frontend/src/components/NetworkMembers/components/MemberName/index.jsx b/frontend/src/components/NetworkMembers/components/MemberName/index.jsx
index 2e7c224c..cae5cb5c 100644
--- a/frontend/src/components/NetworkMembers/components/MemberName/index.jsx
+++ b/frontend/src/components/NetworkMembers/components/MemberName/index.jsx
@@ -1 +1 @@
-export { default } from "./MemberName";
+export { default } from "./MemberName.jsx";
diff --git a/frontend/src/components/NetworkMembers/components/MemberSettings/MemberSettings.jsx b/frontend/src/components/NetworkMembers/components/MemberSettings/MemberSettings.jsx
index 4c135d68..00d925f0 100644
--- a/frontend/src/components/NetworkMembers/components/MemberSettings/MemberSettings.jsx
+++ b/frontend/src/components/NetworkMembers/components/MemberSettings/MemberSettings.jsx
@@ -9,11 +9,14 @@ import {
   Paper,
   Typography,
 } from "@material-ui/core";
-import BuildIcon from "@material-ui/icons/Build";
+import BuildIcon from "@material-ui/icons/Build.js";
 import { useState } from "react";
-import Tag from "./components/Tag";
+import Tag from "./components/Tag/Tag.jsx";
+
+import { useTranslation } from "react-i18next";
 
 function MemberSettings({ member, network, handleChange }) {
+  const { t, i18n } = useTranslation();
   const [open, setOpen] = useState(false);
 
   const handleClickOpen = () => {
@@ -43,7 +46,7 @@ function MemberSettings({ member, network, handleChange }) {
                 "checkbox"
               )}
             />
-            <span>Allow Ethernet Bridging</span>
+            <span>{t("allowBridging")}</span>
           </Grid>
           <Grid item>
             <Checkbox
@@ -56,17 +59,17 @@ function MemberSettings({ member, network, handleChange }) {
                 "checkbox"
               )}
             />
-            <span>Do Not Auto-Assign IPs</span>
+            <span>{t("noAutoIP")}</span>
           </Grid>
           <Grid container spacing={2}>
             <Grid item xs={12}>
-              <Typography variant="h6">Capabilities</Typography>
+              <Typography variant="h6">{t("capabilities")}</Typography>
             </Grid>
             <Grid item xs={12}>
               <Paper style={{ padding: 20 }}>
                 {Object.entries(network["capabilitiesByName"] || []).length ===
                 0
-                  ? "No capabilities defined"
+                  ? t("noCapDef")
                   : ""}
                 {Object.entries(network["capabilitiesByName"] || []).map(
                   ([capName, capId]) => (
@@ -96,11 +99,11 @@ function MemberSettings({ member, network, handleChange }) {
           </Grid>
           <Grid container spacing={2}>
             <Grid item xs={12}>
-              <Typography variant="h6">Tags</Typography>
+              <Typography variant="h6">{t("tags")}</Typography>
             </Grid>
             {Object.entries(network["tagsByName"] || []).length === 0 ? (
               <Grid item xs={12}>
-                <Paper style={{ padding: 20 }}>No tags defined</Paper>
+                <Paper style={{ padding: 20 }}>{t("noTagDef")}</Paper>
               </Grid>
             ) : (
               ""
diff --git a/frontend/src/components/NetworkMembers/components/MemberSettings/components/Tag/Tag.jsx b/frontend/src/components/NetworkMembers/components/MemberSettings/components/Tag/Tag.jsx
index 25f257b2..ba252b65 100644
--- a/frontend/src/components/NetworkMembers/components/MemberSettings/components/Tag/Tag.jsx
+++ b/frontend/src/components/NetworkMembers/components/MemberSettings/components/Tag/Tag.jsx
@@ -8,7 +8,7 @@ import {
   Select,
   Typography,
 } from "@material-ui/core";
-import DeleteIcon from "@material-ui/icons/Delete";
+import DeleteIcon from "@material-ui/icons/Delete.js";
 import { useEffect, useState } from "react";
 import { useDebounce } from "react-use";
 
diff --git a/frontend/src/components/NetworkMembers/components/MemberSettings/components/Tag/index.jsx b/frontend/src/components/NetworkMembers/components/MemberSettings/components/Tag/index.jsx
index 21bb058a..0547fafc 100644
--- a/frontend/src/components/NetworkMembers/components/MemberSettings/components/Tag/index.jsx
+++ b/frontend/src/components/NetworkMembers/components/MemberSettings/components/Tag/index.jsx
@@ -1 +1 @@
-export { default } from "./Tag";
+export { default } from "./Tag.jsx";
diff --git a/frontend/src/components/NetworkMembers/components/MemberSettings/index.jsx b/frontend/src/components/NetworkMembers/components/MemberSettings/index.jsx
index 2ded616e..7611c65c 100644
--- a/frontend/src/components/NetworkMembers/components/MemberSettings/index.jsx
+++ b/frontend/src/components/NetworkMembers/components/MemberSettings/index.jsx
@@ -1 +1 @@
-export { default } from "./MemberSettings";
+export { default } from "./MemberSettings.jsx";
diff --git a/frontend/src/components/NetworkMembers/index.jsx b/frontend/src/components/NetworkMembers/index.jsx
index 9a38809d..e7f7d4c6 100644
--- a/frontend/src/components/NetworkMembers/index.jsx
+++ b/frontend/src/components/NetworkMembers/index.jsx
@@ -1 +1 @@
-export { default } from "./NetworkMembers";
+export { default } from "./NetworkMembers.jsx";
diff --git a/frontend/src/components/NetworkRules/NetworkRules.jsx b/frontend/src/components/NetworkRules/NetworkRules.jsx
index 14dbd365..d4fea9e0 100644
--- a/frontend/src/components/NetworkRules/NetworkRules.jsx
+++ b/frontend/src/components/NetworkRules/NetworkRules.jsx
@@ -9,15 +9,19 @@ import {
   Snackbar,
   Typography,
 } from "@material-ui/core";
-import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
+import ExpandMoreIcon from "@material-ui/icons/ExpandMore.js";
 import CodeMirror from "@uiw/react-codemirror";
 import "codemirror/theme/3024-day.css";
-import { compile } from "external/RuleCompiler";
-import debounce from "lodash/debounce";
+import { compile } from "external/RuleCompiler.js";
+import debounce from "lodash/debounce.js";
 import { useState } from "react";
-import API from "utils/API";
+import API from "utils/API.js";
+
+import { useTranslation, Trans } from "react-i18next";
 
 function NetworkRules({ network, callback }) {
+  const { t, i18n } = useTranslation();
+
   const [editor, setEditor] = useState(null);
   const [flowData, setFlowData] = useState({
     rules: [...network.config.rules],
@@ -87,12 +91,12 @@ function NetworkRules({ network, callback }) {
   return (
     <Accordion>
       <AccordionSummary expandIcon={<ExpandMoreIcon />}>
-        <Typography>Flow Rules</Typography>
+        <Typography>{t("flowRules")}</Typography>
       </AccordionSummary>
       <AccordionDetails>
         {/*   Important note: value in CodeMirror instance means INITAIL VALUE
               or it could be used to replace editor state with the new value.
-              No need to update on every user character input
+              No need to update on every user character input Flow Rules
         */}
         <CodeMirror
           value={network["rulesSource"]}
diff --git a/frontend/src/components/NetworkRules/index.jsx b/frontend/src/components/NetworkRules/index.jsx
index 50751190..3861690e 100644
--- a/frontend/src/components/NetworkRules/index.jsx
+++ b/frontend/src/components/NetworkRules/index.jsx
@@ -1 +1 @@
-export { default } from "./NetworkRules";
+export { default } from "./NetworkRules.jsx";
diff --git a/frontend/src/components/NetworkSettings/NetworkSettings.jsx b/frontend/src/components/NetworkSettings/NetworkSettings.jsx
index c45a6e84..b46fd119 100644
--- a/frontend/src/components/NetworkSettings/NetworkSettings.jsx
+++ b/frontend/src/components/NetworkSettings/NetworkSettings.jsx
@@ -9,15 +9,18 @@ import {
   TextField,
   Select,
 } from "@material-ui/core";
-import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
+import ExpandMoreIcon from "@material-ui/icons/ExpandMore.js";
 
-import ManagedRoutes from "./components/ManagedRoutes";
-import IPv4AutoAssign from "./components/IPv4AutoAssign";
+import ManagedRoutes from "./components/ManagedRoutes/ManagedRoutes.jsx";
+import IPv4AutoAssign from "./components/IPv4AutoAssign/IPv4AutoAssign.jsx";
 
-import API from "utils/API";
-import { parseValue, replaceValue, setValue } from "utils/ChangeHelper";
+import API from "utils/API.js";
+import { parseValue, replaceValue, setValue } from "utils/ChangeHelper.js";
+
+import { useTranslation } from "react-i18next";
 
 function NetworkSettings({ network, setNetwork }) {
+  const { t, i18n } = useTranslation();
   const sendReq = async (data) => {
     try {
       const req = await API.post("/network/" + network["config"]["id"], data);
@@ -43,12 +46,12 @@ function NetworkSettings({ network, setNetwork }) {
   return (
     <Accordion>
       <AccordionSummary expandIcon={<ExpandMoreIcon />}>
-        <Typography>General settings</Typography>
+        <Typography>{t("generalSettings")}</Typography>
       </AccordionSummary>
       <AccordionDetails>
         <Grid container direction="column" spacing={3}>
           <Grid item>
-            <Typography>Network ID</Typography>
+            <Typography>{t("netId")}</Typography>
             <Typography variant="h5">
               <span>{network["config"]["id"]}</span>
             </Typography>
@@ -57,7 +60,7 @@ function NetworkSettings({ network, setNetwork }) {
             <TextField
               value={network["config"]["name"]}
               onChange={handleChange("config", "name")}
-              label="Name"
+              label={t("name")}
               variant="filled"
               InputLabelProps={{
                 shrink: true,
@@ -71,7 +74,7 @@ function NetworkSettings({ network, setNetwork }) {
               multiline
               minRows={2}
               maxRows={Infinity}
-              label="Description"
+              label={t("description")}
               variant="filled"
               InputLabelProps={{
                 shrink: true,
@@ -80,14 +83,14 @@ function NetworkSettings({ network, setNetwork }) {
           </Grid>
           <Divider />
           <Grid item>
-            <Typography>Access Control</Typography>
+            <Typography>{t("accessControl")}</Typography>
             <Select
               native
               value={network["config"]["private"]}
               onChange={handleChange("config", "private", "json")}
             >
-              <option value={true}>Private</option>
-              <option value={false}>Public</option>
+              <option value={1}>{t("private")}</option>
+              <option value={0}>{t("public")}</option>
             </Select>
           </Grid>
           <Divider />
@@ -111,7 +114,7 @@ function NetworkSettings({ network, setNetwork }) {
           <Divider />
           <Grid item>
             <TextField
-              label="Multicast Recipient Limit"
+              label={t("multicastLimit")}
               type="number"
               value={network["config"]["multicastLimit"]}
               onChange={handleChange("config", "multicastLimit", "json")}
@@ -126,7 +129,7 @@ function NetworkSettings({ network, setNetwork }) {
               color="primary"
               onChange={handleChange("config", "enableBroadcast", "checkbox")}
             />
-            <span>Enable Broadcast</span>
+            <span>{t("enaBroadcast")}</span>
           </Grid>
           {/* TODO: */}
           {/* <Grid item>
diff --git a/frontend/src/components/NetworkSettings/components/IPv4AutoAssign/IPv4AutoAssign.jsx b/frontend/src/components/NetworkSettings/components/IPv4AutoAssign/IPv4AutoAssign.jsx
index 0b4fd3de..34d6b9d7 100644
--- a/frontend/src/components/NetworkSettings/components/IPv4AutoAssign/IPv4AutoAssign.jsx
+++ b/frontend/src/components/NetworkSettings/components/IPv4AutoAssign/IPv4AutoAssign.jsx
@@ -10,15 +10,18 @@ import {
   TextField,
   IconButton,
 } from "@material-ui/core";
-import AddIcon from "@material-ui/icons/Add";
-import DeleteOutlineIcon from "@material-ui/icons/DeleteOutline";
+import AddIcon from "@material-ui/icons/Add.js";
+import DeleteOutlineIcon from "@material-ui/icons/DeleteOutline.js";
 
 import DataTable from "react-data-table-component";
 
-import { addressPool } from "utils/NetworkConfig";
-import { getCIDRAddress, validateIP, normilizeIP } from "utils/IP";
+import { addressPool } from "utils/NetworkConfig.js";
+import { getCIDRAddress, validateIP, normilizeIP } from "utils/IP.js";
+
+import { useTranslation } from "react-i18next";
 
 function IPv4AutoAssign({ ipAssignmentPools, handleChange }) {
+  const { t, i18n } = useTranslation();
   const [start, setStart] = useState("");
   const [end, setEnd] = useState("");
 
@@ -89,19 +92,19 @@ function IPv4AutoAssign({ ipAssignmentPools, handleChange }) {
     },
     {
       id: "Start",
-      name: "Start",
+      name: t("start"),
       cell: (row) => row["ipRangeStart"],
     },
     {
       id: "End",
-      name: "End",
+      name: t("end"),
       cell: (row) => row["ipRangeEnd"],
     },
   ];
 
   return (
     <>
-      <Typography>IPv4 Auto-Assign</Typography>
+      <Typography>{t("ipv4AutoAssign")}</Typography>
       <div
         style={{
           padding: "30px",
@@ -122,7 +125,7 @@ function IPv4AutoAssign({ ipAssignmentPools, handleChange }) {
         </Grid>
       </div>
       <Typography style={{ paddingBottom: "10px" }}>
-        Auto-Assign Pools
+        {t("autoAssignPool")}
       </Typography>
       <Box border={1} borderColor="grey.300">
         <Grid item style={{ margin: "10px" }}>
@@ -132,7 +135,7 @@ function IPv4AutoAssign({ ipAssignmentPools, handleChange }) {
             data={ipAssignmentPools}
           />
           <Divider />
-          <Typography>Add IPv4 Pool</Typography>
+          <Typography>{t("addIPv4Pool")}</Typography>
           <List
             style={{
               display: "flex",
diff --git a/frontend/src/components/NetworkSettings/components/IPv4AutoAssign/index.jsx b/frontend/src/components/NetworkSettings/components/IPv4AutoAssign/index.jsx
index 35c89774..b6540154 100644
--- a/frontend/src/components/NetworkSettings/components/IPv4AutoAssign/index.jsx
+++ b/frontend/src/components/NetworkSettings/components/IPv4AutoAssign/index.jsx
@@ -1 +1 @@
-export { default } from "./IPv4AutoAssign";
+export { default } from "./IPv4AutoAssign.jsx";
diff --git a/frontend/src/components/NetworkSettings/components/ManagedRoutes/ManagedRoutes.jsx b/frontend/src/components/NetworkSettings/components/ManagedRoutes/ManagedRoutes.jsx
index 48b21c8d..b538090c 100644
--- a/frontend/src/components/NetworkSettings/components/ManagedRoutes/ManagedRoutes.jsx
+++ b/frontend/src/components/NetworkSettings/components/ManagedRoutes/ManagedRoutes.jsx
@@ -9,12 +9,12 @@ import {
   TextField,
   IconButton,
 } from "@material-ui/core";
-import AddIcon from "@material-ui/icons/Add";
-import DeleteOutlineIcon from "@material-ui/icons/DeleteOutline";
+import AddIcon from "@material-ui/icons/Add.js";
+import DeleteOutlineIcon from "@material-ui/icons/DeleteOutline.js";
 
 import DataTable from "react-data-table-component";
 
-import { validateIP, normilizeIP, validateCIDR } from "utils/IP";
+import { validateIP, normilizeIP, validateCIDR } from "utils/IP.js";
 
 function ManagedRoutes({ routes, handleChange }) {
   const [destination, setDestination] = useState("");
diff --git a/frontend/src/components/NetworkSettings/components/ManagedRoutes/index.jsx b/frontend/src/components/NetworkSettings/components/ManagedRoutes/index.jsx
index 2dba8700..b3b1a711 100644
--- a/frontend/src/components/NetworkSettings/components/ManagedRoutes/index.jsx
+++ b/frontend/src/components/NetworkSettings/components/ManagedRoutes/index.jsx
@@ -1 +1 @@
-export { default } from "./ManagedRoutes";
+export { default } from "./ManagedRoutes.jsx";
diff --git a/frontend/src/components/NetworkSettings/index.jsx b/frontend/src/components/NetworkSettings/index.jsx
index 447e59de..6a06cd82 100644
--- a/frontend/src/components/NetworkSettings/index.jsx
+++ b/frontend/src/components/NetworkSettings/index.jsx
@@ -1 +1 @@
-export { default } from "./NetworkSettings";
+export { default } from "./NetworkSettings.jsx";
diff --git a/frontend/src/components/SettingsComponent/SettingsComponent.jsx b/frontend/src/components/SettingsComponent/SettingsComponent.jsx
new file mode 100644
index 00000000..55203dfe
--- /dev/null
+++ b/frontend/src/components/SettingsComponent/SettingsComponent.jsx
@@ -0,0 +1,43 @@
+import {
+  Accordion,
+  AccordionSummary,
+  AccordionDetails,
+  Checkbox,
+  Divider,
+  Grid,
+  Typography,
+  TextField,
+  Select,
+} from "@material-ui/core";
+import ExpandMoreIcon from "@material-ui/icons/ExpandMore.js";
+
+import API from "utils/API.js";
+import { parseValue, replaceValue, setValue } from "utils/ChangeHelper.js";
+
+import { useTranslation } from "react-i18next";
+
+function SettingsComponent() {
+  const { t, i18n } = useTranslation();
+
+  const handleChange = () => (event) => {
+    i18n.changeLanguage(event.target.value);
+  };
+
+  return (
+    <Accordion>
+      <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+        <Typography>{t("language")}</Typography>
+      </AccordionSummary>
+      <AccordionDetails>
+        <Grid item>
+          <Select native value={i18n.language} onChange={handleChange()}>
+            <option value={"en"}>English</option>
+            <option value={"es-ES"}>Español</option>
+          </Select>
+        </Grid>
+      </AccordionDetails>
+    </Accordion>
+  );
+}
+
+export default SettingsComponent;
diff --git a/frontend/src/components/SettingsComponent/index.jsx b/frontend/src/components/SettingsComponent/index.jsx
new file mode 100644
index 00000000..57f5ff7a
--- /dev/null
+++ b/frontend/src/components/SettingsComponent/index.jsx
@@ -0,0 +1 @@
+export { default } from "./SettingsComponent.jsx";
diff --git a/frontend/src/components/Theme/index.jsx b/frontend/src/components/Theme/index.jsx
index 3bef82bc..da839bbb 100644
--- a/frontend/src/components/Theme/index.jsx
+++ b/frontend/src/components/Theme/index.jsx
@@ -1 +1 @@
-export { default } from "./Theme";
+export { default } from "./Theme.jsx";
diff --git a/frontend/src/i18n.js b/frontend/src/i18n.js
new file mode 100644
index 00000000..a74ac101
--- /dev/null
+++ b/frontend/src/i18n.js
@@ -0,0 +1,34 @@
+import i18n from "i18next";
+import languageDetector from "i18next-browser-languagedetector";
+import { initReactI18next } from "react-i18next";
+import Backend from "i18next-http-backend";
+
+i18n
+  .use(languageDetector)
+  .use(initReactI18next)
+  .use(Backend)
+  .init({
+    compatibilityJSON: "v4",
+    //lng: "en",
+    fallbackLng: "en",
+    detection: {
+      order: ["path", "cookie", "localStorage", "htmlTag"],
+      caches: ["localStorage", "cookie"], // cache user language on
+    },
+    debug: true,
+    //keySeparator: false, // we use content as keys
+    interpolation: {
+      escapeValue: true,
+    },
+    react: {
+      useSuspense: true,
+    },
+    supportedLngs: ["en", "es-ES"],
+    backend: {
+      loadPath: "/locales/{{lng}}/{{ns}}.json",
+    },
+    ns: ["common"],
+    defaultNS: "common",
+  });
+
+export default i18n;
diff --git a/frontend/src/index.jsx b/frontend/src/index.jsx
index 3c94589b..663c7c09 100644
--- a/frontend/src/index.jsx
+++ b/frontend/src/index.jsx
@@ -1,13 +1,17 @@
 import "./index.css";
 
-import React from "react";
+import React, { Suspense } from "react";
 import ReactDOM from "react-dom";
 
-import App from "./App";
+import App from "./App.jsx";
+
+import "./i18n";
 
 ReactDOM.render(
   <React.StrictMode>
-    <App />
+    <Suspense fallback={<div>Loading...</div>}>
+      <App />
+    </Suspense>
   </React.StrictMode>,
   document.getElementById("root")
 );
diff --git a/frontend/src/routes/Home/Home.jsx b/frontend/src/routes/Home/Home.jsx
index faf15a9e..cacdbaad 100644
--- a/frontend/src/routes/Home/Home.jsx
+++ b/frontend/src/routes/Home/Home.jsx
@@ -1,7 +1,7 @@
 import { useLocalStorage } from "react-use";
 
-import HomeLoggedIn from "components/HomeLoggedIn";
-import HomeLoggedOut from "components/HomeLoggedOut";
+import HomeLoggedIn from "components/HomeLoggedIn/HomeLoggedIn.jsx";
+import HomeLoggedOut from "components/HomeLoggedOut/HomeLoggedOut.jsx";
 
 function Home() {
   const [loggedIn] = useLocalStorage("loggedIn", false);
diff --git a/frontend/src/routes/Home/index.jsx b/frontend/src/routes/Home/index.jsx
index ffa79319..508ea772 100644
--- a/frontend/src/routes/Home/index.jsx
+++ b/frontend/src/routes/Home/index.jsx
@@ -1 +1 @@
-export { default } from "./Home";
+export { default } from "./Home.jsx";
diff --git a/frontend/src/routes/Network/Network.jsx b/frontend/src/routes/Network/Network.jsx
index 272ba2ad..d5833cc5 100644
--- a/frontend/src/routes/Network/Network.jsx
+++ b/frontend/src/routes/Network/Network.jsx
@@ -1,15 +1,15 @@
 import { Grid, Link, Typography } from "@material-ui/core";
-import ArrowBackIcon from "@material-ui/icons/ArrowBack";
-import NetworkHeader from "components/NetworkHeader";
-import NetworkManagement from "components/NetworkManagement";
-import NetworkMembers from "components/NetworkMembers";
-import NetworkRules from "components/NetworkRules";
-import NetworkSettings from "components/NetworkSettings";
+import ArrowBackIcon from "@material-ui/icons/ArrowBack.js";
+import NetworkHeader from "components/NetworkHeader/NetworkHeader.jsx";
+import NetworkManagement from "components/NetworkManagement/NetworkManagement.jsx";
+import NetworkMembers from "components/NetworkMembers/NetworkMembers.jsx";
+import NetworkRules from "components/NetworkRules/NetworkRules.jsx";
+import NetworkSettings from "components/NetworkSettings/NetworkSettings.jsx";
 import { useCallback, useEffect, useState } from "react";
 import { Link as RouterLink, useHistory, useParams } from "react-router-dom";
 import { useLocalStorage } from "react-use";
-import API from "utils/API";
-import useStyles from "./Network.styles";
+import API from "utils/API.js";
+import useStyles from "./Network.styles.jsx";
 
 function Network() {
   const { nwid } = useParams();
diff --git a/frontend/src/routes/Network/index.jsx b/frontend/src/routes/Network/index.jsx
index 7a8a2ce1..5d9b2916 100644
--- a/frontend/src/routes/Network/index.jsx
+++ b/frontend/src/routes/Network/index.jsx
@@ -1 +1 @@
-export { default } from "./Network";
+export { default } from "./Network.jsx";
diff --git a/frontend/src/routes/NotFound/index.jsx b/frontend/src/routes/NotFound/index.jsx
index 3fded62c..76e87478 100644
--- a/frontend/src/routes/NotFound/index.jsx
+++ b/frontend/src/routes/NotFound/index.jsx
@@ -1 +1 @@
-export { default } from "./NotFound";
+export { default } from "./NotFound.jsx";
diff --git a/frontend/src/routes/Settings/Settings.jsx b/frontend/src/routes/Settings/Settings.jsx
new file mode 100644
index 00000000..08539ebe
--- /dev/null
+++ b/frontend/src/routes/Settings/Settings.jsx
@@ -0,0 +1,57 @@
+import { Grid, Link, Typography } from "@material-ui/core";
+import ArrowBackIcon from "@material-ui/icons/ArrowBack.js";
+import SettingsComponent from "components/SettingsComponent/SettingsComponent.jsx";
+
+import { useCallback, useEffect, useState } from "react";
+import { Link as RouterLink, useHistory, useParams } from "react-router-dom";
+import { useLocalStorage } from "react-use";
+import API from "utils/API";
+import useStyles from "./Settings.styles.jsx";
+
+import { useTranslation } from "react-i18next";
+
+function Settings() {
+  const { t, i18n } = useTranslation();
+  const [loggedIn] = useLocalStorage("loggedIn", false);
+  const [network, setNetwork] = useState({});
+
+  const classes = useStyles();
+  const history = useHistory();
+
+  if (loggedIn) {
+    return (
+      <>
+        <div className={classes.breadcrumbs}>
+          <Link color="inherit" component={RouterLink} to="/" underline="none">
+            <ArrowBackIcon className={classes.backIcon}></ArrowBackIcon>
+            {t("settings")}
+          </Link>
+        </div>
+        <div className={classes.container}>
+          <SettingsComponent />
+        </div>
+      </>
+    );
+  } else {
+    return (
+      <Grid
+        container
+        spacing={0}
+        direction="column"
+        alignItems="center"
+        justify="center"
+        style={{
+          minHeight: "50vh",
+        }}
+      >
+        <Grid item xs={10}>
+          <Typography variant="h5">
+            You are not authorized. Please Log In
+          </Typography>
+        </Grid>
+      </Grid>
+    );
+  }
+}
+
+export default Settings;
diff --git a/frontend/src/routes/Settings/Settings.styles.jsx b/frontend/src/routes/Settings/Settings.styles.jsx
new file mode 100644
index 00000000..ac884a75
--- /dev/null
+++ b/frontend/src/routes/Settings/Settings.styles.jsx
@@ -0,0 +1,16 @@
+import { makeStyles } from "@material-ui/core/styles";
+
+const useStyles = makeStyles((theme) => ({
+  backIcon: {
+    fontSize: 12,
+  },
+  container: {
+    margin: "3%",
+  },
+  breadcrumbs: {
+    paddingTop: "2%",
+    paddingLeft: "2%",
+  },
+}));
+
+export default useStyles;
diff --git a/frontend/src/routes/Settings/index.jsx b/frontend/src/routes/Settings/index.jsx
new file mode 100644
index 00000000..d7507a0a
--- /dev/null
+++ b/frontend/src/routes/Settings/index.jsx
@@ -0,0 +1 @@
+export { default } from "./Settings.jsx";
diff --git a/yarn.lock b/yarn.lock
index 4ca548d9..6cb6fc79 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -265,6 +265,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/runtime@npm:^7.19.4, @babel/runtime@npm:^7.22.5":
+  version: 7.23.2
+  resolution: "@babel/runtime@npm:7.23.2"
+  dependencies:
+    regenerator-runtime: "npm:^0.14.0"
+  checksum: abdcbdd590c7e31762e1bdab94dd466823c8bcedd3ff2fde85eeb94dac7cccaef151ac37c428bda7018ededd27c9a82b4dfeb621f978ad934232475a902f8e3a
+  languageName: node
+  linkType: hard
+
 "@babel/template@npm:^7.22.15":
   version: 7.22.15
   resolution: "@babel/template@npm:7.22.15"
@@ -860,6 +869,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@lit-labs/ssr-dom-shim@npm:^1.0.0, @lit-labs/ssr-dom-shim@npm:^1.1.0":
+  version: 1.1.2
+  resolution: "@lit-labs/ssr-dom-shim@npm:1.1.2"
+  checksum: a930f7de57b952dc21317a5754aa0411e000bb4991053cde771c111b7792c4a4cdc896922f0353c832215bed71400431c5ab5a6252c8f4f70bb9ce0b37fe4752
+  languageName: node
+  linkType: hard
+
+"@lit/reactive-element@npm:^1.3.0, @lit/reactive-element@npm:^1.6.0":
+  version: 1.6.3
+  resolution: "@lit/reactive-element@npm:1.6.3"
+  dependencies:
+    "@lit-labs/ssr-dom-shim": "npm:^1.0.0"
+  checksum: 664c899bb0b144590dc4faf83b358b1504810eac107778c3aeb384affc65a7ef4eda754944bcc34a57237db03dff145332406345ac24da19ca37cf4b3cb343d3
+  languageName: node
+  linkType: hard
+
 "@material-ui/core@npm:^4.12.4":
   version: 4.12.4
   resolution: "@material-ui/core@npm:4.12.4"
@@ -980,6 +1005,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@material/mwc-icon@npm:0.25.3":
+  version: 0.25.3
+  resolution: "@material/mwc-icon@npm:0.25.3"
+  dependencies:
+    lit: "npm:^2.0.0"
+    tslib: "npm:^2.0.1"
+  checksum: ee4eb4c746795666b576395046238f72714e7f3985e33a2edec8e11d3f9a2e11087edae70c6ba5b1804ff5348fe85a19a752281af97dff3c9ebad1b20f5969ea
+  languageName: node
+  linkType: hard
+
 "@nodelib/fs.scandir@npm:2.1.5":
   version: 2.1.5
   resolution: "@nodelib/fs.scandir@npm:2.1.5"
@@ -1432,6 +1467,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/trusted-types@npm:^2.0.2":
+  version: 2.0.4
+  resolution: "@types/trusted-types@npm:2.0.4"
+  checksum: 5256c4576cd1c90d33ddd9cc9cbd4f202b39c98cbe8b7f74963298f9eb2159c285ea5c25a6181b4c594d8d75641765bff85d72c2d251ad076e6529ce0eeedd1c
+  languageName: node
+  linkType: hard
+
 "@typescript-eslint/eslint-plugin@npm:^6.7.4":
   version: 6.7.4
   resolution: "@typescript-eslint/eslint-plugin@npm:6.7.4"
@@ -2992,6 +3034,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"cross-fetch@npm:3.1.6":
+  version: 3.1.6
+  resolution: "cross-fetch@npm:3.1.6"
+  dependencies:
+    node-fetch: "npm:^2.6.11"
+  checksum: e08325b813da37f2d5312b3e630af992c35681c1737707b029e8ef1c48ea034bda8b960000fc8bee6e0485e133347198aa6ecccadb530b06c47472f6c76bc27b
+  languageName: node
+  linkType: hard
+
 "cross-spawn@npm:^7.0.0, cross-spawn@npm:^7.0.1, cross-spawn@npm:^7.0.2, cross-spawn@npm:^7.0.3":
   version: 7.0.3
   resolution: "cross-spawn@npm:7.0.3"
@@ -4344,11 +4395,16 @@ __metadata:
     eslint-plugin-react-hooks: "npm:^4.6.0"
     eslint-plugin-react-refresh: "npm:^0.4.3"
     history: "npm:^5.3.0"
+    i18next: "npm:^23.5.1"
+    i18next-browser-languagedetector: "npm:^7.1.0"
+    i18next-http-backend: "npm:^2.2.2"
     ipaddr.js: "npm:^2.0.1"
     lodash: "npm:^4.17.21"
+    ninja-keys: "npm:^1.2.2"
     react: "npm:^17.0.2"
     react-data-table-component: "npm:^6.11.8"
     react-dom: "npm:^17.0.2"
+    react-i18next: "npm:^13.3.0"
     react-is: "npm:^17.0.2"
     react-router-dom: "npm:^5.2.0"
     react-use: "npm:^17.4.0"
@@ -4888,6 +4944,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"hotkeys-js@npm:3.8.7":
+  version: 3.8.7
+  resolution: "hotkeys-js@npm:3.8.7"
+  checksum: a70b797ae26ea89e9f0bef49711a48622422b641362ee0c2ac4a1f70794e85066623fefdf200866fce1f75fc520e530e35ebd0334f61cbf500da882a6b795faf
+  languageName: node
+  linkType: hard
+
+"html-parse-stringify@npm:^3.0.1":
+  version: 3.0.1
+  resolution: "html-parse-stringify@npm:3.0.1"
+  dependencies:
+    void-elements: "npm:3.1.0"
+  checksum: 8743b76cc50e46d1956c1ad879d18eb9613b0d2d81e24686d633f9f69bb26b84676f64a926973de793cca479997017a63219278476d617b6c42d68246d7c07fe
+  languageName: node
+  linkType: hard
+
 "http-cache-semantics@npm:^4.1.1":
   version: 4.1.1
   resolution: "http-cache-semantics@npm:4.1.1"
@@ -4968,6 +5040,33 @@ __metadata:
   languageName: node
   linkType: hard
 
+"i18next-browser-languagedetector@npm:^7.1.0":
+  version: 7.1.0
+  resolution: "i18next-browser-languagedetector@npm:7.1.0"
+  dependencies:
+    "@babel/runtime": "npm:^7.19.4"
+  checksum: 3b06c8a5df09092cffc0b6637b542bb572e8a25dcba97d0d8a5e5dd7539b90bf00000f3a279654693f4b5908c5fc4d1d4f3766dfb461dacab46be3d071266384
+  languageName: node
+  linkType: hard
+
+"i18next-http-backend@npm:^2.2.2":
+  version: 2.2.2
+  resolution: "i18next-http-backend@npm:2.2.2"
+  dependencies:
+    cross-fetch: "npm:3.1.6"
+  checksum: dbf09f2f309cb6070e691d0d382ccff3e94d2cfa9f30315dc4c03faa5d7d1f3b408d48c46c766b7e07527ec10c0542fde19240845905314ce0134ac10d6a6adb
+  languageName: node
+  linkType: hard
+
+"i18next@npm:^23.5.1":
+  version: 23.5.1
+  resolution: "i18next@npm:23.5.1"
+  dependencies:
+    "@babel/runtime": "npm:^7.22.5"
+  checksum: 38e62d582b0f67eb2eee4f079c9cd512246496f2fb970f50a0be26c7c5e6ac5e772de9763ac1943919ecd816b2c0375f4b2071c67b1485a6a980c4d37348408f
+  languageName: node
+  linkType: hard
+
 "iconv-lite@npm:0.4.24, iconv-lite@npm:^0.4.24":
   version: 0.4.24
   resolution: "iconv-lite@npm:0.4.24"
@@ -5870,6 +5969,48 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lit-element@npm:^3.2.0, lit-element@npm:^3.3.0":
+  version: 3.3.3
+  resolution: "lit-element@npm:3.3.3"
+  dependencies:
+    "@lit-labs/ssr-dom-shim": "npm:^1.1.0"
+    "@lit/reactive-element": "npm:^1.3.0"
+    lit-html: "npm:^2.8.0"
+  checksum: 7968e7f3ce3994911f27c4c54acc956488c91d8af81677cce3d6f0c2eaea45cceb79b064077159392238d6e43d46015a950269db9914fea8913566aacb17eaa1
+  languageName: node
+  linkType: hard
+
+"lit-html@npm:^2.2.0, lit-html@npm:^2.8.0":
+  version: 2.8.0
+  resolution: "lit-html@npm:2.8.0"
+  dependencies:
+    "@types/trusted-types": "npm:^2.0.2"
+  checksum: 3503e55e2927c2ff94773cf041fc4128f92291869c9192f36eacb7f95132d11f6b329e5b910ab60a4456349cd2e6d23b33d83291b24d557bcd6b904d6314ac1a
+  languageName: node
+  linkType: hard
+
+"lit@npm:2.2.6":
+  version: 2.2.6
+  resolution: "lit@npm:2.2.6"
+  dependencies:
+    "@lit/reactive-element": "npm:^1.3.0"
+    lit-element: "npm:^3.2.0"
+    lit-html: "npm:^2.2.0"
+  checksum: 160363c6d271559f629404301f4df324f97f0d7f48c69c784f277fdeabc5f975ab98cb792198136c87175f185b28699ff25c105dc91f08eb4e96e46143a6c162
+  languageName: node
+  linkType: hard
+
+"lit@npm:^2.0.0":
+  version: 2.8.0
+  resolution: "lit@npm:2.8.0"
+  dependencies:
+    "@lit/reactive-element": "npm:^1.6.0"
+    lit-element: "npm:^3.3.0"
+    lit-html: "npm:^2.8.0"
+  checksum: aa64c1136b855ba328d41157dba67657d480345aeec3c1dd829abeb67719d759c9ff2ade9903f9cfb4f9d012b16087034aaa5b33f1182e70c615765562e3251b
+  languageName: node
+  linkType: hard
+
 "load-json-file@npm:^4.0.0":
   version: 4.0.0
   resolution: "load-json-file@npm:4.0.0"
@@ -6532,6 +6673,31 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ninja-keys@npm:^1.2.2":
+  version: 1.2.2
+  resolution: "ninja-keys@npm:1.2.2"
+  dependencies:
+    "@material/mwc-icon": "npm:0.25.3"
+    hotkeys-js: "npm:3.8.7"
+    lit: "npm:2.2.6"
+  checksum: 5f573fd547c54f926d13f30877f8e54245ec22097f0a539f9b89532aa4c21582572f7df4dc1db407f128fb44867fc9ef23e8c9065a36c5870652057b7149db73
+  languageName: node
+  linkType: hard
+
+"node-fetch@npm:^2.6.11":
+  version: 2.7.0
+  resolution: "node-fetch@npm:2.7.0"
+  dependencies:
+    whatwg-url: "npm:^5.0.0"
+  peerDependencies:
+    encoding: ^0.1.0
+  peerDependenciesMeta:
+    encoding:
+      optional: true
+  checksum: b24f8a3dc937f388192e59bcf9d0857d7b6940a2496f328381641cb616efccc9866e89ec43f2ec956bbd6c3d3ee05524ce77fe7b29ccd34692b3a16f237d6676
+  languageName: node
+  linkType: hard
+
 "node-gyp@npm:latest":
   version: 9.4.0
   resolution: "node-gyp@npm:9.4.0"
@@ -7288,6 +7454,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-i18next@npm:^13.3.0":
+  version: 13.3.0
+  resolution: "react-i18next@npm:13.3.0"
+  dependencies:
+    "@babel/runtime": "npm:^7.22.5"
+    html-parse-stringify: "npm:^3.0.1"
+  peerDependencies:
+    i18next: ">= 23.2.3"
+    react: ">= 16.8.0"
+  peerDependenciesMeta:
+    react-dom:
+      optional: true
+    react-native:
+      optional: true
+  checksum: 2ef46245ba1ba9fca8c43dbe1bcab4ac63ca68e67de7159cb5f93cd7fd10407599bcdf1999f6567091987be7b9aaba77cdb515a70d5ee2b935b985f4c40d6d9d
+  languageName: node
+  linkType: hard
+
 "react-is@npm:^16.13.1, react-is@npm:^16.6.0, react-is@npm:^16.7.0":
   version: 16.13.1
   resolution: "react-is@npm:16.13.1"
@@ -8654,6 +8838,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tr46@npm:~0.0.3":
+  version: 0.0.3
+  resolution: "tr46@npm:0.0.3"
+  checksum: 8f1f5aa6cb232f9e1bdc86f485f916b7aa38caee8a778b378ffec0b70d9307873f253f5cbadbe2955ece2ac5c83d0dc14a77513166ccd0a0c7fe197e21396695
+  languageName: node
+  linkType: hard
+
 "tree-kill@npm:^1.2.2":
   version: 1.2.2
   resolution: "tree-kill@npm:1.2.2"
@@ -8736,7 +8927,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tslib@npm:^2.1.0":
+"tslib@npm:^2.0.1, tslib@npm:^2.1.0":
   version: 2.6.2
   resolution: "tslib@npm:2.6.2"
   checksum: bd26c22d36736513980091a1e356378e8b662ded04204453d353a7f34a4c21ed0afc59b5f90719d4ba756e581a162ecbf93118dc9c6be5acf70aa309188166ca
@@ -9046,6 +9237,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"void-elements@npm:3.1.0":
+  version: 3.1.0
+  resolution: "void-elements@npm:3.1.0"
+  checksum: 0390f818107fa8fce55bb0a5c3f661056001c1d5a2a48c28d582d4d847347c2ab5b7f8272314cac58acf62345126b6b09bea623a185935f6b1c3bbce0dfd7f7f
+  languageName: node
+  linkType: hard
+
 "wcwidth@npm:^1.0.1":
   version: 1.0.1
   resolution: "wcwidth@npm:1.0.1"
@@ -9055,6 +9253,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"webidl-conversions@npm:^3.0.0":
+  version: 3.0.1
+  resolution: "webidl-conversions@npm:3.0.1"
+  checksum: b65b9f8d6854572a84a5c69615152b63371395f0c5dcd6729c45789052296df54314db2bc3e977df41705eacb8bc79c247cee139a63fa695192f95816ed528ad
+  languageName: node
+  linkType: hard
+
+"whatwg-url@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "whatwg-url@npm:5.0.0"
+  dependencies:
+    tr46: "npm:~0.0.3"
+    webidl-conversions: "npm:^3.0.0"
+  checksum: f95adbc1e80820828b45cc671d97da7cd5e4ef9deb426c31bcd5ab00dc7103042291613b3ef3caec0a2335ed09e0d5ed026c940755dbb6d404e2b27f940fdf07
+  languageName: node
+  linkType: hard
+
 "which-boxed-primitive@npm:^1.0.2":
   version: 1.0.2
   resolution: "which-boxed-primitive@npm:1.0.2"