diff --git a/src/kiri/init.js b/src/kiri/init.js
index f4d62ff8..0706287f 100644
--- a/src/kiri/init.js
+++ b/src/kiri/init.js
@@ -2059,6 +2059,8 @@ gapp.register("kiri.init", [], (root, exports) => {
             ui.slider.classList.add('slider-mobile');
             ui.sliderLo.classList.add('slider-mobile');
             ui.sliderHi.classList.add('slider-mobile');
+            // add css style for mobile devices
+            DOC.body.classList.add('mobile');
         }
 
         function pxToInt(txt) {
@@ -2077,6 +2079,7 @@ gapp.register("kiri.init", [], (root, exports) => {
 
         function dragit(el, delta) {
             el.ontouchstart = el.onmousedown = (ev) => {
+                // el.classList.add('sli-drag-el');
                 tracker.style.display = 'block';
                 ev.stopPropagation();
                 let obj = (ev.touches ? ev.touches[0] : ev);
@@ -2089,6 +2092,7 @@ gapp.register("kiri.init", [], (root, exports) => {
                 drag.mdmax = drag.width - slbar - drag.loat;
                 drag.himax = drag.width - slbar - drag.mdat;
                 let cancel_drag = tracker.ontouchend = tracker.onmouseup = (ev) => {
+                    // el.classList.remove('sli-drag-el');
                     if (ev) {
                         ev.stopPropagation();
                         ev.preventDefault();
@@ -2096,7 +2100,8 @@ gapp.register("kiri.init", [], (root, exports) => {
                     slider.onmousemove = undefined;
                     tracker.style.display = 'none';
                 };
-                tracker.ontouchmove = tracker.onmousemove = (ev) => {
+                el.ontouchend = cancel_drag;
+                el.ontouchmove = tracker.ontouchmove = tracker.onmousemove = (ev) => {
                     ev.stopPropagation();
                     ev.preventDefault();
                     if (ev.buttons === 0) {
diff --git a/web/kiri/index.css b/web/kiri/index.css
index 85073fcb..dca1eaf5 100644
--- a/web/kiri/index.css
+++ b/web/kiri/index.css
@@ -916,6 +916,12 @@ th, tr, td, label {
 #oplist div:hover .opop {
     display: flex;
 }
+.mobile #oplist {
+    font-size: larger;
+}
+.mobile #op-add-pop {
+    font-size: larger;
+}
 #op-add-pop {
     position: absolute;
     display: none;
@@ -925,16 +931,24 @@ th, tr, td, label {
 #op-add:hover #op-add-pop {
     display: flex;
 }
+.op-grid {
+    display: grid !important;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: auto;
+    align-items: center;
+    gap: 5px;
+}
 #op-add-list {
     padding: 4px;
     display: flex;
     align-items: stretch;
-    flex-direction: column-reverse;
+    flex-direction: column;
 }
 #op-add-list > div {
     padding: 3px 5px 3px 5px;
     display: flex;
     flex-direction: column;
+    border: 1px dashed gray;
     border-radius: 3px;
 }
 #op-add-list > div:hover {
@@ -1544,6 +1558,9 @@ th, tr, td, label {
     height: 30px;
     z-index: 100;
 }
+.mobile .sli-drag-el {
+    background-color: rgba(200,0,0,0.8) !important;
+}
 #slider-hi-val, #slider-lo-val {
     display: none;
     position: absolute;
diff --git a/web/kiri/index.html b/web/kiri/index.html
index f8c65773..33333ea7 100644
--- a/web/kiri/index.html
+++ b/web/kiri/index.html
@@ -482,18 +482,17 @@
                 <div id="op-add" class="opdiv">
                     <i class="fas fa-plus"></i>
                     <div id="op-add-pop" class="f-col">
-                        <div id="op-add-list" class="opdiv">
+                        <div id="op-add-list" class="opdiv op-grid">
+                            <div title="flip part and load&#13;profile for other side&#13;for double-sided work">flip</div>
+                            <div title="drill registration holes&#13;along the X or Y axis&#13;for double-sided work">register</div>
+                            <div title="drill any holes matching&#13;selected tool diameter">drill</div>
                             <div title="clear stock face&#13;or top of part&#13;when no stock">level</div>
+                            <div title="follow selected features with&#13;a specified tool. often used&#13;for lettering and engraving">trace</div>
+                            <div title="insert custom gcode">gcode</div>
                             <div title="remove an area of material&#13;inside a defined boundary&#13;sometimes called pocketing">rough</div>
                             <div title="clean up after roughing&#13;or perform a part cutout">outline</div>
                             <div title="2.5D tracing along X or Y axis&#13;used for complex part features">contour</div>
                             <div title="clear areas above&#13;selected surfaces">pocket</div>
-                            <div title="follow selected features with&#13;a specified tool. often used&#13;for lettering and engraving">trace</div>
-                            <div title="drill any holes matching&#13;selected tool diameter">drill</div>
-                            <hr width="100%">
-                            <div title="drill registration holes&#13;along the X or Y axis&#13;for double-sided work">register</div>
-                            <div title="insert custom gcode">gcode</div>
-                            <div title="flip part and load&#13;profile for other side&#13;for double-sided work">flip</div>
                         </div>
                     </div>
                 </div>