diff --git a/client/src/components/highlights/HighlightSidebar.vue b/client/src/components/highlights/HighlightSidebar.vue
index 6a680156..a527486d 100644
--- a/client/src/components/highlights/HighlightSidebar.vue
+++ b/client/src/components/highlights/HighlightSidebar.vue
@@ -15,18 +15,16 @@
         hier ist ein bischen mehr text blabla blabla bla blabla blabla bla bla blabla blabla bla blabla blabla bla bla
         noch mehr text noch mehr text
       </mark>
-      <pre>{{ overflowing }}</pre>
-      <pre>{{ highlightMark?.scrollHeight }}</pre>
-      <pre>{{ highlightMark?.clientHeight }}</pre>
     </div>
     <div class="highlight-sidebar__section highlight-sidebar__note">
-      <h2 class="heading-4">Meine Notiz</h2>
+      <h2 class="heading-4">Meine Notiz {{ id }}</h2>
       <div class="form-with-border highlight-sidebar__note-form">
         <textarea
           class="borderless-textarea"
-          placeholder="Hi"
+          placeholder="Notiz erfassen..."
           v-auto-grow
         ></textarea>
+        <a class="button button--primary">Speichern</a>
       </div>
     </div>
   </div>
@@ -34,10 +32,15 @@
 
 <script setup lang="ts">
 import { computed, defineAsyncComponent, ref } from 'vue';
+export interface Props {
+  id: string;
+}
 
 const emits = defineEmits(['close']);
 const close = () => emits('close');
 
+defineProps<Props>();
+
 const highlightMark = ref<HTMLElement | null>(null);
 
 const overflowing = computed(() => {