diff --git a/web/static/index.css b/web/static/index.css
index b15af8e..37cb7fe 100644
--- a/web/static/index.css
+++ b/web/static/index.css
@@ -450,3 +450,25 @@ footer {
     font-size: 10px;
     text-align: center;
 }
+
+/* 404 NOT FOUND */
+
+.not-found-container {
+    min-height: 90vh;
+    display: flex;
+    align-items: center;
+}
+
+.not-found-container .box {
+    text-align: center;
+}
+
+.not-found-container .box div {
+    padding: 20px;
+}
+
+#notFoundImg {
+    max-width: 80%;
+    display: block;
+    margin: auto;
+}
diff --git a/web/static/media/404/1.jpg b/web/static/media/404/1.jpg
new file mode 100644
index 0000000..f3a0f08
Binary files /dev/null and b/web/static/media/404/1.jpg differ
diff --git a/web/views/404.templ b/web/views/404.templ
index 85b78dd..6edb6f2 100644
--- a/web/views/404.templ
+++ b/web/views/404.templ
@@ -1,9 +1,17 @@
 package views
 
+import "github.com/dominicf2001/comfychan/web/views/shared"
+
 templ NotFound() {
-	<div class="container not-found">
-		<h1>404</h1>
-		<p>Comfychan couldn’t find that page.</p>
-		<img src="/static/media/comfy-404.png" alt="404 mascot"/>
-	</div>
+	@shared.Layout() {
+		<div class="container not-found-container">
+			<div class="box">
+				<h2>404 not found.</h2>
+				<div>
+					<img id="notFoundImg" src="/static/media/404/1.jpg" alt="404 mascot"/>
+				</div>
+				<p><a class="link-button" href="javascript:history.back()">[Go back]</a></p>
+			</div>
+		</div>
+	}
 }