diff --git a/themes/nobelium/LayoutIndex.js b/themes/nobelium/LayoutIndex.js
index 94eaac2f..8bf7541a 100644
--- a/themes/nobelium/LayoutIndex.js
+++ b/themes/nobelium/LayoutIndex.js
@@ -1,5 +1,6 @@
 
 import BLOG from '@/blog.config'
+import Announcement from './components/Announcement'
 import { BlogListPage } from './components/BlogListPage'
 import { BlogListScroll } from './components/BlogListScroll'
 import LayoutBase from './LayoutBase'
@@ -7,6 +8,7 @@ import LayoutBase from './LayoutBase'
 export const LayoutIndex = props => {
   return (
     <LayoutBase {...props}>
+       <Announcement {...props} />
        {BLOG.POST_LIST_STYLE === 'page' ? <BlogListPage {...props} /> : <BlogListScroll {...props} />}
     </LayoutBase>
   )
diff --git a/themes/nobelium/components/Announcement.js b/themes/nobelium/components/Announcement.js
new file mode 100644
index 00000000..088c412e
--- /dev/null
+++ b/themes/nobelium/components/Announcement.js
@@ -0,0 +1,18 @@
+import dynamic from 'next/dynamic'
+
+const NotionPage = dynamic(() => import('@/components/NotionPage'))
+
+const Announcement = ({ notice, className }) => {
+  if (notice?.blockMap) {
+    return <div className={className}>
+            <section id='announcement-wrapper' className='mb-10'>
+                {notice && (<div id="announcement-content">
+                    <NotionPage post={notice} className='text-center ' />
+                </div>)}
+            </section>
+        </div>
+  } else {
+    return null
+  }
+}
+export default Announcement