diff --git a/frontend/src/app/(dashboard)/layout.tsx b/frontend/src/app/(dashboard)/layout.tsx
index b55b130d..32153347 100644
--- a/frontend/src/app/(dashboard)/layout.tsx
+++ b/frontend/src/app/(dashboard)/layout.tsx
@@ -6,16 +6,7 @@ import {
   SidebarInset,
   SidebarProvider,
 } from "@/components/ui/sidebar"
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from "@/components/ui/alert-dialog"
-import { Clock } from "lucide-react"
+import { MaintenanceAlert } from "@/components/maintenance-alert"
 
 interface DashboardLayoutProps {
   children: React.ReactNode
@@ -40,24 +31,11 @@ export default function DashboardLayout({
         </div>
       </SidebarInset>
       
-      <AlertDialog open={showMaintenanceAlert} onOpenChange={setShowMaintenanceAlert}>
-        <AlertDialogContent className="border border-muted">
-          <AlertDialogHeader className="gap-3">
-            <div className="flex items-center justify-center">
-              <Clock className="h-8 w-8 text-muted-foreground" />
-            </div>
-            <AlertDialogTitle className="text-lg font-medium">High Demand Notice</AlertDialogTitle>
-            <AlertDialogDescription>
-              Due to exceptionally high demand, our service is currently experiencing slower response times.
-              We recommend returning tomorrow when our systems will be operating at normal capacity.
-              <span className="mt-2 block">Thank you for your understanding.</span>
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogAction>I'll Return Tomorrow</AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
+      <MaintenanceAlert 
+        open={showMaintenanceAlert} 
+        onOpenChange={setShowMaintenanceAlert}
+        closeable={true}
+      />
     </SidebarProvider>
   )
 } 
\ No newline at end of file
diff --git a/frontend/src/components/maintenance-alert.tsx b/frontend/src/components/maintenance-alert.tsx
new file mode 100644
index 00000000..cf58fe73
--- /dev/null
+++ b/frontend/src/components/maintenance-alert.tsx
@@ -0,0 +1,94 @@
+"use client"
+
+import { AlertDialog, AlertDialogAction, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@/components/ui/alert-dialog"
+import { Clock, Github, X } from "lucide-react"
+import Link from "next/link"
+import { AnimatePresence, motion } from "motion/react"
+import { Button } from "@/components/ui/button"
+
+interface MaintenanceAlertProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  closeable?: boolean
+}
+
+export function MaintenanceAlert({ open, onOpenChange, closeable = true }: MaintenanceAlertProps) {
+  return (
+    <AlertDialog open={open} onOpenChange={closeable ? onOpenChange : undefined}>
+      <AlertDialogContent className="max-w-2xl w-[90vw] p-0 border-0 shadow-lg overflow-hidden rounded-2xl z-[9999]">
+        <motion.div 
+          className="relative"
+          initial={{ opacity: 0, scale: 0.95 }}
+          animate={{ opacity: 1, scale: 1 }}
+          transition={{ type: "spring", damping: 30, stiffness: 300 }}
+        >
+          {/* Background pattern */}
+          <div className="absolute inset-0 bg-accent/20 opacity-20">
+            <div className="absolute inset-0 bg-grid-white/10 [mask-image:radial-gradient(white,transparent_85%)]" />
+          </div>
+          
+          {closeable && (
+            <Button
+              variant="ghost"
+              size="icon"
+              className="absolute right-4 top-4 z-20 rounded-full hover:bg-background/80"
+              onClick={() => onOpenChange(false)}
+            >
+              <X className="h-4 w-4" />
+              <span className="sr-only">Close</span>
+            </Button>
+          )}
+          
+          <AlertDialogHeader className="gap-6 px-8 pt-10 pb-6 relative z-10">
+            <motion.div 
+              className="flex items-center justify-center"
+              initial={{ y: -10, opacity: 0 }}
+              animate={{ y: 0, opacity: 1 }}
+              transition={{ delay: 0.1 }}
+            >
+              <div className="flex size-16 items-center justify-center rounded-full bg-gradient-to-t from-primary/20 to-secondary/10 backdrop-blur-md">
+                <div className="flex size-12 items-center justify-center rounded-full bg-gradient-to-t from-primary to-primary/80 shadow-md">
+                  <Clock className="h-6 w-6 text-white" />
+                </div>
+              </div>
+            </motion.div>
+            
+            <motion.div
+              initial={{ y: -10, opacity: 0 }}
+              animate={{ y: 0, opacity: 1 }}
+              transition={{ delay: 0.2 }}
+            >
+              <AlertDialogTitle className="text-2xl font-bold text-center text-primary bg-clip-text">
+                High Demand Notice
+              </AlertDialogTitle>
+            </motion.div>
+            
+            <motion.div
+              initial={{ y: -10, opacity: 0 }}
+              animate={{ y: 0, opacity: 1 }}
+              transition={{ delay: 0.3 }}
+            >
+              <AlertDialogDescription className="text-base text-center leading-relaxed">
+                Due to exceptionally high demand, our service is currently experiencing slower response times.
+                We recommend returning tomorrow when our systems will be operating at normal capacity.
+                <span className="mt-4 block font-medium text-primary">Thank you for your understanding. We will notify you via email once the service is fully operational again.</span>
+              </AlertDialogDescription>
+            </motion.div>
+          </AlertDialogHeader>
+          
+          <AlertDialogFooter className="p-8 pt-4 border-t border-border/40 bg-background/40 backdrop-blur-sm">
+            <Link 
+              href="https://github.com/kortix-ai/suna" 
+              target="_blank" 
+              rel="noopener noreferrer"
+              className="mx-auto w-full flex items-center justify-center gap-3 bg-gradient-to-tr from-primary to-primary/80 hover:opacity-90 text-white font-medium rounded-full px-8 py-3 transition-all hover:shadow-md"
+            >
+              <Github className="h-5 w-5 transition-transform group-hover:scale-110" />
+              <span>Explore Self-Hosted Version</span>
+            </Link>
+          </AlertDialogFooter>
+        </motion.div>
+      </AlertDialogContent>
+    </AlertDialog>
+  )
+} 
\ No newline at end of file