diff --git a/electron/main/custom_document.html b/electron/main/custom_document.html
new file mode 100644
index 0000000..6d58c1e
--- /dev/null
+++ b/electron/main/custom_document.html
@@ -0,0 +1,161 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Custom Document</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            background: #f0f2f5;
+            margin: 0;
+            padding: 0;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            min-height: 100vh;
+        }
+
+        .container {
+            background: white;
+            padding: 30px;
+            margin-top: 50px;
+            border-radius: 12px;
+            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
+            width: 90%;
+            max-width: 600px;
+        }
+
+        h1 {
+            text-align: center;
+            color: #333;
+        }
+
+        label {
+            font-weight: bold;
+            margin-top: 15px;
+            display: block;
+            color: #555;
+        }
+
+        input[type="text"], textarea, select {
+            width: 100%;
+            padding: 10px;
+            margin-top: 5px;
+            border-radius: 6px;
+            border: 1px solid #ccc;
+            font-size: 14px;
+        }
+
+        textarea {
+            height: 120px;
+            resize: vertical;
+        }
+
+        .buttons {
+            display: flex;
+            justify-content: space-between;
+            margin-top: 25px;
+        }
+
+        button {
+            padding: 10px 20px;
+            font-size: 14px;
+            border: none;
+            border-radius: 6px;
+            cursor: pointer;
+            transition: 0.2s;
+            background-color: #007BFF;
+            color: white;
+        }
+
+        button:hover {
+            background-color: #0056b3;
+        }
+
+        @media (max-width: 500px) {
+            .buttons {
+                flex-direction: column;
+            }
+            .buttons button {
+                width: 100%;
+                margin-top: 10px;
+            }
+        }
+
+        #result {
+            margin-top: 20px;
+            color: #333;
+            word-break: break-word;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>Custom Document Generator</h1>
+
+        <label for="docName">Dokumentname:</label>
+        <input type="text" id="docName" placeholder="Gib hier den Dokumentnamen ein">
+
+        <label for="existingDocs">Vorhandene Dokumente auswählen (optional):</label>
+        <select id="existingDocs">
+            <option value="">-- Neues Dokument erstellen --</option>
+            <option value="meeting_report_001">Meeting Report 001</option>
+            <option value="summary_01">Summary 01</option>
+            <option value="project_plan_A">Project Plan A</option>
+        </select>
+
+        <label for="prompt">Dein Prompt:</label>
+        <textarea id="prompt" placeholder="Schreibe hier den Prompt für dein Dokument..."></textarea>
+
+        <div class="buttons">
+            <a href="index.html">
+                <button id="goBackBtn">Abbrechen</button>
+            </a>
+            <button id="generateBtn">Dokument speichern</button>
+        </div>
+
+        <div id="result"></div>
+    </div>
+
+    <script>
+        const goBackBtn = document.getElementById("goBackBtn");
+        const generateBtn = document.getElementById("generateBtn");
+        const existingDocs = document.getElementById("existingDocs");
+        const docNameInput = document.getElementById("docName");
+        const promptInput = document.getElementById("prompt");
+        const resultDiv = document.getElementById("result");
+
+        // Zurück zur Haupt-GUI
+        goBackBtn.addEventListener("click", () => {
+            window.electronAPI.goBackToMain();
+        });
+
+        // Generiere Dokument
+        generateBtn.addEventListener("click", () => {
+            const prompt = promptInput.value.trim();
+            let docName = docNameInput.value.trim();
+            const selectedExisting = existingDocs.value;
+
+            if (!prompt) {
+                alert("Bitte gib einen Prompt ein!");
+                return;
+            }
+
+            // Wenn ein vorhandenes Dokument ausgewählt wurde, hängt der Prompt daran
+            if (selectedExisting) {
+                docName = selectedExisting; // prompt wird an vorhandenes Dokument angehängt
+            } else if (!docName) {
+                alert("Bitte gib einen Dokumentnamen ein, wenn du ein neues Dokument erstellen möchtest!");
+                return;
+            }
+
+            // Demo-Ausgabe im Result-Div
+            resultDiv.innerHTML = `<strong>Dokumentname:</strong> ${docName}<br><strong>Prompt:</strong> ${prompt}`;
+
+            // Hier kannst du den Prompt an dein LLM oder Module-Handler senden
+            // z.B. window.submit.submit({documentName: docName, prompt: prompt})
+        });
+    </script>
+</body>
+</html>
diff --git a/electron/main/index.html b/electron/main/index.html
index 7ac4825..e4b2ff5 100644
--- a/electron/main/index.html
+++ b/electron/main/index.html
@@ -19,8 +19,8 @@
       </label>
 
       <nav class="menu1">
-        <a href="index2.html" class="li1">Custom document</a>
-        <a href="index3.html" class="li1">Help</a>
+        <a href="custom_document.html" class="li1">Custom document</a>
+        <a href="" class="li1">Help</a>
       </nav>
     </nav>
   </section>
@@ -57,26 +57,31 @@
     </div>
 
     <div class="step" id="step2" style="display:none;">
-      <div class="labelDiv" id="labelDiv">
+      <div class="KI-wrap">
        <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" >
+        <select name="ai_type" id="ai_type"></select>
       </div>
-      <div class="dropdownMenus" id="dropdownMenus">
-        <select name="ai_type" id="ai_type">
-        </select>
-        <select name="transkript_type" id="transkript_type">
-        </select>
+
+      <div class="transcript-wrap">
+        <label id="labelTranscription">Select transcription:</label>
+        <select name="transkript_type" id="transkript_type"></select>
+      </div>
+
+      <div class="type-wrapper">
+        <label id="labelType">Select type:</label>
         <select name="output_type" id="output_type">
           <option value="pdf">.pdf</option>
           <option value="word">.word</option>
           <option value="txt">.txt</option>
         </select>
+      </div>
+
+      <div class="language-wrapper">
+        <label id="labelLanguage">Select language:</label>
+        <img id="labelLanguageFlag" src="flags/united-kingdom-flag-png-large.jpg" width="20" height="10" >
         <select name="language_option" id="language_option">
         </select>
-      </div>
+      </div> 
     </div>
 
     <div class="step" id="step3" style="display:none;">
diff --git a/electron/main/style.css b/electron/main/style.css
index 20519bd..5b894e7 100644
--- a/electron/main/style.css
+++ b/electron/main/style.css
@@ -17,7 +17,6 @@ body {
   transform: translate(-50%, -50%);
   margin: 0;
   z-index: 20;
-
 }
 
 #h1-wrapper {
@@ -108,6 +107,12 @@ body {
 .submit-btn:hover {
   background-color: #0056b3;
 }
+
+#step2 {
+  display: flex;
+  justify-content: center;
+  gap: 30px;
+}
  
 input[type="file"] {
   display: none;
