diff --git a/css/style.css b/css/style.css
index 75792f6..35e4536 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,21 +1,96 @@
 body {
     background-color: #f0f0f0;
+    color: #222;
     font-family: "Lucida Console","Courier New",Courier,monospace;
     font-size: 14px;
 }
 
-body, div, img {
+input {
+    font-family: "Lucida Console","Courier New",Courier,monospace;
+}
+
+body, div, img, pre {
     border: 0;
     margin: 0;
     padding: 0;
 }
 
+.h-box {
+    display: flex;
+    flex-direction: row;
+}
+
+.v-box {
+    display: flex;
+    flex-direction: column;
+}
+
+.justify-start {
+    justify-content: start;
+}
+
+.justify-end {
+    justify-content: end;
+}
+
+.justify-center {
+    justify-content: center;
+}
+
+.justify-space-between {
+    justify-content: space-between;
+}
+
+.justify-space-around {
+    justify-content: space-around;
+}
+
+.justify-space-evenly {
+    justify-content: space-evenly;
+}
+
+.align-items-center {
+    align-items: center;
+}
+
+.m-8 {
+    margin: 8px;
+}
+
+.mt-8 {
+    margin-top: 8px;
+}
+
+.ml-8 {
+    margin-left: 8px;
+}
+
+.mr-8 {
+    margin-right: 8px;
+}
+
+.mb-8 {
+    margin-bottom: 8px;
+}
+
+.flex-grow-1 {
+    flex-grow: 1;
+}
+
+.flex-grow-2 {
+    flex-grow: 2;
+}
+
+.flex-grow-4 {
+    flex-grow: 4;
+}
+
 header {
     width: 100%;
     overflow: hidden;
 }
 
-#header-bar {
+.header-bar {
     background-color: #333;
     color: #eee;
     display: flex;
@@ -26,8 +101,8 @@ header {
     padding: 5px 20px 5px 20px;
 }
 
-#subheader-bar {
-    background-color: #aaa;
+.subheader-bar {
+    background-color: #999;
     color: #eee;
     display: flex;
     flex-direction: row;
@@ -86,3 +161,28 @@ footer {
     margin: 20px 8px 0 8px;
     text-align: center;
 }
+
+.comments {
+    font-size: 12px;
+}
+
+#debug-data-input {
+    line-height: 1.5em;
+    width: 100%;
+}
+
+#debug-load-data {
+    border: #ccc 1px solid;
+}
+
+#cpu-dump {
+    color: #222;
+    font-size: 12px;
+    overflow-x: hidden;
+}
+
+#mem-dump {
+    color: #222;
+    font-size: 12px;
+    overflow-x: hidden;
+}
diff --git a/index.html b/index.html
index 1b8d7e5..ae0e02d 100644
--- a/index.html
+++ b/index.html
@@ -23,7 +23,7 @@
   </head>
   <body>
     <header>
-      <div id="header-bar">
+      <div class="header-bar">
         <div id="header-title" class="l10n">
           Sim-8800: Altair 8800 Simulator
         </div>
@@ -566,17 +566,35 @@
 
         </svg>
 
-        <div id="subheader-bar">
+        <div class="subheader-bar">
           <div id="switchboard" class="l10n">Soft Switch Board</div>
         </div>
 
       </div>
 
       <div id="tab-debug">
-        <input id="debug-data-input" type="text" size="60">&nbsp;
-        <input id="debug-load-data" type="button" value="LOAD DATA"><br>
-        <div id="cpu-dump"></div>
-        <div id="mem-dump"></div>
+        <div class="subheader-bar">
+          <div id="debug-load-data-title" class="l10n">Load Data to Addr #0</div>
+        </div>
+        <div class="h-box justify-left mt-8 mb-8 align-items-center">
+          <div class="flex-grow-4 mr-8">
+            <input id="debug-data-input" type="text">
+          </div>
+          <div class="flex-grow-1">
+            <input id="debug-load-data" type="button" value="LOAD DATA">
+          </div>
+        </div>
+        <div class="comments">In HEX string, such as 'c3 00 00'</div>
+
+        <div class="subheader-bar mt-8">
+          <div id="debug-cpu-dump-title" class="l10n">8080 CPU Status Dump</div>
+        </div>
+        <div id="cpu-dump" class="mt-8"></div>
+
+        <div class="subheader-bar mt-8">
+          <div id="debug-mem-dump-title" class="l10n">Memory Dump</div>
+        </div>
+        <div id="mem-dump" class="mt-8"></div>
       </div>
 
       <div id="tab-ref">
