diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index 22fb7a39c2331b11b615ccab8a1974db56e2a4ec..f5bb69c06b1e107bba1140a9bde3d1f0867e3871 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import "metabase/css/index.css";
 import "metabase/lib/dayjs";
+import { EmotionCacheProvider } from "metabase/styled-components/components/EmotionCacheProvider";
 import { ThemeProvider } from "metabase/ui";
 
 export const parameters = {
@@ -14,5 +15,9 @@ export const parameters = {
 };
 
 export const decorators = [
-  renderStory => <ThemeProvider>{renderStory()}</ThemeProvider>,
+  renderStory => (
+    <EmotionCacheProvider>
+      <ThemeProvider>{renderStory()}</ThemeProvider>
+    </EmotionCacheProvider>
+  ),
 ];
diff --git a/frontend/src/metabase/ui/components/inputs/Checkbox/Checkbox.stories.mdx b/frontend/src/metabase/ui/components/inputs/Checkbox/Checkbox.stories.mdx
index 7c3bc5023b17f4b809fd4c8055185e2a2ef42465..d43132f01bf3ce03b6ecb3f17042288d759a09e9 100644
--- a/frontend/src/metabase/ui/components/inputs/Checkbox/Checkbox.stories.mdx
+++ b/frontend/src/metabase/ui/components/inputs/Checkbox/Checkbox.stories.mdx
@@ -6,6 +6,7 @@ export const args = {
   description: undefined,
   disabled: false,
   labelPosition: "right",
+  size: "md",
 };
 
 export const argTypes = {
@@ -22,6 +23,14 @@ export const argTypes = {
     options: ["left", "right"],
     control: { type: "inline-radio" },
   },
+  size: {
+    options: ["xs", "md", "lg", "xl"],
+    control: { type: "inline-radio" },
+  },
+  variant: {
+    options: ["default", "stacked"],
+    control: { type: "inline-radio" },
+  },
 };
 
 <Meta
@@ -149,6 +158,17 @@ DescriptionLeft.args = {
   <Story name="Description, left position">{DescriptionLeft}</Story>
 </Canvas>
 
+#### Stacked Variant
+
+export const Stacked = StateTemplate.bind({});
+Stacked.args = {
+  variant: "stacked",
+};
+
+<Canvas>
+  <Story name="Stacked">{Stacked}</Story>
+</Canvas>
+
 ## Related components
 
 - Radio
diff --git a/frontend/src/metabase/ui/components/inputs/Checkbox/Checkbox.styled.tsx b/frontend/src/metabase/ui/components/inputs/Checkbox/Checkbox.styled.tsx
index 7b70643a815c9b69f060cd9a0be57e78e35048cc..b7dd00b2a95e93f1a7f7653d3b126ede54be8a3a 100644
--- a/frontend/src/metabase/ui/components/inputs/Checkbox/Checkbox.styled.tsx
+++ b/frontend/src/metabase/ui/components/inputs/Checkbox/Checkbox.styled.tsx
@@ -34,9 +34,6 @@ export const getCheckboxOverrides = (): MantineThemeOverride["components"] => ({
           },
         },
       },
-      body: {
-        alignItems: "center",
-      },
       inner: {
         width: getSize({ size, sizes: SIZES }),
         height: getSize({ size, sizes: SIZES }),
@@ -47,6 +44,7 @@ export const getCheckboxOverrides = (): MantineThemeOverride["components"] => ({
         height: getSize({ size, sizes: SIZES }),
         cursor: "pointer",
         borderRadius: theme.radius.xs,
+        border: `1px solid ${theme.colors.bg[2]}`,
 
         "&:checked": {
           borderColor: theme.colors.brand[1],
@@ -79,5 +77,46 @@ export const getCheckboxOverrides = (): MantineThemeOverride["components"] => ({
         color: theme.colors.text[0],
       },
     }),
+    variants: {
+      stacked: (theme, { labelPosition }) => ({
+        inner: {
+          position: "relative",
+          zIndex: 0,
+        },
+        label: {
+          paddingLeft: labelPosition === "right" ? "0.75rem" : "0.5rem",
+        },
+        description: {
+          paddingLeft: labelPosition === "right" ? "0.75rem" : "0.5rem",
+        },
+        input: {
+          "&:after": {
+            content: "''",
+            border: `1px solid ${theme.colors.bg[2]}`,
+            position: "absolute",
+            top: rem(-4),
+            left: rem(4),
+            height: "100%",
+            width: "100%",
+            borderRadius: rem(4),
+            zIndex: -1,
+            backgroundColor: theme.white,
+            boxSizing: "border-box",
+          },
+
+          "&:checked:not([disabled]):after": {
+            border: `${rem(2)} solid ${theme.colors.brand[1]}`,
+          },
+
+          "&:disabled:after": {
+            border: `${rem(2)} solid ${theme.colors.border[0]}`,
+          },
+        },
+        labelWrapper: {
+          psoition: "relative",
+          top: rem(-2),
+        },
+      }),
+    },
   },
 });
diff --git a/frontend/src/metabase/visualizations/components/settings/ChartSettingAddRemoveColumns/ChartSettingAddRemoveColumns.tsx b/frontend/src/metabase/visualizations/components/settings/ChartSettingAddRemoveColumns/ChartSettingAddRemoveColumns.tsx
index f7a3cbfd3d1f1c4d10ba3ec947cee23b65dcfeba..81a2bcfdfd0a173f2130e8d37bacc19412d89e50 100644
--- a/frontend/src/metabase/visualizations/components/settings/ChartSettingAddRemoveColumns/ChartSettingAddRemoveColumns.tsx
+++ b/frontend/src/metabase/visualizations/components/settings/ChartSettingAddRemoveColumns/ChartSettingAddRemoveColumns.tsx
@@ -5,7 +5,7 @@ import { Checkbox, TextInput, Box, Flex, Text } from "metabase/ui";
 import { Icon } from "metabase/core/components/Icon";
 import type { TableColumnOrderSetting } from "metabase-types/api";
 import { getColumnIcon } from "metabase/common/utils/columns";
-import { StackedCheckBox } from "metabase/components/StackedCheckBox/StackedCheckBox";
+
 import type * as Lib from "metabase-lib";
 import type {
   ColumnSetting,
@@ -187,7 +187,9 @@ export const ChartSettingAddRemoveColumns = ({
             {showAddRemoveAll(columnGroup.columns) && (
               <Box mb="1rem">
                 {areAllColumnsInQuery(columnGroup.columns) ? (
-                  <StackedCheckBox
+                  <Checkbox
+                    variant="stacked"
+                    size="xs"
                     label={
                       <Text
                         fw={700}
@@ -201,7 +203,9 @@ export const ChartSettingAddRemoveColumns = ({
                     }
                   />
                 ) : (
-                  <StackedCheckBox
+                  <Checkbox
+                    variant="stacked"
+                    size="xs"
                     label={
                       <Text
                         fw={700}