diff --git a/src/app/HeaderButtons.tsx b/src/app/HeaderButtons.tsx
index 61747b6..ff8a75e 100644
--- a/src/app/HeaderButtons.tsx
+++ b/src/app/HeaderButtons.tsx
@@ -20,18 +20,19 @@ const InfoIcon = (
 export default function HeaderButtons() {
   return (
     <div className="flex gap-2 justify-center w-full md:w-auto mt-2 md:mt-0">
-      <BadgeButton
-        label="Admin Login"
-        color="#dc2626"
-        icon={PersonIcon}
-        onClick={() => window.location.href = '/admin'}
-      />
-      <BadgeButton
-        label="About Me"
-        color="#2563eb"
-        icon={InfoIcon}
-        onClick={() => window.open('http://' + window.location.hostname + ':80', '_blank')}
-      />
+      <a href="/admin" target="_self" rel="noopener noreferrer">
+        <img
+          src="https://img.shields.io/badge/Admin%20Login-000000?style=for-the-badge&logo=lock&logoColor=white&labelColor=8B0000"
+          alt="Admin Login"
+        />
+      </a>
+      {/* If your server for about me is running on a different port, change the port number here */}
+      <a href={window.location.origin.replace('3000', '80')} target="_self" rel="noopener noreferrer">
+        <img
+          src="https://img.shields.io/badge/About%20Me-000000?style=for-the-badge&logo=account&logoColor=white&labelColor=2563eb"
+          alt="About Me"
+        />
+      </a>
     </div>
   );
 }