diff --git a/src/components/ui/Checkbox.scss b/src/components/ui/Checkbox.scss
index 1f88a317..0f2ab77e 100644
--- a/src/components/ui/Checkbox.scss
+++ b/src/components/ui/Checkbox.scss
@@ -77,16 +77,15 @@
     }
 
     &::before {
-      border: 2px solid var(--color-borders);
+      border: 2px solid var(--color-borders-input);
       border-radius: .25rem;
       background-color: var(--color-white);
-      transition: border-color .1s ease;
+      transition: border-color .1s ease, background-color .1s ease;
     }
 
     &::after {
-      background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCI+PHBhdGggZD0iTTE2LjcgMEMxOC41IDAgMjAgMS41IDIwIDMuM3YxMy4zYzAgMS44LTEuNSAzLjMtMy4zIDMuM0gzLjNDMS41IDIwIDAgMTguNSAwIDE2LjdWMy4zQzAgMS41IDEuNSAwIDMuMyAwaDEzLjR6bS0uOCA0LjhsLTguMSA4LjEtMy43LTMuN2MtLjQtLjQtMS4xLS40LTEuNiAwLS40LjQtLjQgMS4xIDAgMS42TDcgMTUuMmMuNC40IDEuMS40IDEuNiAwbDguOS04LjljLjQtLjQuNC0xLjEgMC0xLjYtLjUtLjQtMS4yLS40LTEuNi4xeiIgZmlsbD0iIzRlYTRmNiIvPjwvc3ZnPg==);
-      background-size: contain;
-      background-repeat: no-repeat;
+      background: center no-repeat url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEzLjkuOEw1LjggOC45IDIuMSA1LjJjLS40LS40LTEuMS0uNC0xLjYgMC0uNC40LS40IDEuMSAwIDEuNkw1IDExLjJjLjQuNCAxLjEuNCAxLjYgMGw4LjktOC45Yy40LS40LjQtMS4xIDAtMS42LS41LS40LTEuMi0uNC0xLjYuMXoiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0ibm9uemVybyIvPjwvc3ZnPg==);
+      background-size: .875rem;
       opacity: 0;
       transition: opacity .1s ease;
     }
@@ -106,6 +105,7 @@
   input:checked ~ .Checkbox-main {
     &::before {
       border-color: var(--color-primary);
+      background-color: var(--color-primary);
     }
 
     &::after {