diff --git a/frontend/.env.sample b/frontend/.env.sample
index bd103f5..3e55237 100644
--- a/frontend/.env.sample
+++ b/frontend/.env.sample
@@ -1,2 +1,4 @@
 NEXT_PUBLIC_API_BASE_URL=https://brew.joshydavid.com/api/v1
 NEXT_PUBLIC_S3_IMAGE_URL=https://your-bucket.s3.region.amazonaws.com
+NEXT_PUBLIC_NOTIFICATION_BANNER=true
+NEXT_PUBLIC_BANNER_MESSAGE="⚠️ Notice: AWS resources have been spun down. The backend is currently not running."
diff --git a/frontend/app/components/Header/index.tsx b/frontend/app/components/Header/index.tsx
index 23530ea..f09b8ad 100644
--- a/frontend/app/components/Header/index.tsx
+++ b/frontend/app/components/Header/index.tsx
@@ -10,13 +10,18 @@ import { usePathname } from "next/navigation";
 export default function Header() {
   const pathname = usePathname();
   const { authData } = useAuthStatus();
+  const showBanner = process.env.NEXT_PUBLIC_NOTIFICATION_BANNER === "true";
 
   return (
     <>
-      <BannerComponent
-        title="⚠️&nbsp; Notice: AWS resources have been spun down. The backend is
-      currently not running."
-      />
+      {showBanner && (
+        <BannerComponent
+          title={
+            process.env.NEXT_PUBLIC_BANNER_MESSAGE ||
+            "Notice: AWS resources have been spun down. The backend is currently not running."
+          }
+        />
+      )}
       <header className="flex flex-row items-center justify-between px-4 py-6 md:px-6">
         <div>{pathname !== "/" && <BackButton />}</div>
         <div className="flex items-center gap-2">