diff --git a/apps/desktop2/public/assets/hyprnote-pro.png b/apps/desktop2/public/assets/hyprnote-pro.png
new file mode 100644
index 000000000..5381b4edd
Binary files /dev/null and b/apps/desktop2/public/assets/hyprnote-pro.png differ
diff --git a/apps/desktop2/public/assets/meet.png b/apps/desktop2/public/assets/meet.png
new file mode 100644
index 000000000..35f282ec7
Binary files /dev/null and b/apps/desktop2/public/assets/meet.png differ
diff --git a/apps/desktop2/public/assets/webex.png b/apps/desktop2/public/assets/webex.png
new file mode 100644
index 000000000..d90249f28
Binary files /dev/null and b/apps/desktop2/public/assets/webex.png differ
diff --git a/apps/desktop2/public/assets/zoom.png b/apps/desktop2/public/assets/zoom.png
new file mode 100644
index 000000000..dd86fb66c
Binary files /dev/null and b/apps/desktop2/public/assets/zoom.png differ
diff --git a/apps/desktop2/src/components/main/body/index.tsx b/apps/desktop2/src/components/main/body/index.tsx
index fa980d17a..e1d46c082 100644
--- a/apps/desktop2/src/components/main/body/index.tsx
+++ b/apps/desktop2/src/components/main/body/index.tsx
@@ -142,7 +142,7 @@ function Header({ tabs }: { tabs: Tab[] }) {
           onClick={handleNewNote}
           variant="ghost"
           size="icon"
-          className="text-color3"
+          className="text-neutral-500"
         >
           <PlusIcon size={16} />
         </Button>
diff --git a/apps/desktop2/src/components/main/body/sessions/floating/listen.tsx b/apps/desktop2/src/components/main/body/sessions/floating/listen.tsx
index 873347eb7..a4b31fef1 100644
--- a/apps/desktop2/src/components/main/body/sessions/floating/listen.tsx
+++ b/apps/desktop2/src/components/main/body/sessions/floating/listen.tsx
@@ -12,7 +12,8 @@ import { FloatingButton, formatTime } from "./shared";
 
 type RemoteMeeting =
   | { type: "zoom"; url: string | null }
-  | { type: "google-meet"; url: string | null };
+  | { type: "google-meet"; url: string | null }
+  | { type: "webex"; url: string | null };
 
 export function ListenButton({ tab }: { tab: Extract<Tab, { type: "sessions" }> }) {
   const { status, loading, stop } = useListener((state) => ({
@@ -56,7 +57,7 @@ function BeforeMeeingButton({ tab }: { tab: Extract<Tab, { type: "sessions" }> }
     return (
       <FloatingButton
         onClick={handleClick}
-        icon={<Icon icon="streamline-logos:zoom-logo-1-block" className="w-5 h-5 text-blue-300" />}
+        icon={<img src="/assets/zoom.png" alt="Zoom" className="w-5 h-5" />}
       >
         {isNarrow ? "Join & Listen" : "Join Zoom & Start listening"}
       </FloatingButton>
@@ -67,17 +68,27 @@ function BeforeMeeingButton({ tab }: { tab: Extract<Tab, { type: "sessions" }> }
     return (
       <FloatingButton
         onClick={handleClick}
-        icon={<Icon icon="logos:google-meet" className="w-5 h-5" />}
+        icon={<img src="/assets/meet.png" alt="Google Meet" className="w-5 h-5" />}
       >
         {isNarrow ? "Join & Listen" : "Join Google Meet & Start listening"}
       </FloatingButton>
     );
   }
 
+  if (remote?.type === "webex") {
+    return (
+      <FloatingButton
+        onClick={handleClick}
+        icon={<img src="/assets/webex.png" alt="Webex" className="w-5 h-5" />}
+      >
+        {isNarrow ? "Join & Listen" : "Join Webex & Start listening"}
+      </FloatingButton>
+    );
+  }
+
   return (
     <FloatingButton
       onClick={handleClick}
-      icon={<Icon icon="lucide:mic" className="w-5 h-5" />}
     >
       Start listening
     </FloatingButton>
diff --git a/apps/desktop2/src/components/main/body/sessions/floating/shared.tsx b/apps/desktop2/src/components/main/body/sessions/floating/shared.tsx
index 8a10a6834..23d503d9b 100644
--- a/apps/desktop2/src/components/main/body/sessions/floating/shared.tsx
+++ b/apps/desktop2/src/components/main/body/sessions/floating/shared.tsx
@@ -1,7 +1,6 @@
-import { type ReactNode } from "react";
-
 import { Button } from "@hypr/ui/components/ui/button";
-import { cn } from "@hypr/ui/lib/utils";
+
+import { type ReactNode } from "react";
 
 export function FloatingButton({
   icon,
@@ -18,17 +17,12 @@ export function FloatingButton({
 }) {
   return (
     <Button
-      className={cn([
-        "flex flex-row items-center justify-center gap-1",
-        "text-white bg-black hover:bg-neutral-800",
-        "px-4 py-2 rounded-lg shadow-lg",
-        "min-w-[170px] h-10",
-      ])}
+      className="shadow-lg"
       onClick={onClick}
       onMouseEnter={onMouseEnter}
       onMouseLeave={onMouseLeave}
     >
-      {icon && <span className="flex items-center flex-shrink-0 pt-1">{icon}</span>}
+      {icon || <div className="w-2 h-2 rounded-full bg-red-500 animate-pulse" />}
       {children}
     </Button>
   );
diff --git a/apps/desktop2/src/components/main/body/sessions/outer-header/folder.tsx b/apps/desktop2/src/components/main/body/sessions/outer-header/folder.tsx
index 2d1e558dd..23a712876 100644
--- a/apps/desktop2/src/components/main/body/sessions/outer-header/folder.tsx
+++ b/apps/desktop2/src/components/main/body/sessions/outer-header/folder.tsx
@@ -33,7 +33,7 @@ export function FolderChain({ sessionId }: { sessionId: string }) {
 
   return (
     <Breadcrumb className="ml-1.5">
-      <BreadcrumbList className="text-color4 text-xs">
+      <BreadcrumbList className="text-neutral-700 text-xs">
         {folderId && <FolderIcon className="w-3 h-3 mr-1" />}
         {!folderId
           ? <RenderIfRootNotExist title={title} handleChangeTitle={handleChangeTitle} sessionId={sessionId} />
@@ -106,7 +106,7 @@ function RenderIfRootNotExist(
     <>
       <BreadcrumbItem>
         <DropdownMenu>
-          <DropdownMenuTrigger className="text-color3 hover:text-color4 transition-colors outline-none">
+          <DropdownMenuTrigger className="text-neutral-500 hover:text-neutral-700 transition-colors outline-none">
             Select folder
           </DropdownMenuTrigger>
           <DropdownMenuContent align="start">
@@ -143,7 +143,7 @@ function TitleInput({ title, handleChangeTitle }: { title: string; handleChangeT
     <input
       type="text"
       placeholder="Untitled"
-      className="truncate max-w-[80px] border-none bg-transparent text-color4 focus:outline-none focus:underline"
+      className="truncate max-w-[80px] border-none bg-transparent text-neutral-700 focus:outline-none focus:underline"
       value={title}
       onChange={(e) => handleChangeTitle(e.target.value)}
     />
diff --git a/apps/desktop2/src/components/main/body/sessions/outer-header/other.tsx b/apps/desktop2/src/components/main/body/sessions/outer-header/other.tsx
index 8e2116095..affdb8106 100644
--- a/apps/desktop2/src/components/main/body/sessions/outer-header/other.tsx
+++ b/apps/desktop2/src/components/main/body/sessions/outer-header/other.tsx
@@ -105,7 +105,7 @@ export function OthersButton(_: { sessionId: string }) {
           </DropdownMenuSubContent>
         </DropdownMenuSub>
 
-        <DropdownMenuItem onClick={handleToggleLock}>
+        <DropdownMenuItem onSelect={(e) => e.preventDefault()}>
           <LockIcon />
           <span>Lock note</span>
           <Switch checked={isLocked} onCheckedChange={handleToggleLock} className="ml-auto" />
diff --git a/apps/desktop2/src/components/main/body/sessions/outer-header/share.tsx b/apps/desktop2/src/components/main/body/sessions/outer-header/share.tsx
index 00be6c60a..8001a0c87 100644
--- a/apps/desktop2/src/components/main/body/sessions/outer-header/share.tsx
+++ b/apps/desktop2/src/components/main/body/sessions/outer-header/share.tsx
@@ -1,9 +1,239 @@
+import { Avatar, AvatarFallback } from "@hypr/ui/components/ui/avatar";
 import { Button } from "@hypr/ui/components/ui/button";
+import { Popover, PopoverContent, PopoverTrigger } from "@hypr/ui/components/ui/popover";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@hypr/ui/components/ui/select";
+import { Separator } from "@hypr/ui/components/ui/separator";
+
+import { CircleMinus, Link2Icon, SearchIcon } from "lucide-react";
+import { useState } from "react";
+import { getInitials } from "../../contacts/shared";
+
+interface Person {
+  id: string;
+  name: string;
+  email?: string;
+  role: "viewer" | "editor";
+  isParticipant?: boolean;
+}
 
 export function ShareButton(_: { sessionId: string }) {
+  const [searchQuery, setSearchQuery] = useState("");
+  const [selectedPeople, setSelectedPeople] = useState<Person[]>([]);
+  const [invitedPeople, setInvitedPeople] = useState<Person[]>([
+    { id: "1", name: "John Doe", email: "john@example.com", role: "editor", isParticipant: true },
+    { id: "2", name: "Jane Smith", email: "jane@example.com", role: "editor", isParticipant: true },
+  ]);
+
+  const searchResults: Person[] = searchQuery.trim()
+    ? [
+      { id: "3", name: "Alice Johnson", email: "alice@example.com", role: "viewer" as const },
+      { id: "4", name: "Bob Wilson", email: "bob@example.com", role: "viewer" as const },
+    ].filter((person) => person.name.toLowerCase().includes(searchQuery.toLowerCase()))
+    : [];
+
+  const handleSelectPerson = (person: Person) => {
+    if (!selectedPeople.find((p) => p.id === person.id)) {
+      setSelectedPeople([...selectedPeople, person]);
+    }
+    setSearchQuery("");
+  };
+
+  const handleRemoveSelected = (personId: string) => {
+    setSelectedPeople(selectedPeople.filter((p) => p.id !== personId));
+  };
+
+  const handleInvite = () => {
+    const newInvites = selectedPeople.filter(
+      (selected) => !invitedPeople.find((invited) => invited.id === selected.id),
+    );
+    setInvitedPeople([...invitedPeople, ...newInvites]);
+    setSelectedPeople([]);
+    // TODO: Implement actual invite functionality
+    console.log("Invite:", newInvites);
+  };
+
+  const handleRemovePerson = (personId: string) => {
+    setInvitedPeople(invitedPeople.filter((p) => p.id !== personId));
+  };
+
+  const handleRoleChange = (personId: string, role: "viewer" | "editor") => {
+    setInvitedPeople(
+      invitedPeople.map((p) => (p.id === personId ? { ...p, role } : p)),
+    );
+  };
+
+  const handleCopyLink = () => {
+    // TODO: Implement copy link functionality
+    console.log("Copy link");
+  };
+
   return (
-    <Button size="sm" variant="ghost">
-      Share
-    </Button>
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button size="sm" variant="ghost">
+          Share
+        </Button>
+      </PopoverTrigger>
+
+      <PopoverContent className="w-[360px] shadow-lg" align="end">
+        <div className="flex flex-col gap-4">
+          <div className="flex flex-col gap-2">
+            <div className="flex items-center px-3 py-2 gap-2 rounded-md bg-neutral-50 border border-neutral-200">
+              <SearchIcon className="size-4 text-neutral-700 flex-shrink-0" />
+              <input
+                type="text"
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                placeholder="Search for people"
+                className="w-full bg-transparent text-sm focus:outline-none placeholder:text-neutral-500"
+              />
+            </div>
+
+            {searchQuery.trim() && searchResults.length > 0 && (
+              <div className="flex flex-col rounded-md border border-neutral-200 overflow-hidden">
+                {searchResults.map((person) => (
+                  <button
+                    key={person.id}
+                    type="button"
+                    onClick={() => handleSelectPerson(person)}
+                    className="flex items-center justify-between px-3 py-2 text-sm text-left hover:bg-neutral-100 transition-colors w-full disabled:opacity-50"
+                    disabled={selectedPeople.some((p) => p.id === person.id)
+                      || invitedPeople.some((p) => p.id === person.id)}
+                  >
+                    <div className="flex items-center gap-2">
+                      <Avatar className="size-6">
+                        <AvatarFallback className="text-xs bg-neutral-200 text-neutral-700 font-medium">
+                          {getInitials(person.name)}
+                        </AvatarFallback>
+                      </Avatar>
+                      <div className="flex flex-col">
+                        <span className="font-medium truncate">{person.name}</span>
+                        {person.email && <span className="text-xs text-neutral-500">{person.email}</span>}
+                      </div>
+                    </div>
+                  </button>
+                ))}
+              </div>
+            )}
+          </div>
+
+          {selectedPeople.length > 0 && (
+            <div className="flex flex-col gap-2">
+              <div className="flex flex-col rounded-md border border-neutral-100 bg-neutral-50 overflow-hidden">
+                {selectedPeople.map((person) => (
+                  <div
+                    key={person.id}
+                    className="flex items-center justify-between gap-3 py-2 px-3 hover:bg-neutral-100 group transition-colors"
+                  >
+                    <div className="flex items-center gap-2.5 relative min-w-0 flex-1">
+                      <div className="relative size-7 flex items-center justify-center flex-shrink-0">
+                        <div className="absolute inset-0 flex items-center justify-center transition-opacity group-hover:opacity-0">
+                          <Avatar className="size-7">
+                            <AvatarFallback className="text-xs bg-neutral-200 text-neutral-700 font-medium">
+                              {getInitials(person.name)}
+                            </AvatarFallback>
+                          </Avatar>
+                        </div>
+                        <button
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            handleRemoveSelected(person.id);
+                          }}
+                          className="flex items-center justify-center text-red-400 hover:text-red-600 absolute inset-0 rounded-full opacity-0 group-hover:opacity-100 transition-opacity bg-white shadow-sm"
+                        >
+                          <CircleMinus className="size-4" />
+                        </button>
+                      </div>
+                      <div className="flex flex-col min-w-0">
+                        <span className="text-sm font-medium text-neutral-700 truncate">
+                          {person.name}
+                        </span>
+                        {person.email && <span className="text-xs text-neutral-500 truncate">{person.email}</span>}
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {selectedPeople.length > 0 && (
+            <Button onClick={handleInvite} className="w-full">
+              Invite {selectedPeople.length} {selectedPeople.length === 1 ? "person" : "people"}
+            </Button>
+          )}
+
+          {selectedPeople.length > 0 && <Separator />}
+
+          {invitedPeople.length > 0 && (
+            <div className="flex flex-col gap-2">
+              <div className="text-xs font-medium text-neutral-500">
+                People with access
+              </div>
+              <div className="flex flex-col rounded-md border border-neutral-100 bg-neutral-50 overflow-hidden max-h-[40vh] overflow-y-auto">
+                {invitedPeople.map((person) => (
+                  <div
+                    key={person.id}
+                    className="flex items-center justify-between gap-3 py-2 px-3 hover:bg-neutral-100 group transition-colors"
+                  >
+                    <div className="flex items-center gap-2.5 relative min-w-0 flex-1">
+                      <div className="relative size-7 flex items-center justify-center flex-shrink-0">
+                        <div className="absolute inset-0 flex items-center justify-center transition-opacity group-hover:opacity-0">
+                          <Avatar className="size-7">
+                            <AvatarFallback className="text-xs bg-neutral-200 text-neutral-700 font-medium">
+                              {getInitials(person.name)}
+                            </AvatarFallback>
+                          </Avatar>
+                        </div>
+                        <button
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            handleRemovePerson(person.id);
+                          }}
+                          className="flex items-center justify-center text-red-400 hover:text-red-600 absolute inset-0 rounded-full opacity-0 group-hover:opacity-100 transition-opacity bg-white shadow-sm"
+                        >
+                          <CircleMinus className="size-4" />
+                        </button>
+                      </div>
+                      <div className="flex flex-col min-w-0">
+                        <span className="text-sm font-medium text-neutral-700 truncate">
+                          {person.name}
+                        </span>
+                        {person.email && <span className="text-xs text-neutral-500 truncate">{person.email}</span>}
+                      </div>
+                    </div>
+
+                    <Select
+                      value={person.role}
+                      onValueChange={(value: "viewer" | "editor") => handleRoleChange(person.id, value)}
+                    >
+                      <SelectTrigger
+                        className="w-[100px] h-8 text-xs focus:ring-0 focus:ring-offset-0"
+                        onClick={(e) => e.stopPropagation()}
+                      >
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="viewer">Viewer</SelectItem>
+                        <SelectItem value="editor">Editor</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+
+          <Button
+            variant="outline"
+            className="w-full"
+            onClick={handleCopyLink}
+          >
+            <Link2Icon className="size-4" />
+            Copy link
+          </Button>
+        </div>
+      </PopoverContent>
+    </Popover>
   );
 }
diff --git a/apps/desktop2/src/components/main/body/shared.tsx b/apps/desktop2/src/components/main/body/shared.tsx
index 4820ba6ca..311712435 100644
--- a/apps/desktop2/src/components/main/body/shared.tsx
+++ b/apps/desktop2/src/components/main/body/shared.tsx
@@ -59,8 +59,8 @@ export function TabItemBase(
       className={clsx([
         "flex items-center gap-2 cursor-pointer group",
         "w-48 h-full pl-2 pr-1",
-        "bg-color1 rounded-lg border",
-        active ? "text-black border-black" : "text-color3 border-transparent",
+        "bg-neutral-50 rounded-lg border",
+        active ? "text-black border-black" : "text-neutral-500 border-transparent",
       ])}
     >
       <div className="flex items-center gap-2 text-sm flex-1 min-w-0">
@@ -75,8 +75,8 @@ export function TabItemBase(
         className={clsx([
           "flex-shrink-0 transition-opacity",
           active
-            ? "opacity-100 text-color4"
-            : "opacity-0 group-hover:opacity-100 text-color3",
+            ? "opacity-100 text-neutral-700"
+            : "opacity-0 group-hover:opacity-100 text-neutral-500",
         ])}
         size="icon"
         variant="ghost"
diff --git a/apps/desktop2/src/components/main/sidebar/index.tsx b/apps/desktop2/src/components/main/sidebar/index.tsx
index 102467e40..53748b512 100644
--- a/apps/desktop2/src/components/main/sidebar/index.tsx
+++ b/apps/desktop2/src/components/main/sidebar/index.tsx
@@ -23,7 +23,7 @@ export function LeftSidebar() {
           "flex flex-row shrink-0",
           "flex w-full items-center justify-end h-9 py-1",
           "rounded-lg",
-          "pl-[72px] bg-color1",
+          "pl-[72px] bg-neutral-50",
         ])}
       >
         <Button size="icon" variant="ghost" onClick={leftsidebar.toggleExpanded}>
diff --git a/apps/desktop2/src/components/main/sidebar/profile/banner.tsx b/apps/desktop2/src/components/main/sidebar/profile/banner.tsx
index 4f906285e..e85ce2033 100644
--- a/apps/desktop2/src/components/main/sidebar/profile/banner.tsx
+++ b/apps/desktop2/src/components/main/sidebar/profile/banner.tsx
@@ -1,4 +1,4 @@
-import { X, Zap } from "lucide-react";
+import { X } from "lucide-react";
 import { AnimatePresence, motion } from "motion/react";
 
 import { Button } from "@hypr/ui/components/ui/button";
@@ -25,72 +25,44 @@ export function TryProBanner({ isDismissed, onDismiss }: { isDismissed: boolean;
             transition: { duration: 0.3, ease: "easeInOut" },
           }}
           className={cn([
-            "py-2 px-1",
             "overflow-hidden",
+            "px-1 py-2",
           ])}
         >
           <div
             className={cn([
-              "relative rounded-lg overflow-hidden",
-              "bg-white border border-gray-200 shadow-sm",
+              "relative group overflow-hidden rounded-lg",
+              "flex flex-col gap-3",
+              "bg-white border border-gray-200 shadow-sm p-4",
             ])}
           >
-            <div className="relative p-5">
-              <button
-                onClick={handleDismiss}
-                className={cn([
-                  "absolute top-2.5 right-2.5",
-                  "p-1.5 rounded-md",
-                  "text-gray-400 hover:text-gray-600",
-                  "hover:bg-gray-100/80",
-                  "transition-colors duration-200",
-                ])}
-                aria-label="Dismiss banner"
-              >
-                <X className="w-4 h-4" />
-              </button>
+            <Button
+              onClick={handleDismiss}
+              size="icon"
+              variant="ghost"
+              aria-label="Dismiss banner"
+              className="absolute top-2.5 right-2.5 opacity-0 group-hover:opacity-100 transition-all duration-200"
+            >
+              <X className="w-4 h-4" />
+            </Button>
 
-              <div className="flex items-start gap-3.5 mb-5">
-                <div
-                  className={cn([
-                    "flex-shrink-0 w-11 h-11 rounded-xl",
-                    "bg-gray-900",
-                    "flex items-center justify-center",
-                  ])}
-                >
-                  <Zap className="w-5 h-5 text-white fill-white" />
-                </div>
+            <div className="flex items-center gap-4">
+              <img src="/assets/hyprnote-pro.png" alt="Hyprnote Pro" className="size-6" />
+              <h3 className="text-lg font-bold text-gray-900">
+                Try Hyprnote Pro
+              </h3>
+            </div>
 
-                <div className="flex-1 min-w-0">
-                  <h3
-                    className={cn([
-                      "text-base font-bold text-gray-900",
-                      "mb-1.5",
-                    ])}
-                  >
-                    Try Hyprnote Pro
-                  </h3>
-                  <p
-                    className={cn([
-                      "text-xs text-gray-600 leading-relaxed",
-                    ])}
-                  >
-                    Experience smarter meetings
-                  </p>
-                </div>
-              </div>
+            <p className="text-sm">
+              Sign up now and experience smarter meetings with a 1-week free trial of Hyprnote Pro.
+            </p>
 
-              <Button
-                onClick={handleSignUp}
-                className={cn([
-                  "w-full h-9",
-                  "bg-black hover:bg-gray-800",
-                  "text-sm font-medium text-white",
-                ])}
-              >
-                Start 2 week Free Trial
-              </Button>
-            </div>
+            <Button
+              onClick={handleSignUp}
+              className="w-full"
+            >
+              Start 1 week Free Trial
+            </Button>
           </div>
         </motion.div>
       )}
diff --git a/apps/desktop2/src/components/main/sidebar/profile/index.tsx b/apps/desktop2/src/components/main/sidebar/profile/index.tsx
index 657e29db0..de6e046a7 100644
--- a/apps/desktop2/src/components/main/sidebar/profile/index.tsx
+++ b/apps/desktop2/src/components/main/sidebar/profile/index.tsx
@@ -1,9 +1,10 @@
+import { commands as windowsCommands } from "@hypr/plugin-windows";
+
 import { clsx } from "clsx";
 import { Calendar, ChevronUpIcon, FolderOpen, Settings, Users } from "lucide-react";
 import { AnimatePresence, motion } from "motion/react";
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 
-import { commands as windowsCommands } from "@hypr/plugin-windows";
 import { useAutoCloser } from "../../../../hooks/useAutoCloser";
 import { useTabs } from "../../../../store/zustand/tabs";
 import { TryProBanner } from "./banner";
@@ -122,7 +123,7 @@ export function ProfileSection() {
     <div ref={profileRef}>
       <div
         className={clsx(
-          "bg-color1 rounded-lg overflow-hidden",
+          "bg-neutral-50 rounded-lg overflow-hidden",
         )}
       >
         <div
@@ -150,7 +151,7 @@ export function ProfileSection() {
                     <NotificationsMenuHeader onClick={handleClickNotifications} />
                     <UpdateChecker />
 
-                    <div className="my-1.5 border-t border-slate-100" />
+                    <div className="my-1.5 border-t border-neutral-100" />
 
                     {menuItems.map((item) => <MenuItem key={item.label} {...item} />)}
 
@@ -188,13 +189,13 @@ function ProfileButton({ isExpanded, onClick }: { isExpanded: boolean; onClick:
         "text-left",
         "transition-all duration-300",
         "hover:bg-gray-100",
-        isExpanded && "bg-color1 border-t border-slate-100",
+        isExpanded && "bg-neutral-50 border-t border-neutral-100",
       )}
       onClick={onClick}
     >
       <div
         className={clsx(
-          "hidden sm:flex  w-8 flex-shrink-0 items-center justify-center",
+          "flex size-8 flex-shrink-0 items-center justify-center",
           "overflow-hidden rounded-full",
           "border border-white/60 border-t border-gray-400",
           "bg-gradient-to-br from-indigo-400 to-purple-500",
@@ -205,21 +206,21 @@ function ProfileButton({ isExpanded, onClick }: { isExpanded: boolean; onClick:
         <img
           src="https://api.dicebear.com/7.x/avataaars/svg?seed=JohnJeong"
           alt="Profile"
-          className={clsx("h-full w-full", "rounded-full")}
+          className="h-full w-full rounded-full"
         />
       </div>
-      <div className={clsx("min-w-0 flex-1")}>
-        <div className={clsx("text-sm text-black", "truncate")}>John Jeong</div>
+      <div className="min-w-0 flex-1">
+        <div className="text-sm text-black truncate">John Jeong</div>
       </div>
-      <div className={clsx("flex items-center gap-1.5")}>
+      <div className="flex items-center gap-1.5">
         <span
           className={clsx(
             "hidden md:inline-block",
             "rounded-full",
-            "border border-slate-900",
+            "border border-neutral-900",
             "bg-white",
             "px-2.5 py-0.5",
-            "text-[11px] font-medium text-slate-900",
+            "text-[11px] font-medium text-neutral-900",
           )}
         >
           Pro trial
@@ -228,7 +229,7 @@ function ProfileButton({ isExpanded, onClick }: { isExpanded: boolean; onClick:
           className={clsx(
             "h-4 w-4",
             "transition-transform duration-300",
-            isExpanded ? "rotate-180 text-slate-500" : "text-slate-400",
+            isExpanded ? "rotate-180 text-neutral-500" : "text-neutral-400",
           )}
         />
       </div>
diff --git a/apps/desktop2/src/components/main/sidebar/profile/notification.tsx b/apps/desktop2/src/components/main/sidebar/profile/notification.tsx
index 92dd9b833..b57c1092a 100644
--- a/apps/desktop2/src/components/main/sidebar/profile/notification.tsx
+++ b/apps/desktop2/src/components/main/sidebar/profile/notification.tsx
@@ -1,5 +1,7 @@
+import { Button } from "@hypr/ui/components/ui/button";
+
 import { clsx } from "clsx";
-import { ArrowLeft, Bell, CheckCheck, MessageSquare } from "lucide-react";
+import { ArrowLeft, ArrowRight, Bell, CheckCheck, MessageSquare } from "lucide-react";
 
 import { cn } from "@hypr/ui/lib/utils";
 
@@ -11,6 +13,7 @@ export function NotificationsMenuHeader({ onClick }: { onClick: () => void }) {
       icon={Bell}
       label="Notifications"
       onClick={onClick}
+      suffixIcon={ArrowRight}
     />
   );
 }
@@ -37,22 +40,17 @@ const MOCK_NOTIFICATIONS: Notification[] = [
 
 export function NotificationsMenuContent({ onBack }: { onBack: () => void }) {
   return (
-    <div className="h-full flex flex-col">
-      <button
-        onClick={onBack}
-        className={cn([
-          "flex w-full items-center gap-2.5 rounded-lg",
-          "px-4 py-1.5 mb-2",
-          "text-sm font-medium text-black",
-          "transition-colors hover:bg-slate-100",
-        ])}
-      >
-        <ArrowLeft className="h-4 w-4 flex-shrink-0" />
-        <span>Back</span>
-      </button>
-
-      <div className="px-4 py-1.5 mb-2">
-        <h3 className="text-sm font-semibold text-black">Notifications</h3>
+    <div className="h-full flex flex-col px-2">
+      <div className="flex w-full items-center gap-1 text-sm font-medium">
+        <Button
+          size="icon"
+          variant="ghost"
+          onClick={onBack}
+          className="shrink-0"
+        >
+          <ArrowLeft size={16} />
+        </Button>
+        Notifications
       </div>
 
       <div className="flex-1 overflow-y-auto space-y-1">
@@ -66,8 +64,8 @@ export function NotificationsMenuContent({ onBack }: { onBack: () => void }) {
         {MOCK_NOTIFICATIONS.length === 0 && (
           <div className="flex items-center justify-center h-full">
             <div className="text-center">
-              <Bell className="h-8 w-8 text-slate-300 mx-auto mb-2" />
-              <p className="text-sm text-slate-500">No notifications</p>
+              <Bell className="h-8 w-8 text-neutral-300 mx-auto mb-2" />
+              <p className="text-sm text-neutral-500">No notifications</p>
             </div>
           </div>
         )}
@@ -96,7 +94,7 @@ function NotificationItem({ notification }: { notification: Notification }) {
         "flex w-full gap-3 rounded-lg",
         "px-4 py-2.5",
         "text-left",
-        "transition-colors hover:bg-slate-100",
+        "transition-colors hover:bg-neutral-100",
         !notification.read && "bg-blue-50/50",
       ])}
     >
@@ -131,10 +129,10 @@ function NotificationItem({ notification }: { notification: Notification }) {
           </p>
           {!notification.read && <span className="flex-shrink-0 w-2 h-2 rounded-full bg-blue-500" />}
         </div>
-        <p className="text-xs text-slate-600 line-clamp-2 mb-1">
+        <p className="text-xs text-neutral-600 line-clamp-2 mb-1">
           {notification.description}
         </p>
-        <p className="text-xs text-slate-400">{notification.timestamp}</p>
+        <p className="text-xs text-neutral-400">{notification.timestamp}</p>
       </div>
     </button>
   );
diff --git a/apps/desktop2/src/components/main/sidebar/profile/ota.tsx b/apps/desktop2/src/components/main/sidebar/profile/ota.tsx
index 00d0e82b4..537c33658 100644
--- a/apps/desktop2/src/components/main/sidebar/profile/ota.tsx
+++ b/apps/desktop2/src/components/main/sidebar/profile/ota.tsx
@@ -1,9 +1,11 @@
+import { Spinner } from "@hypr/ui/components/ui/spinner";
+
 import { relaunch } from "@tauri-apps/plugin-process";
 import { check, type Update } from "@tauri-apps/plugin-updater";
 import { createStore } from "@xstate/store";
 import { useSelector } from "@xstate/store/react";
 import { clsx } from "clsx";
-import { AlertCircle, CheckCircle, Download, Loader2, RefreshCw, X } from "lucide-react";
+import { AlertCircle, CheckCircle, Download, RefreshCw, X } from "lucide-react";
 
 import { MenuItem } from "./shared";
 
@@ -205,10 +207,10 @@ export function UpdateChecker() {
         className={clsx(
           "flex w-full items-center gap-2.5",
           "px-4 py-1.5",
-          "text-sm text-slate-700",
+          "text-sm text-neutral-700",
         )}
       >
-        <Loader2 className={clsx("h-4 w-4 flex-shrink-0 animate-spin", "text-slate-400")} />
+        <Spinner size={16} className="flex-shrink-0 text-neutral-400" />
         <span className={clsx("flex-1", "text-left font-medium")}>Checking for updates...</span>
       </div>
     );
@@ -220,7 +222,7 @@ export function UpdateChecker() {
         className={clsx(
           "flex w-full items-center gap-2.5",
           "px-4 py-1.5",
-          "text-sm text-slate-700",
+          "text-sm text-neutral-700",
         )}
       >
         <CheckCircle className={clsx("h-4 w-4 flex-shrink-0", "text-green-500")} />
@@ -269,9 +271,9 @@ export function UpdateChecker() {
 
   if (state === "downloading") {
     return (
-      <div className={clsx("flex w-full flex-col gap-2", "px-4 py-2", "text-sm text-slate-700")}>
+      <div className={clsx("flex w-full flex-col gap-2", "px-4 py-2", "text-sm text-neutral-700")}>
         <div className="flex items-center gap-2.5">
-          <Loader2 className={clsx("h-4 w-4 flex-shrink-0 animate-spin", "text-blue-500")} />
+          <Spinner size={16} className="flex-shrink-0 text-blue-500" />
           <span className={clsx("flex-1", "text-left font-medium")}>
             Downloading... {downloadProgress.percentage}%
           </span>
@@ -280,15 +282,15 @@ export function UpdateChecker() {
             className={clsx(
               "flex h-6 w-6 items-center justify-center",
               "rounded-full",
-              "hover:bg-slate-100",
+              "hover:bg-neutral-100",
               "transition-colors",
             )}
             title="Cancel download"
           >
-            <X className="h-4 w-4 text-slate-500" />
+            <X className="h-4 w-4 text-neutral-500" />
           </button>
         </div>
-        <div className="h-1.5 w-full overflow-hidden rounded-full bg-slate-200">
+        <div className="h-1.5 w-full overflow-hidden rounded-full bg-neutral-200">
           <div
             className="h-full bg-blue-500 transition-all duration-300"
             style={{ width: `${downloadProgress.percentage}%` }}
@@ -315,10 +317,10 @@ export function UpdateChecker() {
         className={clsx(
           "flex w-full items-center gap-2.5",
           "px-4 py-1.5",
-          "text-sm text-slate-700",
+          "text-sm text-neutral-700",
         )}
       >
-        <Loader2 className={clsx("h-4 w-4 flex-shrink-0 animate-spin", "text-green-500")} />
+        <Spinner size={16} className="flex-shrink-0 text-green-500" />
         <span className={clsx("flex-1", "text-left font-medium")}>Installing...</span>
       </div>
     );
diff --git a/apps/desktop2/src/components/main/sidebar/profile/shared.tsx b/apps/desktop2/src/components/main/sidebar/profile/shared.tsx
index bea47873c..3e279886d 100644
--- a/apps/desktop2/src/components/main/sidebar/profile/shared.tsx
+++ b/apps/desktop2/src/components/main/sidebar/profile/shared.tsx
@@ -1,10 +1,11 @@
 import { clsx } from "clsx";
 
 export function MenuItem(
-  { icon: Icon, label, badge, onClick }: {
+  { icon: Icon, label, badge, suffixIcon: SuffixIcon, onClick }: {
     icon: any;
     label: string;
     badge?: number | React.ReactNode;
+    suffixIcon?: any;
     onClick: () => void;
   },
 ) {
@@ -14,7 +15,7 @@ export function MenuItem(
         "flex w-full items-center gap-2.5 rounded-lg",
         "px-4 py-1.5",
         "text-sm text-black",
-        "transition-colors hover:bg-slate-100",
+        "transition-colors hover:bg-neutral-100",
       )}
       onClick={onClick}
     >
@@ -36,6 +37,7 @@ export function MenuItem(
           )
           : badge
       )}
+      {SuffixIcon && <SuffixIcon className={clsx("h-4 w-4 flex-shrink-0", "text-neutral-400")} />}
     </button>
   );
 }
diff --git a/apps/desktop2/src/components/main/sidebar/search/index.tsx b/apps/desktop2/src/components/main/sidebar/search/index.tsx
index a78795e8d..e68df541d 100644
--- a/apps/desktop2/src/components/main/sidebar/search/index.tsx
+++ b/apps/desktop2/src/components/main/sidebar/search/index.tsx
@@ -10,7 +10,7 @@ export function SearchResults() {
   const empty = !query || !results || results.totalResults === 0;
 
   return (
-    <div className={cn(["h-full rounded-md bg-color1"])}>
+    <div className="h-full rounded-md bg-neutral-50">
       {empty
         ? <SearchNoResults query={query} setQuery={setQuery} />
         : <SearchYesResults results={results} query={query} />}
diff --git a/apps/desktop2/tailwind.config.ts b/apps/desktop2/tailwind.config.ts
index eb97cceed..5403a4290 100644
--- a/apps/desktop2/tailwind.config.ts
+++ b/apps/desktop2/tailwind.config.ts
@@ -10,12 +10,6 @@ const config = {
       fontFamily: {
         "racing-sans": ["Racing Sans One", "cursive"],
       },
-      colors: {
-        color1: "#FBFBFB",
-        color2: "#F4F4F4",
-        color3: "#8e8e8e",
-        color4: "#484848",
-      },
     },
   },
   plugins: [],
diff --git a/packages/ui/src/components/block/event-chip.tsx b/packages/ui/src/components/block/event-chip.tsx
index 30828fca0..423353653 100644
--- a/packages/ui/src/components/block/event-chip.tsx
+++ b/packages/ui/src/components/block/event-chip.tsx
@@ -120,9 +120,9 @@ export function EventChip({
           title={formatDate(new Date(event?.start_date || date), "EEE, MMM d, yyyy") + " at "
             + formatDate(new Date(event?.start_date || date), "h:mm a")}
         >
-          <span className="flex-shrink-0 text-color4">{getIcon()}</span>
+          <span className="flex-shrink-0 text-neutral-700">{getIcon()}</span>
           {!isVeryNarrow && (
-            <p className="text-xs truncate text-color4">
+            <p className="text-xs truncate text-neutral-700">
               {formatRelativeDate(event?.start_date || date)}
             </p>
           )}
@@ -211,7 +211,7 @@ function EventDetails({
       )}
 
       <div className="font-semibold pr-8">{event.name}</div>
-      <div className="text-sm text-color4">{getDateString()}</div>
+      <div className="text-sm text-neutral-700">{getDateString()}</div>
 
       <div className="flex gap-2">
         {event.meetingLink && onJoinMeeting && (
@@ -236,7 +236,7 @@ function EventDetails({
       </div>
 
       {event.note && (
-        <div className="border-t pt-2 text-sm text-color4 whitespace-pre-wrap break-words max-h-40 overflow-y-auto">
+        <div className="border-t pt-2 text-sm text-neutral-700 whitespace-pre-wrap break-words max-h-40 overflow-y-auto">
           {event.note}
         </div>
       )}
@@ -258,19 +258,19 @@ function EventSearch({
   return (
     <div>
       <div className="flex items-center w-full px-2 py-1.5 gap-2 rounded-md bg-neutral-50 border border-neutral-200 mb-2">
-        <SearchIcon className="size-4 text-color4 flex-shrink-0" />
+        <SearchIcon className="size-4 text-neutral-700 flex-shrink-0" />
         <input
           type="text"
           placeholder="Search past events..."
           value={searchQuery}
           onChange={(e) => onSearchChange?.(e.target.value)}
-          className="w-full bg-transparent text-sm focus:outline-none placeholder:text-color3"
+          className="w-full bg-transparent text-sm focus:outline-none placeholder:text-neutral-500"
         />
       </div>
 
       {searchResults.length === 0
         ? (
-          <div className="p-4 text-center text-sm text-color4">
+          <div className="p-4 text-center text-sm text-neutral-700">
             {searchQuery ? "No matching events found." : "No past events available."}
           </div>
         )
@@ -285,7 +285,7 @@ function EventSearch({
                 <p className="text-sm font-medium overflow-hidden text-ellipsis whitespace-nowrap w-full">
                   {event.name}
                 </p>
-                <p className="text-xs text-color4">
+                <p className="text-xs text-neutral-700">
                   {formatDate(new Date(event.start_date), "MMM d, yyyy")}
                 </p>
               </button>
diff --git a/packages/ui/src/components/block/meeting-metadata-chip.tsx b/packages/ui/src/components/block/meeting-metadata-chip.tsx
index 5aa72d94a..dff36c8fe 100644
--- a/packages/ui/src/components/block/meeting-metadata-chip.tsx
+++ b/packages/ui/src/components/block/meeting-metadata-chip.tsx
@@ -121,7 +121,7 @@ export function MeetingMetadataChip({
     <Popover open={isOpen} onOpenChange={setIsOpen}>
       <PopoverTrigger asChild>
         <Button
-          className="max-w-28 text-color4"
+          className="max-w-28 text-neutral-700"
           size="sm"
           variant="ghost"
           onClick={(e) => {
@@ -146,8 +146,8 @@ export function MeetingMetadataChip({
           {metadata.location && (
             <>
               <div className="flex items-center gap-2">
-                <MapPinIcon size={16} className="flex-shrink-0 text-color4" />
-                <span className="text-sm text-color4 truncate">
+                <MapPinIcon size={16} className="flex-shrink-0 text-neutral-700" />
+                <span className="text-sm text-neutral-700 truncate">
                   {metadata.location}
                 </span>
               </div>
@@ -159,8 +159,8 @@ export function MeetingMetadataChip({
             <>
               <div className="flex items-center justify-between gap-2">
                 <div className="flex items-center gap-2 flex-1 min-w-0">
-                  <VideoIcon size={16} className="flex-shrink-0 text-color4" />
-                  <span className="text-sm text-color4 truncate">
+                  <VideoIcon size={16} className="flex-shrink-0 text-neutral-700" />
+                  <span className="text-sm text-neutral-700 truncate">
                     {getMeetingDomain(metadata.meeting_link)}
                   </span>
                 </div>
@@ -177,7 +177,7 @@ export function MeetingMetadataChip({
             </>
           )}
 
-          <p className="text-sm text-color4">
+          <p className="text-sm text-neutral-700">
             {formatDateRange(metadata.started_at, metadata.ended_at)}
           </p>
 
@@ -197,7 +197,7 @@ export function MeetingMetadataChip({
           {metadata.description && (
             <>
               <div className="border-t border-neutral-200" />
-              <div className="text-sm text-color4 whitespace-pre-wrap break-words max-h-40 overflow-y-auto">
+              <div className="text-sm text-neutral-700 whitespace-pre-wrap break-words max-h-40 overflow-y-auto">
                 {metadata.description}
               </div>
             </>
@@ -278,7 +278,7 @@ function ParticipantsSection({
 
   return (
     <div className="flex flex-col gap-2">
-      <div className="text-xs font-medium text-color3">Participants</div>
+      <div className="text-xs font-medium text-neutral-500">Participants</div>
 
       {/* Existing Participants Chips */}
       {participants.length > 0 && (
@@ -298,7 +298,7 @@ function ParticipantsSection({
       {/* Search Input */}
       <div className="relative">
         <div className="flex items-center w-full px-2 py-1.5 gap-2 rounded bg-neutral-50 border border-neutral-200 focus-within:border-neutral-300">
-          <SearchIcon className="size-4 text-color4 flex-shrink-0" />
+          <SearchIcon className="size-4 text-neutral-700 flex-shrink-0" />
           <input
             type="text"
             value={searchQuery}
@@ -313,7 +313,7 @@ function ParticipantsSection({
               setTimeout(() => setIsFocused(false), 200);
             }}
             placeholder="Add participant"
-            className="w-full bg-transparent text-sm focus:outline-none placeholder:text-color3"
+            className="w-full bg-transparent text-sm focus:outline-none placeholder:text-neutral-500"
           />
           {searchQuery.trim() && (
             <button
@@ -322,7 +322,7 @@ function ParticipantsSection({
                   handleSelectParticipant(searchResults[selectedIndex].id);
                 }
               }}
-              className="text-color4 hover:text-color4 transition-colors flex-shrink-0"
+              className="text-neutral-700 transition-colors flex-shrink-0"
             >
               <CornerDownLeft className="size-4" />
             </button>
@@ -347,7 +347,7 @@ function ParticipantsSection({
                   >
                     <span className="font-medium truncate">{participant.full_name || "Unknown"}</span>
                     {participant.organization?.name && (
-                      <span className="text-xs text-color3 ml-2 flex-shrink-0">
+                      <span className="text-xs text-neutral-500 ml-2 flex-shrink-0">
                         {participant.organization.name}
                       </span>
                     )}
@@ -355,7 +355,7 @@ function ParticipantsSection({
                 ))
               )
               : (
-                <div className="px-3 py-2 text-sm text-color3 text-center">
+                <div className="px-3 py-2 text-sm text-neutral-500 text-center">
                   No matching participants found
                 </div>
               )}
@@ -387,26 +387,26 @@ function ParticipantChip({ participant, currentUserId, onClick, onRemove }: Part
     || (participant.id === currentUserId ? "You" : "Unknown");
 
   return (
-    <div className="group relative inline-flex items-center gap-1.5 px-2 py-1 bg-neutral-100 rounded-md hover:bg-neutral-200 transition-colors">
-      <div className="flex items-center gap-1.5 cursor-pointer" onClick={onClick}>
-        <Avatar className="size-5">
-          <AvatarFallback className="text-[10px] bg-neutral-200 text-color4 font-medium">
+    <div className="group relative inline-flex items-center gap-2 px-3 py-2 bg-neutral-100 rounded-lg hover:bg-neutral-200 transition-colors w-full">
+      <div className="flex flex-1 items-center gap-2 cursor-pointer" onClick={onClick}>
+        <Avatar className="size-7">
+          <AvatarFallback className="text-xs bg-neutral-200 text-neutral-700 font-medium">
             {participant.full_name ? getInitials(participant.full_name) : "?"}
           </AvatarFallback>
         </Avatar>
-        <span className="text-xs font-medium text-color4 max-w-[120px] truncate">
+        <span className="text-sm font-medium text-neutral-700 max-w-[140px] truncate">
           {displayName}
         </span>
       </div>
 
-      <div className="flex items-center gap-1">
+      <div className="flex items-center gap-1.5">
         {participant.email && (
           <a
             href={`mailto:${participant.email}`}
             onClick={(e) => e.stopPropagation()}
-            className="text-color3 transition-colors hover:text-color4 opacity-0 group-hover:opacity-100"
+            className="text-neutral-500 transition-colors hover:text-neutral-700 opacity-0 group-hover:opacity-100"
           >
-            <MailIcon className="size-3" />
+            <MailIcon className="size-4" />
           </a>
         )}
         {participant.linkedin_username && (
@@ -415,9 +415,9 @@ function ParticipantChip({ participant, currentUserId, onClick, onRemove }: Part
             onClick={(e) => e.stopPropagation()}
             target="_blank"
             rel="noopener noreferrer"
-            className="text-color3 transition-colors hover:text-color4 opacity-0 group-hover:opacity-100"
+            className="text-neutral-500 transition-colors hover:text-neutral-700 opacity-0 group-hover:opacity-100"
           >
-            <LinkedInIcon className="size-3" />
+            <LinkedInIcon className="size-4" />
           </a>
         )}
         <button
@@ -427,7 +427,7 @@ function ParticipantChip({ participant, currentUserId, onClick, onRemove }: Part
           }}
           className="text-red-400 hover:text-red-600 transition-colors opacity-0 group-hover:opacity-100"
         >
-          <CircleMinus className="size-3.5" />
+          <CircleMinus className="size-4" />
         </button>
       </div>
     </div>
diff --git a/packages/ui/src/components/block/participants-chip.tsx b/packages/ui/src/components/block/participants-chip.tsx
index b7c7679d3..01b7d26d9 100644
--- a/packages/ui/src/components/block/participants-chip.tsx
+++ b/packages/ui/src/components/block/participants-chip.tsx
@@ -82,9 +82,9 @@ export function ParticipantsChip({
             isVeryNarrow ? "px-1.5" : "px-2",
           )}
         >
-          <Users2Icon size={14} className="flex-shrink-0 text-color4" />
-          <span className="truncate text-color4">{getButtonText()}</span>
-          {count > 1 && !isVeryNarrow && !isNarrow && <span className="text-color3">+ {count - 1}</span>}
+          <Users2Icon size={14} className="flex-shrink-0 text-neutral-700" />
+          <span className="truncate text-neutral-700">{getButtonText()}</span>
+          {count > 1 && !isVeryNarrow && !isNarrow && <span className="text-neutral-500">+ {count - 1}</span>}
         </div>
       </PopoverTrigger>
 
@@ -141,7 +141,7 @@ function ParticipantList({
     <div className="flex flex-col gap-4 max-h-[40vh] overflow-y-auto pr-1">
       {participants.map((group, index) => (
         <div key={group.organization?.id ?? `no-org-${index}`} className="flex flex-col gap-1.5">
-          <div className="text-xs font-medium text-color3 truncate">
+          <div className="text-xs font-medium text-neutral-500 truncate">
             {group.organization?.name || "No organization"}
           </div>
           <div className="flex flex-col rounded-md overflow-hidden bg-neutral-50 border border-neutral-100">
@@ -199,7 +199,7 @@ function ParticipantItem({
             )}
           >
             <Avatar className="size-7">
-              <AvatarFallback className="text-xs bg-neutral-200 text-color4 font-medium">
+              <AvatarFallback className="text-xs bg-neutral-200 text-neutral-700 font-medium">
                 {participant.full_name ? getInitials(participant.full_name) : "?"}
               </AvatarFallback>
             </Avatar>
@@ -217,10 +217,10 @@ function ParticipantItem({
           )}
         </div>
         <div className="flex flex-col min-w-0 flex-1">
-          <span className="text-sm font-medium text-color4 truncate">
+          <span className="text-sm font-medium text-neutral-700 truncate">
             {participant.full_name || (participant.id === currentUserId ? "You" : "Unknown")}
           </span>
-          {participant.job_title && <span className="text-xs text-color3 truncate">{participant.job_title}</span>}
+          {participant.job_title && <span className="text-xs text-neutral-500 truncate">{participant.job_title}</span>}
         </div>
       </div>
 
@@ -229,7 +229,7 @@ function ParticipantItem({
           <a
             href={`mailto:${participant.email}`}
             onClick={(e) => e.stopPropagation()}
-            className="text-color3 transition-colors hover:text-color4 p-1 rounded-full hover:bg-neutral-200"
+            className="text-neutral-500 transition-colors hover:text-neutral-700 p-1 rounded-full hover:bg-neutral-200"
           >
             <MailIcon className="size-3.5" />
           </a>
@@ -238,7 +238,7 @@ function ParticipantItem({
           <a
             href={`https://linkedin.com/in/${participant.linkedin_username}`}
             onClick={(e) => e.stopPropagation()}
-            className="text-color3 transition-colors hover:text-color4 p-1 rounded-full hover:bg-neutral-200"
+            className="text-neutral-500 transition-colors hover:text-neutral-700 p-1 rounded-full hover:bg-neutral-200"
           >
             <LinkedInIcon className="size-3.5" />
           </a>
@@ -272,18 +272,18 @@ function AddParticipantInput({
     >
       <div className="flex flex-col gap-2">
         <div className="flex items-center w-full px-2 py-1.5 gap-2 rounded bg-neutral-50 border border-neutral-200">
-          <SearchIcon className="size-4 text-color4 flex-shrink-0" />
+          <SearchIcon className="size-4 text-neutral-700 flex-shrink-0" />
           <input
             type="text"
             value={value}
             onChange={(e) => onChange?.(e.target.value)}
             placeholder="Find person"
-            className="w-full bg-transparent text-sm focus:outline-none placeholder:text-color3"
+            className="w-full bg-transparent text-sm focus:outline-none placeholder:text-neutral-500"
           />
           {value.trim() && (
             <button
               type="submit"
-              className="text-color4 hover:text-color4 transition-colors flex-shrink-0"
+              className="text-neutral-700 hover:text-neutral-700 transition-colors flex-shrink-0"
             >
               <CornerDownLeft className="size-4" />
             </button>
@@ -301,7 +301,7 @@ function AddParticipantInput({
               >
                 <span className="font-medium truncate">{participant.full_name}</span>
                 {participant.organization?.name && (
-                  <span className="text-xs text-color3 ml-auto">
+                  <span className="text-xs text-neutral-500 ml-auto">
                     {participant.organization.name}
                   </span>
                 )}
@@ -312,8 +312,8 @@ function AddParticipantInput({
                 type="submit"
                 className="flex items-center px-3 py-2 text-sm text-left hover:bg-neutral-100 transition-colors w-full"
               >
-                <span className="flex items-center gap-1 font-medium text-color4">
-                  Create <span className="text-color4">"{value.trim()}"</span>
+                <span className="flex items-center gap-1 font-medium text-neutral-700">
+                  Create <span className="text-neutral-700">"{value.trim()}"</span>
                 </span>
               </button>
             )}
diff --git a/packages/ui/src/components/ui/dropdown-menu.tsx b/packages/ui/src/components/ui/dropdown-menu.tsx
index cb10bc24b..060c81424 100644
--- a/packages/ui/src/components/ui/dropdown-menu.tsx
+++ b/packages/ui/src/components/ui/dropdown-menu.tsx
@@ -44,7 +44,7 @@ const DropdownMenuSubContent = React.forwardRef<
   <DropdownMenuPrimitive.SubContent
     ref={ref}
     className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      "z-50 min-w-[8rem] overflow-hidden rounded-lg border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       className,
     )}
     {...props}
@@ -61,7 +61,7 @@ const DropdownMenuContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "z-50 min-w-[8rem] overflow-hidden rounded-lg border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         className,
       )}
       {...props}
diff --git a/packages/ui/src/components/ui/popover.tsx b/packages/ui/src/components/ui/popover.tsx
index 64a1ce0fa..526ae221b 100644
--- a/packages/ui/src/components/ui/popover.tsx
+++ b/packages/ui/src/components/ui/popover.tsx
@@ -60,7 +60,7 @@ const PopoverContent = React.forwardRef<
           "--animation-duration": `${animationDuration}ms`,
         } as React.CSSProperties}
         className={cn(
-          "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none",
+          "z-50 w-72 rounded-lg border bg-popover p-4 text-popover-foreground shadow-md outline-none",
           "data-[state=open]:animate-in data-[state=closed]:animate-out",
           "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
           "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
diff --git a/packages/ui/src/components/ui/separator.tsx b/packages/ui/src/components/ui/separator.tsx
new file mode 100644
index 000000000..e1e51f19c
--- /dev/null
+++ b/packages/ui/src/components/ui/separator.tsx
@@ -0,0 +1,31 @@
+"use client";
+
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import * as React from "react";
+
+import { cn } from "@hypr/ui/lib/utils";
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(
+  (
+    { className, orientation = "horizontal", decorative = true, ...props },
+    ref,
+  ) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+Separator.displayName = SeparatorPrimitive.Root.displayName;
+
+export { Separator };
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 496731f4b..48cf526a0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -177,10 +177,10 @@ importers:
         version: 10.1.0
       '@tanstack/react-router-devtools':
         specifier: ^1.133.3
-        version: 1.133.3(@tanstack/react-router@1.133.3(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(@tanstack/router-core@1.133.3)(@types/node@24.8.0)(csstype@3.1.3)(jiti@1.21.7)(lightningcss@1.30.1)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(solid-js@1.9.7)(sugarss@5.0.1(postcss@8.5.6))(terser@5.44.0)(tiny-invariant@1.3.3)(tsx@4.20.6)(yaml@2.8.1)
+        version: 1.133.3(@tanstack/react-router@1.133.3(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(@tanstack/router-core@1.133.3)(@types/node@24.8.0)(csstype@3.1.3)(jiti@2.6.1)(lightningcss@1.30.1)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(solid-js@1.9.7)(sugarss@5.0.1(postcss@8.5.6))(terser@5.44.0)(tiny-invariant@1.3.3)(tsx@4.20.6)(yaml@2.8.1)
       '@tanstack/router-plugin':
         specifier: ^1.133.4
-        version: 1.133.4(@tanstack/react-router@1.133.3(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(vite@7.1.10(@types/node@24.8.0)(jiti@1.21.7)(lightningcss@1.30.1)(sugarss@5.0.1(postcss@8.5.6))(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.1))
+        version: 1.133.4(@tanstack/react-router@1.133.3(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(vite@7.1.10(@types/node@24.8.0)(jiti@2.6.1)(lightningcss@1.30.1)(sugarss@5.0.1(postcss@8.5.6))(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.1))
       '@tauri-apps/cli':
         specifier: ^2.8.4
         version: 2.8.4
@@ -195,7 +195,7 @@ importers:
         version: 19.2.2(@types/react@19.2.2)
       '@vitejs/plugin-react':
         specifier: ^4.7.0
-        version: 4.7.0(vite@7.1.10(@types/node@24.8.0)(jiti@1.21.7)(lightningcss@1.30.1)(sugarss@5.0.1(postcss@8.5.6))(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.1))
+        version: 4.7.0(vite@7.1.10(@types/node@24.8.0)(jiti@2.6.1)(lightningcss@1.30.1)(sugarss@5.0.1(postcss@8.5.6))(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.1))
       autoprefixer:
         specifier: ^10.4.21
         version: 10.4.21(postcss@8.5.6)
@@ -210,10 +210,10 @@ importers:
         version: 5.8.3
       vite:
         specifier: ^7.1.10
-        version: 7.1.10(@types/node@24.8.0)(jiti@1.21.7)(lightningcss@1.30.1)(sugarss@5.0.1(postcss@8.5.6))(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.1)
+        version: 7.1.10(@types/node@24.8.0)(jiti@2.6.1)(lightningcss@1.30.1)(sugarss@5.0.1(postcss@8.5.6))(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.1)
       vitest:
         specifier: ^3.2.4
-        version: 3.2.4(@types/debug@4.1.12)(@types/node@24.8.0)(jiti@1.21.7)(jsdom@27.0.0(postcss@8.5.6))(lightningcss@1.30.1)(msw@2.10.4(@types/node@24.8.0)(typescript@5.8.3))(sugarss@5.0.1(postcss@8.5.6))(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.1)
+        version: 3.2.4(@types/debug@4.1.12)(@types/node@24.8.0)(jiti@2.6.1)(jsdom@27.0.0(postcss@8.5.6))(lightningcss@1.30.1)(msw@2.10.4(@types/node@24.8.0)(typescript@5.8.3))(sugarss@5.0.1(postcss@8.5.6))(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.1)
 
   apps/pro:
     dependencies:
@@ -10832,13 +10832,13 @@ snapshots:
       - tsx
       - yaml
 
-  '@tanstack/react-router-devtools@1.133.3(@tanstack/react-router@1.133.3(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(@tanstack/router-core@1.133.3)(@types/node@24.8.0)(csstype@3.1.3)(jiti@1.21.7)(lightningcss@1.30.1)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(solid-js@1.9.7)(sugarss@5.0.1(postcss@8.5.6))(terser@5.44.0)(tiny-invariant@1.3.3)(tsx@4.20.6)(yaml@2.8.1)':
+  '@tanstack/react-router-devtools@1.133.3(@tanstack/react-router@1.133.3(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(@tanstack/router-core@1.133.3)(@types/node@24.8.0)(csstype@3.1.3)(jiti@2.6.1)(lightningcss@1.30.1)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(solid-js@1.9.7)(sugarss@5.0.1(postcss@8.5.6))(terser@5.44.0)(tiny-invariant@1.3.3)(tsx@4.20.6)(yaml@2.8.1)':
     dependencies:
       '@tanstack/react-router': 1.133.3(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@tanstack/router-devtools-core': 1.133.3(@tanstack/router-core@1.133.3)(@types/node@24.8.0)(csstype@3.1.3)(jiti@1.21.7)(lightningcss@1.30.1)(solid-js@1.9.7)(sugarss@5.0.1(postcss@8.5.6))(terser@5.44.0)(tiny-invariant@1.3.3)(tsx@4.20.6)(yaml@2.8.1)
+      '@tanstack/router-devtools-core': 1.133.3(@tanstack/router-core@1.133.3)(@types/node@24.8.0)(csstype@3.1.3)(jiti@2.6.1)(lightningcss@1.30.1)(solid-js@1.9.7)(sugarss@5.0.1(postcss@8.5.6))(terser@5.44.0)(tiny-invariant@1.3.3)(tsx@4.20.6)(yaml@2.8.1)
       react: 19.2.0
       react-dom: 19.2.0(react@19.2.0)
-      vite: 7.1.10(@types/node@24.8.0)(jiti@1.21.7)(lightningcss@1.30.1)(sugarss@5.0.1(postcss@8.5.6))(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.1)
+      vite: 7.1.10(@types/node@24.8.0)(jiti@2.6.1)(lightningcss@1.30.1)(sugarss@5.0.1(postcss@8.5.6))(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.1)
     transitivePeerDependencies:
       - '@tanstack/router-core'
       - '@types/node'
@@ -10966,14 +10966,14 @@ snapshots:
       - tsx
       - yaml
 
-  '@tanstack/router-devtools-core@1.133.3(@tanstack/router-core@1.133.3)(@types/node@24.8.0)(csstype@3.1.3)(jiti@1.21.7)(lightningcss@1.30.1)(solid-js@1.9.7)(sugarss@5.0.1(postcss@8.5.6))(terser@5.44.0)(tiny-invariant@1.3.3)(tsx@4.20.6)(yaml@2.8.1)':
+  '@tanstack/router-devtools-core@1.133.3(@tanstack/router-core@1.133.3)(@types/node@24.8.0)(csstype@3.1.3)(jiti@2.6.1)(lightningcss@1.30.1)(solid-js@1.9.7)(sugarss@5.0.1(postcss@8.5.6))(terser@5.44.0)(tiny-invariant@1.3.3)(tsx@4.20.6)(yaml@2.8.1)':
     dependencies:
       '@tanstack/router-core': 1.133.3
       clsx: 2.1.1
       goober: 2.1.18(csstype@3.1.3)
       solid-js: 1.9.7
       tiny-invariant: 1.3.3
-      vite: 7.1.10(@types/node@24.8.0)(jiti@1.21.7)(lightningcss@1.30.1)(sugarss@5.0.1(postcss@8.5.6))(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.1)
+      vite: 7.1.10(@types/node@24.8.0)(jiti@2.6.1)(lightningcss@1.30.1)(sugarss@5.0.1(postcss@8.5.6))(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.1)
     optionalDependencies:
       csstype: 3.1.3
     transitivePeerDependencies:
@@ -11024,7 +11024,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@tanstack/router-plugin@1.133.4(@tanstack/react-router@1.133.3(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(vite@7.1.10(@types/node@24.8.0)(jiti@1.21.7)(lightningcss@1.30.1)(sugarss@5.0.1(postcss@8.5.6))(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.1))':
+  '@tanstack/router-plugin@1.133.4(@tanstack/react-router@1.133.3(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(vite@7.1.10(@types/node@24.8.0)(jiti@2.6.1)(lightningcss@1.30.1)(sugarss@5.0.1(postcss@8.5.6))(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.1))':
     dependencies:
       '@babel/core': 7.28.4
       '@babel/plugin-syntax-jsx': 7.27.1(@babel/core@7.28.4)
@@ -11042,7 +11042,7 @@ snapshots:
       zod: 3.25.76
     optionalDependencies:
       '@tanstack/react-router': 1.133.3(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      vite: 7.1.10(@types/node@24.8.0)(jiti@1.21.7)(lightningcss@1.30.1)(sugarss@5.0.1(postcss@8.5.6))(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.1)
+      vite: 7.1.10(@types/node@24.8.0)(jiti@2.6.1)(lightningcss@1.30.1)(sugarss@5.0.1(postcss@8.5.6))(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.1)
     transitivePeerDependencies:
       - supports-color
 
@@ -11724,7 +11724,7 @@ snapshots:
 
   '@vercel/oidc@3.0.3': {}
 
-  '@vitejs/plugin-react@4.7.0(vite@7.1.10(@types/node@24.8.0)(jiti@1.21.7)(lightningcss@1.30.1)(sugarss@5.0.1(postcss@8.5.6))(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.1))':
+  '@vitejs/plugin-react@4.7.0(vite@7.1.10(@types/node@24.8.0)(jiti@2.6.1)(lightningcss@1.30.1)(sugarss@5.0.1(postcss@8.5.6))(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.1))':
     dependencies:
       '@babel/core': 7.28.4
       '@babel/plugin-transform-react-jsx-self': 7.27.1(@babel/core@7.28.4)
@@ -11732,7 +11732,7 @@ snapshots:
       '@rolldown/pluginutils': 1.0.0-beta.27
       '@types/babel__core': 7.20.5
       react-refresh: 0.17.0
-      vite: 7.1.10(@types/node@24.8.0)(jiti@1.21.7)(lightningcss@1.30.1)(sugarss@5.0.1(postcss@8.5.6))(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.1)
+      vite: 7.1.10(@types/node@24.8.0)(jiti@2.6.1)(lightningcss@1.30.1)(sugarss@5.0.1(postcss@8.5.6))(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.1)
     transitivePeerDependencies:
       - supports-color
 
@@ -11765,14 +11765,14 @@ snapshots:
       msw: 2.10.4(@types/node@22.18.10)(typescript@5.9.3)
       vite: 7.1.10(@types/node@22.18.10)(jiti@2.6.1)(lightningcss@1.30.1)(sugarss@5.0.1(postcss@8.5.6))(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.1)
 
-  '@vitest/mocker@3.2.4(msw@2.10.4(@types/node@24.8.0)(typescript@5.8.3))(vite@7.1.10(@types/node@24.8.0)(jiti@1.21.7)(lightningcss@1.30.1)(sugarss@5.0.1(postcss@8.5.6))(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.1))':
+  '@vitest/mocker@3.2.4(msw@2.10.4(@types/node@24.8.0)(typescript@5.8.3))(vite@7.1.10(@types/node@24.8.0)(jiti@2.6.1)(lightningcss@1.30.1)(sugarss@5.0.1(postcss@8.5.6))(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.1))':
     dependencies:
       '@vitest/spy': 3.2.4
       estree-walker: 3.0.3
       magic-string: 0.30.19
     optionalDependencies:
       msw: 2.10.4(@types/node@24.8.0)(typescript@5.8.3)
-      vite: 7.1.10(@types/node@24.8.0)(jiti@1.21.7)(lightningcss@1.30.1)(sugarss@5.0.1(postcss@8.5.6))(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.1)
+      vite: 7.1.10(@types/node@24.8.0)(jiti@2.6.1)(lightningcss@1.30.1)(sugarss@5.0.1(postcss@8.5.6))(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.1)
 
   '@vitest/mocker@3.2.4(msw@2.10.4(@types/node@24.8.0)(typescript@5.9.3))(vite@7.1.10(@types/node@24.8.0)(jiti@2.6.1)(lightningcss@1.30.1)(sugarss@5.0.1(postcss@8.5.6))(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.1))':
     dependencies:
@@ -15948,27 +15948,6 @@ snapshots:
       - tsx
       - yaml
 
-  vite-node@3.2.4(@types/node@24.8.0)(jiti@1.21.7)(lightningcss@1.30.1)(sugarss@5.0.1(postcss@8.5.6))(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.1):
-    dependencies:
-      cac: 6.7.14
-      debug: 4.4.3
-      es-module-lexer: 1.7.0
-      pathe: 2.0.3
-      vite: 7.1.10(@types/node@24.8.0)(jiti@1.21.7)(lightningcss@1.30.1)(sugarss@5.0.1(postcss@8.5.6))(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.1)
-    transitivePeerDependencies:
-      - '@types/node'
-      - jiti
-      - less
-      - lightningcss
-      - sass
-      - sass-embedded
-      - stylus
-      - sugarss
-      - supports-color
-      - terser
-      - tsx
-      - yaml
-
   vite-node@3.2.4(@types/node@24.8.0)(jiti@2.6.1)(lightningcss@1.30.1)(sugarss@5.0.1(postcss@8.5.6))(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.1):
     dependencies:
       cac: 6.7.14
@@ -16019,24 +15998,6 @@ snapshots:
       tsx: 4.20.6
       yaml: 2.8.1
 
-  vite@7.1.10(@types/node@24.8.0)(jiti@1.21.7)(lightningcss@1.30.1)(sugarss@5.0.1(postcss@8.5.6))(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.1):
-    dependencies:
-      esbuild: 0.25.11
-      fdir: 6.5.0(picomatch@4.0.3)
-      picomatch: 4.0.3
-      postcss: 8.5.6
-      rollup: 4.52.4
-      tinyglobby: 0.2.15
-    optionalDependencies:
-      '@types/node': 24.8.0
-      fsevents: 2.3.3
-      jiti: 1.21.7
-      lightningcss: 1.30.1
-      sugarss: 5.0.1(postcss@8.5.6)
-      terser: 5.44.0
-      tsx: 4.20.6
-      yaml: 2.8.1
-
   vite@7.1.10(@types/node@24.8.0)(jiti@2.6.1)(lightningcss@1.30.1)(sugarss@5.0.1(postcss@8.5.6))(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.1):
     dependencies:
       esbuild: 0.25.11
@@ -16102,11 +16063,11 @@ snapshots:
       - tsx
       - yaml
 
-  vitest@3.2.4(@types/debug@4.1.12)(@types/node@24.8.0)(jiti@1.21.7)(jsdom@27.0.0(postcss@8.5.6))(lightningcss@1.30.1)(msw@2.10.4(@types/node@24.8.0)(typescript@5.8.3))(sugarss@5.0.1(postcss@8.5.6))(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.1):
+  vitest@3.2.4(@types/debug@4.1.12)(@types/node@24.8.0)(jiti@2.6.1)(jsdom@27.0.0(postcss@8.5.6))(lightningcss@1.30.1)(msw@2.10.4(@types/node@24.8.0)(typescript@5.8.3))(sugarss@5.0.1(postcss@8.5.6))(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.1):
     dependencies:
       '@types/chai': 5.2.2
       '@vitest/expect': 3.2.4
-      '@vitest/mocker': 3.2.4(msw@2.10.4(@types/node@24.8.0)(typescript@5.8.3))(vite@7.1.10(@types/node@24.8.0)(jiti@1.21.7)(lightningcss@1.30.1)(sugarss@5.0.1(postcss@8.5.6))(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.1))
+      '@vitest/mocker': 3.2.4(msw@2.10.4(@types/node@24.8.0)(typescript@5.8.3))(vite@7.1.10(@types/node@24.8.0)(jiti@2.6.1)(lightningcss@1.30.1)(sugarss@5.0.1(postcss@8.5.6))(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.1))
       '@vitest/pretty-format': 3.2.4
       '@vitest/runner': 3.2.4
       '@vitest/snapshot': 3.2.4
@@ -16124,8 +16085,8 @@ snapshots:
       tinyglobby: 0.2.15
       tinypool: 1.1.1
       tinyrainbow: 2.0.0
-      vite: 7.1.10(@types/node@24.8.0)(jiti@1.21.7)(lightningcss@1.30.1)(sugarss@5.0.1(postcss@8.5.6))(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.1)
-      vite-node: 3.2.4(@types/node@24.8.0)(jiti@1.21.7)(lightningcss@1.30.1)(sugarss@5.0.1(postcss@8.5.6))(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.1)
+      vite: 7.1.10(@types/node@24.8.0)(jiti@2.6.1)(lightningcss@1.30.1)(sugarss@5.0.1(postcss@8.5.6))(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.1)
+      vite-node: 3.2.4(@types/node@24.8.0)(jiti@2.6.1)(lightningcss@1.30.1)(sugarss@5.0.1(postcss@8.5.6))(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.1)
       why-is-node-running: 2.3.0
     optionalDependencies:
       '@types/debug': 4.1.12