diff --git a/app/Http/Controllers/ProductController.php b/app/Http/Controllers/ProductController.php
index df68878..420cc51 100644
--- a/app/Http/Controllers/ProductController.php
+++ b/app/Http/Controllers/ProductController.php
@@ -209,6 +209,41 @@ class ProductController extends Controller
         ]);
     }
 
+    public function announcements(Request $request)
+    {
+        // Static announcements for now - can be moved to database later
+        $announcements = [
+            [
+                'icon' => '🎉',
+                'message' => 'Free Shipping on orders over $250',
+                'detail' => "Don't miss a discount!"
+            ],
+            [
+                'icon' => '💰',
+                'message' => 'Money back guarantee',
+                'detail' => 'We return money within 30 days'
+            ],
+            [
+                'icon' => '💪',
+                'message' => 'Friendly 24/7 customer support',
+                'detail' => "We've got you covered!"
+            ]
+        ];
+
+        // Render announcement slides HTML
+        $announcementHtml = '';
+        foreach ($announcements as $announcement) {
+            $announcementHtml .= '<div class="swiper-slide text-truncate text-center">';
+            $announcementHtml .= $announcement['icon'] . ' ' . $announcement['message'] . ' <span class="d-none d-sm-inline">' . $announcement['detail'] . '</span>';
+            $announcementHtml .= '</div>';
+        }
+
+        return response()->json([
+            'success' => true,
+            'announcements' => $announcementHtml
+        ]);
+    }
+
     public function highlights(Request $request)
     {
         $type = $request->input('type', 'new');
diff --git a/app/View/Components/Layout/TopAnnouncementHeader.php b/app/View/Components/Layout/TopAnnouncementHeader.php
new file mode 100644
index 0000000..a4b80c9
--- /dev/null
+++ b/app/View/Components/Layout/TopAnnouncementHeader.php
@@ -0,0 +1,25 @@
+<?php
+
+namespace App\View\Components\Layout;
+
+use Illuminate\View\Component;
+use Illuminate\View\View;
+
+class TopAnnouncementHeader extends Component
+{
+    /**
+     * Create a new component instance.
+     */
+    public function __construct()
+    {
+        //
+    }
+
+    /**
+     * Get the view/contents that represent the component.
+     */
+    public function render(): View|string
+    {
+        return view('components.layout.top-announcement-header');
+    }
+}
diff --git a/resources/views/components/layout/header.blade.php b/resources/views/components/layout/header.blade.php
index 156746f..43f6272 100644
--- a/resources/views/components/layout/header.blade.php
+++ b/resources/views/components/layout/header.blade.php
@@ -145,47 +145,7 @@
         </div>
     </div>
 
-    <div class="alert alert-dismissible bg-dark text-white rounded-0 py-2 px-0 m-0 fade show" data-bs-theme="dark">
-        <div class="container position-relative d-flex min-w-0">
-            <div class="d-flex flex-nowrap align-items-center g-2 w-100 min-w-0 mx-auto mt-n1"
-                style="max-width: 458px">
-                <div class="nav me-2">
-                    <button type="button" class="nav-link fs-lg p-0" id="topbarPrev" aria-label="Prev">
-                        <i class="ci-chevron-left"></i>
-                    </button>
-                </div>
-                <div class="swiper fs-sm text-white"
-                    data-swiper='{
-            "spaceBetween": 24,
-            "loop": true,
-            "autoplay": {
-              "delay": 5000,
-              "disableOnInteraction": false
-            },
-            "navigation": {
-              "prevEl": "#topbarPrev",
-              "nextEl": "#topbarNext"
-            }
-          }'>
-                    <div class="swiper-wrapper min-w-0">
-                        <div class="swiper-slide text-truncate text-center">🎉 Free Shipping on orders over $250. <span
-                                class="d-none d-sm-inline">Don't miss a discount!</span></div>
-                        <div class="swiper-slide text-truncate text-center">💰 Money back guarantee. <span
-                                class="d-none d-sm-inline">We return money within 30 days.</span></div>
-                        <div class="swiper-slide text-truncate text-center">💪 Friendly 24/7 customer support. <span
-                                class="d-none d-sm-inline">We've got you covered!</span></div>
-                    </div>
-                </div>
-                <div class="nav ms-2">
-                    <button type="button" class="nav-link fs-lg p-0" id="topbarNext" aria-label="Next">
-                        <i class="ci-chevron-right"></i>
-                    </button>
-                </div>
-            </div>
-            <button type="button" class="btn-close position-static flex-shrink-0 p-1 ms-3 ms-md-n4"
-                data-bs-dismiss="alert" aria-label="Close"></button>
-        </div>
-    </div>
+    <x-layout.top-announcement-header />
     <header class="navbar navbar-expand-lg navbar-sticky bg-body d-block z-fixed p-0"
         data-sticky-navbar='{"offset": 500}'>
         <div class="container py-2 py-lg-3">
diff --git a/resources/views/components/layout/top-announcement-header.blade.php b/resources/views/components/layout/top-announcement-header.blade.php
new file mode 100644
index 0000000..2f508c3
--- /dev/null
+++ b/resources/views/components/layout/top-announcement-header.blade.php
@@ -0,0 +1,98 @@
+<div class="alert alert-dismissible bg-dark text-white rounded-0 py-2 px-0 m-0 d-none" id="top-announcement-bar" data-bs-theme="dark">
+    <div class="container position-relative d-flex min-w-0">
+        <div class="d-flex flex-nowrap align-items-center g-2 w-100 min-w-0 mx-auto mt-n1" style="max-width: 458px">
+            <div class="nav me-2">
+                <button type="button" class="nav-link fs-lg p-0" id="topbarPrev" aria-label="Prev">
+                    <i class="ci-chevron-left"></i>
+                </button>
+            </div>
+            <div class="swiper fs-sm text-white"
+                data-swiper='{
+        "spaceBetween": 24,
+        "loop": true,
+        "autoplay": {
+          "delay": 5000,
+          "disableOnInteraction": false
+        },
+        "navigation": {
+          "prevEl": "#topbarPrev",
+          "nextEl": "#topbarNext"
+        }
+      }'>
+                <div class="swiper-wrapper min-w-0" id="announcements-wrapper">
+                    <!-- Announcements will be loaded here via AJAX -->
+                </div>
+            </div>
+            <div class="nav ms-2">
+                <button type="button" class="nav-link fs-lg p-0" id="topbarNext" aria-label="Next">
+                    <i class="ci-chevron-right"></i>
+                </button>
+            </div>
+        </div>
+        <button type="button" class="btn-close position-static flex-shrink-0 p-1 ms-3 ms-md-n4" data-bs-dismiss="alert"
+            aria-label="Close"></button>
+    </div>
+</div>
+
+<style>
+#top-announcement-bar {
+    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
+    opacity: 0;
+    transform: translateY(-100%);
+}
+
+#top-announcement-bar.show-with-animation {
+    opacity: 1;
+    transform: translateY(0);
+}
+</style>
+
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    loadAnnouncements();
+});
+
+function loadAnnouncements() {
+    fetch(`{{ route('product.ajax.announcements') }}`, {
+            headers: {
+                'X-Requested-With': 'XMLHttpRequest',
+                'Accept': 'application/json'
+            }
+        })
+        .then(response => response.json())
+        .then(data => {
+            if (data.success && data.announcements.trim() !== '') {
+                document.getElementById('announcements-wrapper').innerHTML = data.announcements;
+                const announcementBar = document.getElementById('top-announcement-bar');
+                announcementBar.classList.remove('d-none');
+                
+                // Trigger animation
+                setTimeout(() => {
+                    announcementBar.classList.add('show-with-animation');
+                }, 10);
+                
+                // Reinitialize swiper if it exists
+                if (typeof Swiper !== 'undefined') {
+                    const swiperElement = document.querySelector('.swiper');
+                    if (swiperElement && swiperElement.swiper) {
+                        swiperElement.swiper.update();
+                    }
+                }
+            } else {
+                // Hide announcement bar if no data
+                const announcementBar = document.getElementById('top-announcement-bar');
+                if (announcementBar) {
+                    announcementBar.classList.add('d-none');
+                }
+            }
+        })
+        .catch(error => {
+            console.error('Error loading announcements:', error);
+            // Hide announcement bar on error
+            const announcementBar = document.getElementById('top-announcement-bar');
+            if (announcementBar) {
+                announcementBar.classList.add('d-none');
+            }
+        });
+}
+</script>
diff --git a/routes/web.php b/routes/web.php
index f9a6a76..c6e39fb 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -31,6 +31,7 @@ Route::get('/products/ajax/highlights',[ProductController::class, 'highlights'])
 Route::get('/products/ajax/brands',[ProductController::class, 'brands'])->name('product.ajax.brands');
 Route::get('/products/ajax/categories',[ProductController::class, 'categories'])->name('product.ajax.categories');
 Route::get('/products/ajax/genders',[ProductController::class, 'genders'])->name('product.ajax.genders');
+Route::get('/products/ajax/announcements',[ProductController::class, 'announcements'])->name('product.ajax.announcements');
 Route::get('/product/{slug}',[ProductController::class, 'detail'])->name('product.detail');
 
 // Search routes