diff --git a/src/prefabs/datePicker.js b/src/prefabs/datePicker.js
new file mode 100644
index 000000000..bea64cd64
--- /dev/null
+++ b/src/prefabs/datePicker.js
@@ -0,0 +1,341 @@
+(() => ({
+  name: 'DatePicker',
+  icon: 'DatePickerIcon',
+  category: 'FORM',
+  structure: [
+    {
+      name: 'DateTimePicker',
+      options: [
+        {
+          value: '',
+          label: 'Property',
+          key: 'property',
+          type: 'PROPERTY',
+        },
+        {
+          value: ['Label'],
+          label: 'Label',
+          key: 'label',
+          type: 'VARIABLE',
+          configuration: {
+            condition: {
+              type: 'SHOW',
+              option: 'property',
+              comparator: 'EQ',
+              value: '',
+            },
+          },
+        },
+        {
+          value: [],
+          label: 'Label',
+          key: 'propertyLabelOverride',
+          type: 'VARIABLE',
+          configuration: {
+            placeholder: 'Label of property',
+            condition: {
+              type: 'HIDE',
+              option: 'property',
+              comparator: 'EQ',
+              value: '',
+            },
+          },
+        },
+        {
+          label: 'Type',
+          key: 'type',
+          value: 'date',
+          type: 'CUSTOM',
+          configuration: {
+            condition: {
+              type: 'SHOW',
+              option: 'label',
+              comparator: 'EQ',
+              value: false,
+            },
+          },
+        },
+        {
+          type: 'TOGGLE',
+          label: 'Disable Toolbar',
+          key: 'disableToolbar',
+          value: false,
+        },
+        {
+          value: [],
+          label: 'Value',
+          key: 'defaultValue',
+          type: 'VARIABLE',
+        },
+        {
+          value: 'MM/dd/yyyy',
+          label: 'Format',
+          key: 'dateFormat',
+          type: 'TEXT',
+        },
+        {
+          value: '',
+          label: 'Input',
+          key: 'actionInputId',
+          type: 'ACTION_INPUT',
+        },
+        {
+          value: false,
+          label: 'Required',
+          key: 'required',
+          type: 'TOGGLE',
+        },
+        {
+          value: false,
+          label: 'Error',
+          key: 'error',
+          type: 'TOGGLE',
+        },
+        {
+          type: 'TOGGLE',
+          label: 'Disabled',
+          key: 'disabled',
+          value: false,
+        },
+        {
+          value: [],
+          label: 'Placeholder',
+          key: 'placeholder',
+          type: 'VARIABLE',
+        },
+        {
+          value: [],
+          label: 'Helper text',
+          key: 'helperText',
+          type: 'VARIABLE',
+        },
+        {
+          label: 'Variant',
+          key: 'variant',
+          value: 'inline',
+          type: 'CUSTOM',
+          configuration: {
+            as: 'BUTTONGROUP',
+            dataType: 'string',
+            allowedInput: [
+              { name: 'Dialog', value: 'dialog' },
+              { name: 'Inline', value: 'inline' },
+              { name: 'Static', value: 'static' },
+            ],
+          },
+        },
+        {
+          label: 'Input Variant',
+          key: 'inputvariant',
+          value: 'outlined',
+          type: 'CUSTOM',
+          configuration: {
+            as: 'BUTTONGROUP',
+            dataType: 'string',
+            allowedInput: [
+              { name: 'Standard', value: 'standard' },
+              { name: 'Outlined', value: 'outlined' },
+              { name: 'Filled', value: 'filled' },
+            ],
+          },
+        },
+        {
+          type: 'TOGGLE',
+          label: 'Full width',
+          key: 'fullWidth',
+          value: true,
+        },
+        {
+          label: 'Size',
+          key: 'size',
+          value: 'medium',
+          type: 'CUSTOM',
+          configuration: {
+            as: 'BUTTONGROUP',
+            dataType: 'string',
+            allowedInput: [
+              { name: 'Medium', value: 'medium' },
+              { name: 'Small', value: 'small' },
+            ],
+          },
+        },
+        {
+          label: 'Margin',
+          key: 'margin',
+          value: 'normal',
+          type: 'CUSTOM',
+          configuration: {
+            as: 'BUTTONGROUP',
+            dataType: 'string',
+            allowedInput: [
+              { name: 'None', value: 'none' },
+              { name: 'Dense', value: 'dense' },
+              { name: 'Normal', value: 'normal' },
+            ],
+          },
+        },
+        {
+          value: false,
+          label: 'Styles',
+          key: 'styles',
+          type: 'TOGGLE',
+        },
+        {
+          type: 'COLOR',
+          label: 'Background color',
+          key: 'backgroundColor',
+          value: 'White',
+          configuration: {
+            condition: {
+              type: 'SHOW',
+              option: 'styles',
+              comparator: 'EQ',
+              value: true,
+            },
+          },
+        },
+        {
+          type: 'COLOR',
+          label: 'Background color popup',
+          key: 'backgroundColorPopup',
+          value: 'Primary',
+          configuration: {
+            condition: {
+              type: 'SHOW',
+              option: 'styles',
+              comparator: 'EQ',
+              value: true,
+            },
+          },
+        },
+        {
+          type: 'COLOR',
+          label: 'Border color',
+          key: 'borderColor',
+          value: 'Accent1',
+          configuration: {
+            condition: {
+              type: 'SHOW',
+              option: 'styles',
+              comparator: 'EQ',
+              value: true,
+            },
+          },
+        },
+        {
+          type: 'COLOR',
+          label: 'Border color (hover)',
+          key: 'borderHoverColor',
+          value: 'Black',
+          configuration: {
+            condition: {
+              type: 'SHOW',
+              option: 'styles',
+              comparator: 'EQ',
+              value: true,
+            },
+          },
+        },
+        {
+          type: 'COLOR',
+          label: 'Border color (focus)',
+          key: 'borderFocusColor',
+          value: 'Primary',
+          configuration: {
+            condition: {
+              type: 'SHOW',
+              option: 'styles',
+              comparator: 'EQ',
+              value: true,
+            },
+          },
+        },
+        {
+          value: false,
+          label: 'Hide label',
+          key: 'hideLabel',
+          type: 'TOGGLE',
+          configuration: {
+            condition: {
+              type: 'SHOW',
+              option: 'styles',
+              comparator: 'EQ',
+              value: true,
+            },
+          },
+        },
+        {
+          type: 'COLOR',
+          label: 'Label color',
+          key: 'labelColor',
+          value: 'Accent3',
+          configuration: {
+            condition: {
+              type: 'SHOW',
+              option: 'styles',
+              comparator: 'EQ',
+              value: true,
+            },
+          },
+        },
+        {
+          type: 'COLOR',
+          label: 'Text color',
+          key: 'textColor',
+          value: 'Black',
+          configuration: {
+            condition: {
+              type: 'SHOW',
+              option: 'styles',
+              comparator: 'EQ',
+              value: true,
+            },
+          },
+        },
+        {
+          type: 'COLOR',
+          label: 'Placeholder color',
+          key: 'placeholderColor',
+          value: 'Light',
+          configuration: {
+            condition: {
+              type: 'SHOW',
+              option: 'styles',
+              comparator: 'EQ',
+              value: true,
+            },
+          },
+        },
+        {
+          type: 'COLOR',
+          label: 'Helper color',
+          key: 'helperColor',
+          value: 'Accent2',
+          configuration: {
+            condition: {
+              type: 'SHOW',
+              option: 'styles',
+              comparator: 'EQ',
+              value: true,
+            },
+          },
+        },
+        {
+          type: 'COLOR',
+          label: 'Error color',
+          key: 'errorColor',
+          value: 'Danger',
+          configuration: {
+            condition: {
+              type: 'SHOW',
+              option: 'styles',
+              comparator: 'EQ',
+              value: true,
+            },
+          },
+        },
+      ],
+      descendants: [],
+    },
+  ],
+}))();
diff --git a/src/prefabs/dateTimePicker.js b/src/prefabs/dateTimePicker.js
index 286673c96..70e795518 100644
--- a/src/prefabs/dateTimePicker.js
+++ b/src/prefabs/dateTimePicker.js
@@ -44,16 +44,15 @@
         {
           label: 'Type',
           key: 'type',
-          value: 'date',
+          value: 'datetime',
           type: 'CUSTOM',
           configuration: {
-            as: 'BUTTONGROUP',
-            dataType: 'string',
-            allowedInput: [
-              { name: 'Date', value: 'date' },
-              { name: 'Time', value: 'time' },
-              { name: 'DateTime', value: 'datetime' },
-            ],
+            condition: {
+              type: 'SHOW',
+              option: 'label',
+              comparator: 'EQ',
+              value: false,
+            },
           },
         },
         {
@@ -68,36 +67,6 @@
           key: 'defaultValue',
           type: 'VARIABLE',
         },
-        {
-          value: 'MM/dd/yyyy',
-          label: 'Format',
-          key: 'dateFormat',
-          type: 'TEXT',
-          configuration: {
-            placeholder: 'MM/dd/yyyy',
-            condition: {
-              type: 'SHOW',
-              option: 'type',
-              comparator: 'EQ',
-              value: 'date',
-            },
-          },
-        },
-        {
-          value: 'HH:mm:ss',
-          label: 'Format',
-          key: 'timeFormat',
-          type: 'TEXT',
-          configuration: {
-            placeholder: 'HH:mm:ss',
-            condition: {
-              type: 'SHOW',
-              option: 'type',
-              comparator: 'EQ',
-              value: 'time',
-            },
-          },
-        },
         {
           value: 'MM/dd/yyyy HH:mm:ss',
           label: 'Format',
diff --git a/src/prefabs/timePicker.js b/src/prefabs/timePicker.js
new file mode 100644
index 000000000..c13672e06
--- /dev/null
+++ b/src/prefabs/timePicker.js
@@ -0,0 +1,341 @@
+(() => ({
+  name: 'TimePicker',
+  icon: 'TimePickerIcon',
+  category: 'FORM',
+  structure: [
+    {
+      name: 'DateTimePicker',
+      options: [
+        {
+          value: '',
+          label: 'Property',
+          key: 'property',
+          type: 'PROPERTY',
+        },
+        {
+          value: ['Label'],
+          label: 'Label',
+          key: 'label',
+          type: 'VARIABLE',
+          configuration: {
+            condition: {
+              type: 'SHOW',
+              option: 'property',
+              comparator: 'EQ',
+              value: '',
+            },
+          },
+        },
+        {
+          value: [],
+          label: 'Label',
+          key: 'propertyLabelOverride',
+          type: 'VARIABLE',
+          configuration: {
+            placeholder: 'Label of property',
+            condition: {
+              type: 'HIDE',
+              option: 'property',
+              comparator: 'EQ',
+              value: '',
+            },
+          },
+        },
+        {
+          label: 'Type',
+          key: 'type',
+          value: 'time',
+          type: 'CUSTOM',
+          configuration: {
+            condition: {
+              type: 'SHOW',
+              option: 'label',
+              comparator: 'EQ',
+              value: false,
+            },
+          },
+        },
+        {
+          type: 'TOGGLE',
+          label: 'Disable Toolbar',
+          key: 'disableToolbar',
+          value: false,
+        },
+        {
+          value: [],
+          label: 'Value',
+          key: 'defaultValue',
+          type: 'VARIABLE',
+        },
+        {
+          value: 'HH:mm:ss',
+          label: 'Format',
+          key: 'timeFormat',
+          type: 'TEXT',
+        },
+        {
+          value: '',
+          label: 'Input',
+          key: 'actionInputId',
+          type: 'ACTION_INPUT',
+        },
+        {
+          value: false,
+          label: 'Required',
+          key: 'required',
+          type: 'TOGGLE',
+        },
+        {
+          value: false,
+          label: 'Error',
+          key: 'error',
+          type: 'TOGGLE',
+        },
+        {
+          type: 'TOGGLE',
+          label: 'Disabled',
+          key: 'disabled',
+          value: false,
+        },
+        {
+          value: [],
+          label: 'Placeholder',
+          key: 'placeholder',
+          type: 'VARIABLE',
+        },
+        {
+          value: [],
+          label: 'Helper text',
+          key: 'helperText',
+          type: 'VARIABLE',
+        },
+        {
+          label: 'Variant',
+          key: 'variant',
+          value: 'inline',
+          type: 'CUSTOM',
+          configuration: {
+            as: 'BUTTONGROUP',
+            dataType: 'string',
+            allowedInput: [
+              { name: 'Dialog', value: 'dialog' },
+              { name: 'Inline', value: 'inline' },
+              { name: 'Static', value: 'static' },
+            ],
+          },
+        },
+        {
+          label: 'Input Variant',
+          key: 'inputvariant',
+          value: 'outlined',
+          type: 'CUSTOM',
+          configuration: {
+            as: 'BUTTONGROUP',
+            dataType: 'string',
+            allowedInput: [
+              { name: 'Standard', value: 'standard' },
+              { name: 'Outlined', value: 'outlined' },
+              { name: 'Filled', value: 'filled' },
+            ],
+          },
+        },
+        {
+          type: 'TOGGLE',
+          label: 'Full width',
+          key: 'fullWidth',
+          value: true,
+        },
+        {
+          label: 'Size',
+          key: 'size',
+          value: 'medium',
+          type: 'CUSTOM',
+          configuration: {
+            as: 'BUTTONGROUP',
+            dataType: 'string',
+            allowedInput: [
+              { name: 'Medium', value: 'medium' },
+              { name: 'Small', value: 'small' },
+            ],
+          },
+        },
+        {
+          label: 'Margin',
+          key: 'margin',
+          value: 'normal',
+          type: 'CUSTOM',
+          configuration: {
+            as: 'BUTTONGROUP',
+            dataType: 'string',
+            allowedInput: [
+              { name: 'None', value: 'none' },
+              { name: 'Dense', value: 'dense' },
+              { name: 'Normal', value: 'normal' },
+            ],
+          },
+        },
+        {
+          value: false,
+          label: 'Styles',
+          key: 'styles',
+          type: 'TOGGLE',
+        },
+        {
+          type: 'COLOR',
+          label: 'Background color',
+          key: 'backgroundColor',
+          value: 'White',
+          configuration: {
+            condition: {
+              type: 'SHOW',
+              option: 'styles',
+              comparator: 'EQ',
+              value: true,
+            },
+          },
+        },
+        {
+          type: 'COLOR',
+          label: 'Background color popup',
+          key: 'backgroundColorPopup',
+          value: 'Primary',
+          configuration: {
+            condition: {
+              type: 'SHOW',
+              option: 'styles',
+              comparator: 'EQ',
+              value: true,
+            },
+          },
+        },
+        {
+          type: 'COLOR',
+          label: 'Border color',
+          key: 'borderColor',
+          value: 'Accent1',
+          configuration: {
+            condition: {
+              type: 'SHOW',
+              option: 'styles',
+              comparator: 'EQ',
+              value: true,
+            },
+          },
+        },
+        {
+          type: 'COLOR',
+          label: 'Border color (hover)',
+          key: 'borderHoverColor',
+          value: 'Black',
+          configuration: {
+            condition: {
+              type: 'SHOW',
+              option: 'styles',
+              comparator: 'EQ',
+              value: true,
+            },
+          },
+        },
+        {
+          type: 'COLOR',
+          label: 'Border color (focus)',
+          key: 'borderFocusColor',
+          value: 'Primary',
+          configuration: {
+            condition: {
+              type: 'SHOW',
+              option: 'styles',
+              comparator: 'EQ',
+              value: true,
+            },
+          },
+        },
+        {
+          value: false,
+          label: 'Hide label',
+          key: 'hideLabel',
+          type: 'TOGGLE',
+          configuration: {
+            condition: {
+              type: 'SHOW',
+              option: 'styles',
+              comparator: 'EQ',
+              value: true,
+            },
+          },
+        },
+        {
+          type: 'COLOR',
+          label: 'Label color',
+          key: 'labelColor',
+          value: 'Accent3',
+          configuration: {
+            condition: {
+              type: 'SHOW',
+              option: 'styles',
+              comparator: 'EQ',
+              value: true,
+            },
+          },
+        },
+        {
+          type: 'COLOR',
+          label: 'Text color',
+          key: 'textColor',
+          value: 'Black',
+          configuration: {
+            condition: {
+              type: 'SHOW',
+              option: 'styles',
+              comparator: 'EQ',
+              value: true,
+            },
+          },
+        },
+        {
+          type: 'COLOR',
+          label: 'Placeholder color',
+          key: 'placeholderColor',
+          value: 'Light',
+          configuration: {
+            condition: {
+              type: 'SHOW',
+              option: 'styles',
+              comparator: 'EQ',
+              value: true,
+            },
+          },
+        },
+        {
+          type: 'COLOR',
+          label: 'Helper color',
+          key: 'helperColor',
+          value: 'Accent2',
+          configuration: {
+            condition: {
+              type: 'SHOW',
+              option: 'styles',
+              comparator: 'EQ',
+              value: true,
+            },
+          },
+        },
+        {
+          type: 'COLOR',
+          label: 'Error color',
+          key: 'errorColor',
+          value: 'Danger',
+          configuration: {
+            condition: {
+              type: 'SHOW',
+              option: 'styles',
+              comparator: 'EQ',
+              value: true,
+            },
+          },
+        },
+      ],
+      descendants: [],
+    },
+  ],
+}))();