diff --git a/layout/_partial/head.ejs b/layout/_partial/head.ejs
index 27db394..43b189d 100644
--- a/layout/_partial/head.ejs
+++ b/layout/_partial/head.ejs
@@ -29,7 +29,7 @@
   <link rel="shortcut icon" href="<%- theme.favicon %>" />
   <% } %>
   <%- css('dist/main') %>
-  <%- css('custom') %>
+  <%- css('css/custom') %>
   <% if (theme.progressBar){ %>
   <script src="https://cdn.jsdelivr.net/npm/pace-js@1.0.2/pace.min.js"></script>
   <% } %>
diff --git a/source-src/css/404.styl b/source-src/css/404.styl
deleted file mode 100644
index 99a44e1..0000000
--- a/source-src/css/404.styl
+++ /dev/null
@@ -1,40 +0,0 @@
-@charset "utf-8"
-//
-// 404
-html, body, div, figure, img
-  margin 0
-  padding 0
-
-body
-  font-family "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
-
-.notfound
-  position absolute
-  top 50%
-  left 50%
-  transform translate(-50%, -50%)
-
-figure.forrestgump
-  position relative
-  width 100%
-  img
-    width 100%
-  figcaption
-    float right
-    clear right
-    width 100%
-    padding 0
-    text-align right
-
-@media (min-width: 768.02px)
-  figure.forrestgump
-    width 30rem
-    figcaption
-      width 60%
-      padding 0 2rem
-      
-.notfound-link 
-  position absolute
-  z-index 9
-  margin-top 2rem
-        
\ No newline at end of file
diff --git a/source/404.html b/source/404.html
index 2493df3..a4fc615 100644
--- a/source/404.html
+++ b/source/404.html
@@ -5,7 +5,31 @@
   <title>404</title>
   <meta name="keywords" content="Hexo,404,Design">
   <meta name="description" content="Tribute Forrest Gump">
-  <link rel="stylesheet" href="/css/404.css">
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
+  <style>
+    html,figure {
+      margin: 0;
+      padding: 0;
+      overflow-x: hidden;
+    }
+    body{
+      margin: 20px;
+      overflow: hidden;
+    }
+    h1,h3{
+      width: 100%;
+      text-align: center;
+    }
+    .forrestgump img{
+      width: 50rem;
+      margin-left: 50%;
+      transform: translateX(-50%);
+    }
+    @media screen and (max-width: 768px){
+      .forrestgump img{
+      width: 100%;
+    }
+  </style>
 </head>
 <body>
 <div class="notfound">
@@ -15,9 +39,9 @@
   <figure class="forrestgump">
     <figcaption>
       <h1 style="color: #6b0b0c;">404<br>Not Found!</h1>
-      <h3 style="color: #14206a;">Life was like a box of chocolates, you never know what you're going to get.</h3>
+      <h3 style="color: #14206a;">Life was like a journey on the sea, you never know what you're going to get.</h3>
     </figcaption>
-    <img src="/images/forrestgump.png">
+    <img src="/images/404.jpg">
   </figure>
 </div>
 </body>
diff --git a/source/custom.styl b/source/css/custom.styl
similarity index 100%
rename from source/custom.styl
rename to source/css/custom.styl
diff --git a/source/images/404.jpg b/source/images/404.jpg
new file mode 100644
index 0000000..0bb51ce
Binary files /dev/null and b/source/images/404.jpg differ
diff --git a/source/images/forrestgump.png b/source/images/forrestgump.png
deleted file mode 100644
index 1870f41..0000000
Binary files a/source/images/forrestgump.png and /dev/null differ
