diff --git a/.phase40-state.json b/.phase40-state.json
index 8bca7e8..c0ea46f 100644
--- a/.phase40-state.json
+++ b/.phase40-state.json
@@ -1,9 +1,10 @@
 {
   "completed_features": [],
-  "current_feature": "form-group-component",
+  "current_feature": "banner-component",
   "started_at": "2026-05-23T10:18:26.780535",
   "attempted_features": [
     "sidebar-component",
-    "logo-component"
+    "logo-component",
+    "form-group-component"
   ]
 }
\ No newline at end of file
diff --git a/GENERATION_LOG.md b/GENERATION_LOG.md
index 9f8df7b..18f7774 100644
--- a/GENERATION_LOG.md
+++ b/GENERATION_LOG.md
@@ -4247,3 +4247,21 @@ src/index.ts(27,25): error TS2769: No overload matches this call.
   Overload 1 of 3, '(plugin: FastifyPluginCallback<{ limits: { fileSize: number; }; }, RawServerDefault, FastifyTypeProvider, FastifyBaseLogger>, opts?: FastifyRegisterOptions<...> | undefined): FastifyInstance<...> & PromiseLike<...>', gave the following error.
     Argument of type 'Promise<FastifyMultipartPlugin>' is not assignable to parameter of type 'FastifyPluginCallback<{ limits: { fileSize: number; }; }, RawServerDefault, FastifyTypeProvider, FastifyBaseLogger>'.
       Type 'Promise<FastifyMultipartPlugin>' provides no match for the signature '(instance: FastifyInstance<RawServerDefault, IncomingMessage, ServerResponse<IncomingMessage>, 
+- `10:19:22` **INFO**   Committed feature form-group-component
+- `10:19:22` **INFO**   Pushed: rc=0
+
+## Phase-3 Feature: banner-component (2026-05-23 10:19:22)
+
+- `10:19:22` **INFO** Description: Banner für Top-Bar (e.g. Trial-Hinweis)
+- `10:19:22` **INFO**   Generating apps/web/src/components/Banner.tsx (Banner-Component. Props: message, variant?: 'info'|'warning'|'success'…)
+- `10:19:39` **INFO**     wrote 1985 chars in 16.6s (attempt 1)
+- `10:19:39` **INFO** Running tsc --noEmit on api…
+- `10:19:40` **WARN**   tsc errors:
+src/db/schema.ts(37,14): error TS7022: 'customers' implicitly has type 'any' because it does not have a type annotation and is referenced directly or indirectly in its own initializer.
+src/db/schema.ts(45,59): error TS7024: Function implicitly has return type 'any' because it does not have a return type annotation and is referenced directly or indirectly in one of its return expressions.
+src/db/schema.ts(49,14): error TS7022: 'projects' implicitly has type 'any' because it does not have a type annotation and is referenced directly or indirectly in its own initializer.
+src/db/schema.ts(53,56): error TS7024: Function implicitly has return type 'any' because it does not have a return type annotation and is referenced directly or indirectly in one of its return expressions.
+src/index.ts(27,25): error TS2769: No overload matches this call.
+  Overload 1 of 3, '(plugin: FastifyPluginCallback<{ limits: { fileSize: number; }; }, RawServerDefault, FastifyTypeProvider, FastifyBaseLogger>, opts?: FastifyRegisterOptions<...> | undefined): FastifyInstance<...> & PromiseLike<...>', gave the following error.
+    Argument of type 'Promise<FastifyMultipartPlugin>' is not assignable to parameter of type 'FastifyPluginCallback<{ limits: { fileSize: number; }; }, RawServerDefault, FastifyTypeProvider, FastifyBaseLogger>'.
+      Type 'Promise<FastifyMultipartPlugin>' provides no match for the signature '(instance: FastifyInstance<RawServerDefault, IncomingMessage, ServerResponse<IncomingMessage>, 
diff --git a/apps/web/src/components/Banner.tsx b/apps/web/src/components/Banner.tsx
new file mode 100644
index 0000000..57a30e3
--- /dev/null
+++ b/apps/web/src/components/Banner.tsx
@@ -0,0 +1,71 @@
+import React, { useState } from 'react';
+
+interface BannerProps {
+  message: string;
+  variant?: 'info' | 'warning' | 'success';
+  actionLabel?: string;
+  onAction?: () => void;
+  dismissible?: boolean;
+}
+
+const variantStyles = {
+  info: 'bg-blue-600 text-white',
+  warning: 'bg-amber-500 text-black',
+  success: 'bg-emerald-600 text-white',
+};
+
+export default function Banner({
+  message,
+  variant = 'info',
+  actionLabel,
+  onAction,
+  dismissible = false,
+}: BannerProps) {
+  const [isVisible, setIsVisible] = useState(true);
+
+  if (!isVisible) return null;
+
+  return (
+    <div className={`w-full py-2 px-4 transition-colors duration-200 ${variantStyles[variant]}`}>
+      <div className="max-w-7xl mx-auto flex items-center justify-between gap-4">
+        <div className="flex-1 text-center text-sm font-medium">
+          {message}
+        </div>
+
+        <div className="flex items-center gap-3">
+          {actionLabel && onAction && (
+            <button
+              onClick={onAction}
+              className="text-xs font-bold uppercase tracking-wider underline underline-offset-4 hover:opacity-80 transition-opacity"
+            >
+              {actionLabel}
+            </button>
+          )}
+
+          {dismissible && (
+            <button
+              onClick={() => setIsVisible(false)}
+              className="p-1 rounded-full hover:bg-black/10 transition-colors"
+              aria-label="Dismiss banner"
+            >
+              <svg 
+                xmlns="http://www.w3.org/2000/svg" 
+                width="16" 
+                height="16" 
+                viewBox="0 0 24 24" 
+                fill="none" 
+                stroke="currentColor" 
+                strokeWidth="2" 
+                strokeLinecap="round" 
+                strokeLinejoin="round"
+              >
+                <path d="M18 6 6 18" />
+                <path d="m6 6 12 12" />
+              </svg>
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file