diff --git a/frontend/src/index.css b/frontend/src/index.css
index a195e44..f366b39 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -44,6 +44,7 @@
   --badge-blue-text: #63b3ed;
 }
 
+  --color-default: #000000;
 /* Ensure all interactive elements show pointer cursor */
 button,
 [role="button"],
diff --git a/frontend/src/melodies/MelodyForm.jsx b/frontend/src/melodies/MelodyForm.jsx
index 9282eed..ed2db99 100644
--- a/frontend/src/melodies/MelodyForm.jsx
+++ b/frontend/src/melodies/MelodyForm.jsx
@@ -219,7 +219,7 @@ export default function MelodyForm() {
             form="melody-form"
             disabled={saving || uploading}
             className="px-4 py-2 text-sm rounded-md disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
-            style={{ backgroundColor: "var(--btn-primary)", color: "var(--text-heading)" }}
+            style={{ backgroundColor: "var(--btn-primary)", color: "var(--text-white)" }}
           >
             {uploading ? "Uploading files..." : saving ? "Saving..." : isEdit ? "Update Melody" : "Create Melody"}
           </button>
@@ -333,11 +333,10 @@ export default function MelodyForm() {
                         <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" />
                       </svg>
                       Custom
-                      <input type="color" value={information.color ? normalizeColor(information.color) : "#000000"} onChange={(e) => updateInfo("color", e.target.value)} className="absolute inset-0 opacity-0 w-full h-full cursor-pointer" />
+                      <input type="color" value={normalizeColor(information.color)} onChange={(e) => updateInfo("color", e.target.value)} className="absolute inset-0 opacity-0 w-full h-full cursor-pointer" />
                     </label>
                   </div>
-                </div>
-                        style={{ backgroundColor: "var(--btn-primary)", color: "var(--text-white)" }}
+                  </div>
                 <div className="flex items-center gap-2 pt-2">
                   <input type="checkbox" id="isTrueRing" checked={information.isTrueRing} onChange={(e) => updateInfo("isTrueRing", e.target.checked)} className="h-4 w-4 rounded" />
                   <label htmlFor="isTrueRing" className="text-sm font-medium" style={labelStyle}>True Ring</label>
diff --git a/frontend/src/melodies/MelodySettings.jsx b/frontend/src/melodies/MelodySettings.jsx
index 80b0041..e41ddb8 100644
--- a/frontend/src/melodies/MelodySettings.jsx
+++ b/frontend/src/melodies/MelodySettings.jsx
@@ -23,8 +23,11 @@ export default function MelodySettings() {
   const [success, setSuccess] = useState("");
 
   const [langToAdd, setLangToAdd] = useState("");
-  const [colorToAdd, setColorToAdd] = useState("#FF0000");
-  const [colorHexInput, setColorHexInput] = useState("#FF0000");
+  const cssColorDefault = (typeof window !== "undefined" && window.getComputedStyle)
+    ? getComputedStyle(document.documentElement).getPropertyValue("--color-default").trim()
+    : "var(--color-default)";
+  const [colorToAdd, setColorToAdd] = useState(cssColorDefault);
+  const [colorHexInput, setColorHexInput] = useState(cssColorDefault);
   const [durationToAdd, setDurationToAdd] = useState("");
 
   useEffect(() => {
@@ -231,7 +234,7 @@ export default function MelodySettings() {
               type="text"
               value={colorHexInput}
               onChange={(e) => { setColorHexInput(e.target.value); if (/^#[0-9A-Fa-f]{6}$/.test(e.target.value)) setColorToAdd(e.target.value); }}
-              placeholder="#FF0000"
+              placeholder="#RRGGBB"
               className="w-28 px-3 py-2 rounded-md text-sm font-mono border"
             />
             <button type="button" onClick={addColor} disabled={saving} className={btnPrimary} style={{ backgroundColor: "var(--btn-primary)", color: "var(--text-white)" }}>Add</button>
diff --git a/frontend/src/melodies/melodyUtils.js b/frontend/src/melodies/melodyUtils.js
index be0aab0..ab4c6bb 100644
--- a/frontend/src/melodies/melodyUtils.js
+++ b/frontend/src/melodies/melodyUtils.js
@@ -48,7 +48,17 @@ export function getLocalizedValue(value, lang, fallback = "") {
  * Converts "0xFFRRGGBB" or "0xRRGGBB" format to "#RRGGBB".
  */
 export function normalizeColor(val) {
-  if (!val) return "#000000";
+  if (!val) {
+    try {
+      if (typeof window !== "undefined" && window.getComputedStyle) {
+        const v = getComputedStyle(document.documentElement).getPropertyValue("--color-default").trim();
+        if (v) return v;
+      }
+    } catch (e) {
+      // fallthrough
+    }
+    return "var(--color-default)";
+  }
   if (val.startsWith("0x") || val.startsWith("0X")) {
     const hex = val.slice(2);
     // If 8 chars (AARRGGBB), skip alpha