From 20632c8475eb6a315b9c6930df4a0ac3b4d12bc2 Mon Sep 17 00:00:00 2001
From: Ategon <benjamin@barbeau.net>
Date: Fri, 10 Jul 2026 02:16:36 -0400
Subject: [PATCH] Adjust UI styling and add misc UI features

---
 package.json                                  |   3 -
 packages/admin/package.json                   |   5 +-
 .../admin/src/components/sidebar/Sidebar.tsx  |  45 +-
 .../src/components/sidebar/collapse-items.tsx |   5 +-
 .../src/pages/Accounts/Accounts/page.tsx      |   5 +-
 packages/admin/src/pages/Home/card.tsx        |   5 +-
 .../admin/src/pages/Home/cards/PixelsCard.tsx |   5 +-
 .../src/pages/Home/cards/ReportsCard.tsx      |   5 +-
 .../admin/src/pages/Home/cards/UsersCard.tsx  |   5 +-
 packages/admin/src/pages/Reports/page.tsx     |   5 +-
 packages/client/package.json                  |   5 +-
 packages/client/src/Moderator/ModSidebar.tsx  |   5 +-
 .../client/src/Moderator/UserModSidebar.tsx   |   5 +-
 packages/client/src/assets/logo.webp          | Bin 0 -> 928 bytes
 packages/client/src/components/App.tsx        |  51 +-
 packages/client/src/components/AuthErrors.tsx |   4 +-
 .../client/src/components/CanvasWrapper.tsx   |  62 +-
 .../components/Captcha/CaptchaStatusBar.tsx   |   2 +-
 .../src/components/Chat/ChatInfoDialog.tsx    |   4 +-
 .../src/components/Chat/OpenChatButton.tsx    |  28 +-
 .../src/components/ColorPickFeedback.tsx      |  81 ++
 .../src/components/Debug/DebugModal.tsx       |   2 +-
 .../client/src/components/DynamicModals.tsx   |   2 +-
 .../components/EventInfo/EventDatesCard.tsx   |   8 +-
 .../components/EventInfo/EventDatesHeader.tsx |  40 +-
 .../src/components/EventInfo/EventInfo.tsx    |   4 +-
 .../src/components/EventInfoOverlay.tsx       |  21 +-
 .../src/components/Header/AccountStanding.tsx |   2 +-
 .../client/src/components/Header/Header.tsx   |   2 +-
 .../src/components/Header/HeaderLeft.tsx      |  56 +-
 .../src/components/Header/HeaderRight.tsx     | 290 ++++++--
 .../src/components/Header/ThemeSwitcher.tsx   |  27 +-
 .../client/src/components/Header/User.tsx     |   7 +-
 .../src/components/Header/useSidebarWidth.ts  |  24 +
 .../src/components/Info/InfoCommunity.tsx     |  50 +-
 .../client/src/components/Info/InfoFAQ.tsx    |   4 +-
 .../src/components/Info/InfoPrivacy.tsx       |   4 +-
 .../client/src/components/Info/InfoRules.tsx  |   4 +-
 .../src/components/Info/InfoSidebar.tsx       |   4 +-
 .../src/components/Info/InfoWelcome.tsx       |   5 +-
 .../src/components/Info/buttons/Discord.tsx   |   3 +-
 .../src/components/Info/buttons/Lemmy.tsx     |   3 +-
 .../src/components/Info/buttons/Mastodon.tsx  |   3 +-
 .../src/components/Info/buttons/Matrix.tsx    |   3 +-
 .../src/components/Info/buttons/Tip.tsx       |  11 +-
 .../Info/components/InfoSection.tsx           |  11 +-
 .../client/src/components/KeybindModal.tsx    |   2 +-
 .../src/components/Login/LoginButton.tsx      |   2 +-
 .../src/components/Login/LoginModal.tsx       |   2 +-
 .../PixelSidebar/PixelWhoisSidebar.tsx        |  42 +-
 .../PixelSidebar/ReportPixelModal.tsx         |   2 +-
 .../src/components/Profile/ProfileModal.tsx   |   2 +-
 .../src/components/Profile/UserCard.tsx       |  17 +-
 .../src/components/Settings/MiscSettings.tsx  |  78 ++
 .../components/Settings/SettingsSidebar.tsx   |   4 +-
 .../components/Settings/TemplateSettings.tsx  |  29 +-
 .../client/src/components/SidebarBase.tsx     |  84 +--
 .../Templating/MobileTemplateButtons.tsx      |  19 +-
 .../src/components/Toolbar/CanvasMeta.tsx     | 147 +++-
 .../components/Toolbar/OverlaySwitcher.scss   | 323 ++++++++
 .../components/Toolbar/OverlaySwitcher.tsx    | 216 ++++++
 .../src/components/Toolbar/Palette.scss       | 345 ++++++++-
 .../client/src/components/Toolbar/Palette.tsx | 689 ++++++++++++++++--
 .../src/components/Toolbar/ShareModal.tsx     |   7 +-
 .../src/components/Toolbar/ToolbarWrapper.tsx |   2 +
 .../src/components/Welcome/WelcomeModal.tsx   |   2 +-
 .../client/src/components/core/Button.tsx     |   3 +
 packages/client/src/contexts/AppContext.tsx   |  39 +-
 .../client/src/contexts/CaptureContext.tsx    |  15 +-
 packages/client/src/contexts/PanelContext.tsx |   9 +-
 .../client/src/contexts/TemplateContext.tsx   |   9 +
 .../client/src/hooks/useCompactPalette.ts     |  31 +
 packages/client/src/hooks/useIsMobile.ts      |  23 +
 packages/client/src/index.html                |   1 +
 packages/client/src/lib/canvas.ts             |  85 ++-
 packages/client/src/lib/keybinds.ts           |  53 ++
 packages/client/src/lib/palette.ts            |  34 +-
 packages/client/src/lib/template.ts           | 190 ++++-
 packages/client/src/style.scss                | 658 ++++++++++++++++-
 packages/lib/src/renderer/PanZoom.ts          | 175 ++++-
 packages/lib/src/renderer/index.ts            |   1 +
 yarn.lock                                     |  66 +-
 82 files changed, 3744 insertions(+), 587 deletions(-)
 create mode 100644 packages/client/src/assets/logo.webp
 create mode 100644 packages/client/src/components/ColorPickFeedback.tsx
 create mode 100644 packages/client/src/components/Header/useSidebarWidth.ts
 create mode 100644 packages/client/src/components/Toolbar/OverlaySwitcher.scss
 create mode 100644 packages/client/src/components/Toolbar/OverlaySwitcher.tsx
 create mode 100644 packages/client/src/hooks/useCompactPalette.ts
 create mode 100644 packages/client/src/hooks/useIsMobile.ts

diff --git a/package.json b/package.json
index 31e8d41..db5eb01 100644
--- a/package.json
+++ b/package.json
@@ -57,9 +57,6 @@
     "vite-plugin-simple-html": "^1.1.0"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^7.2.0",
-    "@fortawesome/free-brands-svg-icons": "^7.2.0",
-    "@fortawesome/react-fontawesome": "^3.2.0",
     "@internationalized/date": "^3.11.0",
     "@quixo3/prisma-session-store": "^3.1.19",
     "@sentry/react": "^10.39.0",
diff --git a/packages/admin/package.json b/packages/admin/package.json
index f9bf9fa..6f171d0 100644
--- a/packages/admin/package.json
+++ b/packages/admin/package.json
@@ -10,14 +10,11 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^7.2.0",
-    "@fortawesome/free-brands-svg-icons": "^7.2.0",
-    "@fortawesome/free-solid-svg-icons": "^7.2.0",
-    "@fortawesome/react-fontawesome": "^3.3.1",
     "@nextui-org/react": "^2.6.11",
     "apexcharts": "^5.5.0",
     "framer-motion": "^12.34.0",
     "localforage": "^1.10.0",
+    "lucide-react": "^1.23.0",
     "match-sorter": "^8.2.0",
     "next-themes": "^0.4.6",
     "react": "^19.2.5",
diff --git a/packages/admin/src/components/sidebar/Sidebar.tsx b/packages/admin/src/components/sidebar/Sidebar.tsx
index 0e4b1fa..abc9593 100644
--- a/packages/admin/src/components/sidebar/Sidebar.tsx
+++ b/packages/admin/src/components/sidebar/Sidebar.tsx
@@ -2,20 +2,7 @@ import { useState } from "react";
 import { Sidebar } from "./sidebar.styles";
 import { SidebarItem } from "./sidebar-item";
 import { SidebarMenu } from "./sidebar-menu";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import {
-  faChartBar,
-  faClock,
-  faCog,
-  faHashtag,
-  faHome,
-  faList,
-  faServer,
-  faShieldHalved,
-  faSquare,
-  faUsers,
-  faWarning,
-} from "@fortawesome/free-solid-svg-icons";
+import { ChartColumn, Clock, Hash, House, List, Server, Settings, Shield, Square, TriangleAlert, Users } from "lucide-react";
 import { useLocation } from "react-router-dom";
 import { CollapseItems } from "./collapse-items";
 
@@ -37,7 +24,7 @@ export const SidebarWrapper = () => {
       >
         <div className={Sidebar.Header()}>
           <div className="flex items-center gap-2">
-            <FontAwesomeIcon icon={faSquare} />
+            <Square aria-hidden="true" size={16} />
             <div className="flex flex-col gap-4">
               <h3 className="text-xl font-medium m-0 text-default-900 -mb-4 whitespace-nowrap">
                 Canvas
@@ -52,24 +39,24 @@ export const SidebarWrapper = () => {
           <div className={Sidebar.Body()}>
             <SidebarItem
               title="Home"
-              icon={<FontAwesomeIcon icon={faHome} />}
+              icon={<House aria-hidden="true" size={16} />}
               isActive={pathname === "/"}
               href="/"
             />
             <SidebarItem
               title="Pixel Reports"
-              icon={<FontAwesomeIcon icon={faWarning} />}
+              icon={<TriangleAlert aria-hidden="true" size={16} />}
               isActive={pathname === "/reports"}
               href="/reports"
             />
             <SidebarItem
               title="Audit Log"
-              icon={<FontAwesomeIcon icon={faList} />}
+              icon={<List aria-hidden="true" size={16} />}
               isActive={pathname === "/audit"}
               href="/audit"
             />
             <CollapseItems
-              icon={<FontAwesomeIcon icon={faChartBar} />}
+              icon={<ChartColumn aria-hidden="true" size={16} />}
               title="Stats"
               items={["Pixels"]}
             />
@@ -77,19 +64,19 @@ export const SidebarWrapper = () => {
               <SidebarItem
                 isActive={pathname === "/accounts"}
                 title="Accounts"
-                icon={<FontAwesomeIcon icon={faUsers} />}
+                icon={<Users aria-hidden="true" size={16} />}
                 href="/accounts"
               />
               <SidebarItem
                 isActive={pathname === "/instances"}
                 title="Instances"
-                icon={<FontAwesomeIcon icon={faServer} />}
+                icon={<Server aria-hidden="true" size={16} />}
                 href="/instances"
               />
               <SidebarItem
                 isActive={pathname === "/accounts/settings"}
                 title="Settings"
-                icon={<FontAwesomeIcon icon={faCog} />}
+                icon={<Settings aria-hidden="true" size={16} />}
                 href="/accounts/settings"
               />
             </SidebarMenu>
@@ -98,13 +85,13 @@ export const SidebarWrapper = () => {
               <SidebarItem
                 isActive={pathname === "/clans"}
                 title="Clans"
-                icon={<FontAwesomeIcon icon={faShieldHalved} />}
+                icon={<Shield aria-hidden="true" size={16} />}
                 href="/clans"
               />
               <SidebarItem
                 isActive={pathname === "/clans/settings"}
                 title="Settings"
-                icon={<FontAwesomeIcon icon={faCog} />}
+                icon={<Settings aria-hidden="true" size={16} />}
                 href="/clans/settings"
               />
             </SidebarMenu>
@@ -113,13 +100,13 @@ export const SidebarWrapper = () => {
               <SidebarItem
                 isActive={pathname === "/chat/rooms"}
                 title="Rooms"
-                icon={<FontAwesomeIcon icon={faHashtag} />}
+                icon={<Hash aria-hidden="true" size={16} />}
                 href="/chat/rooms"
               />
               <SidebarItem
                 isActive={pathname === "/chat/settings"}
                 title="Settings"
-                icon={<FontAwesomeIcon icon={faCog} />}
+                icon={<Settings aria-hidden="true" size={16} />}
                 href="/chat/settings"
               />
             </SidebarMenu>
@@ -128,19 +115,19 @@ export const SidebarWrapper = () => {
               <SidebarItem
                 isActive={pathname === "/chat/rooms"}
                 title="Shards"
-                icon={<FontAwesomeIcon icon={faServer} />}
+                icon={<Server aria-hidden="true" size={16} />}
                 href="/chat/rooms"
               />
               <SidebarItem
                 isActive={pathname === "/chat/rooms"}
                 title="Timelapse"
-                icon={<FontAwesomeIcon icon={faClock} />}
+                icon={<Clock aria-hidden="true" size={16} />}
                 href="/chat/rooms"
               />
               <SidebarItem
                 isActive={pathname === "/service/settings"}
                 title="Settings"
-                icon={<FontAwesomeIcon icon={faCog} />}
+                icon={<Settings aria-hidden="true" size={16} />}
                 href="/service/settings"
               />
             </SidebarMenu>
diff --git a/packages/admin/src/components/sidebar/collapse-items.tsx b/packages/admin/src/components/sidebar/collapse-items.tsx
index ec1a205..e02cd30 100644
--- a/packages/admin/src/components/sidebar/collapse-items.tsx
+++ b/packages/admin/src/components/sidebar/collapse-items.tsx
@@ -2,8 +2,7 @@
 import React from "react";
 // import { ChevronUpIcon } from "../icons/sidebar/chevron-up-icon";
 import { Accordion, AccordionItem } from "@nextui-org/react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faChevronDown } from "@fortawesome/free-solid-svg-icons";
+import { ChevronDown } from "lucide-react";
 
 interface Props {
   icon: React.ReactNode;
@@ -16,7 +15,7 @@ export const CollapseItems = ({ icon, items, title }: Props) => {
     <div className="flex gap-4 h-full items-center cursor-pointer">
       <Accordion className="px-0">
         <AccordionItem
-          indicator={<FontAwesomeIcon icon={faChevronDown} />}
+          indicator={<ChevronDown aria-hidden="true" size={16} />}
           classNames={{
             indicator: "data-[open=true]:-rotate-180",
             trigger:
diff --git a/packages/admin/src/pages/Accounts/Accounts/page.tsx b/packages/admin/src/pages/Accounts/Accounts/page.tsx
index 9e2b807..fb4198e 100644
--- a/packages/admin/src/pages/Accounts/Accounts/page.tsx
+++ b/packages/admin/src/pages/Accounts/Accounts/page.tsx
@@ -1,5 +1,4 @@
-import { faFile } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { FileText } from "lucide-react";
 import { BreadcrumbItem, Breadcrumbs, Button, Input } from "@nextui-org/react";
 import { AccountsTable } from "./AccountsTable";
 
@@ -30,7 +29,7 @@ export const AccountsPage = () => {
           {/* <AddUser /> */}
           <Button
             color="primary"
-            startContent={<FontAwesomeIcon icon={faFile} />}
+            startContent={<FileText aria-hidden="true" size={16} />}
           >
             Export to CSV
           </Button>
diff --git a/packages/admin/src/pages/Home/card.tsx b/packages/admin/src/pages/Home/card.tsx
index 88cf389..025c585 100644
--- a/packages/admin/src/pages/Home/card.tsx
+++ b/packages/admin/src/pages/Home/card.tsx
@@ -1,5 +1,4 @@
-import { faUsers } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Users } from "lucide-react";
 import { Card, CardBody } from "@nextui-org/react";
 
 export const HomeCard = () => {
@@ -7,7 +6,7 @@ export const HomeCard = () => {
     <Card className="xl:max-w-sm bg-primary rounded-xl shadow-md px-3 w-full">
       <CardBody className="py-5">
         <div className="flex gap-2.5">
-          <FontAwesomeIcon icon={faUsers} />
+          <Users aria-hidden="true" size={18} />
           <div className="flex flex-col">
             <span className="text-white">Auto Insurance</span>
             <span className="text-white text-xs">1311 Cars</span>
diff --git a/packages/admin/src/pages/Home/cards/PixelsCard.tsx b/packages/admin/src/pages/Home/cards/PixelsCard.tsx
index 5756538..9bd1e3d 100644
--- a/packages/admin/src/pages/Home/cards/PixelsCard.tsx
+++ b/packages/admin/src/pages/Home/cards/PixelsCard.tsx
@@ -1,5 +1,4 @@
-import { faTableCells } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Grid3X3 } from "lucide-react";
 import { Card, CardBody } from "@nextui-org/react";
 
 export const PixelsCard = () => {
@@ -10,7 +9,7 @@ export const PixelsCard = () => {
     >
       <CardBody className="py-5">
         <div className="flex gap-2.5 items-center">
-          <FontAwesomeIcon icon={faTableCells} size="lg" />
+          <Grid3X3 aria-hidden="true" size={20} />
           <div className="flex flex-col">
             <span className="text-white">Pixel Placements</span>
             {/* <span className="text-white text-xs">1.5k Placements</span> */}
diff --git a/packages/admin/src/pages/Home/cards/ReportsCard.tsx b/packages/admin/src/pages/Home/cards/ReportsCard.tsx
index 0c42e85..6caaa6c 100644
--- a/packages/admin/src/pages/Home/cards/ReportsCard.tsx
+++ b/packages/admin/src/pages/Home/cards/ReportsCard.tsx
@@ -1,5 +1,4 @@
-import { faFlag } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Flag } from "lucide-react";
 import { Card, CardBody } from "@nextui-org/react";
 
 export const ReportsCard = () => {
@@ -10,7 +9,7 @@ export const ReportsCard = () => {
     >
       <CardBody className="py-5">
         <div className="flex gap-2.5 items-center">
-          <FontAwesomeIcon icon={faFlag} size="lg" />
+          <Flag aria-hidden="true" size={20} />
           <div className="flex flex-col">
             <span className="text-white">Reports</span>
             {/* <span className="text-white text-xs">3k online</span> */}
diff --git a/packages/admin/src/pages/Home/cards/UsersCard.tsx b/packages/admin/src/pages/Home/cards/UsersCard.tsx
index 9f83988..8ccb2ae 100644
--- a/packages/admin/src/pages/Home/cards/UsersCard.tsx
+++ b/packages/admin/src/pages/Home/cards/UsersCard.tsx
@@ -1,5 +1,4 @@
-import { faUsers } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Users } from "lucide-react";
 import { Card, CardBody } from "@nextui-org/react";
 
 export const UsersCard = () => {
@@ -10,7 +9,7 @@ export const UsersCard = () => {
     >
       <CardBody className="py-5">
         <div className="flex gap-2.5 items-center">
-          <FontAwesomeIcon icon={faUsers} size="lg" />
+          <Users aria-hidden="true" size={20} />
           <div className="flex flex-col">
             <span className="text-white">Users</span>
             <span className="text-white text-xs">3k online</span>
diff --git a/packages/admin/src/pages/Reports/page.tsx b/packages/admin/src/pages/Reports/page.tsx
index 701ade2..8a6cc43 100644
--- a/packages/admin/src/pages/Reports/page.tsx
+++ b/packages/admin/src/pages/Reports/page.tsx
@@ -1,5 +1,4 @@
-import { faFile } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { FileText } from "lucide-react";
 import { BreadcrumbItem, Breadcrumbs, Button, Input } from "@nextui-org/react";
 import { ReportsTable } from "./ReportsTable";
 
@@ -30,7 +29,7 @@ export const ReportsPage = () => {
           {/* <AddUser /> */}
           <Button
             color="primary"
-            startContent={<FontAwesomeIcon icon={faFile} />}
+            startContent={<FileText aria-hidden="true" size={16} />}
           >
             Export to CSV
           </Button>
diff --git a/packages/client/package.json b/packages/client/package.json
index 394cfa6..3931e5e 100644
--- a/packages/client/package.json
+++ b/packages/client/package.json
@@ -11,10 +11,6 @@
   "type": "module",
   "license": "MIT",
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^7.2.0",
-    "@fortawesome/free-brands-svg-icons": "^7.2.0",
-    "@fortawesome/free-solid-svg-icons": "^7.2.0",
-    "@fortawesome/react-fontawesome": "^3.3.1",
     "@heroui/react": "^2.8.10",
     "@icons-pack/react-simple-icons": "^13.11.2",
     "@sc07-canvas/chat": "workspace:^",
@@ -25,6 +21,7 @@
     "eventemitter3": "^5.0.4",
     "framer-motion": "^12.34.0",
     "lodash.throttle": "^4.1.1",
+    "lucide-react": "^1.23.0",
     "openapi-fetch": "^0.17.0",
     "prop-types": "^15.8.1",
     "react-toastify": "^11.1.0",
diff --git a/packages/client/src/Moderator/ModSidebar.tsx b/packages/client/src/Moderator/ModSidebar.tsx
index 89b2ac3..2cc65af 100644
--- a/packages/client/src/Moderator/ModSidebar.tsx
+++ b/packages/client/src/Moderator/ModSidebar.tsx
@@ -1,4 +1,4 @@
-import { faHammer } from "@fortawesome/free-solid-svg-icons";
+import { Hammer } from "lucide-react";
 import { SidebarBase } from "../components/SidebarBase";
 import { useModerator } from "./Moderator";
 import { Alert, Chip } from "@heroui/react";
@@ -20,10 +20,9 @@ export const ModSidebar = () => {
       setSidebarShown={(show) =>
         dispatch({ action: show ? "OPEN_MENU" : "CLOSE_MENU" })
       }
-      icon={faHammer}
+      icon={Hammer}
       title="Moderator"
       side="Left"
-      noBackdrop
     >
       <div className="p-2">
         <SelectedArea />
diff --git a/packages/client/src/Moderator/UserModSidebar.tsx b/packages/client/src/Moderator/UserModSidebar.tsx
index 4c4dfa9..da3f027 100644
--- a/packages/client/src/Moderator/UserModSidebar.tsx
+++ b/packages/client/src/Moderator/UserModSidebar.tsx
@@ -1,4 +1,4 @@
-import { faHammer } from "@fortawesome/free-solid-svg-icons";
+import { Hammer } from "lucide-react";
 import { SidebarBase } from "../components/SidebarBase";
 import { ModeratorUtils, useModerator } from "./Moderator";
 import { useCallback, useEffect, useState } from "react";
@@ -27,10 +27,9 @@ export const UserModSidebar = () => {
       setSidebarShown={(val) => {
         if (!val) dispatch({ action: "INSPECT_USER" });
       }}
-      icon={faHammer}
+      icon={Hammer}
       title="Moderator: User Inspect"
       side="Left"
-      noBackdrop
     >
       <div className="p-2">
         {state.inspectUser ? <Inner sub={state.inspectUser} /> : <></>}
diff --git a/packages/client/src/assets/logo.webp b/packages/client/src/assets/logo.webp
new file mode 100644
index 0000000000000000000000000000000000000000..893a5115d0e481f2da545390229f1924c6df102b
GIT binary patch
literal 928
zcmWIYbaR`*%)k)t>J$(bVByol%)p=@e?XjJ>WQYD+gs+=o-59|y)74t%;ulHu}xp@
zoZa>M!c9Tnug?9NH{;4S-PGOx6`5Qd{c1ZLnPmh6QXI}sR$*nl;W9~g>Hoifm)~dN
zQ#j6YvzLkEw>{&+n%EcTIdz`@?06aU*r(D(!o@NmY1O<S=1q$=e_I}7+QuaOx6S0n
zB?<Wjf7O?L>R{(dlgqN;%1fBmZPP8-)3mW8z$D~T)8Q{qMJG9|VA!ZIac@Cba%4k{
ze9|Yj!`hxkc8d?n6+LX=?J4xI6A(Xj#7bxazvv|KCC59vKg0>A?rqbnd%sBB_k|OO
zm35bcw8DPoY@J=fEN)u+1h@+3u6Sa@_}JjR8xy~a*WxB))?-x%;ya~_w91lFZ%h#J
zt}nSJQ=PZSQTNS<=X`-Y(RGX&tW()5Tyst>aBAY?h;jThuSLY6@rmWNc%?#)w&hEB
zdsKX$@MYC(e5GS=8MyFZibUuOZqt@Ij7=NbcL{M_kUb`8G4IA@rjtq;+zT0Q`1xEi
z<PuuZD|L=x1><=R*Y&c38t2vCDKB1R%OiN2EyM7DL`N9I0m)g6?!J;jAA}qn*@70b
zG+6U3Nm0){>6n~T=vc&V-SvU<#dqGd8`}jVCz$ypX*DwZaER^r)9G5YuVK{$+wBY=
zgxu>2H!wx<6fj9~GfZ)KBJ_L%&k^><c^>Bu+~D}~uSIr?lC<H5r{4=091a%U`pBvu
z!^t`|@rgSt!;<A@d+I-G_DGo=Y~0<#WOI1hwU$eKjS5$$C^G6l$Z@Q{wB1HEsMBSi
zk%^#(v2ydi3!!okJ-8VjC~fIUKe9+`;Q=3EhJxAuGd~_z*z(@fY2AWedoz<H&7NG3
zb54&XTTX;IH8!nLd8*5B=9@*})WbCgK7`aT-C4B7iEZizRo0c2{ZEX43T{v|XGze1
z*6GkF6|+pP%wW=mR@0h;2cE=#l(Y0_k>F<d&YHaPm>h$Hr{1GN?$<mFchbbdjFTnZ
z7JcNH^g(7`Te_g8r_L>5uJ3w=FWNq?tmNPFp1s-V1M4|unU{?pUtYPyv`E@RE|_Iv
z?F<!-$fFW=%m<o#I(*!FGat>`E;M(>8dkO6%Aaqz<Z5W1J5W-s;IPf)xt_s=-H|&c
zv&+`=d|7;qJ>03`VA{OuuEno^luZ1ReB-{h_Jw-&OW$vPfAR71f9V?wjo#)j%KPqn
j`d-<K&-XS-&R93M{bzf4&9Sc`<}W{A+&#M`znmEWbRL?^

literal 0
HcmV?d00001

diff --git a/packages/client/src/components/App.tsx b/packages/client/src/components/App.tsx
index 238691c..dc0769c 100644
--- a/packages/client/src/components/App.tsx
+++ b/packages/client/src/components/App.tsx
@@ -1,4 +1,5 @@
 import { Header } from "./Header/Header";
+import { useEffect, useState } from "react";
 import { AppContext, useAppContext } from "../contexts/AppContext";
 import { CanvasWrapper } from "./CanvasWrapper";
 import { TemplateContext } from "../contexts/TemplateContext";
@@ -9,7 +10,7 @@ import { SWRConfig } from "swr";
 
 import "react-toastify/dist/ReactToastify.css";
 import { AuthErrors } from "./AuthErrors";
-import "../lib/keybinds";
+import { KeybindManager } from "../lib/keybinds";
 import { PixelWhoisSidebar } from "./PixelSidebar/PixelWhoisSidebar";
 import { KeybindModal } from "./KeybindModal";
 import { ProfileModal } from "./Profile/ProfileModal";
@@ -23,19 +24,61 @@ import { LoginModal } from "./Login/LoginModal";
 import { Chat, ChatContext } from "./Chat/utils";
 import { EventInfoModal } from "./EventInfo/EventInfo";
 import AudioContext from "@/contexts/AudioContext";
-import PanelContext from "@/contexts/PanelContext";
+import PanelContext, { usePanel } from "@/contexts/PanelContext";
 import { CaptureContext } from "@/contexts/CaptureContext";
+import { ColorPickFeedback } from "./ColorPickFeedback";
 
 console.log("Client init with version " + __COMMIT_HASH__);
 
 // get access to context data
 const AppInner = () => {
-  const { config } = useAppContext();
+  const { config, settings } = useAppContext();
+  const Panel = usePanel();
+  const keybindingsEnabled = settings.get["keybindings.enabled"];
+
+  const [uiHidden, setUiHidden] = useState(false);
+
+  useEffect(() => {
+    KeybindManager.setEnabled(keybindingsEnabled);
+  }, [keybindingsEnabled]);
+
+  useEffect(() => {
+    const toggleUi = () => setUiHidden((hidden) => !hidden);
+
+    KeybindManager.on("TOGGLE_UI", toggleUi);
+
+    return () => {
+      KeybindManager.off("TOGGLE_UI", toggleUi);
+    };
+  }, []);
+
+  useEffect(() => {
+    const toggleSettings = () =>
+      Panel.dispatch(["settings", Panel.state.settings ? undefined : true]);
+    const toggleInfo = () =>
+      Panel.dispatch(["info", Panel.state.info ? undefined : true]);
+
+    KeybindManager.on("TOGGLE_SETTINGS", toggleSettings);
+    KeybindManager.on("TOGGLE_INFO", toggleInfo);
+
+    return () => {
+      KeybindManager.off("TOGGLE_SETTINGS", toggleSettings);
+      KeybindManager.off("TOGGLE_INFO", toggleInfo);
+    };
+  }, [Panel.dispatch, Panel.state.info, Panel.state.settings]);
 
   return (
     <>
       {config && <CanvasWrapper />}
-      <div id="main-ui" className="w-screen h-svh">
+      <ColorPickFeedback />
+      <div
+        id="main-ui"
+        aria-hidden={uiHidden}
+        inert={uiHidden}
+        className={["w-screen h-svh", uiHidden && "main-ui--hidden"]
+          .filter(Boolean)
+          .join(" ")}
+      >
         <Header className="w-full" style={{ gridArea: "header" }} />
         <ToolbarWrapper
           style={{
diff --git a/packages/client/src/components/AuthErrors.tsx b/packages/client/src/components/AuthErrors.tsx
index d16c9e7..6b997a9 100644
--- a/packages/client/src/components/AuthErrors.tsx
+++ b/packages/client/src/components/AuthErrors.tsx
@@ -60,7 +60,7 @@ const BannedError = ({
 }) => {
   return (
     <Modal isOpen={isOpen} onClose={onClose} isDismissable={false}>
-      <ModalContent>
+      <ModalContent className="canvas-overlay-card">
         {(_onClose) => (
           <>
             <ModalHeader>Login Error</ModalHeader>
@@ -109,7 +109,7 @@ const OPError = ({
 
   return (
     <Modal isOpen={isOpen} onClose={onClose} isDismissable={false}>
-      <ModalContent>
+      <ModalContent className="canvas-overlay-card">
         {(_onClose) => (
           <>
             <ModalHeader>Login Error</ModalHeader>
diff --git a/packages/client/src/components/CanvasWrapper.tsx b/packages/client/src/components/CanvasWrapper.tsx
index 56d982c..e0557d5 100644
--- a/packages/client/src/components/CanvasWrapper.tsx
+++ b/packages/client/src/components/CanvasWrapper.tsx
@@ -1,7 +1,15 @@
-import { useCallback, useContext, useEffect, useRef, useState } from "react";
+import {
+  type CSSProperties,
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
 import { CanvasCore } from "../lib/canvas";
 import { useAppContext } from "../contexts/AppContext";
 import {
+  MOUSE_LONG_PRESS_DELAY,
   PanZoomWrapper,
   RendererContext,
   type ViewportMoveEvent,
@@ -23,6 +31,10 @@ import { PaletteLib } from "../lib/palette";
 import { getRenderer } from "../lib/utils";
 import { usePanel } from "@/contexts/PanelContext";
 import { useCaptureContext } from "@/contexts/CaptureContext";
+import {
+  showColorPickFeedback,
+  showPixelPlacedFeedback,
+} from "./ColorPickFeedback";
 
 export const CanvasWrapper = () => {
   const hasMod = useHasRole("MOD");
@@ -81,7 +93,11 @@ export const CanvasWrapper = () => {
 
 const Cursor = () => {
   const { cursor } = useAppContext();
+  const PanZoom = useContext(RendererContext);
   const [color, setColor] = useState<string>();
+  const [inspectHold, setInspectHold] = useState<
+    "idle" | "holding" | "ready"
+  >("idle");
 
   useEffect(() => {
     if (typeof cursor.color === "number") {
@@ -92,20 +108,39 @@ const Cursor = () => {
     }
   }, [setColor, cursor.color]);
 
+
+  useEffect(() => {
+    const handleStart = () => setInspectHold("holding");
+    const handleReady = () => setInspectHold("ready");
+    const handleEnd = () => setInspectHold("idle");
+
+    PanZoom.on("inspectHoldStart", handleStart);
+    PanZoom.on("inspectHoldReady", handleReady);
+    PanZoom.on("inspectHoldEnd", handleEnd);
+
+    return () => {
+      PanZoom.off("inspectHoldStart", handleStart);
+      PanZoom.off("inspectHoldReady", handleReady);
+      PanZoom.off("inspectHoldEnd", handleEnd);
+    };
+  }, [PanZoom]);
   if (!color) return <></>;
 
   return (
     <div
-      className="noselect"
+      className={[
+        "noselect canvas-cursor-preview",
+        inspectHold !== "idle" && "is-inspect-holding",
+        inspectHold === "ready" && "is-inspect-ready",
+      ]
+        .filter(Boolean)
+        .join(" ")}
       style={{
-        position: "absolute",
         top: cursor.y,
         left: cursor.x,
-        backgroundColor: "#" + color,
-        width: "1px",
-        height: "1px",
-        opacity: 0.5,
-      }}
+        "--cursor-preview-color": "#" + color,
+        "--inspect-hold-duration": MOUSE_LONG_PRESS_DELAY + "ms",
+      } as CSSProperties}
     ></div>
   );
 };
@@ -233,6 +268,7 @@ const CanvasInner = () => {
       }
 
       PaletteLib.setSelectedColor(pixelColor);
+      showColorPickFeedback(clientX, clientY);
     },
     [canvas.current],
   );
@@ -240,11 +276,21 @@ const CanvasInner = () => {
   useEffect(() => {
     // ensure CanvasCore is instanciated
     canvas.current = CanvasCore.get();
+    const handlePixelPlaced = ({
+      clientX,
+      clientY,
+    }: {
+      clientX: number;
+      clientY: number;
+    }) => showPixelPlacedFeedback(clientX, clientY);
+
+    canvas.current.on("pixelPlaced", handlePixelPlaced);
     canvas.current.on("canvasReady", () => {
       console.log("[CanvasWrapper] received canvasReady");
     });
 
     return () => {
+      canvas.current?.off("pixelPlaced", handlePixelPlaced);
       canvas.current?.destroy();
     };
   }, []);
diff --git a/packages/client/src/components/Captcha/CaptchaStatusBar.tsx b/packages/client/src/components/Captcha/CaptchaStatusBar.tsx
index 90d30e1..7c8a36d 100644
--- a/packages/client/src/components/Captcha/CaptchaStatusBar.tsx
+++ b/packages/client/src/components/Captcha/CaptchaStatusBar.tsx
@@ -55,7 +55,7 @@ export const CaptchaStatusBar = () => {
         animate={{ x: status === "WORK" ? 0 : "120%" }}
         transition={{ type: "spring", stiffness: 50 }}
       >
-        <Card>
+        <Card className="canvas-overlay-card">
           <CardBody>
             <p>Captcha running...</p>
             <p className="text-sm">
diff --git a/packages/client/src/components/Chat/ChatInfoDialog.tsx b/packages/client/src/components/Chat/ChatInfoDialog.tsx
index 0d73404..cc75f4b 100644
--- a/packages/client/src/components/Chat/ChatInfoDialog.tsx
+++ b/packages/client/src/components/Chat/ChatInfoDialog.tsx
@@ -155,7 +155,7 @@ export const ChatInfoDialog = () => {
   return (
     <>
       <Modal isOpen={isOpen} onClose={onClose} isDismissable placement="center">
-        <ModalContent>
+        <ModalContent className="canvas-overlay-card">
           {(onClose) => (
             <>
               <ModalHeader>Canvas Chat</ModalHeader>
@@ -183,7 +183,7 @@ export const ChatInfoDialog = () => {
         isDismissable
         placement="center"
       >
-        <ModalContent>
+        <ModalContent className="canvas-overlay-card">
           {(onClose) => (
             <>
               <ModalHeader>Legacy Element Chat</ModalHeader>
diff --git a/packages/client/src/components/Chat/OpenChatButton.tsx b/packages/client/src/components/Chat/OpenChatButton.tsx
index 1335a73..0f06684 100644
--- a/packages/client/src/components/Chat/OpenChatButton.tsx
+++ b/packages/client/src/components/Chat/OpenChatButton.tsx
@@ -1,21 +1,35 @@
 import { type ButtonProps } from "@heroui/react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faComments } from "@fortawesome/free-solid-svg-icons";
+import { MessageCircle } from "lucide-react";
 import { useDialog } from "../../contexts/DialogContext";
 import { Button } from "../core/Button";
 
-const OpenChatButton = (props: ButtonProps) => {
+const OpenChatButton = ({
+  compact,
+  className,
+  onPress,
+  ...props
+}: ButtonProps & { compact?: boolean }) => {
   const { dispatch } = useDialog();
 
   return (
     <Button
       {...props}
-      onPress={() =>
-        dispatch({ action: "OPEN_DIALOG", dialog: { id: "CHAT_INFO" } })
+      aria-label={props["aria-label"] ?? "Chat"}
+      className={
+        compact === undefined
+          ? className
+          : `${className ? `${className} ` : ""}header-action-button${compact ? " header-action-button--compact" : ""}`
       }
+      isIconOnly={compact === undefined ? props.isIconOnly : undefined}
+      onPress={(event) => {
+        onPress?.(event);
+        dispatch({ action: "OPEN_DIALOG", dialog: { id: "CHAT_INFO" } })
+      }}
     >
-      <FontAwesomeIcon icon={faComments} />
-      <p>Chat</p>
+      <MessageCircle aria-hidden="true" size={18} />
+      {!props.isIconOnly && (
+        <p className="header-button-label header-button-label--short">Chat</p>
+      )}
     </Button>
   );
 };
diff --git a/packages/client/src/components/ColorPickFeedback.tsx b/packages/client/src/components/ColorPickFeedback.tsx
new file mode 100644
index 0000000..36adb3c
--- /dev/null
+++ b/packages/client/src/components/ColorPickFeedback.tsx
@@ -0,0 +1,81 @@
+import { useEffect, useRef, useState } from "react";
+
+const CANVAS_FEEDBACK_EVENT = "canvas-feedback";
+const FEEDBACK_DURATION = 850;
+
+interface CanvasFeedbackEventDetail {
+  clientX: number;
+  clientY: number;
+  message: string;
+}
+
+interface CanvasFeedbackState extends CanvasFeedbackEventDetail {
+  id: number;
+}
+
+const showFeedback = (message: string, clientX: number, clientY: number) => {
+  window.dispatchEvent(
+    new CustomEvent<CanvasFeedbackEventDetail>(CANVAS_FEEDBACK_EVENT, {
+      detail: { clientX, clientY, message },
+    }),
+  );
+};
+
+export const showColorPickFeedback = (clientX: number, clientY: number) =>
+  showFeedback("Color picked!", clientX, clientY);
+
+export const showPixelPlacedFeedback = (clientX: number, clientY: number) =>
+  showFeedback("Pixel placed!", clientX, clientY);
+
+export const ColorPickFeedback = () => {
+  const [feedback, setFeedback] = useState<CanvasFeedbackState[]>([]);
+  const nextId = useRef(0);
+  const hideTimers = useRef(new Set<ReturnType<typeof setTimeout>>());
+
+  useEffect(() => {
+    const handleFeedback = (event: Event) => {
+      const { clientX, clientY, message } = (
+        event as CustomEvent<CanvasFeedbackEventDetail>
+      ).detail;
+
+      nextId.current += 1;
+      const id = nextId.current;
+      setFeedback((current) => [
+        ...current,
+        { id, clientX, clientY, message },
+      ]);
+
+      const hideTimer = setTimeout(() => {
+        hideTimers.current.delete(hideTimer);
+        setFeedback((current) => current.filter((item) => item.id !== id));
+      }, FEEDBACK_DURATION);
+      hideTimers.current.add(hideTimer);
+    };
+
+    window.addEventListener(CANVAS_FEEDBACK_EVENT, handleFeedback);
+
+    return () => {
+      window.removeEventListener(CANVAS_FEEDBACK_EVENT, handleFeedback);
+      hideTimers.current.forEach((timer) => clearTimeout(timer));
+      hideTimers.current.clear();
+    };
+  }, []);
+
+  if (feedback.length === 0) return null;
+
+  return (
+    <>
+      {feedback.map((item) => (
+        <div
+          key={item.id}
+          aria-live="polite"
+          className="color-picked-feedback"
+          role="status"
+          style={{ left: item.clientX, top: item.clientY }}
+        >
+          {item.message}
+        </div>
+      ))}
+    </>
+  );
+};
diff --git a/packages/client/src/components/Debug/DebugModal.tsx b/packages/client/src/components/Debug/DebugModal.tsx
index df47c5a..fccb4e1 100644
--- a/packages/client/src/components/Debug/DebugModal.tsx
+++ b/packages/client/src/components/Debug/DebugModal.tsx
@@ -28,7 +28,7 @@ export const DebugModal = () => {
 
   return (
     <Modal isOpen={isOpen} onOpenChange={onOpenChange} placement="center">
-      <ModalContent>
+      <ModalContent className="canvas-overlay-card">
         {(onClose) => (
           <>
             <ModalHeader className="flex flex-col gap-1">
diff --git a/packages/client/src/components/DynamicModals.tsx b/packages/client/src/components/DynamicModals.tsx
index 66489c1..c43f6c0 100644
--- a/packages/client/src/components/DynamicModals.tsx
+++ b/packages/client/src/components/DynamicModals.tsx
@@ -81,7 +81,7 @@ export const DynamicModals = () => {
     <>
       {modals.map(({ id, open, modal }) => (
         <Modal key={id} isOpen={open} onClose={() => handleHideModal(id)}>
-          <ModalContent>
+          <ModalContent className="canvas-overlay-card">
             {(onClose) => (
               <>
                 <ModalHeader>{modal.title}</ModalHeader>
diff --git a/packages/client/src/components/EventInfo/EventDatesCard.tsx b/packages/client/src/components/EventInfo/EventDatesCard.tsx
index 4248b3b..6af43e6 100644
--- a/packages/client/src/components/EventInfo/EventDatesCard.tsx
+++ b/packages/client/src/components/EventInfo/EventDatesCard.tsx
@@ -20,7 +20,7 @@ export const EventDatesCard = () => {
   }
 
   return (
-    <Card>
+    <Card className="canvas-overlay-card">
       <CardBody>{state}</CardBody>
     </Card>
   );
@@ -30,7 +30,7 @@ const BeforeEvent = ({ start }: { start: number }) => {
   const { timeLeft } = useCountdown(start);
 
   return (
-    <Card>
+    <Card className="canvas-overlay-card">
       <CardBody>
         <h2 className="text-2xl font-bold text-center w-full">{EVENT_NAME}</h2>
         <h3 className="text-large text-center w-full">
@@ -45,7 +45,7 @@ const DuringEvent = ({ end }: { end: number }) => {
   const { timeLeft } = useCountdown(end);
 
   return (
-    <Card>
+    <Card className="canvas-overlay-card">
       <CardBody>
         <h2 className="text-2xl font-bold text-center w-full">{EVENT_NAME}</h2>
         <h3 className="text-large text-center w-full">
@@ -58,7 +58,7 @@ const DuringEvent = ({ end }: { end: number }) => {
 
 const AfterEvent = ({ start, end }: { start: number; end: number }) => {
   return (
-    <Card>
+    <Card className="canvas-overlay-card">
       <CardBody>
         <h2 className="text-2xl font-bold text-center w-full">{EVENT_NAME}</h2>
         <h3 className="text-large text-center w-full">
diff --git a/packages/client/src/components/EventInfo/EventDatesHeader.tsx b/packages/client/src/components/EventInfo/EventDatesHeader.tsx
index 01a5a48..0ccf0b9 100644
--- a/packages/client/src/components/EventInfo/EventDatesHeader.tsx
+++ b/packages/client/src/components/EventInfo/EventDatesHeader.tsx
@@ -1,5 +1,7 @@
 import { Card, CardBody } from "@heroui/react";
 import { formatDate } from "date-fns";
+import { type ReactNode } from "react";
+import logo from "../../assets/logo.webp";
 import { useCountdown } from "../../hooks/useCountdown";
 import { useEventDates } from "./useEventDates";
 import { EVENT_NAME } from ".";
@@ -22,28 +24,32 @@ const BeforeEvent = ({ start }: { start: number }) => {
   const { timeLeft } = useCountdown(start);
 
   return (
-    <Card>
-      <CardBody>
-        <h2 className="text-2xl font-bold text-center w-full">{EVENT_NAME}</h2>
-        <h3 className="text-large text-center w-full">
-          Starts in <span className="font-semibold">{timeLeft}</span>
-        </h3>
-      </CardBody>
-    </Card>
+    <EventHeaderCard>
+      Starts in <span className="font-semibold">{timeLeft}</span>
+    </EventHeaderCard>
   );
 };
 
 const AfterEvent = ({ start, end }: { start: number; end: number }) => {
   return (
-    <Card>
-      <CardBody>
-        <h2 className="text-2xl font-bold text-center w-full">{EVENT_NAME}</h2>
-        <h3 className="text-large text-center w-full">
-          <strong>
-            {formatDate(start, "MMM do @ h:mm a")} -{" "}
-            {formatDate(end, "MMM do @ h:mm a")}
-          </strong>
-        </h3>
+    <EventHeaderCard>
+      <strong>
+        {formatDate(start, "MMM do @ h:mm a")} -{" "}
+        {formatDate(end, "MMM do @ h:mm a")}
+      </strong>
+    </EventHeaderCard>
+  );
+};
+
+const EventHeaderCard = ({ children }: { children: ReactNode }) => {
+  return (
+    <Card className="canvas-overlay-card event-dates-header-card">
+      <CardBody className="event-dates-header-card-body">
+        <img className="event-dates-header-logo" src={logo} alt="" />
+        <div className="event-dates-header-copy">
+          <h2>{EVENT_NAME}</h2>
+          <h3>{children}</h3>
+        </div>
       </CardBody>
     </Card>
   );
diff --git a/packages/client/src/components/EventInfo/EventInfo.tsx b/packages/client/src/components/EventInfo/EventInfo.tsx
index 0c0471c..84b283c 100644
--- a/packages/client/src/components/EventInfo/EventInfo.tsx
+++ b/packages/client/src/components/EventInfo/EventInfo.tsx
@@ -2,7 +2,6 @@ import { useDialog } from "@/contexts/DialogContext";
 import {
   Alert,
   Badge,
-  Button,
   Link,
   Modal,
   ModalBody,
@@ -21,6 +20,7 @@ import { WithLogin } from "../Login/LoginButton";
 import { useCallback, useEffect, useReducer, useState } from "react";
 import network from "@/lib/network";
 import OpenChatButton from "../Chat/OpenChatButton";
+import { Button } from "../core/Button";
 
 export const EventInfoModal = () => {
   const Dialogs = useDialog();
@@ -38,7 +38,7 @@ export const EventInfoModal = () => {
       isDismissable={false}
       placement="center"
     >
-      <ModalContent>
+      <ModalContent className="canvas-overlay-card">
         {(onClose) => (
           <>
             <ModalHeader>Canvas 2026</ModalHeader>
diff --git a/packages/client/src/components/EventInfoOverlay.tsx b/packages/client/src/components/EventInfoOverlay.tsx
index b1047ac..d082fc8 100644
--- a/packages/client/src/components/EventInfoOverlay.tsx
+++ b/packages/client/src/components/EventInfoOverlay.tsx
@@ -32,8 +32,25 @@ export const EventInfoOverlay = () => {
         <Button as={Link} href="https://sc07.shop" color="primary">
           Shop (poster prints!)
         </Button>
-        <Button onPress={() => Panel.dispatch(["info", true])}>Info</Button>
-        <Button onPress={() => Panel.dispatch(["settings", true])}>
+        <Button
+          aria-pressed={Boolean(Panel.state.info)}
+          className={Panel.state.info ? "is-active" : undefined}
+          onPress={() =>
+            Panel.dispatch(["info", Panel.state.info ? undefined : true])
+          }
+        >
+          Info
+        </Button>
+        <Button
+          aria-pressed={Boolean(Panel.state.settings)}
+          className={Panel.state.settings ? "is-active" : undefined}
+          onPress={() =>
+            Panel.dispatch([
+              "settings",
+              Panel.state.settings ? undefined : true,
+            ])
+          }
+        >
           Settings
         </Button>
       </div>
diff --git a/packages/client/src/components/Header/AccountStanding.tsx b/packages/client/src/components/Header/AccountStanding.tsx
index 574e5d8..f009c4b 100644
--- a/packages/client/src/components/Header/AccountStanding.tsx
+++ b/packages/client/src/components/Header/AccountStanding.tsx
@@ -44,7 +44,7 @@ export const AccountStanding = () => {
       )}
 
       <Modal isOpen={standingInfo} onClose={() => setStandingInfo(false)}>
-        <ModalContent>
+        <ModalContent className="canvas-overlay-card">
           {(onClose) => (
             <>
               <ModalHeader>Account Standing</ModalHeader>
diff --git a/packages/client/src/components/Header/Header.tsx b/packages/client/src/components/Header/Header.tsx
index 9188f9f..6584562 100644
--- a/packages/client/src/components/Header/Header.tsx
+++ b/packages/client/src/components/Header/Header.tsx
@@ -15,7 +15,7 @@ export const Header = ({ ...props }: React.HTMLProps<HTMLElement>) => {
         <HeaderLeft />
         {!connected && (
           <div>
-            <Card>
+            <Card className="canvas-overlay-card">
               <CardBody>Disconnected</CardBody>
             </Card>
           </div>
diff --git a/packages/client/src/components/Header/HeaderLeft.tsx b/packages/client/src/components/Header/HeaderLeft.tsx
index 90ae71b..d3c8f05 100644
--- a/packages/client/src/components/Header/HeaderLeft.tsx
+++ b/packages/client/src/components/Header/HeaderLeft.tsx
@@ -1,30 +1,66 @@
 import { AccountStanding } from "./AccountStanding";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Debug } from "@sc07-canvas/lib/debug";
-import { faInfoCircle, faTools } from "@fortawesome/free-solid-svg-icons";
+import { Info, Wrench } from "lucide-react";
 import { EventDatesHeader } from "../EventInfo";
 import { Button } from "../core/Button";
 import { usePanel } from "@/contexts/PanelContext";
+import { motion, useReducedMotion } from "framer-motion";
+import { useAppContext } from "@/contexts/AppContext";
+import { SIDEBAR_SPRING } from "../SidebarBase";
+import { useSidebarWidth } from "./useSidebarWidth";
+import { useIsMobile } from "../../hooks/useIsMobile";
 
 export const HeaderLeft = () => {
   const Panel = usePanel();
+  const { settings } = useAppContext();
+  const compactButtons = settings.get["ui.compactButtons"];
+  const reduceMotion = useReducedMotion() ?? false;
+  const sidebarWidth = useSidebarWidth("Left");
+  const isMobile = useIsMobile();
+  const offsetForSidebar = Boolean(
+    !isMobile &&
+      Panel.state.info &&
+      settings.get["ui.adaptElementsToSidebar"],
+  );
 
   return (
-    <div className="box gap-2 flex flex-col">
+    <motion.div
+      animate={{ x: offsetForSidebar ? sidebarWidth : 0 }}
+      className="header-left box gap-2 flex flex-col"
+      transition={reduceMotion ? { duration: 0 } : SIDEBAR_SPRING}
+    >
       <EventDatesHeader />
       <div className="gap-2 flex">
         <AccountStanding />
-        <Button onPress={() => Panel.dispatch(["info", true])}>
-          <FontAwesomeIcon icon={faInfoCircle} />
-          <p>Info</p>
+        <Button
+          aria-label="Info"
+          aria-pressed={Boolean(Panel.state.info)}
+          className={[
+            "header-mobile-overflow-action",
+            "header-action-button",
+            compactButtons && "header-action-button--compact",
+            Panel.state.info && "is-active",
+          ]
+            .filter(Boolean)
+            .join(" ")}
+          onPress={() =>
+            Panel.dispatch(["info", Panel.state.info ? undefined : true])
+          }
+        >
+          <Info aria-hidden="true" size={18} />
+          <p className="header-button-label header-button-label--short">Info</p>
         </Button>
         {import.meta.env.DEV && (
-          <Button onPress={() => Debug.openDebugTools()}>
-            <FontAwesomeIcon icon={faTools} />
-            <p>Debug Tools</p>
+          <Button
+            aria-label="Debug Tools"
+            className={`header-mobile-overflow-action header-action-button${compactButtons ? " header-action-button--compact" : ""}`}
+            onPress={() => Debug.openDebugTools()}
+          >
+            <Wrench aria-hidden="true" size={18} />
+            <p className="header-button-label">Debug Tools</p>
           </Button>
         )}
       </div>
-    </div>
+    </motion.div>
   );
 };
diff --git a/packages/client/src/components/Header/HeaderRight.tsx b/packages/client/src/components/Header/HeaderRight.tsx
index e8d7c92..f1db36b 100644
--- a/packages/client/src/components/Header/HeaderRight.tsx
+++ b/packages/client/src/components/Header/HeaderRight.tsx
@@ -1,34 +1,52 @@
 import { Link } from "@heroui/react";
-import { useAppContext } from "../../contexts/AppContext";
-import { User } from "./User";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { ThemeSwitcher } from "./ThemeSwitcher";
-import {
-  faBorderAll,
-  faCamera,
-  faChevronDown,
-  faCropSimple,
-  faEye,
-  faCog,
-  faGear,
-  faHammer,
-  faDrawPolygon,
-  faShare,
-} from "@fortawesome/free-solid-svg-icons";
 import { useEffect, useRef, useState } from "react";
-import { useHasRole } from "../../hooks/useHasRole";
-import { useModerator } from "../../Moderator/Moderator";
-import { Button } from "../core/Button";
+import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
+import {
+  ChevronDown,
+  Cog,
+  Crop,
+  Ellipsis,
+  Eye,
+  Grid2x2,
+  Hammer,
+  Info,
+  Scan,
+  Settings,
+  Share2,
+  Wrench,
+} from "lucide-react";
+
+import { Debug } from "@sc07-canvas/lib/debug";
+
+import { useDialog } from "@/contexts/DialogContext";
 import { usePanel } from "@/contexts/PanelContext";
 import { useCaptureContext } from "@/contexts/CaptureContext";
-import { AnimatePresence, motion } from "framer-motion";
-import { useDialog } from "@/contexts/DialogContext";
+import { useHasRole } from "../../hooks/useHasRole";
+import { useModerator } from "../../Moderator/Moderator";
 import OpenChatButton from "../Chat/OpenChatButton";
+import { Button } from "../core/Button";
+import { ThemeSwitcher } from "./ThemeSwitcher";
+import { User } from "./User";
+import { useAppContext } from "@/contexts/AppContext";
+import { SIDEBAR_SPRING } from "../SidebarBase";
+import { useSidebarWidth } from "./useSidebarWidth";
+import { useIsMobile } from "../../hooks/useIsMobile";
 
 export const HeaderRight = () => {
-  const { dispatch } = useModerator();
+  const reduceMotion = useReducedMotion() ?? false;
+  const { state: moderatorState, dispatch } = useModerator();
   const Panel = usePanel();
   const Dialog = useDialog();
+  const { settings } = useAppContext();
+  const compactButtons = settings.get["ui.compactButtons"];
+  const headerActionClass = `header-action-button${compactButtons ? " header-action-button--compact" : ""}`;
+  const sidebarWidth = useSidebarWidth("Right");
+  const isMobile = useIsMobile();
+  const offsetForSidebar = Boolean(
+    !isMobile &&
+      (Panel.state.settings || Panel.state.whois) &&
+      settings.get["ui.adaptElementsToSidebar"],
+  );
   const {
     captureCanvas,
     captureView,
@@ -39,23 +57,30 @@ export const HeaderRight = () => {
   const hasAdmin = useHasRole("ADMIN");
   const hasMod = useHasRole("MOD");
   const captureMenuRef = useRef<HTMLDivElement | null>(null);
+  const moreMenuRef = useRef<HTMLDivElement | null>(null);
   const [captureMenuOpen, setCaptureMenuOpen] = useState(false);
+  const [moreMenuOpen, setMoreMenuOpen] = useState(false);
 
   useEffect(() => {
-    if (!captureMenuOpen) return;
+    if (!captureMenuOpen && !moreMenuOpen) return;
 
     const handlePointerDown = (event: PointerEvent) => {
       if (
         event.target instanceof Node &&
-        captureMenuRef.current?.contains(event.target)
+        (captureMenuRef.current?.contains(event.target) ||
+          moreMenuRef.current?.contains(event.target))
       ) {
         return;
       }
 
       setCaptureMenuOpen(false);
+      setMoreMenuOpen(false);
     };
     const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key === "Escape") setCaptureMenuOpen(false);
+      if (event.key === "Escape") {
+        setCaptureMenuOpen(false);
+        setMoreMenuOpen(false);
+      }
     };
 
     window.addEventListener("pointerdown", handlePointerDown);
@@ -65,7 +90,7 @@ export const HeaderRight = () => {
       window.removeEventListener("pointerdown", handlePointerDown);
       window.removeEventListener("keydown", handleKeyDown);
     };
-  }, [captureMenuOpen]);
+  }, [captureMenuOpen, moreMenuOpen]);
 
   const handleCaptureCanvas = () => {
     setCaptureMenuOpen(false);
@@ -88,21 +113,33 @@ export const HeaderRight = () => {
   };
 
   return (
-    <div className="box flex flex-col gap-2">
+    <motion.div
+      animate={{ x: offsetForSidebar ? -sidebarWidth : 0 }}
+      className="header-right box flex flex-col gap-2"
+      transition={reduceMotion ? { duration: 0 } : SIDEBAR_SPRING}
+    >
       <User />
-      <div className="flex gap-2">
+      <div className="header-right-actions flex gap-2">
         <div ref={captureMenuRef} className="relative">
           <Button
+            aria-label="Share"
             aria-expanded={captureMenuOpen}
             aria-haspopup="menu"
-            onPress={() => setCaptureMenuOpen((open) => !open)}
+            className={headerActionClass}
+            onPress={() => {
+              setMoreMenuOpen(false);
+              setCaptureMenuOpen((open) => !open);
+            }}
           >
-            <FontAwesomeIcon icon={faCamera} />
-            <p>Share</p>
-            <FontAwesomeIcon
-              className={`transition-transform ${captureMenuOpen ? "rotate-180" : ""}`}
-              icon={faChevronDown}
-            />
+            <Share2 aria-hidden="true" size={18} />
+            <span className="header-button-label header-button-label--share">
+              <span>Share</span>
+              <ChevronDown
+                aria-hidden="true"
+                className={`transition-transform motion-reduce:transition-none ${captureMenuOpen ? "rotate-180" : ""}`}
+                size={16}
+              />
+            </span>
           </Button>
           <AnimatePresence>
             {captureMenuOpen && (
@@ -113,7 +150,7 @@ export const HeaderRight = () => {
                 exit={{ opacity: 0, scale: 0.98, y: -4 }}
                 initial={{ opacity: 0, scale: 0.98, y: -4 }}
                 role="menu"
-                transition={{ duration: 0.14 }}
+                transition={{ duration: reduceMotion ? 0 : 0.14 }}
               >
                 <Button
                   className="justify-start"
@@ -126,7 +163,7 @@ export const HeaderRight = () => {
                   role="menuitem"
                   size="sm"
                 >
-                  <FontAwesomeIcon icon={faShare} />
+                  <Share2 aria-hidden="true" size={16} />
                   <p>Share Link</p>
                 </Button>
                 <Button
@@ -135,7 +172,7 @@ export const HeaderRight = () => {
                   role="menuitem"
                   size="sm"
                 >
-                  <FontAwesomeIcon icon={faBorderAll} />
+                  <Grid2x2 aria-hidden="true" size={16} />
                   <p>Capture Canvas</p>
                 </Button>
                 <Button
@@ -144,7 +181,7 @@ export const HeaderRight = () => {
                   role="menuitem"
                   size="sm"
                 >
-                  <FontAwesomeIcon icon={faEye} />
+                  <Eye aria-hidden="true" size={16} />
                   <p>Capture View</p>
                 </Button>
                 <Button
@@ -153,7 +190,7 @@ export const HeaderRight = () => {
                   role="menuitem"
                   size="sm"
                 >
-                  <FontAwesomeIcon icon={faDrawPolygon} />
+                  <Scan aria-hidden="true" size={16} />
                   <p>Capture Region</p>
                 </Button>
                 {hasTemplateCapture && (
@@ -163,7 +200,7 @@ export const HeaderRight = () => {
                     role="menuitem"
                     size="sm"
                   >
-                    <FontAwesomeIcon icon={faCropSimple} />
+                    <Crop aria-hidden="true" size={16} />
                     <p>Capture Template Area</p>
                   </Button>
                 )}
@@ -172,28 +209,165 @@ export const HeaderRight = () => {
           </AnimatePresence>
         </div>
         <Button
+          aria-label="Settings"
+          aria-pressed={Boolean(Panel.state.settings)}
+          className={`header-mobile-overflow-action ${headerActionClass}${Panel.state.settings ? " is-active" : ""}`}
           onPress={() => {
-            Panel.dispatch(["settings", true]);
+            Panel.dispatch([
+              "settings",
+              Panel.state.settings ? undefined : true,
+            ]);
           }}
         >
-          <FontAwesomeIcon icon={faGear} />
-          <p>Settings</p>
+          <Settings aria-hidden="true" size={18} />
+          <p className="header-button-label">Settings</p>
         </Button>
-        <ThemeSwitcher />
-        {hasMod && (
-          <Button onPress={() => dispatch({ action: "OPEN_MENU" })}>
-            <FontAwesomeIcon icon={faHammer} />
-            <p>Mod</p>
-          </Button>
-        )}
-        {(hasAdmin || hasMod) && (
-          <Button href="/admin" target="_blank" as={Link}>
-            <FontAwesomeIcon icon={faCog} />
-            <p>Admin</p>
+        <div className="header-lower-priority">
+          {settings.get["ui.showThemeToggle"] && (
+            <ThemeSwitcher compact={compactButtons} />
+          )}
+          {hasMod && (
+            <Button
+              aria-pressed={Boolean(
+                moderatorState.showMenu || moderatorState.inspectUser,
+              )}
+              className={
+                moderatorState.showMenu || moderatorState.inspectUser
+                  ? "is-active"
+                  : undefined
+              }
+              onPress={() => dispatch({ action: "OPEN_MENU" })}
+            >
+              <Hammer aria-hidden="true" size={18} />
+              <p>Mod</p>
+            </Button>
+          )}
+          {(hasAdmin || hasMod) && (
+            <Button href="/admin" target="_blank" as={Link}>
+              <Cog aria-hidden="true" size={18} />
+              <p>Admin</p>
+            </Button>
+          )}
+          <OpenChatButton compact={compactButtons} />
+        </div>
+        <div ref={moreMenuRef} className="header-more-menu relative">
+          <Button
+            aria-expanded={moreMenuOpen}
+            aria-haspopup="menu"
+            aria-label="More"
+            className={`${headerActionClass}${moreMenuOpen ? " is-active" : ""}`}
+            onPress={() => {
+              setCaptureMenuOpen(false);
+              setMoreMenuOpen((open) => !open);
+            }}
+          >
+            <Ellipsis aria-hidden="true" size={18} />
+            <p className="header-button-label header-button-label--short">More</p>
           </Button>
-        )}
-        <OpenChatButton />
+          <AnimatePresence>
+            {moreMenuOpen && (
+              <motion.div
+                animate={{ opacity: 1, scale: 1, y: 0 }}
+                aria-label="More actions"
+                className="absolute right-0 top-[calc(100%+0.5rem)] z-50 flex min-w-52 flex-col gap-1"
+                exit={{ opacity: 0, scale: 0.98, y: -4 }}
+                initial={{ opacity: 0, scale: 0.98, y: -4 }}
+                role="menu"
+                transition={{ duration: reduceMotion ? 0 : 0.14 }}
+              >
+                <Button
+                  aria-pressed={Boolean(Panel.state.info)}
+                  className="header-mobile-only-action justify-start"
+                  onPress={() => {
+                    setMoreMenuOpen(false);
+                    Panel.dispatch([
+                      "info",
+                      Panel.state.info ? undefined : true,
+                    ]);
+                  }}
+                  role="menuitem"
+                  size="sm"
+                >
+                  <Info aria-hidden="true" size={16} />
+                  <p>Info</p>
+                </Button>
+                {import.meta.env.DEV && (
+                  <Button
+                    className="header-mobile-only-action justify-start"
+                    onPress={() => {
+                      setMoreMenuOpen(false);
+                      Debug.openDebugTools();
+                    }}
+                    role="menuitem"
+                    size="sm"
+                  >
+                    <Wrench aria-hidden="true" size={16} />
+                    <p>Debug Tools</p>
+                  </Button>
+                )}
+                <Button
+                  aria-pressed={Boolean(Panel.state.settings)}
+                  className="header-mobile-only-action justify-start"
+                  onPress={() => {
+                    setMoreMenuOpen(false);
+                    Panel.dispatch([
+                      "settings",
+                      Panel.state.settings ? undefined : true,
+                    ]);
+                  }}
+                  role="menuitem"
+                  size="sm"
+                >
+                  <Settings aria-hidden="true" size={16} />
+                  <p>Settings</p>
+                </Button>
+                {settings.get["ui.showThemeToggle"] && (
+                  <ThemeSwitcher
+                    className="justify-start"
+                    onPress={() => setMoreMenuOpen(false)}
+                    role="menuitem"
+                    size="sm"
+                  />
+                )}
+                <OpenChatButton
+                  className="justify-start"
+                  onPress={() => setMoreMenuOpen(false)}
+                  role="menuitem"
+                  size="sm"
+                />
+                {hasMod && (
+                  <Button
+                    className="justify-start"
+                    onPress={() => {
+                      setMoreMenuOpen(false);
+                      dispatch({ action: "OPEN_MENU" });
+                    }}
+                    role="menuitem"
+                    size="sm"
+                  >
+                    <Hammer aria-hidden="true" size={16} />
+                    <p>Mod</p>
+                  </Button>
+                )}
+                {(hasAdmin || hasMod) && (
+                  <Button
+                    as={Link}
+                    className="justify-start"
+                    href="/admin"
+                    onPress={() => setMoreMenuOpen(false)}
+                    role="menuitem"
+                    size="sm"
+                    target="_blank"
+                  >
+                    <Cog aria-hidden="true" size={16} />
+                    <p>Admin</p>
+                  </Button>
+                )}
+              </motion.div>
+            )}
+          </AnimatePresence>
+        </div>
       </div>
-    </div>
+    </motion.div>
   );
 };
diff --git a/packages/client/src/components/Header/ThemeSwitcher.tsx b/packages/client/src/components/Header/ThemeSwitcher.tsx
index 2898878..c48138b 100644
--- a/packages/client/src/components/Header/ThemeSwitcher.tsx
+++ b/packages/client/src/components/Header/ThemeSwitcher.tsx
@@ -1,10 +1,15 @@
 import { useTheme } from "next-themes";
 import { useEffect, useState } from "react";
 import { Button } from "../core/Button";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faMoon, faSun } from "@fortawesome/free-solid-svg-icons";
+import { Moon, Sun } from "lucide-react";
+import { type ButtonProps } from "@heroui/react";
 
-export function ThemeSwitcher() {
+export function ThemeSwitcher({
+  compact,
+  className,
+  onPress,
+  ...props
+}: ButtonProps & { compact?: boolean }) {
   const [mounted, setMounted] = useState(false);
   const { theme, setTheme } = useTheme();
   const [isToggled, setToggle] = useState(false);
@@ -26,12 +31,22 @@ export function ThemeSwitcher() {
 
   return (
     <Button
-      onPress={() => {
+      {...props}
+      aria-label={theme === "dark" ? "Dark theme" : "Light theme"}
+      className={
+        compact === undefined
+          ? className
+          : `${className ? `${className} ` : ""}header-action-button${compact ? " header-action-button--compact" : ""}`
+      }
+      onPress={(event) => {
+        onPress?.(event);
         setToggle(!isToggled);
       }}
     >
-      <FontAwesomeIcon icon={theme === "dark" ? faMoon : faSun} />
-      <p>{theme === "dark" ? "Dark" : "Light"}</p>
+      {theme === "dark" ? <Moon aria-hidden="true" size={18} /> : <Sun aria-hidden="true" size={18} />}
+      <p className="header-button-label header-button-label--medium">
+        {theme === "dark" ? "Dark" : "Light"}
+      </p>
     </Button>
   );
 }
diff --git a/packages/client/src/components/Header/User.tsx b/packages/client/src/components/Header/User.tsx
index ee9d6e2..0ab97c2 100644
--- a/packages/client/src/components/Header/User.tsx
+++ b/packages/client/src/components/Header/User.tsx
@@ -5,11 +5,16 @@ export const User = () => {
   const { user } = useAppContext();
 
   return user ? (
-    <Card>
+    <Card className="header-user-card canvas-overlay-card min-w-[14rem]">
       <UserElement
         name={user.user.display_name || user.user.username}
         description={user.service.instance.hostname}
+        classNames={{
+          name: "header-user-name",
+          description: "header-user-description",
+        }}
         avatarProps={{
+          className: "header-user-avatar",
           showFallback: true,
           name: undefined,
           src: user.user.picture_url
diff --git a/packages/client/src/components/Header/useSidebarWidth.ts b/packages/client/src/components/Header/useSidebarWidth.ts
new file mode 100644
index 0000000..5c3f092
--- /dev/null
+++ b/packages/client/src/components/Header/useSidebarWidth.ts
@@ -0,0 +1,24 @@
+import { useEffect, useState } from "react";
+
+export const useSidebarWidth = (side: "Left" | "Right") => {
+  const [width, setWidth] = useState(0);
+
+  useEffect(() => {
+    const sidebar = document.querySelector<HTMLElement>(
+      `[data-sidebar-side="${side}"]`,
+    );
+    if (!sidebar) return;
+
+    const updateWidth = () => setWidth(sidebar.getBoundingClientRect().width);
+    updateWidth();
+
+    const observer = new ResizeObserver(updateWidth);
+    observer.observe(sidebar);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [side]);
+
+  return width;
+};
diff --git a/packages/client/src/components/Info/InfoCommunity.tsx b/packages/client/src/components/Info/InfoCommunity.tsx
index 8384445..e930c0c 100644
--- a/packages/client/src/components/Info/InfoCommunity.tsx
+++ b/packages/client/src/components/Info/InfoCommunity.tsx
@@ -1,31 +1,75 @@
-import { faUserGroup } from "@fortawesome/free-solid-svg-icons";
+import { Globe2, Users } from "lucide-react";
 import { Link } from "@heroui/react";
 import { InfoSection } from "./components/InfoSection";
+import { useState } from "react";
+
+const SiteFavicon = ({ sources }: { sources: string[] }) => {
+  const [sourceIndex, setSourceIndex] = useState(0);
+  const source = sources[sourceIndex];
+
+  if (!source) {
+    return (
+      <Globe2
+        aria-hidden="true"
+        className="size-4 shrink-0 text-default-500"
+      />
+    );
+  }
+
+  return (
+    <img
+      alt=""
+      aria-hidden="true"
+      className="size-4 shrink-0 rounded-[3px]"
+      decoding="async"
+      loading="lazy"
+      src={source}
+      onError={() => setSourceIndex((index) => index + 1)}
+    />
+  );
+};
 
 export const InfoCommunity = () => {
   return (
-    <InfoSection icon={faUserGroup} title="Community Links">
+    <InfoSection icon={Users} title="Community Links">
       <ul className="list-disc text-default-800 ml-10 flex flex-col gap-1 *:*:not-last:mr-1">
         <li>
-          <Link href="https://canvasstats.com" target="_blank">
+          <Link
+            className="inline-flex items-center gap-1.5"
+            href="https://canvasstats.com"
+            target="_blank"
+          >
+            <SiteFavicon
+              sources={[
+                "https://raw.githubusercontent.com/CanvasStats/main/cb3fac2a0a08dcd846a53e0946a85ece3e2807bf/public/icon.svg",
+              ]}
+            />
             CanvasStats.com
           </Link>
           <small>(@the_real_monte@sh.itjust.works)</small>
         </li>
         <li>
           <Link
+            className="inline-flex items-center gap-1.5"
             href="https://chocolatecakecodes.goip.de/cotemplate/ui/template/20260520-Canvas26_main"
             target="_blank"
           >
+            <SiteFavicon sources={[]} />
             CoTemplate
           </Link>
           <small>(@blued_gear@fedia.io)</small>
         </li>
         <li>
           <Link
+            className="inline-flex items-center gap-1.5"
             href="https://2025.canvas-atlas.fediverse.events"
             target="_blank"
           >
+            <SiteFavicon
+              sources={[
+                "https://2025.canvas-atlas.fediverse.events/_img/canvas-log-low-res.png",
+              ]}
+            />
             2025 Canvas Atlas
           </Link>
         </li>
diff --git a/packages/client/src/components/Info/InfoFAQ.tsx b/packages/client/src/components/Info/InfoFAQ.tsx
index 3818fa6..793b253 100644
--- a/packages/client/src/components/Info/InfoFAQ.tsx
+++ b/packages/client/src/components/Info/InfoFAQ.tsx
@@ -1,9 +1,9 @@
-import { faQuestionCircle } from "@fortawesome/free-solid-svg-icons";
+import { CircleQuestionMark } from "lucide-react";
 import { InfoSection } from "./components/InfoSection";
 
 export const InfoFAQ = () => {
   return (
-    <InfoSection icon={faQuestionCircle} title="FAQ">
+    <InfoSection icon={CircleQuestionMark} title="FAQ">
       <ul className="list-disc text-default-800 ml-10 flex flex-col gap-1">
         <li>
           <p>Why are my pixels misaligned?</p>
diff --git a/packages/client/src/components/Info/InfoPrivacy.tsx b/packages/client/src/components/Info/InfoPrivacy.tsx
index da92f95..0556518 100644
--- a/packages/client/src/components/Info/InfoPrivacy.tsx
+++ b/packages/client/src/components/Info/InfoPrivacy.tsx
@@ -1,10 +1,10 @@
-import { faShieldHalved } from "@fortawesome/free-solid-svg-icons";
+import { Shield } from "lucide-react";
 import { Link } from "@heroui/react";
 import { InfoSection } from "./components/InfoSection";
 
 export const InfoPrivacy = () => {
   return (
-    <InfoSection icon={faShieldHalved} title="Privacy">
+    <InfoSection icon={Shield} title="Privacy">
       <ul className="list-disc text-default-800 ml-10 flex flex-col gap-1">
         <li>
           <Link href="https://www.npmjs.com/package/altcha-lib" target="_blank">
diff --git a/packages/client/src/components/Info/InfoRules.tsx b/packages/client/src/components/Info/InfoRules.tsx
index 35c719e..a4e76d9 100644
--- a/packages/client/src/components/Info/InfoRules.tsx
+++ b/packages/client/src/components/Info/InfoRules.tsx
@@ -1,4 +1,4 @@
-import { faGavel } from "@fortawesome/free-solid-svg-icons";
+import { Gavel } from "lucide-react";
 import { type IRule } from "./InfoText";
 import useSWR from "swr";
 import { InfoSection } from "./components/InfoSection";
@@ -11,7 +11,7 @@ export const InfoRules = () => {
   } = useSWR<{ rules: IRule[] }>("/api/info");
 
   return (
-    <InfoSection icon={faGavel} title="Rules">
+    <InfoSection icon={Gavel} title="Rules">
       {isLoading
         ? "Loading"
         : error || (
diff --git a/packages/client/src/components/Info/InfoSidebar.tsx b/packages/client/src/components/Info/InfoSidebar.tsx
index 42cd0ff..a2aa63b 100644
--- a/packages/client/src/components/Info/InfoSidebar.tsx
+++ b/packages/client/src/components/Info/InfoSidebar.tsx
@@ -1,7 +1,7 @@
 import { InfoText } from "./InfoText";
 import { InfoButtons } from "./InfoButtons";
 import { SidebarBase } from "../SidebarBase";
-import { faInfoCircle } from "@fortawesome/free-solid-svg-icons";
+import { Info } from "lucide-react";
 import { usePanel } from "@/contexts/PanelContext";
 
 /**
@@ -18,7 +18,7 @@ export const InfoSidebar = () => {
     <SidebarBase
       shown={Boolean(state.info)}
       setSidebarShown={() => dispatch(["info", undefined])}
-      icon={faInfoCircle}
+      icon={Info}
       title="Info"
       description="Information about the event"
       side="Left"
diff --git a/packages/client/src/components/Info/InfoWelcome.tsx b/packages/client/src/components/Info/InfoWelcome.tsx
index b1b1698..44b7b03 100644
--- a/packages/client/src/components/Info/InfoWelcome.tsx
+++ b/packages/client/src/components/Info/InfoWelcome.tsx
@@ -1,11 +1,10 @@
-import { faFire } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Flame } from "lucide-react";
 
 export const InfoWelcome = () => {
   return (
     <div className="flex flex-col gap-2">
       <header className="flex items-center gap-1">
-        <FontAwesomeIcon icon={faFire} className="pt-0.5" />
+        <Flame aria-hidden="true" className="pt-0.5" size={18} />
         <h2 className="text-xl font-semibold">Welcome</h2>
       </header>
       <section>
diff --git a/packages/client/src/components/Info/buttons/Discord.tsx b/packages/client/src/components/Info/buttons/Discord.tsx
index 2246c17..23ef4ca 100644
--- a/packages/client/src/components/Info/buttons/Discord.tsx
+++ b/packages/client/src/components/Info/buttons/Discord.tsx
@@ -1,6 +1,7 @@
-import { Button, Link } from "@heroui/react";
+import { Link } from "@heroui/react";
 import { DISCORD_INVITE } from "../../../lib/constants";
 import { SiDiscord } from "@icons-pack/react-simple-icons";
+import { Button } from "../../core/Button";
 
 export const DiscordButton = () => {
   return (
diff --git a/packages/client/src/components/Info/buttons/Lemmy.tsx b/packages/client/src/components/Info/buttons/Lemmy.tsx
index d7021b7..a88207d 100644
--- a/packages/client/src/components/Info/buttons/Lemmy.tsx
+++ b/packages/client/src/components/Info/buttons/Lemmy.tsx
@@ -1,5 +1,6 @@
 import { SiLemmy } from "@icons-pack/react-simple-icons";
-import { Button, Link } from "@heroui/react";
+import { Link } from "@heroui/react";
+import { Button } from "../../core/Button";
 
 export const LemmyButton = () => {
   return (
diff --git a/packages/client/src/components/Info/buttons/Mastodon.tsx b/packages/client/src/components/Info/buttons/Mastodon.tsx
index 9605df7..257b3cf 100644
--- a/packages/client/src/components/Info/buttons/Mastodon.tsx
+++ b/packages/client/src/components/Info/buttons/Mastodon.tsx
@@ -1,5 +1,6 @@
 import { SiMastodon } from "@icons-pack/react-simple-icons";
-import { Button, Link } from "@heroui/react";
+import { Link } from "@heroui/react";
+import { Button } from "../../core/Button";
 
 export const MastodonButton = () => {
   return (
diff --git a/packages/client/src/components/Info/buttons/Matrix.tsx b/packages/client/src/components/Info/buttons/Matrix.tsx
index ef670f6..019ee7e 100644
--- a/packages/client/src/components/Info/buttons/Matrix.tsx
+++ b/packages/client/src/components/Info/buttons/Matrix.tsx
@@ -1,6 +1,7 @@
-import { Button, Link } from "@heroui/react";
+import { Link } from "@heroui/react";
 import { MATRIX_INVITE } from "../../../lib/constants";
 import { SiMatrix } from "@icons-pack/react-simple-icons";
+import { Button } from "../../core/Button";
 
 export const MatrixButton = () => {
   return (
diff --git a/packages/client/src/components/Info/buttons/Tip.tsx b/packages/client/src/components/Info/buttons/Tip.tsx
index 1a6743c..1bb5576 100644
--- a/packages/client/src/components/Info/buttons/Tip.tsx
+++ b/packages/client/src/components/Info/buttons/Tip.tsx
@@ -1,6 +1,6 @@
-import { faDollarSign } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { Button, type ButtonProps, Link } from "@heroui/react";
+import { DollarSign } from "lucide-react";
+import { type ButtonProps, Link } from "@heroui/react";
+import { Button } from "../../core/Button";
 
 export const TipButton = ({
   size,
@@ -19,10 +19,7 @@ export const TipButton = ({
       color="success"
       {...props}
     >
-      <FontAwesomeIcon
-        icon={faDollarSign}
-        style={{ fontSize: iconFontSize ?? 16 }}
-      />
+      <DollarSign aria-hidden="true" size={iconFontSize ?? 16} />
       <p>Tip Jar</p>
     </Button>
   );
diff --git a/packages/client/src/components/Info/components/InfoSection.tsx b/packages/client/src/components/Info/components/InfoSection.tsx
index 421454b..e2dc596 100644
--- a/packages/client/src/components/Info/components/InfoSection.tsx
+++ b/packages/client/src/components/Info/components/InfoSection.tsx
@@ -1,19 +1,18 @@
-import type { IconDefinition } from "@fortawesome/fontawesome-svg-core";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { type LucideIcon } from "lucide-react";
 import type React from "react";
 
 export const InfoSection = ({
-  icon,
+  icon: Icon,
   title,
   children,
-}: React.PropsWithChildren<{ icon: IconDefinition; title: string }>) => {
+}: React.PropsWithChildren<{ icon: LucideIcon; title: string }>) => {
   return (
     <div className="flex flex-col gap-2">
       <header className="flex items-center gap-1">
-        <FontAwesomeIcon icon={icon} className="pt-0.5" />
+        <Icon aria-hidden="true" className="pt-0.5" size={18} />
         <h2 className="text-xl font-semibold">{title}</h2>
       </header>
       <section>{children}</section>
     </div>
   );
-};
+};
\ No newline at end of file
diff --git a/packages/client/src/components/KeybindModal.tsx b/packages/client/src/components/KeybindModal.tsx
index a7268bb..0840aa9 100644
--- a/packages/client/src/components/KeybindModal.tsx
+++ b/packages/client/src/components/KeybindModal.tsx
@@ -49,7 +49,7 @@ export const KeybindModal = () => {
       }
       placement="center"
     >
-      <ModalContent>
+      <ModalContent className="canvas-overlay-card">
         {(onClose) => (
           <>
             <ModalHeader className="flex flex-col gap-1">Keybinds</ModalHeader>
diff --git a/packages/client/src/components/Login/LoginButton.tsx b/packages/client/src/components/Login/LoginButton.tsx
index 1e75ee3..20c9b92 100644
--- a/packages/client/src/components/Login/LoginButton.tsx
+++ b/packages/client/src/components/Login/LoginButton.tsx
@@ -7,7 +7,7 @@ export const LoginButton = () => {
   return (
     <WithLogin>
       {(doLogin) => (
-        <Button className="user-login" onPress={doLogin}>
+        <Button onPress={doLogin}>
           Login
         </Button>
       )}
diff --git a/packages/client/src/components/Login/LoginModal.tsx b/packages/client/src/components/Login/LoginModal.tsx
index 80981e0..f600f24 100644
--- a/packages/client/src/components/Login/LoginModal.tsx
+++ b/packages/client/src/components/Login/LoginModal.tsx
@@ -21,7 +21,7 @@ export const LoginModal = () => {
 
   return (
     <Modal isOpen={isOpen} onOpenChange={onClose}>
-      <ModalContent>
+      <ModalContent className="canvas-overlay-card">
         {(_onClose) => (
           <>
             <ModalHeader>Login</ModalHeader>
diff --git a/packages/client/src/components/PixelSidebar/PixelWhoisSidebar.tsx b/packages/client/src/components/PixelSidebar/PixelWhoisSidebar.tsx
index 00ad6e0..cda1e94 100644
--- a/packages/client/src/components/PixelSidebar/PixelWhoisSidebar.tsx
+++ b/packages/client/src/components/PixelSidebar/PixelWhoisSidebar.tsx
@@ -1,7 +1,6 @@
 import { Spinner } from "@heroui/react";
 import { useAppContext } from "../../contexts/AppContext";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faXmark } from "@fortawesome/free-solid-svg-icons";
+import { Flag, X } from "lucide-react";
 import { useEffect, useState } from "react";
 import { oapi } from "../../lib/utils";
 import { UserCard } from "../Profile/UserCard";
@@ -9,6 +8,8 @@ import { SmallCanvas } from "./SmallCanvas";
 import { ReportPixelModal } from "./ReportPixelModal";
 import { Button } from "../core/Button";
 import { usePanel } from "@/contexts/PanelContext";
+import { motion, useReducedMotion } from "framer-motion";
+import { SIDEBAR_SPRING } from "../SidebarBase";
 
 interface IPixel {
   id: number;
@@ -49,6 +50,7 @@ const parsePixelResponse = (
 export const PixelWhoisSidebar = () => {
   const { user } = useAppContext();
   const Panel = usePanel();
+  const reduceMotion = useReducedMotion() ?? false;
   const [loading, setLoading] = useState(true);
   const [whois, setWhois] = useState<{
     pixel: IPixel;
@@ -95,9 +97,12 @@ export const PixelWhoisSidebar = () => {
   }, [Panel.state.whois]);
 
   return (
-    <div
-      className="sidebar sidebar-right bg-white dark:bg-black text-black dark:text-white"
-      style={{ ...(Boolean(Panel.state.whois) ? {} : { display: "none" }) }}
+    <motion.div
+      animate={{ x: Panel.state.whois ? 0 : "100%" }}
+      aria-hidden={!Panel.state.whois}
+      className="canvas-sidebar canvas-sidebar--right sidebar sidebar-right md:max-w-[30vw] bg-white dark:bg-black text-black dark:text-white"
+      initial={{ x: "100%" }}
+      transition={reduceMotion ? { duration: 0 } : SIDEBAR_SPRING}
     >
       {loading && (
         <div className="absolute top-0 left-0 w-full h-full bg-black/25 flex justify-center items-center z-50">
@@ -115,7 +120,7 @@ export const PixelWhoisSidebar = () => {
           isIconOnly
           onPress={() => Panel.dispatch(["whois", undefined])}
         >
-          <FontAwesomeIcon icon={faXmark} />
+          <X aria-hidden="true" size={18} />
         </Button>
       </header>
       <div className="w-full h-52 bg-gray-200 dark:bg-gray-800 flex justify-center items-center">
@@ -134,24 +139,37 @@ export const PixelWhoisSidebar = () => {
         )}
       </section>
       <section>
-        <table className="w-full">
+        <table className="w-full border-separate border-spacing-y-1 text-sm">
           <tbody>
             <tr>
-              <th>Placed At</th>
-              <td>{whois?.pixel.createdAt?.toString()}</td>
+              <th className="w-32 whitespace-nowrap pr-3 text-right align-top font-semibold">
+                Placed At
+              </th>
+              <td className="break-words text-left align-top">
+                {whois?.pixel.createdAt?.toLocaleString(undefined, {
+                  dateStyle: "medium",
+                  timeStyle: "medium",
+                })}
+              </td>
             </tr>
             <tr>
-              <th>Covered Pixels</th>
-              <td>{whois?.otherPixels}</td>
+              <th className="w-32 whitespace-nowrap pr-3 text-right align-top font-semibold">
+                Covered Pixels
+              </th>
+              <td className="break-words text-left align-top">
+                {whois?.otherPixels}
+              </td>
             </tr>
           </tbody>
         </table>
         {user ? (
           <Button color="danger" onPress={() => setReport(true)}>
+            <Flag aria-hidden="true" size={16} />
             Report Pixel
           </Button>
         ) : (
           <Button color="danger" isDisabled variant="bordered">
+            <Flag aria-hidden="true" size={16} />
             Report Pixel (logged out)
           </Button>
         )}
@@ -162,6 +180,6 @@ export const PixelWhoisSidebar = () => {
         onOpen={(v) => setReport(v)}
         pixel={whois?.pixel}
       />
-    </div>
+    </motion.div>
   );
 };
diff --git a/packages/client/src/components/PixelSidebar/ReportPixelModal.tsx b/packages/client/src/components/PixelSidebar/ReportPixelModal.tsx
index 5b5cc96..554c60f 100644
--- a/packages/client/src/components/PixelSidebar/ReportPixelModal.tsx
+++ b/packages/client/src/components/PixelSidebar/ReportPixelModal.tsx
@@ -93,7 +93,7 @@ export const ReportPixelModal = ({
 
   return (
     <Modal isOpen={open} onOpenChange={onOpen} placement="center">
-      <ModalContent>
+      <ModalContent className="canvas-overlay-card">
         {(onClose) => (
           <>
             <ModalHeader className="flex flex-col gap-1">
diff --git a/packages/client/src/components/Profile/ProfileModal.tsx b/packages/client/src/components/Profile/ProfileModal.tsx
index d0e171e..e52efd8 100644
--- a/packages/client/src/components/Profile/ProfileModal.tsx
+++ b/packages/client/src/components/Profile/ProfileModal.tsx
@@ -42,7 +42,7 @@ export const ProfileModal = () => {
 
   return (
     <Modal isOpen={!!profile} onClose={() => setProfile()} placement="center">
-      <ModalContent>
+      <ModalContent className="canvas-overlay-card">
         {(onClose) => (
           <>
             <ModalHeader className="flex flex-col gap-1">Profile</ModalHeader>
diff --git a/packages/client/src/components/Profile/UserCard.tsx b/packages/client/src/components/Profile/UserCard.tsx
index d81e8f8..7939df8 100644
--- a/packages/client/src/components/Profile/UserCard.tsx
+++ b/packages/client/src/components/Profile/UserCard.tsx
@@ -1,7 +1,11 @@
-import { faMessage, faWarning } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Link, Skeleton, Spinner, User } from "@heroui/react";
 import { type ClientConfig } from "@sc07-canvas/lib/net";
+import {
+  MessageCircle,
+  Shield,
+  TriangleAlert,
+  UserRound,
+} from "lucide-react";
 import { type MouseEvent, useEffect, useRef, useState } from "react";
 import { toast } from "react-toastify";
 import { useAppContext } from "../../contexts/AppContext";
@@ -60,6 +64,8 @@ export const UserCard = ({
   const [messageStatus, setMessageStatus] = useState<
     "loading" | "no_account" | "has_account" | "error"
   >("loading");
+  const MessageStatusIcon =
+    messageStatus === "error" ? TriangleAlert : MessageCircle;
 
   useEffect(() => {
     if (!config) {
@@ -143,10 +149,7 @@ export const UserCard = ({
               {messageStatus === "loading" ? (
                 <Spinner />
               ) : (
-                <FontAwesomeIcon
-                  icon={messageStatus === "error" ? faWarning : faMessage}
-                  color="inherit"
-                />
+                <MessageStatusIcon aria-hidden="true" size={18} />
               )}
             </Button>
           )}
@@ -155,6 +158,7 @@ export const UserCard = ({
       <div className="flex gap-4 items-center *:grow">
         {hide.indexOf("VIEW_PROFILE") === -1 && (
           <Button size="sm" onPress={openProfile}>
+            <UserRound aria-hidden="true" size={16} />
             View Profile
           </Button>
         )}
@@ -176,6 +180,7 @@ const ModActions = ({ sub }: { sub: string }) => {
         size="sm"
         onPress={() => dispatch({ action: "INSPECT_USER", user: sub })}
       >
+        <Shield aria-hidden="true" size={16} />
         Mod Menu
       </Button>
     </>
diff --git a/packages/client/src/components/Settings/MiscSettings.tsx b/packages/client/src/components/Settings/MiscSettings.tsx
index 31b241f..b7ff171 100644
--- a/packages/client/src/components/Settings/MiscSettings.tsx
+++ b/packages/client/src/components/Settings/MiscSettings.tsx
@@ -16,6 +16,22 @@ export const MiscSettings = () => {
         <p className="text-xs text-default-600">Other settings</p>
       </header>
       <section className="flex gap-2 flex-col">
+        <Switch
+          isSelected={settings.get["capture.cameraFlash"]}
+          onValueChange={(value) => {
+            settings.set({ key: "capture.cameraFlash", value });
+          }}
+        >
+          Enable Camera Flash
+        </Switch>
+        <Switch
+          isSelected={settings.get["keybindings.enabled"]}
+          onValueChange={(value) => {
+            settings.set({ key: "keybindings.enabled", value });
+          }}
+        >
+          Enable Keybindings
+        </Switch>
         <Switch
           isSelected={settings.get["palette.colors"]}
           onValueChange={(value) => {
@@ -24,6 +40,67 @@ export const MiscSettings = () => {
         >
           Show Palette Numbers
         </Switch>
+        <Switch
+          isSelected={settings.get["palette.symbols"]}
+          onValueChange={(value) => {
+            settings.set({ key: "palette.symbols", value });
+          }}
+        >
+          Show Palette Symbols
+        </Switch>
+        <Switch
+          isSelected={settings.get["ui.compactButtons"]}
+          onValueChange={(value) => {
+            settings.set({ key: "ui.compactButtons", value });
+          }}
+        >
+          Compact Buttons
+        </Switch>
+        <Switch
+          isSelected={settings.get["palette.compact"]}
+          onValueChange={(value) => {
+            settings.set({ key: "palette.compact", value });
+          }}
+        >
+          Compact Palette
+        </Switch>
+        {!settings.get["palette.compact"] && (
+          <Switch
+            className="sidebar-adaptation-setting"
+            isSelected={settings.get["ui.compactPaletteForSidebar"]}
+            onValueChange={(value) => {
+              settings.set({ key: "ui.compactPaletteForSidebar", value });
+            }}
+          >
+            Adapt Palette When Sidebar is Open
+          </Switch>
+        )}
+        <Switch
+          className="sidebar-adaptation-setting"
+          isSelected={settings.get["ui.adaptElementsToSidebar"]}
+          onValueChange={(value) => {
+            settings.set({ key: "ui.adaptElementsToSidebar", value });
+          }}
+        >
+          Adapt UI Elements When Sidebar is Open
+        </Switch>
+        <Switch
+          className="show-overlays-card-setting"
+          isSelected={settings.get["ui.showOverlaysCard"]}
+          onValueChange={(value) => {
+            settings.set({ key: "ui.showOverlaysCard", value });
+          }}
+        >
+          Show Overlays Card
+        </Switch>
+        <Switch
+          isSelected={settings.get["ui.showThemeToggle"]}
+          onValueChange={(value) => {
+            settings.set({ key: "ui.showThemeToggle", value });
+          }}
+        >
+          Show Theme Toggle
+        </Switch>
         <Button
           className="w-fit"
           onPress={() => {
@@ -44,6 +121,7 @@ export const MiscSettings = () => {
               action: "OPEN_DIALOG",
               dialog: { id: "EVENT_INFO" },
             });
+            Panel.dispatch(["settings", undefined]);
           }}
         >
           Open Welcome Message
diff --git a/packages/client/src/components/Settings/SettingsSidebar.tsx b/packages/client/src/components/Settings/SettingsSidebar.tsx
index 193aaae..1723692 100644
--- a/packages/client/src/components/Settings/SettingsSidebar.tsx
+++ b/packages/client/src/components/Settings/SettingsSidebar.tsx
@@ -1,4 +1,4 @@
-import { faGear } from "@fortawesome/free-solid-svg-icons";
+import { Settings } from "lucide-react";
 import { SidebarBase } from "../SidebarBase";
 import { Divider } from "@heroui/react";
 import { TemplateSettings } from "./TemplateSettings";
@@ -15,7 +15,7 @@ export const SettingsSidebar = () => {
     <SidebarBase
       shown={Boolean(Panel.state.settings)}
       setSidebarShown={(state) => Panel.dispatch(["settings", state])}
-      icon={faGear}
+      icon={Settings}
       title="Settings"
       description="Configuration options for customizing your experience"
       side="Right"
diff --git a/packages/client/src/components/Settings/TemplateSettings.tsx b/packages/client/src/components/Settings/TemplateSettings.tsx
index 8ac9158..08ca707 100644
--- a/packages/client/src/components/Settings/TemplateSettings.tsx
+++ b/packages/client/src/components/Settings/TemplateSettings.tsx
@@ -1,10 +1,10 @@
 import { useTemplateContext } from "../../contexts/TemplateContext";
+import { useAppContext } from "../../contexts/AppContext";
 import { Alert, Input, Select, SelectItem, Slider } from "@heroui/react";
 import { Switch } from "../core/Switch";
 import { Button } from "../core/Button";
 import { toast } from "react-toastify";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faLink } from "@fortawesome/free-solid-svg-icons";
+import { LinkIcon } from "lucide-react";
 import { WebGLUtils } from "@/lib/webgl";
 import { CanvasCore } from "@/lib/canvas";
 
@@ -27,9 +27,10 @@ export const TemplateSettings = () => {
     showMobileTools,
     setShowMobileTools,
   } = useTemplateContext();
+  const { settings } = useAppContext();
 
   return (
-    <div className="flex flex-col p-2">
+    <div id="template-settings" className="flex flex-col p-2">
       <header className="flex flex-col gap-2">
         {!WebGLUtils.detectWebGL() && (
           <Alert color="warning">
@@ -132,6 +133,26 @@ export const TemplateSettings = () => {
           >
             Show Mobile Tools
           </Switch>
+          {url && (
+            <>
+              <Switch
+                isSelected={settings.get["template.pixelCounts"]}
+                onValueChange={(value: boolean) => {
+                  settings.set({ key: "template.pixelCounts", value });
+                }}
+              >
+                Show pixels needed of each color
+              </Switch>
+              <Switch
+                isSelected={settings.get["template.hideUnusedColors"]}
+                onValueChange={(value: boolean) => {
+                  settings.set({ key: "template.hideUnusedColors", value });
+                }}
+              >
+                Hide colors not in template
+              </Switch>
+            </>
+          )}
           {url && x !== undefined && y !== undefined && (
             <Button
               onPress={() => {
@@ -142,7 +163,7 @@ export const TemplateSettings = () => {
                 navigator.clipboard.writeText(copied);
                 toast.success("Link copied to clipboard!");
               }}
-              startContent={<FontAwesomeIcon icon={faLink} />}
+              startContent={<LinkIcon aria-hidden="true" size={16} />}
             >
               Copy Shareable Link
             </Button>
diff --git a/packages/client/src/components/SidebarBase.tsx b/packages/client/src/components/SidebarBase.tsx
index 7aaac66..86188ff 100644
--- a/packages/client/src/components/SidebarBase.tsx
+++ b/packages/client/src/components/SidebarBase.tsx
@@ -1,11 +1,11 @@
-import { motion } from "framer-motion";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { type IconProp } from "@fortawesome/fontawesome-svg-core";
+import { motion, useReducedMotion } from "framer-motion";
 import { Divider } from "@heroui/react";
-import { faXmark } from "@fortawesome/free-solid-svg-icons";
 import { type JSX } from "react";
+import { type LucideIcon, X } from "lucide-react";
 import { Button } from "./core/Button";
 
+export const SIDEBAR_SPRING = { type: "spring", stiffness: 50 } as const;
+
 /**
  * Information sidebar
  *
@@ -16,35 +16,24 @@ import { Button } from "./core/Button";
 export const SidebarBase = ({
   children,
   shown,
-  icon,
+  icon: Icon,
   setSidebarShown,
   title,
   description,
   side,
-  noBackdrop,
 }: {
   children: string | JSX.Element | JSX.Element[];
-  icon: IconProp;
+  icon: LucideIcon;
   shown: boolean;
   setSidebarShown: (value: boolean) => void;
   title: string;
   description?: string;
   side: "Left" | "Right";
-  noBackdrop?: boolean;
 }) => {
+  const reduceMotion = useReducedMotion() ?? false;
+
   return (
     <div>
-      {!noBackdrop && (
-        <motion.div
-          className={`absolute w-screen h-screen z-50 left-0 top-0 bg-black pointer-events-none`}
-          initial={{ opacity: 0, visibility: "hidden" }}
-          animate={{
-            opacity: shown ? 0.25 : 0,
-            visibility: shown ? "visible" : "hidden",
-          }}
-          transition={{ type: "spring", stiffness: 50 }}
-        />
-      )}
       <motion.div
         className={`min-w-[20rem] max-w-[75vw] md:max-w-[30vw] bg-white dark:bg-black flex flex-col justify-between fixed ${side === "Left" ? "left-0" : "right-0"}  h-full shadow-xl overflow-y-auto z-50 top-0`}
         initial={{ x: side === "Left" ? "-150%" : "150%" }}
@@ -57,39 +46,46 @@ export const SidebarBase = ({
               ? "-150%"
               : "150%",
         }}
-        transition={{ type: "spring", stiffness: 50 }}
+        transition={
+          reduceMotion ? { duration: 0 } : { type: "spring", stiffness: 50 }
+        }
       />
       <motion.div
-        className={`min-w-[20rem] max-w-[75vw] md:max-w-[30vw] bg-white dark:bg-black text-black dark:text-white flex flex-col fixed ${side === "Left" ? "left-0" : "right-0"} h-full shadow-xl overflow-y-auto z-50 top-0`}
+        data-sidebar-side={side}
+        className={`canvas-sidebar canvas-sidebar--${side.toLowerCase()} min-w-[20rem] max-w-[75vw] md:max-w-[30vw] bg-white dark:bg-black text-black dark:text-white flex flex-col fixed ${side === "Left" ? "left-0" : "right-0"} h-full shadow-xl overflow-y-auto z-50 top-0`}
         initial={{ x: side === "Left" ? "-100%" : "100%" }}
         animate={{ x: shown ? 0 : side === "Left" ? "-100%" : "100%" }}
-        transition={{ type: "spring", stiffness: 50 }}
+        transition={
+          reduceMotion ? { duration: 0 } : SIDEBAR_SPRING
+        }
       >
-        <header className="flex p-4 justify-between items-center">
-          <div>
-            <div className="flex items-center gap-2">
-              <FontAwesomeIcon icon={icon} size="lg" />
-              <div>
-                <h1 className="text-xl">{title}</h1>
-                {description && (
-                  <p className="text-xs text-default-600">{description}</p>
-                )}
+        <div className="sticky top-0 z-20 bg-white dark:bg-black">
+          <header className="flex p-4 justify-between items-center">
+            <div>
+              <div className="flex items-center gap-2">
+                <Icon aria-hidden="true" size={22} />
+                <div>
+                  <h1 className="text-xl">{title}</h1>
+                  {description && (
+                    <p className="text-xs text-default-600">{description}</p>
+                  )}
+                </div>
               </div>
             </div>
-          </div>
 
-          <Button
-            size="sm"
-            isIconOnly
-            onPress={() => {
-              setSidebarShown(false);
-            }}
-            className="ml-4"
-          >
-            <FontAwesomeIcon icon={faXmark} />
-          </Button>
-        </header>
-        <Divider />
+            <Button
+              size="sm"
+              isIconOnly
+              onPress={() => {
+                setSidebarShown(false);
+              }}
+              className="ml-4"
+            >
+              <X aria-hidden="true" size={18} />
+            </Button>
+          </header>
+          <Divider />
+        </div>
         {children}
       </motion.div>
     </div>
diff --git a/packages/client/src/components/Templating/MobileTemplateButtons.tsx b/packages/client/src/components/Templating/MobileTemplateButtons.tsx
index bec659c..ca9a4a2 100644
--- a/packages/client/src/components/Templating/MobileTemplateButtons.tsx
+++ b/packages/client/src/components/Templating/MobileTemplateButtons.tsx
@@ -1,18 +1,23 @@
 import { useTemplateContext } from "../../contexts/TemplateContext";
+import { Card } from "@heroui/react";
 import { Switch } from "../core/Switch";
 
 export const MobileTemplateButtons = () => {
   const { enable, setEnable, url } = useTemplateContext();
 
+  if (!url) return null;
+
   return (
     <div className="md:hidden toolbar-box top-[-10px] right-[10px]">
-      {url && (
-        <div className="md:hidden rounded-xl bg-gray-300 p-2">
-          <Switch isSelected={enable} onValueChange={setEnable}>
-            Template
-          </Switch>
-        </div>
-      )}
+      <Card className="mobile-template-toggle canvas-overlay-card">
+        <Switch
+          size="sm"
+          isSelected={enable}
+          onValueChange={setEnable}
+        >
+          Template
+        </Switch>
+      </Card>
     </div>
   );
 };
diff --git a/packages/client/src/components/Toolbar/CanvasMeta.tsx b/packages/client/src/components/Toolbar/CanvasMeta.tsx
index 7b865d0..3dfcf4e 100644
--- a/packages/client/src/components/Toolbar/CanvasMeta.tsx
+++ b/packages/client/src/components/Toolbar/CanvasMeta.tsx
@@ -1,10 +1,3 @@
-import {
-  Modal,
-  ModalBody,
-  ModalContent,
-  ModalHeader,
-  useDisclosure,
-} from "@heroui/react";
 import { CanvasLib } from "@sc07-canvas/lib/canvas";
 import { useAppContext } from "../../contexts/AppContext";
 import { CanvasCore } from "../../lib/canvas";
@@ -13,6 +6,22 @@ import { type ClientConfig } from "@sc07-canvas/lib/net";
 import network from "../../lib/network";
 import { ShareModal } from "./ShareModal";
 import { useDialog } from "@/contexts/DialogContext";
+import {
+  Brush,
+  ChevronDown,
+  ChevronUp,
+  Crosshair,
+  Users,
+} from "lucide-react";
+import { motion, useReducedMotion } from "framer-motion";
+import { usePanel } from "@/contexts/PanelContext";
+import { SIDEBAR_SPRING } from "../SidebarBase";
+import { useSidebarWidth } from "../Header/useSidebarWidth";
+import {
+  PALETTE_LAYOUT_SPRING,
+  useCompactPalette,
+} from "../../hooks/useCompactPalette";
+import { useIsMobile } from "../../hooks/useIsMobile";
 
 const getTimeLeft = (available: number, config: ClientConfig) => {
   /**
@@ -82,8 +91,21 @@ const OnlineCount = () => {
 
 export const CanvasMeta = () => {
   const [available, setAvailable] = useState(-1);
-  const { canvasPosition, cursor, config } = useAppContext<true>();
+  const isMobile = useIsMobile();
+  const [collapsed, setCollapsed] = useState(() => isMobile);
+  const { canvasPosition, cursor, config, user, settings } =
+    useAppContext<true>();
   const Dialog = useDialog();
+  const Panel = usePanel();
+  const reduceMotion = useReducedMotion() ?? false;
+  const sidebarWidth = useSidebarWidth("Left");
+  const compactPalette = useCompactPalette();
+  const offsetForSidebar = Boolean(
+    !isMobile &&
+      Panel.state.info &&
+      settings.get["ui.adaptElementsToSidebar"],
+  );
+  const isCollapsed = collapsed && Boolean(user);
 
   useEffect(() => {
     const handle = ({ available }: { available: number }) => {
@@ -100,44 +122,89 @@ export const CanvasMeta = () => {
 
   return (
     <>
-      <div id="canvas-meta" className="toolbar-box">
+      <motion.div
+        animate={{
+          x: offsetForSidebar ? sidebarWidth : 0,
+          bottom: compactPalette ? 84 : 76,
+        }}
+        id="canvas-meta"
+        className={`toolbar-box canvas-overlay-card${isCollapsed ? " canvas-meta--collapsed" : ""}`}
+        transition={
+          reduceMotion
+            ? { duration: 0 }
+            : { x: SIDEBAR_SPRING, bottom: PALETTE_LAYOUT_SPRING }
+        }
+      >
+        {user && (
+          <button
+            type="button"
+            className="canvas-meta-collapse"
+            aria-expanded={!isCollapsed}
+            aria-label={
+              isCollapsed
+                ? "Expand canvas information"
+                : "Collapse canvas information"
+            }
+            title={
+              isCollapsed
+                ? "Expand canvas information"
+                : "Collapse canvas information"
+            }
+            onClick={() => setCollapsed((value) => !value)}
+          >
+            {isCollapsed ? (
+              <ChevronUp aria-hidden="true" />
+            ) : (
+              <ChevronDown aria-hidden="true" />
+            )}
+          </button>
+        )}
         {canvasPosition && (
-          <span>
-            <button
-              className="btn-link"
-              onClick={() =>
-                Dialog.dispatch({
-                  action: "OPEN_DIALOG",
-                  dialog: { id: "SHARE_MODAL" },
-                })
-              }
-            >
-              ({canvasPosition.x}, {canvasPosition.y})
-            </button>
-            {cursor.x !== undefined && cursor.y !== undefined && (
-              <>
-                {" "}
+          <div
+            aria-hidden={isCollapsed}
+            className={`canvas-meta-row canvas-meta-collapsible-row${isCollapsed ? " is-collapsed" : ""}`}
+          >
+            <Crosshair className="canvas-meta-icon" aria-hidden="true" />
+            <span>
+              <button
+                className="btn-link"
+                tabIndex={isCollapsed ? -1 : undefined}
+                onClick={() =>
+                  Dialog.dispatch({
+                    action: "OPEN_DIALOG",
+                    dialog: { id: "SHARE_MODAL" },
+                  })
+                }
+              >
+                ({canvasPosition.x}, {canvasPosition.y})
+              </button>
+              {cursor.x !== undefined && cursor.y !== undefined && (
                 <span className="canvas-meta--cursor-pos">
-                  (Cursor: {cursor.x}, {cursor.y})
+                  Cursor: {cursor.x}, {cursor.y}
                 </span>
-              </>
-            )}
-          </span>
+              )}
+            </span>
+          </div>
         )}
-        <span>
-          Pixels:{" "}
-          <span>
-            {available}/{config.canvas.pixel.maxStack}
-          </span>{" "}
-          <PlaceCountdown available={available} />
-        </span>
-        <span>
-          Users Online:{" "}
+        {user && (
+          <div className="canvas-meta-row">
+            <Brush className="canvas-meta-icon" aria-hidden="true" />
+            <span>
+              Pixels: {available}/{config.canvas.pixel.maxStack}{" "}
+              <PlaceCountdown available={available} />
+            </span>
+          </div>
+        )}
+        <div
+          aria-hidden={isCollapsed}
+          className={`canvas-meta-row canvas-meta-collapsible-row${isCollapsed ? " is-collapsed" : ""}`}
+        >
+          <Users className="canvas-meta-icon" aria-hidden="true" />
           <span>
-            <OnlineCount />
+            Users Online: <OnlineCount />
           </span>
-        </span>
-      </div>
+        </div>
+      </motion.div>
       <ShareModal />
     </>
   );
diff --git a/packages/client/src/components/Toolbar/OverlaySwitcher.scss b/packages/client/src/components/Toolbar/OverlaySwitcher.scss
new file mode 100644
index 0000000..04e8757
--- /dev/null
+++ b/packages/client/src/components/Toolbar/OverlaySwitcher.scss
@@ -0,0 +1,323 @@
+#overlay-switcher {
+  --overlay-outline-color: #e5e7eb;
+  --overlay-active-gap-color: #fff;
+
+  position: fixed;
+  top: auto;
+  right: 10px;
+  bottom: 76px;
+  z-index: 11;
+  max-width: calc(100vw - 20px);
+  padding: 0;
+  transform: none;
+  transition: padding 0.18s ease-out;
+
+  &.overlay-switcher--collapsed {
+    min-width: 82px;
+    padding: 12px 18px;
+    transition: padding 0.18s ease-out 0.08s;
+  }
+
+  .overlay-switcher-collapse {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    z-index: 2;
+    width: 18px;
+    height: 24px;
+    padding: 0;
+    transform: translate(-50%, -50%);
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    border: 1px solid #e5e7eb;
+    border-radius: 9999px;
+    background: #fff;
+    color: #6b7280;
+    cursor: pointer;
+
+    svg {
+      width: 14px;
+      height: 14px;
+    }
+
+    &:hover {
+      color: #111827;
+    }
+
+    &:focus-visible {
+      outline: 2px solid currentColor;
+      outline-offset: 2px;
+    }
+  }
+
+  .overlay-switcher-items {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    gap: 12px;
+    margin: 0;
+    padding: 12px;
+    overflow: hidden;
+    opacity: 1;
+    transition: opacity 0.1s ease-out 0.16s;
+  }
+
+  .overlay-switcher-item {
+    width: 64px;
+    padding: 0;
+
+    display: flex;
+    flex: 0 0 64px;
+    flex-direction: column;
+    align-items: center;
+    gap: 4px;
+
+    border: 0;
+    background: transparent;
+    color: #4b5563;
+    font-size: 0.6875rem;
+    line-height: 1;
+    cursor: pointer;
+
+    > span:last-child {
+      white-space: nowrap;
+    }
+
+    .overlay-switcher-visual {
+      width: 56px;
+      height: 42px;
+
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      border: 1px solid var(--overlay-outline-color);
+      border-radius: 7px;
+      background-color: #f3f4f6;
+      transition: transform 0.25s;
+      transform-origin: center bottom;
+    }
+
+    &:hover .overlay-switcher-visual {
+      transform: scale(1.075);
+    }
+
+    &.is-active {
+      color: #111827;
+      font-weight: 650;
+
+      .overlay-switcher-visual {
+        transform: translateY(-2px) scale(1.12);
+        box-shadow:
+          0 0 0 2px var(--overlay-active-gap-color),
+          0 0 0 4px var(--overlay-outline-color);
+      }
+    }
+  }
+
+  .overlay-switcher-item--blank .overlay-switcher-visual {
+    background-color: #f9fafb;
+    background-image: conic-gradient(
+      #d1d5db 25%,
+      #f9fafb 0 50%,
+      #d1d5db 0 75%,
+      #f9fafb 0
+    );
+    background-size: 14px 14px;
+  }
+
+  .overlay-switcher-item--heatmap .overlay-switcher-visual {
+    background-color: #e5e7eb;
+    background-image:
+      radial-gradient(ellipse 32px 26px at 30% 50%, rgba(255, 0, 0, 0.92) 0%, rgba(255, 0, 0, 0.7) 30%, rgba(255, 0, 0, 0.34) 62%, rgba(255, 0, 0, 0) 100%),
+      radial-gradient(ellipse 27px 23px at 74% 54%, rgba(255, 0, 0, 0.82) 0%, rgba(255, 0, 0, 0.58) 32%, rgba(255, 0, 0, 0.26) 64%, rgba(255, 0, 0, 0) 100%);
+  }
+
+  .overlay-switcher-item--grid .overlay-switcher-visual {
+    background-color: #e5e7eb;
+    background-image:
+      linear-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px),
+      linear-gradient(90deg, rgba(0, 0, 0, 0.1) 1px, transparent 1px);
+    background-size: 8px 8px;
+  }
+
+  .overlay-switcher-item--pulses .overlay-switcher-visual {
+    position: relative;
+    overflow: hidden;
+    background-color: #fff;
+    background-image: none;
+
+    &::before,
+    &::after {
+      content: "";
+      position: absolute;
+      box-sizing: border-box;
+      border: 3px solid;
+      border-radius: 50%;
+    }
+
+    &::before {
+      top: 2px;
+      left: 4px;
+      width: 21px;
+      height: 21px;
+      border-color: #149cff;
+    }
+
+    &::after {
+      right: -3px;
+      bottom: -7px;
+      width: 35px;
+      height: 35px;
+      border-color: #f14fb4;
+    }
+  }
+
+  .overlay-switcher-item--template .overlay-switcher-visual {
+    overflow: hidden;
+    background-color: #f3f4f6;
+    color: #6b7280;
+
+    > svg {
+      width: 24px;
+      height: 24px;
+    }
+  }
+
+  .overlay-switcher-template-image {
+    display: block;
+    width: 100%;
+    height: 100%;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    image-rendering: pixelated;
+  }
+
+  .overlay-switcher-summary {
+    position: absolute;
+    inset: 0;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+
+    color: #374151;
+    font-size: 0.75rem;
+    font-weight: 600;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.08s ease-out;
+
+    > svg {
+      width: 20px;
+      height: 20px;
+    }
+  }
+
+  .overlay-switcher-count {
+    min-width: 18px;
+    height: 18px;
+    padding: 0 5px;
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    border-radius: 9999px;
+    background: #2563eb;
+    color: #fff;
+    font-size: 0.625rem;
+  }
+
+  .overlay-switcher-content {
+    position: relative;
+    width: 392px;
+    max-width: calc(100vw - 20px);
+    height: 81px;
+    overflow: hidden;
+    transition:
+      width 0.18s ease-out,
+      height 0.18s ease-out;
+  }
+
+  &.overlay-switcher--collapsed {
+    .overlay-switcher-content {
+      width: 74px;
+      height: 48px;
+      transition:
+        width 0.18s ease-out 0.08s,
+        height 0.18s ease-out 0.08s;
+
+      &.has-active-count {
+        width: 98px;
+      }
+    }
+
+    .overlay-switcher-items {
+      opacity: 0;
+      pointer-events: none;
+      transition: opacity 0.08s ease-out;
+    }
+
+    .overlay-switcher-summary {
+      opacity: 1;
+      transition: opacity 0.1s ease-out 0.2s;
+    }
+  }
+}
+
+.dark #overlay-switcher {
+  --overlay-outline-color: #27272a;
+  --overlay-active-gap-color: #000;
+
+  .overlay-switcher-collapse {
+    border-color: #27272a;
+    background: #000;
+    color: #e5e7eb;
+  }
+
+  .overlay-switcher-item,
+  .overlay-switcher-summary {
+    color: #e5e7eb;
+  }
+
+  .overlay-switcher-item--blank .overlay-switcher-visual {
+    background-color: #18181b;
+    background-image: conic-gradient(
+      #3f3f46 25%,
+      #18181b 0 50%,
+      #3f3f46 0 75%,
+      #18181b 0
+    );
+  }
+
+  .overlay-switcher-item--heatmap .overlay-switcher-visual {
+    background-color: #27272a;
+    background-image:
+      radial-gradient(ellipse 32px 26px at 30% 50%, rgba(255, 0, 0, 0.96) 0%, rgba(255, 0, 0, 0.74) 30%, rgba(255, 0, 0, 0.38) 62%, rgba(255, 0, 0, 0) 100%),
+      radial-gradient(ellipse 27px 23px at 74% 54%, rgba(255, 0, 0, 0.88) 0%, rgba(255, 0, 0, 0.62) 32%, rgba(255, 0, 0, 0.3) 64%, rgba(255, 0, 0, 0) 100%);
+  }
+
+  .overlay-switcher-item--grid .overlay-switcher-visual {
+    background-color: #71717a;
+    background-image:
+      linear-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px),
+      linear-gradient(90deg, rgba(0, 0, 0, 0.1) 1px, transparent 1px);
+    background-size: 8px 8px;
+  }
+
+  .overlay-switcher-item--pulses .overlay-switcher-visual {
+    background-color: #fff;
+    background-image: none;
+  }
+
+  .overlay-switcher-item--template .overlay-switcher-visual {
+    background-color: #18181b;
+    color: #a1a1aa;
+  }
+}
diff --git a/packages/client/src/components/Toolbar/OverlaySwitcher.tsx b/packages/client/src/components/Toolbar/OverlaySwitcher.tsx
new file mode 100644
index 0000000..e194e5e
--- /dev/null
+++ b/packages/client/src/components/Toolbar/OverlaySwitcher.tsx
@@ -0,0 +1,216 @@
+import { useState } from "react";
+import {
+  ChevronLeft,
+  ChevronRight,
+  Image as ImageIcon,
+  Layers,
+} from "lucide-react";
+import { useAppContext } from "../../contexts/AppContext";
+import { usePanel } from "@/contexts/PanelContext";
+import { motion, useReducedMotion } from "framer-motion";
+import { SIDEBAR_SPRING } from "../SidebarBase";
+import { useSidebarWidth } from "../Header/useSidebarWidth";
+import {
+  PALETTE_LAYOUT_SPRING,
+  useCompactPalette,
+} from "../../hooks/useCompactPalette";
+import { useTemplateContext } from "../../contexts/TemplateContext";
+import { CanvasCore } from "../../lib/canvas";
+import { useIsMobile } from "../../hooks/useIsMobile";
+
+export const OverlaySwitcher = () => {
+  const {
+    blankOverlay,
+    setBlankOverlay,
+    heatmapOverlay,
+    setHeatmapOverlay,
+    gridOverlay,
+    setGridOverlay,
+    pixelPulses,
+    setPixelPulses,
+    settings,
+  } = useAppContext();
+  const Panel = usePanel();
+  const template = useTemplateContext();
+  const reduceMotion = useReducedMotion() ?? false;
+  const sidebarWidth = useSidebarWidth("Right");
+  const compactPalette = useCompactPalette();
+  const isMobile = useIsMobile();
+  const offsetForSidebar = Boolean(
+    !isMobile &&
+      (Panel.state.settings || Panel.state.whois) &&
+      settings.get["ui.adaptElementsToSidebar"],
+  );
+
+  const activeCount = [
+    blankOverlay.enabled,
+    heatmapOverlay.enabled,
+    gridOverlay.enabled,
+    pixelPulses,
+    template.enable,
+  ].filter(Boolean).length;
+  const [collapsed, setCollapsed] = useState(() => activeCount === 0);
+
+  if (isMobile || !settings.get["ui.showOverlaysCard"]) return null;
+
+  const handleTemplateToggle = () => {
+    const enabled = !template.enable;
+    template.setEnable(enabled);
+
+    if (enabled && template.x === undefined && template.y === undefined) {
+      const canvas = CanvasCore.get(false);
+      if (canvas) {
+        const { canvasX, canvasY } = canvas.panZoomTransformToCanvas();
+        template.setX(canvasX);
+        template.setY(canvasY);
+      }
+    }
+
+    if (!enabled || template.url?.trim()) return;
+
+    Panel.dispatch(["settings", true]);
+    window.requestAnimationFrame(() => {
+      const section = document.getElementById("template-settings");
+      section?.scrollIntoView({
+        behavior: reduceMotion ? "auto" : "smooth",
+        block: "start",
+      });
+      section
+        ?.querySelector<HTMLInputElement>('input[aria-label="Template URL"]')
+        ?.focus({ preventScroll: true });
+    });
+  };
+
+  return (
+    <motion.div
+      animate={{
+        x: offsetForSidebar ? -sidebarWidth : 0,
+        bottom: compactPalette ? 84 : 76,
+      }}
+      id="overlay-switcher"
+      className={`toolbar-box canvas-overlay-card${collapsed ? " overlay-switcher--collapsed" : ""}`}
+      transition={
+        reduceMotion
+          ? { duration: 0 }
+          : { x: SIDEBAR_SPRING, bottom: PALETTE_LAYOUT_SPRING }
+      }
+    >
+      <button
+        type="button"
+        className="overlay-switcher-collapse"
+        aria-expanded={!collapsed}
+        aria-label={
+          collapsed ? "Expand map overlays" : "Collapse map overlays"
+        }
+        title={collapsed ? "Expand map overlays" : "Collapse map overlays"}
+        onClick={() => setCollapsed((value) => !value)}
+      >
+        {collapsed ? (
+          <ChevronLeft aria-hidden="true" />
+        ) : (
+          <ChevronRight aria-hidden="true" />
+        )}
+      </button>
+
+      <div
+        className={`overlay-switcher-content${activeCount > 0 ? " has-active-count" : ""}`}
+      >
+        <div aria-hidden={!collapsed} className="overlay-switcher-summary">
+            <Layers aria-hidden="true" />
+            <span>Overlays</span>
+            {activeCount > 0 && (
+              <span className="overlay-switcher-count">{activeCount}</span>
+            )}
+        </div>
+        <div
+          aria-hidden={collapsed}
+          aria-label="Map overlays"
+          className="overlay-switcher-items"
+          role="group"
+        >
+            <button
+              type="button"
+              className={`overlay-switcher-item overlay-switcher-item--blank${blankOverlay.enabled ? " is-active" : ""}`}
+              aria-pressed={blankOverlay.enabled}
+              tabIndex={collapsed ? -1 : undefined}
+              onClick={() =>
+                setBlankOverlay((value) => ({
+                  ...value,
+                  enabled: !value.enabled,
+                }))
+              }
+            >
+              <span className="overlay-switcher-visual" aria-hidden="true" />
+              <span>Blank Canvas</span>
+            </button>
+
+            <button
+              type="button"
+              className={`overlay-switcher-item overlay-switcher-item--heatmap${heatmapOverlay.enabled ? " is-active" : ""}`}
+              aria-pressed={heatmapOverlay.enabled}
+              aria-busy={heatmapOverlay.loading}
+              tabIndex={collapsed ? -1 : undefined}
+              onClick={() =>
+                setHeatmapOverlay((value) => ({
+                  ...value,
+                  enabled: !value.enabled,
+                }))
+              }
+            >
+              <span className="overlay-switcher-visual" aria-hidden="true" />
+              <span>Heatmap</span>
+            </button>
+
+            <button
+              type="button"
+              className={`overlay-switcher-item overlay-switcher-item--grid${gridOverlay.enabled ? " is-active" : ""}`}
+              aria-pressed={gridOverlay.enabled}
+              tabIndex={collapsed ? -1 : undefined}
+              onClick={() =>
+                setGridOverlay((value) => ({
+                  ...value,
+                  enabled: !value.enabled,
+                }))
+              }
+            >
+              <span className="overlay-switcher-visual" aria-hidden="true" />
+              <span>Grid</span>
+            </button>
+
+            <button
+              type="button"
+              className={`overlay-switcher-item overlay-switcher-item--pulses${pixelPulses ? " is-active" : ""}`}
+              aria-pressed={pixelPulses}
+              tabIndex={collapsed ? -1 : undefined}
+              onClick={() => setPixelPulses(!pixelPulses)}
+            >
+              <span className="overlay-switcher-visual" aria-hidden="true" />
+              <span>Pulses</span>
+            </button>
+
+            <button
+              type="button"
+              className={`overlay-switcher-item overlay-switcher-item--template${template.enable ? " is-active" : ""}`}
+              aria-pressed={template.enable}
+              tabIndex={collapsed ? -1 : undefined}
+              onClick={handleTemplateToggle}
+            >
+              <span className="overlay-switcher-visual" aria-hidden="true">
+                {template.url ? (
+                  <span
+                    className="overlay-switcher-template-image"
+                    style={{
+                      backgroundImage: `url(${JSON.stringify(template.url)})`,
+                    }}
+                  />
+                ) : (
+                  <ImageIcon />
+                )}
+              </span>
+              <span>Template</span>
+            </button>
+        </div>
+      </div>
+    </motion.div>
+  );
+};
diff --git a/packages/client/src/components/Toolbar/Palette.scss b/packages/client/src/components/Toolbar/Palette.scss
index 786c944..b9bcadd 100644
--- a/packages/client/src/components/Toolbar/Palette.scss
+++ b/packages/client/src/components/Toolbar/Palette.scss
@@ -3,48 +3,119 @@
   position: relative;
 }
 
+.pick-color-cursor-preview {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.pick-color-cursor-preview {
+  position: fixed;
+  z-index: 1;
+  box-sizing: border-box;
+  width: 140px;
+  max-width: calc(100vw - 16px);
+  padding: 1px 2px;
+  pointer-events: none;
+}
+
+.pick-color-preview-swatch {
+  width: 36px;
+  height: 36px;
+  flex: 0 0 36px;
+  border: 1px solid #e5e7eb;
+  border-radius: 6px;
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
+}
+
+.pick-color-preview-details {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.pick-color-preview-name,
+.pick-color-preview-hex {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.pick-color-preview-name {
+  font-size: 0.75rem;
+  font-weight: 650;
+  line-height: 1.15;
+}
+
+.pick-color-preview-hex {
+  color: rgba(17, 24, 39, 0.58);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 0.625rem;
+  line-height: 1;
+}
+
+.dark .pick-color-preview-swatch {
+  border-color: #27272a;
+}
+
+.dark .pick-color-preview-hex {
+  color: rgba(249, 250, 251, 0.58);
+}
+
+.palette-tooltip {
+  border-radius: 5px !important;
+  font-weight: 700;
+}
+
 #pallete {
+  --pallete-outline-color: #e5e7eb;
+  --pallete-active-gap-color: #fff;
+
   display: flex;
   gap: 10px;
-  padding: 10px;
+  background-color: #fff;
+  padding: 1px 5px;
+  border-top: 1px solid var(--pallete-outline-color);
+  box-shadow: 0 -8px 18px rgba(0, 0, 0, 0.16);
   z-index: 10;
   position: relative;
 
   .pallete-colors {
-    // display: flex;
-    // width: 100%;
-    // justify-content: center;
-    // gap: 10px;
     flex-grow: 1;
+    box-sizing: border-box;
+    height: 64px;
+    display: flex;
+    align-items: flex-start;
+    justify-content: safe center;
+    gap: 10px;
     text-align: center;
-    padding: 10px 0;
+    padding: 14px 0 0;
     overflow-x: auto;
     overflow-y: hidden;
     white-space: nowrap;
 
     .pallete-color {
-      margin-left: 10px;
-
-      position: relative;
-
-      &.show-number::before {
-        content: attr(data-number);
-
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        transform: translateY(-50%);
-
-        background-color: #000;
-        color: #fff;
-        border-radius: 10px;
-      }
+      margin-left: 0;
+      vertical-align: top;
     }
   }
 
-  .pallete-color--deselect {
-    display: flex-inline;
+  .pallete-color-grid {
+    min-width: 0;
+    display: grid;
+    grid-template-columns: repeat(
+      var(--regular-palette-columns),
+      36px
+    );
+    grid-auto-rows: 36px;
+    gap: 10px;
+    flex: 0 0 auto;
+  }
+
+  .pallete-color--deselect,
+  .pallete-color--pick {
+    display: inline-flex;
     justify-content: center;
     align-items: center;
     width: 36px;
@@ -57,22 +128,113 @@
 
     border: 0;
     background: transparent;
+    transition: scale 0.25s;
+
+    &:hover {
+      scale: 1.075;
+    }
+  }
+
+  .pallete-color--pick {
+    margin-left: 0;
+    font-size: 1.35rem;
   }
 
   .pallete-color {
+    position: relative;
     width: 36px;
     height: 36px;
-    border: 2px solid;
+    border: 1px solid var(--pallete-outline-color);
     border-radius: 3px;
-    transition: transform 0.25s;
+    overflow: visible;
+    isolation: isolate;
+    transition: scale 0.25s;
     cursor: pointer;
 
     &:hover {
-      transform: scale(1.1);
+      scale: 1.075;
     }
 
     &.active {
-      transform: scale(1.3);
+      scale: 1.2;
+      box-shadow:
+        0 0 0 1px var(--pallete-active-gap-color),
+        0 0 0 2px var(--pallete-outline-color);
+    }
+
+    &.secondary {
+      scale: 1.2;
+      box-shadow: 0 0 0 1px var(--pallete-active-gap-color);
+      outline: none;
+
+      &::after {
+        content: "";
+        position: absolute;
+        inset: -2px;
+        border-radius: 5px;
+        background:
+          linear-gradient(to right, var(--pallete-outline-color) 0 6px, transparent 6px 10px) left top / 10px 1px repeat-x,
+          linear-gradient(to right, var(--pallete-outline-color) 0 6px, transparent 6px 10px) left bottom / 10px 1px repeat-x,
+          linear-gradient(to bottom, var(--pallete-outline-color) 0 6px, transparent 6px 10px) left top / 1px 10px repeat-y,
+          linear-gradient(to bottom, var(--pallete-outline-color) 0 6px, transparent 6px 10px) right top / 1px 10px repeat-y;
+        pointer-events: none;
+      }
+    }
+
+    &.active.secondary {
+      box-shadow:
+        0 0 0 1px var(--pallete-active-gap-color),
+        0 0 0 2px var(--pallete-outline-color);
+
+      &::after {
+        inset: -3px;
+      }
+    }
+
+    .pallete-color-number,
+    .pallete-color-needed {
+      position: absolute;
+      z-index: 2;
+      left: 50%;
+      min-width: 20px;
+      height: 18px;
+      padding: 0 4px;
+      transform: translateX(-50%);
+
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+
+      background-color: white;
+      color: black;
+      border: 1px solid var(--pallete-outline-color);
+      border-radius: 3px;
+      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.24);
+      font-size: 10px;
+      font-weight: 700;
+      font-variant-numeric: tabular-nums;
+      line-height: 1;
+      letter-spacing: 0;
+      pointer-events: none;
+    }
+
+    .pallete-color-number {
+      top: -8px;
+    }
+
+    .pallete-color-needed {
+      bottom: -8px;
+      min-width: 24px;
+    }
+
+    .pallete-color-symbol {
+      position: absolute;
+      z-index: 1;
+      inset: 4px;
+      pointer-events: none;
+      mask-repeat: no-repeat;
+      -webkit-mask-repeat: no-repeat;
+      image-rendering: pixelated;
     }
   }
 
@@ -83,11 +245,134 @@
     width: 100%;
     height: 100%;
     z-index: 1;
-    background-color: rgba(0, 0, 0, 0.5);
+    background-color: rgba(0, 0, 0, 0.68);
     color: #fff;
 
     display: flex;
     justify-content: center;
     align-items: center;
+
+    .pallete-user-overlay-content {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      font-size: 0.95rem;
+      font-weight: 600;
+      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
+    }
+  }
+}
+
+#pallete.pallete--compact {
+  padding-block: 3px;
+
+  .pallete-colors {
+    flex-grow: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    width: 100%;
+    height: 68px;
+    margin-inline: auto;
+    padding: 4px 0;
+    overflow: hidden;
+    white-space: normal;
+  }
+
+  .pallete-color--deselect,
+  .pallete-color--pick {
+    flex: 0 0 36px;
+  }
+
+  .pallete-color-grid {
+    min-width: 0;
+    display: grid;
+    grid-template-columns: repeat(
+      var(--compact-palette-columns),
+      minmax(14px, 26px)
+    );
+    grid-auto-rows: 26px;
+    align-content: center;
+    justify-content: center;
+    gap: 8px 5px;
+  }
+
+  .pallete-color {
+    width: 100%;
+    max-width: 26px;
+    height: auto;
+    aspect-ratio: 1;
+    margin-left: 0;
+    align-self: center;
+    justify-self: center;
+  }
+
+  .pallete-color--pick {
+    margin-left: 0;
+  }
+
+  .pallete-color {
+    &.active,
+    &.secondary {
+      scale: 1.12;
+    }
+
+    .pallete-color-number,
+    .pallete-color-needed {
+      min-width: 16px;
+      height: 14px;
+      padding-inline: 3px;
+      font-size: 8px;
+    }
+
+    .pallete-color-number {
+      top: -4px;
+    }
+
+    .pallete-color-needed {
+      bottom: -4px;
+      min-width: 20px;
+    }
+
+    .pallete-color-symbol {
+      inset: 3px;
+    }
+  }
+}
+
+.dark #pallete .pallete-color .pallete-color-number,
+.dark #pallete .pallete-color .pallete-color-needed {
+  background-color: #000;
+  color: #f5f5f5;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
+}
+
+.dark #pallete .pallete-color.active {
+  box-shadow:
+    0 0 0 1px var(--pallete-active-gap-color),
+    0 0 0 2px var(--pallete-outline-color);
+}
+
+.dark #pallete .pallete-color.secondary {
+  box-shadow: 0 0 0 1px var(--pallete-active-gap-color);
+}
+
+.dark #pallete .pallete-color.active.secondary {
+  box-shadow:
+    0 0 0 1px var(--pallete-active-gap-color),
+    0 0 0 2px var(--pallete-outline-color);
+}
+
+.dark #pallete {
+  --pallete-outline-color: #27272a;
+  --pallete-active-gap-color: #000;
+  border-top-color: var(--pallete-outline-color);
+  background-color: #000;
+}
+
+@media (width < 48rem) {
+  .palette-tooltip {
+    display: none !important;
   }
 }
diff --git a/packages/client/src/components/Toolbar/Palette.tsx b/packages/client/src/components/Toolbar/Palette.tsx
index f6cafc0..71e3747 100644
--- a/packages/client/src/components/Toolbar/Palette.tsx
+++ b/packages/client/src/components/Toolbar/Palette.tsx
@@ -1,16 +1,349 @@
-import { useEffect } from "react";
+import {
+  type CSSProperties,
+  type PointerEvent,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
+import { createPortal } from "react-dom";
+import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
+import { Tooltip } from "@heroui/react";
 import { useAppContext } from "../../contexts/AppContext";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faXmark } from "@fortawesome/free-solid-svg-icons";
+import { useTemplateContext } from "../../contexts/TemplateContext";
+import {
+  PALETTE_LAYOUT_SPRING,
+  useCompactPalette,
+} from "../../hooks/useCompactPalette";
+import { Pipette, X } from "lucide-react";
 import { KeybindManager } from "../../lib/keybinds";
-import { Card, CardBody } from "@heroui/react";
 import useSWR from "swr";
 import { PaletteLib } from "../../lib/palette";
+import { CanvasCore } from "../../lib/canvas";
 import { LoginButton } from "../Login/LoginButton";
+import { showColorPickFeedback } from "../ColorPickFeedback";
+import {
+  Template as TemplateRenderer,
+  TemplateStyle,
+  TEMPLATE_STYLE_COLUMNS,
+  TEMPLATE_STYLE_ROWS,
+} from "../../lib/template";
+
+const getPaletteSymbolBackgroundPosition = (index: number) => {
+  const column = index % TEMPLATE_STYLE_COLUMNS;
+  const row = Math.floor(index / TEMPLATE_STYLE_COLUMNS) % TEMPLATE_STYLE_ROWS;
+  const x = (column / (TEMPLATE_STYLE_COLUMNS - 1)) * 100;
+  const y = (row / (TEMPLATE_STYLE_ROWS - 1)) * 100;
+
+  return `${x}% ${y}%`;
+};
+
+const parseHexColor = (hex: string) => {
+  const rgb = parseInt(hex, 16);
+  return {
+    red: (rgb >> 16) & 0xff,
+    green: (rgb >> 8) & 0xff,
+    blue: rgb & 0xff,
+  };
+};
+
+const clamp = (value: number, min: number, max: number) =>
+  Math.min(Math.max(value, min), max);
+
+const rgbToHsl = ({
+  red,
+  green,
+  blue,
+}: ReturnType<typeof parseHexColor>) => {
+  const r = red / 255;
+  const g = green / 255;
+  const b = blue / 255;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  const delta = max - min;
+  const lightness = (max + min) / 2;
+
+  if (delta === 0) {
+    return { hue: 0, saturation: 0, lightness };
+  }
+
+  const saturation =
+    lightness > 0.5 ? delta / (2 - max - min) : delta / (max + min);
+  let hue = 0;
+
+  switch (max) {
+    case r:
+      hue = (g - b) / delta + (g < b ? 6 : 0);
+      break;
+    case g:
+      hue = (b - r) / delta + 2;
+      break;
+    case b:
+      hue = (r - g) / delta + 4;
+      break;
+  }
+
+  return { hue: hue * 60, saturation, lightness };
+};
+
+const hslToCss = (hue: number, saturation: number, lightness: number) =>
+  `hsl(${Math.round(hue)} ${Math.round(saturation * 100)}% ${Math.round(
+    lightness * 100,
+  )}%)`;
+
+const getPaletteSymbolColor = (hex: string) => {
+  const { hue, saturation, lightness } = rgbToHsl(parseHexColor(hex));
+
+  if (saturation < 0.08) {
+    if (lightness < 0.14) return hslToCss(0, 0, 0.56);
+    if (lightness > 0.86) return hslToCss(0, 0, 0.42);
+
+    return hslToCss(
+      0,
+      0,
+      clamp(
+        lightness > 0.52 ? lightness - 0.34 : lightness + 0.34,
+        0.22,
+        0.78,
+      ),
+    );
+  }
+
+  const symbolLightness =
+    lightness > 0.62
+      ? lightness - 0.42
+      : lightness > 0.5
+        ? lightness - 0.34
+        : lightness < 0.28
+          ? lightness + 0.42
+          : lightness < 0.4
+            ? lightness + 0.36
+            : lightness + 0.3;
+
+  return hslToCss(
+    hue,
+    clamp(saturation * 1.12, 0.38, 0.96),
+    clamp(symbolLightness, 0.14, 0.84),
+  );
+};
+
+const getPaletteSymbolStyle = (index: number, hex: string): CSSProperties => {
+  const backgroundPosition = getPaletteSymbolBackgroundPosition(index);
+  const backgroundSize = `${TEMPLATE_STYLE_COLUMNS * 100}% ${TEMPLATE_STYLE_ROWS * 100}%`;
+
+  return {
+    backgroundColor: getPaletteSymbolColor(hex),
+    maskImage: `url(${TemplateStyle.SYMBOLS})`,
+    maskPosition: backgroundPosition,
+    maskSize: backgroundSize,
+    WebkitMaskImage: `url(${TemplateStyle.SYMBOLS})`,
+    WebkitMaskPosition: backgroundPosition,
+    WebkitMaskSize: backgroundSize,
+  };
+};
+
+type PickColorTarget = "primary" | "secondary";
+type PickColorPreview = {
+  clientX: number;
+  clientY: number;
+  hex: string;
+  name: string;
+};
 
 export const Palette = () => {
+  const reduceMotion = useReducedMotion() ?? false;
+  const paletteLayoutTransition = reduceMotion
+    ? { duration: 0 }
+    : PALETTE_LAYOUT_SPRING;
   const { config, user, cursor, settings } = useAppContext<true>();
+  const compactPalette = useCompactPalette();
+  const template = useTemplateContext();
   const meta = useSWR<{ login: "INHIBIT" | "NORMAL" | "TRUST" }>("/api/info");
+  const [templateColorCounts, setTemplateColorCounts] = useState<
+    Map<number, number>
+  >(() => new Map());
+  const [pickColorMode, setPickColorMode] = useState(false);
+  const [pickColorPreview, setPickColorPreview] =
+    useState<PickColorPreview | null>(null);
+  const hasActiveTemplate = template.enable && !!template.url;
+  const shouldUseTemplateColorCounts =
+    hasActiveTemplate &&
+    (settings.get["template.hideUnusedColors"] ||
+      settings.get["template.pixelCounts"]);
+
+  const visiblePaletteColors = useMemo(() => {
+    const colors = config.pallete.colors.map((color, index) => ({
+      color,
+      index,
+      needed: templateColorCounts.get(color.id) ?? 0,
+    }));
+
+    if (
+      !shouldUseTemplateColorCounts ||
+      !settings.get["template.hideUnusedColors"]
+    ) {
+      return colors;
+    }
+
+    return colors.filter(
+      ({ color, needed }) =>
+        needed > 0 ||
+        color.id === cursor.color ||
+        color.id === cursor.secondaryColor,
+    );
+  }, [
+    config.pallete.colors,
+    cursor.color,
+    cursor.secondaryColor,
+    shouldUseTemplateColorCounts,
+    settings.get["template.hideUnusedColors"],
+    templateColorCounts,
+  ]);
+
+  const handleSelectPrimaryColor = (color: number) => {
+    if (cursor.color === color) {
+      PaletteLib.setSelectedColor(undefined);
+      return;
+    }
+
+    if (cursor.secondaryColor === color) {
+      PaletteLib.setSecondaryColor(undefined);
+    }
+
+    PaletteLib.setSelectedColor(color);
+  };
+
+  const handleSelectSecondaryColor = (color: number) => {
+    if (cursor.secondaryColor === color) {
+      PaletteLib.setSecondaryColor(undefined);
+      return;
+    }
+
+    if (cursor.color === color) {
+      PaletteLib.setSelectedColor(undefined);
+    }
+
+    PaletteLib.setSecondaryColor(color);
+  };
+
+  const isCoordInCanvas = (x: number, y: number) =>
+    x >= 0 &&
+    y >= 0 &&
+    x < config.canvas.size[0] &&
+    y < config.canvas.size[1];
+
+  const getTemplatePixelColor = (x: number, y: number) => {
+    const renderer = TemplateRenderer.instance;
+
+    if (
+      !template.enable ||
+      !renderer ||
+      template.x === undefined ||
+      template.y === undefined ||
+      x < template.x ||
+      y < template.y
+    ) {
+      return -1;
+    }
+
+    const templatePixel = renderer.getPixel(x - template.x, y - template.y);
+    if (!templatePixel) return -1;
+
+    return PaletteLib.getColorFromHex(templatePixel.slice(1))?.id ?? -1;
+  };
+
+  const getPickedColor = (clientX: number, clientY: number) => {
+    const canvas = CanvasCore.get(false);
+
+    if (!canvas) {
+      console.warn("[Palette#getPickedColor] canvas instance does not exist");
+      return;
+    }
+
+    let x: number;
+    let y: number;
+
+    try {
+      [x, y] = canvas.screenToPos(clientX, clientY);
+    } catch (error) {
+      console.warn(
+        "[Palette#getPickedColor] could not convert screen position",
+        error,
+      );
+      return;
+    }
+
+    if (!isCoordInCanvas(x, y)) return 0;
+
+    const templateColor = getTemplatePixelColor(x, y);
+    if (templateColor !== -1) return templateColor;
+
+    return canvas.getPixel(x, y)?.color ?? 1;
+  };
+
+  const handlePickColorAt = (
+    clientX: number,
+    clientY: number,
+    target: PickColorTarget,
+  ) => {
+    const pickedColor = getPickedColor(clientX, clientY);
+    if (pickedColor === undefined) return false;
+
+    if (target === "secondary") {
+      handleSelectSecondaryColor(pickedColor);
+      return true;
+    }
+
+    handleSelectPrimaryColor(pickedColor);
+    return true;
+  };
+
+  useEffect(() => {
+    const renderer = TemplateRenderer.instance;
+    const canvas = CanvasCore.get();
+
+    const refreshTemplateColorCounts = () => {
+      if (
+        !shouldUseTemplateColorCounts ||
+        !renderer ||
+        !canvas ||
+        template.x === undefined ||
+        template.y === undefined
+      ) {
+        setTemplateColorCounts(new Map());
+        return;
+      }
+
+      setTemplateColorCounts(
+        renderer.getNeededPaletteColorCounts({
+          x: template.x,
+          y: template.y,
+          canvasWidth: config.canvas.size[0],
+          canvasHeight: config.canvas.size[1],
+          getCanvasPixelColor: (x, y) => canvas.getPixel(x, y)?.color,
+        }),
+      );
+    };
+
+    refreshTemplateColorCounts();
+
+    if (!shouldUseTemplateColorCounts || !renderer || !canvas) return;
+
+    renderer.on("paletteColorCounts", refreshTemplateColorCounts);
+    canvas.on("pixelsChanged", refreshTemplateColorCounts);
+
+    return () => {
+      renderer.off("paletteColorCounts", refreshTemplateColorCounts);
+      canvas.off("pixelsChanged", refreshTemplateColorCounts);
+    };
+  }, [
+    config.canvas.size[0],
+    config.canvas.size[1],
+    shouldUseTemplateColorCounts,
+    template.url,
+    template.width,
+    template.x,
+    template.y,
+  ]);
 
   useEffect(() => {
     // TODO: move keybind listening to specified module
@@ -18,69 +351,327 @@ export const Palette = () => {
       PaletteLib.setSelectedColor(undefined);
     };
 
+    const handleSwapColors = () => {
+      PaletteLib.swapSelectedColors();
+    };
+
+    const handlePickColorKeybind = ({
+      clientX,
+      clientY,
+    }: {
+      clientX: number;
+      clientY: number;
+    }) => {
+      if (clientX >= 0 && clientY >= 0) return;
+
+      setPickColorPreview(null);
+      setPickColorMode(true);
+    };
+
     KeybindManager.addListener("DESELECT_COLOR", handleDeselect);
+    KeybindManager.addListener("SWAP_COLORS", handleSwapColors);
+    KeybindManager.addListener("PICK_COLOR", handlePickColorKeybind);
 
     return () => {
       KeybindManager.removeListener("DESELECT_COLOR", handleDeselect);
+      KeybindManager.removeListener("SWAP_COLORS", handleSwapColors);
+      KeybindManager.removeListener("PICK_COLOR", handlePickColorKeybind);
     };
   }, []);
 
+  useEffect(() => {
+    if (!pickColorMode || typeof document === "undefined") return;
+
+    document.body.classList.add("is-picking-color");
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        setPickColorMode(false);
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+      document.body.classList.remove("is-picking-color");
+    };
+  }, [pickColorMode]);
+
+  const handlePickColorPointerDown = (event: PointerEvent<HTMLDivElement>) => {
+    event.preventDefault();
+    event.stopPropagation();
+
+    if (event.button === 1 || event.button === 2) {
+      window.addEventListener(
+        event.button === 1 ? "auxclick" : "contextmenu",
+        (followUpEvent) => followUpEvent.preventDefault(),
+        { capture: true, once: true },
+      );
+    }
+
+    const didPickColor = handlePickColorAt(
+      event.clientX,
+      event.clientY,
+      event.button === 2 ? "secondary" : "primary",
+    );
+    if (didPickColor) {
+      showColorPickFeedback(event.clientX, event.clientY);
+    }
+    setPickColorMode(false);
+  };
+
+  const handlePickColorPointerMove = (event: PointerEvent<HTMLDivElement>) => {
+    const pickedColor = getPickedColor(event.clientX, event.clientY);
+    const paletteColor = config.pallete.colors.find(
+      (color) => color.id === pickedColor,
+    );
+
+    if (!paletteColor) {
+      setPickColorPreview(null);
+      return;
+    }
+
+    setPickColorPreview({
+      clientX: event.clientX,
+      clientY: event.clientY,
+      hex: paletteColor.hex,
+      name: paletteColor.name,
+    });
+  };
+
+  const pickColorOverlay =
+    typeof document === "undefined"
+      ? null
+      : createPortal(
+          <AnimatePresence>
+            {pickColorMode && (
+              <motion.div
+                key="pick-color"
+                animate={{ opacity: 1 }}
+                aria-label="Pick color mode"
+                className="pointer-events-auto fixed inset-0 z-[10000] cursor-crosshair overflow-hidden"
+                exit={{ opacity: 0 }}
+                initial={{ opacity: 0 }}
+                onAuxClick={(event) => event.preventDefault()}
+                onContextMenu={(event) => event.preventDefault()}
+                onPointerDown={handlePickColorPointerDown}
+                onPointerMove={handlePickColorPointerMove}
+                role="application"
+                style={{ background: "rgba(14, 165, 233, 0.05)" }}
+                transition={{ duration: reduceMotion ? 0 : 0.12 }}
+              >
+                <div className="canvas-overlay-card pointer-events-none absolute left-4 top-4 z-10 px-3 py-2">
+                  <div className="flex items-center gap-2 text-sm font-semibold leading-none">
+                    <Pipette aria-hidden="true" size={18} />
+                    <span>Pick Color</span>
+                  </div>
+                  <div className="mt-1 text-xs text-black/65 dark:text-white/65">
+                    Click on a pixel to copy its color to your brush.
+                  </div>
+                </div>
+                {pickColorPreview && (
+                  <div
+                    className="canvas-overlay-card pick-color-cursor-preview"
+                    style={{
+                      left:
+                        pickColorPreview.clientX +
+                        (pickColorPreview.clientX > window.innerWidth - 190
+                          ? -16
+                          : 16),
+                      top:
+                        pickColorPreview.clientY +
+                        (pickColorPreview.clientY > window.innerHeight - 72
+                          ? -16
+                          : 16),
+                      transform:
+                        "translate(" +
+                        (pickColorPreview.clientX > window.innerWidth - 190
+                          ? "-100%"
+                          : "0") +
+                        ", " +
+                        (pickColorPreview.clientY > window.innerHeight - 72
+                          ? "-100%"
+                          : "0") +
+                        ")",
+                    }}
+                  >
+                    <span
+                      aria-hidden="true"
+                      className="pick-color-preview-swatch"
+                      style={{
+                        backgroundColor: "#" + pickColorPreview.hex,
+                      }}
+                    />
+                    <span className="pick-color-preview-details">
+                      <span className="pick-color-preview-name">
+                        {pickColorPreview.name}
+                      </span>
+                      <span className="pick-color-preview-hex">
+                        {"#" + pickColorPreview.hex}
+                      </span>
+                    </span>
+                  </div>
+                )}
+              </motion.div>
+            )}
+          </AnimatePresence>,
+          document.body,
+        );
+
   return (
     <>
-      <div id="pallete" className="bg-[#fff] dark:bg-[#000]">
-        <div className="pallete-colors">
-          <button
-            aria-label="Deselect Color"
-            className="pallete-color--deselect"
-            title="Deselect Color"
-            onClick={() => PaletteLib.setSelectedColor(undefined)}
+      {pickColorOverlay}
+      <motion.div
+        id="pallete"
+        className={compactPalette ? "pallete--compact" : undefined}
+        layout={!reduceMotion}
+        layoutDependency={compactPalette}
+        transition={paletteLayoutTransition}
+      >
+        <motion.div
+          className="pallete-colors"
+          layout={!reduceMotion}
+          layoutDependency={compactPalette}
+          transition={paletteLayoutTransition}
+        >
+          <Tooltip
+            disableAnimation={reduceMotion}
+            closeDelay={0}
+            content="Deselect Color"
+            delay={250}
+            placement="top"
+            classNames={{
+              content: "canvas-overlay-card palette-tooltip px-2 py-1 text-xs",
+            }}
           >
-            <FontAwesomeIcon icon={faXmark} />
-          </button>
-          {config.pallete.colors.map((color, i) => (
-            <button
+            <motion.button
+              layout={!reduceMotion}
+              layoutDependency={compactPalette}
+              transition={paletteLayoutTransition}
+              aria-label="Deselect Color"
+              className="pallete-color--deselect"
+              onClick={() => PaletteLib.setSelectedColor(undefined)}
+              onContextMenu={(event) => {
+                event.preventDefault();
+                PaletteLib.setSecondaryColor(undefined);
+              }}
+            >
+              <X aria-hidden="true" size={28} />
+            </motion.button>
+          </Tooltip>
+          <motion.div
+            layout={!reduceMotion}
+            layoutDependency={compactPalette}
+            transition={paletteLayoutTransition}
+            className="pallete-color-grid"
+            style={
+              {
+                "--regular-palette-columns": visiblePaletteColors.length,
+                "--compact-palette-columns": Math.ceil(
+                  visiblePaletteColors.length / 2,
+                ),
+              } as CSSProperties
+            }
+          >
+            {visiblePaletteColors.map(({ color, index, needed }) => (
+            <Tooltip
+              disableAnimation={reduceMotion}
               key={color.id}
-              data-number={i}
-              aria-label={color.name}
-              className={[
-                "pallete-color",
-                color.id === cursor.color && "active",
-                settings.get["palette.colors"] && "show-number",
-              ]
-                .filter((a) => a)
-                .join(" ")}
-              style={{
-                backgroundColor: "#" + color.hex,
+              closeDelay={0}
+              content={color.name}
+              delay={250}
+              placement="top"
+              classNames={{
+                content: "canvas-overlay-card palette-tooltip px-2 py-1 text-xs",
               }}
-              title={color.name}
+            >
+              <motion.button
+                layout={!reduceMotion}
+                layoutDependency={compactPalette}
+                transition={paletteLayoutTransition}
+                aria-label={color.name}
+                className={[
+                  "pallete-color",
+                  color.id === cursor.color && "active",
+                  color.id === cursor.secondaryColor && "secondary",
+                ]
+                  .filter((a) => a)
+                  .join(" ")}
+                style={{
+                  backgroundColor: "#" + color.hex,
+                }}
+                onClick={() => {
+                  handleSelectPrimaryColor(color.id);
+                }}
+                onContextMenu={(event) => {
+                  event.preventDefault();
+                  handleSelectSecondaryColor(color.id);
+                }}
+              >
+                {settings.get["palette.colors"] && (
+                  <span aria-hidden="true" className="pallete-color-number">
+                    {index}
+                  </span>
+                )}
+                {settings.get["palette.symbols"] && (
+                  <span
+                    aria-hidden="true"
+                    className="pallete-color-symbol"
+                    style={getPaletteSymbolStyle(index, color.hex)}
+                  />
+                )}
+                {hasActiveTemplate &&
+                  settings.get["template.pixelCounts"] &&
+                  needed > 0 && (
+                    <span aria-hidden="true" className="pallete-color-needed">
+                      {needed}
+                    </span>
+                  )}
+              </motion.button>
+            </Tooltip>
+            ))}
+          </motion.div>
+          <Tooltip
+            disableAnimation={reduceMotion}
+            closeDelay={0}
+            content="Pick Color"
+            delay={250}
+            placement="top"
+            classNames={{
+              content: "canvas-overlay-card palette-tooltip px-2 py-1 text-xs",
+            }}
+          >
+            <motion.button
+              layout={!reduceMotion}
+              layoutDependency={compactPalette}
+              transition={paletteLayoutTransition}
+              aria-label="Pick Color"
+              className="pallete-color--pick"
               onClick={() => {
-                PaletteLib.setSelectedColor(color.id);
+                setPickColorPreview(null);
+                setPickColorMode(true);
               }}
-            ></button>
-          ))}
-        </div>
-
+            >
+              <Pipette aria-hidden="true" size={18} />
+            </motion.button>
+          </Tooltip>
+        </motion.div>
         {!user && (
           <div className="pallete-user-overlay">
-            <Card>
-              <CardBody>
-                {meta.isLoading ? (
-                  <>
-                    <em>Loading...</em>
-                  </>
-                ) : meta.data?.login === "INHIBIT" ? (
-                  <>Logging in is disabled</>
-                ) : (
-                  <div className="flex gap-3 items-center">
-                    You are not logged in
-                    <LoginButton />
-                  </div>
-                )}
-              </CardBody>
-            </Card>
+            {meta.isLoading ? (
+              <em>Loading...</em>
+            ) : meta.data?.login === "INHIBIT" ? (
+              <>Logging in is disabled</>
+            ) : (
+              <div className="pallete-user-overlay-content">
+                <span>You are not logged in</span>
+                <LoginButton />
+              </div>
+            )}
           </div>
         )}
-      </div>
+      </motion.div>
     </>
   );
 };
diff --git a/packages/client/src/components/Toolbar/ShareModal.tsx b/packages/client/src/components/Toolbar/ShareModal.tsx
index dd707dc..979ea91 100644
--- a/packages/client/src/components/Toolbar/ShareModal.tsx
+++ b/packages/client/src/components/Toolbar/ShareModal.tsx
@@ -11,8 +11,7 @@ import {
 } from "@heroui/react";
 import React, { useCallback, useEffect, useRef, type MouseEvent } from "react";
 import { Button } from "../core/Button";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faCopy } from "@fortawesome/free-solid-svg-icons";
+import { Copy } from "lucide-react";
 import { toast } from "react-toastify";
 import { useTemplateContext } from "@/contexts/TemplateContext";
 
@@ -49,7 +48,7 @@ export const ShareModal = () => {
           : Dialog.dispatch({ action: "CLOSE_DIALOG", dialogId: "SHARE_MODAL" })
       }
     >
-      <ModalContent>
+      <ModalContent className="canvas-overlay-card">
         {() => (
           <>
             <ModalHeader className="flex flex-col gap-1">Share</ModalHeader>
@@ -98,7 +97,7 @@ const CopyButton = ({
     <Button
       variant="flat"
       onClick={copy}
-      startContent={<FontAwesomeIcon icon={faCopy} />}
+      startContent={<Copy aria-hidden="true" size={16} />}
       as={Link}
       href={url ?? undefined}
       {...props}
diff --git a/packages/client/src/components/Toolbar/ToolbarWrapper.tsx b/packages/client/src/components/Toolbar/ToolbarWrapper.tsx
index 76642aa..3ccc907 100644
--- a/packages/client/src/components/Toolbar/ToolbarWrapper.tsx
+++ b/packages/client/src/components/Toolbar/ToolbarWrapper.tsx
@@ -4,6 +4,7 @@ import { useTemplateContext } from "../../contexts/TemplateContext";
 import { CaptchaStatusBar } from "../Captcha/CaptchaStatusBar";
 import { MobileTemplateButtons } from "../Templating/MobileTemplateButtons";
 import { CanvasMeta } from "./CanvasMeta";
+import { OverlaySwitcher } from "./OverlaySwitcher";
 import { Palette } from "./Palette";
 import { UndoButton } from "./UndoButton";
 
@@ -21,6 +22,7 @@ export const ToolbarWrapper = ({
   return (
     <div id="toolbar" {...props}>
       <CanvasMeta />
+      <OverlaySwitcher />
       <UndoButton />
       <CaptchaStatusBar />
       {showMobileTools && <MobileTemplateButtons />}
diff --git a/packages/client/src/components/Welcome/WelcomeModal.tsx b/packages/client/src/components/Welcome/WelcomeModal.tsx
index 6443015..eb1ec49 100644
--- a/packages/client/src/components/Welcome/WelcomeModal.tsx
+++ b/packages/client/src/components/Welcome/WelcomeModal.tsx
@@ -44,7 +44,7 @@ export const WelcomeModal = () => {
       isDismissable={false}
       placement="center"
     >
-      <ModalContent>
+      <ModalContent className="canvas-overlay-card">
         {(onClose) => (
           <>
             <ModalHeader>Welcome</ModalHeader>
diff --git a/packages/client/src/components/core/Button.tsx b/packages/client/src/components/core/Button.tsx
index 3f66deb..698fef1 100644
--- a/packages/client/src/components/core/Button.tsx
+++ b/packages/client/src/components/core/Button.tsx
@@ -7,6 +7,7 @@ export const Button = ({
   onClick,
   children,
   variant,
+  className,
   ...props
 }: ButtonProps & {
   silent?: boolean;
@@ -16,10 +17,12 @@ export const Button = ({
   showAnchorIcon?: boolean;
 }) => {
   const Audio = useAudio();
+  const buttonClassName = ["canvas-button", className].filter(Boolean).join(" ");
 
   return (
     <ButtonBase
       {...props}
+      className={buttonClassName}
       variant={variant ?? "faded"}
       onPress={(e) => {
         onPress?.(e);
diff --git a/packages/client/src/contexts/AppContext.tsx b/packages/client/src/contexts/AppContext.tsx
index a54a169..a6bc735 100644
--- a/packages/client/src/contexts/AppContext.tsx
+++ b/packages/client/src/contexts/AppContext.tsx
@@ -17,7 +17,18 @@ import { KeybindManager } from "../lib/keybinds";
 type Whoami = RestAPI.components["schemas"]["Whoami"];
 
 interface ISettings {
+  "capture.cameraFlash"(val: boolean): boolean;
+  "keybindings.enabled"(val: boolean): boolean;
+  "palette.compact"(val: boolean): boolean;
   "palette.colors"(val: boolean): boolean;
+  "palette.symbols"(val: boolean): boolean;
+  "ui.adaptElementsToSidebar"(val: boolean): boolean;
+  "ui.compactPaletteForSidebar"(val: boolean): boolean;
+  "ui.compactButtons"(val: boolean): boolean;
+  "ui.showOverlaysCard"(val: boolean): boolean;
+  "ui.showThemeToggle"(val: boolean): boolean;
+  "template.pixelCounts"(val: boolean): boolean;
+  "template.hideUnusedColors"(val: boolean): boolean;
 }
 
 type SettingsAction<T extends keyof ISettings> = {
@@ -80,6 +91,7 @@ interface ICursor {
   x?: number;
   y?: number;
   color?: number;
+  secondaryColor?: number;
 }
 
 interface IMapOverlay {
@@ -157,7 +169,18 @@ export const AppContext = ({ children }: PropsWithChildren) => {
       };
     },
     {
+      "capture.cameraFlash": true,
+      "keybindings.enabled": true,
+      "palette.compact": false,
       "palette.colors": false,
+      "palette.symbols": false,
+      "ui.adaptElementsToSidebar": true,
+      "ui.compactPaletteForSidebar": true,
+      "ui.compactButtons": false,
+      "ui.showOverlaysCard": true,
+      "ui.showThemeToggle": true,
+      "template.pixelCounts": false,
+      "template.hideUnusedColors": false,
     },
   );
 
@@ -192,12 +215,22 @@ export const AppContext = ({ children }: PropsWithChildren) => {
   };
 
   useEffect(() => {
-    PaletteLib.getInstance().on("selectedColor", (color) => {
+    const palette = PaletteLib.getInstance();
+    const handleSelectedColor = (color: number | undefined) => {
       setCursor((c) => ({
         ...c,
         color,
       }));
-    });
+    };
+    const handleSecondaryColor = (secondaryColor: number | undefined) => {
+      setCursor((c) => ({
+        ...c,
+        secondaryColor,
+      }));
+    };
+
+    palette.on("selectedColor", handleSelectedColor);
+    palette.on("secondaryColor", handleSecondaryColor);
 
     oapi.GET("/whoami").then(({ data }) => {
       setWhoami(data);
@@ -255,6 +288,8 @@ export const AppContext = ({ children }: PropsWithChildren) => {
     KeybindManager.on("TOGGLE_BLANK", toggleBlankOverlay);
 
     return () => {
+      palette.off("selectedColor", handleSelectedColor);
+      palette.off("secondaryColor", handleSecondaryColor);
       KeybindManager.off("TOGGLE_BLANK", toggleBlankOverlay);
 
       Network.off("user", handleUser);
diff --git a/packages/client/src/contexts/CaptureContext.tsx b/packages/client/src/contexts/CaptureContext.tsx
index 334b82a..43c2dba 100644
--- a/packages/client/src/contexts/CaptureContext.tsx
+++ b/packages/client/src/contexts/CaptureContext.tsx
@@ -10,8 +10,7 @@ import {
   useState,
 } from "react";
 import { createPortal } from "react-dom";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faDrawPolygon } from "@fortawesome/free-solid-svg-icons";
+import { Scan } from "lucide-react";
 import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
 import { toast } from "react-toastify";
 import { useAppContext } from "./AppContext";
@@ -102,6 +101,8 @@ const createSnapshotPreview = (snapshot: CanvasSnapshot): SnapshotPreview => {
 
 const CaptureSnapshotFeedback = () => {
   const prefersReducedMotion = useReducedMotion();
+  const { settings } = useAppContext();
+  const cameraFlashEnabled = settings.get["capture.cameraFlash"];
   const pendingSnapshot = useRef<CanvasSnapshot | null>(null);
   const snapshotDelay = useRef<number | undefined>(undefined);
   const [snapshotFlashId, setSnapshotFlashId] = useState<number>();
@@ -117,7 +118,7 @@ const CaptureSnapshotFeedback = () => {
       snapshotDelay.current = undefined;
     };
     const handleSnapshot = (snapshot: CanvasSnapshot) => {
-      setSnapshotFlashId(snapshot.id);
+      setSnapshotFlashId(cameraFlashEnabled ? snapshot.id : undefined);
       pendingSnapshot.current?.save();
       pendingSnapshot.current = null;
       clearSnapshotDelay();
@@ -152,7 +153,7 @@ const CaptureSnapshotFeedback = () => {
       pendingSnapshot.current?.save();
       pendingSnapshot.current = null;
     };
-  }, [prefersReducedMotion]);
+  }, [cameraFlashEnabled, prefersReducedMotion]);
 
   const handlePolaroidComplete = (snapshot: CanvasSnapshot) => {
     snapshot.save();
@@ -164,7 +165,7 @@ const CaptureSnapshotFeedback = () => {
   return (
     <>
       <AnimatePresence>
-        {snapshotFlashId && (
+        {cameraFlashEnabled && snapshotFlashId && (
           <motion.div
             key={snapshotFlashId + "-flash"}
             className="pointer-events-none fixed inset-0 z-[88] bg-white"
@@ -604,9 +605,9 @@ export const CaptureContext = ({ children }: PropsWithChildren) => {
                 style={{ background: "rgba(14, 165, 233, 0.06)" }}
                 transition={{ duration: 0.12 }}
               >
-                <div className="pointer-events-none absolute left-4 top-4 z-10 rounded-md border border-black/15 bg-white px-3 py-2 text-black shadow-lg shadow-black/15 dark:border-white/20 dark:bg-black dark:text-white">
+                <div className="canvas-overlay-card pointer-events-none absolute left-4 top-4 z-10 px-3 py-2">
                   <div className="flex items-center gap-2 text-sm font-semibold leading-none">
-                    <FontAwesomeIcon icon={faDrawPolygon} />
+                    <Scan aria-hidden="true" size={16} />
                     <span>Capture Region</span>
                   </div>
                   <div className="mt-1 text-xs text-black/65 dark:text-white/65">
diff --git a/packages/client/src/contexts/PanelContext.tsx b/packages/client/src/contexts/PanelContext.tsx
index 27033ec..d61de58 100644
--- a/packages/client/src/contexts/PanelContext.tsx
+++ b/packages/client/src/contexts/PanelContext.tsx
@@ -19,7 +19,14 @@ export const usePanel = () => useContext(context);
 
 const PanelContext = ({ children }: React.PropsWithChildren) => {
   const [state, dispatch] = useReducer<IPanelState, [PanelActions]>(
-    (state, [key, value]) => ({ ...state, [key]: value }),
+    (state, [key, value]) => {
+      const nextState = { ...state, [key]: value };
+
+      if (value && key === "settings") nextState.whois = undefined;
+      if (value && key === "whois") nextState.settings = undefined;
+
+      return nextState;
+    },
     {},
   );
 
diff --git a/packages/client/src/contexts/TemplateContext.tsx b/packages/client/src/contexts/TemplateContext.tsx
index b54a3f0..731a72d 100644
--- a/packages/client/src/contexts/TemplateContext.tsx
+++ b/packages/client/src/contexts/TemplateContext.tsx
@@ -10,6 +10,7 @@ import { type IRouterData, Router } from "../lib/router";
 import { KeybindManager } from "../lib/keybinds";
 import { type TemplateStyle } from "../lib/template";
 import { WebGLUtils } from "@/lib/webgl";
+import { useAppContext } from "./AppContext";
 
 interface ITemplate {
   /**
@@ -51,6 +52,9 @@ const templateContext = createContext<ITemplate>({} as any);
 export const useTemplateContext = () => useContext(templateContext);
 
 export const TemplateContext = ({ children }: PropsWithChildren) => {
+  const {
+    settings: { set: setSetting },
+  } = useAppContext();
   const routerData = Router.get();
   const [enable, setEnable] = useState(!!routerData.template?.url);
   const [url, setURL] = useState<string | undefined>(routerData.template?.url);
@@ -67,6 +71,11 @@ export const TemplateContext = ({ children }: PropsWithChildren) => {
 
   const initAt = useRef<number>(Date.now());
 
+  useEffect(() => {
+    setSetting({ key: "palette.colors", value: style === "NUMBERS" });
+    setSetting({ key: "palette.symbols", value: style === "SYMBOLS" });
+  }, [setSetting, style]);
+
   useEffect(() => {
     initAt.current = Date.now();
 
diff --git a/packages/client/src/hooks/useCompactPalette.ts b/packages/client/src/hooks/useCompactPalette.ts
new file mode 100644
index 0000000..f9d4f83
--- /dev/null
+++ b/packages/client/src/hooks/useCompactPalette.ts
@@ -0,0 +1,31 @@
+import { useAppContext } from "../contexts/AppContext";
+import { usePanel } from "../contexts/PanelContext";
+import { useModerator } from "../Moderator/Moderator";
+import { useIsMobile } from "./useIsMobile";
+
+export const PALETTE_LAYOUT_SPRING = {
+  type: "spring",
+  stiffness: 360,
+  damping: 34,
+} as const;
+
+export const useCompactPalette = () => {
+  const { settings } = useAppContext();
+  const Panel = usePanel();
+  const { state: moderatorState } = useModerator();
+  const isMobile = useIsMobile();
+  const sidebarOpen = Boolean(
+    Panel.state.info ||
+      Panel.state.settings ||
+      Panel.state.whois ||
+      moderatorState.showMenu ||
+      moderatorState.inspectUser,
+  );
+
+  return Boolean(
+    settings.get["palette.compact"] ||
+      (!isMobile &&
+        sidebarOpen &&
+        settings.get["ui.compactPaletteForSidebar"]),
+  );
+};
diff --git a/packages/client/src/hooks/useIsMobile.ts b/packages/client/src/hooks/useIsMobile.ts
new file mode 100644
index 0000000..183f57e
--- /dev/null
+++ b/packages/client/src/hooks/useIsMobile.ts
@@ -0,0 +1,23 @@
+import { useEffect, useState } from "react";
+
+const MOBILE_MEDIA_QUERY = "(width < 48rem)";
+
+const getIsMobile = () =>
+  typeof window !== "undefined" &&
+  window.matchMedia(MOBILE_MEDIA_QUERY).matches;
+
+export const useIsMobile = () => {
+  const [isMobile, setIsMobile] = useState(getIsMobile);
+
+  useEffect(() => {
+    const mediaQuery = window.matchMedia(MOBILE_MEDIA_QUERY);
+    const handleChange = (event: MediaQueryListEvent) => {
+      setIsMobile(event.matches);
+    };
+
+    mediaQuery.addEventListener("change", handleChange);
+    return () => mediaQuery.removeEventListener("change", handleChange);
+  }, []);
+
+  return isMobile;
+};
diff --git a/packages/client/src/index.html b/packages/client/src/index.html
index 52cb8c4..28a0cbe 100644
--- a/packages/client/src/index.html
+++ b/packages/client/src/index.html
@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
     <title>Canvas</title>
+    <link rel="icon" type="image/webp" href="./assets/logo.webp" />
 
     <link rel="stylesheet" href="./style.css" />
     <link rel="stylesheet" href="./style.scss" />
diff --git a/packages/client/src/lib/canvas.ts b/packages/client/src/lib/canvas.ts
index 39be18d..8d52075 100644
--- a/packages/client/src/lib/canvas.ts
+++ b/packages/client/src/lib/canvas.ts
@@ -79,6 +79,8 @@ interface CanvasEvents {
   cursorPos: (position: IPosition) => void;
   canvasReady: () => void;
   snapshot: (snapshot: CanvasSnapshot) => void;
+  pixelsChanged: () => void;
+  pixelPlaced: (position: { clientX: number; clientY: number }) => void;
 }
 
 export class CanvasCore extends EventEmitter<CanvasEvents> {
@@ -131,7 +133,9 @@ export class CanvasCore extends EventEmitter<CanvasEvents> {
 
   setCanvas(canvas: HTMLCanvasElement | null) {
     console.log("setCanvas called in canvascore", canvas);
+    this.canvas?.removeEventListener("contextmenu", this.handleContextMenu);
     this.canvas = canvas;
+    this.canvas?.addEventListener("contextmenu", this.handleContextMenu);
     this.loadRenderer();
 
     if (canvas) {
@@ -214,9 +218,7 @@ export class CanvasCore extends EventEmitter<CanvasEvents> {
     const sourceHeight = sourceBottom - sourceTop;
 
     if (sourceWidth <= 0 || sourceHeight <= 0) {
-      toast.info(
-        `Unable to capture ${targetName}: area is outside the canvas`,
-      );
+      toast.info(`Unable to capture ${targetName}: area is outside the canvas`);
       return;
     }
 
@@ -522,28 +524,53 @@ export class CanvasCore extends EventEmitter<CanvasEvents> {
 
   previousCanvasClicks: { x: number; y: number }[] = [];
 
+  private handleContextMenu = (event: MouseEvent) => {
+    event.preventDefault();
+  };
+
   handleMouseDown = (e: ClickEvent) => {
-    if (!e.alt && !e.ctrl && !e.meta && !e.shift && e.button === "LCLICK") {
-      const [x, y] = this.screenToPos(e.clientX, e.clientY);
-      this.place(x, y);
-    } else {
-      // KeybindManager.handleInteraction({
-      //   key: e.button,
-      //   alt: e.alt,
-      //   ctrl: e.ctrl,
-      //   meta: e.meta,
-      //   shift: e.meta
-      // }, )
+    const noMods = !e.alt && !e.ctrl && !e.meta && !e.shift;
+
+    if (e.button === "MCLICK") {
+      KeybindManager.handleInteraction(
+        {
+          key: "MCLICK",
+          alt: e.alt,
+          ctrl: e.ctrl,
+          meta: e.meta,
+          shift: e.shift,
+        },
+        {
+          clientX: e.clientX,
+          clientY: e.clientY,
+        },
+      );
+      return;
     }
 
-    if (e.button === "RCLICK" && !e.alt && !e.ctrl && !e.meta && !e.shift) {
+    if (noMods && (e.button === "LCLICK" || e.button === "RCLICK")) {
       const [x, y] = this.screenToPos(e.clientX, e.clientY);
 
-      // keep track of the last X pixels right clicked
-      // used by the ModModal to determine areas selected
+      const placement =
+        e.button === "LCLICK"
+          ? this.place(x, y)
+          : this.place(x, y, PaletteLib.getSecondaryColor()?.id);
+
+      void placement.then((placed) => {
+        if (placed) {
+          this.emit("pixelPlaced", {
+            clientX: e.clientX,
+            clientY: e.clientY,
+          });
+        }
+      });
 
-      this.previousCanvasClicks.push({ x, y });
-      this.previousCanvasClicks = this.previousCanvasClicks.slice(-2);
+      if (e.button === "RCLICK") {
+        // keep track of the last X pixels right clicked
+        // used by the ModModal to determine areas selected
+        this.previousCanvasClicks.push({ x, y });
+        this.previousCanvasClicks = this.previousCanvasClicks.slice(-2);
+      }
     }
   };
 
@@ -581,7 +608,7 @@ export class CanvasCore extends EventEmitter<CanvasEvents> {
         // we still store a copy of the pixels in this instance for non-rendering functions
         this.pixels[x + "_" + y] = {
           type: "full",
-          color: palette?.id || -1,
+          color: palette?.id ?? -1,
         };
 
         serializeBuild.push({
@@ -594,6 +621,7 @@ export class CanvasCore extends EventEmitter<CanvasEvents> {
     }
 
     getRenderer().usePixels(serializeBuild);
+    this.emit("pixelsChanged");
   };
 
   handleBatch = (
@@ -620,7 +648,7 @@ export class CanvasCore extends EventEmitter<CanvasEvents> {
         // we still store a copy of the pixels in this instance for non-rendering functions
         this.pixels[canvasX + "_" + canvasY] = {
           type: "full",
-          color: palette?.id || -1,
+          color: palette?.id ?? -1,
         };
 
         serializeBuild.push({
@@ -632,6 +660,7 @@ export class CanvasCore extends EventEmitter<CanvasEvents> {
     }
 
     getRenderer().usePixels(serializeBuild, true);
+    this.emit("pixelsChanged");
   };
 
   handlePixel = ({ x, y, color }: Pixel) => {
@@ -644,6 +673,7 @@ export class CanvasCore extends EventEmitter<CanvasEvents> {
     const palette = PaletteLib.getColor(color);
 
     getRenderer().usePixel({ x, y, hex: palette?.hex || "null" });
+    this.emit("pixelsChanged");
   };
 
   handlePixelLastPlaced = (time: number) => {
@@ -660,8 +690,8 @@ export class CanvasCore extends EventEmitter<CanvasEvents> {
     this.cursor.color = color;
   }
 
-  place(x: number, y: number) {
-    if (!PaletteLib.getSelectedColor()) return;
+  place(x: number, y: number, color = PaletteLib.getSelectedColor()?.id) {
+    if (color === undefined) return Promise.resolve(false);
 
     // TODO: redo this as the server now verifies placements differently
     // if (this.lastPlace) {
@@ -671,13 +701,13 @@ export class CanvasCore extends EventEmitter<CanvasEvents> {
     //   }
     // }
 
-    Network.socket
+    return Network.socket
       .emitWithAck(
         "place",
         {
           x,
           y,
-          color: PaletteLib.getSelectedColor()!.id,
+          color,
         },
         this.bypassCooldown,
       )
@@ -686,10 +716,11 @@ export class CanvasCore extends EventEmitter<CanvasEvents> {
           this.handlePixel(ack.data);
           this.lastPlace = Date.now();
           Network.emit("placeSuccessful");
+          return true;
         } else {
           console.warn(
             "Attempted to place pixel",
-            { x, y, color: PaletteLib.getSelectedColor()!.id },
+            { x, y, color },
             "and got error",
             ack,
           );
@@ -718,6 +749,8 @@ export class CanvasCore extends EventEmitter<CanvasEvents> {
             default:
               toast.error("Error while placing pixel: " + ack.error);
           }
+
+          return false;
         }
       });
   }
diff --git a/packages/client/src/lib/keybinds.ts b/packages/client/src/lib/keybinds.ts
index 6125197..c84882b 100644
--- a/packages/client/src/lib/keybinds.ts
+++ b/packages/client/src/lib/keybinds.ts
@@ -59,6 +59,33 @@ const KEYBINDS = enforceObjectType({
       key: "KeyG",
     },
   ],
+  TOGGLE_UI: [
+    {
+      key: "KeyU",
+      ctrl: false,
+      alt: false,
+      meta: false,
+      shift: false,
+    },
+  ],
+  TOGGLE_SETTINGS: [
+    {
+      key: "KeyO",
+      ctrl: false,
+      alt: false,
+      meta: false,
+      shift: false,
+    },
+  ],
+  TOGGLE_INFO: [
+    {
+      key: "KeyI",
+      ctrl: false,
+      alt: false,
+      meta: false,
+      shift: false,
+    },
+  ],
   TOGGLE_MOD_MENU: [
     {
       key: "KeyM",
@@ -69,10 +96,26 @@ const KEYBINDS = enforceObjectType({
       key: "Escape",
     },
   ],
+  SWAP_COLORS: [
+    {
+      key: "KeyX",
+      ctrl: false,
+      alt: false,
+      meta: false,
+      shift: false,
+    },
+  ],
   PICK_COLOR: [
     {
       key: "MCLICK",
     },
+    {
+      key: "KeyC",
+      ctrl: false,
+      alt: false,
+      meta: false,
+      shift: false,
+    },
   ],
   MOD_SELECT: [
     {
@@ -127,6 +170,8 @@ const KEYBINDS = enforceObjectType({
 class KeybindManager_ extends EventEmitter<{
   [k in keyof typeof KEYBINDS]: (args: EmittedKeybind) => void;
 }> {
+  private enabled = true;
+
   constructor() {
     super();
     // setup listeners
@@ -148,6 +193,8 @@ class KeybindManager_ extends EventEmitter<{
   }
 
   handleKeydown = (e: KeyboardEvent) => {
+    if (!this.enabled) return;
+
     const blacklistedElements = ["INPUT"];
 
     if (e.target instanceof HTMLElement) {
@@ -162,6 +209,8 @@ class KeybindManager_ extends EventEmitter<{
   };
 
   handleKeyup = (e: KeyboardEvent) => {
+    if (!this.enabled) return;
+
     // discard if in an input element
 
     const blacklistedElements = ["INPUT"];
@@ -250,6 +299,10 @@ class KeybindManager_ extends EventEmitter<{
     return KEYBINDS[key];
   }
 
+  setEnabled(enabled: boolean) {
+    this.enabled = enabled;
+  }
+
   getKeybinds() {
     return { ...KEYBINDS };
   }
diff --git a/packages/client/src/lib/palette.ts b/packages/client/src/lib/palette.ts
index 0859e1c..8a68370 100644
--- a/packages/client/src/lib/palette.ts
+++ b/packages/client/src/lib/palette.ts
@@ -23,10 +23,12 @@ const _static = <
 
 interface PaletteEvents {
   selectedColor(color: number | undefined): void;
+  secondaryColor(color: number | undefined): void;
 }
 
 export class PaletteLib extends EventEmitter<PaletteEvents> {
   #selectedColor?: number;
+  #secondaryColor?: number;
 
   getColor(colorId: number): PaletteColor | undefined {
     const config = CanvasCore.get().getConfig();
@@ -39,13 +41,38 @@ export class PaletteLib extends EventEmitter<PaletteEvents> {
   }
 
   getSelectedColor(): PaletteColor | undefined {
-    if (!this.#selectedColor) return undefined;
+    if (this.#selectedColor === undefined) return undefined;
     return this.getColor(this.#selectedColor);
   }
 
+  setSecondaryColor(color: number | undefined) {
+    this.#secondaryColor = color;
+    this.emit("secondaryColor", color);
+  }
+
+  getSecondaryColor(): PaletteColor | undefined {
+    if (this.#secondaryColor === undefined) return undefined;
+    return this.getColor(this.#secondaryColor);
+  }
+
+  swapSelectedColors() {
+    const selectedColor = this.#selectedColor;
+    const secondaryColor = this.#secondaryColor;
+
+    this.#selectedColor = secondaryColor;
+    this.#secondaryColor = selectedColor;
+    this.emit("selectedColor", this.#selectedColor);
+    this.emit("secondaryColor", this.#secondaryColor);
+  }
+
   getColorFromHex(hex: string): PaletteColor | undefined {
+    const normalizedHex = hex.trim().replace(/^#/, "").toLowerCase();
+    if (!normalizedHex || normalizedHex === "null") return undefined;
+
     const config = CanvasCore.get().getConfig();
-    return config.pallete.colors.find((c) => c.hex === hex);
+    return config.pallete.colors.find(
+      (c) => c.hex.trim().replace(/^#/, "").toLowerCase() === normalizedHex,
+    );
   }
 
   // -- hoist to static --
@@ -58,5 +85,8 @@ export class PaletteLib extends EventEmitter<PaletteEvents> {
   static getColorFromHex = _static(PaletteLib, "getColorFromHex");
   static setSelectedColor = _static(PaletteLib, "setSelectedColor");
   static getSelectedColor = _static(PaletteLib, "getSelectedColor");
+  static setSecondaryColor = _static(PaletteLib, "setSecondaryColor");
+  static getSecondaryColor = _static(PaletteLib, "getSecondaryColor");
+  static swapSelectedColors = _static(PaletteLib, "swapSelectedColors");
   static getColor = _static(PaletteLib, "getColor");
 }
diff --git a/packages/client/src/lib/template.ts b/packages/client/src/lib/template.ts
index 1e2e547..95f86fd 100644
--- a/packages/client/src/lib/template.ts
+++ b/packages/client/src/lib/template.ts
@@ -18,6 +18,7 @@ interface TemplateEvents {
     value: ITemplateOptions[T],
   ): void;
   autoDetectWidth(width: number): void;
+  paletteColorCounts(counts: Map<number, number>): void;
 }
 
 interface ITemplateOptions {
@@ -28,7 +29,15 @@ interface ITemplateOptions {
   y: number | undefined;
 }
 
-const TemplateStyle = {
+interface NeededPaletteColorCountOptions {
+  x: number;
+  y: number;
+  canvasWidth: number;
+  canvasHeight: number;
+  getCanvasPixelColor: (x: number, y: number) => number | undefined;
+}
+
+export const TemplateStyle = {
   SOURCE: "",
   ONE_TO_ONE:
     "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAGklEQVQoz2P8//8/AymAiYFEMKphVMPQ0QAAVW0DHZ8uFaIAAAAASUVORK5CYII=",
@@ -47,8 +56,10 @@ const TemplateStyle = {
 export type TemplateStyle = keyof typeof TemplateStyle;
 export const TemplateStyles = Object.keys(TemplateStyle);
 
-const STYLES_Y = 16;
-const STYLES_X = 16;
+export const TEMPLATE_STYLE_ROWS = 16;
+export const TEMPLATE_STYLE_COLUMNS = 16;
+const STYLES_Y = TEMPLATE_STYLE_ROWS;
+const STYLES_X = TEMPLATE_STYLE_COLUMNS;
 
 export class Template extends EventEmitter<TemplateEvents> {
   static instance: Template;
@@ -190,8 +201,22 @@ export class Template extends EventEmitter<TemplateEvents> {
       return undefined;
     }
 
-    const width = this.context.drawingBufferWidth;
-    const height = this.context.drawingBufferHeight;
+    const {
+      display: { width, height },
+    } = this.getDimentions();
+
+    if (
+      !Number.isFinite(width) ||
+      !Number.isFinite(height) ||
+      width <= 0 ||
+      height <= 0 ||
+      x < 0 ||
+      y < 0 ||
+      x >= width ||
+      y >= height
+    ) {
+      return undefined;
+    }
 
     const arr = new Uint8Array(4 * width * height);
     this.context.bindFramebuffer(
@@ -199,10 +224,6 @@ export class Template extends EventEmitter<TemplateEvents> {
       this.framebuffers.intermediate,
     );
 
-    if (x < 0 || y < 0 || x > width || y > height) {
-      return undefined;
-    }
-
     this.context.readPixels(
       0,
       0,
@@ -226,8 +247,8 @@ export class Template extends EventEmitter<TemplateEvents> {
     }
 
     const [r, g, b, a] = pixels.slice(
-      4 * (y * this.context.drawingBufferWidth + x),
-      4 * (y * this.context.drawingBufferWidth + x) + 4,
+      4 * (y * width + x),
+      4 * (y * width + x) + 4,
     );
 
     if (a === 254) return undefined;
@@ -235,8 +256,134 @@ export class Template extends EventEmitter<TemplateEvents> {
     return rgbToHex(r, g, b);
   }
 
+  getPaletteColorCounts() {
+    return new Map(this.paletteColorCounts);
+  }
+
+  getNeededPaletteColorCounts({
+    x,
+    y,
+    canvasWidth,
+    canvasHeight,
+    getCanvasPixelColor,
+  }: NeededPaletteColorCountOptions) {
+    const counts = new Map<number, number>();
+    const templatePixels = this.palettePixels;
+
+    if (
+      !templatePixels ||
+      !Number.isFinite(x) ||
+      !Number.isFinite(y) ||
+      !Number.isFinite(canvasWidth) ||
+      !Number.isFinite(canvasHeight) ||
+      canvasWidth <= 0 ||
+      canvasHeight <= 0
+    ) {
+      return counts;
+    }
+
+    const left = Math.floor(x);
+    const top = Math.floor(y);
+    const startX = Math.max(0, -left);
+    const startY = Math.max(0, -top);
+    const endX = Math.min(templatePixels.width, canvasWidth - left);
+    const endY = Math.min(templatePixels.height, canvasHeight - top);
+
+    if (startX >= endX || startY >= endY) return counts;
+
+    for (let templateY = startY; templateY < endY; templateY++) {
+      const canvasY = top + templateY;
+      const row = templateY * templatePixels.width;
+
+      for (let templateX = startX; templateX < endX; templateX++) {
+        const paletteIndex = templatePixels.indexes[row + templateX];
+        if (paletteIndex === 254 || paletteIndex === 255) continue;
+
+        const colorId = this.config.pallete.colors[paletteIndex]?.id;
+        if (colorId === undefined) continue;
+
+        const canvasX = left + templateX;
+        if (getCanvasPixelColor(canvasX, canvasY) === colorId) continue;
+
+        counts.set(colorId, (counts.get(colorId) ?? 0) + 1);
+      }
+    }
+
+    return counts;
+  }
+
+  private updatePaletteColorCounts() {
+    const counts = new Map<number, number>();
+
+    if (!this.context) {
+      this.paletteColorCounts = counts;
+      this.palettePixels = undefined;
+      this.emit("paletteColorCounts", new Map(counts));
+      return;
+    }
+
+    const {
+      display: { width, height },
+    } = this.getDimentions();
+
+    if (
+      !Number.isFinite(width) ||
+      !Number.isFinite(height) ||
+      width <= 0 ||
+      height <= 0
+    ) {
+      this.paletteColorCounts = counts;
+      this.palettePixels = undefined;
+      this.emit("paletteColorCounts", new Map(counts));
+      return;
+    }
+
+    const pixels = new Uint8Array(4 * width * height);
+    const palettePixels = new Uint8Array(width * height);
+    palettePixels.fill(255);
+
+    this.context.bindFramebuffer(
+      this.context.FRAMEBUFFER,
+      this.framebuffers.intermediate,
+    );
+    this.context.readPixels(
+      0,
+      0,
+      width,
+      height,
+      this.context.RGBA,
+      this.context.UNSIGNED_BYTE,
+      pixels,
+    );
+    this.context.bindFramebuffer(
+      this.context.FRAMEBUFFER,
+      this.framebuffers.main,
+    );
+
+    for (let i = 0; i < pixels.length; i += 4) {
+      const paletteIndex = pixels[i + 3];
+      if (paletteIndex === 254 || paletteIndex === 255) continue;
+
+      const colorId = this.config.pallete.colors[paletteIndex]?.id;
+      if (colorId === undefined) continue;
+
+      const sourcePixel = i / 4;
+      const sourceX = sourcePixel % width;
+      const sourceY = Math.floor(sourcePixel / width);
+      const targetPixel = (height - sourceY - 1) * width + sourceX;
+
+      palettePixels[targetPixel] = paletteIndex;
+      counts.set(colorId, (counts.get(colorId) ?? 0) + 1);
+    }
+
+    this.paletteColorCounts = counts;
+    this.palettePixels = { width, height, indexes: palettePixels };
+    this.emit("paletteColorCounts", new Map(counts));
+  }
+
   rasterizeTemplate() {
     this.downscaleTemplate();
+    this.updatePaletteColorCounts();
     this.stylizeTemplate();
   }
 
@@ -310,6 +457,10 @@ export class Template extends EventEmitter<TemplateEvents> {
     intermediate: WebGLFramebuffer | null;
     main: WebGLFramebuffer | null;
   } = {} as any;
+  private paletteColorCounts = new Map<number, number>();
+  private palettePixels:
+    | { width: number; height: number; indexes: Uint8Array }
+    | undefined;
   private buffers: { vertex: WebGLBuffer | null } = {} as any;
   private programs: {
     downscaling: { unconverted: WebGLProgram; nearestCustom: WebGLProgram };
@@ -609,7 +760,14 @@ export class Template extends EventEmitter<TemplateEvents> {
     const {
       display: { width, height },
     } = dimentions;
-    if (!this.context || width === 0 || height === 0) return;
+    if (
+      !this.context ||
+      !Number.isFinite(width) ||
+      !Number.isFinite(height) ||
+      width <= 0 ||
+      height <= 0
+    )
+      return;
 
     const downscaleWidth = dimentions.source.width / dimentions.display.width;
     const downscaleHeight =
@@ -671,7 +829,13 @@ export class Template extends EventEmitter<TemplateEvents> {
 
     const { internal, display } = this.getDimentions();
 
-    if (this.context == null || internal.width === 0 || internal.height === 0) {
+    if (
+      this.context == null ||
+      !Number.isFinite(internal.width) ||
+      !Number.isFinite(internal.height) ||
+      internal.width <= 0 ||
+      internal.height <= 0
+    ) {
       return;
     }
 
diff --git a/packages/client/src/style.scss b/packages/client/src/style.scss
index d999324..131b3c5 100644
--- a/packages/client/src/style.scss
+++ b/packages/client/src/style.scss
@@ -1,9 +1,160 @@
 @import "tailwindcss";
 
+.canvas-button {
+  border: 1px solid #e5e7eb !important;
+  border-radius: 8px !important;
+  background-color: #fff !important;
+  color: #111827 !important;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
+  font-weight: 550;
+  letter-spacing: 0;
+  transition:
+    transform 0.2s ease,
+    box-shadow 0.2s ease !important;
+}
+
+.canvas-button:hover,
+.canvas-button[data-hover="true"] {
+  background-color: #fff !important;
+  color: #111827 !important;
+  opacity: 1 !important;
+  transform: translateY(-1px);
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important;
+}
+
+.canvas-button:active,
+.canvas-button[data-pressed="true"] {
+  transform: translateY(0);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) !important;
+}
+
+.canvas-button:disabled,
+.canvas-button[data-disabled="true"] {
+  opacity: 0.55 !important;
+  transform: none;
+}
+
+.dark .canvas-button {
+  border-color: #27272a !important;
+  background-color: #000 !important;
+  color: #f9fafb !important;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22) !important;
+}
+
+.dark .canvas-button:hover,
+.dark .canvas-button[data-hover="true"] {
+  background-color: #000 !important;
+  color: #f9fafb !important;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26) !important;
+}
+
+.canvas-button.is-active,
+.canvas-button.is-active:hover,
+.canvas-button.is-active[data-hover="true"] {
+  border-color: #9ca3af !important;
+  background-color: #f3f4f6 !important;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
+}
+
+.dark .canvas-button.is-active,
+.dark .canvas-button.is-active:hover,
+.dark .canvas-button.is-active[data-hover="true"] {
+  border-color: #52525b !important;
+  background-color: #000 !important;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.26) !important;
+}
+
+.canvas-overlay-card {
+  border: 1px solid #e5e7eb !important;
+  border-radius: 8px !important;
+  background-color: #fff !important;
+  color: #111827 !important;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
+  font-weight: 500;
+  transition: box-shadow 0.2s ease !important;
+}
+
+.dark .canvas-overlay-card {
+  border-color: #27272a !important;
+  background-color: #000 !important;
+  color: #f9fafb !important;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22) !important;
+}
+.dark #canvas-meta .canvas-meta-icon,
+.dark #canvas-meta .canvas-meta--cursor-pos {
+  color: #e5e7eb;
+}
+
+.event-dates-header-card {
+  width: fit-content;
+}
+
+.event-dates-header-card-body {
+  padding: 10px 14px !important;
+
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 10px;
+
+  .event-dates-header-logo {
+    width: 44px;
+    height: 44px;
+    flex: 0 0 44px;
+    border-radius: 8px;
+    object-fit: contain;
+  }
+
+  .event-dates-header-copy {
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    text-align: left;
+  }
+
+  h2,
+  h3 {
+    margin: 0;
+    letter-spacing: 0;
+  }
+
+  h2 {
+    font-size: 1.125rem;
+    font-weight: 650;
+    line-height: 1.15;
+  }
+
+  h3 {
+    margin-top: 3px;
+    color: #6b7280;
+    font-size: 0.8125rem;
+    font-weight: 500;
+    line-height: 1.25;
+  }
+}
+
+.dark .event-dates-header-card-body h3 {
+  color: #d1d5db;
+}
+
 * {
   box-sizing: border-box;
 }
 
+a[href]:not([aria-disabled="true"]),
+button:not(:disabled):not([data-disabled="true"]),
+[role="button"]:not([aria-disabled="true"]):not([data-disabled="true"]),
+[role="menuitem"]:not([aria-disabled="true"]):not([data-disabled="true"]) {
+  cursor: pointer;
+}
+
+button:disabled,
+[aria-disabled="true"],
+[data-disabled="true"] {
+  cursor: not-allowed;
+}
+
 html,
 body {
   overscroll-behavior: contain;
@@ -19,6 +170,19 @@ body {
     "lsidebar main    rsidebar"
     "toolbar  toolbar toolbar";
   overflow: hidden;
+
+  > * {
+    transition: opacity 120ms ease;
+  }
+}
+
+#main-ui.main-ui--hidden,
+body.is-picking-color #main-ui {
+  pointer-events: none;
+
+  > * {
+    opacity: 0;
+  }
 }
 
 body.is-capturing-region #main-ui {
@@ -36,6 +200,13 @@ body.is-capturing-region #main-ui {
   }
 }
 
+@media (width < 48rem) {
+  .show-overlays-card-setting,
+  .sidebar-adaptation-setting {
+    display: none !important;
+  }
+}
+
 header#main-header {
   // position: fixed;
   // top: 0;
@@ -60,34 +231,170 @@ header#main-header {
   }
 }
 
-.user-card {
-  background-color: #444;
-  color: #fff;
-  border-radius: 10px;
-  padding: 5px 10px;
+@media (width < 48rem) {
+  .header-left {
+    min-width: 0;
+    padding-right: 4px !important;
+  }
 
-  display: flex;
-  flex-direction: row;
-  gap: 10px;
+  .header-right {
+    padding-left: 4px !important;
+  }
 
-  &--overview {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    line-height: 1;
+  .event-dates-header-card-body {
+    padding: 7px 9px !important;
+    gap: 7px;
+
+    .event-dates-header-logo {
+      display: none;
+    }
+
+    h2 {
+      font-size: 0.875rem;
+    }
+
+    h3 {
+      margin-top: 2px;
+      font-size: 0.6875rem;
+    }
+  }
+
+  .header-user-avatar {
+    width: 32px !important;
+    height: 32px !important;
+  }
+
+  .header-user-card {
+    min-width: 13rem !important;
+  }
+
+  .header-user-name {
+    font-size: 0.75rem !important;
+    line-height: 1.1 !important;
+  }
+
+  .header-user-description {
+    font-size: 0.625rem !important;
+    line-height: 1.1 !important;
+  }
+}
+
+.header-lower-priority {
+  display: contents;
+}
+
+.header-right-actions {
+  width: 100%;
+  align-self: flex-end;
+  justify-content: flex-end;
+}
+
+.header-action-button {
+  min-width: 5rem !important;
+  transition:
+    transform 0.2s ease,
+    box-shadow 0.2s ease,
+    min-width 0.2s ease,
+    padding 0.2s ease,
+    gap 0.2s ease !important;
+}
+
+.header-button-label {
+  max-width: 7rem;
+  overflow: hidden;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  opacity: 1;
+  white-space: nowrap;
+  transition:
+    max-width 0.2s ease,
+    opacity 0.14s ease,
+    transform 0.2s ease;
+
+  &--medium {
+    max-width: 4rem;
+  }
+
+  &--short {
+    max-width: 3rem;
+  }
+
+  &--share {
+    max-width: 5rem;
+  }
+}
+
+.header-action-button--compact {
+  min-width: 2.5rem !important;
+  padding-inline: 0.625rem !important;
+  gap: 0 !important;
+
+  .header-button-label {
+    max-width: 0;
+    opacity: 0;
+    transform: translateX(-4px);
+  }
+}
+
+
+.header-more-menu {
+  display: none;
+}
+
+.header-mobile-only-action {
+  display: none !important;
+}
+
+@media (width < 80rem) {
+  .header-lower-priority {
+    display: none;
+  }
 
-    span:first-of-type {
-      font-size: 130%;
-      margin-bottom: 5px;
+  .header-more-menu {
+    display: block;
+  }
+}
+
+
+@media (width < 48rem) {
+  .header-mobile-overflow-action {
+    display: none !important;
+  }
+
+  .header-mobile-only-action {
+    display: flex !important;
+  }
+
+  .header-right {
+    gap: 6px !important;
+  }
+
+  .header-right-actions {
+    gap: 6px !important;
+  }
+
+  .header-right .header-action-button {
+    min-width: 4.25rem !important;
+    min-height: 2rem !important;
+    height: 2rem !important;
+    padding-inline: 0.5rem !important;
+    gap: 0.25rem !important;
+    font-size: 0.75rem !important;
+
+    svg {
+      width: 15px;
+      height: 15px;
     }
   }
 
-  img {
-    width: 64px;
-    height: 64px;
+  .header-right .header-action-button--compact {
+    min-width: 2rem !important;
+    padding-inline: 0.4375rem !important;
+  }
 
-    background-color: #aaa;
-    border-radius: 50%;
+  .header-right .header-button-label {
+    font-size: 0.75rem;
   }
 }
 
@@ -110,19 +417,137 @@ header#main-header {
   transform: translateY(-100%);
 }
 
+.mobile-template-toggle {
+  display: flex;
+  align-items: center;
+  padding: 6px 8px;
+  font-size: 0.75rem;
+  line-height: 1.25;
+}
+
+#template-settings {
+  scroll-margin-top: 5rem;
+}
+
 #canvas-meta {
-  top: -10px;
+  position: fixed;
+  top: auto;
+  bottom: 76px;
   left: 10px;
-  background-color: rgba(0, 0, 0, 0.5);
-  color: #fff;
-  border-radius: 5px;
-  padding: 5px;
+  transform: none;
+  z-index: 11;
+  min-width: 15rem;
+  padding: 8px 10px;
 
   display: flex;
   flex-direction: column;
+  gap: 0;
+  font-size: 0.875rem;
+  line-height: 1.25;
+  transition: min-width 0.18s ease-out;
+
+  &.canvas-meta--collapsed {
+    min-width: 0;
+    transition-delay: 0.08s;
+  }
+
+  .canvas-meta-collapse {
+    position: absolute;
+    top: 0;
+    left: 50%;
+    width: 24px;
+    height: 18px;
+    padding: 0;
+    transform: translate(-50%, -50%);
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    border: 1px solid #e5e7eb;
+    border-radius: 9999px;
+    background: #fff;
+    color: #6b7280;
+    cursor: pointer;
+
+    svg {
+      width: 14px;
+      height: 14px;
+    }
+
+    &:hover {
+      color: #111827;
+    }
+
+    &:focus-visible {
+      outline: 2px solid currentColor;
+      outline-offset: 2px;
+    }
+  }
+
+  .canvas-meta-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    min-height: 20px;
+
+    + .canvas-meta-row {
+      margin-top: 6px;
+    }
+  }
+
+  .canvas-meta-collapsible-row {
+    max-width: 30rem;
+    max-height: 2rem;
+    overflow: hidden;
+    opacity: 1;
+    transition:
+      max-width 0.18s ease-out,
+      max-height 0.18s ease-out,
+      margin 0.18s ease-out,
+      opacity 0.1s ease-out 0.16s;
+
+    &.is-collapsed {
+      max-width: 0;
+      max-height: 0;
+      min-height: 0;
+      margin-top: 0;
+      opacity: 0;
+      transition:
+        opacity 0.08s ease-out,
+        max-width 0.18s ease-out 0.08s,
+        max-height 0.18s ease-out 0.08s,
+        margin 0.18s ease-out 0.08s;
+      pointer-events: none;
+
+      + .canvas-meta-row {
+        margin-top: 0;
+      }
+    }
+  }
+
+  .canvas-meta-icon {
+    width: 16px;
+    flex: 0 0 16px;
+    color: #6b7280;
+  }
 
   .canvas-meta--cursor-pos {
-    font-style: italic;
+    margin-left: 8px;
+    color: #6b7280;
+  }
+}
+
+.dark #canvas-meta .canvas-meta-collapse {
+  border-color: #27272a;
+  background: #000;
+  color: #e5e7eb;
+}
+
+@media (width < 48rem) {
+  #canvas-meta {
+    min-width: 13.5rem;
+    font-size: 0.75rem;
   }
 }
 
@@ -143,6 +568,165 @@ main {
   }
 }
 
+#board {
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.24);
+}
+
+.canvas-cursor-preview {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: visible;
+  background-color: var(--cursor-preview-color);
+  opacity: 0.5;
+  transition:
+    opacity 0.16s ease,
+    box-shadow 0.16s ease;
+
+  &::before,
+  &::after {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+  }
+
+  &::before {
+    content: "";
+    background: rgba(0, 0, 0, 0.42);
+    transform: scaleY(0);
+    transform-origin: bottom;
+  }
+
+  &::after {
+    content: "?";
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #fff;
+    font-size: 0.72px;
+    font-weight: 800;
+    line-height: 1;
+    opacity: 0;
+    text-shadow: 0 0 0.12px #000;
+    transform: scale(0.45);
+    transition:
+      opacity 0.16s ease,
+      transform 0.16s ease;
+  }
+
+  &.is-inspect-holding {
+    opacity: 0.78;
+    box-shadow:
+      0 0 0 0.07px rgba(255, 255, 255, 0.9),
+      0 0 0 0.14px rgba(0, 0, 0, 0.58);
+
+    &::before {
+      animation: inspect-hold-fill var(--inspect-hold-duration) linear forwards;
+    }
+  }
+
+  &.is-inspect-ready {
+    opacity: 0.92;
+
+    &::after {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+}
+
+body.is-picking-color .canvas-cursor-preview {
+  opacity: 0;
+}
+
+.color-picked-feedback {
+  position: fixed;
+  z-index: 10001;
+  color: #fff;
+  font-size: 0.75rem;
+  font-weight: 700;
+  line-height: 1;
+  pointer-events: none;
+  text-shadow:
+    0 1px 1px rgba(0, 0, 0, 0.6),
+    0 0 2px rgba(0, 0, 0, 0.32);
+  white-space: nowrap;
+  animation: color-picked-feedback 850ms ease-out forwards;
+}
+
+@keyframes color-picked-feedback {
+  0% {
+    opacity: 0;
+    transform: translate(-50%, -65%) scale(0.86);
+  }
+
+  18% {
+    opacity: 1;
+    transform: translate(-50%, -125%) scale(1);
+  }
+
+  68% {
+    opacity: 1;
+    transform: translate(-50%, -145%) scale(1);
+  }
+
+  100% {
+    opacity: 0;
+    transform: translate(-50%, -190%) scale(0.96);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .canvas-button,
+  .canvas-overlay-card,
+  .header-button-label,
+  #main-ui > *,
+  .canvas-cursor-preview,
+  .canvas-cursor-preview::after,
+  #pallete .pallete-color,
+  #pallete .pallete-color--deselect,
+  #pallete .pallete-color--pick,
+  #canvas-meta .canvas-meta-collapsible-row,
+  #overlay-switcher .overlay-switcher-content,
+  #overlay-switcher .overlay-switcher-items,
+  #overlay-switcher .overlay-switcher-summary,
+  #overlay-switcher .overlay-switcher-visual {
+    transition: none !important;
+  }
+
+  .canvas-button:hover,
+  .canvas-button[data-hover="true"],
+  #pallete .pallete-color:hover,
+  #pallete .pallete-color.active,
+  #pallete .pallete-color.secondary,
+  #overlay-switcher .overlay-switcher-item:hover .overlay-switcher-visual,
+  #overlay-switcher .overlay-switcher-item.is-active
+    .overlay-switcher-visual,
+  .canvas-cursor-preview.is-inspect-ready::after {
+    transform: none !important;
+  }
+
+  #pallete .pallete-color:hover,
+  #pallete .pallete-color.active,
+  #pallete .pallete-color.secondary,
+  #pallete .pallete-color--deselect:hover,
+  #pallete .pallete-color--pick:hover {
+    scale: none !important;
+  }
+
+  .canvas-cursor-preview.is-inspect-holding::before,
+  .color-picked-feedback,
+  .palette-tooltip {
+    animation: none !important;
+  }
+}
+
+@keyframes inspect-hold-fill {
+  to {
+    transform: scaleY(1);
+  }
+}
+
 .pixelate {
   image-rendering: optimizeSpeed;
   -ms-interpolation-mode: nearest-neighbor;
@@ -225,6 +809,25 @@ main {
   }
 }
 
+.canvas-sidebar {
+  border-color: #e5e7eb;
+  border-style: solid;
+  border-width: 0;
+
+  &--left {
+    border-right-width: 1px;
+  }
+
+  &--right {
+    border-left-width: 1px;
+  }
+}
+
+.dark .canvas-sidebar {
+  border-color: #27272a;
+}
+
+
 @keyframes pixel-pulse {
   from {
     width: 50px;
@@ -239,5 +842,6 @@ main {
 }
 
 @import "./components/Toolbar/Palette.scss";
+@import "./components/Toolbar/OverlaySwitcher.scss";
 @import "./components/Templating/Template.scss";
 @import "./board.scss";
diff --git a/packages/lib/src/renderer/PanZoom.ts b/packages/lib/src/renderer/PanZoom.ts
index 6f9ea61..da1d83f 100644
--- a/packages/lib/src/renderer/PanZoom.ts
+++ b/packages/lib/src/renderer/PanZoom.ts
@@ -75,8 +75,29 @@ interface MouseState {
    * timestamp of mouse down
    */
   mouseDown: number | null;
+
+  /**
+   * client coordinates where the current mouse interaction started
+   */
+  startX: number;
+  startY: number;
+
+  /**
+   * greatest distance travelled during the current mouse interaction
+   */
+  maxDistance: number;
+
+  /**
+   * prevent the browser click generated after a drag from reaching consumers
+   */
+  suppressClick: boolean;
+  holdTimer: ReturnType<typeof setTimeout> | null;
+  holdActive: boolean;
 }
 
+const MOUSE_CLICK_MOVE_THRESHOLD = 5;
+export const MOUSE_LONG_PRESS_DELAY = 500;
+
 interface ISetup {
   /**
    * Scale limits
@@ -112,6 +133,9 @@ export interface ViewportMoveEvent {
 }
 
 interface PanZoomEvents {
+  inspectHoldStart: () => void;
+  inspectHoldReady: () => void;
+  inspectHoldEnd: () => void;
   longPress: (x: number, y: number) => void;
   doubleTap: (e: TouchEvent) => void;
   click: (e: ClickEvent) => void;
@@ -154,6 +178,12 @@ export class PanZoom extends EventEmitter<PanZoomEvents> {
 
     this.mouse = {
       mouseDown: null,
+      startX: 0,
+      startY: 0,
+      maxDistance: 0,
+      suppressClick: false,
+      holdTimer: null,
+      holdActive: false,
     };
 
     this.panning = new Panning(this);
@@ -552,6 +582,16 @@ export class PanZoom extends EventEmitter<PanZoomEvents> {
     document.addEventListener("mouseup", this._mouse_mouseup, {
       passive: false,
     });
+
+    // Browser click events are dispatched after mouseup. Capture them before
+    // document-level keybind handlers can treat a completed pan as a click.
+    document.addEventListener(
+      "mousedown",
+      this._mouse_resetClickSuppression,
+      true,
+    );
+    document.addEventListener("click", this._mouse_click, true);
+    document.addEventListener("auxclick", this._mouse_click, true);
   }
 
   unregisterMouseEvents() {
@@ -566,6 +606,14 @@ export class PanZoom extends EventEmitter<PanZoomEvents> {
     document.removeEventListener("mousemove", this._mouse_mousemove);
 
     document.removeEventListener("mouseup", this._mouse_mouseup);
+
+    document.removeEventListener(
+      "mousedown",
+      this._mouse_resetClickSuppression,
+      true,
+    );
+    document.removeEventListener("click", this._mouse_click, true);
+    document.removeEventListener("auxclick", this._mouse_click, true);
   }
 
   /**
@@ -621,6 +669,27 @@ export class PanZoom extends EventEmitter<PanZoomEvents> {
     e.stopPropagation();
 
     this.mouse.mouseDown = Date.now();
+    this.mouse.startX = e.clientX;
+    this.mouse.startY = e.clientY;
+    this.mouse.maxDistance = 0;
+    this.mouse.suppressClick = false;
+
+    this.endInspectHold();
+    if (e.button === 0) {
+      this.mouse.holdActive = true;
+      this.emit("inspectHoldStart");
+      this.mouse.holdTimer = setTimeout(() => {
+        this.mouse.holdTimer = null;
+
+        if (
+          this.mouse.holdActive &&
+          this.mouse.mouseDown !== null &&
+          this.mouse.maxDistance < MOUSE_CLICK_MOVE_THRESHOLD
+        ) {
+          this.emit("inspectHoldReady");
+        }
+      }, MOUSE_LONG_PRESS_DELAY);
+    }
 
     if (this.panning.enabled) {
       this.panning.start(e.clientX, e.clientY);
@@ -634,11 +703,22 @@ export class PanZoom extends EventEmitter<PanZoomEvents> {
    * @param e
    */
   private _mouse_mousemove = (e: MouseEvent) => {
+    this.updateMouseDistance(e.clientX, e.clientY);
+
+    if (
+      this.mouse.holdActive &&
+      this.mouse.maxDistance >= MOUSE_CLICK_MOVE_THRESHOLD
+    ) {
+      this.endInspectHold();
+    }
+
     if (this.panning.active) {
       e.preventDefault();
       e.stopPropagation();
 
-      this.panning.move(e.clientX, e.clientY);
+      if (this.mouse.maxDistance >= MOUSE_CLICK_MOVE_THRESHOLD) {
+        this.panning.move(e.clientX, e.clientY);
+      }
     } else {
       // not panning
       this.emit("hover", {
@@ -655,39 +735,85 @@ export class PanZoom extends EventEmitter<PanZoomEvents> {
    * @param e
    */
   private _mouse_mouseup = (e: MouseEvent) => {
-    if (this.mouse.mouseDown && Date.now() - this.mouse.mouseDown <= 500) {
-      // if the mouse was down for less than a half a second, it's a click
-      // this can't depend on this.panning.enabled because that'll always be true when mouse is down
-
-      const delta = [
-        Math.abs(this.panning.x - e.clientX),
-        Math.abs(this.panning.y - e.clientY),
-      ];
-
-      if (delta[0] < 5 && delta[1] < 5) {
-        // difference from the start position to the up position is very very slow,
-        // so it's most likely intended to be a click
-        this.emit("click", {
-          button: ["LCLICK", "MCLICK", "RCLICK"][e.button] as any,
+    const mouseDown = this.mouse.mouseDown;
+    if (mouseDown === null) return;
 
-          clientX: e.clientX,
-          clientY: e.clientY,
+    this.updateMouseDistance(e.clientX, e.clientY);
 
-          alt: e.altKey,
-          ctrl: e.ctrlKey,
-          meta: e.metaKey,
-          shift: e.shiftKey,
-        });
-      }
+    const elapsed = Date.now() - mouseDown;
+    const didDrag = this.mouse.maxDistance >= MOUSE_CLICK_MOVE_THRESHOLD;
+    const didLongPress =
+      e.button === 0 &&
+      elapsed >= MOUSE_LONG_PRESS_DELAY &&
+      !didDrag;
+    this.mouse.suppressClick = didDrag || didLongPress;
+
+    if (elapsed < MOUSE_LONG_PRESS_DELAY && !didDrag) {
+      // if the mouse was down for less than a half a second without moving,
+      // it's most likely intended to be a click
+      this.emit("click", {
+        button: ["LCLICK", "MCLICK", "RCLICK"][e.button] as any,
+
+        clientX: e.clientX,
+        clientY: e.clientY,
+
+        alt: e.altKey,
+        ctrl: e.ctrlKey,
+        meta: e.metaKey,
+        shift: e.shiftKey,
+      });
+    } else if (didLongPress) {
+      this.emit("longPress", this.mouse.startX, this.mouse.startY);
     }
 
+    this.endInspectHold();
+    this.mouse.mouseDown = null;
+
     if (this.panning.active) {
       // currently panning
       e.preventDefault();
       e.stopPropagation();
 
-      this.panning.end(e.clientX, e.clientY);
+      if (didDrag) {
+        this.panning.end(e.clientX, e.clientY);
+      } else {
+        this.panning.active = false;
+      }
+    }
+  };
+
+  private updateMouseDistance(clientX: number, clientY: number) {
+    if (this.mouse.mouseDown === null) return;
+
+    const distance = Math.max(
+      Math.abs(clientX - this.mouse.startX),
+      Math.abs(clientY - this.mouse.startY),
+    );
+    this.mouse.maxDistance = Math.max(this.mouse.maxDistance, distance);
+  }
+
+  private endInspectHold() {
+    if (this.mouse.holdTimer !== null) {
+      clearTimeout(this.mouse.holdTimer);
+      this.mouse.holdTimer = null;
     }
+
+    if (!this.mouse.holdActive) return;
+
+    this.mouse.holdActive = false;
+    this.emit("inspectHoldEnd");
+  }
+
+  private _mouse_resetClickSuppression = () => {
+    this.mouse.suppressClick = false;
+  };
+
+  private _mouse_click = (e: MouseEvent) => {
+    if (!this.mouse.suppressClick) return;
+
+    this.mouse.suppressClick = false;
+    e.preventDefault();
+    e.stopImmediatePropagation();
   };
 
   /**
@@ -731,6 +857,7 @@ export class PanZoom extends EventEmitter<PanZoomEvents> {
   cleanup() {
     // remove event handlers
 
+    this.endInspectHold();
     this.unregisterTouchEvents();
     this.unregisterMouseEvents();
   }
diff --git a/packages/lib/src/renderer/index.ts b/packages/lib/src/renderer/index.ts
index 6a1355d..2752a59 100644
--- a/packages/lib/src/renderer/index.ts
+++ b/packages/lib/src/renderer/index.ts
@@ -2,6 +2,7 @@ export { PanZoomWrapper } from "./PanZoomWrapper";
 export {
   type ClickEvent,
   type HoverEvent,
+  MOUSE_LONG_PRESS_DELAY,
   PanZoom,
   type ViewportMoveEvent,
 } from "./PanZoom";
diff --git a/yarn.lock b/yarn.lock
index a26cf7a..38793f9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2215,50 +2215,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@fortawesome/fontawesome-common-types@npm:7.2.0":
-  version: 7.2.0
-  resolution: "@fortawesome/fontawesome-common-types@npm:7.2.0"
-  checksum: 10c0/991ca1390c078d973e92034cf7dbae2fc3aa50cd7ff322b7b23e4c54ec84dae12979bada9a782bdaea11a1577ae74d802aa651c590f41d2e1b1126c17e6cd413
-  languageName: node
-  linkType: hard
-
-"@fortawesome/fontawesome-svg-core@npm:^7.2.0":
-  version: 7.2.0
-  resolution: "@fortawesome/fontawesome-svg-core@npm:7.2.0"
-  dependencies:
-    "@fortawesome/fontawesome-common-types": "npm:7.2.0"
-  checksum: 10c0/5c6655b030254804999eb87b96111cdcc42c0789e6e9ea13bc1e37d5ebf9fb982c79a618b68272cc59c23c4e1abf73d487e747a17a61499eac5f9f528fc54ad4
-  languageName: node
-  linkType: hard
-
-"@fortawesome/free-brands-svg-icons@npm:^7.2.0":
-  version: 7.2.0
-  resolution: "@fortawesome/free-brands-svg-icons@npm:7.2.0"
-  dependencies:
-    "@fortawesome/fontawesome-common-types": "npm:7.2.0"
-  checksum: 10c0/cfb883006dd0f918dde3d6ed81197552f094823e2032c284f05cb8788df65ccee7aa71c54b8042b393a843bb134fbcff492fc5b1ba57bb690cf9a9de17b30df3
-  languageName: node
-  linkType: hard
-
-"@fortawesome/free-solid-svg-icons@npm:^7.2.0":
-  version: 7.2.0
-  resolution: "@fortawesome/free-solid-svg-icons@npm:7.2.0"
-  dependencies:
-    "@fortawesome/fontawesome-common-types": "npm:7.2.0"
-  checksum: 10c0/922ffe0f53b3cebcf36a4a6872958e7d6a0fbaa5c5c73cddbdea9301181fe8625331a0bf8aa09ca54c4d284805473e38d0eb9f06da05546f1914cec2c062343f
-  languageName: node
-  linkType: hard
-
-"@fortawesome/react-fontawesome@npm:^3.2.0, @fortawesome/react-fontawesome@npm:^3.3.1":
-  version: 3.3.1
-  resolution: "@fortawesome/react-fontawesome@npm:3.3.1"
-  peerDependencies:
-    "@fortawesome/fontawesome-svg-core": ~6 || ~7
-    react: ^18.0.0 || ^19.0.0
-  checksum: 10c0/aaa4d907418829367177dc1a34c3446377582ec0127ba1c510b29927059557ecf49eec2fed5d737002bec1e5360a57607909aac1b616c7f4039e3b0f9732c98c
-  languageName: node
-  linkType: hard
-
 "@heroui/accordion@npm:2.2.29":
   version: 2.2.29
   resolution: "@heroui/accordion@npm:2.2.29"
@@ -11473,10 +11429,6 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@sc07-canvas/admin@workspace:packages/admin"
   dependencies:
-    "@fortawesome/fontawesome-svg-core": "npm:^7.2.0"
-    "@fortawesome/free-brands-svg-icons": "npm:^7.2.0"
-    "@fortawesome/free-solid-svg-icons": "npm:^7.2.0"
-    "@fortawesome/react-fontawesome": "npm:^3.3.1"
     "@nextui-org/react": "npm:^2.6.11"
     "@tailwindcss/vite": "npm:^4.2.4"
     "@types/react": "npm:^19"
@@ -11487,6 +11439,7 @@ __metadata:
     eslint-plugin-react-refresh: "npm:^0.5.0"
     framer-motion: "npm:^12.34.0"
     localforage: "npm:^1.10.0"
+    lucide-react: "npm:^1.23.0"
     match-sorter: "npm:^8.2.0"
     next-themes: "npm:^0.4.6"
     postcss: "npm:^8.5.6"
@@ -11537,10 +11490,6 @@ __metadata:
     "@eslint/compat": "npm:^2.0.2"
     "@eslint/eslintrc": "npm:^3.3.3"
     "@eslint/js": "npm:^10.0.1"
-    "@fortawesome/fontawesome-svg-core": "npm:^7.2.0"
-    "@fortawesome/free-brands-svg-icons": "npm:^7.2.0"
-    "@fortawesome/free-solid-svg-icons": "npm:^7.2.0"
-    "@fortawesome/react-fontawesome": "npm:^3.3.1"
     "@heroui/react": "npm:^2.8.10"
     "@icons-pack/react-simple-icons": "npm:^13.11.2"
     "@sc07-canvas/chat": "workspace:^"
@@ -11559,6 +11508,7 @@ __metadata:
     eventemitter3: "npm:^5.0.4"
     framer-motion: "npm:^12.34.0"
     lodash.throttle: "npm:^4.1.1"
+    lucide-react: "npm:^1.23.0"
     next-themes: "npm:^0.4.6"
     openapi-fetch: "npm:^0.17.0"
     postcss: "npm:^8.5.6"
@@ -19090,6 +19040,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lucide-react@npm:^1.23.0":
+  version: 1.23.0
+  resolution: "lucide-react@npm:1.23.0"
+  peerDependencies:
+    react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0
+  checksum: 10c0/1cb2108d81c9713e20dd1beb7b6ac5bfc17307d5f38388f84921cf6a124efb4b933c73929bede42f00bd08aa2df340b0904acdf4fb90206ccd52971e943e775b
+  languageName: node
+  linkType: hard
+
 "luxon@npm:^3.2.1":
   version: 3.7.2
   resolution: "luxon@npm:3.7.2"
@@ -22172,9 +22131,6 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "sc07-canvas@workspace:."
   dependencies:
-    "@fortawesome/fontawesome-svg-core": "npm:^7.2.0"
-    "@fortawesome/free-brands-svg-icons": "npm:^7.2.0"
-    "@fortawesome/react-fontawesome": "npm:^3.2.0"
     "@internationalized/date": "npm:^3.11.0"
     "@quixo3/prisma-session-store": "npm:^3.1.19"
     "@sentry/cli": "npm:^3.2.0"
-- 
GitLab