diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 75f7961..0718687 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -21,15 +21,21 @@ export function Footer() {
               </p>
             </div>
             <m3e-button-group aria-label="Footer links" size="medium" variant="connected">
-              <m3e-button as="a" href="https://github.com/Aliucord/documentation" target="_blank" variant="tonal" style={{ fontFamily: 'Roboto, ui-sans-serif, system-ui', fontSize: '1rem', minWidth: 0 }}>
-                Documentation
-              </m3e-button>
-              <m3e-button as="a" href="https://github.com/Aliucord/Aliucord" target="_blank" variant="tonal" style={{ fontFamily: 'Roboto, ui-sans-serif, system-ui', fontSize: '1rem', minWidth: 0, marginLeft: '0.5rem' }}>
-                GitHub
-              </m3e-button>
-              <m3e-button as="a" href="https://discord.gg/EsNDvBaHVU" target="_blank" variant="tonal" style={{ fontFamily: 'Roboto, ui-sans-serif, system-ui', fontSize: '1rem', minWidth: 0, marginLeft: '0.5rem' }}>
-                Support Server
-              </m3e-button>
+              <a href="https://github.com/Aliucord/documentation" target="_blank" rel="noreferrer" style={{ display: 'contents' }}>
+                <m3e-button variant="tonal" style={{ fontFamily: 'Roboto, ui-sans-serif, system-ui', fontSize: '1rem', minWidth: 0 }}>
+                  Documentation
+                </m3e-button>
+              </a>
+              <a href="https://github.com/Aliucord/Aliucord" target="_blank" rel="noreferrer" style={{ display: 'contents' }}>
+                <m3e-button variant="tonal" style={{ fontFamily: 'Roboto, ui-sans-serif, system-ui', fontSize: '1rem', minWidth: 0, marginLeft: '0.5rem' }}>
+                  GitHub
+                </m3e-button>
+              </a>
+              <a href="https://discord.gg/EsNDvBaHVU" target="_blank" rel="noreferrer" style={{ display: 'contents' }}>
+                <m3e-button variant="tonal" style={{ fontFamily: 'Roboto, ui-sans-serif, system-ui', fontSize: '1rem', minWidth: 0, marginLeft: '0.5rem' }}>
+                  Support Server
+                </m3e-button>
+              </a>
             </m3e-button-group>
           </div>
         </div>
@@ -44,4 +50,4 @@ export function Footer() {
       </div>
     </footer>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx
index 5cdbdb7..b758c65 100644
--- a/src/components/Hero.tsx
+++ b/src/components/Hero.tsx
@@ -9,13 +9,10 @@ import MaterialIcon from "./MaterialIcon";
 function M3EButtonWithIcon({ icon, label, href, variant = "filled", size = "medium", target, rel, trailingIcon, style, ...rest }) {
 
 
-  return (
+  const button = (
     <m3e-button
       variant={variant}
       size={size}
-      href={href}
-      target={target}
-      rel={rel}
       style={style}
       {...rest}
     >
@@ -24,6 +21,16 @@ function M3EButtonWithIcon({ icon, label, href, variant = "filled", size = "medi
       {trailingIcon && <m3e-icon slot="trailing-icon">{trailingIcon}</m3e-icon>}
     </m3e-button>
   );
+
+  if (href) {
+    return (
+      <a href={href} target={target} rel={rel} style={{ display: "contents" }}>
+        {button}
+      </a>
+    );
+  }
+
+  return button;
 }
 
 export function Hero() {