diff --git a/components/lib/datepicker/BaseDatePicker.vue b/components/lib/datepicker/BaseDatePicker.vue
index 4c57a0ad3..c09043653 100644
--- a/components/lib/datepicker/BaseDatePicker.vue
+++ b/components/lib/datepicker/BaseDatePicker.vue
@@ -231,13 +231,13 @@ export default {
         navigatorButtonProps: {
             type: Object,
             default() {
-                return { severity: 'secondary', text: true };
+                return { severity: 'secondary', text: true, rounded: true };
             }
         },
         timepickerButtonProps: {
             type: Object,
             default() {
-                return { severity: 'secondary', text: true };
+                return { severity: 'secondary', text: true, rounded: true };
             }
         },
         ariaLabelledby: {
diff --git a/components/lib/datepicker/style/DatePickerStyle.js b/components/lib/datepicker/style/DatePickerStyle.js
index ef50f1702..b1bc50fbe 100644
--- a/components/lib/datepicker/style/DatePickerStyle.js
+++ b/components/lib/datepicker/style/DatePickerStyle.js
@@ -122,22 +122,22 @@ const theme = ({ dt }) => `
 
 .p-datepicker-view-month {
     margin-right: 0.5rem;
-    color: ${dt('datepicker.month.picker.color')};
+    color: ${dt('datepicker.view.month.color')};
 }
 
 .p-datepicker-view-year {
     margin-right: 0.5rem;
-    color: ${dt('datepicker.year.picker.color')};
+    color: ${dt('datepicker.view.year.color')};
 }
 
 .p-datepicker-view-month:enabled:hover {
-    background: ${dt('datepicker.month.picker.hover.background')};
-    color: ${dt('datepicker.month.picker.hover.color')};
+    background: ${dt('datepicker.view.month.hover.background')};
+    color: ${dt('datepicker.view.month.hover.color')};
 }
 
 .p-datepicker-view-year:enabled:hover {
-    background: ${dt('datepicker.year.picker.hover.background')};
-    color: ${dt('datepicker.year.picker.hover.color')};
+    background: ${dt('datepicker.view.year.hover.background')};
+    color: ${dt('datepicker.view.year.hover.color')};
 }
 
 .p-datepicker-datepicker-container {
@@ -239,17 +239,17 @@ const theme = ({ dt }) => `
     transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
     border-radius: ${dt('rounded.base')};
     outline-color: transparent;
-    color: ${dt('datepicker.month.color')};
+    color: ${dt('datepicker.date.color')};
 }
 
 .p-datepicker-month:not(.p-disabled):not(.p-datepicker-month-selected):hover {
-    color:  ${dt('datepicker.month.hover.color')};
-    background: ${dt('datepicker.month.hover.background')};
+    color:  ${dt('datepicker.date.hover.color')};
+    background: ${dt('datepicker.date.hover.background')};
 }
 
 .p-datepicker-month-selected {
-    color: ${dt('datepicker.month.selected.color')};
-    background: ${dt('datepicker.month.selected.background')};
+    color: ${dt('datepicker.date.selected.color')};
+    background: ${dt('datepicker.date.selected.background')};
 }
 
 .p-datepicker-month:not(.p-disabled):focus-visible {
@@ -273,17 +273,17 @@ const theme = ({ dt }) => `
     transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
     border-radius: ${dt('rounded.base')};
     outline-color: transparent;
-    color: ${dt('datepicker.year.color')};
+    color: ${dt('datepicker.date.color')};
 }
 
 .p-datepicker-year:not(.p-disabled):not(.p-datepicker-year-selected):hover {
-    color:  ${dt('datepicker.year.hover.color')};
-    background: ${dt('datepicker.year.hover.background')};
+    color:  ${dt('datepicker.date.hover.color')};
+    background: ${dt('datepicker.date.hover.background')};
 }
 
 .p-datepicker-year-selected {
-    color: ${dt('datepicker.year.selected.color')};
-    background: ${dt('datepicker.year.selected.background')};
+    color: ${dt('datepicker.date.selected.color')};
+    background: ${dt('datepicker.date.selected.background')};
 }
 
 .p-datepicker-year:not(.p-disabled):focus-visible {
@@ -307,11 +307,11 @@ const theme = ({ dt }) => `
     display: flex;
     justify-content: center;
     align-items: center;
-    border-top: 1px solid ${dt('datepicker.timepicker.border.color')};
+    border-top: 1px solid ${dt('datepicker.time.picker.border.color')};
     padding: 0;
 }
 
-.p-datepicker-datepicker-group + .p-timepicker {
+.p-datepicker-datepicker-group + .p-datepicker-time-picker {
     margin-top: 0.5rem;
     padding-top: 0.5rem;
 }
diff --git a/components/lib/themes/aura/datepicker/index.js b/components/lib/themes/aura/datepicker/index.js
index f495710d3..e17d7d8b3 100644
--- a/components/lib/themes/aura/datepicker/index.js
+++ b/components/lib/themes/aura/datepicker/index.js
@@ -1,138 +1,63 @@
 export default {
+    root: {
+        background: '{content.background}',
+        borderColor: '{content.border.color}',
+        color: '{content.color}'
+    },
+    header: {
+        background: '{content.background}',
+        borderColor: '{content.border.color}',
+        color: '{content.color}'
+    },
+    dropdown: {
+        width: '2.5rem',
+        borderColor: '{form.field.border.color}',
+        hoverBorderColor: '{form.field.border.color}',
+        activeBorderColor: '{form.field.border.color}',
+        background: '{button.secondary.background}',
+        hoverBackground: '{button.secondary.hover.background}',
+        activeBackground: '{button.secondary.active.background}',
+        color: '{button.secondary.color}',
+        hoverColor: '{button.secondary.hover.color}',
+        activeColor: '{button.secondary.active.color}'
+    },
+    viewMonth: {
+        hoverBackground: '{content.hover.background}',
+        color: '{content.color}',
+        hoverColor: '{content.hover.color}'
+    },
+    viewYear: {
+        hoverBackground: '{content.hover.background}',
+        color: '{content.color}',
+        hoverColor: '{content.hover.color}'
+    },
+    group: {
+        borderColor: '{content.border.color}'
+    },
+    date: {
+        hoverBackground: '{content.hover.background}',
+        selectedBackground: '{highlight.background}',
+        color: '{content.color}',
+        hoverColor: '{content.hover.color}',
+        selectedColor: '{highlight.color}'
+    },
+    buttonbar: {
+        borderColor: '{content.border.color}'
+    },
+    timePicker: {
+        borderColor: '{content.border.color}'
+    },
     colorScheme: {
         light: {
-            root: {
-                background: '{surface.0}',
-                borderColor: '{surface.200}',
-                color: '{surface.700}'
-            },
-            header: {
-                background: '{surface.0}',
-                borderColor: '{surface.200}',
-                color: '{surface.700}'
-            },
-            monthPicker: {
-                hoverBackground: '{surface.100}',
-                color: '{surface.700}',
-                hoverColor: '{surface.800}'
-            },
-            yearPicker: {
-                hoverBackground: '{surface.100}',
-                color: '{surface.700}',
-                hoverColor: '{surface.800}'
-            },
-            group: {
-                borderColor: '{surface.200}'
-            },
-            date: {
-                hoverBackground: '{surface.100}',
-                selectedBackground: '{highlight.background}',
-                color: '{surface.700}',
-                hoverColor: '{surface.800}',
-                selectedColor: '{highlight.color}'
-            },
             today: {
                 background: '{surface.200}',
                 color: '{surface.900}'
-            },
-            month: {
-                hoverBackground: '{surface.100}',
-                selectedBackground: '{highlight.background}',
-                color: '{surface.700}',
-                hoverColor: '{surface.800}',
-                selectedColor: '{highlight.color}'
-            },
-            year: {
-                hoverBackground: '{surface.100}',
-                selectedBackground: '{highlight.background}',
-                color: '{surface.700}',
-                hoverColor: '{surface.800}',
-                selectedColor: '{highlight.color}'
-            },
-            buttonbar: {
-                borderColor: '{surface.200}'
-            },
-            timepicker: {
-                borderColor: '{surface.200}'
-            },
-            dropdown: {
-                width: '2.5rem',
-                background: '{surface.100}',
-                hoverBackground: '{surface.200}',
-                activeBackground: '{surface.300}',
-                borderColor: '{form.field.border.color}',
-                hoverBorderColor: '{form.field.border.color}',
-                activeBorderColor: '{form.field.border.color}',
-                color: '{surface.600}',
-                hoverColor: '{surface.700}',
-                activeColor: '{surface.800}'
             }
         },
         dark: {
-            root: {
-                background: '{surface.900}',
-                borderColor: '{surface.700}',
-                color: '{surface.0}'
-            },
-            header: {
-                background: '{surface.900}',
-                borderColor: '{surface.700}',
-                color: '{surface.0}'
-            },
-            monthPicker: {
-                hoverBackground: '{surface.800}',
-                color: '{surface.0}',
-                hoverColor: '{surface.0}'
-            },
-            yearPicker: {
-                hoverBackground: '{surface.800}',
-                color: '{surface.0}',
-                hoverColor: '{surface.0}'
-            },
-            group: {
-                borderColor: '{surface.700}'
-            },
-            date: {
-                hoverBackground: '{surface.800}',
-                selectedBackground: '{highlight.background}',
-                color: '{surface.0}',
-                hoverColor: '{surface.0}',
-                selectedColor: '{highlight.color}'
-            },
             today: {
                 background: '{surface.700}',
                 color: '{surface.0}'
-            },
-            month: {
-                hoverBackground: '{surface.800}',
-                selectedBackground: '{highlight.background}',
-                color: '{surface.0}',
-                hoverColor: '{surface.0}',
-                selectedColor: '{highlight.color}'
-            },
-            year: {
-                hoverBackground: '{surface.800}',
-                selectedBackground: '{highlight.background}',
-                color: '{surface.0}',
-                hoverColor: '{surface.0}',
-                selectedColor: '{highlight.color}'
-            },
-            buttonbar: {
-                borderColor: '{surface.700}'
-            },
-            timepicker: {
-                borderColor: '{surface.700}'
-            },
-            dropdown: {
-                background: '{surface.800}',
-                hoverBackground: '{surface.700}',
-                activeBackground: '{surface.600}',
-                borderColor: '{form.field.border.color}',
-                hoverBorderColor: '{form.field.border.color}',
-                activeBorderColor: '{form.field.border.color}',
-                color: '{surface.300}',
-                hoverColor: '{surface.200}',
-                activeColor: '{surface.100}'
             }
         }
     }