diff --git a/packages/frontend/next.config.js b/packages/frontend/next.config.js
new file mode 100644
index 0000000..4047df0
--- /dev/null
+++ b/packages/frontend/next.config.js
@@ -0,0 +1,135 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  output: 'standalone',
+  experimental: {
+    appDir: true,
+  },
+  
+  // Environment variables
+  env: {
+    NEXT_PUBLIC_API_URL: process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3001',
+    NEXT_PUBLIC_WS_URL: process.env.NEXT_PUBLIC_WS_URL || 'ws://localhost:3001',
+    NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY: process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY,
+    NEXT_PUBLIC_GOOGLE_CLIENT_ID: process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID,
+  },
+
+  // Image configuration for external sources
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'lh3.googleusercontent.com',
+        port: '',
+        pathname: '/a/**',
+      },
+      {
+        protocol: 'http',
+        hostname: 'localhost',
+        port: '3001',
+        pathname: '/api/images/**',
+      },
+    ],
+    dangerouslyAllowSVG: true,
+    contentSecurityPolicy: "default-src 'self'; script-src 'none'; sandbox;",
+  },
+
+  // Headers for security
+  async headers() {
+    return [
+      {
+        source: '/(.*)',
+        headers: [
+          {
+            key: 'X-Frame-Options',
+            value: 'DENY',
+          },
+          {
+            key: 'X-Content-Type-Options',
+            value: 'nosniff',
+          },
+          {
+            key: 'Referrer-Policy',
+            value: 'strict-origin-when-cross-origin',
+          },
+          {
+            key: 'X-XSS-Protection',
+            value: '1; mode=block',
+          },
+        ],
+      },
+    ];
+  },
+
+  // Rewrites for API proxy in development
+  async rewrites() {
+    if (process.env.NODE_ENV === 'development') {
+      return [
+        {
+          source: '/api/:path*',
+          destination: `${process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3001'}/api/:path*`,
+        },
+      ];
+    }
+    return [];
+  },
+
+  // Webpack configuration
+  webpack: (config, { dev, isServer }) => {
+    // Optimization for production
+    if (!dev && !isServer) {
+      config.optimization.splitChunks.cacheGroups = {
+        ...config.optimization.splitChunks.cacheGroups,
+        vendor: {
+          test: /[\\/]node_modules[\\/]/,
+          name: 'vendors',
+          chunks: 'all',
+          priority: 10,
+        },
+        common: {
+          name: 'common',
+          minChunks: 2,
+          chunks: 'all',
+          priority: 5,
+          reuseExistingChunk: true,
+        },
+      };
+    }
+
+    return config;
+  },
+
+  // TypeScript configuration
+  typescript: {
+    ignoreBuildErrors: false,
+  },
+
+  // ESLint configuration
+  eslint: {
+    ignoreDuringBuilds: false,
+  },
+
+  // Compression and optimization
+  compress: true,
+  poweredByHeader: false,
+  generateEtags: true,
+
+  // Redirects
+  async redirects() {
+    return [
+      {
+        source: '/dashboard',
+        destination: '/',
+        permanent: false,
+        has: [
+          {
+            type: 'cookie',
+            key: 'authenticated',
+            value: undefined,
+          },
+        ],
+      },
+    ];
+  },
+};
+
+module.exports = nextConfig;
\ No newline at end of file
diff --git a/packages/frontend/package.json b/packages/frontend/package.json
new file mode 100644
index 0000000..6572364
--- /dev/null
+++ b/packages/frontend/package.json
@@ -0,0 +1,92 @@
+{
+  "name": "@seo-image-renamer/frontend",
+  "version": "1.0.0",
+  "description": "Next.js frontend for SEO Image Renamer with complete backend integration",
+  "private": true,
+  "scripts": {
+    "dev": "next dev -p 3000",
+    "build": "next build",
+    "start": "next start -p 3000",
+    "lint": "next lint",
+    "type-check": "tsc --noEmit",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "test:coverage": "jest --coverage",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "dependencies": {
+    "next": "^14.0.4",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "@types/node": "^20.10.5",
+    "@types/react": "^18.2.45",
+    "@types/react-dom": "^18.2.18",
+    "typescript": "^5.3.3",
+    "tailwindcss": "^3.3.6",
+    "autoprefixer": "^10.4.16",
+    "postcss": "^8.4.32",
+    "@tailwindcss/forms": "^0.5.7",
+    "@tailwindcss/typography": "^0.5.10",
+    "@headlessui/react": "^1.7.17",
+    "@heroicons/react": "^2.0.18",
+    "socket.io-client": "^4.7.4",
+    "axios": "^1.6.2",
+    "@stripe/stripe-js": "^2.4.0",
+    "react-dropzone": "^14.2.3",
+    "react-hook-form": "^7.48.2",
+    "react-hot-toast": "^2.4.1",
+    "clsx": "^2.0.0",
+    "class-variance-authority": "^0.7.0",
+    "lucide-react": "^0.298.0",
+    "next-themes": "^0.2.1",
+    "zustand": "^4.4.7",
+    "jszip": "^3.10.1",
+    "file-saver": "^2.0.5",
+    "@hookform/resolvers": "^3.3.2",
+    "zod": "^3.22.4",
+    "react-query": "^3.39.3",
+    "framer-motion": "^10.16.16"
+  },
+  "devDependencies": {
+    "@types/file-saver": "^2.0.7",
+    "@types/jszip": "^3.4.1",
+    "@typescript-eslint/eslint-plugin": "^6.14.0",
+    "@typescript-eslint/parser": "^6.14.0",
+    "eslint": "^8.55.0",
+    "eslint-config-next": "^14.0.4",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "@testing-library/react": "^14.1.2",
+    "@testing-library/jest-dom": "^6.1.5",
+    "@testing-library/user-event": "^14.5.1",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "@storybook/addon-essentials": "^7.6.6",
+    "@storybook/addon-interactions": "^7.6.6",
+    "@storybook/addon-links": "^7.6.6",
+    "@storybook/blocks": "^7.6.6",
+    "@storybook/nextjs": "^7.6.6",
+    "@storybook/react": "^7.6.6",
+    "@storybook/testing-library": "^0.2.2",
+    "storybook": "^7.6.6",
+    "prettier": "^3.1.1",
+    "prettier-plugin-tailwindcss": "^0.5.9"
+  },
+  "engines": {
+    "node": ">=18.0.0",
+    "npm": ">=8.0.0"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/packages/frontend/postcss.config.js b/packages/frontend/postcss.config.js
new file mode 100644
index 0000000..8567b4c
--- /dev/null
+++ b/packages/frontend/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
\ No newline at end of file
diff --git a/packages/frontend/src/app/globals.css b/packages/frontend/src/app/globals.css
new file mode 100644
index 0000000..98a81cf
--- /dev/null
+++ b/packages/frontend/src/app/globals.css
@@ -0,0 +1,344 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@100;200;300;400;500;600;700;800&display=swap');
+
+/* Base styles */
+@layer base {
+  html {
+    @apply scroll-smooth;
+  }
+
+  body {
+    @apply bg-white text-secondary-900 antialiased;
+    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
+  }
+
+  /* Dark mode */
+  .dark body {
+    @apply bg-secondary-900 text-secondary-100;
+  }
+
+  /* Focus styles */
+  *:focus {
+    @apply outline-none ring-2 ring-primary-500 ring-offset-2;
+  }
+
+  .dark *:focus {
+    @apply ring-offset-secondary-900;
+  }
+
+  /* Selection */
+  ::selection {
+    @apply bg-primary-100 text-primary-900;
+  }
+
+  .dark ::selection {
+    @apply bg-primary-800 text-primary-100;
+  }
+
+  /* Scrollbar */
+  ::-webkit-scrollbar {
+    @apply w-2;
+  }
+
+  ::-webkit-scrollbar-track {
+    @apply bg-secondary-100;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    @apply bg-secondary-300 rounded-full;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    @apply bg-secondary-400;
+  }
+
+  .dark ::-webkit-scrollbar-track {
+    @apply bg-secondary-800;
+  }
+
+  .dark ::-webkit-scrollbar-thumb {
+    @apply bg-secondary-600;
+  }
+
+  .dark ::-webkit-scrollbar-thumb:hover {
+    @apply bg-secondary-500;
+  }
+}
+
+/* Component styles */
+@layer components {
+  /* Button variants */
+  .btn {
+    @apply inline-flex items-center justify-center gap-2 px-4 py-2 text-sm font-medium rounded-lg transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed;
+  }
+
+  .btn-primary {
+    @apply bg-primary-600 text-white hover:bg-primary-700 focus:ring-primary-500 shadow-sm;
+  }
+
+  .btn-secondary {
+    @apply bg-secondary-100 text-secondary-900 hover:bg-secondary-200 focus:ring-secondary-500 border border-secondary-200;
+  }
+
+  .btn-success {
+    @apply bg-success-600 text-white hover:bg-success-700 focus:ring-success-500 shadow-sm;
+  }
+
+  .btn-danger {
+    @apply bg-error-600 text-white hover:bg-error-700 focus:ring-error-500 shadow-sm;
+  }
+
+  .btn-outline {
+    @apply bg-transparent text-secondary-700 hover:bg-secondary-50 focus:ring-secondary-500 border border-secondary-300;
+  }
+
+  .btn-ghost {
+    @apply bg-transparent text-secondary-600 hover:bg-secondary-100 hover:text-secondary-900 focus:ring-secondary-500;
+  }
+
+  .btn-sm {
+    @apply px-3 py-1.5 text-xs;
+  }
+
+  .btn-lg {
+    @apply px-6 py-3 text-base;
+  }
+
+  .btn-xl {
+    @apply px-8 py-4 text-lg;
+  }
+
+  /* Dark mode button variants */
+  .dark .btn-secondary {
+    @apply bg-secondary-800 text-secondary-100 hover:bg-secondary-700 border-secondary-700;
+  }
+
+  .dark .btn-outline {
+    @apply text-secondary-300 hover:bg-secondary-800 border-secondary-600;
+  }
+
+  .dark .btn-ghost {
+    @apply text-secondary-400 hover:bg-secondary-800 hover:text-secondary-200;
+  }
+
+  /* Input styles */
+  .input {
+    @apply block w-full px-3 py-2 border border-secondary-300 rounded-lg text-secondary-900 placeholder-secondary-500 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500 disabled:bg-secondary-50 disabled:cursor-not-allowed transition-colors;
+  }
+
+  .dark .input {
+    @apply bg-secondary-800 border-secondary-600 text-secondary-100 placeholder-secondary-400 focus:border-primary-400 disabled:bg-secondary-900;
+  }
+
+  /* Card styles */
+  .card {
+    @apply bg-white border border-secondary-200 rounded-xl shadow-soft;
+  }
+
+  .dark .card {
+    @apply bg-secondary-800 border-secondary-700;
+  }
+
+  /* Modal styles */
+  .modal-backdrop {
+    @apply fixed inset-0 bg-black bg-opacity-50 backdrop-blur-sm z-40;
+  }
+
+  .modal-content {
+    @apply fixed inset-x-4 top-1/2 -translate-y-1/2 max-w-lg mx-auto bg-white rounded-xl shadow-large z-50 max-h-[90vh] overflow-y-auto;
+  }
+
+  .dark .modal-content {
+    @apply bg-secondary-800;
+  }
+
+  /* Loading spinner */
+  .spinner {
+    @apply animate-spin h-5 w-5 border-2 border-secondary-300 border-t-primary-600 rounded-full;
+  }
+
+  /* Shimmer loading effect */
+  .shimmer {
+    @apply relative overflow-hidden bg-secondary-200 rounded;
+  }
+
+  .shimmer::after {
+    @apply absolute top-0 right-0 bottom-0 left-0 bg-gradient-to-r from-transparent via-white to-transparent;
+    content: '';
+    animation: shimmer 2s infinite;
+  }
+
+  .dark .shimmer {
+    @apply bg-secondary-700;
+  }
+
+  .dark .shimmer::after {
+    @apply via-secondary-600;
+  }
+
+  /* Upload area */
+  .upload-area {
+    @apply border-2 border-dashed border-secondary-300 rounded-xl p-8 text-center transition-colors hover:border-primary-400 hover:bg-primary-50;
+  }
+
+  .upload-area.active {
+    @apply border-primary-500 bg-primary-50;
+  }
+
+  .dark .upload-area {
+    @apply border-secondary-600 hover:border-primary-500 hover:bg-primary-900/10;
+  }
+
+  .dark .upload-area.active {
+    @apply border-primary-400 bg-primary-900/20;
+  }
+
+  /* Progress bar */
+  .progress-bar {
+    @apply w-full bg-secondary-200 rounded-full h-2 overflow-hidden;
+  }
+
+  .progress-fill {
+    @apply h-full bg-primary-600 transition-all duration-300 ease-in-out;
+  }
+
+  .dark .progress-bar {
+    @apply bg-secondary-700;
+  }
+
+  /* Toast styles */
+  .toast {
+    @apply flex items-center gap-3 p-4 bg-white border border-secondary-200 rounded-lg shadow-medium max-w-sm;
+  }
+
+  .toast-success {
+    @apply border-success-200 bg-success-50;
+  }
+
+  .toast-error {
+    @apply border-error-200 bg-error-50;
+  }
+
+  .toast-warning {
+    @apply border-warning-200 bg-warning-50;
+  }
+
+  .dark .toast {
+    @apply bg-secondary-800 border-secondary-700;
+  }
+
+  .dark .toast-success {
+    @apply border-success-800 bg-success-900/20;
+  }
+
+  .dark .toast-error {
+    @apply border-error-800 bg-error-900/20;
+  }
+
+  .dark .toast-warning {
+    @apply border-warning-800 bg-warning-900/20;
+  }
+
+  /* Badge styles */
+  .badge {
+    @apply inline-flex items-center gap-1 px-2.5 py-0.5 text-xs font-medium rounded-full;
+  }
+
+  .badge-primary {
+    @apply bg-primary-100 text-primary-800;
+  }
+
+  .badge-success {
+    @apply bg-success-100 text-success-800;
+  }
+
+  .badge-warning {
+    @apply bg-warning-100 text-warning-800;
+  }
+
+  .badge-error {
+    @apply bg-error-100 text-error-800;
+  }
+
+  .dark .badge-primary {
+    @apply bg-primary-900/30 text-primary-300;
+  }
+
+  .dark .badge-success {
+    @apply bg-success-900/30 text-success-300;
+  }
+
+  .dark .badge-warning {
+    @apply bg-warning-900/30 text-warning-300;
+  }
+
+  .dark .badge-error {
+    @apply bg-error-900/30 text-error-300;
+  }
+}
+
+/* Utility classes */
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
+
+  .animation-delay-75 {
+    animation-delay: 75ms;
+  }
+
+  .animation-delay-100 {
+    animation-delay: 100ms;
+  }
+
+  .animation-delay-150 {
+    animation-delay: 150ms;
+  }
+
+  .animation-delay-200 {
+    animation-delay: 200ms;
+  }
+
+  .animation-delay-300 {
+    animation-delay: 300ms;
+  }
+
+  .animation-delay-500 {
+    animation-delay: 500ms;
+  }
+
+  .animation-delay-700 {
+    animation-delay: 700ms;
+  }
+
+  .animation-delay-1000 {
+    animation-delay: 1000ms;
+  }
+
+  /* Glass morphism effect */
+  .glass {
+    @apply bg-white/80 backdrop-blur-md border border-white/20;
+  }
+
+  .dark .glass {
+    @apply bg-secondary-900/80 border-secondary-700/50;
+  }
+
+  /* Gradient text */
+  .gradient-text {
+    @apply bg-gradient-to-r from-primary-600 to-primary-400 bg-clip-text text-transparent;
+  }
+
+  /* Safe area padding for mobile */
+  .safe-area-top {
+    padding-top: env(safe-area-inset-top);
+  }
+
+  .safe-area-bottom {
+    padding-bottom: env(safe-area-inset-bottom);
+  }
+}
\ No newline at end of file
diff --git a/packages/frontend/src/app/layout.tsx b/packages/frontend/src/app/layout.tsx
new file mode 100644
index 0000000..c7fe967
--- /dev/null
+++ b/packages/frontend/src/app/layout.tsx
@@ -0,0 +1,97 @@
+import type { Metadata } from 'next';
+import { Inter } from 'next/font/google';
+import './globals.css';
+
+const inter = Inter({ subsets: ['latin'] });
+
+export const metadata: Metadata = {
+  title: 'SEO Image Renamer - AI-Powered Image SEO Tool',
+  description: 'Transform your image SEO workflow with AI that analyzes content and generates perfect filenames automatically. No more manual renaming - just upload, enhance, and download.',
+  keywords: ['SEO', 'image optimization', 'AI', 'filename generator', 'image renaming', 'bulk processing'],
+  authors: [{ name: 'SEO Image Renamer Team' }],
+  creator: 'SEO Image Renamer',
+  publisher: 'SEO Image Renamer',
+  openGraph: {
+    type: 'website',
+    locale: 'en_US',
+    url: 'https://seo-image-renamer.com',
+    title: 'SEO Image Renamer - AI-Powered Image SEO Tool',
+    description: 'Transform your image SEO workflow with AI that analyzes content and generates perfect filenames automatically.',
+    siteName: 'SEO Image Renamer',
+    images: [
+      {
+        url: '/og-image.png',
+        width: 1200,
+        height: 630,
+        alt: 'SEO Image Renamer - AI-Powered Image SEO Tool',
+      },
+    ],
+  },
+  twitter: {
+    card: 'summary_large_image',
+    title: 'SEO Image Renamer - AI-Powered Image SEO Tool',
+    description: 'Transform your image SEO workflow with AI that analyzes content and generates perfect filenames automatically.',
+    images: ['/og-image.png'],
+  },
+  robots: {
+    index: true,
+    follow: true,
+    googleBot: {
+      index: true,
+      follow: true,
+      'max-video-preview': -1,
+      'max-image-preview': 'large',
+      'max-snippet': -1,
+    },
+  },
+  viewport: {
+    width: 'device-width',
+    initialScale: 1,
+    maximumScale: 1,
+  },
+  themeColor: [
+    { media: '(prefers-color-scheme: light)', color: '#ffffff' },
+    { media: '(prefers-color-scheme: dark)', color: '#0f172a' },
+  ],
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <head>
+        <link rel="icon" href="/favicon.ico" />
+        <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+        <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
+        <link rel="manifest" href="/site.webmanifest" />
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `
+              (function() {
+                try {
+                  var mode = localStorage.getItem('theme');
+                  if (mode === 'dark' || (!mode && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+                    document.documentElement.classList.add('dark');
+                  }
+                } catch (e) {}
+              })();
+            `,
+          }}
+        />
+      </head>
+      <body className={`${inter.className} antialiased`}>
+        <div id="root">
+          {children}
+        </div>
+        <div id="modal-root" />
+        <div id="toast-root" />
+      </body>
+    </html>
+  );
+}
\ No newline at end of file
diff --git a/packages/frontend/src/app/page.tsx b/packages/frontend/src/app/page.tsx
new file mode 100644
index 0000000..719ecee
--- /dev/null
+++ b/packages/frontend/src/app/page.tsx
@@ -0,0 +1,80 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useAuth } from '@/hooks/useAuth';
+import { useWebSocket } from '@/hooks/useWebSocket';
+import { Header } from '@/components/Layout/Header';
+import { Footer } from '@/components/Layout/Footer';
+import { HeroSection } from '@/components/Landing/HeroSection';
+import { FeaturesSection } from '@/components/Landing/FeaturesSection';
+import { HowItWorksSection } from '@/components/Landing/HowItWorksSection';
+import { PricingSection } from '@/components/Landing/PricingSection';
+import { Dashboard } from '@/components/Dashboard/Dashboard';
+import { WorkflowSection } from '@/components/Workflow/WorkflowSection';
+import { LoadingSpinner } from '@/components/UI/LoadingSpinner';
+import { ErrorBoundary } from '@/components/UI/ErrorBoundary';
+import { ToastProvider } from '@/components/UI/ToastProvider';
+
+export default function HomePage() {
+  const { user, isAuthenticated, isLoading } = useAuth();
+  const { connect } = useWebSocket();
+  const [showWorkflow, setShowWorkflow] = useState(false);
+
+  // Connect WebSocket when user is authenticated
+  useEffect(() => {
+    if (isAuthenticated && user) {
+      connect(user.id);
+    }
+  }, [isAuthenticated, user, connect]);
+
+  // Handle workflow visibility
+  const handleStartWorkflow = () => {
+    setShowWorkflow(true);
+  };
+
+  const handleWorkflowComplete = () => {
+    setShowWorkflow(false);
+  };
+
+  if (isLoading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        <LoadingSpinner size="lg" />
+      </div>
+    );
+  }
+
+  return (
+    <ErrorBoundary>
+      <ToastProvider>
+        <div className="min-h-screen bg-white dark:bg-secondary-900">
+          <Header />
+          
+          <main>
+            {isAuthenticated ? (
+              <>
+                {showWorkflow ? (
+                  <WorkflowSection 
+                    onComplete={handleWorkflowComplete}
+                    onCancel={() => setShowWorkflow(false)}
+                  />
+                ) : (
+                  <Dashboard onStartWorkflow={handleStartWorkflow} />
+                )}
+              </>
+            ) : (
+              <>
+                <HeroSection onStartWorkflow={handleStartWorkflow} />
+                <FeaturesSection />
+                <HowItWorksSection />
+                <PricingSection />
+              </>
+            )}
+          </main>
+
+          <Footer />
+        </div>
+      </ToastProvider>
+    </ErrorBoundary>
+  );
+}
\ No newline at end of file
diff --git a/packages/frontend/src/components/Auth/LoginButton.tsx b/packages/frontend/src/components/Auth/LoginButton.tsx
new file mode 100644
index 0000000..f9a2077
--- /dev/null
+++ b/packages/frontend/src/components/Auth/LoginButton.tsx
@@ -0,0 +1,80 @@
+'use client';
+
+import { useState } from 'react';
+import { useAuth } from '@/hooks/useAuth';
+
+interface LoginButtonProps {
+  variant?: 'primary' | 'secondary' | 'outline';
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export function LoginButton({ 
+  variant = 'primary', 
+  size = 'md', 
+  className = '',
+  children 
+}: LoginButtonProps) {
+  const { login, isLoading } = useAuth();
+  const [isClicked, setIsClicked] = useState(false);
+
+  const handleLogin = async () => {
+    try {
+      setIsClicked(true);
+      await login();
+    } catch (error) {
+      console.error('Login failed:', error);
+      setIsClicked(false);
+    }
+  };
+
+  const buttonClasses = [
+    'btn',
+    `btn-${variant}`,
+    `btn-${size}`,
+    'transition-all duration-200',
+    'focus:ring-2 focus:ring-offset-2 focus:ring-primary-500',
+    className,
+  ].filter(Boolean).join(' ');
+
+  const isButtonLoading = isLoading || isClicked;
+
+  return (
+    <button
+      onClick={handleLogin}
+      disabled={isButtonLoading}
+      className={buttonClasses}
+      aria-label="Sign in with Google"
+    >
+      {isButtonLoading ? (
+        <>
+          <div className="spinner w-4 h-4" />
+          <span>Signing in...</span>
+        </>
+      ) : (
+        <>
+          <svg className="w-5 h-5" viewBox="0 0 24 24">
+            <path
+              fill="currentColor"
+              d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
+            />
+            <path
+              fill="currentColor"
+              d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+            />
+            <path
+              fill="currentColor"
+              d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
+            />
+            <path
+              fill="currentColor"
+              d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+            />
+          </svg>
+          {children || 'Sign in with Google'}
+        </>
+      )}
+    </button>
+  );
+}
\ No newline at end of file
diff --git a/packages/frontend/src/components/Layout/Footer.tsx b/packages/frontend/src/components/Layout/Footer.tsx
new file mode 100644
index 0000000..411ed75
--- /dev/null
+++ b/packages/frontend/src/components/Layout/Footer.tsx
@@ -0,0 +1,125 @@
+'use client';
+
+export function Footer() {
+  const currentYear = new Date().getFullYear();
+
+  const footerLinks = {
+    product: [
+      { name: 'Features', href: '#features' },
+      { name: 'How It Works', href: '#how-it-works' },
+      { name: 'Pricing', href: '#pricing' },
+    ],
+    company: [
+      { name: 'About Us', href: '/about' },
+      { name: 'Blog', href: '/blog' },
+      { name: 'Contact', href: '/contact' },
+    ],
+    legal: [
+      { name: 'Privacy Policy', href: '/privacy' },
+      { name: 'Terms of Service', href: '/terms' },
+      { name: 'Cookie Policy', href: '/cookies' },
+    ],
+  };
+
+  return (
+    <footer className="bg-secondary-50 dark:bg-secondary-900 border-t border-secondary-200 dark:border-secondary-700">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+        <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
+          {/* Logo and Description */}
+          <div className="md:col-span-1">
+            <div className="flex items-center gap-2 mb-4">
+              <div className="w-8 h-8 bg-primary-600 rounded-md flex items-center justify-center">
+                <svg className="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
+                </svg>
+              </div>
+              <h2 className="text-lg font-bold text-secondary-900 dark:text-secondary-100">
+                SEO Image Renamer
+              </h2>
+            </div>
+            <p className="text-secondary-600 dark:text-secondary-400 text-sm">
+              AI-powered image SEO optimization tool that helps you generate perfect filenames for better search rankings.
+            </p>
+          </div>
+
+          {/* Links */}
+          <div className="md:col-span-3">
+            <div className="grid grid-cols-1 sm:grid-cols-3 gap-8">
+              {/* Product */}
+              <div>
+                <h3 className="text-sm font-semibold text-secondary-900 dark:text-secondary-100 uppercase tracking-wider mb-4">
+                  Product
+                </h3>
+                <ul className="space-y-3">
+                  {footerLinks.product.map((link) => (
+                    <li key={link.name}>
+                      <a
+                        href={link.href}
+                        className="text-secondary-600 dark:text-secondary-400 hover:text-secondary-900 dark:hover:text-secondary-200 text-sm transition-colors"
+                      >
+                        {link.name}
+                      </a>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+
+              {/* Company */}
+              <div>
+                <h3 className="text-sm font-semibold text-secondary-900 dark:text-secondary-100 uppercase tracking-wider mb-4">
+                  Company
+                </h3>
+                <ul className="space-y-3">
+                  {footerLinks.company.map((link) => (
+                    <li key={link.name}>
+                      <a
+                        href={link.href}
+                        className="text-secondary-600 dark:text-secondary-400 hover:text-secondary-900 dark:hover:text-secondary-200 text-sm transition-colors"
+                      >
+                        {link.name}
+                      </a>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+
+              {/* Legal */}
+              <div>
+                <h3 className="text-sm font-semibold text-secondary-900 dark:text-secondary-100 uppercase tracking-wider mb-4">
+                  Legal
+                </h3>
+                <ul className="space-y-3">
+                  {footerLinks.legal.map((link) => (
+                    <li key={link.name}>
+                      <a
+                        href={link.href}
+                        className="text-secondary-600 dark:text-secondary-400 hover:text-secondary-900 dark:hover:text-secondary-200 text-sm transition-colors"
+                      >
+                        {link.name}
+                      </a>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Bottom Bar */}
+        <div className="mt-8 pt-8 border-t border-secondary-200 dark:border-secondary-700">
+          <div className="flex flex-col sm:flex-row justify-between items-center">
+            <p className="text-secondary-500 dark:text-secondary-400 text-sm">
+              © {currentYear} SEO Image Renamer. All rights reserved.
+            </p>
+            
+            <div className="flex items-center gap-6 mt-4 sm:mt-0">
+              <p className="text-secondary-500 dark:text-secondary-400 text-sm">
+                Made with ❤️ for better SEO
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}
\ No newline at end of file
diff --git a/packages/frontend/src/components/Layout/Header.tsx b/packages/frontend/src/components/Layout/Header.tsx
new file mode 100644
index 0000000..f162625
--- /dev/null
+++ b/packages/frontend/src/components/Layout/Header.tsx
@@ -0,0 +1,143 @@
+'use client';
+
+import { useState } from 'react';
+import Image from 'next/image';
+import { useAuth } from '@/hooks/useAuth';
+import { LoginButton } from '@/components/Auth/LoginButton';
+
+export function Header() {
+  const { user, isAuthenticated, logout } = useAuth();
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+
+  const navigation = [
+    { name: 'Features', href: '#features' },
+    { name: 'How It Works', href: '#how-it-works' },
+    { name: 'Pricing', href: '#pricing' },
+  ];
+
+  return (
+    <header className="bg-white dark:bg-secondary-800 border-b border-secondary-200 dark:border-secondary-700 sticky top-0 z-50">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex justify-between items-center h-16">
+          {/* Logo */}
+          <div className="flex items-center">
+            <div className="flex-shrink-0">
+              <div className="flex items-center gap-2">
+                <div className="w-8 h-8 bg-primary-600 rounded-md flex items-center justify-center">
+                  <svg className="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
+                  </svg>
+                </div>
+                <h1 className="text-xl font-bold text-secondary-900 dark:text-secondary-100">
+                  SEO Image Renamer
+                </h1>
+              </div>
+            </div>
+
+            {/* Desktop Navigation */}
+            <nav className="hidden md:ml-8 md:flex md:space-x-8">
+              {!isAuthenticated && navigation.map((item) => (
+                <a
+                  key={item.name}
+                  href={item.href}
+                  className="text-secondary-600 hover:text-secondary-900 dark:text-secondary-400 dark:hover:text-secondary-200 px-3 py-2 rounded-md text-sm font-medium transition-colors"
+                >
+                  {item.name}
+                </a>
+              ))}
+            </nav>
+          </div>
+
+          {/* User Menu / Login */}
+          <div className="flex items-center gap-4">
+            {isAuthenticated && user ? (
+              <div className="relative">
+                <button
+                  onClick={() => setIsMenuOpen(!isMenuOpen)}
+                  className="flex items-center gap-3 text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 p-1"
+                >
+                  {user.picture ? (
+                    <Image
+                      src={user.picture}
+                      alt={user.name}
+                      width={32}
+                      height={32}
+                      className="rounded-full"
+                    />
+                  ) : (
+                    <div className="w-8 h-8 bg-primary-100 dark:bg-primary-900 rounded-full flex items-center justify-center">
+                      <span className="text-primary-600 dark:text-primary-400 text-sm font-medium">
+                        {user.name.charAt(0).toUpperCase()}
+                      </span>
+                    </div>
+                  )}
+                  <span className="hidden md:block text-secondary-900 dark:text-secondary-100 font-medium">
+                    {user.name}
+                  </span>
+                  <svg className="w-4 h-4 text-secondary-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+                  </svg>
+                </button>
+
+                {/* Dropdown Menu */}
+                {isMenuOpen && (
+                  <div className="absolute right-0 mt-2 w-48 bg-white dark:bg-secondary-800 rounded-md shadow-lg py-1 z-50 border border-secondary-200 dark:border-secondary-700">
+                    <div className="px-4 py-2 text-xs text-secondary-500 dark:text-secondary-400 border-b border-secondary-200 dark:border-secondary-700">
+                      {user.email}
+                    </div>
+                    <a
+                      href="/billing"
+                      className="block px-4 py-2 text-sm text-secondary-700 dark:text-secondary-300 hover:bg-secondary-100 dark:hover:bg-secondary-700"
+                    >
+                      Billing
+                    </a>
+                    <button
+                      onClick={logout}
+                      className="w-full text-left block px-4 py-2 text-sm text-secondary-700 dark:text-secondary-300 hover:bg-secondary-100 dark:hover:bg-secondary-700"
+                    >
+                      Sign out
+                    </button>
+                  </div>
+                )}
+              </div>
+            ) : (
+              <LoginButton variant="primary" size="md">
+                Sign In
+              </LoginButton>
+            )}
+
+            {/* Mobile menu button */}
+            <div className="md:hidden">
+              <button
+                onClick={() => setIsMenuOpen(!isMenuOpen)}
+                className="text-secondary-600 hover:text-secondary-900 dark:text-secondary-400 dark:hover:text-secondary-200 p-2"
+              >
+                <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
+                </svg>
+              </button>
+            </div>
+          </div>
+        </div>
+
+        {/* Mobile Navigation */}
+        {isMenuOpen && !isAuthenticated && (
+          <div className="md:hidden">
+            <div className="px-2 pt-2 pb-3 space-y-1 border-t border-secondary-200 dark:border-secondary-700">
+              {navigation.map((item) => (
+                <a
+                  key={item.name}
+                  href={item.href}
+                  className="text-secondary-600 hover:text-secondary-900 dark:text-secondary-400 dark:hover:text-secondary-200 block px-3 py-2 rounded-md text-base font-medium"
+                  onClick={() => setIsMenuOpen(false)}
+                >
+                  {item.name}
+                </a>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+    </header>
+  );
+}
\ No newline at end of file
diff --git a/packages/frontend/src/components/UI/ErrorBoundary.tsx b/packages/frontend/src/components/UI/ErrorBoundary.tsx
new file mode 100644
index 0000000..66d9abd
--- /dev/null
+++ b/packages/frontend/src/components/UI/ErrorBoundary.tsx
@@ -0,0 +1,114 @@
+'use client';
+
+import React from 'react';
+
+interface ErrorBoundaryState {
+  hasError: boolean;
+  error: Error | null;
+  errorInfo: React.ErrorInfo | null;
+}
+
+interface ErrorBoundaryProps {
+  children: React.ReactNode;
+  fallback?: React.ComponentType<{ error: Error; retry: () => void }>;
+}
+
+export class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  constructor(props: ErrorBoundaryProps) {
+    super(props);
+    this.state = {
+      hasError: false,
+      error: null,
+      errorInfo: null,
+    };
+  }
+
+  static getDerivedStateFromError(error: Error): Partial<ErrorBoundaryState> {
+    return {
+      hasError: true,
+      error,
+    };
+  }
+
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+    console.error('ErrorBoundary caught an error:', error, errorInfo);
+    this.setState({
+      error,
+      errorInfo,
+    });
+  }
+
+  handleRetry = () => {
+    this.setState({
+      hasError: false,
+      error: null,
+      errorInfo: null,
+    });
+  };
+
+  render() {
+    if (this.state.hasError && this.state.error) {
+      if (this.props.fallback) {
+        const FallbackComponent = this.props.fallback;
+        return <FallbackComponent error={this.state.error} retry={this.handleRetry} />;
+      }
+
+      return (
+        <div className="min-h-screen flex items-center justify-center bg-secondary-50 dark:bg-secondary-900">
+          <div className="max-w-md w-full mx-4">
+            <div className="bg-white dark:bg-secondary-800 rounded-xl shadow-soft p-6 text-center">
+              <div className="w-16 h-16 mx-auto mb-4 bg-error-100 dark:bg-error-900/30 rounded-full flex items-center justify-center">
+                <svg className="w-8 h-8 text-error-600 dark:text-error-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z" />
+                </svg>
+              </div>
+              
+              <h2 className="text-lg font-semibold text-secondary-900 dark:text-secondary-100 mb-2">
+                Something went wrong
+              </h2>
+              
+              <p className="text-secondary-600 dark:text-secondary-400 mb-6">
+                We encountered an unexpected error. Please try refreshing the page or contact support if the problem persists.
+              </p>
+
+              {process.env.NODE_ENV === 'development' && (
+                <details className="mb-6 text-left">
+                  <summary className="cursor-pointer text-sm text-secondary-500 dark:text-secondary-400 mb-2">
+                    Error Details (Development)
+                  </summary>
+                  <div className="bg-secondary-100 dark:bg-secondary-700 rounded-md p-3 text-xs font-mono text-secondary-700 dark:text-secondary-300 overflow-auto max-h-32">
+                    <div className="font-semibold mb-1">Error:</div>
+                    <div className="mb-2">{this.state.error.toString()}</div>
+                    {this.state.errorInfo && (
+                      <>
+                        <div className="font-semibold mb-1">Component Stack:</div>
+                        <div>{this.state.errorInfo.componentStack}</div>
+                      </>
+                    )}
+                  </div>
+                </details>
+              )}
+
+              <div className="flex gap-3 justify-center">
+                <button
+                  onClick={this.handleRetry}
+                  className="btn btn-primary"
+                >
+                  Try Again
+                </button>
+                <button
+                  onClick={() => window.location.reload()}
+                  className="btn btn-outline"
+                >
+                  Refresh Page
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}
\ No newline at end of file
diff --git a/packages/frontend/src/components/UI/LoadingSpinner.tsx b/packages/frontend/src/components/UI/LoadingSpinner.tsx
new file mode 100644
index 0000000..3fb6096
--- /dev/null
+++ b/packages/frontend/src/components/UI/LoadingSpinner.tsx
@@ -0,0 +1,42 @@
+'use client';
+
+interface LoadingSpinnerProps {
+  size?: 'sm' | 'md' | 'lg' | 'xl';
+  className?: string;
+  color?: 'primary' | 'secondary' | 'white';
+}
+
+const sizeClasses = {
+  sm: 'w-4 h-4',
+  md: 'w-6 h-6',
+  lg: 'w-8 h-8',
+  xl: 'w-12 h-12',
+};
+
+const colorClasses = {
+  primary: 'border-primary-600',
+  secondary: 'border-secondary-600',
+  white: 'border-white',
+};
+
+export function LoadingSpinner({ 
+  size = 'md', 
+  className = '',
+  color = 'primary'
+}: LoadingSpinnerProps) {
+  return (
+    <div
+      className={`
+        animate-spin rounded-full border-2 border-transparent 
+        ${sizeClasses[size]} 
+        ${colorClasses[color]}
+        border-t-current
+        ${className}
+      `}
+      role="status"
+      aria-label="Loading"
+    >
+      <span className="sr-only">Loading...</span>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/packages/frontend/src/components/UI/ToastProvider.tsx b/packages/frontend/src/components/UI/ToastProvider.tsx
new file mode 100644
index 0000000..5050aaf
--- /dev/null
+++ b/packages/frontend/src/components/UI/ToastProvider.tsx
@@ -0,0 +1,211 @@
+'use client';
+
+import React, { createContext, useContext, useState, useCallback } from 'react';
+import { createPortal } from 'react-dom';
+
+interface Toast {
+  id: string;
+  type: 'success' | 'error' | 'warning' | 'info';
+  title: string;
+  message?: string;
+  duration?: number;
+  action?: {
+    label: string;
+    onClick: () => void;
+  };
+}
+
+interface ToastContextValue {
+  showToast: (toast: Omit<Toast, 'id'>) => void;
+  removeToast: (id: string) => void;
+  clearAllToasts: () => void;
+}
+
+const ToastContext = createContext<ToastContextValue | null>(null);
+
+export function useToast() {
+  const context = useContext(ToastContext);
+  if (!context) {
+    throw new Error('useToast must be used within a ToastProvider');
+  }
+  return context;
+}
+
+interface ToastProviderProps {
+  children: React.ReactNode;
+}
+
+export function ToastProvider({ children }: ToastProviderProps) {
+  const [toasts, setToasts] = useState<Toast[]>([]);
+
+  const showToast = useCallback((toast: Omit<Toast, 'id'>) => {
+    const id = Math.random().toString(36).substr(2, 9);
+    const newToast: Toast = {
+      ...toast,
+      id,
+      duration: toast.duration || 5000,
+    };
+
+    setToasts(prev => [...prev, newToast]);
+
+    // Auto remove toast after duration
+    if (newToast.duration > 0) {
+      setTimeout(() => {
+        removeToast(id);
+      }, newToast.duration);
+    }
+  }, []);
+
+  const removeToast = useCallback((id: string) => {
+    setToasts(prev => prev.filter(toast => toast.id !== id));
+  }, []);
+
+  const clearAllToasts = useCallback(() => {
+    setToasts([]);
+  }, []);
+
+  const value = {
+    showToast,
+    removeToast,
+    clearAllToasts,
+  };
+
+  return (
+    <ToastContext.Provider value={value}>
+      {children}
+      <ToastPortal toasts={toasts} onRemove={removeToast} />
+    </ToastContext.Provider>
+  );
+}
+
+interface ToastPortalProps {
+  toasts: Toast[];
+  onRemove: (id: string) => void;
+}
+
+function ToastPortal({ toasts, onRemove }: ToastPortalProps) {
+  if (typeof window === 'undefined') return null;
+
+  const toastRoot = document.getElementById('toast-root');
+  if (!toastRoot) return null;
+
+  return createPortal(
+    <div className="fixed top-4 right-4 z-[100] flex flex-col gap-2 pointer-events-none">
+      {toasts.map(toast => (
+        <ToastItem key={toast.id} toast={toast} onRemove={onRemove} />
+      ))}
+    </div>,
+    toastRoot
+  );
+}
+
+interface ToastItemProps {
+  toast: Toast;
+  onRemove: (id: string) => void;
+}
+
+function ToastItem({ toast, onRemove }: ToastItemProps) {
+  const [isVisible, setIsVisible] = useState(false);
+  const [isExiting, setIsExiting] = useState(false);
+
+  React.useEffect(() => {
+    // Trigger enter animation
+    const timer = setTimeout(() => setIsVisible(true), 10);
+    return () => clearTimeout(timer);
+  }, []);
+
+  const handleRemove = () => {
+    setIsExiting(true);
+    setTimeout(() => onRemove(toast.id), 150);
+  };
+
+  const getToastStyles = () => {
+    const baseStyles = 'toast pointer-events-auto transform transition-all duration-300 ease-in-out';
+    const typeStyles = {
+      success: 'toast-success',
+      error: 'toast-error',
+      warning: 'toast-warning',
+      info: '',
+    };
+
+    const animationStyles = isExiting 
+      ? 'translate-x-full opacity-0 scale-95'
+      : isVisible 
+        ? 'translate-x-0 opacity-100 scale-100'
+        : 'translate-x-full opacity-0 scale-95';
+
+    return `${baseStyles} ${typeStyles[toast.type]} ${animationStyles}`;
+  };
+
+  const getIcon = () => {
+    switch (toast.type) {
+      case 'success':
+        return (
+          <svg className="w-5 h-5 text-success-600 dark:text-success-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+          </svg>
+        );
+      case 'error':
+        return (
+          <svg className="w-5 h-5 text-error-600 dark:text-error-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        );
+      case 'warning':
+        return (
+          <svg className="w-5 h-5 text-warning-600 dark:text-warning-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z" />
+          </svg>
+        );
+      default:
+        return (
+          <svg className="w-5 h-5 text-primary-600 dark:text-primary-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+          </svg>
+        );
+    }
+  };
+
+  return (
+    <div className={getToastStyles()}>
+      <div className="flex items-start gap-3">
+        <div className="flex-shrink-0">
+          {getIcon()}
+        </div>
+        
+        <div className="flex-1 min-w-0">
+          <div className="font-medium text-secondary-900 dark:text-secondary-100">
+            {toast.title}
+          </div>
+          {toast.message && (
+            <div className="mt-1 text-sm text-secondary-600 dark:text-secondary-400">
+              {toast.message}
+            </div>
+          )}
+          {toast.action && (
+            <div className="mt-2">
+              <button
+                onClick={() => {
+                  toast.action?.onClick();
+                  handleRemove();
+                }}
+                className="text-sm font-medium text-primary-600 hover:text-primary-500 dark:text-primary-400 dark:hover:text-primary-300"
+              >
+                {toast.action.label}
+              </button>
+            </div>
+          )}
+        </div>
+
+        <button
+          onClick={handleRemove}
+          className="flex-shrink-0 text-secondary-400 hover:text-secondary-600 dark:text-secondary-500 dark:hover:text-secondary-300 transition-colors"
+        >
+          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </button>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/packages/frontend/src/hooks/useAuth.ts b/packages/frontend/src/hooks/useAuth.ts
new file mode 100644
index 0000000..5413ce4
--- /dev/null
+++ b/packages/frontend/src/hooks/useAuth.ts
@@ -0,0 +1,191 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+import { useRouter } from 'next/navigation';
+import { apiClient } from '@/lib/api-client';
+import type { User, AuthResponse } from '@/types';
+
+interface AuthState {
+  user: User | null;
+  isAuthenticated: boolean;
+  isLoading: boolean;
+  error: string | null;
+}
+
+interface UseAuthReturn extends AuthState {
+  login: () => Promise<void>;
+  logout: () => Promise<void>;
+  handleCallback: (code: string) => Promise<void>;
+  clearError: () => void;
+  refreshUser: () => Promise<void>;
+}
+
+export function useAuth(): UseAuthReturn {
+  const [state, setState] = useState<AuthState>({
+    user: null,
+    isAuthenticated: false,
+    isLoading: true,
+    error: null,
+  });
+
+  const router = useRouter();
+
+  const clearError = useCallback(() => {
+    setState(prev => ({ ...prev, error: null }));
+  }, []);
+
+  const setUser = useCallback((user: User | null) => {
+    setState(prev => ({
+      ...prev,
+      user,
+      isAuthenticated: !!user,
+      isLoading: false,
+      error: null,
+    }));
+  }, []);
+
+  const setError = useCallback((error: string) => {
+    setState(prev => ({
+      ...prev,
+      error,
+      isLoading: false,
+    }));
+  }, []);
+
+  const setLoading = useCallback((isLoading: boolean) => {
+    setState(prev => ({ ...prev, isLoading }));
+  }, []);
+
+  // Initialize auth state
+  useEffect(() => {
+    const initAuth = async () => {
+      const token = typeof window !== 'undefined' ? localStorage.getItem('auth_token') : null;
+      
+      if (!token) {
+        setLoading(false);
+        return;
+      }
+
+      try {
+        const user = await apiClient.getProfile();
+        setUser(user);
+      } catch (error) {
+        console.error('Failed to initialize auth:', error);
+        // Clear invalid token
+        localStorage.removeItem('auth_token');
+        setLoading(false);
+      }
+    };
+
+    initAuth();
+  }, [setUser, setLoading]);
+
+  // Listen for auth events
+  useEffect(() => {
+    const handleAuthEvent = (event: CustomEvent) => {
+      switch (event.type) {
+        case 'auth:logout':
+          setUser(null);
+          break;
+      }
+    };
+
+    window.addEventListener('auth:logout', handleAuthEvent as EventListener);
+
+    return () => {
+      window.removeEventListener('auth:logout', handleAuthEvent as EventListener);
+    };
+  }, [setUser]);
+
+  const login = useCallback(async () => {
+    try {
+      setLoading(true);
+      clearError();
+
+      const { url } = await apiClient.getAuthUrl();
+      
+      // Store the current URL for redirect after login
+      const currentUrl = window.location.href;
+      localStorage.setItem('auth_redirect', currentUrl);
+      
+      // Redirect to Google OAuth
+      window.location.href = url;
+    } catch (error) {
+      console.error('Login failed:', error);
+      setError(error instanceof Error ? error.message : 'Login failed');
+    }
+  }, [setLoading, clearError, setError]);
+
+  const handleCallback = useCallback(async (code: string) => {
+    try {
+      setLoading(true);
+      clearError();
+
+      const response: AuthResponse = await apiClient.handleCallback(code);
+      setUser(response.user);
+
+      // Redirect to original URL or dashboard
+      const redirectUrl = localStorage.getItem('auth_redirect') || '/';
+      localStorage.removeItem('auth_redirect');
+      router.push(redirectUrl);
+    } catch (error) {
+      console.error('Auth callback failed:', error);
+      setError(error instanceof Error ? error.message : 'Authentication failed');
+      router.push('/');
+    }
+  }, [setLoading, clearError, setUser, setError, router]);
+
+  const logout = useCallback(async () => {
+    try {
+      setLoading(true);
+      await apiClient.logout();
+    } catch (error) {
+      console.error('Logout failed:', error);
+    } finally {
+      setUser(null);
+      router.push('/');
+    }
+  }, [setLoading, setUser, router]);
+
+  const refreshUser = useCallback(async () => {
+    if (!state.isAuthenticated) return;
+
+    try {
+      const user = await apiClient.getProfile();
+      setUser(user);
+    } catch (error) {
+      console.error('Failed to refresh user:', error);
+      // Don't set error for refresh failures, just log them
+    }
+  }, [state.isAuthenticated, setUser]);
+
+  return {
+    ...state,
+    login,
+    logout,
+    handleCallback,
+    clearError,
+    refreshUser,
+  };
+}
+
+// Context provider hook for easier usage
+export function useAuthRequired(): UseAuthReturn & { user: User } {
+  const auth = useAuth();
+  const router = useRouter();
+
+  useEffect(() => {
+    if (!auth.isLoading && !auth.isAuthenticated) {
+      router.push('/');
+    }
+  }, [auth.isLoading, auth.isAuthenticated, router]);
+
+  if (!auth.user) {
+    throw new Error('User is required but not authenticated');
+  }
+
+  return {
+    ...auth,
+    user: auth.user,
+  };
+}
\ No newline at end of file
diff --git a/packages/frontend/src/hooks/useUpload.ts b/packages/frontend/src/hooks/useUpload.ts
new file mode 100644
index 0000000..bcffd0b
--- /dev/null
+++ b/packages/frontend/src/hooks/useUpload.ts
@@ -0,0 +1,317 @@
+'use client';
+
+import { useState, useCallback, useRef } from 'react';
+import { apiClient } from '@/lib/api-client';
+import type { Batch, Image, BatchCreateRequest } from '@/types';
+
+interface UploadState {
+  files: File[];
+  selectedFiles: File[];
+  uploadProgress: number;
+  isUploading: boolean;
+  isValidating: boolean;
+  currentBatch: Batch | null;
+  uploadedImages: Image[];
+  error: string | null;
+  dragActive: boolean;
+}
+
+interface ValidationError {
+  file: File;
+  error: string;
+}
+
+interface UseUploadReturn extends UploadState {
+  // File selection
+  addFiles: (files: File[]) => void;
+  removeFile: (index: number) => void;
+  clearFiles: () => void;
+  
+  // Drag and drop
+  onDragEnter: (e: React.DragEvent) => void;
+  onDragLeave: (e: React.DragEvent) => void;
+  onDragOver: (e: React.DragEvent) => void;
+  onDrop: (e: React.DragEvent) => void;
+  
+  // Upload process
+  startUpload: (keywords: string[], batchName?: string) => Promise<void>;
+  cancelUpload: () => void;
+  
+  // Validation
+  validateFiles: (files: File[]) => ValidationError[];
+  
+  // State management
+  clearError: () => void;
+  reset: () => void;
+}
+
+const MAX_FILE_SIZE = 10 * 1024 * 1024; // 10MB
+const MAX_FILES = 50;
+const SUPPORTED_TYPES = [
+  'image/jpeg',
+  'image/jpg', 
+  'image/png',
+  'image/webp',
+  'image/gif'
+];
+
+export function useUpload(): UseUploadReturn {
+  const [state, setState] = useState<UploadState>({
+    files: [],
+    selectedFiles: [],
+    uploadProgress: 0,
+    isUploading: false,
+    isValidating: false,
+    currentBatch: null,
+    uploadedImages: [],
+    error: null,
+    dragActive: false,
+  });
+
+  const dragCounter = useRef(0);
+  const uploadAbortController = useRef<AbortController | null>(null);
+
+  const clearError = useCallback(() => {
+    setState(prev => ({ ...prev, error: null }));
+  }, []);
+
+  const setError = useCallback((error: string) => {
+    setState(prev => ({ ...prev, error, isUploading: false }));
+  }, []);
+
+  const validateFiles = useCallback((files: File[]): ValidationError[] => {
+    const errors: ValidationError[] = [];
+
+    for (const file of files) {
+      // Check file size
+      if (file.size > MAX_FILE_SIZE) {
+        errors.push({
+          file,
+          error: `File "${file.name}" is too large. Maximum size is ${MAX_FILE_SIZE / 1024 / 1024}MB.`
+        });
+        continue;
+      }
+
+      // Check file type
+      if (!SUPPORTED_TYPES.includes(file.type)) {
+        errors.push({
+          file,
+          error: `File "${file.name}" has unsupported format. Supported formats: JPG, PNG, WebP, GIF.`
+        });
+        continue;
+      }
+
+      // Check for duplicates
+      const existingFile = state.files.find(f => 
+        f.name === file.name && f.size === file.size && f.lastModified === file.lastModified
+      );
+      if (existingFile) {
+        errors.push({
+          file,
+          error: `File "${file.name}" is already selected.`
+        });
+        continue;
+      }
+    }
+
+    // Check total file count
+    if (state.files.length + files.length - errors.length > MAX_FILES) {
+      const allowedCount = MAX_FILES - state.files.length;
+      errors.push({
+        file: files[0], // Use first file as reference
+        error: `Too many files. You can only upload ${MAX_FILES} files at once. You can add ${allowedCount} more files.`
+      });
+    }
+
+    return errors;
+  }, [state.files]);
+
+  const addFiles = useCallback((newFiles: File[]) => {
+    setState(prev => ({ ...prev, isValidating: true, error: null }));
+
+    const validationErrors = validateFiles(newFiles);
+    
+    if (validationErrors.length > 0) {
+      const errorMessage = validationErrors.map(e => e.error).join('\n');
+      setState(prev => ({ 
+        ...prev, 
+        error: errorMessage, 
+        isValidating: false 
+      }));
+      return;
+    }
+
+    const validFiles = newFiles.filter(file => 
+      !validationErrors.some(error => error.file === file)
+    );
+
+    setState(prev => ({
+      ...prev,
+      files: [...prev.files, ...validFiles],
+      selectedFiles: [...prev.selectedFiles, ...validFiles],
+      isValidating: false,
+    }));
+  }, [validateFiles]);
+
+  const removeFile = useCallback((index: number) => {
+    setState(prev => ({
+      ...prev,
+      files: prev.files.filter((_, i) => i !== index),
+      selectedFiles: prev.selectedFiles.filter((_, i) => i !== index),
+    }));
+  }, []);
+
+  const clearFiles = useCallback(() => {
+    setState(prev => ({
+      ...prev,
+      files: [],
+      selectedFiles: [],
+      uploadedImages: [],
+      currentBatch: null,
+      uploadProgress: 0,
+      error: null,
+    }));
+  }, []);
+
+  // Drag and drop handlers
+  const onDragEnter = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    dragCounter.current++;
+    if (e.dataTransfer.items && e.dataTransfer.items.length > 0) {
+      setState(prev => ({ ...prev, dragActive: true }));
+    }
+  }, []);
+
+  const onDragLeave = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    dragCounter.current--;
+    if (dragCounter.current === 0) {
+      setState(prev => ({ ...prev, dragActive: false }));
+    }
+  }, []);
+
+  const onDragOver = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+  }, []);
+
+  const onDrop = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    
+    setState(prev => ({ ...prev, dragActive: false }));
+    dragCounter.current = 0;
+
+    if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
+      const files = Array.from(e.dataTransfer.files);
+      addFiles(files);
+    }
+  }, [addFiles]);
+
+  const startUpload = useCallback(async (keywords: string[], batchName?: string) => {
+    if (state.files.length === 0) {
+      setError('No files selected for upload');
+      return;
+    }
+
+    try {
+      setState(prev => ({ 
+        ...prev, 
+        isUploading: true, 
+        uploadProgress: 0, 
+        error: null 
+      }));
+
+      // Create abort controller
+      uploadAbortController.current = new AbortController();
+
+      // Create batch
+      const batchData: BatchCreateRequest = {
+        name: batchName || `Batch ${new Date().toLocaleString()}`,
+        keywords,
+      };
+
+      const batch = await apiClient.createBatch(batchData);
+      
+      setState(prev => ({ ...prev, currentBatch: batch }));
+
+      // Upload images with progress tracking
+      const uploadedImages = await apiClient.uploadImages(
+        state.files,
+        batch.id,
+        (progress) => {
+          setState(prev => ({ ...prev, uploadProgress: progress }));
+        }
+      );
+
+      setState(prev => ({
+        ...prev,
+        uploadedImages,
+        uploadProgress: 100,
+        isUploading: false,
+      }));
+
+    } catch (error) {
+      console.error('Upload failed:', error);
+      
+      if (error instanceof Error) {
+        if (error.name === 'AbortError') {
+          setState(prev => ({ ...prev, isUploading: false, uploadProgress: 0 }));
+        } else {
+          setError(error.message);
+        }
+      } else {
+        setError('Upload failed. Please try again.');
+      }
+    } finally {
+      uploadAbortController.current = null;
+    }
+  }, [state.files, setError]);
+
+  const cancelUpload = useCallback(() => {
+    if (uploadAbortController.current) {
+      uploadAbortController.current.abort();
+      uploadAbortController.current = null;
+    }
+    
+    setState(prev => ({
+      ...prev,
+      isUploading: false,
+      uploadProgress: 0,
+    }));
+  }, []);
+
+  const reset = useCallback(() => {
+    cancelUpload();
+    setState({
+      files: [],
+      selectedFiles: [],
+      uploadProgress: 0,
+      isUploading: false,
+      isValidating: false,
+      currentBatch: null,
+      uploadedImages: [],
+      error: null,
+      dragActive: false,
+    });
+    dragCounter.current = 0;
+  }, [cancelUpload]);
+
+  return {
+    ...state,
+    addFiles,
+    removeFile,
+    clearFiles,
+    onDragEnter,
+    onDragLeave,
+    onDragOver,
+    onDrop,
+    startUpload,
+    cancelUpload,
+    validateFiles,
+    clearError,
+    reset,
+  };
+}
\ No newline at end of file
diff --git a/packages/frontend/src/hooks/useWebSocket.ts b/packages/frontend/src/hooks/useWebSocket.ts
new file mode 100644
index 0000000..ed28d1e
--- /dev/null
+++ b/packages/frontend/src/hooks/useWebSocket.ts
@@ -0,0 +1,297 @@
+'use client';
+
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { Socket } from 'socket.io-client';
+import { apiClient } from '@/lib/api-client';
+import type { ProgressUpdate, Batch, Image, UserQuota, Subscription } from '@/types';
+
+interface WebSocketState {
+  isConnected: boolean;
+  isConnecting: boolean;
+  error: string | null;
+  reconnectAttempts: number;
+}
+
+interface UseWebSocketReturn extends WebSocketState {
+  connect: (userId?: string) => void;
+  disconnect: () => void;
+  subscribeToProgress: (batchId: string, callback: (update: ProgressUpdate) => void) => () => void;
+  subscribeToBatch: (batchId: string, callbacks: BatchCallbacks) => () => void;
+  subscribeToUser: (callbacks: UserCallbacks) => () => void;
+}
+
+interface BatchCallbacks {
+  onBatchUpdated?: (batch: Batch) => void;
+  onBatchCompleted?: (batch: Batch) => void;
+  onBatchFailed?: (batch: Batch) => void;
+  onImageProcessing?: (image: Image) => void;
+  onImageCompleted?: (image: Image) => void;
+  onImageFailed?: (image: Image) => void;
+  onProgress?: (update: ProgressUpdate) => void;
+}
+
+interface UserCallbacks {
+  onQuotaUpdated?: (quota: UserQuota) => void;
+  onSubscriptionUpdated?: (subscription: Subscription) => void;
+}
+
+const MAX_RECONNECT_ATTEMPTS = 5;
+const RECONNECT_INTERVAL = 5000;
+
+export function useWebSocket(): UseWebSocketReturn {
+  const [state, setState] = useState<WebSocketState>({
+    isConnected: false,
+    isConnecting: false,
+    error: null,
+    reconnectAttempts: 0,
+  });
+
+  const socketRef = useRef<Socket | null>(null);
+  const reconnectTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const subscriptionsRef = useRef<Map<string, () => void>>(new Map());
+
+  const clearError = useCallback(() => {
+    setState(prev => ({ ...prev, error: null }));
+  }, []);
+
+  const setError = useCallback((error: string) => {
+    setState(prev => ({ ...prev, error, isConnecting: false }));
+  }, []);
+
+  const setConnected = useCallback((connected: boolean) => {
+    setState(prev => ({
+      ...prev,
+      isConnected: connected,
+      isConnecting: false,
+      reconnectAttempts: connected ? 0 : prev.reconnectAttempts,
+      error: connected ? null : prev.error,
+    }));
+  }, []);
+
+  const setConnecting = useCallback((connecting: boolean) => {
+    setState(prev => ({ ...prev, isConnecting: connecting }));
+  }, []);
+
+  const incrementReconnectAttempts = useCallback(() => {
+    setState(prev => ({ ...prev, reconnectAttempts: prev.reconnectAttempts + 1 }));
+  }, []);
+
+  const scheduleReconnect = useCallback(() => {
+    if (state.reconnectAttempts >= MAX_RECONNECT_ATTEMPTS) {
+      setError('Maximum reconnection attempts reached. Please refresh the page.');
+      return;
+    }
+
+    const delay = Math.min(RECONNECT_INTERVAL * Math.pow(2, state.reconnectAttempts), 30000);
+    
+    reconnectTimeoutRef.current = setTimeout(() => {
+      if (!state.isConnected && socketRef.current) {
+        incrementReconnectAttempts();
+        socketRef.current.connect();
+      }
+    }, delay);
+  }, [state.reconnectAttempts, state.isConnected, incrementReconnectAttempts, setError]);
+
+  const connect = useCallback((userId?: string) => {
+    if (socketRef.current?.connected) {
+      return;
+    }
+
+    try {
+      setConnecting(true);
+      clearError();
+
+      const socket = apiClient.connectWebSocket(userId);
+      socketRef.current = socket;
+
+      socket.on('connect', () => {
+        console.log('WebSocket connected');
+        setConnected(true);
+        
+        // Clear any pending reconnect timeout
+        if (reconnectTimeoutRef.current) {
+          clearTimeout(reconnectTimeoutRef.current);
+          reconnectTimeoutRef.current = null;
+        }
+      });
+
+      socket.on('disconnect', (reason: string) => {
+        console.log('WebSocket disconnected:', reason);
+        setConnected(false);
+
+        // Only attempt to reconnect if it wasn't a manual disconnect
+        if (reason !== 'io client disconnect' && reason !== 'io server disconnect') {
+          scheduleReconnect();
+        }
+      });
+
+      socket.on('connect_error', (error: Error) => {
+        console.error('WebSocket connection error:', error);
+        setError(`Connection failed: ${error.message}`);
+        scheduleReconnect();
+      });
+
+      // Handle auth errors
+      socket.on('error', (error: any) => {
+        console.error('WebSocket error:', error);
+        if (error.type === 'UnauthorizedError') {
+          setError('Authentication failed. Please log in again.');
+          disconnect();
+        } else {
+          setError(error.message || 'WebSocket error occurred');
+        }
+      });
+
+    } catch (error) {
+      console.error('Failed to create WebSocket connection:', error);
+      setError(error instanceof Error ? error.message : 'Failed to connect');
+    }
+  }, [setConnecting, clearError, setConnected, setError, scheduleReconnect]);
+
+  const disconnect = useCallback(() => {
+    if (reconnectTimeoutRef.current) {
+      clearTimeout(reconnectTimeoutRef.current);
+      reconnectTimeoutRef.current = null;
+    }
+
+    // Clean up all subscriptions
+    subscriptionsRef.current.forEach(unsubscribe => unsubscribe());
+    subscriptionsRef.current.clear();
+
+    if (socketRef.current) {
+      socketRef.current.disconnect();
+      socketRef.current = null;
+    }
+
+    setConnected(false);
+  }, [setConnected]);
+
+  const subscribeToProgress = useCallback((batchId: string, callback: (update: ProgressUpdate) => void) => {
+    if (!socketRef.current) {
+      throw new Error('WebSocket not connected');
+    }
+
+    const eventName = `progress:${batchId}`;
+    const socket = socketRef.current;
+
+    socket.on(eventName, callback);
+    socket.emit('subscribe:progress', { batchId });
+
+    const unsubscribe = () => {
+      socket.off(eventName, callback);
+      socket.emit('unsubscribe:progress', { batchId });
+      subscriptionsRef.current.delete(`progress:${batchId}`);
+    };
+
+    subscriptionsRef.current.set(`progress:${batchId}`, unsubscribe);
+    return unsubscribe;
+  }, []);
+
+  const subscribeToBatch = useCallback((batchId: string, callbacks: BatchCallbacks) => {
+    if (!socketRef.current) {
+      throw new Error('WebSocket not connected');
+    }
+
+    const socket = socketRef.current;
+    const unsubscribeFns: (() => void)[] = [];
+
+    // Subscribe to batch events
+    if (callbacks.onBatchUpdated) {
+      const eventName = `batch:updated:${batchId}`;
+      socket.on(eventName, callbacks.onBatchUpdated);
+      unsubscribeFns.push(() => socket.off(eventName, callbacks.onBatchUpdated!));
+    }
+
+    if (callbacks.onBatchCompleted) {
+      const eventName = `batch:completed:${batchId}`;
+      socket.on(eventName, callbacks.onBatchCompleted);
+      unsubscribeFns.push(() => socket.off(eventName, callbacks.onBatchCompleted!));
+    }
+
+    if (callbacks.onBatchFailed) {
+      const eventName = `batch:failed:${batchId}`;
+      socket.on(eventName, callbacks.onBatchFailed);
+      unsubscribeFns.push(() => socket.off(eventName, callbacks.onBatchFailed!));
+    }
+
+    // Subscribe to image events
+    if (callbacks.onImageProcessing) {
+      const eventName = `image:processing:${batchId}`;
+      socket.on(eventName, callbacks.onImageProcessing);
+      unsubscribeFns.push(() => socket.off(eventName, callbacks.onImageProcessing!));
+    }
+
+    if (callbacks.onImageCompleted) {
+      const eventName = `image:completed:${batchId}`;
+      socket.on(eventName, callbacks.onImageCompleted);
+      unsubscribeFns.push(() => socket.off(eventName, callbacks.onImageCompleted!));
+    }
+
+    if (callbacks.onImageFailed) {
+      const eventName = `image:failed:${batchId}`;
+      socket.on(eventName, callbacks.onImageFailed);
+      unsubscribeFns.push(() => socket.off(eventName, callbacks.onImageFailed!));
+    }
+
+    // Subscribe to progress updates
+    if (callbacks.onProgress) {
+      const progressUnsubscribe = subscribeToProgress(batchId, callbacks.onProgress);
+      unsubscribeFns.push(progressUnsubscribe);
+    }
+
+    // Join batch room
+    socket.emit('join:batch', { batchId });
+
+    const unsubscribe = () => {
+      unsubscribeFns.forEach(fn => fn());
+      socket.emit('leave:batch', { batchId });
+      subscriptionsRef.current.delete(`batch:${batchId}`);
+    };
+
+    subscriptionsRef.current.set(`batch:${batchId}`, unsubscribe);
+    return unsubscribe;
+  }, [subscribeToProgress]);
+
+  const subscribeToUser = useCallback((callbacks: UserCallbacks) => {
+    if (!socketRef.current) {
+      throw new Error('WebSocket not connected');
+    }
+
+    const socket = socketRef.current;
+    const unsubscribeFns: (() => void)[] = [];
+
+    if (callbacks.onQuotaUpdated) {
+      socket.on('quota:updated', callbacks.onQuotaUpdated);
+      unsubscribeFns.push(() => socket.off('quota:updated', callbacks.onQuotaUpdated!));
+    }
+
+    if (callbacks.onSubscriptionUpdated) {
+      socket.on('subscription:updated', callbacks.onSubscriptionUpdated);
+      unsubscribeFns.push(() => socket.off('subscription:updated', callbacks.onSubscriptionUpdated!));
+    }
+
+    const unsubscribe = () => {
+      unsubscribeFns.forEach(fn => fn());
+      subscriptionsRef.current.delete('user');
+    };
+
+    subscriptionsRef.current.set('user', unsubscribe);
+    return unsubscribe;
+  }, []);
+
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      disconnect();
+    };
+  }, [disconnect]);
+
+  return {
+    ...state,
+    connect,
+    disconnect,
+    subscribeToProgress,
+    subscribeToBatch,
+    subscribeToUser,
+  };
+}
\ No newline at end of file
diff --git a/packages/frontend/src/lib/api-client.ts b/packages/frontend/src/lib/api-client.ts
new file mode 100644
index 0000000..8aa20a5
--- /dev/null
+++ b/packages/frontend/src/lib/api-client.ts
@@ -0,0 +1,340 @@
+import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios';
+import { io, Socket } from 'socket.io-client';
+import type {
+  User,
+  AuthResponse,
+  Batch,
+  BatchCreateRequest,
+  BatchStatus,
+  Image,
+  UpdateFilenameRequest,
+  EnhanceKeywordsRequest,
+  EnhanceKeywordsResponse,
+  CheckoutSessionRequest,
+  CheckoutSessionResponse,
+  PortalSessionRequest,
+  PortalSessionResponse,
+  Subscription,
+  UserQuota,
+  UserStats,
+  DownloadRequest,
+  DownloadResponse,
+  DownloadStatus,
+  Plan,
+  ProgressUpdate,
+} from '@/types/api';
+
+export class APIClient {
+  private axios: AxiosInstance;
+  private socket: Socket | null = null;
+  private baseURL: string;
+  private wsURL: string;
+
+  constructor() {
+    this.baseURL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3001';
+    this.wsURL = process.env.NEXT_PUBLIC_WS_URL || 'ws://localhost:3001';
+
+    this.axios = axios.create({
+      baseURL: this.baseURL,
+      timeout: 30000,
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+
+    this.setupInterceptors();
+  }
+
+  private setupInterceptors() {
+    // Request interceptor to add auth token
+    this.axios.interceptors.request.use(
+      (config) => {
+        const token = this.getToken();
+        if (token) {
+          config.headers.Authorization = `Bearer ${token}`;
+        }
+        return config;
+      },
+      (error) => Promise.reject(error)
+    );
+
+    // Response interceptor for error handling
+    this.axios.interceptors.response.use(
+      (response) => response,
+      (error) => {
+        if (error.response?.status === 401) {
+          this.clearToken();
+          // Redirect to login or emit auth error event
+          window.dispatchEvent(new CustomEvent('auth:logout'));
+        }
+        return Promise.reject(error);
+      }
+    );
+  }
+
+  // Token management
+  private getToken(): string | null {
+    if (typeof window !== 'undefined') {
+      return localStorage.getItem('auth_token');
+    }
+    return null;
+  }
+
+  setToken(token: string | null) {
+    if (typeof window !== 'undefined') {
+      if (token) {
+        localStorage.setItem('auth_token', token);
+      } else {
+        localStorage.removeItem('auth_token');
+      }
+    }
+  }
+
+  private clearToken() {
+    this.setToken(null);
+  }
+
+  // WebSocket connection
+  connectWebSocket(userId?: string): Socket {
+    if (this.socket?.connected) {
+      return this.socket;
+    }
+
+    const token = this.getToken();
+    this.socket = io(this.wsURL, {
+      auth: {
+        token,
+      },
+      query: userId ? { userId } : undefined,
+      transports: ['websocket', 'polling'],
+      upgrade: true,
+      rememberUpgrade: true,
+    });
+
+    this.socket.on('connect', () => {
+      console.log('WebSocket connected');
+    });
+
+    this.socket.on('disconnect', () => {
+      console.log('WebSocket disconnected');
+    });
+
+    this.socket.on('connect_error', (error) => {
+      console.error('WebSocket connection error:', error);
+    });
+
+    return this.socket;
+  }
+
+  disconnectWebSocket() {
+    if (this.socket) {
+      this.socket.disconnect();
+      this.socket = null;
+    }
+  }
+
+  // Progress subscription
+  subscribeToProgress(batchId: string, callback: (update: ProgressUpdate) => void) {
+    if (!this.socket) {
+      throw new Error('WebSocket not connected');
+    }
+
+    this.socket.on(`progress:${batchId}`, callback);
+    this.socket.emit('subscribe:progress', { batchId });
+
+    return () => {
+      this.socket?.off(`progress:${batchId}`, callback);
+      this.socket?.emit('unsubscribe:progress', { batchId });
+    };
+  }
+
+  // Authentication API
+  async getAuthUrl(): Promise<{ url: string }> {
+    const response = await this.axios.get<{ url: string }>('/api/auth/google');
+    return response.data;
+  }
+
+  async handleCallback(code: string): Promise<AuthResponse> {
+    const response = await this.axios.post<AuthResponse>('/api/auth/callback', { code });
+    const { token } = response.data;
+    this.setToken(token);
+    return response.data;
+  }
+
+  async getProfile(): Promise<User> {
+    const response = await this.axios.get<User>('/api/auth/me');
+    return response.data;
+  }
+
+  async logout(): Promise<void> {
+    try {
+      await this.axios.post('/api/auth/logout');
+    } finally {
+      this.clearToken();
+      this.disconnectWebSocket();
+    }
+  }
+
+  // Users API
+  async getUserStats(): Promise<UserStats> {
+    const response = await this.axios.get<UserStats>('/api/users/stats');
+    return response.data;
+  }
+
+  async getUserQuota(): Promise<UserQuota> {
+    const response = await this.axios.get<UserQuota>('/api/users/quota');
+    return response.data;
+  }
+
+  // Batches API
+  async createBatch(data: BatchCreateRequest): Promise<Batch> {
+    const response = await this.axios.post<Batch>('/api/batches', data);
+    return response.data;
+  }
+
+  async getBatch(batchId: string): Promise<Batch> {
+    const response = await this.axios.get<Batch>(`/api/batches/${batchId}`);
+    return response.data;
+  }
+
+  async getBatchStatus(batchId: string): Promise<BatchStatus> {
+    const response = await this.axios.get<BatchStatus>(`/api/batches/${batchId}/status`);
+    return response.data;
+  }
+
+  async getBatchImages(batchId: string): Promise<Image[]> {
+    const response = await this.axios.get<Image[]>(`/api/batches/${batchId}/images`);
+    return response.data;
+  }
+
+  async getBatches(page = 1, limit = 10): Promise<{ batches: Batch[]; total: number; pages: number }> {
+    const response = await this.axios.get(`/api/batches?page=${page}&limit=${limit}`);
+    return response.data;
+  }
+
+  // Images API
+  async uploadImages(files: File[], batchId: string, onProgress?: (progress: number) => void): Promise<Image[]> {
+    const formData = new FormData();
+    formData.append('batchId', batchId);
+    
+    files.forEach((file) => {
+      formData.append('images', file);
+    });
+
+    const config: AxiosRequestConfig = {
+      headers: {
+        'Content-Type': 'multipart/form-data',
+      },
+      onUploadProgress: onProgress ? (progressEvent) => {
+        const progress = progressEvent.total 
+          ? Math.round((progressEvent.loaded * 100) / progressEvent.total)
+          : 0;
+        onProgress(progress);
+      } : undefined,
+    };
+
+    const response = await this.axios.post<Image[]>('/api/images/upload', formData, config);
+    return response.data;
+  }
+
+  async updateImageFilename(imageId: string, data: UpdateFilenameRequest): Promise<Image> {
+    const response = await this.axios.put<Image>(`/api/images/${imageId}`, data);
+    return response.data;
+  }
+
+  // Keywords API
+  async enhanceKeywords(data: EnhanceKeywordsRequest): Promise<EnhanceKeywordsResponse> {
+    const response = await this.axios.post<EnhanceKeywordsResponse>('/api/keywords/enhance', data);
+    return response.data;
+  }
+
+  // Payments API
+  async getPlans(): Promise<Plan[]> {
+    const response = await this.axios.get<Plan[]>('/api/payments/plans');
+    return response.data;
+  }
+
+  async getSubscription(): Promise<Subscription | null> {
+    try {
+      const response = await this.axios.get<Subscription>('/api/payments/subscription');
+      return response.data;
+    } catch (error) {
+      if (axios.isAxiosError(error) && error.response?.status === 404) {
+        return null;
+      }
+      throw error;
+    }
+  }
+
+  async createCheckoutSession(data: CheckoutSessionRequest): Promise<CheckoutSessionResponse> {
+    const response = await this.axios.post<CheckoutSessionResponse>('/api/payments/checkout', data);
+    return response.data;
+  }
+
+  async createPortalSession(data: PortalSessionRequest): Promise<PortalSessionResponse> {
+    const response = await this.axios.post<PortalSessionResponse>('/api/payments/portal', data);
+    return response.data;
+  }
+
+  // Downloads API
+  async createDownload(data: DownloadRequest): Promise<DownloadResponse> {
+    const response = await this.axios.post<DownloadResponse>('/api/downloads/create', data);
+    return response.data;
+  }
+
+  async getDownloadStatus(downloadId: string): Promise<DownloadStatus> {
+    const response = await this.axios.get<DownloadStatus>(`/api/downloads/${downloadId}/status`);
+    return response.data;
+  }
+
+  getDownloadUrl(downloadId: string): string {
+    return `${this.baseURL}/api/downloads/${downloadId}`;
+  }
+
+  async getDownloadHistory(): Promise<DownloadResponse[]> {
+    const response = await this.axios.get<DownloadResponse[]>('/api/downloads/user/history');
+    return response.data;
+  }
+
+  // Health check
+  async healthCheck(): Promise<boolean> {
+    try {
+      await this.axios.get('/api/health');
+      return true;
+    } catch {
+      return false;
+    }
+  }
+
+  // Admin API (if user has admin role)
+  async getAdminStats(): Promise<any> {
+    const response = await this.axios.get('/api/admin/stats');
+    return response.data;
+  }
+
+  async getUsers(page = 1, limit = 10): Promise<any> {
+    const response = await this.axios.get(`/api/admin/users?page=${page}&limit=${limit}`);
+    return response.data;
+  }
+
+  async updateUserPlan(userId: string, plan: string): Promise<any> {
+    const response = await this.axios.put(`/api/admin/users/${userId}/plan`, { plan });
+    return response.data;
+  }
+
+  async banUser(userId: string, reason: string): Promise<any> {
+    const response = await this.axios.post(`/api/admin/users/${userId}/ban`, { reason });
+    return response.data;
+  }
+
+  async unbanUser(userId: string): Promise<any> {
+    const response = await this.axios.delete(`/api/admin/users/${userId}/ban`);
+    return response.data;
+  }
+}
+
+// Create a singleton instance
+export const apiClient = new APIClient();
+
+// Export for easier imports
+export default apiClient;
\ No newline at end of file
diff --git a/packages/frontend/src/types/api.ts b/packages/frontend/src/types/api.ts
new file mode 100644
index 0000000..3dd0a3b
--- /dev/null
+++ b/packages/frontend/src/types/api.ts
@@ -0,0 +1,361 @@
+// User Types
+export interface User {
+  id: string;
+  email: string;
+  name: string;
+  picture?: string;
+  plan: UserPlan;
+  isActive: boolean;
+  isBanned: boolean;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export enum UserPlan {
+  BASIC = 'BASIC',
+  PRO = 'PRO',
+  MAX = 'MAX',
+}
+
+export interface AuthResponse {
+  user: User;
+  token: string;
+}
+
+export interface UserStats {
+  totalImages: number;
+  totalBatches: number;
+  totalDownloads: number;
+  imagesThisMonth: number;
+  averageProcessingTime: number;
+  lastActivity: string;
+}
+
+export interface UserQuota {
+  used: number;
+  limit: number;
+  resetDate: string;
+  percentage: number;
+}
+
+// Batch Types
+export interface Batch {
+  id: string;
+  userId: string;
+  name: string;
+  keywords: string[];
+  status: BatchStatus;
+  totalImages: number;
+  processedImages: number;
+  failedImages: number;
+  progress: number;
+  createdAt: string;
+  updatedAt: string;
+  completedAt?: string;
+  images?: Image[];
+}
+
+export enum BatchStatus {
+  CREATED = 'CREATED',
+  UPLOADING = 'UPLOADING',
+  PROCESSING = 'PROCESSING',
+  COMPLETED = 'COMPLETED',
+  FAILED = 'FAILED',
+  CANCELLED = 'CANCELLED',
+}
+
+export interface BatchCreateRequest {
+  name: string;
+  keywords: string[];
+}
+
+// Image Types
+export interface Image {
+  id: string;
+  batchId: string;
+  originalFilename: string;
+  newFilename: string;
+  fileSize: number;
+  mimeType: string;
+  width: number;
+  height: number;
+  status: ImageStatus;
+  thumbnailUrl?: string;
+  downloadUrl?: string;
+  processingError?: string;
+  aiDescription?: string;
+  keywords?: string[];
+  createdAt: string;
+  updatedAt: string;
+  processedAt?: string;
+}
+
+export enum ImageStatus {
+  UPLOADED = 'UPLOADED',
+  PROCESSING = 'PROCESSING',
+  COMPLETED = 'COMPLETED',
+  FAILED = 'FAILED',
+}
+
+export interface UpdateFilenameRequest {
+  filename: string;
+}
+
+// Keywords Types
+export interface EnhanceKeywordsRequest {
+  keywords: string[];
+}
+
+export interface EnhanceKeywordsResponse {
+  originalKeywords: string[];
+  enhancedKeywords: string[];
+  suggestions: string[];
+}
+
+// Payment Types
+export interface Plan {
+  id: string;
+  name: string;
+  displayName: string;
+  price: number;
+  currency: string;
+  interval: 'month' | 'year';
+  imageLimit: number;
+  features: string[];
+  popular?: boolean;
+  stripePriceId: string;
+}
+
+export interface Subscription {
+  id: string;
+  userId: string;
+  stripeSubscriptionId: string;
+  stripePriceId: string;
+  status: SubscriptionStatus;
+  currentPeriodStart: string;
+  currentPeriodEnd: string;
+  cancelAtPeriodEnd: boolean;
+  canceledAt?: string;
+  plan: Plan;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export enum SubscriptionStatus {
+  ACTIVE = 'active',
+  CANCELED = 'canceled',
+  INCOMPLETE = 'incomplete',
+  INCOMPLETE_EXPIRED = 'incomplete_expired',
+  PAST_DUE = 'past_due',
+  TRIALING = 'trialing',
+  UNPAID = 'unpaid',
+}
+
+export interface CheckoutSessionRequest {
+  priceId: string;
+  successUrl: string;
+  cancelUrl: string;
+}
+
+export interface CheckoutSessionResponse {
+  sessionId: string;
+  url: string;
+}
+
+export interface PortalSessionRequest {
+  returnUrl: string;
+}
+
+export interface PortalSessionResponse {
+  url: string;
+}
+
+// Download Types
+export interface DownloadRequest {
+  batchId: string;
+}
+
+export interface DownloadResponse {
+  id: string;
+  batchId: string;
+  userId: string;
+  status: DownloadStatus;
+  fileName: string;
+  fileSize?: number;
+  downloadUrl?: string;
+  expiresAt?: string;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export enum DownloadStatus {
+  PREPARING = 'PREPARING',
+  READY = 'READY',
+  EXPIRED = 'EXPIRED',
+  FAILED = 'FAILED',
+}
+
+// WebSocket Types
+export interface ProgressUpdate {
+  batchId: string;
+  type: 'batch' | 'image';
+  status: BatchStatus | ImageStatus;
+  progress: number;
+  message: string;
+  imageId?: string;
+  error?: string;
+  data?: any;
+}
+
+export interface WebSocketEvents {
+  // Connection events
+  connect: () => void;
+  disconnect: (reason: string) => void;
+  connect_error: (error: Error) => void;
+
+  // Progress events
+  'progress:update': (update: ProgressUpdate) => void;
+  'batch:created': (batch: Batch) => void;
+  'batch:updated': (batch: Batch) => void;
+  'batch:completed': (batch: Batch) => void;
+  'batch:failed': (batch: Batch) => void;
+
+  // Image events
+  'image:processing': (image: Image) => void;
+  'image:completed': (image: Image) => void;
+  'image:failed': (image: Image) => void;
+
+  // User events
+  'quota:updated': (quota: UserQuota) => void;
+  'subscription:updated': (subscription: Subscription) => void;
+}
+
+// Error Types
+export interface APIError {
+  message: string;
+  code?: string;
+  status?: number;
+  details?: any;
+}
+
+// Form Types
+export interface LoginForm {
+  redirectUrl?: string;
+}
+
+export interface UploadForm {
+  files: File[];
+  keywords: string[];
+  batchName?: string;
+}
+
+export interface KeywordForm {
+  keywords: string;
+}
+
+export interface FilenameEditForm {
+  filename: string;
+}
+
+// UI State Types
+export interface LoadingState {
+  isLoading: boolean;
+  message?: string;
+}
+
+export interface ErrorState {
+  hasError: boolean;
+  message?: string;
+  retry?: () => void;
+}
+
+// Store Types
+export interface AuthState {
+  user: User | null;
+  isAuthenticated: boolean;
+  isLoading: boolean;
+  error: string | null;
+}
+
+export interface BatchState {
+  batches: Batch[];
+  currentBatch: Batch | null;
+  isLoading: boolean;
+  error: string | null;
+}
+
+export interface UploadState {
+  files: File[];
+  progress: number;
+  isUploading: boolean;
+  error: string | null;
+}
+
+export interface PaymentState {
+  subscription: Subscription | null;
+  plans: Plan[];
+  isLoading: boolean;
+  error: string | null;
+}
+
+// Admin Types (if admin functionality is needed)
+export interface AdminStats {
+  totalUsers: number;
+  totalImages: number;
+  totalBatches: number;
+  activeSubscriptions: number;
+  monthlyRevenue: number;
+  systemHealth: {
+    api: boolean;
+    database: boolean;
+    storage: boolean;
+    queue: boolean;
+  };
+}
+
+export interface AdminUser extends User {
+  subscription?: Subscription;
+  stats: {
+    totalImages: number;
+    totalBatches: number;
+    lastActivity: string;
+  };
+}
+
+// Utility Types
+export type SortOrder = 'asc' | 'desc';
+export type SortField = 'createdAt' | 'updatedAt' | 'name' | 'status';
+
+export interface PaginationParams {
+  page: number;
+  limit: number;
+  sortBy?: SortField;
+  sortOrder?: SortOrder;
+}
+
+export interface PaginatedResponse<T> {
+  data: T[];
+  total: number;
+  page: number;
+  limit: number;
+  pages: number;
+}
+
+// Configuration Types
+export interface AppConfig {
+  apiUrl: string;
+  wsUrl: string;
+  stripePublishableKey: string;
+  googleClientId: string;
+  maxFileSize: number;
+  maxFiles: number;
+  supportedFormats: string[];
+  features: {
+    googleAuth: boolean;
+    stripePayments: boolean;
+    websocketUpdates: boolean;
+    imagePreview: boolean;
+    batchProcessing: boolean;
+    downloadTracking: boolean;
+  };
+}
\ No newline at end of file
diff --git a/packages/frontend/src/types/index.ts b/packages/frontend/src/types/index.ts
new file mode 100644
index 0000000..15cccad
--- /dev/null
+++ b/packages/frontend/src/types/index.ts
@@ -0,0 +1,34 @@
+export * from './api';
+
+// Additional component prop types
+export interface BaseComponentProps {
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: 'primary' | 'secondary' | 'success' | 'danger' | 'outline' | 'ghost';
+  size?: 'sm' | 'md' | 'lg' | 'xl';
+  loading?: boolean;
+  icon?: React.ReactNode;
+}
+
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+  error?: string;
+  helperText?: string;
+}
+
+export interface ModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  title?: string;
+  children: React.ReactNode;
+  size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
+}
+
+export interface ToastOptions {
+  type?: 'success' | 'error' | 'warning' | 'info';
+  duration?: number;
+  position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-center' | 'bottom-center';
+}
\ No newline at end of file
diff --git a/packages/frontend/tailwind.config.js b/packages/frontend/tailwind.config.js
new file mode 100644
index 0000000..4cca8fd
--- /dev/null
+++ b/packages/frontend/tailwind.config.js
@@ -0,0 +1,142 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    './src/**/*.{js,ts,jsx,tsx,mdx}',
+    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
+    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
+  ],
+  theme: {
+    extend: {
+      colors: {
+        primary: {
+          50: '#eff6ff',
+          100: '#dbeafe', 
+          200: '#bfdbfe',
+          300: '#93c5fd',
+          400: '#60a5fa',
+          500: '#3b82f6',
+          600: '#2563eb',
+          700: '#1d4ed8',
+          800: '#1e40af',
+          900: '#1e3a8a',
+        },
+        secondary: {
+          50: '#f8fafc',
+          100: '#f1f5f9',
+          200: '#e2e8f0',
+          300: '#cbd5e1',
+          400: '#94a3b8',
+          500: '#64748b',
+          600: '#475569',
+          700: '#334155',
+          800: '#1e293b',
+          900: '#0f172a',
+        },
+        success: {
+          50: '#f0fdf4',
+          100: '#dcfce7',
+          200: '#bbf7d0',
+          300: '#86efac',
+          400: '#4ade80',
+          500: '#22c55e',
+          600: '#16a34a',
+          700: '#15803d',
+          800: '#166534',
+          900: '#14532d',
+        },
+        warning: {
+          50: '#fffbeb',
+          100: '#fef3c7',
+          200: '#fde68a',
+          300: '#fcd34d',
+          400: '#fbbf24',
+          500: '#f59e0b',
+          600: '#d97706',
+          700: '#b45309',
+          800: '#92400e',
+          900: '#78350f',
+        },
+        error: {
+          50: '#fef2f2',
+          100: '#fee2e2',
+          200: '#fecaca',
+          300: '#fca5a5',
+          400: '#f87171',
+          500: '#ef4444',
+          600: '#dc2626',
+          700: '#b91c1c',
+          800: '#991b1b',
+          900: '#7f1d1d',
+        },
+      },
+      fontFamily: {
+        sans: ['Inter', 'system-ui', 'sans-serif'],
+        mono: ['JetBrains Mono', 'Menlo', 'Monaco', 'Consolas', 'monospace'],
+      },
+      fontSize: {
+        'xs': ['0.75rem', { lineHeight: '1rem' }],
+        'sm': ['0.875rem', { lineHeight: '1.25rem' }],
+        'base': ['1rem', { lineHeight: '1.5rem' }],
+        'lg': ['1.125rem', { lineHeight: '1.75rem' }],
+        'xl': ['1.25rem', { lineHeight: '1.75rem' }],
+        '2xl': ['1.5rem', { lineHeight: '2rem' }],
+        '3xl': ['1.875rem', { lineHeight: '2.25rem' }],
+        '4xl': ['2.25rem', { lineHeight: '2.5rem' }],
+        '5xl': ['3rem', { lineHeight: '1' }],
+        '6xl': ['3.75rem', { lineHeight: '1' }],
+      },
+      spacing: {
+        '18': '4.5rem',
+        '88': '22rem',
+      },
+      maxWidth: {
+        '8xl': '88rem',
+        '9xl': '96rem',
+      },
+      animation: {
+        'fade-in': 'fadeIn 0.5s ease-in-out',
+        'slide-up': 'slideUp 0.3s ease-out',
+        'slide-down': 'slideDown 0.3s ease-out',
+        'pulse-slow': 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+        'bounce-slow': 'bounce 2s infinite',
+        'shimmer': 'shimmer 2s linear infinite',
+      },
+      keyframes: {
+        fadeIn: {
+          '0%': { opacity: '0' },
+          '100%': { opacity: '1' },
+        },
+        slideUp: {
+          '0%': { transform: 'translateY(10px)', opacity: '0' },
+          '100%': { transform: 'translateY(0)', opacity: '1' },
+        },
+        slideDown: {
+          '0%': { transform: 'translateY(-10px)', opacity: '0' },
+          '100%': { transform: 'translateY(0)', opacity: '1' },
+        },
+        shimmer: {
+          '0%': { transform: 'translateX(-100%)' },
+          '100%': { transform: 'translateX(100%)' },
+        },
+      },
+      boxShadow: {
+        'soft': '0 2px 15px -3px rgba(0, 0, 0, 0.07), 0 10px 20px -2px rgba(0, 0, 0, 0.04)',
+        'medium': '0 4px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
+        'large': '0 10px 40px -10px rgba(0, 0, 0, 0.15), 0 20px 25px -5px rgba(0, 0, 0, 0.1)',
+      },
+      borderRadius: {
+        'xl': '0.75rem',
+        '2xl': '1rem',
+        '3xl': '1.5rem',
+      },
+      backdropBlur: {
+        'xs': '2px',
+      },
+    },
+  },
+  plugins: [
+    require('@tailwindcss/forms'),
+    require('@tailwindcss/typography'),
+  ],
+  darkMode: 'class',
+};
\ No newline at end of file
diff --git a/packages/frontend/tsconfig.json b/packages/frontend/tsconfig.json
new file mode 100644
index 0000000..87eeaf6
--- /dev/null
+++ b/packages/frontend/tsconfig.json
@@ -0,0 +1,49 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["dom", "dom.iterable", "es6"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"],
+      "@/components/*": ["./src/components/*"],
+      "@/hooks/*": ["./src/hooks/*"],
+      "@/lib/*": ["./src/lib/*"],
+      "@/types/*": ["./src/types/*"],
+      "@/utils/*": ["./src/utils/*"],
+      "@/store/*": ["./src/store/*"]
+    },
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedIndexedAccess": true,
+    "exactOptionalPropertyTypes": true
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules",
+    ".next",
+    "out",
+    "dist"
+  ]
+}
\ No newline at end of file