diff --git a/components/ui/fee-estimate-dialog.stories.tsx b/components/ui/fee-estimate-dialog.stories.tsx
new file mode 100644
index 0000000..00d8639
--- /dev/null
+++ b/components/ui/fee-estimate-dialog.stories.tsx
@@ -0,0 +1,205 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { FeeEstimateDialog } from "./fee-estimate-dialog"
+import { Button } from "./button"
+import React from "react"
+
+const meta = {
+  title: "UI/FeeEstimateDialog",
+  component: FeeEstimateDialog,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof FeeEstimateDialog>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+// Normal fee estimate (no warning)
+export const NormalFee: Story = {
+  render: () => {
+    const [open, setOpen] = React.useState(false)
+
+    return (
+      <>
+        <Button onClick={() => setOpen(true)}>View Fee Estimate</Button>
+        <FeeEstimateDialog
+          open={open}
+          onOpenChange={setOpen}
+          estimatedFee="0.50"
+          estimatedFeeUsd="0.50"
+          networkFee="0.10"
+          protocolFee="0.40"
+          totalAmount="100.00"
+          isHighFeeWarning={false}
+        />
+      </>
+    )
+  },
+}
+
+// High fee warning state
+export const HighFeeWarning: Story = {
+  render: () => {
+    const [open, setOpen] = React.useState(false)
+
+    return (
+      <>
+        <Button onClick={() => setOpen(true)} variant="destructive">
+          View Fee Estimate (High Fee)
+        </Button>
+        <FeeEstimateDialog
+          open={open}
+          onOpenChange={setOpen}
+          estimatedFee="15.00"
+          estimatedFeeUsd="15.00"
+          networkFee="10.00"
+          protocolFee="5.00"
+          totalAmount="100.00"
+          isHighFeeWarning={true}
+        />
+      </>
+    )
+  },
+}
+
+// Large transaction with normal fees
+export const LargeTransaction: Story = {
+  render: () => {
+    const [open, setOpen] = React.useState(false)
+
+    return (
+      <>
+        <Button onClick={() => setOpen(true)}>View Fee Estimate</Button>
+        <FeeEstimateDialog
+          open={open}
+          onOpenChange={setOpen}
+          estimatedFee="5.25"
+          estimatedFeeUsd="5.25"
+          networkFee="1.00"
+          protocolFee="4.25"
+          totalAmount="10000.00"
+          isHighFeeWarning={false}
+        />
+      </>
+    )
+  },
+}
+
+// Small transaction with high relative fees
+export const SmallTransactionHighFeeRatio: Story = {
+  render: () => {
+    const [open, setOpen] = React.useState(false)
+
+    return (
+      <>
+        <Button onClick={() => setOpen(true)} variant="destructive">
+          View Fee Estimate
+        </Button>
+        <FeeEstimateDialog
+          open={open}
+          onOpenChange={setOpen}
+          estimatedFee="8.50"
+          estimatedFeeUsd="8.50"
+          networkFee="5.00"
+          protocolFee="3.50"
+          totalAmount="10.00"
+          isHighFeeWarning={true}
+        />
+      </>
+    )
+  },
+}
+
+// Very high fees scenario
+export const VeryHighFees: Story = {
+  render: () => {
+    const [open, setOpen] = React.useState(false)
+
+    return (
+      <>
+        <Button onClick={() => setOpen(true)} variant="destructive">
+          View Fee Estimate (Very High)
+        </Button>
+        <FeeEstimateDialog
+          open={open}
+          onOpenChange={setOpen}
+          estimatedFee="250.00"
+          estimatedFeeUsd="250.00"
+          networkFee="200.00"
+          protocolFee="50.00"
+          totalAmount="1000.00"
+          isHighFeeWarning={true}
+        />
+      </>
+    )
+  },
+}
+
+// Minimal fees
+export const MinimalFees: Story = {
+  render: () => {
+    const [open, setOpen] = React.useState(false)
+
+    return (
+      <>
+        <Button onClick={() => setOpen(true)}>View Fee Estimate</Button>
+        <FeeEstimateDialog
+          open={open}
+          onOpenChange={setOpen}
+          estimatedFee="0.01"
+          estimatedFeeUsd="0.01"
+          networkFee="0.005"
+          protocolFee="0.005"
+          totalAmount="100.00"
+          isHighFeeWarning={false}
+        />
+      </>
+    )
+  },
+}
+
+// Comparison: Normal vs High Fee Side by Side (in separate components)
+export const StateComparison: Story = {
+  render: () => {
+    const [normalOpen, setNormalOpen] = React.useState(false)
+    const [highOpen, setHighOpen] = React.useState(false)
+
+    return (
+      <div className="grid grid-cols-2 gap-8">
+        <div className="space-y-4">
+          <h3 className="font-semibold">Normal Fee</h3>
+          <Button onClick={() => setNormalOpen(true)} className="w-full">
+            View Estimate
+          </Button>
+          <FeeEstimateDialog
+            open={normalOpen}
+            onOpenChange={setNormalOpen}
+            estimatedFee="0.50"
+            estimatedFeeUsd="0.50"
+            networkFee="0.10"
+            protocolFee="0.40"
+            totalAmount="100.00"
+            isHighFeeWarning={false}
+          />
+        </div>
+        <div className="space-y-4">
+          <h3 className="font-semibold">High Fee Warning</h3>
+          <Button onClick={() => setHighOpen(true)} className="w-full" variant="destructive">
+            View Estimate
+          </Button>
+          <FeeEstimateDialog
+            open={highOpen}
+            onOpenChange={setHighOpen}
+            estimatedFee="25.00"
+            estimatedFeeUsd="25.00"
+            networkFee="20.00"
+            protocolFee="5.00"
+            totalAmount="100.00"
+            isHighFeeWarning={true}
+          />
+        </div>
+      </div>
+    )
+  },
+}
diff --git a/components/ui/input.stories.tsx b/components/ui/input.stories.tsx
new file mode 100644
index 0000000..5885afc
--- /dev/null
+++ b/components/ui/input.stories.tsx
@@ -0,0 +1,117 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { Input } from "./input"
+
+const meta = {
+  title: "UI/Input",
+  component: Input,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    disabled: { control: "boolean" },
+    type: { control: "select", options: ["text", "email", "password", "number", "file"] },
+  },
+} satisfies Meta<typeof Input>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+// Default input state
+export const Default: Story = {
+  args: {
+    placeholder: "Enter text...",
+    type: "text",
+  },
+}
+
+// Disabled input
+export const Disabled: Story = {
+  args: {
+    placeholder: "Disabled input",
+    disabled: true,
+    type: "text",
+  },
+}
+
+// Invalid state with aria-invalid
+export const Invalid: Story = {
+  args: {
+    placeholder: "Invalid input",
+    "aria-invalid": true,
+    type: "text",
+  },
+}
+
+// File input type
+export const FileInput: Story = {
+  args: {
+    type: "file",
+  },
+}
+
+// Email input
+export const EmailInput: Story = {
+  args: {
+    type: "email",
+    placeholder: "your@email.com",
+  },
+}
+
+// Password input
+export const PasswordInput: Story = {
+  args: {
+    type: "password",
+    placeholder: "Enter password...",
+  },
+}
+
+// Number input
+export const NumberInput: Story = {
+  args: {
+    type: "number",
+    placeholder: "0",
+  },
+}
+
+// With value
+export const WithValue: Story = {
+  args: {
+    type: "text",
+    value: "Sample input value",
+    disabled: false,
+  },
+}
+
+// Large field
+export const LargeField: Story = {
+  args: {
+    type: "text",
+    placeholder: "Large input field",
+    className: "w-96",
+  },
+}
+
+// Comparison of states
+export const StateComparison: Story = {
+  render: () => (
+    <div className="space-y-4 w-96">
+      <div>
+        <label className="text-sm font-medium mb-1 block">Default</label>
+        <Input type="text" placeholder="Default state" />
+      </div>
+      <div>
+        <label className="text-sm font-medium mb-1 block">Disabled</label>
+        <Input type="text" placeholder="Disabled state" disabled />
+      </div>
+      <div>
+        <label className="text-sm font-medium mb-1 block">Invalid</label>
+        <Input type="text" placeholder="Invalid state" aria-invalid={true} />
+      </div>
+      <div>
+        <label className="text-sm font-medium mb-1 block">With Value</label>
+        <Input type="text" value="User input" disabled={false} />
+      </div>
+    </div>
+  ),
+}
diff --git a/components/ui/label.stories.tsx b/components/ui/label.stories.tsx
new file mode 100644
index 0000000..66e0e58
--- /dev/null
+++ b/components/ui/label.stories.tsx
@@ -0,0 +1,125 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { Label } from "./label"
+import { Input } from "./input"
+
+const meta = {
+  title: "UI/Label",
+  component: Label,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof Label>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+// Basic label
+export const Default: Story = {
+  args: {
+    children: "Email Address",
+    htmlFor: "email-input",
+  },
+}
+
+// Label with input (common pattern)
+export const WithInput: Story = {
+  render: () => (
+    <div className="space-y-2 w-96">
+      <Label htmlFor="email">Email Address</Label>
+      <Input id="email" type="email" placeholder="your@email.com" />
+    </div>
+  ),
+}
+
+// Disabled state
+export const DisabledState: Story = {
+  render: () => (
+    <div className="space-y-2 w-96">
+      <Label htmlFor="disabled-input" className="opacity-50">
+        Disabled Field
+      </Label>
+      <Input id="disabled-input" placeholder="This field is disabled" disabled />
+    </div>
+  ),
+}
+
+// Required field indicator
+export const RequiredField: Story = {
+  render: () => (
+    <div className="space-y-2 w-96">
+      <Label htmlFor="required" className="flex gap-1">
+        Name
+        <span className="text-destructive">*</span>
+      </Label>
+      <Input id="required" type="text" placeholder="Enter your name" required />
+    </div>
+  ),
+}
+
+// Label with error message
+export const WithError: Story = {
+  render: () => (
+    <div className="space-y-2 w-96">
+      <Label htmlFor="error-field" className="text-destructive">
+        Username
+      </Label>
+      <Input id="error-field" type="text" placeholder="Username" aria-invalid={true} />
+      <p className="text-xs text-destructive">Username already taken</p>
+    </div>
+  ),
+}
+
+// Label with helper text
+export const WithHelperText: Story = {
+  render: () => (
+    <div className="space-y-2 w-96">
+      <Label htmlFor="password">Password</Label>
+      <Input id="password" type="password" placeholder="Enter password" />
+      <p className="text-xs text-muted-foreground">Minimum 8 characters</p>
+    </div>
+  ),
+}
+
+// Form field group
+export const FormFieldGroup: Story = {
+  render: () => (
+    <div className="space-y-6 w-96">
+      <div className="space-y-2">
+        <Label htmlFor="first-name">First Name</Label>
+        <Input id="first-name" type="text" placeholder="John" />
+      </div>
+      <div className="space-y-2">
+        <Label htmlFor="last-name">Last Name</Label>
+        <Input id="last-name" type="text" placeholder="Doe" />
+      </div>
+      <div className="space-y-2">
+        <Label htmlFor="email" className="flex gap-1">
+          Email
+          <span className="text-destructive">*</span>
+        </Label>
+        <Input id="email" type="email" placeholder="john@example.com" required />
+      </div>
+    </div>
+  ),
+}
+
+// Label styling variations
+export const StylingVariations: Story = {
+  render: () => (
+    <div className="space-y-8">
+      <div className="space-y-2 w-96">
+        <Label className="text-base font-semibold">Large Label</Label>
+        <Input placeholder="Input with large label" />
+      </div>
+      <div className="space-y-2 w-96">
+        <Label className="text-sm">Small Label</Label>
+        <Input placeholder="Input with small label" />
+      </div>
+      <div className="space-y-2 w-96">
+        <Label className="font-bold uppercase">Uppercase Label</Label>
+        <Input placeholder="Input with uppercase label" />
+      </div>
+    </div>
+  ),
+}
diff --git a/components/ui/select.stories.tsx b/components/ui/select.stories.tsx
new file mode 100644
index 0000000..3f4dbec
--- /dev/null
+++ b/components/ui/select.stories.tsx
@@ -0,0 +1,220 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { Select } from "./select"
+import React from "react"
+
+const meta = {
+  title: "UI/Select",
+  component: Select,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof Select>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+// Default select with placeholder
+export const Default: Story = {
+  render: () => {
+    const [value, setValue] = React.useState<string>("")
+    const items = [
+      { value: "option1", label: "Option 1" },
+      { value: "option2", label: "Option 2" },
+      { value: "option3", label: "Option 3" },
+    ]
+
+    return (
+      <div className="w-96">
+        <Select
+          value={value}
+          onChange={(newValue) => setValue(newValue)}
+          placeholder="Select an option"
+          items={items}
+        />
+      </div>
+    )
+  },
+}
+
+// Select with selected value
+export const WithSelectedValue: Story = {
+  render: () => {
+    const [value, setValue] = React.useState<string>("option2")
+    const items = [
+      { value: "option1", label: "Option 1" },
+      { value: "option2", label: "Option 2" },
+      { value: "option3", label: "Option 3" },
+    ]
+
+    return (
+      <div className="w-96">
+        <Select
+          value={value}
+          onChange={(newValue) => setValue(newValue)}
+          items={items}
+        />
+      </div>
+    )
+  },
+}
+
+// Disabled select
+export const Disabled: Story = {
+  render: () => {
+    const items = [
+      { value: "option1", label: "Option 1" },
+      { value: "option2", label: "Option 2" },
+      { value: "option3", label: "Option 3" },
+    ]
+
+    return (
+      <div className="w-96">
+        <Select
+          disabled
+          placeholder="Select an option (disabled)"
+          items={items}
+        />
+      </div>
+    )
+  },
+}
+
+// Select with many options
+export const ManyOptions: Story = {
+  render: () => {
+    const [value, setValue] = React.useState<string>("")
+    const items = Array.from({ length: 20 }, (_, i) => ({
+      value: `option${i + 1}`,
+      label: `Option ${i + 1}`,
+    }))
+
+    return (
+      <div className="w-96">
+        <Select
+          value={value}
+          onChange={(newValue) => setValue(newValue)}
+          placeholder="Select from many options"
+          items={items}
+        />
+      </div>
+    )
+  },
+}
+
+// Token selection (common use case)
+export const TokenSelection: Story = {
+  render: () => {
+    const [value, setValue] = React.useState<string>("")
+    const tokens = [
+      { value: "usdc", label: "USDC" },
+      { value: "usdt", label: "USDT" },
+      { value: "eur", label: "EUR" },
+      { value: "xlm", label: "XLM" },
+    ]
+
+    return (
+      <div className="space-y-2 w-96">
+        <label className="text-sm font-medium">Select Token</label>
+        <Select
+          value={value}
+          onChange={(newValue) => setValue(newValue)}
+          placeholder="Choose a token"
+          items={tokens}
+        />
+      </div>
+    )
+  },
+}
+
+// Recurrence selection (from batch create page)
+export const RecurrenceSelection: Story = {
+  render: () => {
+    const [value, setValue] = React.useState<string>("")
+    const recurrenceOptions = [
+      { value: "once", label: "Once" },
+      { value: "daily", label: "Daily" },
+      { value: "weekly", label: "Weekly" },
+      { value: "monthly", label: "Monthly" },
+      { value: "yearly", label: "Yearly" },
+    ]
+
+    return (
+      <div className="space-y-2 w-96">
+        <label className="text-sm font-medium">Recurrence</label>
+        <Select
+          value={value}
+          onChange={(newValue) => setValue(newValue)}
+          placeholder="Select recurrence"
+          items={recurrenceOptions}
+        />
+      </div>
+    )
+  },
+}
+
+// Select with error state
+export const WithError: Story = {
+  render: () => {
+    const [value, setValue] = React.useState<string>("")
+    const items = [
+      { value: "option1", label: "Option 1" },
+      { value: "option2", label: "Option 2" },
+    ]
+
+    return (
+      <div className="space-y-2 w-96">
+        <label className="text-sm font-medium">Required Field</label>
+        <Select
+          value={value}
+          onChange={(newValue) => setValue(newValue)}
+          placeholder="Select an option"
+          items={items}
+          aria-invalid={!value}
+        />
+        {!value && <p className="text-xs text-destructive">This field is required</p>}
+      </div>
+    )
+  },
+}
+
+// Multiple selects side by side
+export const MultipleSelects: Story = {
+  render: () => {
+    const [token, setToken] = React.useState<string>("")
+    const [recurrence, setRecurrence] = React.useState<string>("")
+
+    const tokenItems = [
+      { value: "usdc", label: "USDC" },
+      { value: "usdt", label: "USDT" },
+    ]
+
+    const recurrenceItems = [
+      { value: "once", label: "Once" },
+      { value: "monthly", label: "Monthly" },
+    ]
+
+    return (
+      <div className="grid grid-cols-2 gap-4 w-full max-w-2xl">
+        <div className="space-y-2">
+          <label className="text-sm font-medium">Token</label>
+          <Select
+            value={token}
+            onChange={setToken}
+            placeholder="Select token"
+            items={tokenItems}
+          />
+        </div>
+        <div className="space-y-2">
+          <label className="text-sm font-medium">Recurrence</label>
+          <Select
+            value={recurrence}
+            onChange={setRecurrence}
+            placeholder="Select recurrence"
+            items={recurrenceItems}
+          />
+        </div>
+      </div>
+    )
+  },
+}