diff --git a/apps/store/src/components/Cancellation/AutoSwitchToggleCard.tsx b/apps/store/src/components/Cancellation/AutoSwitchToggleCard.tsx
index 158649c5d8..9fb820ff73 100644
--- a/apps/store/src/components/Cancellation/AutoSwitchToggleCard.tsx
+++ b/apps/store/src/components/Cancellation/AutoSwitchToggleCard.tsx
@@ -1,22 +1,29 @@
 import { useTranslation } from 'next-i18next'
 import { type ComponentProps } from 'react'
-import { Text } from 'ui'
-import { ToggleCard } from '@/components/ToggleCard/ToggleCard'
+import { ToggleCard } from 'ui'
 
-type Props = Omit<ComponentProps<typeof ToggleCard>, 'label'> & {
+type Props = ComponentProps<typeof ToggleCard.Root> & {
   companyName: string
+  checked: boolean
+  onCheckedChange?: (checked: boolean) => void
 }
 
-export const AutoSwitchToggleCard = ({ checked, companyName, ...props }: Props) => {
+export const AutoSwitchToggleCard = ({
+  companyName,
+  checked,
+  onCheckedChange,
+  ...props
+}: Props) => {
   const { t } = useTranslation('purchase-form')
 
   return (
-    <ToggleCard {...props} label={t('AUTO_SWITCH_FIELD_LABEL')} defaultChecked={checked}>
-      {checked && (
-        <Text as="p" size="xs" color="textSecondary">
-          {t('AUTO_SWITCH_FIELD_MESSAGE', { COMPANY: companyName })}
-        </Text>
-      )}
-    </ToggleCard>
+    <ToggleCard.Root {...props}>
+      <ToggleCard.Label>{t('AUTO_SWITCH_FIELD_LABEL')}</ToggleCard.Label>
+      <ToggleCard.Switch checked={checked} onCheckedChange={onCheckedChange} />
+
+      <ToggleCard.Description>
+        {t('AUTO_SWITCH_FIELD_MESSAGE', { COMPANY: companyName })}
+      </ToggleCard.Description>
+    </ToggleCard.Root>
   )
 }
diff --git a/apps/store/src/components/ToggleCard/ToggleCard.css.ts b/apps/store/src/components/ToggleCard/ToggleCard.css.ts
deleted file mode 100644
index 566d0746f4..0000000000
--- a/apps/store/src/components/ToggleCard/ToggleCard.css.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { style } from '@vanilla-extract/css'
-import { tokens } from 'ui'
-
-export const wrapper = style({
-  padding: tokens.space.md,
-  paddingTop: tokens.space.sm,
-  borderRadius: tokens.radius.md,
-  backgroundColor: tokens.components.input.background.default,
-})
-
-export const checkboxHeader = style({
-  display: 'flex',
-  gap: tokens.space.sm,
-  justifyContent: 'space-between',
-  alignItems: 'center',
-})
-
-export const labelText = style({
-  fontFamily: tokens.fonts.body,
-  fontSize: tokens.fontSizes.md,
-  overflow: 'hidden',
-  whiteSpace: 'nowrap',
-  textOverflow: 'ellipsis',
-})
diff --git a/apps/store/src/components/ToggleCard/ToggleCard.stories.tsx b/apps/store/src/components/ToggleCard/ToggleCard.stories.tsx
deleted file mode 100644
index ad67d6f662..0000000000
--- a/apps/store/src/components/ToggleCard/ToggleCard.stories.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'
-import type { Meta, StoryObj } from '@storybook/react'
-import { ToggleCard } from './ToggleCard'
-
-const meta: Meta<typeof ToggleCard> = {
-  title: 'Inputs/ToggleCard',
-  component: ToggleCard,
-  parameters: {
-    viewport: {
-      viewports: INITIAL_VIEWPORTS,
-      defaultViewport: 'iphonese2',
-    },
-    grid: { width: '1/3' },
-  },
-}
-
-export default meta
-type Story = StoryObj<typeof ToggleCard>
-
-export const Default: Story = {
-  args: {
-    label: 'Has water connected',
-  },
-}
diff --git a/apps/store/src/components/ToggleCard/ToggleCard.tsx b/apps/store/src/components/ToggleCard/ToggleCard.tsx
deleted file mode 100644
index 38d3134f73..0000000000
--- a/apps/store/src/components/ToggleCard/ToggleCard.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import type { ComponentProps, ReactNode } from 'react'
-import { useId } from 'react'
-import { Space, Switch, useHighlightAnimation } from 'ui'
-import { SpaceFlex } from '@/components/SpaceFlex/SpaceFlex'
-import { wrapper, checkboxHeader, labelText } from './ToggleCard.css'
-
-type Props = ComponentProps<typeof Switch> & {
-  label: string
-  Icon?: ReactNode
-}
-
-export const ToggleCard = ({
-  id,
-  label,
-  children,
-  onCheckedChange,
-  Icon,
-  ...checkboxProps
-}: Props) => {
-  const { highlight, animationProps } = useHighlightAnimation<HTMLDivElement>()
-  const backupId = useId()
-  const identifier = id || backupId
-
-  const handleCheckedChange = (checked: boolean) => {
-    highlight()
-    onCheckedChange?.(checked)
-  }
-
-  return (
-    <div className={wrapper} {...animationProps}>
-      <Space y={0.5}>
-        <div className={checkboxHeader}>
-          <SpaceFlex align="center" space={0.5}>
-            {Icon}
-            <label className={labelText} htmlFor={identifier}>
-              {label}
-            </label>
-          </SpaceFlex>
-          <Switch id={identifier} onCheckedChange={handleCheckedChange} {...checkboxProps} />
-        </div>
-        {children}
-      </Space>
-    </div>
-  )
-}
diff --git a/apps/store/src/features/carDealership/ExtensionOfferToggle.tsx b/apps/store/src/features/carDealership/ExtensionOfferToggle.tsx
index c9d17afa31..db0b9bdaaa 100644
--- a/apps/store/src/features/carDealership/ExtensionOfferToggle.tsx
+++ b/apps/store/src/features/carDealership/ExtensionOfferToggle.tsx
@@ -1,23 +1,31 @@
 import { atom, useAtom, useAtomValue } from 'jotai'
 import { useTranslation } from 'next-i18next'
-import { CampaignIcon, Text, theme } from 'ui'
-import { ToggleCard } from '@/components/ToggleCard/ToggleCard'
+import { CampaignIcon, sprinkles, theme, ToggleCard } from 'ui'
 
 export const ExtensionOfferToggle = () => {
   const { t } = useTranslation('carDealership')
   const [userWantsExtension, setUserWantsExtension] = useSetUserWantsExtension()
 
   return (
-    <ToggleCard
-      label={t('TOGGLE_EXTENSION_LABEL')}
-      defaultChecked={userWantsExtension}
-      onCheckedChange={setUserWantsExtension}
-      Icon={<CampaignIcon size="1rem" color={theme.colors.signalGreenElement} />}
-    >
-      <Text as="p" color="textTranslucentSecondary" size="xs">
-        {t('TOGGLE_EXTENSION_DESCRIPTION')}
-      </Text>
-    </ToggleCard>
+    <ToggleCard.Root>
+      <ToggleCard.Label
+        pre={
+          <CampaignIcon
+            size="1rem"
+            color={theme.colors.signalGreenElement}
+            className={sprinkles({ mr: 'xxs' })}
+          />
+        }
+      >
+        {t('TOGGLE_EXTENSION_LABEL')}
+      </ToggleCard.Label>
+      <ToggleCard.Switch
+        defaultChecked={userWantsExtension}
+        onCheckedChange={setUserWantsExtension}
+      />
+
+      <ToggleCard.Description>{t('TOGGLE_EXTENSION_DESCRIPTION')}</ToggleCard.Description>
+    </ToggleCard.Root>
   )
 }