diff --git a/client/src/components/ui-new/badge.tsx b/client/src/components/ui-new/badge.tsx
new file mode 100644
index 0000000..05087d7
--- /dev/null
+++ b/client/src/components/ui-new/badge.tsx
@@ -0,0 +1,60 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "./button"
+
+/**
+ * Badge Component Variants
+ * Default, Primary, Success, Warning, Error, Info variants
+ */
+const badgeVariants = cva(
+  "inline-flex items-center justify-center gap-1.5 whitespace-nowrap rounded-full font-medium transition-all duration-200",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-slate-700 text-slate-200 hover:bg-slate-600",
+        primary:
+          "bg-[#3B82F6]/20 text-[#3B82F6] hover:bg-[#3B82F6]/30 border border-[#3B82F6]/30",
+        success:
+          "bg-emerald-500/20 text-emerald-400 hover:bg-emerald-500/30 border border-emerald-500/30",
+        warning:
+          "bg-amber-500/20 text-amber-400 hover:bg-amber-500/30 border border-amber-500/30",
+        error:
+          "bg-red-500/20 text-red-400 hover:bg-red-500/30 border border-red-500/30",
+        info:
+          "bg-cyan-500/20 text-cyan-400 hover:bg-cyan-500/30 border border-cyan-500/30",
+      },
+      size: {
+        sm: "px-2 py-0.5 text-xs",
+        md: "px-3 py-1 text-sm",
+        lg: "px-4 py-1.5 text-base",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "md",
+    },
+  }
+)
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLSpanElement>,
+    VariantProps<typeof badgeVariants> {
+  icon?: React.ReactNode
+}
+
+const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(
+  ({ className, variant, size, icon, children, ...props }, ref) => (
+    <span
+      ref={ref}
+      className={cn(badgeVariants({ variant, size, className }))}
+      {...props}
+    >
+      {icon && <span className="flex-shrink-0">{icon}</span>}
+      {children}
+    </span>
+  )
+)
+Badge.displayName = "Badge"
+
+export { Badge, badgeVariants }
diff --git a/client/src/components/ui-new/button.tsx b/client/src/components/ui-new/button.tsx
new file mode 100644
index 0000000..5c4849f
--- /dev/null
+++ b/client/src/components/ui-new/button.tsx
@@ -0,0 +1,94 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+/**
+ * Utility function to merge Tailwind classes
+ */
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
+
+/**
+ * Button Component Variants
+ * Primary, Secondary, Ghost, and Icon variants
+ */
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        primary:
+          "bg-[#3B82F6] text-white hover:bg-[#2563EB] active:bg-[#1D4ED8] shadow-md hover:shadow-lg focus-visible:ring-[#3B82F6]",
+        secondary:
+          "border border-[#3B82F6] bg-transparent text-[#3B82F6] hover:bg-[#3B82F6]/10 active:bg-[#3B82F6]/20 focus-visible:ring-[#3B82F6]",
+        ghost:
+          "bg-transparent text-slate-400 hover:bg-slate-800 hover:text-slate-200 focus-visible:ring-slate-400",
+        danger:
+          "bg-red-600 text-white hover:bg-red-700 active:bg-red-800 shadow-md hover:shadow-lg focus-visible:ring-red-600",
+        outline:
+          "border border-slate-600 bg-transparent text-slate-300 hover:bg-slate-800 hover:text-slate-200 focus-visible:ring-slate-400",
+      },
+      size: {
+        sm: "h-8 px-3 text-sm",
+        md: "h-10 px-4 text-base",
+        lg: "h-12 px-6 text-lg",
+        icon: "h-10 w-10 p-2",
+        "icon-sm": "h-8 w-8 p-1.5",
+        "icon-lg": "h-12 w-12 p-2.5",
+      },
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "md",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+  loading?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, loading, disabled, children, ...props }, ref) => {
+    return (
+      <button
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        disabled={disabled || loading}
+        {...props}
+      >
+        {loading && (
+          <svg
+            className="h-4 w-4 animate-spin"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+          >
+            <circle
+              className="opacity-25"
+              cx="12"
+              cy="12"
+              r="10"
+              stroke="currentColor"
+              strokeWidth="4"
+            />
+            <path
+              className="opacity-75"
+              fill="currentColor"
+              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+            />
+          </svg>
+        )}
+        {children}
+      </button>
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }
diff --git a/client/src/components/ui-new/card.tsx b/client/src/components/ui-new/card.tsx
new file mode 100644
index 0000000..3f796f4
--- /dev/null
+++ b/client/src/components/ui-new/card.tsx
@@ -0,0 +1,118 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "./button"
+
+/**
+ * Card Component Variants
+ * Three-tier hierarchy: Primary, Secondary, Tertiary
+ */
+const cardVariants = cva(
+  "rounded-xl border transition-all duration-200",
+  {
+    variants: {
+      variant: {
+        // Primary: Critical information with accent
+        primary:
+          "bg-slate-800/90 border-slate-700 shadow-lg backdrop-blur-sm border-l-4 border-l-[#3B82F6]",
+        // Secondary: Supporting information
+        secondary:
+          "bg-slate-800/70 border-slate-700/50 shadow-md backdrop-blur-sm",
+        // Tertiary: Background containers
+        tertiary:
+          "bg-slate-900/50 border-slate-700/30",
+        // Glass: Glassmorphism effect
+        glass:
+          "bg-slate-800/40 backdrop-blur-xl border-white/10 shadow-xl hover:bg-slate-800/60 hover:border-white/20",
+        // Interactive: Hover effects
+        interactive:
+          "bg-slate-800/80 border-slate-700 cursor-pointer hover:bg-slate-800 hover:border-slate-600 hover:shadow-lg transition-all",
+      },
+      padding: {
+        none: "",
+        sm: "p-4",
+        md: "p-6",
+        lg: "p-8",
+      },
+    },
+    defaultVariants: {
+      variant: "secondary",
+      padding: "md",
+    },
+  }
+)
+
+export interface CardProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof cardVariants> {}
+
+const Card = React.forwardRef<HTMLDivElement, CardProps>(
+  ({ className, variant, padding, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(cardVariants({ variant, padding, className }))}
+      {...props}
+    />
+  )
+)
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5", className)}
+    {...props}
+  />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight text-slate-100",
+      className
+    )}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn("text-sm text-slate-400", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center pt-4 mt-4 border-t border-slate-700/50", className)}
+    {...props}
+  />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, cardVariants }
diff --git a/client/src/components/ui-new/dialog.tsx b/client/src/components/ui-new/dialog.tsx
new file mode 100644
index 0000000..15952df
--- /dev/null
+++ b/client/src/components/ui-new/dialog.tsx
@@ -0,0 +1,223 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "./button"
+
+/**
+ * Dialog Component
+ * Modal overlay with backdrop blur, focus trap, and keyboard support
+ */
+const dialogVariants = cva(
+  "relative z-50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
+  {
+    variants: {
+      size: {
+        sm: "max-w-sm",
+        md: "max-w-md",
+        lg: "max-w-lg",
+        xl: "max-w-xl",
+        "2xl": "max-w-2xl",
+        full: "max-w-full",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+    },
+  }
+)
+
+export interface DialogProps {
+  open: boolean
+  onClose: () => void
+  children: React.ReactNode
+  size?: VariantProps<typeof dialogVariants>["size"]
+  className?: string
+}
+
+const Dialog = React.forwardRef<HTMLDivElement, DialogProps>(
+  ({ open, onClose, children, size, className }, forwardedRef) => {
+    const dialogRef = React.useRef<HTMLDivElement>(null)
+    
+    React.useImperativeHandle(forwardedRef, () => dialogRef.current!)
+    const [mounted, setMounted] = React.useState(false)
+
+    React.useEffect(() => {
+      setMounted(true)
+      return () => setMounted(false)
+    }, [])
+
+    React.useEffect(() => {
+      if (open) {
+        document.body.style.overflow = "hidden"
+        const firstFocusable = dialogRef.current?.querySelector(
+          'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+        ) as HTMLElement | null
+        firstFocusable?.focus()
+      } else {
+        document.body.style.overflow = ""
+      }
+      return () => {
+        document.body.style.overflow = ""
+      }
+    }, [open])
+
+    React.useEffect(() => {
+      const handleKeyDown = (e: KeyboardEvent) => {
+        if (!open) return
+        if (e.key === "Escape") {
+          onClose()
+        }
+        if (e.key === "Tab" && dialogRef.current) {
+          const focusableElements = dialogRef.current.querySelectorAll(
+            'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+          )
+          const firstElement = focusableElements[0] as HTMLElement
+          const lastElement = focusableElements[focusableElements.length - 1] as HTMLElement
+          if (e.shiftKey && document.activeElement === firstElement) {
+            e.preventDefault()
+            lastElement.focus()
+          } else if (!e.shiftKey && document.activeElement === lastElement) {
+            e.preventDefault()
+            firstElement.focus()
+          }
+        }
+      }
+      document.addEventListener("keydown", handleKeyDown)
+      return () => document.removeEventListener("keydown", handleKeyDown)
+    }, [open, onClose])
+
+    if (!mounted || !open) return null
+
+    return (
+      <div className="fixed inset-0 z-50 flex items-center justify-center">
+        <div
+          className="fixed inset-0 bg-black/60 backdrop-blur-sm transition-opacity"
+          onClick={onClose}
+          aria-hidden="true"
+        />
+        <div
+          ref={dialogRef}
+          className={cn(
+            dialogVariants({ size, className }),
+            "w-full mx-4 bg-slate-800/95 border border-slate-700 shadow-2xl rounded-xl overflow-hidden"
+          )}
+          role="dialog"
+          aria-modal="true"
+        >
+          {children}
+        </div>
+      </div>
+    )
+  }
+)
+Dialog.displayName = "Dialog"
+
+const DialogHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "flex flex-col space-y-1.5 p-6 border-b border-slate-700/50",
+      className
+    )}
+    {...props}
+  />
+))
+DialogHeader.displayName = "DialogHeader"
+
+const DialogTitle = React.forwardRef<
+  HTMLHeadingElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h2
+    ref={ref}
+    className={cn(
+      "text-xl font-semibold leading-none tracking-tight text-slate-100",
+      className
+    )}
+    {...props}
+  />
+))
+DialogTitle.displayName = "DialogTitle"
+
+const DialogDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn("text-sm text-slate-400", className)}
+    {...props}
+  />
+))
+DialogDescription.displayName = "DialogDescription"
+
+const DialogContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("p-6", className)}
+    {...props}
+  />
+))
+DialogContent.displayName = "DialogContent"
+
+const DialogFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "flex items-center justify-end gap-3 p-6 border-t border-slate-700/50",
+      className
+    )}
+    {...props}
+  />
+))
+DialogFooter.displayName = "DialogFooter"
+
+const DialogCloseButton = React.forwardRef<
+  HTMLButtonElement,
+  React.ButtonHTMLAttributes<HTMLButtonElement> & { onClose?: () => void }
+>(({ onClose, className, ...props }, ref) => (
+  <button
+    ref={ref}
+    onClick={onClose}
+    className={cn(
+      "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:pointer-events-none",
+      className
+    )}
+    {...props}
+  >
+    <svg
+      className="h-5 w-5 text-slate-400 hover:text-slate-200"
+      fill="none"
+      stroke="currentColor"
+      viewBox="0 0 24 24"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M6 18L18 6M6 6l12 12"
+      />
+    </svg>
+    <span className="sr-only">Close</span>
+  </button>
+))
+DialogCloseButton.displayName = "DialogCloseButton"
+
+export {
+  Dialog,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogContent,
+  DialogFooter,
+  DialogCloseButton,
+  dialogVariants,
+}
diff --git a/client/src/components/ui-new/index.ts b/client/src/components/ui-new/index.ts
new file mode 100644
index 0000000..7c491f6
--- /dev/null
+++ b/client/src/components/ui-new/index.ts
@@ -0,0 +1,47 @@
+/**
+ * UI Component Library - New Design System
+ * CreditNexus Professional Fintech Components
+ * 
+ * @module ui-new
+ * @version 1.0.0
+ */
+
+// Core Components
+export { Button, buttonVariants, type ButtonProps } from "./button"
+export { 
+  Card, 
+  CardHeader, 
+  CardTitle, 
+  CardDescription, 
+  CardContent, 
+  CardFooter,
+  cardVariants,
+  type CardProps 
+} from "./card"
+export { Input, Textarea, inputVariants, type InputProps, type TextareaProps } from "./input"
+
+// New Components
+export { Badge, badgeVariants, type BadgeProps } from "./badge"
+export { Select, selectVariants, type SelectProps, type SelectOption } from "./select"
+export {
+  Dialog,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogContent,
+  DialogFooter,
+  DialogCloseButton,
+  dialogVariants,
+  type DialogProps,
+} from "./dialog"
+
+// Theme Provider
+export {
+  ThemeProvider,
+  useTheme,
+  ThemeToggle,
+  ThemeSelector,
+} from "./theme-provider"
+
+// Utility
+export { cn } from "./button"
diff --git a/client/src/components/ui-new/input.tsx b/client/src/components/ui-new/input.tsx
new file mode 100644
index 0000000..21d1aab
--- /dev/null
+++ b/client/src/components/ui-new/input.tsx
@@ -0,0 +1,196 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "./button"
+
+/**
+ * Input Component Variants
+ * Text, Email, Password, and other input types
+ */
+const inputVariants = cva(
+  "flex w-full rounded-lg border bg-transparent px-4 py-3 text-base transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-slate-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-slate-600 bg-slate-800/50 text-slate-100 focus-visible:border-[#3B82F6] focus-visible:ring-[#3B82F6]",
+        ghost:
+          "border-transparent bg-slate-800/30 text-slate-100 focus-visible:bg-slate-800/50 focus-visible:ring-slate-400",
+        error:
+          "border-red-500 bg-red-500/10 text-slate-100 focus-visible:border-red-500 focus-visible:ring-red-500",
+        success:
+          "border-emerald-500 bg-emerald-500/10 text-slate-100 focus-visible:border-emerald-500 focus-visible:ring-emerald-500",
+      },
+      size: {
+        sm: "h-8 px-3 text-sm",
+        md: "h-12 px-4 text-base",
+        lg: "h-14 px-4 text-lg",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "md",
+    },
+  }
+)
+
+export interface InputProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">,
+    VariantProps<typeof inputVariants> {
+  error?: string
+  label?: string
+  helperText?: string
+}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, variant, size, error, label, helperText, id, ...props }, ref) => {
+    const inputId = id || React.useId()
+    const hasError = !!error || variant === "error"
+
+    return (
+      <div className="w-full space-y-2">
+        {label && (
+          <label
+            htmlFor={inputId}
+            className="text-sm font-medium text-slate-300"
+          >
+            {label}
+            {props.required && (
+              <span className="ml-1 text-red-500" aria-hidden="true">
+                *
+              </span>
+            )}
+          </label>
+        )}
+        <input
+          id={inputId}
+          className={cn(
+            inputVariants({ variant: hasError ? "error" : variant, size, className })
+          )}
+          ref={ref}
+          aria-invalid={hasError}
+          aria-describedby={
+            error
+              ? `${inputId}-error`
+              : helperText
+              ? `${inputId}-helper`
+              : undefined
+          }
+          {...props}
+        />
+        {error && (
+          <p
+            id={`${inputId}-error`}
+            className="text-sm text-red-400 flex items-center gap-1"
+            role="alert"
+          >
+            <svg
+              className="h-4 w-4"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+              />
+            </svg>
+            {error}
+          </p>
+        )}
+        {helperText && !error && (
+          <p id={`${inputId}-helper`} className="text-sm text-slate-500">
+            {helperText}
+          </p>
+        )}
+      </div>
+    )
+  }
+)
+Input.displayName = "Input"
+
+/**
+ * Textarea Component
+ */
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  error?: string
+  label?: string
+  helperText?: string
+}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, error, label, helperText, id, ...props }, ref) => {
+    const textareaId = id || React.useId()
+    const hasError = !!error
+
+    return (
+      <div className="w-full space-y-2">
+        {label && (
+          <label
+            htmlFor={textareaId}
+            className="text-sm font-medium text-slate-300"
+          >
+            {label}
+            {props.required && (
+              <span className="ml-1 text-red-500" aria-hidden="true">
+                *
+              </span>
+            )}
+          </label>
+        )}
+        <textarea
+          id={textareaId}
+          className={cn(
+            "flex min-h-[80px] w-full rounded-lg border bg-transparent px-4 py-3 text-base transition-colors placeholder:text-slate-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+            hasError
+              ? "border-red-500 bg-red-500/10 text-slate-100 focus-visible:border-red-500 focus-visible:ring-red-500"
+              : "border-slate-600 bg-slate-800/50 text-slate-100 focus-visible:border-[#3B82F6] focus-visible:ring-[#3B82F6]",
+            className
+          )}
+          ref={ref}
+          aria-invalid={hasError}
+          aria-describedby={
+            error
+              ? `${textareaId}-error`
+              : helperText
+              ? `${textareaId}-helper`
+              : undefined
+          }
+          {...props}
+        />
+        {error && (
+          <p
+            id={`${textareaId}-error`}
+            className="text-sm text-red-400 flex items-center gap-1"
+            role="alert"
+          >
+            <svg
+              className="h-4 w-4"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+              />
+            </svg>
+            {error}
+          </p>
+        )}
+        {helperText && !error && (
+          <p id={`${textareaId}-helper`} className="text-sm text-slate-500">
+            {helperText}
+          </p>
+        )}
+      </div>
+    )
+  }
+)
+Textarea.displayName = "Textarea"
+
+export { Input, Textarea, inputVariants }
diff --git a/client/src/components/ui-new/select.tsx b/client/src/components/ui-new/select.tsx
new file mode 100644
index 0000000..c2d036e
--- /dev/null
+++ b/client/src/components/ui-new/select.tsx
@@ -0,0 +1,145 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "./button"
+
+/**
+ * Select Component
+ * Accessible dropdown with keyboard navigation
+ */
+const selectVariants = cva(
+  "flex w-full appearance-none rounded-lg border bg-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-slate-600 bg-slate-800/50 text-slate-100 focus-visible:border-[#3B82F6] focus-visible:ring-[#3B82F6]",
+        error:
+          "border-red-500 bg-red-500/10 text-slate-100 focus-visible:border-red-500 focus-visible:ring-red-500",
+      },
+      size: {
+        sm: "h-8 px-3 pr-8 text-sm",
+        md: "h-12 px-4 pr-10 text-base",
+        lg: "h-14 px-4 pr-12 text-lg",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "md",
+    },
+  }
+)
+
+export interface SelectOption {
+  value: string
+  label: string
+  disabled?: boolean
+}
+
+export interface SelectProps
+  extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, "size">,
+    VariantProps<typeof selectVariants> {
+  options: SelectOption[]
+  error?: string
+  label?: string
+  helperText?: string
+  placeholder?: string
+}
+
+const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
+  ({ className, variant, size, error, label, helperText, options, placeholder, id, ...props }, ref) => {
+    const selectId = id || React.useId()
+    const hasError = !!error || variant === "error"
+
+    return (
+      <div className="w-full space-y-2">
+        {label && (
+          <label
+            htmlFor={selectId}
+            className="text-sm font-medium text-slate-300"
+          >
+            {label}
+            {props.required && (
+              <span className="ml-1 text-red-500" aria-hidden="true">
+                *
+              </span>
+            )}
+          </label>
+        )}
+        <div className="relative">
+          <select
+            id={selectId}
+            className={cn(
+              selectVariants({ variant: hasError ? "error" : variant, size, className })
+            )}
+            ref={ref}
+            aria-invalid={hasError}
+            aria-describedby={
+              error
+                ? `${selectId}-error`
+                : helperText
+                ? `${selectId}-helper`
+                : undefined
+            }
+            {...props}
+          >
+            {placeholder && (
+              <option value="" disabled>
+                {placeholder}
+              </option>
+            )}
+            {options.map((option) => (
+              <option key={option.value} value={option.value} disabled={option.disabled}>
+                {option.label}
+              </option>
+            ))}
+          </select>
+          <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-slate-400">
+            <svg
+              className="h-5 w-5"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M19 9l-7 7-7-7"
+              />
+            </svg>
+          </div>
+        </div>
+        {error && (
+          <p
+            id={`${selectId}-error`}
+            className="text-sm text-red-400 flex items-center gap-1"
+            role="alert"
+          >
+            <svg
+              className="h-4 w-4"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+              />
+            </svg>
+            {error}
+          </p>
+        )}
+        {helperText && !error && (
+          <p id={`${selectId}-helper`} className="text-sm text-slate-500">
+            {helperText}
+          </p>
+        )}
+      </div>
+    )
+  }
+)
+Select.displayName = "Select"
+
+export { Select, selectVariants }
diff --git a/client/src/components/ui-new/theme-provider.tsx b/client/src/components/ui-new/theme-provider.tsx
new file mode 100644
index 0000000..2a8edee
--- /dev/null
+++ b/client/src/components/ui-new/theme-provider.tsx
@@ -0,0 +1,224 @@
+import { createContext, useContext, useEffect, useState, type ReactNode } from 'react';
+
+type Theme = 'light' | 'dark' | 'system';
+
+interface ThemeProviderContextType {
+  theme: Theme;
+  resolvedTheme: 'light' | 'dark';
+  setTheme: (theme: Theme) => void;
+}
+
+const THEME_STORAGE_KEY = 'creditnexus-ui-theme';
+
+const ThemeProviderContext = createContext<ThemeProviderContextType | undefined>(undefined);
+
+/**
+ * Get the system preferred theme
+ */
+function getSystemTheme(): 'light' | 'dark' {
+  if (typeof window !== 'undefined' && window.matchMedia) {
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+  }
+  return 'dark';
+}
+
+/**
+ * Get the stored theme from localStorage
+ */
+function getStoredTheme(): Theme {
+  if (typeof window === 'undefined') return 'system';
+  
+  try {
+    const stored = localStorage.getItem(THEME_STORAGE_KEY);
+    if (stored === 'light' || stored === 'dark' || stored === 'system') {
+      return stored;
+    }
+  } catch (e) {
+    // localStorage not available
+  }
+  return 'system';
+}
+
+/**
+ * Theme Provider Component
+ * Manages theme state with localStorage persistence and system preference detection
+ * Sets data-theme attribute on document element for CSS variable support
+ */
+export function ThemeProvider({ children }: { children: ReactNode }) {
+  const [theme, setThemeState] = useState<Theme>(getStoredTheme);
+  const [resolvedTheme, setResolvedTheme] = useState<'light' | 'dark'>('dark');
+  const [mounted, setMounted] = useState(false);
+
+  // Initialize on mount
+  useEffect(() => {
+    setMounted(true);
+    const resolved = theme === 'system' ? getSystemTheme() : theme;
+    setResolvedTheme(resolved);
+    applyTheme(resolved);
+  }, []);
+
+  // Apply theme changes
+  useEffect(() => {
+    if (!mounted) return;
+    
+    const resolved = theme === 'system' ? getSystemTheme() : theme;
+    setResolvedTheme(resolved);
+    applyTheme(resolved);
+    
+    // Store preference
+    try {
+      localStorage.setItem(THEME_STORAGE_KEY, theme);
+    } catch (e) {
+      // localStorage not available
+    }
+  }, [theme, mounted]);
+
+  // Listen for system theme changes when in 'system' mode
+  useEffect(() => {
+    if (!mounted || theme !== 'system') return;
+
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    const handleChange = (e: MediaQueryListEvent) => {
+      const newTheme = e.matches ? 'dark' : 'light';
+      setResolvedTheme(newTheme);
+      applyTheme(newTheme);
+    };
+
+    mediaQuery.addEventListener('change', handleChange);
+    return () => mediaQuery.removeEventListener('change', handleChange);
+  }, [theme, mounted]);
+
+  /**
+   * Apply theme to document element
+   */
+  function applyTheme(resolved: 'light' | 'dark') {
+    const root = document.documentElement;
+    
+    // Set data-theme attribute for CSS variable support
+    root.setAttribute('data-theme', resolved);
+    
+    // Set class for Tailwind dark mode
+    root.classList.remove('light', 'dark');
+    root.classList.add(resolved);
+    
+    // Set color-scheme for browser UI elements
+    root.style.colorScheme = resolved;
+  }
+
+  /**
+   * Set theme and persist to localStorage
+   */
+  const setTheme = (newTheme: Theme) => {
+    setThemeState(newTheme);
+  };
+
+  // Prevent hydration mismatch
+  if (!mounted) {
+    return <>{children}</>;
+  }
+
+  return (
+    <ThemeProviderContext.Provider value={{ theme, resolvedTheme, setTheme }}>
+      {children}
+    </ThemeProviderContext.Provider>
+  );
+}
+
+/**
+ * Hook to access theme context
+ * @throws Error if used outside ThemeProvider
+ */
+export function useTheme() {
+  const context = useContext(ThemeProviderContext);
+  if (context === undefined) {
+    throw new Error('useTheme must be used within a ThemeProvider');
+  }
+  return context;
+}
+
+/**
+ * Theme Toggle Component
+ * Pre-built toggle button for switching between themes
+ */
+export function ThemeToggle({ 
+  className = '' 
+}: { 
+  className?: string 
+}) {
+  const { theme, resolvedTheme, setTheme } = useTheme();
+
+  const cycleTheme = () => {
+    const themes: Theme[] = ['light', 'dark', 'system'];
+    const currentIndex = themes.indexOf(theme);
+    const nextIndex = (currentIndex + 1) % themes.length;
+    setTheme(themes[nextIndex]);
+  };
+
+  const getIcon = () => {
+    if (theme === 'system') {
+      return (
+        <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+        </svg>
+      );
+    }
+    return resolvedTheme === 'dark' ? (
+      <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
+      </svg>
+    ) : (
+      <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
+      </svg>
+    );
+  };
+
+  const getLabel = () => {
+    if (theme === 'system') return 'System';
+    return resolvedTheme === 'dark' ? 'Dark' : 'Light';
+  };
+
+  return (
+    <button
+      onClick={cycleTheme}
+      className={`inline-flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium transition-colors bg-slate-800/50 border border-slate-700 hover:bg-slate-800 hover:border-slate-600 ${className}`}
+      aria-label={`Current theme: ${getLabel()}. Click to cycle.`}
+    >
+      {getIcon()}
+      <span className="capitalize">{getLabel()}</span>
+    </button>
+  );
+}
+
+/**
+ * Theme Selector Component
+ * Dropdown selector for choosing theme
+ */
+export function ThemeSelector({ 
+  className = '' 
+}: { 
+  className?: string 
+}) {
+  const { theme, setTheme } = useTheme();
+
+  return (
+    <div className={`flex items-center gap-2 ${className}`}>
+      <span className="text-sm text-slate-400">Theme:</span>
+      <div className="flex gap-1">
+        {(['light', 'dark', 'system'] as Theme[]).map((t) => (
+          <button
+            key={t}
+            onClick={() => setTheme(t)}
+            className={`px-3 py-1.5 rounded-md text-sm font-medium transition-colors ${
+              theme === t
+                ? 'bg-[#3B82F6] text-white'
+                : 'bg-slate-800/50 text-slate-400 hover:bg-slate-800 hover:text-slate-200'
+            }`}
+          >
+            {t.charAt(0).toUpperCase() + t.slice(1)}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/client/src/main.tsx b/client/src/main.tsx
index 64710dc..d33ed8a 100644
--- a/client/src/main.tsx
+++ b/client/src/main.tsx
@@ -1,6 +1,7 @@
 
 import { createRoot } from 'react-dom/client'
 import './index.css'
+import './styles/design-system.css'
 import { router } from './router/Routes'
 import { RouterProvider } from 'react-router-dom'
 import { FDC3Provider } from './context/FDC3Context'
diff --git a/client/src/pages/DesignSystemShowcase.tsx b/client/src/pages/DesignSystemShowcase.tsx
new file mode 100644
index 0000000..8a95fe7
--- /dev/null
+++ b/client/src/pages/DesignSystemShowcase.tsx
@@ -0,0 +1,506 @@
+import { useState } from 'react';
+import {
+  Button,
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+  Input,
+  Textarea,
+  Badge,
+  Select,
+  Dialog,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogContent,
+  DialogFooter,
+  DialogCloseButton,
+  ThemeToggle,
+  ThemeSelector,
+} from '@/components/ui-new';
+
+/**
+ * Design System Showcase Page
+ * Professional documentation and component gallery for the CreditNexus UI Library
+ */
+export function DesignSystemShowcase() {
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [inputValue, setInputValue] = useState('');
+  const [selectValue, setSelectValue] = useState('');
+
+  const selectOptions = [
+    { value: '', label: 'Select an option...' },
+    { value: 'option1', label: 'Option 1' },
+    { value: 'option2', label: 'Option 2' },
+    { value: 'option3', label: 'Option 3', disabled: true },
+    { value: 'option4', label: 'Option 4' },
+  ];
+
+  return (
+    <div className="min-h-screen bg-slate-900">
+      {/* Header */}
+      <header className="sticky top-0 z-50 border-b border-slate-700/50 bg-slate-900/95 backdrop-blur-sm">
+        <div className="max-w-7xl mx-auto px-6 py-4">
+          <div className="flex items-center justify-between">
+            <div>
+              <h1 className="text-2xl font-bold text-white">CreditNexus Design System</h1>
+              <p className="text-sm text-slate-400">Professional Fintech UI Components</p>
+            </div>
+            <div className="flex items-center gap-4">
+              <ThemeSelector />
+            </div>
+          </div>
+        </div>
+      </header>
+
+      {/* Main Content */}
+      <main className="max-w-7xl mx-auto px-6 py-8">
+        {/* Introduction */}
+        <section className="mb-12">
+          <Card variant="primary">
+            <CardHeader>
+              <CardTitle>Overview</CardTitle>
+              <CardDescription>
+                A comprehensive collection of modern, accessible UI components built with React, TypeScript, and Tailwind CSS.
+                Designed for fintech applications with a focus on trust, clarity, and professional aesthetics.
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div className="p-4 rounded-lg bg-slate-800/50 border border-slate-700">
+                  <h3 className="font-semibold text-white mb-1">Accessible</h3>
+                  <p className="text-sm text-slate-400">ARIA labels, keyboard navigation, and screen reader support</p>
+                </div>
+                <div className="p-4 rounded-lg bg-slate-800/50 border border-slate-700">
+                  <h3 className="font-semibold text-white mb-1">Themeable</h3>
+                  <p className="text-sm text-slate-400">Light, dark, and system theme support with CSS variables</p>
+                </div>
+                <div className="p-4 rounded-lg bg-slate-800/50 border border-slate-700">
+                  <h3 className="font-semibold text-white mb-1">Type-Safe</h3>
+                  <p className="text-sm text-slate-400">Full TypeScript support with comprehensive prop types</p>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </section>
+
+        {/* Buttons Section */}
+        <section className="mb-12">
+          <div className="flex items-center justify-between mb-6">
+            <div>
+              <h2 className="text-xl font-bold text-white">Buttons</h2>
+              <p className="text-sm text-slate-400">Interactive button components with multiple variants and sizes</p>
+            </div>
+            <ThemeToggle />
+          </div>
+
+          <div className="grid gap-6">
+            {/* Variants */}
+            <Card>
+              <CardHeader>
+                <CardTitle>Variants</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <div className="flex flex-wrap gap-4">
+                  <Button variant="primary">Primary</Button>
+                  <Button variant="secondary">Secondary</Button>
+                  <Button variant="ghost">Ghost</Button>
+                  <Button variant="danger">Danger</Button>
+                  <Button variant="outline">Outline</Button>
+                </div>
+              </CardContent>
+            </Card>
+
+            {/* Sizes */}
+            <Card>
+              <CardHeader>
+                <CardTitle>Sizes</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <div className="flex flex-wrap items-center gap-4">
+                  <Button size="sm">Small</Button>
+                  <Button size="md">Medium</Button>
+                  <Button size="lg">Large</Button>
+                  <Button size="icon">
+                    <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
+                    </svg>
+                  </Button>
+                </div>
+              </CardContent>
+            </Card>
+
+            {/* States */}
+            <Card>
+              <CardHeader>
+                <CardTitle>States</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <div className="flex flex-wrap gap-4">
+                  <Button loading>Loading</Button>
+                  <Button disabled>Disabled</Button>
+                  <Button variant="secondary" loading>Loading</Button>
+                  <Button variant="secondary" disabled>Disabled</Button>
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+        </section>
+
+        {/* Cards Section */}
+        <section className="mb-12">
+          <div className="mb-6">
+            <h2 className="text-xl font-bold text-white">Cards</h2>
+            <p className="text-sm text-slate-400">Container components for organizing content with visual hierarchy</p>
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            <Card variant="primary">
+              <CardHeader>
+                <CardTitle>Primary Card</CardTitle>
+                <CardDescription>High emphasis with accent border</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <p className="text-slate-300">Use for critical information and primary actions.</p>
+              </CardContent>
+              <CardFooter>
+                <Button size="sm">Action</Button>
+              </CardFooter>
+            </Card>
+
+            <Card variant="secondary">
+              <CardHeader>
+                <CardTitle>Secondary Card</CardTitle>
+                <CardDescription>Medium emphasis container</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <p className="text-slate-300">Use for supporting information and grouped content.</p>
+              </CardContent>
+              <CardFooter>
+                <Button variant="secondary" size="sm">Action</Button>
+              </CardFooter>
+            </Card>
+
+            <Card variant="glass">
+              <CardHeader>
+                <CardTitle>Glass Card</CardTitle>
+                <CardDescription>Glassmorphism effect</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <p className="text-slate-300">Use for overlays and floating elements.</p>
+              </CardContent>
+              <CardFooter>
+                <Button variant="ghost" size="sm">Action</Button>
+              </CardFooter>
+            </Card>
+
+            <Card variant="interactive">
+              <CardHeader>
+                <CardTitle>Interactive Card</CardTitle>
+                <CardDescription>Clickable with hover effects</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <p className="text-slate-300">Use for clickable cards and navigation elements.</p>
+              </CardContent>
+            </Card>
+
+            <Card variant="tertiary">
+              <CardHeader>
+                <CardTitle>Tertiary Card</CardTitle>
+                <CardDescription>Low emphasis background</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <p className="text-slate-300">Use for background containers and grouping.</p>
+              </CardContent>
+            </Card>
+          </div>
+        </section>
+
+        {/* Form Elements Section */}
+        <section className="mb-12">
+          <div className="mb-6">
+            <h2 className="text-xl font-bold text-white">Form Elements</h2>
+            <p className="text-sm text-slate-400">Input fields, textareas, and select components</p>
+          </div>
+
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+            <Card>
+              <CardHeader>
+                <CardTitle>Input Fields</CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <Input
+                  label="Default Input"
+                  placeholder="Enter text..."
+                  value={inputValue}
+                  onChange={(e) => setInputValue(e.target.value)}
+                />
+                <Input
+                  label="With Helper Text"
+                  placeholder="Enter text..."
+                  helperText="This is a helpful description"
+                />
+                <Input
+                  label="Error State"
+                  placeholder="Enter text..."
+                  error="This field is required"
+                />
+                <Input
+                  label="Disabled"
+                  placeholder="Cannot edit"
+                  disabled
+                />
+              </CardContent>
+            </Card>
+
+            <Card>
+              <CardHeader>
+                <CardTitle>Select & Textarea</CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <Select
+                  label="Select Dropdown"
+                  options={selectOptions}
+                  value={selectValue}
+                  onChange={(e) => setSelectValue(e.target.value)}
+                  placeholder="Choose an option"
+                />
+                <Select
+                  label="With Error"
+                  options={selectOptions}
+                  error="Please select a valid option"
+                />
+                <Textarea
+                  label="Textarea"
+                  placeholder="Enter longer text..."
+                  rows={3}
+                />
+              </CardContent>
+            </Card>
+          </div>
+        </section>
+
+        {/* Badges Section */}
+        <section className="mb-12">
+          <div className="mb-6">
+            <h2 className="text-xl font-bold text-white">Badges</h2>
+            <p className="text-sm text-slate-400">Status indicators and labels</p>
+          </div>
+
+          <Card>
+            <CardHeader>
+              <CardTitle>Variants & Sizes</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="space-y-6">
+                <div className="flex flex-wrap gap-3">
+                  <Badge>Default</Badge>
+                  <Badge variant="primary">Primary</Badge>
+                  <Badge variant="success">Success</Badge>
+                  <Badge variant="warning">Warning</Badge>
+                  <Badge variant="error">Error</Badge>
+                  <Badge variant="info">Info</Badge>
+                </div>
+                <div className="flex flex-wrap gap-3 items-center">
+                  <Badge size="sm">Small</Badge>
+                  <Badge size="md">Medium</Badge>
+                  <Badge size="lg">Large</Badge>
+                </div>
+                <div className="flex flex-wrap gap-3">
+                  <Badge icon={<svg className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                  </svg>}>With Icon</Badge>
+                  <Badge variant="success" icon={<svg className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                  </svg>}>Completed</Badge>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </section>
+
+        {/* Dialog Section */}
+        <section className="mb-12">
+          <div className="mb-6">
+            <h2 className="text-xl font-bold text-white">Dialog</h2>
+            <p className="text-sm text-slate-400">Modal overlays with focus trap and keyboard navigation</p>
+          </div>
+
+          <Card>
+            <CardHeader>
+              <CardTitle>Dialog Demo</CardTitle>
+              <CardDescription>Click the button to open a dialog</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <div className="flex flex-wrap gap-4">
+                <Button onClick={() => setDialogOpen(true)}>Open Dialog</Button>
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* Dialog Component */}
+          <Dialog open={dialogOpen} onClose={() => setDialogOpen(false)} size="md">
+            <DialogHeader>
+              <div className="flex items-start justify-between">
+                <div>
+                  <DialogTitle>Confirm Action</DialogTitle>
+                  <DialogDescription>
+                    Are you sure you want to proceed with this action? This cannot be undone.
+                  </DialogDescription>
+                </div>
+                <DialogCloseButton onClose={() => setDialogOpen(false)} />
+              </div>
+            </DialogHeader>
+            <DialogContent>
+              <div className="space-y-4">
+                <Input
+                  label="Reason (Optional)"
+                  placeholder="Enter your reason..."
+                />
+                <div className="p-4 rounded-lg bg-amber-500/10 border border-amber-500/30">
+                  <div className="flex gap-3">
+                    <svg className="h-5 w-5 text-amber-400 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+                    </svg>
+                    <div>
+                      <h4 className="font-medium text-amber-400">Warning</h4>
+                      <p className="text-sm text-amber-300/80 mt-1">
+                        This action will permanently affect your account settings.
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </DialogContent>
+            <DialogFooter>
+              <Button variant="ghost" onClick={() => setDialogOpen(false)}>
+                Cancel
+              </Button>
+              <Button variant="danger" onClick={() => setDialogOpen(false)}>
+                Confirm
+              </Button>
+            </DialogFooter>
+          </Dialog>
+        </section>
+
+        {/* Code Examples Section */}
+        <section className="mb-12">
+          <div className="mb-6">
+            <h2 className="text-xl font-bold text-white">Code Examples</h2>
+            <p className="text-sm text-slate-400">Quick start with component usage patterns</p>
+          </div>
+
+          <div className="space-y-6">
+            <Card>
+              <CardHeader>
+                <CardTitle>Import Components</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <pre className="p-4 rounded-lg bg-slate-950 border border-slate-800 overflow-x-auto">
+                  <code className="text-sm text-slate-300">
+{`import { 
+  Button, 
+  Card, 
+  Input, 
+  Badge,
+  ThemeProvider,
+  useTheme 
+} from '@/components/ui-new';`}
+                  </code>
+                </pre>
+              </CardContent>
+            </Card>
+
+            <Card>
+              <CardHeader>
+                <CardTitle>Button Usage</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <pre className="p-4 rounded-lg bg-slate-950 border border-slate-800 overflow-x-auto">
+                  <code className="text-sm text-slate-300">
+{`<Button variant="primary" size="md" loading={isLoading}>
+  Submit
+</Button>
+
+<Button variant="secondary" onClick={handleCancel}>
+  Cancel
+</Button>
+
+<Button variant="danger" disabled={!canDelete}>
+  Delete
+</Button>`}
+                  </code>
+                </pre>
+              </CardContent>
+            </Card>
+
+            <Card>
+              <CardHeader>
+                <CardTitle>Card Usage</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <pre className="p-4 rounded-lg bg-slate-950 border border-slate-800 overflow-x-auto">
+                  <code className="text-sm text-slate-300">
+{`<Card variant="primary">
+  <CardHeader>
+    <CardTitle>Card Title</CardTitle>
+    <CardDescription>Card description</CardDescription>
+  </CardHeader>
+  <CardContent>
+    <p>Card content goes here</p>
+  </CardContent>
+  <CardFooter>
+    <Button>Action</Button>
+  </CardFooter>
+</Card>`}
+                  </code>
+                </pre>
+              </CardContent>
+            </Card>
+
+            <Card>
+              <CardHeader>
+                <CardTitle>Theme Usage</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <pre className="p-4 rounded-lg bg-slate-950 border border-slate-800 overflow-x-auto">
+                  <code className="text-sm text-slate-300">
+{`// In your app root
+<ThemeProvider>
+  <App />
+</ThemeProvider>
+
+// In a component
+const { theme, resolvedTheme, setTheme } = useTheme();
+
+// Toggle theme
+setTheme('dark'); // 'light' | 'dark' | 'system'
+
+// Pre-built toggle
+<ThemeToggle />
+
+// Pre-built selector
+<ThemeSelector />`}
+                  </code>
+                </pre>
+              </CardContent>
+            </Card>
+          </div>
+        </section>
+
+        {/* Footer */}
+        <footer className="border-t border-slate-700/50 pt-8 mt-16">
+          <div className="flex items-center justify-between text-sm text-slate-400">
+            <p>CreditNexus Design System v1.0.0</p>
+            <p>Built with React + TypeScript + Tailwind CSS</p>
+          </div>
+        </footer>
+      </main>
+    </div>
+  );
+}
+
+export default DesignSystemShowcase;
diff --git a/client/src/pages/UserSettings.tsx b/client/src/pages/UserSettings.tsx
index 4dea051..8b27430 100644
--- a/client/src/pages/UserSettings.tsx
+++ b/client/src/pages/UserSettings.tsx
@@ -980,6 +980,10 @@ export function UserSettings() {
           )}
         </TabsContent>
         
+        <TabsContent value="trading-account">
+          <BrokerageOnboarding />
+        </TabsContent>
+        
         <TabsContent value="notifications">
           <Card>
             <CardHeader>
diff --git a/client/src/router/Routes.tsx b/client/src/router/Routes.tsx
index d802e34..d99d146 100644
--- a/client/src/router/Routes.tsx
+++ b/client/src/router/Routes.tsx
@@ -20,8 +20,9 @@ import { VerificationFileConfigEditor } from '@/apps/verification-config/Verific
 import { WorkflowProcessingPage } from '@/components/WorkflowProcessingPage';
 import { WorkflowShareInterface } from '@/components/WorkflowShareInterface';
 import { LicenseViewer } from '@/components/LicenseViewer';
-import { UserSettings } from '@/pages/UserSettings';
+
 import { PrivacyPolicy } from '@/components/PrivacyPolicy';
+import { DesignSystemShowcase } from '@/pages/DesignSystemShowcase';
 
 // Placeholder components for microsites (to be implemented)
 // Note: /project and /docs are deployed separately (GitHub Pages and Mintlify)
@@ -75,6 +76,10 @@ export const router = createAppRouter([
     path: '/login',
     element: <LoginPage />,
   },
+  {
+    path: '/design-system',
+    element: <DesignSystemShowcase />,
+  },
   {
     path: '/signup',
     element: <SignupFlow />,
diff --git a/client/src/styles/design-system.css b/client/src/styles/design-system.css
new file mode 100644
index 0000000..3018170
--- /dev/null
+++ b/client/src/styles/design-system.css
@@ -0,0 +1,324 @@
+/**
+ * CreditNexus Design System - CSS Variables
+ * Professional Fintech/Corporate Theme with Glassmorphism
+ * 
+ * @version 1.0.0
+ * @branch feature/ui-ux-overhaul
+ */
+
+/* ========================================
+   FONT IMPORT
+   ======================================== */
+@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap');
+
+/* ========================================
+   ROOT VARIABLES - DARK MODE (Default)
+   ======================================== */
+:root {
+  /* Primary Brand Colors - Trust Blue */
+  --color-primary-50: #EFF6FF;
+  --color-primary-100: #DBEAFE;
+  --color-primary-200: #BFDBFE;
+  --color-primary-300: #93C5FD;
+  --color-primary-400: #60A5FA;
+  --color-primary-500: #3B82F6;
+  --color-primary-600: #2563EB;
+  --color-primary-700: #1D4ED8;
+  --color-primary-800: #1E40AF;
+  --color-primary-900: #1E3A8A;
+
+  /* Neutral Scale - Slate */
+  --color-neutral-50: #F8FAFC;
+  --color-neutral-100: #F1F5F9;
+  --color-neutral-200: #E2E8F0;
+  --color-neutral-300: #CBD5E1;
+  --color-neutral-400: #94A3B8;
+  --color-neutral-500: #64748B;
+  --color-neutral-600: #475569;
+  --color-neutral-700: #334155;
+  --color-neutral-800: #1E293B;
+  --color-neutral-900: #0F172A;
+
+  /* Semantic Colors */
+  --color-success-50: #ECFDF5;
+  --color-success-100: #D1FAE5;
+  --color-success-500: #10B981;
+  --color-success-600: #059669;
+  --color-success-700: #047857;
+
+  --color-warning-50: #FFFBEB;
+  --color-warning-100: #FEF3C7;
+  --color-warning-500: #F59E0B;
+  --color-warning-600: #D97706;
+  --color-warning-700: #B45309;
+
+  --color-error-50: #FEF2F2;
+  --color-error-100: #FEE2E2;
+  --color-error-500: #EF4444;
+  --color-error-600: #DC2626;
+  --color-error-700: #B91C1C;
+
+  --color-info-50: #EFF6FF;
+  --color-info-100: #DBEAFE;
+  --color-info-500: #3B82F6;
+  --color-info-600: #2563EB;
+  --color-info-700: #1D4ED8;
+
+  /* Feature Colors */
+  --color-finance: #10B981;
+  --color-trading: #8B5CF6;
+  --color-documents: #3B82F6;
+  --color-compliance: #F59E0B;
+  --color-security: #EF4444;
+
+  /* Semantic Mappings - Dark Mode */
+  --color-background: var(--color-neutral-900);
+  --color-surface: var(--color-neutral-800);
+  --color-surface-elevated: rgba(30, 41, 59, 0.8);
+  --color-border: var(--color-neutral-700);
+  --color-border-subtle: rgba(51, 65, 85, 0.5);
+  
+  --color-text-primary: var(--color-neutral-50);
+  --color-text-secondary: var(--color-neutral-400);
+  --color-text-tertiary: var(--color-neutral-500);
+  --color-text-muted: var(--color-neutral-600);
+  
+  --color-accent-primary: var(--color-primary-500);
+  --color-accent-secondary: var(--color-primary-400);
+  --color-accent-hover: var(--color-primary-600);
+  
+  /* Glassmorphism Effects */
+  --glass-bg: rgba(30, 41, 59, 0.7);
+  --glass-bg-hover: rgba(30, 41, 59, 0.85);
+  --glass-border: rgba(255, 255, 255, 0.1);
+  --glass-border-hover: rgba(255, 255, 255, 0.2);
+  --glass-blur: blur(12px);
+  --glass-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+
+  /* Typography */
+  --font-family-primary: 'IBM Plex Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --font-family-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
+
+  /* Font Sizes (Major Third - 1.25x) */
+  --font-size-hero: 3.052rem;
+  --font-size-h1: 2.441rem;
+  --font-size-h2: 1.953rem;
+  --font-size-h3: 1.563rem;
+  --font-size-h4: 1.25rem;
+  --font-size-large: 1.125rem;
+  --font-size-base: 1rem;
+  --font-size-small: 0.875rem;
+  --font-size-xsmall: 0.75rem;
+  --font-size-tiny: 0.625rem;
+
+  /* Font Weights */
+  --font-weight-light: 300;
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+
+  /* Line Heights */
+  --line-height-tight: 1.1;
+  --line-height-snug: 1.3;
+  --line-height-normal: 1.5;
+  --line-height-relaxed: 1.75;
+
+  /* Spacing (4px base) */
+  --space-1: 0.25rem;
+  --space-2: 0.5rem;
+  --space-3: 0.75rem;
+  --space-4: 1rem;
+  --space-5: 1.25rem;
+  --space-6: 1.5rem;
+  --space-8: 2rem;
+  --space-10: 2.5rem;
+  --space-12: 3rem;
+  --space-16: 4rem;
+  --space-20: 5rem;
+  --space-24: 6rem;
+
+  /* Border Radius */
+  --radius-sm: 0.25rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.75rem;
+  --radius-xl: 1rem;
+  --radius-2xl: 1.5rem;
+
+  /* Shadows */
+  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  --shadow-glow: 0 0 20px rgba(59, 130, 246, 0.3);
+
+  /* Transitions */
+  --transition-fast: 150ms ease;
+  --transition-normal: 250ms ease;
+  --transition-slow: 350ms ease;
+
+  /* Z-Index Scale */
+  --z-base: 0;
+  --z-dropdown: 10;
+  --z-sticky: 20;
+  --z-fixed: 30;
+  --z-modal-backdrop: 40;
+  --z-modal: 50;
+  --z-popover: 60;
+  --z-tooltip: 70;
+}
+
+/* ========================================
+   LIGHT MODE OVERRIDES
+   ======================================== */
+[data-theme="light"],
+.light {
+  --color-background: var(--color-neutral-50);
+  --color-surface: var(--color-white);
+  --color-surface-elevated: rgba(255, 255, 255, 0.9);
+  --color-border: var(--color-neutral-200);
+  --color-border-subtle: rgba(226, 232, 240, 0.5);
+  
+  --color-text-primary: var(--color-neutral-900);
+  --color-text-secondary: var(--color-neutral-600);
+  --color-text-tertiary: var(--color-neutral-500);
+  --color-text-muted: var(--color-neutral-400);
+  
+  --glass-bg: rgba(255, 255, 255, 0.8);
+  --glass-bg-hover: rgba(255, 255, 255, 0.95);
+  --glass-border: rgba(0, 0, 0, 0.1);
+  --glass-border-hover: rgba(0, 0, 0, 0.15);
+}
+
+/* ========================================
+   BASE STYLES
+   ======================================== */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  font-family: var(--font-family-primary);
+  font-size: var(--font-size-base);
+  line-height: var(--line-height-normal);
+  color: var(--color-text-primary);
+  background-color: var(--color-background);
+  min-height: 100vh;
+}
+
+/* ========================================
+   UTILITY CLASSES
+   ======================================== */
+
+/* Glassmorphism */
+.glass {
+  background: var(--glass-bg);
+  backdrop-filter: var(--glass-blur);
+  -webkit-backdrop-filter: var(--glass-blur);
+  border: 1px solid var(--glass-border);
+  border-radius: var(--radius-xl);
+}
+
+.glass-hover:hover {
+  background: var(--glass-bg-hover);
+  border-color: var(--glass-border-hover);
+}
+
+/* Text utilities */
+.text-gradient {
+  background: linear-gradient(135deg, var(--color-primary-400), var(--color-primary-600));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.text-balance {
+  text-wrap: balance;
+}
+
+/* Focus styles */
+.focus-ring:focus-visible {
+  outline: none;
+  ring: 2px;
+  ring-offset: 2px;
+  ring-color: var(--color-primary-500);
+}
+
+/* Animation utilities */
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes slideUp {
+  from { 
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to { 
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+.animate-fadeIn {
+  animation: fadeIn var(--transition-normal) ease-out;
+}
+
+.animate-slideUp {
+  animation: slideUp var(--transition-normal) ease-out;
+}
+
+.animate-pulse {
+  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+/* Reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+/* Scrollbar styling */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--color-surface);
+  border-radius: var(--radius-md);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--color-neutral-600);
+  border-radius: var(--radius-md);
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--color-neutral-500);
+}
+
+/* Selection styling */
+::selection {
+  background: var(--color-primary-500);
+  color: white;
+}