diff --git a/packages/extension-ui/src/assets/checkmark.svg b/packages/extension-ui/src/assets/checkmark.svg
new file mode 100644
index 00000000000..0b8aae473d7
--- /dev/null
+++ b/packages/extension-ui/src/assets/checkmark.svg
@@ -0,0 +1,3 @@
+<svg width="13" height="10" viewBox="0 0 13 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M12.9902 2.00008L11.5802 0.580078L4.99023 7.17008L2.41023 4.60008L0.990234 6.01008L4.99023 10.0001L12.9902 2.00008Z" fill="#FF8B00"/>
+</svg>
diff --git a/packages/extension-ui/src/components/Checkbox.tsx b/packages/extension-ui/src/components/Checkbox.tsx
index e204a5edc1f..aed6ce45f58 100644
--- a/packages/extension-ui/src/components/Checkbox.tsx
+++ b/packages/extension-ui/src/components/Checkbox.tsx
@@ -4,6 +4,7 @@
 
 import React from 'react';
 import styled from 'styled-components';
+import Checkmark from '../assets/checkmark.svg';
 
 interface Props {
   checked: boolean;
@@ -49,26 +50,25 @@ export default styled(Checkbox)`
       height: 16px;
       width: 16px;
       border-radius: ${({ theme }): string => theme.borderRadius};
-      background-color: ${({ theme }): string => theme.inputBackground};
+      background-color: ${({ theme }): string => theme.readonlyInputBackground};
+      border: 1px solid ${({ theme }): string => theme.inputBorderColor};
       border: 1px solid ${({ theme }): string => theme.inputBorderColor};
-
       &:after {
-        content: "✓";
+        content: "";
         display: none;
-        left: 3px;
-        top: -4px;
+        width: 13px;
+        height: 10px;
         position: absolute;
-        color: ${({ theme }): string => theme.textColor};
-        font-size: 14px;
+        left: 1px;
+        top: 2px;
+        mask: url(${Checkmark});
+        mask-size: cover;
+        background: ${({ theme }): string => theme.primaryColor};
       }
     }
 
     &:hover input ~ span {
-      background-color: ${({ theme }): string => theme.labelColor};
-    }
-
-    input:checked ~ span {
-      background-color: ${({ theme }): string => theme.primaryColor};
+      background-color: ${({ theme }): string => theme.inputBackground};
     }
 
     input:checked ~ span:after {