diff --git a/less/404.less b/less/404.less
index d2defa4..9105c50 100644
--- a/less/404.less
+++ b/less/404.less
@@ -6,9 +6,12 @@
 		position: absolute;
 		top: 50%;
 		left: 50%;
-		height: 250px;
+		height: 200px;
 		width: 500px;
-		margin: -125px 0 0 -250px;
+		margin: -85px 0px 0px -250px;
+		
+		background-color: #FCFCFC;
+		padding: 0px 1em;
 	}
 }
 
diff --git a/less/base.less b/less/base.less
index 560dfa7..a837a7b 100644
--- a/less/base.less
+++ b/less/base.less
@@ -47,18 +47,20 @@ body {
   left: 0px;
   //z-index: -5;
 }
-
 #bgTop {
   top: 0px;
 }
-
 #bgMiddle {
   top: 30%;
 }
-
 #bgBottom {
   bottom: 0px;
 }
+@media  only screen and (max-height: 700px) {
+  #bgMiddle {
+  	display: none;
+  }
+}
 
 @import "base_centerpanel.less";
 @import "base_leftpanel.less";
diff --git a/www/404.html b/www/404.html
index f7931ca..26a57e7 100644
--- a/www/404.html
+++ b/www/404.html
@@ -2,15 +2,16 @@
 
   <!-- background images -->
   <div class="bgContainer">
-    <img class="bgTop"    src="img/bg_top.png" />
-    <img class="bgMiddle" src="img/bg_middle.png" />
-    <img class="bgBottom" src="img/bg_bottom.png" />
+    <img id="bgTop"    src="img/bg_top.png" />
+    <img id="bgMiddle" src="img/bg_middle.png" />
+    <img id="bgBottom" src="img/bg_bottom.png" />
   </div>
 
   <!-- center panel -->
-  <div class="centerpanel">
-    <div class="logopanel">
-      <div class="d3dlogo" onclick="location.reload()"></div>
+  <div id="centerpanel">
+    <div id="logopanel" class="btn">
+      <img id="pencil" src="img/logo/pencil.png"/>
+      <img id="logo" src="img/logo/doodle3d.png"/>
     </div>
   </div>
   <div id="message404">
@@ -25,5 +26,5 @@
   </div>
 </div>
 <div id="portrait">
-  <img class="vertImage" src="img/bg_vertical.png"/>
+  <img id="vertImage" src="img/bg_vertical.png"/>
 </div>
\ No newline at end of file