diff --git a/assets/js/akordeon.js b/assets/js/akordeon.js
index a007e5b..95f32c5 100644
--- a/assets/js/akordeon.js
+++ b/assets/js/akordeon.js
@@ -1,25 +1,29 @@
-document.addEventListener("DOMContentLoaded", () => {
-    const akordeony = document.getElementsByClassName("akordeon");
-    for (const akordeon of akordeony) {
-        if (akordeon.children.length < 2) {
-            console.warn("Na stronie jest niepoprawnie skonfigurowany akordeon!")
-            continue;
-        }
-        const pierworodny = akordeon.children[0];
-        const nowy = document.createElement("div")
-        nowy.className = "akordeon-header";
-
-        nowy.onclick = () => {
-            const otwarte = akordeon.classList.contains("open");
-            akordeon.classList.remove(otwarte ? "open": "closed");
-            akordeon.classList.add(otwarte ? "closed" : "open");
-            for (const dziecko of akordeon.children) {
-                if (dziecko != nowy) {
-                    dziecko.style.display = otwarte ? "" : "none";
-                }
-            }
-        }
-        akordeon.replaceChild(nowy, pierworodny)
-        nowy.append(pierworodny)
+class Akordeon extends HTMLElement {
+    constructor() {
+        super();
+        this._internals = this.attachInternals();
     }
-})
\ No newline at end of file
+    
+    get collapsed() {
+        return this._internals.states.has("hidden");
+    }
+
+    set collapsed(flag) {
+        if (flag) {
+            // Existence of identifier corresponds to "true"
+            this._internals.states.add("hidden");
+        } else {
+            // Absence of identifier corresponds to "false"
+            this._internals.states.delete("hidden");
+        }
+    }
+
+    connecterCallback() {
+    }
+
+    attributeChangedCallback(atrybut, poprzednio, obecnie) {
+
+    }
+}
+
+customElements.define("akordeon", Akordeon);
\ No newline at end of file
diff --git a/assets/js/nawigacja.js b/assets/js/nawigacja.js
new file mode 100644
index 0000000..46580d5
--- /dev/null
+++ b/assets/js/nawigacja.js
@@ -0,0 +1,64 @@
+const linki = [
+    [
+        { nazwa: "Strona główna", link: "/index.html" },
+        { nazwa: "Moje hobby", link: "/hobby.html" },
+        { nazwa: "Galeria", link: "/galeria.html" },
+        { nazwa: "Kontakt", link: "https://nonamesoft.xyz/about" },
+    ],
+    [
+        { nazwa: "JS. Podstawowe Zad.", link: "/js-podstawy.html" },
+        { nazwa: "JS. Warunkowe Zad.", link: "/js-warunkowe.html" },
+    ]
+];
+
+
+class Header extends HTMLElement {
+    constructor() {
+        super();
+    }
+
+    connectedCallback() {
+        this.innerHTML = `
+            <header>
+                <img src="/favicon.ico" width="64" height="64">
+                <h1>MaszToZadanieDomowe.com</h1>
+                <nav>
+                    <ul>
+                        <li><a href="/index.html">Strona główna</a></li>
+                        ${linki[linki.length - 1].map(value => {
+                            return `<li><a href="${value.link}">${value.nazwa}</a></li>`
+                        }).join("")}
+                    </ul>
+                </nav>
+            </header>
+        `;
+    }
+};
+customElements.define("header-comp", Header);
+
+class Footer extends HTMLElement {
+    constructor() {
+        super();
+    }
+
+    connectedCallback() {
+        this.innerHTML = `
+            <footer>
+                <div>
+                    <div>
+                        ${linki.map(kategoria => {
+                            return `<ul>
+                                ${kategoria.map(value => {
+                                    return `<li><a href="${value.link}">${value.nazwa}</a></li>`
+                                }).join("")}
+                            </ul>`
+                        }).join("")}
+                    </div>
+                    <strong>Strona &copy; Dark Steveneq, 2025; Nazwę wymyślił Youpiter</strong> <sub>#GradientySąSuper</sub>
+                </div>
+                <img src="assets/images/blahaj.png" height="128">
+            </footer>
+        `;
+    }
+};
+customElements.define("footer-comp", Footer);
\ No newline at end of file
diff --git a/index.html b/index.html
index 28500ac..89804e2 100644
--- a/index.html
+++ b/index.html
@@ -6,20 +6,11 @@
         <title>MaszToZadanieDomowe.com</title>
         <link href="/favicon.ico" rel="favicon">
         <link href="assets/css/main.css" rel="stylesheet">
-        <script data-goatcounter="https://zeszyt.nonamesoft.xyz/count"
-        async src="/assets/js/count.js"></script>
+        <script src="assets/js/nawigacja.js" defer></script>
+        <script data-goatcounter="https://zeszyt.nonamesoft.xyz/count" async src="/assets/js/count.js"></script>
     </head>
     <body>
-        <header>
-            <img src="/favicon.ico" width="64" height="64">
-            <h1>MaszToZadanieDomowe.com</h1>
-            <nav>
-                <ul>
-                    <li><a href="/index.html">Strona główna</a></li>
-                    <li><a href="/js-podstawy.html">JS Podstawowe Zad.</a></li>
-                </ul>
-            </nav>
-        </header>
+        <header-comp></header-comp>
         <main>
             <h2>Witam na mojej stronie</h2>
             <hr>
@@ -41,22 +32,6 @@
 	    to będzie zdrowy pieesek<br>
 	    <sub>youpiter podsunął to</sub>
         </main>
-        <footer>
-            <div>
-                <div>
-                    <ul>
-                        <li><a href="/index.html">Strona główna</a></li>
-                        <li><a href="/hobby.html">Moje hobby</a></li>
-                        <li><a href="/galeria.html">Galeria</a></li>
-                        <li><a href="https://nonamesoft.xyz/about">Kontakt</a></li>
-                    </ul>
-                    <ul>
-                        <li><a href="/js-podstawy.html">JS Podstawowe Zad.</a></li>
-                    </ul>
-                </div>
-                <strong>Strona &copy; Dark Steveneq, 2025; Nazwę wymyślił Youpiter</strong> <sub>#GradientySąSuper</sub>
-            </div>
-            <img src="assets/images/blahaj.png" height="128">
-        </footer>
+        <footer-comp></footer-comp>
     </body>
 </html>
diff --git a/js-podstawy.html b/js-podstawy.html
index 8b1a91a..e1cb304 100644
--- a/js-podstawy.html
+++ b/js-podstawy.html
@@ -12,16 +12,7 @@
         <script src="/assets/js/js-podstawy.js"></script>
     </head>
     <body>
-        <header>
-            <img src="/favicon.ico" width="64" height="64">
-            <h1>MaszToZadanieDomowe.com</h1>
-            <nav>
-                <ul>
-                    <li><a href="/index.html">Strona główna</a></li>
-                    <li><a href="/js-podstawy.html">JS Podstawowe Zad.</a></li>
-                </ul>
-            </nav>
-        </header>
+        <header-comp></header-comp>
         <main>
             <h2>JavaScript Podstawowe Zadania</h2>
             <hr>
@@ -95,6 +86,9 @@
                 <br>
                 <li>
                     <h4>Akordeon</h4>
+                        <akordeon state="closed">
+
+                        </akordeon>
                         <div class="akordeon">
                             <span>Tytuł akordeonu</span>
                             <pre>
@@ -144,22 +138,6 @@
                 </li>
             </ol>
         </main>
-        <footer>
-            <div>
-                <div>
-                    <ul>
-                        <li><a href="/index.html">Strona główna</a></li>
-                        <li><a href="/hobby.html">Moje hobby</a></li>
-                        <li><a href="/galeria.html">Galeria</a></li>
-                        <li><a href="https://nonamesoft.xyz/about">Kontakt</a></li>
-                    </ul>
-                    <ul>
-                        <li><a href="/js-podstawy.html">JS Podstawowe Zad.</a></li>
-                    </ul>
-                </div>
-                <strong>Strona &copy; Dark Steveneq, 2025; Nazwę wymyślił Youpiter</strong> <sub>#GradientySąSuper</sub>
-            </div>
-            <img src="/assets/images/blahaj.png">
-        </footer>
+        <footer-comp></footer-comp>
     </body>
 </html>