diff --git a/docs/assets/lighthouse/after-app-desktop.png b/docs/assets/lighthouse/after-app-desktop.png
new file mode 100644
index 0000000..5493866
Binary files /dev/null and b/docs/assets/lighthouse/after-app-desktop.png differ
diff --git a/docs/assets/lighthouse/after-app-mobile.png b/docs/assets/lighthouse/after-app-mobile.png
new file mode 100644
index 0000000..72e0618
Binary files /dev/null and b/docs/assets/lighthouse/after-app-mobile.png differ
diff --git a/docs/assets/lighthouse/after-landing-desktop.png b/docs/assets/lighthouse/after-landing-desktop.png
new file mode 100644
index 0000000..c5280cb
Binary files /dev/null and b/docs/assets/lighthouse/after-landing-desktop.png differ
diff --git a/docs/assets/lighthouse/after-landing-mobile.png b/docs/assets/lighthouse/after-landing-mobile.png
new file mode 100644
index 0000000..18059b6
Binary files /dev/null and b/docs/assets/lighthouse/after-landing-mobile.png differ
diff --git a/docs/assets/lighthouse/before-app-desktop.png b/docs/assets/lighthouse/before-app-desktop.png
new file mode 100644
index 0000000..b558ad6
Binary files /dev/null and b/docs/assets/lighthouse/before-app-desktop.png differ
diff --git a/docs/assets/lighthouse/before-app-mobile.png b/docs/assets/lighthouse/before-app-mobile.png
new file mode 100644
index 0000000..72e0618
Binary files /dev/null and b/docs/assets/lighthouse/before-app-mobile.png differ
diff --git a/docs/assets/lighthouse/before-landing-desktop.png b/docs/assets/lighthouse/before-landing-desktop.png
new file mode 100644
index 0000000..a15025b
Binary files /dev/null and b/docs/assets/lighthouse/before-landing-desktop.png differ
diff --git a/docs/assets/lighthouse/before-landing-mobile.png b/docs/assets/lighthouse/before-landing-mobile.png
new file mode 100644
index 0000000..5bde235
Binary files /dev/null and b/docs/assets/lighthouse/before-landing-mobile.png differ
diff --git a/public/landing/copy-snippets.webp b/public/landing/copy-snippets.webp
new file mode 100644
index 0000000..ffbc14d
Binary files /dev/null and b/public/landing/copy-snippets.webp differ
diff --git a/public/landing/create-snippet.webp b/public/landing/create-snippet.webp
new file mode 100644
index 0000000..48df93c
Binary files /dev/null and b/public/landing/create-snippet.webp differ
diff --git a/public/landing/move-elements.webp b/public/landing/move-elements.webp
new file mode 100644
index 0000000..3bf88d2
Binary files /dev/null and b/public/landing/move-elements.webp differ
diff --git a/src/app/[locale]/page.tsx b/src/app/[locale]/page.tsx
index 2958982..9c17539 100644
--- a/src/app/[locale]/page.tsx
+++ b/src/app/[locale]/page.tsx
@@ -186,6 +186,7 @@ export default async function LandingPage({
       title: l.demos.create.title,
       description: l.demos.create.description,
       src: "/landing/create-snippet.gif",
+      webp: "/landing/create-snippet.webp",
       width: 1200,
       height: 600,
     },
@@ -194,6 +195,7 @@ export default async function LandingPage({
       title: l.demos.copy.title,
       description: l.demos.copy.description,
       src: "/landing/copy-snippets.gif",
+      webp: "/landing/copy-snippets.webp",
       width: 1200,
       height: 800,
     },
@@ -202,6 +204,7 @@ export default async function LandingPage({
       title: l.demos.move.title,
       description: l.demos.move.description,
       src: "/landing/move-elements.gif",
+      webp: "/landing/move-elements.webp",
       width: 450,
       height: 300,
       narrow: true,
@@ -373,14 +376,17 @@ export default async function LandingPage({
                 }
               >
                 <div className="overflow-hidden rounded-xl border border-ink/8 bg-ink/2">
-                  <Image
-                    src={demo.src}
-                    alt={demo.title}
-                    width={demo.width}
-                    height={demo.height}
-                    className="w-full"
-                    unoptimized
-                  />
+                  <picture>
+                    <source srcSet={demo.webp} type="image/webp" />
+                    <Image
+                      src={demo.src}
+                      alt={demo.title}
+                      width={demo.width}
+                      height={demo.height}
+                      className="w-full"
+                      unoptimized
+                    />
+                  </picture>
                 </div>
               </div>
             );
diff --git a/src/components/Aside/FolderNode.tsx b/src/components/Aside/FolderNode.tsx
index 007d759..638ca19 100644
--- a/src/components/Aside/FolderNode.tsx
+++ b/src/components/Aside/FolderNode.tsx
@@ -162,7 +162,7 @@ export function FolderNode({
           <Tooltip content={isOpen ? ctx.copy.aside.collapseFolder : ctx.copy.aside.expandFolder}>
             <IconButton
               data-no-drag=""
-              className="text-ink/25 hover:text-ink/45 lg:h-4 lg:w-4"
+              className="text-ink/25 hover:text-ink/45 lg:h-6 lg:w-6"
               onClick={(e) => {
                 e.stopPropagation();
                 setIsOpen((value) => !value);
diff --git a/src/components/NewSnippet/NewSnippet.tsx b/src/components/NewSnippet/NewSnippet.tsx
index 3a1bbd6..1a9aaf9 100644
--- a/src/components/NewSnippet/NewSnippet.tsx
+++ b/src/components/NewSnippet/NewSnippet.tsx
@@ -226,10 +226,9 @@ export function NewSnippet({
             className="flex items-center justify-center gap-1.5 rounded-lg bg-accent px-3.5 py-1.5 text-sm font-medium text-background transition-opacity hover:opacity-90 max-lg:h-11 max-lg:w-full"
           >
             <Plus size={14} strokeWidth={2.5} />
-            {/* Desktop drops the noun: the header and placeholder already say
-                "snippet" and the button also carries a shortcut hint. */}
-            <span className="lg:hidden">{copy.forms.submitSnippet}</span>
-            <span className="max-lg:hidden">{copy.forms.submitSnippetShort}</span>
+            {/* Keep the visible label aligned with the button's accessible name
+                on every breakpoint; the shortcut hint remains supplemental. */}
+            <span>{copy.forms.submitSnippet}</span>
             <ShortcutHint id="createSnippet" tone="dark" className="ml-0.5 max-lg:hidden" />
           </button>
         </div>