diff --git a/concepts/05 UI Components/DateBox/01 Overview/00 Overview.md b/concepts/05 UI Components/DateBox/01 Overview/00 Overview.md
new file mode 100644
index 0000000000..8e50e5c7d8
--- /dev/null
+++ b/concepts/05 UI Components/DateBox/01 Overview/00 Overview.md	
@@ -0,0 +1,3 @@
+DateBox is a UI component that helps users enter or modify date and time values.
+
+In this overview, you can find a map of DateBox elements, information about key features, and what to explore next.
\ No newline at end of file
diff --git a/concepts/05 UI Components/DateBox/01 Overview/05 Elements.md b/concepts/05 UI Components/DateBox/01 Overview/05 Elements.md
new file mode 100644
index 0000000000..850a5284b1
--- /dev/null
+++ b/concepts/05 UI Components/DateBox/01 Overview/05 Elements.md	
@@ -0,0 +1,8 @@
+<img src="/images/DateBox/date-box-elements.png" alt="DateBox elements"/>
+
+1. [Date display format](/Documentation/ApiReference/UI_Components/dxDateBox/Configuration/#displayFormat)
+2. [Input buttons](/Documentation/ApiReference/UI_Components/dxDateBox/Configuration/buttons/)
+3. [Format and UI type](/Documentation/ApiReference/UI_Components/dxDateBox/Configuration/#type)
+4. [Today button](/Documentation/ApiReference/UI_Components/dxDateBox/Configuration/#todayButtonText)
+5. [Apply button](/Documentation/ApiReference/UI_Components/dxDateBox/Configuration/#applyButtonText)
+6. [Cancel button](/Documentation/ApiReference/UI_Components/dxDateBox/Configuration/#cancelButtonText)
\ No newline at end of file
diff --git a/concepts/05 UI Components/DateBox/01 Overview/10 Key Features.md b/concepts/05 UI Components/DateBox/01 Overview/10 Key Features.md
new file mode 100644
index 0000000000..a2318d0930
--- /dev/null
+++ b/concepts/05 UI Components/DateBox/01 Overview/10 Key Features.md	
@@ -0,0 +1,5 @@
+- **Customization**    
+Set the DateBox [type](/Documentation/ApiReference/UI_Components/dxDateBox/Configuration/#type) to date, time, or both. Define the [accepted date range](/Documentation/Guide/UI_Components/DateBox/Getting_Started_with_DateBox/#Set_the_Accepted_Date_Range) and specify the initial [value](/Documentation/ApiReference/UI_Components/dxDateBox/Configuration/#value). [Disable](/Documentation/ApiReference/UI_Components/dxDateBox/Configuration/#disabledDates) specific dates if needed. DateBox includes [3 value pickers](/Documentation/Guide/UI_Components/DateBox/Platform-Specific_Value_Pickers/) for different platforms.
+
+- **Formatting**    
+DateBox [formats](/Documentation/Guide/UI_Components/DateBox/Value_Formatting_and_Masked_Input/) its value according to the application's locale. Use [predefined or custom](/Documentation/Guide/Common/Value_Formatting/) formats as well.
\ No newline at end of file
diff --git a/concepts/05 UI Components/DateBox/01 Overview/15 Explore More.md b/concepts/05 UI Components/DateBox/01 Overview/15 Explore More.md
new file mode 100644
index 0000000000..8767b2c9ab
--- /dev/null
+++ b/concepts/05 UI Components/DateBox/01 Overview/15 Explore More.md	
@@ -0,0 +1,3 @@
+- [API](/api-reference/10%20UI%20Components/dxDateBox '/Documentation/ApiReference/UI_Components/dxDateBox/')
+
+- [Demos](https://js.devexpress.com/Demos/WidgetsGallery/Demo/DateBox/Overview/)
\ No newline at end of file
diff --git a/images/DateBox/date-box-elements.png b/images/DateBox/date-box-elements.png
new file mode 100644
index 0000000000..eee5d43d19
Binary files /dev/null and b/images/DateBox/date-box-elements.png differ