diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index dbb6f1fe6a8..605d8786afa 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -18,7 +18,18 @@ const state = useState();
 const user = state.getUser();
 const appName = 'Lilium';
 const pinnedModulesRef = ref();
+const env = process.env.NODE_ENV;
 
+function getEnvironment() {
+    switch (env) {
+        case 'development':
+            return 'dev';
+        case 'production':
+            return;
+        default:
+            return env;
+    }
+}
 onMounted(() => stateStore.setMounted());
 const refresh = () => window.location.reload();
 </script>
@@ -50,6 +61,9 @@ const refresh = () => window.location.reload();
                     </QTooltip>
                 </QBtn>
             </RouterLink>
+            <QChip class="q-ml-xs q-mr-xs envChip">
+                {{ getEnvironment() }}
+            </QChip>
             <VnBreadcrumbs v-if="$q.screen.gt.sm" />
             <QSpinner
                 color="primary"
@@ -118,4 +132,7 @@ const refresh = () => window.location.reload();
 .q-header {
     background-color: var(--vn-section-color);
 }
+.envChip {
+    background-color: $primary;
+}
 </style>