diff --git a/Components/AutoSpacing.js b/Components/AutoSpacing.js
deleted file mode 100644
index e90da58..0000000
--- a/Components/AutoSpacing.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import react, { Component } from "react";
-import Styles from '../styles/autospacing.module.css';
-
-class AutoSpacing extends Component {
-	constructor(props) {
-		super(props);
-	}
-
-
-	render() {
-		return (
-            <div className={Styles.container}>
-				{
-					react.Children.toArray(this.props.children).map((item, index) => {
-						return <div className={Styles.item} key={index}>{item}</div>
-					})
-				}
-			</div>
-        )
-	}
-}
-
-export default AutoSpacing;
\ No newline at end of file
diff --git a/Components/Card.js b/Components/Card.js
index a158c4f..a5c23ce 100644
--- a/Components/Card.js
+++ b/Components/Card.js
@@ -1,5 +1,5 @@
 import { Component } from "react";
-import Styles from '../styles/card.module.css';
+import Styles from '../styles/Components/card.module.css';
 
 class Card extends Component {
 	constructor(props) {
diff --git a/Components/CardRow.js b/Components/CardRow.js
index 77eb815..7421f19 100644
--- a/Components/CardRow.js
+++ b/Components/CardRow.js
@@ -1,5 +1,5 @@
 import react, { Component } from "react";
-import Styles from '../styles/cardrow.module.css';
+import Styles from '../styles/Components/cardrow.module.css';
 
 class CardRow extends Component {
 	constructor(props) {
diff --git a/Components/Header.js b/Components/Header.js
index 98df0ea..68d0557 100644
--- a/Components/Header.js
+++ b/Components/Header.js
@@ -1,5 +1,5 @@
-import { Component } from "react";
-import Styles from '../styles/header.module.css';
+import { Component, useRef } from "react";
+import Styles from '../styles/Components/header.module.css';
 import Head from 'next/head';
 
 class Header extends Component {
@@ -12,7 +12,7 @@
         return (
             <div className={Styles.header} style={{
                 margin: "0",
-                minHeight: this.props.fullscreen ? "100vh" : "90vh"
+                minHeight: this.props.fullscreen ? "100vh" : "calc(100vh - (2 * max(2em, 4vw)) - 1em)",
             }} id={this.props.id ? this.props.id : null}>
                 <div className={Styles.backgroundGradient} style={{
                     backgroundImage: `linear-gradient(69.44deg, #${this.props.gradient[0]} 0%, #${this.props.gradient[1]} 100%)`,
diff --git a/Components/NavBar.js b/Components/NavBar.js
index f7ef4e1..89ef25a 100644
--- a/Components/NavBar.js
+++ b/Components/NavBar.js
@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-import Styles from '../styles/navbar.module.css';
+import Styles from '../styles/Components/navbar.module.css';
 import ThemeChangeButton from './ThemeChangeButton';
 
 
diff --git a/Components/Paragraph.js b/Components/Paragraph.js
deleted file mode 100644
index c332832..0000000
--- a/Components/Paragraph.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Component } from 'react';
-
-class Paragraph extends Component {
-    render () {
-        return (
-            <p style={{width: "100%", textAlign: "left", paddingLeft: "15%", paddingRight: "15%", fontSize: "120%", color: "var(--card-text-color)"}}>
-                {this.props.children}
-            </p>
-        );
-    }
-}
-
-export default Paragraph;
\ No newline at end of file
diff --git a/Components/SectionHeading.js b/Components/SectionHeading.js
deleted file mode 100644
index ed77661..0000000
--- a/Components/SectionHeading.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Component } from "react";
-import Styles from '../styles/sectionheading.module.css';
-
-class SectionHeading extends Component {
-	constructor(props) {
-		super(props);
-	}
-
-
-	render() {
-		return (
-            <h1 className={Styles.title} id={this.props.id}>{this.props.children}</h1>
-        )
-	}
-}
-
-export default SectionHeading;
\ No newline at end of file
diff --git a/Components/Subheading.js b/Components/Subheading.js
deleted file mode 100644
index 964f1dd..0000000
--- a/Components/Subheading.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Component } from "react";
-import Styles from '../styles/subheading.module.css';
-
-class SubHeading extends Component {
-	constructor(props) {
-		super(props);
-	}
-
-
-	render() {
-		return (
-            <h2 className={Styles.title} id={this.props.id}>{this.props.children}</h2>
-        )
-	}
-}
-
-export default SubHeading;
\ No newline at end of file
diff --git a/Components/ThemeChangeButton.js b/Components/ThemeChangeButton.js
index c8c6d8c..0a2151b 100644
--- a/Components/ThemeChangeButton.js
+++ b/Components/ThemeChangeButton.js
@@ -1,6 +1,6 @@
 /** @jsxImportSource theme-ui */
 import { useColorMode } from 'theme-ui';
-import Styles from '../styles/navbar.module.css';
+import Styles from '../styles/Components/navbar.module.css';
 import { useState, useEffect } from 'react';
 
 
diff --git a/Components/TileRow.js b/Components/TileRow.js
deleted file mode 100644
index ed0bf0b..0000000
--- a/Components/TileRow.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import react, { Component, cloneElement } from "react";
-import Styles from '../styles/tilerow.module.css';
-
-class TileRow extends Component {
-    constructor(props) {
-	super(props);
-    }
-    render() {
-	return (
-		<div className={Styles.container}>
-		{
-		    react.Children.toArray(this.props.children).map((item, index) => {
-			if (this.props.divless !== false) { // Intentional comparison to false, initially had a default of false, now has a default of true
-			    const className = (item.props.className ? item.props.className + " " : "") + Styles.item
-
-			    const key = index;
-
-			    const props = {
-				className,
-				key
-			    }
-
-			    return cloneElement(item, props);
-			} else {
-			    return <div className={Styles.item + " " + Styles.fitItemWidth} key={index}>{item}</div>;
-			}
-		    })
-		}
-	    </div>
-	)
-    }
-}
-export default TileRow;
diff --git a/Components/Timeline.js b/Components/Timeline.js
deleted file mode 100644
index e69de29..0000000
--- a/Components/Timeline.js
+++ /dev/null