diff --git a/task_management_app/src/components/Header.tsx b/task_management_app/src/components/Header.tsx
index 48880d4..9acf2fd 100644
--- a/task_management_app/src/components/Header.tsx
+++ b/task_management_app/src/components/Header.tsx
@@ -7,7 +7,7 @@ import Link from 'next/link';
 const Header = async () => {
     const session = await getServerSession(authOptions);
   return (
-    <header className="p-4 border border-b-[#9BBEC8] px-10">
+    <header className="p-4 border border-b-[#9BBEC8] px-4 md:px-10">
         <div className='flex justify-between items-center'>
             <Link href="/" className="logo text-[#427D9D] font-semibold">Task Management</Link>
             <div>
@@ -20,10 +20,10 @@ const Header = async () => {
                     </div>
                 )}
                 {!session && (
-                    <>
+                    <div className='text-sm md:text-base'>
                         Not logged in
                         <LoginButton/>
-                    </>
+                    </div>
                 )}
             </div>
         </div>