diff --git a/src/app.ts b/src/app.ts
index 3634256..c7079ac 100644
--- a/src/app.ts
+++ b/src/app.ts
@@ -25,6 +25,7 @@ class App {
         await routes.ioListeners(this.io);
         this.app.set("views", path.join(__dirname, "views"));
         this.app.set("view engine", "pug");
+        this.app.use(express.static(path.join(__dirname, "public")));
         this.app.use(routes.router);
     }
 
diff --git a/src/public/stylesheets/sass/mixins.sass b/src/public/stylesheets/sass/mixins.sass
new file mode 100644
index 0000000..14bca84
--- /dev/null
+++ b/src/public/stylesheets/sass/mixins.sass
@@ -0,0 +1,5 @@
+@mixin gridPosition($rowStart, $rowEnd, $columnStart, $columnEnd)
+  grid-row-start: $rowStart
+  grid-row-end: $rowEnd
+  grid-column-start: $columnStart
+  grid-column-end: $columnEnd
diff --git a/src/public/stylesheets/sass/style.sass b/src/public/stylesheets/sass/style.sass
index e69de29..5a86235 100644
--- a/src/public/stylesheets/sass/style.sass
+++ b/src/public/stylesheets/sass/style.sass
@@ -0,0 +1,82 @@
+@import "vars"
+@import "mixins"
+
+body
+  font-family: Arial, serif
+
+button
+  border: 2px solid $cPrimary
+  margin-top: 0.125em
+  padding: 0.125em
+  background-color: $cPrimary
+  color: $cPrimarySurface
+  font-weight: bold
+  transition-duration: 0.25s
+
+button:hover
+  background-color: lighten($cPrimary, 10%)
+  cursor: pointer
+
+button:active
+  background-color: darken($cPrimary, 5%)
+  box-shadow: inset 0.25em 0.25em 0.1em rgba(0, 0, 0, 0.25)
+
+.stylebar
+  @include gridPosition(1, 2, 1, 4)
+  display: grid
+  grid-template: 100% /25% 50% 25%
+  background-color: $cPrimary
+  color: $cPrimarySurface
+
+  h1
+    @include gridPosition(1, 2, 1, 2)
+    text-align: center
+    margin: auto
+
+#content
+  grid-template: 7.5% 92.5% / 25% 50% 25%
+  display: grid
+  width: 100%
+  height: 100%
+
+#friendscontainer
+  @include gridPosition(2, 3, 1, 2)
+  background-color: $cPrimaryBackground
+
+#feedcontainer
+  @include gridPosition(2, 3, 2, 3)
+  background-color: $cSecondaryBackground
+  .postinput
+    margin: 0.5em
+    input
+      width: 100%
+      border-radius: 0.25em
+      border: 1px solid $cPrimary
+      padding: 0.125em
+      height: 2em
+    button.submitbutton
+      border-radius: 0.25em
+      height: 2em
+
+  .feeditem
+    background-color: $cPrimaryBackground
+    min-height: 2em
+    margin: 0.5em
+    padding: 0.25em
+    border-radius: 0.25em
+    .itemhead
+      align-items: flex-start
+
+      .title, .handle, .date
+        margin: 0.125em
+      .title
+        font-weight: bold
+
+      .handle, .date
+        color: $cInactiveText
+      .handle a
+        text-decoration: none
+        color: $cInactiveText
+        font-style: normal
+      .handle a:hover
+        text-decoration: underline
diff --git a/src/public/stylesheets/sass/vars.sass b/src/public/stylesheets/sass/vars.sass
new file mode 100644
index 0000000..871a831
--- /dev/null
+++ b/src/public/stylesheets/sass/vars.sass
@@ -0,0 +1,5 @@
+$cPrimaryBackground: #fff
+$cSecondaryBackground: #ddd
+$cInactiveText: #555
+$cPrimary: #0d6b14
+$cPrimarySurface: #fff
diff --git a/src/views/home.pug b/src/views/home.pug
deleted file mode 100644
index 8b7aebb..0000000
--- a/src/views/home.pug
+++ /dev/null
@@ -1,5 +0,0 @@
-html
-    head
-        title Greenvironment Network
-    body
-        h1 Greenvironment
diff --git a/src/views/home/feed.pug b/src/views/home/feed.pug
new file mode 100644
index 0000000..e3758e1
--- /dev/null
+++ b/src/views/home/feed.pug
@@ -0,0 +1,13 @@
+div#feedcontainer
+    div.postinput
+        input(type=text placeholder='Post something')
+        button.submitbutton Submit
+    div.feeditem
+        div.itemhead
+            span.title Testuser
+            span.handle
+                a(href='#') @testuser
+            span.date 23.09.19 10:07
+        p.text
+            | Example Test text.
+            | This is a test
diff --git a/src/views/home/friends.pug b/src/views/home/friends.pug
new file mode 100644
index 0000000..ed36fb7
--- /dev/null
+++ b/src/views/home/friends.pug
@@ -0,0 +1 @@
+div#friendscontainer
diff --git a/src/views/home/index.pug b/src/views/home/index.pug
new file mode 100644
index 0000000..0fc45ad
--- /dev/null
+++ b/src/views/home/index.pug
@@ -0,0 +1,9 @@
+html
+    head
+        title Greenvironment Network
+        include ../includes/head
+    body
+        div#content
+            include stylebar
+            include feed
+            include friends
diff --git a/src/views/home/stylebar.pug b/src/views/home/stylebar.pug
new file mode 100644
index 0000000..c6c36e3
--- /dev/null
+++ b/src/views/home/stylebar.pug
@@ -0,0 +1,2 @@
+div.stylebar
+    h1 Greenvironment
diff --git a/src/views/includes/head.pug b/src/views/includes/head.pug
new file mode 100644
index 0000000..9e917e6
--- /dev/null
+++ b/src/views/includes/head.pug
@@ -0,0 +1 @@
+link(rel='stylesheet' href='stylesheets/style.css')