diff --git a/ui/src/App.vue b/ui/src/App.vue
index c733013..9b71466 100644
--- a/ui/src/App.vue
+++ b/ui/src/App.vue
@@ -25,7 +25,7 @@ export default class App extends Vue {
 }
 </script>
 
-<style lang="scss">
+<style>
 @font-face {
   font-family: "Lubalin Graph";
   src: url("//db.onlinewebfonts.com/t/60eaf3171fce0c04eb9b3e08bba9bf05.eot");
@@ -128,27 +128,25 @@ export default class App extends Vue {
   font-style: italic;
 }
 
-// THW Logo font
+/* THW Logo font */
 .thw-logo-font {
   font-family: "Lubalin Graph", serif !important;
+  font-weight: bold !important;
 }
 
-// THW Heading font
+/* THW Heading font */
 .thw-heading-font {
   font-family: "Neue Praxis", "Roboto", sans-serif !important;
 }
 
-// THW Text font
+/* THW Text font */
 .thw-text-font {
   font-family: "Neue Demos", serif !important;
 }
 
-// THW Citation font
+/* THW Citation font */
 .thw-citation-font {
   font-family: "Neue Demos", serif !important;
-
-  * {
-    font-style: italic !important;
-  }
+  font-style: italic !important;
 }
 </style>
diff --git a/ui/src/assets/thw.svg b/ui/src/assets/thw.svg
new file mode 100644
index 0000000..12155ed
--- /dev/null
+++ b/ui/src/assets/thw.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="800" height="800" id="svg2">
+  <defs id="defs4"/>
+  <g transform="translate(-109.88407,434.92474)" id="layer1">
+    <path d="m 640.41889,184.96103 c -15.38166,25.59619 -30.76325,51.19237 -46.14492,76.78855 -9.50532,-15.7757 -19.01071,-31.55133 -28.51604,-47.32702 -36.42365,8.00838 -74.46423,8.02054 -110.88695,0 -9.5173,15.77569 -19.0346,31.55132 -28.5519,47.32702 -16.26691,-25.75742 -30.5453,-53.45406 -48.03891,-78.01524 C 299.24885,137.7956 250.23741,46.392684 255.10184,-45.04896 c 2.09259,-89.32909 55.97988,-174.14531 134.99126,-214.97922 0,-18.90439 0,-37.80886 0,-56.71325 80.13559,0 160.27126,0 240.40686,0 0,18.90439 0,37.80886 0,56.71325 79.74845,41.01148 133.28072,126.86918 135.29312,216.763971 3.16811,112.413742 -51.83307,183.454159 -125.37419,228.225239 z m 268.5471,-260.189372 c -16.91878,-2.776927 -50.54031,-5.781455 -82.49714,-11.593718 -3.29434,-20.81784 -9.09759,-41.20158 -16.35943,-60.96009 21.49698,-17.75033 42.99403,-35.50067 64.49101,-53.251 -10.2467,-23.25949 -23.44491,-45.0888 -37.93294,-65.91233 -26.13729,9.7485 -52.27465,19.49708 -78.41194,29.24558 -13.45855,-16.37731 -28.52766,-31.42514 -44.91133,-44.8509 9.75879,-26.10005 19.5175,-52.20009 29.27628,-78.30014 -20.74155,-14.65144 -42.795,-27.53554 -65.97562,-37.90481 -17.78186,21.47172 -35.56379,42.94343 -53.34565,64.41515 -19.7602,-7.37928 -40.21013,-12.89714 -61.01974,-16.33233 -4.63077,-27.50848 -9.26147,-55.01689 -13.89224,-82.52537 -25.33474,-2.30409 -50.83946,-2.29977 -76.17427,0 -4.63314,27.50848 -9.26628,55.01689 -13.89942,82.52537 -20.80365,3.47176 -41.25731,8.94823 -61.01973,16.33233 -17.7795,-21.47172 -35.55899,-42.94343 -53.33848,-64.41515 -23.22975,10.29354 -45.15468,23.35933 -65.97562,37.90481 9.75878,26.10005 19.51749,52.20009 29.27627,78.30014 -16.23901,13.48334 -31.55182,28.25456 -44.6603,44.8509 -26.21382,-9.7485 -52.42763,-19.49708 -78.64145,-29.24558 -14.54519,20.7933 -27.664,42.673 -37.96162,65.91233 21.49942,17.75033 42.99876,35.50067 64.49818,53.251 -7.39732,19.7321 -12.86916,40.17161 -16.3666,60.96009 -27.53828,4.621133 -55.07649,9.242266 -82.61476,13.863399 -2.1661,25.292643 -2.16825,50.761852 0,76.0543506 27.53827,4.6307065 55.07648,9.2614854 82.61476,13.8921914 3.48819,20.778688 8.935,41.221875 16.3666,60.931296 -21.49942,17.759907 -42.99876,35.519883 -64.49818,53.279793 10.37959,23.17527 23.30634,45.1782 37.96162,65.87634 26.21382,-9.73655 52.42763,-19.47304 78.64145,-29.20959 13.15775,16.54949 28.40272,31.38217 44.6603,44.84371 -9.75878,26.09284 -19.51749,52.18569 -29.27627,78.27854 20.82417,14.54059 42.7359,27.62933 65.97562,37.9048 17.77949,-21.47408 35.55898,-42.94825 53.33848,-64.42233 19.73502,7.45233 40.20596,12.98624 61.01973,16.36831 4.63314,27.49884 9.26628,54.99774 13.89942,82.49658 25.3366,2.32072 50.83766,2.31906 76.17427,0 4.63077,-27.49884 9.26147,-54.99774 13.89224,-82.49658 20.81585,-3.34392 41.28716,-8.92073 61.01974,-16.36831 17.78186,21.47408 35.56379,42.94825 53.34565,64.42233 23.19145,-10.35011 45.22934,-23.2602 65.97562,-37.9048 -9.75878,-26.09285 -19.51749,-52.1857 -29.27628,-78.27854 16.40117,-13.40482 31.40516,-28.51304 44.91133,-44.84371 26.13729,9.73655 52.27465,19.47304 78.41194,29.20959 14.60013,-20.72744 27.60333,-42.68149 37.93294,-65.87634 -21.49698,-17.75991 -42.99403,-35.519886 -64.49101,-53.279793 7.29849,-19.735549 13.07456,-40.127127 16.35943,-60.931296 27.54064,-4.630706 55.08129,-9.2614849 82.62193,-13.8921914 1.23617,-22.6678096 0.89736,-63.3635816 -0.12479,-78.3240316 z" id="path6152" style="fill:#FFFFFF;fill-opacity:1;fill-rule:nonzero;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10"/>
+    <path d="m 619.09641,-305.35415 -217.32006,0 0,57.22431 53.31697,0 0,-11.63921 28.54473,0 0,106.78273 -11.42507,0 0,45.83703 76.17427,0 0,-45.83703 -11.40355,0 0,-106.5308 28.77423,0 0,11.38728 53.33848,0 0,-57.22431" id="path6156" style="fill:#FFFFFF;fill-opacity:1;fill-rule:evenodd;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10"/>
+    <path d="m 392.08692,-217.65339 0,45.82983 11.65457,0 0,182.851475 -11.65457,-0.259129 0,45.837034 76.42529,0 0,-45.837034 -11.43224,0 0,-45.577905 106.68413,0 0,45.577905 -11.40354,0 0,45.837034 76.15274,0 0,-45.837034 -11.40354,0 0,-182.815486 11.40354,0.22314 0,-45.82983 -76.15274,0 0,45.82983 11.40354,0 0,91.184605 -106.68413,0 0,-91.184605 11.43224,0 0,-45.82983 -76.42529,0" id="path6160" style="fill:#FFFFFF;fill-opacity:1;fill-rule:evenodd;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10"/>
+    <path d="m 510.42562,99.736396 83.84835,139.461764 109.90438,-182.822677 27.28962,0 0,-45.606697 -91.3001,0 0,45.606697 10.672,0 -56.5659,94.142987 -84.09937,-139.749684 -83.85552,139.749684 -56.3077,-94.142987 10.672,0 0,-45.606697 -91.5583,0 0,45.606697 27.54064,0 L 426.5701,239.19816 510.42562,99.736396" id="path6164" style="fill:#FFFFFF;fill-opacity:1;fill-rule:evenodd;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10"/>
+  </g>
+  <metadata id="metadata3029">
+    <rdf:RDF>
+      <cc:Work rdf:about="">
+        <dc:title/>
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+</svg>
diff --git a/ui/src/components/THWLogo.vue b/ui/src/components/THWLogo.vue
new file mode 100644
index 0000000..2cf9877
--- /dev/null
+++ b/ui/src/components/THWLogo.vue
@@ -0,0 +1,52 @@
+<template>
+  <div class="flex-column">
+    <div class="d-flex">
+      <div class="d-flex justify-end">
+        <span class="d-none d-sm-flex text-right thw-logo-font above mr-2">
+          <slot name="above">
+            Technisches<br />
+            Hilfswerk
+          </slot>
+        </span>
+        <v-img
+          class="d-flex"
+          max-width="56"
+          max-height="56"
+          :src="require('../assets/thw.svg')"
+        />
+      </div>
+    </div>
+    <v-divider class="d-none d-sm-block my-1" />
+    <span class="d-none d-sm-flex text-wrap thw-logo-font below">
+      <slot>OV Musterstadt</slot>
+    </span>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from "vue-property-decorator";
+
+@Component
+export default class THWLogo extends Vue {}
+</script>
+
+<style scoped>
+.flex-column {
+  max-width: 240px;
+}
+
+.v-divider {
+  border-width: 1px;
+  border-color: white;
+}
+
+.above {
+  font-size: 28px;
+  line-height: 28px;
+}
+
+.below {
+  font-size: 15px;
+  line-height: 15px;
+}
+</style>
\ No newline at end of file
diff --git a/ui/src/components/TitleBar.vue b/ui/src/components/TitleBar.vue
index 4b6e659..84d76df 100644
--- a/ui/src/components/TitleBar.vue
+++ b/ui/src/components/TitleBar.vue
@@ -1,13 +1,15 @@
 <template>
-  <v-toolbar color="primary" prominent dark>
+  <v-toolbar color="primary" style="user-select: none" prominent dark>
     <v-container class="d-flex pa-0" fluid fill-height>
-      <div class="d-flex justify-start slim text-left text-no-wrap">LOGO</div>
+      <div class="d-flex justify-start slim text-left text-no-wrap">
+        <THWLogo />
+      </div>
 
       <div class="d-flex justify-center text-center mx-auto thw-heading-font">
         <slot> <h1>TITLE</h1> </slot>
       </div>
 
-      <div class="d-flex justify-end slim text-right text-no-wrap">
+      <div class="d-none d-sm-flex justify-end slim text-right text-no-wrap">
         <div class="flex-column">
           <Clock
             class="d-flex justify-end font-weight-light text-h6 text-md-h5"
@@ -26,10 +28,12 @@
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
 import Clock from "./Clock.vue";
+import THWLogo from "./THWLogo.vue";
 
 @Component({
   components: {
     Clock,
+    THWLogo,
   },
 })
 export default class TitleBar extends Vue {}