diff --git a/cotmw/index.html b/cotmw/index.html
index 48f9cbf..fe0f608 100644
--- a/cotmw/index.html
+++ b/cotmw/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <link rel="icon" href="/favicon.ico">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Webinterface</title>
+    <title>Connection on the Move - Webinterface</title>
   </head>
   <body>
     <div id="app"></div>
diff --git a/cotmw/public/favicon.ico b/cotmw/public/favicon.ico
index df36fcf..486532a 100644
Binary files a/cotmw/public/favicon.ico and b/cotmw/public/favicon.ico differ
diff --git a/cotmw/src/App.vue b/cotmw/src/App.vue
index fce5582..87c30c8 100644
--- a/cotmw/src/App.vue
+++ b/cotmw/src/App.vue
@@ -5,7 +5,9 @@ import HUD from './components/HUD.vue'
 
 <template>
   <header>
-    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
+    <!--
+    <img alt="Raspberry Pi Minimalistic Icon" class="logo" src="./assets/icon_pi.png" width="128" height="128"/>
+    -->
     <meta charset="utf-8">
   </header>
 
diff --git a/cotmw/src/assets/hud.css b/cotmw/src/assets/hud.css
new file mode 100644
index 0000000..c6d7936
--- /dev/null
+++ b/cotmw/src/assets/hud.css
@@ -0,0 +1,79 @@
+.hud {
+    position: fixed;
+    top: 20px;
+    left: 20px;
+    width: 240px;
+    background: rgba(0, 0, 0, 0.6);
+    border: 1px solid #444;
+    border-radius: 8px;
+    padding: 10px;
+    font-family: monospace;
+    color: #ddd;
+    user-select: none;
+    z-index: 9999;
+}
+
+.hud-header {
+    display: flex;
+    justify-content: space-between;
+    font-size: 13px;
+    font-family: monospace;
+    color: #eeeeee;
+}
+
+.hud-body {
+    font-family: monospace;
+}
+
+.hud-row {
+    display: flex;
+    justify-content: space-between;
+    font-size: 14px;
+    line-height: 1.2;
+    margin-bottom: 4px;
+    font-family: monospace;
+}
+
+.hud-inner-btn{
+    width: 100px;
+    border: 1px solid #444;
+    border-radius: 8px;
+    font-family: monospace;
+}
+
+.hud-toggle-btn {
+    background: transparent;
+    border: none;
+    color: #ddd;
+    font-size: 16px;
+    line-height: 1;
+    cursor: pointer;
+    padding: 0 4px;
+}
+
+.spacer{
+    height: 1px;
+    background: transparent;
+    margin-top: 8px;
+    margin-bottom: 8px;
+}
+
+.label {
+    color: #d6d6d6;
+}
+
+.important {
+    color: rgb(255, 52, 52);
+}
+
+.info {
+    color: #48f;
+}
+
+.success {
+    color: #4f4;
+}
+
+.info2 {
+    color: #8cf;
+}
\ No newline at end of file
diff --git a/cotmw/src/components/HUD.vue b/cotmw/src/components/HUD.vue
index ce6e205..3b2df2b 100644
--- a/cotmw/src/components/HUD.vue
+++ b/cotmw/src/components/HUD.vue
@@ -1,4 +1,13 @@
 <script setup>
+  import { ref } from 'vue'
+  import HUDRow from "@/components/HUDRow.vue";
+
+  const collapsed = ref(false)
+
+  function toggleHUD() {
+    collapsed.value = !collapsed.value
+  }
+
   var logging = true;
 
   function log(message){
@@ -22,77 +31,64 @@
     if(e.classList.contains("btn-success")) return;
     button_switch(e);
   }
+
+  // HUD TEMPLATE
+  let HUD_name = "Auto HUD"
+
+  let rowProps = [{
+    key: "IP",
+    value: "***.***.***.***",
+    importance: "info"
+  },{
+    key: "Station",
+    value: "Mobile",
+    importance: "important"
+  },
+  /* expand like this
+  {
+    key: "",
+    value: "",
+    importance: ""
+  }
+  */
+  ]
 </script>
 
 <template>
   <div class="container">
     <div class="container hud" id="Control">
-      <div class="hud-header">Auto HUD</div>
-      <div class="hud-row">
-        <div class="label">IP:</div>
-        <div class="info">***.***.***.***</div>
-      </div>
-      <div class="hud-row">
-        <div class="label">Station:</div>
-        <div class="important">Mobile</div>
-      </div>
-      <div class="hud-row">
-        <button class="btn btn-sm btn-success" id="LocationButton" style="width: 100px;" @click="handleButtonPress($event.target)">Location</button>
-        <button class="btn btn-sm btn-outline-secondary" id="CameraButton" style="width: 100px;" @click="handleButtonPress($event.target)">Camera</button>
+
+      <div class="hud-header" @click="toggleHUD">
+        <span>{{ HUD_name }}</span>
+        <button class="hud-toggle-btn">{{ collapsed ? '▼' : '▲' }}</button>
       </div>
+
+      <transition name="expand">
+        <div v-show="!collapsed" class="hud-body">
+          <div class="spacer"></div>
+          <HUDRow v-for="rowProp in rowProps" :rowProps="rowProp"></HUDRow>
+          <div class="spacer"></div>
+          <div class="hud-row">
+            <button class="btn btn-sm btn-success hud-inner-btn" id="LocationButton" @click="handleButtonPress($event.target)">Location</button>
+            <button class="btn btn-sm btn-outline-secondary hud-inner-btn" id="CameraButton" style="width: 100px;" @click="handleButtonPress($event.target)">Camera</button>
+          </div>
+        </div>
+      </transition>
+
     </div>
   </div>
 </template>
 
 <style scoped>
-  .hud {
-    position: fixed;
-    top: 20px;
-    left: 20px;
-    width: 240px;
-    background: rgba(0, 0, 0, 0.6);
-    border: 1px solid #444;
-    border-radius: 8px;
-    padding: 10px;
-    font-family: 'Courier New', monospace;
-    color: #ddd;
-    user-select: none;
-    z-index: 9999;
-  }
-
-  .hud-header {
-    display: flex;
-    justify-content: space-between;
-    font-size: 13px;
-    margin-bottom: 8px;
-    color: #eeeeee;
-  }
-
-  .hud-row {
-    display: flex;
-    justify-content: space-between;
-    font-size: 14px;
-    line-height: 1.2;
-    margin-bottom: 4px;
-  }
-
-  .label {
-    color: #d6d6d6;
-  }
-
-  .important {
-    color: rgb(255, 52, 52);
-  }
-
-  .info {
-    color: #48f;
-  }
-
-  .success {
-    color: #4f4;
-  }
-
-  .info2 {
-    color: #8cf;
-  }
+.expand-enter-from{
+  opacity: 0;
+}
+.expand-enter-to{
+  opacity: 1;
+}
+.expand-enter-active{
+  transition:
+      transform 0.2s ease,
+      opacity   0.2s ease;
+}
 </style>
\ No newline at end of file
diff --git a/cotmw/src/components/HUDRow.vue b/cotmw/src/components/HUDRow.vue
new file mode 100644
index 0000000..0f47bd3
--- /dev/null
+++ b/cotmw/src/components/HUDRow.vue
@@ -0,0 +1,16 @@
+<script setup>
+
+const props = defineProps(['rowProps'])
+
+</script>
+
+<template>
+  <div class="hud-row">
+    <div class="label">{{ props.rowProps.key }}:</div>
+    <div :class="props.rowProps.importance">{{ props.rowProps.value }}</div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/cotmw/src/main.js b/cotmw/src/main.js
index 53a5078..d550e4e 100644
--- a/cotmw/src/main.js
+++ b/cotmw/src/main.js
@@ -3,5 +3,6 @@ import './assets/main.css'
 import { createApp } from 'vue'
 import App from './App.vue'
 import 'bootstrap/dist/css/bootstrap.min.css'
+import './assets/hud.css'
 
 createApp(App).mount('#app')
