diff --git a/config/custom-error-page/error-page.conf b/config/custom-error-page/error-page.conf
index e819e63..71706cf 100644
--- a/config/custom-error-page/error-page.conf
+++ b/config/custom-error-page/error-page.conf
@@ -18,4 +18,9 @@ location /inter-roman-var.woff2 {
     root /usr/share/nginx/html/custom-error-page/;
 }
 
+location /bad_gateway_meme.png {
+    auth_basic off;
+    root /usr/share/nginx/html/custom-error-page/;
+}
+
 error_page 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 421 422 423 424 425 426 428 429 431 451 494 495 496 497 500 501 502 503 504 505 506 507 508 510 511 /custom-error-page.html;
diff --git a/templates/custom-error-page/bad_gateway_meme.png b/templates/custom-error-page/bad_gateway_meme.png
new file mode 100644
index 0000000..c71cd13
Binary files /dev/null and b/templates/custom-error-page/bad_gateway_meme.png differ
diff --git a/templates/custom-error-page/custom-error-page.css b/templates/custom-error-page/custom-error-page.css
index 4b95be7..b466b33 100644
--- a/templates/custom-error-page/custom-error-page.css
+++ b/templates/custom-error-page/custom-error-page.css
@@ -43,6 +43,22 @@ html {
     justify-content: center;
     align-items: center;
 }
+/* Define individual background color for http status codes */
+div[class*='status-1'] {
+    background-color: #78909C !important;
+}
+div[class*='status-2'] {
+    background-color: #1e88e5 !important;
+}
+div[class*='status-3'] {
+    background-color: #f44336 !important;
+}
+div[class*='status-4'] {
+    background-color: #f44336 !important;
+}
+div[class*='status-5'] {
+    background-color: #f1c40f !important;
+}
 @media (max-width: 1023px) {
     .left svg {
         min-height: 200px;
diff --git a/templates/custom-error-page/custom-error-page.html b/templates/custom-error-page/custom-error-page.html
index 76d006d..bebd07b 100644
--- a/templates/custom-error-page/custom-error-page.html
+++ b/templates/custom-error-page/custom-error-page.html
@@ -13,7 +13,7 @@
 
 <body>
 <div class="container">
-    <div class="left">
+    <div class="left status-<!--# echo var="status" -->">
         <svg
             width="300"
             height="300"
@@ -36,19 +36,36 @@ <h1 class="code">
                 <!--# echo var="status_text" default="Something went wrong" -->
             </div>
             <div class="description">
-                <!--# if expr="$status = 404" -->
-                The page you were looking for may have been deleted or
-                moved.
+                <!--# if expr="$status = 502" -->
+                <img src="/bad_gateway_meme.png" />
+                <!--# endif -->
+                <!--# if expr="$status = 401" -->
+                Your access to this resource is denied<br>
+                We could not verify that you are authorized to access this resource.
+                <!--# elif expr="$status = 403" -->
+                Sorry, but you don't have permission to access this resource.
+                <!--# elif expr="$status = 404" -->
+                The page you were looking for may have been deleted or moved.
                 <!--# elif expr="$status = /4\d\d/" -->
-                Your browser sent a request that the server was unable
-                to process.
+                Your browser sent a request that the server was unable to process.
+                <!--# elif expr="$status = 503" -->
+                Sorry, our site is temporarily unavailable.<br>
+                The server is temporarily unable to service your request due to maintenance downtime or capacity problem.<br>
+                Please try again in a few minutes.
+                <!--# elif expr="$status = 504" -->
+                Sorry, our site is currently experiencing errors.<br>
+                Our engineers are working to resolve this issue.<br>
+                Please try accessing this resource again in a few minutes.
                 <!--# elif expr="$status = /5\d\d/" -->
-                The server encountered an error and could not complete
-                your request. Please try again later.
+                Sorry, our site is currently experiencing technical difficulties.<br>
+                Our engineers are working to resolve this issue<br>
                 <!--# else -->
                 Something went wrong while trying to display this page.
                 Please try again later.
                 <!--# endif -->
+                <!--# if expr="$status = /5\d\d/" -->
+                <div>Refreshing page in <b id="countdown"></b> seconds</div>
+                <!--# endif -->
             </div>
             <!--# if expr="$status = 404" -->
             <div class="button-container">
@@ -56,10 +73,23 @@ <h1 class="code">
             </div>
             <!--# endif -->
             <div class="footer">
-                Nginx at <!--# echo var="host" default="localhost" -->
+                <!--# echo var="host" default="localhost" -->
             </div>
         </div>
     </div>
 </div>
+<!--# if expr="$status = /5\d\d/" -->
+<script>
+
+    function countdown(remaining) {
+        if(remaining === 0) location.reload(true);
+        if(remaining > 0){
+            document.getElementById('countdown').innerHTML = remaining;
+            setTimeout(() => { countdown(remaining - 1); }, 1000);
+        }
+    }
+    countdown(10);
+</script>
+<!--# endif -->
 </body>
 </html>
