diff --git a/electron/main/index.html b/electron/main/index.html
index b4bfb5f..56aaf03 100644
--- a/electron/main/index.html
+++ b/electron/main/index.html
@@ -7,11 +7,21 @@
   <link rel="stylesheet" href="style.css">
 </head>
 <body>
+
+  <div class="step-nav">
+  <div class="step-item active" data-step="1">1. Step</div>
+  <div class="step-item" data-step="2">2. Step</div>
+  <div class="step-item" data-step="3">3. Step</div>
+  <div class="step-item" data-step="4">4. Step</div>
+</div>
  
-<div class="mitte" id="mitte"> 
+<div class="mitte" id="mitte">
+  <h1 id="h1">Video to document</h1> 
+  <div class="step" id="step1">
   <div class="labelDiv" id="labelDiv">
     <label id="labelKI">Select ki:</label>
     <label id="labelTranscription">Select transcription:</label>
+    <label id="labelType">Select type:</label>
     <label id="labelLanguage">Select language:</label>
     <img id="labelLanguageFlag" src="flags/united-kingdom-flag-png-large.jpg" width="20" height="10" >
   </div>
@@ -26,9 +36,9 @@
     <select name="language_option" id="language_option">
     </select>
   </div>
+  </div>
 
-  <h1 id="h1">Video to document</h1> 
-
+<div class="step" id="step3" style="display:none;">
   <div class="upload-container" id="uploadContainer">
     <p id="p1">Drag and drop video file</p>
     <video id="previewThumbnail" autoplay="false">
@@ -40,7 +50,9 @@
       <button class="custom-btn" id="manualUploadBtn">Search video</button>
   <input type="file" id="videoUpload" accept="video/*">
   </div>
+</div>
 
+<div class="step" id="step2" style="display:none;"> 
 <div class="checkbox-group">
   <label id="checkbox_group" for="checkbox-group">Choose prefered document style:</label>
   <div class="checkbox-container">
@@ -53,7 +65,9 @@
     <label id="label_summary" for="docFormatSummary">Summary with timestamps</label>
   </div>
 </div>
+</div>
 
+<div class="step" id="step4" style="display:none;">
 <button class="submit-btn" id="submitButton" onclick="checkBoxes()" disabled>Submit</button>
 
 <div class="progressbar" id="progressbar">
@@ -61,7 +75,8 @@
   <span class="progress_text">0%</span>
 </div>
 </div>
-  
+</div>
+
 <script src="languages.js"></script>
 <script src="script.js"></script>
 <script src="./renderer.js"></script>
diff --git a/electron/main/script.js b/electron/main/script.js
index f463501..f91430c 100644
--- a/electron/main/script.js
+++ b/electron/main/script.js
@@ -215,3 +215,24 @@ function generateThumbnail(path){
   videoElement.style.maxHeight = 40;
   videoElement.autoplay = false;
 }
+
+const steps = document.querySelectorAll(".step");
+const stepButtons = document.querySelectorAll(".step-item");
+
+function showStep(stepNumber) {
+  // Steps ein/ausblenden
+  steps.forEach(step => step.style.display = "none");
+  document.getElementById("step" + stepNumber).style.display = "block";
+
+  // Navigation highlighten
+  stepButtons.forEach(btn => btn.classList.remove("active"));
+  document.querySelector(`.step-item[data-step="${stepNumber}"]`).classList.add("active");
+}
+
+// Klick-Events
+stepButtons.forEach(btn => {
+  btn.addEventListener("click", () => {
+    const step = btn.dataset.step;
+    showStep(step);
+  });
+});
diff --git a/electron/main/style.css b/electron/main/style.css
index 0912516..fe08c2a 100644
--- a/electron/main/style.css
+++ b/electron/main/style.css
@@ -108,8 +108,11 @@ gap: 5px;
 }
  
 .submit-btn {
+  display: flex;
+  justify-content: center;
   padding: 10px 20px;
-  margin-top: 10px;
+  margin-left: 80px;
+  margin-top: 30px;
   margin-bottom: 10px;
   background-color: #007BFF;
   color: white;
@@ -126,7 +129,7 @@ gap: 5px;
 }
  
 .mitte {
-  background-color: #FDFCFA;
+  background-color: #FFF;
   display: flex;
   width: 700px;
   flex-direction: column;
@@ -149,6 +152,7 @@ h1 {
   position: relative;
   width: 210px;
   height: 30px;
+  margin: 50px 20px 5px 20px;
   background: rgb(42, 46, 78);
   border-radius: 5px;
   overflow: hidden;
@@ -173,9 +177,10 @@ h1 {
 
 .dropdownMenus {
   display: flex;
-  justify-content: flex-end;
+  justify-content: center;
   margin-top: 1px;
-  gap: 150px;
+  margin-bottom: 30px;
+  gap: 170px;
   padding: 2px 10px 2px 10px;
 }
 
@@ -184,5 +189,47 @@ h1 {
 }
 
 .labelDiv {
-  gap: 200px;
+  gap: 60px;
+  display: flex;
+  justify-content: center;
+  overflow-wrap:inherit;
+  padding-bottom: 20px;
+  margin-top: 40px;
+  margin-bottom: 10px;
+}
+
+/*Step bar*/
+.step-nav {
+  display: flex;
+  gap: 20px;
+  margin-top: 20px;
+  background: #fff;
+  padding: 10px 20px;
+  border-radius: 6px;
+  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
+}
+
+.step-item {
+  padding: 10px 15px;
+  border-radius: 8px;
+  background: #eee;
+  cursor: pointer;
+  font-weight: bold;
+  transition: 0.2s;
+}
+
+.step-item.active {
+  background: #007BFF;
+  color: white;
+}
+
+.step-item:hover {
+  background: #d9d9d9;
+}
+
+/*panels*/
+.step {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
 }
\ No newline at end of file
