diff --git a/backend/views/index.ejs b/backend/views/index.ejs
index eba6ebb..7ffeffa 100644
--- a/backend/views/index.ejs
+++ b/backend/views/index.ejs
@@ -4,14 +4,9 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Cookbook</title>
+    <script src="index.js" defer></script>
 
-    <!-- San Francisco System Font -->
-    <style>
-      html {
-        font-family: -apple-system, BlinkMacSystemFont, "San Francisco",
-          "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-      }
-    </style>
+    <!-- Apple-Style: San Francisco Font und Styling -->
   </head>
   <body>
     <main class="container">
@@ -19,16 +14,33 @@
         <h1>Cookbook</h1>
         <div class="button-group">
           <button onclick="syncRecipes()">🔄 Sync Recipes</button>
-          <a href="/add" class="secondary-button">➕ Add Recipe</a>
+          <a href="addRecipe/addRecipe.html" class="secondary-button"
+            >➕ Add Recipe</a
+          >
+          <a
+            href="https://example.com/help"
+            class="secondary-button"
+            target="_blank"
+            rel="noopener noreferrer"
+            >❓ Help</a
+          >
         </div>
       </header>
 
-      <section id="recipes" class="recipes-list"></section>
+      <section id="recipes" class="recipes-list">
+        <!-- Recipes will be dynamically loaded here -->
+      </section>
     </main>
   </body>
 </html>
 
 <style>
+  /* System Font */
+  html {
+    font-family: -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI",
+      Roboto, Helvetica, Arial, sans-serif;
+  }
+
   /* Reset */
   * {
     margin: 0;
@@ -47,7 +59,6 @@
     min-height: 100vh;
   }
 
-  /* Main container */
   .container {
     width: 100%;
     max-width: 800px;
@@ -57,7 +68,6 @@
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
   }
 
-  /* Header */
   header {
     display: flex;
     flex-direction: column;
@@ -71,7 +81,6 @@
     font-weight: 600;
   }
 
-  /* Button group */
   .button-group {
     display: flex;
     justify-content: center;
@@ -93,7 +102,6 @@
     text-align: center;
   }
 
-  /* Primary button */
   button {
     background-color: #007aff;
     color: #fff;
@@ -103,7 +111,6 @@
     background-color: #005ecb;
   }
 
-  /* Secondary button (styled link) */
   .secondary-button {
     background-color: #e5e5ea;
     color: #1d1d1f;
@@ -113,14 +120,12 @@
     background-color: #d1d1d6;
   }
 
-  /* Recipe list */
   .recipes-list {
     display: flex;
     flex-direction: column;
     gap: 1rem;
   }
 
-  /* Placeholder for recipe cards (can be enhanced later) */
   .recipe-card {
     padding: 1rem;
     border-radius: 16px;
diff --git a/helpSite.md b/helpSite.md
new file mode 100644
index 0000000..e69de29
