diff --git a/packages/app/src/components/FeaturedEventAnnouncement/index.jsx b/packages/app/src/components/FeaturedEventAnnouncement/index.jsx
new file mode 100644
index 00000000..2d3b3254
--- /dev/null
+++ b/packages/app/src/components/FeaturedEventAnnouncement/index.jsx
@@ -0,0 +1,30 @@
+import React from "react"
+import { Icons } from "components/Icons"
+
+import "./index.less"
+
+export default (props) => {
+    const { backgroundImg, backgroundStyle, logoImg, title, description } = props.data ?? {}
+
+    return <div
+        key={props.index}
+        className="featuredEvent"
+        style={{
+            backgroundImage: `url(${backgroundImg})`,
+            ...backgroundStyle
+        }}
+    >
+        <div className="indicator">
+            <Icons.Target /> <span>Featured event</span>
+        </div>
+        <div className="logo">
+            <img
+                src={logoImg}
+            />
+        </div>
+        <div className="content">
+            <h1>{title}</h1>
+            <h3>{description}</h3>
+        </div>
+    </div>
+}
\ No newline at end of file
diff --git a/packages/app/src/components/FeaturedEventAnnouncement/index.less b/packages/app/src/components/FeaturedEventAnnouncement/index.less
new file mode 100644
index 00000000..b9a69cb7
--- /dev/null
+++ b/packages/app/src/components/FeaturedEventAnnouncement/index.less
@@ -0,0 +1,68 @@
+.featuredEvent {
+    position: relative;
+    z-index: 50;
+
+    display: flex;
+    flex-direction: row;
+
+    align-items: center;
+    justify-content: flex-end;
+
+    min-width: 300px;
+    max-width: 350px;
+
+    border-radius: 12px;
+
+    padding: 10px 20px;
+
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: center;
+
+    cursor: pointer;
+
+    .indicator {
+        position: absolute;
+        z-index: 55;
+
+        font-size: 0.6rem;
+
+        bottom: 0;
+        right: 0;
+
+        padding: 10px;
+    }
+
+    .logo {
+        height: 100%;
+
+        width: fit-content;
+
+        max-width: 70px;
+
+        img {
+            height: 100%;
+            width: 100%;
+        }
+    }
+
+    .content {
+        display: flex;
+        flex-direction: column;
+
+        align-items: flex-start;
+        margin-left: 20px;
+        margin-bottom: 10px;
+
+        h1 {
+            font-size: 1.5rem;
+            font-weight: 700;
+            font-family: "Space Grotesk", sans-serif;
+        }
+
+        h3 {
+            font-size: 0.8rem;
+            font-weight: 400;
+        }
+    }
+}
\ No newline at end of file