diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 233a082..8324000 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -3,6 +3,16 @@
 const { title, description } = Astro.props['content'];
 
 import resume from '../../resume/resume.clintp.json';
+
+import { Image } from 'astro:assets';
+
+import logoGithub from '../images/logo-social-github.svg'
+import logoLinkedIn from '../images/logo-social-linkedin.svg'
+
+const logos = {
+  github: logoGithub,
+  linkedin: logoLinkedIn
+}
 ---
 
 <!doctype html>
@@ -23,9 +33,14 @@ import resume from '../../resume/resume.clintp.json';
             <img src="/favicon.svg" class="inline-block w-8 object-cover rounded mr-2"/>
             <h1 class="text-lg font-bold">$ ./clintp.xyz</h1>
           </a>
-          <nav class="flex gap-4">
+          <nav class="flex gap-2">
           { resume.basics.profiles.map(profile => (
-            <a href={ profile.url } class="hover:underline" rel="noopener" target="_blank">{ profile.network }</a>
+            <a href={ profile.url } class="hover:animate-spin" rel="noopener" target="_blank">
+              <Image src={ logos[profile.network.toLowerCase()] }
+                alt={ profile.network }
+                class="w-7 h-7 invert"
+              />
+            </a>
             ))
           }
         </div>
