diff --git a/packages/fern-docs/ui/src/header/Announcement.scss b/packages/fern-docs/ui/src/header/Announcement.scss
new file mode 100644
index 0000000000..27e16b3b26
--- /dev/null
+++ b/packages/fern-docs/ui/src/header/Announcement.scss
@@ -0,0 +1,5 @@
+@layer components {
+  .fern-announcement {
+    @apply overflow-hidden;
+  }
+}
diff --git a/packages/fern-docs/ui/src/header/Announcement.tsx b/packages/fern-docs/ui/src/header/Announcement.tsx
index 8824c466d0..a6c08f0270 100644
--- a/packages/fern-docs/ui/src/header/Announcement.tsx
+++ b/packages/fern-docs/ui/src/header/Announcement.tsx
@@ -39,7 +39,7 @@ const AnnouncementInternal = forwardRef<
     <motion.div
       ref={ref}
       {...props}
-      className={clsx("overflow-hidden", className)}
+      className={clsx("fern-announcement", className)}
     >
       <motion.div
         className="bg-accent text-accent-contrast flex min-h-8 items-center"
diff --git a/packages/fern-docs/ui/src/header/index.scss b/packages/fern-docs/ui/src/header/index.scss
index b2fdbbac85..78ee61c4ba 100644
--- a/packages/fern-docs/ui/src/header/index.scss
+++ b/packages/fern-docs/ui/src/header/index.scss
@@ -1,4 +1,5 @@
 @import "./NProgress";
+@import "./Announcement";
 @import "./Header";
 @import "./HeaderLogoSection";
 @import "./HeaderLogoImage";