diff --git a/src/index.html b/src/index.html
index 0b502f8..3bf021e 100644
--- a/src/index.html
+++ b/src/index.html
@@ -20,13 +20,13 @@
       </header>
       <div class="flex flex-col gap-6">
         <a href="https://github.com/jrpotter/" target="_blank">
-          <image class="w-6 h-6" src="./imgs/github.svg" />
+          <image class="w-6 h-6 link" src="./imgs/github.svg" />
         </a>
         <a href="https://www.linkedin.com/in/jrpotter2112/" target="_blank">
-          <image class="w-6 h-6" src="./imgs/linkedin.svg" />
+          <image class="w-6 h-6 link" src="./imgs/linkedin.svg" />
         </a>
         <a href="https://www.zotero.org/jrpotter2112/library" target="_blank">
-          <image class="w-6 h-6" src="./imgs/zotero.svg" />
+          <image class="w-6 h-6 link" src="./imgs/zotero.svg" />
         </a>
       </div>
     </div>
diff --git a/src/main.css b/src/main.css
index db1d70b..5bf273f 100644
--- a/src/main.css
+++ b/src/main.css
@@ -5,3 +5,11 @@
 a {
   text-decoration: underline;
 }
+
+a:hover {
+  color: #0056b2;
+}
+
+.link:hover {
+  filter: invert(19%) sepia(98%) saturate(2006%) hue-rotate(198deg) brightness(98%) contrast(101%);
+}
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index cd03526..932f2d8 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -6,7 +6,6 @@ module.exports = {
       colors: {
         primary: "white",
         secondary: "#f6f8fa",
-        link: "#8056b2",
       },
     },
   },