diff --git a/src/app/page.tsx b/src/app/page.tsx
index 6fe62d1..34a354d 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,4 +1,25 @@
 import Image from "next/image";
+import Link from 'next/link';
+
+// Reusable component for links
+const LinkButton = ({ href, target, rel, text, iconSrc, iconAlt, className }: any) => (
+  <Link href={href} passHref>
+    <a
+      className={className}
+      target={target}
+      rel={rel}
+    >
+      <Image
+        aria-hidden
+        src={iconSrc}
+        alt={iconAlt}
+        width={20}
+        height={20}
+      />
+      {text}
+    </a>
+  </Link>
+);
 
 export default function Home() {
   return (
@@ -22,80 +43,56 @@ export default function Home() {
           </li>
           <li>Save and see your changes instantly.</li>
         </ol>
-
         <div className="flex gap-4 items-center flex-col sm:flex-row">
-          <a
+          <LinkButton
             className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5"
             href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
             target="_blank"
             rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="https://nextjs.org/icons/vercel.svg"
-              alt="Vercel logomark"
-              width={20}
-              height={20}
-            />
-            Deploy now
-          </a>
-          <a
+            text="Deploy now"
+            iconSrc="https://nextjs.org/icons/vercel.svg"
+            iconAlt="Vercel logomark"
+          />
+          <LinkButton
             className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:min-w-44"
             href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
             target="_blank"
             rel="noopener noreferrer"
-          >
-            Read our docs
-          </a>
+            text="Read our docs"
+            iconSrc="https://nextjs.org/icons/file.svg"
+            iconAlt="File icon"
+          />
         </div>
       </main>
       <footer className="row-start-3 flex gap-6 flex-wrap items-center justify-center">
-        <a
+        <LinkButton
           className="flex items-center gap-2 hover:underline hover:underline-offset-4"
           href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
           target="_blank"
           rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="https://nextjs.org/icons/file.svg"
-            alt="File icon"
-            width={16}
-            height={16}
-          />
-          Learn
-        </a>
-        <a
+          text="Learn"
+          iconSrc="https://nextjs.org/icons/file.svg"
+          iconAlt="File icon"
+        />
+        <LinkButton
           className="flex items-center gap-2 hover:underline hover:underline-offset-4"
           href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
           target="_blank"
           rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="https://nextjs.org/icons/window.svg"
-            alt="Window icon"
-            width={16}
-            height={16}
-          />
-          Examples
-        </a>
-        <a
+          text="Examples"
+          iconSrc="https://nextjs.org/icons/window.svg"
+          iconAlt="Window icon"
+        />
+        <LinkButton
           className="flex items-center gap-2 hover:underline hover:underline-offset-4"
           href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
           target="_blank"
           rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="https://nextjs.org/icons/globe.svg"
-            alt="Globe icon"
-            width={16}
-            height={16}
-          />
-          Go to nextjs.org →
-        </a>
+          text="Go to nextjs.org →"
+          iconSrc="https://nextjs.org/icons/globe.svg"
+          iconAlt="Globe icon"
+        />
       </footer>
     </div>
   );
-}
+}
\ No newline at end of file