diff --git a/assets/css/_page/_404.scss b/assets/css/_page/_404.scss
deleted file mode 100644
index 774c7dd2b..000000000
--- a/assets/css/_page/_404.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-#content-404 {
-  font-size: 1.8rem;
-  line-height: 3rem;
-  @include transform(translateY(30vh));
-  text-align: center;
-}
diff --git a/assets/css/_page/_index.scss b/assets/css/_page/_index.scss
index dce306c0f..5f4dcadef 100644
--- a/assets/css/_page/_index.scss
+++ b/assets/css/_page/_index.scss
@@ -12,5 +12,4 @@
 @import "_special";
 @import "_archive";
 @import "_home";
-@import "_404";
 @import "_taxonomy";
diff --git a/assets/css/main.css b/assets/css/main.css
index be3e57be7..09e649f23 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -868,6 +868,10 @@ html.dark {
   height: 2.5rem;
 }
 
+.tw-h-\[90vh\] {
+  height: 90vh;
+}
+
 .tw-h-fit {
   height: -moz-fit-content;
   height: fit-content;
@@ -930,6 +934,14 @@ html.dark {
   flex-direction: column;
 }
 
+.tw-items-center {
+  align-items: center;
+}
+
+.tw-justify-center {
+  justify-content: center;
+}
+
 .tw-justify-between {
   justify-content: space-between;
 }
@@ -997,6 +1009,10 @@ html.dark {
   padding-top: 8rem;
 }
 
+.tw-text-center {
+  text-align: center;
+}
+
 .tw-align-text-bottom {
   vertical-align: text-bottom;
 }
@@ -1006,6 +1022,11 @@ html.dark {
   line-height: 2rem;
 }
 
+.tw-text-3xl {
+  font-size: 1.875rem;
+  line-height: 2.25rem;
+}
+
 .tw-uppercase {
   text-transform: uppercase;
 }
diff --git a/layouts/404.html b/layouts/404.html
index bd27ec3d9..9eb7366be 100644
--- a/layouts/404.html
+++ b/layouts/404.html
@@ -3,17 +3,15 @@
 {{- end -}}
 
 {{- define "content" -}}
-    <div class="page" id="content-404">
+    <div class="page tw-h-[90vh] tw-flex tw-flex-col tw-justify-center tw-items-center tw-text-3xl tw-text-center">
         <h1 id="error-emoji"></h1>
         <p class="error-text">
             {{- T "pageNotFoundText" -}}&nbsp;
             <button onclick="window.history.back();">{{ partial "plugin/fontawesome.html" (dict "Style" "regular" "Icon" "hand-point-left") }}</button>
         </p>
     </div>
-    <script type="text/javascript">
-        (function() {
-            var emojiArray = ['\\(o_o)/', '(˚Δ˚)b', '(^-^*)', '(≥o≤)', '(^_^)b', '(·_·)','(=\'X\'=)', '(>_<)', '(;-;)'];
-            document.getElementById('error-emoji').appendChild(document.createTextNode(emojiArray[Math.floor(Math.random() * emojiArray.length)]));
-        })();
+    <script>
+        const emojiArray = ['\\(o_o)/', '(˚Δ˚)b', '(^-^*)', '(≥o≤)', '(^_^)b', '(·_·)','(=\'X\'=)', '(>_<)', '(;-;)'];
+        document.getElementById('error-emoji').appendChild(document.createTextNode(emojiArray[Math.floor(Math.random() * emojiArray.length)]));
     </script>
 {{- end -}}