diff --git a/apps/www/content/docs/components/changelog.mdx b/apps/www/content/docs/components/changelog.mdx
index 7c07f1ee92..9b9010abb4 100644
--- a/apps/www/content/docs/components/changelog.mdx
+++ b/apps/www/content/docs/components/changelog.mdx
@@ -11,6 +11,10 @@ Use the [CLI](https://platejs.org/docs/components/cli) to install the latest ver
 
 ## October 2024 #15
 
+### October 27 #15.6
+
+- Fixed and modified some styles in emoji and color picker
+
 ### October 26 #15.5
 
 - Rename `indent-todo-marker-component` to `indent-todo-marker`.
diff --git a/apps/www/public/r/styles/default/color-dropdown-menu.json b/apps/www/public/r/styles/default/color-dropdown-menu.json
index edba44d655..4e45fff1f7 100644
--- a/apps/www/public/r/styles/default/color-dropdown-menu.json
+++ b/apps/www/public/r/styles/default/color-dropdown-menu.json
@@ -26,13 +26,13 @@
       "type": "registry:ui"
     },
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport type { DropdownMenuItemProps } from '@radix-ui/react-dropdown-menu';\n\nimport { cn } from '@udecode/cn';\nimport { Check } from 'lucide-react';\n\nimport type { TColor } from './color-dropdown-menu';\n\nimport { buttonVariants } from './button';\nimport { DropdownMenuItem } from './dropdown-menu';\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from './tooltip';\n\ntype ColorDropdownMenuItemProps = {\n  isBrightColor: boolean;\n  isSelected: boolean;\n  updateColor: (color: string) => void;\n  value: string;\n  name?: string;\n} & DropdownMenuItemProps;\n\nexport function ColorDropdownMenuItem({\n  className,\n  isBrightColor,\n  isSelected,\n  name,\n  updateColor,\n  value,\n  ...props\n}: ColorDropdownMenuItemProps) {\n  const content = (\n    <DropdownMenuItem\n      className={cn(\n        buttonVariants({\n          isMenu: true,\n          variant: 'outline',\n        }),\n        'size-6 border border-solid border-muted p-0',\n        !isBrightColor && 'border-transparent text-white',\n        className\n      )}\n      style={{ backgroundColor: value }}\n      onSelect={(e) => {\n        e.preventDefault();\n        updateColor(value);\n      }}\n      {...props}\n    >\n      {isSelected ? <Check /> : null}\n    </DropdownMenuItem>\n  );\n\n  return name ? (\n    <Tooltip>\n      <TooltipTrigger>{content}</TooltipTrigger>\n      <TooltipContent>{name}</TooltipContent>\n    </Tooltip>\n  ) : (\n    content\n  );\n}\n\ntype ColorDropdownMenuItemsProps = {\n  colors: TColor[];\n  updateColor: (color: string) => void;\n  color?: string;\n} & React.HTMLAttributes<HTMLDivElement>;\n\nexport function ColorDropdownMenuItems({\n  className,\n  color,\n  colors,\n  updateColor,\n  ...props\n}: ColorDropdownMenuItemsProps) {\n  return (\n    <div\n      className={cn('grid grid-cols-[repeat(10,1fr)] gap-1', className)}\n      {...props}\n    >\n      <TooltipProvider>\n        {colors.map(({ isBrightColor, name, value }) => (\n          <ColorDropdownMenuItem\n            name={name}\n            key={name ?? value}\n            value={value}\n            isBrightColor={isBrightColor}\n            isSelected={color === value}\n            updateColor={updateColor}\n          />\n        ))}\n      </TooltipProvider>\n    </div>\n  );\n}\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport type { DropdownMenuItemProps } from '@radix-ui/react-dropdown-menu';\n\nimport { cn } from '@udecode/cn';\nimport { Check } from 'lucide-react';\n\nimport { buttonVariants } from './button';\nimport { DropdownMenuItem } from './dropdown-menu';\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from './tooltip';\n\nexport type TColor = {\n  isBrightColor: boolean;\n  name: string;\n  value: string;\n};\n\ntype ColorDropdownMenuItemProps = {\n  isBrightColor: boolean;\n  isSelected: boolean;\n  updateColor: (color: string) => void;\n  value: string;\n  name?: string;\n} & DropdownMenuItemProps;\n\nexport function ColorDropdownMenuItem({\n  className,\n  isBrightColor,\n  isSelected,\n  name,\n  updateColor,\n  value,\n  ...props\n}: ColorDropdownMenuItemProps) {\n  const content = (\n    <DropdownMenuItem\n      className={cn(\n        buttonVariants({\n          isMenu: true,\n          variant: 'outline',\n        }),\n        'flex size-6 items-center justify-center rounded-full border border-solid border-muted p-0 transition-all hover:scale-125',\n        !isBrightColor && 'border-transparent text-white hover:!text-white',\n        className\n      )}\n      style={{ backgroundColor: value }}\n      onSelect={(e) => {\n        e.preventDefault();\n        updateColor(value);\n      }}\n      {...props}\n    >\n      {isSelected ? <Check className=\"size-3\" /> : null}\n    </DropdownMenuItem>\n  );\n\n  return name ? (\n    <Tooltip>\n      <TooltipTrigger>{content}</TooltipTrigger>\n      <TooltipContent className=\"mb-1 capitalize\">{name}</TooltipContent>\n    </Tooltip>\n  ) : (\n    content\n  );\n}\n\ntype ColorDropdownMenuItemsProps = {\n  colors: TColor[];\n  updateColor: (color: string) => void;\n  color?: string;\n} & React.HTMLAttributes<HTMLDivElement>;\n\nexport function ColorDropdownMenuItems({\n  className,\n  color,\n  colors,\n  updateColor,\n  ...props\n}: ColorDropdownMenuItemsProps) {\n  return (\n    <div\n      className={cn(\n        'grid grid-cols-[repeat(10,1fr)] place-items-center gap-1',\n        className\n      )}\n      {...props}\n    >\n      <TooltipProvider>\n        {colors.map(({ isBrightColor, name, value }) => (\n          <ColorDropdownMenuItem\n            name={name}\n            key={name ?? value}\n            value={value}\n            isBrightColor={isBrightColor}\n            isSelected={color === value}\n            updateColor={updateColor}\n          />\n        ))}\n        {props.children}\n      </TooltipProvider>\n    </div>\n  );\n}\n",
       "path": "plate-ui/color-dropdown-menu-items.tsx",
       "target": "components/plate-ui/color-dropdown-menu-items.tsx",
       "type": "registry:ui"
     },
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';\n\nimport {\n  useColorDropdownMenu,\n  useColorDropdownMenuState,\n} from '@udecode/plate-font/react';\n\nimport { DEFAULT_COLORS, DEFAULT_CUSTOM_COLORS } from './color-constants';\nimport { ColorPicker } from './color-picker';\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuTrigger,\n} from './dropdown-menu';\nimport { ToolbarButton } from './toolbar';\n\nexport type TColor = {\n  isBrightColor: boolean;\n  name: string;\n  value: string;\n};\n\ntype ColorDropdownMenuProps = {\n  nodeType: string;\n  tooltip?: string;\n} & DropdownMenuProps;\n\nexport function ColorDropdownMenu({\n  children,\n  nodeType,\n  tooltip,\n}: ColorDropdownMenuProps) {\n  const state = useColorDropdownMenuState({\n    closeOnSelect: true,\n    colors: DEFAULT_COLORS,\n    customColors: DEFAULT_CUSTOM_COLORS,\n    nodeType,\n  });\n\n  const { buttonProps, menuProps } = useColorDropdownMenu(state);\n\n  return (\n    <DropdownMenu modal={false} {...menuProps}>\n      <DropdownMenuTrigger asChild>\n        <ToolbarButton tooltip={tooltip} {...buttonProps}>\n          {children}\n        </ToolbarButton>\n      </DropdownMenuTrigger>\n\n      <DropdownMenuContent align=\"start\">\n        <ColorPicker\n          color={state.selectedColor || state.color}\n          clearColor={state.clearColor}\n          colors={state.colors}\n          customColors={state.customColors}\n          updateColor={state.updateColorAndClose}\n          updateCustomColor={state.updateColor}\n        />\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n",
+      "content": "'use client';\n\nimport type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';\n\nimport {\n  useColorDropdownMenu,\n  useColorDropdownMenuState,\n} from '@udecode/plate-font/react';\n\nimport { DEFAULT_COLORS, DEFAULT_CUSTOM_COLORS } from './color-constants';\nimport { ColorPicker } from './color-picker';\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuTrigger,\n} from './dropdown-menu';\nimport { ToolbarButton } from './toolbar';\n\ntype ColorDropdownMenuProps = {\n  nodeType: string;\n  tooltip?: string;\n} & DropdownMenuProps;\n\nexport function ColorDropdownMenu({\n  children,\n  nodeType,\n  tooltip,\n}: ColorDropdownMenuProps) {\n  const state = useColorDropdownMenuState({\n    closeOnSelect: true,\n    colors: DEFAULT_COLORS,\n    customColors: DEFAULT_CUSTOM_COLORS,\n    nodeType,\n  });\n\n  const { buttonProps, menuProps } = useColorDropdownMenu(state);\n\n  return (\n    <DropdownMenu modal={false} {...menuProps}>\n      <DropdownMenuTrigger asChild>\n        <ToolbarButton tooltip={tooltip} {...buttonProps}>\n          {children}\n        </ToolbarButton>\n      </DropdownMenuTrigger>\n\n      <DropdownMenuContent align=\"start\">\n        <ColorPicker\n          color={state.selectedColor || state.color}\n          clearColor={state.clearColor}\n          colors={state.colors}\n          customColors={state.customColors}\n          updateColor={state.updateColorAndClose}\n          updateCustomColor={state.updateColor}\n        />\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n",
       "path": "plate-ui/color-dropdown-menu.tsx",
       "target": "components/plate-ui/color-dropdown-menu.tsx",
       "type": "registry:ui"
@@ -44,13 +44,13 @@
       "type": "registry:ui"
     },
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\n\nimport type { TColor } from './color-dropdown-menu';\n\nimport { buttonVariants } from './button';\nimport { ColorDropdownMenuItems } from './color-dropdown-menu-items';\nimport { ColorsCustom } from './colors-custom';\nimport { DropdownMenuItem } from './dropdown-menu';\nimport { Separator } from './separator';\n\nexport const ColorPickerContent = withRef<\n  'div',\n  {\n    clearColor: () => void;\n    colors: TColor[];\n    customColors: TColor[];\n    updateColor: (color: string) => void;\n    updateCustomColor: (color: string) => void;\n    color?: string;\n  }\n>(\n  (\n    {\n      className,\n      clearColor,\n      color,\n      colors,\n      customColors,\n      updateColor,\n      updateCustomColor,\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <div\n        ref={ref}\n        className={cn('flex flex-col gap-4 p-4', className)}\n        {...props}\n      >\n        <ColorsCustom\n          color={color}\n          colors={colors}\n          customColors={customColors}\n          updateColor={updateColor}\n          updateCustomColor={updateCustomColor}\n        />\n\n        <Separator />\n\n        <ColorDropdownMenuItems\n          color={color}\n          colors={colors}\n          updateColor={updateColor}\n        />\n        {color && (\n          <DropdownMenuItem\n            className={buttonVariants({\n              isMenu: true,\n              variant: 'outline',\n            })}\n            onClick={clearColor}\n          >\n            Clear\n          </DropdownMenuItem>\n        )}\n      </div>\n    );\n  }\n);\n\nexport const ColorPicker = React.memo(\n  ColorPickerContent,\n  (prev, next) =>\n    prev.color === next.color &&\n    prev.colors === next.colors &&\n    prev.customColors === next.customColors\n);\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\n\nimport { Icons } from '@/components/icons';\n\nimport { buttonVariants } from './button';\nimport {\n  type TColor,\n  ColorDropdownMenuItems,\n} from './color-dropdown-menu-items';\nimport { ColorCustom } from './colors-custom';\nimport {\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n} from './dropdown-menu';\n\nexport const ColorPickerContent = withRef<\n  'div',\n  {\n    clearColor: () => void;\n    colors: TColor[];\n    customColors: TColor[];\n    updateColor: (color: string) => void;\n    updateCustomColor: (color: string) => void;\n    color?: string;\n  }\n>(\n  (\n    {\n      className,\n      clearColor,\n      color,\n      colors,\n      customColors,\n      updateColor,\n      updateCustomColor,\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <div ref={ref} className={cn('flex flex-col', className)} {...props}>\n        <DropdownMenuLabel>Color Picker</DropdownMenuLabel>\n        <DropdownMenuGroup>\n          <ColorCustom\n            color={color}\n            className=\"p-2\"\n            colors={colors}\n            customColors={customColors}\n            updateColor={updateColor}\n            updateCustomColor={updateCustomColor}\n          />\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <ColorDropdownMenuItems\n            color={color}\n            className=\"p-2\"\n            colors={colors}\n            updateColor={updateColor}\n          />\n        </DropdownMenuGroup>\n        {color && (\n          <React.Fragment>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem\n                className={cn(\n                  buttonVariants({\n                    isMenu: false,\n                    size: 'sm',\n                    variant: 'ghost',\n                  }),\n                  'w-full justify-start'\n                )}\n                onClick={clearColor}\n              >\n                <Icons.colorClear className=\"mr-2\" />\n                <span>Clear</span>\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n          </React.Fragment>\n        )}\n      </div>\n    );\n  }\n);\n\nexport const ColorPicker = React.memo(\n  ColorPickerContent,\n  (prev, next) =>\n    prev.color === next.color &&\n    prev.colors === next.colors &&\n    prev.customColors === next.customColors\n);\n",
       "path": "plate-ui/color-picker.tsx",
       "target": "components/plate-ui/color-picker.tsx",
       "type": "registry:ui"
     },
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport {\n  useColorsCustom,\n  useColorsCustomState,\n} from '@udecode/plate-font/react';\n\nimport type { TColor } from './color-dropdown-menu';\n\nimport { buttonVariants } from './button';\nimport { ColorDropdownMenuItems } from './color-dropdown-menu-items';\nimport { ColorInput } from './color-input';\nimport { DropdownMenuItem } from './dropdown-menu';\n\ntype ColorsCustomProps = {\n  colors: TColor[];\n  customColors: TColor[];\n  updateColor: (color: string) => void;\n  updateCustomColor: (color: string) => void;\n  color?: string;\n};\n\nexport function ColorsCustom({\n  color,\n  colors,\n  customColors,\n  updateColor,\n  updateCustomColor,\n}: ColorsCustomProps) {\n  const state = useColorsCustomState({\n    color,\n    colors,\n    customColors,\n    updateCustomColor,\n  });\n  const { inputProps, menuItemProps } = useColorsCustom(state);\n\n  return (\n    <div className=\"flex flex-col gap-4\">\n      <ColorInput {...inputProps}>\n        <DropdownMenuItem\n          className={buttonVariants({\n            isMenu: true,\n            variant: 'outline',\n          })}\n          {...menuItemProps}\n        >\n          CUSTOM\n        </DropdownMenuItem>\n      </ColorInput>\n\n      <ColorDropdownMenuItems\n        color={color}\n        colors={state.computedColors}\n        updateColor={updateColor}\n      />\n    </div>\n  );\n}\n",
+      "content": "'use client';\n\nimport React, { type ComponentPropsWithoutRef } from 'react';\n\nimport { cn } from '@udecode/cn';\nimport {\n  useColorsCustom,\n  useColorsCustomState,\n} from '@udecode/plate-font/react';\n\nimport { Icons } from '@/components/icons';\n\nimport { buttonVariants } from './button';\nimport {\n  type TColor,\n  ColorDropdownMenuItems,\n} from './color-dropdown-menu-items';\nimport { ColorInput } from './color-input';\n\n// import { ColorInput } from './color-input';\nimport { DropdownMenuItem } from './dropdown-menu';\n\ntype ColorCustomProps = {\n  colors: TColor[];\n  customColors: TColor[];\n  updateColor: (color: string) => void;\n  updateCustomColor: (color: string) => void;\n  color?: string;\n} & ComponentPropsWithoutRef<'div'>;\n\nexport function ColorCustom({\n  className,\n  color,\n  colors,\n  customColors,\n  updateColor,\n  updateCustomColor,\n  ...props\n}: ColorCustomProps) {\n  const state = useColorsCustomState({\n    color,\n    colors,\n    customColors,\n    updateCustomColor,\n  });\n  const { inputProps, menuItemProps } = useColorsCustom(state);\n\n  return (\n    <div className={cn('relative flex flex-col gap-4', className)} {...props}>\n      <ColorDropdownMenuItems\n        color={color}\n        colors={state.computedColors}\n        updateColor={updateColor}\n      >\n        <ColorInput {...inputProps}>\n          <DropdownMenuItem\n            className={cn(\n              buttonVariants({\n                isMenu: true,\n                size: 'icon',\n                variant: 'outline',\n              }),\n              'absolute bottom-2 right-2 top-1.5 flex size-7 items-center justify-center rounded-full'\n            )}\n            {...menuItemProps}\n          >\n            <span className=\"sr-only\">Custom</span>\n            <Icons.add />\n          </DropdownMenuItem>\n        </ColorInput>\n      </ColorDropdownMenuItems>\n    </div>\n  );\n}\n",
       "path": "plate-ui/colors-custom.tsx",
       "target": "components/plate-ui/colors-custom.tsx",
       "type": "registry:ui"
diff --git a/apps/www/public/r/styles/default/emoji-dropdown-menu.json b/apps/www/public/r/styles/default/emoji-dropdown-menu.json
index 4b405ef281..f5af63c24d 100644
--- a/apps/www/public/r/styles/default/emoji-dropdown-menu.json
+++ b/apps/www/public/r/styles/default/emoji-dropdown-menu.json
@@ -33,13 +33,13 @@
       "type": "registry:ui"
     },
     {
-      "content": "'use client';\n\nimport { memo, useCallback } from 'react';\n\nimport type { UseEmojiPickerType } from '@udecode/plate-emoji/react';\n\nimport { cn } from '@udecode/cn';\nimport { type Emoji, type GridRow, EmojiSettings } from '@udecode/plate-emoji';\n\nexport type EmojiPickerContentProps = Pick<\n  UseEmojiPickerType,\n  | 'emojiLibrary'\n  | 'i18n'\n  | 'isSearching'\n  | 'onMouseOver'\n  | 'onSelectEmoji'\n  | 'refs'\n  | 'searchResult'\n  | 'settings'\n  | 'visibleCategories'\n>;\n\nexport type EmojiButtonProps = {\n  emoji: Emoji;\n  index: number;\n  onMouseOver: (emoji?: Emoji) => void;\n  onSelect: (emoji: Emoji) => void;\n};\n\nexport type RowOfButtonsProps = {\n  row: GridRow;\n} & Pick<UseEmojiPickerType, 'emojiLibrary' | 'onMouseOver' | 'onSelectEmoji'>;\n\nconst Button = memo(\n  ({ emoji, index, onMouseOver, onSelect }: EmojiButtonProps) => {\n    return (\n      <button\n        className=\"group relative flex size-9 cursor-pointer items-center justify-center border-none bg-transparent text-2xl leading-none\"\n        onClick={() => onSelect(emoji)}\n        onMouseEnter={() => onMouseOver(emoji)}\n        onMouseLeave={() => onMouseOver()}\n        aria-label={emoji.skins[0].native}\n        data-index={index}\n        tabIndex={-1}\n        type=\"button\"\n      >\n        <div\n          className=\"absolute inset-0 rounded-full opacity-0 group-hover:opacity-100\"\n          aria-hidden=\"true\"\n        />\n        <span style={{ position: 'relative' }} data-emoji-set=\"native\">\n          {emoji.skins[0].native}\n        </span>\n      </button>\n    );\n  }\n);\nButton.displayName = 'Button';\n\nconst RowOfButtons = memo(\n  ({ emojiLibrary, row, onMouseOver, onSelectEmoji }: RowOfButtonsProps) => (\n    <div key={row.id} className=\"flex\" data-index={row.id}>\n      {row.elements.map((emojiId, index) => (\n        <Button\n          key={emojiId}\n          onMouseOver={onMouseOver}\n          onSelect={onSelectEmoji}\n          emoji={emojiLibrary.getEmoji(emojiId)}\n          index={index}\n        />\n      ))}\n    </div>\n  )\n);\nRowOfButtons.displayName = 'RowOfButtons';\n\nexport function EmojiPickerContent({\n  emojiLibrary,\n  i18n,\n  isSearching = false,\n  refs,\n  searchResult,\n  settings = EmojiSettings,\n  visibleCategories,\n  onMouseOver,\n  onSelectEmoji,\n}: EmojiPickerContentProps) {\n  const getRowWidth = settings.perLine.value * settings.buttonSize.value;\n\n  const isCategoryVisible = useCallback(\n    (categoryId: any) => {\n      return visibleCategories.has(categoryId)\n        ? visibleCategories.get(categoryId)\n        : false;\n    },\n    [visibleCategories]\n  );\n\n  const EmojiList = useCallback(() => {\n    return emojiLibrary\n      .getGrid()\n      .sections()\n      .map(({ id: categoryId }) => {\n        const section = emojiLibrary.getGrid().section(categoryId);\n        const { buttonSize } = settings;\n\n        return (\n          <div\n            key={categoryId}\n            ref={section.root}\n            style={{ width: getRowWidth }}\n            data-id={categoryId}\n          >\n            <div className=\"sticky -top-px z-[1] bg-popover/90 p-1 py-2 text-sm font-semibold backdrop-blur-sm\">\n              {i18n.categories[categoryId]}\n            </div>\n            <div\n              className=\"relative flex flex-wrap\"\n              style={{ height: section.getRows().length * buttonSize.value }}\n            >\n              {isCategoryVisible(categoryId) &&\n                section\n                  .getRows()\n                  .map((row: GridRow) => (\n                    <RowOfButtons\n                      key={row.id}\n                      onMouseOver={onMouseOver}\n                      onSelectEmoji={onSelectEmoji}\n                      emojiLibrary={emojiLibrary}\n                      row={row}\n                    />\n                  ))}\n            </div>\n          </div>\n        );\n      });\n  }, [\n    emojiLibrary,\n    getRowWidth,\n    i18n.categories,\n    isCategoryVisible,\n    onSelectEmoji,\n    onMouseOver,\n    settings,\n  ]);\n\n  const SearchList = useCallback(() => {\n    return (\n      <div style={{ width: getRowWidth }} data-id=\"search\">\n        <div className=\"sticky -top-px z-[1] bg-popover/90 p-1 py-2 text-sm font-semibold text-card-foreground backdrop-blur-sm\">\n          {i18n.searchResult}\n        </div>\n        <div className=\"relative flex flex-wrap\">\n          {searchResult.map((emoji: Emoji, index: number) => (\n            <Button\n              key={emoji.id}\n              onMouseOver={onMouseOver}\n              onSelect={onSelectEmoji}\n              emoji={emojiLibrary.getEmoji(emoji.id)}\n              index={index}\n            />\n          ))}\n        </div>\n      </div>\n    );\n  }, [\n    emojiLibrary,\n    getRowWidth,\n    i18n.searchResult,\n    searchResult,\n    onSelectEmoji,\n    onMouseOver,\n  ]);\n\n  return (\n    <div\n      ref={refs.current.contentRoot}\n      className={cn(\n        'h-full min-h-[50%] overflow-y-auto overflow-x-hidden px-2',\n        '[&::-webkit-scrollbar]:w-4',\n        '[&::-webkit-scrollbar-button]:hidden [&::-webkit-scrollbar-button]:size-0',\n        '[&::-webkit-scrollbar-thumb]:min-h-11 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-muted [&::-webkit-scrollbar-thumb]:hover:bg-muted-foreground/25',\n        '[&::-webkit-scrollbar-thumb]:border-4 [&::-webkit-scrollbar-thumb]:border-solid [&::-webkit-scrollbar-thumb]:border-popover [&::-webkit-scrollbar-thumb]:bg-clip-padding'\n      )}\n      data-id=\"scroll\"\n    >\n      <div ref={refs.current.content} className=\"h-full\">\n        {isSearching ? SearchList() : EmojiList()}\n      </div>\n    </div>\n  );\n}\n",
+      "content": "'use client';\n\nimport { memo, useCallback } from 'react';\n\nimport type { UseEmojiPickerType } from '@udecode/plate-emoji/react';\n\nimport { cn } from '@udecode/cn';\nimport { type Emoji, type GridRow, EmojiSettings } from '@udecode/plate-emoji';\n\nexport type EmojiPickerContentProps = Pick<\n  UseEmojiPickerType,\n  | 'emojiLibrary'\n  | 'i18n'\n  | 'isSearching'\n  | 'onMouseOver'\n  | 'onSelectEmoji'\n  | 'refs'\n  | 'searchResult'\n  | 'settings'\n  | 'visibleCategories'\n>;\n\nexport type EmojiButtonProps = {\n  emoji: Emoji;\n  index: number;\n  onMouseOver: (emoji?: Emoji) => void;\n  onSelect: (emoji: Emoji) => void;\n};\n\nexport type RowOfButtonsProps = {\n  row: GridRow;\n} & Pick<UseEmojiPickerType, 'emojiLibrary' | 'onMouseOver' | 'onSelectEmoji'>;\n\nconst Button = memo(\n  ({ emoji, index, onMouseOver, onSelect }: EmojiButtonProps) => {\n    return (\n      <button\n        className=\"group relative flex size-9 cursor-pointer items-center justify-center border-none bg-transparent text-2xl leading-none\"\n        onClick={() => onSelect(emoji)}\n        onMouseEnter={() => onMouseOver(emoji)}\n        onMouseLeave={() => onMouseOver()}\n        aria-label={emoji.skins[0].native}\n        data-index={index}\n        tabIndex={-1}\n        type=\"button\"\n      >\n        <div\n          className=\"absolute inset-0 rounded-full opacity-0 group-hover:opacity-100\"\n          aria-hidden=\"true\"\n        />\n        <span className=\"relative\" data-emoji-set=\"native\">\n          {emoji.skins[0].native}\n        </span>\n      </button>\n    );\n  }\n);\nButton.displayName = 'Button';\n\nconst RowOfButtons = memo(\n  ({ emojiLibrary, row, onMouseOver, onSelectEmoji }: RowOfButtonsProps) => (\n    <div key={row.id} className=\"flex\" data-index={row.id}>\n      {row.elements.map((emojiId, index) => (\n        <Button\n          key={emojiId}\n          onMouseOver={onMouseOver}\n          onSelect={onSelectEmoji}\n          emoji={emojiLibrary.getEmoji(emojiId)}\n          index={index}\n        />\n      ))}\n    </div>\n  )\n);\nRowOfButtons.displayName = 'RowOfButtons';\n\nexport function EmojiPickerContent({\n  emojiLibrary,\n  i18n,\n  isSearching = false,\n  refs,\n  searchResult,\n  settings = EmojiSettings,\n  visibleCategories,\n  onMouseOver,\n  onSelectEmoji,\n}: EmojiPickerContentProps) {\n  const getRowWidth = settings.perLine.value * settings.buttonSize.value;\n\n  const isCategoryVisible = useCallback(\n    (categoryId: any) => {\n      return visibleCategories.has(categoryId)\n        ? visibleCategories.get(categoryId)\n        : false;\n    },\n    [visibleCategories]\n  );\n\n  const EmojiList = useCallback(() => {\n    return emojiLibrary\n      .getGrid()\n      .sections()\n      .map(({ id: categoryId }) => {\n        const section = emojiLibrary.getGrid().section(categoryId);\n        const { buttonSize } = settings;\n\n        return (\n          <div\n            key={categoryId}\n            ref={section.root}\n            style={{ width: getRowWidth }}\n            data-id={categoryId}\n          >\n            <div className=\"sticky -top-px z-[1] bg-popover/90 p-1 py-2 text-sm font-semibold backdrop-blur-sm\">\n              {i18n.categories[categoryId]}\n            </div>\n            <div\n              className=\"relative flex flex-wrap\"\n              style={{ height: section.getRows().length * buttonSize.value }}\n            >\n              {isCategoryVisible(categoryId) &&\n                section\n                  .getRows()\n                  .map((row: GridRow) => (\n                    <RowOfButtons\n                      key={row.id}\n                      onMouseOver={onMouseOver}\n                      onSelectEmoji={onSelectEmoji}\n                      emojiLibrary={emojiLibrary}\n                      row={row}\n                    />\n                  ))}\n            </div>\n          </div>\n        );\n      });\n  }, [\n    emojiLibrary,\n    getRowWidth,\n    i18n.categories,\n    isCategoryVisible,\n    onSelectEmoji,\n    onMouseOver,\n    settings,\n  ]);\n\n  const SearchList = useCallback(() => {\n    return (\n      <div style={{ width: getRowWidth }} data-id=\"search\">\n        <div className=\"sticky -top-px z-[1] bg-popover/90 p-1 py-2 text-sm font-semibold text-card-foreground backdrop-blur-sm\">\n          {i18n.searchResult}\n        </div>\n        <div className=\"relative flex flex-wrap\">\n          {searchResult.map((emoji: Emoji, index: number) => (\n            <Button\n              key={emoji.id}\n              onMouseOver={onMouseOver}\n              onSelect={onSelectEmoji}\n              emoji={emojiLibrary.getEmoji(emoji.id)}\n              index={index}\n            />\n          ))}\n        </div>\n      </div>\n    );\n  }, [\n    emojiLibrary,\n    getRowWidth,\n    i18n.searchResult,\n    searchResult,\n    onSelectEmoji,\n    onMouseOver,\n  ]);\n\n  return (\n    <div\n      ref={refs.current.contentRoot}\n      className={cn(\n        'h-full min-h-[50%] overflow-y-auto overflow-x-hidden px-2',\n        '[&::-webkit-scrollbar]:w-4',\n        '[&::-webkit-scrollbar-button]:hidden [&::-webkit-scrollbar-button]:size-0',\n        '[&::-webkit-scrollbar-thumb]:min-h-11 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-muted [&::-webkit-scrollbar-thumb]:hover:bg-muted-foreground/25',\n        '[&::-webkit-scrollbar-thumb]:border-4 [&::-webkit-scrollbar-thumb]:border-solid [&::-webkit-scrollbar-thumb]:border-popover [&::-webkit-scrollbar-thumb]:bg-clip-padding'\n      )}\n      data-id=\"scroll\"\n    >\n      <div ref={refs.current.content} className=\"h-full\">\n        {isSearching ? SearchList() : EmojiList()}\n      </div>\n    </div>\n  );\n}\n",
       "path": "plate-ui/emoji-picker-content.tsx",
       "target": "components/plate-ui/emoji-picker-content.tsx",
       "type": "registry:ui"
     },
     {
-      "content": "'use client';\n\nimport { useMemo } from 'react';\n\nimport type { EmojiCategoryList } from '@udecode/plate-emoji';\nimport type {\n  IEmojiFloatingLibrary,\n  UseEmojiPickerType,\n} from '@udecode/plate-emoji/react';\n\nimport { cn } from '@udecode/cn';\n\nimport { Button } from './button';\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from './tooltip';\n\nexport type EmojiPickerNavigationProps = {\n  onClick: (id: EmojiCategoryList) => void;\n} & Pick<\n  UseEmojiPickerType,\n  'emojiLibrary' | 'focusedCategory' | 'i18n' | 'icons'\n>;\n\nconst getBarProperty = (\n  emojiLibrary: IEmojiFloatingLibrary,\n  focusedCategory?: EmojiCategoryList\n) => {\n  let width = 0;\n  let position = 0;\n\n  if (focusedCategory) {\n    width = 100 / emojiLibrary.getGrid().size;\n    position = focusedCategory\n      ? emojiLibrary.indexOf(focusedCategory) * 100\n      : 0;\n  }\n\n  return { position, width };\n};\n\nexport function EmojiPickerNavigation({\n  emojiLibrary,\n  focusedCategory,\n  i18n,\n  icons,\n  onClick,\n}: EmojiPickerNavigationProps) {\n  const { position, width } = useMemo(\n    () => getBarProperty(emojiLibrary, focusedCategory),\n    [emojiLibrary, focusedCategory]\n  );\n\n  return (\n    <TooltipProvider delayDuration={500}>\n      <nav\n        id=\"emoji-nav\"\n        className=\"mb-2.5 border-0 border-b border-solid border-b-border p-1.5\"\n      >\n        <div className=\"relative flex items-center justify-evenly\">\n          {emojiLibrary\n            .getGrid()\n            .sections()\n            .map(({ id }) => (\n              <Tooltip key={id}>\n                <TooltipTrigger asChild>\n                  <Button\n                    size=\"sm\"\n                    variant=\"ghost\"\n                    className={cn(\n                      'h-fit rounded-full fill-current p-1.5 text-muted-foreground hover:bg-muted hover:text-muted-foreground',\n                      id === focusedCategory &&\n                        'pointer-events-none bg-accent fill-current text-accent-foreground'\n                    )}\n                    onClick={() => {\n                      onClick(id);\n                    }}\n                    aria-label={i18n.categories[id]}\n                    type=\"button\"\n                  >\n                    <span className=\"size-5\">\n                      {icons.categories[id].outline}\n                    </span>\n                  </Button>\n                </TooltipTrigger>\n                <TooltipContent side=\"bottom\">\n                  {i18n.categories[id]}\n                </TooltipContent>\n              </Tooltip>\n            ))}\n          <div\n            className={cn(\n              'absolute -bottom-1.5 left-0 h-0.5 w-full rounded-t-lg bg-accent opacity-100 transition-transform duration-200'\n            )}\n            style={{\n              transform: `translateX(${position}%)`,\n              visibility: `${focusedCategory ? 'visible' : 'hidden'}`,\n              width: `${width}%`,\n            }}\n          />\n        </div>\n      </nav>\n    </TooltipProvider>\n  );\n}\n",
+      "content": "import type { EmojiCategoryList } from '@udecode/plate-emoji';\nimport type { UseEmojiPickerType } from '@udecode/plate-emoji/react';\n\nimport { cn } from '@udecode/cn';\n\nimport { Button } from './button';\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from './tooltip';\n\nexport type EmojiPickerNavigationProps = {\n  onClick: (id: EmojiCategoryList) => void;\n} & Pick<\n  UseEmojiPickerType,\n  'emojiLibrary' | 'focusedCategory' | 'i18n' | 'icons'\n>;\n\n// KEEP: This is for the animated idicator bar under the icon - Opt in if needed\n// const getBarProperty = (\n//   emojiLibrary: IEmojiFloatingLibrary,\n//   focusedCategory?: EmojiCategoryList\n// ) => {\n//   let width = 0;\n//   let position = 0;\n\n//   if (focusedCategory) {\n//     width = 100 / emojiLibrary.getGrid().size;\n//     position = focusedCategory\n//       ? emojiLibrary.indexOf(focusedCategory) * 100\n//       : 0;\n//   }\n\n//   return { position, width };\n// };\n\nexport function EmojiPickerNavigation({\n  emojiLibrary,\n  focusedCategory,\n  i18n,\n  icons,\n  onClick,\n}: EmojiPickerNavigationProps) {\n  // KEEP: This is for the animated idicator bar under the icon - Opt in if needed\n  // const { position, width } = useMemo(\n  //   () => getBarProperty(emojiLibrary, focusedCategory),\n  //   [emojiLibrary, focusedCategory]\n  // );\n\n  return (\n    <TooltipProvider delayDuration={500}>\n      <nav\n        id=\"emoji-nav\"\n        className=\"mb-2.5 border-0 border-b border-solid border-b-border p-1.5\"\n      >\n        <div className=\"relative flex items-center justify-evenly\">\n          {emojiLibrary\n            .getGrid()\n            .sections()\n            .map(({ id }) => (\n              <Tooltip key={id}>\n                <TooltipTrigger asChild>\n                  <Button\n                    size=\"sm\"\n                    variant=\"ghost\"\n                    className={cn(\n                      'h-fit rounded-full fill-current p-1.5 text-muted-foreground hover:bg-muted hover:text-muted-foreground',\n                      id === focusedCategory &&\n                        'pointer-events-none bg-accent fill-current text-accent-foreground'\n                    )}\n                    onClick={() => {\n                      onClick(id);\n                    }}\n                    aria-label={i18n.categories[id]}\n                    type=\"button\"\n                  >\n                    <span className=\"inline-flex size-5 items-center justify-center\">\n                      {icons.categories[id].outline}\n                    </span>\n                  </Button>\n                </TooltipTrigger>\n                <TooltipContent side=\"bottom\">\n                  {i18n.categories[id]}\n                </TooltipContent>\n              </Tooltip>\n            ))}\n\n          {/* This is the animated indicator - Opt In if needed */}\n          {/* <div\n            className={cn(\n              'absolute -bottom-1.5 left-0 h-0.5 w-full rounded-t-lg bg-accent opacity-100 transition-transform duration-200'\n            )}\n            style={{\n              transform: `translateX(${position}%)`,\n              visibility: `${focusedCategory ? 'visible' : 'hidden'}`,\n              width: `${width}%`,\n            }}\n          /> */}\n        </div>\n      </nav>\n    </TooltipProvider>\n  );\n}\n",
       "path": "plate-ui/emoji-picker-navigation.tsx",
       "target": "components/plate-ui/emoji-picker-navigation.tsx",
       "type": "registry:ui"
diff --git a/apps/www/src/components/icons.tsx b/apps/www/src/components/icons.tsx
index 130c6bd685..4ca84a6d27 100644
--- a/apps/www/src/components/icons.tsx
+++ b/apps/www/src/components/icons.tsx
@@ -30,6 +30,7 @@ import {
   CornerUpLeft,
   DownloadCloud,
   DownloadIcon,
+  EraserIcon,
   ExternalLink,
   Eye,
   File,
@@ -418,6 +419,7 @@ export const Icons = {
   code: Code2,
   codeblock: FileCode,
   color: Baseline,
+  colorClear: EraserIcon,
   column: RectangleVertical,
   combine: Combine,
   comment: MessageSquare,
diff --git a/apps/www/src/registry/default/plate-ui/color-dropdown-menu-items.tsx b/apps/www/src/registry/default/plate-ui/color-dropdown-menu-items.tsx
index 03ccfbaf2f..13c14b07a8 100644
--- a/apps/www/src/registry/default/plate-ui/color-dropdown-menu-items.tsx
+++ b/apps/www/src/registry/default/plate-ui/color-dropdown-menu-items.tsx
@@ -7,8 +7,6 @@ import type { DropdownMenuItemProps } from '@radix-ui/react-dropdown-menu';
 import { cn } from '@udecode/cn';
 import { Check } from 'lucide-react';
 
-import type { TColor } from './color-dropdown-menu';
-
 import { buttonVariants } from './button';
 import { DropdownMenuItem } from './dropdown-menu';
 import {
@@ -18,6 +16,12 @@ import {
   TooltipTrigger,
 } from './tooltip';
 
+export type TColor = {
+  isBrightColor: boolean;
+  name: string;
+  value: string;
+};
+
 type ColorDropdownMenuItemProps = {
   isBrightColor: boolean;
   isSelected: boolean;
@@ -42,8 +46,8 @@ export function ColorDropdownMenuItem({
           isMenu: true,
           variant: 'outline',
         }),
-        'size-6 border border-solid border-muted p-0',
-        !isBrightColor && 'border-transparent text-white',
+        'flex size-6 items-center justify-center rounded-full border border-solid border-muted p-0 transition-all hover:scale-125',
+        !isBrightColor && 'border-transparent text-white hover:!text-white',
         className
       )}
       style={{ backgroundColor: value }}
@@ -53,14 +57,14 @@ export function ColorDropdownMenuItem({
       }}
       {...props}
     >
-      {isSelected ? <Check /> : null}
+      {isSelected ? <Check className="size-3" /> : null}
     </DropdownMenuItem>
   );
 
   return name ? (
     <Tooltip>
       <TooltipTrigger>{content}</TooltipTrigger>
-      <TooltipContent>{name}</TooltipContent>
+      <TooltipContent className="mb-1 capitalize">{name}</TooltipContent>
     </Tooltip>
   ) : (
     content
@@ -82,7 +86,10 @@ export function ColorDropdownMenuItems({
 }: ColorDropdownMenuItemsProps) {
   return (
     <div
-      className={cn('grid grid-cols-[repeat(10,1fr)] gap-1', className)}
+      className={cn(
+        'grid grid-cols-[repeat(10,1fr)] place-items-center gap-1',
+        className
+      )}
       {...props}
     >
       <TooltipProvider>
@@ -96,6 +103,7 @@ export function ColorDropdownMenuItems({
             updateColor={updateColor}
           />
         ))}
+        {props.children}
       </TooltipProvider>
     </div>
   );
diff --git a/apps/www/src/registry/default/plate-ui/color-dropdown-menu.tsx b/apps/www/src/registry/default/plate-ui/color-dropdown-menu.tsx
index 06bf2a72c6..924f77c2b9 100644
--- a/apps/www/src/registry/default/plate-ui/color-dropdown-menu.tsx
+++ b/apps/www/src/registry/default/plate-ui/color-dropdown-menu.tsx
@@ -1,7 +1,5 @@
 'use client';
 
-import React from 'react';
-
 import type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';
 
 import {
@@ -18,12 +16,6 @@ import {
 } from './dropdown-menu';
 import { ToolbarButton } from './toolbar';
 
-export type TColor = {
-  isBrightColor: boolean;
-  name: string;
-  value: string;
-};
-
 type ColorDropdownMenuProps = {
   nodeType: string;
   tooltip?: string;
diff --git a/apps/www/src/registry/default/plate-ui/color-picker.tsx b/apps/www/src/registry/default/plate-ui/color-picker.tsx
index 3cf9401ee5..1aef4f160f 100644
--- a/apps/www/src/registry/default/plate-ui/color-picker.tsx
+++ b/apps/www/src/registry/default/plate-ui/color-picker.tsx
@@ -4,13 +4,20 @@ import React from 'react';
 
 import { cn, withRef } from '@udecode/cn';
 
-import type { TColor } from './color-dropdown-menu';
+import { Icons } from '@/components/icons';
 
 import { buttonVariants } from './button';
-import { ColorDropdownMenuItems } from './color-dropdown-menu-items';
-import { ColorsCustom } from './colors-custom';
-import { DropdownMenuItem } from './dropdown-menu';
-import { Separator } from './separator';
+import {
+  type TColor,
+  ColorDropdownMenuItems,
+} from './color-dropdown-menu-items';
+import { ColorCustom } from './colors-custom';
+import {
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+} from './dropdown-menu';
 
 export const ColorPickerContent = withRef<
   'div',
@@ -37,36 +44,47 @@ export const ColorPickerContent = withRef<
     ref
   ) => {
     return (
-      <div
-        ref={ref}
-        className={cn('flex flex-col gap-4 p-4', className)}
-        {...props}
-      >
-        <ColorsCustom
-          color={color}
-          colors={colors}
-          customColors={customColors}
-          updateColor={updateColor}
-          updateCustomColor={updateCustomColor}
-        />
-
-        <Separator />
-
-        <ColorDropdownMenuItems
-          color={color}
-          colors={colors}
-          updateColor={updateColor}
-        />
+      <div ref={ref} className={cn('flex flex-col', className)} {...props}>
+        <DropdownMenuLabel>Color Picker</DropdownMenuLabel>
+        <DropdownMenuGroup>
+          <ColorCustom
+            color={color}
+            className="p-2"
+            colors={colors}
+            customColors={customColors}
+            updateColor={updateColor}
+            updateCustomColor={updateCustomColor}
+          />
+        </DropdownMenuGroup>
+        <DropdownMenuSeparator />
+        <DropdownMenuGroup>
+          <ColorDropdownMenuItems
+            color={color}
+            className="p-2"
+            colors={colors}
+            updateColor={updateColor}
+          />
+        </DropdownMenuGroup>
         {color && (
-          <DropdownMenuItem
-            className={buttonVariants({
-              isMenu: true,
-              variant: 'outline',
-            })}
-            onClick={clearColor}
-          >
-            Clear
-          </DropdownMenuItem>
+          <React.Fragment>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem
+                className={cn(
+                  buttonVariants({
+                    isMenu: false,
+                    size: 'sm',
+                    variant: 'ghost',
+                  }),
+                  'w-full justify-start'
+                )}
+                onClick={clearColor}
+              >
+                <Icons.colorClear className="mr-2" />
+                <span>Clear</span>
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+          </React.Fragment>
         )}
       </div>
     );
diff --git a/apps/www/src/registry/default/plate-ui/colors-custom.tsx b/apps/www/src/registry/default/plate-ui/colors-custom.tsx
index 2ebd5a3c2f..4ca1f7307b 100644
--- a/apps/www/src/registry/default/plate-ui/colors-custom.tsx
+++ b/apps/www/src/registry/default/plate-ui/colors-custom.tsx
@@ -1,34 +1,42 @@
 'use client';
 
-import React from 'react';
+import React, { type ComponentPropsWithoutRef } from 'react';
 
+import { cn } from '@udecode/cn';
 import {
   useColorsCustom,
   useColorsCustomState,
 } from '@udecode/plate-font/react';
 
-import type { TColor } from './color-dropdown-menu';
+import { Icons } from '@/components/icons';
 
 import { buttonVariants } from './button';
-import { ColorDropdownMenuItems } from './color-dropdown-menu-items';
+import {
+  type TColor,
+  ColorDropdownMenuItems,
+} from './color-dropdown-menu-items';
 import { ColorInput } from './color-input';
+
+// import { ColorInput } from './color-input';
 import { DropdownMenuItem } from './dropdown-menu';
 
-type ColorsCustomProps = {
+type ColorCustomProps = {
   colors: TColor[];
   customColors: TColor[];
   updateColor: (color: string) => void;
   updateCustomColor: (color: string) => void;
   color?: string;
-};
+} & ComponentPropsWithoutRef<'div'>;
 
-export function ColorsCustom({
+export function ColorCustom({
+  className,
   color,
   colors,
   customColors,
   updateColor,
   updateCustomColor,
-}: ColorsCustomProps) {
+  ...props
+}: ColorCustomProps) {
   const state = useColorsCustomState({
     color,
     colors,
@@ -38,24 +46,29 @@ export function ColorsCustom({
   const { inputProps, menuItemProps } = useColorsCustom(state);
 
   return (
-    <div className="flex flex-col gap-4">
-      <ColorInput {...inputProps}>
-        <DropdownMenuItem
-          className={buttonVariants({
-            isMenu: true,
-            variant: 'outline',
-          })}
-          {...menuItemProps}
-        >
-          CUSTOM
-        </DropdownMenuItem>
-      </ColorInput>
-
+    <div className={cn('relative flex flex-col gap-4', className)} {...props}>
       <ColorDropdownMenuItems
         color={color}
         colors={state.computedColors}
         updateColor={updateColor}
-      />
+      >
+        <ColorInput {...inputProps}>
+          <DropdownMenuItem
+            className={cn(
+              buttonVariants({
+                isMenu: true,
+                size: 'icon',
+                variant: 'outline',
+              }),
+              'absolute bottom-2 right-2 top-1.5 flex size-7 items-center justify-center rounded-full'
+            )}
+            {...menuItemProps}
+          >
+            <span className="sr-only">Custom</span>
+            <Icons.add />
+          </DropdownMenuItem>
+        </ColorInput>
+      </ColorDropdownMenuItems>
     </div>
   );
 }
diff --git a/apps/www/src/registry/default/plate-ui/emoji-picker-content.tsx b/apps/www/src/registry/default/plate-ui/emoji-picker-content.tsx
index 9598632bba..0f13a897c7 100644
--- a/apps/www/src/registry/default/plate-ui/emoji-picker-content.tsx
+++ b/apps/www/src/registry/default/plate-ui/emoji-picker-content.tsx
@@ -48,7 +48,7 @@ const Button = memo(
           className="absolute inset-0 rounded-full opacity-0 group-hover:opacity-100"
           aria-hidden="true"
         />
-        <span style={{ position: 'relative' }} data-emoji-set="native">
+        <span className="relative" data-emoji-set="native">
           {emoji.skins[0].native}
         </span>
       </button>
diff --git a/apps/www/src/registry/default/plate-ui/emoji-picker-navigation.tsx b/apps/www/src/registry/default/plate-ui/emoji-picker-navigation.tsx
index 3917524ddc..2549c8ca6e 100644
--- a/apps/www/src/registry/default/plate-ui/emoji-picker-navigation.tsx
+++ b/apps/www/src/registry/default/plate-ui/emoji-picker-navigation.tsx
@@ -1,12 +1,5 @@
-'use client';
-
-import { useMemo } from 'react';
-
 import type { EmojiCategoryList } from '@udecode/plate-emoji';
-import type {
-  IEmojiFloatingLibrary,
-  UseEmojiPickerType,
-} from '@udecode/plate-emoji/react';
+import type { UseEmojiPickerType } from '@udecode/plate-emoji/react';
 
 import { cn } from '@udecode/cn';
 
@@ -25,22 +18,23 @@ export type EmojiPickerNavigationProps = {
   'emojiLibrary' | 'focusedCategory' | 'i18n' | 'icons'
 >;
 
-const getBarProperty = (
-  emojiLibrary: IEmojiFloatingLibrary,
-  focusedCategory?: EmojiCategoryList
-) => {
-  let width = 0;
-  let position = 0;
+// KEEP: This is for the animated idicator bar under the icon - Opt in if needed
+// const getBarProperty = (
+//   emojiLibrary: IEmojiFloatingLibrary,
+//   focusedCategory?: EmojiCategoryList
+// ) => {
+//   let width = 0;
+//   let position = 0;
 
-  if (focusedCategory) {
-    width = 100 / emojiLibrary.getGrid().size;
-    position = focusedCategory
-      ? emojiLibrary.indexOf(focusedCategory) * 100
-      : 0;
-  }
+//   if (focusedCategory) {
+//     width = 100 / emojiLibrary.getGrid().size;
+//     position = focusedCategory
+//       ? emojiLibrary.indexOf(focusedCategory) * 100
+//       : 0;
+//   }
 
-  return { position, width };
-};
+//   return { position, width };
+// };
 
 export function EmojiPickerNavigation({
   emojiLibrary,
@@ -49,10 +43,11 @@ export function EmojiPickerNavigation({
   icons,
   onClick,
 }: EmojiPickerNavigationProps) {
-  const { position, width } = useMemo(
-    () => getBarProperty(emojiLibrary, focusedCategory),
-    [emojiLibrary, focusedCategory]
-  );
+  // KEEP: This is for the animated idicator bar under the icon - Opt in if needed
+  // const { position, width } = useMemo(
+  //   () => getBarProperty(emojiLibrary, focusedCategory),
+  //   [emojiLibrary, focusedCategory]
+  // );
 
   return (
     <TooltipProvider delayDuration={500}>
@@ -81,7 +76,7 @@ export function EmojiPickerNavigation({
                     aria-label={i18n.categories[id]}
                     type="button"
                   >
-                    <span className="size-5">
+                    <span className="inline-flex size-5 items-center justify-center">
                       {icons.categories[id].outline}
                     </span>
                   </Button>
@@ -91,7 +86,9 @@ export function EmojiPickerNavigation({
                 </TooltipContent>
               </Tooltip>
             ))}
-          <div
+
+          {/* This is the animated indicator - Opt In if needed */}
+          {/* <div
             className={cn(
               'absolute -bottom-1.5 left-0 h-0.5 w-full rounded-t-lg bg-accent opacity-100 transition-transform duration-200'
             )}
@@ -100,7 +97,7 @@ export function EmojiPickerNavigation({
               visibility: `${focusedCategory ? 'visible' : 'hidden'}`,
               width: `${width}%`,
             }}
-          />
+          /> */}
         </div>
       </nav>
     </TooltipProvider>