diff --git a/src/assets/style/navbarStyles.css b/src/assets/style/navbarStyles.css
index 9c64452..a85e592 100644
--- a/src/assets/style/navbarStyles.css
+++ b/src/assets/style/navbarStyles.css
@@ -19,7 +19,7 @@
 }
 #navbar div li{
     list-style: none;   
-    padding: 0 20px;
+    padding: 0 1vw;
     position: relative;
 }
 #navbar div li a{
@@ -30,6 +30,15 @@
     color: black;
     transition: 0.3s ease-in-out;
 }
+
+#navbar div li a span{
+    font-size: 1vw !important;
+}
+
+#navbar div li a svg{
+    font-size: 1vw !important;
+}
+
 #navbar div li a:hover{
     color: #0C489E;
 }
diff --git a/src/layout/MainLayout/Header/index.js b/src/layout/MainLayout/Header/index.js
index 7061f0e..258b808 100644
--- a/src/layout/MainLayout/Header/index.js
+++ b/src/layout/MainLayout/Header/index.js
@@ -97,7 +97,7 @@ function Header(props) {
           <Link className="proof" to='/proof/search'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>Proof</Typography></Link>
         </li>
         <li>
-          <Link className="paymentTop" ><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>Payment</Typography><KeyboardArrowDownIcon sx={{ fontSize: '1.0rem' }} /></Link>
+          <Link className="paymentTop" ><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>Payment</Typography><KeyboardArrowDownIcon sx={{ fontSize: '1vw' }} /></Link>
           <ul className='dropdown'>
             <li>
               <Link className="payment" to='/paymentPage/search'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>Online Payment Record</Typography></Link>
@@ -117,7 +117,7 @@ function Header(props) {
           </ul>
         </li>
         <li>
-          <Link className="client" ><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>Client</Typography><KeyboardArrowDownIcon sx={{ fontSize: '1.0rem' }} /></Link>
+          <Link className="client" ><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>Client</Typography><KeyboardArrowDownIcon sx={{ fontSize: '1vw' }} /></Link>
           <ul className='dropdown'>
             <li>
               <Link className="userSearchview" to='/userSearchview'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2, mt: 1, mb: 1 }}>Users (GLD)</Typography></Link>
@@ -138,7 +138,7 @@ function Header(props) {
           </ul>
         </li>
         <li>
-          <Link className="setting" ><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>Settings</Typography><KeyboardArrowDownIcon sx={{ fontSize: '1.0rem' }} /></Link>
+          <Link className="setting" ><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>Settings</Typography><KeyboardArrowDownIcon sx={{ fontSize: '1vw' }} /></Link>
           <ul className='dropdown'>
             <li>
               <Link className="userProfileGld" to='/user/profile'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2, mt: 1, mb: 1 }}>My Profile</Typography></Link>