diff --git a/web/src/pages/Settings.tsx b/web/src/pages/Settings.tsx
index afa003f94f..fd19da4f97 100644
--- a/web/src/pages/Settings.tsx
+++ b/web/src/pages/Settings.tsx
@@ -1516,7 +1516,7 @@ export default function Settings() {
               <div className="sticky bottom-0 z-50 mt-2 bg-background p-4">
                 <div className="flex flex-col items-center gap-2">
                   <div className="flex items-center gap-2">
-                    <span className="text-sm text-danger">
+                    <span className="text-sm text-unsaved">
                       {t("unsavedChanges", {
                         ns: "views/settings",
                         defaultValue: "You have unsaved changes",
diff --git a/web/src/views/settings/SingleSectionPage.tsx b/web/src/views/settings/SingleSectionPage.tsx
index 1c0316db47..c054ba7f18 100644
--- a/web/src/views/settings/SingleSectionPage.tsx
+++ b/web/src/views/settings/SingleSectionPage.tsx
@@ -212,7 +212,7 @@ export function SingleSectionPage({
             {sectionStatus.hasChanges && (
               <Badge
                 variant="secondary"
-                className="cursor-default bg-danger text-xs text-white hover:bg-danger"
+                className="cursor-default bg-unsaved text-xs text-black hover:bg-unsaved"
               >
                 {t("button.modified", {
                   ns: "common",
@@ -250,7 +250,7 @@ export function SingleSectionPage({
           {sectionStatus.hasChanges && (
             <Badge
               variant="secondary"
-              className="cursor-default bg-danger text-xs text-white hover:bg-danger"
+              className="cursor-default bg-unsaved text-xs text-black hover:bg-unsaved"
             >
               {t("button.modified", { ns: "common", defaultValue: "Modified" })}
             </Badge>