diff --git a/hugo/layouts/404.html b/hugo/layouts/404.html
new file mode 100644
index 0000000..b492a08
--- /dev/null
+++ b/hugo/layouts/404.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en" class="scroll-smooth">
+
+<head>
+ {{ partial "oct-head" . }}
+</head>
+
+<body>
+ {{ partial "oct-header" . }}
+ <main>
+ <section style="height: 100%;">
+ <div class="text-content error-text">
+ <h1>Page Not Found</h1>
+ <h2>Couldn't find what you were looking for? Maybe we can help.</h1>
+ <div class="button-bar">
+ <a class="button" href="https://www.typefox.io/">Get Support</a>
+ <a class="button" href="/">Back to Homepage</a>
+ </div>
+ </div>
+ </section>
+ </main>
+ {{ partial "oct-footer" . }}
+</body>
+
+
+</html>
\ No newline at end of file
diff --git a/hugo/static/css/style.css b/hugo/static/css/style.css
index cb93c9c..f3b3244 100644
--- a/hugo/static/css/style.css
+++ b/hugo/static/css/style.css
@@ -330,4 +330,30 @@ footer a {
.login-form .button {
margin-top: 0.75rem;
-}
\ No newline at end of file
+}
+.error-text {
+ line-height: 2rem;
+ height: 100%;
+ margin-top: 10%;;
+}
+.error-text h1,h2 {
+ text-align: center;
+}
+
+@media screen and (max-width: 768px){
+ .button-bar {
+ flex-direction: column;
+ gap: 1rem;
+ }
+
+ .button-bar a {
+ margin: auto;
+ }
+}
+
+.button-bar {
+ display: flex;
+ justify-content: center;
+ gap: 2rem;
+}
+