diff --git a/backend/templates/index.html.template b/backend/templates/index.html.template
index 7d0fb51..7d40be8 100644
--- a/backend/templates/index.html.template
+++ b/backend/templates/index.html.template
@@ -97,11 +97,11 @@
           </div>
           <div class="footer-column">
             <span class="footer-headline">Social</span>
-            <ul class="footer-list">
-              <li><a rel="me" href="https://mastodon.social/@svrjs">Mastodon</a></li>
-              <li><a rel="me" href="https://x.com/SVR_JS">X (Twitter)</a></li>
-              <li><a rel="me" href="https://bsky.app/profile/svrjs.org">Bluesky</a></li>
-              <li><a rel="me" href="https://odysee.com/@SVRJS">Odysee</a></li>
+            <ul class="footer-social">
+              <li><a rel="me" href="https://x.com/SVR_JS" title="X (Twitter)"><img src="/img/social/x.png" alt="X (Twitter)"></a></li>
+              <li><a rel="me" href="https://mastodon.social/@svrjs" title="Mastodon"><img src="/img/social/mastodon.png" alt="Mastodon"></a></li>
+              <li><a rel="me" href="https://bsky.app/profile/svrjs.org" title="Bluesky"><img src="/img/social/bluesky.png" alt="Bluesky"></a></li>
+              <li><a rel="me" href="https://odysee.com/@SVRJS" title="Odysee"><img src="/img/social/odysee.png" alt="Odysee"></a></li>
             </ul>
             <span class="footer-headline">Policies and Security</span>
             <ul class="footer-list">
diff --git a/frontend/css/main.css b/frontend/css/main.css
index a0eee7d..34eb8c8 100644
--- a/frontend/css/main.css
+++ b/frontend/css/main.css
@@ -257,6 +257,29 @@ a:hover {
   list-style-type: none;
 }
 
+.footer-social {
+  list-style-type: none;
+  padding-left: 0;
+  margin: 0.5em 0;
+}
+
+.footer-social li {
+  display: inline;
+}
+
+.footer-social a:hover img {
+  opacity: 0.7;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
+  filter: alpha(opacity=70);
+}
+
+.footer-social img {
+  width: 40px;
+  -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1);
+  -moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1);
+  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1);
+}
+
 img {
   border-style: none;
 }
diff --git a/frontend/img/social/bluesky.png b/frontend/img/social/bluesky.png
new file mode 100644
index 0000000..01eb1dc
Binary files /dev/null and b/frontend/img/social/bluesky.png differ
diff --git a/frontend/img/social/mastodon.png b/frontend/img/social/mastodon.png
new file mode 100644
index 0000000..7a239ca
Binary files /dev/null and b/frontend/img/social/mastodon.png differ
diff --git a/frontend/img/social/odysee.png b/frontend/img/social/odysee.png
new file mode 100644
index 0000000..0b92a3d
Binary files /dev/null and b/frontend/img/social/odysee.png differ
diff --git a/frontend/img/social/x.png b/frontend/img/social/x.png
new file mode 100644
index 0000000..75212b6
Binary files /dev/null and b/frontend/img/social/x.png differ