diff --git a/frontend/public/css/style.css b/frontend/public/css/style.css
index 30f32a6..7d2af2a 100644
--- a/frontend/public/css/style.css
+++ b/frontend/public/css/style.css
@@ -195,6 +195,10 @@ p, span, div, button, td, th, .v-label, .v-list-item__title {
 }
 
 .appointment-count {
+    font-family: Roboto Condensed, Arial, sans-serif;
+    font-weight: 600;
+    font-size: 1.17em;
+    color: #3a5368 !important;
     margin: 0 0.5rem;
 }
 
diff --git a/frontend/src/components/ServiceFinder.vue b/frontend/src/components/ServiceFinder.vue
index ca982f5..e54031e 100644
--- a/frontend/src/components/ServiceFinder.vue
+++ b/frontend/src/components/ServiceFinder.vue
@@ -63,13 +63,13 @@
               @click="decreaseAppointments($store.state.data.service)">
               <v-icon>{{ minusSvg }}</v-icon>
             </v-btn>
-            <h3 tabindex="0"
-              :aria-label="`Akuelle Anzahl ausgewählter Dienstleistungen ` + appointmentCounts[$store.state.data.service.id]"
+            <span tabindex="0"
+              :aria-label="`Aktuelle Anzahl ausgewählter Dienstleistungen ` + appointmentCounts[$store.state.data.service.id]"
               class="appointment-count" :key="appointmentCounts[$store.state.data.service.id]">
               {{ appointmentCounts[$store.state.data.service.id] }}
-            </h3>
+            </span>
             <v-btn id="button-up" ref="buttonUp" class="appointment-count-button"
-              :aria-label="`Anzahl der Dienstleistung erhöhen auf` + (appointmentCounts[$store.state.data.service.id] + 1)"
+              :aria-label="`Anzahl der Dienstleistung erhöhen auf ` + (appointmentCounts[$store.state.data.service.id] + 1)"
               :aria-describedby="`appointment-count-name-` + $store.state.data.service.id"
               :disabled="!canIncreaseAppointments($store.state.data.service)" fab
               @click="increaseAppointments($store.state.data.service)">
@@ -96,11 +96,11 @@
                   :disabled="!canDecreaseAppointments(subService)" fab @click="decreaseAppointments(subService)">
                   <v-icon>{{ minusSvg }}</v-icon>
                 </v-btn>
-                <h3 tabindex="0"
+                <span tabindex="0"
                   :aria-label="getServiceName(subService.id) + ` Anzahl: ` + appointmentCounts[subService.id]"
                   class="appointment-count" :key="appointmentCounts[subService.id]">
                   {{ appointmentCounts[subService.id] }}
-                </h3>
+                </span>
                 <v-btn id="button-up" ref="buttonUp" class="appointment-count-button"
                   :aria-label="`Anzahl der Dienstleistung erhöhen auf ` + (appointmentCounts[subService.id] + 1)"
                   :aria-describedby="`appointment-count-name-` + subService.id"