diff --git a/ui/desktop/src/components/GooseSidebar/AppSidebar.tsx b/ui/desktop/src/components/GooseSidebar/AppSidebar.tsx
index f68d4ceabc48..d13adcdfeb83 100644
--- a/ui/desktop/src/components/GooseSidebar/AppSidebar.tsx
+++ b/ui/desktop/src/components/GooseSidebar/AppSidebar.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { FileText, Clock, Home, Puzzle, History, FolderKanban } from 'lucide-react';
 import { useNavigate } from 'react-router-dom';
-import { motion, AnimatePresence } from 'framer-motion';
+import { motion } from 'framer-motion';
 import {
   SidebarContent,
   SidebarFooter,
@@ -10,7 +10,6 @@ import {
   SidebarMenuButton,
   SidebarGroup,
   SidebarGroupContent,
-  useSidebar,
   SidebarSeparator,
 } from '../ui/sidebar';
 import { ChatSmart, Gear } from '../icons';
@@ -18,7 +17,6 @@ import { ViewOptions, View } from '../../App';
 import { Recipe } from '../../recipe';
 import { saveRecipe } from '../../recipe/recipeStorage';
 import { useChatContext } from '../../contexts/ChatContext';
-import { Goose } from '../icons/Goose';
 
 interface SidebarProps {
   onSelectSession: (sessionId: string) => void;
@@ -38,7 +36,6 @@ const AppSidebar: React.FC<SidebarProps> = ({ currentPath }) => {
   const [saveGlobal, setSaveGlobal] = useState(true);
   const [saving, setSaving] = useState(false);
   const { resetChat } = useChatContext();
-  const { state } = useSidebar();
 
   useEffect(() => {
     // Trigger animation after a small delay
@@ -282,33 +279,7 @@ const AppSidebar: React.FC<SidebarProps> = ({ currentPath }) => {
         </SidebarMenu>
       </SidebarContent>
 
-      <SidebarFooter className="mb-2">
-        <motion.div
-          initial={{ opacity: 0, x: 20 }}
-          animate={{ opacity: 1, x: 0 }}
-          transition={{ type: 'spring', stiffness: 300, damping: 25, delay: 0.5 }}
-          className="flex flex-col gap-2 w-full"
-        >
-          <div className="flex items-center gap-2">
-            <Goose className="w-6 h-6" />
-            <AnimatePresence mode="wait">
-              {state === 'expanded' && (
-                <motion.span
-                  key="logo-text"
-                  initial={{ opacity: 0, width: 0 }}
-                  animate={{ opacity: 1, width: 'auto' }}
-                  exit={{ opacity: 0, width: 0 }}
-                  transition={{ duration: 0.2, ease: 'easeInOut' }}
-                  className="text-base overflow-hidden whitespace-nowrap leading-tight"
-                >
-                  codename
-                  <br /> goose
-                </motion.span>
-              )}
-            </AnimatePresence>
-          </div>
-        </motion.div>
-      </SidebarFooter>
+      <SidebarFooter />
 
       {/* Save Recipe Dialog */}
       {showSaveDialog && (
diff --git a/ui/desktop/src/components/Splash.tsx b/ui/desktop/src/components/Splash.tsx
index 92c0e10a5483..ebe11000cde0 100644
--- a/ui/desktop/src/components/Splash.tsx
+++ b/ui/desktop/src/components/Splash.tsx
@@ -40,7 +40,6 @@ export default function Splash({ append, activities, title }: SplashProps) {
       <div className="flex flex-col px-6 mb-0">
         <Greeting className="text-text-prominent text-4xl font-light mb-2" />
       </div>
-
       <div className="flex flex-col">
         {messagePill && (
           <div className="mb-4 p-3 rounded-lg border animate-[fadein_500ms_ease-in_forwards]">
diff --git a/ui/desktop/src/components/UserMessage.tsx b/ui/desktop/src/components/UserMessage.tsx
index 1fbeb67cef46..9415e484e239 100644
--- a/ui/desktop/src/components/UserMessage.tsx
+++ b/ui/desktop/src/components/UserMessage.tsx
@@ -31,7 +31,7 @@ export default function UserMessage({ message }: UserMessageProps) {
   const urls = extractUrls(displayText, []);
 
   return (
-    <div className="message flex justify-start mt-[16px] w-full opacity-0 animate-[appear_150ms_ease-in_forwards]">
+    <div className="message flex justify-end mt-[16px] w-full opacity-0 animate-[appear_150ms_ease-in_forwards]">
       <div className="flex-col max-w-[85%] w-fit">
         <div className="flex flex-col group">
           <div className="flex bg-background-accent text-text-on-accent rounded-xl py-2.5 px-4">
@@ -52,11 +52,11 @@ export default function UserMessage({ message }: UserMessageProps) {
             </div>
           )}
 
-          <div className="relative h-[22px] flex justify-end">
-            <div className="absolute font-mono left-0 w-40 text-xs text-text-muted pt-1 transition-all duration-200 group-hover:-translate-y-4 group-hover:opacity-0">
+          <div className="relative h-[22px] flex justify-end text-right overflow-hidden">
+            <div className="absolute font-mono right-4 w-40 text-xs text-text-muted pt-1 transition-all duration-200 group-hover:-translate-y-4 group-hover:opacity-0">
               {timestamp}
             </div>
-            <div className="absolute left-0 pt-1">
+            <div className="absolute right-4 pt-1">
               <MessageCopyLink text={displayText} contentRef={contentRef} />
             </div>
           </div>
diff --git a/ui/desktop/src/components/bottom_menu/BottomMenuModeSelection.tsx b/ui/desktop/src/components/bottom_menu/BottomMenuModeSelection.tsx
index 8917addac94c..72e20517e919 100644
--- a/ui/desktop/src/components/bottom_menu/BottomMenuModeSelection.tsx
+++ b/ui/desktop/src/components/bottom_menu/BottomMenuModeSelection.tsx
@@ -58,9 +58,9 @@ export const BottomMenuModeSelection = ({ setView }: BottomMenuModeSelectionProp
           {getValueByKey(gooseMode).toLowerCase()}
         </span>
       </DropdownMenuTrigger>
-      <DropdownMenuContent className="w-[240px] px-2" side="top" align="end">
+      <DropdownMenuContent className="w-64" side="top" align="center">
         {all_goose_modes.map((mode) => (
-          <DropdownMenuItem key={mode.key} className="p-0">
+          <DropdownMenuItem key={mode.key} asChild>
             <ModeSelectionItem
               mode={mode}
               currentMode={gooseMode}
diff --git a/ui/desktop/src/components/common/Greeting.tsx b/ui/desktop/src/components/common/Greeting.tsx
index 68e7be6e4146..704d2af8aa62 100644
--- a/ui/desktop/src/components/common/Greeting.tsx
+++ b/ui/desktop/src/components/common/Greeting.tsx
@@ -48,11 +48,9 @@ export function Greeting({
   const messageRef = useTextAnimator({ text: greeting.message });
 
   return (
-    <div className="px-8 pb-12 pt-16 bg-background-default">
-      <h1 className={className} key={forceRefresh ? Date.now() : undefined}>
-        {/* <span>{greeting.prefix}</span> */}
-        <span ref={messageRef}>{greeting.message}</span>
-      </h1>
-    </div>
+    <h1 className={className} key={forceRefresh ? Date.now() : undefined}>
+      {/* <span>{greeting.prefix}</span> */}
+      <span ref={messageRef}>{greeting.message}</span>
+    </h1>
   );
 }
diff --git a/ui/desktop/src/components/sessions/SessionsInsights.tsx b/ui/desktop/src/components/sessions/SessionsInsights.tsx
index 1beb57057ded..f0e022b1eb6a 100644
--- a/ui/desktop/src/components/sessions/SessionsInsights.tsx
+++ b/ui/desktop/src/components/sessions/SessionsInsights.tsx
@@ -9,6 +9,7 @@ import { useNavigate } from 'react-router-dom';
 import { Button } from '../ui/button';
 import { ChatSmart } from '../icons/';
 import { motion, AnimatePresence } from 'framer-motion';
+import { Goose } from '../icons/Goose';
 
 interface SessionInsightsType {
   totalSessions: number;
@@ -106,7 +107,17 @@ export function SessionInsights() {
 
   return (
     <div className="bg-background-muted">
-      <Greeting />
+      <div className="px-8 pb-12 pt-19 bg-background-default space-y-4">
+        <motion.div
+          initial={{ opacity: 0, scale: 0.25, x: -5, y: 5, rotate: -20 }}
+          animate={{ opacity: 1, scale: 1, x: 0, y: 0, rotate: 0 }}
+          transition={{ type: 'spring', stiffness: 300, damping: 25 }}
+          className="origin-bottom-left"
+        >
+          <Goose className="size-8" />
+        </motion.div>
+        <Greeting />
+      </div>
 
       <div className="grid gap-[2px] mt-0.5">
         {/* Top row with three equal columns */}
diff --git a/ui/desktop/src/components/settings/mode/ModeSelectionItem.tsx b/ui/desktop/src/components/settings/mode/ModeSelectionItem.tsx
index c6dec41e5f6b..eefa9a1b5880 100644
--- a/ui/desktop/src/components/settings/mode/ModeSelectionItem.tsx
+++ b/ui/desktop/src/components/settings/mode/ModeSelectionItem.tsx
@@ -59,17 +59,15 @@ export function ModeSelectionItem({
   }, [currentMode, mode.key]);
 
   return (
-    <div className="group hover:cursor-pointer">
+    <div className="group hover:cursor-pointer text-sm">
       <div
         className={`flex items-center justify-between text-text-default py-2 px-2 ${checked ? 'bg-background-muted' : 'bg-background-default hover:bg-background-muted'} rounded-lg transition-all`}
         onClick={() => handleModeChange(mode.key)}
       >
         <div className="flex">
           <div>
-            <h3 className="text-text-default text-xs">{mode.label}</h3>
-            {showDescription && (
-              <p className="text-xs text-text-muted mt-[2px]">{mode.description}</p>
-            )}
+            <h3 className="text-text-default">{mode.label}</h3>
+            {showDescription && <p className="text-text-muted mt-[2px]">{mode.description}</p>}
           </div>
         </div>
 
diff --git a/ui/desktop/src/components/settings/models/bottom_bar/ModelsBottomBar.tsx b/ui/desktop/src/components/settings/models/bottom_bar/ModelsBottomBar.tsx
index a58c0380c79c..12c1875344a7 100644
--- a/ui/desktop/src/components/settings/models/bottom_bar/ModelsBottomBar.tsx
+++ b/ui/desktop/src/components/settings/models/bottom_bar/ModelsBottomBar.tsx
@@ -1,11 +1,17 @@
 import { Sliders } from 'lucide-react';
-import React, { useEffect, useState, useRef } from 'react';
+import React, { useEffect, useState, useRef, useCallback } from 'react';
 import { useModelAndProvider } from '../../../ModelAndProviderContext';
 import { AddModelModal } from '../subcomponents/AddModelModal';
 import { LeadWorkerSettings } from '../subcomponents/LeadWorkerSettings';
 import { View } from '../../../../App';
-import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from '../../../ui/Tooltip';
+import { Tooltip, TooltipTrigger, TooltipContent } from '../../../ui/Tooltip';
 import { Dialog, DialogContent } from '../../../ui/dialog';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '../../../ui/dropdown-menu';
 import { useCurrentModelInfo } from '../../../ChatView';
 import { useConfig } from '../../../ConfigContext';
 
@@ -17,15 +23,14 @@ export default function ModelsBottomBar({ dropdownRef, setView }: ModelsBottomBa
   const { currentModel } = useModelAndProvider();
   const currentModelInfo = useCurrentModelInfo();
   const { read } = useConfig();
-  const [isModelMenuOpen, setIsModelMenuOpen] = useState(false);
   const [isAddModelModalOpen, setIsAddModelModalOpen] = useState(false);
   const [isLeadWorkerModalOpen, setIsLeadWorkerModalOpen] = useState(false);
   const [isLeadWorkerActive, setIsLeadWorkerActive] = useState(false);
-  const menuRef = useRef<HTMLDivElement>(null);
   const [isModelTruncated, setIsModelTruncated] = useState(false);
   // eslint-disable-next-line no-undef
   const modelRef = useRef<HTMLSpanElement>(null);
   const [isTooltipOpen, setIsTooltipOpen] = useState(false);
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
 
   // Check if lead/worker mode is active
   useEffect(() => {
@@ -62,35 +67,31 @@ export default function ModelsBottomBar({ dropdownRef, setView }: ModelsBottomBa
     setIsTooltipOpen(false);
   }, [isModelTruncated]);
 
-  // Add click outside handler
-  useEffect(() => {
-    function handleClickOutside(event: MouseEvent) {
-      if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
-        setIsModelMenuOpen(false);
+  const handleTooltipOpenChange = useCallback(
+    (open: boolean) => {
+      // Only allow tooltip to open if dropdown is closed
+      if (!isDropdownOpen) {
+        setIsTooltipOpen(open);
       }
-    }
+    },
+    [isDropdownOpen]
+  );
 
-    // Add the event listener when the menu is open
-    if (isModelMenuOpen) {
-      document.addEventListener('mousedown', handleClickOutside);
+  const handleDropdownOpenChange = useCallback((open: boolean) => {
+    setIsDropdownOpen(open);
+    // Close tooltip when dropdown opens
+    if (open) {
+      setIsTooltipOpen(false);
     }
-
-    // Clean up the event listener
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, [isModelMenuOpen]);
+  }, []);
 
   return (
     <div className="relative flex items-center" ref={dropdownRef}>
-      <div ref={menuRef} className="relative">
-        <div
-          className="flex items-center hover:cursor-pointer max-w-[180px] md:max-w-[200px] lg:max-w-[380px] min-w-0 group hover:text-textStandard transition-colors"
-          onClick={() => setIsModelMenuOpen(!isModelMenuOpen)}
-        >
-          <TooltipProvider>
-            <Tooltip open={isTooltipOpen} onOpenChange={setIsTooltipOpen}>
-              <TooltipTrigger asChild>
+      <Tooltip open={isTooltipOpen && !isDropdownOpen} onOpenChange={handleTooltipOpenChange}>
+        <TooltipTrigger>
+          <DropdownMenu open={isDropdownOpen} onOpenChange={handleDropdownOpenChange}>
+            <DropdownMenuTrigger asChild>
+              <div className="flex items-center hover:cursor-pointer max-w-[180px] md:max-w-[200px] lg:max-w-[380px] min-w-0 group hover:text-textStandard transition-colors">
                 <span
                   ref={modelRef}
                   className="truncate text-text-default/70 hover:text-text-default hover:scale-100 hover:bg-transparent text-xs max-w-[130px] md:max-w-[200px] lg:max-w-[360px] min-w-0 block"
@@ -100,49 +101,29 @@ export default function ModelsBottomBar({ dropdownRef, setView }: ModelsBottomBa
                     <span className="ml-1 text-[10px] opacity-60">({modelMode})</span>
                   )}
                 </span>
-              </TooltipTrigger>
-              {isModelTruncated && (
-                <TooltipContent className="max-w-96 overflow-auto scrollbar-thin" side="top">
-                  {displayModel}
-                  {isLeadWorkerActive && modelMode && (
-                    <span className="ml-1 text-[10px] opacity-60">({modelMode})</span>
-                  )}
-                </TooltipContent>
-              )}
-            </Tooltip>
-          </TooltipProvider>
-        </div>
-
-        {/* Dropdown Menu */}
-        {isModelMenuOpen && (
-          <div className="absolute bottom-[24px] right-[-55px] w-[300px] z-50 bg-background-default rounded-lg border">
-            <div className="">
-              <div
-                className="flex items-center justify-between text-textStandard p-2 cursor-pointer transition-colors hover:bg-bgStandard
-                    border-t border-borderSubtle mt-2"
-                onClick={() => {
-                  setIsModelMenuOpen(false);
-                  setIsAddModelModalOpen(true);
-                }}
-              >
-                <span className="text-sm">Change Model</span>
-                <Sliders className="w-4 h-4 ml-2 rotate-90" />
-              </div>
-              <div
-                className="flex items-center justify-between text-textStandard p-2 cursor-pointer transition-colors hover:bg-bgStandard
-                    border-t border-borderSubtle"
-                onClick={() => {
-                  setIsModelMenuOpen(false);
-                  setIsLeadWorkerModalOpen(true);
-                }}
-              >
-                <span className="text-sm">Lead/Worker Settings</span>
-                <Sliders className="w-4 h-4 ml-2" />
               </div>
-            </div>
-          </div>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent side="top" align="center" className="w-64 text-sm">
+              <DropdownMenuItem onClick={() => setIsAddModelModalOpen(true)}>
+                <span>Change Model</span>
+                <Sliders className="ml-auto h-4 w-4 rotate-90" />
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={() => setIsLeadWorkerModalOpen(true)}>
+                <span>Lead/Worker Settings</span>
+                <Sliders className="ml-auto h-4 w-4" />
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </TooltipTrigger>
+        {isModelTruncated && (
+          <TooltipContent className="max-w-96 overflow-auto scrollbar-thin" side="top">
+            {displayModel}
+            {isLeadWorkerActive && modelMode && (
+              <span className="ml-1 text-[10px] opacity-60">({modelMode})</span>
+            )}
+          </TooltipContent>
         )}
-      </div>
+      </Tooltip>
 
       {isAddModelModalOpen ? (
         <AddModelModal setView={setView} onClose={() => setIsAddModelModalOpen(false)} />
diff --git a/ui/desktop/src/components/settings/permission/PermissionModal.tsx b/ui/desktop/src/components/settings/permission/PermissionModal.tsx
index b29097e7014d..8455fc3f4c83 100644
--- a/ui/desktop/src/components/settings/permission/PermissionModal.tsx
+++ b/ui/desktop/src/components/settings/permission/PermissionModal.tsx
@@ -1,9 +1,14 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { Button } from '../../ui/button';
 import { ChevronDownIcon, SlidersHorizontal } from 'lucide-react';
 import { getTools, PermissionLevel, ToolInfo, upsertPermissions } from '../../../api';
 import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '../../ui/dialog';
-import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+} from '../../ui/dropdown-menu';
 
 function getFirstSentence(text: string): string {
   const match = text.match(/^([^.?!]+[.?!])/);
@@ -25,6 +30,13 @@ export default function PermissionModal({ extensionName, onClose }: PermissionMo
   const [tools, setTools] = useState<ToolInfo[]>([]);
   const [updatedPermissions, setUpdatedPermissions] = useState<Record<string, string>>({});
 
+  const hasChanges = useMemo(() => {
+    return Object.keys(updatedPermissions).some(
+      (toolName) =>
+        updatedPermissions[toolName] !== tools.find((tool) => tool.name === toolName)?.permission
+    );
+  }, [updatedPermissions, tools]);
+
   useEffect(() => {
     const fetchTools = async () => {
       try {
@@ -53,6 +65,10 @@ export default function PermissionModal({ extensionName, onClose }: PermissionMo
     }));
   };
 
+  const handleClose = () => {
+    onClose();
+  };
+
   const handleSave = async () => {
     try {
       const payload = {
@@ -82,7 +98,14 @@ export default function PermissionModal({ extensionName, onClose }: PermissionMo
   };
 
   return (
-    <Dialog open={true} onOpenChange={(open) => !open && onClose()}>
+    <Dialog
+      open
+      onOpenChange={(open) => {
+        if (!open) {
+          handleClose();
+        }
+      }}
+    >
       <DialogContent className="sm:max-w-[500px] max-h-[90vh] overflow-y-auto">
         <DialogHeader>
           <DialogTitle className="flex items-center gap-2">
@@ -127,32 +150,29 @@ export default function PermissionModal({ extensionName, onClose }: PermissionMo
                       {getFirstSentence(tool.description)}
                     </p>
                   </div>
-                  <DropdownMenu.Root>
-                    <DropdownMenu.Trigger className="flex col-span-4 items-center justify-center bg-bgSubtle text-textStandard rounded-full px-3 py-2">
-                      <span>
+                  <DropdownMenu>
+                    <DropdownMenuTrigger className="col-span-4">
+                      <Button className="w-full" variant="secondary" size="lg">
                         {permissionOptions.find(
                           (option) =>
                             option.value === (updatedPermissions[tool.name] || tool.permission)
                         )?.label || 'Ask Before'}
-                      </span>
-                      <ChevronDownIcon className="ml-2 h-4 w-4" />
-                    </DropdownMenu.Trigger>
-                    <DropdownMenu.Portal>
-                      <DropdownMenu.Content className="bg-white dark:bg-bgProminent rounded-lg shadow-md">
-                        {permissionOptions.map((option) => (
-                          <DropdownMenu.Item
-                            key={option.value}
-                            className="px-8 py-2 rounded-lg hover:cursor-pointer hover:bg-bgSubtle text-textStandard"
-                            onSelect={() =>
-                              handleSettingChange(tool.name, option.value as PermissionLevel)
-                            }
-                          >
-                            {option.label}
-                          </DropdownMenu.Item>
-                        ))}
-                      </DropdownMenu.Content>
-                    </DropdownMenu.Portal>
-                  </DropdownMenu.Root>
+                        <ChevronDownIcon className="h-4 w-4" />
+                      </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent>
+                      {permissionOptions.map((option) => (
+                        <DropdownMenuItem
+                          key={option.value}
+                          onSelect={() =>
+                            handleSettingChange(tool.name, option.value as PermissionLevel)
+                          }
+                        >
+                          {option.label}
+                        </DropdownMenuItem>
+                      ))}
+                    </DropdownMenuContent>
+                  </DropdownMenu>
                 </div>
               ))}
             </div>
@@ -160,10 +180,12 @@ export default function PermissionModal({ extensionName, onClose }: PermissionMo
         </div>
 
         <DialogFooter>
-          <Button variant="outline" onClick={onClose}>
+          <Button variant="outline" onClick={handleClose}>
             Cancel
           </Button>
-          <Button onClick={handleSave}>Save Changes</Button>
+          <Button disabled={!hasChanges} onClick={handleSave}>
+            Save Changes
+          </Button>
         </DialogFooter>
       </DialogContent>
     </Dialog>
diff --git a/ui/desktop/src/components/settings/permission/PermissionSetting.tsx b/ui/desktop/src/components/settings/permission/PermissionSetting.tsx
index 12e6f3c7abaf..6b701fb25a71 100644
--- a/ui/desktop/src/components/settings/permission/PermissionSetting.tsx
+++ b/ui/desktop/src/components/settings/permission/PermissionSetting.tsx
@@ -15,19 +15,22 @@ function RuleItem({ title, description }: { title: string; description: string }
   };
 
   return (
-    <div className="flex items-center justify-between">
-      <div>
-        <h3 className="font-semibold text-textStandard">{title}</h3>
-        <p className="text-xs text-textSubtle mt-1">{description}</p>
-      </div>
-      <div>
-        <Button onClick={() => setIsModalOpen(true)} variant="ghost" size="sm">
-          <ChevronRight className="w-4 h-4 text-iconStandard" />
-        </Button>
-      </div>
-      {/* Modal for updating tool permission */}
+    <>
+      <Button
+        className="flex items-center gap-2 w-full justify-between"
+        onClick={() => setIsModalOpen(true)}
+        variant="secondary"
+        size="lg"
+      >
+        <div>
+          <h3 className="font-semibold text-textStandard">{title}</h3>
+          <p className="text-xs text-textSubtle mt-1">{description}</p>
+        </div>
+        <ChevronRight className="w-4 h-4 text-iconStandard" />
+        {/* Modal for updating tool permission */}
+      </Button>
       {isModalOpen && <PermissionModal onClose={handleModalClose} extensionName={title} />}
-    </div>
+    </>
   );
 }
 
@@ -77,20 +80,20 @@ export default function PermissionSettingsView({ onClose }: { onClose: () => voi
   }, []);
 
   return (
-    <div className="h-screen w-full animate-[fadein_200ms_ease-in_forwards]">
+    <div className="h-screen w-full animate-[fadein_200ms_ease-in_forwards] bg-background-default">
       <MoreMenuLayout showMenu={false} />
 
       <ScrollArea className="h-full w-full">
         <div className="flex flex-col pb-24">
           <div className="px-8 pt-6 pb-4">
             <BackButton onClick={() => onClose()} className="mb-4" />
-            <div className="rounded-full bg-background-defaultInverse w-16 h-16 flex items-center justify-center mb-4">
+            <div className="rounded-full bg-background-inverse w-16 h-16 flex items-center justify-center mb-4">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 width="24"
                 height="24"
                 viewBox="0 0 24 24"
-                className="stroke-bgApp fill-textProminent"
+                className="stroke-text-inverse fill-background-inverse"
                 strokeWidth="2"
                 strokeLinecap="round"
                 strokeLinejoin="round"
diff --git a/ui/desktop/src/components/ui/dropdown-menu.tsx b/ui/desktop/src/components/ui/dropdown-menu.tsx
index e28dfa377d7a..c15ac7bf1007 100644
--- a/ui/desktop/src/components/ui/dropdown-menu.tsx
+++ b/ui/desktop/src/components/ui/dropdown-menu.tsx
@@ -33,7 +33,7 @@ function DropdownMenuContent({
         data-slot="dropdown-menu-content"
         sideOffset={sideOffset}
         className={cn(
-          'bg-background-default text-text-default 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 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-lg',
+          'bg-background-default text-text-default 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 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-xl border p-1 shadow-lg space-y-0.5',
           className
         )}
         {...props}
diff --git a/ui/desktop/src/styles/main.css b/ui/desktop/src/styles/main.css
index 424f5ff3037f..44e00975e82a 100644
--- a/ui/desktop/src/styles/main.css
+++ b/ui/desktop/src/styles/main.css
@@ -12,6 +12,9 @@
   --color-white: #ffffff;
   --color-black: #000000;
 
+  --color-block-teal: #13bbaf;
+  --color-block-orange: #ff4f00;
+
   --color-neutral-50: #f4f6f7;
   --color-neutral-100: #e3e6ea;
   --color-neutral-200: #cbd1d6;
@@ -111,6 +114,7 @@
   --background-muted: var(--color-neutral-800);
   --background-medium: var(--color-neutral-700);
   --background-strong: var(--color-neutral-600);
+  --background-inverse: var(--color-neutral-200);
   --background-danger: var(--color-red-100);
   --background-success: var(--color-green-100);
   --background-info: var(--color-blue-100);
@@ -254,31 +258,6 @@
   font-style: normal;
 }
 
-/* @theme {
-  --slate: #393838;
-
-  --block-teal: #13bbaf;
-  --block-orange: #ff4f00;
-
-  --constant-white: #ffffff;
-  --constant-black: #000000;
-  --grey-10: #101010;
-  --grey-20: #1e1e1e;
-  --grey-50: #666666;
-  --grey-60: #959595;
-  --grey-80: #cccccc;
-  --grey-85: #dadada;
-  --grey-90: #e8e8e8;
-  --grey-95: #f0f0f0;
-  --dark-grey-15: #1a1a1a;
-  --dark-grey-25: #232323;
-  --dark-grey-30: #2a2a2a;
-  --dark-grey-40: #333333;
-  --dark-grey-45: #595959;
-  --dark-grey-60: #878787;
-  --dark-grey-90: #e1e1e1;
-} */
-
 /* :root {
   --spring-easing: linear(
     0,
@@ -424,39 +403,39 @@
     opacity: 1;
     transform: translateY(0);
   }
+}
 
-  /* Toast close button styling */
-  .Toastify__close-button {
-    color: var(--text-prominent-inverse) !important;
-    opacity: 0.7;
-    align-self: flex-start;
-    margin-top: 4px;
-    margin-right: 4px;
-    padding: 4px;
-    border-radius: 4px;
-    transition:
-      opacity 0.2s ease,
-      background-color 0.2s ease;
-  }
+/* Toast close button styling */
+.Toastify__close-button {
+  color: var(--text-prominent-inverse) !important;
+  opacity: 0.7;
+  align-self: flex-start;
+  margin-top: 4px;
+  margin-right: 4px;
+  padding: 4px;
+  border-radius: 4px;
+  transition:
+    opacity 0.2s ease,
+    background-color 0.2s ease;
+}
 
-  .Toastify__close-button:hover {
-    opacity: 1;
-    background-color: rgba(255, 255, 255, 0.1);
-  }
+.Toastify__close-button:hover {
+  opacity: 1;
+  background-color: rgba(255, 255, 255, 0.1);
+}
 
-  .Toastify__close-button:focus {
-    outline: 2px solid var(--block-teal);
-    outline-offset: 2px;
-  }
+.Toastify__close-button:focus {
+  outline: 2px solid var(--color-block-teal);
+  outline-offset: 2px;
+}
 
-  /* Ensure close button is visible on all toast types */
-  .Toastify__toast--success .Toastify__close-button,
-  .Toastify__toast--error .Toastify__close-button,
-  .Toastify__toast--info .Toastify__close-button,
-  .Toastify__toast--warning .Toastify__close-button,
-  .Toastify__toast--default .Toastify__close-button {
-    color: var(--text-prominent-inverse) !important;
-  }
+/* Ensure close button is visible on all toast types */
+.Toastify__toast--success .Toastify__close-button,
+.Toastify__toast--error .Toastify__close-button,
+.Toastify__toast--info .Toastify__close-button,
+.Toastify__toast--warning .Toastify__close-button,
+.Toastify__toast--default .Toastify__close-button {
+  color: var(--text-prominent-inverse) !important;
 }
 
 .animate-fade-slide-up {
@@ -594,7 +573,7 @@ pre:has(> code.bg-inline-code) {
 
 li > code.bg-inline-code,
 p > code.bg-inline-code {
-  color: var(--block-orange);
+  color: var(--color-block-orange);
   padding: 2px 4px;
 }