diff --git a/src/kiri/function.js b/src/kiri/function.js
index 7a2a5146..246326e2 100644
--- a/src/kiri/function.js
+++ b/src/kiri/function.js
@@ -12,7 +12,7 @@
 // dep: kiri-mode.laser.driver
 gapp.register("kiri.function", [], (root, exports) => {
 
-const { kiri, noop } = root;
+const { kiri } = root;
 const { api, client, consts, utils } = kiri;
 const { space } = moto;
 const { COLOR, PMODES } = consts;
@@ -427,6 +427,7 @@ function parseCode(code, type) {
     });
 }
 
+// extend API (api.function)
 const functions = api.function = {
     slice: prepareSlices,
     print: preparePreview,
diff --git a/src/kiri/init.js b/src/kiri/init.js
index 04d7fb00..484a6216 100644
--- a/src/kiri/init.js
+++ b/src/kiri/init.js
@@ -149,7 +149,7 @@ gapp.register("kiri.init", [], (root, exports) => {
 
     function speedSave() {
         settings().controller.showSpeeds = ui.showSpeeds.checked;
-        api.platform.update_speeds();
+        api.view.update_speeds();
     }
 
     function zAnchorSave() {
@@ -808,9 +808,8 @@ gapp.register("kiri.init", [], (root, exports) => {
                 selext.innerHTML = '';
                 for (let i=0; i<dev.extruders.length; i++) {
                     let d = DOC.createElement('div');
-                    d.appendChild(DOC.createTextNode(i));
+                    d.innerHTML = `<label>extruder ${i}</label>`;
                     d.setAttribute('id', `sel-ext-${i}`);
-                    d.setAttribute('class', 'col j-center');
                     d.onclick = function() {
                         api.selection.for_widgets(w => {
                             api.widgets.annotate(w.id).extruder = i;
@@ -1621,8 +1620,8 @@ gapp.register("kiri.init", [], (root, exports) => {
                 export:         $('label-export'),
             },
             acct: {
-                help:           $('acct-help'),
-                export:         $('acct-export')
+                help:           $('app-help'),
+                export:         $('app-export')
             },
             dev: {
                 header:         $('dev-header'),
@@ -1660,8 +1659,8 @@ gapp.register("kiri.init", [], (root, exports) => {
             ltview:             $('lt-view'),
             ltact:              $('lt-start'),
             edit:               $('lt-tools'),
-            nozzle:             $('lt-nozzle'),
-            render:             $('lt-render'),
+            nozzle:             $('menu-nozzle'),
+            render:             $('menu-render'),
 
             modal:              $('modal'),
             modalBox:           $('modal-box'),
@@ -2452,22 +2451,10 @@ gapp.register("kiri.init", [], (root, exports) => {
             }
         };
 
-        if (DOC.body.requestFullscreen) {
-            $('app-xpnd').style.display = 'flex';
+        if (!DOC.body.requestFullscreen) {
+            $('app-xpnd').style.display = 'none';
         }
 
-        let hpops = [];
-        uc.hoverPop(ui.ltsetup, { group: hpops, target: $('set-pop') });
-        uc.hoverPop(ui.ltfile,  { group: hpops, target: $('file-pop') });
-        uc.hoverPop(ui.ltview,  { group: hpops, target: $('pop-view') });
-        uc.hoverPop(ui.ltact,   { group: hpops, target: $('pop-slice') });
-        uc.hoverPop(ui.render,  { group: hpops, target: $('pop-render'), xsticky: false });
-        uc.hoverPop(ui.edit,    { group: hpops, target: $('pop-tools'), xsticky: false });
-        uc.hoverPop(ui.nozzle,  { group: hpops, target: $('pop-nozzle'), xsticky: true });
-        uc.hoverPop($('app-acct'), { group: hpops, target: $('acct-pop') } );
-        // uc.hoverPop($('app-mode'), { group: hpops, target: $('mode-info') } );
-        uc.hoverPop($('app-name'), { group: hpops, target: $('app-info') } );
-
         uc.onBlur([
             ui.toolName,
             ui.toolNum,
@@ -2814,7 +2801,7 @@ gapp.register("kiri.init", [], (root, exports) => {
 
         // bind interface action elements
         $('app-name').onclick = api.help.show;
-        $('app-mode').onclick = (ev) => { ev.stopPropagation(); showDevices() };
+        $('app-state').onclick = (ev) => { ev.stopPropagation(); showDevices() };
         $('set-device').onclick = (ev) => { ev.stopPropagation(); showDevices() };
         $('set-tools').onclick = (ev) => { ev.stopPropagation(); showTools() };
         $('set-prefs').onclick = (ev) => { ev.stopPropagation(); api.modal.show('prefs') };
diff --git a/src/kiri/main.js b/src/kiri/main.js
index b27c61cb..9e10e611 100644
--- a/src/kiri/main.js
+++ b/src/kiri/main.js
@@ -861,14 +861,16 @@ gapp.register("kiri.main", [], (root, exports) => {
                 break;
             case VIEWS.SLICE:
                 UI.back.style.display = 'flex';
-                if (!isCAM) UI.render.classList.remove('lt-enabled');
+                if (isCAM) UI.render.classList.add('hide');
+                else UI.render.classList.remove('hide');
                 updateSpeeds();
                 updateSliderMax();
                 setWidgetVisibility(true);
                 break;
             case VIEWS.PREVIEW:
                 UI.back.style.display = 'flex';
-                if (!isCAM) UI.render.classList.remove('lt-enabled');
+                if (isCAM) UI.render.classList.add('hide');
+                else UI.render.classList.remove('hide');
                 setWidgetVisibility(true);
                 break;
             default:
diff --git a/src/kiri/platform.js b/src/kiri/platform.js
index aca3aa78..c75ac2d8 100644
--- a/src/kiri/platform.js
+++ b/src/kiri/platform.js
@@ -247,7 +247,7 @@ function platformUpdateSelected() {
         let disC = selwid.filter(w => w.meta.disabled === true).length;
         enable.style.display = disC ? 'flex' : 'none';
         disable.style.display = enaC ? 'flex' : 'none';
-        ui.nozzle.classList.add('lt-active');
+        ui.nozzle.classList.remove('hide');
         if (api.feature.meta && selcount === 1) {
             let sel = selwid[0];
             let name = sel.meta.file || sel.meta.url;
@@ -276,7 +276,7 @@ function platformUpdateSelected() {
         ui.mesh.name.innerText = '[0]';
         ui.mesh.points.innerText = '-';
         ui.mesh.faces.innerText = '-';
-        ui.nozzle.classList.remove('lt-active');
+        ui.nozzle.classList.add('hide');
     }
 
     ui.nozzle.style.display = extruders && extruders.length > 1 ? 'flex' : '';
@@ -862,6 +862,7 @@ function fitDeviceToWidgets() {
     }
 }
 
+// extend API (api.platform)
 const platform = api.platform = {
     fit: fitDeviceToWidgets,
     add: platformAdd,
diff --git a/src/kiri/selection.js b/src/kiri/selection.js
index 8a1ca5bf..fdfdcddf 100644
--- a/src/kiri/selection.js
+++ b/src/kiri/selection.js
@@ -267,6 +267,7 @@ function setDisabled(bool) {
     api.platform.update_selected();
 }
 
+// extend API (api.selection)
 const selection = api.selection = {
     move,
     scale,
diff --git a/src/kiri/settings.js b/src/kiri/settings.js
index ed6e8dc1..7d66e3b1 100644
--- a/src/kiri/settings.js
+++ b/src/kiri/settings.js
@@ -733,6 +733,7 @@ function setEnableWASM(bool) {
     api.event.emit("set.assembly", bool);
 }
 
+// extend API (api.conf)
 api.conf = {
     dbo: () => { return ls2o('ws-settings') },
     get: getSettings,
@@ -751,6 +752,7 @@ api.conf = {
     import: settingsImport,
 };
 
+// extend API (api.settings)
 api.settings = {
     get: getSettings,
     import: settingsImport,
diff --git a/src/kiri/widgets.js b/src/kiri/widgets.js
index e52d383f..5b3f26ee 100644
--- a/src/kiri/widgets.js
+++ b/src/kiri/widgets.js
@@ -76,6 +76,7 @@ function opacity(value) {
     moto.space.update();
 }
 
+// extend API (api.widgets)
 const widgets = api.widgets = {
     load:       Widget.loadFromCatalog,
     new:        newWidget,
diff --git a/src/moto/service.js b/src/moto/service.js
index 14bbb9d6..7c8e1f3b 100644
--- a/src/moto/service.js
+++ b/src/moto/service.js
@@ -1,3 +1,5 @@
+// code for a ServiceWorker that provides support for running cached/offline
+
 const version = self.gapp.version;
 const origin = self.location.origin;
 const stats = {
diff --git a/web/kiri/index.css b/web/kiri/index.css
index 6364b0f8..ea53c1b2 100644
--- a/web/kiri/index.css
+++ b/web/kiri/index.css
@@ -7,6 +7,10 @@
     --holdbar-sf: linear-gradient(to top, rgba(200,200,200,0.1), rgba(255,255,255,1), rgba(200,200,200,0.1)) !important;
     --highlight: rgba(126,153,183,0.4);
     --main-color: rgba(126,153,183,1);
+    --main-color-hover: rgb(96, 127, 164);
+    --top: rgba(255,255,255,0.75);
+    --menu: #f0f0f0;
+    --menu-border: #555;
 }
 @font-face {
     font-family: 'Russo One';
@@ -28,6 +32,115 @@ a, a:hover, a:visited {
     right: 0;
     bottom: 0;
 }
+
+#top {
+    text-transform: capitalize;
+    font-family: 'Russo One', sans-serif;
+    background-color: var(--top);
+    z-index: 15;
+}
+#top > div {
+    margin: 0 5px 0 5px;
+}
+
+.top-menu {
+    display: flex;
+    gap: 3px;
+    align-items: center;
+    white-space: nowrap;
+}
+.top-menu > span {
+    padding: 3px 6px 3px 6px;
+    border-left: 1px solid transparent;
+    border-right: 1px solid transparent;
+}
+.top-menu label {
+    color: #444;
+}
+.top-menu svg {
+    color: var(--main-color);
+}
+.top-menu > span {
+    position: relative;
+    display: flex;
+    gap: 5px;
+    align-items: center;
+}
+.top-menu > span:hover label {
+    color: #222;
+}
+.top-menu > span:hover > svg {
+    color: var(--main-color-hover);
+}
+.top-menu > span:hover {
+    background-color: var(--menu);
+    border-left: 1px solid var(--menu-border);
+    border-right: 1px solid var(--menu-border);
+}
+.top-menu > span:hover .top-menu-drop {
+    display: flex;
+}
+.top-menu-left {
+    align-items: self-start;
+}
+.top-menu-left .content {
+    border-top-right-radius: 4px; 
+}
+.top-menu-right {
+    align-items: self-end;
+}
+.top-menu-right .content {
+    border-top-left-radius: 4px; 
+}
+
+.top-menu-drop {
+    position: absolute;
+    display: none;
+    /* border: 1px solid #555; */
+    top: 100%;
+    left: -1px;
+    right: -1px;
+    min-width: 100%;
+    min-height: 100%;
+    flex-direction: column;
+    font-family: sans-serif;
+}
+.top-menu-drop svg {
+    font-size: smaller;
+}
+#top .content {
+    background-color: var(--menu);
+    border-top: 1px dashed var(--menu-border);
+    border-left: 1px solid var(--menu-border);
+    border-right: 1px solid var(--menu-border);
+    border-bottom: 1px solid var(--menu-border);
+    border-bottom-right-radius: 4px;
+    border-bottom-left-radius: 4px;
+    padding: 3px 5px 3px 5px;
+    gap: 4px;
+    display: grid;
+    align-items: center;
+    grid-template-columns: auto 1fr;
+}
+#top .content > div {
+    display: contents;
+}
+#top .content > div > span {
+    text-align: center;
+    padding-left: 10px;
+}
+#top .content > div > label {
+    border-radius: 3px;
+    justify-self: stretch;
+    align-self: stretch;
+}
+#top .content > div > label:hover {
+    background-color: #ddd;
+}
+#top .content.onecol {
+    grid-template-columns: 1fr !important;
+}
+
 #app-name {
     position: absolute;
     top: 50%;
@@ -35,9 +148,34 @@ a, a:hover, a:visited {
     transform: translateX(-50%) translateY(-50%);
     z-index: 50;
 }
-#app-name, #app-acct {
+#app-name {
     cursor: pointer;
 }
+#app-name hr {
+    margin: 1px;
+}
+#app-name:hover #app-name-pop {
+    display: flex;
+}
+#app-name-pop {
+    /* display: none; */
+    color: var(--fg-gray);
+    font-family: sans-serif;
+    position: absolute;
+    /* right: -6px; */
+    top: 100%;
+}
+#app-name-pop .content {
+    /* grid-template-columns: 1fr; */
+    text-align: center;
+}
+#app-lang {
+    justify-content: flex-end;
+}
+#app-lang:hover #lang-pop {
+    display: flex;
+}
+
 #app,div {
     display: flex;
     padding: 0;
@@ -284,28 +422,24 @@ th, tr, td, label {
     overflow: hidden;
 }
 
-#top {
-    font-family: 'Russo One', sans-serif;
-    background-color: rgba(255,255,255,0.75);
-    padding: 3px;
-    z-index: 15;
+#app-state {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
 }
-#top > div {
-    margin: 0 5px 0 5px;
-}
-
 #mode-info {
-    display: none;
-    xposition: absolute;
+    /* display: none; */
     white-space: nowrap;
     font-size: smaller;
     font-family: sans-serif;
     top: 50%;
     height: 100%;
-    transform: translateY(-50%);
+    /* transform: translateY(-50%); */
     padding: 1px 0 1px 0;
     align-items: center;
     justify-content: center;
+    padding: 3px;
 }
 #mode-info label {
     font-size: smaller;
@@ -332,12 +466,9 @@ th, tr, td, label {
     border-bottom: 1px solid #ddd;
 }
 
-#app-info.hoverpop {
-    display: flex;
-}
 #app-info {
-    display: none;
-    position: absolute;
+    /* display: none; */
+    /* position: absolute;
     white-space: nowrap;
     font-size: smaller;
     font-family: sans-serif;
@@ -347,7 +478,7 @@ th, tr, td, label {
     color: var(--fg-gray);
     border-radius: 3px;
     border: 1px solid #ddd;
-    background-color: white;
+    background-color: white; */
 }
 
 #doit {
@@ -376,46 +507,16 @@ th, tr, td, label {
     background-color: rgba(0,0,0,0.2);
 }
 
-#app-xpnd {
-    display: none;
-}
-#app-acct, #app-xpnd {
-    align-items: center;
-    justify-content: flex-end;
-}
-#acct-pop.hoverpop {
-    display: flex !important;
-}
-#acct-pop {
-    display: none;
-    color: var(--fg-gray);
-    font-family: sans-serif;
+#lang-hold {
+    background-color: transparent;
     position: absolute;
-    right: -6px;
-    top: 100%;
+    top: 0;
+    left: 0;
+    right: -15px;
+    bottom: 0;
 }
-#acct-pop > div {
-    margin-top: 5px;
-    align-items: stretch;
-    background-color: white;
-    border: 1px solid #ddd;
-    border-radius: 3px;
-    padding: 0;
-}
-#acct-pop > div > div {
-    padding: 5px;
-}
-#acct-pop > div > div:hover {
-    color: #000;
-    background-color: #f4f4f4;
-}
-#acct-lang {
-    justify-content: flex-end;
-}
-#acct-lang:hover #lang-pop, #acct-ver:hover #ver-pop {
-    display: flex;
-}
-#lang-pop, #ver-pop {
+#lang-pop {
+    border: 1px solid red;
     display: none;
     position: absolute;
     right: 100%;
@@ -426,26 +527,15 @@ th, tr, td, label {
     border: 1px solid #ddd;
     background-color: white;
     white-space: nowrap;
+    flex-direction: column;
 }
-#ver-pop {
-    transform: translateY(-78%);
-}
-#lang-pop > div, #ver-pop > div {
+#lang-pop > div {
     padding: 5px 7px 5px 7px;
 }
-#lang-pop > div:hover, #ver-pop > div:hover {
+#lang-pop > div:hover {
     color: #000;
     background-color: #f4f4f4;
 }
-#ver-pop > div {
-    border-radius: 3px;
-    border: 1px solid white;
-    margin: 2px;
-}
-#ver-pop .cver {
-    background-color: #dfd !important;
-    border: 1px solid #aaa;
-}
 
 #mid {
     pointer-events: none;
@@ -464,10 +554,6 @@ th, tr, td, label {
     pointer-events: none;
 }
 
-#acct-pop {
-    text-transform: capitalize;
-}
-
 #top-sep {
     display: none;
 }
@@ -726,20 +812,6 @@ th, tr, td, label {
 .lt-menu label {
     font-size: small;
 }
-.lt-enabled, .lt-active {
-    color: var(--fg-gray);
-}
-.lt-enabled:hover, .lt-active:hover {
-    background-color: #eee;
-    border: 1px solid #aaa;
-    color: #000;
-}
-.lt-enabled:hover .pop-lcol {
-    display: flex;
-}
-.lt-active .hoverpop {
-    display: flex;
-}
 @media only screen and (max-height : 750px) {
     .lt-menu, .pop-lcol {
         font-size: 16px !important;
diff --git a/web/kiri/index.html b/web/kiri/index.html
index 063d308f..258a24ea 100644
--- a/web/kiri/index.html
+++ b/web/kiri/index.html
@@ -32,54 +32,202 @@
     <div id="container"></div>
     <div id="tracker"></div>
     <div id="top-sep"></div>
+
+    <!-- TOP MENU BAR -->
     <div id="top" class="f-row">
-        <div id="app-mode">
-            <div id="mode-info" class="f-row">
-                <label>Mode</label><div id="app-mode-name"></div>
-                <label>Device</label><div id="mode-device"></div>
-                <label>Profile</label><div id="mode-profile"></div>
-            </div>
+        <div class="f-row top-menu">
+            <span>
+                <i class="fas fa-person-running"></i>
+                <label>start</label>
+                <div class="top-menu-drop top-menu-left">
+                    <div class="content">
+
+                        <div id="act-slice">
+                            <label id="label-slice" title="generate layer slices" lk="slice">preview</label>
+                            <span><i class="fas fa-bars"></i></span>
+                        </div>
+                        <div id="act-preview">
+                            <label id="label-preview" title="show routing and paths" lk="preview">preview</label>
+                            <span><i class="fas fa-layer-group"></i></span>
+                        </div>
+                        <div id="act-animate">
+                            <label id="label-animate" title="render routing on a mesh" lk="animate">animate</label>
+                            <span><i class="fas fa-film"></i></span>
+                        </div>
+                        <div id="act-export">
+                            <label id="label-export" title="generate gcode" lk="export">export</label>
+                            <span><i class="fas fa-file-download"></i></span>
+                        </div>
+    
+                    </div>
+                </div>
+            </span>
+            <span>
+                <i class="fas fa-folder"></i>
+                <label>files</label>
+                <div class="top-menu-drop top-menu-left">
+                    <div class="content">
+                        <div id="file-recent">
+                            <label lk="recent">recent</label>
+                            <span><i class="fas fa-list"></i></span>
+                        </div>
+                        <div id="file-import">
+                            <label lk="import">import</label>
+                            <span><i class="fas fa-file-upload"></i></span>
+                            <!-- hidden file input loader -->
+                            <input id="load-file" type="file" name="loadme" style="display:none"></input>
+                        </div>
+                    </div>
+                </div>
+            </span>
+            <span>
+                <i class="fas fa-dice-d20"></i>
+                <label>mesh</label>
+                <div class="top-menu-drop top-menu-left">
+                    <div class="content">
+                        <div id="tool-rotate">
+                            <label lk="rotate">rotate</label>
+                            <span><i class="fas fa-sync-alt"></i></span>
+                        </div>
+                        <div id="tool-scale">
+                            <label lk="scale">scale</label>
+                            <span><i class="fas fa-expand"></i></span>
+                        </div>
+                        <div id="tool-mesh">
+                            <label lk="mesh">mesh</label>
+                            <span><i class="fas fa-dice-d20"></i></span>
+                        </div>
+                        <div id="tool-selector">
+                            <label lk="select">select</label>
+                            <span><i class="fas fa-mouse-pointer"></i></span>
+                        </div>
+                            <div id="view-clear">
+                            <label lk="clear">clear</label>
+                            <span><i class="far fa-square"></i></span>
+                        </div>
+                    </div>
+                </div>
+            </span>
+            <span id="menu-nozzle">
+                <i class="fas fa-map-marker"></i>
+                <label>tool</label>
+                <div class="top-menu-drop top-menu-left">
+                    <div id="pop-nozzle" class="content onecol"></div>
+                </div>
+            </span>
         </div>
         <div class="grow"></div>
-        <div id="app-name" class="f-col a-center">
-            <div>Kiri:Moto</div>
-            <div id="app-info">version</div>
+        <div id="app-name" class="f-col a-center top-menu">
+            <span>
+                <label>Kiri:Moto</label>
+                <div id="app-name-pop" class="top-menu-drop top-menu-center">
+                    <div class="content onecol">
+                        <div id="app-help">
+                            <label lk="help">help</label>
+                        </div>
+                        <div>
+                            <hr width="100%">
+                            <label id="app-info">version</label>
+                        </div>
+                    </div>
+                </div>
+            </span>
         </div>
         <div id="doit" class="f-row a-center">
             <button id="undo"><i class="fas fa-undo-alt"></i></button>
             <button id="redo"><i class="fas fa-redo-alt"></i></button>
         </div>
         <div class="grow"></div>
-        <div id="app-xpnd" lkt="fullscreen">
-            <i class="fa-solid fa-maximize"></i>
-        </div>
-        <div id="app-acct">
-            <i class="fas fa-user-cog"></i>
-            <div id="acct-pop" class="f-col">
-                <div id="acct-menu" class="f-col">
-                    <div id="acct-lang">
-                        <label><i class="fas fa-caret-left"></i><span class="grow">&nbsp;</span><span lk="language">language</span></label>
-                        <div id="lang-pop" class="f-col">
-                            <div id="lset-zh">简体中文</div>
-                            <div id="lset-da">dansk</div>
-                            <div id="lset-de">deutsch</div>
-                            <div id="lset-en">english</div>
-                            <div id="lset-es">español</div>
-                            <div id="lset-fr">français</div>
-                            <div id="lset-pl">polskie</div>
-                            <div id="lset-pt">português</div>
+        <div class="f-row top-menu">
+            <span id="menu-render">
+                <i class="fas fa-dice-d20"></i>
+                <label>render</label>
+                <div class="top-menu-drop top-menu-right">
+                    <div class="content">
+                        <div id="render-solid" class="grow a-center">
+                            <label lk="solid">solid</label>
+                            <span><i class="fas fa-square"></i></span>
+                        </div>
+                        <div id="render-wire" class="grow a-center">
+                            <label lk="wire">wire</label>
+                            <span><i class="fas fa-border-all"></i></span>
+                        </div>
+                        <div id="render-ghost" class="grow a-center">
+                            <label lk="ghost">ghost</label>
+                            <span><i class="fas fa-border-none"></i></span>
+                        </div>
+                        <div id="render-hide" class="grow a-center">
+                            <label lk="hide">hide</label>
                         </div>
                     </div>
-                    <div id="acct-export" class="f-col a-end">
-                        <label lk="export">export</label>
-                    </div>
-                    <div id="acct-help" class="f-col a-end">
-                        <label lk="help">help</label>
+                </div>
+            </span>
+            <span>
+                <i class="fas fa-eye"></i>
+                <label>view</label>
+                <div class="top-menu-drop top-menu-right">
+                    <div class="content">
+                        <div id="view-arrange">
+                            <label lk="arrange">arrange</label>
+                            <span><i class="fas fa-shapes"></i></span>
+                        </div>
+                        <div id="view-home">
+                            <label lk="home">home</label>
+                            <span><i class="fas fa-home"></i></span>
+                        </div>
+                        <div id="view-top">
+                            <label lk="top">top</label>
+                            <span><i class="fas fa-square"></i></span>
+                        </div>
+                        <div id="app-xpnd">
+                            <label lk="fullscreen">fullscreen</label>
+                            <span><i class="fas fa-maximize"></i></span>
+                        </div>
                     </div>
                 </div>
-            </div>
+            </span>
+            <span>
+                <i class="fas fa-cog"></i>
+                <label>setup</label>
+                <div class="top-menu-drop top-menu-right">
+                    <div class="content">
+                        <div id="set-prefs">
+                            <label lk="prefs">prefs</label>
+                            <span><i class="fas fa-sliders-h"></i></span>
+                        </div>
+                        <div id="set-device">
+                            <label lk="machine">machine</label>
+                            <span><i class="fas fa-cube"></i></span>
+                        </div>
+                        <div id="set-tools">
+                            <label lk="tools">tools<label>
+                            <span><i class="fas fa-tools"></i></span>
+                        </div>
+                        <div id="app-lang">
+                            <label lk="language">language</label>
+                            <span><i class="fas fa-language"></i></span>
+                            <div id="lang-pop">
+                                <div id="lset-zh">简体中文</div>
+                                <div id="lset-da">dansk</div>
+                                <div id="lset-de">deutsch</div>
+                                <div id="lset-en">english</div>
+                                <div id="lset-es">español</div>
+                                <div id="lset-fr">français</div>
+                                <div id="lset-pl">polskie</div>
+                                <div id="lset-pt">português</div>
+                                <span id="lang-hold"></span>
+                            </div>
+                        </div>
+                        <div id="app-export">
+                            <label lk="export">export</label>
+                            <span><i class="fas fa-download"></i></span>
+                        </div>
+                    </div>
+                </div>
+            </span>
         </div>
     </div>
+
     <div id="mid-sep"></div>
     <div id="mid" class="grow f-row">
         <div id="progress"><div id="progbar"><div id="progtxt">loading</div></div></div>
@@ -156,135 +304,6 @@
                     <div class="footer"></div>
                 </div>
             </div>
-            <div id="lt-setup" class="lt-menu lt-active">
-                <i class="fas fa-cogs"></i>
-                <label lk="setup">setup</label>
-                <div id="set-pop" class="pop-lcol f-row">
-                    <div id="set-device">
-                        <i class="fas fa-cube"></i>
-                        <label lk="machine">machine</label>
-                    </div>
-                    <div id="set-tools">
-                        <i class="fas fa-tools"></i>
-                        <label lk="tools">tools<label>
-                    </div>
-                    <div id="set-prefs">
-                        <i class="fas fa-sliders-h"></i>
-                        <label lk="prefs">prefs<label>
-                    </div>
-                </div>
-            </div>
-            <div id="lt-file" class="lt-menu lt-active">
-                <i class="fas fa-folder"></i>
-                <label lk="files">files</label>
-                <div id="file-pop" class="pop-lcol f-row">
-                    <div id="file-recent">
-                        <i class="fas fa-list"></i>
-                        <label lk="recent">recent</label>
-                    </div>
-                    <div id="file-import">
-                        <i class="fas fa-file-upload"></i>
-                        <label lk="import">import</label>
-                        <!-- hidden file input loader -->
-                        <input id="load-file" type="file" name="loadme" style="display:none"></input>
-                    </div>
-                </div>
-            </div>
-            <div id="act-sep"></div>
-            <div id="lt-view" class="lt-menu lt-active">
-                <i class="fas fa-eye"></i>
-                <label lk="view">view</label>
-                <div id="pop-view" class="pop-lcol f-row">
-                    <div id="view-arrange">
-                        <i class="fas fa-shapes"></i>
-                        <label lk="arrange">arrange</label>
-                    </div>
-                    <div id="view-home">
-                        <i class="fas fa-home"></i>
-                        <label lk="home">home</label>
-                    </div>
-                    <div id="view-top">
-                        <i class="fas fa-square"></i>
-                        <label lk="top">top</label>
-                    </div>
-                    <div id="view-clear">
-                        <i class="far fa-square"></i>
-                        <label lk="clear">clear</label>
-                    </div>
-                </div>
-            </div>
-            <div id="lt-start" class="lt-menu lt-active">
-                <i class="fas fa-person-running"></i>
-                <label id="label-start" title="start a process" lk="start">start</label>
-                <div id="pop-slice" class="pop-lcol f-row">
-                    <div id="act-slice">
-                        <i class="fas fa-bars"></i>
-                        <label id="label-slice" title="generate layer slices" lk="slice">preview</label>
-                    </div>
-                    <div id="act-preview">
-                        <i class="fas fa-layer-group"></i>
-                        <label id="label-preview" title="show routing and paths" lk="preview">preview</label>
-                    </div>
-                    <div id="act-animate">
-                        <i class="fas fa-film"></i>
-                        <label id="label-animate" title="render routing on a mesh" lk="animate">animate</label>
-                    </div>
-                    <div id="act-export">
-                        <i class="fas fa-file-download"></i>
-                        <label id="label-export" title="generate gcode" lk="export">export</label>
-                    </div>
-                </div>
-            </div>
-            <div id="lt-sep"></div>
-            <div id="lt-render" class="lt-menu lt-active">
-                <i class="fas fa-border-style"></i>
-                <label lk="render">render</label>
-                <div id="pop-render" class="pop-lcol f-row">
-                    <div id="render-solid" class="grow a-center">
-                        <i class="fas fa-square"></i>
-                        <label lk="solid">solid</label>
-                    </div>
-                    <div id="render-wire" class="grow a-center">
-                        <i class="fas fa-border-all"></i>
-                        <label lk="wire">wire</label>
-                    </div>
-                    <div id="render-ghost" class="grow a-center">
-                        <i class="fas fa-border-none"></i>
-                        <label lk="ghost">ghost</label>
-                    </div>
-                    <div id="render-hide" class="grow a-center">
-                        <label lk="hide">hide</label>
-                    </div>
-                </div>
-            </div>
-            <div id="lt-tools" class="lt-menu lt-active">
-                <i class="fas fa-tools"></i>
-                <label lk="tools">edit</label>
-                <div id="pop-tools" class="pop-lcol f-row">
-                    <div id="tool-rotate" class="grow a-center">
-                        <i class="fas fa-sync-alt"></i>
-                        <label lk="rotate">rotate</label>
-                    </div>
-                    <div id="tool-scale" class="grow a-center">
-                        <i class="fas fa-expand"></i>
-                        <label lk="scale">scale</label>
-                    </div>
-                    <div id="tool-mesh" class="grow a-center">
-                        <i class="fas fa-dice-d20"></i>
-                        <label lk="mesh">mesh</label>
-                    </div>
-                    <div id="tool-selector" class="grow a-center">
-                        <i class="fas fa-mouse-pointer"></i>
-                        <label lk="select">select</label>
-                    </div>
-                </div>
-            </div>
-            <div id="lt-nozzle" class="lt-menu noshow">
-                <i class="fas fa-map-marker"></i>
-                <label>nozzle</label>
-                <div id="pop-nozzle" class="pop-lcol f-row fillh russo"></div>
-            </div>
-            <div id="lt-end"></div>
         </div>
         <div id="mid-mcol" class="grow">
             <div id="modal">
@@ -520,6 +539,15 @@
         <div class="sep"></div>
         <button id="context-setfocus" lk="rc_focs">set focus</button>
     </div>
+
+    <div id="app-state">
+        <div id="mode-info" class="f-row">
+            <label>Mode</label><div id="app-mode-name"></div>
+            <label>Device</label><div id="mode-device"></div>
+            <label>Profile</label><div id="mode-profile"></div>
+        </div>
+    </div>
+
     <div id="stats">
         <div id="rms"></div>
         <div id="fps"></div>
diff --git a/web/kiri/lang/en.js b/web/kiri/lang/en.js
index a97be36d..bffb0705 100644
--- a/web/kiri/lang/en.js
+++ b/web/kiri/lang/en.js
@@ -30,7 +30,7 @@ self.kiri.lang['en-us'] = {
     name:           "name",
     off:            "off",          // turn something off (like a lightbulb)
     on:             "on",           // turn something on (like a lightbulb)
-    prefs:          "prefs",        // left menu "preferences"
+    prefs:          "preferences",  // left menu "preferences"
     preview:        "preview",
     recent:         "recent",
     render:         "render",       // left render pop menu