diff --git a/client/src/pages/filaments/edit.tsx b/client/src/pages/filaments/edit.tsx
index bea70e63d..414e5c925 100644
--- a/client/src/pages/filaments/edit.tsx
+++ b/client/src/pages/filaments/edit.tsx
@@ -3,14 +3,15 @@ import { HttpError, useTranslate } from "@refinedev/core";
 import { Alert, ColorPicker, DatePicker, Form, Input, InputNumber, message, Radio, Select, Typography } from "antd";
 import TextArea from "antd/es/input/TextArea";
 import dayjs from "dayjs";
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { ExtraFieldFormItem, ParsedExtras, StringifiedExtras } from "../../components/extraFields";
 import { MultiColorPicker } from "../../components/multiColorPicker";
+import { toComparableState } from "../../utils/formState";
 import { formatNumberOnUserInput, numberParser, numberParserAllowEmpty } from "../../utils/parsing";
 import { EntityType, useGetFields } from "../../utils/queryFields";
 import { getCurrencySymbol, useCurrency } from "../../utils/settings";
 import { IVendor } from "../vendors/model";
-import { IFilament, IFilamentParsedExtras } from "./model";
+import { IFilament, IFilamentEditForm, IFilamentParsedExtras } from "./model";
 
 /*
 The API returns the extra fields as JSON values, but we need to parse them into their real types
@@ -19,6 +20,29 @@ We also need to stringify them again before sending them back to the API, which
 the form's onFinish method. Form.Item's normalize should do this, but it doesn't seem to work.
 */
 
+// comparableDefaults is typed against IFilamentEditForm so TypeScript will report a compile
+// error here if a new editable field is added to the model without updating this list.
+const comparableDefaults: Record<keyof IFilamentEditForm, unknown> = {
+  name: "",
+  vendor_id: null,
+  material: "",
+  price: null,
+  density: null,
+  diameter: null,
+  weight: null,
+  spool_weight: null,
+  settings_extruder_temp: null,
+  settings_bed_temp: null,
+  article_number: "",
+  external_id: "",
+  comment: "",
+  color_hex: "",
+  multi_color_direction: "",
+  multi_color_hexes: "",
+  extra: {},
+};
+// This list is the source of truth for which inputs participate in the Save-button dirty check.
+
 export const FilamentEdit = () => {
   const t = useTranslate();
   const [messageApi, contextHolder] = message.useMessage();
@@ -42,14 +66,18 @@ export const FilamentEdit = () => {
     optionLabel: "name",
     pagination: { mode: "off" },
   });
+  const watchedAllValues = Form.useWatch([], formProps.form);
 
-  // Add the vendor_id field to the form
-  if (formProps.initialValues) {
-    formProps.initialValues["vendor_id"] = formProps.initialValues["vendor"]?.id;
-
-    // Parse the extra fields from string values into real types
-    formProps.initialValues = ParsedExtras(formProps.initialValues);
-  }
+  // Initialize form fields and parse extra fields
+  useEffect(() => {
+    if (formProps.initialValues && formProps.form) {
+      const parsed = ParsedExtras(formProps.initialValues);
+      formProps.form.setFieldsValue({
+        ...parsed,
+        vendor_id: formProps.initialValues.vendor?.id,
+      } as unknown as IFilament);
+    }
+  }, [formProps.form, formProps.initialValues?.id, formProps.initialValues?.vendor?.id]);
 
   // Update colorType state
   useEffect(() => {
@@ -76,8 +104,46 @@ export const FilamentEdit = () => {
     }
   };
 
+  const initialComparableState = useMemo(
+    // ParsedExtras normalizes extra-field values from raw API JSON strings to their actual
+    // types so the initial snapshot matches the form state that setFieldsValue produces.
+    () =>
+      toComparableState(
+        formProps.initialValues
+          ? {
+              ...ParsedExtras(formProps.initialValues),
+              vendor_id: formProps.initialValues.vendor?.id ?? null,
+            }
+          : formProps.initialValues,
+        comparableDefaults,
+        {
+          // Single-color mode should ignore any dormant multi-color payload when deciding whether Save is needed.
+          multi_color_hexes: (normalized: Record<string, unknown>) =>
+            colorType === "single" ? "" : ((normalized.multi_color_hexes as string | undefined) ?? ""),
+        },
+      ),
+    [formProps.initialValues, formProps.initialValues?.vendor?.id, colorType],
+  );
+  const watchedComparableState = useMemo(
+    () =>
+      toComparableState(watchedAllValues, comparableDefaults, {
+        multi_color_hexes: (normalized: Record<string, unknown>) =>
+          colorType === "single" ? "" : ((normalized.multi_color_hexes as string | undefined) ?? ""),
+      }),
+    [watchedAllValues, colorType],
+  );
+  const hasFormChanges =
+    initialComparableState !== null &&
+    watchedComparableState !== null &&
+    initialComparableState !== watchedComparableState;
+  const saveButtonState = {
+    ...saveButtonProps,
+    type: hasFormChanges ? ("primary" as const) : ("default" as const),
+    disabled: saveButtonProps.disabled || !hasFormChanges,
+  };
+
   return (
-    <Edit saveButtonProps={saveButtonProps}>
+    <Edit saveButtonProps={saveButtonState}>
       {contextHolder}
       <Form {...formProps} layout="vertical">
         <Form.Item
diff --git a/client/src/pages/filaments/list.tsx b/client/src/pages/filaments/list.tsx
index 2d42198ce..ab84005f4 100644
--- a/client/src/pages/filaments/list.tsx
+++ b/client/src/pages/filaments/list.tsx
@@ -23,7 +23,7 @@ import {
   useSpoolmanMaterials,
   useSpoolmanVendors,
 } from "../../components/otherModels";
-import { removeUndefined } from "../../utils/filtering";
+import { hasMeaningfulFilters, removeUndefined } from "../../utils/filtering";
 import { EntityType, useGetFields } from "../../utils/queryFields";
 import { TableState, useInitialTableState, useStoreInitialState } from "../../utils/saveload";
 import { useCurrencyFormatter } from "../../utils/settings";
@@ -164,13 +164,15 @@ export const FilamentList = () => {
     tableState,
     sorter: true,
   };
+  // Ignore empty filter shells so the Clear Filters button only lights up for filters that would affect results.
+  const hasActiveFilters = hasMeaningfulFilters(filters);
 
   return (
     <List
       headerButtons={({ defaultButtons }) => (
         <>
           <Button
-            type="primary"
+            type={hasActiveFilters ? "primary" : "default"}
             icon={<FilterOutlined />}
             onClick={() => {
               setFilters([], "replace");
diff --git a/client/src/pages/filaments/model.tsx b/client/src/pages/filaments/model.tsx
index b21c709ea..b09f11de1 100644
--- a/client/src/pages/filaments/model.tsx
+++ b/client/src/pages/filaments/model.tsx
@@ -24,3 +24,11 @@ export interface IFilament {
 
 // IFilamentParsedExtras is the same as IFilament, but with the extra field parsed into its real types
 export type IFilamentParsedExtras = Omit<IFilament, "extra"> & { extra?: { [key: string]: unknown } };
+
+// IFilamentEditForm is the shape of the filament edit form — only user-editable fields.
+// id and registered are system-managed; vendor is replaced by vendor_id.
+// Adding a new editable field to IFilament should also be added here;
+// comparableDefaults in filaments/edit.tsx is typed against this.
+export type IFilamentEditForm = Omit<IFilamentParsedExtras, "id" | "registered" | "vendor"> & {
+  vendor_id: number | null;
+};
diff --git a/client/src/pages/printing/printing.tsx b/client/src/pages/printing/printing.tsx
index 59b47895f..5ab5c7421 100644
--- a/client/src/pages/printing/printing.tsx
+++ b/client/src/pages/printing/printing.tsx
@@ -35,21 +35,22 @@ export function useGetPrintSettings(): SpoolQRCodePrintSettings[] | undefined {
   if (!data) return;
   const parsed: SpoolQRCodePrintSettings[] =
     data && data.value ? JSON.parse(data.value) : ([] as SpoolQRCodePrintSettings[]);
-  // Loop through all parsed and generate a new ID field if it's not set
-  return parsed.map((settings) => {
-    if (!settings.labelSettings.printSettings.id) {
-      settings.labelSettings.printSettings.id = uuidv4();
-    }
-    return settings;
-  });
+  // Keep preset loading immutable so dirty-state comparisons are not affected by
+  // IDs being injected directly into parsed settings objects.
+  return parsed.map((settings) => ({
+    ...settings,
+    labelSettings: {
+      ...settings.labelSettings,
+      printSettings: {
+        ...settings.labelSettings.printSettings,
+        id: settings.labelSettings.printSettings.id || uuidv4(),
+      },
+    },
+  }));
 }
 
-export function useSetPrintSettings(): (spoolQRCodePrintSettings: SpoolQRCodePrintSettings[]) => void {
-  const mut = useSetSetting("print_presets");
-
-  return (spoolQRCodePrintSettings: SpoolQRCodePrintSettings[]) => {
-    mut.mutate(spoolQRCodePrintSettings);
-  };
+export function useSetPrintSettings() {
+  return useSetSetting<SpoolQRCodePrintSettings[]>("print_presets");
 }
 
 interface GenericObject {
diff --git a/client/src/pages/printing/spoolQrCodePrintingDialog.tsx b/client/src/pages/printing/spoolQrCodePrintingDialog.tsx
index 865c597cf..779d7bcae 100644
--- a/client/src/pages/printing/spoolQrCodePrintingDialog.tsx
+++ b/client/src/pages/printing/spoolQrCodePrintingDialog.tsx
@@ -2,7 +2,7 @@ import { CopyOutlined, DeleteOutlined, PlusOutlined, SaveOutlined } from "@ant-d
 import { useTranslate } from "@refinedev/core";
 import { Button, Flex, Form, Input, Modal, Popconfirm, Select, Table, Typography, message } from "antd";
 import TextArea from "antd/es/input/TextArea";
-import { useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { v4 as uuidv4 } from "uuid";
 import { EntityType, useGetFields } from "../../utils/queryFields";
 import { useGetSetting } from "../../utils/querySettings";
@@ -23,6 +23,26 @@ interface SpoolQRCodePrintingDialog {
   spoolIds: number[];
 }
 
+function clonePreset(preset: SpoolQRCodePrintSettings): SpoolQRCodePrintSettings {
+  return JSON.parse(JSON.stringify(preset)) as SpoolQRCodePrintSettings;
+}
+
+function clonePresets(presets: SpoolQRCodePrintSettings[]): SpoolQRCodePrintSettings[] {
+  return presets.map(clonePreset);
+}
+
+function buildNewPreset(name: string): SpoolQRCodePrintSettings {
+  const newId = uuidv4();
+  return {
+    labelSettings: {
+      printSettings: {
+        id: newId,
+        name,
+      },
+    },
+  };
+}
+
 const SpoolQRCodePrintingDialog = ({ spoolIds }: SpoolQRCodePrintingDialog) => {
   const t = useTranslate();
   const baseUrlSetting = useGetSetting("base_url");
@@ -46,110 +66,135 @@ const SpoolQRCodePrintingDialog = ({ spoolIds }: SpoolQRCodePrintingDialog) => {
   // Keep a local copy of the settings which is what's actually displayed. Use the remote state only for saving.
   // This decouples the debounce stuff from the UI
   const [localPresets, setLocalPresets] = useState<SpoolQRCodePrintSettings[] | undefined>();
+  const [draftPreset, setDraftPreset] = useState<SpoolQRCodePrintSettings | undefined>();
   const remotePresets = useGetPrintPresets();
   const setRemotePresets = useSetPrintPresets();
+  const [emptyPresetBaseline] = useState<SpoolQRCodePrintSettings>(() =>
+    buildNewPreset(t("printing.generic.newSetting")),
+  );
 
   const localOrRemotePresets = localPresets ?? remotePresets;
+  const hasPersistedPresets = (localOrRemotePresets?.length ?? 0) > 0;
+
+  const remotePresetsComparable = useMemo(() => JSON.stringify(remotePresets ?? []), [remotePresets]);
+  const localPresetsComparable = useMemo(
+    () => JSON.stringify(localPresets ?? remotePresets ?? []),
+    [localPresets, remotePresets],
+  );
+  const draftPresetComparable = useMemo(
+    () => JSON.stringify(draftPreset ?? emptyPresetBaseline),
+    [draftPreset, emptyPresetBaseline],
+  );
+  const emptyPresetBaselineComparable = useMemo(() => JSON.stringify(emptyPresetBaseline), [emptyPresetBaseline]);
+  const hasUnsavedPresetChanges =
+    (localPresets !== undefined && localPresetsComparable !== remotePresetsComparable) ||
+    (!hasPersistedPresets && draftPreset !== undefined && draftPresetComparable !== emptyPresetBaselineComparable);
+
+  const savePresetsRemote = async (): Promise<boolean> => {
+    if (!hasUnsavedPresetChanges) return false;
+    // Only persist when the local working copy diverges from the remote source; this
+    // keeps the Save Preset button as a true "needs action" indicator.
+    if (localPresets) {
+      await setRemotePresets.mutateAsync(localPresets);
+      setLocalPresets(undefined);
+      return true;
+    }
+    if (!hasPersistedPresets && draftPreset) {
+      await setRemotePresets.mutateAsync([draftPreset]);
+      setDraftPreset(undefined);
+      return true;
+    }
+    return false;
+  };
+
+  const updatePresetById = (
+    presetId: string,
+    updater: (preset: SpoolQRCodePrintSettings) => SpoolQRCodePrintSettings,
+  ) => {
+    if (!localOrRemotePresets) return;
+    setLocalPresets(
+      localOrRemotePresets.map((preset) =>
+        preset.labelSettings.printSettings.id === presetId ? updater(clonePreset(preset)) : clonePreset(preset),
+      ),
+    );
+  };
 
-  const savePresetsRemote = () => {
-    if (!localPresets) return;
-    setRemotePresets(localPresets);
+  const updateCurrentPreset = (updater: (preset: SpoolQRCodePrintSettings) => SpoolQRCodePrintSettings) => {
+    if (hasPersistedPresets) {
+      updatePresetById(curPreset.labelSettings.printSettings.id, updater);
+      return;
+    }
+    setDraftPreset((currentDraft) => updater(clonePreset(currentDraft ?? emptyPresetBaseline)));
   };
 
   // Functions to update settings
   const addNewPreset = () => {
-    if (!localOrRemotePresets) return;
-    const newId = uuidv4();
-    const newPreset = {
-      labelSettings: {
-        printSettings: {
-          id: newId,
-          name: t("printing.generic.newSetting"),
-        },
-      },
-    };
-    setLocalPresets([...localOrRemotePresets, newPreset]);
-    setSelectedPresetState(newId);
+    const newPreset = buildNewPreset(t("printing.generic.newSetting"));
+    const presets =
+      hasPersistedPresets && localOrRemotePresets
+        ? clonePresets(localOrRemotePresets)
+        : [clonePreset(draftPreset ?? emptyPresetBaseline)];
+    setLocalPresets([...presets, newPreset]);
+    setDraftPreset(undefined);
+    setSelectedPresetState(newPreset.labelSettings.printSettings.id);
     return newPreset;
   };
   const duplicateCurrentPreset = () => {
-    if (!localOrRemotePresets) return;
-    const newPreset = {
-      ...curPreset,
-      labelSettings: { ...curPreset.labelSettings, printSettings: { ...curPreset.labelSettings.printSettings } },
-    };
+    const newPreset = clonePreset(curPreset);
     newPreset.labelSettings.printSettings.id = uuidv4();
-    setLocalPresets([...localOrRemotePresets, newPreset]);
+    const presets =
+      hasPersistedPresets && localOrRemotePresets
+        ? clonePresets(localOrRemotePresets)
+        : [clonePreset(draftPreset ?? emptyPresetBaseline)];
+    setLocalPresets([...presets, newPreset]);
+    setDraftPreset(undefined);
     setSelectedPresetState(newPreset.labelSettings.printSettings.id);
   };
-  const updateCurrentPreset = (newSettings: SpoolQRCodePrintSettings) => {
-    if (!localOrRemotePresets) return;
-    setLocalPresets(
-      localOrRemotePresets.map((presets) =>
-        presets.labelSettings.printSettings.id === newSettings.labelSettings.printSettings.id ? newSettings : presets,
-      ),
-    );
-  };
   const deleteCurrentPreset = () => {
     if (!localOrRemotePresets) return;
     setLocalPresets(
-      localOrRemotePresets.filter((qPreset) => qPreset.labelSettings.printSettings.id !== selectedPresetState),
+      clonePresets(localOrRemotePresets).filter(
+        (qPreset) => qPreset.labelSettings.printSettings.id !== selectedPresetState,
+      ),
     );
     setSelectedPresetState(undefined);
   };
 
-  // Initialize presets
-  let curPreset: SpoolQRCodePrintSettings;
-  if (localOrRemotePresets === undefined) {
-    // DB not loaded yet, use a temporary one
-    curPreset = {
-      labelSettings: {
-        printSettings: {
-          id: "TEMP",
-          name: t("printing.generic.newSetting"),
-        },
-      },
-    };
-  } else {
-    // DB is loaded, find the selected setting
+  useEffect(() => {
+    if (localOrRemotePresets === undefined) {
+      return;
+    }
     if (localOrRemotePresets.length === 0) {
-      // DB loaded, but no settings found, add a new one and select it
-      const newSetting = addNewPreset();
-      if (!newSetting) {
-        console.error("Error adding new setting, this should never happen");
-        return;
+      setDraftPreset((currentDraft) => currentDraft ?? clonePreset(emptyPresetBaseline));
+      if (selectedPresetState !== undefined) {
+        setSelectedPresetState(undefined);
       }
+      return;
+    }
+    if (draftPreset !== undefined) {
+      setDraftPreset(undefined);
+    }
+    if (
+      !selectedPresetState ||
+      !localOrRemotePresets.some((preset) => preset.labelSettings.printSettings.id === selectedPresetState)
+    ) {
+      setSelectedPresetState(localOrRemotePresets[0].labelSettings.printSettings.id);
+    }
+  }, [draftPreset, emptyPresetBaseline, localOrRemotePresets, selectedPresetState, setSelectedPresetState]);
 
-      // Mutate the allPrintSettings list so that the rest of the UI will work fine
-      localOrRemotePresets.push(newSetting);
-      curPreset = newSetting;
-    } else {
-      // DB loaded and at least 1 setting exists
-      if (!selectedPresetState) {
-        // No setting has been selected, select the first one
-        curPreset = localOrRemotePresets[0];
-        setSelectedPresetState(localOrRemotePresets[0].labelSettings.printSettings.id);
-      } else {
-        // A setting has been selected, find it
-        const foundSetting = localOrRemotePresets.find(
-          (settings) => settings.labelSettings.printSettings.id === selectedPresetState,
-        );
-        if (foundSetting) {
-          curPreset = foundSetting;
-        } else {
-          // Selected setting not found, select a temp one
-          curPreset = {
-            labelSettings: {
-              printSettings: {
-                id: "TEMP",
-                name: t("printing.generic.newSetting"),
-              },
-            },
-          };
-        }
-      }
+  const curPreset = useMemo(() => {
+    if (!hasPersistedPresets) {
+      return draftPreset ?? emptyPresetBaseline;
     }
-  }
+    if (!selectedPresetState) {
+      return localOrRemotePresets![0];
+    }
+    return (
+      localOrRemotePresets!.find((preset) => preset.labelSettings.printSettings.id === selectedPresetState) ??
+      localOrRemotePresets![0]
+    );
+  }, [draftPreset, emptyPresetBaseline, hasPersistedPresets, localOrRemotePresets, selectedPresetState]);
+  const currentLabelSettings = useMemo(() => clonePreset(curPreset).labelSettings, [curPreset]);
 
   const [templateHelpOpen, setTemplateHelpOpen] = useState(false);
   const template =
@@ -233,10 +278,12 @@ Spool Weight: {filament.spool_weight} g
     <>
       {contextHolder}
       <QRCodePrintingDialog
-        printSettings={curPreset.labelSettings}
+        printSettings={currentLabelSettings}
         setPrintSettings={(newSettings) => {
-          curPreset.labelSettings = newSettings;
-          updateCurrentPreset(curPreset);
+          updateCurrentPreset((preset) => ({
+            ...preset,
+            labelSettings: clonePreset({ labelSettings: newSettings }).labelSettings,
+          }));
         }}
         baseUrlRoot={baseUrlRoot}
         useHTTPUrl={useHTTPUrl}
@@ -292,8 +339,16 @@ Spool Weight: {filament.spool_weight} g
               <Input
                 value={curPreset.labelSettings.printSettings?.name}
                 onChange={(e) => {
-                  curPreset.labelSettings.printSettings.name = e.target.value;
-                  updateCurrentPreset(curPreset);
+                  updateCurrentPreset((preset) => ({
+                    ...preset,
+                    labelSettings: {
+                      ...preset.labelSettings,
+                      printSettings: {
+                        ...preset.labelSettings.printSettings,
+                        name: e.target.value,
+                      },
+                    },
+                  }));
                 }}
               />
             </Form.Item>
@@ -321,8 +376,10 @@ Spool Weight: {filament.spool_weight} g
                 value={template}
                 rows={8}
                 onChange={(newValue) => {
-                  curPreset.template = newValue.target.value;
-                  updateCurrentPreset(curPreset);
+                  updateCurrentPreset((preset) => ({
+                    ...preset,
+                    template: newValue.target.value,
+                  }));
                 }}
               />
             </Form.Item>
@@ -347,12 +404,21 @@ Spool Weight: {filament.spool_weight} g
         extraButtons={
           <>
             <Button
-              type="primary"
+              type={hasUnsavedPresetChanges ? "primary" : "default"}
               size="large"
               icon={<SaveOutlined />}
-              onClick={() => {
-                savePresetsRemote();
-                messageApi.success(t("notifications.saveSuccessful"));
+              loading={setRemotePresets.isPending}
+              disabled={!hasUnsavedPresetChanges || setRemotePresets.isPending}
+              onClick={async () => {
+                try {
+                  const wasSaved = await savePresetsRemote();
+                  if (wasSaved) {
+                    messageApi.success(t("notifications.saveSuccessful"));
+                  }
+                } catch (error) {
+                  const fallback = t("notifications.error", { statusCode: "unknown" });
+                  messageApi.error(error instanceof Error ? error.message : fallback);
+                }
               }}
             >
               {t("printing.generic.saveSetting")}
diff --git a/client/src/pages/settings/generalSettings.tsx b/client/src/pages/settings/generalSettings.tsx
index 9c1a2190b..b486bd603 100644
--- a/client/src/pages/settings/generalSettings.tsx
+++ b/client/src/pages/settings/generalSettings.tsx
@@ -1,14 +1,23 @@
 import { useTranslate } from "@refinedev/core";
 import { Button, Checkbox, Form, Input, message } from "antd";
-import { useEffect } from "react";
+import { useEffect, useMemo } from "react";
+import { toComparableState } from "../../utils/formState";
 import { useGetSettings, useSetSetting } from "../../utils/querySettings";
 
+const comparableDefaults = {
+  currency: "",
+  base_url: "",
+  round_prices: false,
+} as const;
+// This list is the source of truth for which inputs participate in the Save-button dirty check.
+
 export function GeneralSettings() {
   const settings = useGetSettings();
   const setBaseUrl = useSetSetting("base_url");
   const setCurrency = useSetSetting("currency");
   const setRoundPrices = useSetSetting("round_prices");
   const [form] = Form.useForm();
+  const watchedAllValues = Form.useWatch([], form);
   const [messageApi, contextHolder] = message.useMessage();
   const t = useTranslate();
 
@@ -47,6 +56,32 @@ export function GeneralSettings() {
     }
   };
 
+  const initialComparableState = useMemo(() => {
+    if (!settings.data) {
+      return null;
+    }
+    // Compare the parsed values the form actually edits, not the JSON-encoded storage shape from settings rows.
+    return toComparableState(
+      {
+        currency: JSON.parse(settings.data.currency.value),
+        base_url: JSON.parse(settings.data.base_url.value),
+        round_prices: JSON.parse(settings.data.round_prices.value),
+      },
+      comparableDefaults,
+    );
+  }, [settings.data]);
+
+  const watchedComparableState = useMemo(() => {
+    return toComparableState(watchedAllValues, comparableDefaults);
+  }, [watchedAllValues]);
+
+  const hasFormChanges =
+    initialComparableState !== null &&
+    watchedComparableState !== null &&
+    initialComparableState !== watchedComparableState;
+  // Treat in-flight saves and initial settings fetches the same way so the button never advertises stale availability.
+  const isSaving = settings.isFetching || setCurrency.isPending || setBaseUrl.isPending || setRoundPrices.isPending;
+
   return (
     <>
       <Form
@@ -105,7 +140,12 @@ export function GeneralSettings() {
         </Form.Item>
 
         <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
-          <Button type="primary" htmlType="submit" loading={settings.isFetching || setCurrency.isPending}>
+          <Button
+            type={hasFormChanges ? "primary" : "default"}
+            htmlType="submit"
+            loading={isSaving}
+            disabled={isSaving || !hasFormChanges}
+          >
             {t("buttons.save")}
           </Button>
         </Form.Item>
diff --git a/client/src/pages/spools/edit.tsx b/client/src/pages/spools/edit.tsx
index 79ad5d301..05aabd72a 100644
--- a/client/src/pages/spools/edit.tsx
+++ b/client/src/pages/spools/edit.tsx
@@ -8,6 +8,7 @@ import { useEffect, useMemo, useState } from "react";
 import { useNavigate, useSearchParams } from "react-router";
 import { ExtraFieldFormItem, ParsedExtras, StringifiedExtras } from "../../components/extraFields";
 import { useSpoolmanLocations } from "../../components/otherModels";
+import { toComparableState } from "../../utils/formState";
 import { searchMatches } from "../../utils/filtering";
 import { formatNumberOnUserInput, numberParser, numberParserAllowEmpty } from "../../utils/parsing";
 import { EntityType, useGetFields } from "../../utils/queryFields";
@@ -15,7 +16,7 @@ import { getCurrencySymbol, useCurrency } from "../../utils/settings";
 import { createFilamentFromExternal } from "../filaments/functions";
 import { useLocations } from "../locations/functions";
 import { useGetFilamentSelectOptions } from "./functions";
-import { ISpool, ISpoolParsedExtras, WeightToEnter } from "./model";
+import { ISpool, ISpoolEditForm, WeightToEnter } from "./model";
 
 /*
 The API returns the extra fields as JSON values, but we need to parse them into their real types
@@ -24,9 +25,22 @@ We also need to stringify them again before sending them back to the API, which
 the form's onFinish method. Form.Item's normalize should do this, but it doesn't seem to work.
 */
 
-type ISpoolRequest = ISpoolParsedExtras & {
-  filament_id: number | string;
+// comparableDefaults is typed against ISpoolEditForm so TypeScript will report a compile
+// error here if a new editable field is added to the model without updating this list.
+const comparableDefaults: Record<keyof ISpoolEditForm, unknown> = {
+  first_used: null,
+  last_used: null,
+  filament_id: null,
+  price: null,
+  initial_weight: null,
+  spool_weight: null,
+  used_weight: null,
+  location: "",
+  lot_nr: "",
+  comment: "",
+  extra: {},
 };
+// This list is the source of truth for which inputs participate in the Save-button dirty check.
 
 export const SpoolEdit = () => {
   const t = useTranslate();
@@ -37,7 +51,7 @@ export const SpoolEdit = () => {
   const [searchParams] = useSearchParams();
   const navigate = useNavigate();
 
-  const { form, formProps, saveButtonProps } = useForm<ISpool, HttpError, ISpoolRequest, ISpool>({
+  const { form, formProps, saveButtonProps } = useForm<ISpool, HttpError, ISpoolEditForm, ISpool>({
     liveMode: "manual",
     onLiveEvent() {
       // Warn the user if the spool has been updated since the form was opened
@@ -60,14 +74,6 @@ export const SpoolEdit = () => {
   const initialWeightValue = Form.useWatch("initial_weight", form);
   const spoolWeightValue = Form.useWatch("spool_weight", form);
 
-  // Add the filament_id field to the form
-  if (formProps.initialValues) {
-    formProps.initialValues["filament_id"] = formProps.initialValues["filament"].id;
-
-    // Parse the extra fields from string values into real types
-    formProps.initialValues = ParsedExtras(formProps.initialValues);
-  }
-
   //
   // Set up the filament selection options
   //
@@ -97,13 +103,25 @@ export const SpoolEdit = () => {
       return null;
     }
   }, [selectedFilamentID, internalSelectOptions, externalSelectOptions]);
+  const watchedAllValues = Form.useWatch([], form);
+
+  // Initialize form fields and parse extra fields
+  useEffect(() => {
+    if (formProps.initialValues && form) {
+      const parsed = ParsedExtras(formProps.initialValues);
+      form.setFieldsValue({
+        ...parsed,
+        filament_id: formProps.initialValues.filament?.id,
+      } as unknown as ISpool);
+    }
+  }, [form, formProps.initialValues?.id, formProps.initialValues?.filament?.id]);
 
   // Override the form's onFinish method to stringify the extra fields
   const originalOnFinish = formProps.onFinish;
-  formProps.onFinish = (allValues: ISpoolRequest) => {
+  formProps.onFinish = (allValues: ISpoolEditForm) => {
     if (allValues !== undefined && allValues !== null) {
       // Lot of stupidity here to make types work
-      const values = StringifiedExtras<ISpoolRequest>(allValues);
+      const values = StringifiedExtras<ISpoolEditForm>(allValues);
       if (selectedFilament?.is_internal === false) {
         // Filament ID being a string indicates its an external filament.
         // If so, we should first create the internal filament version, then edit the spool
@@ -230,8 +248,37 @@ export const SpoolEdit = () => {
     }
   }, [initialUsedWeight]);
 
+  const initialComparableState = useMemo(
+    // ParsedExtras normalizes extra-field values from raw API JSON strings to their actual
+    // types so the initial snapshot matches the form state that setFieldsValue produces.
+    () =>
+      toComparableState(
+        formProps.initialValues
+          ? {
+              ...ParsedExtras(formProps.initialValues),
+              filament_id: formProps.initialValues.filament?.id ?? null,
+            }
+          : formProps.initialValues,
+        comparableDefaults,
+      ),
+    [formProps.initialValues, formProps.initialValues?.filament?.id],
+  );
+  const watchedComparableState = useMemo(
+    () => toComparableState(watchedAllValues, comparableDefaults),
+    [watchedAllValues],
+  );
+  const hasFormChanges =
+    initialComparableState !== null &&
+    watchedComparableState !== null &&
+    initialComparableState !== watchedComparableState;
+  const saveButtonState = {
+    ...saveButtonProps,
+    type: hasFormChanges ? ("primary" as const) : ("default" as const),
+    disabled: saveButtonProps.disabled || !hasFormChanges,
+  };
+
   return (
-    <Edit saveButtonProps={saveButtonProps}>
+    <Edit saveButtonProps={saveButtonState}>
       {contextHolder}
       <Form {...formProps} layout="vertical">
         <Form.Item
diff --git a/client/src/pages/spools/list.tsx b/client/src/pages/spools/list.tsx
index 9ee11a3ed..5e88ea744 100644
--- a/client/src/pages/spools/list.tsx
+++ b/client/src/pages/spools/list.tsx
@@ -33,7 +33,7 @@ import {
   useSpoolmanLotNumbers,
   useSpoolmanMaterials,
 } from "../../components/otherModels";
-import { removeUndefined } from "../../utils/filtering";
+import { hasMeaningfulFilters, removeUndefined } from "../../utils/filtering";
 import { EntityType, useGetFields } from "../../utils/queryFields";
 import { TableState, useInitialTableState, useSavedState, useStoreInitialState } from "../../utils/saveload";
 import { useCurrencyFormatter } from "../../utils/settings";
@@ -255,6 +255,8 @@ export const SpoolList = () => {
     tableState,
     sorter: true,
   };
+  // Ignore empty filter shells so the Clear Filters button only lights up for filters that would affect results.
+  const hasActiveFilters = hasMeaningfulFilters(filters);
 
   return (
     <List
@@ -279,7 +281,7 @@ export const SpoolList = () => {
             {showArchived ? t("buttons.hideArchived") : t("buttons.showArchived")}
           </Button>
           <Button
-            type="primary"
+            type={hasActiveFilters ? "primary" : "default"}
             icon={<FilterOutlined />}
             onClick={() => {
               setFilters([], "replace");
diff --git a/client/src/pages/spools/model.tsx b/client/src/pages/spools/model.tsx
index 626afb28f..e198cb02f 100644
--- a/client/src/pages/spools/model.tsx
+++ b/client/src/pages/spools/model.tsx
@@ -28,3 +28,17 @@ export interface ISpool {
 
 // ISpoolParsedExtras is the same as ISpool, but with the extra field parsed into its real types
 export type ISpoolParsedExtras = Omit<ISpool, "extra"> & { extra?: { [key: string]: unknown } };
+
+// ISpoolEditForm is the shape of the spool edit form — only user-editable fields.
+// Omitted fields are either system-managed (id, registered), server-computed
+// (remaining_weight, remaining_length, used_length), or controlled by a separate
+// action (archived). filament is replaced by filament_id to match the form input.
+// Adding a new editable field to ISpool should also be added to ISpoolEditForm;
+// the comparableDefaults in spools/edit.tsx is typed against this and TypeScript
+// will report a compile error there as a reminder.
+export type ISpoolEditForm = Omit<
+  ISpoolParsedExtras,
+  "id" | "registered" | "filament" | "remaining_weight" | "remaining_length" | "used_length" | "archived"
+> & {
+  filament_id: number | string | null; // string for external filaments, number for internal
+};
diff --git a/client/src/pages/vendors/edit.tsx b/client/src/pages/vendors/edit.tsx
index 45e3a3a9a..11ac63351 100644
--- a/client/src/pages/vendors/edit.tsx
+++ b/client/src/pages/vendors/edit.tsx
@@ -3,10 +3,11 @@ import { HttpError, useTranslate } from "@refinedev/core";
 import { Alert, DatePicker, Form, Input, InputNumber, message, Typography } from "antd";
 import TextArea from "antd/es/input/TextArea";
 import dayjs from "dayjs";
-import { useState } from "react";
+import { useMemo, useState, useEffect } from "react";
 import { ExtraFieldFormItem, ParsedExtras, StringifiedExtras } from "../../components/extraFields";
+import { toComparableState } from "../../utils/formState";
 import { EntityType, useGetFields } from "../../utils/queryFields";
-import { IVendor, IVendorParsedExtras } from "./model";
+import { IVendor, IVendorEditForm, IVendorParsedExtras } from "./model";
 
 /*
 The API returns the extra fields as JSON values, but we need to parse them into their real types
@@ -15,6 +16,17 @@ We also need to stringify them again before sending them back to the API, which
 the form's onFinish method. Form.Item's normalize should do this, but it doesn't seem to work.
 */
 
+// comparableDefaults is typed against IVendorEditForm so TypeScript will report a compile
+// error here if a new editable field is added to the model without updating this list.
+const comparableDefaults: Record<keyof IVendorEditForm, unknown> = {
+  name: "",
+  comment: "",
+  empty_spool_weight: null,
+  external_id: "",
+  extra: {},
+};
+// This list is the source of truth for which inputs participate in the Save-button dirty check.
+
 export const VendorEdit = () => {
   const t = useTranslate();
   const [messageApi, contextHolder] = message.useMessage();
@@ -29,11 +41,15 @@ export const VendorEdit = () => {
       setHasChanged(true);
     },
   });
+  const watchedAllValues = Form.useWatch([], formProps.form);
 
-  // Parse the extra fields from string values into real types
-  if (formProps.initialValues) {
-    formProps.initialValues = ParsedExtras(formProps.initialValues);
-  }
+  // Initialize form fields and parse extra fields
+  useEffect(() => {
+    if (formProps.initialValues && formProps.form) {
+      const parsed = ParsedExtras(formProps.initialValues);
+      formProps.form.setFieldsValue(parsed as unknown as IVendor);
+    }
+  }, [formProps.form, formProps.initialValues?.id]);
 
   // Override the form's onFinish method to stringify the extra fields
   const originalOnFinish = formProps.onFinish;
@@ -45,11 +61,38 @@ export const VendorEdit = () => {
         extra: {},
         ...stringifiedAllValues,
       });
+      // Clear the live-update warning: user has seen and chosen to save over the conflict.
+      // Dismissed on submit intent (not on server confirm) — useForm handles server errors separately.
+      setHasChanged(false);
     }
   };
 
+  const initialComparableState = useMemo(
+    // ParsedExtras normalizes extra-field values from raw API JSON strings to their actual
+    // types so the initial snapshot matches the form state that setFieldsValue produces.
+    () =>
+      toComparableState(
+        formProps.initialValues ? ParsedExtras(formProps.initialValues) : formProps.initialValues,
+        comparableDefaults,
+      ),
+    [formProps.initialValues],
+  );
+  const watchedComparableState = useMemo(
+    () => toComparableState(watchedAllValues, comparableDefaults),
+    [watchedAllValues],
+  );
+  const hasFormChanges =
+    initialComparableState !== null &&
+    watchedComparableState !== null &&
+    initialComparableState !== watchedComparableState;
+  const saveButtonState = {
+    ...saveButtonProps,
+    type: hasFormChanges ? ("primary" as const) : ("default" as const),
+    disabled: saveButtonProps.disabled || !hasFormChanges,
+  };
+
   return (
-    <Edit saveButtonProps={saveButtonProps}>
+    <Edit saveButtonProps={saveButtonState}>
       {contextHolder}
       <Form {...formProps} layout="vertical">
         <Form.Item
diff --git a/client/src/pages/vendors/list.tsx b/client/src/pages/vendors/list.tsx
index 8fc3cb468..08152f532 100644
--- a/client/src/pages/vendors/list.tsx
+++ b/client/src/pages/vendors/list.tsx
@@ -15,7 +15,7 @@ import {
   SortedColumn,
 } from "../../components/column";
 import { useLiveify } from "../../components/liveify";
-import { removeUndefined } from "../../utils/filtering";
+import { hasMeaningfulFilters, removeUndefined } from "../../utils/filtering";
 import { EntityType, useGetFields } from "../../utils/queryFields";
 import { TableState, useInitialTableState, useStoreInitialState } from "../../utils/saveload";
 import { IVendor } from "./model";
@@ -107,13 +107,15 @@ export const VendorList = () => {
     tableState,
     sorter: true,
   };
+  // Ignore empty filter shells so the Clear Filters button only lights up for filters that would affect results.
+  const hasActiveFilters = hasMeaningfulFilters(filters);
 
   return (
     <List
       headerButtons={({ defaultButtons }) => (
         <>
           <Button
-            type="primary"
+            type={hasActiveFilters ? "primary" : "default"}
             icon={<FilterOutlined />}
             onClick={() => {
               setFilters([], "replace");
diff --git a/client/src/pages/vendors/model.tsx b/client/src/pages/vendors/model.tsx
index e64440ed3..7936e573f 100644
--- a/client/src/pages/vendors/model.tsx
+++ b/client/src/pages/vendors/model.tsx
@@ -10,3 +10,9 @@ export interface IVendor {
 
 // IVendorParsedExtras is the same as IVendor, but with the extra field parsed into its real types
 export type IVendorParsedExtras = Omit<IVendor, "extra"> & { extra?: { [key: string]: unknown } };
+
+// IVendorEditForm is the shape of the vendor edit form — only user-editable fields.
+// id and registered are system-managed.
+// Adding a new editable field to IVendor should also be added here;
+// comparableDefaults in vendors/edit.tsx is typed against this.
+export type IVendorEditForm = Omit<IVendorParsedExtras, "id" | "registered">;
diff --git a/client/src/utils/filtering.ts b/client/src/utils/filtering.ts
index da99b43c4..6d15b9f5c 100644
--- a/client/src/utils/filtering.ts
+++ b/client/src/utils/filtering.ts
@@ -6,8 +6,12 @@ interface TypedCrudFilter<Obj> {
   value: string[];
 }
 
+/**
+ * Type-asserts filter array to strongly-typed filters.
+ * Safe because CrudFilter objects from table state are guaranteed to match TypedCrudFilter shape.
+ */
 export function typeFilters<Obj>(filters: CrudFilter[]): TypedCrudFilter<Obj>[] {
-  return filters as TypedCrudFilter<Obj>[]; // <-- Unsafe cast
+  return filters as TypedCrudFilter<Obj>[];
 }
 
 /**
@@ -44,3 +48,48 @@ export function searchMatches(query: string, test: string): boolean {
   const words = query.toLowerCase().split(" ");
   return words.every((word) => test.toLowerCase().includes(word));
 }
+
+function hasMeaningfulFilterValue(value: unknown): boolean {
+  if (value === null || value === undefined) {
+    return false;
+  }
+
+  if (typeof value === "string") {
+    // Empty-string filters are an intentional "show empty values" query in this app.
+    return value === "" || value.trim().length > 0;
+  }
+
+  if (Array.isArray(value)) {
+    if (value.length === 0) {
+      return false;
+    }
+    return value.some((entry) => hasMeaningfulFilterValue(entry));
+  }
+
+  return true;
+}
+
+/**
+ * Returns true when at least one filter has a meaningful value.
+ * This ignores empty array values, while preserving the existing empty-string
+ * filter semantics used for "<empty>" options.
+ */
+export function hasMeaningfulFilters(filters?: CrudFilter[]): boolean {
+  if (!filters || filters.length === 0) {
+    return false;
+  }
+
+  return filters.some((filter) => {
+    if ("operator" in filter && (filter.operator === "or" || filter.operator === "and")) {
+      // Refine nests grouped filters, so recurse until we find a real leaf value
+      // instead of treating the wrapper object itself as "active".
+      return hasMeaningfulFilters(filter.value);
+    }
+
+    if ("value" in filter) {
+      return hasMeaningfulFilterValue(filter.value);
+    }
+
+    return false;
+  });
+}
diff --git a/client/src/utils/formState.ts b/client/src/utils/formState.ts
new file mode 100644
index 000000000..63f82a494
--- /dev/null
+++ b/client/src/utils/formState.ts
@@ -0,0 +1,76 @@
+type ComparableDefaults = Record<string, unknown>;
+type ComparableOverride = unknown | ((normalized: Record<string, unknown>) => unknown);
+type ComparableOverrides = Partial<Record<string, ComparableOverride>>;
+
+export function normalizeComparableValue(value: unknown): unknown {
+  // Form dirty-state comparisons need stable primitives, not Dayjs wrappers or
+  // object identity, before the selected fields are serialized for comparison.
+  if (value === null || value === undefined) {
+    return value;
+  }
+
+  if (
+    typeof value === "object" &&
+    "isValid" in (value as Record<string, unknown>) &&
+    "toISOString" in (value as Record<string, unknown>)
+  ) {
+    const maybeDayjs = value as { isValid?: () => boolean; toISOString?: () => string };
+    if (
+      typeof maybeDayjs.isValid === "function" &&
+      maybeDayjs.isValid() &&
+      typeof maybeDayjs.toISOString === "function"
+    ) {
+      return maybeDayjs.toISOString();
+    }
+  }
+
+  if (Array.isArray(value)) {
+    return value.map(normalizeComparableValue);
+  }
+
+  if (typeof value === "object") {
+    const objectValue = value as Record<string, unknown>;
+    return Object.keys(objectValue)
+      .sort()
+      .reduce<Record<string, unknown>>((acc, key) => {
+        const normalizedValue = normalizeComparableValue(objectValue[key]);
+        if (normalizedValue !== undefined) {
+          acc[key] = normalizedValue;
+        }
+        return acc;
+      }, {});
+  }
+
+  return value;
+}
+
+export function toComparableState(
+  value: unknown,
+  defaults: ComparableDefaults,
+  overrides?: ComparableOverrides,
+): string | null {
+  if (value === null || value === undefined) {
+    return null;
+  }
+
+  const normalized = normalizeComparableValue(value);
+  const normalizedObject = normalized && typeof normalized === "object" ? (normalized as Record<string, unknown>) : {};
+
+  // Each form provides the fields it owns plus any UI-specific overrides, so
+  // dirty-state checks stay aligned with editable inputs instead of raw API payloads.
+  const comparableState = Object.keys(defaults).reduce<Record<string, unknown>>((acc, key) => {
+    const override = overrides?.[key];
+    if (typeof override === "function") {
+      acc[key] = override(normalizedObject);
+      return acc;
+    }
+    if (override !== undefined) {
+      acc[key] = override;
+      return acc;
+    }
+    acc[key] = normalizedObject[key] ?? defaults[key];
+    return acc;
+  }, {});
+
+  return JSON.stringify(comparableState);
+}
diff --git a/client/src/utils/saveload.ts b/client/src/utils/saveload.ts
index f3ba0fc6f..61bfb0a96 100644
--- a/client/src/utils/saveload.ts
+++ b/client/src/utils/saveload.ts
@@ -6,6 +6,19 @@ interface Pagination {
   pageSize: number;
 }
 
+function parseSavedJSON<T>(label: string, value: string | null, fallback: T, onError?: () => void): T {
+  if (!value) {
+    return fallback;
+  }
+  try {
+    return JSON.parse(value) as T;
+  } catch {
+    console.warn(`Ignoring malformed saved state for ${label}`);
+    onError?.();
+    return fallback;
+  }
+}
+
 export interface TableState {
   sorters: CrudSort[];
   filters: CrudFilter[];
@@ -15,27 +28,63 @@ export interface TableState {
 
 export function useInitialTableState(tableId: string): TableState {
   const [initialState] = useState(() => {
-    const savedSorters = hasHashProperty("sorters")
+    const hasHashSorters = hasHashProperty("sorters");
+    const hasHashFilters = hasHashProperty("filters");
+    const hasHashPagination = hasHashProperty("pagination");
+
+    const savedSorters = hasHashSorters
       ? getHashProperty("sorters")
       : isLocalStorageAvailable
         ? localStorage.getItem(`${tableId}-sorters`)
         : null;
-    const savedFilters = hasHashProperty("filters")
+    const savedFilters = hasHashFilters
       ? getHashProperty("filters")
       : isLocalStorageAvailable
         ? localStorage.getItem(`${tableId}-filters`)
         : null;
-    const savedPagination = hasHashProperty("pagination")
+    const savedPagination = hasHashPagination
       ? getHashProperty("pagination")
       : isLocalStorageAvailable
         ? localStorage.getItem(`${tableId}-pagination`)
         : null;
     const savedShowColumns = isLocalStorageAvailable ? localStorage.getItem(`${tableId}-showColumns`) : null;
 
-    const sorters = savedSorters ? JSON.parse(savedSorters) : [{ field: "id", order: "asc" }];
-    const filters = savedFilters ? JSON.parse(savedFilters) : [];
-    const pagination = savedPagination ? JSON.parse(savedPagination) : { page: 1, pageSize: 20 };
-    const showColumns = savedShowColumns ? JSON.parse(savedShowColumns) : undefined;
+    const sorters = parseSavedJSON<CrudSort[]>(
+      hasHashSorters ? "hash#sorters" : `${tableId}-sorters`,
+      savedSorters,
+      [{ field: "id", order: "asc" }],
+      hasHashSorters
+        ? () => removeURLHash("sorters")
+        : isLocalStorageAvailable
+          ? () => localStorage.removeItem(`${tableId}-sorters`)
+          : undefined,
+    );
+    const filters = parseSavedJSON<CrudFilter[]>(
+      hasHashFilters ? "hash#filters" : `${tableId}-filters`,
+      savedFilters,
+      [],
+      hasHashFilters
+        ? () => removeURLHash("filters")
+        : isLocalStorageAvailable
+          ? () => localStorage.removeItem(`${tableId}-filters`)
+          : undefined,
+    );
+    const pagination = parseSavedJSON<Pagination>(
+      hasHashPagination ? "hash#pagination" : `${tableId}-pagination`,
+      savedPagination,
+      { currentPage: 1, pageSize: 20 },
+      hasHashPagination
+        ? () => removeURLHash("pagination")
+        : isLocalStorageAvailable
+          ? () => localStorage.removeItem(`${tableId}-pagination`)
+          : undefined,
+    );
+    const showColumns = parseSavedJSON<string[] | undefined>(
+      `${tableId}-showColumns`,
+      savedShowColumns,
+      undefined,
+      isLocalStorageAvailable ? () => localStorage.removeItem(`${tableId}-showColumns`) : undefined,
+    );
     return { sorters, filters, pagination, showColumns };
   });
   return initialState;
@@ -92,8 +141,14 @@ export function useStoreInitialState(tableId: string, state: TableState) {
 
 export function useSavedState<T>(id: string, defaultValue: T) {
   const [state, setState] = useState<T>(() => {
-    const savedState = isLocalStorageAvailable ? localStorage.getItem(`savedStates-${id}`) : null;
-    return savedState ? JSON.parse(savedState) : defaultValue;
+    const storageKey = `savedStates-${id}`;
+    const savedState = isLocalStorageAvailable ? localStorage.getItem(storageKey) : null;
+    return parseSavedJSON(
+      storageKey,
+      savedState,
+      defaultValue,
+      isLocalStorageAvailable ? () => localStorage.removeItem(storageKey) : undefined,
+    );
   });
 
   useEffect(() => {