diff --git a/frontend/src/auth/LoginPage.jsx b/frontend/src/auth/LoginPage.jsx
index 227d801..b5ef512 100644
--- a/frontend/src/auth/LoginPage.jsx
+++ b/frontend/src/auth/LoginPage.jsx
@@ -97,7 +97,7 @@ export default function LoginPage() {
             className="w-full py-2 rounded-md transition-colors disabled:opacity-50 disabled:cursor-not-allowed text-sm font-medium"
             style={{
               backgroundColor: "var(--btn-primary)",
-              color: "var(--text-heading)",
+                color: "#fff",
             }}
             onMouseEnter={(e) => !isLoading && (e.target.style.backgroundColor = "var(--btn-primary-hover)")}
             onMouseLeave={(e) => (e.target.style.backgroundColor = "var(--btn-primary)")}
diff --git a/frontend/src/components/ConfirmDialog.jsx b/frontend/src/components/ConfirmDialog.jsx
index a0b629a..3f0c7a6 100644
--- a/frontend/src/components/ConfirmDialog.jsx
+++ b/frontend/src/components/ConfirmDialog.jsx
@@ -35,7 +35,7 @@ export default function ConfirmDialog({ open, title, message, onConfirm, onCance
             onClick={onConfirm}
             className="px-4 py-2 text-sm rounded-md transition-colors"
             style={{
-              backgroundColor: "var(--danger-btn)",
+              backgroundColor: "var(--danger)",
               color: "#fff",
             }}
           >
diff --git a/frontend/src/devices/DeviceDetail.jsx b/frontend/src/devices/DeviceDetail.jsx
index 73668f6..1311070 100644
--- a/frontend/src/devices/DeviceDetail.jsx
+++ b/frontend/src/devices/DeviceDetail.jsx
@@ -135,14 +135,14 @@ export default function DeviceDetail() {
             <button
               onClick={() => navigate(`/devices/${id}/edit`)}
               className="px-4 py-2 text-sm rounded-md transition-colors"
-              style={{ backgroundColor: "var(--btn-primary)", color: "var(--text-heading)" }}
+              style={{ backgroundColor: "var(--text-link)", color: "var(--text-white)" }}
             >
               Edit
             </button>
             <button
               onClick={() => setShowDelete(true)}
               className="px-4 py-2 text-sm rounded-md transition-colors"
-              style={{ backgroundColor: "var(--danger-btn)", color: "#fff" }}
+              style={{ backgroundColor: "var(--danger)", color: "#fff" }}
             >
               Delete
             </button>
diff --git a/frontend/src/devices/DeviceForm.jsx b/frontend/src/devices/DeviceForm.jsx
index f705af6..482e153 100644
--- a/frontend/src/devices/DeviceForm.jsx
+++ b/frontend/src/devices/DeviceForm.jsx
@@ -225,7 +225,7 @@ export default function DeviceForm() {
             form="device-form"
             disabled={saving}
             className="px-4 py-2 text-sm rounded-md hover:opacity-90 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)" }}
           >
             {saving ? "Saving..." : isEdit ? "Update Device" : "Create Device"}
           </button>
diff --git a/frontend/src/devices/DeviceList.jsx b/frontend/src/devices/DeviceList.jsx
index 06df5a2..1635835 100644
--- a/frontend/src/devices/DeviceList.jsx
+++ b/frontend/src/devices/DeviceList.jsx
@@ -65,7 +65,7 @@ export default function DeviceList() {
           <button
             onClick={() => navigate("/devices/new")}
             className="px-4 py-2 text-sm rounded-md hover:opacity-90 transition-colors cursor-pointer"
-            style={{ backgroundColor: "var(--btn-primary)", color: "var(--text-heading)" }}
+            style={{ backgroundColor: "var(--btn-primary)", color: "var(--text-white)" }}
           >
             Add Device
           </button>
@@ -219,7 +219,7 @@ export default function DeviceList() {
                           <button
                             onClick={() => navigate(`/devices/${device.id}/edit`)}
                             className="hover:opacity-80 text-xs cursor-pointer"
-                            style={{ color: "var(--accent)" }}
+                            style={{ color: "var(--text-link)" }}
                           >
                             Edit
                           </button>
diff --git a/frontend/src/index.css b/frontend/src/index.css
index b19593f..9baade4 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -18,6 +18,8 @@
   --text-secondary: #9ca3af;
   --text-muted: #9ca3af;
   --text-heading: #e3e5ea;
+  --text-white: #f7f7f7;
+  --text-link: #93befa;
 
   --accent: #74b816;
   --accent-hover: #82c91e;
diff --git a/frontend/src/melodies/MelodyDetail.jsx b/frontend/src/melodies/MelodyDetail.jsx
index 18b12e4..932c6c0 100644
--- a/frontend/src/melodies/MelodyDetail.jsx
+++ b/frontend/src/melodies/MelodyDetail.jsx
@@ -136,14 +136,14 @@ export default function MelodyDetail() {
             <button
               onClick={() => navigate(`/melodies/${id}/edit`)}
               className="px-4 py-2 text-sm rounded-md transition-colors"
-              style={{ backgroundColor: "var(--btn-primary)", color: "var(--text-heading)" }}
+              style={{ backgroundColor: "var(--text-link)", color: "var(--text-white)" }}
             >
               Edit
             </button>
             <button
               onClick={() => setShowDelete(true)}
               className="px-4 py-2 text-sm rounded-md transition-colors"
-              style={{ backgroundColor: "var(--danger-btn)", color: "#fff" }}
+              style={{ backgroundColor: "var(--danger)", color: "#fff" }}
             >
               Delete
             </button>
diff --git a/frontend/src/melodies/MelodyForm.jsx b/frontend/src/melodies/MelodyForm.jsx
index 4f7748e..9282eed 100644
--- a/frontend/src/melodies/MelodyForm.jsx
+++ b/frontend/src/melodies/MelodyForm.jsx
@@ -337,7 +337,7 @@ export default function MelodyForm() {
                     </label>
                   </div>
                 </div>
-
+                        style={{ backgroundColor: "var(--btn-primary)", color: "var(--text-white)" }}
                 <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/MelodyList.jsx b/frontend/src/melodies/MelodyList.jsx
index 50a1053..ce6002f 100644
--- a/frontend/src/melodies/MelodyList.jsx
+++ b/frontend/src/melodies/MelodyList.jsx
@@ -256,7 +256,7 @@ export default function MelodyList() {
           <button
             onClick={() => navigate("/melodies/new")}
             className="px-4 py-2 text-sm rounded-md transition-colors cursor-pointer"
-            style={{ backgroundColor: "var(--btn-primary)", color: "var(--text-heading)" }}
+              style={{ backgroundColor: "var(--btn-primary)", color: "var(--text-white)" }}
           >
             Add Melody
           </button>
@@ -443,7 +443,7 @@ export default function MelodyList() {
                           <button
                             onClick={() => navigate(`/melodies/${row.id}/edit`)}
                             className="text-xs cursor-pointer"
-                            style={{ color: "var(--accent)" }}
+                            style={{ color: "var(--text-link)" }}
                           >
                             Edit
                           </button>
diff --git a/frontend/src/melodies/MelodySettings.jsx b/frontend/src/melodies/MelodySettings.jsx
index b6aa15f..b9625c5 100644
--- a/frontend/src/melodies/MelodySettings.jsx
+++ b/frontend/src/melodies/MelodySettings.jsx
@@ -192,7 +192,7 @@ export default function MelodySettings() {
               <option value="">Select language...</option>
               {availableLangsToAdd.map((l) => (<option key={l.code} value={l.code}>{l.name} ({l.code})</option>))}
             </select>
-            <button type="button" onClick={addLanguage} disabled={!langToAdd || saving} className={btnPrimary} style={{ backgroundColor: "var(--btn-primary)", color: "var(--text-heading)" }}>Add</button>
+            <button type="button" onClick={addLanguage} disabled={!langToAdd || saving} className={btnPrimary} style={{ backgroundColor: "var(--btn-primary)", color: "var(--text-white)" }}>Add</button>
           </div>
         </section>
 
@@ -234,7 +234,7 @@ export default function MelodySettings() {
               placeholder="#FF0000"
               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-heading)" }}>Add</button>
+            <button type="button" onClick={addColor} disabled={saving} className={btnPrimary} style={{ backgroundColor: "var(--btn-primary)", color: "var(--text-white)" }}>Add</button>
           </div>
         </section>
 
@@ -272,7 +272,7 @@ export default function MelodySettings() {
               placeholder="Seconds (e.g. 45)"
               className="w-40 px-3 py-2 rounded-md text-sm border"
             />
-            <button type="button" onClick={addDuration} disabled={saving || !durationToAdd} className={btnPrimary} style={{ backgroundColor: "var(--btn-primary)", color: "var(--text-heading)" }}>Add</button>
+            <button type="button" onClick={addDuration} disabled={saving || !durationToAdd} className={btnPrimary} style={{ backgroundColor: "var(--btn-primary)", color: "var(--text-white)" }}>Add</button>
           </div>
         </section>
       </div>
diff --git a/frontend/src/melodies/TranslationModal.jsx b/frontend/src/melodies/TranslationModal.jsx
index aca053c..795405e 100644
--- a/frontend/src/melodies/TranslationModal.jsx
+++ b/frontend/src/melodies/TranslationModal.jsx
@@ -83,7 +83,7 @@ export default function TranslationModal({
               type="button"
               onClick={handleSave}
               className="px-4 py-2 text-sm rounded-md transition-colors"
-              style={{ backgroundColor: "var(--btn-primary)", color: "var(--text-heading)" }}
+              style={{ backgroundColor: "var(--btn-primary)", color: "var(--text-white)" }}
             >
               Save Translations
             </button>