diff --git a/assets/css/scss/atoms/_checkbox.scss b/assets/css/scss/atoms/_checkbox.scss
index 537ba1e62c..c38ee087cd 100644
--- a/assets/css/scss/atoms/_checkbox.scss
+++ b/assets/css/scss/atoms/_checkbox.scss
@@ -25,6 +25,7 @@
     }
   }
 
+  &:has(&-input--legacy:checked) &-box,
   &.p-highlight &-box {
     @apply border-primary bg-primary;
   }
@@ -34,6 +35,7 @@
       @apply border-primary;
     }
 
+    &:has(.p-checkbox-input--legacy:checked) .p-checkbox-box,
     &.p-highlight .p-checkbox-box {
       @apply border-primary bg-primary text-white;
     }
diff --git a/assets/css/scss/atoms/_radio.scss b/assets/css/scss/atoms/_radio.scss
index 6e56371df7..cfa9ac244e 100644
--- a/assets/css/scss/atoms/_radio.scss
+++ b/assets/css/scss/atoms/_radio.scss
@@ -16,6 +16,7 @@
     transform: translateZ(0) scale(0.1);
   }
 
+  &:has(&-input--legacy:checked) &-icon,
   &.p-highlight &-icon {
     @apply visible;
     transform: translateZ(0) scale(1, 1);
@@ -33,6 +34,7 @@
     @apply w-1.5 h-1.5 duration-200 bg-white;
   }
 
+  &:has(&-input--legacy:checked) &-box,
   &.p-highlight &-box {
     @apply border-primary bg-primary;
   }
@@ -42,6 +44,7 @@
       @apply border-primary;
     }
 
+    &:has(.p-radiobutton-input--legacy:checked) .p-radiobutton-box,
     &.p-highlight .p-radiobutton-box {
       @apply border-primary bg-primary text-white;
     }
diff --git a/public/main/inc/lib/pear/HTML/QuickForm/checkbox.php b/public/main/inc/lib/pear/HTML/QuickForm/checkbox.php
index 75e37f324d..f33ff6f719 100644
--- a/public/main/inc/lib/pear/HTML/QuickForm/checkbox.php
+++ b/public/main/inc/lib/pear/HTML/QuickForm/checkbox.php
@@ -114,12 +114,14 @@ class HTML_QuickForm_checkbox extends HTML_QuickForm_input
      */
     public function toHtml()
     {
-        $extraClass = "appearance-none checked:bg-support-4 outline-none";
+        $extraClass = "p-checkbox-input p-checkbox-input--legacy";
+
         if (isset($this->_attributes['class'])) {
             $this->_attributes['class'] .= $extraClass;
         } else {
             $this->_attributes['class'] = $extraClass;
         }
+
         if (0 == strlen($this->_text)) {
             $label = '';
         } elseif ($this->_flagFrozen) {
@@ -131,7 +133,14 @@ class HTML_QuickForm_checkbox extends HTML_QuickForm_input
             $id = $this->getAttribute('id');
 
             return '<div id="'.$name.'" class="'.$checkClass.'">
+                <div class="p-checkbox p-component">
                     '.parent::toHtml().'
+                    <div class="p-checkbox-box" data-pc-section="box">
+                        <div class="p-checkbox-icon" data-pc-section="icon">
+                            <span class="mdi mdi-check" aria-hidden="true"></span>
+                        </div>
+                    </div>
+                </div>
                     <label for="'.$id.'" class="'.$labelClass.'">
                         '.$this->_text.
                     '</label>
diff --git a/public/main/inc/lib/pear/HTML/QuickForm/radio.php b/public/main/inc/lib/pear/HTML/QuickForm/radio.php
index 5f8071bd90..87294b5819 100644
--- a/public/main/inc/lib/pear/HTML/QuickForm/radio.php
+++ b/public/main/inc/lib/pear/HTML/QuickForm/radio.php
@@ -111,6 +111,14 @@ class HTML_QuickForm_radio extends HTML_QuickForm_input
      */
     public function toHtml()
     {
+        $extraClass = "p-radiobutton-input p-radiobutton-input--legacy";
+
+        if (isset($this->_attributes['class'])) {
+            $this->_attributes['class'] .= $extraClass;
+        } else {
+            $this->_attributes['class'] = $extraClass;
+        }
+
         if (0 == strlen($this->_text)) {
             $label = '';
         } elseif ($this->isFrozen()) {
@@ -126,7 +134,12 @@ class HTML_QuickForm_radio extends HTML_QuickForm_input
             $id = $this->getAttribute('id');
 
             return '<div class="'.$radioClass.'">
-                '.parent::toHtml().'
+                <div class="p-radiobutton p-component">
+                    '.parent::toHtml().'
+                    <div class="p-radiobutton-box" data-pc-section="box">
+                        <div class="p-radiobutton-icon" data-pc-section="icon"></div>
+                    </div>
+                </div>
                 <label for="'.$id.'" class="'.$labelClass.'">'.$this->_text.'</label>
                 </div>';
         }