diff --git a/src/modules/DashboardClients.py b/src/modules/DashboardClients.py
index fafbf72..3ac8873 100644
--- a/src/modules/DashboardClients.py
+++ b/src/modules/DashboardClients.py
@@ -95,7 +95,7 @@ class DashboardClients:
             if checkPwd:
                 session['Email'] = Email
                 session['ClientID'] = existingClient.get("ClientID")
-            return True, self.DashboardClientsTOTP.GenerateToken(existingClient.get("ClientID"))
+                return True, self.DashboardClientsTOTP.GenerateToken(existingClient.get("ClientID"))
         return False, "Email or Password is incorrect"
     
     def SignIn_GetTotp(self, Token: str, UserProvidedTotp: str = None) -> tuple[bool, str] or tuple[bool, None, str]:
diff --git a/src/modules/PeerJobs.py b/src/modules/PeerJobs.py
index c8584f2..2daad20 100644
--- a/src/modules/PeerJobs.py
+++ b/src/modules/PeerJobs.py
@@ -138,6 +138,7 @@ class PeerJobs:
 
 
     def runJob(self):
+        print("[WGDashboard] Running scheduled jobs")
         needToDelete = []
         self.__getJobs()
         for job in self.Jobs:
@@ -156,24 +157,28 @@ class PeerJobs:
                     if runAction:
                         s = False
                         if job.Action == "restrict":
-                            s = c.restrictPeers([fp.id]).get_json()
+                            s, msg = c.restrictPeers([fp.id])
                         elif job.Action == "delete":
-                            s = c.deletePeers([fp.id]).get_json()
+                            s, msg = c.deletePeers([fp.id])
 
-                        if s['status'] is True:
-                            self.JobLogger.log(job.JobID, s["status"],
+                        if s is True:
+                            self.JobLogger.log(job.JobID, s,
                                           f"Peer {fp.id} from {c.Name} is successfully {job.Action}ed."
                                           )
+                            print(f"[WGDashboard] Peer {fp.id} from {c.Name} is successfully {job.Action}ed.")
                             needToDelete.append(job)
                         else:
-                            self.JobLogger.log(job.JobID, s["status"],
+                            print(f"[WGDashboard] Peer {fp.id} from {c.Name} is failed {job.Action}ed.")
+                            self.JobLogger.log(job.JobID, s,
                                           f"Peer {fp.id} from {c.Name} failed {job.Action}ed."
                                           )
                 else:
+                    print(f"[WGDashboard] Somehow can't find this peer {job.Peer} from {c.Name} failed {job.Action}ed.")
                     self.JobLogger.log(job.JobID, False,
                                   f"Somehow can't find this peer {job.Peer} from {c.Name} failed {job.Action}ed."
                                   )
             else:
+                print(f"[WGDashboard] Somehow can't find this peer {job.Peer} from {c.Name} failed {job.Action}ed.")
                 self.JobLogger.log(job.JobID, False,
                               f"Somehow can't find this peer {job.Peer} from {job.Configuration} failed {job.Action}ed."
                               )
diff --git a/src/static/client/src/App.vue b/src/static/client/src/App.vue
index 2d32448..edb5fef 100644
--- a/src/static/client/src/App.vue
+++ b/src/static/client/src/App.vue
@@ -4,9 +4,9 @@ import NotificationList from "@/components/Notification/notificationList.vue";
 </script>
 
 <template>
-	<div data-bs-theme="dark" class="text-body bg-body w-100 h-100">
+	<div data-bs-theme="dark" class="text-body bg-body vw-100 vh-100 bg-body-tertiary">
 		<div class="d-flex vh-100 vw-100 p-sm-4 overflow-y-scroll">
-			<div class="mx-auto my-sm-auto bg-body-tertiary rounded-4 shadow-sm  position-relative"
+			<div class="mx-auto my-sm-auto position-relative"
 			     id="listContainer"
 			     style="width: 700px">
 				<Suspense>
diff --git a/src/static/client/src/assets/main.css b/src/static/client/src/assets/main.css
index 01e0007..3b464f8 100644
--- a/src/static/client/src/assets/main.css
+++ b/src/static/client/src/assets/main.css
@@ -76,13 +76,12 @@
 
 .app-enter-active,
 .app-leave-active {
-
-    transition: all 0.3s cubic-bezier(0.82, 0.58, 0.17, 1);
+    transition: all 0.4s cubic-bezier(0.82, 0.58, 0.17, 1);
 }
 .app-enter-from,
 .app-leave-to{
     opacity: 0;
-    filter: blur(5px);
+    filter: blur(8px);
 }
 
 .app-enter-from{
diff --git a/src/static/client/src/components/Configuration/configuration.vue b/src/static/client/src/components/Configuration/configuration.vue
index 6c98968..e1a22d8 100644
--- a/src/static/client/src/components/Configuration/configuration.vue
+++ b/src/static/client/src/components/Configuration/configuration.vue
@@ -10,48 +10,39 @@ const showQRCode = ref(false)
 </script>
 
 <template>
-	<div class="card rounded-3 border-0">
-		<div class="card-body p-3">
-			<div class="row gy-3">
-				<div class="col-sm-6 d-flex flex-column gap-3">
-					<h6 class="fw-bold mb-0">
-						{{ props.config.name }}
-					</h6>
-					<div class="mt-auto">
-						<button class="btn btn-outline-body rounded-3 flex-grow-1 fw-bold w-100" @click="showQRCode = true">
-							<i class="bi bi-link-45deg me-2"></i><small>Connect</small>
-						</button>
-					</div>
-				</div>
-				<div class="col-sm-6 d-flex flex-column gap-3">
-					<div class="d-flex gap-2">
-						<small class="text-muted">
-							<i class="bi bi-bar-chart-fill me-1"></i> Protocol
-						</small>
-						<span class="badge rounded-3 shadow ms-auto"
-						      :class="[props.config.protocol === 'wg' ? 'wireguardBg' : 'amneziawgBg' ]"
-						      v-if="props.config.protocol === 'wg'">
+	<div class="card rounded-3 border shadow">
+		<div class="card-header border-0 align-items-center d-flex p-3 flex-column flex-sm-row gap-2">
+			<small class="fw-bold">
+				{{ props.config.name }}
+			</small>
+			<span class="badge rounded-3 shadow ms-sm-auto"
+			      :class="[props.config.protocol === 'wg' ? 'wireguardBg' : 'amneziawgBg' ]"
+			      v-if="props.config.protocol === 'wg'">
 							{{ props.config.protocol === 'wg' ? 'WireGuard': 'AmneziaWG' }}
 						</span>
-					</div>
-					<div class="d-flex gap-2">
-						<small class="text-muted">
-							<i class="bi bi-bar-chart-fill me-1"></i> Data Usage
-						</small>
-						<small class="fw-bold flex-grow-1 text-end">
-							3.42 / 4.00 GB
-						</small>
-					</div>
-					<div class="d-flex gap-2">
-						<small class="text-muted">
-							<i class="bi bi-calendar me-1"></i> Valid Until
-						</small>
-						<small class="fw-bold flex-grow-1 text-end">
-							2025-08-31 00:00:00
-						</small>
-					</div>
+		</div>
+		<div class="card-body p-3">
+			<div class="row gy-2 mb-2">
+				<div class="col-sm text-center">
+					<small class="text-muted mb-2">
+						<i class="bi bi-bar-chart-fill me-1"></i> Data Usage
+					</small>
+					<h6 class="fw-bold ">
+						3.42 / 4.00 GB
+					</h6>
+				</div>
+				<div class="col-sm text-center">
+					<small class="text-muted mb-2">
+						<i class="bi bi-calendar me-1"></i> Valid Until
+					</small>
+					<h6 class="fw-bold ">
+						3.42 / 4.00 GB
+					</h6>
 				</div>
 			</div>
+			<button class="btn btn-outline-body rounded-3 flex-grow-1 fw-bold w-100" @click="showQRCode = true">
+				<i class="bi bi-link-45deg me-2"></i><small>Connect</small>
+			</button>
 		</div>
 		<Transition name="app">
 			<ConfigurationQRCode
diff --git a/src/static/client/src/components/SignIn/signInForm.vue b/src/static/client/src/components/SignIn/signInForm.vue
index 968abb7..32cddb0 100644
--- a/src/static/client/src/components/SignIn/signInForm.vue
+++ b/src/static/client/src/components/SignIn/signInForm.vue
@@ -43,8 +43,10 @@ if (route.query.Email){
 
 <template>
 	<div>
-		<h1>Sign In</h1>
-		<p>to your WGDashboard Client account</p>
+		<div class="text-center">
+			<h1 class="display-4">Welcome back</h1>
+			<p class="text-muted">Sign in to access your <strong>WGDashboard Client</strong> account</p>
+		</div>
 		<form class="mt-4 d-flex flex-column gap-3" @submit="e => signIn(e)">
 			<div class="form-floating">
 				<input type="text"
@@ -82,7 +84,7 @@ if (route.query.Email){
 				:disabled="!formFilled || loading"
 				class="btn btn-primary rounded-3 btn-body px-3 py-2 fw-bold">
 				<span v-if="!loading" class="d-block">
-					Continue <i class="ms-2 bi bi-arrow-right"></i>
+					Sign In
 				</span>
 				<span v-else class="d-block">
 					Loading...<i class="ms-2 spinner-border spinner-border-sm"></i>
@@ -96,7 +98,7 @@ if (route.query.Email){
 						Don't have an account yet?
 					</span>
 				<RouterLink  to="/signup"
-				             class="text-body text-decoration-none ms-auto fw-bold btn btn-sm btn-body rounded-3">
+				             class="text-body text-decoration-none ms-auto fw-bold btn btn-sm btn-outline-body rounded-3">
 					Sign Up
 				</RouterLink>
 			</div>
diff --git a/src/static/client/src/components/SignIn/totpForm.vue b/src/static/client/src/components/SignIn/totpForm.vue
index 5824c4b..486b726 100644
--- a/src/static/client/src/components/SignIn/totpForm.vue
+++ b/src/static/client/src/components/SignIn/totpForm.vue
@@ -76,7 +76,7 @@ watch(formFilled, () => {
 <template>
 <form class="d-flex flex-column gap-3" @submit="e => verify(e)">
 	<div>
-		<a role="button" @click="emits('clearToken')" class="btn btn-body btn-sm rounded-3">
+		<a role="button" @click="emits('clearToken')" class="btn btn-outline-body btn-sm rounded-3">
 			<i class="me-2 bi bi-chevron-left"></i> Back
 		</a>
 	</div>
diff --git a/src/static/client/src/stores/clientStore.js b/src/static/client/src/stores/clientStore.js
index 0704b90..e92390e 100644
--- a/src/static/client/src/stores/clientStore.js
+++ b/src/static/client/src/stores/clientStore.js
@@ -4,6 +4,7 @@ import {v4} from "uuid"
 import dayjs from "dayjs";
 import {axiosGet} from "@/utilities/request.js";
 
+
 export const clientStore = defineStore('clientStore',  {
 	state: () => ({
 		notifications: [],
@@ -35,6 +36,21 @@ export const clientStore = defineStore('clientStore',  {
 			const data = await axiosGet("/api/configurations")
 			if (data){
 				this.configurations = data.data
+				this.configurations.forEach(c => {
+					console.log(
+						c.jobs.sort((x, y) => {
+							if (dayjs(x.CreationDate).isBefore(y.CreationDate)){
+								return 1
+							}else if (dayjs(x.CreationDate).isAfter(y.CreationDate)){
+								return -1
+							}else{
+								return 0
+							}
+						})
+
+					)
+					console.log(c.jobs.find(x => x.Field === 'date'))
+				})
 			}else{
 				this.newNotification("Failed to fetch configurations", "danger")
 			}
diff --git a/src/static/client/src/views/signup.vue b/src/static/client/src/views/signup.vue
index 4ef9e64..9d766b2 100644
--- a/src/static/client/src/views/signup.vue
+++ b/src/static/client/src/views/signup.vue
@@ -69,8 +69,10 @@ onMounted(() => {
 
 <template>
 	<div class="p-3 p-sm-5">
-		<h1>Sign Up</h1>
-		<p>to use WGDashboard Client</p>
+		<div class="text-center">
+			<h1 class="display-4">Hi, nice to meet you</h1>
+			<p class="text-muted">Sign up to use <strong>WGDashboard Client</strong></p>
+		</div>
 		<form class="mt-4 d-flex flex-column gap-3" @submit="e => signUp(e)">
 			<div class="form-floating">
 				<input type="text"
@@ -86,42 +88,48 @@ onMounted(() => {
 					Email
 				</label>
 			</div>
-			<div class="form-floating">
-				<input type="password"
-				       required
-				       :disabled="loading"
-				       v-model="formData.Password"
-				       name="password"
-				       autocomplete="new-password"
-				       autofocus
-				       class="form-control rounded-3" id="password" placeholder="password">
-				<label for="password" class="d-flex">
-					<i class="bi bi-key me-2"></i>
-					Password
-				</label>
-			</div>
-			<div class="form-floating">
-				<input type="password"
-				       required
-				       :disabled="loading"
-				       v-model="formData.ConfirmPassword"
-				       name="confirm_password"
-				       autocomplete="new-password"
-				       autofocus
-				       class="form-control rounded-3" id="confirm_password" placeholder="confirm_password">
-				<label for="confirm_password" class="d-flex">
-					<i class="bi bi-key me-2"></i>
-					Confirm Password
-				</label>
-				<div id="validationServer03Feedback" class="invalid-feedback">
-					Passwords does not match
+			<div class="row gx-3">
+				<div class="col-6">
+					<div class="form-floating">
+						<input type="password"
+						       required
+						       :disabled="loading"
+						       v-model="formData.Password"
+						       name="password"
+						       autocomplete="new-password"
+						       autofocus
+						       class="form-control rounded-3" id="password" placeholder="password">
+						<label for="password" class="d-flex">
+							<i class="bi bi-key me-2"></i>
+							Password
+						</label>
+					</div>
+				</div>
+				<div class="col-6">
+					<div class="form-floating">
+						<input type="password"
+						       required
+						       :disabled="loading"
+						       v-model="formData.ConfirmPassword"
+						       name="confirm_password"
+						       autocomplete="new-password"
+						       autofocus
+						       class="form-control rounded-3" id="confirm_password" placeholder="confirm_password">
+						<label for="confirm_password" class="d-flex">
+							<i class="bi bi-key me-2"></i>
+							Confirm Password
+						</label>
+						<div id="validationServer03Feedback" class="invalid-feedback">
+							Passwords does not match
+						</div>
+					</div>
 				</div>
 			</div>
 
 
 			<button
 				:disabled="!formFilled || !validatePassword || loading"
-				class=" btn btn-primary rounded-3 btn-brand px-3 py-2">
+				class=" btn btn-primary rounded-3 btn-body px-3 py-2 fw-bold">
 				<span v-if="!loading" class="d-block">
 						Continue <i class="ms-2 bi bi-arrow-right"></i>
 					</span>
@@ -137,7 +145,7 @@ onMounted(() => {
 					<span class="text-muted">
 						Already have an account?
 					</span>
-				<RouterLink  to="/signin" class="text-body text-decoration-none ms-auto fw-bold btn btn-sm btn-body rounded-3">
+				<RouterLink  to="/signin" class="text-body text-decoration-none ms-auto fw-bold btn btn-sm btn-outline-body rounded-3">
 					Sign In
 				</RouterLink>
 			</div>