diff --git a/frontend/src/index.css b/frontend/src/index.css
index f366b39..a195e44 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -44,7 +44,6 @@
   --badge-blue-text: #63b3ed;
 }
 
-  --color-default: #000000;
 /* Ensure all interactive elements show pointer cursor */
 button,
 [role="button"],
diff --git a/frontend/src/melodies/MelodyDetail.jsx b/frontend/src/melodies/MelodyDetail.jsx
index 49d7744..e361355 100644
--- a/frontend/src/melodies/MelodyDetail.jsx
+++ b/frontend/src/melodies/MelodyDetail.jsx
@@ -143,7 +143,7 @@ export default function MelodyDetail() {
             <button
               onClick={() => setShowDelete(true)}
               className="px-4 py-2 text-sm rounded-md transition-colors"
-              style={{ backgroundColor: "var(--danger)", color: "var(--text-white)" }}
+              style={{ backgroundColor: "var(--danger-btn)", color: "var(--text-white)" }}
             >
               Delete
             </button>
diff --git a/frontend/src/melodies/MelodyForm.jsx b/frontend/src/melodies/MelodyForm.jsx
index ed2db99..0dcd3c4 100644
--- a/frontend/src/melodies/MelodyForm.jsx
+++ b/frontend/src/melodies/MelodyForm.jsx
@@ -336,7 +336,7 @@ export default function MelodyForm() {
                       <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>
+                </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>