diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
index 5b96a22e..95f18be2 100644
--- a/src/components/Header/index.tsx
+++ b/src/components/Header/index.tsx
@@ -36,8 +36,9 @@ export default async function Header() {
 
     return (
         <>
-            <HeaderClient data={headerData} className="hidden md:block" />
-            <HeaderMobileClient data={headerData} className="md:hidden" />
+            {/* prettier-ignore */}
+            <HeaderClient data={headerData} className="hidden lg-xl:block" />
+            <HeaderMobileClient data={headerData} className="lg-xl:hidden" />
         </>
     );
 }
diff --git a/tailwind.config.ts b/tailwind.config.ts
index a106c19f..d195f12c 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -24,6 +24,7 @@ const config: Config = {
         // so a custom breakpoint was created to overwrite it
         // and now a CSS pattern can be applied with this breakpoint.
         'md-lg': '1169px',
+        'lg-xl': '1300px',
       },
     },
   },