diff --git a/src/assets/styles/_common-variables.scss b/src/assets/styles/_common-variables.scss
index 87d8d96..1cda6a9 100644
--- a/src/assets/styles/_common-variables.scss
+++ b/src/assets/styles/_common-variables.scss
@@ -50,6 +50,7 @@ body {
     --iqser-app-name-font-family: 'some placeholder value that should be overridden when configuring a theme';
     --iqser-app-name-font-size: 18px;
     --iqser-app-name-color: black;
+    --iqser-top-bar-height: 61px;
 }
 
 $required-variables: 'iqser-font-family' 'iqser-primary';
diff --git a/src/assets/styles/common-base-screen.scss b/src/assets/styles/common-base-screen.scss
index b011fb0..7486d77 100644
--- a/src/assets/styles/common-base-screen.scss
+++ b/src/assets/styles/common-base-screen.scss
@@ -1,7 +1,7 @@
 @use 'common-mixins';
 
 .top-bar {
-    height: 61px;
+    height: var(--iqser-top-bar-height);
     width: 100vw;
     display: flex;
     justify-content: space-between;
@@ -63,7 +63,7 @@
     top: 0;
     z-index: 100;
     right: 0;
-    height: 61px;
+    height: var(--iqser-top-bar-height);
     word-break: break-all;
     display: flex;
     justify-content: center;