diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3f22d0556d..5c12742799 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -38,6 +38,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ### Fixes
 - Fix `ChatMessage`'s focus border overlays `actionMenu` in Teams theme @mnajdova ([#1637](https://github.com/stardust-ui/react/pull/1637))
+- Update `Checkbox` files for Teams Theme to match [redlines] @bcalvery ([#1656](https://github.com/stardust-ui/react/pull/1656))
 - Add `color` prop to `Segment` typings @layershifter ([#1702](https://github.com/stardust-ui/react/pull/1702))
 - Remove `color` prop from `Dialog` typings @layershifter ([#1702](https://github.com/stardust-ui/react/pull/1702))
 - `Loader` uses `Text` component for `label` slot instead of `Box` @layershifter ([#1701](https://github.com/stardust-ui/react/pull/1701))
diff --git a/docs/src/examples/components/Checkbox/States/CheckboxExampleDisabled.shorthand.tsx b/docs/src/examples/components/Checkbox/States/CheckboxExampleDisabled.shorthand.tsx
index 34cba0c868..4a25211c04 100644
--- a/docs/src/examples/components/Checkbox/States/CheckboxExampleDisabled.shorthand.tsx
+++ b/docs/src/examples/components/Checkbox/States/CheckboxExampleDisabled.shorthand.tsx
@@ -5,6 +5,9 @@ const CheckboxExampleDisabled = () => (
   <>
     <Checkbox disabled label="Disabled" />
     <Checkbox disabled checked label="Disabled & Checked" />
+    <br />
+    <Checkbox toggle disabled label="Disabled" />
+    <Checkbox toggle disabled checked label="Disabled & Checked" />
   </>
 )
 
diff --git a/packages/react/src/components/Checkbox/Checkbox.tsx b/packages/react/src/components/Checkbox/Checkbox.tsx
index 08d69974e4..f97dbbed85 100644
--- a/packages/react/src/components/Checkbox/Checkbox.tsx
+++ b/packages/react/src/components/Checkbox/Checkbox.tsx
@@ -19,6 +19,11 @@ import { Accessibility } from '../../lib/accessibility/types'
 import { checkboxBehavior } from '../../lib/accessibility'
 import { SupportedIntrinsicInputProps } from '../../lib/htmlPropsUtils'
 
+export interface CheckboxSlotClassNames {
+  label: string
+  indicator: string
+}
+
 export interface CheckboxProps extends UIComponentProps, ChildrenComponentProps {
   /** Accessibility behavior if overridden by the user. */
   accessibility?: Accessibility
@@ -65,6 +70,8 @@ export interface CheckboxState {
 }
 
 class Checkbox extends AutoControlledComponent<WithAsProp<CheckboxProps>, CheckboxState> {
+  static slotClassNames: CheckboxSlotClassNames
+
   static create: Function
 
   static displayName = 'Checkbox'
@@ -141,6 +148,7 @@ class Checkbox extends AutoControlledComponent<WithAsProp<CheckboxProps>, Checkb
     const labelElement = Text.create(label, {
       defaultProps: {
         styles: styles.label,
+        className: Checkbox.slotClassNames.label,
       },
     })
 
@@ -157,6 +165,9 @@ class Checkbox extends AutoControlledComponent<WithAsProp<CheckboxProps>, Checkb
         {labelPosition === 'start' && labelElement}
         {Icon.create(icon, {
           defaultProps: {
+            outline: toggle && !this.state.checked,
+            size: toggle ? 'medium' : 'smaller',
+            className: Checkbox.slotClassNames.indicator,
             name: toggle ? 'stardust-circle' : 'stardust-checkmark',
             styles: toggle ? styles.toggle : styles.checkbox,
           },
@@ -167,6 +178,11 @@ class Checkbox extends AutoControlledComponent<WithAsProp<CheckboxProps>, Checkb
   }
 }
 
+Checkbox.slotClassNames = {
+  label: `${Checkbox.className}__label`,
+  indicator: `${Checkbox.className}__indicator`,
+}
+
 Checkbox.create = createShorthandFactory({
   Component: Checkbox,
   mappedProp: 'label',
diff --git a/packages/react/src/themes/base/components/Checkbox/checkboxStyles.ts b/packages/react/src/themes/base/components/Checkbox/checkboxStyles.ts
index 928709d56d..9d133077ae 100644
--- a/packages/react/src/themes/base/components/Checkbox/checkboxStyles.ts
+++ b/packages/react/src/themes/base/components/Checkbox/checkboxStyles.ts
@@ -11,10 +11,9 @@ const checkboxStyles: ComponentSlotStylesInput<CheckboxProps & CheckboxState, Ch
     // @ts-ignore is supported by fallback values plugin
     display: ['inline-grid', '-ms-inline-grid'],
     // IE11: Gap is done via virtual column as in autoprefixer
-    '-ms-grid-columns':
-      p.labelPosition === 'start' ? `1fr ${v.checkboxGap} auto` : `auto ${v.checkboxGap} 1fr`,
+    '-ms-grid-columns': p.labelPosition === 'start' ? `1fr ${v.gap} auto` : `auto ${v.gap} 1fr`,
     gridTemplateColumns: p.labelPosition === 'start' ? '1fr auto' : 'auto 1fr',
-    gridGap: v.checkboxGap,
+    gridGap: v.gap,
     cursor: 'pointer',
     outline: 0,
 
@@ -30,19 +29,19 @@ const checkboxStyles: ComponentSlotStylesInput<CheckboxProps & CheckboxState, Ch
     '-ms-grid-column': p.labelPosition === 'start' ? 3 : 1,
     '-ms-grid-row-align': 'center',
 
-    borderColor: v.checkboxBorderColor,
-    borderStyle: v.checkboxBorderStyle,
-    borderRadius: v.checkboxBorderRadius,
-    borderWidth: v.checkboxBorderWidth,
+    borderColor: v.borderColor,
+    borderStyle: v.borderStyle,
+    borderRadius: v.borderRadius,
+    borderWidth: v.borderWidth,
     boxShadow: 'unset',
     color: v.checkboxColor,
-    margin: v.checkboxMargin,
-    padding: v.checkboxPadding,
+    margin: v.margin,
+    padding: v.padding,
 
     ...(p.checked && {
-      background: v.checkedCheckboxBackground,
-      borderColor: v.checkedCheckboxBorderColor,
-      color: v.checkedCheckboxColor,
+      background: v.checkedBackground,
+      borderColor: v.checkedBorderColor,
+      color: v.checkboxCheckedColor,
     }),
 
     ...(p.disabled && {
@@ -50,7 +49,7 @@ const checkboxStyles: ComponentSlotStylesInput<CheckboxProps & CheckboxState, Ch
 
       ...(p.checked && {
         color: v.disabledCheckboxColor,
-        background: v.disabledCheckboxBackground,
+        background: v.disabledBackground,
       }),
     }),
   }),
@@ -70,23 +69,23 @@ const checkboxStyles: ComponentSlotStylesInput<CheckboxProps & CheckboxState, Ch
     borderRadius: v.toggleBorderRadius,
     borderWidth: v.toggleBorderWidth,
     boxShadow: 'unset',
-    color: v.toggleColor,
+    color: v.toggleIndicatorColor,
     margin: v.toggleMargin,
 
     padding: v.togglePadding,
     transition: 'padding .3s ease',
 
     ...(p.checked && {
-      background: v.checkedToggleBackground,
-      borderColor: v.checkedToggleBorderColor,
-      color: v.checkedToggleColor,
-      padding: v.checkedTogglePadding,
+      background: v.checkboxToggleCheckedBackground,
+      borderColor: v.checkboxToggleCheckedBorderColor,
+      color: v.checkboxToggleCheckedColor,
+      padding: v.toggleCheckedPadding,
     }),
 
     ...(p.disabled && {
       background: v.disabledToggleBackground,
       borderColor: v.disabledToggleBorderColor,
-      color: v.disabledToggleColor,
+      color: v.disabledToggleIndicatorColor,
     }),
   }),
 }
diff --git a/packages/react/src/themes/base/components/Checkbox/checkboxVariables.ts b/packages/react/src/themes/base/components/Checkbox/checkboxVariables.ts
index ec579dea22..46713dc297 100644
--- a/packages/react/src/themes/base/components/Checkbox/checkboxVariables.ts
+++ b/packages/react/src/themes/base/components/Checkbox/checkboxVariables.ts
@@ -1,79 +1,75 @@
 import { pxToRem } from '../../../../lib'
 
 export type CheckboxVariables = {
-  checkboxBackground: string
-  checkboxBorderColor: string
-  checkboxBorderStyle: string
-  checkboxBorderRadius: string
-  checkboxBorderWidth: string
+  background: string
+  borderColor: string
+  borderStyle: string
+  borderRadius: string
+  borderWidth: string
   checkboxColor: string
-  checkboxGap: string
-  checkboxMargin: string
-  checkboxPadding: string
+  gap: string
+  margin: string
+  padding: string
 
   toggleBackground: string
   toggleBorderColor: string
   toggleBorderStyle: string
   toggleBorderRadius: string
   toggleBorderWidth: string
-  toggleColor: string
+  toggleIndicatorColor: string
   toggleMargin: string
   togglePadding: string
 
-  checkedCheckboxBackground: string
-  checkedCheckboxBorderColor: string
-  checkedCheckboxColor: string
-  checkedToggleColor: string
-  checkedToggleBackground: string
-  checkedToggleBorderColor: string
-  checkedTogglePadding: string
+  checkedBackground: string
+  checkedBorderColor: string
+  checkboxCheckedColor: string
+  checkboxToggleCheckedColor: string
+  checkboxToggleCheckedBackground: string
+  checkboxToggleCheckedBorderColor: string
+  toggleCheckedPadding: string
 
   disabledColor: string
-  disabledCheckboxBackground: string
-  disabledCheckboxBorderColor: string
+  disabledBackground: string
+  disabledBorderColor: string
   disabledCheckboxColor: string
-  disabledToggleColor: string
+  disabledToggleIndicatorColor: string
   disabledToggleBackground: string
   disabledToggleBorderColor: string
-
-  padding: string
 }
 
 export default (siteVars: any): CheckboxVariables => ({
-  checkboxBackground: 'transparent',
-  checkboxBorderColor: siteVars.colors.grey[300],
-  checkboxBorderStyle: `solid`,
-  checkboxBorderRadius: pxToRem(4),
-  checkboxBorderWidth: pxToRem(1),
+  background: 'transparent',
+  borderColor: siteVars.colors.grey[300],
+  borderStyle: `solid`,
+  borderRadius: pxToRem(4),
+  borderWidth: pxToRem(1),
   checkboxColor: 'transparent',
-  checkboxGap: pxToRem(12),
-  checkboxMargin: '0',
-  checkboxPadding: '0',
+  gap: pxToRem(12),
+  margin: '0',
+  padding: '0',
 
   toggleBackground: 'transparent',
   toggleBorderColor: siteVars.colors.grey[300],
   toggleBorderStyle: `solid`,
   toggleBorderRadius: pxToRem(999),
   toggleBorderWidth: pxToRem(1),
-  toggleColor: 'inherit',
+  toggleIndicatorColor: 'inherit',
   toggleMargin: '0',
   togglePadding: `0 ${pxToRem(20)} 0 0`,
 
-  checkedCheckboxBackground: 'transparent',
-  checkedCheckboxBorderColor: siteVars.colors.grey[500],
-  checkedCheckboxColor: siteVars.colors.grey[500],
-  checkedToggleBackground: 'transparent',
-  checkedToggleBorderColor: siteVars.colors.grey[500],
-  checkedToggleColor: 'inherit',
-  checkedTogglePadding: `0 0 0 ${pxToRem(20)}`,
+  checkedBackground: 'transparent',
+  checkedBorderColor: siteVars.colors.grey[500],
+  checkboxCheckedColor: siteVars.colors.grey[500],
+  checkboxToggleCheckedBackground: 'transparent',
+  checkboxToggleCheckedBorderColor: siteVars.colors.grey[500],
+  checkboxToggleCheckedColor: 'inherit',
+  toggleCheckedPadding: `0 0 0 ${pxToRem(20)}`,
 
   disabledColor: siteVars.colors.grey[300],
-  disabledCheckboxBackground: siteVars.colors.grey[200],
-  disabledCheckboxBorderColor: siteVars.colors.grey[100],
+  disabledBackground: siteVars.colors.grey[200],
+  disabledBorderColor: siteVars.colors.grey[100],
   disabledCheckboxColor: siteVars.colors.grey[300],
   disabledToggleBackground: 'transparent',
   disabledToggleBorderColor: siteVars.colors.grey[200],
-  disabledToggleColor: siteVars.colors.grey[300],
-
-  padding: `0 ${pxToRem(4)}`,
+  disabledToggleIndicatorColor: siteVars.colors.grey[300],
 })
diff --git a/packages/react/src/themes/teams-high-contrast/componentVariables.ts b/packages/react/src/themes/teams-high-contrast/componentVariables.ts
index 4af1bd9a64..99b45deb42 100644
--- a/packages/react/src/themes/teams-high-contrast/componentVariables.ts
+++ b/packages/react/src/themes/teams-high-contrast/componentVariables.ts
@@ -3,6 +3,7 @@ export { default as Avatar } from './components/Avatar/avatarVariables'
 export { default as Button } from './components/Button/buttonVariables'
 export { default as Chat } from './components/Chat/chatVariables'
 export { default as ChatMessage } from './components/Chat/chatMessageVariables'
+export { default as Checkbox } from './components/Checkbox/checkboxVariables'
 export { default as Dialog } from './components/Dialog/dialogVariables'
 export { default as Divider } from './components/Divider/dividerVariables'
 export { default as Header } from './components/Header/headerVariables'
diff --git a/packages/react/src/themes/teams-high-contrast/components/Checkbox/checkboxVariables.ts b/packages/react/src/themes/teams-high-contrast/components/Checkbox/checkboxVariables.ts
new file mode 100644
index 0000000000..0a4dd135da
--- /dev/null
+++ b/packages/react/src/themes/teams-high-contrast/components/Checkbox/checkboxVariables.ts
@@ -0,0 +1,8 @@
+import { CheckboxVariables } from '../../../teams/components/Checkbox/checkboxVariables'
+
+export default (siteVars: any): Partial<CheckboxVariables> => {
+  return {
+    borderColorHover: siteVars.accessibleYellow,
+    disabledToggleIndicatorColor: siteVars.accessibleGreen,
+  }
+}
diff --git a/packages/react/src/themes/teams/components/Checkbox/checkboxStyles.ts b/packages/react/src/themes/teams/components/Checkbox/checkboxStyles.ts
index cd5a4205ff..8b7781f596 100644
--- a/packages/react/src/themes/teams/components/Checkbox/checkboxStyles.ts
+++ b/packages/react/src/themes/teams/components/Checkbox/checkboxStyles.ts
@@ -1,14 +1,112 @@
 import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types'
-import { CheckboxProps, CheckboxState } from '../../../../components/Checkbox/Checkbox'
+import Checkbox, { CheckboxProps, CheckboxState } from '../../../../components/Checkbox/Checkbox'
 import { CheckboxVariables } from './checkboxVariables'
 import getBorderFocusStyles from '../../getBorderFocusStyles'
 
 const checkboxStyles: ComponentSlotStylesInput<CheckboxProps & CheckboxState, CheckboxVariables> = {
   root: ({ props: p, variables: v, theme: t }): ICSSInJSStyle => ({
+    color: v.textColor,
+    padding: v.rootPadding,
+    verticalAlign: 'middle',
+
     ...getBorderFocusStyles({
       siteVariables: t.siteVariables,
       isFromKeyboard: p.isFromKeyboard,
+      borderRadius: '3px',
+    }),
+
+    ':hover': {
+      color: v.textColorHover,
+
+      [`& .${Checkbox.slotClassNames.indicator}`]: {
+        ...(p.checked && {
+          background: v.checkedBackgroundHover,
+        }),
+
+        ...(!p.checked && {
+          borderColor: v.borderColorHover,
+
+          ...(p.toggle && {
+            color: v.borderColorHover,
+          }),
+        }),
+      },
+    },
+
+    ...(p.checked && {
+      color: v.checkedTextColor,
+    }),
+
+    ...(p.disabled && {
+      pointerEvents: 'none',
+      color: v.disabledColor,
+    }),
+  }),
+
+  checkbox: ({ props: p, variables: v }): ICSSInJSStyle => ({
+    background: v.background,
+    borderColor: v.borderColor,
+    borderStyle: v.borderStyle,
+    borderRadius: v.borderRadius,
+    borderWidth: v.borderWidth,
+    color: v.indicatorColor,
+    margin: v.margin,
+    padding: v.padding,
+
+    ...(p.checked && {
+      background: v.checkedBackground,
+      borderColor: v.checkedBorderColor,
+      color: v.checkedIndicatorColor,
+    }),
+
+    ...(p.disabled && {
+      background: v.disabledBackground,
+      borderColor: v.disabledBorderColor,
+    }),
+
+    ...(p.disabled &&
+      p.checked && {
+        color: v.disabledCheckedIndicatorColor,
+        background: v.disabledBackgroundChecked,
+        borderColor: 'transparent',
+      }),
+  }),
+
+  toggle: ({ props: p, variables: v }): ICSSInJSStyle => ({
+    background: v.background,
+    borderColor: v.borderColor,
+    borderStyle: v.borderStyle,
+    borderRadius: v.toggleBorderRadius,
+    borderWidth: v.borderWidth,
+    color: v.borderColor,
+    margin: v.toggleMargin,
+    padding: v.togglePadding,
+    transition: 'padding .3s ease',
+
+    [`& svg`]: {
+      width: v.toggleIndicatorSize,
+      height: v.toggleIndicatorSize,
+    },
+
+    ...(p.checked && {
+      background: v.checkedBackground,
+      borderColor: v.checkedBorderColor,
+      color: v.checkedIndicatorColor,
+      padding: v.toggleCheckedPadding,
     }),
+
+    ...(p.disabled && {
+      color: v.disabledToggleIndicatorColor,
+      background: v.disabledBackground,
+      borderColor: v.disabledBorderColor,
+    }),
+
+    ...(p.disabled &&
+      p.checked && {
+        color: v.disabledCheckedIndicatorColor,
+        background: v.disabledBackgroundChecked,
+        borderColor: 'transparent',
+      }),
   }),
 }
 
diff --git a/packages/react/src/themes/teams/components/Checkbox/checkboxVariables.ts b/packages/react/src/themes/teams/components/Checkbox/checkboxVariables.ts
index c100676dc3..22d2ce7486 100644
--- a/packages/react/src/themes/teams/components/Checkbox/checkboxVariables.ts
+++ b/packages/react/src/themes/teams/components/Checkbox/checkboxVariables.ts
@@ -1,22 +1,73 @@
 import { CheckboxVariables as BaseCheckboxVariables } from '../../../base/components/Checkbox/checkboxVariables'
+import { pxToRem } from '../../../../lib'
+import * as _ from 'lodash'
 
-export type CheckboxVariables = Partial<BaseCheckboxVariables>
+export type CheckboxVariables = Partial<BaseCheckboxVariables> & {
+  rootPadding: string
+
+  textColor: string
+  indicatorColor: string
+
+  textColorHover: string
+  borderColorHover: string
+  checkedBackgroundHover: string
+  checkedTextColor: string
+  checkedIndicatorColor: string
+
+  toggleIndicatorSize: string
+  toggleCheckedPadding: string
+
+  disabledBackgroundChecked: string
+  disabledCheckedIndicatorColor: string
+}
+
+const toggleMovementDistance = pxToRem(20)
+const padding = pxToRem(2)
+const defaultValue = 'red'
 
 export default (siteVars: any): CheckboxVariables => ({
-  checkboxBorderColor: siteVars.colors.grey[750],
-
-  toggleColor: siteVars.colors.brand[600],
-
-  checkedCheckboxBackground: siteVars.colors.brand[600],
-  checkedCheckboxBorderColor: siteVars.colors.brand[600],
-  checkedCheckboxColor: siteVars.colors.white,
-  checkedToggleBackground: siteVars.colors.brand[600],
-  checkedToggleBorderColor: siteVars.colors.brand[600],
-  checkedToggleColor: siteVars.colors.white,
-
-  disabledColor: siteVars.colors.grey[250],
-  disabledCheckboxBackground: siteVars.colors.grey[250],
-  disabledCheckboxBorderColor: siteVars.colors.grey[250],
-  disabledToggleBackground: siteVars.colors.grey[250],
-  disabledToggleBorderColor: siteVars.colors.grey[250],
+  textColor: _.get(siteVars, 'colorScheme.default.foreground1', defaultValue),
+  background: _.get(siteVars, 'colorScheme.default.background', defaultValue),
+  borderColor: _.get(siteVars, 'colorScheme.default.foreground1', defaultValue),
+  borderStyle: 'solid',
+  borderRadius: pxToRem(3),
+  borderWidth: pxToRem(1),
+  indicatorColor: 'transparent',
+  gap: pxToRem(12),
+  margin: `${pxToRem(20)}, 0`,
+  padding,
+  rootPadding: '3px 5px',
+
+  textColorHover: _.get(siteVars, 'colorScheme.default.foreground', defaultValue),
+  borderColorHover: _.get(siteVars, 'colorScheme.default.foreground', defaultValue),
+  checkedBackgroundHover: _.get(siteVars, 'colorScheme.brand.backgroundHover', defaultValue),
+
+  toggleBorderRadius: pxToRem(999),
+  toggleIndicatorSize: pxToRem(14),
+  toggleMargin: `${pxToRem(20)}, 0`,
+  togglePadding: `${padding} ${toggleMovementDistance} ${padding} ${padding}`,
+
+  checkedTextColor: _.get(siteVars, 'colorScheme.default.foreground', defaultValue),
+  checkedBackground: _.get(siteVars, 'colorScheme.brand.backgroundActive1', defaultValue),
+  checkedBorderColor: 'transparent',
+  checkedIndicatorColor: _.get(siteVars, 'colorScheme.default.background', defaultValue),
+  toggleCheckedPadding: `${padding} ${padding} ${padding} ${toggleMovementDistance}`,
+
+  disabledBackground: _.get(siteVars, 'colorScheme.default.background', defaultValue),
+  disabledBackgroundChecked: _.get(
+    siteVars,
+    'colorScheme.default.backgroundDisabled',
+    defaultValue,
+  ),
+  disabledBorderColor: _.get(siteVars, 'colorScheme.default.foregroundDisabled1', defaultValue),
+  disabledCheckedIndicatorColor: _.get(
+    siteVars,
+    'colorScheme.default.foregroundDisabled',
+    defaultValue,
+  ),
+  disabledToggleIndicatorColor: _.get(
+    siteVars,
+    'colorScheme.default.foregroundDisabled',
+    defaultValue,
+  ),
 })
diff --git a/packages/react/src/themes/teams/components/Icon/svg/icons/stardustCircle.tsx b/packages/react/src/themes/teams/components/Icon/svg/icons/stardustCircle.tsx
index 650ea6ca25..820ccb33fe 100644
--- a/packages/react/src/themes/teams/components/Icon/svg/icons/stardustCircle.tsx
+++ b/packages/react/src/themes/teams/components/Icon/svg/icons/stardustCircle.tsx
@@ -7,7 +7,7 @@ export default {
   icon: ({ classes }) => (
     <svg role="presentation" focusable="false" viewBox="8 8 16 16" className={classes.svg}>
       <g>
-        <path d="M16.5 9C12.4 9 9 12.4 9 16.5s3.4 7.5 7.5 7.5 7.5-3.4 7.5-7.5S20.6 9 16.5 9zm0 14c-3.6 0-6.5-2.9-6.5-6.5s2.9-6.5 6.5-6.5 6.5 2.9 6.5 6.5-2.9 6.5-6.5 6.5z" />
+        <path d="M16,8c-4.418,0-8,3.582-8,8s3.582,8,8,8s8-3.582,8-8S20.418,8,16,8z M16,22.85c-3.783,0-6.85-3.067-6.85-6.85S12.217,9.15,16,9.15s6.85,3.067,6.85,6.85S19.783,22.85,16,22.85z" />
         <circle
           className={cx(teamsIconClassNames.filled, classes.filledPart)}
           cx="16"