diff --git a/frontend/.gitignore b/frontend/.gitignore
index 68e2ea05..84bb21be 100644
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@@ -2,6 +2,9 @@
 dist/
 dist-ssr/
 
+# Storybook build output
+storybook-static/
+
 # Vitest coverage
 coverage/
 
diff --git a/frontend/src/components/UI/ConfirmModal.stories.tsx b/frontend/src/components/UI/ConfirmModal.stories.tsx
new file mode 100644
index 00000000..2c43485d
--- /dev/null
+++ b/frontend/src/components/UI/ConfirmModal.stories.tsx
@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { fn } from '@storybook/test'
+import { ConfirmModal } from './ConfirmModal'
+
+const meta: Meta<typeof ConfirmModal> = {
+  title: 'UI/ConfirmModal',
+  component: ConfirmModal,
+  tags: ['autodocs'],
+  args: {
+    isOpen: true,
+    title: 'Confirm Transaction',
+    details: [
+      { label: 'Amount', value: '100 XLM' },
+      { label: 'Recipient', value: 'GABCD…WXYZ' },
+      { label: 'Network Fee', value: '0.00001 XLM' },
+    ],
+    onConfirm: fn(),
+    onCancel: fn(),
+  },
+  parameters: { layout: 'fullscreen' },
+}
+export default meta
+
+type Story = StoryObj<typeof ConfirmModal>
+
+export const Default: Story = {
+  args: {
+    description: 'Please review the details before confirming.',
+  },
+}
+
+export const WithoutDescription: Story = {}
+
+export const DestructiveAction: Story = {
+  args: {
+    title: 'Delete Token',
+    description: 'This action cannot be undone.',
+    confirmLabel: 'Delete',
+    details: [{ label: 'Token', value: 'MTK — My Token' }],
+  },
+}
+
+export const Closed: Story = { args: { isOpen: false } }
diff --git a/frontend/src/components/UI/InsufficientBalanceWarning.stories.tsx b/frontend/src/components/UI/InsufficientBalanceWarning.stories.tsx
new file mode 100644
index 00000000..d38f2350
--- /dev/null
+++ b/frontend/src/components/UI/InsufficientBalanceWarning.stories.tsx
@@ -0,0 +1,49 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { fn } from '@storybook/test'
+import { InsufficientBalanceWarning } from './InsufficientBalanceWarning'
+import { WalletContext } from '../../context/WalletContext'
+import { ToastContext } from '../../context/ToastContext'
+
+const mockWalletValue = {
+  wallet: { address: 'GABCDEFGHIJKLMNOPQRSTUVWXYZ234567', isConnected: true, balance: '5.0000000' },
+  isConnecting: false,
+  error: null,
+  isInstalled: true,
+  connect: fn(),
+  disconnect: fn(),
+  refreshBalance: fn(),
+}
+
+const mockToastValue = {
+  toasts: [],
+  addToast: fn(),
+  removeToast: fn(),
+}
+
+const meta: Meta<typeof InsufficientBalanceWarning> = {
+  title: 'UI/InsufficientBalanceWarning',
+  component: InsufficientBalanceWarning,
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <WalletContext.Provider value={mockWalletValue}>
+        <ToastContext.Provider value={mockToastValue}>
+          <Story />
+        </ToastContext.Provider>
+      </WalletContext.Provider>
+    ),
+  ],
+  args: {
+    shortfall: '0.5000000',
+    isTestnet: true,
+  },
+}
+export default meta
+
+type Story = StoryObj<typeof InsufficientBalanceWarning>
+
+export const Default: Story = {}
+
+export const Mainnet: Story = { args: { isTestnet: false } }
+
+export const LargeShortfall: Story = { args: { shortfall: '125.0000000' } }
diff --git a/frontend/src/components/UI/ProgressIndicator.stories.tsx b/frontend/src/components/UI/ProgressIndicator.stories.tsx
new file mode 100644
index 00000000..53a6de9a
--- /dev/null
+++ b/frontend/src/components/UI/ProgressIndicator.stories.tsx
@@ -0,0 +1,51 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { ProgressIndicator } from './ProgressIndicator'
+
+const meta: Meta<typeof ProgressIndicator> = {
+  title: 'UI/ProgressIndicator',
+  component: ProgressIndicator,
+  tags: ['autodocs'],
+}
+export default meta
+
+type Story = StoryObj<typeof ProgressIndicator>
+
+export const Default: Story = {
+  args: {
+    steps: [
+      { label: 'Validate token details', status: 'pending' },
+      { label: 'Submit transaction', status: 'pending' },
+      { label: 'Confirm on network', status: 'pending' },
+    ],
+  },
+}
+
+export const InProgress: Story = {
+  args: {
+    steps: [
+      { label: 'Validate token details', status: 'completed' },
+      { label: 'Submit transaction', status: 'in-progress' },
+      { label: 'Confirm on network', status: 'pending' },
+    ],
+  },
+}
+
+export const Completed: Story = {
+  args: {
+    steps: [
+      { label: 'Validate token details', status: 'completed' },
+      { label: 'Submit transaction', status: 'completed' },
+      { label: 'Confirm on network', status: 'completed' },
+    ],
+  },
+}
+
+export const WithError: Story = {
+  args: {
+    steps: [
+      { label: 'Validate token details', status: 'completed' },
+      { label: 'Submit transaction', status: 'error' },
+      { label: 'Confirm on network', status: 'pending' },
+    ],
+  },
+}