diff --git a/quartz/components/ReaderMode.tsx b/quartz/components/ReaderMode.tsx
index dac4053..4b3165e 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 7d5de77..79332c3 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 8463e2f..a1979de 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 aadbd41..1483d9c 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 bf089d1..87f1996 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 023d4be..85a7353 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 25a8cd7..ee1649a 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 5388b03..80e52bf 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 22cf31e..e1111e9 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 c4a57aa..b7e425e 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 5bfef5a..0300174 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 f173afa..19e102a 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 ef43fa8..f6df309 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 066b777..2a4f077 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 c8c5973..be25bb6 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 9581b5e..3c30124 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 9be08d9..1bca096 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 d48e593..690960c 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 5823b19..0e41522 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 ccbafa7..8ab3b07 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 7fa0cd4..11033e3 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 c7b6bfb..e431d8e 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 2de1c8c..007d901 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 18e0817..5534d14 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 4ea8486..0730131 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 a3805d1..9c2d6d4 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 469de4f..ac2a248 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 39a8fbc..26a58a5 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 b710db5..09951bb 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 f0db0bf..4e784c0 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: "探索",
     },