diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index 605d8786a..6365fcd07 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { onMounted, ref } from 'vue';
+import { onMounted, ref, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useState } from 'src/composables/useState';
 import { useStateStore } from 'stores/useStateStore';
@@ -20,16 +20,16 @@ const appName = 'Lilium';
 const pinnedModulesRef = ref();
 const env = process.env.NODE_ENV;
 
-function getEnvironment() {
+const getEnvironment = computed(() => {
     switch (env) {
         case 'development':
-            return 'dev';
+            return 'DEV';
         case 'production':
             return;
         default:
-            return env;
+            return env.toUpperCase();
     }
-}
+});
 onMounted(() => stateStore.setMounted());
 const refresh = () => window.location.reload();
 </script>
@@ -62,7 +62,7 @@ const refresh = () => window.location.reload();
                 </QBtn>
             </RouterLink>
             <QChip class="q-ml-xs q-mr-xs envChip">
-                {{ getEnvironment() }}
+                {{ getEnvironment }}
             </QChip>
             <VnBreadcrumbs v-if="$q.screen.gt.sm" />
             <QSpinner