diff --git a/resources/views/errors/503.blade.php b/resources/views/errors/503.blade.php
index 1565e3f7c..f14d4e442 100644
--- a/resources/views/errors/503.blade.php
+++ b/resources/views/errors/503.blade.php
@@ -1,90 +1,345 @@
-<html>
+<!DOCTYPE html>
+<html lang="en">
 <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Maintenance | Virtnet.bond</title>
+    
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
 
-<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-<meta name="viewport" content="width=device-width, initial-scale=1" />
+        body {
+            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            min-height: 100vh;
+            background: linear-gradient(135deg, #f8fafc 0%, #e0f2fe 50%, #ecfdf5 100%);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 20px;
+            position: relative;
+            overflow: hidden;
+        }
 
-<link href="https://fonts.googleapis.com/css?family=Montserrat:700,800" rel="stylesheet">
-<link href="https://fonts.googleapis.com/css?family=Quattrocento+Sans" rel="stylesheet">
+        /* Animated background elements */
+        .bg-decoration {
+            position: absolute;
+            border-radius: 50%;
+            filter: blur(60px);
+            opacity: 0.5;
+            animation: float 20s ease-in-out infinite;
+        }
 
-<style>
-  body { 
-    text-align: center; 
-    padding: 10%; 
-    color: #333; 
-  }
+        .bg-decoration-1 {
+            width: 400px;
+            height: 400px;
+            background: linear-gradient(135deg, #3b82f6 0%, #06b6d4 100%);
+            top: -100px;
+            right: -100px;
+            animation-delay: 0s;
+        }
 
-  #wrapper {
-    margin: 0 auto;
-  }
+        .bg-decoration-2 {
+            width: 300px;
+            height: 300px;
+            background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
+            bottom: -50px;
+            left: -50px;
+            animation-delay: -7s;
+        }
 
-  h1 { 
-    font-size: 30px; 
-    color: #488ECE; 
-    font-weight: bold;
-    font-family: 'Montserrat', sans-serif;
-  }
+        .bg-decoration-3 {
+            width: 200px;
+            height: 200px;
+            background: linear-gradient(135deg, #0ea5e9 0%, #22d3ee 100%);
+            top: 50%;
+            left: 10%;
+            animation-delay: -14s;
+        }
 
-  p { 	
-    font-family: 'Quattrocento Sans', Arial;
-    line-height: 15px;
-    font-size: 20px;  
-    color: #7a7a7b; 
-  }
+        @keyframes float {
+            0%, 100% { transform: translate(0, 0) scale(1); }
+            25% { transform: translate(30px, -30px) scale(1.05); }
+            50% { transform: translate(-20px, 20px) scale(0.95); }
+            75% { transform: translate(20px, 30px) scale(1.02); }
+        }
 
-  a { 
-    color: #F49426; 
-    text-decoration: underline;
-  }
+        .container {
+            position: relative;
+            z-index: 10;
+            max-width: 600px;
+            width: 100%;
+        }
 
-  a:hover { 
-    text-decoration: none; 
-  }
+        .card {
+            background: rgba(255, 255, 255, 0.85);
+            backdrop-filter: blur(20px);
+            -webkit-backdrop-filter: blur(20px);
+            border-radius: 24px;
+            padding: 48px 40px;
+            box-shadow: 
+                0 4px 6px -1px rgba(0, 0, 0, 0.05),
+                0 10px 15px -3px rgba(0, 0, 0, 0.08),
+                0 25px 50px -12px rgba(0, 0, 0, 0.1);
+            border: 1px solid rgba(255, 255, 255, 0.8);
+            text-align: center;
+        }
 
-  @media only screen and (max-width : 480px) {
-    h1 { font-size: 20px; }
-    p { font-size: 15px; }
-  }
+        .logo {
+            margin-bottom: 32px;
+        }
 
-  #logo {
-    margin-bottom: 40px; 
-  }
+        .logo img {
+            max-width: 280px;
+            width: 100%;
+            height: auto;
+            transition: transform 0.3s ease;
+        }
 
-  #logo img {
-    max-width: 100%;
-    height: auto !important;
-  }
+        .logo img:hover {
+            transform: scale(1.02);
+        }
 
-  @media only screen and (max-width: 650px) {
-    #logo {
-      height: 75px; 
-    }
-  }
-</style>
+        .status-badge {
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+            background: linear-gradient(135deg, #dbeafe 0%, #d1fae5 100%);
+            padding: 10px 20px;
+            border-radius: 50px;
+            margin-bottom: 24px;
+            border: 1px solid rgba(59, 130, 246, 0.2);
+        }
 
-<title>Virtnet.bond is Down for Maintenance</title>
+        .status-dot {
+            width: 10px;
+            height: 10px;
+            background: linear-gradient(135deg, #3b82f6 0%, #10b981 100%);
+            border-radius: 50%;
+            animation: pulse 2s ease-in-out infinite;
+        }
 
+        @keyframes pulse {
+            0%, 100% { opacity: 1; transform: scale(1); }
+            50% { opacity: 0.6; transform: scale(0.9); }
+        }
+
+        .status-text {
+            font-size: 13px;
+            font-weight: 600;
+            color: #0369a1;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+        }
+
+        h1 {
+            font-size: 28px;
+            font-weight: 700;
+            background: linear-gradient(135deg, #1e40af 0%, #0891b2 50%, #059669 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 16px;
+            line-height: 1.3;
+        }
+
+        .description {
+            font-size: 16px;
+            color: #64748b;
+            line-height: 1.7;
+            margin-bottom: 32px;
+        }
+
+        .progress-container {
+            background: #e2e8f0;
+            border-radius: 12px;
+            height: 6px;
+            overflow: hidden;
+            margin-bottom: 32px;
+        }
+
+        .progress-bar {
+            height: 100%;
+            background: linear-gradient(90deg, #3b82f6 0%, #06b6d4 50%, #10b981 100%);
+            border-radius: 12px;
+            width: 60%;
+            animation: progress 3s ease-in-out infinite;
+            background-size: 200% 100%;
+        }
+
+        @keyframes progress {
+            0% { background-position: 100% 0; }
+            50% { background-position: 0% 0; }
+            100% { background-position: 100% 0; }
+        }
+
+        .actions {
+            display: flex;
+            flex-direction: column;
+            gap: 12px;
+        }
+
+        .btn {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            gap: 10px;
+            padding: 14px 28px;
+            border-radius: 12px;
+            font-size: 15px;
+            font-weight: 600;
+            text-decoration: none;
+            transition: all 0.3s ease;
+            cursor: pointer;
+            border: none;
+        }
+
+        .btn-primary {
+            background: linear-gradient(135deg, #3b82f6 0%, #0ea5e9 100%);
+            color: white;
+            box-shadow: 0 4px 14px rgba(59, 130, 246, 0.35);
+        }
+
+        .btn-primary:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 8px 25px rgba(59, 130, 246, 0.45);
+        }
+
+        .btn-secondary {
+            background: transparent;
+            color: #475569;
+            border: 2px solid #e2e8f0;
+        }
+
+        .btn-secondary:hover {
+            background: #f8fafc;
+            border-color: #cbd5e1;
+            color: #334155;
+        }
+
+        .btn svg {
+            width: 18px;
+            height: 18px;
+        }
+
+        .footer {
+            margin-top: 24px;
+            padding-top: 24px;
+            border-top: 1px solid rgba(226, 232, 240, 0.8);
+        }
+
+        .footer p {
+            font-size: 14px;
+            color: #94a3b8;
+        }
+
+        .footer a {
+            color: #0ea5e9;
+            text-decoration: none;
+            font-weight: 500;
+            transition: color 0.2s ease;
+        }
+
+        .footer a:hover {
+            color: #0284c7;
+        }
+
+        @media (max-width: 640px) {
+            .card {
+                padding: 32px 24px;
+                border-radius: 20px;
+            }
+
+            h1 {
+                font-size: 22px;
+            }
+
+            .description {
+                font-size: 15px;
+            }
+
+            .logo img {
+                max-width: 220px;
+            }
+
+            .bg-decoration-1 {
+                width: 250px;
+                height: 250px;
+            }
+
+            .bg-decoration-2 {
+                width: 200px;
+                height: 200px;
+            }
+
+            .bg-decoration-3 {
+                display: none;
+            }
+        }
+    </style>
 </head>
-
 <body>
+    <!-- Background decorations -->
+    <div class="bg-decoration bg-decoration-1"></div>
+    <div class="bg-decoration bg-decoration-2"></div>
+    <div class="bg-decoration bg-decoration-3"></div>
 
-<div id="wrapper">
+    <div class="container">
+        <div class="card">
+            <div class="logo">
+                <a href="https://virtnet.bond" title="Virtnet.bond">
+                    <img src="https://billing.virtnet.bond/assets/images/logo.png" alt="Virtnet.bond" />
+                </a>
+            </div>
 
-  <div id="logo">
-    <a href="https://virtnet.bond" title="Virtnet.bond">
-      <img src="https://billing.virtnet.bond/assets/images/logo.png" 
-           alt="Smarter Websites" 
-           title="Virtnet.bond" 
-           width="500rem" />
-    </a>
-  </div>
+            <div class="status-badge">
+                <span class="status-dot"></span>
+                <span class="status-text">Scheduled Maintenance</span>
+            </div>
 
-  <h1>Virtnet.bond is currently down for maintenance.</h1>
-  <p>We expect to be back very shortly. Thanks for your patience.</p>
-  <p>Feel free to <a href="mailto:admin@virtnet.bond">contact us</a> if you need immediate assistance.</p>
-  <p><a href="javascript:window.location.reload(true)">Click here to reload</a> the page manually.</p>
+            <h1>We're Making Things Better</h1>
+            
+            <p class="description">
+                Our team is performing scheduled maintenance to improve your experience. 
+                We'll be back online shortly. Thank you for your patience!
+            </p>
 
-</div>
+            <div class="progress-container">
+                <div class="progress-bar"></div>
+            </div>
 
+            <div class="actions">
+                <button onclick="window.location.reload(true)" class="btn btn-primary">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/>
+                        <path d="M3 3v5h5"/>
+                        <path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16"/>
+                        <path d="M16 16h5v5"/>
+                    </svg>
+                    Refresh Page
+                </button>
+                
+                <a href="mailto:admin@virtnet.bond" class="btn btn-secondary">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <rect width="20" height="16" x="2" y="4" rx="2"/>
+                        <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/>
+                    </svg>
+                    Contact Support
+                </a>
+            </div>
+
+            <div class="footer">
+                <p>Need immediate help? Email us at <a href="mailto:admin@virtnet.bond">admin@virtnet.bond</a></p>
+            </div>
+        </div>
+    </div>
 </body>
 </html>