diff --git a/jrx/pages/gaju-colors.css b/jrx/pages/gaju-colors.css
new file mode 100644
index 0000000..fa5b5b7
--- /dev/null
+++ b/jrx/pages/gaju-colors.css
@@ -0,0 +1,19 @@
+:root {
+    --b1: #FBFCFB;
+    --b2: #D6DAD8;
+    --b3: #B9BCb9;
+    --b4: #969A98;
+    --b5: #7C7C7C;
+    --b6: #545454;
+    --b7: #343434;
+    --b8: #0A0B0A;
+
+    --g1: #c1d8c5;
+    --g2: #9ab6a1;
+    --g3: #88a28d;
+    --g4: #607e68;
+    --g5: #41664b;
+    --g6: #345c3e;
+    --g7: #224d2d;
+    --g8: #0a2f14;
+}
diff --git a/jrx/pages/gb.html b/jrx/pages/gb.html
index 2317fc6..982a8df 100644
--- a/jrx/pages/gb.html
+++ b/jrx/pages/gb.html
@@ -6,14 +6,14 @@
     <meta charset="utf-8">
     <style type="text/css">
         html, body {
-            background-color: #D0F5F7;
+            background-color: #FBFCFB;
             font-family: monospace, sans-serif;
             font-size: '0.7em';
             height: 78%;
         }
 
         pre {
-            background-color: #E8E0F8;
+            background-color: #EBECEB;
             overflow: scroll;
             box-sizing: border-box;
             width: 100%;
diff --git a/jrx/pages/popup.html b/jrx/pages/popup.html
index e257752..1bfd722 100644
--- a/jrx/pages/popup.html
+++ b/jrx/pages/popup.html
@@ -3,18 +3,47 @@
 <head>
     <meta charset="utf-8">
     <style type="text/css">
+        @import "gaju-colors.css";
+
         body {
-            background:  #d6efff;
+            background: var(--b1);
+            color: --var(g8);
             width: 400px;
             font-family: monospace, sans-serif;
             font-size: 0.7em;
         }
+
+        #jr-hdr {
+            border: 2px solid var(--g4);
+            border-radius: 5px;
+            width: 100%;
+            background: var(--g2);
+        }
+
+        .psection {
+            background: var(--b2);
+            border: 1px solid var(--g4);
+            border-radius: 5px;
+            width: 97%;
+            padding: 5px;
+            margin-top: 5px;
+        }
+
+        .account-active {
+            background: var(--g1);
+            color: var(--g7);
+        }
+
+        .account-inactive {
+            background: var(--b4);
+            color: var(--g4);
+        }
     </style>
 </head>
 
 <body>
 
-<table width="100%" style="background: #dad1ff; border: 2px solid #6c5d96; border-radius: 5px;">
+<table id="jr-hdr">
     <tr>
         <td><img src="../art/jrx-icon-48.png" style="width: 32px; height: 32px;"></td>
         <td style="font-size: 32px; text-align: center; font-weight: bold">
@@ -23,7 +52,7 @@
     </tr>
 </table>
 
-<div style="margin-top: 5px; width: 95%; background: #d9ffd6; border: 1px solid #6c5d96; border-radius: 5px; padding: 5px;">
+<div class="psection">
     <table >
         <tr>
             <td><img src="../art/keypair.svg" style="width: 32px; height: 32px;"></td>
@@ -46,7 +75,7 @@
 </div>
 
 <!-- generate new keypair -->
-<div style="margin-top: 5px; width: 95%; background: #d6ffd9; border: 1px solid #6c5d96; border-radius: 5px; padding: 5px;">
+<div class="psection">
     <table >
         <tr>
             <td><img src="../art/keypair.svg" style="width: 32px; height: 32px;"></td>
@@ -64,7 +93,7 @@
 </div>
 
 <!-- faert recovery -->
-<div style="margin-top: 5px; width: 95%; background: #ffd6d9; border: 1px solid #6c5d96; border-radius: 5px; padding: 5px;">
+<div class="psection">
     <table >
         <tr>
             <td><img src="../art/keypair.svg" style="width: 32px; height: 32px;"></td>
@@ -83,17 +112,10 @@
         <br>
         <button id="faert-btn">Recover Keypair from GajuPhrase</button>
     </form>
-    <!-- recover from seed phrase
-            <form>
-                <label for="seed-input">Seed Phrase:</label>
-                <input id="seed-input"></input>
-                <button id="seed-btn">Recover Keypair from Seed Phrase</button>
-            </form>
-    -->
 </div>
 
 <!-- network id -->
-<div style="margin-top: 5px; width: 95%; background: #d6d9ff; border: 1px solid #6c5d96; border-radius: 5px; padding: 5px;">
+<div class="psection">
     <table >
         <tr>
             <td><img src="../art/keypair.svg" style="width: 32px; height: 32px;"></td>
diff --git a/jrx/src/popup.ts b/jrx/src/popup.ts
index c2ae7b9..05c8904 100644
--- a/jrx/src/popup.ts
+++ b/jrx/src/popup.ts
@@ -253,12 +253,12 @@ pi_repop
             this_li.appendChild(rkp_ul);
 
 
-            // if active, make background green
+            // if active, make background "active"
             if (this_rkp.active)
-                this_li.style.background = 'green';
-            // otherwise make background red and add activate li
+                this_li.classList.add('account-active');
+            // otherwise make background "inactive" and add activate li
             else {
-                this_li.style.background = 'red';
+                this_li.classList.add('account-inactive');
                 let activate_li = document.createElement('li');
                 let activate_a = document.createElement('a');
                 activate_a.innerHTML = 'Switch to this key';
