diff --git a/api.js b/api.js
index 49376fa..a194869 100644
--- a/api.js
+++ b/api.js
@@ -22,7 +22,9 @@ const elements = {
     errorMessage: document.getElementById('error-message'),
     autoRefreshCheckbox: document.getElementById('auto-refresh'),
     refreshIntervalSelect: document.getElementById('refresh-interval'),
-    emailSearch: document.getElementById('email-search')
+    emailSearch: document.getElementById('email-search'),
+    statusLed: document.getElementById('status-led'), // **Added**
+    statusText: document.getElementById('status-text')  // **Added**
 };
 
 // Error handling
@@ -46,6 +48,43 @@ function setLoading(isLoading) {
     }
 }
 
+/**
+ * Updates the system status LED and text.
+ * @param {string} status - The status type (e.g., 'ONLINE', 'OFFLINE', 'LOADING').
+ */
+function updateSystemStatus(status) {
+    // Remove existing status classes
+    elements.statusLed.classList.remove('online', 'offline', 'loading');
+    
+    // Add the new status class
+    elements.statusLed.classList.add(CONFIG.STATUS[status].class);
+    
+    // Update the status text
+    elements.statusText.textContent = CONFIG.STATUS[status].text;
+}
+
+/**
+ * Shows the system as Online.
+ */
+function setOnline() {
+    updateSystemStatus('ONLINE');
+}
+
+/**
+ * Shows the system as Offline.
+ */
+function setOffline() {
+    updateSystemStatus('OFFLINE');
+}
+
+/**
+ * Shows the system as Loading.
+ */
+function setLoadingStatus() {
+    updateSystemStatus('LOADING');
+}
+
+
 // Get session ID
 async function getSession() {
     try {
@@ -60,6 +99,7 @@ async function getSession() {
         currentEmail = data.email_addr;
         setStoredSession(sessionId);
         setStoredEmail(currentEmail);
+        setOnline(); // **Set status to Online**
         return sessionId;
     } catch (error) {
         console.error('Error getting session:', error);
diff --git a/config.js b/config.js
index 5d2508a..496673d 100644
--- a/config.js
+++ b/config.js
@@ -15,10 +15,24 @@ const CONFIG = {
         'grr.la',
         'pokemail.net',
         'spam4.me'
-    ]
+    ],
+    STATUS: {
+        ONLINE: {
+            text: 'Online',
+            class: 'online'
+        },
+        OFFLINE: {
+            text: 'Offline',
+            class: 'offline'
+        },
+        LOADING: {
+            text: 'Loading',
+            class: 'loading'
+        }
+    }
 };
 
 // Prevent modification of config
 Object.freeze(CONFIG);
 
-export default CONFIG; 
\ No newline at end of file
+export default CONFIG;
\ No newline at end of file
diff --git a/index.html b/index.html
index 6c8a053..d3bf9fb 100644
--- a/index.html
+++ b/index.html
@@ -42,6 +42,10 @@
                  ╚═╝   ╚══════╝╚═╝     ╚═╝╚═╝         ╚═╝     ╚═╝╚═╝  ╚═╝╚═╝╚══════╝
             </pre>
         </div>
+        <div class="system-status">
+          <div id="status-led" class="status-led offline"></div>
+          <span id="status-text">Offline</span>
+        </div>
       </div>
     </header>
 
@@ -138,6 +142,11 @@
       alert("⚠️ This project is purely for educational purposes. We do not allow illegal things to be done with this project and we are not responsible for any incidents that may occur. This project uses mail.gw's API for creating temporary emails. Use it legally and responsibly ⚠️");
     }
   </script>
+
+  <script>
+    alert("Hello, If you see the failed to load message, please clicked the 'New Address' button multiple times. If you see the failed to load message again, please contact me on GitHub or LinkedIn. Thank you for using my project. ❤️. I'm still developing this project. ");
+  </script>
+
   <script src="config.js" type="module"></script>
   <script src="api.js" type="module"></script>
   <script src="theme.js" type="module"></script>
diff --git a/style.css b/style.css
index 463f83b..3923342 100644
--- a/style.css
+++ b/style.css
@@ -55,8 +55,7 @@ body {
   flex-direction: column;
   gap: 2rem;
 }
-
-/* Header */
+/* **Header Styles** */
 header {
   text-align: center;
   padding: 2rem;
@@ -67,15 +66,109 @@ header {
   overflow: hidden;
 }
 
+/* **Header Content Styles** */
+.header-content {
+    display: flex;
+    flex-direction: column; /* Stack children vertically */
+    align-items: center;    /* Center horizontally */
+    justify-content: center; /* Center vertically */
+    padding: 2rem 0;        /* Add some vertical padding */
+    position: relative;     /* Establish a positioning context */
+}
+
+/* **ASCII Art Styles** */
 .ascii-art {
-  color: white;
-  font-size: 0.7rem;
-  line-height: 1.2;
-  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-  position: relative;
-  z-index: 1;
+    color: white;
+    font-size: 0.7rem;
+    line-height: 1.2;
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+    text-align: center;      /* Center the text within the container */
+    font-weight: bold;
+    padding: 1rem;           /* Add some padding around the ASCII art */
+    border-radius: 0.5rem;   /* Optional: Round the corners */
+    max-width: 100%;         /* Ensure it doesn't overflow */
+    word-wrap: break-word;   /* Handle long lines gracefully */
+    font-family: 'Courier New', Courier, monospace; /* Ensure monospace font */
+    transition: transform 0.3s ease; /* Optional: Add transition */
+}
+
+.ascii-art:hover {
+    transform: scale(1.05); /* Optional: Add hover effect */
+}
+
+/* **System Status Styles** */
+.system-status {
+    display: flex;
+    align-items: center;
+    margin-top: 1rem;        /* Space between ASCII art and status */
+}
+
+/* **Status LED Styles** */
+.status-led {
+    width: 15px;
+    height: 15px;
+    border-radius: 50%;
+    margin-right: 8px;
+    background-color: gray; /* Default color */
+    transition: background-color 0.3s ease;
+}
+
+.status-led.online {
+    background-color: #34D399; /* Green */
+}
+
+.status-led.offline {
+    background-color: #F87171; /* Red */
+}
+
+.status-led.loading {
+    background-color: #FCD34D; /* Yellow */
+}
+
+#status-text {
+    font-size: 14px;
+    color: #374151; /* Text color */
+}
+
+
+.email-modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
+}
+
+.email-modal-content {
+    background-color: #ffffff;
+    padding: 20px;
+    border-radius: 8px;
+    width: 80%;
+    max-width: 600px;
+    position: relative;
 }
 
+.close-btn {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    background: none;
+    border: none;
+    font-size: 20px;
+    cursor: pointer;
+}
+
+/* **Responsive Adjustments** */
+@media (max-width: 768px) {
+    .ascii-art {
+        font-size: 0.6rem; /* Adjust font size for smaller screens */
+    }
+}
 /* Theme Switch */
 .theme-switch {
   position: absolute;
@@ -465,6 +558,17 @@ footer {
   .app-container {
     padding: 1rem;
   }
+  
+  .ascii-art {
+    font-size: 0.5rem;
+    padding: 0;
+    text-align: left;
+    position: relative;
+    left: 0;
+    right: 0;
+    margin: 0 auto;
+  }
+
 
   .email-controls {
     grid-template-columns: 1fr;
@@ -731,3 +835,39 @@ button:hover .fa-wand-magic-sparkles {
   filter: brightness(1.2);
   transform: rotate(-10deg) scale(1.1);
 }
+
+
+@media (max-width: 400px) {
+  .ascii-art {
+    font-size: 0.3rem !important;
+
+  }
+
+  .status-led {
+    width: 10px;
+    height: 10px;
+    font-weight: bolder;
+  }
+
+  .header-content {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    margin-left: 0 !important;
+    font-weight: bolder;
+    width: 100%;
+    text-align: center;
+    padding: 0;
+    margin: 0;
+    position: relative;
+    left: 0;
+    right: 0;
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+    font-weight: bolder;
+    font-size: 0.8rem;
+    text-align: center;
+    justify-content: center;
+    align-items: center;
+  }
+}