diff --git a/packages/react-components/react-card/src/stories/CardAppearance.stories.tsx b/packages/react-components/react-card/src/stories/CardAppearance.stories.tsx
index fc75419322bf49..940b460782a340 100644
--- a/packages/react-components/react-card/src/stories/CardAppearance.stories.tsx
+++ b/packages/react-components/react-card/src/stories/CardAppearance.stories.tsx
@@ -1,10 +1,8 @@
 import * as React from 'react';
 import { action } from '@storybook/addon-actions';
-import { Headline, Title3 } from '@fluentui/react-text';
+import { Headline } from '@fluentui/react-text';
 import { makeStyles, shorthands } from '@griffel/react';
 import { SampleCard } from './SampleCard.stories';
-import { FluentProvider } from '@fluentui/react-provider';
-import { webDarkTheme, webHighContrastTheme, webLightTheme } from '@fluentui/react-theme';
 
 const useStyles = makeStyles({
   container: {
@@ -32,12 +30,11 @@ const Title = (props: { children: React.ReactNode }) => {
   );
 };
 
-const AppearanceExamples = (props: { title: string }) => {
+export const Appearance = () => {
   const styles = useStyles();
 
   return (
     <div className={styles.themeContainer}>
-      <Title3>{props.title}</Title3>
       <div>
         <Title>Filled (default)</Title>
         <SampleCard appearance="filled" />
@@ -73,21 +70,3 @@ const AppearanceExamples = (props: { title: string }) => {
     </div>
   );
 };
-
-export const Appearance = () => {
-  const styles = useStyles();
-
-  return (
-    <div className={styles.container}>
-      <FluentProvider theme={webLightTheme}>
-        <AppearanceExamples title="Light theme" />
-      </FluentProvider>
-      <FluentProvider theme={webDarkTheme}>
-        <AppearanceExamples title="Dark theme" />
-      </FluentProvider>
-      <FluentProvider theme={webHighContrastTheme}>
-        <AppearanceExamples title="High contrast theme" />
-      </FluentProvider>
-    </div>
-  );
-};