--- a/client/src/components/admin/Logs.vue	Tue Dec 04 11:32:55 2018 +0100
+++ b/client/src/components/admin/Logs.vue	Tue Dec 04 11:43:12 2018 +0100
@@ -2,44 +2,54 @@
   <div class="main d-flex flex-column">
     <div class="d-flex flex-row">
       <div :class="spacer"></div>
-      <div class="logoutput text-left bg-white shadow-xs mt-3 mx-3">
-        <pre
-          id="code"
-          v-highlightjs="logs"
-        ><code class="bash hljs hljs-string"></code></pre>
-      </div>
-    </div>
-    <div class="d-flex flex-row logmenu">
-      <div class="d-flex align-self-center">
-        <ul class="nav nav-pills">
-          <li class="nav-item">
-            <a
-              @click="fetch('system/log/apache2/access.log', 'accesslog')"
-              :class="accesslogStyle"
-              href="#"
-            >
-              <translate>Accesslog</translate>
-            </a>
-          </li>
-          <li class="nav-item">
-            <a
-              @click="fetch('system/log/apache2/error.log', 'errorlog')"
-              :class="errorlogStyle"
-              href="#"
-            >
-              <translate>Errorlog</translate>
-            </a>
-          </li>
-        </ul>
-      </div>
-      <div class="statuscontainer d-flex flex-row">
-        <div class="statusline ml-3 mt-1 align-self-center">
-          <h3><translate>Last refresh:</translate> {{ refreshed }}</h3>
+      <div class="card logs shadow-xs mt-3 mr-3">
+        <h6
+          class="mb-0 py-3 px-3 border-bottom d-flex text-info align-items-center"
+        >
+          <font-awesome-icon icon="book" class="mr-2"></font-awesome-icon>
+          <translate class="headline">Logs</translate>
+        </h6>
+        <div class="logoutput text-left bg-white">
+          <pre id="code" v-highlightjs="logs">
+          <code class="bash hljs hljs-string"></code>
+          </pre>
         </div>
-        <div class="refresh">
-          <button class="btn btn-dark" @click="fetch(currentFile, currentLog)">
-            <translate>Refresh</translate>
-          </button>
+        <div class="logmenu">
+          <div class="d-flex align-self-center">
+            <ul class="nav nav-pills">
+              <li class="nav-item">
+                <a
+                  @click="fetch('system/log/apache2/access.log', 'accesslog')"
+                  :class="accesslogStyle"
+                  href="#"
+                >
+                  <translate>Accesslog</translate>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a
+                  @click="fetch('system/log/apache2/error.log', 'errorlog')"
+                  :class="errorlogStyle"
+                  href="#"
+                >
+                  <translate>Errorlog</translate>
+                </a>
+              </li>
+            </ul>
+          </div>
+          <div class="statuscontainer d-flex flex-row mb-3">
+            <div class="statusline align-self-center">
+              <h3><translate>Last refresh:</translate> {{ refreshed }}</h3>
+            </div>
+            <div class="refresh">
+              <button
+                class="btn btn-dark"
+                @click="fetch(currentFile, currentLog)"
+              >
+                <translate>Refresh</translate>
+              </button>
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -53,8 +63,13 @@
 }
 
 .logmenu {
-  margin-left: 5rem;
-  min-width: 60vw;
+  position: relative;
+  margin-left: $offset;
+  margin-top: $offset;
+}
+
+.logs {
+  height: 85vh;
 }
 
 #code {
@@ -63,12 +78,15 @@
 
 .refresh {
   position: absolute;
-  right: 0;
+  right: $offset;
+  bottom: 0;
 }
 
 .logoutput {
-  width: 95%;
-  height: 85vh;
+  margin-left: $offset;
+  margin-right: $offset;
+  margin-top: $offset;
+  height: 90%;
   overflow: auto;
   transition: $transition-fast;
 }
@@ -90,6 +108,11 @@
   position: absolute;
   right: 0;
   margin-right: 7rem;
+  bottom: -0.5rem;
+}
+
+.statuscontainer {
+  width: 100%;
 }
 </style>