diff --git a/web/src/components/system/HostnamePage.test.tsx b/web/src/components/system/HostnamePage.test.tsx
index 31dce95c16..6b0602c483 100644
--- a/web/src/components/system/HostnamePage.test.tsx
+++ b/web/src/components/system/HostnamePage.test.tsx
@@ -100,7 +100,7 @@ describe("HostnamePage", () => {
         static: "",
       });
       screen.getByText("Success alert:");
-      screen.getByText("Hostname successfully updated.");
+      screen.getByText("Hostname successfully updated");
     });
   });
 
@@ -135,7 +135,7 @@ describe("HostnamePage", () => {
         static: "testing-server",
       });
       screen.getByText("Success alert:");
-      screen.getByText("Hostname successfully updated.");
+      screen.getByText("Hostname successfully updated");
     });
 
     it("renders an error when static hostname is selected but left empty", async () => {
@@ -163,7 +163,7 @@ describe("HostnamePage", () => {
       });
 
       screen.getByText("Warning alert:");
-      screen.getByText(/Something went wrong/);
+      screen.getByText(/Hostname could not be updated/);
     });
   });
 
diff --git a/web/src/components/system/HostnamePage.tsx b/web/src/components/system/HostnamePage.tsx
index e6e5455c74..e1896b4b20 100644
--- a/web/src/components/system/HostnamePage.tsx
+++ b/web/src/components/system/HostnamePage.tsx
@@ -46,6 +46,7 @@ export default function HostnamePage() {
   const hasTransientHostname = isEmpty(staticHostname);
   const [success, setSuccess] = useState<string | null>(null);
   const [error, setError] = useState<string | null>(null);
+  const [requestError, setRequestError] = useState<string | null>(null);
   const [settingHostname, setSettingHostname] = useState(!hasTransientHostname);
   const [hostname, setHostname] = useState(staticHostname);
 
@@ -55,6 +56,7 @@ export default function HostnamePage() {
   const submit = async (e: SyntheticEvent) => {
     e.preventDefault();
     setError(null);
+    setRequestError(null);
     setSuccess(null);
 
     if (settingHostname && isEmpty(hostname)) {
@@ -63,10 +65,8 @@ export default function HostnamePage() {
     }
 
     updateHostname({ static: settingHostname ? hostname : "" })
-      .then(() => setSuccess("Hostname successfully updated."))
-      .catch(() =>
-        setError("Something went wrong while updating the hostname. Please, try again."),
-      );
+      .then(() => setSuccess(_("Hostname successfully updated")))
+      .catch(() => setRequestError(_("Hostname could not be updated")));
   };
 
   // TRANSLATORS: The title for a notification shown when the static hostname
@@ -99,6 +99,7 @@ export default function HostnamePage() {
 
         <Form id="hostnameForm" onSubmit={submit}>
           {success && <Alert variant="success" isInline title={success} />}
+          {requestError && <Alert variant="warning" isInline title={requestError} />}
           {error && (
             <Alert variant="warning" isInline title={_("Check the following before continuing")}>
               {error}