diff --git a/src/components/ui/banners/AnnouncementBannerHackWeek.astro b/src/components/ui/banners/AnnouncementBannerHackWeek.astro
new file mode 100644
index 0000000..66b36d8
--- /dev/null
+++ b/src/components/ui/banners/AnnouncementBannerHackWeek.astro
@@ -0,0 +1,31 @@
+---
+import { Image } from "astro:assets";
+import hackWeek from '/src/images/banner/HackWeek-Banner_1200x90.jpg';
+const { url } = Astro.props;
+
+interface Props {
+  url: string;
+}
+---
+
+<astro-banner>
+  <div
+    class="z-50 w-full transform"
+    role="region"
+    aria-label="Informational Banner"
+  >
+    <div
+      class="py-8 text-center shadow-sm"
+    >
+      <div class="inline-flex items-center mx-auto max-w-screen-xl px-4 sm:px-8 lg:px-10">
+        <a
+          class="cursor-pointer"
+          href={url}
+          target="_blank"
+        ><Image class="rounded" src={hackWeek} alt="HackWeek" width="1152" height="86" loading="eager" /></a>
+      </div>
+
+    </div>
+  </div>
+</astro-banner>
+
diff --git a/src/images/banner/HackWeek-Banner_1200x90.jpg b/src/images/banner/HackWeek-Banner_1200x90.jpg
new file mode 100644
index 0000000..dcdc727
Binary files /dev/null and b/src/images/banner/HackWeek-Banner_1200x90.jpg differ
diff --git a/src/layouts/MainLayout.astro b/src/layouts/MainLayout.astro
index f5f3bbe..854d7ed 100644
--- a/src/layouts/MainLayout.astro
+++ b/src/layouts/MainLayout.astro
@@ -4,6 +4,7 @@ import Meta from "@components/Meta.astro";
 import Navbar from "@components/sections/navbar&footer/Navbar.astro";
 import FooterSection from "@components/sections/navbar&footer/FooterSection.astro";
 import { SITE } from "@data/constants";
+import AnnouncementBannerHackWeek from "../components/ui/banners/AnnouncementBannerHackWeek.astro";
 
 // Setting expected props
 const { title = SITE.title, meta, structuredData, lang = "en" } = Astro.props;
@@ -59,6 +60,9 @@ We set the language of the page to English and add classes for scrollbar and scr
     The Navbar is placed at the top, with a slot for the main content and FooterSection at the bottom.
     -->
     <Navbar />
+    <AnnouncementBannerHackWeek
+      url="https://forum.commercequest.space/events/33"
+    />
     <div class="mx-auto max-w-screen-xl px-4 sm:px-6 lg:px-8">
       <main>
         <slot />
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 71d91f3..2cceb4f 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -9,7 +9,6 @@ import FeaturesGeneral from "@components/sections/features/FeaturesGeneral.astro
 import FeaturesNavs from "@components/sections/features/FeaturesNavs.astro";
 import TestimonialsSection from "@components/sections/testimonials/TestimonialsSection.astro";
 import FAQ from "@components/sections/misc/FAQ.astro";
-// import AnnouncementBanner from "@components/ui/banners/AnnouncementBanner.astro";
 import heroImage from "@images/SPRYKER_EXCITE_2023--27.jpg";
 import faqs from "@data/faqs.json";
 import features from "@data/features.json";
@@ -21,11 +20,6 @@ import maher from "@images/blog/maher.jpg";
 ---
 
 <MainLayout>
-  <!-- <AnnouncementBanner
-    btnId="dismiss-button"
-    btnTitle="Explore our CommerceQuest Forum"
-    url="https://commercequest.space/"
-  /> -->
 
   <HeroSection
     title=`Connect, <span
diff --git a/tailwind.config.mjs b/tailwind.config.mjs
index cd8ae48..ec73508 100644
--- a/tailwind.config.mjs
+++ b/tailwind.config.mjs
@@ -48,6 +48,9 @@ export default {
         500: "#9D0861",
         600: "#4E0F36",
       },
+      green: {
+        500: "#1EBEA0",
+      },
       orange: {
         100: "#ed77be",
         200: "#ED4FAD",