diff --git a/app/components/HeaderTab.js b/app/components/HeaderTab.js
index 7d8c54a..41d4d86 100644
--- a/app/components/HeaderTab.js
+++ b/app/components/HeaderTab.js
@@ -1,7 +1,7 @@
 export default function HeaderTab({ children, className = "", ...props }) {
   return (
     <div
-      className={`relative bg-[var(--color-surface-default-brand-primary)] rounded-t-[16px] sm:rounded-t-[24px] md:rounded-t-[24px] lg:rounded-t-[24px] pl-[var(--spacing-measures-spacing-012)] h-[40px] sm:h-[52px] md:h-[52px] lg:h-[52px] sm:pr-[var(--spacing-scale-006)] md:pl-[var(--spacing-scale-024)] lg:pl-[var(--spacing-scale-024)] md:pr-[var(--spacing-scale-012)] lg:pr-[var(--spacing-scale-048)] md:gap-[var(--spacing-scale-032)] ${className}`}
+      className={`relative bg-[var(--color-surface-default-brand-primary)] rounded-t-[32px] sm:rounded-t-[32px] md:rounded-t-[32px] lg:rounded-t-[32px] xl:rounded-t-[32px] pl-[var(--spacing-measures-spacing-012)] h-[40px] sm:h-[52px] md:h-[52px] lg:h-[52px] xl:h-[64px] sm:pr-[var(--spacing-scale-006)] md:pl-[var(--spacing-scale-024)] lg:pl-[var(--spacing-scale-024)] xl:pl-[var(--spacing-scale-032)] md:pr-[var(--spacing-scale-012)] lg:pr-[var(--spacing-scale-048)] xl:pr-[var(--spacing-scale-120)] md:gap-[var(--spacing-scale-032)] ${className}`}
       {...props}
     >
       {children}
@@ -13,7 +13,12 @@ export default function HeaderTab({ children, className = "", ...props }) {
       <img
         src="/assets/Union_sm_md_lg.svg"
         alt="Union"
-        className="absolute -bottom-[3px] lg:-bottom-[2.5px] -right-[55px] w-[61px] h-[24px] sm:w-[61px] sm:h-[31.5px] hidden sm:block"
+        className="absolute -bottom-[3px] lg:-bottom-[2.8px] -right-[55px] w-[61px] h-[24px] sm:w-[61px] sm:h-[31.5px] hidden sm:block xl:hidden"
+      />
+      <img
+        src="/assets/Union_xlg.svg"
+        alt="Union"
+        className="absolute -bottom-[5.3px] -right-[94px] w-[105px] h-[53px] hidden xl:block"
       />
     </div>
   );
diff --git a/app/components/HomeHeader.js b/app/components/HomeHeader.js
index 9e0d882..99a620e 100644
--- a/app/components/HomeHeader.js
+++ b/app/components/HomeHeader.js
@@ -40,7 +40,7 @@ export default function HomeHeader() {
       size: "homeHeaderLg",
       showText: true,
     },
-    { breakpoint: "hidden xl:block", size: "headerXl", showText: true },
+    { breakpoint: "hidden xl:block", size: "homeHeaderXl", showText: true },
   ];
 
   const renderNavigationItems = (size) => {
@@ -54,11 +54,14 @@ export default function HomeHeader() {
             size === "default" ||
             size === "home" ||
             size === "homeMd" ||
-            size === "large")
+            size === "large" ||
+            size === "homeXlarge")
             ? size === "home" || size === "homeMd"
               ? "homeMd"
               : size === "large"
               ? "large"
+              : size === "homeXlarge"
+              ? "homeXlarge"
               : "xsmallUseCases"
             : size
         }
@@ -67,7 +70,8 @@ export default function HomeHeader() {
           size === "default" ||
           size === "home" ||
           size === "homeMd" ||
-          size === "large"
+          size === "large" ||
+          size === "homeXlarge"
             ? "home"
             : "default"
         }
@@ -125,7 +129,7 @@ export default function HomeHeader() {
 
   return (
     <header className="w-full bg-transparent overflow-hidden">
-      <div className="relative flex items-center justify-between mx-auto max-w-[1920px] h-[50px] sm:h-[62px] md:h-[68px] lg:h-[68px] xl:h-[88px] px-[var(--spacing-scale-008)] pr-[var(--spacing-scale-016)] pt-[var(--spacing-scale-010)] sm:px-[var(--spacing-scale-010)] sm:pr-[var(--spacing-scale-020)] sm:pt-[var(--spacing-scale-010)] md:px-[var(--spacing-scale-016)] md:pr-[var(--spacing-scale-032)] md:pt-[var(--spacing-scale-016)] lg:pl-[var(--spacing-scale-024)] lg:pt-[var(--spacing-scale-016)] lg:pr-[var(--spacing-scale-056)]">
+      <div className="relative flex items-center justify-between mx-auto max-w-[1920px] h-[50px] sm:h-[62px] md:h-[68px] lg:h-[68px] xl:h-[88px] px-[var(--spacing-scale-008)] pr-[var(--spacing-scale-016)] pt-[var(--spacing-scale-010)] sm:px-[var(--spacing-scale-010)] sm:pr-[var(--spacing-scale-020)] sm:pt-[var(--spacing-scale-010)] md:px-[var(--spacing-scale-016)] md:pr-[var(--spacing-scale-032)] md:pt-[var(--spacing-scale-016)] lg:pl-[var(--spacing-scale-024)] lg:pt-[var(--spacing-scale-016)] lg:pr-[var(--spacing-scale-056)] xl:pl-[var(--spacing-scale-048)] xl:pt-[var(--spacing-scale-024)] xl:pr-[var(--spacing-scale-056)]">
         <HeaderTab className="flex items-center justify-between lg:gap-[var(--spacing-scale-120)] self-end">
           <div>
             {logoConfig.map((config, index) => (
@@ -158,8 +162,10 @@ export default function HomeHeader() {
               <MenuBar size="large">{renderNavigationItems("large")}</MenuBar>
             </div>
 
-            <div className="hidden xl:block absolute left-1/2 transform -translate-x-1/2 ml-[var(--spacing-scale-032)]">
-              <MenuBar size="large">{renderNavigationItems("xlarge")}</MenuBar>
+            <div className="hidden xl:block xl:ml-[var(--spacing-scale-032)]">
+              <MenuBar size="large">
+                {renderNavigationItems("homeXlarge")}
+              </MenuBar>
             </div>
           </div>
         </HeaderTab>
@@ -179,6 +185,7 @@ export default function HomeHeader() {
           {renderCreateRuleButton("large", "large", "large")}
         </div>
         <div className="hidden xl:flex items-center">
+          {renderLoginButton("homeXlarge", "mr-[var(--spacing-scale-004)]")}
           {renderCreateRuleButton("xlarge", "xlarge", "xlarge")}
         </div>
       </div>
diff --git a/app/components/Logo.js b/app/components/Logo.js
index 2f828dc..1355344 100644
--- a/app/components/Logo.js
+++ b/app/components/Logo.js
@@ -36,6 +36,13 @@ export default function Logo({ size = "default", showText = true }) {
       lineHeight: "leading-[27.05px]",
       iconSize: "w-[27.05px] h-[27.05px]",
     },
+    homeHeaderXl: {
+      containerHeight: "h-[36px]",
+      gap: "gap-[8.64px]",
+      textSize: "text-[29.01px]",
+      lineHeight: "leading-[35.7px]",
+      iconSize: "w-[35.7px] h-[35.7px]",
+    },
     header: {
       containerHeight: "h-[20.85px]",
       gap: "gap-[4.21px]",
@@ -89,6 +96,8 @@ export default function Logo({ size = "default", showText = true }) {
       ? sizes.homeHeaderMd
       : size === "homeHeaderLg"
       ? sizes.homeHeaderLg
+      : size === "homeHeaderXl"
+      ? sizes.homeHeaderXl
       : size === "header"
       ? sizes.header
       : size === "headerMd"
@@ -116,7 +125,8 @@ export default function Logo({ size = "default", showText = true }) {
             size === "homeHeaderXsmall" ||
             size === "homeHeaderSm" ||
             size === "homeHeaderMd" ||
-            size === "homeHeaderLg"
+            size === "homeHeaderLg" ||
+            size === "homeHeaderXl"
               ? "text-[var(--color-content-inverse-primary)]"
               : "text-[var(--color-content-default-primary)]"
           } ${config.textSize} ${config.lineHeight} font-normal tracking-[0px]`}
@@ -135,7 +145,8 @@ export default function Logo({ size = "default", showText = true }) {
           size === "homeHeaderXsmall" ||
           size === "homeHeaderSm" ||
           size === "homeHeaderMd" ||
-          size === "homeHeaderLg"
+          size === "homeHeaderLg" ||
+          size === "homeHeaderXl"
             ? "filter brightness-0"
             : ""
         }`}
diff --git a/app/components/MenuBarItem.js b/app/components/MenuBarItem.js
index 77a788c..fc49c88 100644
--- a/app/components/MenuBarItem.js
+++ b/app/components/MenuBarItem.js
@@ -41,6 +41,8 @@ export default function MenuBarItem({
       "active:outline-[1.75px] active:outline-[var(--color-content-default-primary)]",
     large:
       "active:outline-[1.75px] active:outline-[var(--color-content-default-primary)]",
+    homeXlarge:
+      "active:outline-[2px] active:outline-[var(--color-content-default-primary)]",
     xlarge:
       "active:outline-2 active:outline-[var(--color-content-default-primary)]",
   };
@@ -58,6 +60,8 @@ export default function MenuBarItem({
       "px-[var(--spacing-scale-002)] py-[var(--spacing-scale-008)] gap-[var(--spacing-scale-004)]",
     large:
       "px-[var(--spacing-scale-012)] py-[var(--spacing-scale-012)] gap-[var(--spacing-scale-004)]",
+    homeXlarge:
+      "px-[var(--spacing-scale-016)] py-[var(--spacing-scale-016)] gap-[var(--spacing-scale-004)] h-[44px]",
     xlarge:
       "px-[var(--spacing-scale-016)] py-[var(--spacing-scale-008)] gap-[var(--spacing-scale-004)]",
   };
@@ -79,6 +83,7 @@ export default function MenuBarItem({
     homeMd: mediumTextStyle,
     homeUseCases: mediumTextStyle,
     large: largeTextStyle,
+    homeXlarge: xlargeTextStyle,
     xlarge: xlargeTextStyle,
   };
 
diff --git a/public/assets/Union_xlg.svg b/public/assets/Union_xlg.svg
new file mode 100644
index 0000000..3d996ec
--- /dev/null
+++ b/public/assets/Union_xlg.svg
@@ -0,0 +1,3 @@
+<svg width="105" height="42" viewBox="0 0 105 42" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.0492 10.0151C12.0492 4.49227 7.57203 0 2.04918 0H0V53H105V42.0635H44.0492C26.3761 42.0635 12.0492 27.6882 12.0492 10.0151Z" fill="#FEFCC9"/>
+</svg>