diff --git a/airbyte-webapp/src/components/SingletonCard/SingletonCard.tsx b/airbyte-webapp/src/components/SingletonCard/SingletonCard.tsx
index 822f98d69c32..e310f0ea3e96 100644
--- a/airbyte-webapp/src/components/SingletonCard/SingletonCard.tsx
+++ b/airbyte-webapp/src/components/SingletonCard/SingletonCard.tsx
@@ -69,7 +69,7 @@ const CloseButton = styled(Button)`
   margin-left: 10px;
 `;
 
-const SingletonCard: React.FC<SingletonCardProps> = (props) => (
+export const SingletonCard: React.FC<SingletonCardProps> = (props) => (
   <Singleton hasError={props.hasError}>
     {props.hasError && <ErrorSign />}
     <div>
diff --git a/airbyte-webapp/src/components/SingletonCard/index.stories.tsx b/airbyte-webapp/src/components/SingletonCard/index.stories.tsx
new file mode 100644
index 000000000000..8321f7ccd197
--- /dev/null
+++ b/airbyte-webapp/src/components/SingletonCard/index.stories.tsx
@@ -0,0 +1,35 @@
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+import { SingletonCard } from "./SingletonCard";
+
+export default {
+  title: "Ui/SingletonCard",
+  component: SingletonCard,
+  argTypes: {
+    title: { type: { name: "string", required: false } },
+    text: { type: { name: "string", required: false } },
+    onClose: { table: { disable: true } },
+  },
+} as ComponentMeta<typeof SingletonCard>;
+
+const Template: ComponentStory<typeof SingletonCard> = (args) => <SingletonCard {...args} />;
+
+export const Basic = Template.bind({});
+Basic.args = {
+  text: "This is a basic card",
+};
+
+export const WithTitle = Template.bind({});
+WithTitle.args = {
+  title: "With Title",
+  text: "This is a card with a title",
+};
+
+export const WithCloseButton = Template.bind({});
+WithCloseButton.args = {
+  title: "With Close button",
+  text: "This is a card with a close button",
+  onClose: () => {
+    console.log("Closed!");
+  },
+};