diff --git a/quartz/components/ReaderMode.tsx b/quartz/components/ReaderMode.tsx
index dac4053d..4b3165e6 100644
--- a/quartz/components/ReaderMode.tsx
+++ b/quartz/components/ReaderMode.tsx
@@ -2,25 +2,31 @@
 import readerModeScript from "./scripts/readermode.inline"
 import styles from "./styles/readermode.scss"
 import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
+import { i18n } from "../i18n"
 import { classNames } from "../util/lang"
 
-const ReaderMode: QuartzComponent = ({ displayClass }: QuartzComponentProps) => {
+const ReaderMode: QuartzComponent = ({ displayClass, cfg }: QuartzComponentProps) => {
   return (
     <button class={classNames(displayClass, "readermode")}>
       <svg
         xmlns="http://www.w3.org/2000/svg"
+        xmlnsXlink="http://www.w3.org/1999/xlink"
+        version="1.1"
         class="readerIcon"
-        viewBox="0 0 24 24"
-        fill="none"
+        fill="currentColor"
         stroke="currentColor"
-        stroke-width="2"
+        stroke-width="0.2"
         stroke-linecap="round"
         stroke-linejoin="round"
+        width="64px"
+        height="64px"
+        viewBox="0 0 24 24"
+        aria-label={i18n(cfg.locale).components.readerMode.title}
       >
-        <rect x="6" y="4" width="12" height="16" rx="1"></rect>
-        <line x1="9" y1="8" x2="15" y2="8"></line>
-        <line x1="9" y1="12" x2="15" y2="12"></line>
-        <line x1="9" y1="16" x2="13" y2="16"></line>
+        <title>{i18n(cfg.locale).components.readerMode.title}</title>
+        <g transform="translate(-1.8, -1.8) scale(1.15, 1.2)">
+          <path d="M8.9891247,2.5 C10.1384702,2.5 11.2209868,2.96705384 12.0049645,3.76669482 C12.7883914,2.96705384 13.8709081,2.5 15.0202536,2.5 L18.7549359,2.5 C19.1691495,2.5 19.5049359,2.83578644 19.5049359,3.25 L19.5046891,4.004 L21.2546891,4.00457396 C21.6343849,4.00457396 21.9481801,4.28672784 21.9978425,4.6528034 L22.0046891,4.75457396 L22.0046891,20.25 C22.0046891,20.6296958 21.7225353,20.943491 21.3564597,20.9931534 L21.2546891,21 L2.75468914,21 C2.37499337,21 2.06119817,20.7178461 2.01153575,20.3517706 L2.00468914,20.25 L2.00468914,4.75457396 C2.00468914,4.37487819 2.28684302,4.061083 2.65291858,4.01142057 L2.75468914,4.00457396 L4.50368914,4.004 L4.50444233,3.25 C4.50444233,2.87030423 4.78659621,2.55650904 5.15267177,2.50684662 L5.25444233,2.5 L8.9891247,2.5 Z M4.50368914,5.504 L3.50468914,5.504 L3.50468914,19.5 L10.9478955,19.4998273 C10.4513189,18.9207296 9.73864328,18.5588115 8.96709342,18.5065584 L8.77307039,18.5 L5.25444233,18.5 C4.87474657,18.5 4.56095137,18.2178461 4.51128895,17.8517706 L4.50444233,17.75 L4.50368914,5.504 Z M19.5049359,17.75 C19.5049359,18.1642136 19.1691495,18.5 18.7549359,18.5 L15.2363079,18.5 C14.3910149,18.5 13.5994408,18.8724714 13.0614828,19.4998273 L20.5046891,19.5 L20.5046891,5.504 L19.5046891,5.504 L19.5049359,17.75 Z M18.0059359,3.999 L15.0202536,4 L14.8259077,4.00692283 C13.9889509,4.06666544 13.2254227,4.50975805 12.7549359,5.212 L12.7549359,17.777 L12.7782651,17.7601316 C13.4923805,17.2719483 14.3447024,17 15.2363079,17 L18.0059359,16.999 L18.0056891,4.798 L18.0033792,4.75457396 L18.0056891,4.71 L18.0059359,3.999 Z M8.9891247,4 L6.00368914,3.999 L6.00599909,4.75457396 L6.00599909,4.75457396 L6.00368914,4.783 L6.00368914,16.999 L8.77307039,17 C9.57551536,17 10.3461406,17.2202781 11.0128313,17.6202194 L11.2536891,17.776 L11.2536891,5.211 C10.8200889,4.56369974 10.1361548,4.13636104 9.37521067,4.02745763 L9.18347055,4.00692283 L8.9891247,4 Z" />
+        </g>
       </svg>
     </button>
   )
diff --git a/quartz/components/styles/readermode.scss b/quartz/components/styles/readermode.scss
index 7d5de770..79332c3b 100644
--- a/quartz/components/styles/readermode.scss
+++ b/quartz/components/styles/readermode.scss
@@ -15,6 +15,7 @@
     width: 20px;
     height: 20px;
     top: calc(50% - 10px);
+    fill: var(--darkgray);
     stroke: var(--darkgray);
     transition: opacity 0.1s ease;
   }
diff --git a/quartz/i18n/locales/ar-SA.ts b/quartz/i18n/locales/ar-SA.ts
index 8463e2ff..a1979def 100644
--- a/quartz/i18n/locales/ar-SA.ts
+++ b/quartz/i18n/locales/ar-SA.ts
@@ -32,6 +32,9 @@ export default {
     explorer: {
       title: "المستعرض",
     },
+    readerMode: {
+      title: "وضع القارئ",
+    },
     footer: {
       createdWith: "أُنشئ باستخدام",
     },
diff --git a/quartz/i18n/locales/ca-ES.ts b/quartz/i18n/locales/ca-ES.ts
index aadbd415..1483d9c5 100644
--- a/quartz/i18n/locales/ca-ES.ts
+++ b/quartz/i18n/locales/ca-ES.ts
@@ -29,6 +29,9 @@ export default {
       lightMode: "Mode clar",
       darkMode: "Mode fosc",
     },
+    readerMode: {
+      title: "Mode lector",
+    },
     explorer: {
       title: "Explorador",
     },
diff --git a/quartz/i18n/locales/cs-CZ.ts b/quartz/i18n/locales/cs-CZ.ts
index bf089d13..87f19964 100644
--- a/quartz/i18n/locales/cs-CZ.ts
+++ b/quartz/i18n/locales/cs-CZ.ts
@@ -29,6 +29,9 @@ export default {
       lightMode: "Světlý režim",
       darkMode: "Tmavý režim",
     },
+    readerMode: {
+      title: "Režim čtečky",
+    },
     explorer: {
       title: "Procházet",
     },
diff --git a/quartz/i18n/locales/de-DE.ts b/quartz/i18n/locales/de-DE.ts
index 023d4be3..85a7353a 100644
--- a/quartz/i18n/locales/de-DE.ts
+++ b/quartz/i18n/locales/de-DE.ts
@@ -26,8 +26,11 @@ export default {
       noBacklinksFound: "Keine Backlinks gefunden",
     },
     themeToggle: {
-      lightMode: "Light Mode",
-      darkMode: "Dark Mode",
+      lightMode: "Heller Modus",
+      darkMode: "Dunkler Modus",
+    },
+    readerMode: {
+      title: "Lesemodus",
     },
     explorer: {
       title: "Explorer",
diff --git a/quartz/i18n/locales/definition.ts b/quartz/i18n/locales/definition.ts
index 25a8cd7f..ee1649ab 100644
--- a/quartz/i18n/locales/definition.ts
+++ b/quartz/i18n/locales/definition.ts
@@ -31,6 +31,9 @@ export interface Translation {
       lightMode: string
       darkMode: string
     }
+    readerMode: {
+      title: string
+    }
     explorer: {
       title: string
     }
diff --git a/quartz/i18n/locales/en-GB.ts b/quartz/i18n/locales/en-GB.ts
index 5388b032..80e52bf3 100644
--- a/quartz/i18n/locales/en-GB.ts
+++ b/quartz/i18n/locales/en-GB.ts
@@ -29,6 +29,9 @@ export default {
       lightMode: "Light mode",
       darkMode: "Dark mode",
     },
+    readerMode: {
+      title: "Reader mode",
+    },
     explorer: {
       title: "Explorer",
     },
diff --git a/quartz/i18n/locales/en-US.ts b/quartz/i18n/locales/en-US.ts
index 22cf31e0..e1111e9a 100644
--- a/quartz/i18n/locales/en-US.ts
+++ b/quartz/i18n/locales/en-US.ts
@@ -29,6 +29,9 @@ export default {
       lightMode: "Light mode",
       darkMode: "Dark mode",
     },
+    readerMode: {
+      title: "Reader mode",
+    },
     explorer: {
       title: "Explorer",
     },
diff --git a/quartz/i18n/locales/es-ES.ts b/quartz/i18n/locales/es-ES.ts
index c4a57aa1..b7e425e8 100644
--- a/quartz/i18n/locales/es-ES.ts
+++ b/quartz/i18n/locales/es-ES.ts
@@ -29,6 +29,9 @@ export default {
       lightMode: "Modo claro",
       darkMode: "Modo oscuro",
     },
+    readerMode: {
+      title: "Modo lector",
+    },
     explorer: {
       title: "Explorador",
     },
diff --git a/quartz/i18n/locales/fa-IR.ts b/quartz/i18n/locales/fa-IR.ts
index 5bfef5ae..0300174f 100644
--- a/quartz/i18n/locales/fa-IR.ts
+++ b/quartz/i18n/locales/fa-IR.ts
@@ -29,6 +29,9 @@ export default {
       lightMode: "حالت روشن",
       darkMode: "حالت تاریک",
     },
+    readerMode: {
+      title: "حالت خواندن",
+    },
     explorer: {
       title: "مطالب",
     },
diff --git a/quartz/i18n/locales/fi-FI.ts b/quartz/i18n/locales/fi-FI.ts
index f173afae..19e102a3 100644
--- a/quartz/i18n/locales/fi-FI.ts
+++ b/quartz/i18n/locales/fi-FI.ts
@@ -29,6 +29,9 @@ export default {
       lightMode: "Vaalea tila",
       darkMode: "Tumma tila",
     },
+    readerMode: {
+      title: "Lukijatila",
+    },
     explorer: {
       title: "Selain",
     },
diff --git a/quartz/i18n/locales/fr-FR.ts b/quartz/i18n/locales/fr-FR.ts
index ef43fa87..f6df309a 100644
--- a/quartz/i18n/locales/fr-FR.ts
+++ b/quartz/i18n/locales/fr-FR.ts
@@ -29,6 +29,9 @@ export default {
       lightMode: "Mode clair",
       darkMode: "Mode sombre",
     },
+    readerMode: {
+      title: "Mode lecture",
+    },
     explorer: {
       title: "Explorateur",
     },
diff --git a/quartz/i18n/locales/hu-HU.ts b/quartz/i18n/locales/hu-HU.ts
index 066b7770..2a4f0772 100644
--- a/quartz/i18n/locales/hu-HU.ts
+++ b/quartz/i18n/locales/hu-HU.ts
@@ -29,6 +29,9 @@ export default {
       lightMode: "Világos mód",
       darkMode: "Sötét mód",
     },
+    readerMode: {
+      title: "Olvasó mód",
+    },
     explorer: {
       title: "Fájlböngésző",
     },
diff --git a/quartz/i18n/locales/it-IT.ts b/quartz/i18n/locales/it-IT.ts
index c8c59735..be25bb64 100644
--- a/quartz/i18n/locales/it-IT.ts
+++ b/quartz/i18n/locales/it-IT.ts
@@ -29,6 +29,9 @@ export default {
       lightMode: "Tema chiaro",
       darkMode: "Tema scuro",
     },
+    readerMode: {
+      title: "Modalità lettura",
+    },
     explorer: {
       title: "Esplora",
     },
diff --git a/quartz/i18n/locales/ja-JP.ts b/quartz/i18n/locales/ja-JP.ts
index 9581b5ed..3c30124d 100644
--- a/quartz/i18n/locales/ja-JP.ts
+++ b/quartz/i18n/locales/ja-JP.ts
@@ -29,6 +29,9 @@ export default {
       lightMode: "ライトモード",
       darkMode: "ダークモード",
     },
+    readerMode: {
+      title: "リーダーモード",
+    },
     explorer: {
       title: "エクスプローラー",
     },
diff --git a/quartz/i18n/locales/ko-KR.ts b/quartz/i18n/locales/ko-KR.ts
index 9be08d98..1bca096b 100644
--- a/quartz/i18n/locales/ko-KR.ts
+++ b/quartz/i18n/locales/ko-KR.ts
@@ -29,6 +29,9 @@ export default {
       lightMode: "라이트 모드",
       darkMode: "다크 모드",
     },
+    readerMode: {
+      title: "리더 모드",
+    },
     explorer: {
       title: "탐색기",
     },
diff --git a/quartz/i18n/locales/lt-LT.ts b/quartz/i18n/locales/lt-LT.ts
index d48e593c..690960c3 100644
--- a/quartz/i18n/locales/lt-LT.ts
+++ b/quartz/i18n/locales/lt-LT.ts
@@ -29,6 +29,9 @@ export default {
       lightMode: "Šviesus Režimas",
       darkMode: "Tamsus Režimas",
     },
+    readerMode: {
+      title: "Modalità lettore",
+    },
     explorer: {
       title: "Naršyklė",
     },
diff --git a/quartz/i18n/locales/nb-NO.ts b/quartz/i18n/locales/nb-NO.ts
index 5823b19b..0e415221 100644
--- a/quartz/i18n/locales/nb-NO.ts
+++ b/quartz/i18n/locales/nb-NO.ts
@@ -29,6 +29,9 @@ export default {
       lightMode: "Lys modus",
       darkMode: "Mørk modus",
     },
+    readerMode: {
+      title: "Læsemodus",
+    },
     explorer: {
       title: "Utforsker",
     },
diff --git a/quartz/i18n/locales/nl-NL.ts b/quartz/i18n/locales/nl-NL.ts
index ccbafa7b..8ab3b072 100644
--- a/quartz/i18n/locales/nl-NL.ts
+++ b/quartz/i18n/locales/nl-NL.ts
@@ -29,6 +29,9 @@ export default {
       lightMode: "Lichte modus",
       darkMode: "Donkere modus",
     },
+    readerMode: {
+      title: "Leesmodus",
+    },
     explorer: {
       title: "Verkenner",
     },
diff --git a/quartz/i18n/locales/pl-PL.ts b/quartz/i18n/locales/pl-PL.ts
index 7fa0cd47..11033e30 100644
--- a/quartz/i18n/locales/pl-PL.ts
+++ b/quartz/i18n/locales/pl-PL.ts
@@ -29,6 +29,9 @@ export default {
       lightMode: "Trzyb jasny",
       darkMode: "Tryb ciemny",
     },
+    readerMode: {
+      title: "Tryb czytania",
+    },
     explorer: {
       title: "Przeglądaj",
     },
diff --git a/quartz/i18n/locales/pt-BR.ts b/quartz/i18n/locales/pt-BR.ts
index c7b6bfb6..e431d8ed 100644
--- a/quartz/i18n/locales/pt-BR.ts
+++ b/quartz/i18n/locales/pt-BR.ts
@@ -29,6 +29,9 @@ export default {
       lightMode: "Tema claro",
       darkMode: "Tema escuro",
     },
+    readerMode: {
+      title: "Modo leitor",
+    },
     explorer: {
       title: "Explorador",
     },
diff --git a/quartz/i18n/locales/ro-RO.ts b/quartz/i18n/locales/ro-RO.ts
index 2de1c8cd..007d9016 100644
--- a/quartz/i18n/locales/ro-RO.ts
+++ b/quartz/i18n/locales/ro-RO.ts
@@ -29,6 +29,9 @@ export default {
       lightMode: "Modul luminos",
       darkMode: "Modul întunecat",
     },
+    readerMode: {
+      title: "Modul de citire",
+    },
     explorer: {
       title: "Explorator",
     },
diff --git a/quartz/i18n/locales/ru-RU.ts b/quartz/i18n/locales/ru-RU.ts
index 18e08173..5534d140 100644
--- a/quartz/i18n/locales/ru-RU.ts
+++ b/quartz/i18n/locales/ru-RU.ts
@@ -29,6 +29,9 @@ export default {
       lightMode: "Светлый режим",
       darkMode: "Тёмный режим",
     },
+    readerMode: {
+      title: "Режим чтения",
+    },
     explorer: {
       title: "Проводник",
     },
diff --git a/quartz/i18n/locales/th-TH.ts b/quartz/i18n/locales/th-TH.ts
index 4ea84868..07301319 100644
--- a/quartz/i18n/locales/th-TH.ts
+++ b/quartz/i18n/locales/th-TH.ts
@@ -29,6 +29,9 @@ export default {
       lightMode: "โหมดสว่าง",
       darkMode: "โหมดมืด",
     },
+    readerMode: {
+      title: "โหมดอ่าน",
+    },
     explorer: {
       title: "รายการหน้า",
     },
diff --git a/quartz/i18n/locales/tr-TR.ts b/quartz/i18n/locales/tr-TR.ts
index a3805d1a..9c2d6d4a 100644
--- a/quartz/i18n/locales/tr-TR.ts
+++ b/quartz/i18n/locales/tr-TR.ts
@@ -29,6 +29,9 @@ export default {
       lightMode: "Açık mod",
       darkMode: "Koyu mod",
     },
+    readerMode: {
+      title: "Okuma modu",
+    },
     explorer: {
       title: "Gezgin",
     },
diff --git a/quartz/i18n/locales/uk-UA.ts b/quartz/i18n/locales/uk-UA.ts
index 469de4f8..ac2a2485 100644
--- a/quartz/i18n/locales/uk-UA.ts
+++ b/quartz/i18n/locales/uk-UA.ts
@@ -29,6 +29,9 @@ export default {
       lightMode: "Світлий режим",
       darkMode: "Темний режим",
     },
+    readerMode: {
+      title: "Режим читання",
+    },
     explorer: {
       title: "Провідник",
     },
diff --git a/quartz/i18n/locales/vi-VN.ts b/quartz/i18n/locales/vi-VN.ts
index 39a8fbcc..26a58a50 100644
--- a/quartz/i18n/locales/vi-VN.ts
+++ b/quartz/i18n/locales/vi-VN.ts
@@ -29,6 +29,9 @@ export default {
       lightMode: "Sáng",
       darkMode: "Tối",
     },
+    readerMode: {
+      title: "Chế độ đọc",
+    },
     explorer: {
       title: "Trong bài này",
     },
diff --git a/quartz/i18n/locales/zh-CN.ts b/quartz/i18n/locales/zh-CN.ts
index b710db53..09951bbb 100644
--- a/quartz/i18n/locales/zh-CN.ts
+++ b/quartz/i18n/locales/zh-CN.ts
@@ -29,6 +29,9 @@ export default {
       lightMode: "亮色模式",
       darkMode: "暗色模式",
     },
+    readerMode: {
+      title: "阅读模式",
+    },
     explorer: {
       title: "探索",
     },
diff --git a/quartz/i18n/locales/zh-TW.ts b/quartz/i18n/locales/zh-TW.ts
index f0db0bf0..4e784c06 100644
--- a/quartz/i18n/locales/zh-TW.ts
+++ b/quartz/i18n/locales/zh-TW.ts
@@ -29,6 +29,9 @@ export default {
       lightMode: "亮色模式",
       darkMode: "暗色模式",
     },
+    readerMode: {
+      title: "閱讀模式",
+    },
     explorer: {
       title: "探索",
     },