diff --git a/apps/studio/src/index.css b/apps/studio/src/index.css
index ada838599..309937f1d 100644
--- a/apps/studio/src/index.css
+++ b/apps/studio/src/index.css
@@ -10,6 +10,7 @@ html body #root {
 
 body {
     font-family: 'Inter Variable', sans-serif;
+    user-select: none;
 }
 
 *:focus-visible {
diff --git a/apps/studio/src/routes/editor/EditPanel/StylesTab/index.tsx b/apps/studio/src/routes/editor/EditPanel/StylesTab/index.tsx
index 15ad7a05b..c6854a14e 100644
--- a/apps/studio/src/routes/editor/EditPanel/StylesTab/index.tsx
+++ b/apps/studio/src/routes/editor/EditPanel/StylesTab/index.tsx
@@ -130,10 +130,10 @@ const ManualTab = observer(() => {
     function renderStyleSections() {
         return Object.entries(STYLE_GROUP_MAPPING).map(([groupKey, baseElementStyles]) => (
             <AccordionItem key={groupKey} value={groupKey}>
-                <AccordionTrigger className="mx-0">
+                <AccordionTrigger className=" mb-[-4px] mt-[-2px]">
                     {renderAccordianHeader(groupKey)}
                 </AccordionTrigger>
-                <AccordionContent>
+                <AccordionContent className="mt-2px">
                     {groupKey === StyleGroupKey.Text && <TagDetails />}
                     {renderGroupValues(baseElementStyles)}
                 </AccordionContent>
diff --git a/apps/studio/src/routes/editor/EditPanel/StylesTab/single/NumberUnitInput.tsx b/apps/studio/src/routes/editor/EditPanel/StylesTab/single/NumberUnitInput.tsx
index dc66cd285..ffab26e1b 100644
--- a/apps/studio/src/routes/editor/EditPanel/StylesTab/single/NumberUnitInput.tsx
+++ b/apps/studio/src/routes/editor/EditPanel/StylesTab/single/NumberUnitInput.tsx
@@ -130,7 +130,7 @@ const NumberUnitInput = observer(
 
         const renderUnitInput = () => {
             return (
-                <div className="relative w-full">
+                <div className="relative w-full group">
                     <select
                         value={unitValue}
                         className="p-[6px] w-full px-2 rounded border-none text-foreground-active bg-background-onlook/75 text-start appearance-none focus:outline-none focus:ring-0"
@@ -142,7 +142,7 @@ const NumberUnitInput = observer(
                             </option>
                         ))}
                     </select>
-                    <div className="text-foreground-onlook absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
+                    <div className="text-foreground-onlook group-hover:text-foreground-hover absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
                         <Icons.ChevronDown />
                     </div>
                 </div>
diff --git a/apps/studio/src/routes/editor/EditPanel/StylesTab/single/SelectInput.tsx b/apps/studio/src/routes/editor/EditPanel/StylesTab/single/SelectInput.tsx
index a860da29b..3181923f2 100644
--- a/apps/studio/src/routes/editor/EditPanel/StylesTab/single/SelectInput.tsx
+++ b/apps/studio/src/routes/editor/EditPanel/StylesTab/single/SelectInput.tsx
@@ -113,7 +113,9 @@ const SelectInput = observer(
         if (elementStyle.params.options.length <= 3 || ICON_SELECTION.includes(elementStyle.key)) {
             return (
                 <ToggleGroup
-                    className="w-32 overflow-hidden"
+                    className={`w-32 overflow-hidden ${
+                        ICON_SELECTION.includes(elementStyle.key) ? 'gap-0.75' : ''
+                    }`}
                     size="sm"
                     type="single"
                     value={value}
diff --git a/apps/studio/src/routes/editor/LayersPanel/Tree/TreeNode.tsx b/apps/studio/src/routes/editor/LayersPanel/Tree/TreeNode.tsx
index f8550add6..b10994d6d 100644
--- a/apps/studio/src/routes/editor/LayersPanel/Tree/TreeNode.tsx
+++ b/apps/studio/src/routes/editor/LayersPanel/Tree/TreeNode.tsx
@@ -30,6 +30,12 @@ const TreeNode = observer(
         const selected = editorEngine.elements.selected.some((el) => el.domId === node.data.domId);
         const instanceId = node.data.instanceId;
         const component = node.data.component;
+        const isParentSelected = parentSelected(node);
+        const isParentGroupEnd = parentGroupEnd(node);
+        const isComponentAncestor = hasComponentAncestor(node);
+        const isText = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(
+            node.data.tagName.toLowerCase(),
+        );
 
         function handleHoverNode(e: React.MouseEvent<HTMLDivElement>) {
             if (hovered) {
@@ -138,6 +144,16 @@ const TreeNode = observer(
             node.data.isVisible = !node.data.isVisible;
         }
 
+        function hasComponentAncestor(node: NodeApi<LayerNode>): boolean {
+            if (!node) {
+                return false;
+            }
+            if (node.data.instanceId) {
+                return true;
+            }
+            return node.parent ? hasComponentAncestor(node.parent) : false;
+        }
+
         return (
             <Tooltip>
                 <TooltipTrigger asChild>
@@ -149,18 +165,27 @@ const TreeNode = observer(
                             onMouseOver={(e) => handleHoverNode(e)}
                             className={twMerge(
                                 cn('flex flex-row items-center h-6 cursor-pointer w-full pr-1', {
+                                    'text-purple-600 dark:text-purple-300':
+                                        isComponentAncestor && !instanceId && !hovered,
+                                    'text-purple-500 dark:text-purple-200':
+                                        isComponentAncestor && !instanceId && hovered,
+                                    'text-foreground-onlook':
+                                        !isComponentAncestor &&
+                                        !instanceId &&
+                                        !selected &&
+                                        !hovered,
                                     rounded:
-                                        (hovered && !parentSelected(node) && !selected) ||
+                                        (hovered && !isParentSelected && !selected) ||
                                         (selected && node.isLeaf) ||
                                         (selected && node.isClosed),
                                     'rounded-t': selected && node.isInternal,
-                                    'rounded-b': parentSelected(node) && parentGroupEnd(node),
-                                    'rounded-none': parentSelected(node) && node.nextSibling,
+                                    'rounded-b': isParentSelected && isParentGroupEnd,
+                                    'rounded-none': isParentSelected && node.nextSibling,
                                     'bg-background-onlook': hovered,
                                     'bg-[#FA003C] dark:bg-[#FA003C]/90': selected,
-                                    'bg-[#FA003C]/10 dark:bg-[#FA003C]/10': parentSelected(node),
+                                    'bg-[#FA003C]/10 dark:bg-[#FA003C]/10': isParentSelected,
                                     'bg-[#FA003C]/20 dark:bg-[#FA003C]/20':
-                                        hovered && parentSelected(node),
+                                        hovered && isParentSelected,
                                     'text-purple-100 dark:text-purple-100': instanceId && selected,
                                     'text-purple-500 dark:text-purple-300': instanceId && !selected,
                                     'text-purple-800 dark:text-purple-200':
@@ -168,24 +193,26 @@ const TreeNode = observer(
                                     'bg-purple-700/70 dark:bg-purple-500/50':
                                         instanceId && selected,
                                     'bg-purple-400/30 dark:bg-purple-900/60':
-                                        instanceId && !selected && hovered && !parentSelected(node),
+                                        instanceId && !selected && hovered && !isParentSelected,
                                     'bg-purple-300/30 dark:bg-purple-900/30':
-                                        parentSelected(node)?.data.instanceId,
+                                        isParentSelected?.data.instanceId,
                                     'bg-purple-300/50 dark:bg-purple-900/50':
-                                        hovered && parentSelected(node)?.data.instanceId,
+                                        hovered && isParentSelected?.data.instanceId,
                                     'text-white dark:text-primary': !instanceId && selected,
-                                    'text-hover': !instanceId && !selected && hovered,
-                                    'text-foreground-onlook': !instanceId && !selected && !hovered,
                                 }),
                             )}
                         >
-                            <span className="w-4 h-4 flex-none">
+                            <span className="w-4 h-4 flex-none relative">
                                 {!node.isLeaf && (
                                     <div
-                                        className="w-4 h-4 flex items-center justify-center"
-                                        onClick={() => node.toggle()}
+                                        className="w-4 h-4 flex items-center justify-center absolute z-50"
+                                        onMouseDown={(e) => {
+                                            node.select();
+                                            sendMouseEvent(e, node.data, MouseAction.MOUSE_DOWN);
+                                            node.toggle();
+                                        }}
                                     >
-                                        {treeHovered && (
+                                        {hovered && (
                                             <motion.div
                                                 initial={false}
                                                 animate={{ rotate: node.isOpen ? 90 : 0 }}
@@ -203,14 +230,34 @@ const TreeNode = observer(
                                         hovered && !selected
                                             ? 'text-purple-600 dark:text-purple-200 '
                                             : selected
-                                              ? 'text-purple-100 dark:text-purple-100'
-                                              : 'text-purple-500 dark:text-purple-300',
+                                                ? 'text-purple-100 dark:text-purple-100'
+                                                : 'text-purple-500 dark:text-purple-300',
                                     )}
                                 />
                             ) : (
                                 <NodeIcon
                                     iconClass={cn('w-3 h-3 ml-1 mr-2 flex-none', {
                                         'fill-white dark:fill-primary': !instanceId && selected,
+                                        '[&_path]:!fill-purple-400 [&_path]:!dark:fill-purple-300':
+                                            isComponentAncestor &&
+                                            !instanceId &&
+                                            !selected &&
+                                            !hovered &&
+                                            !isText,
+                                        '[&_path]:!fill-purple-300 [&_path]:!dark:fill-purple-200':
+                                            isComponentAncestor &&
+                                            !instanceId &&
+                                            !selected &&
+                                            hovered &&
+                                            !isText,
+                                        '[&_path]:!fill-white [&_path]:!dark:fill-primary':
+                                            isComponentAncestor && !instanceId && selected,
+                                        '[&_.letter]:!fill-foreground/50 [&_.level]:!fill-foreground dark:[&_.letter]:!fill-foreground/50 dark:[&_.level]:!fill-foreground':
+                                            !isComponentAncestor && !selected && isText,
+                                        '[&_.letter]:!fill-purple-400/50 [&_.level]:!fill-purple-400 dark:[&_.letter]:!fill-purple-300/50 dark:[&_.level]:!fill-purple-300':
+                                            isComponentAncestor && !selected && !hovered && isText,
+                                        '[&_.letter]:!fill-purple-300/50 [&_.level]:!fill-purple-300 dark:[&_.letter]:!fill-purple-200/50 dark:[&_.level]:!fill-purple-200':
+                                            isComponentAncestor && !selected && hovered && isText,
                                     })}
                                     node={node.data}
                                 />
@@ -222,8 +269,8 @@ const TreeNode = observer(
                                         ? selected
                                             ? 'text-purple-100 dark:text-purple-100'
                                             : hovered
-                                              ? 'text-purple-600 dark:text-purple-200'
-                                              : 'text-purple-500 dark:text-purple-300'
+                                                ? 'text-purple-600 dark:text-purple-200'
+                                                : 'text-purple-500 dark:text-purple-300'
                                         : '',
                                     !node.data.isVisible && 'opacity-80',
                                     selected && 'mr-5',
@@ -232,10 +279,10 @@ const TreeNode = observer(
                                 {component
                                     ? component
                                     : ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p'].includes(
-                                            node.data.tagName.toLowerCase(),
-                                        )
-                                      ? ''
-                                      : node.data.tagName.toLowerCase()}
+                                        node.data.tagName.toLowerCase(),
+                                    )
+                                        ? ''
+                                        : node.data.tagName.toLowerCase()}
                                 {' ' + node.data.textContent}
                             </span>
                             {selected && (
diff --git a/apps/studio/src/routes/editor/Toolbar/Terminal/RunButton.tsx b/apps/studio/src/routes/editor/Toolbar/Terminal/RunButton.tsx
index cabc9b8de..01a51f86f 100644
--- a/apps/studio/src/routes/editor/Toolbar/Terminal/RunButton.tsx
+++ b/apps/studio/src/routes/editor/Toolbar/Terminal/RunButton.tsx
@@ -6,8 +6,13 @@ import { cn } from '@onlook/ui/utils';
 import { AnimatePresence, motion } from 'framer-motion';
 import { observer } from 'mobx-react-lite';
 import { useMemo, useState } from 'react';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@onlook/ui/tooltip';
 
-const RunButton = observer(() => {
+interface RunButtonProps {
+    setTerminalHidden: (hidden: boolean) => void;
+}
+
+const RunButton = observer(({ setTerminalHidden }: RunButtonProps) => {
     const projectsManager = useProjectsManager();
     const runner = projectsManager.runner;
     const [isLoading, setIsLoading] = useState(false);
@@ -37,12 +42,15 @@ const RunButton = observer(() => {
         }
 
         if (runner.state === RunState.STOPPED) {
-            runner.start();
             startLoadingTimer();
+            runner.start();
+            setTerminalHidden(false);
         } else if (runner.state === RunState.RUNNING) {
             runner.stop();
         } else if (runner.state === RunState.ERROR) {
+            startLoadingTimer();
             runner.restart();
+            setTerminalHidden(false);
         } else {
             console.error('Unexpected state:', runner.state);
         }
@@ -88,50 +96,87 @@ const RunButton = observer(() => {
     const buttonCharacters = useMemo(() => {
         const text = getButtonTitle();
         const characters = text.split('').map((ch, index) => ({
-            id: `${ch}${index}`,
+            id: `runbutton_${ch}${index}`,
             label: index === 0 ? ch.toUpperCase() : ch,
         }));
         return characters;
     }, [runner?.state, isLoading]);
 
+    const buttonText = getButtonTitle();
+    const buttonWidth = useMemo(() => {
+        // Base width for icon + padding
+        const baseWidth = 44;
+        return baseWidth + buttonText.length * 7;
+    }, [buttonText]);
+
+    function getTooltipText() {
+        switch (runner?.state) {
+            case RunState.STOPPED:
+                return 'Run your app';
+            case RunState.RUNNING:
+                return 'Stop Running your App & Clean Code';
+            default:
+                return '';
+        }
+    }
+
     return (
-        <Button
-            variant="ghost"
-            className={cn(
-                'h-11 -my-2 border-transparent rounded-none w-20 px-3 gap-x-1.5 transition-colors duration-300 z-8 relative',
-                getExtraButtonClasses(),
-            )}
-            disabled={
-                isLoading ||
-                runner?.state === RunState.SETTING_UP ||
-                runner?.state === RunState.STOPPING
-            }
-            onClick={handleButtonClick}
+        <motion.div
+            layout="preserve-aspect"
+            animate={{ width: buttonWidth }}
+            transition={{
+                type: 'spring',
+                bounce: 0.2,
+                duration: 0.6,
+                stiffness: 150,
+                damping: 20,
+            }}
         >
-            <div className="z-10">{renderIcon()}</div>
-            <span className="text-mini z-10 relative">
-                <AnimatePresence mode="popLayout">
-                    {buttonCharacters.map((character) => (
-                        <motion.span
-                            key={character.id}
-                            layoutId={character.id}
-                            layout="position"
-                            className="inline-block"
-                            initial={{ opacity: 0 }}
-                            animate={{ opacity: 1 }}
-                            exit={{ opacity: 0 }}
-                            transition={{
-                                type: 'spring',
-                                bounce: 0.1,
-                                duration: 0.4,
-                            }}
-                        >
-                            {character.label}
-                        </motion.span>
-                    ))}
-                </AnimatePresence>
-            </span>
-        </Button>
+            <Tooltip>
+                <TooltipTrigger asChild>
+                    <Button
+                        variant="ghost"
+                        className={cn(
+                            'h-11 -my-2 border-transparent rounded-none px-3 gap-x-1.5 transition-colors duration-300 z-8 relative whitespace-nowrap overflow-hidden',
+                            getExtraButtonClasses(),
+                        )}
+                        disabled={
+                            isLoading ||
+                            runner?.state === RunState.SETTING_UP ||
+                            runner?.state === RunState.STOPPING
+                        }
+                        onClick={handleButtonClick}
+                    >
+                        <div className="z-10">{renderIcon()}</div>
+                        <span className="text-mini z-10 relative">
+                            <AnimatePresence mode="popLayout">
+                                {buttonCharacters.map((character) => (
+                                    <motion.span
+                                        key={character.id}
+                                        layoutId={character.id}
+                                        layout="position"
+                                        className="inline-block"
+                                        initial={{ opacity: 0 }}
+                                        animate={{ opacity: 1 }}
+                                        exit={{ opacity: 0 }}
+                                        transition={{
+                                            type: 'spring',
+                                            bounce: 0.1,
+                                            duration: 0.4,
+                                        }}
+                                    >
+                                        {character.label}
+                                    </motion.span>
+                                ))}
+                            </AnimatePresence>
+                        </span>
+                    </Button>
+                </TooltipTrigger>
+                <TooltipContent>
+                    <p>{getTooltipText()}</p>
+                </TooltipContent>
+            </Tooltip>
+        </motion.div>
     );
 });
 
diff --git a/apps/studio/src/routes/editor/Toolbar/index.tsx b/apps/studio/src/routes/editor/Toolbar/index.tsx
index 5cee89461..db78388b0 100644
--- a/apps/studio/src/routes/editor/Toolbar/index.tsx
+++ b/apps/studio/src/routes/editor/Toolbar/index.tsx
@@ -11,6 +11,7 @@ import { useEffect, useState } from 'react';
 import Terminal from './Terminal';
 import RunButton from './Terminal/RunButton';
 import { Hotkey } from '/common/hotkeys';
+import { motion, AnimatePresence } from 'framer-motion';
 
 const TOOLBAR_ITEMS: {
     mode: EditorMode;
@@ -98,85 +99,107 @@ const Toolbar = observer(() => {
     };
 
     return (
-        <div
-            className={cn(
-                'flex flex-col border p-1 bg-background/30 dark:bg-background/85 backdrop-blur rounded-lg drop-shadow-xl',
-                editorEngine.mode === EditorMode.INTERACT ? 'hidden' : 'visible',
-            )}
-        >
-            {!terminalHidden ? (
-                // Terminal header when expanded
-                <div className="flex items-center justify-between w-full mb-1">
-                    <span className="text-small text-foreground-secondary ml-2 select-none">
-                        Terminal
-                    </span>
-                    <div className="flex items-center gap-1">
-                        <RunButton />
-                        <Tooltip>
-                            <TooltipTrigger asChild>
-                                <button
-                                    onClick={() => setTerminalHidden(!terminalHidden)}
-                                    className="h-9 w-9 flex items-center justify-center hover:text-foreground-hover text-foreground-tertiary hover:bg-accent rounded-md"
-                                >
-                                    <Icons.ChevronDown />
-                                </button>
-                            </TooltipTrigger>
-                            <TooltipContent>Toggle Terminal</TooltipContent>
-                        </Tooltip>
-                    </div>
-                </div>
-            ) : (
-                // Regular toolbar when terminal is hidden
-                <div className="flex items-center gap-1">
-                    <ToggleGroup
-                        type="single"
-                        value={mode}
-                        onValueChange={(value) => {
-                            if (value) {
-                                editorEngine.mode = value as EditorMode;
-                                setMode(value as EditorMode);
-                            }
-                        }}
-                    >
-                        {TOOLBAR_ITEMS.map((item) => (
-                            <Tooltip key={item.mode}>
+        <AnimatePresence mode="wait">
+            {editorEngine.mode !== EditorMode.INTERACT && (
+                <motion.div
+                    initial={{ opacity: 0, y: 20 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    exit={{ opacity: 0, y: 20 }}
+                    className="flex flex-col border p-1 bg-background/30 dark:bg-background/85 backdrop-blur rounded-lg drop-shadow-xl"
+                    transition={{
+                        type: 'spring',
+                        bounce: 0.1,
+                        duration: 0.4,
+                        stiffness: 200,
+                        damping: 25,
+                    }}
+                >
+                    {!terminalHidden ? (
+                        <motion.div
+                            layout
+                            className="flex items-center justify-between w-full mb-1"
+                        >
+                            <motion.span
+                                initial={{ opacity: 0, x: 10 }}
+                                animate={{ opacity: 1, x: 0 }}
+                                exit={{ opacity: 0, x: -10 }}
+                                transition={{ duration: 0.7 }}
+                                className="text-small text-foreground-secondary ml-2 select-none"
+                            >
+                                Terminal
+                            </motion.span>
+                            <div className="flex items-center gap-1">
+                                <motion.div layout>
+                                    <RunButton setTerminalHidden={setTerminalHidden} />
+                                </motion.div>
+                                <Tooltip>
+                                    <TooltipTrigger asChild>
+                                        <button
+                                            onClick={() => setTerminalHidden(!terminalHidden)}
+                                            className="h-9 w-9 flex items-center justify-center hover:text-foreground-hover text-foreground-tertiary hover:bg-accent rounded-lg"
+                                        >
+                                            <Icons.ChevronDown />
+                                        </button>
+                                    </TooltipTrigger>
+                                    <TooltipContent>Toggle Terminal</TooltipContent>
+                                </Tooltip>
+                            </div>
+                        </motion.div>
+                    ) : (
+                        <motion.div layout className="flex items-center gap-1">
+                            <ToggleGroup
+                                type="single"
+                                value={mode}
+                                onValueChange={(value) => {
+                                    if (value) {
+                                        editorEngine.mode = value as EditorMode;
+                                        setMode(value as EditorMode);
+                                    }
+                                }}
+                            >
+                                {TOOLBAR_ITEMS.map((item) => (
+                                    <Tooltip key={item.mode}>
+                                        <TooltipTrigger asChild>
+                                            <div
+                                                draggable={item.draggable}
+                                                onDragStart={(e) => handleDragStart(e, item.mode)}
+                                            >
+                                                <ToggleGroupItem
+                                                    value={item.mode}
+                                                    aria-label={item.hotkey.description}
+                                                    disabled={item.disabled}
+                                                    className="hover:text-foreground-hover text-foreground-tertiary"
+                                                >
+                                                    <item.icon />
+                                                </ToggleGroupItem>
+                                            </div>
+                                        </TooltipTrigger>
+                                        <TooltipContent>
+                                            <HotKeyLabel hotkey={item.hotkey} />
+                                        </TooltipContent>
+                                    </Tooltip>
+                                ))}
+                            </ToggleGroup>
+                            <motion.div layout>
+                                <RunButton setTerminalHidden={setTerminalHidden} />
+                            </motion.div>
+                            <Tooltip>
                                 <TooltipTrigger asChild>
-                                    <div
-                                        draggable={item.draggable}
-                                        onDragStart={(e) => handleDragStart(e, item.mode)}
+                                    <button
+                                        onClick={() => setTerminalHidden(!terminalHidden)}
+                                        className="h-9 w-9 flex items-center justify-center hover:text-foreground-hover text-foreground-tertiary hover:bg-accent rounded-md"
                                     >
-                                        <ToggleGroupItem
-                                            value={item.mode}
-                                            aria-label={item.hotkey.description}
-                                            disabled={item.disabled}
-                                            className="hover:text-foreground-hover text-foreground-tertiary"
-                                        >
-                                            <item.icon />
-                                        </ToggleGroupItem>
-                                    </div>
+                                        <Icons.Terminal />
+                                    </button>
                                 </TooltipTrigger>
-                                <TooltipContent>
-                                    <HotKeyLabel hotkey={item.hotkey} />
-                                </TooltipContent>
+                                <TooltipContent>Toggle Terminal</TooltipContent>
                             </Tooltip>
-                        ))}
-                    </ToggleGroup>
-                    <RunButton />
-                    <Tooltip>
-                        <TooltipTrigger asChild>
-                            <button
-                                onClick={() => setTerminalHidden(!terminalHidden)}
-                                className="h-9 w-9 flex items-center justify-center hover:text-foreground-hover text-foreground-tertiary hover:bg-accent rounded-md"
-                            >
-                                <Icons.Terminal />
-                            </button>
-                        </TooltipTrigger>
-                        <TooltipContent>Toggle Terminal</TooltipContent>
-                    </Tooltip>
-                </div>
+                        </motion.div>
+                    )}
+                    <Terminal hidden={terminalHidden} />
+                </motion.div>
             )}
-            <Terminal hidden={terminalHidden} />
-        </div>
+        </AnimatePresence>
     );
 });
 
diff --git a/apps/studio/src/routes/editor/TopBar/OpenCode/index.tsx b/apps/studio/src/routes/editor/TopBar/OpenCode/index.tsx
index 33a4cce37..f3ecd1a2e 100644
--- a/apps/studio/src/routes/editor/TopBar/OpenCode/index.tsx
+++ b/apps/studio/src/routes/editor/TopBar/OpenCode/index.tsx
@@ -76,7 +76,7 @@ const OpenCode = observer(() => {
 
     const ideCharacters = useMemo(() => {
         const prefixChars = 'Open in '.split('').map((ch, index) => ({
-            id: `prefix_${index}`,
+            id: `opencode_prefix_${index}`,
             label: ch === ' ' ? '\u00A0' : ch,
         }));
         const entities = `${ide}`.split('').map((ch) => ch);
@@ -87,7 +87,7 @@ const OpenCode = observer(() => {
             const count = entities.slice(0, index).filter((e) => e === entity).length;
 
             characters.push({
-                id: `${entity}${count + 1}`,
+                id: `opencode_${entity}${count + 1}`,
                 label: characters.length === 0 ? entity.toUpperCase() : entity,
             });
         }
diff --git a/apps/studio/src/routes/editor/TopBar/ProjectSelect/index.tsx b/apps/studio/src/routes/editor/TopBar/ProjectSelect/index.tsx
index c194fe8da..7f5bed338 100644
--- a/apps/studio/src/routes/editor/TopBar/ProjectSelect/index.tsx
+++ b/apps/studio/src/routes/editor/TopBar/ProjectSelect/index.tsx
@@ -18,7 +18,7 @@ import ProjectNameInput from './ProjectNameInput';
 const ProjectBreadcrumb = observer(() => {
     const editorEngine = useEditorEngine();
     const projectsManager = useProjectsManager();
-    const [isDirectoryHovered, setIsDirectoryHovered] = useState(false);
+    const [isSettingsOpen, setIsSettingsOpen] = useState(false);
 
     async function handleReturn() {
         await saveScreenshot();
@@ -74,30 +74,29 @@ const ProjectBreadcrumb = observer(() => {
                         <Icons.ChevronDown className="transition-all rotate-0 group-data-[state=open]:-rotate-180 duration-200 ease-in-out" />
                     </DropdownMenuTrigger>
                     <DropdownMenuContent>
-                        <DropdownMenuItem
-                            onClick={handleOpenProjectFolder}
-                            onMouseEnter={() => setIsDirectoryHovered(true)}
-                            onMouseLeave={() => setIsDirectoryHovered(false)}
-                        >
-                            <div className="flex row center items-center">
-                                {isDirectoryHovered ? (
-                                    <Icons.DirectoryOpen className="mr-2" />
-                                ) : (
-                                    <Icons.Directory className="mr-2" />
-                                )}
+                        <DropdownMenuItem onClick={handleOpenProjectFolder}>
+                            <div className="flex row center items-center group">
+                                <Icons.Directory className="mr-2 group-hover:hidden" />
+                                <Icons.DirectoryOpen className="mr-2 hidden group-hover:block" />
                                 {'Open Project Folder'}
                             </div>
                         </DropdownMenuItem>
-                        <DropdownMenuItem onSelect={(e) => e.preventDefault()}>
-                            <ProjectSettingsModal project={projectsManager.project}>
-                                <div className="flex row center items-center">
-                                    <Icons.Gear className="mr-2" /> Project Settings
-                                </div>
-                            </ProjectSettingsModal>
+                        <DropdownMenuItem onClick={() => setIsSettingsOpen(true)}>
+                            <div className="flex row center items-center group">
+                                <Icons.Gear className="mr-2 transition-transform duration-300 group-hover:rotate-[30deg]" />
+                                Project Settings
+                            </div>
                         </DropdownMenuItem>
                     </DropdownMenuContent>
                 </DropdownMenu>
             </div>
+            <ProjectSettingsModal
+                project={projectsManager.project}
+                open={isSettingsOpen}
+                onOpenChange={setIsSettingsOpen}
+            >
+                {null}
+            </ProjectSettingsModal>
         </>
     );
 });
diff --git a/apps/studio/src/routes/editor/TopBar/ZoomControls/index.tsx b/apps/studio/src/routes/editor/TopBar/ZoomControls/index.tsx
index f6b3806ec..cd326215f 100644
--- a/apps/studio/src/routes/editor/TopBar/ZoomControls/index.tsx
+++ b/apps/studio/src/routes/editor/TopBar/ZoomControls/index.tsx
@@ -83,9 +83,9 @@ const ZoomControls = observer(
         return (
             <div className="mx-2 flex flex-row items-center text-mini text-foreground-onlook hover:text-foreground-active transition-all duration-300 ease-in-out h-full p-1">
                 <Popover open={isDropdownOpen} onOpenChange={setIsDropdownOpen}>
-                    <PopoverTrigger className="flex items-center px-2 py-1 rounded hover:bg-accent data-[state=open]:text-foreground-active">
+                    <PopoverTrigger className="group flex items-center px-2 py-1 rounded hover:bg-accent data-[state=open]:text-foreground-active">
                         <span>{Math.round(scale * 100)}%</span>
-                        <ChevronDownIcon className="ml-1 h-4 w-4" />
+                        <ChevronDownIcon className="ml-1 h-4 w-4 transition-transform group-data-[state=open]:-rotate-180 duration-200 ease-in-out" />
                     </PopoverTrigger>
                     <PopoverContent className="flex flex-col p-1.5 bg-background/85 backdrop-blur-md w-42 min-w-42">
                         <Input
diff --git a/apps/studio/src/routes/projects/ProjectSettingsModal.tsx b/apps/studio/src/routes/projects/ProjectSettingsModal.tsx
index ee855d0dd..b1c454885 100644
--- a/apps/studio/src/routes/projects/ProjectSettingsModal.tsx
+++ b/apps/studio/src/routes/projects/ProjectSettingsModal.tsx
@@ -12,12 +12,21 @@ import {
 import { Input } from '@onlook/ui/input';
 import { Label } from '@onlook/ui/label';
 import { observer } from 'mobx-react-lite';
-import { useState } from 'react';
+import { useState, useCallback } from 'react';
 
 const ProjectSettingsModal = observer(
-    ({ children, project }: { children: React.ReactNode; project?: Project | null }) => {
+    ({
+        children,
+        project,
+        open: controlledOpen,
+        onOpenChange: controlledOnOpenChange,
+    }: {
+        children: React.ReactNode;
+        project?: Project | null;
+        open?: boolean;
+        onOpenChange?: (open: boolean) => void;
+    }) => {
         const projectsManager = useProjectsManager();
-        const [isOpen, setIsOpen] = useState(false);
         const projectToUpdate = project || projectsManager.project;
         const [formValues, setFormValues] = useState({
             name: projectToUpdate?.name || '',
@@ -25,6 +34,12 @@ const ProjectSettingsModal = observer(
             runCommand: projectToUpdate?.runCommand || 'npm run dev',
         });
 
+        const [uncontrolledOpen, setUncontrolledOpen] = useState(false);
+
+        // Use controlled props if provided, otherwise use internal state
+        const isOpen = controlledOpen ?? uncontrolledOpen;
+        const onOpenChange = controlledOnOpenChange ?? setUncontrolledOpen;
+
         const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
             setFormValues({
                 ...formValues,
@@ -39,19 +54,19 @@ const ProjectSettingsModal = observer(
                     ...formValues,
                 });
             }
-            setIsOpen(false);
+            onOpenChange?.(false);
         };
 
         return (
-            <Dialog open={isOpen} onOpenChange={setIsOpen}>
+            <Dialog open={isOpen} onOpenChange={onOpenChange}>
                 <DialogTrigger asChild>{children}</DialogTrigger>
                 <DialogContent className="sm:max-w-[425px]">
                     <DialogHeader>
                         <DialogTitle>Project Settings</DialogTitle>
                     </DialogHeader>
-                    <div className="grid gap-4 py-4">
+                    <div className="grid gap-4 py-4 text-small">
                         <div className="grid grid-cols-4 items-center gap-4">
-                            <Label htmlFor="name" className="text-right">
+                            <Label htmlFor="name" className="text-right text-foreground-secondary">
                                 Name
                             </Label>
                             <Input
@@ -62,7 +77,7 @@ const ProjectSettingsModal = observer(
                             />
                         </div>
                         <div className="grid grid-cols-4 items-center gap-4">
-                            <Label htmlFor="url" className="text-right">
+                            <Label htmlFor="url" className="text-right text-foreground-secondary">
                                 Url
                             </Label>
                             <Input
@@ -73,7 +88,10 @@ const ProjectSettingsModal = observer(
                             />
                         </div>
                         <div className="grid grid-cols-4 items-center gap-4">
-                            <Label htmlFor="runCommand" className="text-right">
+                            <Label
+                                htmlFor="runCommand"
+                                className="text-right text-foreground-secondary"
+                            >
                                 Command
                             </Label>
                             <Input
@@ -85,7 +103,7 @@ const ProjectSettingsModal = observer(
                         </div>
                     </div>
                     <DialogFooter>
-                        <Button onClick={() => setIsOpen(false)} variant={'ghost'}>
+                        <Button onClick={() => onOpenChange?.(false)} variant={'ghost'}>
                             Cancel
                         </Button>
                         <Button onClick={handleSave} variant={'outline'}>
diff --git a/packages/foundation/README.md b/packages/foundation/README.md
index c5eed1575..8083749c5 100644
--- a/packages/foundation/README.md
+++ b/packages/foundation/README.md
@@ -2,6 +2,6 @@
 
 A shared utility package for Onlook. Includes file system functionalities used in both the Onlook app and the CLI
 
--   [x] Create new project
--   [x] Setup existing project
--   [x] Verify Onlook installation
+- [x] Create new project
+- [x] Setup existing project
+- [x] Verify Onlook installation
diff --git a/packages/ui/src/components/accordion.tsx b/packages/ui/src/components/accordion.tsx
index 4d45e8faf..c8c09d6ca 100644
--- a/packages/ui/src/components/accordion.tsx
+++ b/packages/ui/src/components/accordion.tsx
@@ -28,7 +28,7 @@ const AccordionTrigger = React.forwardRef<
             {...props}
         >
             {children}
-            <ChevronDownIcon className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
+            <ChevronDownIcon className="h-4 w-4 mb-0.5 shrink-0 text-muted-foreground transition-transform duration-200" />
         </AccordionPrimitive.Trigger>
     </AccordionPrimitive.Header>
 ));
diff --git a/packages/ui/src/components/dialog.tsx b/packages/ui/src/components/dialog.tsx
index 427f233df..0ce7abcf2 100644
--- a/packages/ui/src/components/dialog.tsx
+++ b/packages/ui/src/components/dialog.tsx
@@ -36,14 +36,14 @@ const DialogContent = React.forwardRef<
         <DialogPrimitive.Content
             ref={ref}
             className={cn(
-                'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+                'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background/85 backdrop-blur p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
                 className,
             )}
             {...props}
         >
             {children}
-            <DialogPrimitive.Close className="absolute right-4 top-2 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
-                <Cross2Icon className="h-4 w-4" />
+            <DialogPrimitive.Close className="absolute right-3 top-3 p-2 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+                <Cross2Icon className="h-5 w-5" />
                 <span className="sr-only">Close</span>
             </DialogPrimitive.Close>
         </DialogPrimitive.Content>
@@ -73,7 +73,7 @@ const DialogTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
     <DialogPrimitive.Title
         ref={ref}
-        className={cn('text-lg font-semibold leading-none tracking-tight', className)}
+        className={cn('text-title3 leading-none tracking-tight', className)}
         {...props}
     />
 ));
diff --git a/packages/ui/src/components/icons/index.tsx b/packages/ui/src/components/icons/index.tsx
index 7174457a4..cf93fcd56 100644
--- a/packages/ui/src/components/icons/index.tsx
+++ b/packages/ui/src/components/icons/index.tsx
@@ -752,66 +752,48 @@ export const Icons = {
     H1: ({ className, ...props }: IconProps) => (
         <H1Icon
             className={className}
-            letterClassName={cn(
-                {
-                    'fill-black/50 dark:fill-white/50': !className?.includes(
-                        'fill-white dark:fill-primary',
-                    ),
-                },
-                className,
-            )}
-            levelClassName={cn(
-                {
-                    'fill-[#313131] dark:fill-[#CECECE]': !className?.includes(
-                        'fill-white dark:fill-primary',
-                    ),
-                },
-                className,
-            )}
+            letterClassName={cn('letter', {
+                'fill-foreground/50 dark:fill-foreground/50': !className?.includes(
+                    'fill-white dark:fill-primary',
+                ),
+            })}
+            levelClassName={cn('level', {
+                'fill-foreground dark:fill-foreground': !className?.includes(
+                    'fill-white dark:fill-primary',
+                ),
+            })}
             {...props}
         />
     ),
     H2: ({ className, ...props }: IconProps) => (
         <H2Icon
             className={className}
-            letterClassName={cn(
-                {
-                    'fill-black/50 dark:fill-white/50': !className?.includes(
-                        'fill-white dark:fill-primary',
-                    ),
-                },
-                className,
-            )}
-            levelClassName={cn(
-                {
-                    'fill-[#313131] dark:fill-[#CECECE]': !className?.includes(
-                        'fill-white dark:fill-primary',
-                    ),
-                },
-                className,
-            )}
+            letterClassName={cn('letter', {
+                'fill-foreground/50 dark:fill-foreground/50': !className?.includes(
+                    'fill-white dark:fill-primary',
+                ),
+            })}
+            levelClassName={cn('level', {
+                'fill-foreground dark:fill-foreground': !className?.includes(
+                    'fill-white dark:fill-primary',
+                ),
+            })}
             {...props}
         />
     ),
     H3: ({ className, ...props }: IconProps) => (
         <H3Icon
             className={className}
-            letterClassName={cn(
-                {
-                    'fill-black/50 dark:fill-white/50': !className?.includes(
-                        'fill-white dark:fill-primary',
-                    ),
-                },
-                className,
-            )}
-            levelClassName={cn(
-                {
-                    'fill-[#313131] dark:fill-[#CECECE]': !className?.includes(
-                        'fill-white dark:fill-primary',
-                    ),
-                },
-                className,
-            )}
+            letterClassName={cn('letter', {
+                'fill-foreground/50 dark:fill-foreground/50': !className?.includes(
+                    'fill-white dark:fill-primary',
+                ),
+            })}
+            levelClassName={cn('level', {
+                'fill-foreground dark:fill-foreground': !className?.includes(
+                    'fill-white dark:fill-primary',
+                ),
+            })}
             {...props}
         />
     ),
@@ -820,7 +802,7 @@ export const Icons = {
             className={className}
             letterClassName={cn(
                 {
-                    'fill-black/50 dark:fill-white/50': !className?.includes(
+                    'fill-foreground/50 dark:fill-foreground/50': !className?.includes(
                         'fill-white dark:fill-primary',
                     ),
                 },
@@ -846,7 +828,7 @@ export const Icons = {
             className={className}
             letterClassName={cn(
                 {
-                    'fill-black/50 dark:fill-white/50': !className?.includes(
+                    'fill-foreground/50 dark:fill-foreground/50': !className?.includes(
                         'fill-white dark:fill-primary',
                     ),
                 },
@@ -872,7 +854,7 @@ export const Icons = {
             className={className}
             letterClassName={cn(
                 {
-                    'fill-black/50 dark:fill-white/50': !className?.includes(
+                    'fill-foreground/50 dark:fill-foreground/50': !className?.includes(
                         'fill-white dark:fill-primary',
                     ),
                 },