diff --git a/js/customElements/header.js b/js/customElements/header.js
index 3b75a51..ce6300b 100644
--- a/js/customElements/header.js
+++ b/js/customElements/header.js
@@ -2,21 +2,42 @@ class Header extends HTMLElement {
     constructor() {
         super();
         let pageTitle = this.getAttribute("data-title");
-        this.innerHTML = `    
-            <header >
-                <div class="header-wrapper" >
-                    <div class="header-homepage">
-                        <div class="align-holder" >
-                            <h1 onclick="document.getElementById('content').scrollIntoView();">${pageTitle}</h1>
-                        </div >
-                    </div >
-                    <div class="header-separator header-separator-bottom " >
-                    <jl-svg data-name="banner"></jl-svg>
-                    </div >
-                </div >
-                <jl-main_menu id = "mainmenu" data-title = "${pageTitle}"></jl-main_menu>
-            </header>
-        `;
+
+        const header = document.createElement("header");
+        this.appendChild(header);
+
+        const headerWrapper = document.createElement("div");
+        headerWrapper.classList.add("header-wrapper");
+        header.appendChild(headerWrapper);
+
+        const headerHomepage = document.createElement("div");
+        headerHomepage.classList.add("header-homepage");
+        headerWrapper.appendChild(headerHomepage);
+
+        const alignHolder = document.createElement("div");
+        alignHolder.classList.add("align-holder");
+        headerHomepage.appendChild(alignHolder);
+
+        const h1 = document.createElement("h1");
+        h1.innerText = pageTitle;
+        h1.onclick = () => {
+            document.getElementById("content").scrollIntoView();
+        }
+        alignHolder.appendChild(h1);
+
+        const headerSeparator = document.createElement("div");
+        headerSeparator.classList.add("header-separator");
+        headerSeparator.classList.add("header-separator-bottom");
+        headerWrapper.appendChild(headerSeparator);
+
+        const svg = document.createElement("jl-svg");
+        svg.setAttribute("data-name", "banner");
+        headerSeparator.appendChild(svg);
+        
+        const mainMenu = document.createElement("jl-main_menu");
+        mainMenu.setAttribute("data-title", pageTitle);
+        mainMenu.id = "mainmenu";
+        header.appendChild(mainMenu);
     }
 }