3 files changed, 61 insertions, 28 deletions
diff --git a/src/components/vierkant.tsx b/src/components/vierkant.tsx
index cfb843e..6140e7a 100644
--- a/src/components/vierkant.tsx
+++ b/src/components/vierkant.tsx
@@ -6,7 +6,8 @@ var VierkantStyle: CSSProperties = {
 	borderRadius: 8,
 	color: "var(--text)",
 	margin: 6, // geen margin collapse = 12px marge
-	display: "inline-block"
+	display: "inline-block",
+	position: "relative"
 }
 
 export class Vierkant extends Component {
diff --git a/src/pages/home.jsx b/src/pages/home.jsx
deleted file mode 100644
index 11a72d6..0000000
--- a/src/pages/home.jsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import { NavBar } from '../components/navbar';
-import { CenteredPage, PageTitle } from '../components/page';
-import { Vierkant, VierkantWrapper } from '../components/vierkant';
-
-function HomePage() {
-	return (
-		<div>
-			<NavBar />
-			<CenteredPage>
-				<PageTitle>4 op een rij</PageTitle>
-				<Vierkant>Gert</Vierkant>
-				<Vierkant>Gert2</Vierkant>
-				<Vierkant>Gert3</Vierkant>
-				<Vierkant>Gert4</Vierkant>
-				<Vierkant>Gert5</Vierkant>
-				<Vierkant>Gert6</Vierkant>
-				<Vierkant>Gert7</Vierkant>
-				<Vierkant>Gert8</Vierkant>
-				<Vierkant>Gert9</Vierkant>
-				<Vierkant>Gert10</Vierkant>
-				<Vierkant>Gert11</Vierkant>
-			</CenteredPage>
-		</div>
-	);
-}
-
-export default HomePage;
diff --git a/src/pages/home.tsx b/src/pages/home.tsx
new file mode 100644
index 0000000..735ef10
--- /dev/null
+++ b/src/pages/home.tsx
@@ -0,0 +1,59 @@
+import {CSSProperties} from 'react';
+
+import { NavBar } from '../components/navbar';
+import { CenteredPage, PageTitle } from '../components/page';
+import { Vierkant } from '../components/vierkant';
+
+import VideogameAssetIcon from '@material-ui/icons/VideogameAsset';
+import ExtensionIcon from '@material-ui/icons/Extension';
+
+var GameModeIconStyle: CSSProperties = {
+	fontSize: 64,
+	display: "inline-block",
+	position: "absolute",
+	top: 24,
+	left: "50%",
+	transform: "translateX(-50%)"
+}
+
+var GameModeTextStyle: CSSProperties = {
+	whiteSpace: "nowrap",
+	display: "inline-block",
+	position: "absolute",
+	bottom: 24,
+	left: "50%",
+	transform: "translateX(-50%)"
+}
+
+var SquareSize: CSSProperties = {
+	width: 100,
+	height: 100
+}
+
+function HomePage() {
+	return (
+		<div>
+			<NavBar />
+			<CenteredPage>
+				<PageTitle>4 op een rij</PageTitle>
+				<Vierkant>
+					<VideogameAssetIcon style={GameModeIconStyle}/>
+					<span style={GameModeTextStyle}>Nieuw spel</span>
+					<div style={SquareSize}></div>
+				</Vierkant>
+				<Vierkant>
+					<ExtensionIcon style={GameModeIconStyle}/>
+					<span style={GameModeTextStyle}>Puzzels</span>
+					<div style={SquareSize}></div>
+				</Vierkant>
+				<Vierkant>
+					<VideogameAssetIcon style={GameModeIconStyle}/>
+					<span style={GameModeTextStyle}>Tegen computer</span>
+					<div style={SquareSize}></div>
+				</Vierkant>
+			</CenteredPage>
+		</div>
+	);
+}
+
+export default HomePage;