diff --git a/web/public/css/style.css b/web/public/css/style.css
index 96ff466..db18cc2 100644
--- a/web/public/css/style.css
+++ b/web/public/css/style.css
@@ -13,8 +13,8 @@
     --border-light: #e5e7eb;
     --text: #111827;
     --text-secondary: #6b7280;
-    --primary: #2563eb;
-    --primary-hover: #1d4ed8;
+    --primary: #01a7c4;
+    --primary-hover: #01a7c4;
     --primary-light: #eff6ff;
     --error-bg: #fef2f2;
     --error-border: #fca5a5;
@@ -30,13 +30,17 @@
 }
 
 body {
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
+    font-family: "Google Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif !important;
     background: var(--bg);
     color: var(--text);
     line-height: 1.6;
     -webkit-font-smoothing: antialiased;
 }
 
+button {
+    font-family: "Google Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif !important;
+}
+
 main {
     max-width: 640px;
     margin: 0 auto;
@@ -56,23 +60,34 @@ h1 {
     letter-spacing: -0.02em;
 }
 
+#connect-unsupported-hint {
+    margin-top: 20px;
+    color: var(--error-text);
+}
+
+#connect-unsupported-hint a {
+    color: var(--error-text);
+    text-decoration: underline;
+}
+
 .hero-accent {
     color: var(--primary);
     font-weight: 600;
 }
 
 .beta-pill {
-    font-size: 0.55rem;
+    font-size: 0.7rem;
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.05em;
-    background: var(--error-text);
+    background: var(--primary);
     color: #fff;
-    padding: 0.15rem 0.5rem;
+    padding: 0.35rem 0.7rem;
     border-radius: 10px;
     vertical-align: middle;
     position: relative;
     top: -0.15rem;
+    margin-left: 5px;
 }
 
 .subtitle {
@@ -238,17 +253,25 @@ h2 {
     line-height: 1.5;
 }
 
+.mode-card-title {
+    position: relative;
+}
+
 .recommended-pill {
+    position: absolute;
+    top: -8px;
+    right: -20px;
     margin-left: auto;
     font-size: 10px;
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.04em;
-    background: var(--success-text);
+    background: var(--primary);
     color: #fff;
-    padding: 0.2rem 0.6rem;
-    border-radius: 8px;
-    white-space: nowrap;
+    padding: 0.25rem 0.6rem;
+    border-top-left-radius: 8px;
+    border-bottom-left-radius: 8px;
+    line-height: 1.5;
 }
 
 /* NickelMenu option radio cards */
@@ -512,7 +535,8 @@ button.btn-success:hover {
 }
 
 .warning a {
-    color: inherit;
+    color: var(--warning-text) !important;
+    text-decoration: underline !important;
 }
 
 .error {
diff --git a/web/public/favicon/apple-touch-icon.png b/web/public/favicon/apple-touch-icon.png
new file mode 100644
index 0000000..fddbe6a
Binary files /dev/null and b/web/public/favicon/apple-touch-icon.png differ
diff --git a/web/public/favicon/favicon-96x96.png b/web/public/favicon/favicon-96x96.png
new file mode 100644
index 0000000..8faff18
Binary files /dev/null and b/web/public/favicon/favicon-96x96.png differ
diff --git a/web/public/favicon/favicon.ico b/web/public/favicon/favicon.ico
new file mode 100644
index 0000000..cbd4a63
Binary files /dev/null and b/web/public/favicon/favicon.ico differ
diff --git a/web/public/favicon/favicon.svg b/web/public/favicon/favicon.svg
new file mode 100644
index 0000000..9811870
--- /dev/null
+++ b/web/public/favicon/favicon.svg
@@ -0,0 +1,77 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="720"
+   height="720"
+   viewBox="0 0 720 720"
+   version="1.1"
+   id="svg1"
+   xml:space="preserve"
+   sodipodi:docname="icon.svg"
+   inkscape:version="1.4.3 (0d15f75042, 2025-12-25)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="px"
+     inkscape:export-bgcolor="#ffffff00"
+     inkscape:zoom="0.64"
+     inkscape:cx="251.5625"
+     inkscape:cy="371.09375"
+     inkscape:window-width="2560"
+     inkscape:window-height="1352"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="g4" /><defs
+     id="defs1"><rect
+       x="437.52232"
+       y="254.1165"
+       width="282.47768"
+       height="465.8835"
+       id="rect4" /><rect
+       x="101.51436"
+       y="166.68407"
+       width="504.43864"
+       height="322.7154"
+       id="rect1" /></defs><g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"><rect
+       style="fill:#00bedf;stroke:#ffffff;stroke-width:0.64252;fill-opacity:1"
+       id="rect2"
+       width="720"
+       height="720"
+       x="0"
+       y="0"
+       rx="3"
+       ry="3" /><g
+       style="fill:#f9f9f9"
+       id="g2"
+       transform="matrix(9.0705035,0,0,9.0705035,312.4116,187.89173)" /><g
+       id="g4"
+       transform="translate(-18.087659,-1.9514566)"
+       style="fill:#ffffff;fill-opacity:1"><path
+         style="font-style:italic;font-weight:bold;font-size:96px;font-family:'NV Bitter';-inkscape-font-specification:'NV Bitter Bold Italic';letter-spacing:1.7351px;white-space:pre;stroke:#ffffff;stroke-width:3.50961"
+         d="m 87.449807,505.92794 61.352103,-390.13651 25.69448,45.6208 -66.59588,-22.02383 6.29252,-38.27952 110.11918,-3.670641 -38.8039,241.737801 -9.43879,-11.53629 h 63.974 l -19.40195,8.91441 56.10834,-71.31528 4.19502,7.86566 -33.56013,-6.8169 6.29252,-38.27953 123.2286,-4.71939 -5.76815,38.27952 -43.52329,9.96317 20.97508,-11.5363 -76.55904,95.43662 3.67064,-18.87757 45.6208,130.0455 -8.91441,-9.96316 38.27952,11.01192 -6.29252,38.27952 h -83.90033 l -42.47454,-133.19177 9.43879,4.7194 h -59.77898 l 12.58505,-4.19502 -20.97508,132.66739 z m 250.691323,120.60671 6.29253,-38.27952 72.8884,-21.49946 -38.27952,40.37703 53.48646,-340.84506 9.43878,12.58505 -47.19393,-13.10943 6.29252,-38.27952 106.44854,-3.67064 -18.87757,90.71722 -19.40195,37.75515 q 8.91441,-44.04767 28.31636,-73.41278 19.92632,-29.88949 45.09642,-44.57205 25.69448,-14.68256 50.3402,-14.68256 20.4507,0 37.75514,10.48754 17.30444,10.48754 27.79198,34.08451 10.48754,23.59697 10.48754,62.40087 0,50.86457 -17.82881,89.14409 -17.82882,38.27952 -49.81582,61.87649 -31.987,23.59697 -76.55905,30.41387 -44.04767,6.8169 -96.48537,-5.24377 l 39.85265,-6.8169 -17.82882,113.26543 -25.69447,-43.52329 70.26652,22.54821 -6.29252,38.27952 z m 134.7649,-159.93499 -14.15818,-19.40195 q 30.93824,12.06067 56.10834,8.39003 25.69447,-3.67064 43.52329,-19.40195 17.82882,-16.25568 27.26761,-42.47454 9.96316,-26.21885 9.96316,-59.2546 0,-30.41387 -9.43879,-43.52329 -8.9144,-13.63381 -23.59696,-13.63381 -11.01192,0 -22.54821,7.34128 -11.5363,7.34128 -22.54822,21.49946 -11.01191,14.15818 -19.40195,35.13326 -8.39003,20.97508 -12.58504,48.24269 z"
+         id="text4"
+         aria-label="kp" /></g></g><style
+     type="text/css"
+     id="style1">
+	.st0{fill:#505353;}
+	.st1{fill:#00BEDF;}
+</style><style
+     type="text/css"
+     id="style1-2">
+	.st0{fill:#505353;}
+	.st1{fill:#00BEDF;}
+</style></svg>
diff --git a/web/public/favicon/site.webmanifest b/web/public/favicon/site.webmanifest
new file mode 100644
index 0000000..80c98e9
--- /dev/null
+++ b/web/public/favicon/site.webmanifest
@@ -0,0 +1,21 @@
+{
+  "name": "",
+  "short_name": "",
+  "icons": [
+    {
+      "src": "/web-app-manifest-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "/web-app-manifest-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any"
+    }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}
diff --git a/web/public/favicon/web-app-manifest-192x192.png b/web/public/favicon/web-app-manifest-192x192.png
new file mode 100644
index 0000000..3e78f5e
Binary files /dev/null and b/web/public/favicon/web-app-manifest-192x192.png differ
diff --git a/web/public/favicon/web-app-manifest-512x512.png b/web/public/favicon/web-app-manifest-512x512.png
new file mode 100644
index 0000000..40ba23a
Binary files /dev/null and b/web/public/favicon/web-app-manifest-512x512.png differ
diff --git a/web/public/index.html b/web/public/index.html
index 2680dcb..bf25e37 100644
--- a/web/public/index.html
+++ b/web/public/index.html
@@ -4,18 +4,27 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>KoboPatch Web UI</title>
+    <meta name="description" content="A website that lets you customize your Kobo e-reader with NickelMenu or custom patches, directly via your browser.">
+    <link rel="icon" type="image/svg+xml" href="/favicon/favicon.svg">
+    <link rel="icon" type="image/png" sizes="96x96" href="/favicon/favicon-96x96.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png">
+    <link rel="manifest" href="/favicon/site.webmanifest">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap" rel="stylesheet">
+
     <!-- Inline critical styles so the hero + loader render before style.css arrives on slow connections -->
     <style>
         body { background: #f5f5f7; color: #111827; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; margin: 0; }
         main { max-width: 640px; margin: 0 auto; padding: 2rem 1.5rem 4rem; }
         .hero { margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid #e5e7eb; }
         h1 { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; margin: 0; }
-        .hero-accent { color: #2563eb; font-weight: 600; }
-        .beta-pill { font-size: 0.55rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; background: #991b1b; color: #fff; padding: 0.15rem 0.5rem; border-radius: 10px; vertical-align: middle; position: relative; top: -0.15rem; }
+        .hero-accent { color: #00bedf; font-weight: 600; }
+        .beta-pill { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; background: #00bedf; color: #fff; padding: 0.35rem 0.7rem; border-radius: 10px; vertical-align: middle; position: relative; top: -0.15rem; margin-left: 5px; }
         .subtitle { color: #6b7280; font-size: 0.95rem; margin-top: 0.25rem; }
         .initial-loader { display: flex; align-items: center; justify-content: center; gap: 0.75rem; padding: 2rem 0; }
         .initial-loader p { margin: 0; font-size: 0.93rem; color: #6b7280; }
-        .spinner { width: 22px; height: 22px; border: 2.5px solid #e5e7eb; border-top-color: #2563eb; border-radius: 50%; animation: spin 0.7s linear infinite; flex-shrink: 0; }
+        .spinner { width: 22px; height: 22px; border: 2.5px solid #e5e7eb; border-top-color: #00bedf; border-radius: 50%; animation: spin 0.7s linear infinite; flex-shrink: 0; }
         @keyframes spin { to { transform: rotate(360deg); } }
         [hidden] { display: none !important; }
     </style>
@@ -49,22 +58,27 @@
             <p>How would you like to set up your Kobo?</p>
             <div class="mode-cards">
                 <button id="btn-connect" class="mode-card mode-card-btn">
-                    <svg class="mode-card-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 16 16" fill="currentColor"><path d="m7.792.312-1.533 2.3A.25.25 0 0 0 6.467 3H7.5v7.319a2.5 2.5 0 0 0-.515-.298L5.909 9.56A1.5 1.5 0 0 1 5 8.18v-.266a1.5 1.5 0 1 0-1 0v.266a2.5 2.5 0 0 0 1.515 2.298l1.076.461a1.5 1.5 0 0 1 .888 1.129 2.001 2.001 0 1 0 1.021-.006v-.902a1.5 1.5 0 0 1 .756-1.303l1.484-.848A2.5 2.5 0 0 0 11.995 7h.755a.25.25 0 0 0 .25-.25v-2.5a.25.25 0 0 0-.25-.25h-2.5a.25.25 0 0 0-.25.25v2.5c0 .138.112.25.25.25h.741a1.5 1.5 0 0 1-.747 1.142L8.76 8.99a2.584 2.584 0 0 0-.26.17V3h1.033a.25.25 0 0 0 .208-.389L8.208.312a.25.25 0 0 0-.416 0Z"/></svg>
+                    <svg class="mode-card-icon" xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 16 16" fill="currentColor"><path d="m7.792.312-1.533 2.3A.25.25 0 0 0 6.467 3H7.5v7.319a2.5 2.5 0 0 0-.515-.298L5.909 9.56A1.5 1.5 0 0 1 5 8.18v-.266a1.5 1.5 0 1 0-1 0v.266a2.5 2.5 0 0 0 1.515 2.298l1.076.461a1.5 1.5 0 0 1 .888 1.129 2.001 2.001 0 1 0 1.021-.006v-.902a1.5 1.5 0 0 1 .756-1.303l1.484-.848A2.5 2.5 0 0 0 11.995 7h.755a.25.25 0 0 0 .25-.25v-2.5a.25.25 0 0 0-.25-.25h-2.5a.25.25 0 0 0-.25.25v2.5c0 .138.112.25.25.25h.741a1.5 1.5 0 0 1-.747 1.142L8.76 8.99a2.584 2.584 0 0 0-.26.17V3h1.033a.25.25 0 0 0 .208-.389L8.208.312a.25.25 0 0 0-.416 0Z"/></svg>
                     <div class="mode-card-body">
-                        <div class="mode-card-title">Connect my Kobo</div>
+                        <div class="mode-card-title">
+                            Connect my Kobo
+                            <span class="recommended-pill">recommended</span>
+                        </div>
                         <div class="mode-card-desc">Connect your Kobo via USB and select its drive. You will have the option to apply these changes directly, or you can download a ZIP.</div>
                     </div>
                 </button>
                 <button id="btn-manual" class="mode-card mode-card-btn">
-                    <svg class="mode-card-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
+                    <svg class="mode-card-icon" xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
                     <div class="mode-card-body">
-                        <div class="mode-card-title">Download files manually</div>
-                        <div class="mode-card-desc">Download the files and copy them to your Kobo yourself. Works in any browser.</div>
+                        <div class="mode-card-title">
+                            Build downloadable archive
+                        </div>
+                        <div class="mode-card-desc">You may need to identify your device based on model number. Go through the wizard, download the files and copy them to your Kobo yourself. Works in any browser, but a bit more complicated. Recommended for tinkerers.</div>
                     </div>
                 </button>
             </div>
             <p id="connect-unsupported-hint" class="fallback-hint" hidden>
-                Your browser does not support direct device access. Use Chrome or Edge to connect your Kobo directly, or choose the manual download option.
+                <b>Note:</b> Your browser does not support direct device access via the <a href="https://caniuse.com/native-filesystem-api">native filesystem API</a>, which is required for a seamless patching experience. Directly connecting to your Kobo is not available because of this. Use Chrome, Edge or Opera to connect your Kobo directly, or choose the manual download option.
             </p>
         </section>
 
@@ -109,7 +123,7 @@
             </div>
             <p id="device-status"></p>
             <div class="step-actions">
-                <button id="btn-device-restore" class="secondary">Restore Unpatched Software</button>
+                <button id="btn-device-restore" class="secondary">Restore Software</button>
                 <button id="btn-device-next" class="primary">Continue &#x203A;</button>
             </div>
         </section>
@@ -147,44 +161,44 @@
                 <label class="nm-option">
                     <input type="radio" name="nm-option" value="sample">
                     <div class="nm-option-body">
-                        <div class="nm-option-title">Install NickelMenu and configure</div>
-                        <div class="nm-option-desc">Installs NickelMenu with a curated set of menu options.</div>
+                        <div class="nm-option-title">Install NickelMenu & Apply Preset</div>
+                        <div class="nm-option-desc">Installs NickelMenu with a curated set of menu options. You get to decide which optional features you'd like to enable.</div>
                     </div>
                 </label>
                 <div id="nm-config-options" class="nm-config-options" hidden>
                 <label class="nm-config-item">
                     <input type="checkbox" name="nm-cfg-menu" checked disabled>
                     <div class="nm-config-text">
-                        <span>Set up custom menu</span>
+                        <span>Set up custom menu (required)</span>
                         <span class="nm-config-desc">Adds menu items for dark mode, screenshots, and more. A new tab will be added in the bottom navigation that is labelled "Tweak".</span>
                     </div>
                 </label>
                 <label class="nm-config-item">
                     <input type="checkbox" name="nm-cfg-fonts" checked>
                     <div class="nm-config-text">
-                        <span>Install Readerly fonts</span>
-                        <span class="nm-config-desc">Adds the free Readerly fonts, which are visually similar to Bookerly.</span>
+                        <span>Install Readerly fonts (recommended)</span>
+                        <span class="nm-config-desc">Adds the Readerly font family. These fonts are optically similar to Bookerly. When you are reading a book, you will be able to select this font from the dropdown as "KF Readerly".</span>
                     </div>
                 </label>
                 <label class="nm-config-item">
                     <input type="checkbox" name="nm-cfg-screensaver">
                     <div class="nm-config-text">
-                        <span>Install screensaver</span>
-                        <span class="nm-config-desc">Replaces the default sleep screen with a custom screensaver image.</span>
+                        <span>Copy screensaver (optional)</span>
+                        <span class="nm-config-desc">Replaces the default sleep screen with a custom screensaver image. You can always add your own in the <code>/.kobo/screensaver</code> folder.</span>
                     </div>
                 </label>
                 <label class="nm-config-item">
                     <input type="checkbox" name="nm-cfg-simplify-tabs">
                     <div class="nm-config-text">
-                        <span>Hide Notebook & Store tabs</span>
-                        <span class="nm-config-desc">This will hide the Notebook and Store tabs from the bottom navigation.</span>
+                        <span>Hide certain navigation tabs (minimalist)</span>
+                        <span class="nm-config-desc">This will hide the Notebook and Store tabs from the bottom navigation. For minimalists who want fewer distractions.</span>
                     </div>
                 </label>
                 <label class="nm-config-item">
                     <input type="checkbox" name="nm-cfg-simplify-home">
                     <div class="nm-config-text">
-                        <span>Simpler home screen</span>
-                        <span class="nm-config-desc">If you are reading only one book, no recommendations will appear next to your current read, and third row on your homescreen with advertisements for Kobo Plus and the Kobo Store will be hidden.</span>
+                        <span>Hide certain home screen elements (minimalist)</span>
+                        <span class="nm-config-desc">If you are reading only one book, no recommendations will appear next to your current read, and third row on your homescreen with advertisements for Kobo Plus and the Kobo Store will be hidden. For minimalists who want fewer distractions.</span>
                     </div>
                 </label>
                 <a href="https://github.com/nicoverbruggen/kobo-config" target="_blank" class="nm-config-link">Learn more about these customisations &#x203A;</a>
@@ -214,6 +228,7 @@
         <section id="step-nm-review" class="step" hidden>
             <p id="nm-review-summary"></p>
             <ul id="nm-review-list" class="selected-patches-list"></ul>
+            <p>Before continuing, make sure you these are the changes you want. You can always use the wizard again to uninstall NickelMenu, if you want to.</p>
             <div id="nm-review-actions" class="step-actions">
                 <button id="btn-nm-review-back" class="secondary">&#x2039; Back</button>
                 <div class="step-actions-right">