diff --git a/resources/assets/js/components/demo/voter/login.vue b/resources/assets/js/components/demo/voter/login.vue
index 7290e19..5fec451 100644
--- a/resources/assets/js/components/demo/voter/login.vue
+++ b/resources/assets/js/components/demo/voter/login.vue
@@ -1,134 +1,186 @@
 <template>
-
-	<div class="col-md-5 col-md-offset-3">
-		<div class="panel panel-default">
-			
-			<div class="text-center">
-
-				<div class="panel-heading">
-					<img id="logo" alt="Logo">
-					<h4>Selamat Datang ke Portal MyKoPKB !</h4>
-				</div>
-			</div>
-			<div class="panel-body">
-				<form @submit.prevent="login" id="login_form">
-
-					<div class="form-group">
-						<label for="no_kp">Sila Masukkan No. Kad Pengenalan</label>
-						<input type="text" name="no_kp" placeholder="Masukkan No. Kad Pengenalan Tanpa Dash (-)" class="form-control" required />
-					</div>
-
-					<div class="form-group">
-						<input type="submit" class="btn btn-primary form-control" value="Masuk" />
-					</div>
-
-				</form>
-			</div>
-
+	<div class="d-flex justify-content-center align-items-center min-vh-100 bg-gradient">
+	  <div class="card shadow-lg rounded-lg border-primary" style="width: 100%; max-width: 400px; padding: 30px;">
+		<div class="text-center mb-4">
+		  <img class="logo-img" src="/images/MyKoPKB-logo.png" alt="Logo" style="max-width: 250px; height: auto;">
+		  <h4 class="mt-3">Selamat Datang ke Portal MyKoPKB</h4>
 		</div>
+		<div class="card-body">
+		  <form @submit.prevent="login" id="login_form">
+			<div class="form-group">
+			  <label for="no_kp">Sila Masukkan No. Kad Pengenalan</label>
+			  <input
+				type="text"
+				id="no_kp"
+				name="no_kp"
+				placeholder="Masukkan No. Kad Pengenalan Tanpa Dash (-)"
+				class="form-control"
+				required
+			  />
+			</div>
+			<div class="form-group">
+			  <button
+				type="submit"
+				class="btn btn-primary btn-block"
+				:disabled="loading"
+			  >
+				<span v-if="loading" class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
+				Masuk
+			  </button>
+			</div>
+		  </form>
+		</div>
+	  </div>
 	</div>
-</template>
-
-<script>
-
-
-// JavaScript to set the image source
-document.addEventListener('DOMContentLoaded', function () {
-	// Select the image element by its ID
-var logoImage = document.getElementById('logo');
-// Set the source of the image dynamically
-logoImage.src = window.location.origin + '/images/MyKoPKB-logo.png?' + new Date().getTime(); // Replace this URL with your desired image URL
-
-// Add error handling
-logoImage.onerror = function() {
-    // If the image fails to load, set a default image or handle the error in some other way
-    logoImage.src = 'https://i.ibb.co/txhx2N0/My-Ko-PKB-logo-removebg-preview.png'; // Replace 'path/to/default-image.png' with the URL of your default image
-};
-
-	logoImage.style.width = '300px'; // Set width to 200 pixels
-    logoImage.style.height = 'auto';
-	logoImage.style.objectFit = 'cover';
-	logoImage.style.margin = 'auto'; 
-});
-
-
-export default {
-
-	data: function () {
-		return {
-			loading: false
-		}
+  </template>
+  
+  <script>
+  export default {
+	data() {
+	  return {
+		loading: false
+	  };
 	},
-
-	created: function () {
-		if (this.util.isLogin())
-			//return this.$router.push({name:'Admin Home'})
-			this.util.setTitle('Log Masuk Pengundi====');
-	},
-
 	methods: {
-		login: function () {
-			axios.post(config.API + 'voter/login', $('#login_form').serialize())
-				.then(response => {
-					this.stopLoading();
-					if (this.util.showResult(response, 'success')) {
-						this.$router.push({ name: 'Voter Verify', params: { 'nokp': response.data.nokp, 'notel': response.data.notel } })
-					}
-				})
-				.catch(error => {
-					vm.stopLoading();
-					this.util.showResult(error, 'error');
-				})
-		},
-		startLoading: function () {
-			this.util.notify('Logging in', 'loading');
-			this.loading = true;
-		},
-
-		stopLoading: function () {
-			$.notifyClose();
-			this.loading = false;
-		}
-	},
-
-
-};
-
-</script>
-
-<style>
-body {
-	padding: 50px 5px;
-	/* background-color:; */
-
-}
-
-.logo {
-	max-width: 100%; 
-    height: 100%;
-    object-fit:cover; 
-    margin: 0 auto; 
-
-}
-
+	  login() {
+		this.startLoading();
+		axios
+		  .post(config.API + 'voter/login', $('#login_form').serialize())
+		  .then(response => {
+			this.stopLoading();
+			if (this.util.showResult(response, 'success')) {
+			  this.$router.push({ name: 'Voter Verify', params: { 'nokp': response.data.nokp, 'notel': response.data.notel } });
+			}
+		  })
+		  .catch(error => {
+			this.stopLoading();
+			this.util.showResult(error, 'error');
+		  });
+	  },
+	  startLoading() {
+		this.loading = true;
+	  },
+	  stopLoading() {
+		this.loading = false;
+	  }
+	}
+  };
+  </script>
+  
+  <style scoped>
+  body {
+	background-color: #f8f9fa; /* Light grey background */
+	margin: 0;
+	padding: 0;
+  }
+  
+  .bg-gradient {
+	background: linear-gradient(to bottom, #6c757d, #343a40); /* Gradient background from grey to dark */
+  }
+  
+  .d-flex {
+	display: flex;
+  }
+  
+  .justify-content-center {
+	justify-content: center;
+  }
+  
+  .align-items-center {
+	align-items: center;
+  }
+  
+  .min-vh-100 {
+	min-height: 100vh; /* Ensure full screen height */
+  }
+  
+  .card {
+	background-color: #ffffff; /* White background for card */
+	border: 2px solid #007bff; /* Blue border */
+	border-radius: 1rem;
+  }
+  
+  .card-body {
+	padding: 30px;
+  }
+  
+  .logo-img {
+	max-width: 250px; /* Increased the size of the logo */
+	height: auto;
+  }
+  
+  .btn-primary {
+	background-color: #5cb85c;
+	border: none;
+	font-size: 16px;
+	font-weight: 600;
+	padding: 12px 0;
+	border-radius: 30px;
+  }
+  
+  .btn-primary:hover {
+	background-color: #4cae4c;
+  }
+  
+/* Add this to make the placeholder move and animate */
 .form-control {
-
-	border-radius: 0.80rem;
-	cursor: pointer;
-
+  border-radius: 30px;
+  padding: 10px 20px;
+  font-size: 16px;
+  position: relative;
 }
 
-.btn-primary:hover {
-
-	background-color: #A7D397;
-	color: #f3f6f8;
-	/* Change text color on hover */
-	text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
+.form-control::placeholder {
+  color: #6c757d;
+  transition: all 0.3s ease; /* Smooth transition for moving placeholder */
+  position: absolute;
+  left: 20px;
+  top: 50%;
+  transform: translateY(-50%); /* Vertically center the placeholder */
 }
 
-.element {
-  /* background-image: url('data:image/jpeg;base64,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'); Replace 'your-image.jpg' with your image file */
-  background-size: cover; /* Cover the entire element with the background image */
-  background-position: center; /* Center the background image horizontally and vertically */
+.form-control:focus::placeholder {
+  color: #ff0000; /* Change color on focus */
+  left: 10px; /* Move it left */
+  font-size: 12px; /* Shrink the font size */
+  top: 5px; /* Move it up */
+  transform: translateY(-50%) translateX(-10px); /* Move it to the left */
 }
-</style>
+
+.form-control:focus {
+  border-color: #007bff; /* Highlight the border on focus */
+  box-shadow: 0 0 8px rgba(0, 123, 255, 0.6); /* Add a shadow effect */
+}
+
+ 
+  h4 {
+	font-size: 22px;
+	font-weight: 600;
+	color: #333;
+  }
+  
+  @media (max-width: 576px) {
+	.card {
+	  width: 90%;
+	  padding: 20px;
+	}
+  
+	h4 {
+	  font-size: 20px;
+	}
+  
+	.logo-img {
+	  max-width: 200px;
+	}
+  
+	.form-control {
+	  font-size: 14px;
+	}
+  
+	.btn-primary {
+	  font-size: 14px;
+	  padding: 10px 0;
+	}
+  }
+  </style>
+  
\ No newline at end of file