diff --git a/public/404.html b/public/404.html
index 2be3af26..ef2afdcc 100644
--- a/public/404.html
+++ b/public/404.html
@@ -1,67 +1,22 @@
 <!DOCTYPE html>
 <html>
 <head>
-  <title>The page you were looking for doesn't exist (404)</title>
+  <title>Page not found</title>
   <meta name="viewport" content="width=device-width,initial-scale=1">
-  <style>
-  .rails-default-error-page {
-    background-color: #EFEFEF;
-    color: #2E2F30;
-    text-align: center;
-    font-family: arial, sans-serif;
-    margin: 0;
-  }
-
-  .rails-default-error-page div.dialog {
-    width: 95%;
-    max-width: 33em;
-    margin: 4em auto 0;
-  }
-
-  .rails-default-error-page div.dialog > div {
-    border: 1px solid #CCC;
-    border-right-color: #999;
-    border-left-color: #999;
-    border-bottom-color: #BBB;
-    border-top: #B00100 solid 4px;
-    border-top-left-radius: 9px;
-    border-top-right-radius: 9px;
-    background-color: white;
-    padding: 7px 12% 0;
-    box-shadow: 0 3px 8px rgba(50, 50, 50, 0.17);
-  }
-
-  .rails-default-error-page h1 {
-    font-size: 100%;
-    color: #730E15;
-    line-height: 1.5em;
-  }
-
-  .rails-default-error-page div.dialog > p {
-    margin: 0 0 1em;
-    padding: 1em;
-    background-color: #F7F7F7;
-    border: 1px solid #CCC;
-    border-right-color: #999;
-    border-left-color: #999;
-    border-bottom-color: #999;
-    border-bottom-left-radius: 4px;
-    border-bottom-right-radius: 4px;
-    border-top-color: #DADADA;
-    color: #666;
-    box-shadow: 0 3px 8px rgba(50, 50, 50, 0.17);
-  }
-  </style>
+  <link rel="stylesheet" href="style.css" />
 </head>
 
-<body class="rails-default-error-page">
+<body>
   <!-- This file lives in public/404.html -->
-  <div class="dialog">
-    <div>
-      <h1>The page you were looking for doesn't exist.</h1>
-      <p>You may have mistyped the address or the page may have moved.</p>
-    </div>
-    <p>If you are the application owner check the logs for more information.</p>
+  <div class="card">
+    <h1>Page not found</h1>
+    <img src="error-404.png" width="64" height="64" class="error-image" />
+    <p class="error-description">
+      The page you're looking for doesn't exist.
+    </p>
+    <p class="error-description">
+      <a href="/">Go back to home page</a>
+    </p>
   </div>
 </body>
 </html>
diff --git a/public/422.html b/public/422.html
index c08eac0d..75547bde 100644
--- a/public/422.html
+++ b/public/422.html
@@ -1,67 +1,22 @@
 <!DOCTYPE html>
 <html>
 <head>
-  <title>The change you wanted was rejected (422)</title>
+  <title>The change you wanted was rejected</title>
   <meta name="viewport" content="width=device-width,initial-scale=1">
-  <style>
-  .rails-default-error-page {
-    background-color: #EFEFEF;
-    color: #2E2F30;
-    text-align: center;
-    font-family: arial, sans-serif;
-    margin: 0;
-  }
-
-  .rails-default-error-page div.dialog {
-    width: 95%;
-    max-width: 33em;
-    margin: 4em auto 0;
-  }
-
-  .rails-default-error-page div.dialog > div {
-    border: 1px solid #CCC;
-    border-right-color: #999;
-    border-left-color: #999;
-    border-bottom-color: #BBB;
-    border-top: #B00100 solid 4px;
-    border-top-left-radius: 9px;
-    border-top-right-radius: 9px;
-    background-color: white;
-    padding: 7px 12% 0;
-    box-shadow: 0 3px 8px rgba(50, 50, 50, 0.17);
-  }
-
-  .rails-default-error-page h1 {
-    font-size: 100%;
-    color: #730E15;
-    line-height: 1.5em;
-  }
-
-  .rails-default-error-page div.dialog > p {
-    margin: 0 0 1em;
-    padding: 1em;
-    background-color: #F7F7F7;
-    border: 1px solid #CCC;
-    border-right-color: #999;
-    border-left-color: #999;
-    border-bottom-color: #999;
-    border-bottom-left-radius: 4px;
-    border-bottom-right-radius: 4px;
-    border-top-color: #DADADA;
-    color: #666;
-    box-shadow: 0 3px 8px rgba(50, 50, 50, 0.17);
-  }
-  </style>
+  <link rel="stylesheet" href="style.css" />
 </head>
 
-<body class="rails-default-error-page">
+<body>
   <!-- This file lives in public/422.html -->
-  <div class="dialog">
-    <div>
-      <h1>The change you wanted was rejected.</h1>
-      <p>Maybe you tried to change something you didn't have access to.</p>
-    </div>
-    <p>If you are the application owner check the logs for more information.</p>
+  <div class="card">
+    <h1>Rejected</h1>
+    <img src="error-422.png" width="64" height="64" class="error-image" />
+    <p class="error-description">
+      The change you wanted was rejected. If you're trying to do something bad, our team of astute foxes is already looking out for you. Watch out!
+    </p>
+    <p class="error-description">
+      If you think you should be allowed to do this, then <a href="mailto:info@astuto.io">contact us</a>.
+    </p>
   </div>
 </body>
 </html>
diff --git a/public/500.html b/public/500.html
index 78a030af..193f83a6 100644
--- a/public/500.html
+++ b/public/500.html
@@ -1,66 +1,22 @@
 <!DOCTYPE html>
 <html>
 <head>
-  <title>We're sorry, but something went wrong (500)</title>
+  <title>We're sorry, but something went wrong</title>
   <meta name="viewport" content="width=device-width,initial-scale=1">
-  <style>
-  .rails-default-error-page {
-    background-color: #EFEFEF;
-    color: #2E2F30;
-    text-align: center;
-    font-family: arial, sans-serif;
-    margin: 0;
-  }
-
-  .rails-default-error-page div.dialog {
-    width: 95%;
-    max-width: 33em;
-    margin: 4em auto 0;
-  }
-
-  .rails-default-error-page div.dialog > div {
-    border: 1px solid #CCC;
-    border-right-color: #999;
-    border-left-color: #999;
-    border-bottom-color: #BBB;
-    border-top: #B00100 solid 4px;
-    border-top-left-radius: 9px;
-    border-top-right-radius: 9px;
-    background-color: white;
-    padding: 7px 12% 0;
-    box-shadow: 0 3px 8px rgba(50, 50, 50, 0.17);
-  }
-
-  .rails-default-error-page h1 {
-    font-size: 100%;
-    color: #730E15;
-    line-height: 1.5em;
-  }
-
-  .rails-default-error-page div.dialog > p {
-    margin: 0 0 1em;
-    padding: 1em;
-    background-color: #F7F7F7;
-    border: 1px solid #CCC;
-    border-right-color: #999;
-    border-left-color: #999;
-    border-bottom-color: #999;
-    border-bottom-left-radius: 4px;
-    border-bottom-right-radius: 4px;
-    border-top-color: #DADADA;
-    color: #666;
-    box-shadow: 0 3px 8px rgba(50, 50, 50, 0.17);
-  }
-  </style>
+  <link rel="stylesheet" href="style.css" />
 </head>
 
-<body class="rails-default-error-page">
+<body>
   <!-- This file lives in public/500.html -->
-  <div class="dialog">
-    <div>
-      <h1>We're sorry, but something went wrong.</h1>
-    </div>
-    <p>If you are the application owner check the logs for more information.</p>
+  <div class="card">
+    <h1>Something went wrong</h1>
+    <img src="error-500.png" width="64" height="64" class="error-image" />
+    <p class="error-description">
+      We're sorry. Wait a moment and try again.
+    </p>
+    <p class="error-description">
+      If the issue persists, <a href="mailto:info@astuto.io">contact us</a>.
+    </p>
   </div>
 </body>
 </html>
diff --git a/public/error-404.png b/public/error-404.png
new file mode 100644
index 00000000..9fc752ad
Binary files /dev/null and b/public/error-404.png differ
diff --git a/public/error-422.png b/public/error-422.png
new file mode 100644
index 00000000..7740e71e
Binary files /dev/null and b/public/error-422.png differ
diff --git a/public/error-500.png b/public/error-500.png
new file mode 100644
index 00000000..de5f709d
Binary files /dev/null and b/public/error-500.png differ
diff --git a/public/style.css b/public/style.css
new file mode 100644
index 00000000..cab45c03
--- /dev/null
+++ b/public/style.css
@@ -0,0 +1,28 @@
+.card {
+  /* Bootstrap 4.6.2 card style */
+  position: relative;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  min-width: 0;
+  word-wrap: break-word;
+  background-color: #fff;
+  background-clip: border-box;
+  border: 1px solid rgba(0, 0, 0, 0.125);
+  border-radius: 0.25rem;
+
+  /* My customizations */
+  max-width: 720px;
+  text-align: center;
+  font-family: system-ui;
+  margin: 0 auto;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.04),0 2px 4px -1px rgba(0, 0, 0, 0.03);
+  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
+  color: black;
+  padding: 8px;
+}
+
+.error-image { margin: 0 auto; }
+.error-description { font-size: 18px; }
+a { color: black; }
\ No newline at end of file
