diff --git a/xcpq/buildtime/xcpq_editor/cmd/server/httpServer.go b/xcpq/buildtime/xcpq_editor/cmd/server/httpServer.go
index fe86d40b8..3dbb553c8 100644
--- a/xcpq/buildtime/xcpq_editor/cmd/server/httpServer.go
+++ b/xcpq/buildtime/xcpq_editor/cmd/server/httpServer.go
@@ -2,6 +2,7 @@ package server
 
 import (
 	"database/sql"
+	"html/template"
 	"log"
 	"net/http"
 
@@ -30,7 +31,7 @@ func InitHttpServer(config *viper.Viper, dbHandler *sql.DB) HttpServer {
 
 	// static content
 	router.Static("/static", "../static")
-	router.StaticFile("/", "../static/index.html")
+	router.GET("/", home)
 
 	router.GET("/test", Test)
 
@@ -54,3 +55,38 @@ func Test(ctx *gin.Context) {
 		"message": "Test",
 	})
 }
+
+func home(ctx *gin.Context) {
+
+	/* load templates */
+
+	tmpl, err := template.ParseFiles(
+		"../templates/pages/index.html",
+		"../templates/layouts/navbar.html",
+		"../templates/layouts/properties.html",
+		"../templates/layouts/footer.html")
+
+	if err != nil {
+		ctx.JSON(http.StatusInternalServerError, gin.H{
+			"error": err.Error(),
+		})
+		return
+	}
+
+	renderTemplate(ctx, tmpl, nil)
+}
+
+func renderTemplate(ctx *gin.Context, tmpl *template.Template, data interface{}) {
+	if tmpl == nil {
+		ctx.JSON(http.StatusInternalServerError, gin.H{
+			"error": "template is nil",
+		})
+		return
+	}
+	err := tmpl.Execute(ctx.Writer, data)
+	if err != nil {
+		ctx.JSON(http.StatusInternalServerError, gin.H{
+			"error": err.Error(),
+		})
+	}
+}
diff --git a/xcpq/buildtime/xcpq_editor/static/index.html b/xcpq/buildtime/xcpq_editor/static/index.html
deleted file mode 100644
index 88b965533..000000000
--- a/xcpq/buildtime/xcpq_editor/static/index.html
+++ /dev/null
@@ -1,123 +0,0 @@
-<!DOCTYPE html>
-<html lang="de">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="icon" type="image/x-icon" href="/static/images/SimplyCPQ_Logo.svg" />
-
-    <title>X-CPQ by Simply CPQ</title>
-    <link rel="stylesheet" href="/static/css/scpq_header.css">
-    <link rel="stylesheet" href="/static/css/scpq_global.css">
-    <link rel="stylesheet" href="/static/css/scpq_content.css">
-    <link rel="stylesheet" href="/static/css/scpq_footer.css">
-    <script src="/static/js/htmx.js"></script>
-
-</head>
-
-<body>
-    <header>
-        <img src="/static/images/SimplyCPQ_Logo.svg" alt="Simply CPQ Logo" />
-        <h1>X-CPQ Material Editor</h1>
-        <p>by Simply CPQ</p>
-        <nav>
-            <!-- Navigation links can be added here -->
-            <ul>
-                <li><a href="#">Eigenschaften</a></li>
-                <li><a href="#">Produkte</a></li>
-                <li><a href="#">Konditionen</a></li>
-                <li><a href="#">Übersetzungen</a></li>
-                <li><a href="#">Datenimporte</a></li>
-            </ul>
-        </nav>
-    </header>
-    <main>
-        <section id="main-content">
-            <h2>X-CPQ Material Editor: Eigenschaften</h2>
-            <!-- Main content can be added here -->
-            <p>Der Eigenschaftspool dient der globalen Definition von Eigenschaften.</p>
-            <div class="editor-container">
-                <section class="editor-view">
-                    <h3>Property Type Groups</h3>
-                    <ul class="node mt-16">
-                        <details open>
-                            <summary>
-                                X-CPQ-Eigenschaften
-                            </summary>
-                            <ul class="node">
-                                <details open>
-                                    <summary>
-                                        Systemeigenschaften
-                                    </summary>
-                                    <ul class="node">
-                                        <li class="leaf">
-                                            Eigenschaft 1
-                                        </li>
-                                        <li class="leaf">
-                                            Eigenschaft 2
-                                        </li>
-                                    </ul>
-                                </details>
-                                <details open>
-                                    <summary>
-                                        Catalog Eigenschaften
-                                    </summary>
-                                    <ul class="node">
-                                        <li class="leaf">
-                                            Eigenschaft 1
-                                        </li>
-                                        <li class="leaf">
-                                            Eigenschaft 2
-                                        </li>
-                                    </ul>
-                                </details>
-                                <li class="leaf">
-                                    Eigenschaft 1
-                                </li>
-                                <li class="leaf">
-                                    Eigenschaft 2
-                                </li>
-                            </ul>
-                        </details>
-                    </ul>
-                </section>
-                <section class="editor-view">
-                    <section id="PropertyTypeGroupData">
-                        <h3>Property-Type Group {PropertyTypeGroupName}</h3>
-                        <form class="cform" method="post" action="/updatePropertyTypeGroup">
-                            <label for="propertyTypeGroupName">Name:</label>
-                            <input type="text" id="propertyTypeGroupName" name="propertyTypeGroupName" value="{PropertyTypeGroupName}">
-                            <label for="propertyTypeGroupDescription">Beschreibung:</label>
-                            <textarea id="propertyTypeGroupDescription" name="propertyTypeGroupDescription">{PropertyTypeGroupDescription}</textarea>
-                            <div class="button_row">
-                                <button type="submit">Speichern</button>
-                                <button type="submit">Neu</button>
-                                <button type="submit">Löschen</button>
-                            </div>
-                        </form>
-                    </section>
-                    <section id="PropertyTypeData">
-                        <h3>Property-Type {PropertyTypeName}</h3>
-                        <p>Hier können die Details der ausgewählten Eigenschaft bearbeitet werden.</p>
-                        <!-- Editor content can be added here -->
-                    </section>
-                </section>
-                <section class="editor-view">
-                    <section id="ValueData">
-                        <h3>Values für {PropertyTypeName}</h3>
-                        <p>Hier können die Werte der ausgewählten Eigenschaft bearbeitet werden.</p>
-                        <!-- Editor content can be added here -->
-                    </section>
-                </section>
-            </div>
-        </section>
-    </main>
-    
-    <footer>
-        <!-- Footer content can be added here -->
-        <p>&copy; 2026 Simply CPQ</p>
-    </footer>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/xcpq/buildtime/xcpq_editor/templates/layouts/.ignore b/xcpq/buildtime/xcpq_editor/templates/layouts/.ignore
deleted file mode 100644
index e69de29bb..000000000
diff --git a/xcpq/buildtime/xcpq_editor/templates/layouts/footer.html b/xcpq/buildtime/xcpq_editor/templates/layouts/footer.html
new file mode 100644
index 000000000..6621db6a9
--- /dev/null
+++ b/xcpq/buildtime/xcpq_editor/templates/layouts/footer.html
@@ -0,0 +1,4 @@
+{{define "footer"}}
+        <!-- Footer content can be added here -->
+        <p>&copy; 2026 Simply CPQ</p>
+{{end}}
\ No newline at end of file
diff --git a/xcpq/buildtime/xcpq_editor/templates/layouts/navbar.html b/xcpq/buildtime/xcpq_editor/templates/layouts/navbar.html
new file mode 100644
index 000000000..cfa09094f
--- /dev/null
+++ b/xcpq/buildtime/xcpq_editor/templates/layouts/navbar.html
@@ -0,0 +1,16 @@
+{{define "navbar"}}
+
+<img src="/static/images/SimplyCPQ_Logo.svg" alt="Simply CPQ Logo" />
+<h1>X-CPQ Material Editor</h1>
+<p>by Simply CPQ</p>
+<nav>
+    <!-- Navigation links can be added here -->
+    <ul>
+        <li><a href="#">Eigenschaften</a></li>
+        <li><a href="#">Produkte</a></li>
+        <li><a href="#">Konditionen</a></li>
+        <li><a href="#">Übersetzungen</a></li>
+        <li><a href="#">Datenimporte</a></li>
+    </ul>
+</nav>
+{{end}}
\ No newline at end of file
diff --git a/xcpq/buildtime/xcpq_editor/templates/layouts/properties.html b/xcpq/buildtime/xcpq_editor/templates/layouts/properties.html
new file mode 100644
index 000000000..036a9392f
--- /dev/null
+++ b/xcpq/buildtime/xcpq_editor/templates/layouts/properties.html
@@ -0,0 +1,82 @@
+{{define "properties"}}
+<!-- Properties content can be added here -->
+    <h2>X-CPQ Material Editor: Eigenschaften</h2>
+    <!-- Main content can be added here -->
+    <p>Der Eigenschaftspool dient der globalen Definition von Eigenschaften.</p>
+    <div class="editor-container">
+        <section class="editor-view">
+            <h3>Property Type Groups</h3>
+            <ul class="node mt-16">
+                <details open>
+                    <summary>
+                        X-CPQ-Eigenschaften
+                    </summary>
+                    <ul class="node">
+                        <details open>
+                            <summary>
+                                Systemeigenschaften
+                            </summary>
+                            <ul class="node">
+                                <li class="leaf">
+                                    Eigenschaft 1
+                                </li>
+                                <li class="leaf">
+                                    Eigenschaft 2
+                                </li>
+                            </ul>
+                        </details>
+                        <details open>
+                            <summary>
+                                Catalog Eigenschaften
+                            </summary>
+                            <ul class="node">
+                                <li class="leaf">
+                                    Eigenschaft 1
+                                </li>
+                                <li class="leaf">
+                                    Eigenschaft 2
+                                </li>
+                            </ul>
+                        </details>
+                        <li class="leaf">
+                            Eigenschaft 1
+                        </li>
+                        <li class="leaf">
+                            Eigenschaft 2
+                        </li>
+                    </ul>
+                </details>
+            </ul>
+        </section>
+        <section class="editor-view">
+            <section id="PropertyTypeGroupData">
+                <h3>Property-Type Group {PropertyTypeGroupName}</h3>
+                <form class="cform" method="post" action="/updatePropertyTypeGroup">
+                    <label for="propertyTypeGroupName">Name:</label>
+                    <input type="text" id="propertyTypeGroupName" name="propertyTypeGroupName" value="{PropertyTypeGroupName}">
+                    <label for="propertyTypeGroupDescription">Beschreibung:</label>
+                    <textarea id="propertyTypeGroupDescription" name="propertyTypeGroupDescription">{PropertyTypeGroupDescription}</textarea>
+                    <div class="button_row">
+                        <button type="submit">Speichern</button>
+                        <button type="submit">Neu</button>
+                        <button type="submit">Löschen</button>
+                    </div>
+                </form>
+            </section>
+            <section id="PropertyTypeData">
+                <h3>Property-Type {PropertyTypeName}</h3>
+                <p>Hier können die Details der ausgewählten Eigenschaft bearbeitet werden.</p>
+                <!-- Editor content can be added here -->
+            </section>
+        </section>
+        <section class="editor-view">
+            <section id="ValueData">
+                <h3>Values für {PropertyTypeName}</h3>
+                <p>Hier können die Werte der ausgewählten Eigenschaft bearbeitet werden.</p>
+                <!-- Editor content can be added here -->
+            </section>
+        </section>
+    </div>
+
+
+{{end}}
\ No newline at end of file
diff --git a/xcpq/buildtime/xcpq_editor/templates/pages/.ignore b/xcpq/buildtime/xcpq_editor/templates/pages/.ignore
deleted file mode 100644
index e69de29bb..000000000
diff --git a/xcpq/buildtime/xcpq_editor/templates/pages/index.html b/xcpq/buildtime/xcpq_editor/templates/pages/index.html
new file mode 100644
index 000000000..1bbf55f0c
--- /dev/null
+++ b/xcpq/buildtime/xcpq_editor/templates/pages/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="de">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="icon" type="image/x-icon" href="/static/images/SimplyCPQ_Logo.svg" />
+
+    <title>X-CPQ by Simply CPQ</title>
+    <link rel="stylesheet" href="/static/css/scpq_header.css">
+    <link rel="stylesheet" href="/static/css/scpq_global.css">
+    <link rel="stylesheet" href="/static/css/scpq_content.css">
+    <link rel="stylesheet" href="/static/css/scpq_footer.css">
+    <script src="/static/js/htmx.js"></script>
+
+</head>
+
+<body>
+    <header>
+        {{ template "navbar" . }}
+    </header>
+    <main>
+        <section id="main-content">
+            {{ template "properties" . }}
+        </section>
+    </main>
+    
+    <footer>
+        {{ template "footer" . }}
+    </footer>
+
+</body>
+
+</html>