diff --git a/modules/bus/index.js b/modules/bus/index.js
index 0066ff1b..f4668db5 100644
--- a/modules/bus/index.js
+++ b/modules/bus/index.js
@@ -75,7 +75,7 @@ export default class Bus {
   }
   
   dispatch(key, data) {
-    console.log('dispatch: ' + key + ' -> ' + JSON.stringify(data));
+    // console.log('dispatch: ' + key + ' -> ' + JSON.stringify(data));
 
     if (this.lock.has(key)) {
       console.warn('recursive dispatch');
diff --git a/web/app/cad/dom/actionInfo/ActionInfo.jsx b/web/app/cad/dom/actionInfo/ActionInfo.jsx
index 5bcb5c4e..85825bbd 100644
--- a/web/app/cad/dom/actionInfo/ActionInfo.jsx
+++ b/web/app/cad/dom/actionInfo/ActionInfo.jsx
@@ -12,9 +12,9 @@ function ActionInfo({actionId, x, y, info, hint, hotKey}) {
   return <AuxWidget visible={visible} 
     left={x} top={y} className={ls.root} zIndex={550}>
     {visible && <Fragment>
-      <div className='hint'>{hint}</div>
-      <div className='info'>{info}</div>
-      {hotKey && <div className='hotKey'>hotkey: {hotKey}</div>}
+      {hint && <div className={ls.hint}>{hint}</div>}
+      {info && <div className={ls.info}>{info}</div>}
+      {hotKey && <div className={ls.hotKey}>hotkey: {hotKey}</div>}
     </Fragment>}
   </AuxWidget>;
 }
diff --git a/web/app/cad/dom/actionInfo/ActionInfo.less b/web/app/cad/dom/actionInfo/ActionInfo.less
index 0e1fd782..6d9ddf10 100644
--- a/web/app/cad/dom/actionInfo/ActionInfo.less
+++ b/web/app/cad/dom/actionInfo/ActionInfo.less
@@ -1,4 +1,24 @@
+@import "~ui/styles/theme";
+
 .root {
   display: flex;
   pointer-events:none;
-}
\ No newline at end of file
+  padding: 2px 5px;
+  max-width: 400px;
+  color: @font-color-minor;
+  & > * {
+    padding: 3px 0;
+  }
+  white-space: nowrap;
+}
+
+.hotKey {
+  text-align: right;
+  font-style: italic;
+  color: @font-color-suppressed;
+}
+
+.hint {
+  font-style: italic;
+  color: #E1A4A4;
+}