diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index 6365fcd07..c71a0a887 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -25,9 +25,9 @@ const getEnvironment = computed(() => {
         case 'development':
             return 'DEV';
         case 'production':
-            return;
+            return null;
         default:
-            return env.toUpperCase();
+            return env;
     }
 });
 onMounted(() => stateStore.setMounted());
@@ -60,10 +60,10 @@ const refresh = () => window.location.reload();
                         {{ t('globals.backToDashboard') }}
                     </QTooltip>
                 </QBtn>
+                <QBadge v-if="getEnvironment" color="primary" align="top">
+                    {{ getEnvironment }}
+                </QBadge>
             </RouterLink>
-            <QChip class="q-ml-xs q-mr-xs envChip">
-                {{ getEnvironment }}
-            </QChip>
             <VnBreadcrumbs v-if="$q.screen.gt.sm" />
             <QSpinner
                 color="primary"
@@ -132,7 +132,4 @@ const refresh = () => window.location.reload();
 .q-header {
     background-color: var(--vn-section-color);
 }
-.envChip {
-    background-color: $primary;
-}
 </style>