diff --git a/.gitignore b/.gitignore
index 454f55e4f..986900664 100644
--- a/.gitignore
+++ b/.gitignore
@@ -4,6 +4,7 @@ package-lock.json
 # Cypress local support artifacts
 cypress/screenshots
 cypress/videos
+cypress/downloads/downloads.html
 
 # Logs
 logs
diff --git a/.lintstagedrc b/.lintstagedrc
index 8d79dfc0a..90027c770 100644
--- a/.lintstagedrc
+++ b/.lintstagedrc
@@ -1,10 +1,4 @@
 {
-  "*.js": [
-    "prettier --write",
-    "eslint --fix",
-  ],
-  "*.css": [
-    "prettier --write",
-    "stylelint --fix",
-  ]
+  "*.js": ["prettier --write", "eslint --fix"],
+  "*.css": ["prettier --write", "stylelint --fix"]
 }
diff --git a/components/ErrorDisplay/ErrorDisplay.js b/components/ErrorDisplay/ErrorDisplay.js
index 135c9f5a0..ea234e614 100644
--- a/components/ErrorDisplay/ErrorDisplay.js
+++ b/components/ErrorDisplay/ErrorDisplay.js
@@ -1,7 +1,6 @@
 import { useEffect } from 'react';
 import { number } from 'prop-types';
 import Head from 'components/head';
-import styles from './ErrorDisplay.module.css';
 
 ErrorDisplay.propTypes = { statusCode: number };
 
@@ -21,11 +20,15 @@ function ErrorDisplay({ statusCode }) {
         <meta name="robots" content="noindex, nofollow" key={statusCode} />
       </Head>
 
-      <div className={styles.ErrorDisplay}>
-        <div className={styles.bg}>
-          <div className={styles.textContainer}>
-            <h1 className={styles.title}>{statusCode || 'Oh no'}!</h1>
-            <p className={styles.paragraph}>
+      <div className="bg-themeGray w-full h-full">
+        <div
+          className={
+            'h-[45vh] md:h-full text-white bg-[url("/static/images/TankFlip.gif")] flex flex-col justify-center w-full  bg-cover items-center'
+          }
+        >
+          <div className="text-center my-4 mx-auto">
+            <h1 className="text-6xl text-white">{statusCode || 'Oh no'}!</h1>
+            <p className="text-2xl text-white">
               We&apos;re so ashamed. You definitely weren&apos;t supposed to see this...
             </p>
           </div>
diff --git a/components/ErrorDisplay/ErrorDisplay.module.css b/components/ErrorDisplay/ErrorDisplay.module.css
deleted file mode 100644
index 88a04a57a..000000000
--- a/components/ErrorDisplay/ErrorDisplay.module.css
+++ /dev/null
@@ -1,37 +0,0 @@
-.ErrorDisplay {
-  background: #121212;
-  height: 100%;
-  width: 100%;
-}
-
-.ErrorDisplay .bg {
-  align-items: center;
-  background-image: url("/static/images/TankFlip.gif");
-  background-size: cover;
-  background-position-x: center;
-  color: white;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  width: 100%;
-  height: calc(100vh - 390px);
-}
-
-@media screen and (--medium-viewport) {
-  .ErrorDisplay .bg {
-    height: 100vh;
-  }
-}
-
-.textContainer {
-  text-align: center;
-  margin: 1rem auto;
-}
-
-.title {
-  font-size: 4rem;
-}
-
-.paragraph {
-  font-size: 1.4rem;
-}
diff --git a/components/ErrorDisplay/__tests__/__snapshots__/ErrorDisplay.test.js.snap b/components/ErrorDisplay/__tests__/__snapshots__/ErrorDisplay.test.js.snap
index e45ca9d64..a8e5cb3b7 100644
--- a/components/ErrorDisplay/__tests__/__snapshots__/ErrorDisplay.test.js.snap
+++ b/components/ErrorDisplay/__tests__/__snapshots__/ErrorDisplay.test.js.snap
@@ -2,22 +2,22 @@
 
 exports[`ErrorDisplay should render with just required props 1`] = `
 <div
-  className="ErrorDisplay"
+  className="bg-themeGray w-full h-full"
 >
   <div
-    className="bg"
+    className="h-[45vh] md:h-full text-white bg-[url(\\"/static/images/TankFlip.gif\\")] flex flex-col justify-center w-full  bg-cover items-center"
   >
     <div
-      className="textContainer"
+      className="text-center my-4 mx-auto"
     >
       <h1
-        className="title"
+        className="text-6xl text-white"
       >
         404
         !
       </h1>
       <p
-        className="paragraph"
+        className="text-2xl text-white"
       >
         We're so ashamed. You definitely weren't supposed to see this...
       </p>
diff --git a/cypress/downloads/downloads.html b/cypress/downloads/downloads.html
index 27610fe28..18d3040b4 100644
Binary files a/cypress/downloads/downloads.html and b/cypress/downloads/downloads.html differ
diff --git a/tailwind.config.js b/tailwind.config.js
index 6723d5942..18de77267 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -9,7 +9,17 @@ module.exports = {
     './src/**/*.{js,ts,jsx,tsx,mdx}',
   ],
   theme: {
-    extend: {},
+    screens: {
+      sm: '576px',
+      md: '768px',
+      lg: '992px',
+      xl: '1200px',
+    },
+    extend: {
+      colors: {
+        themeGray: '#121212',
+      },
+    },
   },
   plugins: [],
   important: '#__next',