diff --git a/frontend/src/lib/css/navbar.css b/frontend/src/lib/css/navbar.css
index 6861d2d..d1cd7dd 100644
--- a/frontend/src/lib/css/navbar.css
+++ b/frontend/src/lib/css/navbar.css
@@ -6,7 +6,7 @@ nav {
     transition: all .3s ease 0s;
 }
 
-nav > div {
+nav>div {
     transition: all .3s ease 0s;
 }
 
@@ -44,10 +44,53 @@ nav > div {
     text-decoration: none;
     font-family: Gabarito;
     font-weight: 400;
+    transition: all .3s ease 0s;
+}
+
+.navbar-categories div {
+    position: relative;
     margin-left: 1rem;
     margin-right: 1rem;
 }
 
+.navbar-categories>div>a::before,
+.navbar-categories>div>a::after {
+    content: "";
+    position: absolute;
+    width: 0;
+    background-color: var(--palette-purple);
+    transition: all .3s ease 0s;
+    height: 2px;
+}
+
+.navbar-categories-white>div>a::before,
+.navbar-categories-white>div>a::after {
+    background-color: var(--palette-pink) !important;
+}
+
+.navbar-categories>div>a::before {
+    top: -6px;
+    height: 3px;
+}
+
+.navbar-categories>div>a::after {
+    bottom: -6px;
+    right: 0;
+}
+
+.navbar-categories>div>a:hover::before,
+.navbar-categories>div>a:hover::after {
+    width: 100%;
+}
+
+.navbar-categories>div>a:hover {
+    color: var(--palette-purple) !important;
+}
+
+.navbar-categories-white>div>a:hover {
+    color: var(--palette-pink) !important;
+}
+
 .navbar-search {
     align-items: center;
     justify-content: center;
@@ -85,17 +128,17 @@ nav > div {
     height: 4rem;
 }
 
-.floating > div {
+.floating>div {
     display: flex;
     align-items: center;
     flex-direction: row;
-    color: var(--color-text); 
+    color: var(--color-text);
 }
 
-.floating > div > h1 {
+.floating>div>h1 {
     color: var(--color-text) !important;
 }
 
-.floating > div > div > a {
+.floating>div>div>a {
     color: var(--color-text) !important;
 }
\ No newline at end of file
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index e995408..5065cb8 100644
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -13,7 +13,7 @@
 	<div class={scrollY < 50 ? 'navbar-title flex-row navbar-background shadow' : 'navbar-title h-100'}>
 		<h1>Etheryo Blog</h1>
 	</div>
-	<div class={scrollY < 50 ? 'navbar-categories flex-row flex-end navbar-background shadow' : 'flex-end navbar-categories h-100'}>
+	<div class={scrollY < 50 ? 'navbar-categories navbar-categories-white flex-row flex-end navbar-background shadow' : 'flex-end navbar-categories'}>
 		<div>
 			<a href="/">Articles</a>
 		</div>