diff --git a/quartz/components/Homebar.tsx b/quartz/components/Homebar.tsx
index 97540a6..c76ff22 100644
--- a/quartz/components/Homebar.tsx
+++ b/quartz/components/Homebar.tsx
@@ -8,11 +8,11 @@ const Homebar: QuartzComponent = ({ fileData, cfg, displayClass }: QuartzCompone
   const baseDir = pathToRoot(fileData.slug!)
   return (
     <div class="homebar">
-        <a href="index">Home</a>
-        <a href="Characters">Characters</a>
-        <a href="Links">Where you can find me</a>
-        <a href="Projects">Projects</a>
-        <a href="Articles">Articles</a>
+        <a class="hb-button" href="index">Home</a>
+        <a class="hb-button" href="Characters">Characters</a>
+        <a class="hb-button" href="Links">Where you can find me</a>
+        <a class="hb-button" href="Projects">Projects</a>
+        <a class="hb-button" href="Articles">Articles</a>
     </div>
   )
 }
@@ -23,7 +23,7 @@ Homebar.css = `
   display: flex;
   flex-direction: row;
 }
-.homebar > a {
+.hb-button {
     border-radius: 25%;
     background-color: rgba(100,100,100, 0.3);
     padding: 0.2rem 0.4rem;
@@ -32,7 +32,7 @@ Homebar.css = `
     width: fit-content;
     height: fit-content;
 }
-.homebar > a:hover {
+.hb-button:hover {
     background-color: rgba(100,100,100, 0.5);
 }
 `