diff --git a/css/brands.css b/css/brands.css
index cd6bb19..69e679f 100644
--- a/css/brands.css
+++ b/css/brands.css
@@ -333,6 +333,13 @@
 
 /* Mastodon */
 .button-mastodon {
+	--button-text:#ffffff;
+	--button-background:#17063B;
+	/* --button-border:1px solid #ffffff;,*/
+}
+
+/* Mastodon */
+.button-mastodon-alt {
 	--button-text:#ffffff;
 	--button-background:#563ACC;
 	/* --button-background:#6364ff;
diff --git a/index.html b/index.html
index 47b35d1..29ac910 100644
--- a/index.html
+++ b/index.html
@@ -80,13 +80,13 @@
               <a class="button button-bluesky" href="https://bsky.app/profile/me.vylion.com" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons/bluesky.svg" alt="Bluesky Logo">Bluesky</a>
 
               <!-- Mastodon -->
-              <a class="button button-mastodon" href="https://im-in.space/@vylion" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons/mastodon-white.svg" alt="Mastodon Logo">Mastodon</a>
-
-              <!-- Spotify -->
-              <a class="button button-spotify" href="https://open.spotify.com/user/vylion?si=7a6622a64cf84461" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons/spotify.svg" alt="Spotify Logo">Spotify profile</a>
+              <a class="button button-mastodon-alt" href="https://im-in.space/@vylion" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons/mastodon-white.svg" alt="Mastodon Logo">Mastodon</a>
 
               <!-- Steam -->
-              <a class="button button-steam-alt" href="https://steamcommunity.com/id/vylion/" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons/steam.svg" alt="Steam Logo">Steam</a>
+              <!--a class="button button-steam-alt" href="https://steamcommunity.com/id/vylion/" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons/steam.svg" alt="Steam Logo">Steam</a>
+
+              <!-- YouTube -->
+              <a class="button button-yt" href="https://www.youtube.com/@wk_vylion" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons/youtube.svg" alt="YouTube Logo">YouTube</a>
 
               <!-- Telegram -->
               <a class="button button-telegram" href="https://t.me/wk_vylion" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons/telegram.svg" alt="Telegram Logo">Telegram channel</a>
@@ -94,8 +94,8 @@
               <!-- Tumblr -->
               <!--a class="button button-tumb" href="#" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons/tumblr.svg" alt="Tumblr Logo">Tumblr</a>
 
-              <!-- YouTube -->
-              <a class="button button-yt" href="https://www.youtube.com/@wk_vylion" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons/youtube.svg" alt="YouTube Logo">YouTube</a>
+              <!-- Spotify -->
+              <a class="button button-spotify" href="https://open.spotify.com/user/vylion?si=7a6622a64cf84461" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons/spotify.svg" alt="Spotify Logo">Spotify profile</a>
 
               <!-- Generic Email -->
               <a class="button button-default" href="mailto:wk@vylion.com" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons/generic-email.svg" alt="Email Icon">Email me</a>