diff --git a/packages/components/dropdown/src/Dropdown.doc.mdx b/packages/components/dropdown/src/Dropdown.doc.mdx
index 684a39839..859b58d3d 100644
--- a/packages/components/dropdown/src/Dropdown.doc.mdx
+++ b/packages/components/dropdown/src/Dropdown.doc.mdx
@@ -41,7 +41,7 @@ import { Dropdown } from '@spark-ui/dropdown'
     },
     'Dropdown.LeadingIcon': {
       of: Dropdown.LeadingIcon,
-      description: "Prepend a decorative icon inside the input (to the left).",
+      description: 'Prepend a decorative icon inside the input (to the left).',
     },
     'Dropdown.Popover': {
       of: Dropdown.Popover,
@@ -62,6 +62,11 @@ import { Dropdown } from '@spark-ui/dropdown'
       description:
         'The textual part of the item. It should only contain the text you want to see in the trigger when that item is selected. It should not be styled to ensure correct positioning.',
     },
+    'Dropdown.ItemIndicator': {
+      of: Dropdown.ItemIndicator,
+      description:
+        'Renders when the item is selected. You can style this element directly, or you can use it as a wrapper to put an icon into, or both.',
+    },
     'Dropdown.Divider': {
       of: Dropdown.Divider,
       description: 'Used to visually separate items in the select.',
@@ -101,7 +106,7 @@ TODO
 
 ### Item indicator
 
-TODO
+<Canvas of={stories.ItemIndicator} />
 
 ### Trigger leading icon
 
diff --git a/packages/components/dropdown/src/Dropdown.stories.tsx b/packages/components/dropdown/src/Dropdown.stories.tsx
index 5f3c0263c..b9c5eaef2 100644
--- a/packages/components/dropdown/src/Dropdown.stories.tsx
+++ b/packages/components/dropdown/src/Dropdown.stories.tsx
@@ -198,6 +198,51 @@ export const Grouped: StoryFn = _args => {
   )
 }
 
+export const ItemIndicator: StoryFn = _args => {
+  return (
+    <div className="w-sz-480 pb-[300px]">
+      <Dropdown>
+        <Dropdown.Trigger aria-label="Book">
+          <Dropdown.Value placeholder="Pick a book" />
+        </Dropdown.Trigger>
+
+        <Dropdown.Popover>
+          <Dropdown.Items>
+            <Dropdown.Item value="book-1" className="flex items-center gap-md">
+              <Dropdown.ItemIndicator />
+              <Dropdown.ItemText>To Kill a Mockingbird</Dropdown.ItemText>
+              <Tag>New</Tag>
+            </Dropdown.Item>
+            <Dropdown.Item value="book-2" className="flex items-center gap-md">
+              <Dropdown.ItemIndicator />
+              <Dropdown.ItemText>War and Peace</Dropdown.ItemText>
+              <Tag>New</Tag>
+            </Dropdown.Item>
+            <Dropdown.Item value="book-3" className="flex items-center gap-md">
+              <Dropdown.ItemIndicator />
+              <Dropdown.ItemText>The Idiot</Dropdown.ItemText>
+              <Tag>New</Tag>
+            </Dropdown.Item>
+            <Dropdown.Item value="book-4" className="flex items-center gap-md">
+              <Dropdown.ItemText>A Picture of Dorian Gray</Dropdown.ItemText>
+              <Tag>New</Tag>
+              <Dropdown.ItemIndicator />
+            </Dropdown.Item>
+            <Dropdown.Item value="book-5" className="flex items-center gap-md">
+              <Dropdown.ItemText>1984</Dropdown.ItemText>
+              <Tag>New</Tag>
+            </Dropdown.Item>
+            <Dropdown.Item value="book-6" className="flex items-center gap-md">
+              <Dropdown.ItemText>Pride and Prejudice</Dropdown.ItemText>
+              <Tag>New</Tag>
+            </Dropdown.Item>
+          </Dropdown.Items>
+        </Dropdown.Popover>
+      </Dropdown>
+    </div>
+  )
+}
+
 export const FormFieldLabel: StoryFn = _args => {
   return (
     <div className="pb-[300px]">
diff --git a/packages/components/dropdown/src/Dropdown.test.tsx b/packages/components/dropdown/src/Dropdown.test.tsx
index f4ca1c806..ecdff62a0 100644
--- a/packages/components/dropdown/src/Dropdown.test.tsx
+++ b/packages/components/dropdown/src/Dropdown.test.tsx
@@ -302,6 +302,36 @@ describe('Dropdown', () => {
       expect(getItem('1984')).toHaveAttribute('aria-selected', 'true')
     })
 
+    it('should render default selected option with proper indicator when including it', () => {
+      // Given a dropdown with a default selected value
+      render(
+        <Dropdown defaultValue="book-2">
+          <Dropdown.Trigger aria-label="Book">
+            <Dropdown.Value placeholder="Pick a book" />
+          </Dropdown.Trigger>
+          <Dropdown.Popover>
+            <Dropdown.Items>
+              <Dropdown.Item value="book-1">
+                <Dropdown.ItemIndicator label={'selected'} />
+                <Dropdown.ItemText>War and Peace</Dropdown.ItemText>
+              </Dropdown.Item>
+              <Dropdown.Item value="book-2">
+                <Dropdown.ItemIndicator label={'selected'} />
+                <Dropdown.ItemText>1984</Dropdown.ItemText>
+              </Dropdown.Item>
+              <Dropdown.Item value="book-3">
+                <Dropdown.ItemIndicator label={'selected'} />
+                <Dropdown.ItemText>Pride and Prejudice</Dropdown.ItemText>
+              </Dropdown.Item>
+            </Dropdown.Items>
+          </Dropdown.Popover>
+        </Dropdown>
+      )
+
+      // Then the corresponding item is selected
+      expect(screen.getByLabelText('selected')).toBeVisible()
+    })
+
     it('should control value', async () => {
       const user = userEvent.setup()
 
diff --git a/packages/components/dropdown/src/DropdownItem.tsx b/packages/components/dropdown/src/DropdownItem.tsx
index e0e2f78a6..d576c824a 100644
--- a/packages/components/dropdown/src/DropdownItem.tsx
+++ b/packages/components/dropdown/src/DropdownItem.tsx
@@ -3,8 +3,6 @@ import { ReactNode } from 'react'
 
 import { useDropdownContext } from './DropdownContext'
 import { DropdownItemProvider, useDropdownItemContext } from './DropdownItemContext'
-import { DropdownItem } from './types'
-import { getIndexByKey, getItemText } from './utils'
 
 export interface ItemProps {
   disabled?: boolean
@@ -14,25 +12,19 @@ export interface ItemProps {
 }
 
 export const Item = ({ children, ...props }: ItemProps) => {
+  const { value, disabled } = props
+
   return (
-    <DropdownItemProvider>
+    <DropdownItemProvider value={value} disabled={disabled}>
       <ItemContent {...props}>{children}</ItemContent>
     </DropdownItemProvider>
   )
 }
 
 const ItemContent = ({ className, disabled = false, value, children }: ItemProps) => {
-  const { multiple, computedItems, selectedItem, selectedItems, getItemProps, highlightedItem } =
-    useDropdownContext()
-
-  const { textId } = useDropdownItemContext()
-
-  const index = getIndexByKey(computedItems, value)
-  const itemData: DropdownItem = { disabled, value, text: getItemText(children) }
+  const { getItemProps, highlightedItem } = useDropdownContext()
 
-  const isSelected = multiple
-    ? selectedItems.some(selectedItem => selectedItem.value === value)
-    : selectedItem?.value === value
+  const { textId, index, itemData, isSelected } = useDropdownItemContext()
 
   return (
     <li
diff --git a/packages/components/dropdown/src/DropdownItemContext.tsx b/packages/components/dropdown/src/DropdownItemContext.tsx
index 8ca45ccab..53189163f 100644
--- a/packages/components/dropdown/src/DropdownItemContext.tsx
+++ b/packages/components/dropdown/src/DropdownItemContext.tsx
@@ -1,19 +1,42 @@
 import React, { createContext, type PropsWithChildren, useContext, useState } from 'react'
 
+import { useDropdownContext } from './DropdownContext'
+import { DropdownItem } from './types'
+import { getIndexByKey, getItemText } from './utils'
+
 type ItemTextId = string | undefined
 
 interface DropdownItemContextState {
   textId: ItemTextId
   setTextId: React.Dispatch<React.SetStateAction<ItemTextId>>
+  isSelected: boolean
+  itemData: DropdownItem
+  index: number
+  disabled: boolean
 }
 
 const DropdownItemContext = createContext<DropdownItemContextState | null>(null)
 
-export const DropdownItemProvider = ({ children }: PropsWithChildren) => {
+export const DropdownItemProvider = ({
+  value,
+  disabled = false,
+  children,
+}: PropsWithChildren<{ value: string; disabled?: boolean }>) => {
+  const { multiple, computedItems, selectedItem, selectedItems } = useDropdownContext()
+
   const [textId, setTextId] = useState<ItemTextId>(undefined)
 
+  const index = getIndexByKey(computedItems, value)
+  const itemData: DropdownItem = { disabled, value, text: getItemText(children) }
+
+  const isSelected = multiple
+    ? selectedItems.some(selectedItem => selectedItem.value === value)
+    : selectedItem?.value === value
+
   return (
-    <DropdownItemContext.Provider value={{ textId, setTextId }}>
+    <DropdownItemContext.Provider
+      value={{ textId, setTextId, isSelected, itemData, index, disabled }}
+    >
       {children}
     </DropdownItemContext.Provider>
   )
diff --git a/packages/components/dropdown/src/DropdownItemIndicator.tsx b/packages/components/dropdown/src/DropdownItemIndicator.tsx
new file mode 100644
index 000000000..44d0cb507
--- /dev/null
+++ b/packages/components/dropdown/src/DropdownItemIndicator.tsx
@@ -0,0 +1,28 @@
+import { Check } from '@spark-ui/icons/dist/icons/Check'
+import { cx } from 'class-variance-authority'
+import { ReactNode } from 'react'
+
+import { useDropdownContext } from './DropdownContext'
+import { useDropdownItemContext } from './DropdownItemContext'
+
+export interface ItemIndicatorProps {
+  children?: ReactNode
+  className?: string
+  label?: string
+}
+
+export const ItemIndicator = ({ className, children, label }: ItemIndicatorProps) => {
+  const { disabled, isSelected } = useDropdownItemContext()
+  const { multiple } = useDropdownContext()
+  const childElement =
+    children || (multiple ? <Check aria-label={label} /> : <span aria-label={label}>✓</span>)
+
+  return (
+    <span className={cx('flex min-h-sz-16 min-w-sz-16', disabled && 'opacity-dim-3', className)}>
+      {isSelected && childElement}
+    </span>
+  )
+}
+
+ItemIndicator.id = 'ItemIndicator'
+ItemIndicator.displayName = 'Dropdown.ItemIndicator'
diff --git a/packages/components/dropdown/src/index.ts b/packages/components/dropdown/src/index.ts
index 4f071f298..b569a6d28 100644
--- a/packages/components/dropdown/src/index.ts
+++ b/packages/components/dropdown/src/index.ts
@@ -5,6 +5,7 @@ import { DropdownProvider, useDropdownContext } from './DropdownContext'
 import { Divider } from './DropdownDivider'
 import { Group } from './DropdownGroup'
 import { Item } from './DropdownItem'
+import { ItemIndicator } from './DropdownItemIndicator'
 import { Items } from './DropdownItems'
 import { ItemText } from './DropdownItemText'
 import { Label } from './DropdownLabel'
@@ -20,6 +21,7 @@ export const Dropdown: FC<DropdownProps> & {
   Item: typeof Item
   Items: typeof Items
   ItemText: typeof ItemText
+  ItemIndicator: typeof ItemIndicator
   Label: typeof Label
   Popover: typeof Popover
   Divider: typeof Divider
@@ -31,6 +33,7 @@ export const Dropdown: FC<DropdownProps> & {
   Item,
   Items,
   ItemText,
+  ItemIndicator,
   Label,
   Popover,
   Divider,
@@ -41,9 +44,10 @@ export const Dropdown: FC<DropdownProps> & {
 
 Dropdown.displayName = 'Dropdown'
 Group.displayName = 'Dropdown.Group'
-Item.displayName = 'Dropdown.Item'
 Items.displayName = 'Dropdown.Items'
+Item.displayName = 'Dropdown.Item'
 ItemText.displayName = 'Dropdown.ItemText'
+ItemIndicator.displayName = 'Dropdown.ItemIndicator'
 Label.displayName = 'Dropdown.Label'
 Popover.displayName = 'Dropdown.Popover'
 Divider.displayName = 'Dropdown.Divider'