diff --git a/components/SuccessStory/SuccessStory.js b/components/SuccessStory/SuccessStory.js
deleted file mode 100644
index 2cbe39469..000000000
--- a/components/SuccessStory/SuccessStory.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import { string } from 'prop-types';
-import FlatCard from 'components/Cards/FlatCard/FlatCard';
-
-SuccessStory.propTypes = {
-  imageSource: string.isRequired,
-  quote: string.isRequired,
-  title: string.isRequired,
-};
-
-function SuccessStory({ imageSource, quote, title }) {
-  return (
-    <FlatCard header={title} image={{ source: imageSource, alt: '' }}>
-      <blockquote>{`"${quote}"`}</blockquote>
-    </FlatCard>
-  );
-}
-
-export default SuccessStory;
diff --git a/components/SuccessStory/SuccessStory.tsx b/components/SuccessStory/SuccessStory.tsx
new file mode 100644
index 000000000..cb327c322
--- /dev/null
+++ b/components/SuccessStory/SuccessStory.tsx
@@ -0,0 +1,26 @@
+import FlatCard from 'components/Cards/FlatCard/FlatCard';
+
+export type SuccessStoryPropsType = {
+  /**
+   * Path to image used on the card.
+   */
+  imageSource: string;
+  /**
+   * String applied tot he block quote element.
+   */
+  quote: string;
+  /**
+   * String applied to the card header.
+   */
+  title: string;
+};
+
+function SuccessStory({ imageSource, quote, title }: SuccessStoryPropsType) {
+  return (
+    <FlatCard header={title} image={{ source: imageSource, alt: '' }}>
+      <blockquote>{`"${quote}"`}</blockquote>
+    </FlatCard>
+  );
+}
+
+export default SuccessStory;
diff --git a/components/SuccessStory/__stories__/SuccessStory.stories.js b/components/SuccessStory/__stories__/SuccessStory.stories.js
deleted file mode 100644
index 88961e3d6..000000000
--- a/components/SuccessStory/__stories__/SuccessStory.stories.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import { descriptions } from 'common/constants/descriptions';
-import { s3 } from 'common/constants/urls';
-import SuccessStory from '../SuccessStory';
-
-export default {
-  component: SuccessStory,
-  title: 'SuccessStory',
-};
-
-const Template = arguments_ => <SuccessStory {...arguments_} />;
-
-export const Default = Template.bind({});
-Default.args = {
-  imageSource: `${s3}headshots/david_molina.jpg`,
-  quote: descriptions.long,
-  title: 'Name of Person',
-};
diff --git a/components/SuccessStory/__stories__/SuccessStory.stories.tsx b/components/SuccessStory/__stories__/SuccessStory.stories.tsx
new file mode 100644
index 000000000..8485ed4e2
--- /dev/null
+++ b/components/SuccessStory/__stories__/SuccessStory.stories.tsx
@@ -0,0 +1,22 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { descriptions } from 'common/constants/descriptions';
+import { s3 } from 'common/constants/urls';
+import SuccessStory from '../SuccessStory';
+
+type SuccessStoryType = StoryObj<typeof SuccessStory>;
+
+const meta: Meta<typeof SuccessStory> = {
+  title: 'SuccesStory',
+  component: SuccessStory,
+  args: {
+    title: 'Name of Person',
+    imageSource: `${s3}headshots/david_molina.jpg`,
+    quote: descriptions.long,
+  },
+};
+
+export default meta;
+
+export const Default: SuccessStoryType = {
+  render: args => <SuccessStory {...args} />,
+};
diff --git a/components/SuccessStory/__tests__/SuccessStory.test.js b/components/SuccessStory/__tests__/SuccessStory.test.tsx
similarity index 99%
rename from components/SuccessStory/__tests__/SuccessStory.test.js
rename to components/SuccessStory/__tests__/SuccessStory.test.tsx
index 67a3273af..53349fdc3 100644
--- a/components/SuccessStory/__tests__/SuccessStory.test.js
+++ b/components/SuccessStory/__tests__/SuccessStory.test.tsx
@@ -1,5 +1,4 @@
 import createShallowSnapshotTest from 'test-utils/createShallowSnapshotTest';
-
 import SuccessStory from '../SuccessStory';
 
 describe('SuccessStory', () => {
diff --git a/components/SuccessStory/__tests__/__snapshots__/SuccessStory.test.js.snap b/components/SuccessStory/__tests__/__snapshots__/SuccessStory.test.tsx.snap
similarity index 100%
rename from components/SuccessStory/__tests__/__snapshots__/SuccessStory.test.js.snap
rename to components/SuccessStory/__tests__/__snapshots__/SuccessStory.test.tsx.snap