diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml
new file mode 100644
index 0000000..67799cc
--- /dev/null
+++ b/.github/workflows/chromatic.yml
@@ -0,0 +1,20 @@
+name: "Chromatic"
+
+on: push
+
+jobs:
+  chromatic:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Run Chromatic
+        uses: chromaui/action@latest
+        with:
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
\ No newline at end of file
diff --git a/chromatic.config.json b/chromatic.config.json
new file mode 100644
index 0000000..283de8a
--- /dev/null
+++ b/chromatic.config.json
@@ -0,0 +1,4 @@
+{
+  "projectId": "Project:66228a3205a9e64e345243d6",
+  "zip": true
+}
diff --git a/components/sidebar.stories.tsx b/components/sidebar.stories.tsx
index 5a6f2bf..b7e5ef3 100644
--- a/components/sidebar.stories.tsx
+++ b/components/sidebar.stories.tsx
@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react'
-import { notes } from '#prisma/mock-data';
 import Sidebar from "./sidebar";
+import { createNotes } from '#mocks/notes';
 
 const meta = {
   component: Sidebar,
@@ -11,7 +11,7 @@ export default meta;
 type Story = StoryObj<typeof meta>
 export const Default: Story = {
   args: {
-    notes: notes,
+    notes: createNotes(),
     children: null
   }
 }