diff --git a/src/client.py b/src/client.py
index 5f1fc66..7c6794c 100644
--- a/src/client.py
+++ b/src/client.py
@@ -52,6 +52,13 @@ def createClientBlueprint(wireguardConfigurations: dict[WireguardConfiguration],
             session['role'] = 'client'
             session['totpVerified'] = False
         return ResponseObject(status, msg)
+
+    @client.get(f'{prefix}/api/signout')
+    def ClientAPI_SignOut():
+        session.pop('username')
+        session.pop('role')
+        session.pop('totpVerified')
+        return ResponseObject(True)
     
     @client.get(f'{prefix}/api/signin/totp')
     def ClientAPI_SignIn_TOTP():
diff --git a/src/static/client/src/App.vue b/src/static/client/src/App.vue
index 9f6ae7f..ecea778 100644
--- a/src/static/client/src/App.vue
+++ b/src/static/client/src/App.vue
@@ -6,10 +6,11 @@ import NotificationList from "@/components/notification/notificationList.vue";
 <template>
 	<div data-bs-theme="dark" class="text-body bg-body w-100 h-100">
 		<div class="d-flex vh-100 vw-100 p-4 overflow-y-scroll">
-			<div class="m-auto p-5 bg-body-tertiary rounded-4 shadow-lg border" style="width: 700px">
+			<div class="mx-auto my-sm-auto bg-body-tertiary rounded-4 shadow-lg border position-relative"
+			     style="width: 700px">
 				<Suspense>
 					<RouterView v-slot="{ Component }">
-						<Transition name="app" mode="out-in" type="transition" appear>
+						<Transition name="app" type="transition" mode="out-in">
 							<Component :is="Component"></Component>
 						</Transition>
 					</RouterView>
diff --git a/src/static/client/src/assets/main.css b/src/static/client/src/assets/main.css
index 2ca754b..4222022 100644
--- a/src/static/client/src/assets/main.css
+++ b/src/static/client/src/assets/main.css
@@ -76,11 +76,19 @@
 
 .app-enter-active,
 .app-leave-active {
+
     transition: all 0.3s cubic-bezier(0.82, 0.58, 0.17, 1);
 }
 .app-enter-from,
 .app-leave-to{
     opacity: 0;
     filter: blur(5px);
+}
+
+.app-enter-from{
+    transform: scale(1.03);
+}
+
+.app-leave-to{
     transform: scale(0.97);
 }
\ No newline at end of file
diff --git a/src/static/client/src/components/SignIn/signInForm.vue b/src/static/client/src/components/SignIn/signInForm.vue
index 02033ca..3244424 100644
--- a/src/static/client/src/components/SignIn/signInForm.vue
+++ b/src/static/client/src/components/SignIn/signInForm.vue
@@ -82,15 +82,12 @@ if (route.query.Email){
 			<button
 				:disabled="!formFilled || loading"
 				class="btn btn-primary rounded-3 btn-brand px-3 py-2">
-				<Transition name="slide-right" mode="out-in">
-					<span v-if="!loading" class="d-block">
-						Continue <i class="ms-2 bi bi-arrow-right"></i>
-					</span>
-					<span v-else class="d-block">
-						Loading...
-						<i class="spinner-border spinner-border-sm"></i>
-					</span>
-				</Transition>
+				<span v-if="!loading" class="d-block">
+					Continue <i class="ms-2 bi bi-arrow-right"></i>
+				</span>
+				<span v-else class="d-block">
+					Loading...<i class="ms-2 spinner-border spinner-border-sm"></i>
+				</span>
 			</button>
 		</form>
 		<div>
diff --git a/src/static/client/src/components/SignIn/totpForm.vue b/src/static/client/src/components/SignIn/totpForm.vue
index 6eae1a7..3850336 100644
--- a/src/static/client/src/components/SignIn/totpForm.vue
+++ b/src/static/client/src/components/SignIn/totpForm.vue
@@ -14,7 +14,7 @@ const formData = reactive({
 	TOTP: ""
 })
 
-const loading = ref(false)
+const loading = ref(true)
 const replace = () => {
 	formData.TOTP = formData.TOTP.replace(/\D/i, "")
 }
@@ -25,20 +25,23 @@ const formFilled = computed(() => {
 const store = clientStore()
 const router = useRouter()
 
-await axios.get(requestURl('/api/signin/totp'), {
-	params: {
-		Token: props.totpToken
-	}
-}).then(res => {
-	let data = res.data
-	if (data.status){
-		if (data.message){
-			totpKey.value = data.message
+onMounted(() => {
+	axios.get(requestURl('/api/signin/totp'), {
+		params: {
+			Token: props.totpToken
 		}
-	}else{
-		store.newNotification(data.message, "danger")
-		router.push('/signin')
-	}
+	}).then(res => {
+		let data = res.data
+		loading.value = false
+		if (data.status){
+			if (data.message){
+				totpKey.value = data.message
+			}
+		}else{
+			store.newNotification(data.message, "danger")
+			router.push('/signin')
+		}
+	})
 })
 
 const emits = defineEmits(['clearToken'])
@@ -117,14 +120,13 @@ const verify = async (e) => {
 		<button
 			:disabled="!formFilled || loading"
 			class="btn btn-primary rounded-3 btn-brand px-3 py-2">
-			<Transition name="slide-right" mode="out-in">
-				<span v-if="!loading" class="d-block">
-					Continue <i class="ms-2 bi bi-arrow-right"></i>
-				</span>
-				<span v-else class="d-block">
-					<i class="spinner-border spinner-border-sm"></i>
-				</span>
-			</Transition>
+			<span v-if="!loading" class="d-block">
+				Continue <i class="ms-2 bi bi-arrow-right"></i>
+			</span>
+			<span v-else class="d-block">
+				Loading...
+				<i class="ms-2 spinner-border spinner-border-sm"></i>
+			</span>
 		</button>
 	</div>
 
diff --git a/src/static/client/src/router/router.js b/src/static/client/src/router/router.js
index bf4d6e6..0969875 100644
--- a/src/static/client/src/router/router.js
+++ b/src/static/client/src/router/router.js
@@ -26,22 +26,38 @@ const router = createRouter({
 			path: '/signup',
 			component: SignUp,
 			name: "Sign Up"
+		},
+		{
+			path: '/signout',
+			name: "Sign Out"
 		}
 	]
 })
-
 router.beforeEach(async (to, from, next) => {
-	if (to.meta.auth){
-		await axios.get(requestURl('/api/validateAuthentication')).then(res => {
-			next()
-		}).catch(() => {
-			const store = clientStore()
-			store.newNotification("Sign in session ended, please sign in again", "warning")
+	const store = clientStore()
+
+	if (to.path === '/signout'){
+		await axios.get(requestURl('/api/signout')).then(() => {
 			next('/signin')
-		})
+		}).catch(() => {
+			next('/signin')
+		});
+		store.newNotification("Sign in session ended, please sign in again", "warning")
 	}else{
-		next()
+		if (to.meta.auth){
+			await axios.get(requestURl('/api/validateAuthentication')).then(res => {
+				next()
+			}).catch(() => {
+
+				store.newNotification("Sign in session ended, please sign in again", "warning")
+				next('/signin')
+			})
+		}else{
+			next()
+		}
 	}
+
+
 })
 
 router.afterEach((to, from, next) => {
diff --git a/src/static/client/src/views/index.vue b/src/static/client/src/views/index.vue
index 332d4d6..1d5dce3 100644
--- a/src/static/client/src/views/index.vue
+++ b/src/static/client/src/views/index.vue
@@ -3,11 +3,45 @@
 </script>
 
 <template>
-<h1>
-	Index PAge
-</h1>
+<div class="">
+	<ul class="nav  gap-0 border-bottom">
+		<li class="nav-item">
+			<a class="nav-link text-body border-start-0" aria-current="page" href="#">
+				<strong>WGDashboard Client</strong>
+			</a>
+		</li>
+		<li class="nav-item ms-auto">
+			<a class="nav-link text-body" aria-current="page" href="#">
+				<i class="bi bi-gear-fill me-sm-2"></i>
+				<span>Settings</span>
+			</a>
+		</li>
+		<li class="nav-item">
+			<RouterLink to="/signout" class="nav-link text-danger" aria-current="page">
+				<i class="bi bi-box-arrow-left me-sm-2"></i>
+				<span>Sign Out</span>
+			</RouterLink>
+		</li>
+	</ul>
+	<div class="d-flex flex-column gap-3">
+		<div class="px-3 border-bottom py-4">
+			<h6>Hi donaldzou@live.hk!</h6>
+			<h5 class="mb-0">You have <strong>3</strong> configurations available</h5>
+		</div>
+		<div></div>
+	</div>
+</div>
 </template>
 
 <style scoped>
+.nav-link{
+	padding: 1rem 1rem;
+	border-left: 1px solid var(--bs-border-color)
+}
 
+@media screen and (max-width: 576px) {
+	.nav-link span{
+		display: none;
+	}
+}
 </style>
\ No newline at end of file
diff --git a/src/static/client/src/views/signin.vue b/src/static/client/src/views/signin.vue
index 3cb8242..32fc127 100644
--- a/src/static/client/src/views/signin.vue
+++ b/src/static/client/src/views/signin.vue
@@ -8,7 +8,7 @@ const checkTotp = ref("")
 </script>
 
 <template>
-	<div>
+	<div class="p-3 p-sm-5">
 		<Transition name="app" mode="out-in">
 			<SignInForm
 				@totpToken="token => { checkTotp = token }"
diff --git a/src/static/client/src/views/signup.vue b/src/static/client/src/views/signup.vue
index 208ca9e..4ea9db9 100644
--- a/src/static/client/src/views/signup.vue
+++ b/src/static/client/src/views/signup.vue
@@ -68,7 +68,7 @@ onMounted(() => {
 </script>
 
 <template>
-	<div>
+	<div class="p-3 p-sm-5">
 		<h1>Sign Up</h1>
 		<p>to use WGDashboard Client</p>
 		<form class="mt-4 d-flex flex-column gap-3" @submit="e => signUp(e)">
@@ -122,15 +122,13 @@ onMounted(() => {
 			<button
 				:disabled="!formFilled || !validatePassword || loading"
 				class=" btn btn-primary rounded-3 btn-brand px-3 py-2">
-				<Transition name="slide-right" mode="out-in">
-					<span v-if="!loading" class="d-block">
+				<span v-if="!loading" class="d-block">
 						Continue <i class="ms-2 bi bi-arrow-right"></i>
 					</span>
-					<span v-else class="d-block">
+				<span v-else class="d-block">
 						Loading...
 						<i class="spinner-border spinner-border-sm"></i>
 					</span>
-				</Transition>
 			</button>
 		</form>
 		<div>