diff --git a/blocks/card-grid-course/src/CardGridCourse.stories.tsx b/blocks/card-grid-course/src/CardGridCourse.stories.tsx
new file mode 100644
index 0000000..1454894
--- /dev/null
+++ b/blocks/card-grid-course/src/CardGridCourse.stories.tsx
@@ -0,0 +1,36 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import storyDialog from "../../../.storybook/decorators/storyDialog";
+import Usage from "../usage.mdx";
+import CardGridCourse from "./CardGridCourse";
+
+const meta = {
+  title: "Card/Grid/Course",
+  component: CardGridCourse,
+  parameters: {
+    layout: "centered",
+    githubUsername: "", // (optional) Your github username. If provided, your avatar will be displayed in the story toolbar
+  },
+  decorators: [storyDialog(Usage)],
+} satisfies Meta<typeof CardGridCourse>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Course: Story = {
+  render: () => (
+    <div 
+      style={{
+        width: 340,
+        padding: 20,
+        maxWidth: "100%",
+        resize: "horizontal",
+        overflow: "auto",
+      }}
+    >
+      <CardGridCourse />
+    </div>
+  ),
+};
+
+
diff --git a/blocks/card-grid-course/src/CardGridCourse.tsx b/blocks/card-grid-course/src/CardGridCourse.tsx
new file mode 100644
index 0000000..3aff180
--- /dev/null
+++ b/blocks/card-grid-course/src/CardGridCourse.tsx
@@ -0,0 +1,8 @@
+import React from "react";
+import Box from "@mui/joy/Box";
+
+export default function CardGridCourse() {
+  return (
+    <Box>It's working</Box>
+  );
+}
diff --git a/blocks/card-grid-course/src/index.ts b/blocks/card-grid-course/src/index.ts
new file mode 100644
index 0000000..2cd1634
--- /dev/null
+++ b/blocks/card-grid-course/src/index.ts
@@ -0,0 +1 @@
+export { default as CardGridCourse } from "./CardGridCourse";
diff --git a/blocks/card-grid-course/usage.mdx b/blocks/card-grid-course/usage.mdx
new file mode 100644
index 0000000..29d53f2
--- /dev/null
+++ b/blocks/card-grid-course/usage.mdx
@@ -0,0 +1,14 @@
+import { Meta, Source } from "@storybook/blocks";
+import raw from "./src/CardGridCourse?raw";
+
+<Meta title="Card/Grid/Course" />
+
+## CLI
+
+```sh
+npx joy-treasury@latest clone card-grid-course
+```
+
+## CardGridCourse
+
+<Source code={raw} language="tsx" />