diff --git a/src/components/CheckBox/CheckBox.style.ts b/src/components/CheckBox/CheckBox.style.ts
index 579bf7aeb..6c7f05ddb 100644
--- a/src/components/CheckBox/CheckBox.style.ts
+++ b/src/components/CheckBox/CheckBox.style.ts
@@ -30,7 +30,7 @@ export const checkboxStyle = ({ intermediate, checked }: Props) => (
     ? intermediate
       ? theme.palette.flat.darkGray[400]
       : theme.palette.branded1[400]
-    : theme.palette.flat.lightGray[400]};
+    : theme.palette.flat.lightGray[300]};
   border: 0;
   border-radius: ${rem(2)};
   width: ${rem(26)};
diff --git a/src/components/CheckBox/__snapshots__/CheckBox.stories.storyshot b/src/components/CheckBox/__snapshots__/CheckBox.stories.storyshot
index 5fd51314f..945824f30 100644
--- a/src/components/CheckBox/__snapshots__/CheckBox.stories.storyshot
+++ b/src/components/CheckBox/__snapshots__/CheckBox.stories.storyshot
@@ -56,7 +56,7 @@ exports[`Storyshots Design System/CheckBox CheckBox with Label 1`] = `
         >
           <input
             checked={false}
-            className="css-fr285l-CheckBox"
+            className="css-czstdm-CheckBox"
             disabled={false}
             id="styled-checkbox-"
             onChange={[Function]}
@@ -184,7 +184,7 @@ exports[`Storyshots Design System/CheckBox CheckBox with Label 1`] = `
         >
           <input
             checked={false}
-            className="css-9tbljl-CheckBox"
+            className="css-1qulgwb-CheckBox"
             disabled={false}
             id="styled-checkbox-"
             onChange={[Function]}
@@ -320,7 +320,7 @@ exports[`Storyshots Design System/CheckBox CheckBox without 1`] = `
         >
           <input
             checked={false}
-            className="css-fr285l-CheckBox"
+            className="css-czstdm-CheckBox"
             disabled={false}
             id="styled-checkbox-"
             onChange={[Function]}
@@ -374,7 +374,7 @@ exports[`Storyshots Design System/CheckBox CheckBox without 1`] = `
         >
           <input
             checked={false}
-            className="css-9tbljl-CheckBox"
+            className="css-1qulgwb-CheckBox"
             disabled={false}
             id="styled-checkbox-"
             onChange={[Function]}
@@ -401,7 +401,7 @@ exports[`Storyshots Design System/CheckBox CheckBox without 1`] = `
         >
           <input
             checked={false}
-            className="css-9tbljl-CheckBox"
+            className="css-1qulgwb-CheckBox"
             disabled={true}
             id="styled-checkbox-"
             onChange={[Function]}
diff --git a/src/components/Table/__snapshots__/Table.stories.storyshot b/src/components/Table/__snapshots__/Table.stories.storyshot
index fbd1c976b..95afd69e3 100644
--- a/src/components/Table/__snapshots__/Table.stories.storyshot
+++ b/src/components/Table/__snapshots__/Table.stories.storyshot
@@ -50,7 +50,7 @@ exports[`Storyshots Design System/Table Financial Table 1`] = `
             >
               <input
                 checked={false}
-                className="css-fr285l-CheckBox"
+                className="css-czstdm-CheckBox"
                 disabled={false}
                 id="styled-checkbox-"
                 onChange={[Function]}
@@ -127,7 +127,7 @@ exports[`Storyshots Design System/Table Financial Table 1`] = `
             >
               <input
                 checked={false}
-                className="css-fr285l-CheckBox"
+                className="css-czstdm-CheckBox"
                 disabled={false}
                 id="styled-checkbox-"
                 onChange={[Function]}
@@ -190,7 +190,7 @@ exports[`Storyshots Design System/Table Financial Table 1`] = `
             >
               <input
                 checked={false}
-                className="css-fr285l-CheckBox"
+                className="css-czstdm-CheckBox"
                 disabled={false}
                 id="styled-checkbox-"
                 onChange={[Function]}
@@ -253,7 +253,7 @@ exports[`Storyshots Design System/Table Financial Table 1`] = `
             >
               <input
                 checked={false}
-                className="css-fr285l-CheckBox"
+                className="css-czstdm-CheckBox"
                 disabled={false}
                 id="styled-checkbox-"
                 onChange={[Function]}
@@ -316,7 +316,7 @@ exports[`Storyshots Design System/Table Financial Table 1`] = `
             >
               <input
                 checked={false}
-                className="css-fr285l-CheckBox"
+                className="css-czstdm-CheckBox"
                 disabled={false}
                 id="styled-checkbox-"
                 onChange={[Function]}
@@ -412,7 +412,7 @@ exports[`Storyshots Design System/Table Fixed Header Table 1`] = `
             >
               <input
                 checked={false}
-                className="css-fr285l-CheckBox"
+                className="css-czstdm-CheckBox"
                 disabled={false}
                 id="styled-checkbox-"
                 onChange={[Function]}
@@ -489,7 +489,7 @@ exports[`Storyshots Design System/Table Fixed Header Table 1`] = `
             >
               <input
                 checked={false}
-                className="css-fr285l-CheckBox"
+                className="css-czstdm-CheckBox"
                 disabled={false}
                 id="styled-checkbox-"
                 onChange={[Function]}
@@ -552,7 +552,7 @@ exports[`Storyshots Design System/Table Fixed Header Table 1`] = `
             >
               <input
                 checked={false}
-                className="css-fr285l-CheckBox"
+                className="css-czstdm-CheckBox"
                 disabled={false}
                 id="styled-checkbox-"
                 onChange={[Function]}
@@ -615,7 +615,7 @@ exports[`Storyshots Design System/Table Fixed Header Table 1`] = `
             >
               <input
                 checked={false}
-                className="css-fr285l-CheckBox"
+                className="css-czstdm-CheckBox"
                 disabled={false}
                 id="styled-checkbox-"
                 onChange={[Function]}
@@ -678,7 +678,7 @@ exports[`Storyshots Design System/Table Fixed Header Table 1`] = `
             >
               <input
                 checked={false}
-                className="css-fr285l-CheckBox"
+                className="css-czstdm-CheckBox"
                 disabled={false}
                 id="styled-checkbox-"
                 onChange={[Function]}
@@ -741,7 +741,7 @@ exports[`Storyshots Design System/Table Fixed Header Table 1`] = `
             >
               <input
                 checked={false}
-                className="css-fr285l-CheckBox"
+                className="css-czstdm-CheckBox"
                 disabled={false}
                 id="styled-checkbox-"
                 onChange={[Function]}
@@ -804,7 +804,7 @@ exports[`Storyshots Design System/Table Fixed Header Table 1`] = `
             >
               <input
                 checked={false}
-                className="css-fr285l-CheckBox"
+                className="css-czstdm-CheckBox"
                 disabled={false}
                 id="styled-checkbox-"
                 onChange={[Function]}
@@ -867,7 +867,7 @@ exports[`Storyshots Design System/Table Fixed Header Table 1`] = `
             >
               <input
                 checked={false}
-                className="css-fr285l-CheckBox"
+                className="css-czstdm-CheckBox"
                 disabled={false}
                 id="styled-checkbox-"
                 onChange={[Function]}
@@ -930,7 +930,7 @@ exports[`Storyshots Design System/Table Fixed Header Table 1`] = `
             >
               <input
                 checked={false}
-                className="css-fr285l-CheckBox"
+                className="css-czstdm-CheckBox"
                 disabled={false}
                 id="styled-checkbox-"
                 onChange={[Function]}
@@ -993,7 +993,7 @@ exports[`Storyshots Design System/Table Fixed Header Table 1`] = `
             >
               <input
                 checked={false}
-                className="css-fr285l-CheckBox"
+                className="css-czstdm-CheckBox"
                 disabled={false}
                 id="styled-checkbox-"
                 onChange={[Function]}
@@ -1509,7 +1509,7 @@ exports[`Storyshots Design System/Table Table with expandable rows 1`] = `
             >
               <input
                 checked={false}
-                className="css-fr285l-CheckBox"
+                className="css-czstdm-CheckBox"
                 disabled={false}
                 id="styled-checkbox-"
                 onChange={[Function]}
@@ -1572,7 +1572,7 @@ exports[`Storyshots Design System/Table Table with expandable rows 1`] = `
                       >
                         <input
                           checked={false}
-                          className="css-fr285l-CheckBox"
+                          className="css-czstdm-CheckBox"
                           disabled={false}
                           id="styled-checkbox-"
                           onChange={[Function]}
@@ -1696,7 +1696,7 @@ exports[`Storyshots Design System/Table Table with expandable rows 1`] = `
                       >
                         <input
                           checked={false}
-                          className="css-fr285l-CheckBox"
+                          className="css-czstdm-CheckBox"
                           disabled={false}
                           id="styled-checkbox-"
                           onChange={[Function]}