diff --git a/public/global.css b/public/global.css
new file mode 100644
index 0000000..74fbf8f
--- /dev/null
+++ b/public/global.css
@@ -0,0 +1,26 @@
+html, body{
+    padding: 0px;
+    margin: 0px;
+    width: 100%;
+    height:100%;
+    min-height: 100%;
+    min-width: 100%;
+}
+
+#__next{
+    min-height: 100%;
+}
+
+html{
+    background-color: red;
+}
+
+.pp{
+    color: white;
+}
+.root{
+    display:flex;
+    flex-direction: column;
+    min-height: 100vh;
+    height:100vh;
+}
diff --git a/public/logo.png b/public/logo.png
new file mode 100644
index 0000000..d1003ad
Binary files /dev/null and b/public/logo.png differ
diff --git a/src/components/header.tsx b/src/components/header.tsx
index 8f1d604..447f7c8 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -1,3 +1,12 @@
+import styles from "./styles.header.module.css"
+
 export default function Header() {
-    return <div>This will be the header</div>
+    return <div className={`${styles.header} pp`}>
+        
+        <img src="/logo.png" width="64px" height="auto" alt="" />
+        <div className={styles.headertitle}>
+            <div style={{flexGrow:1}}>Andreas<br/>Schaafsma</div>
+            <div>>Software Developer</div>
+        </div>
+    </div>
 }
\ No newline at end of file
diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx
new file mode 100644
index 0000000..7ea3ed6
--- /dev/null
+++ b/src/components/navbar.tsx
@@ -0,0 +1,11 @@
+import styles from "./styles.navbar.module.css"
+
+const navItems = ["News", "Projects", "About Me"];
+
+export default function Navbar() {
+    return <div className={`${styles.navbar}`}>
+        {navItems.map((value, i) => {
+            return (<a className={styles.navItem}>{value}</a>)
+        })}
+    </div>
+}
\ No newline at end of file
diff --git a/src/components/page-container.tsx b/src/components/page-container.tsx
new file mode 100644
index 0000000..8e674d1
--- /dev/null
+++ b/src/components/page-container.tsx
@@ -0,0 +1,12 @@
+import { ReactNode } from "react"
+import styles from "./styles.page-container.module.css"
+
+interface Props {
+    children: ReactNode;
+}
+
+export default function PageContainer(props:Props) {
+    return <div className={`${styles.pagecontainer}`}>
+        {props.children}
+    </div>;
+}
\ No newline at end of file
diff --git a/src/components/styles.header.module.css b/src/components/styles.header.module.css
new file mode 100644
index 0000000..82c7c02
--- /dev/null
+++ b/src/components/styles.header.module.css
@@ -0,0 +1,10 @@
+.header{
+    display: flex;
+    background-color: green;
+    flex-direction: row;
+    flex-grow: 0;
+}
+.headertitle{
+    display:flex;
+    flex-direction: column;
+}
\ No newline at end of file
diff --git a/src/components/styles.navbar.module.css b/src/components/styles.navbar.module.css
new file mode 100644
index 0000000..10299ac
--- /dev/null
+++ b/src/components/styles.navbar.module.css
@@ -0,0 +1,7 @@
+.navbar{
+    background-color: pink;
+    flex-grow: 0;
+}
+.navItem{
+    margin: 8px;
+}
\ No newline at end of file
diff --git a/src/components/styles.page-container.module.css b/src/components/styles.page-container.module.css
new file mode 100644
index 0000000..d49501b
--- /dev/null
+++ b/src/components/styles.page-container.module.css
@@ -0,0 +1,4 @@
+.pagecontainer{
+    background-color: yellow;
+    flex-grow: 1;
+}
\ No newline at end of file
diff --git a/src/pages/test/index.tsx b/src/pages/test/index.tsx
index 932580c..c81cafa 100644
--- a/src/pages/test/index.tsx
+++ b/src/pages/test/index.tsx
@@ -1,11 +1,15 @@
 import Header from "@/components/header";
+import PageContainer from "@/components/page-container";
+import Navbar from "@/components/navbar";
 import ReactDOM from "react";
+import "public/global.css"
 
 export default function Test() {
-    return <div>
-        <Header />
-        <div>
+    return <div className={`root`}>
+        <Header/>
+        <Navbar/>
+        <PageContainer>
             Content Goes Here
-        </div>
+        </PageContainer>
     </div>;
 }
\ No newline at end of file