diff --git a/packages/themes/src/presets/material/checkbox/index.js b/packages/themes/src/presets/material/checkbox/index.js
index 92aafc31e..7efdbdb44 100644
--- a/packages/themes/src/presets/material/checkbox/index.js
+++ b/packages/themes/src/presets/material/checkbox/index.js
@@ -1,18 +1,18 @@
 export default {
     root: {
-        borderRadius: '{border.radius.sm}',
-        width: '1.25rem',
-        height: '1.25rem',
+        borderRadius: '{border.radius.xs}',
+        width: '18px',
+        height: '18px',
         background: '{form.field.background}',
         checkedBackground: '{primary.color}',
-        checkedHoverBackground: '{primary.hover.color}',
+        checkedHoverBackground: '{primary.color}',
         disabledBackground: '{form.field.disabled.background}',
         filledBackground: '{form.field.filled.background}',
         borderColor: '{form.field.border.color}',
         hoverBorderColor: '{form.field.hover.border.color}',
-        focusBorderColor: '{form.field.border.color}',
+        focusBorderColor: '{form.field.hover.border.color}',
         checkedBorderColor: '{primary.color}',
-        checkedHoverBorderColor: '{primary.hover.color}',
+        checkedHoverBorderColor: '{primary.color}',
         checkedFocusBorderColor: '{primary.color}',
         checkedDisabledBorderColor: '{form.field.border.color}',
         invalidBorderColor: '{form.field.invalid.border.color}',
@@ -32,5 +32,67 @@ export default {
         checkedColor: '{primary.contrast.color}',
         checkedHoverColor: '{primary.contrast.color}',
         disabledColor: '{form.field.disabled.color}'
+    },
+    style: ({ dt }) => `
+.p-checkbox {
+    border-radius: 50%;
+    transition: box-shadow ${dt('checkbox.transition.duration')};
+}
+
+.p-checkbox-box {
+    border-width: 2px;
+}
+
+.p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) {
+    box-shadow: 0 0 1px 10px color-mix(in srgb, ${dt('text.color')}, transparent 96%);
+}
+
+.p-checkbox-checked:not(.p-disabled):has(.p-checkbox-input:hover) {
+    box-shadow: 0 0 1px 10px color-mix(in srgb, ${dt('checkbox.checked.background')}, transparent 92%);
+}
+
+.p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) {
+    box-shadow: 0 0 1px 10px color-mix(in srgb, ${dt('text.color')}, transparent 88%);
+}
+
+.p-checkbox-checked:not(.p-disabled):has(.p-checkbox-input:focus-visible) {
+    box-shadow: 0 0 1px 10px color-mix(in srgb, ${dt('checkbox.checked.background')}, transparent 84%);
+}
+
+.p-checkbox-checked .p-checkbox-box:before  {
+    content: "";
+    position: absolute;
+    top: 8px;
+    left: 2px;
+    border-right: 2px solid transparent;
+    border-bottom: 2px solid transparent;
+    transform: rotate(45deg);
+    transform-origin: 0% 100%;
+    animation: p-md-check 125ms 50ms linear forwards;
+}
+
+.p-checkbox-checked .p-checkbox-icon {
+    display: none;
+}
+
+@keyframes p-md-check {
+    0%{
+      width: 0;
+      height: 0;
+      border-color: ${dt('checkbox.icon.checked.color')};
+      transform: translate3d(0,0,0) rotate(45deg);
     }
+    33%{
+      width: 4px;
+      height: 0;
+      transform: translate3d(0,0,0) rotate(45deg);
+    }
+    100%{    
+      width: 4px;
+      height: 10px;    
+      border-color: ${dt('checkbox.icon.checked.color')};
+      transform: translate3d(0,-10px,0) rotate(45deg);
+    }
+}
+`
 };