diff --git a/src/components/CheckBox/CheckBox.style.ts b/src/components/CheckBox/CheckBox.style.ts
index 6c7f05ddb..24278f246 100644
--- a/src/components/CheckBox/CheckBox.style.ts
+++ b/src/components/CheckBox/CheckBox.style.ts
@@ -29,7 +29,7 @@ export const checkboxStyle = ({ intermediate, checked }: Props) => (
   background: ${checked
     ? intermediate
       ? theme.palette.flat.darkGray[400]
-      : theme.palette.branded1[400]
+      : theme.palette.branded1[300]
     : theme.palette.flat.lightGray[300]};
   border: 0;
   border-radius: ${rem(2)};
@@ -53,7 +53,7 @@ export const checkboxStyle = ({ intermediate, checked }: Props) => (
     vertical-align: text-top;
     width: ${rem(26)};
     height: ${rem(26)};
-    background: ${theme.palette.flat.lightGray[400]};
+    background: ${theme.palette.flat.lightGray[300]};
     border-radius: ${rem(2)};
   }
 
diff --git a/src/components/CheckBox/__snapshots__/CheckBox.stories.storyshot b/src/components/CheckBox/__snapshots__/CheckBox.stories.storyshot
index 945824f30..8387e4566 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-czstdm-CheckBox"
+            className="css-bkei5x-CheckBox"
             disabled={false}
             id="styled-checkbox-"
             onChange={[Function]}
@@ -88,7 +88,7 @@ exports[`Storyshots Design System/CheckBox CheckBox with Label 1`] = `
         >
           <input
             checked={true}
-            className="css-xxls4w-CheckBox"
+            className="css-1yq1675-CheckBox"
             disabled={false}
             id="styled-checkbox-"
             onChange={[Function]}
@@ -120,7 +120,7 @@ exports[`Storyshots Design System/CheckBox CheckBox with Label 1`] = `
         >
           <input
             checked={true}
-            className="css-xxls4w-CheckBox"
+            className="css-1yq1675-CheckBox"
             disabled={true}
             id="styled-checkbox-"
             onChange={[Function]}
@@ -152,7 +152,7 @@ exports[`Storyshots Design System/CheckBox CheckBox with Label 1`] = `
         >
           <input
             checked={true}
-            className="css-1xsj2pz-CheckBox"
+            className="css-7smy38-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-1qulgwb-CheckBox"
+            className="css-nrxs4k-CheckBox"
             disabled={false}
             id="styled-checkbox-"
             onChange={[Function]}
@@ -216,7 +216,7 @@ exports[`Storyshots Design System/CheckBox CheckBox with Label 1`] = `
         >
           <input
             checked={true}
-            className="css-1xsj2pz-CheckBox"
+            className="css-7smy38-CheckBox"
             disabled={true}
             id="styled-checkbox-"
             onChange={[Function]}
@@ -293,7 +293,7 @@ exports[`Storyshots Design System/CheckBox CheckBox without 1`] = `
         >
           <input
             checked={true}
-            className="css-xxls4w-CheckBox"
+            className="css-1yq1675-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-czstdm-CheckBox"
+            className="css-bkei5x-CheckBox"
             disabled={false}
             id="styled-checkbox-"
             onChange={[Function]}
@@ -347,7 +347,7 @@ exports[`Storyshots Design System/CheckBox CheckBox without 1`] = `
         >
           <input
             checked={true}
-            className="css-1xsj2pz-CheckBox"
+            className="css-7smy38-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-1qulgwb-CheckBox"
+            className="css-nrxs4k-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-1qulgwb-CheckBox"
+            className="css-nrxs4k-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 95afd69e3..f275a1e3b 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-czstdm-CheckBox"
+                className="css-bkei5x-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-czstdm-CheckBox"
+                className="css-bkei5x-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-czstdm-CheckBox"
+                className="css-bkei5x-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-czstdm-CheckBox"
+                className="css-bkei5x-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-czstdm-CheckBox"
+                className="css-bkei5x-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-czstdm-CheckBox"
+                className="css-bkei5x-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-czstdm-CheckBox"
+                className="css-bkei5x-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-czstdm-CheckBox"
+                className="css-bkei5x-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-czstdm-CheckBox"
+                className="css-bkei5x-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-czstdm-CheckBox"
+                className="css-bkei5x-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-czstdm-CheckBox"
+                className="css-bkei5x-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-czstdm-CheckBox"
+                className="css-bkei5x-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-czstdm-CheckBox"
+                className="css-bkei5x-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-czstdm-CheckBox"
+                className="css-bkei5x-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-czstdm-CheckBox"
+                className="css-bkei5x-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-czstdm-CheckBox"
+                className="css-bkei5x-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-czstdm-CheckBox"
+                          className="css-bkei5x-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-czstdm-CheckBox"
+                          className="css-bkei5x-CheckBox"
                           disabled={false}
                           id="styled-checkbox-"
                           onChange={[Function]}