diff --git a/Components/LEGACY/AutoSpacing.js b/Components/LEGACY/AutoSpacing.js
new file mode 100644
index 0000000..e90da58
--- /dev/null
+++ b/Components/LEGACY/AutoSpacing.js
@@ -0,0 +1,23 @@
+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/LEGACY/Paragraph.js b/Components/LEGACY/Paragraph.js
new file mode 100644
index 0000000..c332832
--- /dev/null
+++ b/Components/LEGACY/Paragraph.js
@@ -0,0 +1,13 @@
+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/LEGACY/Scroller.js b/Components/LEGACY/Scroller.js
new file mode 100644
index 0000000..69e0fa3
--- /dev/null
+++ b/Components/LEGACY/Scroller.js
@@ -0,0 +1,22 @@
+import { Component } from "react";
+import Styles from '../styles/scroller.module.css';
+
+class Scroller extends Component {
+    constructor(props) {
+        super(props);
+    }
+    render() {
+        this.props.text = this.props.text.concat(this.props.text);
+        return (
+            <div className={Styles.container}>
+                {
+                    this.props.text.map((item, index) => {
+                        console.log([this.props.text, this.props.text])
+                        return <div className={Styles.item} key={index}>{item}</div>;
+                    })
+                }
+            </div>
+        )
+    }
+}
+export default Scroller;
diff --git a/Components/LEGACY/SectionHeading.js b/Components/LEGACY/SectionHeading.js
new file mode 100644
index 0000000..ed77661
--- /dev/null
+++ b/Components/LEGACY/SectionHeading.js
@@ -0,0 +1,17 @@
+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/LEGACY/Subheading.js b/Components/LEGACY/Subheading.js
new file mode 100644
index 0000000..964f1dd
--- /dev/null
+++ b/Components/LEGACY/Subheading.js
@@ -0,0 +1,17 @@
+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/LEGACY/TileRow.js b/Components/LEGACY/TileRow.js
new file mode 100644
index 0000000..ed0bf0b
--- /dev/null
+++ b/Components/LEGACY/TileRow.js
@@ -0,0 +1,33 @@
+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/LEGACY/Timeline.js b/Components/LEGACY/Timeline.js
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/Components/LEGACY/Timeline.js