diff --git a/.gitignore b/.gitignore
index 17b8c74608ee..d673fa71784d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -24,3 +24,4 @@ coverage
 deno.lock
 cypress/videos
 cypress/screenshots
+next-env.d.ts
diff --git a/components/campaigns/AnnouncementHero.tsx b/components/campaigns/AnnouncementHero.tsx
index 19cea6690953..205546d4a63b 100644
--- a/components/campaigns/AnnouncementHero.tsx
+++ b/components/campaigns/AnnouncementHero.tsx
@@ -20,8 +20,26 @@ interface IAnnouncementHeroProps {
  */
 export default function AnnouncementHero({ className = '', small = false }: IAnnouncementHeroProps) {
   const [activeIndex, setActiveIndex] = useState(0);
+  const [isBannerVisible, setIsBannerVisible] = useState(true);
+
+  // Load banner visibility from localStorage
+  useEffect(() => {
+    const hidden = typeof window !== 'undefined' ? localStorage.getItem('bannerClosed') : null;
+
+    if (hidden === 'true') setIsBannerVisible(false);
+  }, []);
+
+  // Filter banners dynamically based on dismissed banners
+  const visibleBanners = useMemo(() => {
+    if (typeof window === 'undefined') return [];
+
+    const dismissedBanners = JSON.parse(localStorage.getItem('dismissedBanners') || '[]');
+
+    return banners
+      .filter((banner) => shouldShowBanner(banner.cfpDeadline))
+      .filter((b) => !dismissedBanners.includes(b.eventName));
+  }, []);
 
-  const visibleBanners = useMemo(() => banners.filter((banner) => shouldShowBanner(banner.cfpDeadline)), [banners]);
   const numberOfVisibleBanners = visibleBanners.length;
 
   const goToPrevious = () => {
@@ -36,57 +54,85 @@ export default function AnnouncementHero({ className = '', small = false }: IAnn
     setActiveIndex(index);
   };
 
-  useEffect(() => {
-    const interval = setInterval(() => setActiveIndex((index) => (index + 1) % numberOfVisibleBanners), 10000);
+  const handleClose = () => {
+    if (typeof window === 'undefined') return;
+
+    const currentBanner = visibleBanners[activeIndex];
+    const dismissedBanners = JSON.parse(localStorage.getItem('dismissedBanners') || '[]');
+    dismissedBanners.push(currentBanner.eventName);
+    localStorage.setItem('dismissedBanners', JSON.stringify(dismissedBanners));
+
+    const remainingBanners = visibleBanners.filter(
+      (b) => !dismissedBanners.includes(b.eventName)
+    );
 
-    return () => {
-      clearInterval(interval);
-    };
+    if (remainingBanners.length === 0) {
+      setIsBannerVisible(false);
+    } else {
+      setActiveIndex((prev) => prev % remainingBanners.length);
+    }
+  };
+
+  useEffect(() => {
+    const interval = setInterval(
+      () => setActiveIndex((index) => (index + 1) % numberOfVisibleBanners),
+      10000
+    );
+    return () => clearInterval(interval);
   }, [numberOfVisibleBanners]);
 
-  if (numberOfVisibleBanners === 0) {
+  if (numberOfVisibleBanners === 0 || !isBannerVisible) {
     return null;
   }
 
   return (
-    <Container as='section' padding='' className='text-center'>
-      <div className='relative flex flex-row items-center justify-center overflow-x-hidden md:gap-4'>
+    <Container as="section" padding="" className="text-center">
+      <div className="relative flex flex-row items-center justify-center overflow-x-hidden md:gap-4">
         {numberOfVisibleBanners > 1 && (
           <div
             className={`absolute left-0 top-1/2 z-10 mb-2 flex size-8 -translate-y-1/2 cursor-pointer
           items-center justify-center rounded-full bg-primary-500 opacity-50 hover:bg-primary-600 md:opacity-100`}
             onClick={goToPrevious}
           >
-            <ArrowLeft className='text-white' />
+            <ArrowLeft className="text-white" />
           </div>
         )}
-        <div className='relative flex w-4/5 md:w-5/6 flex-col items-center justify-center gap-2'>
-          <div className='relative flex min-h-72 w-full justify-center overflow-hidden lg:h-[17rem] lg:w-[38rem]'>
-            {visibleBanners.map((banner, index) => {
-              // Only render the active banner
-              const isVisible = index === activeIndex;
 
-              if (!isVisible) return null;
+        <div className="relative flex w-4/5 md:w-5/6 flex-col items-center justify-center gap-2">
+          <div className="relative flex min-h-72 w-full justify-center overflow-hidden lg:h-[17rem] lg:w-[38rem]">
+            {visibleBanners.map((banner, index) => {
+              if (index !== activeIndex) return null;
 
               return (
-                <Banner
-                  key={index}
-                  title={banner.title}
-                  dateLocation={banner.dateLocation}
-                  cfaText={banner.cfaText}
-                  eventName={banner.eventName}
-                  cfpDeadline={banner.cfpDeadline}
-                  link={banner.link}
-                  city={banner.city}
-                  activeBanner={isVisible}
-                  className={className}
-                  small={small}
-                />
+                <div key={index} className="relative w-full flex justify-center">
+                  {/* Close Button inside the card */}
+                  <button
+                    onClick={handleClose}
+                    aria-label="Close announcement banner"
+                    className="absolute top-[1.7rem] right-4 z-20 flex h-6 w-6 items-center justify-center rounded border border-gray-400 bg-white text-gray-600 hover:bg-gray-100 hover:text-gray-800"
+                  >
+                    ×
+                  </button>
+
+                  <Banner
+                    title={banner.title}
+                    dateLocation={banner.dateLocation}
+                    cfaText={banner.cfaText}
+                    eventName={banner.eventName}
+                    cfpDeadline={banner.cfpDeadline}
+                    link={banner.link}
+                    city={banner.city}
+                    activeBanner={index === activeIndex}
+                    className={className}
+                    small={small}
+                  />
+                </div>
               );
             })}
           </div>
-          <div className='m-auto flex justify-center'>
-            {visibleBanners.map((banner, index) => (
+
+          <div className="m-auto flex justify-center">
+            {visibleBanners.map((_, index) => (
               <div
                 key={index}
                 className={`mx-1 size-2 cursor-pointer rounded-full ${
@@ -97,13 +143,14 @@ export default function AnnouncementHero({ className = '', small = false }: IAnn
             ))}
           </div>
         </div>
+
         {numberOfVisibleBanners > 1 && (
           <div
             className={`absolute right-0 top-1/2 z-10 mb-2 size-8 -translate-y-1/2 cursor-pointer
                       rounded-full bg-primary-500 opacity-50 hover:bg-primary-600 md:opacity-100`}
             onClick={goToNext}
           >
-            <ArrowRight className='text-white' />
+            <ArrowRight className="text-white" />
           </div>
         )}
       </div>