diff --git a/.github/workflows/weblate-update-pot.yml b/.github/workflows/weblate-update-pot.yml
index 6d4db70d63..8402c76d1e 100644
--- a/.github/workflows/weblate-update-pot.yml
+++ b/.github/workflows/weblate-update-pot.yml
@@ -35,13 +35,11 @@ jobs:
         # TODO: use a shared script for this
         run: |
           cd agama/web
-          xgettext --default-domain=agama --output=- --language=C --keyword= \
-            --keyword=_:1,1t --keyword=_:1c,2,2t --keyword=C_:1c,2 \
-            --keyword=N_ --keyword=NC_:1c,2 --foreign-user \
-            --copyright-holder="SuSE Linux Products GmbH, Nuernberg" \
+          xgettext --default-domain=agama --output=agama.pot --language=JavaScript --keyword= \
+            --keyword=_:1 --keyword=N_:1 --keyword=n_:1,2,3t --keyword=Nn_:1,2,3t \
+            --foreign-user --copyright-holder="SuSE Linux Products GmbH, Nuernberg" \
             --from-code=UTF-8 --add-comments=TRANSLATORS --sort-by-file \
-            $(find . ! -name cockpit.js -name '*.js' -o ! -name '*.test.jsx' -name '*.jsx') | \
-            sed '/^#/ s/, c-format//' > agama.pot
+            $(find . ! -name cockpit.js -name '*.js' -o ! -name '*.test.jsx' -name '*.jsx')
             msgfmt --statistics agama.pot
 
       - name: Validate the generated POT file
diff --git a/web/src/components/core/About.jsx b/web/src/components/core/About.jsx
index 65649a27ef..e4cf5efe3b 100644
--- a/web/src/components/core/About.jsx
+++ b/web/src/components/core/About.jsx
@@ -23,6 +23,9 @@ import React, { useState } from "react";
 import { Button, Text } from "@patternfly/react-core";
 import { Icon } from "~/components/layout";
 import { Popup } from "~/components/core";
+import { _ } from "~/i18n";
+
+import cockpit from "~/lib/cockpit";
 
 export default function About() {
   const [isOpen, setIsOpen] = useState(false);
@@ -37,23 +40,35 @@ export default function About() {
         icon={<Icon name="help" size="24" />}
         onClick={open}
       >
-        About Agama
+        {_("About Agama")}
       </Button>
 
       <Popup
         isOpen={isOpen}
-        title="About Agama"
+        title={_("About Agama")}
       >
         <Text>
-          Agama is an <strong>experimental installer</strong> for (open)SUSE systems. It is
-          still under development so, please, do not use it in production environments. If you want
-          to give it a try, we recommend to use a virtual machine to prevent any possible data loss.
+          {
+            // TRANSLATORS: content of the "About" popup (1/2)
+            _(`Agama is an experimental installer for (open)SUSE systems. It
+still under development so, please, do not use it in
+production environments. If you want to give it a try, we
+recommend to use a virtual machine to prevent any possible
+data loss.`)
+          }
         </Text>
         <Text>
-          For more information, please visit the project's repository at https://github.com/openSUSE/Agama.
+          {
+            cockpit.format(
+              // TRANSLATORS: content of the "About" popup (2/2)
+              // $0 is replaced by the project URL
+              _("For more information, please visit the project's repository at $0."),
+              "https://github.com/openSUSE/agama"
+            )
+          }
         </Text>
         <Popup.Actions>
-          <Popup.Confirm onClick={close} autoFocus>Close</Popup.Confirm>
+          <Popup.Confirm onClick={close} autoFocus>{_("Close")}</Popup.Confirm>
         </Popup.Actions>
       </Popup>
     </>
diff --git a/web/src/components/core/InstallButton.jsx b/web/src/components/core/InstallButton.jsx
index 9dcc75cfc0..b996a884b6 100644
--- a/web/src/components/core/InstallButton.jsx
+++ b/web/src/components/core/InstallButton.jsx
@@ -26,6 +26,7 @@ import { Button } from "@patternfly/react-core";
 import { useNavigate } from "react-router-dom";
 
 import { If, Popup } from "~/components/core";
+import { _ } from "~/i18n";
 
 const InstallConfirmationPopup = ({ hasIssues, onAccept, onClose }) => {
   const navigate = useNavigate();
@@ -41,29 +42,46 @@ const InstallConfirmationPopup = ({ hasIssues, onAccept, onClose }) => {
 
     return (
       <p className="bold">
-        There are some reported issues. Please, check <IssuesLink text="the list of issues" /> before
-        proceeding with the installation.
+        {
+          // TRANSLATORS: the installer reports some errors,
+          // the beginning (1/3)
+          _("There are some reported issues. Please, check")
+        }
+        <IssuesLink text={
+          // TRANSLATORS: the installer reports some errors,
+          // the middle part (a clickable link) (2/3)
+          _("the list of issues")
+        }
+        />
+        {
+          // TRANSLATORS: the installer reports some errors,
+          // the end (3/3)
+          _("before proceeding with the installation.")
+        }
       </p>
     );
   };
 
   return (
     <Popup
-      title="Confirm Installation"
+      title={_("Confirm Installation")}
       isOpen
     >
       <div className="stack">
         <If condition={hasIssues} then={<IssuesWarning />} />
         <p>
-          If you continue, partitions on your hard disk will be modified according to the provided
-          installation settings.
+          { _(`If you continue, partitions on your hard disk will be modified
+according to the provided installation settings.`) }
         </p>
         <p>
-          Please, cancel and check the settings if you are unsure.
+          {_("Please, cancel and check the settings if you are unsure.")}
         </p>
       </div>
       <Popup.Actions>
-        <Popup.Confirm onClick={onAccept}>Continue</Popup.Confirm>
+        <Popup.Confirm onClick={onAccept}>
+          {/* TRANSLATORS: button label */}
+          {_("Continue")}
+        </Popup.Confirm>
         <Popup.Cancel onClick={onClose} autoFocus />
       </Popup.Actions>
     </Popup>
@@ -72,16 +90,19 @@ const InstallConfirmationPopup = ({ hasIssues, onAccept, onClose }) => {
 
 const CannotInstallPopup = ({ onClose }) => (
   <Popup
-    title="Problems Found"
+    title={_("Problems Found")}
     isOpen
   >
     <p>
-      Some problems were found when trying to start the installation.
-      Please, have a look to the reported errors and try again.
+      {_(`Some problems were found when trying to start the installation.
+Please, have a look to the reported errors and try again.`)}
     </p>
 
     <Popup.Actions>
-      <Popup.Cancel onClick={onClose} autoFocus>Accept</Popup.Cancel>
+      <Popup.Cancel onClick={onClose} autoFocus>
+        {/* TRANSLATORS: button label */}
+        {_("Accept")}
+      </Popup.Cancel>
     </Popup.Actions>
   </Popup>
 );
@@ -127,7 +148,8 @@ const InstallButton = ({ onClick }) => {
   return (
     <>
       <Button isLarge variant="primary" onClick={open}>
-        Install
+        {/* TRANSLATORS: button label */}
+        {_("Install")}
       </Button>
 
       { isOpen && renderPopup(error, hasIssues, { onAccept: install, onClose: close }) }
diff --git a/web/src/components/core/InstallationFinished.jsx b/web/src/components/core/InstallationFinished.jsx
index c51f6cfce1..4e784665c5 100644
--- a/web/src/components/core/InstallationFinished.jsx
+++ b/web/src/components/core/InstallationFinished.jsx
@@ -31,12 +31,17 @@ import {
 
 import { Center, Icon, Title as SectionTitle, PageIcon, MainActions } from "~/components/layout";
 import { useInstallerClient } from "~/context/installer";
+import { _ } from "~/i18n";
 
 function InstallationFinished() {
   const client = useInstallerClient();
   const [iguana, setIguana] = useState(false);
   const closingAction = () => client.manager.finishInstallation();
-  const buttonCaption = iguana ? "Finish" : "Reboot";
+  const buttonCaption = iguana
+    // TRANSLATORS: button label
+    ? _("Finish")
+    // TRANSLATORS: button label
+    : _("Reboot");
 
   useEffect(() => {
     async function getIguana() {
@@ -49,7 +54,7 @@ function InstallationFinished() {
 
   return (
     <Center>
-      <SectionTitle>Installation Finished</SectionTitle>
+      <SectionTitle>{_("Installation Finished")}</SectionTitle>
       <PageIcon><Icon name="task_alt" /></PageIcon>
       <MainActions>
         <Button isLarge variant="primary" onClick={closingAction}>
@@ -60,15 +65,19 @@ function InstallationFinished() {
       <EmptyState>
         <EmptyStateIcon icon={({ ...props }) => <Icon name="check_circle" { ...props } />} className="color-success" />
         <Title headingLevel="h2" size="4xl">
-          Congratulations!
+          {_("Congratulations!")}
         </Title>
         <EmptyStateBody className="pf-c-content">
           <div>
-            <Text>The installation on your machine is complete.</Text>
+            <Text>{_("The installation on your machine is complete.")}</Text>
             <Text>
-              At this point you can {buttonCaption} the machine to log in to the new system.
+              {
+                iguana
+                  ? _("At this point you can power off the machine.")
+                  : _("At this point you can reboot the machine to log in to the new system.")
+              }
             </Text>
-            <Text>Have a lot of fun! Your openSUSE Development Team.</Text>
+            <Text>{_("Have a lot of fun! Your openSUSE Development Team.")}</Text>
           </div>
         </EmptyStateBody>
       </EmptyState>
diff --git a/web/src/components/core/InstallationProgress.jsx b/web/src/components/core/InstallationProgress.jsx
index fdc8d1ccb4..9acab999c3 100644
--- a/web/src/components/core/InstallationProgress.jsx
+++ b/web/src/components/core/InstallationProgress.jsx
@@ -24,11 +24,12 @@ import React from "react";
 import ProgressReport from "./ProgressReport";
 import { Center, Icon, Title, PageIcon } from "~/components/layout";
 import { Questions } from "~/components/questions";
+import { _ } from "~/i18n";
 
 function InstallationProgress() {
   return (
     <>
-      <Title>Installing</Title>
+      <Title>{_("Installing")}</Title>
       <PageIcon><Icon name="downloading" /></PageIcon>
       <Center><ProgressReport /></Center>
       <Questions />
diff --git a/web/src/components/core/IssuesLink.jsx b/web/src/components/core/IssuesLink.jsx
index cf3b50b265..d27ae1c216 100644
--- a/web/src/components/core/IssuesLink.jsx
+++ b/web/src/components/core/IssuesLink.jsx
@@ -25,6 +25,7 @@ import { Link } from "react-router-dom";
 import { Icon } from "~/components/layout";
 import { If, NotificationMark } from "~/components/core";
 import { useNotification } from "~/context/notification";
+import { _ } from "~/i18n";
 
 /**
  * Link to go to the issues page
@@ -36,10 +37,10 @@ export default function IssuesLink() {
   return (
     <Link to="/issues">
       <Icon name="problem" size="24" />
-      Show issues
+      {_("Show issues")}
       <If
         condition={notification.issues}
-        then={<NotificationMark aria-label="There are new issues" />}
+        then={<NotificationMark aria-label={_("There are new issues")} />}
       />
     </Link>
   );
diff --git a/web/src/components/core/IssuesPage.jsx b/web/src/components/core/IssuesPage.jsx
index 02f2ec1c57..7d137c5fca 100644
--- a/web/src/components/core/IssuesPage.jsx
+++ b/web/src/components/core/IssuesPage.jsx
@@ -28,6 +28,7 @@ import { If, Page, Section } from "~/components/core";
 import { Icon } from "~/components/layout";
 import { useInstallerClient } from "~/context/installer";
 import { useNotification } from "~/context/notification";
+import { _ } from "~/i18n";
 
 /**
  * Renders an issue
@@ -111,7 +112,7 @@ const IssuesContent = ({ issues }) => {
     return (
       <HelperText className="issue">
         <HelperTextItem variant="success" hasIcon icon={<Icon name="task_alt" />}>
-          No issues found. Everything looks ok.
+          {_("No issues found. Everything looks ok.")}
         </HelperTextItem>
       </HelperText>
     );
diff --git a/web/src/components/core/LogsButton.jsx b/web/src/components/core/LogsButton.jsx
index 10747e767c..1c7987ce13 100644
--- a/web/src/components/core/LogsButton.jsx
+++ b/web/src/components/core/LogsButton.jsx
@@ -25,6 +25,7 @@ import { useCancellablePromise } from "~/utils";
 
 import { Alert, Button } from "@patternfly/react-core";
 import { Icon } from "~/components/layout";
+import { _ } from "~/i18n";
 
 const FILENAME = "y2logs.tar.xz";
 const FILETYPE = "application/x-xz";
@@ -94,7 +95,7 @@ const LogsButton = ({ ...props }) => {
         icon={isCollecting ? null : <Icon name="download" size="24" />}
         {...props}
       >
-        {isCollecting ? "Collecting logs..." : "Download logs"}
+        {isCollecting ? _("Collecting logs...") : _("Download logs")}
       </Button>
 
       { isCollecting &&
@@ -102,7 +103,7 @@ const LogsButton = ({ ...props }) => {
           isInline
           isPlain
           variant="info"
-          title="The browser will run the logs download as soon as they are ready. Please, be patient."
+          title={_("The browser will run the logs download as soon as they are ready. Please, be patient.")}
         /> }
 
       { error &&
@@ -110,7 +111,7 @@ const LogsButton = ({ ...props }) => {
           isInline
           isPlain
           variant="warning"
-          title="Something went wrong while collecting logs. Please, try again."
+          title={_("Something went wrong while collecting logs. Please, try again.")}
         /> }
     </>
   );
diff --git a/web/src/components/core/PasswordAndConfirmationInput.jsx b/web/src/components/core/PasswordAndConfirmationInput.jsx
index f3e1cb3d05..0358b902ba 100644
--- a/web/src/components/core/PasswordAndConfirmationInput.jsx
+++ b/web/src/components/core/PasswordAndConfirmationInput.jsx
@@ -24,6 +24,7 @@ import {
   FormGroup,
   TextInput
 } from "@patternfly/react-core";
+import { _ } from "~/i18n";
 
 const PasswordAndConfirmationInput = ({ value, onChange, onValidation, isDisabled, split = false }) => {
   const [confirmation, setConfirmation] = useState(value || "");
@@ -33,7 +34,7 @@ const PasswordAndConfirmationInput = ({ value, onChange, onValidation, isDisable
     let newError = "";
 
     if (password !== passwordConfirmation) {
-      newError = "Passwords do not match";
+      newError = _("Passwords do not match");
     }
 
     setError(newError);
@@ -54,12 +55,12 @@ const PasswordAndConfirmationInput = ({ value, onChange, onValidation, isDisable
 
   return (
     <div className={split ? "split" : "stack"}>
-      <FormGroup fieldId="password" label="Password">
+      <FormGroup fieldId="password" label={_("Password")}>
         <TextInput
           id="password"
           name="password"
           type="password"
-          aria-label="User password"
+          aria-label={_("User password")}
           value={value}
           isDisabled={isDisabled}
           onChange={onChangeValue}
@@ -68,7 +69,7 @@ const PasswordAndConfirmationInput = ({ value, onChange, onValidation, isDisable
       </FormGroup>
       <FormGroup
         fieldId="passwordConfirmation"
-        label="Password confirmation"
+        label={_("Password confirmation")}
         helperTextInvalid={error}
         validated={error === "" ? "default" : "error"}
       >
@@ -76,7 +77,7 @@ const PasswordAndConfirmationInput = ({ value, onChange, onValidation, isDisable
           id="passwordConfirmation"
           name="passwordConfirmation"
           type="password"
-          aria-label="User password confirmation"
+          aria-label={_("User password confirmation")}
           value={confirmation}
           isDisabled={isDisabled}
           onChange={onChangeConfirmation}
diff --git a/web/src/components/core/RowActions.jsx b/web/src/components/core/RowActions.jsx
index b5d69c0450..1355167631 100644
--- a/web/src/components/core/RowActions.jsx
+++ b/web/src/components/core/RowActions.jsx
@@ -24,6 +24,7 @@ import { DropdownToggle } from "@patternfly/react-core";
 import { ActionsColumn } from '@patternfly/react-table';
 
 import { Icon } from '~/components/layout';
+import { _ } from "~/i18n";
 
 /**
  * Renders icon for selecting the options of a row in a table
@@ -58,7 +59,7 @@ export default function RowActions({ id, actions, "aria-label": toggleAriaLabel,
   const actionsToggle = (props) => (
     <DropdownToggle
       id={id}
-      aria-label={toggleAriaLabel || "Actions"}
+      aria-label={toggleAriaLabel || _("Actions")}
       toggleIndicator={null}
       isDisabled={props.isDisabled}
       onToggle={props.onToggle}
diff --git a/web/src/components/core/SectionSkeleton.jsx b/web/src/components/core/SectionSkeleton.jsx
index 475338498a..b8e0fa8d70 100644
--- a/web/src/components/core/SectionSkeleton.jsx
+++ b/web/src/components/core/SectionSkeleton.jsx
@@ -21,16 +21,17 @@
 
 import React from "react";
 import { Skeleton } from "@patternfly/react-core";
+import { _ } from "~/i18n";
 
 const SectionSkeleton = () => (
   <>
     <Skeleton
-      screenreaderText="Waiting..."
+      screenreaderText={_("Waiting")}
       fontSize="sm"
       width="50%"
     />
     <Skeleton
-      screenreaderText="Waiting..."
+      screenreaderText={_("Waiting")}
       fontSize="sm"
       width="25%"
     />
diff --git a/web/src/components/core/ShowLogButton.jsx b/web/src/components/core/ShowLogButton.jsx
index 979a91b0cd..0d2066bfb7 100644
--- a/web/src/components/core/ShowLogButton.jsx
+++ b/web/src/components/core/ShowLogButton.jsx
@@ -23,6 +23,7 @@ import React, { useState } from "react";
 import { FileViewer } from "~/components/core";
 import { Icon } from "~/components/layout";
 import { Button } from "@patternfly/react-core";
+import { _ } from "~/i18n";
 
 /**
  * Button for displaying the YaST logs
@@ -42,12 +43,14 @@ const ShowLogButton = () => {
         isDisabled={isLogDisplayed}
         icon={<Icon name="description" size="24" />}
       >
-        Show Logs
+        {/* TRANSLATORS: button label */}
+        {_("Show Logs")}
       </Button>
 
       { isLogDisplayed &&
         <FileViewer
-          title="YaST Logs"
+          // TRANSLATORS: popup dialog title
+          title={_("YaST Logs")}
           file="/var/log/YaST2/y2log"
           onCloseCallback={onClose}
         /> }
diff --git a/web/src/components/core/ShowTerminalButton.jsx b/web/src/components/core/ShowTerminalButton.jsx
index 59df0a4eca..e6cea495ba 100644
--- a/web/src/components/core/ShowTerminalButton.jsx
+++ b/web/src/components/core/ShowTerminalButton.jsx
@@ -24,6 +24,7 @@ import { Button } from "@patternfly/react-core";
 
 import { Terminal } from "~/components/core";
 import { Icon } from "~/components/layout";
+import { _ } from "~/i18n";
 
 /**
  * Button for displaying the terminal application
@@ -43,7 +44,8 @@ const ShowTerminalButton = () => {
         isDisabled={isTermDisplayed}
         icon={<Icon name="terminal" size="24" />}
       >
-        Open Terminal
+        {/* TRANSLATORS: button label */}
+        {_("Open Terminal")}
       </Button>
 
       { isTermDisplayed &&
diff --git a/web/src/components/core/Sidebar.jsx b/web/src/components/core/Sidebar.jsx
index 4ae7bb418f..d51629b172 100644
--- a/web/src/components/core/Sidebar.jsx
+++ b/web/src/components/core/Sidebar.jsx
@@ -25,6 +25,7 @@ import { Icon, AppActions } from "~/components/layout";
 import { If, NotificationMark } from "~/components/core";
 import { useNotification } from "~/context/notification";
 import useNodeSiblings from "~/hooks/useNodeSiblings";
+import { _ } from "~/i18n";
 
 /**
  * Agama sidebar navigation
@@ -129,13 +130,13 @@ export default function Sidebar ({ children }) {
         <button
           onClick={open}
           className="plain-control"
-          aria-label="Show global options"
+          aria-label={_("Show global options")}
           aria-controls="global-options"
           aria-expanded={isOpen}
         >
           <If
             condition={notification.issues}
-            then={<NotificationMark data-variant="sidebar" aria-label="New issues found" />}
+            then={<NotificationMark data-variant="sidebar" aria-label={_("New issues found")} />}
           />
           <Icon name="menu" />
         </button>
@@ -145,17 +146,20 @@ export default function Sidebar ({ children }) {
         id="global-options"
         ref={asideRef}
         className="wrapper sidebar"
-        aria-label="Global options"
+        aria-label={_("Global options")}
         data-state={isOpen ? "visible" : "hidden"}
       >
         <header className="split justify-between">
-          <h2>Options</h2>
+          <h2>
+            {/* TRANSLATORS: sidebar header */}
+            {_("Options")}
+          </h2>
 
           <button
             onClick={close}
             ref={closeButtonRef}
             className="plain-control"
-            aria-label="Hide navigation and other options"
+            aria-label={_("Hide navigation and other options")}
           >
             <Icon name="menu_open" data-variant="flip-X" onClick={close} />
           </button>
@@ -167,7 +171,9 @@ export default function Sidebar ({ children }) {
 
         <footer className="split justify-between" data-state="reversed">
           <a onClick={close}>
-            Close <Icon size="16" name="menu_open" data-variant="flip-X" />
+            {/* TRANSLATORS: button label */}
+            {_("Close")}
+            <Icon size="16" name="menu_open" data-variant="flip-X" />
           </a>
           { targetInfo }
         </footer>
diff --git a/web/src/components/core/Terminal.jsx b/web/src/components/core/Terminal.jsx
index 42e648240f..c07e26ad2d 100644
--- a/web/src/components/core/Terminal.jsx
+++ b/web/src/components/core/Terminal.jsx
@@ -21,6 +21,7 @@
 
 import React, { useState } from "react";
 import { Popup } from "~/components/core";
+import { _ } from "~/i18n";
 
 export default function Terminal({ onCloseCallback }) {
   // the popup is visible
@@ -44,7 +45,7 @@ export default function Terminal({ onCloseCallback }) {
       <iframe className="vertically-centered" src="/cockpit/@localhost/system/terminal.html" />
 
       <Popup.Actions>
-        <Popup.Confirm onClick={close} autoFocus>Close</Popup.Confirm>
+        <Popup.Confirm onClick={close} autoFocus>{_("Close")}</Popup.Confirm>
       </Popup.Actions>
     </Popup>
   );
diff --git a/web/src/components/core/ValidationErrors.jsx b/web/src/components/core/ValidationErrors.jsx
index 443ad954d5..9342a18e68 100644
--- a/web/src/components/core/ValidationErrors.jsx
+++ b/web/src/components/core/ValidationErrors.jsx
@@ -31,6 +31,9 @@ import {
 } from "@patternfly/react-core";
 
 import { Icon } from '~/components/layout';
+import { _, n_ } from "~/i18n";
+
+import cockpit from "~/lib/cockpit";
 
 /**
  * @param {import("~/client/mixins").ValidationError[]} errors - Validation errors
@@ -58,7 +61,7 @@ const popoverContent = (errors) => {
  * @param {string} props.title - A title for the Popover
  * @param {import("~/client/mixins").ValidationError[]} props.errors - Validation errors
  */
-const ValidationErrors = ({ title = "Errors", errors }) => {
+const ValidationErrors = ({ title = _("Errors"), errors }) => {
   const [popoverVisible, setPopoverVisible] = useState(false);
 
   if (!errors || errors.length === 0) return null;
@@ -78,14 +81,20 @@ const ValidationErrors = ({ title = "Errors", errors }) => {
             className="plain-control color-warn"
             onClick={() => setPopoverVisible(true)}
           >
-            { warningIcon } {`${errors.length} errors found`}
+            { warningIcon } {
+              cockpit.format(
+                // TRANSLATORS: $0 is replaced with the number of errors found
+                n_("$0 error found", "$0 errors found", errors.length),
+                errors.length
+              )
+            }
           </button>
           <Popover
             isVisible={popoverVisible}
             position="right"
             shouldClose={() => setPopoverVisible(false)}
             shouldOpen={() => setPopoverVisible(true)}
-            aria-label="Basic popover"
+            aria-label={_("Basic popover")}
             headerContent={title}
             bodyContent={popoverContent(errors)}
           >
diff --git a/web/src/components/l10n/L10nPage.jsx b/web/src/components/l10n/L10nPage.jsx
index f00c567b8f..19adc21bc6 100644
--- a/web/src/components/l10n/L10nPage.jsx
+++ b/web/src/components/l10n/L10nPage.jsx
@@ -22,6 +22,7 @@
 import React, { useState, useEffect } from "react";
 import { useCancellablePromise } from "~/utils";
 import { useInstallerClient } from "~/context/installer";
+import { _ } from "~/i18n";
 
 import {
   Form,
@@ -68,7 +69,7 @@ export default function LanguageSelector() {
       <FormGroup fieldId="language" label="Language">
         <FormSelect
           id="language"
-          aria-label="language"
+          aria-label={_("language")}
           value={selected}
           onChange={v => updateState({ language: v })}
         >
@@ -79,7 +80,8 @@ export default function LanguageSelector() {
   };
 
   return (
-    <Page title="Localization" icon="translate" actionCallback={accept}>
+    // TRANSLATORS: page header
+    <Page title={_("Localization")} icon="translate" actionCallback={accept}>
       <Form id="language-selector">
         <LanguageField selected={language} />
       </Form>
diff --git a/web/src/components/layout/DBusError.jsx b/web/src/components/layout/DBusError.jsx
index 130fbf7848..0d6b9bf01c 100644
--- a/web/src/components/layout/DBusError.jsx
+++ b/web/src/components/layout/DBusError.jsx
@@ -21,6 +21,7 @@
 
 import React from "react";
 import { Button, Title, EmptyState, EmptyStateIcon, EmptyStateBody } from "@patternfly/react-core";
+import { _ } from "~/i18n";
 
 import {
   Center,
@@ -33,24 +34,26 @@ import {
 // TODO: an example
 const ReloadAction = () => (
   <Button isLarge variant="primary" onClick={() => location.reload()}>
-    Reload
+    {/* TRANSLATORS: button label */}
+    {_("Reload")}
   </Button>
 );
 
 function DBusError() {
   return (
     <Center>
-      <PageTitle>D-Bus Error</PageTitle>
+      {/* TRANSLATORS: page title */}
+      <PageTitle>{_("D-Bus Error")}</PageTitle>
       <PageIcon><Icon name="problem" /></PageIcon>
       <MainActions><ReloadAction /></MainActions>
 
       <EmptyState>
         <EmptyStateIcon icon={({ ...props }) => <Icon name="error" { ...props } />} />
         <Title headingLevel="h2" size="4xl">
-          Cannot connect to D-Bus
+          {_("Cannot connect to D-Bus")}
         </Title>
         <EmptyStateBody>
-          Could not connect to the D-Bus service. Please, check whether it is running.
+          {_("Could not connect to the D-Bus service. Please, check whether it is running.")}
         </EmptyStateBody>
       </EmptyState>
     </Center>
diff --git a/web/src/components/layout/Loading.jsx b/web/src/components/layout/Loading.jsx
index ac111694ab..a0ecc637bd 100644
--- a/web/src/components/layout/Loading.jsx
+++ b/web/src/components/layout/Loading.jsx
@@ -23,8 +23,9 @@ import React from "react";
 import { Title, EmptyState, EmptyStateIcon } from "@patternfly/react-core";
 
 import { Center, Icon } from "~/components/layout";
+import { _ } from "~/i18n";
 
-function Loading({ text = "Loading installation environment, please wait." }) {
+function Loading({ text = _("Loading installation environment, please wait.") }) {
   return (
     <Center>
       <EmptyState>
diff --git a/web/src/components/network/AddressesDataList.jsx b/web/src/components/network/AddressesDataList.jsx
index 68be2a88ae..846f56eeed 100644
--- a/web/src/components/network/AddressesDataList.jsx
+++ b/web/src/components/network/AddressesDataList.jsx
@@ -38,6 +38,7 @@ import {
 
 import { FormLabel } from "~/components/core";
 import { IpAddressInput, IpPrefixInput } from "~/components/network";
+import { _ } from "~/i18n";
 
 let index = 0;
 
@@ -76,7 +77,8 @@ export default function AddressesDataList({
       return (
         <DataListAction>
           <Button isSmall variant="link" className="remove-link" onClick={() => deleteAddress(id)}>
-            Remove
+            {/* TRANSLATORS: button label */}
+            {_("Remove")}
           </Button>
         </DataListAction>
       );
@@ -87,16 +89,18 @@ export default function AddressesDataList({
         <IpAddressInput
           defaultValue={address}
           onChange={value => updateAddress(id, "address", value)}
-          placeholder="IP Address"
-          aria-label="IP Address"
+          // TRANSLATORS: input field name
+          placeholder={_("IP Address")}
+          aria-label={_("IP Address")}
         />
       </DataListCell>,
       <DataListCell key={`address-${id}-prefix`}>
         <IpPrefixInput
           defaultValue={prefix}
           onChange={value => updateAddress(id, "prefix", value)}
-          placeholder="Prefix length or netmask"
-          aria-label="Prefix length or netmask"
+          // TRANSLATORS: input field name
+          placeholder={_("Prefix length or netmask")}
+          aria-label={_("Prefix length or netmask")}
         />
       </DataListCell>
     ];
@@ -111,17 +115,18 @@ export default function AddressesDataList({
     );
   };
 
-  const newAddressButtonText = addresses.length ? "Add another address" : "Add an address";
+  // TRANSLATORS: button label
+  const newAddressButtonText = addresses.length ? _("Add another address") : _("Add an address");
 
   return (
     <>
       <div className="split justify-between">
-        <FormLabel isRequired={!allowEmpty}>Addresses</FormLabel>
+        <FormLabel isRequired={!allowEmpty}>{_("Addresses")}</FormLabel>
         <Button isSmall variant="secondary" onClick={addAddress}>
           {newAddressButtonText}
         </Button>
       </div>
-      <DataList isCompact gridBreakpoint="none" title="Addresses data list">
+      <DataList isCompact gridBreakpoint="none" title={_("Addresses data list")}>
         {addresses.map(address => renderAddress(address))}
       </DataList>
     </>
diff --git a/web/src/components/network/ConnectionsTable.jsx b/web/src/components/network/ConnectionsTable.jsx
index 1df3422707..a7c0f00e78 100644
--- a/web/src/components/network/ConnectionsTable.jsx
+++ b/web/src/components/network/ConnectionsTable.jsx
@@ -24,6 +24,9 @@ import { TableComposable, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-tab
 import { RowActions } from "~/components/core";
 import { Icon } from "~/components/layout";
 import { formatIp } from "~/client/network/utils";
+import { _ } from "~/i18n";
+
+import cockpit from "~/lib/cockpit";
 
 /**
  * @typedef {import("~/client/network/model").Connection} Connection
@@ -50,8 +53,10 @@ export default function ConnectionsTable ({
     <TableComposable variant="compact">
       <Thead>
         <Tr>
-          <Th width={25}>Name</Th>
-          <Th>Ip addresses</Th>
+          {/* TRANSLATORS: table header */}
+          <Th width={25}>{_("Name")}</Th>
+          {/* TRANSLATORS: table header */}
+          <Th>{_("IP addresses")}</Th>
           <Th />
         </Tr>
       </Thead>
@@ -59,13 +64,17 @@ export default function ConnectionsTable ({
         { connections.map(connection => {
           const actions = [
             {
-              title: "Edit",
-              "aria-label": `Edit connection ${connection.name}`,
+              title: _("Edit"),
+              "aria-label":
+                // TRANSLATORS: $0 is replaced by a network connection name
+                cockpit.format(_("Edit connection $0"), connection.name),
               onClick: () => onEdit(connection)
             },
             typeof onForget === 'function' && {
-              title: "Forget",
-              "aria-label": `Forget connection ${connection.name}`,
+              title: _("Forget"),
+              "aria-label":
+                // TRANSLATORS: $0 is replaced by a network connection name
+                cockpit.format(_("Forget connection $0"), connection.name),
               className: "danger-action",
               icon: <Icon name="delete" size="24" />,
               onClick: () => onForget(connection)
@@ -75,11 +84,12 @@ export default function ConnectionsTable ({
           return (
             <Tr key={connection.id}>
               <Td dataLabel="Name">{connection.name}</Td>
-              <Td dataLabel="Ip addresses">{connection.addresses.map(formatIp).join(", ")}</Td>
+              <Td dataLabel="IP addresses">{connection.addresses.map(formatIp).join(", ")}</Td>
               <Td isActionCell>
                 <RowActions
                   id={`actions-for-connection-${connection.id}`}
-                  aria-label={`Actions for connection ${connection.name}`}
+                  // TRANSLATORS: $0 is replaced by a network connection name
+                  aria-label={cockpit.format(_("Actions for connection $0"), connection.name)}
                   actions={actions}
                   connection={connection}
                 />
diff --git a/web/src/components/network/DnsDataList.jsx b/web/src/components/network/DnsDataList.jsx
index a2c10f01d5..bc181ba0de 100644
--- a/web/src/components/network/DnsDataList.jsx
+++ b/web/src/components/network/DnsDataList.jsx
@@ -38,6 +38,7 @@ import {
 
 import { FormLabel } from "~/components/core";
 import { IpAddressInput } from "~/components/network";
+import { _ } from "~/i18n";
 
 let index = 0;
 
@@ -73,15 +74,17 @@ export default function DnsDataList({ servers: originalServers, updateDnsServers
               <IpAddressInput
                 defaultValue={address}
                 onChange={value => updateServer(id, "address", value)}
-                placeholder="Server IP"
-                aria-label="Server IP"
+                // TRANSLATORS: input field name
+                placeholder={_("Server IP")}
+                aria-label={_("Server IP")}
               />
             </DataListCell>
           ]}
           />
           <DataListAction>
             <Button isSmall variant="link" className="remove-link" onClick={() => deleteServer(id)}>
-              Remove
+              {/* TRANSLATORS: button label */}
+              {_("Remove")}
             </Button>
           </DataListAction>
         </DataListItemRow>
@@ -89,12 +92,13 @@ export default function DnsDataList({ servers: originalServers, updateDnsServers
     );
   };
 
-  const newDnsButtonText = servers.length ? "Add another DNS" : "Add DNS";
+  // TRANSLATORS: button label
+  const newDnsButtonText = servers.length ? _("Add another DNS") : _("Add DNS");
 
   return (
     <>
       <div className="split justify-between">
-        <FormLabel>DNS</FormLabel>
+        <FormLabel>{_("DNS")}</FormLabel>
         <Button isSmall variant="secondary" onClick={addServer}>
           {newDnsButtonText}
         </Button>
diff --git a/web/src/components/network/IpAddressInput.jsx b/web/src/components/network/IpAddressInput.jsx
index 57c3578622..6572265f65 100644
--- a/web/src/components/network/IpAddressInput.jsx
+++ b/web/src/components/network/IpAddressInput.jsx
@@ -22,13 +22,15 @@
 import React, { useState } from 'react';
 import { isValidIp } from '~/client/network/utils';
 import { TextInput, ValidatedOptions } from '@patternfly/react-core';
+import { _ } from "~/i18n";
 
 const IpAddressInput = ({ placeholder, onError = () => null, ...props }) => {
   const [validated, setValidated] = useState("default");
 
   return (
     <TextInput
-      placeholder={ placeholder || "IP Address"}
+      // TRANSLATORS: input field name
+      placeholder={ placeholder || _("IP Address")}
       validated={ValidatedOptions[validated]}
       onFocus={() => setValidated("default")}
       onBlur={e => {
diff --git a/web/src/components/network/IpPrefixInput.jsx b/web/src/components/network/IpPrefixInput.jsx
index 231801eba0..09c98178b5 100644
--- a/web/src/components/network/IpPrefixInput.jsx
+++ b/web/src/components/network/IpPrefixInput.jsx
@@ -22,13 +22,15 @@
 import React, { useState } from 'react';
 import { isValidIpPrefix } from '~/client/network/utils';
 import { TextInput, ValidatedOptions } from '@patternfly/react-core';
+import { _ } from "~/i18n";
 
 const IpPrefixInput = ({ placeholder, onError = () => null, ...props }) => {
   const [validated, setValidated] = useState("default");
 
   return (
     <TextInput
-      placeholder={ placeholder || "IP prefix or netmask"}
+      // TRANSLATORS: input field name
+      placeholder={ placeholder || _("IP prefix or netmask")}
       validated={ValidatedOptions[validated]}
       onFocus={() => setValidated("default")}
       onBlur={e => {
diff --git a/web/src/components/network/IpSettingsForm.jsx b/web/src/components/network/IpSettingsForm.jsx
index 44753ec22c..42b6d1db45 100644
--- a/web/src/components/network/IpSettingsForm.jsx
+++ b/web/src/components/network/IpSettingsForm.jsx
@@ -25,6 +25,9 @@ import { HelperText, HelperTextItem, Form, FormGroup, FormSelect, FormSelectOpti
 import { useInstallerClient } from "~/context/installer";
 import { Popup } from "~/components/core";
 import { AddressesDataList, DnsDataList } from "~/components/network";
+import { _ } from "~/i18n";
+
+import cockpit from "~/lib/cockpit";
 
 const METHODS = {
   MANUAL: "manual",
@@ -81,7 +84,8 @@ export default function IpSettingsForm({ connection, onClose }) {
     const nextErrors = {};
 
     if (!usingDHCP(method) && sanitizedAddresses.length === 0) {
-      nextErrors.method = "At least one address must be provided for selected mode";
+      // TRANSLATORS: error message
+      nextErrors.method = _("At least one address must be provided for selected mode");
     }
 
     setErrors(nextErrors);
@@ -122,21 +126,24 @@ export default function IpSettingsForm({ connection, onClose }) {
     );
   };
 
+  // TRANSLATORS: manual network configuration mode with a static IP address
   return (
-    <Popup isOpen title={`Edit "${connection.name}" connection`}>
+    <Popup isOpen title={cockpit.format(_("Edit $0 connection"), connection.name)}>
       <Form id="edit-connection" onSubmit={onSubmit}>
-        <FormGroup fieldId="method" label="Mode" isRequired>
+        <FormGroup fieldId="method" label={_("Mode")} isRequired>
           <FormSelect
             id="method"
             name="method"
-            aria-label="Mode"
+            // TRANSLATORS: network connection mode (automatic via DHCP or manual with static IP)
+            aria-label={_("Mode")}
             value={method}
-            label="Mode"
+            label={_("Mode")}
             onChange={changeMethod}
             validated={validatedAttrValue("method")}
           >
-            <FormSelectOption key="auto" value={METHODS.AUTO} label="Automatic (DHCP)" />
-            <FormSelectOption key="manual" value={METHODS.MANUAL} label="Manual" />
+            <FormSelectOption key="auto" value={METHODS.AUTO} label={_("Automatic (DHCP)")} />
+            {/* TRANSLATORS: manual network configuration mode with a static IP address */}
+            <FormSelectOption key="manual" value={METHODS.MANUAL} label={_("Manual")} />
           </FormSelect>
           {renderError("method")}
         </FormGroup>
@@ -151,9 +158,10 @@ export default function IpSettingsForm({ connection, onClose }) {
           <TextInput
             id="gateway"
             name="gateway"
-            aria-label="Gateway"
+            aria-label={_("Gateway")}
             value={gateway}
-            label="Gateway"
+            // TRANSLATORS: network gateway configuration
+            label={_("Gateway")}
             isDisabled={addresses.length === 0}
             onChange={setGateway}
           />
diff --git a/web/src/components/network/NetworkPage.jsx b/web/src/components/network/NetworkPage.jsx
index f643f2a76c..74f10af0e4 100644
--- a/web/src/components/network/NetworkPage.jsx
+++ b/web/src/components/network/NetworkPage.jsx
@@ -26,6 +26,7 @@ import { useInstallerClient } from "~/context/installer";
 import { ConnectionTypes, NetworkEventTypes } from "~/client/network";
 import { If, Page, Section } from "~/components/core";
 import { ConnectionsTable, IpSettingsForm, NetworkPageOptions, WifiSelector } from "~/components/network";
+import { _ } from "~/i18n";
 
 /**
  * Internal component for displaying info when none wire connection is found
@@ -49,12 +50,12 @@ const NoWiredConnections = () => {
  */
 const NoWifiConnections = ({ wifiScanSupported, openWifiSelector }) => {
   const message = wifiScanSupported
-    ? "The system has not been configured for connecting to a WiFi network yet."
-    : "The system does not support WiFi connections, probably because of missing or disabled hardware.";
+    ? _("The system has not been configured for connecting to a WiFi network yet.")
+    : _("The system does not support WiFi connections, probably because of missing or disabled hardware.");
 
   return (
     <div className="stack">
-      <div className="bold">No WiFi connections found</div>
+      <div className="bold">{_("No WiFi connections found")}</div>
       <div>{message}</div>
       <If
         condition={wifiScanSupported}
@@ -65,7 +66,8 @@ const NoWifiConnections = ({ wifiScanSupported, openWifiSelector }) => {
               onClick={openWifiSelector}
               icon={<Icon name="wifi_find" size="24" />}
             >
-              Connect to a Wi-Fi network
+              {/* TRANSLATORS: button label */}
+              {_("Connect to a Wi-Fi network")}
             </Button>
           </>
         }
@@ -164,12 +166,15 @@ export default function NetworkPage() {
   };
 
   return (
-    <Page title="Network" icon="settings_ethernet" actionLabel="Back" actionVariant="secondary">
-      <Section title="Wired networks" icon="lan">
+    // TRANSLATORS: page title
+    <Page title={_("Network")} icon="settings_ethernet" actionLabel="Back" actionVariant="secondary">
+      { /* TRANSLATORS: page section */ }
+      <Section title={_("Wired networks")} icon="lan">
         { ready ? <WiredConnections /> : <Skeleton /> }
       </Section>
 
-      <Section title="WiFi networks" icon="wifi">
+      { /* TRANSLATORS: page section */ }
+      <Section title={_("WiFi networks")} icon="wifi">
         { ready ? <WifiConnections /> : <Skeleton /> }
       </Section>
 
diff --git a/web/src/components/network/NetworkPageOptions.jsx b/web/src/components/network/NetworkPageOptions.jsx
index b27cb1d4ab..e9d91f5fc5 100644
--- a/web/src/components/network/NetworkPageOptions.jsx
+++ b/web/src/components/network/NetworkPageOptions.jsx
@@ -21,6 +21,7 @@
 
 import React from "react";
 import { PageOptions } from "~/components/core";
+import { _ } from "~/i18n";
 
 /**
  * Component for rendering the options available from Network page
@@ -41,7 +42,7 @@ export default function NetworkPageOptions ({
   return (
     <PageOptions>
       <PageOptions.Item key="open-wifi-selector" onClick={openWifiSelector}>
-        <>Connect to a Wi-Fi network</>
+        <>{_("Connect to a Wi-Fi network")}</>
       </PageOptions.Item>
     </PageOptions>
   );
diff --git a/web/src/components/network/WifiConnectionForm.jsx b/web/src/components/network/WifiConnectionForm.jsx
index c0e761e900..ef191bcc06 100644
--- a/web/src/components/network/WifiConnectionForm.jsx
+++ b/web/src/components/network/WifiConnectionForm.jsx
@@ -31,14 +31,17 @@ import {
   TextInput
 } from "@patternfly/react-core";
 import { useInstallerClient } from "~/context/installer";
+import { _ } from "~/i18n";
 
 /*
 * FIXME: it should be moved to the SecurityProtocols enum that already exists or to a class based
 * enum pattern in the network_manager adapter.
 */
 const security_options = [
-  { value: "", label: "None" },
-  { value: "wpa-psk", label: "WPA & WPA2 Personal" }
+  // TRANSLATORS: WiFi authentication mode
+  { value: "", label: _("None") },
+  // TRANSLATORS: WiFi authentication mode
+  { value: "wpa-psk", label: _("WPA & WPA2 Personal") }
 ];
 
 const selectorOptions = security_options.map(security => (
@@ -84,26 +87,29 @@ export default function WifiConnectionForm({ network, onCancel, onSubmitCallback
   return (
     <Form id={`${ssid}-connection-form`} onSubmit={accept} innerRef={formRef}>
       { error &&
-        <Alert variant="warning" isInline title="Something went wrong">
-          <p>Please, review provided settings and try again.</p>
+        <Alert variant="warning" isInline title={_("Something went wrong")}>
+          <p>{_("Please, review provided settings and try again.")}</p>
         </Alert> }
 
       { network?.hidden &&
-        <FormGroup fieldId="ssid" label="SSID">
+        // TRANSLATORS: SSID (Wifi network name) configuration
+        <FormGroup fieldId="ssid" label={_("SSID")}>
           <TextInput
             id="ssid"
             name="ssid"
-            label="SSID"
+            label={_("SSID")}
             aria-label="ssid"
             value={ssid}
             onChange={setSsid}
           />
         </FormGroup> }
 
-      <FormGroup fieldId="security" label="Security">
+      { /* TRANSLATORS: Wifi security configuration (password protected or not) */ }
+      <FormGroup fieldId="security" label={_("Security")}>
         <FormSelect
           id="security"
-          aria-label="security"
+          // TRANSLATORS: Wifi security configuration (password protected or not)
+          aria-label={_("security")}
           value={security}
           onChange={setSecurity}
         >
@@ -111,22 +117,25 @@ export default function WifiConnectionForm({ network, onCancel, onSubmitCallback
         </FormSelect>
       </FormGroup>
       { security === "wpa-psk" &&
-        <FormGroup fieldId="password" label="WPA Password">
+        // TRANSLATORS: WiFi password
+        <FormGroup fieldId="password" label={_("WPA Password")}>
           <TextInput
             id="password"
             name="password"
-            aria-label="Password"
+            aria-label={_("Password")}
             value={password}
-            label="Password"
+            label={_("Password")}
             type="password"
             onChange={setPassword}
           />
         </FormGroup> }
       <ActionGroup>
         <Button type="submit" variant="primary" isLoading={isConnecting} isDisabled={isConnecting}>
-          Connect
+          {/* TRANSLATORS: button label, connect to a WiFi network */}
+          {_("Connect")}
         </Button>
-        <Button variant="link" isDisabled={isConnecting} onClick={onCancel}>Cancel</Button>
+        {/* TRANSLATORS: button label */}
+        <Button variant="link" isDisabled={isConnecting} onClick={onCancel}>{_("Cancel")}</Button>
       </ActionGroup>
     </Form>
   );
diff --git a/web/src/components/network/WifiHiddenNetworkForm.jsx b/web/src/components/network/WifiHiddenNetworkForm.jsx
index 2eb6e7d3b8..a20b16b11e 100644
--- a/web/src/components/network/WifiHiddenNetworkForm.jsx
+++ b/web/src/components/network/WifiHiddenNetworkForm.jsx
@@ -24,6 +24,7 @@ import React from "react";
 import { Button } from "@patternfly/react-core";
 
 import WifiConnectionForm from "./WifiConnectionForm";
+import { _ } from "~/i18n";
 
 /**
  * Component to render a form for connecting to a hidden Wi-Fi Network
@@ -45,7 +46,8 @@ function WifiHiddenNetworkForm({ network, visible, beforeDisplaying, beforeHidin
         /> }
       { !visible &&
         <Button variant="link" className="horizontally-centered" onClick={beforeDisplaying}>
-          Connect to hidden network
+          {/* TRANSLATORS: button label */}
+          {_("Connect to hidden network")}
         </Button> }
     </>
   );
diff --git a/web/src/components/network/WifiNetworkListItem.jsx b/web/src/components/network/WifiNetworkListItem.jsx
index cd4185d4f8..73374efdb4 100644
--- a/web/src/components/network/WifiNetworkListItem.jsx
+++ b/web/src/components/network/WifiNetworkListItem.jsx
@@ -31,6 +31,9 @@ import { ConnectionState } from "~/client/network/model";
 
 import { Icon } from "~/components/layout";
 import { WifiNetworkMenu, WifiConnectionForm } from "~/components/network";
+import { _ } from "~/i18n";
+
+import cockpit from "~/lib/cockpit";
 
 const networkState = (state) => {
   switch (state) {
@@ -87,9 +90,10 @@ function WifiNetworkListItem ({ network, isSelected, isActive, onSelect, onCance
           onClick={onSelect}
         />
         <div className="split">
-          {showSpinner && <Spinner isSVG size="md" aria-label={`${network.ssid} connection is waiting for an state change`} /> }
+          {/* TRANSLATORS: $0 is replaced by a WiFi network name */}
+          {showSpinner && <Spinner isSVG size="md" aria-label={cockpit.format(_("$0 connection is waiting for an state change"), network.ssid)} /> }
           <Text component="small" className="keep-words">
-            { showSpinner && !network.connection && "Connecting" }
+            { showSpinner && !network.connection && _("Connecting") }
             { networkState(network.connection?.state)}
           </Text>
           { network.settings &&
diff --git a/web/src/components/network/WifiNetworkMenu.jsx b/web/src/components/network/WifiNetworkMenu.jsx
index c71ef75b38..0ba0127383 100644
--- a/web/src/components/network/WifiNetworkMenu.jsx
+++ b/web/src/components/network/WifiNetworkMenu.jsx
@@ -24,6 +24,7 @@ import { DropdownItem } from "@patternfly/react-core";
 import { Icon } from "~/components/layout";
 import { KebabMenu } from "~/components/core";
 import { useInstallerClient } from "~/context/installer";
+import { _ } from "~/i18n";
 
 export default function WifiNetworkMenu({ settings, position = "right" }) {
   const client = useInstallerClient();
@@ -40,7 +41,8 @@ export default function WifiNetworkMenu({ settings, position = "right" }) {
           icon={<Icon name="delete" size="24" />}
           className="danger-action"
         >
-          Forget network
+          {/* TRANSLATORS: menu label, remove the selected WiFi network settings */}
+          {_("Forget network")}
         </DropdownItem>
       ]}
     />
diff --git a/web/src/components/network/WifiSelector.jsx b/web/src/components/network/WifiSelector.jsx
index 78d74b4875..a839504f79 100644
--- a/web/src/components/network/WifiSelector.jsx
+++ b/web/src/components/network/WifiSelector.jsx
@@ -25,6 +25,7 @@ import { useInstallerClient } from "~/context/installer";
 import { NetworkEventTypes } from "~/client/network";
 import { Popup } from "~/components/core";
 import { WifiNetworksList } from "~/components/network";
+import { _ } from "~/i18n";
 
 const networksFromValues = (networks) => Object.values(networks).flat();
 const baseHiddenNetwork = { ssid: undefined, hidden: true };
@@ -130,7 +131,7 @@ function WifiSelector({ isOpen = false, onClose }) {
   });
 
   return (
-    <Popup isOpen={isOpen} title="Connect to a Wi-Fi network">
+    <Popup isOpen={isOpen} title={_("Connect to a Wi-Fi network")}>
       <WifiNetworksList
         networks={networksFromValues(networks)}
         hiddenNetwork={baseHiddenNetwork}
@@ -147,7 +148,7 @@ function WifiSelector({ isOpen = false, onClose }) {
         onCancelSelectionCallback={() => switchSelectedNetwork(activeNetwork) }
       />
       <Popup.Actions>
-        <Popup.SecondaryAction onClick={onClose}>Close</Popup.SecondaryAction>
+        <Popup.SecondaryAction onClick={onClose}>{_("Close")}</Popup.SecondaryAction>
       </Popup.Actions>
     </Popup>
   );
diff --git a/web/src/i18n.js b/web/src/i18n.js
index 275edb6663..c3bbd5d77e 100644
--- a/web/src/i18n.js
+++ b/web/src/i18n.js
@@ -69,8 +69,10 @@ const n_ = (str1, strN, n) => cockpit.ngettext(str1, strN, n);
  * @example <caption>Constants</caption>
  *   // ERROR_MSG will not be translated, but the string will be found
  *   // by gettext when creating the POT file
- *   const ERROR_MSG = N_("Download failed");
- *   const OK_MSG = N_("Success");
+ *   const RESULT = {
+ *     ERROR: N_("Download failed"),
+ *     OK: N_("Success")
+ *   };
  *
  *   // assume that "result" contains one of the constants above
  *   const result = ...;