diff --git a/styles.css b/styles.css
index a5b14e0..340f83a 100755
--- a/styles.css
+++ b/styles.css
@@ -5,19 +5,19 @@ html, body {
 body {
     overflow: hidden;
     background-color: #fff;
-    font-family: sans-serif;
 }
 /* the whole interface is in the table */
 table.blockly-table {
     height: 95%;
     width: 100%;
 }
-/* spans */
+/* robot ID label error */
 span.has-error {
     color: #a94442 !important;
     border-color: #a94442 !important;
     background-color: #f2dede !important;
 }
+/* robot ID input error */
 input.has-error {
     border-color: #a94442 !important;
 }
@@ -79,51 +79,8 @@ div#stream {
     height: 100%;
     display: none;
 }
-/* for mobile and tablet screen */
-@media screen and (max-width: 1000px) {
-    /* logo object */
-    object.logo {
-        width: 100%;
-    }
-    /* control panel robot name input */
-    div.input-group {
-        width: 100%;
-        margin-left: auto;
-        margin-right: auto;
-    }
-    span.input-group-addon {
-        font-size: 7vw;
-        padding: 0.5vw 0.5vw !important;
-    }
-    input.form-control {
-        font-size: 7vw;
-        padding: 0.5vw 0.5vw !important;
-    }
-    /* robot connect button */
-    div.btn-group-robot {
-        width: 100%;
-    }
-    a.btn-robot-go {
-        width: 100%;
-        font-size: 30vw !important;
-        border: 3px solid rgba(0, 0, 0, 0.1) !important;
-    }
-    /* Blockly workspace */
-    td#blocklyArea {
-        width: 100%;
-        height: 100%;
-    }
-    /* Blockly code area */
-    td#blocklyCodeArea {
-        display: none;
-    }
-    /* ace editor */
-    div#blocklyCode {
-        display: none;
-    }
-}
 /* for desktop screen */
-@media screen and (min-width: 768px) {
+@media screen and (min-width: 1000px) {
     /* logo object */
     object.logo {
         width: 45%;
@@ -142,10 +99,11 @@ div#stream {
         font-size: 2vw;
         padding: 0.5vw 0.5vw !important;
     }
-    /* robot connect button */
+    /* robot connect button container */
     div.btn-group-robot {
         width: 35%;
     }
+    /* robot connect button */
     a.btn-robot-go {
         width: 100%;
         font-size: 10vw !important;
@@ -165,6 +123,50 @@ div#stream {
     div#blocklyCode {
         width: 100%;
         height: 100%;
-        font-size: 1.5em;
+        font-size: 1.3em;
+    }
+}
+/* for mobile and tablet screen */
+@media screen and (max-width: 1000px) {
+    /* logo object */
+    object.logo {
+        width: 70%;
+    }
+    /* control panel robot name input */
+    div.input-group {
+        width: 100%;
+        margin-left: auto;
+        margin-right: auto;
+    }
+    span.input-group-addon {
+        font-size: 4.5vw;
+        padding: 0.5vw 0.5vw !important;
+    }
+    input.form-control {
+        font-size: 4.5vw;
+        padding: 0.5vw 0.5vw !important;
+    }
+    /* robot connect button container */
+    div.btn-group-robot {
+        width: 100%;
+    }
+    /* robot connect button */
+    a.btn-robot-go {
+        width: 100%;
+        font-size: 18vw !important;
+        border: 3px solid rgba(0, 0, 0, 0.1) !important;
+    }
+    /* Blockly workspace */
+    td#blocklyArea {
+        width: 100%;
+        height: 100%;
+    }
+    /* Blockly code area */
+    td#blocklyCodeArea {
+        display: none;
+    }
+    /* ace editor */
+    div#blocklyCode {
+        display: none;
     }
 }