diff --git a/editor/hhkb/firmware.js b/editor/hhkb/firmware.js
index 2e9401fb..c123b42a 100644
--- a/editor/hhkb/firmware.js
+++ b/editor/hhkb/firmware.js
@@ -1,11 +1,32 @@
 KEYBOARD_ID = "hhkb";
+
+/* for ATMega32U4 with 32KB flash */
 KEYMAP_START_ADDRESS = 0x6800;
 
-/* HHKB firmware: v4.0-162-g52a7398 */
+/* hex file whthout keymap region and eof */
 function firmware_hex()
 {
+    /* HHKB firmware: v4.0-162-g52a7398 */
+    /*  Flash Map of ATMega32U4(32KB)
+     *  +------------+ 0x0000
+     *  | .vectors   | 0xac (43vectors * 4bytes)
+     *  | .progmem   | PROGMEM variables and PSTR
+     *  | .init0-9   |
+     *  | .text      | code
+     *  | .fini9-0   |
+     *  |            | > text region
+     *  |------------| _etext
+     *  | .data      |
+     *  | .bss       |
+     *  | .noinit    |
+     *  |            | > data region
+     *  |------------| 0x6800
+     *  | .keymap    | > keymap region(2KB)
+     *  |------------| 0x7000
+     *  | bootloader | 4KB
+     *  +------------+ 0x7FFF
+     */
     // TODO: read hex file directly from remote URL
-    // removed keymap region and eof
     return "\
 :100000000C942A070C9471070C9471070C947107D7\r\n\
 :100010000C9471070C9471070C9471070C94710780\r\n\
diff --git a/editor/hhkb/index.html b/editor/hhkb/index.html
index 9bd9b69b..08e50014 100644
--- a/editor/hhkb/index.html
+++ b/editor/hhkb/index.html
@@ -111,7 +111,6 @@
             // Title
             document.title = "TMK Keymap Editor for " + KEYBOARD_ID;
             $("#page-title").text("TMK Keymap Editor for " + KEYBOARD_ID);
-            $("#keyboard2").load("hhkb.html");
 
             // lost keymap under edting when leave the page
             /* TODO: Needed when released
@@ -207,7 +206,7 @@
 
                 // download hex file
                 var blob = new Blob([content], {type: "application/octet-stream"});
-                var hex_link = $("<a/>");
+                var hex_link = $("#hex-download");
                 hex_link.attr('href', window.URL.createObjectURL(blob));
                 hex_link.attr('download', KEYBOARD_ID + "_firmware.hex");
                 // jQuery click() doesn't work straight for 'a' element
@@ -253,7 +252,6 @@ How to edit keymap
 See <a href="https://github.com/tmk/tmk_keyboard/blob/master/doc/keymap.md" target="_blank">this</a> for detailed description of keymap.
 
 <h2>Keyboard</h2>
-<div id="keyboard2" class="keyboard"></div>
 <div id="keyboard" class="keyboard">
 <!-- 
 Layer selector
@@ -353,7 +351,7 @@ Keycodes
 TODO: better align of buttons
 -->
 <h2>Keycodes</h2>
-<div id="keycode_tabs">
+<div id="keycode_tabs" class="keycode_tabs">
     <ul>
     <li><a href="#tabs-1">Main</a></li>
     <li><a href="#tabs-2">Function and Navigation</a></li>
@@ -675,6 +673,7 @@ TODO: better align of buttons
 
 <h3>Firmware Hex File Download:</h3>
 <button id="keymap-download" title="save file">Download</button>
+<a id="hex-download" style="display:none" ></a>
 
 <h3>Keymap Output:</h3>
 <textarea id="keymap-output" rows="20" cols="80"></textarea>
diff --git a/editor/hhkb/keyboard.css b/editor/hhkb/keyboard.css
index 8d02a096..496ecc07 100644
--- a/editor/hhkb/keyboard.css
+++ b/editor/hhkb/keyboard.css
@@ -10,7 +10,7 @@
         display:block;
         float: left;
         color:#777777;
-        font-family:arial;
+        font-family:helvetica, arial, sans-serif;
         font-size:16px;
         font-weight:bold;
         text-decoration:none;
@@ -66,13 +66,22 @@
 
 .keyboard {
     width: 1000px;
-    overflow: auto;
+    overflow: nowrap;
+    font-size: 14px;
+    font-weight:bold;
 }
 
-#keycodes {
-    font-size:12px;
+.keycode_tabs {
+    width: 600px;
+    overflow: auto;
+    font-size:14px;
     font-weight:bold;
-    width: 200px;
+}
+
+.action {
+    font-size:16px;
+    font-weight:bold;
+    min-width: 30px;
 }
 
 /* http://www.w3schools.com/cssref/css3_pr_resize.asp */