diff --git a/src/static/app/src/App.vue b/src/static/app/src/App.vue
index d1848d82..6e46310a 100644
--- a/src/static/app/src/App.vue
+++ b/src/static/app/src/App.vue
@@ -19,29 +19,31 @@ const route = useRoute()
 </script>
 
 <template>
-	<div style="z-index: 9999; height: 5px" class="position-absolute loadingBar top-0 start-0"></div>
-	<nav class="navbar bg-dark sticky-top" data-bs-theme="dark" v-if="!route.meta.hideTopNav">
-		<div class="container-fluid d-flex text-body align-items-center">
-			<RouterLink to="/" class="navbar-brand mb-0 h1">
-				<img src="/img/Logo-2-Rounded-512x512.png" alt="WGDashboard Logo" style="width: 32px">
-			</RouterLink>
-			<a role="button" class="navbarBtn text-body"
-			   @click="store.ShowNavBar = !store.ShowNavBar"
-			   style="line-height: 0; font-size: 2rem">
-				<Transition name="fade2" mode="out-in">
-					<i class="bi bi-list" v-if="!store.ShowNavBar"></i>
-					<i class="bi bi-x-lg" v-else></i>
+	<div class="h-100">
+		<div style="z-index: 9999; height: 5px" class="position-absolute loadingBar top-0 start-0"></div>
+		<nav class="navbar bg-dark sticky-top" data-bs-theme="dark" v-if="!route.meta.hideTopNav">
+			<div class="container-fluid d-flex text-body align-items-center">
+				<RouterLink to="/" class="navbar-brand mb-0 h1">
+					<img src="/img/Logo-2-Rounded-512x512.png" alt="WGDashboard Logo" style="width: 32px">
+				</RouterLink>
+				<a role="button" class="navbarBtn text-body"
+				   @click="store.ShowNavBar = !store.ShowNavBar"
+				   style="line-height: 0; font-size: 2rem">
+					<Transition name="fade2" mode="out-in">
+						<i class="bi bi-list" v-if="!store.ShowNavBar"></i>
+						<i class="bi bi-x-lg" v-else></i>
+					</Transition>
+				</a>
+			</div>
+		</nav>
+		<Suspense>
+			<RouterView v-slot="{ Component }">
+				<Transition name="app" mode="out-in" type="transition" appear>
+					<Component :is="Component"></Component>
 				</Transition>
-			</a>
-		</div>
-	</nav>
-	<Suspense>
-		<RouterView v-slot="{ Component }">
-			<Transition name="app" mode="out-in" type="transition" appear>
-				<Component :is="Component"></Component>
-			</Transition>
-		</RouterView>
-	</Suspense>
+			</RouterView>
+		</Suspense>
+	</div>
 </template>
 
 <style scoped>
diff --git a/src/static/app/src/components/configurationComponents/peerList.vue b/src/static/app/src/components/configurationComponents/peerList.vue
index 008c8d00..31d832d0 100644
--- a/src/static/app/src/components/configurationComponents/peerList.vue
+++ b/src/static/app/src/components/configurationComponents/peerList.vue
@@ -215,7 +215,6 @@ watch(() => route.query.id, (newValue) => {
 				<h1 class="mb-0 display-4"><samp>{{configurationInfo.Name}}</samp></h1>
 			</div>
 		</div>
-
 		<div class="ms-sm-auto d-flex gap-2 flex-column">
 			<div class="card rounded-3 bg-transparent ">
 				<div class="card-body py-2 d-flex align-items-center">
@@ -238,7 +237,6 @@ watch(() => route.query.id, (newValue) => {
 						       @change="toggleConfiguration()"
 						       v-model="configurationInfo.Status">
 					</div>
-
 				</div>
 			</div>
 			<div class="d-flex gap-2">
diff --git a/src/static/app/src/components/configurationList.vue b/src/static/app/src/components/configurationList.vue
index f5b3b654..bb40cfa7 100644
--- a/src/static/app/src/components/configurationList.vue
+++ b/src/static/app/src/components/configurationList.vue
@@ -28,27 +28,7 @@ export default {
 			searchKey: ""
 		}
 	},
-	async mounted() {
-		// if (!window.localStorage.getItem('ConfigurationListSort')){
-		// 	window.localStorage.setItem('ConfigurationListSort', JSON.stringify(this.currentSort))
-		// }else{
-		// 	this.currentSort = JSON.parse(window.localStorage.getItem('ConfigurationListSort'))
-		// }
-		//
-		// if (!window.localStorage.getItem('ConfigurationListDisplay')){
-		// 	window.localStorage.setItem('ConfigurationListDisplay', this.currentDisplay)
-		// }else{
-		// 	this.currentDisplay = window.localStorage.getItem('ConfigurationListDisplay')
-		// }
-		
-		
-		await this.wireguardConfigurationsStore.getConfigurations();
-		this.configurationLoaded = true;
-		
-		this.wireguardConfigurationsStore.ConfigurationListInterval = setInterval(() => {
-			this.wireguardConfigurationsStore.getConfigurations()
-		}, 10000)
-	},
+
 	beforeUnmount() {
 		clearInterval(this.wireguardConfigurationsStore.ConfigurationListInterval)
 	},
@@ -102,7 +82,7 @@ export default {
 				
 			</div>
 			<Transition name="fade">
-				<div class="text-body filter mb-3 d-flex gap-2 flex-column flex-md-row" v-if="this.configurationLoaded">
+				<div class="text-body filter mb-3 d-flex gap-2 flex-column flex-md-row" v-if="this.wireguardConfigurationsStore.ConfigurationLoaded">
 					<div class="d-flex align-items-center gap-3 align-items-center mb-3 mb-md-0">
 						<small class="text-muted">
 							<LocaleText t="Sort By"></LocaleText>
@@ -152,14 +132,14 @@ export default {
 				<TransitionGroup name="fade">
 					<p class="text-muted col-12"
 					   key="noConfiguration"
-					   v-if="this.configurationLoaded && this.wireguardConfigurationsStore.Configurations.length === 0">
+					   v-if="this.wireguardConfigurationsStore.ConfigurationLoaded && this.wireguardConfigurationsStore.Configurations.length === 0">
 						<LocaleText t="You don't have any WireGuard configurations yet. Please check the configuration folder or change it in Settings. By default the folder is /etc/wireguard."></LocaleText>
 					</p>
 					<ConfigurationCard
 						:display="this.wireguardConfigurationsStore.CurrentDisplay"
 						v-for="(c, index) in configurations"
 						:delay="index*0.03 + 's'"
-						v-else-if="this.configurationLoaded"
+						v-else-if="this.wireguardConfigurationsStore.ConfigurationLoaded"
 						:key="c.Name" :c="c"></ConfigurationCard>
 				</TransitionGroup>
 			</div>
diff --git a/src/static/app/src/components/navbar.vue b/src/static/app/src/components/navbar.vue
index 71e19500..2adeb0a5 100644
--- a/src/static/app/src/components/navbar.vue
+++ b/src/static/app/src/components/navbar.vue
@@ -33,8 +33,9 @@ export default {
 			return undefined
 		}
 	},
-	mounted() {
-		fetchGet("/api/getDashboardUpdate", {}, (res) => {
+	async mounted() {
+		await this.wireguardConfigurationsStore.getConfigurations();
+		await fetchGet("/api/getDashboardUpdate", {}, (res) => {
 			if (res.status){
 				if (res.data){
 					this.updateAvailable = true
@@ -46,12 +47,15 @@ export default {
 				console.log(`Failed to get update: ${res.message}`)
 			}
 		})
+		this.wireguardConfigurationsStore.ConfigurationListInterval = setInterval(() => {
+			this.wireguardConfigurationsStore.getConfigurations()
+		}, 10000)
 	}
 }
 </script>
 
 <template>
-	<div class="col-md-3 col-lg-2 d-md-block p-2 navbar-container"
+	<div class="col-md-3 col-lg-2 d-md-block p-2 navbar-container bg-transparent"
 	     :class="{active: this.dashboardConfigurationStore.ShowNavBar}"
 	     :data-bs-theme="dashboardConfigurationStore.Configuration.Server.dashboard_theme"
 	>
diff --git a/src/static/app/src/components/protocolBadge.vue b/src/static/app/src/components/protocolBadge.vue
index 53b2c5d2..2bb37316 100644
--- a/src/static/app/src/components/protocolBadge.vue
+++ b/src/static/app/src/components/protocolBadge.vue
@@ -1,21 +1,44 @@
 <script setup>
 import LocaleText from "@/components/text/localeText.vue";
+import {onMounted, ref} from "vue";
 
 const props = defineProps({
 	protocol: String,
 	mini: false
 })
+
+const blur = ref(undefined)
+
+onMounted(() => {
+	setTimeout(() => {
+		blur.value = !props.mini
+	}, 500)
+})
 </script>
 
 <template>
-<span class="badge wireguardBg rounded-3 shadow" v-if="protocol === 'wg'">
-	WireGuard <LocaleText t="Configuration" v-if="!mini"></LocaleText>
-</span>
-<span class="badge amneziawgBg rounded-3 shadow" v-else-if="protocol === 'awg'">
-	AmneziaWG <LocaleText t="Configuration" v-if="!mini"></LocaleText>
-</span>
+<div class="position-relative">
+	<span class="badge wireguardBg rounded-3 shadow z-1"
+		  :class="{blur: blur === true}"
+		  v-if="protocol === 'wg'">
+		WireGuard <LocaleText t="Configuration" v-if="!mini"></LocaleText>
+	</span>
+	<span class="badge amneziawgBg rounded-3 shadow"
+		  :class="{blur: blur === true}"
+		  v-else-if="protocol === 'awg'">
+		AmneziaWG <LocaleText t="Configuration" v-if="!mini"></LocaleText>
+	</span>
+
+</div>
 </template>
 
 <style scoped>
-
+.wireguardBg.blur{
+	box-shadow: rgba(255, 56, 56, 1) 3rem 1rem 8rem 10px !important;
+	transition: box-shadow 1s ease-in-out;
+}
+.amneziawgBg.blur{
+	box-shadow: rgb(227, 142, 65) 3rem 1rem 8rem 10px !important;
+	transition: box-shadow 1s ease-in-out;
+}
 </style>
\ No newline at end of file
diff --git a/src/static/app/src/stores/WireguardConfigurationsStore.js b/src/static/app/src/stores/WireguardConfigurationsStore.js
index 53f4df3c..b028e8f1 100644
--- a/src/static/app/src/stores/WireguardConfigurationsStore.js
+++ b/src/static/app/src/stores/WireguardConfigurationsStore.js
@@ -6,6 +6,7 @@ import {GetLocale} from "@/utilities/locale.js";
 export const WireguardConfigurationsStore = defineStore('WireguardConfigurationsStore', {
 	state: () => ({
 		Configurations: [],
+        ConfigurationLoaded: false,
 		searchString: "",
 		ConfigurationListInterval: undefined,
         SortOptions: {
@@ -92,8 +93,10 @@ export const WireguardConfigurationsStore = defineStore('WireguardConfigurations
 	actions: {
 		async getConfigurations(){
 			await fetchGet("/api/getWireguardConfigurations", {}, (res) => {
-				if (res.status)  this.Configurations = res.data
-				// this.Configurations = []
+				if (res.status)  {
+                    this.Configurations = res.data
+                }
+                this.ConfigurationLoaded = true
 			});
 		},
 
diff --git a/src/static/app/src/views/configuration.vue b/src/static/app/src/views/configuration.vue
index c5c82ff1..6d97ce03 100644
--- a/src/static/app/src/views/configuration.vue
+++ b/src/static/app/src/views/configuration.vue
@@ -5,11 +5,11 @@ export default {
 </script>
 
 <template>
-	<div class="mt-md-5 mt-3 text-body">
+	<div class="mt-md-5 mt-3 text-body position-relative">
 		<RouterView v-slot="{ Component, route }">
 			<Transition name="fade2" mode="out-in">
 				<Suspense>
-					<Component :is="Component" :key="route.path"></Component>
+					<Component :is="Component" :key="route.path" class="z-1"></Component>
 				</Suspense>
 			</Transition>
 		</RouterView>
diff --git a/src/static/app/src/views/index.vue b/src/static/app/src/views/index.vue
index 8bff1b74..d321b85a 100644
--- a/src/static/app/src/views/index.vue
+++ b/src/static/app/src/views/index.vue
@@ -22,7 +22,7 @@ export default {
 	<div class="container-fluid flex-grow-1 main" :data-bs-theme="this.dashboardConfigurationStore.Configuration.Server.dashboard_theme">
 		<div class="row h-100">
 			<Navbar></Navbar>
-			<main class="col-md-9 col-lg-10 overflow-y-scroll mb-0 pt-2">
+			<main class="col-md-9 col-lg-10 overflow-y-scroll mb-0 pt-2 position-relative">
 				<Suspense>
 					<RouterView v-slot="{Component}">
 						<Transition name="fade2" mode="out-in" appear>