Icon hinzugefügt + Responsivness angepasst

public/bookmark.js

 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 };
     },

public/createMessage.js

 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>

public/files.js

 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.

public/index.html

     <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>

public/style/style.css

   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;
 .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;
 .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;

public/style/style.less

     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;
 	justify-content: space-between;
 	display: flex;
 }
+
 .om-btn{
     background-color: @color;
 	color: white;
     }
 }
 
-//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