diff --git a/assets/css/navBar.css b/assets/css/navBar.css
index 16ba39e8c512f8d69732cf5df6cd66f9e0c806e9..4f8e38828cad8c0a565d10f0c74b2ccf664995ef 100644
--- a/assets/css/navBar.css
+++ b/assets/css/navBar.css
@@ -59,7 +59,11 @@ a.bottomNavBarItem {
     border-right: 1px solid black;
 }
 
-span {
-    color: rgba(255, 251, 0, 0.74);
+span.pro {
+    color: rgb(255, 238, 0);
     padding-left: 10px;
 }
+
+span.book {
+    color: white;
+}
diff --git a/view/navBar.php b/view/navBar.php
index aadc2ac18b5a0314680991b63e88d809cb3644bb..d32667a16ba279cfaf3c0888f59ac23eeb44a719 100644
--- a/view/navBar.php
+++ b/view/navBar.php
@@ -10,7 +10,7 @@ js("navBar.js");
 ?>
 <ul class="topNavBar">
     <li class="topNavBarItem" id="productName">
-        <span>Pro</span>-Book
+        <span class="pro">Pro</span><span class="book">-Book</span>
     </li>
     <a href="<?php path("logout")?>"><li class="topNavBarItem" id="logout"><img class="logoutIcon" src="<?php path("assets/image/logout.png"); ?>"></li></a>
     <li class="topNavBarItem" id="username">