diff --git a/app/Header.tsx b/app/Header.tsx
index ee94b889..91db6843 100644
--- a/app/Header.tsx
+++ b/app/Header.tsx
@@ -28,7 +28,7 @@ export default function Header() {
   return (
     <header className="w-full
     {/*shadow-md*/}
-     py-4 px-8">
+     py-4 px-8 xs:px-4">
       <nav className="flex justify-between items-center">
         <Link 
           href="/" 
@@ -37,24 +37,24 @@ export default function Header() {
         >
           {isSmallScreen ? <FaHome className="w-5 h-5" /> : 'BayesBond'}
         </Link>
-        <div className="flex items-center space-x-4">
+        <div className="flex items-center space-x-2">
 
           <ThemeToggle/>
 
-          <div className="flex items-center space-x-4">
+          <div className="flex items-center space-x-2">
             <Link
               href="/learn-more"
-              className="px-3 py-2 text-sm font-medium bg-gray-200 dark:bg-gray-600 text-gray-800 dark:text-white rounded-lg hover:bg-gray-300 dark:hover:bg-gray-500 transition"
+              className="px-2 py-2 text-sm xs:text-xs font-medium bg-gray-200 dark:bg-gray-600 text-gray-800 dark:text-white rounded-lg hover:bg-gray-300 dark:hover:bg-gray-500 transition"
             >
               Learn More
             </Link>
           </div>
           {session ? (
             <>
-              <div className="flex items-center space-x-4">
+              <div className="flex items-center space-x-2">
                 <Link
                   href="/profile"
-                  className="text-blue-600 dark:text-blue-100 hover:text-blue-800 dark:hover:text-blue-300 px-3 py-2 text-sm font-medium"
+                  className="text-blue-600 dark:text-blue-100 hover:text-blue-800 dark:hover:text-blue-300 px-2 py-2 text-sm font-medium xs:text-xs"
                 >
                   My Profile
                 </Link>
@@ -66,7 +66,7 @@ export default function Header() {
                 {/*</Link>*/}
                 <button
                   onClick={() => signOut({callbackUrl: "/"})}
-                  className="bg-red-500 text-white px-3 py-2 rounded-lg hover:bg-red-600 transition"
+                  className="bg-red-500 text-white px-2 py-2 rounded-lg hover:bg-red-600 transition text-sm xs:text-xs font-medium"
                 >
                   Sign Out
                 </button>
@@ -74,11 +74,11 @@ export default function Header() {
             </>
           ) : (
             <>
-              <Link href="/login" className="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600 transition">
+              <Link href="/login" className="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600 transition xs:text-xs">
                 Sign In
               </Link>
               <Link href="/register"
-                    className="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600 transition">
+                    className="bg-blue-500 text-white px-3 py-2 rounded-lg hover:bg-blue-600 transition xs:text-xs">
                 Sign Up
               </Link>
             </>
diff --git a/tailwind.config.ts b/tailwind.config.ts
index d57c9bd4..6c61ce6d 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -12,6 +12,9 @@ export default {
         background: "var(--background)",
         foreground: "var(--foreground)",
       },
+      screens: {
+        'xs': {'max': '450px'},
+      },
     },
   },
   darkMode: 'class', // required for next-themes