diff --git a/app/ycode/components/RichTextEditor.tsx b/app/ycode/components/RichTextEditor.tsx
index f30a29b5..bae516d9 100644
--- a/app/ycode/components/RichTextEditor.tsx
+++ b/app/ycode/components/RichTextEditor.tsx
@@ -16,7 +16,7 @@ import Document from '@tiptap/extension-document';
 import Text from '@tiptap/extension-text';
 import Paragraph from '@tiptap/extension-paragraph';
 import History from '@tiptap/extension-history';
-import { EditorState } from '@tiptap/pm/state';
+import { EditorState, NodeSelection } from '@tiptap/pm/state';
 import Placeholder from '@tiptap/extension-placeholder';
 import Bold from '@tiptap/extension-bold';
 import Italic from '@tiptap/extension-italic';
@@ -62,8 +62,10 @@ import { RichTextComponent } from '@/lib/tiptap-extensions/rich-text-component';
 import { RichTextLink, getLinkSettingsFromMark } from '@/lib/tiptap-extensions/rich-text-link';
 import { RichTextImage } from '@/lib/tiptap-extensions/rich-text-image';
 import RichTextLinkPopover from './RichTextLinkPopover';
+import RichTextImagePopover from './RichTextImagePopover';
 import RichTextComponentPicker from './RichTextComponentPicker';
 import RichTextComponentBlock from './RichTextComponentBlock';
+import RichTextImageBlock from './RichTextImageBlock';
 import type { CollectionFieldType, Layer, LinkSettings, LinkType, Asset } from '@/types';
 import { DEFAULT_TEXT_STYLES } from '@/lib/text-format-utils';
 import { useEditorStore } from '@/stores/useEditorStore';
@@ -253,6 +255,68 @@ const RichTextComponentWithNodeView = RichTextComponent.extend({
   },
 });
 
+/**
+ * RichTextImage with React node view for inline image editing.
+ * Renders the image with a selection ring; alt editing is handled by the toolbar popover.
+ */
+const RichTextImageWithNodeView = RichTextImage.extend({
+  addNodeView() {
+    return ({ node: initialNode, getPos, editor }) => {
+      const container = document.createElement('div');
+      container.contentEditable = 'false';
+
+      let currentNode = initialNode;
+      let isSelected = false;
+
+      const root = createRoot(container);
+
+      const renderBlock = () => {
+        root.render(
+          <RichTextImageBlock
+            src={currentNode.attrs.src}
+            alt={currentNode.attrs.alt || ''}
+            isSelected={isSelected}
+          />,
+        );
+      };
+
+      container.addEventListener('click', () => {
+        const pos = getPos();
+        if (typeof pos === 'number' && editor.isEditable) {
+          const tr = editor.state.tr.setSelection(
+            NodeSelection.create(editor.state.doc, pos)
+          );
+          editor.view.dispatch(tr);
+        }
+      });
+
+      queueMicrotask(renderBlock);
+
+      return {
+        dom: container,
+        stopEvent: () => true,
+        selectNode: () => {
+          isSelected = true;
+          renderBlock();
+        },
+        deselectNode: () => {
+          isSelected = false;
+          renderBlock();
+        },
+        update: (updatedNode) => {
+          if (updatedNode.type.name !== 'richTextImage') return false;
+          currentNode = updatedNode;
+          renderBlock();
+          return true;
+        },
+        destroy: () => {
+          setTimeout(() => root.unmount(), 0);
+        },
+      };
+    };
+  },
+});
+
 /**
  * Custom Tiptap mark for dynamic text styles
  * Preserves the style keys from canvas text editor without applying visual styling
@@ -330,6 +394,7 @@ const RichTextEditor = forwardRef<RichTextEditorHandle, RichTextEditorProps>(({
   const isFullVariant = variant === 'full';
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
   const [linkPopoverOpen, setLinkPopoverOpen] = useState(false);
+  const [imagePopoverOpen, setImagePopoverOpen] = useState(false);
   const [componentPickerOpen, setComponentPickerOpen] = useState(false);
   const openFileManager = useEditorStore((s) => s.openFileManager);
   // Track if update is coming from editor to prevent infinite loop
@@ -378,6 +443,7 @@ const RichTextEditor = forwardRef<RichTextEditorHandle, RichTextEditorProps>(({
         ListItem,
         Blockquote,
         Code,
+        RichTextImageWithNodeView,
         HorizontalRule,
         RichTextImage,
       ];
@@ -639,6 +705,25 @@ const RichTextEditor = forwardRef<RichTextEditorHandle, RichTextEditorProps>(({
     }
   }, [value, fields, allFields, editor, withFormatting]);
 
+  // Auto-open image popover when an image node is selected
+  useEffect(() => {
+    if (!editor || !withFormatting) return;
+
+    const handleSelectionUpdate = () => {
+      const { selection } = editor.state;
+      const node = editor.state.doc.nodeAt(selection.from);
+      const isImage = node?.type.name === 'richTextImage';
+      if (isImage && !imagePopoverOpen) {
+        setImagePopoverOpen(true);
+      } else if (!isImage && imagePopoverOpen) {
+        setImagePopoverOpen(false);
+      }
+    };
+
+    editor.on('selectionUpdate', handleSelectionUpdate);
+    return () => { editor.off('selectionUpdate', handleSelectionUpdate); };
+  }, [editor, withFormatting, imagePopoverOpen]);
+
   // Internal function to add a field variable
   const addFieldVariableInternal = useCallback((variableData: FieldVariable) => {
     if (!editor) return;
@@ -763,7 +848,7 @@ const RichTextEditor = forwardRef<RichTextEditorHandle, RichTextEditorProps>(({
     <div className={cn('flex-1 rich-text-editor relative', isFullVariant && 'flex flex-col gap-2', fullHeight && 'min-h-0')}>
       {/* Formatting toolbar - Full variant (CMS style like original TiptapEditor) */}
       {withFormatting && showFormattingToolbar && isFullVariant && (
-        <div className="flex items-center gap-2">
+        <div className="flex items-center gap-2 sticky top-8 bg-background z-10 py-2 -my-2">
           <Select
             value={
               editor.isActive('heading', { level: 1 }) ? 'h1' :
@@ -981,33 +1066,45 @@ const RichTextEditor = forwardRef<RichTextEditorHandle, RichTextEditorProps>(({
             variant="secondary"
             spacing={1}
           >
-            <ToggleGroupItem
-              value="image"
-              asChild
-            >
-              <button
-                type="button"
-                title="Insert Image"
-                disabled={disabled}
-                className="w-auto min-w-0 shrink-0"
-                onClick={() => {
-                  openFileManager(
-                    (asset: Asset) => {
-                      if (!editor || !asset.public_url) return;
-                      editor.chain().focus().setRichTextImage({
-                        src: asset.public_url,
-                        alt: asset.filename,
-                        assetId: asset.id,
-                      }).run();
-                    },
-                    undefined,
-                    'images'
-                  );
-                }}
-              >
-                <Icon name="image" className="size-3" />
-              </button>
-            </ToggleGroupItem>
+            <RichTextImagePopover
+              editor={editor}
+              open={imagePopoverOpen}
+              onOpenChange={setImagePopoverOpen}
+              disabled={disabled}
+              trigger={
+                <ToggleGroupItem
+                  value="image"
+                  data-state={editor.isActive('richTextImage') ? 'on' : 'off'}
+                  asChild
+                >
+                  <button
+                    type="button"
+                    title={editor.isActive('richTextImage') ? 'Image settings' : 'Insert Image'}
+                    disabled={disabled}
+                    className="w-auto min-w-0 shrink-0"
+                    onClick={(e) => {
+                      if (!editor.isActive('richTextImage')) {
+                        e.preventDefault();
+                        openFileManager(
+                          (asset: Asset) => {
+                            if (!editor || !asset.public_url) return;
+                            editor.chain().focus().setRichTextImage({
+                              src: asset.public_url,
+                              alt: asset.filename,
+                              assetId: asset.id,
+                            }).run();
+                          },
+                          undefined,
+                          'images'
+                        );
+                      }
+                    }}
+                  >
+                    <Icon name="image" className="size-3" />
+                  </button>
+                </ToggleGroupItem>
+              }
+            />
             <ToggleGroupItem
               value="component"
               asChild
@@ -1275,30 +1372,41 @@ const RichTextEditor = forwardRef<RichTextEditorHandle, RichTextEditorProps>(({
 
           {/* Insert Image / Component */}
           <div className="w-px h-4 bg-border mx-0.5" />
-          <Button
-            type="button"
-            variant="ghost"
-            size="xs"
-            className="size-6!"
-            title="Insert Image"
+          <RichTextImagePopover
+            editor={editor}
+            open={imagePopoverOpen}
+            onOpenChange={setImagePopoverOpen}
             disabled={disabled}
-            onClick={() => {
-              openFileManager(
-                (asset: Asset) => {
-                  if (!editor || !asset.public_url) return;
-                  editor.chain().focus().setRichTextImage({
-                    src: asset.public_url,
-                    alt: asset.filename,
-                    assetId: asset.id,
-                  }).run();
-                },
-                undefined,
-                'images'
-              );
-            }}
-          >
-            <Icon name="image" className="size-3" />
-          </Button>
+            trigger={
+              <Button
+                type="button"
+                variant="ghost"
+                size="xs"
+                className={cn('size-6!', editor.isActive('richTextImage') && 'bg-accent')}
+                disabled={disabled}
+                title={editor.isActive('richTextImage') ? 'Image settings' : 'Insert Image'}
+                onClick={(e) => {
+                  if (!editor.isActive('richTextImage')) {
+                    e.preventDefault();
+                    openFileManager(
+                      (asset: Asset) => {
+                        if (!editor || !asset.public_url) return;
+                        editor.chain().focus().setRichTextImage({
+                          src: asset.public_url,
+                          alt: asset.filename,
+                          assetId: asset.id,
+                        }).run();
+                      },
+                      undefined,
+                      'images'
+                    );
+                  }
+                }}
+              >
+                <Icon name="image" className="size-3" />
+              </Button>
+            }
+          />
           <Button
             type="button"
             variant="ghost"
diff --git a/app/ycode/components/RichTextImageBlock.tsx b/app/ycode/components/RichTextImageBlock.tsx
new file mode 100644
index 00000000..66b1f9a9
--- /dev/null
+++ b/app/ycode/components/RichTextImageBlock.tsx
@@ -0,0 +1,33 @@
+'use client';
+
+import React from 'react';
+import { cn } from '@/lib/utils';
+
+interface RichTextImageBlockProps {
+  src: string;
+  alt: string;
+  isSelected: boolean;
+}
+
+export default function RichTextImageBlock({
+  src,
+  alt,
+  isSelected,
+}: RichTextImageBlockProps) {
+  return (
+    <div
+      className={cn(
+        'relative my-2 inline-block rounded-md',
+        isSelected && 'ring-2 ring-ring',
+      )}
+    >
+      {/* eslint-disable-next-line @next/next/no-img-element */}
+      <img
+        src={src}
+        alt={alt}
+        className="max-w-full rounded-md block"
+        draggable={false}
+      />
+    </div>
+  );
+}
diff --git a/app/ycode/components/RichTextImagePopover.tsx b/app/ycode/components/RichTextImagePopover.tsx
new file mode 100644
index 00000000..91126077
--- /dev/null
+++ b/app/ycode/components/RichTextImagePopover.tsx
@@ -0,0 +1,120 @@
+'use client';
+
+import React, { useState, useCallback, useRef, useEffect } from 'react';
+import { Editor } from '@tiptap/core';
+
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Button } from '@/components/ui/button';
+import Icon from '@/components/ui/icon';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import SettingsPanel from './SettingsPanel';
+
+export interface RichTextImagePopoverProps {
+  editor: Editor;
+  trigger: React.ReactNode;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  disabled?: boolean;
+}
+
+export default function RichTextImagePopover({
+  editor,
+  trigger,
+  open,
+  onOpenChange,
+  disabled = false,
+}: RichTextImagePopoverProps) {
+  const [altText, setAltText] = useState('');
+  const [savedPos, setSavedPos] = useState<number | null>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  // Refs for mutable values needed in the selectionUpdate listener
+  const altTextRef = useRef(altText);
+  const savedPosRef = useRef(savedPos);
+  altTextRef.current = altText;
+  savedPosRef.current = savedPos;
+
+  const saveAltAtPos = useCallback((pos: number, alt: string) => {
+    const node = editor.state.doc.nodeAt(pos);
+    if (node?.type.name === 'richTextImage' && node.attrs.alt !== alt) {
+      const tr = editor.state.tr.setNodeMarkup(pos, undefined, {
+        ...node.attrs,
+        alt,
+      });
+      editor.view.dispatch(tr);
+    }
+  }, [editor]);
+
+  const saveAlt = useCallback(() => {
+    if (savedPosRef.current !== null) {
+      saveAltAtPos(savedPosRef.current, altTextRef.current);
+    }
+  }, [saveAltAtPos]);
+
+  const handleOpenChange = useCallback((newOpen: boolean) => {
+    if (newOpen && disabled) return;
+    if (!newOpen) saveAlt();
+    onOpenChange(newOpen);
+  }, [onOpenChange, disabled, saveAlt]);
+
+  // Sync alt text from the currently selected image whenever the popover opens.
+  // This covers both the initial open AND re-opens after clicking a different image
+  // (where the popover closes on outside-click, selection changes, then reopens).
+  useEffect(() => {
+    if (!open) return;
+
+    const { selection } = editor.state;
+    const node = editor.state.doc.nodeAt(selection.from);
+    if (node?.type.name === 'richTextImage') {
+      setAltText(node.attrs.alt || '');
+      setSavedPos(selection.from);
+    }
+  }, [open, editor]);
+
+  useEffect(() => {
+    if (open) {
+      requestAnimationFrame(() => {
+        inputRef.current?.focus();
+        inputRef.current?.select();
+      });
+    }
+  }, [open]);
+
+  return (
+    <Popover
+      open={open}
+      onOpenChange={handleOpenChange}
+    >
+      <PopoverTrigger asChild>
+        {trigger}
+      </PopoverTrigger>
+
+      <PopoverContent
+        className="w-64 px-4 py-0"
+        align="start"
+        side="bottom"
+        sideOffset={8}
+        onOpenAutoFocus={(e) => e.preventDefault()}
+      >
+        <SettingsPanel
+          title="Image"
+          isOpen={true}
+          onToggle={() => {}}
+        >
+          <div className="grid grid-cols-3">
+            <Label variant="muted">ALT</Label>
+            <div className="col-span-2 *:w-full">
+              <Input
+                ref={inputRef}
+                value={altText}
+                onChange={(e) => setAltText(e.target.value)}
+                placeholder="Image description"
+              />
+            </div>
+          </div>
+        </SettingsPanel>
+      </PopoverContent>
+    </Popover>
+  );
+}
diff --git a/app/ycode/components/RichTextLinkPopover.tsx b/app/ycode/components/RichTextLinkPopover.tsx
index f8a6f868..29d0172c 100644
--- a/app/ycode/components/RichTextLinkPopover.tsx
+++ b/app/ycode/components/RichTextLinkPopover.tsx
@@ -13,8 +13,8 @@ import { Editor } from '@tiptap/core';
 import { Button } from '@/components/ui/button';
 import Icon from '@/components/ui/icon';
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
-import { Separator } from '@/components/ui/separator';
 import RichTextLinkSettings from './RichTextLinkSettings';
+import SettingsPanel from './SettingsPanel';
 import { getLinkSettingsFromMark } from '@/lib/tiptap-extensions/rich-text-link';
 import type { Layer, CollectionField, Collection, LinkSettings, LinkType } from '@/types';
 import type { FieldGroup } from './CollectionFieldSelector';
@@ -136,11 +136,7 @@ export default function RichTextLinkPopover({
         const attrs = editor.getAttributes('richTextLink');
         setLinkSettings(getLinkSettingsFromMark(attrs));
       } else {
-        // Default to URL type for new links
-        setLinkSettings({
-          type: 'url',
-          url: { type: 'dynamic_text', data: { content: '' } },
-        });
+        setLinkSettings(null);
       }
     }
 
@@ -161,55 +157,35 @@ export default function RichTextLinkPopover({
     }
   }, [isControlled, controlledOnOpenChange]);
 
-  // Handle settings change
-  const handleSettingsChange = useCallback((settings: LinkSettings | null) => {
-    setLinkSettings(settings);
-  }, []);
-
-  // Apply link to selection
-  const handleApply = useCallback(() => {
-    if (!savedSelection) {
-      closePopover();
-      return;
-    }
+  // Apply link settings to the editor immediately
+  const applyToEditor = useCallback((settings: LinkSettings | null, selection: { from: number; to: number } | null) => {
+    if (!selection) return;
 
-    const { from, to } = savedSelection;
+    const { from, to } = selection;
+    const markType = editor.schema.marks.richTextLink;
+    if (!markType) return;
 
-    if (!linkSettings) {
-      // Remove link if settings are null
+    if (!settings) {
       editor.chain()
         .focus()
         .setTextSelection({ from, to })
         .unsetRichTextLink()
         .run();
-      closePopover();
       return;
     }
 
-    // Get the mark type from schema
-    const markType = editor.schema.marks.richTextLink;
-    if (!markType) {
-      closePopover();
-      return;
-    }
-
-    // Use a direct transaction to update/add the mark
-    editor.chain().focus().setTextSelection({ from, to }).run();
-
-    // Create and dispatch a transaction that removes old mark (if any) and adds new one
     const { state } = editor;
     const tr = state.tr;
-
-    // Remove any existing richTextLink marks in the range
     tr.removeMark(from, to, markType);
-    // Add the new mark with updated settings
-    tr.addMark(from, to, markType.create(linkSettings as any));
-
-    // Dispatch the transaction
+    tr.addMark(from, to, markType.create(settings as any));
     editor.view.dispatch(tr);
+  }, [editor]);
 
-    closePopover();
-  }, [editor, linkSettings, savedSelection, closePopover]);
+  // Handle settings change — apply immediately
+  const handleSettingsChange = useCallback((settings: LinkSettings | null) => {
+    setLinkSettings(settings);
+    applyToEditor(settings, savedSelection);
+  }, [applyToEditor, savedSelection]);
 
   // Remove link from selection
   const handleRemove = useCallback(() => {
@@ -251,65 +227,29 @@ export default function RichTextLinkPopover({
       </PopoverTrigger>
 
       <PopoverContent
-        className="w-64 p-0 bg-background border-border overflow-hidden"
+        className="w-64 px-4 py-0"
         align="start"
         side="bottom"
         sideOffset={8}
       >
-        <div className="flex flex-col">
-          <div className="px-3 py-3.5 border-b bg-input/50">
-            <h4 className="text-xs font-medium">Link settings</h4>
-          </div>
-
-          <div className="p-1 py-2">
-            <RichTextLinkSettings
-              value={linkSettings}
-              onChange={handleSettingsChange}
-              fieldGroups={fieldGroups}
-              allFields={allFields}
-              collections={collections}
-              isInsideCollectionLayer={isInsideCollectionLayer}
-              layer={layer}
-              excludedLinkTypes={excludedLinkTypes}
-              hidePageContextOptions={hidePageContextOptions}
-            />
-          </div>
-
-          <Separator />
-
-          <div className="flex items-center justify-between p-3 gap-2">
-            {hadLinkOnOpen && (
-              <Button
-                variant="ghost"
-                size="xs"
-                onMouseDown={(e) => e.preventDefault()}
-                onClick={handleRemove}
-                className="text-destructive hover:text-destructive"
-              >
-                Remove
-              </Button>
-            )}
-
-            <div className="flex-1" />
-
-            <Button
-              variant="ghost"
-              size="xs"
-              onClick={closePopover}
-            >
-              Cancel
-            </Button>
-
-            <Button
-              size="xs"
-              onMouseDown={(e) => e.preventDefault()}
-              onClick={handleApply}
-              disabled={!linkSettings || (linkSettings.type === 'url' && !linkSettings.url?.data?.content)}
-            >
-              Apply
-            </Button>
-          </div>
-        </div>
+        <SettingsPanel
+          title="Link"
+          isOpen={true}
+          onToggle={() => {}}
+        >
+
+          <RichTextLinkSettings
+            value={linkSettings}
+            onChange={handleSettingsChange}
+            fieldGroups={fieldGroups}
+            allFields={allFields}
+            collections={collections}
+            isInsideCollectionLayer={isInsideCollectionLayer}
+            layer={layer}
+            excludedLinkTypes={excludedLinkTypes}
+            hidePageContextOptions={hidePageContextOptions}
+          />
+        </SettingsPanel>
       </PopoverContent>
     </Popover>
   );
diff --git a/app/ycode/components/RichTextLinkSettings.tsx b/app/ycode/components/RichTextLinkSettings.tsx
index 86dae949..d9e4a059 100644
--- a/app/ycode/components/RichTextLinkSettings.tsx
+++ b/app/ycode/components/RichTextLinkSettings.tsx
@@ -513,53 +513,45 @@ export default function RichTextLinkSettings({
   );
 
   return (
-    <div className="space-y-3 p-2">
+    <div className="flex flex-col gap-3">
       {/* Link Type */}
       <div className="grid grid-cols-3 items-center gap-2">
         <Label className="text-xs text-muted-foreground">Link To</Label>
         <div className="col-span-2">
-          <div className="flex items-center gap-1">
-            <Select
-              value={linkType === 'none' ? '' : linkType}
-              onValueChange={(newVal) => handleLinkTypeChange(newVal as LinkType | 'none')}
+          <Select
+            value={linkType === 'none' ? '' : linkType}
+            onValueChange={(newVal) => handleLinkTypeChange(newVal as LinkType | 'none')}
+          >
+            <SelectTrigger
+              onClear={linkType !== 'none'
+                ? () => handleLinkTypeChange('none')
+                : undefined}
             >
-              <SelectTrigger className="w-full">
-                <SelectValue placeholder="Page or URL..." />
-              </SelectTrigger>
-              <SelectContent>
-                {linkTypeOptions.map((option, index) => {
-                  if ('type' in option && option.type === 'separator') {
-                    return <SelectSeparator key={`separator-${index}`} />;
-                  }
-                  if ('value' in option) {
-                    return (
-                      <SelectItem
-                        key={option.value}
-                        value={option.value}
-                        disabled={option.disabled}
-                      >
-                        <div className="flex items-center gap-2">
-                          <Icon name={option.icon as IconProps['name']} className="size-3" />
-                          {option.label}
-                        </div>
-                      </SelectItem>
-                    );
-                  }
-                  return null;
-                })}
-              </SelectContent>
-            </Select>
-            {linkType !== 'none' && (
-              <span
-                role="button"
-                tabIndex={0}
-                className="shrink-0 p-0.5 rounded-sm opacity-70 hover:opacity-100 transition-opacity cursor-pointer"
-                onClick={() => handleLinkTypeChange('none')}
-              >
-                <Icon name="x" className="size-2.5" />
-              </span>
-            )}
-          </div>
+              <SelectValue placeholder="Page or URL..." />
+            </SelectTrigger>
+            <SelectContent>
+              {linkTypeOptions.map((option, index) => {
+                if ('type' in option && option.type === 'separator') {
+                  return <SelectSeparator key={`separator-${index}`} />;
+                }
+                if ('value' in option) {
+                  return (
+                    <SelectItem
+                      key={option.value}
+                      value={option.value}
+                      disabled={option.disabled}
+                    >
+                      <div className="flex items-center gap-2">
+                        <Icon name={option.icon as IconProps['name']} className="size-3" />
+                        {option.label}
+                      </div>
+                    </SelectItem>
+                  );
+                }
+                return null;
+              })}
+            </SelectContent>
+          </Select>
         </div>
       </div>
 
diff --git a/components/ui/button.tsx b/components/ui/button.tsx
index 9dbca355..80accedc 100644
--- a/components/ui/button.tsx
+++ b/components/ui/button.tsx
@@ -15,7 +15,7 @@ const buttonVariants = cva(
         secondary: 'bg-secondary text-muted-foreground hover:bg-secondary/70 backdrop-blur',
         purple: 'bg-purple-500/20 text-purple-300 hover:bg-purple-500/30',
         data: 'bg-blue-500/20 text-blue-300 hover:bg-blue-500/30',
-        ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 text-muted-foreground',
+        ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-secondary/70 text-muted-foreground',
         link: 'text-primary underline-offset-4 hover:underline',
         input: 'bg-input hover:bg-input/60 text-muted-foreground',
         white: 'bg-white text-neutral-900',
diff --git a/components/ui/select.tsx b/components/ui/select.tsx
index 6e3e3972..02f2f7fd 100644
--- a/components/ui/select.tsx
+++ b/components/ui/select.tsx
@@ -7,6 +7,7 @@ import { cva, type VariantProps } from 'class-variance-authority'
 
 import { cn } from '@/lib/utils'
 import Icon from '@/components/ui/icon';
+import { Button } from '@/components/ui/button';
 
 function Select({
   ...props
@@ -27,11 +28,11 @@ function SelectValue({
 }
 
 const selectVariants = cva(
-  "border-transparent data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-[0px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive flex items-center justify-between gap-1 rounded-lg border bg-transparent px-2 py-1 text-sm whitespace-nowrap transition-[color,box-shadow] outline-none cursor-pointer disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  "w-full border-transparent data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-[0px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive flex items-center justify-between gap-1 rounded-lg border bg-transparent px-2 py-1 text-sm whitespace-nowrap transition-[color,box-shadow] outline-none cursor-pointer disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
   {
     variants: {
       variant: {
-        default: 'bg-input hover:bg-input/60',
+        default: 'bg-input',
         ghost: 'hover:bg-input dark:hover:bg-input/70 border-transparent shadow-none backdrop-blur',
         overlay: 'bg-white/90 text-neutral-800 hover:bg-white dark:bg-neutral-800/90 dark:text-white dark:hover:bg-neutral-800 disabled:opacity-80',
       },
@@ -68,10 +69,12 @@ function SelectTrigger({
     >
       {children}
       {onClear ? (
-        <span
+        <Button
           role="button"
+          variant="ghost"
+          size="xs"
           tabIndex={0}
-          className="ml-auto -mr-0.5 p-0.5 rounded-sm opacity-70 hover:opacity-100 transition-opacity cursor-pointer"
+          className="ml-auto -mr-1 size-5"
           onClick={(e) => {
             e.preventDefault();
             e.stopPropagation();
@@ -86,8 +89,10 @@ function SelectTrigger({
           }}
           onPointerDown={(e) => e.stopPropagation()}
         >
-          <Icon name="x" className="size-2.5" />
-        </span>
+          <div>
+            <Icon name="x" className="size-2.5" />
+          </div>
+        </Button>
       ) : (
         <SelectPrimitive.Icon asChild>
           <Icon name="chevronDown" className="size-2.5 opacity-50" />