diff --git a/public/bookmark.js b/public/bookmark.js
index 92a94f5..020a7d3 100644
--- a/public/bookmark.js
+++ b/public/bookmark.js
@@ -1,13 +1,45 @@
 const BookmarkRouter = {
     template: `
 <div>
-    <div class="bookmark-headline"><h3>Gepeicherte Beiträge</h3></div>
-    <MsgCard
-        v-for="(msg, index) in messages"
-        :key="msg.id"
-        :msg="msg"
-    ></MsgCard>
-</div>`,
+    <div class="bookmark-headline"><h4>Gepeicherte Beiträge</h4></div>
+    <div class="om-card card">
+                <h6 class="msg-head">
+                <b>Betreff</b>
+                <img src="favicon.ico" width=20px height=20px>
+                </h6>
+                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.  <br><br>
+                <a href="#">#beispiel #tag</a></p>
+                <div class="om-card-footer"> <div class="om-user-line">
+                <i class="material-icons">account_circle</i>
+                Erstellt von User 1</div>
+				<i class="material-icons">bookmark</i>
+                </div></div>
+<div class="om-card card">
+                <h6 class="msg-head">
+                <b>Betreff</b>
+                <img src="favicon.ico" width=20px height=20px>
+                </h6>
+                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.  <br><br>
+                <a href="#">#beispiel #tag</a></p>
+                <div class="om-card-footer"> <div class="om-user-line">
+                <i class="material-icons">account_circle</i>
+                Erstellt von User 1</div>
+				<i class="material-icons">bookmark</i>
+                </div></div>
+<div class="om-card card">
+                <h6 class="msg-head">
+                <b>Betreff</b>
+                <img src="favicon.ico" width=20px height=20px>
+                </h6>
+                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. <br><br>
+                <a href="#">#beispiel #tag</a></p>
+                <div class="om-card-footer"> <div class="om-user-line">
+                <i class="material-icons">account_circle</i>
+                Erstellt von User 1</div>
+				<i class="material-icons">bookmark</i>
+                </div></div>
+	</div>
+	</div>`,
     data: function () {
         return { messages: _messages };
     },
diff --git a/public/createMessage.js b/public/createMessage.js
index 9bde79a..3b7abc6 100644
--- a/public/createMessage.js
+++ b/public/createMessage.js
@@ -1,7 +1,7 @@
 const CreateMsgRouter = {
     template: `
 <div class="card om-card">
-	<h5>Neue Nachricht erstellen</h5>
+	<h4>Neue Nachricht erstellen</h4>
 	<form class="new-msg-form" @submit.prevent=createMsg>
 		<div class="form-group bmd-form-group">
 			<label class="bmd-label-floating">Betreff</label>
diff --git a/public/files.js b/public/files.js
index 5b27a07..8e283b0 100644
--- a/public/files.js
+++ b/public/files.js
@@ -1,7 +1,7 @@
 const FileRouter = {
     template: `
 <div>
-	<h3>Wichtige Links</h3>
+	<h4>Wichtige Links</h4>
 	<div class="empty-state">
 	<i class="material-icons"> widgets </i><br>
 	Diese Funktion steht noch nicht bereit.
diff --git a/public/img/app_icon.png b/public/img/app_icon.png
new file mode 100644
index 0000000..0b97acb
Binary files /dev/null and b/public/img/app_icon.png differ
diff --git a/public/index.html b/public/index.html
index a314d7c..85c57f4 100644
--- a/public/index.html
+++ b/public/index.html
@@ -60,7 +60,7 @@
     <div id="api">
         <div class="om-header-container">
             <div class="om-header">
-                <a href="index.html"><img src="img/th_nbg_ohmicon_amp.png" width=55px height=55px></a>
+                <a class="logo-img" href="index.html"><img src="img/app_icon.png" width=45px height=45px></a>
                 <form class="om-searchbar">
                     <input type="search" placeholder="Search...">
                 </form>
diff --git a/public/style/style.css b/public/style/style.css
index 676b3a2..703bf18 100644
--- a/public/style/style.css
+++ b/public/style/style.css
@@ -11,18 +11,21 @@
   display: flex;
   padding-left: 2%;
   padding-right: 2%;
-  height: 8%;
+  height: 65px;
   background-color: #0046a0;
 }
+.logo-img {
+  padding: 10px;
+}
 .om-searchbar {
   display: inline-block;
-  padding-bottom: 0%;
-  margin: 3%;
+  padding: 0;
+  margin: 15px;
 }
 .om-content {
   margin: 10px;
-  margin-top: 75px;
-  margin-bottom: 70px;
+  margin-top: 80px;
+  margin-bottom: 80px;
 }
 .om-content a {
   color: #0046a0;
@@ -30,6 +33,16 @@
 .om-content a:hover {
   color: #0046a0;
 }
+.om-nav {
+  position: fixed;
+  bottom: 0;
+  height: 65px;
+  width: 100%;
+  background-color: #0046a0;
+}
+.om-nav i {
+  color: white;
+}
 .om-card {
   margin: 10px;
   margin-bottom: 20px;
@@ -57,18 +70,9 @@
 .om-user-line i {
   margin-right: 2%;
 }
-.om-nav {
-  position: fixed;
-  bottom: 0;
-  height: 8%;
-  width: 100%;
-  background-color: #0046a0;
-}
-.om-nav i {
-  color: white;
-}
 .bookmark-headline {
   margin: 10px;
+  padding-bottom: 10px;
 }
 .empty-state {
   margin: 40px;
diff --git a/public/style/style.less b/public/style/style.less
index eca1c0a..c584598 100644
--- a/public/style/style.less
+++ b/public/style/style.less
@@ -14,27 +14,44 @@
     display: flex;
     padding-left: 2%;
     padding-right: 2%;
-    height: 8%;
+    height: 65px;
     background-color: @color;
 }
 
+.logo-img{
+	padding:10px;
+}
+
 .om-searchbar{
     display: inline-block;
-    padding-bottom: 0%;
-    margin: 3%;
+	padding: 0;
+    margin: 15px;
 }
 
 //content
 .om-content{
     margin: 10px;
-    margin-top: 75px;
-    margin-bottom: 70px;
+    margin-top: 80px;
+    margin-bottom: 80px;
     a{
         color: @color;
         &:hover{color:@color;}
     }
 }
 
+//footer
+.om-nav{
+    position:fixed;
+    bottom: 0;
+    height: 65px;
+    width: 100%;
+    background-color: @color;
+    i{
+        color: white;
+    }
+}
+
+//msg-Card
 .om-card{
     margin: 10px;
     margin-bottom: 20px;
@@ -45,6 +62,7 @@
 	justify-content: space-between;
 	display: flex;
 }
+
 .om-btn{
     background-color: @color;
 	color: white;
@@ -66,21 +84,10 @@
     }
 }
 
-//footer
-.om-nav{
-    position:fixed;
-    bottom: 0;
-    height: 8%;
-    width: 100%;
-    background-color: @color;
-    i{
-        color: white;
-    }
-}
-
 // bookmark
 .bookmark-headline{
     margin: 10px;
+	padding-bottom: 10px;
 }
 
 //empty state