diff --git a/404.php b/404.php
index b6abf3c..be67658 100644
--- a/404.php
+++ b/404.php
@@ -1,4 +1,5 @@
 <?php
+
 /**
  * The template for displaying 404 pages (not found).
  *
@@ -9,13 +10,19 @@
 
 get_header(); ?>
 
-<main class="content-wrap">
-  <section class="container mx-auto relative z-10">
-    <h1>Oops! That page can't be found.</h1>
-    <p>It looks like nothing was found at this location. Maybe try one of the links below or a search?</p>
-    <?php
-    get_search_form(); ?>
-  </section>
+<main class="container-fluid d-flex flex-column justify-content-center align-items-center text-light mt-4">
+
+  <img src="<?php echo get_stylesheet_directory_uri() . '/dist/images/40x_unicorn-300.png'; ?>" class="img-fluid mb-3" alt="UNICORN">
+
+  <h2 class="fs-2 mb-0">Oh no! Problem!</h2>
+  <p class="lead mb-0">What you seek cannot be found.</p>
+  <p class="mb-0" style="font-size: 14px;">(deep, huh?)</p>
+  <p class="lead mb-0">Maybe try one of the links above or below, or a search?</p>
+  <p class="mt-3" style="font-size: 10px;">
+    (Unicorn image <a href="https://creativecommons.org/licenses/by-nc/4.0/" rel="noreferrer" target="_blank">Creative Commons 4.0 BY-NC</a>
+    via <a href="http://pngimg.com/download/24891" rel="noreferrer" target="_blank">pngimg.com</a>)
+  </p>
+
 </main>
 
 <?php
diff --git a/TODO.md b/TODO.md
index 8adb63e..96a0f14 100644
--- a/TODO.md
+++ b/TODO.md
@@ -43,10 +43,10 @@
   - [X] ~~*sidebar.php ??*~~ [2021-07-10]
 - [X] ~~*search field up top somewhere?*~~ [2021-07-10]
   - [X] ~~*search.php ??*~~ [2021-07-10]
-- [ ] 404.php
-  - [ ] NGINX SNIPPETS - bring in for testing!
-  - [ ] nginx 404 handling?
-  - [ ] nginx 50x handling! - nginx purposefully generate 505 errors somehow?
+- [X] ~~*404.php*~~ [2021-07-10]
+  - [X] ~~*NGINX SNIPPETS - bring in for testing!*~~ [2021-07-10]
+  - [X] ~~*nginx 404 handling?*~~ [2021-07-10]
+  - [X] ~~*nginx 50x handling! - nginx purposefully generate 505 errors somehow?*~~ [2021-07-10]
 - [ ] double-check npm run build output to ensure it's all working
   - [ ] disable WP/SCRIPT DEBUG
 - [ ] ...
diff --git a/assets/css/app.scss b/assets/css/app.scss
index 76956f7..94ebf38 100644
--- a/assets/css/app.scss
+++ b/assets/css/app.scss
@@ -255,6 +255,9 @@ blockquote {
     @extend .py-3;
     max-width: 25rem;
   }
+  ul {
+    padding-inline-start: 2rem;
+  }
   .wp-block-loginout {
     display: list-item;
     margin-left: 2rem;
@@ -272,6 +275,10 @@ blockquote {
 .search-form .form-control:focus {
   border-color: $input-focus-border-color;
 }
+.form-control::-ms-clear,
+input.form-control::-ms-clear,
+.form-control::-ms-reveal,
+input.form-control::-ms-reveal { display: none; }
 .form-control::-webkit-input-placeholder { /* WebKit, Blink, Edge */
   color:    $gray-500    !important;
 }
@@ -292,6 +299,10 @@ blockquote {
 .form-control::placeholder { /* Most modern browsers support this now. */
   color:    $gray-500    !important;
 }
+.search-form .btn-outline-light {
+  color: $gray-300;
+  border-color: $gray-500;
+}
 .search-form .btn-outline-light:hover {
   color: $primary;
   background-color: inherit;
diff --git a/assets/images/40x_rainbow.jpg b/assets/images/40x_rainbow.jpg
new file mode 100644
index 0000000..4abbd94
Binary files /dev/null and b/assets/images/40x_rainbow.jpg differ
diff --git a/assets/images/40x_unicorn-300.png b/assets/images/40x_unicorn-300.png
new file mode 100644
index 0000000..39835fb
Binary files /dev/null and b/assets/images/40x_unicorn-300.png differ
diff --git a/assets/js/main.js b/assets/js/main.js
index 96ba7a5..d95d115 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -14,6 +14,8 @@ import "../../node_modules/@mdi/svg/svg/typewriter.svg";
 import "../../node_modules/@mdi/svg/svg/calendar-clock.svg";
 import "../../node_modules/@mdi/svg/svg/tag-multiple.svg";
 import "../../node_modules/@mdi/svg/svg/rss.svg";
+import "../../node_modules/@mdi/svg/svg/account-hard-hat.svg";
+import "../../node_modules/@mdi/svg/svg/open-in-new.svg";
 import "../../node_modules/@mdi/svg/svg/magnify.svg";
 // social
 import "../../node_modules/@mdi/svg/svg/linkedin.svg";
diff --git a/header.php b/header.php
index 28b62b3..8feb928 100644
--- a/header.php
+++ b/header.php
@@ -44,11 +44,22 @@ namespace WP_73k;
 
   <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
   <?php wp_head(); ?>
+  <?php if (is_404()) : ?>
+    <style>
+      body {
+        background: url(<?php echo get_stylesheet_directory_uri() . '/dist/images/40x_rainbow.jpg'; ?>);
+        background-repeat: no-repeat;
+        background-size: cover;
+        background-attachment: fixed;
+        background-position: center;
+      }
+    </style>
+  <?php endif; ?>
 </head>
 
 <body <?php body_class(); ?> itemscope itemtype="https://schema.org/WebPage">
 
-<nav class="navbar <?php echo ($args['fixednav'] ? 'fixed-top' : ''); ?> navbar-expand-lg navbar-dark bg-dark px-1 px-sm-2 px-lg-3 px-xl-4 px-xxl-5 py-3">
+<nav class="navbar <?php echo ($args['fixednav'] ? 'fixed-top' : ''); ?> navbar-expand-lg navbar-dark px-1 px-sm-2 px-lg-3 px-xl-4 px-xxl-5 py-3">
   <div class="container-fluid">
 
     <h1 class="my-0 py-0 lh-base">
diff --git a/webpack.config.js b/webpack.config.js
index 5693e9d..53815fc 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -182,6 +182,11 @@ function getCSSWhitelistPatterns() {
     /^children(-.*)?$/,
     /^hljs(-.*)?$/,
     /^tek(-.*)?$/,
+    /^html$/,
+    /^body$/,
+    /^blockquote$/,
+    /^ul$/,
+    /^h.$/,
   ];
 }