diff --git a/javascript/black-teal.css b/javascript/black-teal.css
index d1745666a..8397453b8 100644
--- a/javascript/black-teal.css
+++ b/javascript/black-teal.css
@@ -4,7 +4,7 @@
   --font: 'NotoSans';
   --font-mono: 'ui-monospace', 'Consolas', monospace;
   --font-size: 16px;
-  --primary-50: #7dffff;
+  --primary-50:  #7dffff;
   --primary-100: #72e8e8;
   --primary-200: #67d2d2;
   --primary-300: #5dbcbc;
@@ -15,7 +15,7 @@
   --primary-800: #2b5656;
   --primary-900: #224444;
   --primary-950: #193232;
-  --neutral-50: #f0f0f0;
+  --neutral-50:  #f0f0f0;
   --neutral-100: #e0e0e0;
   --neutral-200: #d0d0d0;
   --neutral-300: #b0b0b0;
@@ -30,14 +30,17 @@
   --inactive-color: var(--primary--800);
   --body-text-color: var(--neutral-100);
   --body-text-color-subdued: var(--neutral-300);
-  --background-color: #050505;
+  --background-color: black;
   --background-fill-primary: var(--neutral-700);
   --input-padding: 4px;
   --input-background-fill: var(--neutral-800);
   --input-shadow: none;
+  --button-primary-text-color: var(--neutral-100);
+  --button-primary-background-fill: var(--primary-600);
+  --button-primary-background-fill-hover: var(--primary-800);
   --button-secondary-text-color: var(--neutral-100);
-  --button-secondary-background-fill: linear-gradient(to bottom right, var(--neutral-400), var(--neutral-700));
-  --button-secondary-background-fill-hover: linear-gradient(to bottom right, var(--neutral-700), var(--neutral-400));
+  --button-secondary-background-fill: var(--neutral-600);
+  --button-secondary-background-fill-hover: var(--neutral-800);
   --block-title-text-color: var(--neutral-300);
   --radius-xxs: 0;
   --radius-xs: 1;
@@ -67,6 +70,8 @@ input[type=range]::-moz-range-thumb     { border: 0px solid #000000 !important;
 ::-webkit-scrollbar-thumb { background-color: var(--highlight-color); border-radius: var(--radius-lg); border-width: 0; box-shadow: 2px 2px 3px var(--neutral-950); }
 div.form { border-width: 0; box-shadow: none; background: transparent; overflow: visible; }
 
+.button-icon { font-size: 1.5em !important; margin: 0 !important; padding: 0 !important; height: 1.7em !important; min-height: unset !important; }
+
 /* gradio style classes */
 fieldset .gr-block.gr-box, label.block span { padding: 0; margin-top: -4px; }
 .border-2 { border-width: 0; }
@@ -210,11 +215,8 @@ textarea[rows="1"] { height: 33px !important; width: 99% !important; padding: 8p
   --button-cancel-border-color-hover: var(--button-cancel-border-color);
   --button-cancel-text-color: var(--neutral-50);
   --button-cancel-text-color-hover: var(--button-cancel-text-color);
-  --button-primary-background-fill: linear-gradient(to bottom right, var(--primary-500), var(--primary-800));
-  --button-primary-background-fill-hover: linear-gradient(to bottom right, var(--primary-500), var(--primary-300));
   --button-primary-border-color: var(--primary-500);
   --button-primary-border-color-hover: var(--button-primary-border-color);
-  --button-primary-text-color: var(--neutral-50);
   --button-primary-text-color-hover: var(--button-primary-text-color);
   --button-secondary-border-color: var(--neutral-600);
   --button-secondary-border-color-hover: var(--button-secondary-border-color);
diff --git a/javascript/setHints.js b/javascript/setHints.js
index e7bbe0d7b..66720056b 100644
--- a/javascript/setHints.js
+++ b/javascript/setHints.js
@@ -41,6 +41,25 @@ async function validateHints(elements, data) {
   log('in locale but not ui:', missingUI);
 }
 
+async function replaceButtonText(el) {
+  // https://www.nerdfonts.com/cheat-sheet
+  // use unicode of icon with format nf-md-<icon>_circle
+  const textIcons = {
+    Generate: '\uf144',
+    Enqueue: '\udb81\udc17',
+    Stop: '\udb81\ude66',
+    Skip: '\udb81\ude61',
+    Pause: '\udb80\udfe5',
+    Restore: '\udb82\udd9b',
+    Clear: '\udb80\udd59',
+    Networks: '\uf261',
+  };
+  if (textIcons[el.innerText]) {
+    el.classList.add('button-icon');
+    el.innerText = textIcons[el.innerText];
+  }
+}
+
 async function setHints() {
   if (localeData.finished) return;
   if (localeData.data.length === 0) {
@@ -66,6 +85,7 @@ async function setHints() {
       localized++;
       el.textContent = found.localized;
     }
+    // replaceButtonText(el);
     if (found?.hint?.length > 0) {
       hints++;
       if (localeData.type === 1) {