diff --git a/img/icon/spotify.svg b/img/icon/spotify.svg
new file mode 100644
index 0000000..4bc9ac1
--- /dev/null
+++ b/img/icon/spotify.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" height="168px" width="168px" version="1.1" viewBox="0 0 168 168">
+  <path fill="#fff"
+        d="m83.996 0.277c-46.249 0-83.743 37.493-83.743 83.742 0 46.251 37.494 83.741 83.743 83.741 46.254 0 83.744-37.49 83.744-83.741 0-46.246-37.49-83.738-83.745-83.738l0.001-0.004zm38.404 120.78c-1.5 2.46-4.72 3.24-7.18 1.73-19.662-12.01-44.414-14.73-73.564-8.07-2.809 0.64-5.609-1.12-6.249-3.93-0.643-2.81 1.11-5.61 3.926-6.25 31.9-7.288 59.263-4.15 81.337 9.34 2.46 1.51 3.24 4.72 1.73 7.18zm10.25-22.802c-1.89 3.072-5.91 4.042-8.98 2.152-22.51-13.836-56.823-17.843-83.448-9.761-3.453 1.043-7.1-0.903-8.148-4.35-1.04-3.453 0.907-7.093 4.354-8.143 30.413-9.228 68.222-4.758 94.072 11.127 3.07 1.89 4.04 5.91 2.15 8.976v-0.001zm0.88-23.744c-26.99-16.031-71.52-17.505-97.289-9.684-4.138 1.255-8.514-1.081-9.768-5.219-1.254-4.14 1.08-8.513 5.221-9.771 29.581-8.98 78.756-7.245 109.83 11.202 3.73 2.209 4.95 7.016 2.74 10.733-2.2 3.722-7.02 4.949-10.73 2.739zm94.56 "/>
+</svg>
diff --git a/index.html b/index.html
index c48b406..d6307a4 100644
--- a/index.html
+++ b/index.html
@@ -20,9 +20,9 @@
 </head>
 <body>
 <nav>
-    <a data-link="about" href="#about">About me</a>
-    <a data-link="projects" href="#projects">Projects</a>
-    <a data-link="socials" href="#socials">Socials</a>
+    <a data-link="about" tabindex="1" href="#about">About me</a>
+    <a data-link="projects" tabindex="2" href="#projects">Projects</a>
+    <a data-link="socials" tabindex="3" href="#socials">Socials</a>
 </nav>
 <main>
     <section id="about">
@@ -215,7 +215,41 @@
         </div>
     </section>
     <section id="socials">
-
+        <h2>Socials</h2>
+        <article>
+            <a href="https://github.com/YouHaveTrouble" class="social-link" target="_blank" rel="external">
+                <img src="img/icon/github.svg" alt="GitHub" draggable="false" loading="lazy">
+                <span>GitHub</span>
+            </a>
+            <a href="https://discord.youhavetrouble.me" class="social-link" target="_blank" rel="external">
+                <img src="img/icon/discord.svg" alt="Discord" draggable="false" loading="lazy">
+                <span>Discord</span>
+            </a>
+            <a href="https://ko-fi.com/youhavetrouble" class="social-link" target="_blank" rel="external">
+                <img src="img/icon/kofi.svg" alt="Ko-fi" draggable="false" loading="lazy">
+                <span>Ko-fi</span>
+            </a>
+            <a href="https://steamcommunity.com/id/YouHavetrouble" class="social-link" target="_blank" rel="external">
+                <img src="img/icon/steam.svg" alt="Steam" draggable="false" loading="lazy">
+                <span>Steam</span>
+            </a>
+            <a href="https://www.youtube.com/@YouHaveTrouble" class="social-link" target="_blank" rel="external">
+                <img src="img/icon/youtube.svg" alt="YouTube" draggable="false" loading="lazy">
+                <span>YouTube</span>
+            </a>
+            <a href="https://modrinth.com/user/YouHaveTrouble" class="social-link" target="_blank" rel="external">
+                <img src="img/icon/modrinth.svg" alt="Modrinth" draggable="false" loading="lazy">
+                <span>Modrinth</span>
+            </a>
+            <a href="https://modrinth.com/user/YouHaveTrouble" class="social-link" target="_blank" rel="external">
+                <img src="img/icon/wakatime.svg" alt="WakaTime" draggable="false" loading="lazy">
+                <span>WakaTime</span>
+            </a>
+            <a href="https://open.spotify.com/user/11144490753" class="social-link" target="_blank" rel="external">
+                <img src="img/icon/spotify.svg" alt="Spotify" draggable="false" loading="lazy">
+                <span>Spotify</span>
+            </a>
+        </article>
     </section>
 </main>
 
