diff --git a/404.html b/404.html
index 4bae01f0..3cc7308c 100644
--- a/404.html
+++ b/404.html
@@ -3,31 +3,13 @@
 layout: default
 ---
 
-<style type="text/css" media="screen">
-  .container {
-    margin: 10px auto;
-    max-width: 600px;
-    text-align: center;
-  }
-  h1 {
-    margin: 30px 0;
-    font-size: 4em;
-    line-height: 1;
-    letter-spacing: -1px;
-  }
-</style>
+{% include navbar.html %}
 
-<div class="container" style='margin-bottom: 200px;'>
-  <h1 style='margin-top: 130px;'>Page Not Found</h1>
+<div class="text-center my-40 mx-8 xl:my-20">
+  <h2 class="text-5xl">Page Not Found</h1>
 
-  <p><strong>お探しのページが見つかりませんでした 🥹</strong></p>
-  <p  style='margin-bottom: 100px;'>リンク切れなどあれば <a href='https://twitter.com/DojoConJapan'>@DojoConJapan</a> アカウントまで<br class='ignore-sp'>ご報告いただけると嬉しいです 🙏</p>
-
-  <h2 style='margin-bottom: 30px;'>
-    <i class="fab fa-twitter"></i>
-    <a href='https://twitter.com/DojoConJapan'>
-      最近の投稿を見る
-    </a>
-  </h2>
-  <a class="twitter-timeline" data-lang="ja" data-height="600" href="https://twitter.com/DojoConJapan?ref_src=twsrc%5Etfw">Tweets by DojoConJapan</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+  <p class="my-8">
+    <strong>お探しのページが見つかりませんでした🥹</strong><br />
+    リンク切れなどあれば <i class="fab fa-x-twitter"></i> <a href='https://x.com/{{ site.x }}' target="_blank">@DojoConJapan</a> アカウントまで<wbr>ご報告いただけると嬉しいです🙏
+  </p>
 </div>