diff --git a/css/backoffice/components/_breadcrumbs.scss b/css/backoffice/components/_breadcrumbs.scss
index 19ab8740d..6b0b5fef6 100644
--- a/css/backoffice/components/_breadcrumbs.scss
+++ b/css/backoffice/components/_breadcrumbs.scss
@@ -28,8 +28,7 @@ $ibo-breadcrumbs--item-separator--margin-x: 12px !default;
 $ibo-breadcrumbs--item-separator--text-color: $ibo-color-grey-500 !default;
 
 .ibo-breadcrumbs{
-	display: flex;
-	align-items: center;
+	@extend %ibo-vertically-centered-content;
 
 	* {
 		display: flex;
diff --git a/css/backoffice/layout/_top-bar.scss b/css/backoffice/layout/_top-bar.scss
index 06603cbea..6a1b6c6ae 100644
--- a/css/backoffice/layout/_top-bar.scss
+++ b/css/backoffice/layout/_top-bar.scss
@@ -17,26 +17,31 @@
  */
 
 /* SCSS variables (can be overloaded) */
-$ibo-top-bar-height: 54px !default;
-$ibo-top-bar-padding-left: 16px !default; /* Should be align with the page content padding-left */
-$ibo-top-bar-padding-right: 16px !default;
-$ibo-top-bar-padding-y: 0px !default;
-$ibo-top-bar-background-color: $ibo-color-white-100 !default;
+$ibo-top-bar--height: 54px !default;
+$ibo-top-bar--padding-left: 16px !default; /* Should be align with the page content padding-left */
+$ibo-top-bar--padding-right: 16px !default;
+$ibo-top-bar--padding-y: 0px !default;
+$ibo-top-bar--background-color: $ibo-color-white-100 !default;
+$ibo-top-bar--elements-spacing: 32px !default;
+
+$ibo-top-bar--quick-actions--margin-right: $ibo-top-bar--elements-spacing !default;
 
 /* CSS variables (can be changed directly from the browser) */
 :root{
-	--ibo-top-bar-height: #{$ibo-top-bar-height};
-	--ibo-top-bar-padding-left: #{$ibo-top-bar-padding-left};
-	--ibo-top-bar-padding-right: #{$ibo-top-bar-padding-right};
-	--ibo-top-bar-padding-y: #{$ibo-top-bar-padding-y};
-	--ibo-top-bar-background-color: #{$ibo-top-bar-background-color};
+	--ibo-top-bar--height: #{$ibo-top-bar--height};
+	--ibo-top-bar--padding-left: #{$ibo-top-bar--padding-left};
+	--ibo-top-bar--padding-right: #{$ibo-top-bar--padding-right};
+	--ibo-top-bar--padding-y: #{$ibo-top-bar--padding-y};
+	--ibo-top-bar--background-color: #{$ibo-top-bar--background-color};
+	--ibo-top-bar--elements-spacing: #{$ibo-top-bar--elements-spacing};
+
+	--ibo-top-bar--quick-actions--margin-right: #{$ibo-top-bar--quick-actions--margin-right};
 }
 .ibo-top-bar{
-	display: flex;
-	align-items: center;
-	height: var(--ibo-top-bar-height);
-	padding: var(--ibo-top-bar-padding-y) var(--ibo-top-bar-padding-right) var(--ibo-top-bar-padding-y) var(--ibo-top-bar-padding-left);
-	background-color: var(--ibo-top-bar-background-color);
+	@extend %ibo-vertically-centered-content;
+	height: var(--ibo-top-bar--height);
+	padding: var(--ibo-top-bar--padding-y) var(--ibo-top-bar--padding-right) var(--ibo-top-bar--padding-y) var(--ibo-top-bar--padding-left);
+	background-color: var(--ibo-top-bar--background-color);
 	@extend %ibo-elevation-100;
 
 	.ibo-breadcrumbs{
diff --git a/css/backoffice/pages/_base.scss b/css/backoffice/pages/_base.scss
index 6c2587e26..c1ad53abc 100644
--- a/css/backoffice/pages/_base.scss
+++ b/css/backoffice/pages/_base.scss
@@ -32,11 +32,11 @@ $ibo-page-content--padding-bottom: 24px !default;
 
 /* Layout */
 html{
-	height: 100%;
+	height: 100vh;
 }
 body{
 	display: flex;
-	height: 100%;
+	height: 100vh;
 	color: var(--ibo-body-text-color);
 	background-color: var(--ibo-body-background-color);
 	@extend %ibo-font-ral-nor-100;
@@ -57,14 +57,16 @@ body{
 		padding-left: $ibo-page-container--elements-padding-x;
 		padding-right: $ibo-page-container--elements-padding-x;
 	}
+	#ibo-top-bar{
+		z-index: 20;
+		position: sticky;
+		top: 0;
+		left: 0;
+		right: 0;
+	}
+	#ibo-page-content{
+		z-index: 10;
+		padding-top: $ibo-page-content--padding-top;
+		padding-bottom: $ibo-page-content--padding-bottom;
+	}
 }
-#ibo-top-bar{
-	position: sticky;
-	top: 0;
-	left: 0;
-	right: 0;
-}
-#ibo-page-content{
-	padding-top: $ibo-page-content--padding-top;
-	padding-bottom: $ibo-page-content--padding-bottom;
-}
\ No newline at end of file
diff --git a/css/backoffice/utils/helpers/_misc.scss b/css/backoffice/utils/helpers/_misc.scss
index d2b1fee67..7a6e43e90 100644
--- a/css/backoffice/utils/helpers/_misc.scss
+++ b/css/backoffice/utils/helpers/_misc.scss
@@ -16,11 +16,16 @@
  * You should have received a copy of the GNU Affero General Public License
  */
 
-%ibo-centered-content{
+%ibo-fully-centered-content{
 	display: flex;
 	justify-content: center;
 	align-items: center;
 }
+/* Note: This might not be named correctly. The intention is to make an element occupy the full height of its parent and to be centered in it */
+%ibo-vertically-centered-content{
+	display: flex;
+	align-items: stretch;
+}
 %ibo-text-truncated-with-ellipsis{
 	white-space: nowrap;
 	overflow-x: hidden;
@@ -31,7 +36,7 @@
 	border-radius: var(--ibo-border-radius-full);
 	border: 2px solid var(--ibo-color-grey-300);
 	overflow: hidden;
-	@extend %ibo-centered-content;
+	@extend %ibo-fully-centered-content;
 
 	> *{
 		position: absolute;
diff --git a/css/backoffice/utils/helpers/_typography.scss b/css/backoffice/utils/helpers/_typography.scss
index 723f89c52..9bf8010a0 100644
--- a/css/backoffice/utils/helpers/_typography.scss
+++ b/css/backoffice/utils/helpers/_typography.scss
@@ -56,7 +56,7 @@
 }
 %ibo-font-ral-nor-300 {
 	font-size: $ibo-font-size-300;
-	font-family:" Raleway";
+	font-family:"Monorale";
 	font-weight: 400;
 }
 %ibo-font-ral-nor-350 {
@@ -111,7 +111,7 @@
 }
 %ibo-font-ral-med-300 {
 	font-size: $ibo-font-size-300;
-	font-family:" Raleway";
+	font-family:"Monorale";
 	font-weight: 500;
 }
 %ibo-font-ral-med-350 {