diff --git a/zmscitizenview/src/components/Appointment/AppointmentView.vue b/zmscitizenview/src/components/Appointment/AppointmentView.vue
index 009da7790..16a1c0f39 100644
--- a/zmscitizenview/src/components/Appointment/AppointmentView.vue
+++ b/zmscitizenview/src/components/Appointment/AppointmentView.vue
@@ -1,6 +1,11 @@
 <template>
   <div class="m-component">
     <div class="container">
+      <muc-stepper
+        :step-items="STEPPER_ITEMS"
+        :active-item="activeStep"
+        @change-step="changeStep"
+      />
       <service-finder
         v-if="currentView === 0"
         :services="services"
@@ -37,7 +42,7 @@
 </template>
 
 <script setup lang="ts">
-import { MucButton } from "@muenchen/muc-patternlab-vue";
+import { MucButton, MucStepper } from "@muenchen/muc-patternlab-vue";
 import { onMounted, provide, ref, watch } from "vue";
 
 import { Office } from "@/api/models/Office";
@@ -49,6 +54,7 @@ import CustomerInfo from "@/components/Appointment/CustomerInfo.vue";
 import ServiceFinder from "@/components/Appointment/ServiceFinder.vue";
 import { ServiceImpl } from "@/types/ServiceImpl";
 import { SelectedServiceProvider } from "@/types/ServiceTypes";
+import {StepperItem} from "@/types/StepperTypes";
 
 const props = defineProps<{
   baseUrl: any;
@@ -59,6 +65,31 @@ const props = defineProps<{
   t: any;
 }>();
 
+const STEPPER_ITEMS : StepperItem[] = [
+  {
+    id: "0",
+    label: props.t("service"),
+    icon: "shopping-cart",
+  },
+  {
+    id: "1",
+    label: props.t("appointment"),
+    icon: "calendar",
+  },
+  {
+    id: "2",
+    label: props.t("contact"),
+    icon: "mail",
+  },
+  {
+    id: "3",
+    label: props.t("overview"),
+    icon: "information"
+  },
+];
+
+const activeStep = ref<string>("0");
+
 const services = ref<Service[]>([]);
 const relations = ref<Relation[]>([]);
 const offices = ref<Office[]>([]);
@@ -99,9 +130,16 @@ const decreaseCurrentView = () => currentView.value--;
 
 const setShowIncreaseViewButton = () => (showIncreaseViewButton.value = true);
 
-watch(currentView, (newCurrentView) =>
-  newCurrentView > 0
-    ? (showDecreaseViewButton.value = true)
-    : (showDecreaseViewButton.value = false)
+const changeStep = (step: string) => {
+  if (parseInt(step)< parseInt(activeStep.value)) {
+    currentView.value = parseInt(step);
+  }
+};
+
+watch(currentView, (newCurrentView) => {
+  activeStep.value = newCurrentView.toString();
+  showDecreaseViewButton.value = newCurrentView > 0;
+}
+
 );
 </script>
diff --git a/zmscitizenview/src/types/StepperTypes.ts b/zmscitizenview/src/types/StepperTypes.ts
new file mode 100644
index 000000000..bef0c3942
--- /dev/null
+++ b/zmscitizenview/src/types/StepperTypes.ts
@@ -0,0 +1,5 @@
+export interface StepperItem {
+  id: string;
+  label: string;
+  icon: string;
+}
diff --git a/zmscitizenview/src/utils/Constants.ts b/zmscitizenview/src/utils/Constants.ts
index 4eec1360f..98b87224a 100644
--- a/zmscitizenview/src/utils/Constants.ts
+++ b/zmscitizenview/src/utils/Constants.ts
@@ -22,7 +22,7 @@ export const VUE_APP_ZMS_API_CAPTCHA_DETAILS_ENDPOINT =
 
 export const MAX_SLOTS = 25;
 
-export function getAPIBaseURL(): String {
+export function getAPIBaseURL(): string {
   console.log("#getAPIBaseURL", import.meta);
   if (import.meta.env.VITE_VUE_APP_API_URL) {
     return import.meta.env.VITE_VUE_APP_API_URL;
diff --git a/zmscitizenview/src/utils/de-DE.json b/zmscitizenview/src/utils/de-DE.json
index 5b6ce56dc..9f739281c 100644
--- a/zmscitizenview/src/utils/de-DE.json
+++ b/zmscitizenview/src/utils/de-DE.json
@@ -1,7 +1,9 @@
 {
+  "appointment": "Termin",
   "availableTimes": "Verfügbare Termine",
   "back": "Zurück",
   "combinableServices": "Kombinierbare Leistungen",
+  "contact": "Kontakt",
   "estimatedDuration": "Voraussichtliche Termindauer:",
   "location": "Ort",
   "minutes": "Minuten",
@@ -10,6 +12,7 @@
   "noAppointmentsAvailable": "Bitte versuchen Sie es noch einmal zu einem späteren Zeitpunkt: Wir schalten mehrmals pro Tag Termine frei, auch bevor wir öffnen.",
   "noServiceFound": "Keine Dienstleistung gefunden.",
   "oftenSearchedService": "Häufig gesuchte Leistungen:",
+  "overview": "Übersicht",
   "service": "Leistung",
   "serviceSearch": "Bürgerservice-Suche",
   "time": "Zeit",
@@ -43,7 +46,6 @@
   "activationLinkExpired": "Ihr Aktivierungslink ist abgelaufen.",
   "errorTryAgainLater": "Etwas ist schief gelaufen. Bitte versuchen Sie es mit einem anderen Termin.",
   "appointmentPreconfirmedNotice": "Um die Reservierung abzuschließen, erhalten Sie innerhalb von wenigen Minuten eine E-Mail mit einem Aktivierungslink. Bitte beachten Sie, dass die Reservierung verfällt, wenn Sie den Termin nicht mit diesem Link bestätigen.",
-  "appointment": "Termin",
   "chooseAppointment": "Termin wählen",
   "textLengthExceeded": "Die maximale Länge wird überschritten.",
   "contactData": "Kontaktdaten",
diff --git a/zmscitizenview/src/utils/en-US.json b/zmscitizenview/src/utils/en-US.json
index 6c0f14a50..659e83398 100644
--- a/zmscitizenview/src/utils/en-US.json
+++ b/zmscitizenview/src/utils/en-US.json
@@ -1,7 +1,9 @@
 {
+  "appointment": "Appointment",
   "availableTimes": "Available dates",
   "back": "Back",
   "combinableServices": "Combinable services",
+  "contact": "Contact us",
   "estimatedDuration": "Estimated duration:",
   "location": "Location",
   "minutes": "minutes",
@@ -10,6 +12,7 @@
   "noAppointmentsAvailable": "Please try again later: We activate appointments several times a day, including prior to our opening hours.",
   "noServiceFound": "No service found",
   "oftenSearchedService": "Frequently requested services:",
+  "overview": "Overview",
   "service": "Service",
   "serviceSearch": "Search for citizen services",
   "time": "Zeit",
@@ -30,7 +33,6 @@
   "activationLinkExpired": "Your activation link has expired",
   "errorTryAgainLater": "Something went wrong. Please, try with another appointment",
   "appointmentPreconfirmedNotice": "Your appointment was initially reserved. To complete the reservation, you will immediately receive an email with an activation link. Please note that the reservation will expire if you do not confirm the appointment with this link.",
-  "appointment": "Appointment",
   "textLengthExceeded": "The maximum length is exceeded",
   "contactData": "Contact data",
   "pleaseCheckOnceAgain": "Please check your data once again and reserve appointment",