diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index 082627e..05e4b27 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -19,7 +19,7 @@ const preview: Preview = {
     decorators: [
         (Story) => (
             <main
-                className={`${poppins.variable} ${yellowtail.variable} bg-champagne text-wenge`}
+                className={`${poppins.variable} ${yellowtail.variable} text-wenge`}
                 style={{
                     fontFamily: 'Verdana, Arial, Helvetica, sans-serif',
                 }}
diff --git a/stories/InfoMessageWrapper.stories.tsx b/stories/InfoMessageWrapper.stories.tsx
new file mode 100644
index 0000000..3185709
--- /dev/null
+++ b/stories/InfoMessageWrapper.stories.tsx
@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+// Components
+import InfoMessageWrapper from '@/components/sections/SectionMint/InfoMessageWrapper'
+
+const meta = {
+    title: 'InfoMessageWrapper',
+    component: InfoMessageWrapper,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {},
+    args: {
+        isActionRequired: true,
+        isError: false,
+        isLoading: false,
+        isMetadataLoading: false,
+        isSuccess: false,
+        children:
+            'Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt magni repellendus blanditiis iusto. Fugiat, quos.',
+    },
+} satisfies Meta<typeof InfoMessageWrapper>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}
diff --git a/stories/LoaderDots.stories.tsx b/stories/LoaderDots.stories.tsx
new file mode 100644
index 0000000..7fc9a9c
--- /dev/null
+++ b/stories/LoaderDots.stories.tsx
@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+// Components
+import LoaderDots from '../components/common/LoaderDots'
+
+const meta = {
+    title: 'Loaders/LoaderDots',
+    component: LoaderDots,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {},
+    args: {},
+} satisfies Meta<typeof LoaderDots>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}
diff --git a/stories/LoaderSquare.stories.tsx b/stories/LoaderSquare.stories.tsx
new file mode 100644
index 0000000..40ea5bc
--- /dev/null
+++ b/stories/LoaderSquare.stories.tsx
@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+// Components
+import LoaderSquare from '../components/common/LoaderSquare'
+
+const meta = {
+    title: 'Loaders/LoaderSquare',
+    component: LoaderSquare,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {},
+    args: {},
+} satisfies Meta<typeof LoaderSquare>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}
diff --git a/stories/NFTCard.stories.tsx b/stories/NFTCard.stories.tsx
new file mode 100644
index 0000000..65a3839
--- /dev/null
+++ b/stories/NFTCard.stories.tsx
@@ -0,0 +1,59 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { useArgs } from '@storybook/preview-api'
+
+// Components
+import NftCard from '@/components/NftCard'
+import Button from '@/components/common/Button'
+
+// Sample data
+import { nftCardData } from './sampleData'
+
+const meta = {
+    title: 'NftCard',
+    component: NftCard,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {},
+    args: {
+        data: nftCardData,
+    },
+} satisfies Meta<typeof NftCard>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}
+
+export const TestFlip: Story = {
+    args: {},
+    decorators: [
+        (Story) => {
+            const [args, updateArgs] = useArgs()
+
+            return (
+                <>
+                    <div className="flex justify-center py-5">
+                        <Button
+                            type="button"
+                            variation="transparent"
+                            onClick={() =>
+                                updateArgs({
+                                    data: { ...nftCardData },
+                                })
+                            }
+                        >
+                            flip it
+                        </Button>
+                    </div>
+                    <Story
+                        args={{
+                            ...args,
+                        }}
+                    />
+                </>
+            )
+        },
+    ],
+}
diff --git a/stories/Title.stories.tsx b/stories/Title.stories.tsx
new file mode 100644
index 0000000..8858d61
--- /dev/null
+++ b/stories/Title.stories.tsx
@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+// Components
+import Title from '../components/common/Title'
+
+const meta = {
+    title: 'Title',
+    component: Title,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {},
+    args: {
+        title: 'Lorem Ipsum',
+        children:
+            'Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt magni repellendus blanditiis iusto. Fugiat, quos.',
+    },
+} satisfies Meta<typeof Title>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}
diff --git a/stories/sampleData.ts b/stories/sampleData.ts
new file mode 100644
index 0000000..d533c6a
--- /dev/null
+++ b/stories/sampleData.ts
@@ -0,0 +1,17 @@
+export const nftCardData = {
+    id: {
+        tokenId: '9',
+    },
+    title: 'lorem ipsum',
+    metadata: {
+        external_url: '',
+
+        customImage: '',
+        customAnimationUrl: '',
+        name: 'Jasper',
+        description:
+            'A calm presence with eyes that reflect ancient wisdom, always watching and pondering.',
+        image: 'ipfs://QmYEtAwV7PawgJGaLWh2L33qeMWkg6wtQMqkZN5qEApTYv',
+        background_color: 'E2E3C6',
+    },
+}