diff --git a/web/src/components/HeaderBar.vue b/web/src/components/HeaderBar.vue
index 5fc8845..95b275b 100644
--- a/web/src/components/HeaderBar.vue
+++ b/web/src/components/HeaderBar.vue
@@ -56,20 +56,26 @@
                 v-model="addNotes"
                 variant="outlined"
               ></v-text-field>
-              <span class="dialogNote"> all fields marked with * are required </span>
+              <span class="dialogNote "> all fields marked with * are required </span>
             </div>
           </v-card-text>
           <v-card-actions>
-            <v-btn
-              class="ms-auto"
-              text="Cancel"
-              @click="add = false"
-            ></v-btn>
-            <v-btn
-              class="ms-auto"
-              text="Add"
-              @click="add = false"
-            ></v-btn>
+            <v-row>
+              <v-col cols="10" align="right" no-gutters>
+                <v-btn
+                  class="ms-auto"
+                  text="Cancel"
+                  @click="add = false"
+                ></v-btn>
+              </v-col>
+              <v-col>
+                <v-btn
+                  class="ms-auto"
+                  text="Add"
+                  @click="add = false"
+                ></v-btn>
+              </v-col>
+            </v-row>
           </v-card-actions>
         </v-card>
       </v-dialog>
diff --git a/web/src/components/ListViewElement.vue b/web/src/components/ListViewElement.vue
index 2a5ce93..38408b3 100644
--- a/web/src/components/ListViewElement.vue
+++ b/web/src/components/ListViewElement.vue
@@ -20,7 +20,7 @@
             </div>
 
             <div class="mr-3 d-flex align-self-center" style="align-items:center">
-              <Check class="mr-1"/>
+              <CalendarCheck/>
                 <span v-if="props.startDate == null || props.startDate == undefined || props.startDate.length == 0">
                   Verfügbar
                 </span>
@@ -30,7 +30,7 @@
             </div>
 
             <div class="mr-3 d-flex align-self-center" style="align-items:center">
-              <Skull class="mr-1"/>
+              <CalendarX/>
                 <span v-if="props.endDate == null || props.endDate == undefined || props.endDate.length == 0">
                   Ewig Verfügbar
                 </span>
@@ -60,10 +60,7 @@
 </template>
 
 <script setup lang="ts">
-  import { KeyRound } from 'lucide-vue-next';
-  import { Check } from 'lucide-vue-next';
-  import { Skull } from 'lucide-vue-next';
-  import { Infinity } from 'lucide-vue-next';
+  import { Infinity, KeyRound, Check, Skull, CalendarCheck, CalendarX } from 'lucide-vue-next';
 
   const props = defineProps({
     licenseName: String,