diff --git a/packages/app/src/components/FeaturedEventsAnnouncements/index.jsx b/packages/app/src/components/FeaturedEventsAnnouncements/index.jsx
new file mode 100644
index 00000000..aa55cff4
--- /dev/null
+++ b/packages/app/src/components/FeaturedEventsAnnouncements/index.jsx
@@ -0,0 +1,48 @@
+import React from "react"
+
+import { Icons } from "components/Icons"
+import Announcement from "../FeaturedEventAnnouncement"
+
+import "./index.less"
+
+export default React.memo((props) => {
+    const [featuredEvents, setFeaturedEvents] = React.useState([])
+
+    const fetchFeaturedEvents = React.useCallback(async () => {
+        let { data } = await app.api.customRequest("main", {
+            url: "/featured_events",
+            method: "GET"
+        }).catch((err) => {
+            console.error(err)
+            app.message.error(`Failed to fetch featured events`)
+
+            return {
+                data: null
+            }
+        })
+
+        if (data) {
+            // parse announcement data
+            data = data.map((item) => {
+                try {
+                    item.announcement = JSON.parse(item.announcement)
+                } catch (error) {
+                    console.error(error)
+                    app.message.error(`Failed to parse announcement data`)
+                }
+                return item
+            })
+
+            setFeaturedEvents(data)
+        }
+
+    }, [])
+
+    React.useEffect(() => {
+        fetchFeaturedEvents()
+    }, [])
+
+    return <div className="featuredEvents">
+        {featuredEvents.map((event, index) => <Announcement index={index} data={event.announcement} />)}
+    </div>
+})
\ No newline at end of file
diff --git a/packages/app/src/components/FeaturedEventsAnnouncements/index.less b/packages/app/src/components/FeaturedEventsAnnouncements/index.less
new file mode 100644
index 00000000..16273c9a
--- /dev/null
+++ b/packages/app/src/components/FeaturedEventsAnnouncements/index.less
@@ -0,0 +1,8 @@
+.featuredEvents {
+    display: flex;
+    flex-direction: column;
+
+    .featuredEvent {
+        margin-bottom: 20px;
+    }
+}
\ No newline at end of file