diff --git a/ui-css/coq-base.css b/ui-css/coq-base.css
index 6c48113441b0dba001920c27b5f25a57b4138f8f..81ca9b285332a89f87dcd595a1a78871a63b5d75 100644
--- a/ui-css/coq-base.css
+++ b/ui-css/coq-base.css
@@ -27,6 +27,7 @@ a, a:link, a:visited, a:active {
   margin-right: auto;
   margin-left: auto;
   overscroll-behavior: none;
+  --base-font-size: 11pt;
 }
 
 #ide-wrapper.layout-fixed {
@@ -70,7 +71,7 @@ a, a:link, a:visited, a:active {
 /* CodeMirror */
 
 .jscoq.CodeMirror {
-  font-size: 11pt;
+  font-size: var(--base-font-size);
   height: 100%;  /* auto-size to fit content */
   line-height: initial;
 }
@@ -138,7 +139,7 @@ body.jscoq-main .CodeMirror-linenumber {
   z-index: 20;  /* notice: CodeMirror-dialog is at index 15 */
 
   font-family: Helvetica, Geneva, Swiss, Arial, SunSans-Regular, sans-serif;
-  font-size: 11pt;
+  font-size: var(--base-font-size);
 }
 
 #panel-wrapper * {
@@ -212,8 +213,8 @@ body.jscoq-main .CodeMirror-linenumber {
 .flex-panel > .content {
   flex: 1 0 0;
   padding: 0 4px;
-  /*transition: opacity 0.5s ease-in-out;*/
-  font-family: monospace;
+  font-family: monospace, "Arial Unicode MS";
+  line-height: 1.2;  /* because some characters are too tall (due to alternative font glyph rendering) */
   overflow: auto;
   overscroll-behavior: contain;
 }
@@ -371,6 +372,8 @@ div.settings-panel {
   border: 1px solid black;
   min-width: 200px;
   padding: .75em .75em .2em .75em;
+  box-shadow: -2px 3px 6px 0px #3332;
+  outline: none !important;
 }
 
 div.settings-panel div.setting {
diff --git a/ui-css/coq-dark.css b/ui-css/coq-dark.css
index 6d3af0edd34218d0d9309b77dbfb51db1b04bdd4..8781319401c6fd87e3e8f6cfba1d0899f7272e3f 100644
--- a/ui-css/coq-dark.css
+++ b/ui-css/coq-dark.css
@@ -54,10 +54,26 @@
   color: #ccc;
 }
 
+.jscoq-theme-dark #toolbar svg.app-menu-button {
+  fill: #ccc;
+}
+.jscoq-theme-dark #toolbar svg.app-menu-button:hover {
+  fill: #ddd;
+  background-color: #393b39;
+}
+.jscoq-theme-dark #toolbar svg.app-menu-button.active {
+  background-color: #656965;
+  fill: #f2f6f2;
+}
+.jscoq-theme-dark #toolbar svg.app-menu-button.active:hover {
+  background-color: #757a75;
+  fill: #f2f6f2;
+}
+
 .settings-panel[data-theme=dark] {
   background: #555;
   border-color: #888;
-  box-shadow: -3px 3px 6px 0px #fff2;
+  box-shadow: -2px 3px 6px 0px #fff2;
   color: #ddd;
 }
 
diff --git a/ui-js/coq-layout-classic.js b/ui-js/coq-layout-classic.js
index 8c643feb868fc5b744920c37cec292a68da82927..c992f511cf24bb7b1c0b1c74ca2d7748364d1f63 100644
--- a/ui-js/coq-layout-classic.js
+++ b/ui-js/coq-layout-classic.js
@@ -123,8 +123,10 @@ class CoqLayoutClassic {
         this.onAction = evt => {};
         this.buttons.addEventListener('click', evt => this.onAction(evt));
 
-        this.menubtn.addEventListener('click', () =>
-            this.menubtn.classList.toggle('active', this.settings.toggle()));
+        this.menubtn.addEventListener('mousedown', () =>
+            this.settings.toggle());
+        this.settings.active.observe(active =>
+            this.menubtn.classList.toggle('active', active));
 
         // Configure log
         this.log_levels = ['Error', 'Warning', 'Notice', 'Info', 'Debug']
diff --git a/ui-js/coq-manager.js b/ui-js/coq-manager.js
index fb6607a63b8f6ecc766c0f8e6740cbb2343a3dc5..9f4d3f191aaf44021dca1add40ffbcace6371643 100644
--- a/ui-js/coq-manager.js
+++ b/ui-js/coq-manager.js
@@ -410,6 +410,8 @@ class CoqManager {
         });
         this.layout.settings.model.company.observe(enable => {
             this.provider.configure({mode: {'company-coq': enable}});
+            this.company_coq = this.contextual_info.company_coq =
+                enable ? new CodeMirror.CompanyCoq() : undefined;
         });
     }
 
diff --git a/ui-js/settings.js b/ui-js/settings.js
index 5f866840d9e72b67d269c14903037c6f0ce41420..b3ba9f4efe426a6dbd699d0e02c3e245cdd1eff0 100644
--- a/ui-js/settings.js
+++ b/ui-js/settings.js
@@ -2,7 +2,7 @@
 class SettingsPanel {
     html() {
         return `
-        <div class="settings-panel">
+        <div class="settings-panel" tabindex="0">
             <div>
                 <label for="settings--theme">
                     <div class="setting">
@@ -28,6 +28,7 @@ class SettingsPanel {
     constructor(model) {
         this.el = $(this.html());
         this.model = model || new CoqSettings();
+        this.active = new ReactiveVar(false);
 
         this.el.find('#settings--theme').on('change', ev => {
             this.model.theme.value = ev.target.checked ? 'light' : 'dark';
@@ -35,6 +36,13 @@ class SettingsPanel {
         this.el.find('#settings--company').on('change', ev => {
             this.model.company.value = ev.target.checked;
         });
+        // clickaway trick
+        this.el.on('blur', ev => {
+            if (this.el.has(ev.originalEvent.relatedTarget).length)
+                setTimeout(() => this.el[0].focus(), 1);
+            else
+                this.hide();
+        });
     }
 
     configure(options) {
@@ -54,9 +62,12 @@ class SettingsPanel {
         if (this.el.parent().length == 0)
             $(document.body).append(this.el);
         this.el.show();
+        this.active.value = true;
+        setTimeout(() => this.el[0].focus(), 10); // avoid race between panel and button
     }
 
     hide() {
+        this.active.value = false;
         this.el.hide();
     }