diff --git a/apps/web/src/app/(app)/@user/page.tsx b/apps/web/src/app/(app)/@user/page.tsx
index e49391a..d7d5467 100644
--- a/apps/web/src/app/(app)/@user/page.tsx
+++ b/apps/web/src/app/(app)/@user/page.tsx
@@ -1,3 +1,6 @@
+import { Alert, AlertDescription, AlertTitle } from "@/components/alert";
+import { get } from "@vercel/edge-config";
+
 import {
   Card,
   CardContent,
@@ -7,24 +10,38 @@ import {
 } from "@tanya.in/ui/card";
 import { Chat } from "@tanya.in/ui/chat";
 
-export default function HomePage() {
+export default async function HomePage() {
+  const isTesting = await get("testing");
+
   return (
-    <div className="flex-1 self-center">
-      <Card className="m-2 mx-auto w-full duration-500 transition-size has-[[data-started=false]]:min-[450px]:w-96">
-        <CardHeader>
-          <CardTitle className="text-center">Tanya.in saja!</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <Chat />
-        </CardContent>
-        <CardFooter>
-          <Card className="m-auto shadow-none">
-            <CardContent className="py-4 text-center">
-              /: To choose the topic
-            </CardContent>
-          </Card>
-        </CardFooter>
-      </Card>
-    </div>
+    <>
+      {isTesting && (
+        <Alert className="absolute left-0 top-0 my-4 bg-warning text-warning-foreground">
+          <AlertTitle>Testing mode: ON</AlertTitle>
+          <AlertDescription>
+            Sorry, currently the site is in testing mode. Chat responses may not
+            be accurate.
+          </AlertDescription>
+        </Alert>
+      )}
+
+      <div className="flex-1 self-center">
+        <Card className="m-2 mx-auto w-full duration-500 transition-size has-[[data-started=false]]:min-[450px]:w-96">
+          <CardHeader>
+            <CardTitle className="text-center">Tanya.in saja!</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <Chat />
+          </CardContent>
+          <CardFooter>
+            <Card className="m-auto shadow-none">
+              <CardContent className="py-4 text-center">
+                /: To choose the topic
+              </CardContent>
+            </Card>
+          </CardFooter>
+        </Card>
+      </div>
+    </>
   );
 }
diff --git a/apps/web/src/app/(app)/layout.tsx b/apps/web/src/app/(app)/layout.tsx
index de1a533..ad5033c 100644
--- a/apps/web/src/app/(app)/layout.tsx
+++ b/apps/web/src/app/(app)/layout.tsx
@@ -37,7 +37,7 @@ export default async function AuthLayout(props: {
       <div className="flex-1">
         <Navbar />
         <main
-          className={cn("container flex min-h-[calc(100vh-8rem)]", {
+          className={cn("container relative flex min-h-[calc(100vh-8rem)]", {
             "p-4 2xl:pt-8": isAdmin,
           })}
         >
diff --git a/apps/web/src/components/alert.tsx b/apps/web/src/components/alert.tsx
new file mode 100644
index 0000000..d0a8ae1
--- /dev/null
+++ b/apps/web/src/components/alert.tsx
@@ -0,0 +1,60 @@
+import type { VariantProps } from "class-variance-authority";
+import * as React from "react";
+import { cva } from "class-variance-authority";
+
+import { cn } from "@tanya.in/ui";
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border p-4 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
+  {
+    variants: {
+      variant: {
+        default: "bg-background text-foreground",
+        destructive:
+          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+const Alert = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+  <div
+    ref={ref}
+    role="alert"
+    className={cn(alertVariants({ variant }), className)}
+    {...props}
+  />
+));
+Alert.displayName = "Alert";
+
+const AlertTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h5
+    ref={ref}
+    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
+    {...props}
+  />
+));
+AlertTitle.displayName = "AlertTitle";
+
+const AlertDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm [&_p]:leading-relaxed", className)}
+    {...props}
+  />
+));
+AlertDescription.displayName = "AlertDescription";
+
+export { Alert, AlertTitle, AlertDescription };