diff --git a/templates/connection.html b/templates/connection.html
new file mode 100644
index 0000000..5ddd133
--- /dev/null
+++ b/templates/connection.html
@@ -0,0 +1,459 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="robots" content="nofollow,noarchive,noindex">
+  <title>{{ code }} | {{ message }}</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="title" content="{{ code }}: {{ message }}">
+  <meta name="description" content="{{ description }}">
+  <meta property="og:title" content="{{ code }}: {{ message }}">
+  <meta property="og:description" content="{{ description }}">
+  <meta property="twitter:title" content="{{ code }}: {{ message }}">
+  <meta property="twitter:description" content="{{ description }}">
+  <style>
+    :root {
+      --color-bg-primary: #fff;
+      --color-text-primary: #000;
+      --color-text-secondary: #575958;
+      --ui-card-color-bg: #f2f2f2;
+      --color-text-ok: #137333;
+      --color-bg-ok: #e6f4ea;
+      --color-text-error: #c5221f;
+      --color-bg-error: #fce8e6;
+      --color-text-warning: #b05a00;
+      --color-bg-warning: #fef7e0;
+      --icon-size: 48px;
+    }
+
+    @media (prefers-color-scheme: dark) {
+      :root {
+        --color-bg-primary: #111;
+        --color-text-primary: rgba(255, 255, 255, 0.86);
+        --color-text-secondary: rgba(255, 255, 255, 0.4);
+        --ui-card-color-bg: rgba(40, 40, 40, 0.73);
+        --color-bg-ok: #07220f;
+        --color-bg-error: #270501;
+        --color-bg-warning: #392605;
+      }
+    }
+
+    /** Idea author: https://github.com/186526/CloudflareCustomErrorPage */
+    html, body {
+      margin: 0;
+      padding: 0;
+      min-height: 100%;
+      height: 100%;
+      color: var(--color-text-primary);
+      background-color: var(--color-bg-primary);
+      font-family: sans-serif;
+      font-size: 16px;
+    }
+
+    @media screen and (min-width: 2000px) {
+      html, body {
+        font-size: 20px;
+      }
+    }
+
+    body {
+      margin: 2em 2em;
+    }
+
+    header {
+      margin-left: 1em;
+    }
+
+    header .error-code {
+      font-size: 3.2em;
+      font-family: monospace;
+      font-weight: 400;
+      margin: 0 0 0 10px;
+    }
+
+    header .error-description {
+      font-family: sans-serif;
+      font-size: 1.4em;
+      color: var(--color-text-secondary);
+      margin: 0 0 0 10px;
+    }
+
+    code {
+      font-family: monospace;
+    }
+
+    .status {
+      margin-top: 2.5em;
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .card {
+      background-color: var(--ui-card-color-bg);
+      padding: 2em;
+      margin: 1em 1em;
+      min-height: 3em;
+      border-radius: 9px;
+      flex-grow: 1;
+    }
+
+    .arrows svg {
+      fill: var(--color-text-secondary);
+    }
+
+    .icon svg {
+      width: var(--icon-size);
+      height: auto;
+      fill: var(--color-text-primary);
+    }
+
+    .card.ok {
+      background-color: var(--color-bg-ok);
+    }
+
+    .card.ok .status-text {
+      color: var(--color-text-ok);
+    }
+
+    .card.ok svg {
+      fill: var(--color-text-ok);
+    }
+
+    .card.error {
+      background-color: var(--color-bg-error);
+    }
+
+    .card.error .status-text {
+      color: var(--color-text-error);
+    }
+
+    .card.error svg {
+      fill: var(--color-text-error);
+    }
+
+    .card.warning {
+      background-color: var(--color-bg-warning);
+    }
+
+    .card.warning .status-text {
+      color: var(--color-text-warning);
+    }
+
+    .card.warning svg {
+      fill: var(--color-text-warning);
+    }
+
+    .card .caption {
+      font-size: 1.37em;
+    }
+
+    .card .status-text, .reason p {
+      margin: 0;
+      font-family: sans-serif;
+    }
+
+    .reason p {
+      line-height: 125%;
+    }
+
+    a {
+      text-decoration: none;
+      color: #1967d2;
+    }
+
+    .reason {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      justify-content: space-between;
+      align-items: baseline;
+    }
+
+    .reason > * {
+      display: block;
+      margin: 1em;
+      flex-grow: 1;
+      max-width: 40%;
+    }
+
+    .reason h2 {
+      font-size: 1.45em;
+      margin: 0 0 .6em 0;
+      font-weight: normal;
+    }
+
+    footer {
+      margin: 1em;
+      color: var(--color-text-secondary);
+    }
+
+    /* {{ if show_details }} */
+    footer .details {
+      margin-top: 20px;
+    }
+
+    footer .details ul {
+      padding: 0;
+      font-size: 0.7em;
+      list-style: none;
+    }
+
+    footer .details code {
+      padding-left: 0.3em;
+    }
+    /* {{ end }} */
+
+    @media screen and (max-width: 820px) {
+      .arrows {
+        display: none;
+      }
+    }
+
+    @media screen and (max-width: 480px) {
+      .reason > * {
+        max-width: 100%;
+      }
+    }
+
+    @media screen and (min-width: 768px) {
+      body {
+        margin: 8% 10%;
+      }
+
+      header > * {
+        display: inline-block;
+        margin-left: 1%;
+      }
+    }
+  </style>
+</head>
+<body>
+<header>
+  <h1 class="error-code">{{ code }}</h1>
+  <p class="error-description">{{ message }}</p>
+</header>
+<div class="status">
+  <div class="card warning" id="client-status-card">
+    <i class="icon">
+      <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
+        <path d="M0 0h24v24H0V0z" fill="none"/>
+        <path d="M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.89-2-2-2zm0 14H5V8h14v10z"/>
+      </svg>
+    </i>
+    <div class="caption" data-l10n>Your Client</div>
+    <p class="status-text" data-l10n>Unknown</p>
+  </div>
+
+  <div class="arrows">
+    <svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" fill="#000000">
+      <defs>
+        <symbol id="arrows-horizontal" viewBox="0 0 24 24">
+          <rect fill="none" height="24" width="24" x="0"/>
+          <polygon points="7.41,13.41 6,12 2,16 6,20 7.41,18.59 5.83,17 21,17 21,15 5.83,15"/>
+          <polygon points="16.59,10.59 18,12 22,8 18,4 16.59,5.41 18.17,7 3,7 3,9 18.17,9"/>
+        </symbol>
+      </defs>
+      <use href="#arrows-horizontal"/>
+    </svg>
+  </div>
+
+  <div class="card ok" id="network-status-card">
+    <i class="icon">
+      <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
+        <path d="M0 0h24v24H0V0z" fill="none"/>
+        <path d="M12 6c2.62 0 4.88 1.86 5.39 4.43l.3 1.5 1.53.11c1.56.1 2.78 1.41 2.78 2.96 0 1.65-1.35 3-3 3H6c-2.21
+                 0-4-1.79-4-4 0-2.05 1.53-3.76 3.56-3.97l1.07-.11.5-.95C8.08 7.14 9.94 6 12 6m0-2C9.11 4 6.6 5.64 5.35
+                 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96C18.67
+                 6.59 15.64 4 12 4z"/>
+      </svg>
+    </i>
+    <div class="caption" data-l10n>Network</div>
+    <p class="status-text" data-l10n>Working</p>
+  </div>
+
+  <div class="arrows">
+    <svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" fill="#000000">
+      <use href="#arrows-horizontal"/>
+    </svg>
+  </div>
+
+  <div class="card warning" id="server-status-card">
+    <i class="icon">
+      <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
+        <path d="M0 0h24v24H0V0z" fill="none"/>
+        <path d="M19 15v4H5v-4h14m1-2H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1v-6c0-.55-.45-1-1-1zM7
+        18.5c-.82 0-1.5-.67-1.5-1.5s.68-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM19 5v4H5V5h14m1-2H4c-.55 0-1
+        .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zM7 8.5c-.82 0-1.5-.67-1.5-1.5S6.18 5.5 7
+        5.5s1.5.68 1.5 1.5S7.83 8.5 7 8.5z"/>
+      </svg>
+    </i>
+    <div class="caption" data-l10n>Web Server</div>
+    <p class="status-text" data-l10n>Unknown</p>
+  </div>
+</div>
+<div class="reason">
+  <div class="what-happened">
+    <h2 data-l10n>What happened?</h2>
+    <p class="description" data-l10n>{{ description }}</p>
+  </div>
+  <div class="what-can-i-do">
+    <h2 data-l10n>What can I do?</h2>
+    <p class="description" data-l10n>Please try again in a few minutes</p>
+  </div>
+</div>
+<footer>
+  <!-- {{- if show_details -}} -->
+  <div class="details">
+    <ul>
+      <!-- {{- if host -}} -->
+      <li><span data-l10n>Host</span>: <code>{{ host }}</code></li>
+      <!-- {{- end }}{{ if original_uri -}} -->
+      <li><span data-l10n>Original URI</span>: <code>{{ original_uri }}</code></li>
+      <!-- {{- end }}{{ if forwarded_for -}} -->
+      <li><span data-l10n>Forwarded for</span>: <code>{{ forwarded_for }}</code></li>
+      <!-- {{- end }}{{ if namespace -}} -->
+      <li><span data-l10n>Namespace</span>: <code>{{ namespace }}</code></li>
+      <!-- {{- end }}{{ if ingress_name -}} -->
+      <li><span data-l10n>Ingress name</span>: <code>{{ ingress_name }}</code></li>
+      <!-- {{- end }}{{ if service_name -}} -->
+      <li><span data-l10n>Service name</span>: <code>{{ service_name }}</code></li>
+      <!-- {{- end }}{{ if service_port -}} -->
+      <li><span data-l10n>Service port</span>: <code>{{ service_port }}</code></li>
+      <!-- {{- end }}{{ if request_id -}} -->
+      <li><span data-l10n>Request ID</span>: <code>{{ request_id }}</code></li>
+      <!-- {{- end -}} -->
+      <li><span data-l10n>Timestamp</span>: <code>{{ now.Unix }}</code></li>
+    </ul>
+  </div>
+  <!-- {{- end -}} -->
+</footer>
+<script>
+  const errorCode = parseInt(`{{ code }}`, 10);
+
+  if (errorCode && !isNaN(errorCode)) {
+    /**
+     * @param {HTMLElement} $card
+     * @param { {isOk?: boolean, isWarning?: boolean, isError?: boolean} } state
+     * @param {string} statusText
+     */
+    const setCardState = ($card, state, statusText) => {
+      const [okClass, warnClass, errClass] = ['ok', 'warning', 'error'];
+      const $statusText = $card.querySelectorAll('.status-text');
+
+      switch (true) {
+        case state.isOk === true:
+          $card.classList.remove(errClass, warnClass);
+          $card.classList.add(okClass);
+          $statusText.forEach(($statusText) => $statusText.innerText = statusText);
+          break;
+
+        case state.isWarning === true:
+          $card.classList.remove(okClass, errClass);
+          $card.classList.add(warnClass);
+          $statusText.forEach(($statusText) => $statusText.innerText = statusText);
+          break;
+
+        case state.isError === true:
+          $card.classList.remove(okClass, warnClass);
+          $card.classList.add(errClass);
+          $statusText.forEach(($statusText) => $statusText.innerText = statusText);
+          break;
+      }
+    };
+
+    /** @param { {whatHappened?: string, whatToDo?: string} } reasons */
+    const setReasons = (reasons) => {
+      const descSelector = '.description';
+
+      [...document.getElementsByClassName('what-happened')].forEach(($el) => {
+        if (typeof reasons.whatHappened === 'string' && reasons.whatHappened.length > 0) {
+          [...$el.querySelectorAll(descSelector)].forEach(($desc) => $desc.innerText = reasons.whatHappened);
+        } else {
+          $el.remove();
+        }
+      });
+
+      [...document.getElementsByClassName('what-can-i-do')].forEach(($el) => {
+        if (typeof reasons.whatToDo === 'string' && reasons.whatToDo.length > 0) {
+          [...$el.querySelectorAll(descSelector)].forEach(($desc) => $desc.innerText = reasons.whatToDo);
+        } else {
+          $el.remove();
+        }
+      });
+    };
+
+    /**
+     * @param {string} text
+     */
+    const setErrorDescription = function (text) {
+      [...document.getElementsByClassName('error-description')].forEach(($el) => $el.innerHTML = text);
+    };
+
+    const message = `{{ message }}`.trim();
+    const cards = {
+      $client: document.getElementById('client-status-card'),
+      $network: document.getElementById('network-status-card'),
+      $server: document.getElementById('server-status-card'),
+    };
+
+    let whatToDo = 'Please try again in a few minutes';
+
+    switch (true) {
+      case errorCode >= 400 && errorCode <= 499:
+        switch (errorCode) {
+          case 400:
+          case 405:
+          case 411:
+          case 413:
+            whatToDo = 'Please try to change the request method, headers, payload, or URL';
+            break;
+          case 401:
+          case 403:
+          case 407:
+            whatToDo = 'Please check your authorization data';
+            break;
+          case 404:
+            whatToDo = 'Please double-check the URL and try again';
+            break;
+          case 409:
+          case 410:
+          case 418:
+            whatToDo = '¯\\_(ツ)_/¯';
+            break;
+        }
+
+        setErrorDescription(`<span data-l10n>${message}</span> (<span data-l10n>client-side error</span>)`);
+        setCardState(cards.$client, {isError: true}, message)
+        setCardState(cards.$network, {isOk: true}, 'Working')
+        setCardState(cards.$server, {isOk: true}, 'Working')
+        break;
+
+      case errorCode >= 500 && errorCode <= 599:
+        setErrorDescription(`<span data-l10n>${message}</span> (<span data-l10n>server-side error</span>)`);
+        setCardState(cards.$client, {isOk: true}, 'Working')
+        setCardState(cards.$network, {isOk: true}, 'Working')
+        setCardState(cards.$server, {isError: true}, message)
+        break;
+
+      default:
+        setErrorDescription(message);
+        setCardState(cards.$client, {isWarning: true}, 'Unknown')
+        setCardState(cards.$network, {isOk: true}, 'Working')
+        setCardState(cards.$server, {isWarning: true}, 'Unknown')
+        break;
+    }
+
+    setReasons({whatHappened: `{{ description }}`.trim(), whatToDo: whatToDo.trim()});
+  } else {
+    console.warn('Cannot parse the error code:', errorCode);
+  }
+</script>
+
+<!-- {{- if l10n_enabled -}} -->
+<script> // {{ l10nScript }}</script>
+<!-- {{- end -}} -->
+</body>
+</html>
