diff --git a/docs/content/components/form/datefield/datefield.mdx b/docs/content/components/form/datefield/datefield.mdx
index ceb5c0b751..eff140d79a 100644
--- a/docs/content/components/form/datefield/datefield.mdx
+++ b/docs/content/components/form/datefield/datefield.mdx
@@ -8,11 +8,17 @@ The `<DateField>` allows users to enter and edit date values using a keyboard. E
 
 The `<DateField>` segments are individually focusable and editable by the user, by typing or using the arrow keys to increment and decrement the value. This approach allows values to be formatted and parsed correctly regardless of the locale or date format, and offers an easy and error-free way to edit dates using the keyboard.
 
-## Import
+## Anatomy
 
-```tsx
-import { DateField } from '@marigold/components';
-```
+<Image
+  src="/datefield/datefield-anatomy.jpg"
+  alt="Anatomy of datefield"
+  width={800}
+  height={550}
+  className="mx-auto block"
+/>
+
+A date field consists of a label, and a group of segments representing each unit of a date and time (e.g. years, months, days). Each segment is individually focusable and editable by the user, by typing or using the arrow keys to increment and decrement the value. This approach allows values to be formatted and parsed correctly regardless of the locale or date format, and offers an easy and error-free way to edit dates using the keyboard.
 
 ## Appearance
 
diff --git a/docs/public/datefield/datefield-anatomy.jpg b/docs/public/datefield/datefield-anatomy.jpg
new file mode 100644
index 0000000000..5c026b7a99
Binary files /dev/null and b/docs/public/datefield/datefield-anatomy.jpg differ