diff --git a/js/foam/apps/calc/Calc.js b/js/foam/apps/calc/Calc.js
index 41caae36d..f6bd5def8 100644
--- a/js/foam/apps/calc/Calc.js
+++ b/js/foam/apps/calc/Calc.js
@@ -190,7 +190,7 @@ CLASS({
       name: "mult",
       label: "×",
       speechLabel: "multiply",
-      keyboardShortcuts: [ "*" ],
+      keyboardShortcuts: [ "*", "x" ],
       f: function (a1, a2) { return a1 * a2; }
     },
     {
diff --git a/js/foam/apps/calc/CalcView.js b/js/foam/apps/calc/CalcView.js
index 76eb6200f..5120c6fb8 100644
--- a/js/foam/apps/calc/CalcView.js
+++ b/js/foam/apps/calc/CalcView.js
@@ -285,18 +285,18 @@ CLASS({
       justify-content: center;
       display: flex;
       align-items: center;
-      background-color: #4b4b4b;
+      background-color: #333333;
     }
 
     .rhs-ops {
       border-left-width: 1px;
       border-left-style: solid;
       border-left-color: rgb(68, 68, 68);
-      background: #777;
+      background: #4a4a4a;
     }
 
     .rhs-ops .button {
-      background-color: #777;
+      background-color: #4a4a4a;
     }
 
     .history {
@@ -340,20 +340,20 @@ CLASS({
 
     .secondaryButtons {
       padding-left: 30px;
-      background: rgb(52, 153, 128);
+      background: #00796b;
     }
 
     .secondaryButtons .button {
-      background: rgb(52, 153, 128);
+      background: #00796b;
     }
 
     .tertiaryButtons {
       padding-left: 35px;
-      background: rgb(29, 233, 182);
+      background: #1DE9B6;
     }
 
     .tertiaryButtons .button {
-      background: rgb(29, 233, 182);
+      background: #1DE9B6;
     }
 
     .keypad {
diff --git a/js/foam/apps/calc/MainButtonsView.js b/js/foam/apps/calc/MainButtonsView.js
index a99a6c1a6..937aa7569 100644
--- a/js/foam/apps/calc/MainButtonsView.js
+++ b/js/foam/apps/calc/MainButtonsView.js
@@ -18,43 +18,43 @@ CLASS({
   ],
   templates: [
     function toHTML() {/*
-      <div id="%%id" class="buttons button-row" style="background:#4b4b4b;">
+      <div id="%%id" class="buttons button-row" style="background:#121212;">
         <div class="button-column" style="flex-grow: 3;-webkit-flex-grow: 3;">
           <div class="button-row">
-            $$7{tabIndex: 101, arrowNav: ['.f1', '[4]',   null, '[8]']}
-            $$8{tabIndex: 102, arrowNav: ['.f1', '[5]',  '[7]', '[9]']}
-            $$9{tabIndex: 103, arrowNav: ['.f1', '[6]',  '[8]', '[ac]' ]}
+            $$7{tabIndex: 101, haloColor: 'rgba(255, 255, 255, 0.3)', arrowNav: ['.f1', '[4]',   null, '[8]']}
+            $$8{tabIndex: 102, haloColor: 'rgba(255, 255, 255, 0.3)', arrowNav: ['.f1', '[5]',  '[7]', '[9]']}
+            $$9{tabIndex: 103, haloColor: 'rgba(255, 255, 255, 0.3)', arrowNav: ['.f1', '[6]',  '[8]', '[ac]' ]}
           </div>
           <div class="button-row">
-            $$4{tabIndex: 104, arrowNav: ['[7]', '[1]',   null, '[5]']}
-            $$5{tabIndex: 105, arrowNav: ['[8]', '[2]',  '[4]', '[6]']}
-            $$6{tabIndex: 106, arrowNav: ['[9]', '[3]',  '[5]', '[plus]']}
+            $$4{tabIndex: 104, haloColor: 'rgba(255, 255, 255, 0.3)', arrowNav: ['[7]', '[1]',   null, '[5]']}
+            $$5{tabIndex: 105, haloColor: 'rgba(255, 255, 255, 0.3)', arrowNav: ['[8]', '[2]',  '[4]', '[6]']}
+            $$6{tabIndex: 106, haloColor: 'rgba(255, 255, 255, 0.3)', arrowNav: ['[9]', '[3]',  '[5]', '[plus]']}
          </div>
           <div class="button-row">
-            $$1{tabIndex: 107, arrowNav: ['[4]', '[point]',  null,  '[2]']}
-            $$2{tabIndex: 108, arrowNav: ['[5]', '[0]',      '[1]',  '[3]']}
-            $$3{tabIndex: 109, arrowNav: ['[6]', '[equals]', '[2]', '[minus]']}
+            $$1{tabIndex: 107, haloColor: 'rgba(255, 255, 255, 0.3)', arrowNav: ['[4]', '[point]',  null,  '[2]']}
+            $$2{tabIndex: 108, haloColor: 'rgba(255, 255, 255, 0.3)', arrowNav: ['[5]', '[0]',      '[1]',  '[3]']}
+            $$3{tabIndex: 109, haloColor: 'rgba(255, 255, 255, 0.3)', arrowNav: ['[6]', '[equals]', '[2]', '[minus]']}
           </div>
           <div class="button-row">
-            $$point{tabIndex: 111,  arrowNav: ['[1]', null,  null,     '[0]']}
-            $$0{tabIndex: 111,      arrowNav: ['[2]', null, '[point]', '[equals]']}
-            $$equals{tabIndex: 112, arrowNav: ['[3]', null, '[0]',     '[mult]']}
+            $$point{tabIndex: 111, haloColor: 'rgba(255, 255, 255, 0.3)',  arrowNav: ['[1]', null,  null,     '[0]']}
+            $$0{tabIndex: 111, haloColor: 'rgba(255, 255, 255, 0.3)',      arrowNav: ['[2]', null, '[point]', '[equals]']}
+            $$equals{tabIndex: 112, haloColor: 'rgba(255, 255, 255, 0.3)', arrowNav: ['[3]', null, '[0]',     '[mult]']}
           </div>
         </div>
         <%
         this.X.registerModel(this.CalcButton.xbind({
-          background: '#777',
+          background: '#4a4a4a',
           width:  70,
           height: 45,
           font:   '300 26px Roboto'
         }), 'foam.ui.ActionButton');
         %>
         <div class="button-column rhs-ops" style="flex-grow: 1;-webkit-flex-grow: 1;padding-top: 7px; padding-bottom: 10px;">
-          $$ac{tabIndex: 201,    arrowNav: ['.f1',         '[plus]',     '[9]',      '[backspace]'], font: '300 24px Roboto'}
-          $$plus{tabIndex: 202,  arrowNav: ['[ac]', '[minus]',    '[6]',      '[e]']}
-          $$minus{tabIndex: 203, arrowNav: ['[plus]',      '[div]',   '[3]',      '[inv]']}
-          $$div{tabIndex: 204,   arrowNav: ['[minus]',     '[mult]', '[3]',      '[inv]']}
-          $$mult{tabIndex: 205,  arrowNav: ['[div]',     null,        '[equals]', '[sign]']}
+          $$ac{tabIndex: 201,    haloColor: 'rgba(255, 255, 255, 0.4)', arrowNav: ['.f1',         '[plus]',     '[9]',      '[backspace]'], font: '300 24px Roboto'}
+          $$plus{tabIndex: 202,  haloColor: 'rgba(255, 255, 255, 0.4)', arrowNav: ['[ac]', '[minus]',    '[6]',      '[e]']}
+          $$minus{tabIndex: 203, haloColor: 'rgba(255, 255, 255, 0.4)', arrowNav: ['[plus]',      '[div]',   '[3]',      '[inv]']}
+          $$div{tabIndex: 204,   haloColor: 'rgba(255, 255, 255, 0.4)', arrowNav: ['[minus]',     '[mult]', '[3]',      '[inv]']}
+          $$mult{tabIndex: 205,  haloColor: 'rgba(255, 255, 255, 0.4)', arrowNav: ['[div]',     null,        '[equals]', '[sign]']}
         </div>
       </div>
     */}
diff --git a/js/foam/apps/calc/SecondaryButtonsView.js b/js/foam/apps/calc/SecondaryButtonsView.js
index 14534c779..f74c9a184 100644
--- a/js/foam/apps/calc/SecondaryButtonsView.js
+++ b/js/foam/apps/calc/SecondaryButtonsView.js
@@ -20,7 +20,7 @@ CLASS({
     function toHTML() {/*
           <%
           this.X.registerModel(this.CalcButton.xbind({
-            background: 'rgb(52, 153, 128)',
+            background: '#00796b',
             width:  61,
             height: 61,
             font:   '300 20px Roboto'
@@ -29,28 +29,28 @@ CLASS({
           <div id="%%id" class="buttons button-row secondaryButtons">
             <div class="button-column" style="flex-grow: 1;-webkit-flex-grow: 1;">
               <div class="button-row">
-                $$backspace{tabIndex: 311, arrowNav: ['.f1', '[e]',    '[ac]',         '[round]'], label: '⌫'}
-                $$round{tabIndex: 312,     arrowNav: ['.f1', '[ln]',   '[backspace]',  '[fetch]']}
-                $$fetch{tabIndex: 313,     arrowNav: ['.f1', '[log]',  '[round]',      '[store]']}
-                $$store{tabIndex: 314,     arrowNav: ['.f1', '[exp]',  '[fetch]',      '[deg]']}
+                $$backspace{tabIndex: 311, haloColor: 'rgba(255, 255, 255, 0.4)', arrowNav: ['.f1', '[e]',    '[ac]',         '[round]'], label: '⌫'}
+                $$round{tabIndex: 312,     haloColor: 'rgba(255, 255, 255, 0.4)', arrowNav: ['.f1', '[ln]',   '[backspace]',  '[fetch]']}
+                $$fetch{tabIndex: 313,     haloColor: 'rgba(255, 255, 255, 0.4)', arrowNav: ['.f1', '[log]',  '[round]',      '[store]']}
+                $$store{tabIndex: 314,     haloColor: 'rgba(255, 255, 255, 0.4)', arrowNav: ['.f1', '[exp]',  '[fetch]',      '[deg]']}
               </div>
               <div class="button-row">
-                $$e{tabIndex: 321,   arrowNav: ['[backspace]', '[inv]',     '[plus]',   '[ln]']}
-                $$ln{tabIndex: 322,  arrowNav: ['[round]',     '[pow]',     '[e]',      '[log]']}
-                $$log{tabIndex: 323, arrowNav: ['[fetch]',     '[sqroot]',  '[ln]',     '[exp]']}
-                $$exp{tabIndex: 324, arrowNav: ['[store]',     '[root]',    '[log]',    '[sin]']}
+                $$e{tabIndex: 321,   haloColor: 'rgba(255, 255, 255, 0.4)', arrowNav: ['[backspace]', '[inv]',     '[plus]',   '[ln]']}
+                $$ln{tabIndex: 322,  haloColor: 'rgba(255, 255, 255, 0.4)', arrowNav: ['[round]',     '[pow]',     '[e]',      '[log]']}
+                $$log{tabIndex: 323, haloColor: 'rgba(255, 255, 255, 0.4)', arrowNav: ['[fetch]',     '[sqroot]',  '[ln]',     '[exp]']}
+                $$exp{tabIndex: 324, haloColor: 'rgba(255, 255, 255, 0.4)', arrowNav: ['[store]',     '[root]',    '[log]',    '[sin]']}
               </div>
               <div class="button-row">
-                $$inv{tabIndex: 331,    arrowNav: ['[e]',    '[sign]',     '[div]',     '[pow]']}
-                $$pow{tabIndex: 332,    arrowNav: ['[ln]',   '[percent]',  '[inv]',     '[sqroot]']}
-                $$sqroot{tabIndex: 333, arrowNav: ['[log]',  '[square]',   '[pow]',     '[root]']}
-                $$root{tabIndex: 334,   arrowNav: ['[exp]',  '[pi]',       '[sqroot]',  '[cos]']}
+                $$inv{tabIndex: 331,    haloColor: 'rgba(255, 255, 255, 0.4)', arrowNav: ['[e]',    '[sign]',     '[div]',     '[pow]']}
+                $$pow{tabIndex: 332,    haloColor: 'rgba(255, 255, 255, 0.4)', arrowNav: ['[ln]',   '[percent]',  '[inv]',     '[sqroot]']}
+                $$sqroot{tabIndex: 333, haloColor: 'rgba(255, 255, 255, 0.4)', arrowNav: ['[log]',  '[square]',   '[pow]',     '[root]']}
+                $$root{tabIndex: 334,   haloColor: 'rgba(255, 255, 255, 0.4)', arrowNav: ['[exp]',  '[pi]',       '[sqroot]',  '[cos]']}
               </div>
               <div class="button-row">
-                $$sign{tabIndex: 341,    arrowNav: ['[inv]',   null, '[mult]',    '[percent]']}
-                $$percent{tabIndex: 342, arrowNav: ['[pow]',   null, '[sign]',    '[square]']}
-                $$square{tabIndex: 343,  arrowNav: ['[sqroot]', null, '[percent]', '[pi]']}
-                $$pi{tabIndex: 344,      arrowNav: ['[root]',  null, '[square]',  '[tan]']}
+                $$sign{tabIndex: 341,    haloColor: 'rgba(255, 255, 255, 0.4)', arrowNav: ['[inv]',   null, '[mult]',    '[percent]']}
+                $$percent{tabIndex: 342, haloColor: 'rgba(255, 255, 255, 0.4)', arrowNav: ['[pow]',   null, '[sign]',    '[square]']}
+                $$square{tabIndex: 343,  haloColor: 'rgba(255, 255, 255, 0.4)', arrowNav: ['[sqroot]', null, '[percent]', '[pi]']}
+                $$pi{tabIndex: 344,      haloColor: 'rgba(255, 255, 255, 0.4)', arrowNav: ['[root]',  null, '[square]',  '[tan]']}
               </div>
             </div>
           </div>
diff --git a/js/foam/apps/calc/TertiaryButtonsView.js b/js/foam/apps/calc/TertiaryButtonsView.js
index e34ab60c3..8e197eb84 100644
--- a/js/foam/apps/calc/TertiaryButtonsView.js
+++ b/js/foam/apps/calc/TertiaryButtonsView.js
@@ -20,32 +20,32 @@ CLASS({
           this.X.registerModel(this.CalcButton.xbind({
             width:      61,
             height:     61,
-            color:      'rgb(80, 80, 80)',
-            background: 'rgb(29, 233, 182)',
+            color:      '#444',
+            background: '#1DE9B6',
             font:       '300 18px Roboto'
           }), 'foam.ui.ActionButton');
           %>
           <div id="%%id" class="buttons button-row tertiaryButtons">
             <div class="button-column" style="flex-grow: 1;-webkit-flex-grow: 1;">
               <div class="button-row">
-                $$deg{tabIndex: 411,  arrowNav: ['.f1', '[sin]',  '[store]', '[rad]']}
-                $$rad{tabIndex: 412,  arrowNav: ['.f1', '[asin]', '[deg]',   '[fact]']}
-                $$fact{tabIndex: 413, arrowNav: ['.f1', '[mod]',  '[rad]',    null]}
+                $$deg{tabIndex: 411,  haloColor: 'rgba(0, 0, 0, 0.2)', arrowNav: ['.f1', '[sin]',  '[store]', '[rad]']}
+                $$rad{tabIndex: 412,  haloColor: 'rgba(0, 0, 0, 0.2)', arrowNav: ['.f1', '[asin]', '[deg]',   '[fact]']}
+                $$fact{tabIndex: 413, haloColor: 'rgba(0, 0, 0, 0.2)', arrowNav: ['.f1', '[mod]',  '[rad]',    null]}
               </div>
               <div class="button-row">
-                $$sin{tabIndex: 421,  arrowNav: ['[deg]',  '[cos]',   '[exp]',  '[asin]']}
-                $$asin{tabIndex: 422, arrowNav: ['[rad]',  '[acos]',  '[sin]',  '[mod]']}
-                $$mod{tabIndex: 423,  arrowNav: ['[fact]', '[p]',     '[asin]',  null]}
+                $$sin{tabIndex: 421,  haloColor: 'rgba(0, 0, 0, 0.2)', arrowNav: ['[deg]',  '[cos]',   '[exp]',  '[asin]']}
+                $$asin{tabIndex: 422, haloColor: 'rgba(0, 0, 0, 0.2)', arrowNav: ['[rad]',  '[acos]',  '[sin]',  '[mod]']}
+                $$mod{tabIndex: 423,  haloColor: 'rgba(0, 0, 0, 0.2)', arrowNav: ['[fact]', '[p]',     '[asin]',  null]}
               </div>
               <div class="button-row">
-                $$cos{tabIndex: 431,  arrowNav: ['[sin]',    '[tan]',   '[root]',      '[acos]']}
-                $$acos{tabIndex: 432, arrowNav: ['[asin]',   '[atan]',  '[cos]',       '[p]']}
-                $$p{tabIndex: 433,    arrowNav: ['[mod]',    '[c]',     '[acos]',  null]}
+                $$cos{tabIndex: 431,  haloColor: 'rgba(0, 0, 0, 0.2)', arrowNav: ['[sin]',    '[tan]',   '[root]',      '[acos]']}
+                $$acos{tabIndex: 432, haloColor: 'rgba(0, 0, 0, 0.2)', arrowNav: ['[asin]',   '[atan]',  '[cos]',       '[p]']}
+                $$p{tabIndex: 433,    haloColor: 'rgba(0, 0, 0, 0.2)', arrowNav: ['[mod]',    '[c]',     '[acos]',  null]}
               </div>
               <div class="button-row">
-                $$tan{tabIndex: 441,   arrowNav: ['[cos]',  null, '[pi]',     '[atan]']}
-                $$atan{tabIndex: 442,  arrowNav: ['[acos]', null, '[tan]',    '[c]']}
-                $$c{tabIndex: 443,     arrowNav: ['[p]',    null, '[atan]',   null]}
+                $$tan{tabIndex: 441,   haloColor: 'rgba(0, 0, 0, 0.2)', arrowNav: ['[cos]',  null, '[pi]',     '[atan]']}
+                $$atan{tabIndex: 442,  haloColor: 'rgba(0, 0, 0, 0.2)', arrowNav: ['[acos]', null, '[tan]',    '[c]']}
+                $$c{tabIndex: 443,     haloColor: 'rgba(0, 0, 0, 0.2)', arrowNav: ['[p]',    null, '[atan]',   null]}
               </div>
             </div>
           </div>