diff --git a/frontend/src/app/components/header/header.component.html b/frontend/src/app/components/header/header.component.html
index b7254e9..7fa1e6b 100644
--- a/frontend/src/app/components/header/header.component.html
+++ b/frontend/src/app/components/header/header.component.html
@@ -17,10 +17,10 @@
 </div>
 <div>
     <ng-container *ngIf="isAuthenticated; else anonymousRightMenu">
-        <a [routerLink]="['/disconnect']">Disconnect</a>
+        <a [routerLink]="['/disconnect']" matRipple>Disconnect</a>
     </ng-container>
     <ng-template #anonymousRightMenu>
-        <a [routerLink]="['/login']">Login</a>
+        <a [routerLink]="['/login']" matRipple>Login</a>
     </ng-template>
 </div>
 <app-side-menu #sideMenu></app-side-menu>
\ No newline at end of file
diff --git a/frontend/src/app/components/header/header.component.scss b/frontend/src/app/components/header/header.component.scss
index db52770..fd7532a 100644
--- a/frontend/src/app/components/header/header.component.scss
+++ b/frontend/src/app/components/header/header.component.scss
@@ -149,7 +149,16 @@ $headerHeight: 3.5em;
                 align-items: center;
                 min-width: 5em;
                 color: white;
-                margin: 0 .5em;
+                margin: 0.5em 0.5em;
+                border-radius: 10em;
+                text-decoration: none;
+                padding: 0 .8em;
+                background-color: #3f51b5;
+                transition: background-color .2s ease-in-out;
+
+                &:hover {
+                    background-color: #5c6bc0;
+                }
             }
         }
     }
diff --git a/frontend/src/app/components/header/header.component.ts b/frontend/src/app/components/header/header.component.ts
index b4bef20..a12dacb 100644
--- a/frontend/src/app/components/header/header.component.ts
+++ b/frontend/src/app/components/header/header.component.ts
@@ -5,11 +5,12 @@ import { RouterModule } from '@angular/router';
 import { AuthenticationService } from '../../core/service/authentication.service';
 import { CommonModule } from '@angular/common';
 import { SideMenuComponent } from '../side-menu/side-menu.component';
+import { MatRippleModule } from '@angular/material/core';
 
 @Component({
   selector: 'app-header',
   standalone: true,
-  imports: [CommonModule, MatButtonModule, MatIconModule, RouterModule, SideMenuComponent],
+  imports: [CommonModule, MatButtonModule, MatIconModule, RouterModule, SideMenuComponent, MatRippleModule],
   templateUrl: './header.component.html',
   styleUrl: './header.component.scss',
 })