diff --git a/client/weblog/src/components/Header.tsx b/client/weblog/src/components/Header.tsx
index 30ae49ca..cff9c3b9 100644
--- a/client/weblog/src/components/Header.tsx
+++ b/client/weblog/src/components/Header.tsx
@@ -24,18 +24,18 @@ const Header: React.FC = () => {
             usercontext?.loginstatus.success == false ? (
               <li className='hover:text-indigo-600'>
                 <Link to='/register'>
-                  <button className='bg-indigo-600 rounded-sm p-1 text-sm text-white hover:shadow-md'>Login/SignUp</button>
+                  <button className='bg-indigo-600 rounded-sm px-3 py-2 text-sm text-white hover:shadow-md'>Login/SignUp</button>
                 </Link>
               </li>
             ) : (
               <li className='hover:text-indigo-600'>
-                <button onClick={() => { usercontext?.dispatch({ type: "LOGOUT" }) } } className='bg-indigo-600 rounded-sm p-1 text-sm text-white hover:shadow-md'>Logout</button>
+                <button onClick={() => { usercontext?.dispatch({ type: "LOGOUT" }) } } className='bg-indigo-600 rounded-lg px-3 py-2 text-sm text-white hover:shadow-md'>Logout</button>
               </li>
             )
           ) : (
             admincontext?.status.success === true ? (
               <li className='hover:text-indigo-600'>
-                <button onClick={() => { admincontext?.dispatch({ type: "ADMINLOGOUT" }) }} className='bg-indigo-600 rounded-sm p-1 text-sm text-white hover:shadow-md'>Logout</button>
+                <button onClick={() => { admincontext?.dispatch({ type: "ADMINLOGOUT" }) }} className='bg-indigo-600 rounded-sm px-3 py-2 text-sm text-white hover:shadow-md'>Logout</button>
               </li>
             ) : (
               null