diff --git a/src/kiri/init.js b/src/kiri/init.js
index fa56f4aa..9b4b72cb 100644
--- a/src/kiri/init.js
+++ b/src/kiri/init.js
@@ -1915,6 +1915,14 @@
         $('mode-cam').onclick = () => { API.mode.set('CAM') };
         $('mode-laser').onclick = () => { API.mode.set('LASER') };
         $('unrotate').onclick = () => { API.widgets.for(w => w.unrotate()) };
+        // rotation buttons
+        let d = (Math.PI / 180) * 5;
+        $('rot_x_lt').onclick = () => { API.selection.rotate(-d,0,0) };
+        $('rot_x_gt').onclick = () => { API.selection.rotate( d,0,0) };
+        $('rot_y_lt').onclick = () => { API.selection.rotate(0,-d,0) };
+        $('rot_y_gt').onclick = () => { API.selection.rotate(0, d,0) };
+        $('rot_z_lt').onclick = () => { API.selection.rotate(0,0,-d) };
+        $('rot_z_gt').onclick = () => { API.selection.rotate(0,0, d) };
 
         // add app name hover info
         $('app-info').innerText = KIRI.version;
diff --git a/web/kiri/index.css b/web/kiri/index.css
index 85d026e9..38703a16 100644
--- a/web/kiri/index.css
+++ b/web/kiri/index.css
@@ -435,6 +435,21 @@ and (orientation : landscape) {
 #pop-rotate .value, #pop-scale .value {
     width: 90%;
 }
+#pop-rotate label {
+    padding: 3px;
+}
+#pop-rotate svg {
+    padding: 3px;
+    font-size: 20px;
+    border-radius: 3px;
+    border: 1px solid rgba(0,0,0,0);
+}
+#pop-rotate svg:hover {
+    color: #345;
+    font-size: 20px;
+    background-color: rgba(255,255,255,0.5);
+    border: 1px solid #aaa;
+}
 #lock_x, #lock_y, #lock_z {
     position: absolute;
     left: 2px;
diff --git a/web/kiri/index.html b/web/kiri/index.html
index c4fa0bc7..eeff117d 100644
--- a/web/kiri/index.html
+++ b/web/kiri/index.html
@@ -138,16 +138,27 @@
                 <label>rotate</label>
                 <div id="pop-rotate" class="pop-lcol row fillh russo">
                     <div>
-                        <label class="grow">X</label>
-                        <div>&lt; &gt;</div>
+                        <div class="grow a-center">
+                            <i id="rot_x_lt" class="fas fa-chevron-left"></i>
+                            <label>X</label>
+                            <i id="rot_x_gt" class="fas fa-chevron-right"></i>
+                        </div>
                         <input id="rot_x" class="value center" size="5"/ value="0">
                     </div>
                     <div>
-                        <label class="grow">Y</label>
+                        <div class="grow a-center">
+                            <i id="rot_y_lt" class="fas fa-chevron-left"></i>
+                            <label>Y</label>
+                            <i id="rot_y_gt" class="fas fa-chevron-right"></i>
+                        </div>
                         <input id="rot_y" class="value center" size="5"/ value="0">
                     </div>
                     <div>
-                        <label class="grow">Z</label>
+                        <div class="grow a-center">
+                            <i id="rot_z_lt" class="fas fa-chevron-left"></i>
+                            <label>Z</label>
+                            <i id="rot_z_gt" class="fas fa-chevron-right"></i>
+                        </div>
                         <input id="rot_z" class="value center" size="5"/ value="0">
                     </div>
                     <div id="unrotate" class="col j-center">reset</div>