diff --git a/src/components/BlogPost.astro b/src/components/BlogPost.astro
index 15deac1..aaeb17e 100644
--- a/src/components/BlogPost.astro
+++ b/src/components/BlogPost.astro
@@ -6,6 +6,7 @@ interface Props {
 }
 
 const { title, published_at, slug } = Astro.props;
+import Link from "../components/Link.astro";
 ---
 
 <li>
@@ -13,11 +14,11 @@ const { title, published_at, slug } = Astro.props;
     <h2
       class="mb-1 font-bold text-blue-700 hover:text-blue-500 hover:underline"
     >
-      <a href={`/blogs/${slug}`}>{title}</a>
+      <Link href={`/blogs/${slug}`}>{title}</Link>
     </h2>
     <footer class="text-sm text-gray-500">
       <time datetime={published_at.toISOString()}>
-        {new Intl.DateTimeFormat("en-us", {}).format(new Date(published_at))}
+        {new Intl.DateTimeFormat("en-us").format(new Date(published_at))}
       </time>
     </footer>
   </article>
diff --git a/src/components/Link.astro b/src/components/Link.astro
new file mode 100644
index 0000000..be482eb
--- /dev/null
+++ b/src/components/Link.astro
@@ -0,0 +1,13 @@
+---
+interface Props {
+  extraClasses?: string;
+  [x: string]: unknown;
+}
+---
+
+<a
+  {...Astro.props}
+  class={`text-blue-700 hover:(underline text-blue-600) focus-visible:(outline outline-[4px] outline-black underline [box-shadow:0_0_0_6px_white]) ${Astro.props.extraClasses}`}
+>
+  <slot />
+</a>
diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro
index 7cef053..a28b387 100644
--- a/src/components/Navbar.astro
+++ b/src/components/Navbar.astro
@@ -3,6 +3,7 @@ const paths = [
   { name: "home", path: "/" },
   { name: "blogs", path: "/blogs" },
 ];
+import Link from "../components/Link.astro";
 ---
 
 <header class="max-w-5xl mx-auto pt-2 md:pt-10 mb-2 px-3 md:px-0">
@@ -11,12 +12,9 @@ const paths = [
       {
         paths.map(({ name, path }) => (
           <li>
-            <a
-              href={path}
-              class="font-bold text-blue-600 hover:(text-blue-500 underline)"
-            >
+            <Link href={path} extraClasses="font-bold">
               {name}
-            </a>{" "}
+            </Link>{" "}
           </li>
         ))
       }
diff --git a/src/pages/index.astro b/src/pages/index.astro
index e712edd..d524bb5 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -2,6 +2,7 @@
 import { Image } from "astro:assets";
 import daneImage from "../images/dane.png";
 import Layout from "../layouts/Layout.astro";
+import Link from "../components/Link.astro";
 
 import { getCollection } from "astro:content";
 
@@ -40,12 +41,12 @@ const posts = (await getCollection("blog"))
             <li class="mb-2">
               <p class="mb-0 max-w-[60ch]">
                 {post.data.title}
-                <a
+                <Link
                   href={`/blogs/${post.slug}`}
-                  class="text-sm text-blue-700 font-bold hover:(underline text-blue-500)"
+                  extraClasses="text-sm font-bold ml-1"
                 >
                   (view more)
-                </a>
+                </Link>
               </p>
               <span class="text-gray-500 text-sm">
                 posted on{" "}
@@ -59,11 +60,7 @@ const posts = (await getCollection("blog"))
           ))
         }
       </ul>
-      <a
-        href="/blogs"
-        class="text-blue-700 font-bold hover:(text-blue-600 underline)"
-        >View All Blog Entries</a
-      >
+      <Link href="/blogs" extraClasses="font-bold">View All Blog Entries</Link>
     </div>
   </div>
   <div class="grid xl:grid-cols-2">
@@ -74,29 +71,29 @@ const posts = (await getCollection("blog"))
       <ul class="px-2 py-0.5">
         <li class="flex items-center gap-1">
           <div class="i-lucide-mailbox"></div>
-          <a
-            href="mailto:khadane.miller@gmail.com?subject=Hey%20There"
-            class="text-blue-700 hover:(underline text-blue-600)"
-            >Send Message</a
-          >
+          <Link href="mailto:khadane.miller@gmail.com?subject=Hey%20There">
+            Send Message
+          </Link>
         </li>
         <li class="flex items-center gap-1">
           <div class="i-lucide-square-user"></div>
-          <a
+          <Link
             href="https://www.linkedin.com/in/dmiller94/"
             target="_blank"
-            class="text-blue-700 hover:(underline text-blue-600)"
-            rel="noopener noreferrer">Add on LinkedIn</a
+            rel="noopener noreferrer"
           >
+            Add on LinkedIn
+          </Link>
         </li>
         <li class="flex items-center gap-1">
           <div class="i-lucide-at-sign"></div>
-          <a
+          <Link
             href="https://www.threads.net/@dane__m"
             target="_blank"
-            class="text-blue-700 hover:(underline text-blue-600)"
-            rel="noopener noreferrer">Follow on Threads</a
+            rel="noopener noreferrer"
           >
+            Follow on Threads
+          </Link>
         </li>
       </ul>
     </div>