diff --git a/resources/views/errors/404.twig b/resources/views/errors/404.twig
index 41481b8501..d68a915eb6 100644
--- a/resources/views/errors/404.twig
+++ b/resources/views/errors/404.twig
@@ -1,254 +1,47 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <meta charset="UTF-8"/>
-    <meta name="robots" content="noindex,nofollow"/>
-    <style>
-        /* Copyright (c) 2010, Yahoo! Inc. All rights reserved. Code licensed under the BSD License: http://developer.yahoo.com/yui/license.html */
-        html {
-            color: #000;
-            background: #FFF;
-        }
-
-        body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
-            margin: 0;
-            padding: 0;
-        }
-
-        table {
-            border-collapse: collapse;
-            border-spacing: 0;
-        }
-
-        fieldset, img {
-            border: 0;
-        }
-
-        address, caption, cite, code, dfn, em, strong, th, var {
-            font-style: normal;
-            font-weight: normal;
-        }
-
-        li {
-            list-style: none;
-        }
-
-        caption, th {
-            text-align: left;
-        }
-
-        h1, h2, h3, h4, h5, h6 {
-            font-size: 100%;
-            font-weight: normal;
-        }
-
-        q:before, q:after {
-            content: '';
-        }
-
-        abbr, acronym {
-            border: 0;
-            font-variant: normal;
-        }
-
-        sup {
-            vertical-align: text-top;
-        }
-
-        sub {
-            vertical-align: text-bottom;
-        }
-
-        input, textarea, select {
-            font-family: inherit;
-            font-size: inherit;
-            font-weight: inherit;
-        }
-
-        input, textarea, select {
-            *font-size: 100%;
-        }
-
-        legend {
-            color: #000;
-        }
-
-        html {
-            background: #eee;
-            padding: 10px
-        }
-
-        img {
-            border: 0;
-        }
-
-        #sf-resetcontent {
-            width: 970px;
-            margin: 0 auto;
-        }
-
-        .sf-reset {
-            font: 11px Verdana, Arial, sans-serif;
-            color: #333
-        }
-
-        .sf-reset .clear {
-            clear: both;
-            height: 0;
-            font-size: 0;
-            line-height: 0;
-        }
-
-        .sf-reset .clear_fix:after {
-            display: block;
-            height: 0;
-            clear: both;
-            visibility: hidden;
-        }
-
-        .sf-reset .clear_fix {
-            display: inline-block;
-        }
-
-        .sf-reset * html .clear_fix {
-            height: 1%;
-        }
-
-        .sf-reset .clear_fix {
-            display: block;
-        }
-
-        .sf-reset, .sf-reset .block {
-            margin: auto
-        }
-
-        .sf-reset abbr {
-            border-bottom: 1px dotted #000;
-            cursor: help;
-        }
-
-        .sf-reset p {
-            font-size: 14px;
-            line-height: 20px;
-            color: #868686;
-            padding-bottom: 20px
-        }
-
-        .sf-reset strong {
-            font-weight: bold;
-        }
-
-        .sf-reset a {
-            color: #6c6159;
-            cursor: default;
-        }
-
-        .sf-reset a img {
-            border: none;
-        }
-
-        .sf-reset a:hover {
-            text-decoration: underline;
-        }
-
-        .sf-reset em {
-            font-style: italic;
-        }
-
-        .sf-reset h1, .sf-reset h2 {
-            font: 20px Georgia, "Times New Roman", Times, serif
-        }
-
-        .sf-reset .exception_counter {
-            background-color: #fff;
-            color: #333;
-            padding: 6px;
-            float: left;
-            margin-right: 10px;
-            display: block;
-        }
-
-        .sf-reset .exception_title {
-            margin-left: 3em;
-            margin-bottom: 0.7em;
-            display: block;
-        }
-
-        .sf-reset .exception_message {
-            margin-left: 3em;
-            display: block;
-        }
-
-        .sf-reset .traces li {
-            font-size: 12px;
-            padding: 2px 4px;
-            list-style-type: decimal;
-            margin-left: 20px;
-        }
-
-        .sf-reset .block {
-            background-color: #FFFFFF;
-            padding: 10px 28px;
-            margin-bottom: 20px;
-            -webkit-border-bottom-right-radius: 16px;
-            -webkit-border-bottom-left-radius: 16px;
-            -moz-border-radius-bottomright: 16px;
-            -moz-border-radius-bottomleft: 16px;
-            border-bottom-right-radius: 16px;
-            border-bottom-left-radius: 16px;
-            border-bottom: 1px solid #ccc;
-            border-right: 1px solid #ccc;
-            border-left: 1px solid #ccc;
-        }
-
-        .sf-reset .block_exception {
-            background-color: #ddd;
-            color: #333;
-            padding: 20px;
-            -webkit-border-top-left-radius: 16px;
-            -webkit-border-top-right-radius: 16px;
-            -moz-border-radius-topleft: 16px;
-            -moz-border-radius-topright: 16px;
-            border-top-left-radius: 16px;
-            border-top-right-radius: 16px;
-            border-top: 1px solid #ccc;
-            border-right: 1px solid #ccc;
-            border-left: 1px solid #ccc;
-            overflow: hidden;
-            word-wrap: break-word;
-        }
-
-        .sf-reset a {
-            background: none;
-            color: #868686;
-            text-decoration: none;
-        }
-
-        .sf-reset a:hover {
-            background: none;
-            color: #313131;
-            text-decoration: underline;
-        }
-
-        .sf-reset ol {
-            padding: 10px 0;
-        }
-
-        .sf-reset h1 {
-            background-color: #FFFFFF;
-            padding: 15px 28px;
-            margin-bottom: 20px;
-            -webkit-border-radius: 10px;
-            -moz-border-radius: 10px;
-            border-radius: 10px;
-            border: 1px solid #ccc;
-        }
-    </style>
+    <meta charset="UTF-8">
+    <meta name="robots" content="noindex, nofolllow, noarchive, noodp, NoImageIndex, noydir">
+    <title>404</title>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
+    <base href="{{ route('index') }}/">
+    <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css" type="text/css" media="all"/>
+    <link rel="stylesheet" href="lib/font-awesome/css/font-awesome.min.css" type="text/css" media="all"/>
+    <link href="lib/adminlte/css/AdminLTE.min.css" rel="stylesheet" type="text/css"/>
+    <link href="css/firefly.css" rel="stylesheet" type="text/css"/>
+    {% include('partials.favicons') %}
 </head>
-<body>
-<div id="sf-resetcontent" class="sf-reset">
-    <h1>Sorry, the page you are looking for could not be found.</h1>
+<body class="ff-error-page">
+<div class="ff-error-box">
+    <div class="login-logo">
+        <a href="{{ route('index') }}"><s><b>Firefly</b>III</s> <span class="text-danger">404</span></a>
+    </div>
 
+    <div class="row">
+        <div class="col-lg-12 col-md-12 col-sm-12">
+            <h3 class="text-info">404 &mdash; Firefly III cannot find this page.</h3>
+        </div>
+    </div>
+
+    <div class="row">
+        <div class="col-lg-12 col-md-12 col-sm-12">
+            <p class="text-danger">
+                The page you have requested does not exist. Please check that you have not entered
+                the wrong URL. Did you make a typo perhaps?
+            </p>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-lg-12 col-md-12 col-sm-12">
+            <p>
+                If you are sure this page should exist, please open a ticket on
+                <strong><a href="https://github.com/firefly-iii/firefly-iii/issues">Github</a></strong>.
+            </p>
+        </div>
+    </div>
 </div>
+
 </body>
-</html>
+</html>
\ No newline at end of file
