diff --git a/lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.html b/lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.html
index aa09c74d5e..d8346f3474 100644
--- a/lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.html
+++ b/lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.html
@@ -69,6 +69,7 @@
                 [attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate"
                 [attr.data-automation-id]="'datepickertoggle-' + property.key"
                 [for]="datetimePicker"
+                class="adf-dateitem-picker-toggle"
             />
 
             <mat-datetimepicker
diff --git a/lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.scss b/lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.scss
index ea6cd6af6e..7b723ade68 100644
--- a/lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.scss
+++ b/lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.scss
@@ -1,6 +1,36 @@
 @use '../../../styles/mat-selectors' as ms;
 
 .adf-card-view-dateitem {
+    .adf-dateitem-editable {
+        cursor: pointer;
+        width: 100%;
+
+        &-controls {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+
+            #{ms.$mat-icon} {
+                opacity: 0.5;
+
+                &:hover {
+                    opacity: 1;
+                }
+            }
+
+            mat-datetimepicker-toggle {
+                transform: scale(0.8);
+            }
+
+            .adf-datepicker-span-button {
+                flex: 1 0 auto;
+                font-size: 14px;
+                top: 10px;
+                position: relative;
+            }
+        }
+    }
+
     .adf-property-value {
         padding-top: 6px;
         padding-bottom: 6px;
@@ -14,6 +44,21 @@
             border-radius: 6px;
             border-bottom: inherit;
             margin-bottom: 18px;
+
+            &:not(.adf-property-readonly-value) {
+                margin-top: 35px;
+            }
+
+            .adf-date-reset-icon {
+                top: 10px;
+                position: relative;
+                padding: 0;
+            }
+
+            .adf-dateitem-picker-toggle {
+                top: 10px;
+                position: relative;
+            }
         }
 
         &.adf-property-readonly-value {
@@ -37,37 +82,4 @@
         border-bottom: 0;
         cursor: pointer;
     }
-
-    .adf-dateitem-editable {
-        cursor: pointer;
-        width: 100%;
-
-        /* stylelint-disable-next-line no-descending-specificity */
-        &-controls {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-
-            #{ms.$mat-icon} {
-                opacity: 0.5;
-
-                &:hover {
-                    opacity: 1;
-                }
-            }
-
-            mat-datetimepicker-toggle {
-                transform: scale(0.8);
-            }
-
-            .adf-datepicker-span-button {
-                flex: 1 0 auto;
-                font-size: 14px;
-            }
-
-            .adf-date-reset-icon {
-                position: relative;
-            }
-        }
-    }
 }
diff --git a/lib/core/src/lib/card-view/components/card-view/card-view.component.scss b/lib/core/src/lib/card-view/components/card-view/card-view.component.scss
index d3a14586cd..e9951bf225 100644
--- a/lib/core/src/lib/card-view/components/card-view/card-view.component.scss
+++ b/lib/core/src/lib/card-view/components/card-view/card-view.component.scss
@@ -9,7 +9,8 @@
         color: var(--adf-metadata-property-panel-text-color);
         display: flex;
         line-height: 20px;
-     
+        margin-bottom: 4px;
+
         &.adf-property-readonly-value {
             color: var(--adf-metadata-property-panel-label-color);
         }