diff --git a/src/static/app/index.html b/src/static/app/index.html
index df1ea3a..b8b92f5 100644
--- a/src/static/app/index.html
+++ b/src/static/app/index.html
@@ -7,7 +7,7 @@
     <title>WGDashboard</title>
   </head>
   <body>
-    <div id="app" class="w-100 vh-100"></div>
+    <div id="app"></div>
     <script type="module" src="./src/main.js"></script>
   </body>
 </html>
diff --git a/src/static/app/src/App.vue b/src/static/app/src/App.vue
index 548f575..f0e7d34 100644
--- a/src/static/app/src/App.vue
+++ b/src/static/app/src/App.vue
@@ -62,7 +62,7 @@ const getActiveCrossServer = computed(() => {
 }
 
 @media screen and (min-width: 768px) {
-	.navbarBtn{
+	.navbar{
 		display: none;
 	}
 }
diff --git a/src/static/app/src/components/messageCentreComponent/message.vue b/src/static/app/src/components/messageCentreComponent/message.vue
index aaf0053..5f864e4 100644
--- a/src/static/app/src/components/messageCentreComponent/message.vue
+++ b/src/static/app/src/components/messageCentreComponent/message.vue
@@ -16,13 +16,12 @@ export default {
 </script>
 
 <template>
-	<div class="card shadow rounded-3 position-relative mb-2" 
+	<div class="card shadow rounded-3 position-relative mb-2 message ms-auto" 
 	     :class="{
 			'text-bg-danger': this.message.type === 'danger', 
 			'text-bg-success': this.message.type === 'success',
 			'text-bg-warning': this.message.type === 'warning'}"
-	     :id="this.message.id"
-	     style="width: 400px">
+	     :id="this.message.id">
 		<div class="card-body">
 			<small class="fw-bold d-block" style="text-transform: uppercase">
 				<LocaleText t="FROM "></LocaleText>
@@ -33,5 +32,13 @@ export default {
 </template>
 
 <style scoped>
-
+	.message{
+		width: 100%;
+	}
+	
+	@media screen and (min-width: 576px) {
+		.message{
+			width: 400px;
+		}
+	}
 </style>
\ No newline at end of file
diff --git a/src/static/app/src/components/navbar.vue b/src/static/app/src/components/navbar.vue
index 4480599..15e566a 100644
--- a/src/static/app/src/components/navbar.vue
+++ b/src/static/app/src/components/navbar.vue
@@ -42,9 +42,10 @@ export default {
 	<div class="col-md-3 col-lg-2 d-md-block p-3 navbar-container"
 	     :class="{active: this.dashboardConfigurationStore.ShowNavBar}"
 	     :data-bs-theme="dashboardConfigurationStore.Configuration.Server.dashboard_theme"
-	     style="height: calc(-50px + 100vh);">
+	>
 		<nav id="sidebarMenu" class=" bg-body-tertiary sidebar border h-100 rounded-3 shadow overflow-y-scroll" >
-			<div class="sidebar-sticky pt-3">
+			<div class="sidebar-sticky ">
+				<h5 class="text-white text-center m-0 py-3 mb-3 btn-brand fw-light">WGDashboard</h5>
 				<ul class="nav flex-column px-2">
 					<li class="nav-item">
 						<RouterLink class="nav-link rounded-3"
@@ -125,14 +126,35 @@ export default {
 		animation-fill-mode: both;
 		display: none;
 		animation-timing-function: cubic-bezier(0.82, 0.58, 0.17, 0.9);
+
+		
 	}
 	.navbar-container.active{
 		animation-direction: normal;
 		display: block !important;
 		animation-name: zoomInFade
 	}
+
+	
+	
 }
 
+.navbar-container{
+	height: 100vh;
+}
+
+
+@supports (height: 100dvh) {
+	@media screen and (max-width: 768px){
+		.navbar-container{
+			height: calc(100dvh - 50px);
+		}	
+	}
+	
+
+}
+
+
 @keyframes zoomInFade {
 	0%{
 		opacity: 0;
diff --git a/src/static/app/src/components/settingsComponent/dashboardLanguage.vue b/src/static/app/src/components/settingsComponent/dashboardLanguage.vue
index f721919..e5a1944 100644
--- a/src/static/app/src/components/settingsComponent/dashboardLanguage.vue
+++ b/src/static/app/src/components/settingsComponent/dashboardLanguage.vue
@@ -70,8 +70,7 @@ export default {
 									{{ x.lang_name }}
 								</small>
 							</p>
-							<i class="bi bi-check text-primary fs-5" 
-							   
+							<i class="bi bi-check text-primary fs-5"
 							   v-if="currentLanguage?.lang_id === x.lang_id"></i>
 						</a>
 					</li>
diff --git a/src/static/app/src/views/index.vue b/src/static/app/src/views/index.vue
index ed12805..c6b8ad0 100644
--- a/src/static/app/src/views/index.vue
+++ b/src/static/app/src/views/index.vue
@@ -24,7 +24,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 ml-sm-auto col-lg-10 px-md-4 overflow-y-scroll mb-0" style="height: calc(100vh - 50px)">
+			<main class="col-md-9 ml-sm-auto col-lg-10 px-md-4 overflow-y-scroll mb-0">
 				<Suspense>
 					<RouterView v-slot="{Component}">
 						<Transition name="fade2" mode="out-in">
@@ -32,8 +32,8 @@ export default {
 						</Transition>
 					</RouterView>
 				</Suspense>
-				<div class="messageCentre text-body position-fixed">
-					<TransitionGroup name="message" tag="div" class="position-relative">
+				<div class="messageCentre text-body position-fixed d-flex">
+					<TransitionGroup name="message" tag="div" class="position-relative flex-grow-1 d-flex align-items-end">
 						<Message v-for="m in getMessages.slice().reverse()"
 						         :message="m" :key="m.id"></Message>
 					</TransitionGroup>
@@ -47,5 +47,19 @@ export default {
 	.messageCentre{
 		top: calc(50px + 1rem);
 		right: 1rem;
+		width: calc(100% - 2rem);
 	}
+	main{
+		height: 100vh;
+	}
+	
+	@supports (height: 100dvh) {
+		@media screen and (max-width: 768px) {
+			main{
+				height: calc(100dvh - 50px);
+			}
+		}
+	}
+	
+	
 </style>
\ No newline at end of file
diff --git a/src/static/css/dashboard.css b/src/static/css/dashboard.css
index f034aba..64b32b6 100644
--- a/src/static/css/dashboard.css
+++ b/src/static/css/dashboard.css
@@ -30,6 +30,17 @@
     }
 }
 
+#app{
+    width: 100%;
+    height: 100vh;
+}
+
+@supports (height: 100dvh) {
+    #app{
+        height: 100dvh;
+    }
+}
+
 /*
  * Sidebar
  */
