diff --git a/src/components/Error.astro b/src/components/Error.astro
index e69de29..9dccaad 100644
--- a/src/components/Error.astro
+++ b/src/components/Error.astro
@@ -0,0 +1,14 @@
+---
+export interface Props {
+    code: string;
+}
+
+const { code } = Astro.props;
+---
+
+<div class="flex items-center justify-center h-screen flex-col">
+<div class="w-3/4">
+    <h1 class="text-6xl font-bold m-250">Error: { code }</h1>
+    <slot />
+</div>
+</div>
diff --git a/src/pages/[...any].astro b/src/pages/[...any].astro
index 2b80360..5b9905e 100644
--- a/src/pages/[...any].astro
+++ b/src/pages/[...any].astro
@@ -1,17 +1,20 @@
 ---
+// import Error from "../components/Error.astro"; //! TODO: sort this out
 import Error from "../components/Error.astro";
 import Boilerplate from "../layouts/Boilerplate.astro";
 
+// use styles.scss
+import "../styles.scss";
+
 const keywords: string[] = []
+
 ---
 
 <Boilerplate title="404" description="Page not found" keywords={keywords}>
-  <div class="error">
-    <h1>404</h1>
-    <p>Page not found</p>
-    <p>
-      Sorry, the page `<code>https://hullcss.org/{Astro.url}</code>` does not exist, 
-      Click <a href="/">here</a> to go back to the homepage.
+  <Error code="404">
+    <p class="text-xl p-250">
+      Sorry, the page `<code>{Astro.url}</code>` does not exist, 
+      Click <a href="/" class="text-hue_4a hover:text-hue_4b">here</a> to go back to the homepage.
     </p>
-  </div>
+  </Error>
 </Boilerplate>
\ No newline at end of file
diff --git a/src/styles.scss b/src/styles.scss
new file mode 100644
index 0000000..a63bf01
--- /dev/null
+++ b/src/styles.scss
@@ -0,0 +1,26 @@
+
+header {
+
+}
+
+main {
+    a {
+        text-decoration: none;
+
+        &:hover {
+            text-decoration: underline;
+        }
+    }
+
+    p {
+        margin: 15px;
+    }
+
+    h1 {
+        margin: 15px;
+    }
+}
+
+footer {
+
+}
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..3146eb1
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,40 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+	content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
+	theme: {
+		extend: {},
+		colors: {
+			transparent: 'transparent',
+			current: 'currentColor',
+			
+			// grayscale colors
+			mono_1: 'hsl(220, 14%, 71%)',
+			mono_2: 'hsl(220,  9%, 55%)',
+			mono_3: 'hsl(220, 14%, 45%)',
+			mono_4: 'hsl(220, 10%, 40%)',
+			mono_5: 'hsl(220, 13%, 18%)',
+			mono_6: 'hsl(220, 15%, 13%)',
+
+			// hue colors
+			hue_1a: 'hsl(187, 47%, 55%)',
+			hue_2a: 'hsl(207, 82%, 66%)',
+			hue_3a: 'hsl(286, 60%, 67%)',
+			hue_4a: 'hsl( 95, 100%, 68%)',
+			hue_4b: 'hsl(104,  16%, 41%)',
+			hue_5a: 'hsl(355, 65%, 65%)',
+			hue_5b: 'hsl(  5, 48%, 51%)',
+			hue_6a: 'hsl( 29, 54%, 61%)',
+			hue_6b: 'hsl( 39, 67%, 69%)',
+
+			// generic colors
+			foreground: 'hsl(220, 14%, 71%)',
+			background_1: 'hsl(220, 13%, 18%)',
+			background_2: 'hsl(220, 15%, 13%)',
+			// gutter: 'hsl(220, 9%, 55%)',
+			gutter: 'hsl(220, 14%, 45%)',
+			accent: 'hsl(220, 100%, 66%)',
+		},
+
+	},
+	plugins: [],
+}