diff --git a/package.json b/package.json
index f0674565..86bf2ff4 100755
--- a/package.json
+++ b/package.json
@@ -30,6 +30,7 @@
     "gatsby-transformer-remark": "^2.1.12",
     "gatsby-transformer-sharp": "^2.1.8",
     "gatsby-transformer-yaml": "^2.1.5",
+    "giphy-js-sdk-core": "^1.0.6",
     "intersection-observer": "^0.5.1",
     "node-sass": "^4.10.0",
     "prismjs": "^1.15.0",
diff --git a/src/pages/404.js b/src/pages/404.js
deleted file mode 100755
index 49f7e668..00000000
--- a/src/pages/404.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react'
-import Layout from '../components/Layout'
-
-const NotFoundPage = () => (
-    <Layout>
-        <h1>NOT FOUND</h1>
-        <p>You just hit a route that doesn&#39;t exist... the sadness.</p>
-    </Layout>
-)
-
-export default NotFoundPage
diff --git a/src/pages/404.jsx b/src/pages/404.jsx
new file mode 100755
index 00000000..d6f3b96b
--- /dev/null
+++ b/src/pages/404.jsx
@@ -0,0 +1,79 @@
+//
+// Thanks @kremalicious
+// https://github.com/kremalicious/portfolio/blob/master/src/pages/404.jsx
+//
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import { Link } from 'gatsby'
+import giphyAPI from 'giphy-js-sdk-core'
+import Helmet from 'react-helmet'
+import Layout from '../components/Layout'
+import Content from '../components/Content'
+import styles from './404.module.scss'
+
+// Famous last words:
+// "It's just the 404 page so why not expose the dev API key"
+const giphyClient = giphyAPI('LfXRwufRyt6PK414G2kKJBv3L8NdnxyR')
+const tag = 'ocean'
+
+export default class NotFoundPage extends Component {
+    state = { gif: '' }
+
+    static propTypes = {
+        location: PropTypes.object
+    }
+
+    componentDidMount() {
+        this.getRandomGif()
+    }
+
+    async getRandomGif() {
+        try {
+            let response = await giphyClient.random('gifs', { tag })
+            const gif = response.data.images.original.mp4
+            this.setState({ gif })
+        } catch (error) {
+            return error
+        }
+    }
+
+    handleClick = e => {
+        e.preventDefault()
+        this.getRandomGif()
+    }
+
+    render() {
+        return (
+            <>
+                <Helmet title="404 - Not Found" />
+                <Layout location={this.props.location}>
+                    <Content>
+                        <article className={styles.content}>
+                            <h1>Page not found.</h1>
+                            <p>
+                                You just hit a route that doesn&#39;t exist...
+                                the sadness. Check your url,{' '}
+                                <Link to={'/'}>go back to the homepage</Link>,
+                                or check out some <em>{tag}</em> gifs, entirely
+                                your choice.
+                            </p>
+
+                            <video
+                                className="gif"
+                                src={this.state.gif}
+                                autoPlay
+                                loop
+                            />
+
+                            <div>
+                                <button
+                                    onClick={this.handleClick}
+                                >{`Get another ${tag} gif`}</button>
+                            </div>
+                        </article>
+                    </Content>
+                </Layout>
+            </>
+        )
+    }
+}
diff --git a/src/pages/404.module.scss b/src/pages/404.module.scss
new file mode 100644
index 00000000..99e69bb4
--- /dev/null
+++ b/src/pages/404.module.scss
@@ -0,0 +1,28 @@
+@import 'variables';
+
+.content {
+    max-width: 33rem;
+    margin: auto;
+    text-align: center;
+
+    video {
+        margin-top: $spacer;
+        margin-bottom: $spacer;
+        display: block;
+        width: auto;
+        max-height: 300px;
+        border: $page-frame solid $brand-black;
+        background: $brand-black;
+    }
+
+    button {
+        background: none;
+        border: 0;
+        box-shadow: none;
+        font-family: $font-family-button;
+        font-weight: $font-weight-bold;
+        font-size: $font-size-base;
+        color: $brand-pink;
+        cursor: pointer;
+    }
+}
diff --git a/src/pages/index.js b/src/pages/index.jsx
similarity index 100%
rename from src/pages/index.js
rename to src/pages/index.jsx