diff --git a/libs/base-ui/components/Layout/Nav/Banner.tsx b/libs/base-ui/components/Layout/Nav/Banner.tsx
index 623a790d47a..1cbde66e650 100644
--- a/libs/base-ui/components/Layout/Nav/Banner.tsx
+++ b/libs/base-ui/components/Layout/Nav/Banner.tsx
@@ -10,6 +10,7 @@ import logEvent, {
   ComponentType,
 } from '../../../utils/logEvent';
 
+// Type definition enforcing a specific naming convention for the banner storage key.
 type BannerName = `${string}Banner`;
 
 type BannerProps = {
@@ -18,14 +19,20 @@ type BannerProps = {
   text: string;
 };
 
+// Banner component displays a dismissible, persistent notification link.
 export default function Banner({ href, text, bannerName }: BannerProps) {
+  // Use Local Storage to persist the visibility state of the banner.
   const [isBannerVisible, setIsBannerVisible] = useLocalStorage(
     `${bannerName}Visible`,
     true,
   );
+  
   const pathname = usePathname();
+  
+  // Check if the user is currently on the destination page (ignoring query parameters).
   const isOnPage = pathname === href.split('?')[0];
 
+  // Memoized callback for logging the click event on the banner link.
   const linkClick = useCallback(() => {
     logEvent(
       bannerName,
@@ -36,19 +43,25 @@ export default function Banner({ href, text, bannerName }: BannerProps) {
       },
       AnalyticsEventImportance.high,
     );
-  }, [logEvent, bannerName]);
+  }, [bannerName]); // logEvent is assumed to be a static utility and excluded from dependencies.
 
+  // Memoized callback to hide the banner permanently (via Local Storage update).
   const hideBanner = useCallback(() => {
     setIsBannerVisible(false);
   }, [setIsBannerVisible]);
 
+  // Hide the banner if:
+  // 1. The user has previously dismissed it.
+  // 2. The user is currently on the page the banner links to.
   if (!isBannerVisible || isOnPage) {
     return null;
   }
 
   return (
+    // Outer container with z-index.
     <div className="bg-yellow-20 z-10 flex w-full flex-row justify-center text-black">
-      <div className="bg-yellow-20 z-10 flex w-full max-w-[1440px] flex-row items-center justify-between self-center p-2 pl-8 pr-6">
+      {/* Inner container for max width and padding */}
+      <div className="bg-yellow-20 flex w-full max-w-[1440px] flex-row items-center justify-between self-center p-2 pl-8 pr-6">
         <Link href={href} onClick={linkClick}>
           <span className="text-xs underline md:text-base">{text}</span>
         </Link>
@@ -56,10 +69,11 @@ export default function Banner({ href, text, bannerName }: BannerProps) {
           <button
             className="cursor-pointer p-2 text-sm"
             onClick={hideBanner}
-            onKeyDown={hideBanner}
+            // Removed redundant onKeyDown as native button handles Enter/Space keys for click event.
             type="button"
             aria-label="Close Banner"
           >
+            {/* The Icon component is correctly used for the close button visual. */}
             <Icon name="close" color="black" width="16" height="16" />
           </button>
         </div>