diff --git a/src/app/BadgeButton.tsx b/src/app/BadgeButton.tsx
index a8330cd..3e6c8a6 100644
--- a/src/app/BadgeButton.tsx
+++ b/src/app/BadgeButton.tsx
@@ -6,26 +6,30 @@ export default function BadgeButton({
   color = '#2563eb',
   icon,
   onClick,
+  labelColor,
 }: {
   label: string;
   color?: string;
   icon: React.ReactNode;
   onClick?: () => void;
+  labelColor?: string;
 }) {
   return (
     <button
       onClick={onClick}
-      className="flex items-center gap-2 h-8 px-5 font-bold tracking-wider uppercase text-white"
+      className="flex items-center gap-1.5 h-6 sm:h-8 px-3 font-bold text-white"
       style={{
         background: color,
         borderRadius: '4px',
         fontFamily: 'Verdana, Geneva, DejaVu Sans, sans-serif',
-        fontSize: '0.95rem',
-        letterSpacing: '0.08em',
+        fontSize: '0.75rem',
+        letterSpacing: '0.02em',
+        border: '1px solid rgba(0,0,0,0.1)',
+        boxShadow: '0 1px 2px rgba(0,0,0,0.1)',
       }}
     >
       <span className="flex items-center">{icon}</span>
-      <span>{label}</span>
+      <span style={{ color: 'white', fontWeight: 'bold' }}>{label}</span>
     </button>
   );
 } 
\ No newline at end of file
diff --git a/src/app/HeaderButtons.tsx b/src/app/HeaderButtons.tsx
index f8f5451..da5bef5 100644
--- a/src/app/HeaderButtons.tsx
+++ b/src/app/HeaderButtons.tsx
@@ -1,19 +1,17 @@
 'use client';
 import BadgeButton from './BadgeButton';
-import AboutButton from './AboutButton';
 
-const PersonIcon = (
-  <svg width="18" height="18" viewBox="0 0 20 20" fill="none">
-    <circle cx="10" cy="6" r="4" fill="white" stroke="white" strokeWidth="1.5" />
-    <rect x="3" y="13" width="14" height="5" rx="2.5" fill="white" stroke="white" strokeWidth="1.5" />
+const LockIcon = (
+  <svg width="16" height="16" viewBox="0 0 20 20" fill="none">
+    <path d="M15 8H5C3.89543 8 3 8.89543 3 10V16C3 17.1046 3.89543 18 5 18H15C16.1046 18 17 17.1046 17 16V10C17 8.89543 16.1046 8 15 8Z" fill="white"/>
+    <path d="M7 8V5C7 2.79086 8.79086 1 11 1H9C11.2091 1 13 2.79086 13 5V8" stroke="white" strokeWidth="2" strokeLinecap="round"/>
   </svg>
 );
 
-const InfoIcon = (
-  <svg width="18" height="18" viewBox="0 0 20 20" fill="none">
-    <circle cx="10" cy="10" r="9" stroke="white" strokeWidth="2" />
-    <rect x="9" y="8" width="2" height="6" rx="1" fill="white" />
-    <rect x="9" y="5" width="2" height="2" rx="1" fill="white" />
+const PersonIcon = (
+  <svg width="16" height="16" viewBox="0 0 20 20" fill="none">
+    <circle cx="10" cy="6" r="4" fill="white" stroke="white" strokeWidth="1.5" />
+    <rect x="3" y="13" width="14" height="5" rx="2.5" fill="white" stroke="white" strokeWidth="1.5" />
   </svg>
 );
 
@@ -24,25 +22,28 @@ export default function HeaderButtons() {
         href="/admin" 
         target="_self" 
         rel="noopener noreferrer"
-        className="h-6 sm:h-8 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 rounded"
+        className="focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 rounded"
       >
-        <img
-          src="https://img.shields.io/badge/Admin%20Login-000000?style=for-the-badge&logo=lock&logoColor=white&labelColor=8B0000"
-          alt="Admin Login"
-          className="h-6 sm:h-8"
+        <BadgeButton
+          label="ADMIN LOGIN"
+          color="#000000"
+          labelColor="#8B0000"
+          icon={LockIcon}
+          onClick={() => {}}
         />
       </a>
-      {/* If your server for about me is running on a different port, change the port number here */}
       <a 
         href={typeof window !== 'undefined' ? window.location.origin.replace('3000', '80') : '#'} 
         target="_self" 
         rel="noopener noreferrer"
-        className="h-6 sm:h-8 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 rounded"
+        className="focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 rounded"
       >
-        <img
-          src="https://img.shields.io/badge/About%20Me-000000?style=for-the-badge&logo=account&logoColor=white&labelColor=2563eb"
-          alt="About Me"
-          className="h-6 sm:h-8"
+        <BadgeButton
+          label="ABOUT ME"
+          color="#000000"
+          labelColor="#2563eb"
+          icon={PersonIcon}
+          onClick={() => {}}
         />
       </a>
     </div>