9 files changed, 96 insertions, 7 deletions
diff --git a/src/components/App.js b/src/components/App.js
index 2808a4b..4f71c90 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -1,9 +1,14 @@
 import React from "react";
 import Header from "./Header/Header";
+import HomeView from "./Views/Home/Home";
 
 const App = () => {
+	const currentview = "home";
 	return (
-		<Header />
+		<>
+			<Header/>
+			{currentview === "home" && <HomeView/>}
+		</>
 	)
 }
 
diff --git a/src/components/Header/Header.css b/src/components/Header/Header.css
index 6d146f6..dd320ea 100644
--- a/src/components/Header/Header.css
+++ b/src/components/Header/Header.css
@@ -6,9 +6,7 @@
   flex-wrap: nowrap;
   align-items: center;
   justify-content: space-between;
-  position: absolute;
-  top: 0px;
-  left: 0px;
+  position: static;
   margin: none;
   padding: none;
   width: 100%;
diff --git a/src/components/Header/Header.scss b/src/components/Header/Header.scss
index 28a0489..e9242dd 100644
--- a/src/components/Header/Header.scss
+++ b/src/components/Header/Header.scss
@@ -1,4 +1,4 @@
-@import "../../styles/_themes.sass";
+@import "../../styles/_theme";
 
 .header {
 	display: flex;
@@ -6,8 +6,7 @@
 	flex-wrap: nowrap;
 	align-items: center;
 	justify-content: space-between;
-	position: absolute;
-	top: 0px; left: 0px;
+	position: static;
 	margin: none;
 	padding: none;
 	width: 100%;
diff --git a/src/components/Tile/Tile.js b/src/components/Tile/Tile.js
new file mode 100644
index 0000000..6fa7f2c
--- /dev/null
+++ b/src/components/Tile/Tile.js
@@ -0,0 +1,20 @@
+import React from "react";
+// import React, { useState } from "react";
+import "./Tile.css";
+
+const Tile = (props) => {
+	// const [,] = useState()
+	
+	const style = {
+		height: props.height;
+		width: props.width;
+		backgroundColor: props.colorBG
+		// textColor: props.colorFG
+	}
+
+	return (
+		<div className={"tile"} style={style}></div>
+	)
+}
+
+export default Tile
diff --git a/src/components/Tile/Tile.scss b/src/components/Tile/Tile.scss
new file mode 100644
index 0000000..54a5ad7
--- /dev/null
+++ b/src/components/Tile/Tile.scss
@@ -0,0 +1,17 @@
+@import "../../../styles/theme";
+@import "../../../styles/view";
+
+.view {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	justify-content: center;;
+}
+
+.tile {
+	width: 5rem;
+	height: 5rem;
+
+	border: 1px dashed $defFG;
+	margin: 1rem;
+}
diff --git a/src/components/Views/Home.css b/src/components/Views/Home.css
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/components/Views/Home.css
diff --git a/src/components/Views/Home/Home.css b/src/components/Views/Home/Home.css
new file mode 100644
index 0000000..4f5cb8d
--- /dev/null
+++ b/src/components/Views/Home/Home.css
@@ -0,0 +1,17 @@
+@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@500&display=swap");
+/* Experimental color scheme */
+.view {
+  width: 80%;
+  margin: 2rem auto; }
+
+.view {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center; }
+
+.tile {
+  width: 5rem;
+  height: 5rem;
+  border: 1px dashed #000000;
+  margin: 1rem; }
diff --git a/src/components/Views/Home/Home.js b/src/components/Views/Home/Home.js
new file mode 100644
index 0000000..51c4c4f
--- /dev/null
+++ b/src/components/Views/Home/Home.js
@@ -0,0 +1,16 @@
+import React from "react";
+// import React, { useState } from "react";
+import "./Home.css";
+
+const HomeView = (procs) => {
+	const tileHeight = procs.height;
+	const tileWidth = procs.width;
+	// const [activeLink, updateActiveLink] = useState("home")
+	return (
+		<div className={"view"}>
+			<div className={"tile"}></div>
+		</div>
+	)
+}
+
+export default HomeView
diff --git a/src/components/Views/Home/Home.scss b/src/components/Views/Home/Home.scss
new file mode 100644
index 0000000..54a5ad7
--- /dev/null
+++ b/src/components/Views/Home/Home.scss
@@ -0,0 +1,17 @@
+@import "../../../styles/theme";
+@import "../../../styles/view";
+
+.view {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	justify-content: center;;
+}
+
+.tile {
+	width: 5rem;
+	height: 5rem;
+
+	border: 1px dashed $defFG;
+	margin: 1rem;
+}