diff --git a/assets/css/_page/_index.scss b/assets/css/_page/_index.scss
index 4aae9ba7..0d69d485 100644
--- a/assets/css/_page/_index.scss
+++ b/assets/css/_page/_index.scss
@@ -30,4 +30,5 @@
 @import "_archive";
 @import "_home";
 @import "_404";
+@import "_offline";
 @import "_friends";
diff --git a/assets/css/_page/_offline.scss b/assets/css/_page/_offline.scss
new file mode 100644
index 00000000..759bbf52
--- /dev/null
+++ b/assets/css/_page/_offline.scss
@@ -0,0 +1,20 @@
+#content-offline {
+  @include transform(translateY(30vh));
+  text-align: center;
+  
+  .offline-title {
+    font-size: 3.6rem;
+    vertical-align: text-bottom;
+  }
+  .offline-subtitle {
+    margin: 0.4rem 0;
+    font-size: 1rem;
+    font-weight: normal;
+    font-style: italic;
+    line-height: 100%;
+    color: #57606a;
+  }
+  .error-text {
+    font-size: 1.2rem;
+  }
+}
\ No newline at end of file
diff --git a/exampleSite/content/offline/index.en.md b/exampleSite/content/offline/index.en.md
new file mode 100644
index 00000000..b8126358
--- /dev/null
+++ b/exampleSite/content/offline/index.en.md
@@ -0,0 +1,3 @@
+---
+type: "offline"
+---
\ No newline at end of file
diff --git a/exampleSite/content/offline/index.md b/exampleSite/content/offline/index.md
deleted file mode 100644
index 7fedfd9c..00000000
--- a/exampleSite/content/offline/index.md
+++ /dev/null
@@ -1,35 +0,0 @@
----
-title: "離線 (Offline)"
-comment: false
----
-
-> 您沒有連接到 Internet，只有緩存的頁面可用。  
-> You are not connected to the Internet, only cached pages will be available.
-
-```bash
-    ███████    ███████████ ███████████ █████       █████ ██████   █████ ██████████
-  ███░░░░░███ ░░███░░░░░░█░░███░░░░░░█░░███       ░░███ ░░██████ ░░███ ░░███░░░░░█
- ███     ░░███ ░███   █ ░  ░███   █ ░  ░███        ░███  ░███░███ ░███  ░███  █ ░ 
-░███      ░███ ░███████    ░███████    ░███        ░███  ░███░░███░███  ░██████   
-░███      ░███ ░███░░░█    ░███░░░█    ░███        ░███  ░███ ░░██████  ░███░░█   
-░░███     ███  ░███  ░     ░███  ░     ░███      █ ░███  ░███  ░░█████  ░███ ░   █
- ░░░███████░   █████       █████       ███████████ █████ █████  ░░█████ ██████████
-   ░░░░░░░    ░░░░░       ░░░░░       ░░░░░░░░░░░ ░░░░░ ░░░░░    ░░░░░ ░░░░░░░░░░
-
- ▒█████    █████▒ █████▒██▓     ██▓ ███▄    █ ▓█████ 
-▒██▒  ██▒▓██   ▒▓██   ▒▓██▒    ▓██▒ ██ ▀█   █ ▓█   ▀ 
-▒██░  ██▒▒████ ░▒████ ░▒██░    ▒██▒▓██  ▀█ ██▒▒███   
-▒██   ██░░▓█▒  ░░▓█▒  ░▒██░    ░██░▓██▒  ▐▌██▒▒▓█  ▄ 
-░ ████▓▒░░▒█░   ░▒█░   ░██████▒░██░▒██░   ▓██░░▒████▒
-░ ▒░▒░▒░  ▒ ░    ▒ ░   ░ ▒░▓  ░░▓  ░ ▒░   ▒ ▒ ░░ ▒░ ░
-  ░ ▒ ▒░  ░      ░     ░ ░ ▒  ░ ▒ ░░ ░░   ░ ▒░ ░ ░  ░
-░ ░ ░ ▒   ░ ░    ░ ░     ░ ░    ▒ ░   ░   ░ ░    ░   
-    ░ ░                    ░  ░ ░           ░    ░  ░
-
-████▄ ▄████  ▄████  █    ▄█    ▄   ▄███▄   
-█   █ █▀   ▀ █▀   ▀ █    ██     █  █▀   ▀  
-█   █ █▀▀    █▀▀    █    ██ ██   █ ██▄▄    
-▀████ █      █      ███▄ ▐█ █ █  █ █▄   ▄▀ 
-       █      █         ▀ ▐ █  █ █ ▀███▀   
-        ▀      ▀            █   ██         
-```
\ No newline at end of file
diff --git a/exampleSite/content/offline/index.zh-cn.md b/exampleSite/content/offline/index.zh-cn.md
new file mode 100644
index 00000000..b8126358
--- /dev/null
+++ b/exampleSite/content/offline/index.zh-cn.md
@@ -0,0 +1,3 @@
+---
+type: "offline"
+---
\ No newline at end of file
diff --git a/exampleSite/static/_redirects b/exampleSite/static/_redirects
index 8e04d280..46b08555 100644
--- a/exampleSite/static/_redirects
+++ b/exampleSite/static/_redirects
@@ -1 +1 @@
-/zh-cn/* /zh-cn/404.html 404
+/zh-cn/* /zh-cn/404.html 404
\ No newline at end of file
diff --git a/i18n/en.toml b/i18n/en.toml
index 3f307ac0..2d4b80e1 100644
--- a/i18n/en.toml
+++ b/i18n/en.toml
@@ -155,6 +155,14 @@ other = "Page not found"
 other = "The page you're looking for doesn't exist. Sorry."
 # === 404.html ===
 
+# === offline ===
+[offlineTitle]
+other = "Offline"
+
+[offlineText]
+other = "You are not connected to the Internet, only cached pages will be available."
+# === offline ===
+
 # === shortcodes/admonition.html ===
 [note]
 other = "Note"
diff --git a/i18n/zh-CN.toml b/i18n/zh-CN.toml
index 50a662c3..b0c8aa0e 100644
--- a/i18n/zh-CN.toml
+++ b/i18n/zh-CN.toml
@@ -160,6 +160,14 @@ other = "页面没找到"
 other = "抱歉，您要查找的页面不存在。"
 # === 404.html ===
 
+# === offline ===
+[offlineTitle]
+other = "离线"
+
+[offlineText]
+other = "您没有连接到 Internet，只有缓存的页面可用。"
+# === offline ===
+
 # === shortcodes/admonition.html ===
 [note]
 other = "注意"
diff --git a/i18n/zh-TW.toml b/i18n/zh-TW.toml
index 6fcf678b..cf977995 100644
--- a/i18n/zh-TW.toml
+++ b/i18n/zh-TW.toml
@@ -160,6 +160,14 @@ other = "找不到網頁"
 other = "抱歉，您要查找的頁面不存在。"
 # === 404.html ===
 
+# === offline ===
+[offlineTitle]
+other = "離線"
+
+[offlineText]
+other = "您沒有連接到 Internet，只有緩存的頁面可用。"
+# === offline ===
+
 # === shortcodes/admonition.html ===
 [note]
 other = "Note"
diff --git a/layouts/offline/single.html b/layouts/offline/single.html
new file mode 100644
index 00000000..354796d1
--- /dev/null
+++ b/layouts/offline/single.html
@@ -0,0 +1,17 @@
+{{- define "title" }}
+  {{- T "offlineTitle" }} - {{ .Site.Title -}}
+{{- end -}}
+
+{{- define "content" -}}
+  <div class="page" id="content-offline">
+    <h1 class="offline-title animated pulse faster">{{- T "offlineTitle" -}}</h1>
+    <h2 class="offline-subtitle">
+      <i class="fa-stack fa-xs">
+        <i class="fas fa-wifi fa-stack-1x"></i>
+        <i class="fas fa-ban fa-stack-2x"></i>
+      </i>
+      <span>ERROR_INTERNET_DISCONNECTED</span>
+    </h2>
+    <p class="error-text">{{- T "offlineText" -}}</p>
+  </div>
+{{- end -}}
\ No newline at end of file