diff --git a/js/customElements/skills.js b/js/customElements/skills.js
new file mode 100644
index 0000000000000000000000000000000000000000..d1938b8968ad6e64e5a004386ec3a6b7edf7cfa1
--- /dev/null
+++ b/js/customElements/skills.js
@@ -0,0 +1,12 @@
+class Skill extends HTMLElement {
+    constructor() {
+        super();
+        ["python", "php", "sass", "css", "c_sharp", "html", "java", "arduino", "raspberry", "linux", "arch", "gitlab", "traefik", "proxmox"].forEach( skill => {
+            const image = document.createElement("img");
+            image.src = "/API/getFile.php?filename=skills/" + skill + ".png";
+            this.appendChild(image);
+        })
+    }
+}
+
+customElements.define("jl-skills", Skill);
\ No newline at end of file
diff --git a/js/script.js b/js/script.js
index 0514b87e640fa32da005be277b92f18f6e65e1dc..f9ec471c212f1174807209bacc89980c01277b74 100644
--- a/js/script.js
+++ b/js/script.js
@@ -18,3 +18,4 @@ require("./customElements/mainMenu");
 require("./customElements/footer");
 require("./customElements/ebkBanner");
 require("./customElements/sellingTable");
+require("./customElements/skills");
\ No newline at end of file
diff --git a/public/index.html b/public/index.html
index af38efddb584c38657b7e0a683e6b3e143c9c556..4b4bf8b5965294ab583dc82a98c7200ad715c820 100644
--- a/public/index.html
+++ b/public/index.html
@@ -23,6 +23,8 @@
         <h2>Blog</h2>
         <jl-blog_index id="blog"></jl-blog_index>
         <jl-ebk-banner></jl-ebk-banner>
+        <h2>Skills</h2>
+        <jl-skills></jl-skills>
         <div id="banner">
             <h2>Banner</h2>
             <a href="https://ipv6.he.net" target="_blank"><img class="no-corner"
diff --git a/scss/_skills.scss b/scss/_skills.scss
new file mode 100644
index 0000000000000000000000000000000000000000..2f24da8434fcb5f0a27b0b5cbc279f99f50b0ae7
--- /dev/null
+++ b/scss/_skills.scss
@@ -0,0 +1,5 @@
+jl-skills {
+    img {
+        max-height: 80px;
+    }
+}
\ No newline at end of file
diff --git a/scss/style.scss b/scss/style.scss
index 1432519e0c3f768b331c8f6924c518fdef4cbb83..5d4550cd167e403df900b905173efc9818c22cd3 100644
--- a/scss/style.scss
+++ b/scss/style.scss
@@ -15,5 +15,6 @@
 @import "home";
 @import "prism";
 @import "sellingTable";
+@import "skills";
 
 @import "../node_modules/basiclightbox/src/styles/main";