diff --git a/src/common/components/mock-components/front-components/datepickerinput-shape.tsx b/src/common/components/mock-components/front-components/datepickerinput-shape.tsx
index 360bc748..7ca6e461 100644
--- a/src/common/components/mock-components/front-components/datepickerinput-shape.tsx
+++ b/src/common/components/mock-components/front-components/datepickerinput-shape.tsx
@@ -11,12 +11,12 @@ import calendarIconSrc from '/icons/calendar.svg';
 import disabledCalendarIconSrc from '/icons/calendar-disabled.svg';
 
 const datepickerInputShapeRestrictions: ShapeSizeRestrictions = {
-  minWidth: 100,
-  minHeight: 30,
+  minWidth: 38,
+  minHeight: 38,
   maxWidth: -1,
-  maxHeight: 50,
-  defaultWidth: 180,
-  defaultHeight: 50,
+  maxHeight: 38,
+  defaultWidth: BASIC_SHAPE.DEFAULT_TEXT_WIDTH,
+  defaultHeight: BASIC_SHAPE.DEFAULT_TEXT_HEIGHT,
 };
 
 const shapeType: ShapeType = 'datepickerinput';
@@ -113,7 +113,9 @@ export const DatepickerInputShape = forwardRef<any, ShapeProps>(
           x={10}
           y={(restrictedHeight - fontSize) / 2 + 2}
           width={availableWidth}
+          fontFamily={BASIC_SHAPE.DEFAULT_FONT_FAMILY}
           fontSize={BASIC_SHAPE.DEFAULT_FONT_SIZE}
+          lineHeight={BASIC_SHAPE.DEFAULT_LINE_HEIGHT}
           align="left"
           ellipsis={true}
           wrap="none"
diff --git a/src/pods/canvas/model/transformer.model.ts b/src/pods/canvas/model/transformer.model.ts
index e8ca8352..68facde9 100644
--- a/src/pods/canvas/model/transformer.model.ts
+++ b/src/pods/canvas/model/transformer.model.ts
@@ -46,6 +46,7 @@ export const generateTypeOfTransformer = (shapeType: ShapeType): string[] => {
     case 'label':
     case 'input':
     case 'combobox':
+    case 'datepickerinput':
     case 'horizontalLine':
     case 'listbox':
     case 'checkbox':