diff --git a/web/mock/api-config.mock.ts b/web/mock/api-config.mock.ts
index 315600c1d..6e50b9aac 100644
--- a/web/mock/api-config.mock.ts
+++ b/web/mock/api-config.mock.ts
@@ -1,5 +1,13 @@
+import { JsonObject } from 'common/jsonTypes';
 import { defineMock } from 'vite-plugin-mock-dev-server'
 
+let hostname = "localhost";
+let authenticationSettings: JsonObject = {
+  "authEnabled": false,
+  "username": "",
+  "password": ""
+};
+
 export default defineMock(
   [
     {
@@ -29,6 +37,44 @@ export default defineMock(
       },
       delay: 600,
     },
+    {
+      url: '/api/config/system/hostname',
+      response(req, resp) {
+        if (req.method === 'GET') {
+          const doc = {
+            "config": {
+              "value": hostname
+            },
+            "schema": {},
+            "description": "The hostname of the device."
+          };
+          resp.end(JSON.stringify(doc));
+        } else if (req.method === 'POST') {
+          const doc = req.body;
+          console.log(doc);
+          hostname = doc.value;
+          resp.end();
+        }
+      }
+    },
+    {
+      url: '/api/config/system/authentication',
+      response(req, resp) {
+        if (req.method === 'GET') {
+          const doc = {
+            "config": authenticationSettings,
+            "schema": {},
+            "description": "Auth."
+          };
+          resp.end(JSON.stringify(doc));
+        } else if (req.method === 'POST') {
+          const doc = req.body;
+          console.log(doc);
+          authenticationSettings = doc;
+          resp.end();
+        }
+      }
+    },
     {
       url: '/api/config/System/WiFi Settings',
       method: 'GET',
diff --git a/web/src/common/configAPIClient.ts b/web/src/common/configAPIClient.ts
index 9850c05c8..b20f15be7 100644
--- a/web/src/common/configAPIClient.ts
+++ b/web/src/common/configAPIClient.ts
@@ -48,7 +48,7 @@ export async function saveConfigData(
   data: string,
   errorHandler: (e: Error) => void,
   contentType: string = "application/json",
-): Promise<void> {
+): Promise<boolean> {
   try {
     const response = await fetch(APP_CONFIG.config_path + path, {
       method: "POST",
@@ -59,8 +59,11 @@ export async function saveConfigData(
     });
     if (!response.ok) {
       errorHandler(Error(`HTTP Error ${response.status} ${response.statusText}`));
+      return false;
     }
   } catch (e) {
     errorHandler(Error(`Error saving config data to server: ${e.message}`));
+    return false;
   }
+  return true;
 }
diff --git a/web/src/components/Form.tsx b/web/src/components/Form.tsx
index 77db57991..3fa8157d5 100644
--- a/web/src/components/Form.tsx
+++ b/web/src/components/Form.tsx
@@ -16,12 +16,11 @@ interface FormInputProps {
   step?: number;
   disabled?: boolean;
   checked?: boolean;
-  onchange?: (e: JSX.TargetedEvent<HTMLInputElement, Event>) => void;
+  onInput?: (e: JSX.TargetedEvent<HTMLInputElement|HTMLTextAreaElement, Event>) => void;
 }
 
 export function FormInput(props: FormInputProps): JSX.Element {
-  const { isInputDirty, setInputDirty } =
-    useContext<InputDirtyContextType>(InputDirtyContext);
+
   return (
     <div>
       <label className="form-label" htmlFor={props.id}>
@@ -31,13 +30,11 @@ export function FormInput(props: FormInputProps): JSX.Element {
       {props.as === "textarea" ? (
         <textarea
           className="form-control"
-          onChange={() => setInputDirty(true)}
           {...props}
         />
       ) : (
         <input
           className="form-control"
-          onChange={() => setInputDirty(true)}
           {...props}
         />
       )}
@@ -51,14 +48,11 @@ interface FormFloatInputProps {
 }
 
 export function FormFloatInput(props: FormFloatInputProps): JSX.Element {
-  const { isInputDirty, setInputDirty } =
-    useContext<InputDirtyContextType>(InputDirtyContext);
 
   return (
     <div className="form-floating mb-3">
       <input
         className="form-control"
-        onChange={() => setInputDirty(true)}
         {...props}
       />
       <label className="form-label" htmlFor={props.id}>
@@ -75,8 +69,6 @@ interface FormSelectProps {
 }
 
 export function FormSelect(props: FormSelectProps): JSX.Element {
-  const { isInputDirty, setInputDirty } =
-    useContext<InputDirtyContextType>(InputDirtyContext);
 
   return (
     <div className="mb-3">
@@ -85,7 +77,6 @@ export function FormSelect(props: FormSelectProps): JSX.Element {
       </label>
       <select
         className="form-select"
-        onChange={() => setInputDirty(true)}
         {...props}
       />
       {props.children}
@@ -99,18 +90,15 @@ interface FormCheckProps {
   type: string;
   checked: boolean;
   label: string;
-  onchange: (e: JSX.TargetedEvent<HTMLInputElement, Event>) => void;
+  handleValueChange: (value: string) => void;
 }
 
 export function FormCheck(props: FormCheckProps): JSX.Element {
-  const { isInputDirty, setInputDirty } =
-    useContext<InputDirtyContextType>(InputDirtyContext);
 
   return (
     <div className="form-check">
       <input
         className="form-check-input"
-        onChange={() => setInputDirty(true)}
         {...props}
       />
       <label className="form-check-label" htmlFor={props.id}>
@@ -123,17 +111,6 @@ export function FormCheck(props: FormCheckProps): JSX.Element {
 export function FormSwitch(
   props: JSX.IntrinsicAttributes & JSX.HTMLAttributes<HTMLInputElement>,
 ): JSX.Element {
-  const { isInputDirty, setInputDirty } =
-    useContext<InputDirtyContextType>(InputDirtyContext);
-
-  // Extend props.onChange (if it exists) to set the dirty flag
-  if (props.onChange) {
-    const onChange = props.onChange;
-    props.onChange = (e) => {
-      setInputDirty(true);
-      onChange(e);
-    };
-  }
 
   return (
     <div className="form-check form-switch mb-3">
diff --git a/web/src/pages/Configuration/ConfigCard.tsx b/web/src/pages/Configuration/ConfigCard.tsx
index 02985c5b9..67a00f84b 100644
--- a/web/src/pages/Configuration/ConfigCard.tsx
+++ b/web/src/pages/Configuration/ConfigCard.tsx
@@ -142,13 +142,13 @@ export function ConfigCard({ path }: ConfigCardProps): JSX.Element | null {
     }
   }, [config, path]);
 
-  async function handleSave(e): Promise<void> {
+  async function handleSave(e: MouseEvent): Promise<void> {
     e.preventDefault();
     setSaving(true);
     await saveConfigData(path, JSON.stringify(config), (e) => {
       console.log("Error saving config data", e);
       setIsDirty(true);
-      setHttpErrorText(e);
+      setHttpErrorText(e.message);
     });
     setIsDirty(false);
     setSaving(false);
@@ -214,7 +214,7 @@ export function ConfigCard({ path }: ConfigCardProps): JSX.Element | null {
             <button
               className="btn btn-primary"
               type="submit"
-              onClick={(e) => {
+              onClick={(e: MouseEvent): void => {
                 void handleSave(e);
               }}
               disabled={saving || !isDirty}
diff --git a/web/src/pages/System/index.tsx b/web/src/pages/System/index.tsx
index c4b25fdfe..05bc3dc4b 100644
--- a/web/src/pages/System/index.tsx
+++ b/web/src/pages/System/index.tsx
@@ -1,9 +1,16 @@
-import { InputDirtyContext } from "common/InputDirtyContext";
+import {
+  ConfigData,
+  fetchConfigData,
+  saveConfigData,
+} from "common/configAPIClient";
+import { JsonObject } from "common/jsonTypes";
 import { ButtonCard } from "components/Card";
 import { FormInput, FormSwitch } from "components/Form";
+import { produce } from "immer";
 import { AppPage } from "pages/AppPage";
 import { type JSX } from "preact";
-import { useId, useState } from "preact/hooks";
+import { ChangeEvent } from "preact/compat";
+import { useEffect, useId, useState } from "preact/hooks";
 import { ModalError } from "../../components/ModalError";
 import { PageContents } from "../PageContents";
 import { PageHeading } from "../PageHeading";
@@ -32,8 +39,53 @@ function SystemCards(): JSX.Element {
   );
 
   function DeviceNameCard(): JSX.Element {
+    const [origData, setOrigData] = useState<JsonObject>({});
+    const [data, setData] = useState<JsonObject>({});
+    const [errorMessage, setErrorMessage] = useState<string>("");
+
+    const configPath = "/system/hostname";
+
+    const isDirty = origData !== data;
+
+    const fetchData = async (): Promise<void> => {
+      const data: ConfigData = await fetchConfigData(configPath);
+      // Get data.config and set it to config
+      setOrigData(data.config);
+      setData(data.config);
+    };
+
+    async function handleSaveData(): Promise<void> {
+      const success = await saveConfigData(configPath, JSON.stringify(data), (e) => {
+        console.log("Error saving config data", e);
+        setErrorMessage(e.message);
+      });
+      if (success) {
+        setOrigData(data);
+      }
+    }
+
+    const hostname = String(data?.value ?? "");
+    function setHostname(hostname: string): void {
+      // Use immer to update the hostname property of the config object
+      setData(
+        produce(data, (draft) => {
+          draft.value = hostname;
+        }),
+      );
+    }
+
+    useEffect(() => {
+      void fetchData();
+    }, []);
+
     return (
-      <SystemSettingsCard title={<h5 className="card-title">Device Name</h5>}>
+      <SystemSettingsCard
+        title={<h5 className="card-title">Device Name</h5>}
+        isDirty={isDirty}
+        handleSaveData={handleSaveData}
+        errorMessage={errorMessage}
+        setErrorMessage={setErrorMessage}
+      >
         <p className="card-text">
           The device name is used to identify this device on the network. It is
           used both as a hostname (e.g. <code>my-device.local</code>) and as an
@@ -43,7 +95,10 @@ function SystemCards(): JSX.Element {
           label="Hostname"
           id={`${id}-name`}
           type="text"
-          placeholder="Device Name"
+          value={hostname}
+          onInput={(e: ChangeEvent<HTMLInputElement>) =>
+            setHostname(e.currentTarget.value)
+          }
         />
       </SystemSettingsCard>
     );
@@ -51,12 +106,72 @@ function SystemCards(): JSX.Element {
 }
 
 function AuthCard(): JSX.Element {
-  const [authEnabled, setAuthEnabled] = useState(false);
-
+  const [origData, setOrigData] = useState<JsonObject>({});
+  const [data, setData] = useState<JsonObject>({});
+  const [errorMessage, setErrorMessage] = useState<string>("");
   const id = useId();
 
+  const configPath = "/system/authentication";
+
+  const isDirty = origData !== data;
+
+  const authEnabled = data?.authEnabled === true;
+  const username = String(data?.username ?? "");
+  const password = String(data?.password ?? "");
+
+  const fetchData = async (): Promise<void> => {
+    const data: ConfigData = await fetchConfigData(configPath);
+    // Get data.config and set it to config
+    setOrigData(data.config);
+    setData(data.config);
+  };
+
+  useEffect(() => {
+    void fetchData();
+  }, []);
+
+  async function handleSaveData(): Promise<void> {
+    const success = await saveConfigData(configPath, JSON.stringify(data), (e) => {
+      console.log("Error saving config data", e);
+      setErrorMessage(e.message);
+    });
+    if (success) {
+      setOrigData(data);
+    }
+  }
+
+  function setAuthEnabled(authEnabled: boolean): void {
+    setData(
+      produce(data, (draft) => {
+        draft.authEnabled = authEnabled;
+      }),
+    );
+  }
+
+  function setUsername(username: string): void {
+    setData(
+      produce(data, (draft) => {
+        draft.username = username;
+      }),
+    );
+  }
+
+  function setPassword(password: string): void {
+    setData(
+      produce(data, (draft) => {
+        draft.password = password;
+      }),
+    );
+  }
+
   return (
-    <SystemSettingsCard title={<h5 className="card-title">Authentication</h5>}>
+    <SystemSettingsCard
+      title={<h5 className="card-title">Authentication</h5>}
+      isDirty={isDirty}
+      handleSaveData={handleSaveData}
+      errorMessage={errorMessage}
+      setErrorMessage={setErrorMessage}
+    >
       <p className="card-text">
         Authentication is used to restrict access to the configuration
         interface. You should disable authentication only if you are using this
@@ -68,7 +183,7 @@ function AuthCard(): JSX.Element {
           id={`${id}-enableAuth`}
           type="checkbox"
           checked={authEnabled}
-          onChange={(e) => {
+          onInput={(e) => {
             setAuthEnabled(e.currentTarget.checked);
           }}
         />
@@ -80,7 +195,11 @@ function AuthCard(): JSX.Element {
             id={`${id}-username`}
             type="text"
             placeholder="Username"
+            value={username}
             disabled={!authEnabled}
+            onInput={(e: ChangeEvent<HTMLInputElement>) => {
+              setUsername(e.currentTarget.value);
+            }}
           />
         </div>
         <div className="col-sm-6">
@@ -89,7 +208,11 @@ function AuthCard(): JSX.Element {
             id={`${id}-password`}
             type="password"
             placeholder="Password"
+            value={password}
             disabled={!authEnabled}
+            onInput={(e: ChangeEvent<HTMLInputElement>) => {
+              setPassword(e.currentTarget.value);
+            }}
           />
         </div>
       </div>
@@ -106,17 +229,48 @@ function SystemCard({ children }: SystemCardProps): JSX.Element {
   return <div className="card">{children}</div>;
 }
 
-function SystemSettingsCard({ title, children }: SystemCardProps): JSX.Element {
-  const [isDirty, setIsDirty] = useState(false);
+interface SystemSettingsCardProps {
+  title: React.ReactNode;
+  isDirty: boolean;
+  handleSaveData: () => Promise<void>;
+  errorMessage: string;
+  setErrorMessage: (message: string) => void;
+  children: React.ReactNode;
+}
+
+function SystemSettingsCard({
+  title,
+  isDirty,
+  handleSaveData,
+  errorMessage,
+  setErrorMessage,
+  children,
+}: SystemSettingsCardProps): JSX.Element {
+  const [saving, setSaving] = useState<boolean>(false);
+
+  const id = useId();
 
-  function handleSave(): void {
-    setIsDirty(false);
+  async function handleSave(e: MouseEvent): Promise<void> {
+    e.preventDefault();
+    setSaving(true);
+    await handleSaveData();
+    setSaving(false);
   }
 
   return (
-    <InputDirtyContext.Provider
-      value={{ isInputDirty: isDirty, setInputDirty: setIsDirty }}
-    >
+    <>
+      <ModalError
+        id={`${id}-modal`}
+        title="Error"
+        show={errorMessage !== ""}
+        onHide={() => {
+          setErrorMessage("");
+        }}
+      >
+        <p>There was an error saving the configuration:</p>
+        <p>{errorMessage}</p>
+      </ModalError>
+
       <SystemCard>
         <div className="card-header">{title}</div>
         <div className="card-body">
@@ -127,11 +281,22 @@ function SystemSettingsCard({ title, children }: SystemCardProps): JSX.Element {
             disabled={!isDirty}
             onClick={handleSave}
           >
-            Save
+            {saving ? (
+              <>
+                <span
+                  className="spinner-border spinner-border-sm"
+                  role="status"
+                  aria-hidden="true"
+                ></span>
+                Saving...
+              </>
+            ) : (
+              "Save"
+            )}
           </button>
         </div>
       </SystemCard>
-    </InputDirtyContext.Provider>
+    </>
   );
 }