diff --git a/goofy-client/apps/goofy/src/styles/abstracts/_variables.scss b/goofy-client/apps/goofy/src/styles/abstracts/_variables.scss
index c920d4dc719b3fb9a10e2e1daa56ea39cb42c6fb..63f4c60043717918325daa5e5730bedf55019297 100644
--- a/goofy-client/apps/goofy/src/styles/abstracts/_variables.scss
+++ b/goofy-client/apps/goofy/src/styles/abstracts/_variables.scss
@@ -1,5 +1,6 @@
 @import "~@angular/material/theming";
 
+$grey: #777;
 
 $background: #fafafa;
 $dark-background: #303030;
diff --git a/goofy-client/libs/navigation/src/lib/build-info/build-info.component.scss b/goofy-client/libs/navigation/src/lib/build-info/build-info.component.scss
index 19f655198e10e9a2d8b42f18df1b3f780a62ad21..454bef4b83521be56442c47416425b8bb5460350 100644
--- a/goofy-client/libs/navigation/src/lib/build-info/build-info.component.scss
+++ b/goofy-client/libs/navigation/src/lib/build-info/build-info.component.scss
@@ -1,9 +1,11 @@
+@import "variables";
+
 :host {
 	position: absolute;
 	right: 0;
 	bottom: 0;
 	font-size: 12px;
-	color: #999;
+	color: #666;
 	padding: 4px 8px;
 	transform: rotate(-90deg) translate(100%, 0);
 	transform-origin: right bottom;
diff --git a/goofy-client/libs/navigation/src/lib/header-container/header/header.component.html b/goofy-client/libs/navigation/src/lib/header-container/header/header.component.html
index 294766a143aba62a7485d586290efc9cbec83bd3..bd0310f03952fe4d145eb8f9f99ba5892f7f58b6 100644
--- a/goofy-client/libs/navigation/src/lib/header-container/header/header.component.html
+++ b/goofy-client/libs/navigation/src/lib/header-container/header/header.component.html
@@ -1,7 +1,7 @@
 <header>
 	<div class="left">
-		<button mat-icon-button (click)="toggleMenuEvent.emit(!this.navigationCollapse)">
-		<mat-icon>menu</mat-icon></button>
+		<goofy-client-icon-button-with-spinner icon="menu" (clickEmitter)="toggleMenuEvent.emit(!this.navigationCollapse)">
+		</goofy-client-icon-button-with-spinner>
 		<a routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">
 			<img src="/assets/img/logo.svg" alt="Goofy Logo" />
 			<h1 data-test-id='title'>Goofy</h1>
@@ -16,7 +16,7 @@
 
 		<goofy-client-settings [darkMode]="darkMode" (darkModeEmitter)="darkModeEmitter.emit($event)"></goofy-client-settings>
 
-		<button mat-icon-button [matMenuTriggerFor]="accountMenu" class="big-button" data-test-id="user-icon-button">
+		<button mat-icon-button [matMenuTriggerFor]="accountMenu" class="big-button" aria-label="button with user icon" data-test-id="user-icon-button">
 			<goofy-client-user-icon></goofy-client-user-icon>
 		</button>
 
diff --git a/goofy-client/libs/navigation/src/lib/header-container/header/header.component.scss b/goofy-client/libs/navigation/src/lib/header-container/header/header.component.scss
index 7613b2824c4fa91126729131b2b644ce8f523e03..fb574ba5d847bf2507b48dc45901eda7ae851450 100644
--- a/goofy-client/libs/navigation/src/lib/header-container/header/header.component.scss
+++ b/goofy-client/libs/navigation/src/lib/header-container/header/header.component.scss
@@ -55,7 +55,7 @@ img {
 }
 
 .right {
-	color: #999;
+	color: $grey;
 	display: flex;
 	align-items: center;
 }
diff --git a/goofy-client/libs/navigation/src/lib/header-container/header/settings/settings.component.html b/goofy-client/libs/navigation/src/lib/header-container/header/settings/settings.component.html
index 3bd2631f91c2a89ad8455b7f707b9590175b6748..b4e29e915905deff88f37c5c299fef4b93570d94 100644
--- a/goofy-client/libs/navigation/src/lib/header-container/header/settings/settings.component.html
+++ b/goofy-client/libs/navigation/src/lib/header-container/header/settings/settings.component.html
@@ -1,8 +1,8 @@
-<button mat-icon-button [matMenuTriggerFor]="settingsMenu"><mat-icon>settings</mat-icon></button>
+<goofy-client-icon-button-with-spinner icon="settings" [matMenuTriggerFor]="settingsMenu"></goofy-client-icon-button-with-spinner>
 <mat-menu #settingsMenu="matMenu" >
 	<div class="menu-container"
 		(click)="$event.stopPropagation()">
-		
+
 		<mat-slide-toggle color="primary"
 			[checked]="darkMode"
 			(change)="darkModeEmitter.emit($event.checked)">Dark Mode
diff --git a/goofy-client/libs/user-profile/src/lib/user-icon/user-icon.component.scss b/goofy-client/libs/user-profile/src/lib/user-icon/user-icon.component.scss
index 00cc9a064311748cf0e26ffc10072bd9472abd33..4a762ba5dd2ae8afa6adff15d246cab7793e9f26 100644
--- a/goofy-client/libs/user-profile/src/lib/user-icon/user-icon.component.scss
+++ b/goofy-client/libs/user-profile/src/lib/user-icon/user-icon.component.scss
@@ -1,3 +1,5 @@
+@import "variables";
+
 .user-profile {
 	width: 36px;
 	height: 36px;
@@ -16,7 +18,7 @@
 }
 
 mat-icon {
-	color: #999;
+	color: $grey;
 	position: absolute;
 	left: 50%;
 	top: 50%;