diff --git a/public/images/mykopkb.png b/public/images/mykopkb.png
new file mode 100644
index 0000000..bc3ec2a
Binary files /dev/null and b/public/images/mykopkb.png differ
diff --git a/resources/assets/js/components/demo/voter/index.vue b/resources/assets/js/components/demo/voter/index.vue
index 3aabe44..7a9c589 100644
--- a/resources/assets/js/components/demo/voter/index.vue
+++ b/resources/assets/js/components/demo/voter/index.vue
@@ -9,7 +9,7 @@
 						<span class="icon-bar"></span>
 						<span class="icon-bar"></span>
 					</button>
-					<a class="navbar-brand" :href="data.baseURL" ><img src='/images/MyKoPKB-logo.png' border='0' alt="MyKoPKB Logo"  width="150" height="auto"></a>
+					<a class="navbar-brand" :href="data.baseURL" ><img src='/images/mykopkb.png' border='0' width="150" height="auto" alt="MyKoPKB Logo"></a>
 				</div>
 				<div class="collapse navbar-collapse" id="myNavbar">
 
@@ -114,8 +114,47 @@ export default{
 }
 </script>
 
-<style>
+
+
+<style scoped>
+
 body{
 	padding: 70px 5px;
 }
+/* Change navbar background color */
+#nav.navbar {
+  background-color: #021324; /* Dark blue/gray background */
+  border: none;
+}
+
+/* Change navbar link text color */
+#nav .nav > li > a,
+#nav .navbar-brand,
+#nav .navbar-toggle {
+  color: #f39c12; /* Light gray text */
+}
+
+/* Hover effect */
+#nav .nav > li > a:hover,
+#nav .navbar-brand:hover {
+  color: #f39c12; /* Gold/yellow on hover */
+}
+
+/* Dropdown text color */
+#nav .dropdown-menu > li > a {
+  color: #2c3e50; /* Dark text in dropdown */
+}
+
+/* Dropdown hover */
+#nav .dropdown-menu > li > a:hover {
+  background-color: #f39c12;
+  color: white;
+}
+
+.navbar-brand img {
+  background: transparent !important;
+  box-shadow: none;
+}
+
 </style>
+