diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 0000000..3955e54
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1,5 @@
+ui/*/third_party/
+ui/shared/third_party/
+source/
+target/
+resources/
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..0967ef4
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1 @@
+{}
diff --git a/format.sh b/format.sh
index 0ad7134..671de7d 100755
--- a/format.sh
+++ b/format.sh
@@ -11,3 +11,6 @@ cargo fmt -- \
 
 # Format our Cargo.toml files
 RUST_LOG=error taplo fmt Cargo.toml htmlshell/Cargo.toml
+
+# Format HTML, CSS, and JS
+npx --yes prettier --write "ui/**/*.{html,css,js,json}"
diff --git a/ui/atproto/viewers/app_bsky_actor_profile.js b/ui/atproto/viewers/app_bsky_actor_profile.js
index ecf14da..2903f8e 100644
--- a/ui/atproto/viewers/app_bsky_actor_profile.js
+++ b/ui/atproto/viewers/app_bsky_actor_profile.js
@@ -10,7 +10,10 @@ class AppBskyActorProfile extends AtRecordElement {
   static styles = css`
     :host {
       display: block;
-      font-family: system-ui, -apple-system, sans-serif;
+      font-family:
+        system-ui,
+        -apple-system,
+        sans-serif;
     }
     .card {
       display: flex;
@@ -94,7 +97,9 @@ class AppBskyActorProfile extends AtRecordElement {
       <a
         class="card"
         href=${profileUrl}
-        style=${bannerUrl ? `background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url(${bannerUrl})` : ""}
+        style=${bannerUrl
+          ? `background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url(${bannerUrl})`
+          : ""}
       >
         ${avatarUrl
           ? html`<img class="avatar" src=${avatarUrl} alt="" />`
diff --git a/ui/atproto/viewers/at_record_element.js b/ui/atproto/viewers/at_record_element.js
index f266257..85c4563 100644
--- a/ui/atproto/viewers/at_record_element.js
+++ b/ui/atproto/viewers/at_record_element.js
@@ -31,7 +31,9 @@ export class AtRecordElement extends LitElement {
       if (response.ok) {
         this.data = await response.json();
       } else {
-        console.error(`[AtRecordElement] Failed to fetch ${url}: ${response.status}`);
+        console.error(
+          `[AtRecordElement] Failed to fetch ${url}: ${response.status}`,
+        );
       }
     } catch (err) {
       console.error(`[AtRecordElement] Error fetching ${url}:`, err);
diff --git a/ui/atproto/viewers/ing_dasl_masl.js b/ui/atproto/viewers/ing_dasl_masl.js
index 63e695e..6f55e7b 100644
--- a/ui/atproto/viewers/ing_dasl_masl.js
+++ b/ui/atproto/viewers/ing_dasl_masl.js
@@ -16,7 +16,10 @@ class IngDaslMasl extends AtRecordElement {
   static styles = css`
     :host {
       display: block;
-      font-family: system-ui, -apple-system, sans-serif;
+      font-family:
+        system-ui,
+        -apple-system,
+        sans-serif;
       max-width: 720px;
       color: #333;
     }
@@ -135,7 +138,7 @@ class IngDaslMasl extends AtRecordElement {
             ${totalSize ? html` &middot; ${formatSize(totalSize)}` : ""}
             ${this.data.value?.createdAt
               ? html` &middot;
-                  ${new Date(this.data.value.createdAt).toLocaleDateString()}`
+                ${new Date(this.data.value.createdAt).toLocaleDateString()}`
               : ""}
           </div>
         </div>
diff --git a/ui/homescreen/index.html b/ui/homescreen/index.html
index f39571a..f45d3f8 100644
--- a/ui/homescreen/index.html
+++ b/ui/homescreen/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <!-- SPDX-License-Identifier: AGPL-3.0-or-later -->
   <head>
diff --git a/ui/homescreen/index.js b/ui/homescreen/index.js
index 5b16155..2925c93 100644
--- a/ui/homescreen/index.js
+++ b/ui/homescreen/index.js
@@ -201,7 +201,12 @@ let homescreenReady = false;
 
 // Listen for splash port from system app
 window.addEventListener("message", (event) => {
-  console.log("[Homescreen] Received message:", event.data, "ports:", event.ports);
+  console.log(
+    "[Homescreen] Received message:",
+    event.data,
+    "ports:",
+    event.ports,
+  );
   if (event.data?.type === "splash-port" && event.ports?.length > 0) {
     console.log("[Homescreen] Splash port received");
     splashPort = event.ports[0];
diff --git a/ui/homescreen/widgets/clock/index.html b/ui/homescreen/widgets/clock/index.html
index ff3e507..52c1c7f 100644
--- a/ui/homescreen/widgets/clock/index.html
+++ b/ui/homescreen/widgets/clock/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <!-- SPDX-License-Identifier: AGPL-3.0-or-later -->
   <head>
diff --git a/ui/homescreen/widgets/weather/index.html b/ui/homescreen/widgets/weather/index.html
index 606530f..67573c3 100644
--- a/ui/homescreen/widgets/weather/index.html
+++ b/ui/homescreen/widgets/weather/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <!-- SPDX-License-Identifier: AGPL-3.0-or-later -->
   <head>
diff --git a/ui/homescreen/widgets/weather/index.js b/ui/homescreen/widgets/weather/index.js
index 7ea174a..ba9cf5f 100644
--- a/ui/homescreen/widgets/weather/index.js
+++ b/ui/homescreen/widgets/weather/index.js
@@ -51,9 +51,8 @@ async function init() {
     document.getElementById("condition").textContent =
       getWeatherCondition(code);
     document.getElementById("location").textContent = LOCATION_NAME;
-    document.getElementById(
-      "weather-icon"
-    ).innerHTML = `<lucide-icon name="${getWeatherIcon(code)}"></lucide-icon>`;
+    document.getElementById("weather-icon").innerHTML =
+      `<lucide-icon name="${getWeatherIcon(code)}"></lucide-icon>`;
   } catch (e) {
     console.error("[Weather] Failed to fetch weather:", e);
     document.getElementById("condition").textContent = "Weather unavailable";
diff --git a/ui/keyboard/emoji/data.js b/ui/keyboard/emoji/data.js
index ffeafb9..9d953e1 100644
--- a/ui/keyboard/emoji/data.js
+++ b/ui/keyboard/emoji/data.js
@@ -6,8 +6,36 @@ export const categories = [
     icon: "🕐",
     name: "Frequently Used",
     emoji: [
-      "😀", "😂", "🤣", "😊", "😍", "🥰", "😘", "😭", "😢", "😤", "😡", "🥺", "😱", "🤔", "🤗",
-      "👍", "👎", "❤️", "🔥", "✨", "🎉", "👏", "🙏", "💪", "😎", "🥳", "🤩", "👀", "💀", "🫡",
+      "😀",
+      "😂",
+      "🤣",
+      "😊",
+      "😍",
+      "🥰",
+      "😘",
+      "😭",
+      "😢",
+      "😤",
+      "😡",
+      "🥺",
+      "😱",
+      "🤔",
+      "🤗",
+      "👍",
+      "👎",
+      "❤️",
+      "🔥",
+      "✨",
+      "🎉",
+      "👏",
+      "🙏",
+      "💪",
+      "😎",
+      "🥳",
+      "🤩",
+      "👀",
+      "💀",
+      "🫡",
     ],
   },
   {
@@ -15,16 +43,167 @@ export const categories = [
     icon: "😀",
     name: "Smileys & Emotion",
     emoji: [
-      "😀", "😃", "😄", "😁", "😆", "😅", "🤣", "😂", "🙂", "🙃", "🫠", "😉", "😊", "😇", "🥰", "😍", "🤩", "😘",
-      "😗", "☺️", "😚", "😙", "🥲", "😋", "😛", "😜", "🤪", "😝", "🤑", "🤗", "🤭", "🫢", "🫣", "🤫", "🤔", "🫡",
-      "🤐", "🤨", "😐", "😑", "😶", "🫥", "😶‍🌫️", "😏", "😒", "🙄", "😬", "😮‍💨", "🤥", "🫨", "😌", "😔", "😪", "🤤", "😴",
-      "😷", "🤒", "🤕", "🤢", "🤮", "🤧", "🥵", "🥶", "🥴", "😵", "😵‍💫", "🤯", "🤠", "🥳", "🥸", "😎", "🤓", "🧐",
-      "😕", "🫤", "😟", "🙁", "☹️", "😮", "😯", "😲", "😳", "🥺", "🥹", "😦", "😧", "😨", "😰", "😥",
-      "😢", "😭", "😱", "😖", "😣", "😞", "😓", "😩", "😫", "🥱", "😤", "😡", "😠", "🤬", "😈", "👿",
-      "💀", "☠️", "💩", "🤡", "👹", "👺", "👻", "👽", "👾", "🤖", "😺", "😸", "😹", "😻", "😼", "😽",
-      "🙀", "😿", "😾", "🙈", "🙉", "🙊", "💌", "💘", "💝", "💖", "💗", "💓", "💔", "❤️‍🔥", "❤️‍🩹",
-      "❤️", "🩷", "🧡", "💛", "💚", "💙", "💜", "🤎", "🖤", "🩶", "🤍", "💋", "💯", "💢", "💥", "💫",
-      "💦", "💨", "🕳️", "💬", "👁️‍🗨️", "🗨️", "🗯️", "💭", "💤",
+      "😀",
+      "😃",
+      "😄",
+      "😁",
+      "😆",
+      "😅",
+      "🤣",
+      "😂",
+      "🙂",
+      "🙃",
+      "🫠",
+      "😉",
+      "😊",
+      "😇",
+      "🥰",
+      "😍",
+      "🤩",
+      "😘",
+      "😗",
+      "☺️",
+      "😚",
+      "😙",
+      "🥲",
+      "😋",
+      "😛",
+      "😜",
+      "🤪",
+      "😝",
+      "🤑",
+      "🤗",
+      "🤭",
+      "🫢",
+      "🫣",
+      "🤫",
+      "🤔",
+      "🫡",
+      "🤐",
+      "🤨",
+      "😐",
+      "😑",
+      "😶",
+      "🫥",
+      "😶‍🌫️",
+      "😏",
+      "😒",
+      "🙄",
+      "😬",
+      "😮‍💨",
+      "🤥",
+      "🫨",
+      "😌",
+      "😔",
+      "😪",
+      "🤤",
+      "😴",
+      "😷",
+      "🤒",
+      "🤕",
+      "🤢",
+      "🤮",
+      "🤧",
+      "🥵",
+      "🥶",
+      "🥴",
+      "😵",
+      "😵‍💫",
+      "🤯",
+      "🤠",
+      "🥳",
+      "🥸",
+      "😎",
+      "🤓",
+      "🧐",
+      "😕",
+      "🫤",
+      "😟",
+      "🙁",
+      "☹️",
+      "😮",
+      "😯",
+      "😲",
+      "😳",
+      "🥺",
+      "🥹",
+      "😦",
+      "😧",
+      "😨",
+      "😰",
+      "😥",
+      "😢",
+      "😭",
+      "😱",
+      "😖",
+      "😣",
+      "😞",
+      "😓",
+      "😩",
+      "😫",
+      "🥱",
+      "😤",
+      "😡",
+      "😠",
+      "🤬",
+      "😈",
+      "👿",
+      "💀",
+      "☠️",
+      "💩",
+      "🤡",
+      "👹",
+      "👺",
+      "👻",
+      "👽",
+      "👾",
+      "🤖",
+      "😺",
+      "😸",
+      "😹",
+      "😻",
+      "😼",
+      "😽",
+      "🙀",
+      "😿",
+      "😾",
+      "🙈",
+      "🙉",
+      "🙊",
+      "💌",
+      "💘",
+      "💝",
+      "💖",
+      "💗",
+      "💓",
+      "💔",
+      "❤️‍🔥",
+      "❤️‍🩹",
+      "❤️",
+      "🩷",
+      "🧡",
+      "💛",
+      "💚",
+      "💙",
+      "💜",
+      "🤎",
+      "🖤",
+      "🩶",
+      "🤍",
+      "💋",
+      "💯",
+      "💢",
+      "💥",
+      "💫",
+      "💦",
+      "💨",
+      "🕳️",
+      "💬",
+      "👁️‍🗨️",
+      "🗨️",
+      "🗯️",
+      "💭",
+      "💤",
     ],
   },
   {
@@ -32,12 +211,91 @@ export const categories = [
     icon: "👋",
     name: "People & Body",
     emoji: [
-      "👋", "🤚", "🖐️", "✋", "🖖", "🫱", "🫲", "🫳", "🫴", "🫷", "🫸", "🤞", "🫰", "🤟", "🤘",
-      "🤙", "👈", "👉", "👆", "👇", "☝️", "🫵", "✌️", "👌", "🤌", "🤏", "✍️", "👍", "👎", "✊",
-      "👊", "🤛", "🤜", "👏", "🙌", "🫶", "👐", "🤲", "🤝", "🙏", "💅", "🤳", "💪", "🦾", "🦿",
-      "🦵", "🦶", "👂", "🦻", "👃", "🧠", "🫀", "🫁", "🦷", "🦴", "👀", "👁️", "👅", "👄", "🫦",
-      "👶", "🧒", "👦", "👧", "🧑", "👱", "👨", "🧔", "👩", "🧓", "👴", "👵", "🙍", "🙎", "🙅",
-      "🙆", "💁", "🙋", "🧏", "🙇", "🤦", "🤷", "👮", "🕵️", "💂",
+      "👋",
+      "🤚",
+      "🖐️",
+      "✋",
+      "🖖",
+      "🫱",
+      "🫲",
+      "🫳",
+      "🫴",
+      "🫷",
+      "🫸",
+      "🤞",
+      "🫰",
+      "🤟",
+      "🤘",
+      "🤙",
+      "👈",
+      "👉",
+      "👆",
+      "👇",
+      "☝️",
+      "🫵",
+      "✌️",
+      "👌",
+      "🤌",
+      "🤏",
+      "✍️",
+      "👍",
+      "👎",
+      "✊",
+      "👊",
+      "🤛",
+      "🤜",
+      "👏",
+      "🙌",
+      "🫶",
+      "👐",
+      "🤲",
+      "🤝",
+      "🙏",
+      "💅",
+      "🤳",
+      "💪",
+      "🦾",
+      "🦿",
+      "🦵",
+      "🦶",
+      "👂",
+      "🦻",
+      "👃",
+      "🧠",
+      "🫀",
+      "🫁",
+      "🦷",
+      "🦴",
+      "👀",
+      "👁️",
+      "👅",
+      "👄",
+      "🫦",
+      "👶",
+      "🧒",
+      "👦",
+      "👧",
+      "🧑",
+      "👱",
+      "👨",
+      "🧔",
+      "👩",
+      "🧓",
+      "👴",
+      "👵",
+      "🙍",
+      "🙎",
+      "🙅",
+      "🙆",
+      "💁",
+      "🙋",
+      "🧏",
+      "🙇",
+      "🤦",
+      "🤷",
+      "👮",
+      "🕵️",
+      "💂",
     ],
   },
   {
@@ -45,16 +303,156 @@ export const categories = [
     icon: "🐱",
     name: "Animals & Nature",
     emoji: [
-      "🐵", "🐒", "🦍", "🦧", "🐶", "🐕", "🦮", "🐕‍🦺", "🐩", "🐺", "🦊", "🦝", "🐱", "🐈", "🐈‍⬛",
-      "🦁", "🐯", "🐅", "🐆", "🐴", "🫎", "🫏", "🐎", "🦄", "🦓", "🦌", "🦬", "🐮", "🐂", "🐃",
-      "🐄", "🐷", "🐖", "🐗", "🐽", "🐏", "🐑", "🐐", "🐪", "🐫", "🦙", "🦒", "🐘", "🦣", "🦏",
-      "🦛", "🐭", "🐁", "🐀", "🐹", "🐰", "🐇", "🐿️", "🦫", "🦔", "🦇", "🐻", "🐻‍❄️", "🐨", "🐼",
-      "🦥", "🦦", "🦨", "🦘", "🦡", "🐾", "🦃", "🐔", "🐓", "🐣", "🐤", "🐥", "🐦", "🐧", "🕊️",
-      "🦅", "🦆", "🦢", "🦉", "🦤", "🪶", "🦩", "🦚", "🦜", "🪽", "🪿", "🐸", "🐊", "🐢", "🦎",
-      "🐍", "🐲", "🐉", "🦕", "🦖", "🐳", "🐋", "🐬", "🦭", "🐟", "🐠", "🐡", "🦈", "🐙", "🐚",
-      "🪸", "🪼", "🐌", "🦋", "🐛", "🐜", "🐝", "🪲", "🐞", "🦗", "🪳", "🕷️", "🕸️", "🦂", "🦟",
-      "🪰", "🪱", "🦠", "💐", "🌸", "💮", "🪷", "🏵️", "🌹", "🥀", "🌺", "🌻", "🌼", "🌷", "🪻",
-      "🌱", "🪴", "🌲", "🌳", "🌴", "🌵", "🌾", "🌿", "☘️", "🍀", "🍁", "🍂", "🍃", "🪹", "🪺",
+      "🐵",
+      "🐒",
+      "🦍",
+      "🦧",
+      "🐶",
+      "🐕",
+      "🦮",
+      "🐕‍🦺",
+      "🐩",
+      "🐺",
+      "🦊",
+      "🦝",
+      "🐱",
+      "🐈",
+      "🐈‍⬛",
+      "🦁",
+      "🐯",
+      "🐅",
+      "🐆",
+      "🐴",
+      "🫎",
+      "🫏",
+      "🐎",
+      "🦄",
+      "🦓",
+      "🦌",
+      "🦬",
+      "🐮",
+      "🐂",
+      "🐃",
+      "🐄",
+      "🐷",
+      "🐖",
+      "🐗",
+      "🐽",
+      "🐏",
+      "🐑",
+      "🐐",
+      "🐪",
+      "🐫",
+      "🦙",
+      "🦒",
+      "🐘",
+      "🦣",
+      "🦏",
+      "🦛",
+      "🐭",
+      "🐁",
+      "🐀",
+      "🐹",
+      "🐰",
+      "🐇",
+      "🐿️",
+      "🦫",
+      "🦔",
+      "🦇",
+      "🐻",
+      "🐻‍❄️",
+      "🐨",
+      "🐼",
+      "🦥",
+      "🦦",
+      "🦨",
+      "🦘",
+      "🦡",
+      "🐾",
+      "🦃",
+      "🐔",
+      "🐓",
+      "🐣",
+      "🐤",
+      "🐥",
+      "🐦",
+      "🐧",
+      "🕊️",
+      "🦅",
+      "🦆",
+      "🦢",
+      "🦉",
+      "🦤",
+      "🪶",
+      "🦩",
+      "🦚",
+      "🦜",
+      "🪽",
+      "🪿",
+      "🐸",
+      "🐊",
+      "🐢",
+      "🦎",
+      "🐍",
+      "🐲",
+      "🐉",
+      "🦕",
+      "🦖",
+      "🐳",
+      "🐋",
+      "🐬",
+      "🦭",
+      "🐟",
+      "🐠",
+      "🐡",
+      "🦈",
+      "🐙",
+      "🐚",
+      "🪸",
+      "🪼",
+      "🐌",
+      "🦋",
+      "🐛",
+      "🐜",
+      "🐝",
+      "🪲",
+      "🐞",
+      "🦗",
+      "🪳",
+      "🕷️",
+      "🕸️",
+      "🦂",
+      "🦟",
+      "🪰",
+      "🪱",
+      "🦠",
+      "💐",
+      "🌸",
+      "💮",
+      "🪷",
+      "🏵️",
+      "🌹",
+      "🥀",
+      "🌺",
+      "🌻",
+      "🌼",
+      "🌷",
+      "🪻",
+      "🌱",
+      "🪴",
+      "🌲",
+      "🌳",
+      "🌴",
+      "🌵",
+      "🌾",
+      "🌿",
+      "☘️",
+      "🍀",
+      "🍁",
+      "🍂",
+      "🍃",
+      "🪹",
+      "🪺",
     ],
   },
   {
@@ -62,15 +460,138 @@ export const categories = [
     icon: "🍔",
     name: "Food & Drink",
     emoji: [
-      "🍇", "🍈", "🍉", "🍊", "🍋", "🍋‍🟩", "🍌", "🍍", "🥭", "🍎", "🍏", "🍐", "🍑", "🍒", "🍓",
-      "🫐", "🥝", "🍅", "🫒", "🥥", "🥑", "🍆", "🥔", "🥕", "🌽", "🌶️", "🫑", "🥒", "🥬", "🥦",
-      "🧄", "🧅", "🍄", "🥜", "🫘", "🌰", "🍞", "🥐", "🥖", "🫓", "🥨", "🥯", "🥞", "🧇", "🧀",
-      "🍖", "🍗", "🥩", "🥓", "🍔", "🍟", "🍕", "🌭", "🥪", "🌮", "🌯", "🫔", "🥙", "🧆", "🥚",
-      "🍳", "🥘", "🍲", "🫕", "🥣", "🥗", "🍿", "🧈", "🧂", "🥫", "🍱", "🍘", "🍙", "🍚", "🍛",
-      "🍜", "🍝", "🍠", "🍢", "🍣", "🍤", "🍥", "🥮", "🍡", "🥟", "🥠", "🥡", "🦀", "🦞", "🦐",
-      "🦑", "🦪", "🍦", "🍧", "🍨", "🍩", "🍪", "🎂", "🍰", "🧁", "🥧", "🍫", "🍬", "🍭", "🍮",
-      "🍯", "🍼", "🥛", "☕", "🫖", "🍵", "🍶", "🍾", "🍷", "🍸", "🍹", "🍺", "🍻", "🥂", "🥃",
-      "🫗", "🥤", "🧋", "🧃", "🧉", "🧊", "🥢", "🍽️", "🥄", "🔪", "🏺", "🫙",
+      "🍇",
+      "🍈",
+      "🍉",
+      "🍊",
+      "🍋",
+      "🍋‍🟩",
+      "🍌",
+      "🍍",
+      "🥭",
+      "🍎",
+      "🍏",
+      "🍐",
+      "🍑",
+      "🍒",
+      "🍓",
+      "🫐",
+      "🥝",
+      "🍅",
+      "🫒",
+      "🥥",
+      "🥑",
+      "🍆",
+      "🥔",
+      "🥕",
+      "🌽",
+      "🌶️",
+      "🫑",
+      "🥒",
+      "🥬",
+      "🥦",
+      "🧄",
+      "🧅",
+      "🍄",
+      "🥜",
+      "🫘",
+      "🌰",
+      "🍞",
+      "🥐",
+      "🥖",
+      "🫓",
+      "🥨",
+      "🥯",
+      "🥞",
+      "🧇",
+      "🧀",
+      "🍖",
+      "🍗",
+      "🥩",
+      "🥓",
+      "🍔",
+      "🍟",
+      "🍕",
+      "🌭",
+      "🥪",
+      "🌮",
+      "🌯",
+      "🫔",
+      "🥙",
+      "🧆",
+      "🥚",
+      "🍳",
+      "🥘",
+      "🍲",
+      "🫕",
+      "🥣",
+      "🥗",
+      "🍿",
+      "🧈",
+      "🧂",
+      "🥫",
+      "🍱",
+      "🍘",
+      "🍙",
+      "🍚",
+      "🍛",
+      "🍜",
+      "🍝",
+      "🍠",
+      "🍢",
+      "🍣",
+      "🍤",
+      "🍥",
+      "🥮",
+      "🍡",
+      "🥟",
+      "🥠",
+      "🥡",
+      "🦀",
+      "🦞",
+      "🦐",
+      "🦑",
+      "🦪",
+      "🍦",
+      "🍧",
+      "🍨",
+      "🍩",
+      "🍪",
+      "🎂",
+      "🍰",
+      "🧁",
+      "🥧",
+      "🍫",
+      "🍬",
+      "🍭",
+      "🍮",
+      "🍯",
+      "🍼",
+      "🥛",
+      "☕",
+      "🫖",
+      "🍵",
+      "🍶",
+      "🍾",
+      "🍷",
+      "🍸",
+      "🍹",
+      "🍺",
+      "🍻",
+      "🥂",
+      "🥃",
+      "🫗",
+      "🥤",
+      "🧋",
+      "🧃",
+      "🧉",
+      "🧊",
+      "🥢",
+      "🍽️",
+      "🥄",
+      "🔪",
+      "🏺",
+      "🫙",
     ],
   },
   {
@@ -78,21 +599,223 @@ export const categories = [
     icon: "✈️",
     name: "Travel & Places",
     emoji: [
-      "🌍", "🌎", "🌏", "🌐", "🗺️", "🧭", "🏔️", "⛰️", "🌋", "🗻", "🏕️", "🏖️", "🏜️", "🏝️", "🏞️",
-      "🏟️", "🏛️", "🏗️", "🧱", "🪨", "🪵", "🛖", "🏘️", "🏚️", "🏠", "🏡", "🏢", "🏣", "🏤", "🏥",
-      "🏦", "🏨", "🏩", "🏪", "🏫", "🏬", "🏭", "🏯", "🏰", "💒", "🗼", "🗽", "⛪", "🕌", "🛕",
-      "🕍", "⛩️", "🕋", "⛲", "⛺", "🌁", "🌃", "🏙️", "🌄", "🌅", "🌆", "🌇", "🌉", "♨️", "🎠",
-      "🛝", "🎡", "🎢", "💈", "🎪", "🚂", "🚃", "🚄", "🚅", "🚆", "🚇", "🚈", "🚉", "🚊", "🚝",
-      "🚞", "🚋", "🚌", "🚍", "🚎", "🚐", "🚑", "🚒", "🚓", "🚔", "🚕", "🚖", "🚗", "🚘", "🚙",
-      "🛻", "🚚", "🚛", "🚜", "🏎️", "🏍️", "🛵", "🦽", "🦼", "🛺", "🚲", "🛴", "🛹", "🛼", "🚏",
-      "🛣️", "🛤️", "🛢️", "⛽", "🛞", "🚨", "🚥", "🚦", "🛑", "🚧", "⚓", "🛟", "⛵", "🛶", "🚤",
-      "🛳️", "⛴️", "🛥️", "🚢", "✈️", "🛩️", "🛫", "🛬", "🪂", "💺", "🚁", "🚟", "🚠", "🚡", "🛰️",
-      "🚀", "🛸", "🛎️", "🧳", "⌛", "⏳", "⌚", "⏰", "⏱️", "⏲️", "🕰️", "🕛", "🕧", "🕐", "🕜",
-      "🕑", "🕝", "🕒", "🕞", "🕓", "🕟", "🕔", "🕠", "🕕", "🕡", "🕖", "🕢", "🕗", "🕣", "🕘",
-      "🕤", "🕙", "🕥", "🕚", "🕦", "🌑", "🌒", "🌓", "🌔", "🌕", "🌖", "🌗", "🌘", "🌙", "🌚",
-      "🌛", "🌜", "🌡️", "☀️", "🌝", "🌞", "🪐", "⭐", "🌟", "🌠", "🌌", "☁️", "⛅", "⛈️", "🌤️",
-      "🌥️", "🌦️", "🌧️", "🌨️", "🌩️", "🌪️", "🌫️", "🌬️", "🌀", "🌈", "🌂", "☂️", "☔", "⛱️", "⚡",
-      "❄️", "☃️", "⛄", "☄️", "🔥", "💧", "🌊",
+      "🌍",
+      "🌎",
+      "🌏",
+      "🌐",
+      "🗺️",
+      "🧭",
+      "🏔️",
+      "⛰️",
+      "🌋",
+      "🗻",
+      "🏕️",
+      "🏖️",
+      "🏜️",
+      "🏝️",
+      "🏞️",
+      "🏟️",
+      "🏛️",
+      "🏗️",
+      "🧱",
+      "🪨",
+      "🪵",
+      "🛖",
+      "🏘️",
+      "🏚️",
+      "🏠",
+      "🏡",
+      "🏢",
+      "🏣",
+      "🏤",
+      "🏥",
+      "🏦",
+      "🏨",
+      "🏩",
+      "🏪",
+      "🏫",
+      "🏬",
+      "🏭",
+      "🏯",
+      "🏰",
+      "💒",
+      "🗼",
+      "🗽",
+      "⛪",
+      "🕌",
+      "🛕",
+      "🕍",
+      "⛩️",
+      "🕋",
+      "⛲",
+      "⛺",
+      "🌁",
+      "🌃",
+      "🏙️",
+      "🌄",
+      "🌅",
+      "🌆",
+      "🌇",
+      "🌉",
+      "♨️",
+      "🎠",
+      "🛝",
+      "🎡",
+      "🎢",
+      "💈",
+      "🎪",
+      "🚂",
+      "🚃",
+      "🚄",
+      "🚅",
+      "🚆",
+      "🚇",
+      "🚈",
+      "🚉",
+      "🚊",
+      "🚝",
+      "🚞",
+      "🚋",
+      "🚌",
+      "🚍",
+      "🚎",
+      "🚐",
+      "🚑",
+      "🚒",
+      "🚓",
+      "🚔",
+      "🚕",
+      "🚖",
+      "🚗",
+      "🚘",
+      "🚙",
+      "🛻",
+      "🚚",
+      "🚛",
+      "🚜",
+      "🏎️",
+      "🏍️",
+      "🛵",
+      "🦽",
+      "🦼",
+      "🛺",
+      "🚲",
+      "🛴",
+      "🛹",
+      "🛼",
+      "🚏",
+      "🛣️",
+      "🛤️",
+      "🛢️",
+      "⛽",
+      "🛞",
+      "🚨",
+      "🚥",
+      "🚦",
+      "🛑",
+      "🚧",
+      "⚓",
+      "🛟",
+      "⛵",
+      "🛶",
+      "🚤",
+      "🛳️",
+      "⛴️",
+      "🛥️",
+      "🚢",
+      "✈️",
+      "🛩️",
+      "🛫",
+      "🛬",
+      "🪂",
+      "💺",
+      "🚁",
+      "🚟",
+      "🚠",
+      "🚡",
+      "🛰️",
+      "🚀",
+      "🛸",
+      "🛎️",
+      "🧳",
+      "⌛",
+      "⏳",
+      "⌚",
+      "⏰",
+      "⏱️",
+      "⏲️",
+      "🕰️",
+      "🕛",
+      "🕧",
+      "🕐",
+      "🕜",
+      "🕑",
+      "🕝",
+      "🕒",
+      "🕞",
+      "🕓",
+      "🕟",
+      "🕔",
+      "🕠",
+      "🕕",
+      "🕡",
+      "🕖",
+      "🕢",
+      "🕗",
+      "🕣",
+      "🕘",
+      "🕤",
+      "🕙",
+      "🕥",
+      "🕚",
+      "🕦",
+      "🌑",
+      "🌒",
+      "🌓",
+      "🌔",
+      "🌕",
+      "🌖",
+      "🌗",
+      "🌘",
+      "🌙",
+      "🌚",
+      "🌛",
+      "🌜",
+      "🌡️",
+      "☀️",
+      "🌝",
+      "🌞",
+      "🪐",
+      "⭐",
+      "🌟",
+      "🌠",
+      "🌌",
+      "☁️",
+      "⛅",
+      "⛈️",
+      "🌤️",
+      "🌥️",
+      "🌦️",
+      "🌧️",
+      "🌨️",
+      "🌩️",
+      "🌪️",
+      "🌫️",
+      "🌬️",
+      "🌀",
+      "🌈",
+      "🌂",
+      "☂️",
+      "☔",
+      "⛱️",
+      "⚡",
+      "❄️",
+      "☃️",
+      "⛄",
+      "☄️",
+      "🔥",
+      "💧",
+      "🌊",
     ],
   },
   {
@@ -100,12 +823,96 @@ export const categories = [
     icon: "⚽",
     name: "Activities",
     emoji: [
-      "🎃", "🎄", "🎆", "🎇", "🧨", "✨", "🎈", "🎉", "🎊", "🎋", "🎍", "🎎", "🎏", "🎐", "🎑",
-      "🧧", "🎀", "🎁", "🎗️", "🎟️", "🎫", "🎖️", "🏆", "🏅", "🥇", "🥈", "🥉", "⚽", "⚾", "🥎",
-      "🏀", "🏐", "🏈", "🏉", "🎾", "🥏", "🎳", "🏏", "🏑", "🏒", "🥍", "🏓", "🏸", "🥊", "🥋",
-      "🥅", "⛳", "⛸️", "🎣", "🤿", "🎽", "🎿", "🛷", "🥌", "🎯", "🪀", "🪁", "🔫", "🎱", "🔮",
-      "🪄", "🧿", "🪬", "🎮", "🕹️", "🎰", "🧩", "🧸", "🪅", "🪩", "🪆", "🎭", "🖼️", "🎨", "🧵",
-      "🪡", "🧶", "🪢", "🎹", "🎷", "🎺", "🎸", "🪕", "🎻", "🪘", "🪇", "🪈", "🥁", "🪗", "🎬",
+      "🎃",
+      "🎄",
+      "🎆",
+      "🎇",
+      "🧨",
+      "✨",
+      "🎈",
+      "🎉",
+      "🎊",
+      "🎋",
+      "🎍",
+      "🎎",
+      "🎏",
+      "🎐",
+      "🎑",
+      "🧧",
+      "🎀",
+      "🎁",
+      "🎗️",
+      "🎟️",
+      "🎫",
+      "🎖️",
+      "🏆",
+      "🏅",
+      "🥇",
+      "🥈",
+      "🥉",
+      "⚽",
+      "⚾",
+      "🥎",
+      "🏀",
+      "🏐",
+      "🏈",
+      "🏉",
+      "🎾",
+      "🥏",
+      "🎳",
+      "🏏",
+      "🏑",
+      "🏒",
+      "🥍",
+      "🏓",
+      "🏸",
+      "🥊",
+      "🥋",
+      "🥅",
+      "⛳",
+      "⛸️",
+      "🎣",
+      "🤿",
+      "🎽",
+      "🎿",
+      "🛷",
+      "🥌",
+      "🎯",
+      "🪀",
+      "🪁",
+      "🔫",
+      "🎱",
+      "🔮",
+      "🪄",
+      "🧿",
+      "🪬",
+      "🎮",
+      "🕹️",
+      "🎰",
+      "🧩",
+      "🧸",
+      "🪅",
+      "🪩",
+      "🪆",
+      "🎭",
+      "🖼️",
+      "🎨",
+      "🧵",
+      "🪡",
+      "🧶",
+      "🪢",
+      "🎹",
+      "🎷",
+      "🎺",
+      "🎸",
+      "🪕",
+      "🎻",
+      "🪘",
+      "🪇",
+      "🪈",
+      "🥁",
+      "🪗",
+      "🎬",
     ],
   },
   {
@@ -113,23 +920,251 @@ export const categories = [
     icon: "💡",
     name: "Objects",
     emoji: [
-      "👓", "🕶️", "🥽", "🥼", "🦺", "👔", "👕", "👖", "🧣", "🧤", "🧥", "🧦", "👗", "👘", "🥻",
-      "🩱", "🩲", "🩳", "👙", "👚", "🪭", "👛", "👜", "👝", "🛍️", "🎒", "🩴", "👞", "👟", "🥾",
-      "🥿", "👠", "👡", "🩰", "👢", "🪮", "👑", "👒", "🎩", "🎓", "🧢", "🪖", "⛑️", "📿", "💄",
-      "💍", "💎", "🔇", "🔈", "🔉", "🔊", "📢", "📣", "📯", "🔔", "🔕", "🎶", "🎵", "🎙️", "🎚️",
-      "🎛️", "📻", "📱", "📲", "☎️", "📞", "📟", "📠", "🔋", "🪫", "🔌", "💻", "🖥️", "🖨️", "⌨️",
-      "🖱️", "🖲️", "💽", "💾", "💿", "📀", "🧮", "🎥", "🎞️", "📽️", "🎬", "📺", "📷", "📸", "📹",
-      "📼", "🔍", "🔎", "🕯️", "💡", "🔦", "🏮", "🪔", "📔", "📕", "📖", "📗", "📘", "📙", "📚",
-      "📓", "📒", "📃", "📜", "📄", "📰", "🗞️", "📑", "🔖", "🏷️", "💰", "🪙", "💴", "💵", "💶",
-      "💷", "💸", "💳", "🧾", "💹", "✉️", "📧", "📨", "📩", "📤", "📥", "📦", "📫", "📪", "📬",
-      "📭", "📮", "🗳️", "✏️", "✒️", "🖋️", "🖊️", "🖌️", "🖍️", "📝", "💼", "📁", "📂", "🗂️", "📅",
-      "📆", "🗒️", "🗓️", "📇", "📈", "📉", "📊", "📋", "📌", "📍", "📎", "🖇️", "📏", "📐", "✂️",
-      "🗃️", "🗄️", "🗑️", "🔒", "🔓", "🔏", "🔐", "🔑", "🗝️", "🔨", "🪓", "⛏️", "⚒️", "🛠️", "🗡️",
-      "⚔️", "💣", "🪃", "🏹", "🛡️", "🪚", "🔧", "🪛", "🔩", "⚙️", "🗜️", "⚖️", "🦯", "🔗", "⛓️",
-      "🪝", "🧰", "🧲", "🪜", "⚗️", "🧪", "🧫", "🧬", "🔬", "🔭", "📡", "💉", "🩸", "💊", "🩹",
-      "🩼", "🩺", "🩻", "🚪", "🛗", "🪞", "🪟", "🛏️", "🛋️", "🪑", "🚽", "🪠", "🚿", "🛁", "🪤",
-      "🪒", "🧴", "🧷", "🧹", "🧺", "🧻", "🪣", "🧼", "🫧", "🪥", "🧽", "🧯", "🛒", "🚬", "⚰️",
-      "🪦", "⚱️", "🗿", "🪧", "🪪",
+      "👓",
+      "🕶️",
+      "🥽",
+      "🥼",
+      "🦺",
+      "👔",
+      "👕",
+      "👖",
+      "🧣",
+      "🧤",
+      "🧥",
+      "🧦",
+      "👗",
+      "👘",
+      "🥻",
+      "🩱",
+      "🩲",
+      "🩳",
+      "👙",
+      "👚",
+      "🪭",
+      "👛",
+      "👜",
+      "👝",
+      "🛍️",
+      "🎒",
+      "🩴",
+      "👞",
+      "👟",
+      "🥾",
+      "🥿",
+      "👠",
+      "👡",
+      "🩰",
+      "👢",
+      "🪮",
+      "👑",
+      "👒",
+      "🎩",
+      "🎓",
+      "🧢",
+      "🪖",
+      "⛑️",
+      "📿",
+      "💄",
+      "💍",
+      "💎",
+      "🔇",
+      "🔈",
+      "🔉",
+      "🔊",
+      "📢",
+      "📣",
+      "📯",
+      "🔔",
+      "🔕",
+      "🎶",
+      "🎵",
+      "🎙️",
+      "🎚️",
+      "🎛️",
+      "📻",
+      "📱",
+      "📲",
+      "☎️",
+      "📞",
+      "📟",
+      "📠",
+      "🔋",
+      "🪫",
+      "🔌",
+      "💻",
+      "🖥️",
+      "🖨️",
+      "⌨️",
+      "🖱️",
+      "🖲️",
+      "💽",
+      "💾",
+      "💿",
+      "📀",
+      "🧮",
+      "🎥",
+      "🎞️",
+      "📽️",
+      "🎬",
+      "📺",
+      "📷",
+      "📸",
+      "📹",
+      "📼",
+      "🔍",
+      "🔎",
+      "🕯️",
+      "💡",
+      "🔦",
+      "🏮",
+      "🪔",
+      "📔",
+      "📕",
+      "📖",
+      "📗",
+      "📘",
+      "📙",
+      "📚",
+      "📓",
+      "📒",
+      "📃",
+      "📜",
+      "📄",
+      "📰",
+      "🗞️",
+      "📑",
+      "🔖",
+      "🏷️",
+      "💰",
+      "🪙",
+      "💴",
+      "💵",
+      "💶",
+      "💷",
+      "💸",
+      "💳",
+      "🧾",
+      "💹",
+      "✉️",
+      "📧",
+      "📨",
+      "📩",
+      "📤",
+      "📥",
+      "📦",
+      "📫",
+      "📪",
+      "📬",
+      "📭",
+      "📮",
+      "🗳️",
+      "✏️",
+      "✒️",
+      "🖋️",
+      "🖊️",
+      "🖌️",
+      "🖍️",
+      "📝",
+      "💼",
+      "📁",
+      "📂",
+      "🗂️",
+      "📅",
+      "📆",
+      "🗒️",
+      "🗓️",
+      "📇",
+      "📈",
+      "📉",
+      "📊",
+      "📋",
+      "📌",
+      "📍",
+      "📎",
+      "🖇️",
+      "📏",
+      "📐",
+      "✂️",
+      "🗃️",
+      "🗄️",
+      "🗑️",
+      "🔒",
+      "🔓",
+      "🔏",
+      "🔐",
+      "🔑",
+      "🗝️",
+      "🔨",
+      "🪓",
+      "⛏️",
+      "⚒️",
+      "🛠️",
+      "🗡️",
+      "⚔️",
+      "💣",
+      "🪃",
+      "🏹",
+      "🛡️",
+      "🪚",
+      "🔧",
+      "🪛",
+      "🔩",
+      "⚙️",
+      "🗜️",
+      "⚖️",
+      "🦯",
+      "🔗",
+      "⛓️",
+      "🪝",
+      "🧰",
+      "🧲",
+      "🪜",
+      "⚗️",
+      "🧪",
+      "🧫",
+      "🧬",
+      "🔬",
+      "🔭",
+      "📡",
+      "💉",
+      "🩸",
+      "💊",
+      "🩹",
+      "🩼",
+      "🩺",
+      "🩻",
+      "🚪",
+      "🛗",
+      "🪞",
+      "🪟",
+      "🛏️",
+      "🛋️",
+      "🪑",
+      "🚽",
+      "🪠",
+      "🚿",
+      "🛁",
+      "🪤",
+      "🪒",
+      "🧴",
+      "🧷",
+      "🧹",
+      "🧺",
+      "🧻",
+      "🪣",
+      "🧼",
+      "🫧",
+      "🪥",
+      "🧽",
+      "🧯",
+      "🛒",
+      "🚬",
+      "⚰️",
+      "🪦",
+      "⚱️",
+      "🗿",
+      "🪧",
+      "🪪",
     ],
   },
   {
@@ -137,22 +1172,237 @@ export const categories = [
     icon: "♾️",
     name: "Symbols",
     emoji: [
-      "🏧", "🚮", "🚰", "♿", "🚹", "🚺", "🚻", "🚼", "🚾", "🛂", "🛃", "🛄", "🛅", "⚠️", "🚸",
-      "⛔", "🚫", "🚳", "🚭", "🚯", "🚱", "🚷", "📵", "🔞", "☢️", "☣️", "⬆️", "↗️", "➡️", "↘️",
-      "⬇️", "↙️", "⬅️", "↖️", "↕️", "↔️", "↩️", "↪️", "⤴️", "⤵️", "🔃", "🔄", "🔙", "🔚", "🔛",
-      "🔜", "🔝", "🛐", "⚛️", "🕉️", "✡️", "☸️", "☯️", "✝️", "☦️", "☪️", "☮️", "🕎", "🔯", "🪯",
-      "♈", "♉", "♊", "♋", "♌", "♍", "♎", "♏", "♐", "♑", "♒", "♓", "⛎", "🔀", "🔁",
-      "🔂", "▶️", "⏩", "⏭️", "⏯️", "◀️", "⏪", "⏮️", "🔼", "⏫", "🔽", "⏬", "⏸️", "⏹️", "⏺️",
-      "⏏️", "🎦", "🔅", "🔆", "📶", "🛜", "📳", "📴", "♀️", "♂️", "⚧️", "✖️", "➕", "➖", "➗",
-      "🟰", "♾️", "‼️", "⁉️", "❓", "❔", "❕", "❗", "〰️", "💱", "💲", "⚕️", "♻️", "⚜️", "🔱",
-      "📛", "🔰", "⭕", "✅", "☑️", "✔️", "❌", "❎", "➰", "➿", "〽️", "✳️", "✴️", "❇️", "©️",
-      "®️", "™️", "#️⃣", "*️⃣", "0️⃣", "1️⃣", "2️⃣", "3️⃣", "4️⃣", "5️⃣", "6️⃣", "7️⃣", "8️⃣", "9️⃣", "🔟",
-      "🔠", "🔡", "🔢", "🔣", "🔤", "🅰️", "🆎", "🅱️", "🆑", "🆒", "🆓", "ℹ️", "🆔", "Ⓜ️", "🆕",
-      "🆖", "🅾️", "🆗", "🅿️", "🆘", "🆙", "🆚", "🈁", "🈂️", "🈷️", "🈶", "🈯", "🉐", "🈹", "🈚",
-      "🈲", "🉑", "🈸", "🈴", "🈳", "㊗️", "㊙️", "🈺", "🈵", "🔴", "🟠", "🟡", "🟢", "🔵", "🟣",
-      "🟤", "⚫", "⚪", "🟥", "🟧", "🟨", "🟩", "🟦", "🟪", "🟫", "⬛", "⬜", "◼️", "◻️", "◾",
-      "◽", "▪️", "▫️", "🔶", "🔷", "🔸", "🔹", "🔺", "🔻", "💠", "🔘", "🔳", "🔲", "🏁", "🚩",
-      "🎌", "🏴", "🏳️", "🏳️‍🌈", "🏳️‍⚧️", "🏴‍☠️",
+      "🏧",
+      "🚮",
+      "🚰",
+      "♿",
+      "🚹",
+      "🚺",
+      "🚻",
+      "🚼",
+      "🚾",
+      "🛂",
+      "🛃",
+      "🛄",
+      "🛅",
+      "⚠️",
+      "🚸",
+      "⛔",
+      "🚫",
+      "🚳",
+      "🚭",
+      "🚯",
+      "🚱",
+      "🚷",
+      "📵",
+      "🔞",
+      "☢️",
+      "☣️",
+      "⬆️",
+      "↗️",
+      "➡️",
+      "↘️",
+      "⬇️",
+      "↙️",
+      "⬅️",
+      "↖️",
+      "↕️",
+      "↔️",
+      "↩️",
+      "↪️",
+      "⤴️",
+      "⤵️",
+      "🔃",
+      "🔄",
+      "🔙",
+      "🔚",
+      "🔛",
+      "🔜",
+      "🔝",
+      "🛐",
+      "⚛️",
+      "🕉️",
+      "✡️",
+      "☸️",
+      "☯️",
+      "✝️",
+      "☦️",
+      "☪️",
+      "☮️",
+      "🕎",
+      "🔯",
+      "🪯",
+      "♈",
+      "♉",
+      "♊",
+      "♋",
+      "♌",
+      "♍",
+      "♎",
+      "♏",
+      "♐",
+      "♑",
+      "♒",
+      "♓",
+      "⛎",
+      "🔀",
+      "🔁",
+      "🔂",
+      "▶️",
+      "⏩",
+      "⏭️",
+      "⏯️",
+      "◀️",
+      "⏪",
+      "⏮️",
+      "🔼",
+      "⏫",
+      "🔽",
+      "⏬",
+      "⏸️",
+      "⏹️",
+      "⏺️",
+      "⏏️",
+      "🎦",
+      "🔅",
+      "🔆",
+      "📶",
+      "🛜",
+      "📳",
+      "📴",
+      "♀️",
+      "♂️",
+      "⚧️",
+      "✖️",
+      "➕",
+      "➖",
+      "➗",
+      "🟰",
+      "♾️",
+      "‼️",
+      "⁉️",
+      "❓",
+      "❔",
+      "❕",
+      "❗",
+      "〰️",
+      "💱",
+      "💲",
+      "⚕️",
+      "♻️",
+      "⚜️",
+      "🔱",
+      "📛",
+      "🔰",
+      "⭕",
+      "✅",
+      "☑️",
+      "✔️",
+      "❌",
+      "❎",
+      "➰",
+      "➿",
+      "〽️",
+      "✳️",
+      "✴️",
+      "❇️",
+      "©️",
+      "®️",
+      "™️",
+      "#️⃣",
+      "*️⃣",
+      "0️⃣",
+      "1️⃣",
+      "2️⃣",
+      "3️⃣",
+      "4️⃣",
+      "5️⃣",
+      "6️⃣",
+      "7️⃣",
+      "8️⃣",
+      "9️⃣",
+      "🔟",
+      "🔠",
+      "🔡",
+      "🔢",
+      "🔣",
+      "🔤",
+      "🅰️",
+      "🆎",
+      "🅱️",
+      "🆑",
+      "🆒",
+      "🆓",
+      "ℹ️",
+      "🆔",
+      "Ⓜ️",
+      "🆕",
+      "🆖",
+      "🅾️",
+      "🆗",
+      "🅿️",
+      "🆘",
+      "🆙",
+      "🆚",
+      "🈁",
+      "🈂️",
+      "🈷️",
+      "🈶",
+      "🈯",
+      "🉐",
+      "🈹",
+      "🈚",
+      "🈲",
+      "🉑",
+      "🈸",
+      "🈴",
+      "🈳",
+      "㊗️",
+      "㊙️",
+      "🈺",
+      "🈵",
+      "🔴",
+      "🟠",
+      "🟡",
+      "🟢",
+      "🔵",
+      "🟣",
+      "🟤",
+      "⚫",
+      "⚪",
+      "🟥",
+      "🟧",
+      "🟨",
+      "🟩",
+      "🟦",
+      "🟪",
+      "🟫",
+      "⬛",
+      "⬜",
+      "◼️",
+      "◻️",
+      "◾",
+      "◽",
+      "▪️",
+      "▫️",
+      "🔶",
+      "🔷",
+      "🔸",
+      "🔹",
+      "🔺",
+      "🔻",
+      "💠",
+      "🔘",
+      "🔳",
+      "🔲",
+      "🏁",
+      "🚩",
+      "🎌",
+      "🏴",
+      "🏳️",
+      "🏳️‍🌈",
+      "🏳️‍⚧️",
+      "🏴‍☠️",
     ],
   },
 ];
diff --git a/ui/keyboard/index.css b/ui/keyboard/index.css
index bdb02cd..332dee8 100644
--- a/ui/keyboard/index.css
+++ b/ui/keyboard/index.css
@@ -16,12 +16,32 @@
   /* Keyboard-specific palette — dark surfaces tinted from theme */
   --kb-bg: color-mix(in oklch, var(--bg-footer) 30%, oklch(18% 0.01 105));
   --kb-key: color-mix(in oklch, var(--bg-footer) 20%, oklch(30% 0.01 105));
-  --kb-key-active: color-mix(in oklch, var(--color-primary) 40%, oklch(45% 0.02 105));
-  --kb-key-pressed: color-mix(in oklch, var(--bg-footer) 25%, oklch(50% 0.02 105));
-  --kb-text: color-mix(in oklch, var(--color-text-on-header) 90%, oklch(95% 0 0));
-  --kb-text-muted: color-mix(in oklch, var(--color-text-on-header) 50%, oklch(60% 0 0));
+  --kb-key-active: color-mix(
+    in oklch,
+    var(--color-primary) 40%,
+    oklch(45% 0.02 105)
+  );
+  --kb-key-pressed: color-mix(
+    in oklch,
+    var(--bg-footer) 25%,
+    oklch(50% 0.02 105)
+  );
+  --kb-text: color-mix(
+    in oklch,
+    var(--color-text-on-header) 90%,
+    oklch(95% 0 0)
+  );
+  --kb-text-muted: color-mix(
+    in oklch,
+    var(--color-text-on-header) 50%,
+    oklch(60% 0 0)
+  );
   --kb-border: color-mix(in oklch, var(--bg-footer) 20%, oklch(25% 0.01 105));
-  --kb-separator: color-mix(in oklch, var(--bg-footer) 15%, oklch(28% 0.01 105));
+  --kb-separator: color-mix(
+    in oklch,
+    var(--bg-footer) 15%,
+    oklch(28% 0.01 105)
+  );
 }
 
 html,
diff --git a/ui/keyboard/index.html b/ui/keyboard/index.html
index 61014da..abe3188 100644
--- a/ui/keyboard/index.html
+++ b/ui/keyboard/index.html
@@ -1,16 +1,16 @@
-<!DOCTYPE html>
+<!doctype html>
 <!-- SPDX-License-Identifier: AGPL-3.0-or-later -->
 <html>
-<head>
-  <meta charset="utf-8">
-  <title>Virtual Keyboard</title>
-  <link rel="stylesheet" href="beaver://theme/index.css" />
-  <link rel="stylesheet" href="beaver://shared/fonts/fonts.css" />
-  <script type="module" src="beaver://shared/theme.js"></script>
-  <link rel="stylesheet" href="index.css" />
-</head>
-<body>
-  <div class="keyboard" id="keyboard"></div>
-  <script type="module" src="index.js"></script>
-</body>
+  <head>
+    <meta charset="utf-8" />
+    <title>Virtual Keyboard</title>
+    <link rel="stylesheet" href="beaver://theme/index.css" />
+    <link rel="stylesheet" href="beaver://shared/fonts/fonts.css" />
+    <script type="module" src="beaver://shared/theme.js"></script>
+    <link rel="stylesheet" href="index.css" />
+  </head>
+  <body>
+    <div class="keyboard" id="keyboard"></div>
+    <script type="module" src="index.js"></script>
+  </body>
 </html>
diff --git a/ui/keyboard/layouts/numpad.js b/ui/keyboard/layouts/numpad.js
index 9bd87d2..dd57707 100644
--- a/ui/keyboard/layouts/numpad.js
+++ b/ui/keyboard/layouts/numpad.js
@@ -16,15 +16,25 @@ const RETURN = {
   gridColumn: "4",
   gridRow: "2 / 5",
 };
- 
+
 export default {
   default: {
     grid: 4,
     keys: [
-      "1", "2", "3", BACKSPACE,
-      "4", "5", "6", RETURN,
-      "7", "8", "9",
-      "-", "0", ".",
+      "1",
+      "2",
+      "3",
+      BACKSPACE,
+      "4",
+      "5",
+      "6",
+      RETURN,
+      "7",
+      "8",
+      "9",
+      "-",
+      "0",
+      ".",
     ],
   },
 };
diff --git a/ui/keyboard/layouts/shared.js b/ui/keyboard/layouts/shared.js
index 1b37ba3..7802720 100644
--- a/ui/keyboard/layouts/shared.js
+++ b/ui/keyboard/layouts/shared.js
@@ -53,7 +53,13 @@ export const SYMBOLS1 = [
   ["@", "#", "$", "%", "&", "-", "+", "(", ")"],
   [
     { label: "#+=", switchTo: "symbols2", size: "wide" },
-    "*", "\"", "'", ":", ";", "!", "?",
+    "*",
+    '"',
+    "'",
+    ":",
+    ";",
+    "!",
+    "?",
     BACKSPACE,
   ],
   [TO_ALPHA, GLOBE, SPACE, ".", RETURN],
@@ -64,7 +70,13 @@ export const SYMBOLS2 = [
   ["`", "\u00b0", "\u00a3", "\u20ac", "\u00a5", "\u00b7", "^", "{", "}"],
   [
     { label: "123", switchTo: "symbols1", size: "wide" },
-    "\u2022", "\u00a9", "\u00ae", "\u2122", "\u00bf", "\u00a1", "\u2026",
+    "\u2022",
+    "\u00a9",
+    "\u00ae",
+    "\u2122",
+    "\u00bf",
+    "\u00a1",
+    "\u2026",
     BACKSPACE,
   ],
   [TO_ALPHA, GLOBE, SPACE, ".", RETURN],
diff --git a/ui/settings/index.html b/ui/settings/index.html
index 164b507..4b0ec26 100644
--- a/ui/settings/index.html
+++ b/ui/settings/index.html
@@ -181,10 +181,12 @@
               </label>
             </div>
 
-            <div id="p2p-local-info" class="p2p-section" style="display:none">
+            <div id="p2p-local-info" class="p2p-section" style="display: none">
               <div class="setting-row">
                 <div class="setting-info">
-                  <label for="p2p-name" class="setting-label">Display Name</label>
+                  <label for="p2p-name" class="setting-label"
+                    >Display Name</label
+                  >
                   <span class="setting-description">
                     How this device appears to other peers
                   </span>
@@ -195,11 +197,13 @@
                 <button id="p2p-rename">Rename</button>
               </div>
               <div class="p2p-id">
-                <span class="setting-description">ID: <code id="p2p-id-value"></code></span>
+                <span class="setting-description"
+                  >ID: <code id="p2p-id-value"></code
+                ></span>
               </div>
             </div>
 
-            <div id="p2p-peers" class="p2p-section" style="display:none">
+            <div id="p2p-peers" class="p2p-section" style="display: none">
               <div class="setting-row">
                 <div class="setting-info">
                   <label class="setting-label">Known Peers</label>
@@ -207,11 +211,13 @@
                 <button id="p2p-refresh-peers">Refresh</button>
               </div>
               <div id="p2p-peer-list" class="p2p-peer-list">
-                <span class="setting-description">No peers discovered yet.</span>
+                <span class="setting-description"
+                  >No peers discovered yet.</span
+                >
               </div>
             </div>
 
-            <div id="p2p-guest-mode" class="p2p-section" style="display:none">
+            <div id="p2p-guest-mode" class="p2p-section" style="display: none">
               <div class="setting-row">
                 <div class="setting-info">
                   <label for="p2p-guest-toggle" class="setting-label">
@@ -226,7 +232,11 @@
                   <span class="toggle-slider"></span>
                 </label>
               </div>
-              <div id="p2p-guest-pin-display" class="p2p-guest-pin" style="display:none">
+              <div
+                id="p2p-guest-pin-display"
+                class="p2p-guest-pin"
+                style="display: none"
+              >
                 <span class="setting-label">PIN</span>
                 <code id="p2p-guest-pin-value" class="p2p-pin-code"></code>
               </div>
@@ -244,11 +254,13 @@
             <div id="atproto-status" class="setting-row">
               <div class="setting-info">
                 <label class="setting-label">Status</label>
-                <span class="setting-description" id="atproto-status-text">Checking...</span>
+                <span class="setting-description" id="atproto-status-text"
+                  >Checking...</span
+                >
               </div>
             </div>
 
-            <div id="atproto-logged-in" style="display:none">
+            <div id="atproto-logged-in" style="display: none">
               <div class="setting-row">
                 <div class="setting-info">
                   <label class="setting-label">Handle</label>
@@ -258,12 +270,19 @@
               <div class="setting-row">
                 <div class="setting-info">
                   <label class="setting-label">DID</label>
-                  <span class="setting-description"><code id="atproto-did"></code></span>
+                  <span class="setting-description"
+                    ><code id="atproto-did"></code
+                  ></span>
                 </div>
               </div>
-              <button id="atproto-logout" class="atproto-btn atproto-btn-danger">Log out</button>
+              <button
+                id="atproto-logout"
+                class="atproto-btn atproto-btn-danger"
+              >
+                Log out
+              </button>
 
-              <div class="setting-row" style="margin-top:var(--spacing-md)">
+              <div class="setting-row" style="margin-top: var(--spacing-md)">
                 <div class="setting-info">
                   <label class="setting-label">Authorized Origins</label>
                   <span class="setting-description">
@@ -276,22 +295,38 @@
               </div>
             </div>
 
-            <div id="atproto-logged-out" style="display:none">
+            <div id="atproto-logged-out" style="display: none">
               <div class="setting-row">
                 <div class="setting-info">
-                  <label for="atproto-login-handle" class="setting-label">Handle</label>
+                  <label for="atproto-login-handle" class="setting-label"
+                    >Handle</label
+                  >
                   <span class="setting-description">Your ATProto handle</span>
                 </div>
               </div>
-              <input type="text" id="atproto-login-handle" placeholder="user.bsky.social" />
+              <input
+                type="text"
+                id="atproto-login-handle"
+                placeholder="user.bsky.social"
+              />
               <div class="setting-row">
                 <div class="setting-info">
-                  <label for="atproto-login-password" class="setting-label">Password</label>
+                  <label for="atproto-login-password" class="setting-label"
+                    >Password</label
+                  >
                   <span class="setting-description">Your PDS password</span>
                 </div>
               </div>
-              <input type="password" id="atproto-login-password" placeholder="Password" />
-              <div id="atproto-error" class="atproto-error" style="display:none"></div>
+              <input
+                type="password"
+                id="atproto-login-password"
+                placeholder="Password"
+              />
+              <div
+                id="atproto-error"
+                class="atproto-error"
+                style="display: none"
+              ></div>
               <button id="atproto-login" class="atproto-btn">Log in</button>
             </div>
           </div>
@@ -310,7 +345,8 @@
                   Mobile Simulation
                 </label>
                 <span class="setting-description">
-                  Force mobile UI mode regardless of screen size (requires restart)
+                  Force mobile UI mode regardless of screen size (requires
+                  restart)
                 </span>
               </div>
               <label class="toggle-switch">
diff --git a/ui/shared/search/providers/remoteviews.js b/ui/shared/search/providers/remoteviews.js
index bc4d5d2..15e269b 100644
--- a/ui/shared/search/providers/remoteviews.js
+++ b/ui/shared/search/providers/remoteviews.js
@@ -18,7 +18,11 @@ export class RemoteViewsProvider {
         data.responseFor === this.pendingRequestId &&
         data.results
       ) {
-        console.warn("[RemoteViews] Received response:", data.results.length, "results");
+        console.warn(
+          "[RemoteViews] Received response:",
+          data.results.length,
+          "results",
+        );
         console.warn("[RemoteViews] Full response data:", data);
         for (const result of data.results) {
           console.warn("[RemoteViews] Result:", result);
@@ -42,7 +46,12 @@ export class RemoteViewsProvider {
       requestId: this.pendingRequestId,
       text: query,
     });
-    console.warn("[RemoteViews] Sent query:", query, "requestId:", this.pendingRequestId);
+    console.warn(
+      "[RemoteViews] Sent query:",
+      query,
+      "requestId:",
+      this.pendingRequestId,
+    );
 
     await new Promise((resolve) => setTimeout(resolve, DISCOVERY_TIMEOUT));
 
diff --git a/ui/shared/search/providers/topsites.js b/ui/shared/search/providers/topsites.js
index 8ff8955..7c0688b 100644
--- a/ui/shared/search/providers/topsites.js
+++ b/ui/shared/search/providers/topsites.js
@@ -26,12 +26,18 @@ export class TopSitesProvider {
     this.loading = (async () => {
       try {
         // Use absolute URL so it works from any origin (homescreen, system, etc.)
-        const response = await fetch("beaver://shared/search/providers/top_100K.txt");
+        const response = await fetch(
+          "beaver://shared/search/providers/top_100K.txt",
+        );
         const text = await response.text();
         const lines = text.split("\n");
 
         // Skip header line
-        for (let i = 1; i < lines.length && this.sites.length < MAX_ENTRIES; i++) {
+        for (
+          let i = 1;
+          i < lines.length && this.sites.length < MAX_ENTRIES;
+          i++
+        ) {
           const line = lines[i].trim();
           if (!line) {
             continue;
@@ -88,9 +94,10 @@ export class TopSitesProvider {
       const domain = site.domain;
 
       // Check for prefix match (higher score)
-      const prefixMatch = domain.startsWith(query) ||
-                          domain.startsWith("www." + query) ||
-                          domain.substring(domain.indexOf(".") + 1).startsWith(query);
+      const prefixMatch =
+        domain.startsWith(query) ||
+        domain.startsWith("www." + query) ||
+        domain.substring(domain.indexOf(".") + 1).startsWith(query);
 
       // Check for substring match
       const substringMatch = !prefixMatch && domain.includes(query);
diff --git a/ui/shared/theme.js b/ui/shared/theme.js
index 940d223..636ae54 100644
--- a/ui/shared/theme.js
+++ b/ui/shared/theme.js
@@ -81,7 +81,9 @@ function initTheme() {
   // Listen for preference changes from the embedder
   if (navigator.embedder) {
     navigator.embedder.addEventListener("preferencechanged", (event) => {
-      console.log(`[Theme PrefChanged-${location.href}] ${event.detail.name} : ${event.detail.value}`);
+      console.log(
+        `[Theme PrefChanged-${location.href}] ${event.detail.name} : ${event.detail.value}`,
+      );
       if (event.detail.name === THEME_PREF_KEY) {
         applyTheme();
       }
diff --git a/ui/system/app.js b/ui/system/app.js
index f14fe2d..4a82b1d 100644
--- a/ui/system/app.js
+++ b/ui/system/app.js
@@ -92,4 +92,3 @@ export function initApp(layoutManager, isMobileMode, mobileComponents) {
 
   return { services, pairingHandler };
 }
-
diff --git a/ui/system/color_picker.css b/ui/system/color_picker.css
index 8359283..d7db3a2 100644
--- a/ui/system/color_picker.css
+++ b/ui/system/color_picker.css
@@ -69,7 +69,8 @@
   cursor: pointer;
   border-radius: var(--radius-sm);
   border: 1px solid var(--color-border);
-  background: linear-gradient(to bottom,
+  background: linear-gradient(
+    to bottom,
     hsl(0, 100%, 50%),
     hsl(60, 100%, 50%),
     hsl(120, 100%, 50%),
diff --git a/ui/system/content_blocker_panel.js b/ui/system/content_blocker_panel.js
index 93c9aa3..03dcc6f 100644
--- a/ui/system/content_blocker_panel.js
+++ b/ui/system/content_blocker_panel.js
@@ -204,8 +204,8 @@ class ContentBlockerPanel extends LitElement {
           </label>
         </div>
         <div class="stats">
-          <span class="count">${this.blockedCount}</span> blocked /
-          ${total} total (${percentage}%)
+          <span class="count">${this.blockedCount}</span> blocked / ${total}
+          total (${percentage}%)
         </div>
       </div>
     `;
diff --git a/ui/system/context_menu.js b/ui/system/context_menu.js
index 2f02942..0187f15 100644
--- a/ui/system/context_menu.js
+++ b/ui/system/context_menu.js
@@ -92,7 +92,8 @@ export class ContextMenu extends MenuBase {
       <menu style="left: ${this.x}px; top: ${this.y}px;">
         ${this.items.map(
           (item) => html`
-            <li class="${item.disabled ? "disabled" : ""}"
+            <li
+              class="${item.disabled ? "disabled" : ""}"
               @click=${() => this.handleItemClick(item)}
             >
               <span class="icon-slot">
diff --git a/ui/system/desktop/index.html b/ui/system/desktop/index.html
index 098a6c4..ceccafd 100644
--- a/ui/system/desktop/index.html
+++ b/ui/system/desktop/index.html
@@ -1,13 +1,19 @@
-<!DOCTYPE html>
+<!doctype html>
 <!-- SPDX-License-Identifier: AGPL-3.0-or-later -->
 <html>
   <head>
     <title>Beaver</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
+    />
     <link rel="webtasks" href="../tasks.json" />
     <link rel="stylesheet" href="beaver://theme/index.css" />
     <link rel="stylesheet" href="beaver://shared/fonts/fonts.css" />
-    <link rel="stylesheet" href="beaver://shared/third_party/lucide/lucide.css" />
+    <link
+      rel="stylesheet"
+      href="beaver://shared/third_party/lucide/lucide.css"
+    />
     <script type="module" src="beaver://shared/lucide_icon.js"></script>
     <link rel="stylesheet" href="../index.css" />
     <script src="../third_party/mousetrap/mousetrap.min.js"></script>
@@ -35,7 +41,7 @@
           <span id="notifications-badge" class="hidden">0</span>
         </div>
         <lucide-icon name="music" id="media-icon" class="hidden"></lucide-icon>
-         <lucide-icon name="plus" id="plus-icon"></lucide-icon>
+        <lucide-icon name="plus" id="plus-icon"></lucide-icon>
       </div>
       <notification-panel id="notification-panel"></notification-panel>
       <div id="media-panel">
@@ -45,7 +51,6 @@
     </main>
     <toast-manager id="toast-manager"></toast-manager>
     <task-chooser></task-chooser>
-    <footer id="footer">
-    </footer>
+    <footer id="footer"></footer>
   </body>
 </html>
diff --git a/ui/system/desktop/init.js b/ui/system/desktop/init.js
index 7790b7f..869c9c2 100644
--- a/ui/system/desktop/init.js
+++ b/ui/system/desktop/init.js
@@ -54,7 +54,9 @@ export function initDesktop(
         createNewView();
         break;
       case "new-window":
-        navigator.embedder.openNewOSWindow("beaver://system/desktop/index.html");
+        navigator.embedder.openNewOSWindow(
+          "beaver://system/desktop/index.html",
+        );
         break;
       case "new-search":
         navigator.embedder.openNewOSWindow(
diff --git a/ui/system/desktop/notification_panel.css b/ui/system/desktop/notification_panel.css
index 0f012ff..182dcb7 100644
--- a/ui/system/desktop/notification_panel.css
+++ b/ui/system/desktop/notification_panel.css
@@ -24,7 +24,8 @@
   background: var(--bg-menu);
   box-shadow: 4px 0 16px var(--color-shadow-menu);
   transform: translateX(-100%);
-  transition: transform var(--transition-fast),
+  transition:
+    transform var(--transition-fast),
     visibility var(--transition-fast);
   display: flex;
   flex-direction: column;
@@ -225,7 +226,9 @@
   bottom: 0;
   background: var(--color-backdrop);
   opacity: 0;
-  transition: opacity var(--transition-fast), visibility var(--transition-fast);
+  transition:
+    opacity var(--transition-fast),
+    visibility var(--transition-fast);
   pointer-events: none;
   visibility: hidden;
 }
diff --git a/ui/system/desktop/notification_panel.js b/ui/system/desktop/notification_panel.js
index 4762384..88afa39 100644
--- a/ui/system/desktop/notification_panel.js
+++ b/ui/system/desktop/notification_panel.js
@@ -60,7 +60,7 @@ export class NotificationPanel extends LitElement {
       new CustomEvent("panel-closed", {
         bubbles: true,
         composed: true,
-      })
+      }),
     );
   }
 
@@ -81,7 +81,7 @@ export class NotificationPanel extends LitElement {
         bubbles: true,
         composed: true,
         detail: { notification },
-      })
+      }),
     );
   }
 
@@ -92,7 +92,7 @@ export class NotificationPanel extends LitElement {
         bubbles: true,
         composed: true,
         detail: { notification },
-      })
+      }),
     );
   }
 
@@ -101,7 +101,7 @@ export class NotificationPanel extends LitElement {
       new CustomEvent("notification-clear-all", {
         bubbles: true,
         composed: true,
-      })
+      }),
     );
   }
 
diff --git a/ui/system/desktop/system_menu.js b/ui/system/desktop/system_menu.js
index fbc1878..5420de3 100644
--- a/ui/system/desktop/system_menu.js
+++ b/ui/system/desktop/system_menu.js
@@ -209,17 +209,42 @@ export class SystemMenu extends MenuBase {
   render() {
     if (this._guestPeer) {
       return html`
-        <div class="backdrop" @click=${() => { this._guestPeer = null; }}></div>
+        <div
+          class="backdrop"
+          @click=${() => {
+            this._guestPeer = null;
+          }}
+        ></div>
         <div class="guest-pin-overlay">
           <div class="guest-pin-dialog">
             <div class="guest-pin-title">Connect as Guest</div>
-            <div class="guest-pin-subtitle">Enter the PIN shown on ${this._guestPeer.displayName}</div>
-            <input type="text" class="guest-pin-input" id="guest-pin-input"
-              maxlength="6" inputmode="numeric" pattern="[0-9]*" placeholder="000000" autocomplete="off" />
-            ${this._guestError ? html`<div class="guest-pin-error">${this._guestError}</div>` : ""}
+            <div class="guest-pin-subtitle">
+              Enter the PIN shown on ${this._guestPeer.displayName}
+            </div>
+            <input
+              type="text"
+              class="guest-pin-input"
+              id="guest-pin-input"
+              maxlength="6"
+              inputmode="numeric"
+              pattern="[0-9]*"
+              placeholder="000000"
+              autocomplete="off"
+            />
+            ${this._guestError
+              ? html`<div class="guest-pin-error">${this._guestError}</div>`
+              : ""}
             <div class="guest-pin-actions">
-              <button @click=${() => { this._guestPeer = null; }}>Cancel</button>
-              <button class="submit" @click=${() => this.submitGuestPin()}>Connect</button>
+              <button
+                @click=${() => {
+                  this._guestPeer = null;
+                }}
+              >
+                Cancel
+              </button>
+              <button class="submit" @click=${() => this.submitGuestPin()}>
+                Connect
+              </button>
             </div>
           </div>
         </div>
@@ -254,14 +279,17 @@ export class SystemMenu extends MenuBase {
             </li>
           `,
         )}
-        ${this._discoveredPeers.length > 0 ? html`<li class="menu-separator"></li>` : ""}
+        ${this._discoveredPeers.length > 0
+          ? html`<li class="menu-separator"></li>`
+          : ""}
         <li @click=${() => this.handleItemClick("settings")}>
           <lucide-icon name="settings"></lucide-icon>
           <span>Settings</span>
         </li>
         <li @click=${() => this.handleItemClick("atproto")}>
           <lucide-icon name="at-sign"></lucide-icon>
-          <span>ATProto</span><span class="atproto-handle">${this.atprotoHandle || ""}</span>
+          <span>ATProto</span
+          ><span class="atproto-handle">${this.atprotoHandle || ""}</span>
         </li>
         <li class="menu-separator"></li>
         <li @click=${() => this.handleItemClick("reload-ui")}>
diff --git a/ui/system/index.css b/ui/system/index.css
index 37344d0..5579d3c 100644
--- a/ui/system/index.css
+++ b/ui/system/index.css
@@ -110,7 +110,9 @@ main.before-splash {
   justify-content: center;
   background: var(--bg-webview);
   border: 2px solid transparent;
-  transition: border-color var(--transition-fast), opacity var(--transition-fast);
+  transition:
+    border-color var(--transition-fast),
+    opacity var(--transition-fast);
   opacity: var(--opacity-muted);
 }
 
@@ -144,7 +146,10 @@ main.before-splash {
   opacity: 0;
   visibility: hidden;
   transform: translateX(-8px);
-  transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
+  transition:
+    opacity var(--transition-fast),
+    transform var(--transition-fast),
+    visibility var(--transition-fast);
   pointer-events: none;
 }
 
@@ -214,7 +219,9 @@ lucide-icon {
   box-shadow: 4px -4px 16px var(--color-shadow-menu);
   border-radius: var(--radius-md) var(--radius-md) 0 0;
   transform: translateY(100%);
-  transition: transform var(--transition-fast), visibility var(--transition-fast);
+  transition:
+    transform var(--transition-fast),
+    visibility var(--transition-fast);
   visibility: hidden;
   pointer-events: none;
 }
diff --git a/ui/system/media_broadcast.js b/ui/system/media_broadcast.js
index 8470cb4..bf0c942 100644
--- a/ui/system/media_broadcast.js
+++ b/ui/system/media_broadcast.js
@@ -68,8 +68,12 @@ export class MediaBroadcaster {
     if (detail.playbackState === "none") {
       this.#sessionId = null;
       this.#state = {
-        title: "", artist: "", album: "",
-        playbackState: "none", duration: 0, position: 0,
+        title: "",
+        artist: "",
+        album: "",
+        playbackState: "none",
+        duration: 0,
+        position: 0,
       };
     }
   }
diff --git a/ui/system/mediacenter/ambient_view.js b/ui/system/mediacenter/ambient_view.js
index 9257694..958f3b4 100644
--- a/ui/system/mediacenter/ambient_view.js
+++ b/ui/system/mediacenter/ambient_view.js
@@ -393,10 +393,24 @@ function createNoiseTexture(gl, seed) {
   }
   const tex = gl.createTexture();
   gl.bindTexture(gl.TEXTURE_2D, tex);
-  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, size, size, 0, gl.RGBA, gl.UNSIGNED_BYTE, data);
+  gl.texImage2D(
+    gl.TEXTURE_2D,
+    0,
+    gl.RGBA,
+    size,
+    size,
+    0,
+    gl.RGBA,
+    gl.UNSIGNED_BYTE,
+    data,
+  );
   gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);
   gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);
-  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR);
+  gl.texParameteri(
+    gl.TEXTURE_2D,
+    gl.TEXTURE_MIN_FILTER,
+    gl.LINEAR_MIPMAP_LINEAR,
+  );
   gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
   gl.generateMipmap(gl.TEXTURE_2D);
   return { tex, size };
@@ -438,10 +452,11 @@ function initShaderEngine(canvas, fragmentSource) {
   // Fullscreen quad
   const buf = gl.createBuffer();
   gl.bindBuffer(gl.ARRAY_BUFFER, buf);
-  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
-    -1, -1,  1, -1,  -1, 1,
-    -1,  1,  1, -1,   1, 1,
-  ]), gl.STATIC_DRAW);
+  gl.bufferData(
+    gl.ARRAY_BUFFER,
+    new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]),
+    gl.STATIC_DRAW,
+  );
 
   const pos = gl.getAttribLocation(prog, "a_position");
   gl.enableVertexAttribArray(pos);
@@ -465,8 +480,12 @@ function initShaderEngine(canvas, fragmentSource) {
 
   if (chResLoc) {
     gl.uniform3fv(chResLoc, [
-      noise0.size, noise0.size, 1.0,
-      noise1.size, noise1.size, 1.0,
+      noise0.size,
+      noise0.size,
+      1.0,
+      noise1.size,
+      noise1.size,
+      1.0,
     ]);
   }
 
@@ -618,8 +637,15 @@ class AmbientView extends LitElement {
     }
 
     @keyframes pulse {
-      0%, 100% { opacity: 1; transform: scale(1); }
-      50% { opacity: 0.4; transform: scale(0.8); }
+      0%,
+      100% {
+        opacity: 1;
+        transform: scale(1);
+      }
+      50% {
+        opacity: 0.4;
+        transform: scale(0.8);
+      }
     }
 
     /* --- Guest PIN display --- */
@@ -688,7 +714,10 @@ class AmbientView extends LitElement {
     this._updateClock();
     this._clockInterval = setInterval(() => this._updateClock(), 30_000);
     this._fetchWeather();
-    this._weatherInterval = setInterval(() => this._fetchWeather(), 30 * 60_000);
+    this._weatherInterval = setInterval(
+      () => this._fetchWeather(),
+      30 * 60_000,
+    );
   }
 
   firstUpdated() {
@@ -711,7 +740,9 @@ class AmbientView extends LitElement {
     if (this._shader) {
       this._resizeCanvas(this._canvas);
       if (!this._resizeObserver) {
-        this._resizeObserver = new ResizeObserver(() => this._resizeCanvas(this._canvas));
+        this._resizeObserver = new ResizeObserver(() =>
+          this._resizeCanvas(this._canvas),
+        );
         this._resizeObserver.observe(this);
       }
       this._updateThemeColors();
@@ -719,7 +750,9 @@ class AmbientView extends LitElement {
       this._lastFrameTime = performance.now();
       this.startShader();
     } else {
-      console.error("[AmbientView] Shader failed to compile, falling back to default");
+      console.error(
+        "[AmbientView] Shader failed to compile, falling back to default",
+      );
       if (source !== DEFAULT_SHADER) {
         this._loadShader(DEFAULT_SHADER);
       }
@@ -769,9 +802,15 @@ class AmbientView extends LitElement {
     if (!this._shader) return;
     const style = getComputedStyle(document.documentElement);
 
-    const footer = this._parseColor(style.getPropertyValue("--bg-footer").trim());
-    const header = this._parseColor(style.getPropertyValue("--bg-header").trim());
-    const primary = this._parseColor(style.getPropertyValue("--color-primary").trim());
+    const footer = this._parseColor(
+      style.getPropertyValue("--bg-footer").trim(),
+    );
+    const header = this._parseColor(
+      style.getPropertyValue("--bg-header").trim(),
+    );
+    const primary = this._parseColor(
+      style.getPropertyValue("--color-primary").trim(),
+    );
 
     // Convert to HSL to extract hues, then rebuild dark saturated versions
     const footerHsl = this._rgbToHsl(footer);
@@ -813,14 +852,18 @@ class AmbientView extends LitElement {
     const hue2rgb = (p, q, t) => {
       if (t < 0) t += 1;
       if (t > 1) t -= 1;
-      if (t < 1/6) return p + (q - p) * 6 * t;
-      if (t < 1/2) return q;
-      if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
+      if (t < 1 / 6) return p + (q - p) * 6 * t;
+      if (t < 1 / 2) return q;
+      if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
       return p;
     };
     const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
     const p = 2 * l - q;
-    return [hue2rgb(p, q, h + 1/3), hue2rgb(p, q, h), hue2rgb(p, q, h - 1/3)];
+    return [
+      hue2rgb(p, q, h + 1 / 3),
+      hue2rgb(p, q, h),
+      hue2rgb(p, q, h - 1 / 3),
+    ];
   }
 
   startShader() {
@@ -836,7 +879,12 @@ class AmbientView extends LitElement {
       this._lastFrameTime = now;
 
       // Standard Shadertoy uniforms
-      gl.uniform3f(uniforms.iResolution, gl.canvas.width, gl.canvas.height, 1.0);
+      gl.uniform3f(
+        uniforms.iResolution,
+        gl.canvas.width,
+        gl.canvas.height,
+        1.0,
+      );
       gl.uniform1f(uniforms.iTime, t);
       gl.uniform1f(uniforms.iTimeDelta, dt);
       gl.uniform1i(uniforms.iFrame, this._frameCount++);
diff --git a/ui/system/mediacenter/content_browser.js b/ui/system/mediacenter/content_browser.js
index afc0774..c7c037e 100644
--- a/ui/system/mediacenter/content_browser.js
+++ b/ui/system/mediacenter/content_browser.js
@@ -130,8 +130,13 @@ class ContentBrowser extends LitElement {
     }
 
     @keyframes pulse {
-      0%, 100% { opacity: 1; }
-      50% { opacity: 0.4; }
+      0%,
+      100% {
+        opacity: 1;
+      }
+      50% {
+        opacity: 0.4;
+      }
     }
 
     /* Hint — right-aligned, only visible when item is focused */
@@ -374,14 +379,20 @@ class ContentBrowser extends LitElement {
     const isCloseReady = this._closeReadyIndex === idx;
 
     return html`
-      <div class="item ${isCloseReady ? "close-ready" : ""}" style="--i: ${idx}">
+      <div
+        class="item ${isCloseReady ? "close-ready" : ""}"
+        style="--i: ${idx}"
+      >
         <lucide-icon name="${page.hasMedia ? "disc-3" : "globe"}"></lucide-icon>
         <div class="item-info">
           <div class="item-title">${page.title}</div>
           <div class="item-subtitle">${page.url}</div>
         </div>
         ${page.hasMedia
-          ? html`<div class="media-indicator"><div class="dot"></div> Playing</div>`
+          ? html`<div class="media-indicator">
+              <div class="dot"></div>
+              Playing
+            </div>`
           : ""}
         <span class="close-hint">→ close</span>
         ${isCloseReady
diff --git a/ui/system/mediacenter/index.css b/ui/system/mediacenter/index.css
index efd451b..cd668c4 100644
--- a/ui/system/mediacenter/index.css
+++ b/ui/system/mediacenter/index.css
@@ -116,25 +116,77 @@ now-playing {
 
 /* ===== State-based visibility ===== */
 
-body[data-state="ambient"] ambient-view { visibility: visible; opacity: 1; }
-body[data-state="ambient"] nav-dock { visibility: hidden; opacity: 0; transform: translateY(100%); }
-body[data-state="ambient"] content-browser { visibility: hidden; opacity: 0; }
-body[data-state="ambient"] now-playing { visibility: hidden; opacity: 0; }
-
-body[data-state="dock"] ambient-view { visibility: visible; opacity: 0.35; }
-body[data-state="dock"] nav-dock { visibility: visible; opacity: 1; transform: translateY(0); }
-body[data-state="dock"] content-browser { visibility: hidden; opacity: 0; }
-body[data-state="dock"] now-playing { visibility: hidden; opacity: 0; }
-
-body[data-state="browser"] ambient-view { visibility: hidden; opacity: 0; }
-body[data-state="browser"] nav-dock { visibility: hidden; opacity: 0; transform: translateY(100%); }
-body[data-state="browser"] content-browser { visibility: visible; opacity: 1; }
-body[data-state="browser"] now-playing { visibility: hidden; opacity: 0; }
-
-body[data-state="playing"] ambient-view { visibility: hidden; opacity: 0; }
-body[data-state="playing"] nav-dock { visibility: hidden; opacity: 0; transform: translateY(100%); }
-body[data-state="playing"] content-browser { visibility: hidden; opacity: 0; }
-body[data-state="playing"] now-playing { visibility: hidden; opacity: 0; }
+body[data-state="ambient"] ambient-view {
+  visibility: visible;
+  opacity: 1;
+}
+body[data-state="ambient"] nav-dock {
+  visibility: hidden;
+  opacity: 0;
+  transform: translateY(100%);
+}
+body[data-state="ambient"] content-browser {
+  visibility: hidden;
+  opacity: 0;
+}
+body[data-state="ambient"] now-playing {
+  visibility: hidden;
+  opacity: 0;
+}
+
+body[data-state="dock"] ambient-view {
+  visibility: visible;
+  opacity: 0.35;
+}
+body[data-state="dock"] nav-dock {
+  visibility: visible;
+  opacity: 1;
+  transform: translateY(0);
+}
+body[data-state="dock"] content-browser {
+  visibility: hidden;
+  opacity: 0;
+}
+body[data-state="dock"] now-playing {
+  visibility: hidden;
+  opacity: 0;
+}
+
+body[data-state="browser"] ambient-view {
+  visibility: hidden;
+  opacity: 0;
+}
+body[data-state="browser"] nav-dock {
+  visibility: hidden;
+  opacity: 0;
+  transform: translateY(100%);
+}
+body[data-state="browser"] content-browser {
+  visibility: visible;
+  opacity: 1;
+}
+body[data-state="browser"] now-playing {
+  visibility: hidden;
+  opacity: 0;
+}
+
+body[data-state="playing"] ambient-view {
+  visibility: hidden;
+  opacity: 0;
+}
+body[data-state="playing"] nav-dock {
+  visibility: hidden;
+  opacity: 0;
+  transform: translateY(100%);
+}
+body[data-state="playing"] content-browser {
+  visibility: hidden;
+  opacity: 0;
+}
+body[data-state="playing"] now-playing {
+  visibility: hidden;
+  opacity: 0;
+}
 
 /* ===== Transitions ===== */
 
@@ -156,11 +208,21 @@ nav-dock {
 /* ===== Ambient gradient animation ===== */
 
 @keyframes hearth-glow {
-  0%   { background-color: oklch(16% 0.06 40); }
-  25%  { background-color: oklch(13% 0.05 65); }
-  50%  { background-color: oklch(14% 0.04 80); }
-  75%  { background-color: oklch(12% 0.05 55); }
-  100% { background-color: oklch(16% 0.06 40); }
+  0% {
+    background-color: oklch(16% 0.06 40);
+  }
+  25% {
+    background-color: oklch(13% 0.05 65);
+  }
+  50% {
+    background-color: oklch(14% 0.04 80);
+  }
+  75% {
+    background-color: oklch(12% 0.05 55);
+  }
+  100% {
+    background-color: oklch(16% 0.06 40);
+  }
 }
 
 /* ===== D-pad focus ring ===== */
diff --git a/ui/system/mediacenter/index.html b/ui/system/mediacenter/index.html
index c858e27..07c0d84 100644
--- a/ui/system/mediacenter/index.html
+++ b/ui/system/mediacenter/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <!-- SPDX-License-Identifier: AGPL-3.0-or-later -->
 <html>
   <head>
diff --git a/ui/system/mediacenter/index.js b/ui/system/mediacenter/index.js
index a7fad00..861b726 100644
--- a/ui/system/mediacenter/index.js
+++ b/ui/system/mediacenter/index.js
@@ -164,8 +164,10 @@ function setState(newState, detail) {
               url: p.webview.currentUrl || p.sourceUrl,
               index: i,
               isActive: i === activePageIndex,
-              hasMedia: p.webview.webviewId === mediaState.webviewId &&
-                (mediaState.playbackState === "playing" || mediaState.playbackState === "paused"),
+              hasMedia:
+                p.webview.webviewId === mediaState.webviewId &&
+                (mediaState.playbackState === "playing" ||
+                  mediaState.playbackState === "paused"),
             })),
           );
           setDpadContext();
@@ -209,7 +211,9 @@ function exitPlaying() {
   if (activePageIndex >= 0 && activePageIndex < pages.length) {
     const webView = pages[activePageIndex].webview;
     if (webView?.iframe) {
-      try { webView.iframe.mediaSessionAction("pause"); } catch (e) {}
+      try {
+        webView.iframe.mediaSessionAction("pause");
+      } catch (e) {}
     }
   }
 
@@ -226,7 +230,10 @@ function exitPlaying() {
 }
 
 function isMediaActive() {
-  return mediaState.playbackState === "playing" || mediaState.playbackState === "paused";
+  return (
+    mediaState.playbackState === "playing" ||
+    mediaState.playbackState === "paused"
+  );
 }
 
 // --- Event listeners ---
@@ -317,7 +324,12 @@ function closeSystemMenu() {
   systemMenu.open = false;
   // Restore previous state
   if (stateBeforeMenu) {
-    setState(stateBeforeMenu, stateBeforeMenu === STATES.BROWSER ? { category: currentCategory } : undefined);
+    setState(
+      stateBeforeMenu,
+      stateBeforeMenu === STATES.BROWSER
+        ? { category: currentCategory }
+        : undefined,
+    );
   }
   stateBeforeMenu = null;
 }
@@ -329,7 +341,11 @@ document.addEventListener("menu-action", (e) => {
     navigator.embedder.exit();
   } else if (action === "settings") {
     // Open settings as a page
-    launchContent({ category: "system", url: "beaver://settings/index.html", title: "Settings" });
+    launchContent({
+      category: "system",
+      url: "beaver://settings/index.html",
+      title: "Settings",
+    });
   } else if (action === "guest-enable") {
     enableGuestMode();
   } else if (action === "guest-disable") {
@@ -368,7 +384,12 @@ document.addEventListener("menu-dismiss", () => {
 document.addEventListener("keydown", (e) => {
   // System menu takes priority — Q opens it from any UI state
   if (e.key === "q" || e.key === "Q") {
-    if (!systemMenuOpen && !notificationPanelOpen && !openInDialogOpen && currentState !== STATES.PLAYING) {
+    if (
+      !systemMenuOpen &&
+      !notificationPanelOpen &&
+      !openInDialogOpen &&
+      currentState !== STATES.PLAYING
+    ) {
       e.preventDefault();
       openSystemMenu();
       return;
@@ -414,7 +435,11 @@ document.addEventListener("keydown", (e) => {
   resetIdle();
 
   if (currentState === STATES.AMBIENT) {
-    if (["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "Enter"].includes(e.key)) {
+    if (
+      ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "Enter"].includes(
+        e.key,
+      )
+    ) {
       e.preventDefault();
       setState(STATES.DOCK);
     }
@@ -479,8 +504,13 @@ function closePage(index) {
   // Clear media state if we closed the media webview
   if (page.webview.webviewId === mediaState.webviewId) {
     mediaState = {
-      title: "", artist: "", album: "",
-      playbackState: "none", duration: 0, position: 0, webviewId: null,
+      title: "",
+      artist: "",
+      album: "",
+      playbackState: "none",
+      duration: 0,
+      position: 0,
+      webviewId: null,
     };
     ambient.mediaTitle = "";
     ambient.mediaArtist = "";
@@ -561,13 +591,17 @@ function closeNotificationPanel() {
       (p) => p.webview.webviewId === mediaState.webviewId,
     );
     if (mediaPage?.webview?.iframe) {
-      try { mediaPage.webview.iframe.mediaSessionAction("play"); } catch (e) {}
+      try {
+        mediaPage.webview.iframe.mediaSessionAction("play");
+      } catch (e) {}
     }
   }
 
   // Restore d-pad context for the current state (the state never changed)
-  setState(currentState,
-    currentState === STATES.BROWSER ? { category: currentCategory } : undefined);
+  setState(
+    currentState,
+    currentState === STATES.BROWSER ? { category: currentCategory } : undefined,
+  );
 }
 
 function updateNotificationCount() {
@@ -595,17 +629,13 @@ async function initPairing() {
     return;
   }
 
-  await pairing.setName("Beaver Media Center").catch((e) =>
-    console.error("[P2P] setName failed:", e),
-  );
+  await pairing
+    .setName("Beaver Media Center")
+    .catch((e) => console.error("[P2P] setName failed:", e));
 
-  await pairing.stop().catch((e) =>
-    console.error("[P2P] stop failed:", e),
-  );
+  await pairing.stop().catch((e) => console.error("[P2P] stop failed:", e));
 
-  await pairing.start().catch((e) =>
-    console.error("[P2P] start failed:", e),
-  );
+  await pairing.start().catch((e) => console.error("[P2P] start failed:", e));
 
   pairing.addEventListener("pairingrequest", (e) => {
     const peer = e.peer;
@@ -620,7 +650,9 @@ async function initPairing() {
         (p) => p.webview.webviewId === mediaState.webviewId,
       );
       if (mediaPage?.webview?.iframe) {
-        try { mediaPage.webview.iframe.mediaSessionAction("pause"); } catch (e) {}
+        try {
+          mediaPage.webview.iframe.mediaSessionAction("pause");
+        } catch (e) {}
         mediaWasPausedForPairing = true;
       }
     }
@@ -658,7 +690,16 @@ initPairing();
 
 // --- Receive "Open in..." from paired devices via PeerStream ---
 
-const VIDEO_EXTENSIONS = ["mp4", "webm", "ogg", "ogv", "mkv", "avi", "mov", "m4v"];
+const VIDEO_EXTENSIONS = [
+  "mp4",
+  "webm",
+  "ogg",
+  "ogv",
+  "mkv",
+  "avi",
+  "mov",
+  "m4v",
+];
 
 function isLikelyVideoUrl(url) {
   try {
@@ -694,7 +735,9 @@ function showOpenInDialog(peerName, url) {
       (p) => p.webview.webviewId === mediaState.webviewId,
     );
     if (mediaPage?.webview?.iframe) {
-      try { mediaPage.webview.iframe.mediaSessionAction("pause"); } catch (e) {}
+      try {
+        mediaPage.webview.iframe.mediaSessionAction("pause");
+      } catch (e) {}
       mediaWasPausedForOpenIn = true;
     }
   }
@@ -725,12 +768,16 @@ function closeOpenInDialog() {
       (p) => p.webview.webviewId === mediaState.webviewId,
     );
     if (mediaPage?.webview?.iframe) {
-      try { mediaPage.webview.iframe.mediaSessionAction("play"); } catch (e) {}
+      try {
+        mediaPage.webview.iframe.mediaSessionAction("play");
+      } catch (e) {}
     }
   }
 
-  setState(currentState,
-    currentState === STATES.BROWSER ? { category: currentCategory } : undefined);
+  setState(
+    currentState,
+    currentState === STATES.BROWSER ? { category: currentCategory } : undefined,
+  );
 }
 
 document.addEventListener("openin-select", (e) => {
@@ -755,8 +802,16 @@ window.onpeerstream = (e) => {
       if (navigator.keyboard) {
         console.log("[MediaCenter] Injecting key:", data.key, data.code);
         try {
-          navigator.keyboard.injectKeyboardEvent({ state: "down", key: data.key, code: data.code || data.key });
-          navigator.keyboard.injectKeyboardEvent({ state: "up", key: data.key, code: data.code || data.key });
+          navigator.keyboard.injectKeyboardEvent({
+            state: "down",
+            key: data.key,
+            code: data.code || data.key,
+          });
+          navigator.keyboard.injectKeyboardEvent({
+            state: "up",
+            key: data.key,
+            code: data.code || data.key,
+          });
         } catch (err) {
           console.error("[MediaCenter] Key injection failed:", err);
         }
diff --git a/ui/system/mediacenter/nav_dock.js b/ui/system/mediacenter/nav_dock.js
index 71cd7f4..c88a77e 100644
--- a/ui/system/mediacenter/nav_dock.js
+++ b/ui/system/mediacenter/nav_dock.js
@@ -109,13 +109,27 @@ class NavDock extends LitElement {
       { id: "web", label: "Web", icon: "globe" },
     ];
     if (this.pageCount > 0) {
-      items.push({ id: "pages", label: "Pages", icon: "layers", badge: this.pageCount });
+      items.push({
+        id: "pages",
+        label: "Pages",
+        icon: "layers",
+        badge: this.pageCount,
+      });
     }
     if (this.notificationCount > 0) {
-      items.push({ id: "notifications", label: "Pairing", icon: "bell", badge: this.notificationCount });
+      items.push({
+        id: "notifications",
+        label: "Pairing",
+        icon: "bell",
+        badge: this.notificationCount,
+      });
     }
     if (this.hasActiveMedia) {
-      items.unshift({ id: "now-playing", label: "Now Playing", icon: "disc-3" });
+      items.unshift({
+        id: "now-playing",
+        label: "Now Playing",
+        icon: "disc-3",
+      });
     }
     return items;
   }
@@ -159,7 +173,9 @@ class NavDock extends LitElement {
             <div class="dock-item" data-id="${item.id}" style="--i: ${i}">
               <lucide-icon name="${item.icon}"></lucide-icon>
               <span class="label">${item.label}</span>
-              ${item.badge ? html`<span class="badge">${item.badge}</span>` : ""}
+              ${item.badge
+                ? html`<span class="badge">${item.badge}</span>`
+                : ""}
             </div>
           `,
         )}
diff --git a/ui/system/mediacenter/notification_panel.js b/ui/system/mediacenter/notification_panel.js
index ae4f2a3..e7d2ea3 100644
--- a/ui/system/mediacenter/notification_panel.js
+++ b/ui/system/mediacenter/notification_panel.js
@@ -215,14 +215,20 @@ class NotificationPanelMC extends LitElement {
     );
     if (this._requests.length === 0 && this.open) {
       this.dispatchEvent(
-        new CustomEvent("notifications-dismiss", { bubbles: true, composed: true }),
+        new CustomEvent("notifications-dismiss", {
+          bubbles: true,
+          composed: true,
+        }),
       );
     }
   }
 
   dismiss() {
     this.dispatchEvent(
-      new CustomEvent("notifications-dismiss", { bubbles: true, composed: true }),
+      new CustomEvent("notifications-dismiss", {
+        bubbles: true,
+        composed: true,
+      }),
     );
   }
 
@@ -233,7 +239,9 @@ class NotificationPanelMC extends LitElement {
           <div class="request-header">
             <lucide-icon name="monitor-smartphone"></lucide-icon>
             <div>
-              <div class="request-name">${req.peer.displayName || "Unknown device"}</div>
+              <div class="request-name">
+                ${req.peer.displayName || "Unknown device"}
+              </div>
             </div>
           </div>
           <div class="action-status">
@@ -248,15 +256,25 @@ class NotificationPanelMC extends LitElement {
         <div class="request-header">
           <lucide-icon name="monitor-smartphone"></lucide-icon>
           <div>
-            <div class="request-name">${req.peer.displayName || "Unknown device"}</div>
+            <div class="request-name">
+              ${req.peer.displayName || "Unknown device"}
+            </div>
             <div class="request-label">Wants to pair</div>
           </div>
         </div>
-        <div class="action-item accept" data-action="accept" data-req-id="${req.id}">
+        <div
+          class="action-item accept"
+          data-action="accept"
+          data-req-id="${req.id}"
+        >
           <lucide-icon name="check"></lucide-icon>
           <span>Accept</span>
         </div>
-        <div class="action-item reject" data-action="reject" data-req-id="${req.id}">
+        <div
+          class="action-item reject"
+          data-action="reject"
+          data-req-id="${req.id}"
+        >
           <lucide-icon name="x"></lucide-icon>
           <span>Reject</span>
         </div>
@@ -273,7 +291,9 @@ class NotificationPanelMC extends LitElement {
         <div class="panel-title">Pairing Requests</div>
         ${this._requests.length === 0
           ? html`<div class="empty">No pending requests</div>`
-          : html`<div class="list">${this._requests.map((req) => this._renderRequest(req))}</div>`}
+          : html`<div class="list">
+              ${this._requests.map((req) => this._renderRequest(req))}
+            </div>`}
       </div>
     `;
   }
diff --git a/ui/system/mediacenter/now_playing.js b/ui/system/mediacenter/now_playing.js
index 5ca9a40..81b921a 100644
--- a/ui/system/mediacenter/now_playing.js
+++ b/ui/system/mediacenter/now_playing.js
@@ -168,7 +168,9 @@ class NowPlaying extends LitElement {
   _formatTime(seconds) {
     if (!seconds || seconds <= 0) return "0:00";
     const m = Math.floor(seconds / 60);
-    const s = Math.floor(seconds % 60).toString().padStart(2, "0");
+    const s = Math.floor(seconds % 60)
+      .toString()
+      .padStart(2, "0");
     return `${m}:${s}`;
   }
 
@@ -208,14 +210,19 @@ class NowPlaying extends LitElement {
     return html`
       <div class="content">
         <div class="track-title">${this.title || "Nothing playing"}</div>
-        ${this.artist ? html`<div class="track-artist">${this.artist}</div>` : ""}
+        ${this.artist
+          ? html`<div class="track-artist">${this.artist}</div>`
+          : ""}
       </div>
 
       <div class="overlay ${showOverlay ? "" : "hidden"}">
         <div class="progress-row">
           <span>${this._formatTime(this.position)}</span>
           <div class="progress-bar">
-            <div class="progress-fill" style="width: ${this._progressPercent()}%"></div>
+            <div
+              class="progress-fill"
+              style="width: ${this._progressPercent()}%"
+            ></div>
           </div>
           <span>${this._formatTime(this.duration)}</span>
         </div>
@@ -223,7 +230,10 @@ class NowPlaying extends LitElement {
           <button class="control-btn" data-action="previoustrack">
             <lucide-icon name="skip-back"></lucide-icon>
           </button>
-          <button class="control-btn play" data-action="${isPlaying ? "pause" : "play"}">
+          <button
+            class="control-btn play"
+            data-action="${isPlaying ? "pause" : "play"}"
+          >
             <lucide-icon name="${isPlaying ? "pause" : "play"}"></lucide-icon>
           </button>
           <button class="control-btn" data-action="nexttrack">
diff --git a/ui/system/mediacenter/system_menu.js b/ui/system/mediacenter/system_menu.js
index fb11558..17f8167 100644
--- a/ui/system/mediacenter/system_menu.js
+++ b/ui/system/mediacenter/system_menu.js
@@ -105,13 +105,34 @@ class SystemMenu extends LitElement {
 
   get menuItems() {
     const guestItem = this.guestModeActive
-      ? { id: "guest-disable", label: "Disable Guest Access", description: "Disconnect all guests", icon: "user-x" }
-      : { id: "guest-enable", label: "Guest Access", description: "Let guests pair with a PIN", icon: "user-plus" };
+      ? {
+          id: "guest-disable",
+          label: "Disable Guest Access",
+          description: "Disconnect all guests",
+          icon: "user-x",
+        }
+      : {
+          id: "guest-enable",
+          label: "Guest Access",
+          description: "Let guests pair with a PIN",
+          icon: "user-plus",
+        };
 
     return [
       guestItem,
-      { id: "settings", label: "Settings", description: "Preferences and configuration", icon: "settings" },
-      { id: "quit", label: "Quit", description: "Exit Beaver", icon: "power", danger: true },
+      {
+        id: "settings",
+        label: "Settings",
+        description: "Preferences and configuration",
+        icon: "settings",
+      },
+      {
+        id: "quit",
+        label: "Quit",
+        description: "Exit Beaver",
+        icon: "power",
+        danger: true,
+      },
     ];
   }
 
@@ -147,7 +168,10 @@ class SystemMenu extends LitElement {
         <div class="menu-title">Beaver</div>
         ${this.menuItems.map(
           (item) => html`
-            <div class="menu-item ${item.danger ? "danger" : ""}" data-id="${item.id}">
+            <div
+              class="menu-item ${item.danger ? "danger" : ""}"
+              data-id="${item.id}"
+            >
               <lucide-icon name="${item.icon}"></lucide-icon>
               <div>
                 <div class="label">${item.label}</div>
diff --git a/ui/system/mediacenter/video_player.html b/ui/system/mediacenter/video_player.html
index 7161f16..44419e5 100644
--- a/ui/system/mediacenter/video_player.html
+++ b/ui/system/mediacenter/video_player.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <!-- SPDX-License-Identifier: AGPL-3.0-or-later -->
 <html>
   <head>
@@ -6,12 +6,19 @@
     <title>Video Player</title>
     <link rel="stylesheet" href="beaver://theme/index.css" />
     <link rel="stylesheet" href="beaver://shared/fonts/fonts.css" />
-    <link rel="stylesheet" href="beaver://shared/third_party/lucide/lucide.css" />
+    <link
+      rel="stylesheet"
+      href="beaver://shared/third_party/lucide/lucide.css"
+    />
     <link rel="stylesheet" href="index.css" />
     <script type="module" src="beaver://shared/lucide_icon.js"></script>
     <meta name="spatial-navigation" content="disabled" />
     <style>
-      * { margin: 0; padding: 0; box-sizing: border-box; }
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
 
       body {
         width: 100%;
@@ -23,7 +30,9 @@
         color: var(--mc-text-primary);
       }
 
-      body.controls-visible { cursor: default; }
+      body.controls-visible {
+        cursor: default;
+      }
 
       video {
         position: fixed;
@@ -46,11 +55,17 @@
         z-index: 10;
       }
 
-      .overlay.visible { opacity: 1; }
+      .overlay.visible {
+        opacity: 1;
+      }
 
       .top-bar {
         padding: 2em 3em;
-        background: linear-gradient(to bottom, oklch(6% 0.02 65 / 0.85) 0%, transparent 100%);
+        background: linear-gradient(
+          to bottom,
+          oklch(6% 0.02 65 / 0.85) 0%,
+          transparent 100%
+        );
       }
 
       .title {
@@ -63,7 +78,11 @@
       .bottom-bar {
         padding: 0 3em 2.5em;
         padding-top: 5em;
-        background: linear-gradient(to top, oklch(6% 0.02 65 / 0.9) 0%, transparent 100%);
+        background: linear-gradient(
+          to top,
+          oklch(6% 0.02 65 / 0.9) 0%,
+          transparent 100%
+        );
         display: flex;
         flex-direction: column;
         gap: 1em;
@@ -84,7 +103,9 @@
         font-variant-numeric: tabular-nums;
       }
 
-      .time-end { text-align: right; }
+      .time-end {
+        text-align: right;
+      }
 
       .progress-track {
         flex: 1;
@@ -98,7 +119,8 @@
 
       .progress-buffered {
         position: absolute;
-        top: 0; left: 0;
+        top: 0;
+        left: 0;
         height: 100%;
         background: oklch(25% 0.02 65 / 0.3);
         border-radius: 3px;
@@ -135,14 +157,18 @@
           transform 0.15s var(--mc-ease);
       }
 
-      .btn:active { transform: scale(0.9); }
+      .btn:active {
+        transform: scale(0.9);
+      }
 
       .btn-seek {
         width: 3.5em;
         height: 3.5em;
       }
 
-      .btn-seek lucide-icon { font-size: 1.6em; }
+      .btn-seek lucide-icon {
+        font-size: 1.6em;
+      }
 
       .btn-play {
         width: 4.5em;
@@ -150,7 +176,9 @@
         background: var(--mc-surface-raised);
       }
 
-      .btn-play lucide-icon { font-size: 2.2em; }
+      .btn-play lucide-icon {
+        font-size: 2.2em;
+      }
 
       .btn.focused {
         background: var(--mc-focus-bg);
@@ -177,7 +205,9 @@
         align-items: center;
         justify-content: center;
         opacity: 0;
-        transition: opacity 0.25s, transform 0.25s var(--mc-ease);
+        transition:
+          opacity 0.25s,
+          transform 0.25s var(--mc-ease);
         pointer-events: none;
         z-index: 20;
         color: var(--mc-text-primary);
@@ -188,7 +218,9 @@
         transform: translate(-50%, -50%) scale(1);
       }
 
-      .center-indicator lucide-icon { font-size: 2.5em; }
+      .center-indicator lucide-icon {
+        font-size: 2.5em;
+      }
     </style>
   </head>
   <body class="controls-visible">
@@ -251,7 +283,9 @@
           navigator.mediaSession.metadata = new MediaMetadata({
             title: videoTitle,
           });
-          navigator.mediaSession.playbackState = video.paused ? "paused" : "playing";
+          navigator.mediaSession.playbackState = video.paused
+            ? "paused"
+            : "playing";
         }
       }
 
@@ -260,8 +294,12 @@
         if (!s || isNaN(s)) return "0:00";
         var h = Math.floor(s / 3600);
         var m = Math.floor((s % 3600) / 60);
-        var sec = Math.floor(s % 60).toString().padStart(2, "0");
-        return h > 0 ? h + ":" + m.toString().padStart(2, "0") + ":" + sec : m + ":" + sec;
+        var sec = Math.floor(s % 60)
+          .toString()
+          .padStart(2, "0");
+        return h > 0
+          ? h + ":" + m.toString().padStart(2, "0") + ":" + sec
+          : m + ":" + sec;
       }
 
       var SEEK = 10;
@@ -282,7 +320,10 @@
           video.currentTime = Math.max(0, video.currentTime - SEEK);
           flashIndicator("rewind");
         } else if (action === "forward") {
-          video.currentTime = Math.min(video.duration || 0, video.currentTime + SEEK);
+          video.currentTime = Math.min(
+            video.duration || 0,
+            video.currentTime + SEEK,
+          );
           flashIndicator("fast-forward");
         }
       }
@@ -293,34 +334,35 @@
         indicatorIcon.setAttribute("name", icon);
         indicator.classList.add("flash");
         clearTimeout(indicatorTimeout);
-        indicatorTimeout = setTimeout(function() {
+        indicatorTimeout = setTimeout(function () {
           indicator.classList.remove("flash");
         }, 600);
       }
 
       // --- Progress ---
-      video.addEventListener("timeupdate", function() {
+      video.addEventListener("timeupdate", function () {
         if (!video.duration) return;
-        progressFill.style.width = (video.currentTime / video.duration * 100) + "%";
+        progressFill.style.width =
+          (video.currentTime / video.duration) * 100 + "%";
         timeCurrent.textContent = formatTime(video.currentTime);
       });
 
-      video.addEventListener("loadedmetadata", function() {
+      video.addEventListener("loadedmetadata", function () {
         timeDuration.textContent = formatTime(video.duration);
       });
 
-      video.addEventListener("progress", function() {
+      video.addEventListener("progress", function () {
         if (!video.duration || !video.buffered.length) return;
         var end = video.buffered.end(video.buffered.length - 1);
-        progressBuffered.style.width = (end / video.duration * 100) + "%";
+        progressBuffered.style.width = (end / video.duration) * 100 + "%";
       });
 
-      video.addEventListener("play", function() {
+      video.addEventListener("play", function () {
         playIcon.setAttribute("name", "pause");
         updateMediaSession();
       });
 
-      video.addEventListener("pause", function() {
+      video.addEventListener("pause", function () {
         playIcon.setAttribute("name", "play");
         updateMediaSession();
         showOverlay();
@@ -344,16 +386,20 @@
         document.body.classList.remove("controls-visible");
       }
 
-      function isVisible() { return overlay.classList.contains("visible"); }
+      function isVisible() {
+        return overlay.classList.contains("visible");
+      }
 
       // --- D-pad ---
       var focusIndex = 1;
       function applyFocus() {
-        buttons.forEach(function(b, i) { b.classList.toggle("focused", i === focusIndex); });
+        buttons.forEach(function (b, i) {
+          b.classList.toggle("focused", i === focusIndex);
+        });
       }
       applyFocus();
 
-      document.addEventListener("keydown", function(e) {
+      document.addEventListener("keydown", function (e) {
         if (!isVisible()) {
           showOverlay();
           if (e.key !== "Enter" && e.key !== " ") {
@@ -366,12 +412,20 @@
 
         if (e.key === "ArrowLeft") {
           e.preventDefault();
-          if (focusIndex > 0) { focusIndex--; applyFocus(); }
-          else { doAction("back"); }
+          if (focusIndex > 0) {
+            focusIndex--;
+            applyFocus();
+          } else {
+            doAction("back");
+          }
         } else if (e.key === "ArrowRight") {
           e.preventDefault();
-          if (focusIndex < buttons.length - 1) { focusIndex++; applyFocus(); }
-          else { doAction("forward"); }
+          if (focusIndex < buttons.length - 1) {
+            focusIndex++;
+            applyFocus();
+          } else {
+            doAction("forward");
+          }
         } else if (e.key === "Enter" || e.key === " ") {
           e.preventDefault();
           doAction(buttons[focusIndex].dataset.action);
@@ -381,13 +435,13 @@
       video.addEventListener("playing", showOverlay);
 
       // --- Pointer: video tap to play/pause ---
-      video.addEventListener("click", function() {
+      video.addEventListener("click", function () {
         doAction("play");
         showOverlay();
       });
 
       // --- Pointer: overlay background tap to play/pause ---
-      overlay.addEventListener("click", function(e) {
+      overlay.addEventListener("click", function (e) {
         if (!e.target.closest(".btn") && !e.target.closest(".progress-track")) {
           doAction("play");
           showOverlay();
@@ -395,8 +449,8 @@
       });
 
       // --- Pointer: buttons ---
-      buttons.forEach(function(btn) {
-        btn.addEventListener("click", function(e) {
+      buttons.forEach(function (btn) {
+        btn.addEventListener("click", function (e) {
           e.stopPropagation();
           doAction(btn.dataset.action);
           showOverlay();
@@ -409,21 +463,26 @@
       function seekToPointer(e) {
         if (!video.duration) return;
         var rect = progressTrack.getBoundingClientRect();
-        var ratio = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+        var ratio = Math.max(
+          0,
+          Math.min(1, (e.clientX - rect.left) / rect.width),
+        );
         video.currentTime = ratio * video.duration;
       }
 
       var dragging = false;
-      progressTrack.addEventListener("pointerdown", function(e) {
+      progressTrack.addEventListener("pointerdown", function (e) {
         e.stopPropagation();
         dragging = true;
         progressTrack.setPointerCapture(e.pointerId);
         seekToPointer(e);
       });
-      progressTrack.addEventListener("pointermove", function(e) {
-        if (dragging) { seekToPointer(e); }
+      progressTrack.addEventListener("pointermove", function (e) {
+        if (dragging) {
+          seekToPointer(e);
+        }
       });
-      progressTrack.addEventListener("pointerup", function(e) {
+      progressTrack.addEventListener("pointerup", function (e) {
         if (dragging) {
           dragging = false;
           progressTrack.releasePointerCapture(e.pointerId);
diff --git a/ui/system/mobile/action_bar.js b/ui/system/mobile/action_bar.js
index 50acd94..b6dccf0 100644
--- a/ui/system/mobile/action_bar.js
+++ b/ui/system/mobile/action_bar.js
@@ -329,7 +329,9 @@ export class MobileActionBar extends LitElement {
         ${this.blockerPanelOpen
           ? html`
               <div class="blocker-inline-panel">
-                <div class="blocker-inline-origin">${this.blockerHostname()}</div>
+                <div class="blocker-inline-origin">
+                  ${this.blockerHostname()}
+                </div>
                 <div class="blocker-inline-row">
                   <span class="blocker-inline-label">Content blocking</span>
                   <label class="blocker-inline-toggle">
@@ -342,8 +344,8 @@ export class MobileActionBar extends LitElement {
                   </label>
                 </div>
                 <div class="blocker-inline-stats">
-                  <span class="blocker-inline-count">${this.blockerCount}</span> blocked /
-                  ${this.blockerCount + this.blockerAllowed} total
+                  <span class="blocker-inline-count">${this.blockerCount}</span>
+                  blocked / ${this.blockerCount + this.blockerAllowed} total
                   (${this.blockerPercentage()}%)
                 </div>
               </div>
@@ -375,10 +377,17 @@ export class MobileActionBar extends LitElement {
             <lucide-icon name="rotate-ccw"></lucide-icon>
           </button>
 
-          <button class="action-button blocker-button ${this.blockerEnabled ? "" : "disabled"}" @click=${this.handleBlocker}>
+          <button
+            class="action-button blocker-button ${this.blockerEnabled
+              ? ""
+              : "disabled"}"
+            @click=${this.handleBlocker}
+          >
             <lucide-icon name="shield"></lucide-icon>
             ${this.blockerCount - (this._blockerBaseline || 0) > 0
-              ? html`<span class="blocker-count">${this.blockerCount - (this._blockerBaseline || 0)}</span>`
+              ? html`<span class="blocker-count"
+                  >${this.blockerCount - (this._blockerBaseline || 0)}</span
+                >`
               : ""}
           </button>
 
diff --git a/ui/system/mobile/edge_gesture_handler.js b/ui/system/mobile/edge_gesture_handler.js
index e0aad88..444fa5c 100644
--- a/ui/system/mobile/edge_gesture_handler.js
+++ b/ui/system/mobile/edge_gesture_handler.js
@@ -59,18 +59,26 @@ export class EdgeGestureHandler {
       this.edgeOverlays[edge.name] = overlay;
 
       // Add listeners to each edge overlay
-      overlay.addEventListener("pointerdown", this.onEdgePointerDown.bind(this), {
-        capture: false,
-      });
+      overlay.addEventListener(
+        "pointerdown",
+        this.onEdgePointerDown.bind(this),
+        {
+          capture: false,
+        },
+      );
       overlay.addEventListener("pointermove", this.onPointerMove.bind(this), {
         capture: false,
       });
       overlay.addEventListener("pointerup", this.onPointerUp.bind(this), {
         capture: false,
       });
-      overlay.addEventListener("pointercancel", this.onPointerCancel.bind(this), {
-        capture: false,
-      });
+      overlay.addEventListener(
+        "pointercancel",
+        this.onPointerCancel.bind(this),
+        {
+          capture: false,
+        },
+      );
     });
   }
 
diff --git a/ui/system/mobile/index.html b/ui/system/mobile/index.html
index 29413a4..06ee435 100644
--- a/ui/system/mobile/index.html
+++ b/ui/system/mobile/index.html
@@ -37,8 +37,14 @@
         <div id="powered-by">
           Powered By
           <div id="powered-by-logos">
-            <img src="beaver://shared/images/servo-color-negative-no-container.svg" alt="servo"/>
-            <img src="beaver://shared/images/iroh-wordmark-purple.svg" alt="iroh"/>
+            <img
+              src="beaver://shared/images/servo-color-negative-no-container.svg"
+              alt="servo"
+            />
+            <img
+              src="beaver://shared/images/iroh-wordmark-purple.svg"
+              alt="iroh"
+            />
           </div>
         </div>
       </div>
diff --git a/ui/system/mobile/index.js b/ui/system/mobile/index.js
index e7a8eff..ae7f224 100644
--- a/ui/system/mobile/index.js
+++ b/ui/system/mobile/index.js
@@ -5,13 +5,22 @@ import "./notification_sheet.js";
 import "./overview.js";
 import "./radial_menu.js";
 
-import { createNewView, switchToHomescreen, openView, newWebViewBuilder, initApp } from "../app.js";
+import {
+  createNewView,
+  switchToHomescreen,
+  openView,
+  newWebViewBuilder,
+  initApp,
+} from "../app.js";
 import { MobileLayoutManager } from "./layout_manager.js";
 import { initMobile } from "./init.js";
 
 document.addEventListener("DOMContentLoaded", () => {
   document.body.classList.add("mobile-mode");
-  navigator.servo.setBoolPreference("beaver.ime_virtual_keyboard_enabled", true);
+  navigator.servo.setBoolPreference(
+    "beaver.ime_virtual_keyboard_enabled",
+    true,
+  );
 
   const root = document.getElementById("root");
   const layoutManager = new MobileLayoutManager(root, newWebViewBuilder);
diff --git a/ui/system/mobile/init.js b/ui/system/mobile/init.js
index eed6b0c..bfdae79 100644
--- a/ui/system/mobile/init.js
+++ b/ui/system/mobile/init.js
@@ -4,7 +4,10 @@ import { WebView } from "../web_view.js";
 import { MobileSplashScreen } from "./splash_screen.js";
 import { notifications } from "../services/index.js";
 
-export function initMobile(layoutManager, { createNewView, switchToHomescreen, openView, pairingHandler, services }) {
+export function initMobile(
+  layoutManager,
+  { createNewView, switchToHomescreen, openView, pairingHandler, services },
+) {
   const splash = new MobileSplashScreen();
   splash.show();
 
@@ -49,7 +52,10 @@ export function initMobile(layoutManager, { createNewView, switchToHomescreen, o
     notificationSheet.open = false;
   });
 
-  notificationSheet.addEventListener("media-action", services.media.handleAction);
+  notificationSheet.addEventListener(
+    "media-action",
+    services.media.handleAction,
+  );
 
   const overview = document.createElement("mobile-overview");
   document.body.appendChild(overview);
@@ -77,7 +83,11 @@ export function initMobile(layoutManager, { createNewView, switchToHomescreen, o
   document.body.appendChild(radialMenu);
 
   radialMenu.addEventListener("radial-action", (e) => {
-    handleRadialMenuAction(e.detail, layoutManager, { createNewView, switchToHomescreen, openView });
+    handleRadialMenuAction(e.detail, layoutManager, {
+      createNewView,
+      switchToHomescreen,
+      openView,
+    });
   });
   radialMenu.addEventListener("radial-dismiss", () => {
     const entry = layoutManager.getActiveEntry();
@@ -134,20 +144,38 @@ export function initMobile(layoutManager, { createNewView, switchToHomescreen, o
   return { actionBar, notificationSheet, overview, radialMenu };
 }
 
-function handleRadialMenuAction(detail, layoutManager, { createNewView, switchToHomescreen, openView }) {
+function handleRadialMenuAction(
+  detail,
+  layoutManager,
+  { createNewView, switchToHomescreen, openView },
+) {
   switch (detail.action) {
-    case "new-view": createNewView(); break;
-    case "home": switchToHomescreen(); break;
-    case "back": layoutManager.goBack(); break;
-    case "forward": layoutManager.goForward(); break;
-    case "reload": layoutManager.reload(); break;
+    case "new-view":
+      createNewView();
+      break;
+    case "home":
+      switchToHomescreen();
+      break;
+    case "back":
+      layoutManager.goBack();
+      break;
+    case "forward":
+      layoutManager.goForward();
+      break;
+    case "reload":
+      layoutManager.reload();
+      break;
     case "close-view":
       if (layoutManager.activeWebviewId) {
         layoutManager.removeWebView(layoutManager.activeWebviewId);
       }
       break;
-    case "overview": layoutManager.showOverview(); break;
-    case "settings": openView("beaver://settings/index.html", "Settings"); break;
+    case "overview":
+      layoutManager.showOverview();
+      break;
+    case "settings":
+      openView("beaver://settings/index.html", "Settings");
+      break;
     case "context-menu":
       layoutManager.getActiveEntry()?.webview?.showPendingContextMenu?.();
       break;
diff --git a/ui/system/mobile/notification_sheet.js b/ui/system/mobile/notification_sheet.js
index 8f4dcc2..6218720 100644
--- a/ui/system/mobile/notification_sheet.js
+++ b/ui/system/mobile/notification_sheet.js
@@ -78,7 +78,7 @@ export class MobileNotificationSheet extends LitElement {
       new CustomEvent("notification-click", {
         bubbles: true,
         detail: { notification },
-      })
+      }),
     );
   }
 
@@ -88,13 +88,13 @@ export class MobileNotificationSheet extends LitElement {
       new CustomEvent("notification-dismiss", {
         bubbles: true,
         detail: { notification },
-      })
+      }),
     );
   }
 
   handleClearAll() {
     this.dispatchEvent(
-      new CustomEvent("notification-clear-all", { bubbles: true })
+      new CustomEvent("notification-clear-all", { bubbles: true }),
     );
   }
 
@@ -184,7 +184,8 @@ export class MobileNotificationSheet extends LitElement {
                   <div
                     class="notification-item"
                     @click=${() => this.handleNotificationClick(notification)}
-                    @pointerdown=${(e) => this.handlePointerDown(e, notification)}
+                    @pointerdown=${(e) =>
+                      this.handlePointerDown(e, notification)}
                     @pointermove=${this.handlePointerMove}
                     @pointerup=${this.handlePointerUp}
                   >
@@ -213,7 +214,7 @@ export class MobileNotificationSheet extends LitElement {
                       <lucide-icon name="x"></lucide-icon>
                     </button>
                   </div>
-                `
+                `,
               )}
         </div>
       </div>
diff --git a/ui/system/mobile/radial_menu.js b/ui/system/mobile/radial_menu.js
index b02334c..93b4d7c 100644
--- a/ui/system/mobile/radial_menu.js
+++ b/ui/system/mobile/radial_menu.js
@@ -51,11 +51,11 @@ export class MobileRadialMenu extends LitElement {
 
     this.x = Math.max(
       menuRadius + padding,
-      Math.min(window.innerWidth - menuRadius - padding, x)
+      Math.min(window.innerWidth - menuRadius - padding, x),
     );
     this.y = Math.max(
       menuRadius + padding,
-      Math.min(window.innerHeight - menuRadius - padding, y)
+      Math.min(window.innerHeight - menuRadius - padding, y),
     );
     this.contextMenu = contextMenu;
     this.open = true;
@@ -68,7 +68,7 @@ export class MobileRadialMenu extends LitElement {
       new CustomEvent("radial-dismiss", {
         bubbles: true,
         composed: true,
-      })
+      }),
     );
     this.contextMenu = null;
   }
@@ -100,7 +100,7 @@ export class MobileRadialMenu extends LitElement {
             action: zone.action,
             contextMenu: this.contextMenu,
           },
-        })
+        }),
       );
       this.open = false;
       this.contextMenu = null;
@@ -117,7 +117,7 @@ export class MobileRadialMenu extends LitElement {
           originX: this.x,
           originY: this.y,
         },
-      })
+      }),
     );
 
     this.hide();
@@ -162,7 +162,7 @@ export class MobileRadialMenu extends LitElement {
             >
               <lucide-icon name=${zone.icon}></lucide-icon>
             </li>
-          `
+          `,
         )}
       </menu>
     `;
diff --git a/ui/system/new_view.html b/ui/system/new_view.html
index cd26d7e..28bf8a1 100644
--- a/ui/system/new_view.html
+++ b/ui/system/new_view.html
@@ -1,11 +1,14 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <!-- SPDX-License-Identifier: AGPL-3.0-or-later -->
   <head>
     <title>Rewild Your Web</title>
     <link rel="stylesheet" href="beaver://theme/index.css" />
     <link rel="stylesheet" href="beaver://shared/fonts/fonts.css" />
-    <link rel="stylesheet" href="beaver://shared/third_party/lucide/lucide.css" />
+    <link
+      rel="stylesheet"
+      href="beaver://shared/third_party/lucide/lucide.css"
+    />
     <link rel="stylesheet" href="new_view.css" />
     <link rel="icon" href="beaver://system/logo.png" />
     <script src="third_party/fend/fend_wasm.js"></script>
diff --git a/ui/system/p2p_broadcaster.js b/ui/system/p2p_broadcaster.js
index e52dc54..b5e396a 100644
--- a/ui/system/p2p_broadcaster.js
+++ b/ui/system/p2p_broadcaster.js
@@ -24,9 +24,7 @@ export class P2PBroadcaster extends EventTarget {
       if (!name) {
         return;
       }
-      this.dispatchEvent(
-        new CustomEvent(name, { detail: { payload, peer } }),
-      );
+      this.dispatchEvent(new CustomEvent(name, { detail: { payload, peer } }));
     };
   }
 
diff --git a/ui/system/remote/index.css b/ui/system/remote/index.css
index 509bef3..00b035a 100644
--- a/ui/system/remote/index.css
+++ b/ui/system/remote/index.css
@@ -12,7 +12,8 @@
   box-sizing: border-box;
 }
 
-html, body {
+html,
+body {
   width: 100%;
   height: 100%;
   font-family: var(--font-family-base);
@@ -80,7 +81,9 @@ html, body {
 }
 
 @keyframes spin {
-  to { transform: rotate(360deg); }
+  to {
+    transform: rotate(360deg);
+  }
 }
 
 .device-item {
diff --git a/ui/system/remote/index.html b/ui/system/remote/index.html
index 347e77c..d48b7c0 100644
--- a/ui/system/remote/index.html
+++ b/ui/system/remote/index.html
@@ -1,13 +1,19 @@
-<!DOCTYPE html>
+<!doctype html>
 <!-- SPDX-License-Identifier: AGPL-3.0-or-later -->
 <html>
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, user-scalable=no"
+    />
     <title>Remote Control</title>
     <link rel="stylesheet" href="beaver://theme/index.css" />
     <link rel="stylesheet" href="beaver://shared/fonts/fonts.css" />
-    <link rel="stylesheet" href="beaver://shared/third_party/lucide/lucide.css" />
+    <link
+      rel="stylesheet"
+      href="beaver://shared/third_party/lucide/lucide.css"
+    />
     <script type="module" src="beaver://shared/lucide_icon.js"></script>
     <script type="module" src="beaver://shared/theme.js"></script>
     <link rel="stylesheet" href="index.css" />
@@ -32,15 +38,27 @@
     <div id="pin-entry" class="screen hidden">
       <div class="selector-header">
         <div class="app-title">Guest Access</div>
-        <div class="app-subtitle" id="pin-device-name">Enter the PIN shown on the media center</div>
+        <div class="app-subtitle" id="pin-device-name">
+          Enter the PIN shown on the media center
+        </div>
       </div>
       <div class="pin-form">
-        <input type="text" id="pin-input" class="pin-input" maxlength="6"
-               inputmode="numeric" pattern="[0-9]*" placeholder="000000" autocomplete="off" />
+        <input
+          type="text"
+          id="pin-input"
+          class="pin-input"
+          maxlength="6"
+          inputmode="numeric"
+          pattern="[0-9]*"
+          placeholder="000000"
+          autocomplete="off"
+        />
         <div id="pin-error" class="pin-error hidden">Wrong PIN. Try again.</div>
         <div class="pin-actions">
           <button id="pin-cancel" class="pin-btn pin-btn-cancel">Cancel</button>
-          <button id="pin-submit" class="pin-btn pin-btn-submit">Connect</button>
+          <button id="pin-submit" class="pin-btn pin-btn-submit">
+            Connect
+          </button>
         </div>
       </div>
     </div>
@@ -49,7 +67,10 @@
     <div id="remote-control" class="screen hidden">
       <!-- Connection status -->
       <div id="connection-bar" class="connection-bar">
-        <lucide-icon name="monitor-smartphone" class="connected-icon"></lucide-icon>
+        <lucide-icon
+          name="monitor-smartphone"
+          class="connected-icon"
+        ></lucide-icon>
         <span id="connected-name">Connected</span>
         <button id="disconnect-btn" class="disconnect-btn">
           <lucide-icon name="x"></lucide-icon>
@@ -66,7 +87,11 @@
           <button class="transport-btn" data-action="previoustrack">
             <lucide-icon name="skip-back"></lucide-icon>
           </button>
-          <button class="transport-btn play-btn" id="np-play" data-action="play">
+          <button
+            class="transport-btn play-btn"
+            id="np-play"
+            data-action="play"
+          >
             <lucide-icon name="play" id="np-play-icon"></lucide-icon>
           </button>
           <button class="transport-btn" data-action="nexttrack">
@@ -81,16 +106,28 @@
           <button class="dpad-btn up" data-key="ArrowUp" data-code="ArrowUp">
             <lucide-icon name="chevron-up"></lucide-icon>
           </button>
-          <button class="dpad-btn left" data-key="ArrowLeft" data-code="ArrowLeft">
+          <button
+            class="dpad-btn left"
+            data-key="ArrowLeft"
+            data-code="ArrowLeft"
+          >
             <lucide-icon name="chevron-left"></lucide-icon>
           </button>
           <button class="dpad-btn ok" data-key="Enter" data-code="Enter">
             OK
           </button>
-          <button class="dpad-btn right" data-key="ArrowRight" data-code="ArrowRight">
+          <button
+            class="dpad-btn right"
+            data-key="ArrowRight"
+            data-code="ArrowRight"
+          >
             <lucide-icon name="chevron-right"></lucide-icon>
           </button>
-          <button class="dpad-btn down" data-key="ArrowDown" data-code="ArrowDown">
+          <button
+            class="dpad-btn down"
+            data-key="ArrowDown"
+            data-code="ArrowDown"
+          >
             <lucide-icon name="chevron-down"></lucide-icon>
           </button>
         </div>
diff --git a/ui/system/remote/index.js b/ui/system/remote/index.js
index 46269c8..af5fa32 100644
--- a/ui/system/remote/index.js
+++ b/ui/system/remote/index.js
@@ -60,7 +60,8 @@ const mediaBroadcaster = new MediaBroadcaster({
 async function discoverDevices() {
   const pairing = navigator.embedder?.pairing;
   if (!pairing) {
-    deviceList.innerHTML = '<div class="no-devices">Pairing not available</div>';
+    deviceList.innerHTML =
+      '<div class="no-devices">Pairing not available</div>';
     return;
   }
 
@@ -216,9 +217,7 @@ document.querySelectorAll(".transport-btn").forEach((btn) => {
   btn.addEventListener("click", () => {
     const action = btn.dataset.action;
     if (action === "play") {
-      sendMediaAction(
-        remotePlaybackState === "playing" ? "pause" : "play",
-      );
+      sendMediaAction(remotePlaybackState === "playing" ? "pause" : "play");
     } else if (action) {
       sendMediaAction(action);
     }
diff --git a/ui/system/search.html b/ui/system/search.html
index ebc009f..75b17cb 100644
--- a/ui/system/search.html
+++ b/ui/system/search.html
@@ -1,11 +1,14 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <!-- SPDX-License-Identifier: AGPL-3.0-or-later -->
   <head>
     <title>Search</title>
     <link rel="stylesheet" href="beaver://theme/index.css" />
     <link rel="stylesheet" href="beaver://shared/fonts/fonts.css" />
-    <link rel="stylesheet" href="beaver://shared/third_party/lucide/lucide.css" />
+    <link
+      rel="stylesheet"
+      href="beaver://shared/third_party/lucide/lucide.css"
+    />
     <link rel="stylesheet" href="./search.css" />
     <link rel="icon" href="beaver://system/logo.png" />
     <script src="third_party/fend/fend_wasm.js"></script>
diff --git a/ui/system/select_control.js b/ui/system/select_control.js
index db88947..fd51681 100644
--- a/ui/system/select_control.js
+++ b/ui/system/select_control.js
@@ -111,7 +111,8 @@ export class SelectControl extends MenuBase {
 
       const isSelected = index === this.selectedIndex;
       renderedItems.push(html`
-        <li class="${option.disabled ? "disabled" : ""} ${isSelected
+        <li
+          class="${option.disabled ? "disabled" : ""} ${isSelected
             ? "selected"
             : ""}"
           @click=${() => this.handleOptionClick(option, index)}
@@ -126,9 +127,7 @@ export class SelectControl extends MenuBase {
 
     return html`
       <div class="backdrop" @click=${this.handleBackdropClick}></div>
-      <menu style="left: ${this.x}px; top: ${this.y}px;">
-        ${renderedItems}
-      </menu>
+      <menu style="left: ${this.x}px; top: ${this.y}px;">${renderedItems}</menu>
     `;
   }
 }
diff --git a/ui/system/services/notifications.js b/ui/system/services/notifications.js
index a7f8b9c..a662347 100644
--- a/ui/system/services/notifications.js
+++ b/ui/system/services/notifications.js
@@ -92,7 +92,10 @@ export function getAll() {
   return [...notifications];
 }
 
-export function handleClick(notification, { layoutManager, panel, pairingHandler }) {
+export function handleClick(
+  notification,
+  { layoutManager, panel, pairingHandler },
+) {
   if (notification.tag === "pairing-requests") {
     panel.open = false;
     if (pairingHandler.hasPendingRequests) pairingHandler.showPairingDialog();
@@ -102,7 +105,8 @@ export function handleClick(notification, { layoutManager, panel, pairingHandler
     for (const [id, entry] of layoutManager.webviews) {
       if (id.toString() === notification.webviewId) {
         layoutManager.setActiveWebView(id);
-        if (layoutManager.scrollToPanel) layoutManager.scrollToPanel(entry.panelIndex);
+        if (layoutManager.scrollToPanel)
+          layoutManager.scrollToPanel(entry.panelIndex);
         break;
       }
     }
diff --git a/ui/system/task_chooser.js b/ui/system/task_chooser.js
index 638d488..9c38f1b 100644
--- a/ui/system/task_chooser.js
+++ b/ui/system/task_chooser.js
@@ -259,7 +259,11 @@ export class TaskChooser extends LitElement {
   }
 
   _selectProvider(provider) {
-    console.log("[TaskChooser] Provider selected:", provider.id, provider.title);
+    console.log(
+      "[TaskChooser] Provider selected:",
+      provider.id,
+      provider.title,
+    );
 
     // If "always use this" is checked, save the default.
     const checkbox = this.shadowRoot?.querySelector("#always-use");
@@ -313,7 +317,9 @@ export class TaskChooser extends LitElement {
                     : ""}
                   <div class="provider-origin">
                     ${p.origin}${p.device_name
-                      ? html` <span class="device-name">(${p.device_name})</span>`
+                      ? html` <span class="device-name"
+                          >(${p.device_name})</span
+                        >`
                       : ""}
                   </div>
                 </div>
diff --git a/ui/system/url_bar_overlay.js b/ui/system/url_bar_overlay.js
index 292c9a0..ee4273d 100644
--- a/ui/system/url_bar_overlay.js
+++ b/ui/system/url_bar_overlay.js
@@ -140,11 +140,11 @@ export class UrlBarOverlay extends LitElement {
                                 >${result.value}</span
                               >`}
                         </div>
-                      `
+                      `,
                     )}
                   </div>
                 </div>
-              `
+              `,
             )}
           </div>
         </div>
diff --git a/ui/system/web_view.js b/ui/system/web_view.js
index 3039f81..7ffdb5c 100644
--- a/ui/system/web_view.js
+++ b/ui/system/web_view.js
@@ -510,9 +510,7 @@ export class WebView extends LitElement {
 
         // Insert "Open Link in <peer>" after "OpenLinkInNewWebView"
         if (params.linkUrl) {
-          const idx = items.findIndex(
-            (i) => i.id === "OpenLinkInNewWebView",
-          );
+          const idx = items.findIndex((i) => i.id === "OpenLinkInNewWebView");
           if (idx !== -1) {
             items.splice(
               idx + 1,
@@ -524,26 +522,18 @@ export class WebView extends LitElement {
 
         // Insert "Open Image in <peer>" after "OpenImageInNewView"
         if (params.imageUrl) {
-          const idx = items.findIndex(
-            (i) => i.id === "OpenImageInNewView",
-          );
+          const idx = items.findIndex((i) => i.id === "OpenImageInNewView");
           if (idx !== -1) {
             items.splice(
               idx + 1,
               0,
-              ...peerItems(
-                "p2p_open_image",
-                "Open Image in",
-                params.imageUrl,
-              ),
+              ...peerItems("p2p_open_image", "Open Image in", params.imageUrl),
             );
           }
         }
 
         // "Open this view in <peer>" at the end (for current page)
-        items.push(
-          ...peerItems("p2p_open_in", "Open in", this.currentUrl),
-        );
+        items.push(...peerItems("p2p_open_in", "Open in", this.currentUrl));
       }
     } catch {
       // Pairing service may not be running — skip the items.
@@ -886,11 +876,22 @@ export class WebView extends LitElement {
     }
 
     return html`
-      <div class="inline-provider-overlay" @click=${() => this.closeInlineProvider()}>
-        <div class="inline-provider-dialog" @click=${(e) => e.stopPropagation()}>
+      <div
+        class="inline-provider-overlay"
+        @click=${() => this.closeInlineProvider()}
+      >
+        <div
+          class="inline-provider-dialog"
+          @click=${(e) => e.stopPropagation()}
+        >
           <div class="inline-provider-header">
-            <span class="inline-provider-title">${this.inlineProvider.title}</span>
-            <button class="inline-provider-close" @click=${() => this.closeInlineProvider()}>
+            <span class="inline-provider-title"
+              >${this.inlineProvider.title}</span
+            >
+            <button
+              class="inline-provider-close"
+              @click=${() => this.closeInlineProvider()}
+            >
               &times;
             </button>
           </div>
@@ -1280,7 +1281,9 @@ export class WebView extends LitElement {
                 >
                   <lucide-icon name="shield"></lucide-icon>
                   ${this.blockerBadgeCount > 0
-                    ? html`<span class="blocker-badge">${this.blockerBadgeCount}</span>`
+                    ? html`<span class="blocker-badge"
+                        >${this.blockerBadgeCount}</span
+                      >`
                     : ""}
                 </div>
               `
@@ -1362,8 +1365,7 @@ export class WebView extends LitElement {
             @menu-closed=${this.handleSelectClosed}
           ></select-control>
 
-          ${this.renderColorPicker()}
-          ${this.renderInlineProvider()}
+          ${this.renderColorPicker()} ${this.renderInlineProvider()}
         </div>
       </div>
     `;