diff --git a/Complete Next.js-Supabase Development Guide 2025 b/Complete Next.js-Supabase Development Guide 2025
new file mode 100644
index 0000000..0d3ee14
--- /dev/null
+++ b/Complete Next.js-Supabase Development Guide 2025	
@@ -0,0 +1,1535 @@
+# Complete Next.js + Supabase Development Guide 2025
+
+**A comprehensive, standalone guide for building production-ready applications with Next.js 15 and Supabase**
+
+This guide covers everything from project setup to deployment, including authentication, database operations, TypeScript integration, and modern best practices. Perfect for beginners and as a reference for experienced developers.
+
+---
+
+## Table of Contents
+1. [Prerequisites & Initial Setup](#prerequisites--initial-setup)
+2. [Project Creation & Configuration](#project-creation--configuration)
+3. [Supabase Integration](#supabase-integration)
+4. [Project Structure](#project-structure)
+5. [Database Schema & Security](#database-schema--security)
+6. [Authentication Implementation](#authentication-implementation)
+7. [CRUD Operations](#crud-operations)
+8. [UI Components & Styling](#ui-components--styling)
+9. [Error Handling & Loading States](#error-handling--loading-states)
+10. [TypeScript Configuration](#typescript-configuration)
+11. [Deployment & Production](#deployment--production)
+12. [Complete Code Examples](#complete-code-examples)
+
+---
+
+## Prerequisites & Initial Setup
+
+### System Requirements
+- **Node.js**: 18.17.0 or higher
+- **npm**: 9.0.0 or higher (or yarn/pnpm equivalent)
+- **Git**: For version control
+- **Code Editor**: VS Code recommended
+
+### Version Requirements (2025)
+- **Next.js**: 15.x (latest)
+- **React**: 19 RC
+- **Supabase JS**: 2.50.1+
+- **TypeScript**: 5.1.3+
+- **Tailwind CSS**: 4.x
+
+### Supabase Account Setup
+1. Go to [supabase.com](https://supabase.com)
+2. Sign up for a free account
+3. Create a new project
+4. Choose a database password (save it securely)
+5. Wait for project initialization (~2 minutes)
+
+---
+
+## Project Creation & Configuration
+
+### 1. Create Next.js Application
+
+```bash
+npx create-next-app@latest my-supabase-app
+```
+
+**Choose these options when prompted:**
+```
+✓ Would you like to use TypeScript? → Yes
+✓ Would you like to use ESLint? → Yes
+✓ Would you like to use Tailwind CSS? → Yes
+✓ Would you like to use `src/` directory? → Yes
+✓ Would you like to use App Router? → Yes
+✓ Would you like to use Turbopack for `next dev`? → Yes
+✓ Would you like to customize the default import alias (@/*)? → Yes
+```
+
+### 2. Navigate to Project & Install Dependencies
+
+```bash
+cd my-supabase-app
+npm install @supabase/supabase-js @supabase/ssr
+```
+
+**Important**: Don't install `@supabase/auth-helpers-nextjs` - it's deprecated. Use `@supabase/ssr` instead.
+
+### 3. Environment Variables Setup
+
+Create `.env.local` in your project root:
+
+```env
+# Supabase Configuration
+NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url
+NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
+
+# Optional: For admin operations (keep secure, never expose to client)
+SUPABASE_SERVICE_ROLE_KEY=your_service_role_key
+```
+
+**To find your Supabase credentials:**
+1. Go to your Supabase project dashboard
+2. Click on "Settings" → "API"
+3. Copy "Project URL" and "anon public" key
+
+---
+
+## Supabase Integration
+
+### 1. Client-Side Supabase Client
+
+Create `src/lib/supabase/client.ts`:
+
+```typescript
+import { createBrowserClient } from '@supabase/ssr'
+
+export function createClient() {
+  return createBrowserClient(
+    process.env.NEXT_PUBLIC_SUPABASE_URL!,
+    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
+  )
+}
+```
+
+### 2. Server-Side Supabase Client
+
+Create `src/lib/supabase/server.ts`:
+
+```typescript
+import { createServerClient } from '@supabase/ssr'
+import { cookies } from 'next/headers'
+
+export async function createClient() {
+  const cookieStore = await cookies()
+
+  return createServerClient(
+    process.env.NEXT_PUBLIC_SUPABASE_URL!,
+    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
+    {
+      cookies: {
+        getAll() {
+          return cookieStore.getAll()
+        },
+        setAll(cookiesToSet) {
+          try {
+            cookiesToSet.forEach(({ name, value, options }) => {
+              cookieStore.set(name, value, options)
+            })
+          } catch {
+            // Server component case - cookies can't be set
+          }
+        },
+      },
+    }
+  )
+}
+```
+
+### 3. Session Management Middleware
+
+Create `middleware.ts` in your project root (same level as `package.json`):
+
+```typescript
+import { type NextRequest } from 'next/server'
+import { updateSession } from '@/lib/supabase/middleware'
+
+export async function middleware(request: NextRequest) {
+  return await updateSession(request)
+}
+
+export const config = {
+  matcher: [
+    '/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)',
+  ],
+}
+```
+
+Create `src/lib/supabase/middleware.ts`:
+
+```typescript
+import { createServerClient } from '@supabase/ssr'
+import { NextResponse, type NextRequest } from 'next/server'
+
+export async function updateSession(request: NextRequest) {
+  let supabaseResponse = NextResponse.next({
+    request,
+  })
+
+  const supabase = createServerClient(
+    process.env.NEXT_PUBLIC_SUPABASE_URL!,
+    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
+    {
+      cookies: {
+        getAll() {
+          return request.cookies.getAll()
+        },
+        setAll(cookiesToSet) {
+          cookiesToSet.forEach(({ name, value, options }) => {
+            request.cookies.set(name, value)
+            supabaseResponse.cookies.set(name, value, options)
+          })
+        },
+      },
+    }
+  )
+
+  // Refresh session if needed
+  const { data: { user } } = await supabase.auth.getUser()
+
+  return supabaseResponse
+}
+```
+
+---
+
+## Project Structure
+
+### Recommended File Organization
+
+```
+my-supabase-app/
+├── src/
+│   ├── app/                          # App Router (Next.js 13+)
+│   │   ├── globals.css              # Global styles
+│   │   ├── layout.tsx               # Root layout
+│   │   ├── page.tsx                 # Home page
+│   │   ├── loading.tsx              # Global loading UI
+│   │   ├── error.tsx                # Global error boundary
+│   │   ├── not-found.tsx            # 404 page
+│   │   │
+│   │   ├── (auth)/                  # Route groups for organization
+│   │   │   ├── login/
+│   │   │   │   ├── page.tsx
+│   │   │   │   ├── actions.ts       # Server actions
+│   │   │   │   └── loading.tsx
+│   │   │   └── signup/
+│   │   │       └── page.tsx
+│   │   │
+│   │   ├── dashboard/               # Protected routes
+│   │   │   ├── layout.tsx           # Dashboard layout
+│   │   │   ├── page.tsx
+│   │   │   ├── actions.ts           # Server actions for dashboard
+│   │   │   ├── loading.tsx
+│   │   │   ├── error.tsx
+│   │   │   └── tasks/
+│   │   │       └── page.tsx
+│   │   │
+│   │   └── api/                     # API routes
+│   │       └── auth/
+│   │           └── confirm/
+│   │               └── route.ts     # Email confirmation
+│   │
+│   ├── components/                  # Reusable components
+│   │   ├── ui/                     # Basic UI components (shadcn/ui)
+│   │   │   ├── button.tsx
+│   │   │   ├── card.tsx
+│   │   │   ├── input.tsx
+│   │   │   └── skeleton.tsx
+│   │   ├── layout/                 # Layout components
+│   │   │   ├── header.tsx
+│   │   │   ├── nav.tsx
+│   │   │   └── footer.tsx
+│   │   └── features/               # Feature-specific components
+│   │       ├── auth/
+│   │       │   ├── login-form.tsx
+│   │       │   └── logout-button.tsx
+│   │       └── tasks/
+│   │           ├── task-list.tsx
+│   │           └── task-form.tsx
+│   │
+│   ├── lib/                        # Utility libraries
+│   │   ├── utils.ts               # General utilities
+│   │   ├── dal.ts                 # Data Access Layer (security)
+│   │   ├── validations.ts         # Schema validations
+│   │   └── supabase/              # Supabase configuration
+│   │       ├── client.ts          # Client-side client
+│   │       ├── server.ts          # Server-side client
+│   │       └── middleware.ts      # Session management
+│   │
+│   ├── hooks/                      # Custom React hooks
+│   │   ├── use-auth.ts
+│   │   └── use-local-storage.ts
+│   │
+│   └── types/                      # TypeScript definitions
+│       └── database.types.ts       # Generated Supabase types
+│
+├── middleware.ts                   # Next.js middleware
+├── next.config.ts                  # Next.js configuration
+├── tailwind.config.ts             # Tailwind configuration
+├── tsconfig.json                  # TypeScript configuration
+└── package.json
+```
+
+---
+
+## Database Schema & Security
+
+### 1. Create Tables in Supabase
+
+Go to your Supabase project → SQL Editor → New Query, and run:
+
+```sql
+-- Create the tasks table
+CREATE TABLE tasks (
+  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
+  title TEXT NOT NULL,
+  description TEXT,
+  completed BOOLEAN DEFAULT FALSE,
+  user_id UUID REFERENCES auth.users(id) ON DELETE CASCADE,
+  created_at TIMESTAMP WITH TIME ZONE DEFAULT TIMEZONE('utc'::text, NOW()) NOT NULL,
+  updated_at TIMESTAMP WITH TIME ZONE DEFAULT TIMEZONE('utc'::text, NOW()) NOT NULL
+);
+
+-- Enable Row Level Security (RLS)
+ALTER TABLE tasks ENABLE ROW LEVEL SECURITY;
+
+-- Create security policies
+CREATE POLICY "Users can view own tasks" ON tasks
+  FOR SELECT USING (auth.uid() = user_id);
+
+CREATE POLICY "Users can insert own tasks" ON tasks
+  FOR INSERT WITH CHECK (auth.uid() = user_id);
+
+CREATE POLICY "Users can update own tasks" ON tasks
+  FOR UPDATE USING (auth.uid() = user_id);
+
+CREATE POLICY "Users can delete own tasks" ON tasks
+  FOR DELETE USING (auth.uid() = user_id);
+
+-- Create indexes for performance
+CREATE INDEX idx_tasks_user_id ON tasks(user_id);
+CREATE INDEX idx_tasks_created_at ON tasks(created_at DESC);
+
+-- Add updated_at trigger
+CREATE OR REPLACE FUNCTION update_updated_at_column()
+RETURNS TRIGGER AS $$
+BEGIN
+    NEW.updated_at = TIMEZONE('utc'::text, NOW());
+    RETURN NEW;
+END;
+$$ language 'plpgsql';
+
+CREATE TRIGGER update_tasks_updated_at 
+    BEFORE UPDATE ON tasks 
+    FOR EACH ROW 
+    EXECUTE FUNCTION update_updated_at_column();
+```
+
+### 2. Generate TypeScript Types
+
+Run this command to generate types from your database:
+
+```bash
+npx supabase gen types typescript --project-id your_project_id > src/types/database.types.ts
+```
+
+Replace `your_project_id` with your actual Supabase project ID (found in Project Settings → General).
+
+---
+
+## Authentication Implementation
+
+### 1. Data Access Layer (Security)
+
+Create `src/lib/dal.ts`:
+
+```typescript
+import 'server-only'
+import { redirect } from 'next/navigation'
+import { createClient } from '@/lib/supabase/server'
+import { cache } from 'react'
+
+export const verifySession = cache(async () => {
+  const supabase = await createClient()
+  const { data: { user }, error } = await supabase.auth.getUser()
+  
+  if (error || !user) {
+    redirect('/login')
+  }
+  
+  return { isAuth: true, user }
+})
+
+export const getUser = cache(async () => {
+  const session = await verifySession()
+  if (!session) return null
+  
+  return session.user
+})
+```
+
+### 2. Login Page
+
+Create `src/app/(auth)/login/page.tsx`:
+
+```typescript
+import { login, signup } from './actions'
+
+export default function LoginPage() {
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-gray-50">
+      <div className="w-full max-w-md space-y-8">
+        <div className="text-center">
+          <h2 className="text-3xl font-bold text-gray-900">
+            Sign in to your account
+          </h2>
+        </div>
+        <form className="mt-8 space-y-6">
+          <div className="space-y-4">
+            <div>
+              <label htmlFor="email" className="block text-sm font-medium text-gray-700">
+                Email address
+              </label>
+              <input
+                id="email"
+                name="email"
+                type="email"
+                required
+                className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
+                placeholder="Enter your email"
+              />
+            </div>
+            <div>
+              <label htmlFor="password" className="block text-sm font-medium text-gray-700">
+                Password
+              </label>
+              <input
+                id="password"
+                name="password"
+                type="password"
+                required
+                className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
+                placeholder="Enter your password"
+              />
+            </div>
+          </div>
+          <div className="flex space-x-4">
+            <button
+              formAction={login}
+              className="flex-1 rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white hover:bg-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+            >
+              Log in
+            </button>
+            <button
+              formAction={signup}
+              className="flex-1 rounded-md border border-gray-300 px-3 py-2 text-sm font-semibold text-gray-900 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+            >
+              Sign up
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}
+```
+
+### 3. Authentication Server Actions
+
+Create `src/app/(auth)/login/actions.ts`:
+
+```typescript
+'use server'
+
+import { revalidatePath } from 'next/cache'
+import { redirect } from 'next/navigation'
+import { createClient } from '@/lib/supabase/server'
+
+export async function login(formData: FormData) {
+  const supabase = await createClient()
+
+  const data = {
+    email: formData.get('email') as string,
+    password: formData.get('password') as string,
+  }
+
+  const { error } = await supabase.auth.signInWithPassword(data)
+
+  if (error) {
+    console.error('Login error:', error)
+    redirect('/login?error=Invalid credentials')
+  }
+
+  revalidatePath('/', 'layout')
+  redirect('/dashboard')
+}
+
+export async function signup(formData: FormData) {
+  const supabase = await createClient()
+
+  const data = {
+    email: formData.get('email') as string,
+    password: formData.get('password') as string,
+  }
+
+  const { error } = await supabase.auth.signUp(data)
+
+  if (error) {
+    console.error('Signup error:', error)
+    redirect('/login?error=Could not create account')
+  }
+
+  revalidatePath('/', 'layout')
+  redirect('/login?message=Check your email to confirm your account')
+}
+
+export async function logout() {
+  const supabase = await createClient()
+  await supabase.auth.signOut()
+  revalidatePath('/', 'layout')
+  redirect('/login')
+}
+```
+
+### 4. Email Confirmation Route
+
+Create `src/app/api/auth/confirm/route.ts`:
+
+```typescript
+import { createClient } from '@/lib/supabase/server'
+import { NextRequest, NextResponse } from 'next/server'
+
+export async function GET(request: NextRequest) {
+  const { searchParams } = new URL(request.url)
+  const token_hash = searchParams.get('token_hash')
+  const type = searchParams.get('type')
+  const next = searchParams.get('next') ?? '/dashboard'
+
+  if (token_hash && type) {
+    const supabase = await createClient()
+
+    const { error } = await supabase.auth.verifyOtp({
+      type: type as any,
+      token_hash,
+    })
+
+    if (!error) {
+      return NextResponse.redirect(new URL(next, request.url))
+    }
+  }
+
+  // Redirect to error page if confirmation fails
+  return NextResponse.redirect(new URL('/login?error=Could not confirm account', request.url))
+}
+```
+
+---
+
+## CRUD Operations
+
+### 1. Dashboard Page with Data Fetching
+
+Create `src/app/dashboard/page.tsx`:
+
+```typescript
+import { verifySession } from '@/lib/dal'
+import { createClient } from '@/lib/supabase/server'
+import TaskList from '@/components/features/tasks/task-list'
+import TaskForm from '@/components/features/tasks/task-form'
+import LogoutButton from '@/components/features/auth/logout-button'
+
+export default async function Dashboard() {
+  const session = await verifySession()
+  const supabase = await createClient()
+  
+  const { data: tasks, error } = await supabase
+    .from('tasks')
+    .select('*')
+    .order('created_at', { ascending: false })
+
+  if (error) {
+    console.error('Error fetching tasks:', error)
+    return <div>Error loading tasks</div>
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        <div className="py-10">
+          <header className="flex justify-between items-center">
+            <div>
+              <h1 className="text-3xl font-bold leading-tight text-gray-900">
+                Dashboard
+              </h1>
+              <p className="text-gray-600">Welcome back, {session.user.email}</p>
+            </div>
+            <LogoutButton />
+          </header>
+          <main className="mt-8">
+            <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+              <div className="lg:col-span-2">
+                <TaskList tasks={tasks || []} />
+              </div>
+              <div>
+                <TaskForm />
+              </div>
+            </div>
+          </main>
+        </div>
+      </div>
+    </div>
+  )
+}
+```
+
+### 2. Server Actions for CRUD Operations
+
+Create `src/app/dashboard/actions.ts`:
+
+```typescript
+'use server'
+
+import { createClient } from '@/lib/supabase/server'
+import { revalidatePath } from 'next/cache'
+import { redirect } from 'next/navigation'
+
+export async function createTask(formData: FormData) {
+  const supabase = await createClient()
+
+  const { data: { user } } = await supabase.auth.getUser()
+  if (!user) redirect('/login')
+
+  const title = formData.get('title') as string
+  const description = formData.get('description') as string
+
+  if (!title.trim()) {
+    return { error: 'Title is required' }
+  }
+
+  const { error } = await supabase
+    .from('tasks')
+    .insert([
+      {
+        title: title.trim(),
+        description: description?.trim() || null,
+        user_id: user.id,
+      },
+    ])
+
+  if (error) {
+    console.error('Error creating task:', error)
+    return { error: 'Failed to create task' }
+  }
+
+  revalidatePath('/dashboard')
+  return { success: true }
+}
+
+export async function updateTask(id: string, formData: FormData) {
+  const supabase = await createClient()
+
+  const title = formData.get('title') as string
+  const description = formData.get('description') as string
+  const completed = formData.get('completed') === 'on'
+
+  const { error } = await supabase
+    .from('tasks')
+    .update({
+      title: title.trim(),
+      description: description?.trim() || null,
+      completed,
+    })
+    .eq('id', id)
+
+  if (error) {
+    console.error('Error updating task:', error)
+    return { error: 'Failed to update task' }
+  }
+
+  revalidatePath('/dashboard')
+  return { success: true }
+}
+
+export async function deleteTask(id: string) {
+  const supabase = await createClient()
+
+  const { error } = await supabase
+    .from('tasks')
+    .delete()
+    .eq('id', id)
+
+  if (error) {
+    console.error('Error deleting task:', error)
+    return { error: 'Failed to delete task' }
+  }
+
+  revalidatePath('/dashboard')
+  return { success: true }
+}
+
+export async function toggleTask(id: string, completed: boolean) {
+  const supabase = await createClient()
+
+  const { error } = await supabase
+    .from('tasks')
+    .update({ completed })
+    .eq('id', id)
+
+  if (error) {
+    console.error('Error toggling task:', error)
+    return { error: 'Failed to update task' }
+  }
+
+  revalidatePath('/dashboard')
+  return { success: true }
+}
+```
+
+---
+
+## UI Components & Styling
+
+### 1. Utility Functions
+
+Create `src/lib/utils.ts`:
+
+```typescript
+import { type ClassValue, clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
+
+export function formatDate(date: string | Date) {
+  return new Intl.DateTimeFormat('en-US', {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+  }).format(new Date(date))
+}
+```
+
+### 2. Task List Component
+
+Create `src/components/features/tasks/task-list.tsx`:
+
+```typescript
+import { toggleTask, deleteTask } from '@/app/dashboard/actions'
+import { formatDate } from '@/lib/utils'
+
+type Task = {
+  id: string
+  title: string
+  description: string | null
+  completed: boolean
+  created_at: string
+  updated_at: string
+}
+
+type TaskListProps = {
+  tasks: Task[]
+}
+
+export default function TaskList({ tasks }: TaskListProps) {
+  if (tasks.length === 0) {
+    return (
+      <div className="text-center py-12">
+        <p className="text-gray-500">No tasks yet. Create your first task!</p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-4">
+      <h2 className="text-xl font-semibold text-gray-900">Your Tasks</h2>
+      <div className="space-y-3">
+        {tasks.map((task) => (
+          <div
+            key={task.id}
+            className="bg-white p-4 rounded-lg shadow-sm border border-gray-200"
+          >
+            <div className="flex items-start justify-between">
+              <div className="flex items-start space-x-3 flex-1">
+                <form action={toggleTask.bind(null, task.id, !task.completed)}>
+                  <button
+                    type="submit"
+                    className={`mt-1 w-4 h-4 rounded border-2 flex items-center justify-center ${
+                      task.completed
+                        ? 'bg-green-500 border-green-500 text-white'
+                        : 'border-gray-300 hover:border-gray-400'
+                    }`}
+                  >
+                    {task.completed && (
+                      <svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
+                        <path
+                          fillRule="evenodd"
+                          d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                          clipRule="evenodd"
+                        />
+                      </svg>
+                    )}
+                  </button>
+                </form>
+                <div className="flex-1">
+                  <h3
+                    className={`font-medium ${
+                      task.completed
+                        ? 'text-gray-500 line-through'
+                        : 'text-gray-900'
+                    }`}
+                  >
+                    {task.title}
+                  </h3>
+                  {task.description && (
+                    <p
+                      className={`mt-1 text-sm ${
+                        task.completed ? 'text-gray-400' : 'text-gray-600'
+                      }`}
+                    >
+                      {task.description}
+                    </p>
+                  )}
+                  <p className="mt-2 text-xs text-gray-400">
+                    Created {formatDate(task.created_at)}
+                  </p>
+                </div>
+              </div>
+              <form action={deleteTask.bind(null, task.id)}>
+                <button
+                  type="submit"
+                  className="text-red-400 hover:text-red-600 p-1"
+                  onClick={(e) => {
+                    if (!confirm('Are you sure you want to delete this task?')) {
+                      e.preventDefault()
+                    }
+                  }}
+                >
+                  <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
+                    <path
+                      fillRule="evenodd"
+                      d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9zM4 5a2 2 0 012-2h8a2 2 0 012 2v6a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm3 4a1 1 0 112 0v3a1 1 0 11-2 0V9zm4 0a1 1 0 112 0v3a1 1 0 11-2 0V9z"
+                      clipRule="evenodd"
+                    />
+                  </svg>
+                </button>
+              </form>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+```
+
+### 3. Task Form Component
+
+Create `src/components/features/tasks/task-form.tsx`:
+
+```typescript
+'use client'
+
+import { createTask } from '@/app/dashboard/actions'
+import { useActionState } from 'react'
+
+export default function TaskForm() {
+  const [state, formAction, pending] = useActionState(createTask, null)
+
+  return (
+    <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
+      <h2 className="text-lg font-semibold text-gray-900 mb-4">Add New Task</h2>
+      <form action={formAction} className="space-y-4">
+        <div>
+          <label htmlFor="title" className="block text-sm font-medium text-gray-700">
+            Title *
+          </label>
+          <input
+            type="text"
+            id="title"
+            name="title"
+            required
+            className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
+            placeholder="Enter task title"
+          />
+        </div>
+        
+        <div>
+          <label htmlFor="description" className="block text-sm font-medium text-gray-700">
+            Description
+          </label>
+          <textarea
+            id="description"
+            name="description"
+            rows={3}
+            className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
+            placeholder="Enter task description (optional)"
+          />
+        </div>
+        
+        <button
+          type="submit"
+          disabled={pending}
+          className="w-full rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white hover:bg-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          {pending ? 'Creating...' : 'Create Task'}
+        </button>
+        
+        {state?.error && (
+          <p className="text-sm text-red-600" aria-live="polite">
+            {state.error}
+          </p>
+        )}
+      </form>
+    </div>
+  )
+}
+```
+
+### 4. Logout Button Component
+
+Create `src/components/features/auth/logout-button.tsx`:
+
+```typescript
+import { logout } from '@/app/(auth)/login/actions'
+
+export default function LogoutButton() {
+  return (
+    <form action={logout}>
+      <button
+        type="submit"
+        className="rounded-md bg-red-600 px-4 py-2 text-sm font-semibold text-white hover:bg-red-500 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2"
+      >
+        Logout
+      </button>
+    </form>
+  )
+}
+```
+
+---
+
+## Error Handling & Loading States
+
+### 1. Global Error Boundary
+
+Create `src/app/error.tsx`:
+
+```typescript
+'use client'
+
+import { useEffect } from 'react'
+
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string }
+  reset: () => void
+}) {
+  useEffect(() => {
+    console.error(error)
+  }, [error])
+
+  return (
+    <div className="flex min-h-screen flex-col items-center justify-center bg-gray-50">
+      <div className="text-center">
+        <h2 className="text-2xl font-bold text-gray-900 mb-4">Something went wrong!</h2>
+        <p className="text-gray-600 mb-6">
+          An error occurred while loading this page.
+        </p>
+        <button
+          onClick={() => reset()}
+          className="rounded-md bg-indigo-600 px-4 py-2 text-sm font-semibold text-white hover:bg-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+        >
+          Try again
+        </button>
+      </div>
+    </div>
+  )
+}
+```
+
+### 2. Global Loading State
+
+Create `src/app/loading.tsx`:
+
+```typescript
+export default function Loading() {
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-gray-50">
+      <div className="text-center">
+        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-indigo-600 mx-auto"></div>
+        <p className="mt-4 text-gray-600">Loading...</p>
+      </div>
+    </div>
+  )
+}
+```
+
+### 3. Dashboard Loading State
+
+Create `src/app/dashboard/loading.tsx`:
+
+```typescript
+export default function DashboardLoading() {
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        <div className="py-10">
+          <header className="flex justify-between items-center">
+            <div>
+              <div className="h-8 w-48 bg-gray-200 rounded animate-pulse"></div>
+              <div className="h-4 w-32 bg-gray-200 rounded animate-pulse mt-2"></div>
+            </div>
+            <div className="h-10 w-20 bg-gray-200 rounded animate-pulse"></div>
+          </header>
+          <main className="mt-8">
+            <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+              <div className="lg:col-span-2 space-y-4">
+                <div className="h-6 w-32 bg-gray-200 rounded animate-pulse"></div>
+                {[...Array(3)].map((_, i) => (
+                  <div key={i} className="bg-white p-4 rounded-lg shadow-sm border border-gray-200">
+                    <div className="flex items-start space-x-3">
+                      <div className="w-4 h-4 bg-gray-200 rounded animate-pulse mt-1"></div>
+                      <div className="flex-1">
+                        <div className="h-5 w-3/4 bg-gray-200 rounded animate-pulse"></div>
+                        <div className="h-4 w-full bg-gray-200 rounded animate-pulse mt-2"></div>
+                        <div className="h-3 w-24 bg-gray-200 rounded animate-pulse mt-3"></div>
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+              <div>
+                <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
+                  <div className="h-6 w-32 bg-gray-200 rounded animate-pulse mb-4"></div>
+                  <div className="space-y-4">
+                    <div>
+                      <div className="h-4 w-16 bg-gray-200 rounded animate-pulse mb-2"></div>
+                      <div className="h-10 w-full bg-gray-200 rounded animate-pulse"></div>
+                    </div>
+                    <div>
+                      <div className="h-4 w-24 bg-gray-200 rounded animate-pulse mb-2"></div>
+                      <div className="h-20 w-full bg-gray-200 rounded animate-pulse"></div>
+                    </div>
+                    <div className="h-10 w-full bg-gray-200 rounded animate-pulse"></div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </main>
+        </div>
+      </div>
+    </div>
+  )
+}
+```
+
+### 4. Not Found Page
+
+Create `src/app/not-found.tsx`:
+
+```typescript
+import Link from 'next/link'
+
+export default function NotFound() {
+  return (
+    <div className="flex min-h-screen flex-col items-center justify-center bg-gray-50">
+      <div className="text-center">
+        <h1 className="text-6xl font-bold text-gray-900">404</h1>
+        <h2 className="text-2xl font-semibold text-gray-700 mt-4">Page Not Found</h2>
+        <p className="text-gray-600 mt-2 mb-6">
+          The page you're looking for doesn't exist.
+        </p>
+        <Link
+          href="/dashboard"
+          className="rounded-md bg-indigo-600 px-4 py-2 text-sm font-semibold text-white hover:bg-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+        >
+          Go to Dashboard
+        </Link>
+      </div>
+    </div>
+  )
+}
+```
+
+---
+
+## TypeScript Configuration
+
+### 1. Enhanced tsconfig.json
+
+Update your `tsconfig.json`:
+
+```json
+{
+  "compilerOptions": {
+    "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/*"],
+      "@/lib/*": ["./src/lib/*"],
+      "@/types/*": ["./src/types/*"],
+      "@/app/*": ["./src/app/*"],
+      "@/hooks/*": ["./src/hooks/*"]
+    },
+    "target": "ES2017",
+    "forceConsistentCasingInFileNames": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": ["node_modules"]
+}
+```
+
+### 2. Type Definitions
+
+Create `src/types/auth.ts`:
+
+```typescript
+export interface User {
+  id: string
+  email: string
+  created_at: string
+}
+
+export interface Session {
+  user: User
+  access_token: string
+  refresh_token: string
+}
+```
+
+Create `src/types/tasks.ts`:
+
+```typescript
+export interface Task {
+  id: string
+  title: string
+  description: string | null
+  completed: boolean
+  user_id: string
+  created_at: string
+  updated_at: string
+}
+
+export interface CreateTaskData {
+  title: string
+  description?: string
+}
+
+export interface UpdateTaskData {
+  title?: string
+  description?: string | null
+  completed?: boolean
+}
+```
+
+---
+
+## Deployment & Production
+
+### 1. Next.js Configuration
+
+Update `next.config.ts`:
+
+```typescript
+import type { NextConfig } from 'next'
+
+const nextConfig: NextConfig = {
+  experimental: {
+    // Enable React Compiler (experimental)
+    reactCompiler: false, // Set to true when ready for production
+    // Enable typed routes
+    typedRoutes: true,
+  },
+  
+  // TypeScript configuration
+  typescript: {
+    ignoreBuildErrors: false,
+  },
+  
+  // ESLint configuration
+  eslint: {
+    ignoreDuringBuilds: false,
+  },
+  
+  // Images configuration for Supabase storage
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: '*.supabase.co',
+        port: '',
+        pathname: '/storage/v1/object/public/**',
+      },
+    ],
+  },
+  
+  // Security headers
+  async headers() {
+    return [
+      {
+        source: '/(.*)',
+        headers: [
+          {
+            key: 'X-Frame-Options',
+            value: 'DENY',
+          },
+          {
+            key: 'X-Content-Type-Options',
+            value: 'nosniff',
+          },
+          {
+            key: 'Referrer-Policy',
+            value: 'origin-when-cross-origin',
+          },
+        ],
+      },
+    ]
+  },
+}
+
+export default nextConfig
+```
+
+### 2. Environment Variables for Production
+
+Create `.env.example`:
+
+```env
+# Supabase Configuration
+NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
+NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
+
+# Optional: For admin operations (keep secure)
+SUPABASE_SERVICE_ROLE_KEY=your-service-role-key
+
+# Next.js
+NEXTAUTH_URL=http://localhost:3000
+NEXTAUTH_SECRET=your-nextauth-secret
+```
+
+### 3. Deployment Checklist
+
+**Before deploying:**
+
+1. ✅ Test authentication flow completely
+2. ✅ Verify RLS policies work correctly
+3. ✅ Test all CRUD operations
+4. ✅ Check error handling works
+5. ✅ Verify environment variables are set
+6. ✅ Test responsive design
+7. ✅ Run type checking: `npm run type-check`
+8. ✅ Run linting: `npm run lint`
+9. ✅ Build successfully: `npm run build`
+
+**Deployment platforms:**
+
+- **Vercel** (Recommended): Connect your GitHub repo and deploy automatically
+- **Netlify**: Similar to Vercel with good Next.js support
+- **Railway**: Good for full-stack apps with databases
+- **AWS Amplify**: Enterprise-grade with extensive AWS integration
+
+### 4. Production Environment Setup
+
+**For Vercel deployment:**
+
+1. Push your code to GitHub
+2. Connect repository to Vercel
+3. Add environment variables in Vercel dashboard
+4. Enable preview deployments for testing
+5. Set up custom domain if needed
+
+**Environment variables to set:**
+- `NEXT_PUBLIC_SUPABASE_URL`
+- `NEXT_PUBLIC_SUPABASE_ANON_KEY`
+- `SUPABASE_SERVICE_ROLE_KEY` (if using admin operations)
+
+---
+
+## Complete Code Examples
+
+### 1. Root Layout
+
+Create/Update `src/app/layout.tsx`:
+
+```typescript
+import type { Metadata } from 'next'
+import { Inter } from 'next/font/google'
+import './globals.css'
+
+const inter = Inter({ subsets: ['latin'] })
+
+export const metadata: Metadata = {
+  title: 'Next.js + Supabase App',
+  description: 'A modern full-stack application built with Next.js and Supabase',
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>
+        {children}
+      </body>
+    </html>
+  )
+}
+```
+
+### 2. Home Page with Authentication Check
+
+Update `src/app/page.tsx`:
+
+```typescript
+import { createClient } from '@/lib/supabase/server'
+import { redirect } from 'next/navigation'
+import Link from 'next/link'
+
+export default async function Home() {
+  const supabase = await createClient()
+  const { data: { user } } = await supabase.auth.getUser()
+
+  if (user) {
+    redirect('/dashboard')
+  }
+
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-gray-50">
+      <div className="text-center">
+        <h1 className="text-4xl font-bold text-gray-900 mb-4">
+          Welcome to Next.js + Supabase
+        </h1>
+        <p className="text-lg text-gray-600 mb-8">
+          A modern full-stack application template
+        </p>
+        <div className="space-x-4">
+          <Link
+            href="/login"
+            className="rounded-md bg-indigo-600 px-6 py-3 text-sm font-semibold text-white hover:bg-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+          >
+            Get Started
+          </Link>
+          <Link
+            href="https://github.com"
+            className="rounded-md border border-gray-300 px-6 py-3 text-sm font-semibold text-gray-900 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+          >
+            View on GitHub
+          </Link>
+        </div>
+      </div>
+    </div>
+  )
+}
+```
+
+### 3. Dashboard Layout with Navigation
+
+Create `src/app/dashboard/layout.tsx`:
+
+```typescript
+import { verifySession } from '@/lib/dal'
+
+export default async function DashboardLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  // This ensures the user is authenticated before accessing any dashboard pages
+  await verifySession()
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      {children}
+    </div>
+  )
+}
+```
+
+### 4. Package.json Scripts
+
+Update your `package.json` scripts:
+
+```json
+{
+  "scripts": {
+    "dev": "next dev --turbo",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "type-check": "tsc --noEmit",
+    "db:types": "npx supabase gen types typescript --project-id YOUR_PROJECT_ID > src/types/database.types.ts"
+  }
+}
+```
+
+### 5. Custom Hook for Authentication
+
+Create `src/hooks/use-auth.ts`:
+
+```typescript
+'use client'
+
+import { createClient } from '@/lib/supabase/client'
+import { useEffect, useState } from 'react'
+import type { User } from '@supabase/supabase-js'
+
+export function useAuth() {
+  const [user, setUser] = useState<User | null>(null)
+  const [loading, setLoading] = useState(true)
+  const supabase = createClient()
+
+  useEffect(() => {
+    const getUser = async () => {
+      const { data: { user } } = await supabase.auth.getUser()
+      setUser(user)
+      setLoading(false)
+    }
+
+    getUser()
+
+    const { data: { subscription } } = supabase.auth.onAuthStateChange(
+      async (event, session) => {
+        setUser(session?.user ?? null)
+        setLoading(false)
+      }
+    )
+
+    return () => subscription.unsubscribe()
+  }, [supabase.auth])
+
+  return { user, loading }
+}
+```
+
+---
+
+## Quick Start Commands
+
+**Clone and setup:**
+```bash
+# Create new project
+npx create-next-app@latest my-supabase-app
+
+# Install dependencies
+cd my-supabase-app
+npm install @supabase/supabase-js @supabase/ssr
+
+# Setup environment
+cp .env.example .env.local
+# Edit .env.local with your Supabase credentials
+
+# Generate database types
+npm run db:types
+
+# Start development server
+npm run dev
+```
+
+**Development workflow:**
+```bash
+# Start development
+npm run dev
+
+# Type checking
+npm run type-check
+
+# Linting
+npm run lint
+
+# Build for production
+npm run build
+
+# Start production server
+npm start
+```
+
+---
+
+## Troubleshooting
+
+### Common Issues & Solutions
+
+**1. "Cannot read properties of undefined (reading 'getUser')"**
+- Ensure you're using the correct client (server vs browser)
+- Check that environment variables are set correctly
+
+**2. "Row Level Security policy violation"**
+- Make sure you're authenticated when performing database operations
+- Verify your RLS policies are correctly configured
+- Check that `auth.uid()` matches your user_id field
+
+**3. "Module not found: Can't resolve '@/...'"**
+- Verify your `tsconfig.json` paths configuration
+- Ensure you're using the correct import paths
+
+**4. Authentication redirects not working**
+- Check your middleware configuration
+- Verify the redirect URLs in your Supabase auth settings
+- Ensure cookies are being set correctly
+
+**5. Build errors in production**
+- Run `npm run type-check` to catch TypeScript errors
+- Check that all environment variables are set in production
+- Verify Next.js configuration is correct
+
+### Performance Tips
+
+1. **Use Server Components when possible** - They're faster and don't increase bundle size
+2. **Implement proper loading states** - Better user experience
+3. **Use React Suspense** - For progressive loading
+4. **Optimize images** - Use Next.js Image component
+5. **Enable caching** - Use Next.js built-in caching strategies
+
+---
+
+## Additional Resources
+
+- **Next.js Documentation**: [nextjs.org/docs](https://nextjs.org/docs)
+- **Supabase Documentation**: [supabase.com/docs](https://supabase.com/docs)
+- **Tailwind CSS**: [tailwindcss.com](https://tailwindcss.com)
+- **TypeScript**: [typescriptlang.org](https://typescriptlang.org)
+
+This guide provides a complete foundation for building modern, production-ready applications with Next.js and Supabase. Save this guide and refer to it whenever you need to set up a new project or implement specific features!
diff --git a/Simplified Hardcoded Agent Pages Plan b/Simplified Hardcoded Agent Pages Plan
new file mode 100644
index 0000000..de187d0
--- /dev/null
+++ b/Simplified Hardcoded Agent Pages Plan	
@@ -0,0 +1,119 @@
+ │ Simplified Hardcoded Agent Pages Plan                                                                      │
+     │                                                                                                            │
+     │ Overview                                                                                                   │
+     │                                                                                                            │
+     │ Create individual hardcoded pages for each agent with specific integrations to n8n workflows. Each agent   │
+     │ gets its own custom page with tailored UI and webhook connections.                                         │
+     │                                                                                                            │
+     │ Implementation Approach                                                                                    │
+     │                                                                                                            │
+     │ 1. Route Structure                                                                                         │
+     │                                                                                                            │
+     │ - /agent/pdf-processor - PDF processing agent page                                                         │
+     │ - /agent/weather-report - Weather report agent page                                                        │
+     │ - /agent/content-writer - Content writing agent page                                                       │
+     │ - /agent/data-analyzer - Data analysis agent page                                                          │
+     │ - /agent/email-automation - Email automation agent page                                                    │
+     │ - /agent/task-automation - Task automation agent page                                                      │
+     │                                                                                                            │
+     │ 2. Update Current Flow                                                                                     │
+     │                                                                                                            │
+     │ Modify useAgent function in page.tsx:                                                                      │
+     │ - Instead of showing modal with mock results                                                               │
+     │ - Redirect to specific agent page: router.push(/agent/${agent.slug})                                       │
+     │ - Pass agent info and user data via URL params or state                                                    │
+     │                                                                                                            │
+     │ 3. Example Implementation: PDF Processor Agent                                                             │
+     │                                                                                                            │
+     │ Page: /app/agent/pdf-processor/page.tsx                                                                    │
+     │ - File upload component for PDF                                                                            │
+     │ - Form fields for processing options                                                                       │
+     │ - Connect to specific n8n webhook                                                                          │
+     │ - Display results from Google Sheets API                                                                   │
+     │ - Deduct credits on successful processing                                                                  │
+     │                                                                                                            │
+     │ Workflow:                                                                                                  │
+     │ 1. User uploads PDF file                                                                                   │
+     │ 2. Send file + options to n8n webhook                                                                      │
+     │ 3. n8n processes PDF and saves results to Google Sheet                                                     │
+     │ 4. Page fetches results from Google Sheets                                                                 │
+     │ 5. Display formatted results to user                                                                       │
+     │ 6. Deduct credits from user account                                                                        │
+     │                                                                                                            │
+     │ 4. Agent Page Components                                                                                   │
+     │                                                                                                            │
+     │ Each agent page will have:                                                                                 │
+     │ - Custom input form (file upload, text fields, dropdowns)                                                  │
+     │ - Processing status indicator                                                                              │
+     │ - Results display section                                                                                  │
+     │ - Credit cost display                                                                                      │
+     │ - Back to agents list button                                                                               │
+     │                                                                                                            │
+     │ 5. N8N Integration Pattern                                                                                 │
+     │                                                                                                            │
+     │ For each agent:                                                                                            │
+     │ - Unique n8n webhook URL                                                                                   │
+     │ - Hardcoded request format                                                                                 │
+     │ - Specific response handling                                                                               │
+     │ - Google Sheets integration for data storage/retrieval                                                     │
+     │                                                                                                            │
+     │ 6. Example Agent Pages Structure                                                                           │
+     │                                                                                                            │
+     │ PDF Processor:                                                                                             │
+     │ - Input: PDF file, processing type (extract text/data/images)                                              │
+     │ - N8N: PDF processing workflow                                                                             │
+     │ - Output: Extracted data displayed in tables/lists                                                         │
+     │                                                                                                            │
+     │ Weather Report:                                                                                            │
+     │ - Input: Location, date range                                                                              │
+     │ - N8N: Weather API workflow                                                                                │
+     │ - Output: Weather forecast with charts                                                                     │
+     │                                                                                                            │
+     │ Content Writer:                                                                                            │
+     │ - Input: Topic, content type, length                                                                       │
+     │ - N8N: OpenAI integration workflow                                                                         │
+     │ - Output: Generated content with formatting                                                                │
+     │                                                                                                            │
+     │ Data Analyzer:                                                                                             │
+     │ - Input: CSV/Excel file upload                                                                             │
+     │ - N8N: Data processing workflow                                                                            │
+     │ - Output: Analysis results, charts, insights                                                               │
+     │                                                                                                            │
+     │ 7. File Structure                                                                                          │
+     │                                                                                                            │
+     │ src/app/agent/                                                                                             │
+     │ ├── pdf-processor/                                                                                         │
+     │ │   └── page.tsx                                                                                           │
+     │ ├── weather-report/                                                                                        │
+     │ │   └── page.tsx                                                                                           │
+     │ ├── content-writer/                                                                                        │
+     │ │   └── page.tsx                                                                                           │
+     │ ├── data-analyzer/                                                                                         │
+     │ │   └── page.tsx                                                                                           │
+     │ ├── email-automation/                                                                                      │
+     │ │   └── page.tsx                                                                                           │
+     │ └── task-automation/                                                                                       │
+     │     └── page.tsx                                                                                           │
+     │                                                                                                            │
+     │ 8. Shared Components                                                                                       │
+     │                                                                                                            │
+     │ src/components/agent-shared/                                                                               │
+     │ ├── AgentLayout.tsx       # Common layout for all agent pages                                              │
+     │ ├── FileUpload.tsx        # File upload component                                                          │
+     │ ├── ProcessingStatus.tsx  # Status indicator                                                               │
+     │ ├── ResultsDisplay.tsx    # Results formatting                                                             │
+     │ └── CreditCounter.tsx     # Credit cost display                                                            │
+     │                                                                                                            │
+     │ 9. Implementation Steps                                                                                    │
+     │                                                                                                            │
+     │ 1. Create agent slug mapping in database                                                                   │
+     │ 2. Update main page to redirect instead of showing modal                                                   │
+     │ 3. Create first agent page (PDF processor) as template                                                     │
+     │ 4. Add n8n webhook integration                                                                             │
+     │ 5. Implement Google Sheets result fetching                                                                 │
+     │ 6. Add credit deduction on success                                                                         │
+     │ 7. Replicate pattern for other agents                                                                      │
+     │                                                                                                            │
+     │ This approach keeps each agent simple and hardcoded while providing real functionality through n8n         │
+     │ workflows and external integrations.                                                                       │
+     ╰──────────────────────────────────────
diff --git a/apps/agents/__init__.py b/agents/__init__.py
similarity index 100%
rename from apps/agents/__init__.py
rename to agents/__init__.py
diff --git a/agents/admin.py b/agents/admin.py
new file mode 100644
index 0000000..3fb7292
--- /dev/null
+++ b/agents/admin.py
@@ -0,0 +1,26 @@
+from django.contrib import admin
+from .models import Agent
+
+
+@admin.register(Agent)
+class AgentAdmin(admin.ModelAdmin):
+    list_display = ('name', 'slug', 'category', 'price', 'is_active', 'rating', 'review_count')
+    list_filter = ('category', 'is_active', 'created_at')
+    search_fields = ('name', 'slug', 'description')
+    prepopulated_fields = {'slug': ('name',)}
+    list_editable = ('price', 'is_active')
+    ordering = ('-created_at',)
+    
+    fieldsets = (
+        ('Basic Information', {
+            'fields': ('name', 'slug', 'description', 'category', 'icon')
+        }),
+        ('Pricing & Rating', {
+            'fields': ('price', 'rating', 'review_count')
+        }),
+        ('Configuration', {
+            'fields': ('is_active', 'n8n_webhook_url')
+        }),
+    )
+    
+    readonly_fields = ('created_at',)
diff --git a/apps/agents/agent_processors.py b/agents/agent_processors.py
similarity index 99%
rename from apps/agents/agent_processors.py
rename to agents/agent_processors.py
index ffab823..0ce856f 100644
--- a/apps/agents/agent_processors.py
+++ b/agents/agent_processors.py
@@ -5,6 +5,7 @@ from django.core.files.base import ContentFile
 import json
 import os
 
+
 class AgentProcessor:
     def __init__(self, agent_slug):
         self.agent_slug = agent_slug
@@ -128,4 +129,4 @@ class AgentProcessor:
         if not processor:
             raise ValueError(f"No processor found for agent: {self.agent_slug}")
         
-        return processor(**kwargs)
+        return processor(**kwargs)
\ No newline at end of file
diff --git a/apps/agents/apps.py b/agents/apps.py
similarity index 100%
rename from apps/agents/apps.py
rename to agents/apps.py
diff --git a/apps/agents/migrations/__init__.py b/agents/management/__init__.py
similarity index 100%
rename from apps/agents/migrations/__init__.py
rename to agents/management/__init__.py
diff --git a/apps/authentication/__init__.py b/agents/management/commands/__init__.py
similarity index 100%
rename from apps/authentication/__init__.py
rename to agents/management/commands/__init__.py
diff --git a/agents/management/commands/populate_agents.py b/agents/management/commands/populate_agents.py
new file mode 100644
index 0000000..627099c
--- /dev/null
+++ b/agents/management/commands/populate_agents.py
@@ -0,0 +1,91 @@
+from django.core.management.base import BaseCommand
+from agents.models import Agent
+from decimal import Decimal
+
+
+class Command(BaseCommand):
+    help = 'Populate the database with sample agent data'
+
+    def handle(self, *args, **options):
+        # Clear existing agents
+        Agent.objects.all().delete()
+        
+        # Create sample agents
+        agents_data = [
+            {
+                'name': 'Data Analyzer',
+                'slug': 'data-analyzer',
+                'description': 'Upload your data files and get comprehensive analysis with insights, trends, and visualizations.',
+                'category': 'analytics',
+                'price': Decimal('15.00'),
+                'icon': '📊',
+                'rating': Decimal('4.7'),
+                'review_count': 324,
+                'n8n_webhook_url': 'https://n8n.example.com/webhook/data-analyzer',
+            },
+            {
+                'name': 'Weather Reporter',
+                'slug': 'weather-reporter',
+                'description': 'Get current weather conditions, forecasts, and detailed meteorological data for any location.',
+                'category': 'utilities',
+                'price': Decimal('5.00'),
+                'icon': '🌤️',
+                'rating': Decimal('4.5'),
+                'review_count': 892,
+                'n8n_webhook_url': '',  # Uses OpenWeather API directly
+            },
+            {
+                'name': '5 Whys Analysis',
+                'slug': 'five-whys',
+                'description': 'Perform root cause analysis using the 5 Whys technique to identify the underlying cause of problems.',
+                'category': 'analytics',
+                'price': Decimal('12.00'),
+                'icon': '❓',
+                'rating': Decimal('4.6'),
+                'review_count': 156,
+                'n8n_webhook_url': 'https://n8n.example.com/webhook/five-whys',
+            },
+            {
+                'name': 'FAQ Generator',
+                'slug': 'faq-generator',
+                'description': 'Generate comprehensive FAQ sections from your content, documentation, or product information.',
+                'category': 'content',
+                'price': Decimal('10.00'),
+                'icon': '❔',
+                'rating': Decimal('4.4'),
+                'review_count': 287,
+                'n8n_webhook_url': 'https://n8n.example.com/webhook/faq-generator',
+            },
+            {
+                'name': 'Social Ads Generator',
+                'slug': 'social-ads-generator',
+                'description': 'Create compelling social media advertisements with copy, targeting suggestions, and campaign ideas.',
+                'category': 'marketing',
+                'price': Decimal('20.00'),
+                'icon': '📢',
+                'rating': Decimal('4.8'),
+                'review_count': 543,
+                'n8n_webhook_url': 'https://n8n.example.com/webhook/social-ads',
+            },
+            {
+                'name': 'Job Posting Generator',
+                'slug': 'job-posting-generator',
+                'description': 'Generate professional job postings with requirements, responsibilities, and compelling descriptions.',
+                'category': 'content',
+                'price': Decimal('8.00'),
+                'icon': '💼',
+                'rating': Decimal('4.3'),
+                'review_count': 198,
+                'n8n_webhook_url': 'https://n8n.example.com/webhook/job-posting',
+            },
+        ]
+        
+        for agent_data in agents_data:
+            agent = Agent.objects.create(**agent_data)
+            self.stdout.write(
+                self.style.SUCCESS(f'Successfully created agent: {agent.name}')
+            )
+        
+        self.stdout.write(
+            self.style.SUCCESS(f'Successfully populated {len(agents_data)} agents')
+        )
\ No newline at end of file
diff --git a/apps/agents/migrations/0001_initial.py b/agents/migrations/0001_initial.py
similarity index 96%
rename from apps/agents/migrations/0001_initial.py
rename to agents/migrations/0001_initial.py
index 6b8b11b..71c4f43 100644
--- a/apps/agents/migrations/0001_initial.py
+++ b/agents/migrations/0001_initial.py
@@ -1,4 +1,4 @@
-# Generated by Django 5.2.4 on 2025-07-08 08:17
+# Generated by Django 5.2.4 on 2025-07-08 15:00
 
 from decimal import Decimal
 from django.db import migrations, models
diff --git a/apps/authentication/migrations/__init__.py b/agents/migrations/__init__.py
similarity index 100%
rename from apps/authentication/migrations/__init__.py
rename to agents/migrations/__init__.py
diff --git a/apps/agents/models.py b/agents/models.py
similarity index 97%
rename from apps/agents/models.py
rename to agents/models.py
index e8b61be..b9d945c 100644
--- a/apps/agents/models.py
+++ b/agents/models.py
@@ -1,8 +1,7 @@
-
-# Create your models here.
 from django.db import models
 from decimal import Decimal
 
+
 class Agent(models.Model):
     CATEGORIES = [
         ('analytics', 'Analytics'),
@@ -39,4 +38,4 @@ class Agent(models.Model):
             'marketing': 'from-pink-500 to-rose-600',
             'customer-service': 'from-blue-500 to-blue-600',
         }
-        return gradient_map.get(self.category, 'from-gray-500 to-gray-600')
\ No newline at end of file
+        return gradient_map.get(self.category, 'from-gray-500 to-gray-600')
diff --git a/apps/agents/tests.py b/agents/tests.py
similarity index 100%
rename from apps/agents/tests.py
rename to agents/tests.py
diff --git a/apps/agents/views.py b/agents/views.py
similarity index 100%
rename from apps/agents/views.py
rename to agents/views.py
diff --git a/apps/agents/management/commands/populate_agents.py b/apps/agents/management/commands/populate_agents.py
deleted file mode 100644
index 5fab13a..0000000
--- a/apps/agents/management/commands/populate_agents.py
+++ /dev/null
@@ -1,80 +0,0 @@
-from django.core.management.base import BaseCommand
-from agents.models import Agent
-from decimal import Decimal
-
-class Command(BaseCommand):
-    help = 'Populate database with default agents'
-
-    def handle(self, *args, **options):
-        agents = [
-            {
-                'name': '5 Whys Analysis Agent',
-                'slug': 'five-whys',
-                'description': 'Systematic root cause analysis using the proven 5 Whys methodology to identify and solve business problems effectively.',
-                'category': 'analytics',
-                'price': Decimal('8.00'),
-                'icon': '🔍',
-                'rating': Decimal('4.8'),
-                'review_count': 850,
-            },
-            {
-                'name': 'Data Analysis Agent',
-                'slug': 'data-analyzer',
-                'description': 'Processes complex datasets and generates actionable insights with automated reporting and visualization capabilities.',
-                'category': 'analytics',
-                'price': Decimal('5.00'),
-                'icon': '📊',
-                'rating': Decimal('4.8'),
-                'review_count': 1800,
-            },
-            {
-                'name': 'Weather Reporter Agent',
-                'slug': 'weather-reporter',
-                'description': 'Get detailed weather reports for any location worldwide with current conditions, forecasts, and weather alerts.',
-                'category': 'utilities',
-                'price': Decimal('2.00'),
-                'icon': '🌤️',
-                'rating': Decimal('4.9'),
-                'review_count': 1650,
-            },
-            {
-                'name': 'Job Posting Generator Agent',
-                'slug': 'job-posting-generator',
-                'description': 'Create compelling, professional job postings with AI-powered content generation.',
-                'category': 'content',
-                'price': Decimal('3.00'),
-                'icon': '📝',
-                'rating': Decimal('4.7'),
-                'review_count': 1200,
-            },
-            {
-                'name': 'Social Ads Generator Agent',
-                'slug': 'social-ads-generator',
-                'description': 'Create engaging social media advertisements optimized for different platforms.',
-                'category': 'marketing',
-                'price': Decimal('4.00'),
-                'icon': '📱',
-                'rating': Decimal('4.8'),
-                'review_count': 950,
-            },
-            {
-                'name': 'FAQ Generator Agent',
-                'slug': 'faq-generator',
-                'description': 'Generate comprehensive FAQs from uploaded files or website URLs.',
-                'category': 'content',
-                'price': Decimal('3.00'),
-                'icon': '❓',
-                'rating': Decimal('4.7'),
-                'review_count': 750,
-            },
-        ]
-
-        for agent_data in agents:
-            agent, created = Agent.objects.get_or_create(
-                slug=agent_data['slug'],
-                defaults=agent_data
-            )
-            if created:
-                self.stdout.write(f'Created agent: {agent.name}')
-            else:
-                self.stdout.write(f'Agent already exists: {agent.name}')
\ No newline at end of file
diff --git a/apps/agents/urls.py b/apps/agents/urls.py
deleted file mode 100644
index 32aeb69..0000000
--- a/apps/agents/urls.py
+++ /dev/null
@@ -1,7 +0,0 @@
-from django.urls import path
-from . import views
-
-urlpatterns = [
-    # Agent management URLs would go here
-    # For now, agents are handled by core app
-]
\ No newline at end of file
diff --git a/apps/authentication/admin.py b/apps/authentication/admin.py
deleted file mode 100644
index 8c38f3f..0000000
--- a/apps/authentication/admin.py
+++ /dev/null
@@ -1,3 +0,0 @@
-from django.contrib import admin
-
-# Register your models here.
diff --git a/apps/authentication/urls.py b/apps/authentication/urls.py
deleted file mode 100644
index ceb3531..0000000
--- a/apps/authentication/urls.py
+++ /dev/null
@@ -1,24 +0,0 @@
-from django.urls import path
-from django.contrib.auth import views as auth_views
-from . import views
-
-urlpatterns = [
-    path('login/', auth_views.LoginView.as_view(template_name='auth/login.html'), name='login'),
-    path('logout/', auth_views.LogoutView.as_view(next_page='homepage'), name='logout'),
-    path('register/', views.register, name='register'),
-    path('password-reset/', auth_views.PasswordResetView.as_view(
-        template_name='auth/password_reset.html',
-        email_template_name='auth/password_reset_email.html',
-        success_url='/auth/password-reset/done/'
-    ), name='password_reset'),
-    path('password-reset/done/', auth_views.PasswordResetDoneView.as_view(
-        template_name='auth/password_reset_done.html'
-    ), name='password_reset_done'),
-    path('reset/<uidb64>/<token>/', auth_views.PasswordResetConfirmView.as_view(
-        template_name='auth/password_reset_confirm.html',
-        success_url='/auth/reset/done/'
-    ), name='password_reset_confirm'),
-    path('reset/done/', auth_views.PasswordResetCompleteView.as_view(
-        template_name='auth/password_reset_complete.html'
-    ), name='password_reset_complete'),
-]
\ No newline at end of file
diff --git a/apps/authentication/views.py b/apps/authentication/views.py
deleted file mode 100644
index 9331018..0000000
--- a/apps/authentication/views.py
+++ /dev/null
@@ -1,16 +0,0 @@
-from django.shortcuts import render, redirect
-from django.contrib.auth import login
-from django.contrib.auth.forms import UserCreationForm
-from django.contrib import messages
-
-def register(request):
-    if request.method == 'POST':
-        form = UserCreationForm(request.POST)
-        if form.is_valid():
-            user = form.save()
-            login(request, user)
-            messages.success(request, 'Registration successful!')
-            return redirect('homepage')
-    else:
-        form = UserCreationForm()
-    return render(request, 'auth/register.html', {'form': form})
diff --git a/apps/core/admin.py b/apps/core/admin.py
deleted file mode 100644
index 8c38f3f..0000000
--- a/apps/core/admin.py
+++ /dev/null
@@ -1,3 +0,0 @@
-from django.contrib import admin
-
-# Register your models here.
diff --git a/apps/core/urls.py b/apps/core/urls.py
deleted file mode 100644
index 847bb8c..0000000
--- a/apps/core/urls.py
+++ /dev/null
@@ -1,17 +0,0 @@
-from django.urls import path
-from . import views
-
-urlpatterns = [
-    path('', views.homepage, name='homepage'),
-    path('marketplace/', views.marketplace, name='marketplace'),
-    path('pricing/', views.pricing, name='pricing'),
-    path('debug/', views.debug_page, name='debug'),
-    path('reset-password/', views.reset_password, name='reset_password'),
-    path('agent/<slug:slug>/', views.agent_detail, name='agent_detail'),
-    path('agent/<slug:slug>/process/', views.process_agent, name='process_agent'),
-    path('profile/', views.profile, name='profile'),
-    
-    # API endpoints
-    path('api/wallet/balance/', views.check_wallet_balance, name='api_wallet_balance'),
-    path('api/chat/<slug:slug>/', views.chat_message, name='api_chat_message'),
-]
diff --git a/apps/core/views.py b/apps/core/views.py
deleted file mode 100644
index 9334168..0000000
--- a/apps/core/views.py
+++ /dev/null
@@ -1,452 +0,0 @@
-# Create your views here.
-from django.shortcuts import render, redirect, get_object_or_404
-from django.contrib.auth.decorators import login_required
-from django.contrib import messages
-from django.http import JsonResponse
-from django.views.decorators.csrf import csrf_exempt
-from django.views.decorators.http import require_http_methods
-from django.conf import settings
-from django.contrib.auth import get_user_model
-from django.utils import timezone
-from agents.models import Agent
-from agents.agent_processors import AgentProcessor
-import json
-import os
-
-User = get_user_model()
-
-def homepage(request):
-    """Enhanced homepage with all features from Next.js version"""
-    # Handle contact form submission
-    if request.method == 'POST':
-        name = request.POST.get('name')
-        email = request.POST.get('email')
-        company = request.POST.get('company', '')
-        message = request.POST.get('message')
-        
-        if name and email and message:
-            # Here you can save to database or send email
-            # For now, just show success message
-            messages.success(request, f'Thank you {name}! Your message has been sent. We will get back to you soon.')
-            return redirect('homepage')
-        else:
-            messages.error(request, 'Please fill in all required fields.')
-    
-    # Get featured agents for preview
-    featured_agents = Agent.objects.filter(is_active=True)[:3]
-    
-    context = {
-        'featured_agents': featured_agents,
-        'total_agents': Agent.objects.filter(is_active=True).count(),
-        'total_users': User.objects.count(),
-    }
-    
-    return render(request, 'homepage.html', context)
-
-def marketplace(request):
-    """Display all available agents with enhanced filtering"""
-    category_filter = request.GET.get('category')
-    search_query = request.GET.get('search')
-    
-    agents = Agent.objects.filter(is_active=True)
-    
-    if category_filter:
-        agents = agents.filter(category=category_filter)
-    
-    if search_query:
-        from django.db import models
-        agents = agents.filter(
-            models.Q(name__icontains=search_query) |
-            models.Q(description__icontains=search_query)
-        )
-    
-    # Get unique categories for filter dropdown
-    categories = Agent.objects.filter(is_active=True).values_list('category', flat=True).distinct()
-    
-    context = {
-        'agents': agents.order_by('category', 'name'),
-        'categories': categories,
-        'current_category': category_filter,
-        'search_query': search_query,
-    }
-    
-    return render(request, 'marketplace.html', context)
-
-def pricing(request):
-    """Enhanced pricing page with payment status handling"""
-    packages = [
-        {
-            'id': 'basic', 
-            'amount': 10, 
-            'price': 9.99, 
-            'label': 'Basic',
-            'description': 'Perfect for trying out AI agents',
-            'features': ['2-4 agent uses', 'Basic support', 'Email notifications'],
-            'icon': '💰',
-            'gradient': 'from-blue-500 to-purple-600'
-        },
-        {
-            'id': 'popular', 
-            'amount': 50, 
-            'price': 49.99, 
-            'label': 'Popular',
-            'description': 'Most popular choice for regular users',
-            'features': ['10-25 agent uses', 'Priority support', 'Advanced analytics', 'Export options'],
-            'icon': '⭐',
-            'gradient': 'from-purple-500 to-pink-600',
-            'popular': True
-        },
-        {
-            'id': 'premium', 
-            'amount': 100, 
-            'price': 99.99, 
-            'label': 'Premium',
-            'description': 'For power users and small teams',
-            'features': ['50+ agent uses', '24/7 support', 'Custom integrations', 'Team collaboration'],
-            'icon': '🚀',
-            'gradient': 'from-green-500 to-teal-600'
-        },
-        {
-            'id': 'enterprise', 
-            'amount': 500, 
-            'price': 499.99, 
-            'label': 'Enterprise',
-            'description': 'For large teams and businesses',
-            'features': ['Unlimited uses', 'Dedicated support', 'Custom development', 'SLA guarantee'],
-            'icon': '👑',
-            'gradient': 'from-yellow-500 to-red-600'
-        },
-    ]
-    
-    # Handle payment status messages (prevent duplicate messages)
-    payment_status = request.GET.get('payment')
-    session_id = request.GET.get('session_id')
-    
-    # Create session key to prevent duplicate messages
-    if payment_status:
-        session_key = f"payment_message_{payment_status}_{session_id or 'cancelled'}"
-        if not request.session.get(session_key):
-            request.session[session_key] = True
-            
-            if payment_status == 'success':
-                messages.success(request, '✅ Payment successful! Your wallet has been topped up.')
-            elif payment_status == 'cancelled':
-                messages.error(request, '❌ Payment was cancelled. No charges were made.')
-    
-    # FAQ data
-    faqs = [
-        {
-            'question': 'How does the pay-per-use pricing work?',
-            'answer': 'You add money to your wallet and pay for each AI agent use. Prices range from 2.00 to 8.00 AED per use.'
-        },
-        {
-            'question': 'Do wallet funds expire?',
-            'answer': 'No, your wallet balance never expires. Use it whenever you need AI assistance.'
-        },
-        {
-            'question': 'Can I get a refund?',
-            'answer': 'Yes, unused wallet balance can be refunded within 30 days of purchase.'
-        },
-        {
-            'question': 'Is my payment information secure?',
-            'answer': 'Absolutely. We use Stripe for secure payment processing and never store your payment details.'
-        }
-    ]
-    
-    context = {
-        'packages': packages,
-        'faqs': faqs,
-    }
-    
-    return render(request, 'pricing.html', context)
-
-def debug_page(request):
-    """Debug page for development environment checking"""
-    if not settings.DEBUG:
-        context = {'debug_mode': False}
-        return render(request, 'debug.html', context)
-    
-    # Environment status check
-    env_status = {
-        'DATABASE_URL': bool(os.getenv('DATABASE_URL')),
-        'STRIPE_SECRET_KEY': bool(settings.STRIPE_SECRET_KEY),
-        'N8N_WEBHOOK_DATA_ANALYZER': bool(settings.N8N_WEBHOOK_DATA_ANALYZER),
-        'N8N_WEBHOOK_FIVE_WHYS': bool(settings.N8N_WEBHOOK_FIVE_WHYS),
-        'OPENWEATHER_API_KEY': bool(settings.OPENWEATHER_API_KEY),
-        'DEBUG': settings.DEBUG,
-        'ALLOWED_HOSTS': settings.ALLOWED_HOSTS,
-    }
-    
-    # Database connection test
-    try:
-        user_count = User.objects.count()
-        agent_count = Agent.objects.count()
-        db_status = {'status': 'Connected', 'color': 'green'}
-    except Exception as e:
-        user_count = 0
-        agent_count = 0
-        db_status = {'status': f'Error: {str(e)}', 'color': 'red'}
-    
-    context = {
-        'debug_mode': True,
-        'env_status': json.dumps(env_status, indent=2),
-        'db_status': db_status,
-        'user_count': user_count,
-        'agent_count': agent_count,
-    }
-    
-    return render(request, 'debug.html', context)
-
-def reset_password(request):
-    """Password reset functionality"""
-    if request.method == 'POST':
-        password = request.POST.get('password')
-        confirm_password = request.POST.get('confirm_password')
-        
-        if not password or not confirm_password:
-            context = {'error': 'Both password fields are required'}
-            return render(request, 'reset_password.html', context)
-        
-        if password != confirm_password:
-            context = {'error': 'Passwords do not match'}
-            return render(request, 'reset_password.html', context)
-        
-        if len(password) < 8:
-            context = {'error': 'Password must be at least 8 characters long'}
-            return render(request, 'reset_password.html', context)
-        
-        # In a real implementation, you would:
-        # 1. Verify the reset token from the URL
-        # 2. Update the user's password
-        # 3. Redirect to login with success message
-        
-        messages.success(request, 'Password updated successfully! Please log in with your new password.')
-        return redirect('homepage')
-    
-    # Check if we have a valid reset token (simplified version)
-    token = request.GET.get('token')
-    if not token:
-        context = {'error': 'Invalid or expired reset link. Please request a new password reset.'}
-        return render(request, 'reset_password.html', context)
-    
-    return render(request, 'reset_password.html')
-
-@login_required
-def agent_detail(request, slug):
-    """Enhanced agent detail page with wallet balance checking"""
-    agent = get_object_or_404(Agent, slug=slug, is_active=True)
-    
-    # Calculate wallet status
-    user_balance = request.user.wallet_balance
-    has_sufficient_balance = user_balance >= agent.price
-    
-    # Calculate usage count
-    if has_sufficient_balance:
-        possible_uses = int(user_balance / agent.price)
-    else:
-        possible_uses = 0
-    
-    context = {
-        'agent': agent,
-        'user_balance': user_balance,
-        'has_sufficient_balance': has_sufficient_balance,
-        'possible_uses': possible_uses,
-        'balance_after_use': user_balance - agent.price if has_sufficient_balance else user_balance,
-    }
-    
-    return render(request, 'agent_detail.html', context)
-
-@login_required
-@require_http_methods(["POST"])
-def process_agent(request, slug):
-    """Enhanced agent processing with comprehensive error handling"""
-    agent = get_object_or_404(Agent, slug=slug, is_active=True)
-    
-    # Check wallet balance
-    if not request.user.has_sufficient_balance(agent.price):
-        return JsonResponse({
-            'success': False,
-            'error': f'Insufficient balance. Required: {agent.price_display}, Available: {request.user.wallet_balance:.2f} AED'
-        }, status=400)
-    
-    try:
-        # Process based on agent type
-        processor = AgentProcessor(agent.slug)
-        
-        if agent.slug == 'data-analyzer':
-            file_obj = request.FILES.get('file')
-            if not file_obj:
-                return JsonResponse({'success': False, 'error': 'File is required'}, status=400)
-            
-            # Validate file size (10MB limit)
-            if file_obj.size > 10 * 1024 * 1024:
-                return JsonResponse({'success': False, 'error': 'File size must be less than 10MB'}, status=400)
-            
-            # Validate file type
-            allowed_extensions = ['.csv', '.xlsx', '.xls', '.json']
-            file_extension = os.path.splitext(file_obj.name)[1].lower()
-            if file_extension not in allowed_extensions:
-                return JsonResponse({'success': False, 'error': 'Invalid file type. Allowed: CSV, Excel, JSON'}, status=400)
-            
-            result = processor.process_agent(file_obj=file_obj, user_id=str(request.user.id))
-        
-        elif agent.slug == 'five-whys':
-            problem = request.POST.get('problem')
-            if not problem or len(problem.strip()) < 10:
-                return JsonResponse({'success': False, 'error': 'Problem description must be at least 10 characters'}, status=400)
-            result = processor.process_agent(problem_description=problem, user_id=str(request.user.id))
-        
-        elif agent.slug == 'weather-reporter':
-            location = request.POST.get('location')
-            if not location or len(location.strip()) < 2:
-                return JsonResponse({'success': False, 'error': 'Location must be at least 2 characters'}, status=400)
-            result = processor.process_agent(location=location)
-        
-        elif agent.slug == 'job-posting-generator':
-            required_fields = ['title', 'company', 'description', 'requirements']
-            job_details = {}
-            
-            for field in required_fields:
-                value = request.POST.get(field, '').strip()
-                if not value:
-                    return JsonResponse({'success': False, 'error': f'{field.title()} is required'}, status=400)
-                if len(value) < 5:
-                    return JsonResponse({'success': False, 'error': f'{field.title()} must be at least 5 characters'}, status=400)
-                job_details[field] = value
-            
-            result = processor.process_agent(job_details=job_details, user_id=str(request.user.id))
-        
-        elif agent.slug == 'social-ads-generator':
-            required_fields = ['product', 'platform', 'target_audience', 'tone']
-            ad_requirements = {}
-            
-            for field in required_fields:
-                value = request.POST.get(field, '').strip()
-                if not value:
-                    return JsonResponse({'success': False, 'error': f'{field.replace("_", " ").title()} is required'}, status=400)
-                ad_requirements[field] = value
-            
-            # Validate platform
-            valid_platforms = ['facebook', 'instagram', 'twitter', 'linkedin']
-            if ad_requirements['platform'] not in valid_platforms:
-                return JsonResponse({'success': False, 'error': 'Invalid platform selected'}, status=400)
-            
-            # Validate tone
-            valid_tones = ['professional', 'casual', 'humorous', 'urgent']
-            if ad_requirements['tone'] not in valid_tones:
-                return JsonResponse({'success': False, 'error': 'Invalid tone selected'}, status=400)
-            
-            result = processor.process_agent(ad_requirements=ad_requirements, user_id=str(request.user.id))
-        
-        elif agent.slug == 'faq-generator':
-            content_source = request.POST.get('content_source', '').strip()
-            if not content_source:
-                return JsonResponse({'success': False, 'error': 'Content source is required'}, status=400)
-            if len(content_source) < 50:
-                return JsonResponse({'success': False, 'error': 'Content source must be at least 50 characters'}, status=400)
-            
-            result = processor.process_agent(content_source=content_source, user_id=str(request.user.id))
-        
-        else:
-            return JsonResponse({'success': False, 'error': 'Agent not supported'}, status=400)
-        
-        # Deduct balance on successful processing
-        if request.user.deduct_balance(
-            agent.price, 
-            f"Used {agent.name}",
-            agent.slug
-        ):
-            return JsonResponse({
-                'success': True,
-                'result': result,
-                'new_balance': float(request.user.wallet_balance),
-                'agent_used': agent.name,
-                'cost': float(agent.price)
-            })
-        else:
-            return JsonResponse({
-                'success': False,
-                'error': 'Failed to process payment. Please try again.'
-            }, status=400)
-    
-    except Exception as e:
-        # Log the error in production
-        if not settings.DEBUG:
-            import logging
-            logger = logging.getLogger(__name__)
-            logger.error(f"Agent processing error: {str(e)}", exc_info=True)
-        
-        return JsonResponse({
-            'success': False,
-            'error': 'An error occurred while processing your request. Please try again later.'
-        }, status=500)
-
-@login_required
-def profile(request):
-    """Enhanced user profile with transaction history and wallet management"""
-    # Get recent transactions
-    transactions = request.user.wallet_transactions.all()[:50]  # Last 50 transactions
-    
-    # Calculate usage statistics
-    total_spent = sum(abs(t.amount) for t in transactions if t.type == 'agent_usage')
-    total_topped_up = sum(t.amount for t in transactions if t.type == 'top_up')
-    total_agents_used = transactions.filter(type='agent_usage').count()
-    
-    # Get most used agents
-    from django.db.models import Count
-    popular_agents = (transactions.filter(type='agent_usage')
-                     .values('agent_slug')
-                     .annotate(count=Count('agent_slug'))
-                     .order_by('-count')[:5])
-    
-    # Wallet status
-    balance = request.user.wallet_balance
-    if balance < 5:
-        wallet_status = {'status': 'low', 'color': 'red', 'message': 'Low balance - Add money to continue using agents'}
-    elif balance < 20:
-        wallet_status = {'status': 'medium', 'color': 'orange', 'message': 'Consider adding more funds'}
-    else:
-        wallet_status = {'status': 'high', 'color': 'green', 'message': 'Good balance'}
-    
-    context = {
-        'transactions': transactions,
-        'total_spent': total_spent,
-        'total_topped_up': total_topped_up,
-        'total_agents_used': total_agents_used,
-        'popular_agents': popular_agents,
-        'wallet_status': wallet_status,
-    }
-    
-    return render(request, 'profile.html', context)
-
-# API endpoints for AJAX functionality
-@login_required
-@require_http_methods(["GET"])
-def check_wallet_balance(request):
-    """API endpoint to check current wallet balance"""
-    return JsonResponse({
-        'balance': float(request.user.wallet_balance),
-        'formatted_balance': f"{request.user.wallet_balance:.2f} AED"
-    })
-
-@login_required
-@require_http_methods(["POST"])
-def chat_message(request, slug):
-    """Handle chat messages for interactive agents like 5 Whys"""
-    if slug != 'five-whys':
-        return JsonResponse({'success': False, 'error': 'Chat not available for this agent'}, status=400)
-    
-    message = request.POST.get('message', '').strip()
-    if not message:
-        return JsonResponse({'success': False, 'error': 'Message is required'}, status=400)
-    
-    # Here you would integrate with your 5 Whys processing logic
-    # For now, return a simple response
-    response_message = f"Thank you for: {message}. Let me ask you the next Why question..."
-    
-    return JsonResponse({
-        'success': True,
-        'response': response_message,
-        'timestamp': timezone.now().isoformat()
-    })
-
diff --git a/apps/wallet/admin.py b/apps/wallet/admin.py
deleted file mode 100644
index 8c38f3f..0000000
--- a/apps/wallet/admin.py
+++ /dev/null
@@ -1,3 +0,0 @@
-from django.contrib import admin
-
-# Register your models here.
diff --git a/apps/wallet/stripe_handler.py b/apps/wallet/stripe_handler.py
deleted file mode 100644
index 1bf2b50..0000000
--- a/apps/wallet/stripe_handler.py
+++ /dev/null
@@ -1,72 +0,0 @@
-import stripe
-from django.conf import settings
-from django.contrib.auth import get_user_model
-
-User = get_user_model()
-stripe.api_key = settings.STRIPE_SECRET_KEY
-
-class StripeHandler:
-    """Handle all Stripe-related operations"""
-    
-    def __init__(self):
-        self.packages = {
-            'basic': {'amount': 999, 'currency': 'aed', 'name': 'Basic Package - 10 AED', 'wallet_amount': 10},
-            'popular': {'amount': 4999, 'currency': 'aed', 'name': 'Popular Package - 50 AED', 'wallet_amount': 50},
-            'premium': {'amount': 9999, 'currency': 'aed', 'name': 'Premium Package - 100 AED', 'wallet_amount': 100},
-            'enterprise': {'amount': 49999, 'currency': 'aed', 'name': 'Enterprise Package - 500 AED', 'wallet_amount': 500},
-        }
-    
-    def create_checkout_session(self, amount, user_id, package_id):
-        """Create Stripe checkout session"""
-        package = self.packages.get(package_id)
-        if not package:
-            raise ValueError('Invalid package')
-        
-        session = stripe.checkout.Session.create(
-            payment_method_types=['card'],
-            line_items=[{
-                'price_data': {
-                    'currency': package['currency'],
-                    'product_data': {
-                        'name': package['name'],
-                    },
-                    'unit_amount': package['amount'],
-                },
-                'quantity': 1,
-            }],
-            mode='payment',
-            success_url='https://yoursite.com/wallet/success/?session_id={CHECKOUT_SESSION_ID}',
-            cancel_url='https://yoursite.com/wallet/cancel/',
-            client_reference_id=str(user_id),
-            metadata={
-                'package_id': package_id,
-                'user_id': str(user_id),
-            }
-        )
-        
-        return session
-    
-    def handle_webhook_event(self, event):
-        """Handle Stripe webhook events"""
-        if event['type'] == 'checkout.session.completed':
-            session = event['data']['object']
-            
-            # Get user and package info
-            user_id = session['client_reference_id']
-            package_id = session['metadata']['package_id']
-            
-            try:
-                user = User.objects.get(id=user_id)
-                package = self.packages.get(package_id)
-                
-                if package:
-                    amount = package['wallet_amount']
-                    user.add_balance(
-                        amount,
-                        f"Wallet top-up: {amount} AED",
-                        session['id']
-                    )
-                    
-            except User.DoesNotExist:
-                pass
-
diff --git a/apps/wallet/urls.py b/apps/wallet/urls.py
deleted file mode 100644
index 8b07f5d..0000000
--- a/apps/wallet/urls.py
+++ /dev/null
@@ -1,9 +0,0 @@
-from django.urls import path
-from . import views
-
-urlpatterns = [
-    path('create-checkout/', views.create_checkout_session, name='create_checkout_session'),
-    path('webhook/', views.stripe_webhook, name='stripe_webhook'),
-    path('success/', views.payment_success, name='payment_success'),
-    path('cancel/', views.payment_cancel, name='payment_cancel'),
-]
\ No newline at end of file
diff --git a/apps/wallet/views.py b/apps/wallet/views.py
deleted file mode 100644
index 5876606..0000000
--- a/apps/wallet/views.py
+++ /dev/null
@@ -1,76 +0,0 @@
-from django.shortcuts import render, redirect
-from django.contrib.auth.decorators import login_required
-from django.views.decorators.csrf import csrf_exempt
-from django.views.decorators.http import require_http_methods
-from django.http import JsonResponse, HttpResponse
-from django.contrib import messages
-from django.conf import settings
-from django.contrib.auth import get_user_model
-from .stripe_handler import StripeHandler
-import json
-import stripe
-
-User = get_user_model()
-
-@login_required
-@require_http_methods(["POST"])
-def create_checkout_session(request):
-    """Create Stripe checkout session for wallet top-up"""
-    try:
-        data = json.loads(request.body)
-        amount = data.get('amount')
-        package_id = data.get('package_id')
-        
-        if not amount or amount <= 0:
-            return JsonResponse({'error': 'Invalid amount'}, status=400)
-        
-        # Create Stripe checkout session
-        stripe_handler = StripeHandler()
-        session = stripe_handler.create_checkout_session(
-            amount=amount,
-            user_id=request.user.id,
-            package_id=package_id
-        )
-        
-        return JsonResponse({'checkout_url': session.url})
-        
-    except Exception as e:
-        return JsonResponse({'error': str(e)}, status=500)
-
-@csrf_exempt
-@require_http_methods(["POST"])
-def stripe_webhook(request):
-    """Handle Stripe webhook events"""
-    payload = request.body
-    sig_header = request.META.get('HTTP_STRIPE_SIGNATURE')
-    
-    try:
-        event = stripe.Webhook.construct_event(
-            payload, sig_header, settings.STRIPE_WEBHOOK_SECRET
-        )
-        
-        stripe_handler = StripeHandler()
-        stripe_handler.handle_webhook_event(event)
-        
-        return HttpResponse(status=200)
-        
-    except ValueError:
-        return HttpResponse(status=400)
-    except stripe.error.SignatureVerificationError:
-        return HttpResponse(status=400)
-    except Exception as e:
-        return HttpResponse(status=500)
-
-@login_required
-def payment_success(request):
-    """Handle successful payment redirect"""
-    session_id = request.GET.get('session_id')
-    if session_id:
-        messages.success(request, '✅ Payment successful! Your wallet has been topped up.')
-    return redirect('pricing')
-
-@login_required
-def payment_cancel(request):
-    """Handle cancelled payment redirect"""
-    messages.error(request, '❌ Payment was cancelled. No charges were made.')
-    return redirect('pricing')
diff --git a/apps/core/__init__.py b/authentication/__init__.py
similarity index 100%
rename from apps/core/__init__.py
rename to authentication/__init__.py
diff --git a/authentication/admin.py b/authentication/admin.py
new file mode 100644
index 0000000..a7c5b00
--- /dev/null
+++ b/authentication/admin.py
@@ -0,0 +1,22 @@
+from django.contrib import admin
+from django.contrib.auth.admin import UserAdmin
+from .models import User
+
+
+@admin.register(User)
+class CustomUserAdmin(UserAdmin):
+    list_display = ('username', 'email', 'wallet_balance', 'is_staff', 'is_active', 'date_joined')
+    list_filter = ('is_staff', 'is_active', 'date_joined')
+    search_fields = ('username', 'email')
+    ordering = ('-date_joined',)
+    
+    fieldsets = UserAdmin.fieldsets + (
+        ('Wallet Information', {'fields': ('wallet_balance',)}),
+    )
+    
+    readonly_fields = ('date_joined', 'last_login')
+    
+    def get_readonly_fields(self, request, obj=None):
+        if obj:  # editing an existing object
+            return self.readonly_fields + ('username',)
+        return self.readonly_fields
diff --git a/apps/authentication/apps.py b/authentication/apps.py
similarity index 100%
rename from apps/authentication/apps.py
rename to authentication/apps.py
diff --git a/apps/authentication/migrations/0001_initial.py b/authentication/migrations/0001_initial.py
similarity index 98%
rename from apps/authentication/migrations/0001_initial.py
rename to authentication/migrations/0001_initial.py
index 52ba67a..4974cd8 100644
--- a/apps/authentication/migrations/0001_initial.py
+++ b/authentication/migrations/0001_initial.py
@@ -1,4 +1,4 @@
-# Generated by Django 5.2.4 on 2025-07-08 08:17
+# Generated by Django 5.2.4 on 2025-07-08 15:00
 
 import django.contrib.auth.models
 import django.contrib.auth.validators
diff --git a/apps/core/migrations/__init__.py b/authentication/migrations/__init__.py
similarity index 100%
rename from apps/core/migrations/__init__.py
rename to authentication/migrations/__init__.py
diff --git a/apps/authentication/models.py b/authentication/models.py
similarity index 98%
rename from apps/authentication/models.py
rename to authentication/models.py
index 08d603a..3f34834 100644
--- a/apps/authentication/models.py
+++ b/authentication/models.py
@@ -1,8 +1,8 @@
-# Create your models here.
 from django.contrib.auth.models import AbstractUser
 from django.db import models
 from decimal import Decimal
 
+
 class User(AbstractUser):
     email = models.EmailField(unique=True)
     wallet_balance = models.DecimalField(max_digits=10, decimal_places=2, default=Decimal('0.00'))
diff --git a/apps/authentication/tests.py b/authentication/tests.py
similarity index 100%
rename from apps/authentication/tests.py
rename to authentication/tests.py
diff --git a/authentication/urls.py b/authentication/urls.py
new file mode 100644
index 0000000..96d98ff
--- /dev/null
+++ b/authentication/urls.py
@@ -0,0 +1,9 @@
+from django.urls import path
+from . import views
+
+urlpatterns = [
+    path('login/', views.login_view, name='login'),
+    path('register/', views.register_view, name='register'),
+    path('logout/', views.logout_view, name='logout'),
+    path('profile/', views.profile_view, name='profile'),
+]
\ No newline at end of file
diff --git a/authentication/views.py b/authentication/views.py
new file mode 100644
index 0000000..2c3df4c
--- /dev/null
+++ b/authentication/views.py
@@ -0,0 +1,103 @@
+from django.shortcuts import render, redirect
+from django.contrib.auth import login, authenticate, logout
+from django.contrib.auth.decorators import login_required
+from django.contrib import messages
+from django.contrib.auth.forms import UserCreationForm
+from django.http import JsonResponse
+from .models import User
+
+
+def login_view(request):
+    """User login view"""
+    if request.method == 'POST':
+        email = request.POST.get('email')
+        password = request.POST.get('password')
+        
+        user = authenticate(request, username=email, password=password)
+        if user is not None:
+            login(request, user)
+            return redirect('homepage')
+        else:
+            messages.error(request, 'Invalid email or password')
+    
+    return render(request, 'authentication/login.html')
+
+
+def register_view(request):
+    """User registration view"""
+    if request.method == 'POST':
+        username = request.POST.get('username')
+        email = request.POST.get('email')
+        password1 = request.POST.get('password1')
+        password2 = request.POST.get('password2')
+        
+        if password1 != password2:
+            messages.error(request, 'Passwords do not match')
+            return render(request, 'authentication/register.html')
+        
+        if User.objects.filter(email=email).exists():
+            messages.error(request, 'Email already exists')
+            return render(request, 'authentication/register.html')
+        
+        try:
+            user = User.objects.create_user(
+                username=username,
+                email=email,
+                password=password1
+            )
+            login(request, user)
+            messages.success(request, 'Account created successfully!')
+            return redirect('homepage')
+        except Exception as e:
+            messages.error(request, 'Error creating account')
+    
+    return render(request, 'authentication/register.html')
+
+
+def logout_view(request):
+    """User logout view"""
+    logout(request)
+    messages.success(request, 'You have been logged out successfully')
+    return redirect('homepage')
+
+
+@login_required
+def profile_view(request):
+    """User profile view"""
+    # Get all transactions first (not sliced)
+    all_transactions = request.user.wallet_transactions.all()
+    
+    # Get recent transactions (sliced for display)
+    transactions = all_transactions[:50]
+    
+    # Calculate usage statistics using all transactions
+    total_spent = sum(abs(t.amount) for t in all_transactions if t.type == 'agent_usage')
+    total_topped_up = sum(t.amount for t in all_transactions if t.type == 'top_up')
+    total_agents_used = all_transactions.filter(type='agent_usage').count()
+    
+    # Get most used agents
+    from django.db.models import Count
+    popular_agents = (all_transactions.filter(type='agent_usage')
+                     .values('agent_slug')
+                     .annotate(count=Count('agent_slug'))
+                     .order_by('-count')[:5])
+    
+    # Wallet status
+    balance = request.user.wallet_balance
+    if balance < 5:
+        wallet_status = {'status': 'low', 'color': 'red', 'message': 'Low balance - Add money to continue using agents'}
+    elif balance < 20:
+        wallet_status = {'status': 'medium', 'color': 'orange', 'message': 'Consider adding more funds'}
+    else:
+        wallet_status = {'status': 'high', 'color': 'green', 'message': 'Good balance'}
+    
+    context = {
+        'transactions': transactions,
+        'total_spent': total_spent,
+        'total_topped_up': total_topped_up,
+        'total_agents_used': total_agents_used,
+        'popular_agents': popular_agents,
+        'wallet_status': wallet_status,
+    }
+    
+    return render(request, 'authentication/profile.html', context)
diff --git a/apps/wallet/__init__.py b/core/__init__.py
similarity index 100%
rename from apps/wallet/__init__.py
rename to core/__init__.py
diff --git a/apps/agents/admin.py b/core/admin.py
similarity index 100%
rename from apps/agents/admin.py
rename to core/admin.py
diff --git a/apps/core/apps.py b/core/apps.py
similarity index 100%
rename from apps/core/apps.py
rename to core/apps.py
diff --git a/apps/wallet/migrations/__init__.py b/core/migrations/__init__.py
similarity index 100%
rename from apps/wallet/migrations/__init__.py
rename to core/migrations/__init__.py
diff --git a/apps/core/models.py b/core/models.py
similarity index 100%
rename from apps/core/models.py
rename to core/models.py
diff --git a/apps/core/tests.py b/core/tests.py
similarity index 100%
rename from apps/core/tests.py
rename to core/tests.py
diff --git a/core/urls.py b/core/urls.py
new file mode 100644
index 0000000..8289040
--- /dev/null
+++ b/core/urls.py
@@ -0,0 +1,12 @@
+from django.urls import path
+from . import views
+
+urlpatterns = [
+    path('', views.homepage_view, name='homepage'),
+    path('agents/<slug:agent_slug>/', views.agent_detail_view, name='agent_detail'),
+    path('agents/<slug:agent_slug>/use/', views.use_agent_view, name='use_agent'),
+    path('wallet/', views.wallet_view, name='wallet'),
+    path('wallet/topup/', views.wallet_topup_view, name='wallet_topup'),
+    path('stripe/webhook/', views.stripe_webhook_view, name='stripe_webhook'),
+    path('api/agents/', views.agents_api_view, name='agents_api'),
+]
\ No newline at end of file
diff --git a/core/views.py b/core/views.py
new file mode 100644
index 0000000..da46617
--- /dev/null
+++ b/core/views.py
@@ -0,0 +1,229 @@
+from django.shortcuts import render, redirect, get_object_or_404
+from django.contrib.auth.decorators import login_required
+from django.contrib import messages
+from django.http import JsonResponse
+from django.views.decorators.csrf import csrf_exempt
+from django.views.decorators.http import require_http_methods
+from django.utils.decorators import method_decorator
+from django.views import View
+from agents.models import Agent
+from agents.agent_processors import AgentProcessor
+from wallet.stripe_handler import StripePaymentHandler
+from wallet.models import WalletTransaction
+import json
+
+
+def homepage_view(request):
+    """Homepage view showing all available agents"""
+    agents = Agent.objects.filter(is_active=True)
+    
+    # Group agents by category
+    categories = {}
+    for agent in agents:
+        category = agent.get_category_display()
+        if category not in categories:
+            categories[category] = []
+        categories[category].append(agent)
+    
+    context = {
+        'agents': agents,
+        'categories': categories,
+        'user_balance': request.user.wallet_balance if request.user.is_authenticated else 0,
+    }
+    
+    return render(request, 'core/homepage.html', context)
+
+
+@login_required
+def agent_detail_view(request, agent_slug):
+    """Individual agent detail page"""
+    agent = get_object_or_404(Agent, slug=agent_slug, is_active=True)
+    
+    # Check if user has sufficient balance
+    can_use_agent = request.user.has_sufficient_balance(agent.price)
+    
+    # Get recent usage by this user
+    recent_usage = WalletTransaction.objects.filter(
+        user=request.user,
+        agent_slug=agent_slug,
+        type='agent_usage'
+    )[:5]
+    
+    context = {
+        'agent': agent,
+        'can_use_agent': can_use_agent,
+        'recent_usage': recent_usage,
+        'user_balance': request.user.wallet_balance,
+    }
+    
+    return render(request, 'core/agent_detail.html', context)
+
+
+@login_required
+@require_http_methods(["POST"])
+def use_agent_view(request, agent_slug):
+    """Process agent usage"""
+    agent = get_object_or_404(Agent, slug=agent_slug, is_active=True)
+    
+    # Check balance
+    if not request.user.has_sufficient_balance(agent.price):
+        return JsonResponse({
+            'success': False,
+            'error': 'Insufficient balance'
+        }, status=400)
+    
+    try:
+        # Get input data based on agent type
+        if agent_slug == 'data-analyzer':
+            file_obj = request.FILES.get('file')
+            if not file_obj:
+                return JsonResponse({'success': False, 'error': 'File required'}, status=400)
+            
+            processor = AgentProcessor(agent_slug)
+            result = processor.process_agent(file_obj=file_obj, user_id=request.user.id)
+            
+        elif agent_slug == 'five-whys':
+            problem = request.POST.get('problem')
+            if not problem:
+                return JsonResponse({'success': False, 'error': 'Problem description required'}, status=400)
+            
+            processor = AgentProcessor(agent_slug)
+            result = processor.process_agent(problem_description=problem, user_id=request.user.id)
+            
+        elif agent_slug == 'weather-reporter':
+            location = request.POST.get('location')
+            if not location:
+                return JsonResponse({'success': False, 'error': 'Location required'}, status=400)
+            
+            processor = AgentProcessor(agent_slug)
+            result = processor.process_agent(location=location)
+            
+        elif agent_slug == 'job-posting-generator':
+            job_details = request.POST.get('job_details')
+            if not job_details:
+                return JsonResponse({'success': False, 'error': 'Job details required'}, status=400)
+            
+            processor = AgentProcessor(agent_slug)
+            result = processor.process_agent(job_details=job_details, user_id=request.user.id)
+            
+        elif agent_slug == 'social-ads-generator':
+            ad_requirements = request.POST.get('ad_requirements')
+            if not ad_requirements:
+                return JsonResponse({'success': False, 'error': 'Ad requirements required'}, status=400)
+            
+            processor = AgentProcessor(agent_slug)
+            result = processor.process_agent(ad_requirements=ad_requirements, user_id=request.user.id)
+            
+        elif agent_slug == 'faq-generator':
+            content_source = request.POST.get('content_source')
+            if not content_source:
+                return JsonResponse({'success': False, 'error': 'Content source required'}, status=400)
+            
+            processor = AgentProcessor(agent_slug)
+            result = processor.process_agent(content_source=content_source, user_id=request.user.id)
+            
+        else:
+            return JsonResponse({'success': False, 'error': 'Invalid agent'}, status=400)
+        
+        # Deduct balance and record transaction
+        request.user.deduct_balance(
+            amount=agent.price,
+            description=f"Used {agent.name}",
+            agent_slug=agent_slug
+        )
+        
+        return JsonResponse({
+            'success': True,
+            'result': result,
+            'remaining_balance': float(request.user.wallet_balance)
+        })
+        
+    except Exception as e:
+        return JsonResponse({
+            'success': False,
+            'error': str(e)
+        }, status=500)
+
+
+@login_required
+def wallet_view(request):
+    """Wallet management page"""
+    transactions = request.user.wallet_transactions.all()[:50]
+    
+    # Calculate statistics
+    total_spent = sum(abs(t.amount) for t in transactions if t.type == 'agent_usage')
+    total_topped_up = sum(t.amount for t in transactions if t.type == 'top_up')
+    
+    context = {
+        'transactions': transactions,
+        'total_spent': total_spent,
+        'total_topped_up': total_topped_up,
+        'current_balance': request.user.wallet_balance,
+    }
+    
+    return render(request, 'core/wallet.html', context)
+
+
+@login_required
+def wallet_topup_view(request):
+    """Wallet top-up page"""
+    if request.method == 'POST':
+        amount = request.POST.get('amount')
+        
+        try:
+            amount = float(amount)
+            if amount not in [10, 50, 100, 500]:
+                messages.error(request, 'Invalid amount selected')
+                return redirect('wallet_topup')
+            
+            # Create Stripe checkout session
+            stripe_handler = StripePaymentHandler()
+            session_data = stripe_handler.create_checkout_session(request.user, amount)
+            
+            return redirect(session_data['payment_url'])
+            
+        except (ValueError, TypeError):
+            messages.error(request, 'Invalid amount')
+            return redirect('wallet_topup')
+    
+    return render(request, 'core/wallet_topup.html')
+
+
+@csrf_exempt
+@require_http_methods(["POST"])
+def stripe_webhook_view(request):
+    """Handle Stripe webhook events"""
+    payload = request.body
+    sig_header = request.META.get('HTTP_STRIPE_SIGNATURE')
+    
+    stripe_handler = StripePaymentHandler()
+    result = stripe_handler.handle_webhook(payload, sig_header)
+    
+    if result['success']:
+        return JsonResponse({'status': 'success'})
+    else:
+        return JsonResponse({'status': 'error', 'message': result['error']}, status=400)
+
+
+def agents_api_view(request):
+    """API endpoint for agents list"""
+    agents = Agent.objects.filter(is_active=True)
+    
+    agents_data = []
+    for agent in agents:
+        agents_data.append({
+            'id': agent.id,
+            'name': agent.name,
+            'slug': agent.slug,
+            'description': agent.description,
+            'category': agent.category,
+            'price': float(agent.price),
+            'icon': agent.icon,
+            'rating': float(agent.rating),
+            'review_count': agent.review_count,
+        })
+    
+    return JsonResponse({
+        'agents': agents_data,
+        'total_count': len(agents_data)
+    })
diff --git a/future agent creation b/future agent creation
new file mode 100644
index 0000000..68b079e
--- /dev/null
+++ b/future agent creation	
@@ -0,0 +1,48 @@
+● Future Agent Creation - What You Need to Tell Me
+
+  🎯 Minimum Required Information
+
+  1. Agent Basic Info
+
+  - Agent Name: (e.g., "PDF Document Processor")
+  - Description: (what it does)
+  - Icon/Emoji: (e.g., 📄)
+  - Cost: (credits per use)
+
+  2. Input Requirements
+
+  - What inputs does the user provide?
+    • File upload? (what file types?)
+    • Text input? (what kind?)
+    • Form fields? (which ones?)
+    • Options/settings? (what choices?)
+
+  3. Processing Method
+
+  - How should it work?
+    • API integration? (which service?)
+    • Mock/simulation? (what response?)
+    • External webhook? (URL/endpoint?)
+
+  💡 Example Request
+
+  "Create a PDF Document Processor agent:
+  - Name: PDF Document Processor
+  - Description: Extract text and summarize PDF documents
+  - Icon: 📄
+  - Cost: 35 credits
+  - Input: PDF file upload (max 10MB)
+  - Processing: OpenAI API for text extraction and summarization
+  - Output: Text summary + key points"
+
+  🚀 What I'll Handle Automatically
+
+  - ✅ Suspense wrappers
+  - ✅ File structure (/agent/pdf-processor/page.tsx)
+  - ✅ Slug mapping in agentUtils.ts
+  - ✅ Complete component structure
+  - ✅ Error handling
+  - ✅ Credit system integration
+  - ✅ UI consistency with existing agents
+
+  Just give me the basics above and I'll build the complete agent for you!
diff --git a/netcop_hub/settings.py b/netcop_hub/settings.py
index 4a3b2bb..99a43fa 100644
--- a/netcop_hub/settings.py
+++ b/netcop_hub/settings.py
@@ -1,18 +1,40 @@
+"""
+Django settings for netcop_hub project.
+
+Generated by 'django-admin startproject' using Django 5.2.4.
+
+For more information on this file, see
+https://docs.djangoproject.com/en/5.2/topics/settings/
+
+For the full list of settings and their values, see
+https://docs.djangoproject.com/en/5.2/ref/settings/
+"""
+
 from pathlib import Path
 from decouple import config
 import sys
 
+# Build paths inside the project like this: BASE_DIR / 'subdir'.
 BASE_DIR = Path(__file__).resolve().parent.parent
 
 # Add apps directory to Python path
 sys.path.insert(0, str(BASE_DIR / 'apps'))
 
-# Security
-SECRET_KEY = config('SECRET_KEY', default='your-secret-key-here')
-DEBUG = config('DEBUG', default=False, cast=bool)
+
+# Quick-start development settings - unsuitable for production
+# See https://docs.djangoproject.com/en/5.2/howto/deployment/checklist/
+
+# SECURITY WARNING: keep the secret key used in production secret!
+SECRET_KEY = config('SECRET_KEY', default='django-insecure-thdd^re4==p$4geq^$52w7%egd0xxrj#fpgk1c+$xt-jrr5d7%')
+
+# SECURITY WARNING: don't run with debug turned on in production!
+DEBUG = True  # Force DEBUG=True for development
+
 ALLOWED_HOSTS = config('ALLOWED_HOSTS', default='localhost,127.0.0.1').split(',')
 
+
 # Application definition
+
 INSTALLED_APPS = [
     'django.contrib.admin',
     'django.contrib.auth',
@@ -21,10 +43,10 @@ INSTALLED_APPS = [
     'django.contrib.messages',
     'django.contrib.staticfiles',
     'rest_framework',
-    'core',
     'authentication',
     'agents',
     'wallet',
+    'core',
 ]
 
 MIDDLEWARE = [
@@ -39,7 +61,6 @@ MIDDLEWARE = [
 
 ROOT_URLCONF = 'netcop_hub.urls'
 
-# Templates
 TEMPLATES = [
     {
         'BACKEND': 'django.template.backends.django.DjangoTemplates',
@@ -56,7 +77,12 @@ TEMPLATES = [
     },
 ]
 
+WSGI_APPLICATION = 'netcop_hub.wsgi.application'
+
+
 # Database
+# https://docs.djangoproject.com/en/5.2/ref/settings/#databases
+
 DATABASES = {
     'default': {
         'ENGINE': 'django.db.backends.sqlite3',
@@ -64,21 +90,55 @@ DATABASES = {
     }
 }
 
+
+# Password validation
+# https://docs.djangoproject.com/en/5.2/ref/settings/#auth-password-validators
+
+AUTH_PASSWORD_VALIDATORS = [
+    {
+        'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
+    },
+    {
+        'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
+    },
+    {
+        'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
+    },
+    {
+        'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
+    },
+]
+
+
+# Internationalization
+# https://docs.djangoproject.com/en/5.2/topics/i18n/
+
+LANGUAGE_CODE = 'en-us'
+
+TIME_ZONE = 'UTC'
+
+USE_I18N = True
+
+USE_TZ = True
+
+
 # Custom user model
 AUTH_USER_MODEL = 'authentication.User'
 
-# Static files
+# Static files (CSS, JavaScript, Images)
+# https://docs.djangoproject.com/en/5.2/howto/static-files/
+
 STATIC_URL = '/static/'
 STATIC_ROOT = BASE_DIR / 'staticfiles'
-STATICFILES_DIRS = [BASE_DIR / 'static']
+# STATICFILES_DIRS removed for development - Django will use app static files
 
 # Media files
 MEDIA_URL = '/media/'
 MEDIA_ROOT = BASE_DIR / 'media'
 
 # Stripe
-STRIPE_SECRET_KEY = config('STRIPE_SECRET_KEY')
-STRIPE_WEBHOOK_SECRET = config('STRIPE_WEBHOOK_SECRET')
+STRIPE_SECRET_KEY = config('STRIPE_SECRET_KEY', default='')
+STRIPE_WEBHOOK_SECRET = config('STRIPE_WEBHOOK_SECRET', default='')
 
 # N8N Webhooks
 N8N_WEBHOOK_DATA_ANALYZER = config('N8N_WEBHOOK_DATA_ANALYZER', default='')
@@ -93,3 +153,13 @@ OPENWEATHER_API_KEY = config('OPENWEATHER_API_KEY', default='')
 # Security settings
 CSRF_TRUSTED_ORIGINS = config('CSRF_TRUSTED_ORIGINS', default='').split(',')
 SECURE_PROXY_SSL_HEADER = ('HTTP_X_FORWARDED_PROTO', 'https')
+
+# Default primary key field type
+# https://docs.djangoproject.com/en/5.2/ref/settings/#default-auto-field
+
+DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'
+
+# Authentication URLs
+LOGIN_URL = '/auth/login/'
+LOGIN_REDIRECT_URL = '/'
+LOGOUT_REDIRECT_URL = '/'
diff --git a/netcop_hub/urls.py b/netcop_hub/urls.py
index 77fdeee..152ccb4 100644
--- a/netcop_hub/urls.py
+++ b/netcop_hub/urls.py
@@ -1,3 +1,19 @@
+"""
+URL configuration for netcop_hub project.
+
+The `urlpatterns` list routes URLs to views. For more information please see:
+    https://docs.djangoproject.com/en/5.2/topics/http/urls/
+Examples:
+Function views
+    1. Add an import:  from my_app import views
+    2. Add a URL to urlpatterns:  path('', views.home, name='home')
+Class-based views
+    1. Add an import:  from other_app.views import Home
+    2. Add a URL to urlpatterns:  path('', Home.as_view(), name='home')
+Including another URLconf
+    1. Import the include() function: from django.urls import include, path
+    2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
+"""
 from django.contrib import admin
 from django.urls import path, include
 from django.conf import settings
@@ -7,9 +23,10 @@ urlpatterns = [
     path('admin/', admin.site.urls),
     path('', include('core.urls')),
     path('auth/', include('authentication.urls')),
-    path('agents/', include('agents.urls')),
-    path('wallet/', include('wallet.urls')),
 ]
 
+# Serve static files during development
 if settings.DEBUG:
-    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
\ No newline at end of file
+    urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
+    # Also serve media files
+    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
diff --git a/requirements.txt b/requirements.txt
deleted file mode 100644
index fba4e63..0000000
--- a/requirements.txt
+++ /dev/null
@@ -1,8 +0,0 @@
-Django==4.2.7
-djangorestframework==3.14.0
-stripe==7.8.0
-python-decouple==3.8
-requests==2.31.0
-Pillow==10.1.0
-psycopg2-binary==2.9.9
-gunicorn==21.2.0
\ No newline at end of file
diff --git a/static/favicon.png b/static/favicon.png
deleted file mode 100644
index 6554089..0000000
Binary files a/static/favicon.png and /dev/null differ
diff --git a/templates/agent_detail.html b/templates/agent_detail.html
deleted file mode 100644
index 008ce15..0000000
--- a/templates/agent_detail.html
+++ /dev/null
@@ -1,485 +0,0 @@
-{% extends 'base.html' %}
-
-{% block title %}{{ agent.name }} - NetCop AI Hub{% endblock %}
-
-{% block content %}
-<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
-    <!-- Main Content -->
-    <div class="lg:col-span-2">
-        <div class="bg-white rounded-lg shadow-lg p-6">
-            <div class="flex items-center mb-6">
-                <div class="w-16 h-16 bg-gradient-to-r {{ agent.get_gradient_class }} rounded-lg flex items-center justify-center text-white text-2xl mr-4">
-                    {{ agent.icon }}
-                </div>
-                <div>
-                    <h1 class="text-2xl font-bold text-gray-900">{{ agent.name }}</h1>
-                    <p class="text-gray-600">{{ agent.description }}</p>
-                </div>
-            </div>
-            
-            <!-- Agent-specific interfaces -->
-            {% if agent.slug == 'five-whys' %}
-                <!-- Advanced Chat Interface for 5 Whys -->
-                <div id="chatContainer" class="h-96 overflow-y-auto border border-gray-200 rounded-lg p-4 mb-4" style="background: linear-gradient(to bottom, #f9fafb, #ffffff);">
-                    <div id="chatMessages">
-                        <div class="mb-4 flex">
-                            <div class="w-8 h-8 bg-gradient-to-r from-purple-500 to-blue-500 rounded-full flex items-center justify-center text-white text-sm mr-3 flex-shrink-0">
-                                🤖
-                            </div>
-                            <div class="bg-gray-100 rounded-lg p-3 max-w-md">
-                                <div class="markdown-content">
-                                    <p>👋 Welcome to the 5 Whys Root Cause Analysis!</p>
-                                    <p>I'll help you systematically analyze your problem using the proven 5 Whys methodology.</p>
-                                    <p><strong>To get started, please describe the problem you're experiencing.</strong></p>
-                                    <p>For example:</p>
-                                    <ul>
-                                        <li>"Our customer complaints increased by 40% this month"</li>
-                                        <li>"Production quality has decreased recently"</li>
-                                        <li>"Website performance is slower than usual"</li>
-                                    </ul>
-                                    <p>What problem would you like to analyze?</p>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                
-                <div class="flex gap-2">
-                    <input type="text" id="chatInput" placeholder="Describe your problem..." class="flex-1 p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent">
-                    <button id="sendButton" class="px-6 py-3 bg-gradient-to-r from-purple-600 to-blue-600 text-white rounded-lg hover:from-purple-700 hover:to-blue-700 transition-all duration-300">
-                        Send
-                    </button>
-                </div>
-                
-                <!-- Report Display -->
-                <div id="reportSection" class="mt-6 hidden">
-                    <h3 class="text-lg font-semibold mb-4">5 Whys Analysis Report</h3>
-                    <div id="reportContent" class="bg-gray-50 p-4 rounded-lg"></div>
-                    <div class="mt-4 flex gap-2">
-                        <button onclick="copyReport()" class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">Copy Report</button>
-                        <button onclick="downloadReport()" class="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700">Download PDF</button>
-                    </div>
-                </div>
-                
-            {% elif agent.slug == 'data-analyzer' %}
-                <!-- File Upload Interface -->
-                <div class="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center" id="fileDropZone">
-                    <div class="mb-4">
-                        <svg class="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48">
-                            <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-                        </svg>
-                    </div>
-                    <p class="text-lg text-gray-600 mb-2">Drop your file here or click to browse</p>
-                    <p class="text-sm text-gray-500">Supports CSV, Excel, JSON files up to 10MB</p>
-                    <input type="file" id="fileInput" accept=".csv,.xlsx,.xls,.json" class="hidden">
-                    <button onclick="document.getElementById('fileInput').click()" class="mt-4 px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
-                        Choose File
-                    </button>
-                </div>
-                
-                <div id="filePreview" class="mt-4 hidden">
-                    <div class="bg-gray-50 p-4 rounded-lg">
-                        <p class="font-medium">Selected File:</p>
-                        <p id="fileName" class="text-gray-600"></p>
-                        <p id="fileSize" class="text-sm text-gray-500"></p>
-                    </div>
-                </div>
-                
-            {% elif agent.slug == 'weather-reporter' %}
-                <div class="mb-4">
-                    <label class="block text-sm font-medium text-gray-700 mb-2">Location</label>
-                    <input type="text" name="location" id="locationInput" required class="w-full p-3 border border-gray-300 rounded-md focus:ring-2 focus:ring-purple-500" placeholder="Enter city name (e.g., Dubai, UAE)">
-                </div>
-                
-            {% elif agent.slug == 'job-posting-generator' %}
-                <div class="space-y-4">
-                    <div>
-                        <label class="block text-sm font-medium text-gray-700 mb-2">Job Title</label>
-                        <input type="text" name="title" required class="w-full p-3 border border-gray-300 rounded-md">
-                    </div>
-                    <div>
-                        <label class="block text-sm font-medium text-gray-700 mb-2">Company</label>
-                        <input type="text" name="company" required class="w-full p-3 border border-gray-300 rounded-md">
-                    </div>
-                    <div>
-                        <label class="block text-sm font-medium text-gray-700 mb-2">Job Description</label>
-                        <textarea name="description" rows="4" required class="w-full p-3 border border-gray-300 rounded-md"></textarea>
-                    </div>
-                    <div>
-                        <label class="block text-sm font-medium text-gray-700 mb-2">Requirements</label>
-                        <textarea name="requirements" rows="4" required class="w-full p-3 border border-gray-300 rounded-md"></textarea>
-                    </div>
-                </div>
-                
-            {% elif agent.slug == 'social-ads-generator' %}
-                <div class="space-y-4">
-                    <div>
-                        <label class="block text-sm font-medium text-gray-700 mb-2">Product/Service</label>
-                        <input type="text" name="product" required class="w-full p-3 border border-gray-300 rounded-md">
-                    </div>
-                    <div>
-                        <label class="block text-sm font-medium text-gray-700 mb-2">Platform</label>
-                        <select name="platform" required class="w-full p-3 border border-gray-300 rounded-md">
-                            <option value="facebook">Facebook</option>
-                            <option value="instagram">Instagram</option>
-                            <option value="twitter">Twitter</option>
-                            <option value="linkedin">LinkedIn</option>
-                        </select>
-                    </div>
-                    <div>
-                        <label class="block text-sm font-medium text-gray-700 mb-2">Target Audience</label>
-                        <input type="text" name="target_audience" required class="w-full p-3 border border-gray-300 rounded-md">
-                    </div>
-                    <div>
-                        <label class="block text-sm font-medium text-gray-700 mb-2">Tone</label>
-                        <select name="tone" required class="w-full p-3 border border-gray-300 rounded-md">
-                            <option value="professional">Professional</option>
-                            <option value="casual">Casual</option>
-                            <option value="humorous">Humorous</option>
-                            <option value="urgent">Urgent</option>
-                        </select>
-                    </div>
-                </div>
-                
-            {% elif agent.slug == 'faq-generator' %}
-                <div class="mb-4">
-                    <label class="block text-sm font-medium text-gray-700 mb-2">Content Source</label>
-                    <textarea name="content_source" rows="6" required class="w-full p-3 border border-gray-300 rounded-md" placeholder="Paste your content or URL here..."></textarea>
-                </div>
-            {% endif %}
-            
-            <!-- Processing Status -->
-            <div id="processingStatus" class="mt-6 hidden">
-                <div class="flex items-center justify-center p-6">
-                    <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-purple-600 mr-3"></div>
-                    <span class="text-gray-600">Processing your request...</span>
-                </div>
-            </div>
-            
-            <!-- Results Display -->
-            <div id="results" class="mt-6 hidden">
-                <h3 class="text-lg font-semibold mb-4">Results</h3>
-                <div id="resultsContent" class="bg-gray-50 p-4 rounded-md">
-                    <!-- Results will be inserted here -->
-                </div>
-                <div class="mt-4 flex gap-2">
-                    <button onclick="copyResults()" class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">Copy Results</button>
-                    <button onclick="downloadResults()" class="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700">Download</button>
-                </div>
-            </div>
-        </div>
-    </div>
-    
-    <!-- Sidebar -->
-    <div class="lg:col-span-1">
-        <!-- Wallet Balance Component -->
-        <div class="bg-white rounded-lg shadow-lg p-6 mb-6">
-            <h3 class="text-lg font-semibold mb-4">Cost</h3>
-            <div class="mb-4">
-                <div class="flex justify-between items-center mb-2">
-                    <span class="text-gray-600">Current Balance:</span>
-                    <span class="font-semibold">{{ user.wallet_balance }} AED</span>
-                </div>
-                <div class="flex justify-between items-center mb-2">
-                    <span class="text-gray-600">Cost:</span>
-                    <span class="font-semibold text-red-600">-{{ agent.price_display }}</span>
-                </div>
-                <div class="border-t pt-2">
-                    <div class="flex justify-between items-center">
-                        <span class="font-semibold">After Processing:</span>
-                        <span class="font-semibold {% if has_sufficient_balance %}text-green-600{% else %}text-red-600{% endif %}">
-                            {% if has_sufficient_balance %}
-                                {{ user.wallet_balance|floatformat:2 }} AED
-                            {% else %}
-                                Insufficient Balance
-                            {% endif %}
-                        </span>
-                    </div>
-                </div>
-            </div>
-            
-            <button id="processBtn" type="button" 
-                    class="w-full py-3 px-4 rounded-md font-semibold transition-colors
-                    {% if has_sufficient_balance %}
-                        bg-blue-600 text-white hover:bg-blue-700
-                    {% else %}
-                        bg-gray-300 text-gray-500 cursor-not-allowed
-                    {% endif %}"
-                    {% if not has_sufficient_balance %}disabled{% endif %}>
-                {% if has_sufficient_balance %}
-                    Process Agent ({{ agent.price_display }})
-                {% else %}
-                    Insufficient Balance
-                {% endif %}
-            </button>
-            
-            {% if not has_sufficient_balance %}
-                <p class="text-center mt-4 text-sm">
-                    <a href="{% url 'pricing' %}" class="text-blue-600 hover:text-blue-800 underline">
-                        Top up wallet
-                    </a> to use this agent
-                </p>
-            {% endif %}
-        </div>
-        
-        <!-- Agent Stats -->
-        <div class="bg-white rounded-lg shadow-lg p-6">
-            <h3 class="text-lg font-semibold mb-4">Agent Statistics</h3>
-            <div class="space-y-3">
-                <div class="flex justify-between">
-                    <span class="text-gray-600">Rating:</span>
-                    <div class="flex items-center">
-                        <span class="text-yellow-400">★</span>
-                        <span class="ml-1">{{ agent.rating }}</span>
-                    </div>
-                </div>
-                <div class="flex justify-between">
-                    <span class="text-gray-600">Reviews:</span>
-                    <span>{{ agent.review_count }}</span>
-                </div>
-                <div class="flex justify-between">
-                    <span class="text-gray-600">Category:</span>
-                    <span class="capitalize">{{ agent.get_category_display }}</span>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-
-<script>
-// Agent processing logic
-document.addEventListener('DOMContentLoaded', function() {
-    const agentSlug = '{{ agent.slug }}';
-    const processBtn = document.getElementById('processBtn');
-    const processingStatus = document.getElementById('processingStatus');
-    const results = document.getElementById('results');
-    const resultsContent = document.getElementById('resultsContent');
-    
-    // File upload for data analyzer
-    if (agentSlug === 'data-analyzer') {
-        const fileInput = document.getElementById('fileInput');
-        const fileDropZone = document.getElementById('fileDropZone');
-        const filePreview = document.getElementById('filePreview');
-        const fileName = document.getElementById('fileName');
-        const fileSize = document.getElementById('fileSize');
-        
-        fileInput.addEventListener('change', function(e) {
-            const file = e.target.files[0];
-            if (file) {
-                fileName.textContent = file.name;
-                fileSize.textContent = `${(file.size / 1024 / 1024).toFixed(2)} MB`;
-                filePreview.classList.remove('hidden');
-            }
-        });
-        
-        // Drag and drop functionality
-        fileDropZone.addEventListener('dragover', function(e) {
-            e.preventDefault();
-            fileDropZone.classList.add('border-blue-400', 'bg-blue-50');
-        });
-        
-        fileDropZone.addEventListener('dragleave', function(e) {
-            e.preventDefault();
-            fileDropZone.classList.remove('border-blue-400', 'bg-blue-50');
-        });
-        
-        fileDropZone.addEventListener('drop', function(e) {
-            e.preventDefault();
-            fileDropZone.classList.remove('border-blue-400', 'bg-blue-50');
-            const files = e.dataTransfer.files;
-            if (files.length > 0) {
-                fileInput.files = files;
-                fileInput.dispatchEvent(new Event('change'));
-            }
-        });
-    }
-    
-    // Chat functionality for 5 Whys
-    if (agentSlug === 'five-whys') {
-        const chatInput = document.getElementById('chatInput');
-        const sendButton = document.getElementById('sendButton');
-        const chatMessages = document.getElementById('chatMessages');
-        const chatContainer = document.getElementById('chatContainer');
-        
-        function addMessage(content, sender = 'user') {
-            const messageDiv = document.createElement('div');
-            messageDiv.className = 'mb-4 flex';
-            
-            if (sender === 'user') {
-                messageDiv.innerHTML = `
-                    <div class="ml-auto flex">
-                        <div class="bg-blue-600 text-white rounded-lg p-3 max-w-md">
-                            ${content}
-                        </div>
-                        <div class="w-8 h-8 bg-blue-600 rounded-full flex items-center justify-center text-white text-sm ml-3 flex-shrink-0">
-                            👤
-                        </div>
-                    </div>
-                `;
-            } else {
-                messageDiv.innerHTML = `
-                    <div class="w-8 h-8 bg-gradient-to-r from-purple-500 to-blue-500 rounded-full flex items-center justify-center text-white text-sm mr-3 flex-shrink-0">
-                        🤖
-                    </div>
-                    <div class="bg-gray-100 rounded-lg p-3 max-w-md">
-                        <div class="markdown-content">${content}</div>
-                    </div>
-                `;
-            }
-            
-            chatMessages.appendChild(messageDiv);
-            chatContainer.scrollTop = chatContainer.scrollHeight;
-        }
-        
-        function sendMessage() {
-            const message = chatInput.value.trim();
-            if (!message) return;
-            
-            addMessage(message, 'user');
-            chatInput.value = '';
-            
-            // Here you would send the message to your Django backend
-            // For now, we'll simulate a response
-            setTimeout(() => {
-                addMessage('Thank you for sharing that problem. Let me ask you the first "Why" question...', 'bot');
-            }, 1000);
-        }
-        
-        sendButton.addEventListener('click', sendMessage);
-        chatInput.addEventListener('keypress', function(e) {
-            if (e.key === 'Enter') {
-                sendMessage();
-            }
-        });
-    }
-    
-    // Main process button functionality
-    processBtn.addEventListener('click', async function() {
-        if (processBtn.disabled) return;
-        
-        processBtn.disabled = true;
-        processBtn.textContent = 'Processing...';
-        processingStatus.classList.remove('hidden');
-        
-        try {
-            const formData = new FormData();
-            
-            // Collect form data based on agent type
-            if (agentSlug === 'data-analyzer') {
-                const fileInput = document.getElementById('fileInput');
-                if (fileInput.files[0]) {
-                    formData.append('file', fileInput.files[0]);
-                } else {
-                    throw new Error('Please select a file');
-                }
-            } else if (agentSlug === 'weather-reporter') {
-                const location = document.getElementById('locationInput').value;
-                if (!location) throw new Error('Please enter a location');
-                formData.append('location', location);
-            } else {
-                // For other agents, collect all form inputs
-                const inputs = document.querySelectorAll('input[name], textarea[name], select[name]');
-                inputs.forEach(input => {
-                    if (input.value) {
-                        formData.append(input.name, input.value);
-                    }
-                });
-            }
-            
-            const response = await fetch(`{% url 'process_agent' agent.slug %}`, {
-                method: 'POST',
-                body: formData,
-                headers: {
-                    'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
-                }
-            });
-            
-            const data = await response.json();
-            
-            if (data.success) {
-                // Display results
-                resultsContent.innerHTML = `<pre>${JSON.stringify(data.result, null, 2)}</pre>`;
-                results.classList.remove('hidden');
-                
-                // Update balance display (you might want to refresh the page or update via AJAX)
-                location.reload();
-            } else {
-                alert('Error: ' + data.error);
-            }
-        } catch (error) {
-            alert('Error: ' + error.message);
-        } finally {
-            processBtn.disabled = false;
-            processBtn.textContent = 'Process Agent ({{ agent.price_display }})';
-            processingStatus.classList.add('hidden');
-        }
-    });
-});
-
-// Utility functions
-function copyResults() {
-    const content = document.getElementById('resultsContent').textContent;
-    navigator.clipboard.writeText(content).then(() => {
-        alert('Results copied to clipboard!');
-    });
-}
-
-function downloadResults() {
-    const content = document.getElementById('resultsContent').textContent;
-    const blob = new Blob([content], { type: 'text/plain' });
-    const url = window.URL.createObjectURL(blob);
-    const a = document.createElement('a');
-    a.href = url;
-    a.download = '{{ agent.slug }}_results.txt';
-    a.click();
-    window.URL.revokeObjectURL(url);
-}
-
-function copyReport() {
-    const content = document.getElementById('reportContent').textContent;
-    navigator.clipboard.writeText(content).then(() => {
-        alert('Report copied to clipboard!');
-    });
-}
-
-function downloadReport() {
-    const content = document.getElementById('reportContent').textContent;
-    const blob = new Blob([content], { type: 'text/plain' });
-    const url = window.URL.createObjectURL(blob);
-    const a = document.createElement('a');
-    a.href = url;
-    a.download = 'five_whys_analysis_report.txt';
-    a.click();
-    window.URL.revokeObjectURL(url);
-}
-</script>
-
-<style>
-.markdown-content ul {
-    list-style-type: disc;
-    margin-left: 20px;
-    margin-top: 8px;
-    margin-bottom: 8px;
-}
-
-.markdown-content li {
-    margin: 4px 0;
-}
-
-.markdown-content p {
-    margin: 8px 0;
-}
-
-.markdown-content strong {
-    font-weight: 600;
-}
-
-@keyframes spin {
-    to { transform: rotate(360deg); }
-}
-
-.animate-spin {
-    animation: spin 1s linear infinite;
-}
-</style>
-{% endblock %}
diff --git a/templates/authentication/login.html b/templates/authentication/login.html
new file mode 100644
index 0000000..ce90883
--- /dev/null
+++ b/templates/authentication/login.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Login - NetCop Hub</title>
+    <style>
+        body { font-family: Arial, sans-serif; margin: 0; padding: 20px; background-color: #f5f5f5; }
+        .container { max-width: 400px; margin: 50px auto; }
+        .login-form { background: white; padding: 30px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
+        .form-group { margin-bottom: 20px; }
+        .form-group label { display: block; margin-bottom: 5px; font-weight: bold; }
+        .form-group input { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; }
+        .btn { width: 100%; padding: 12px; background: #007bff; color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 1em; }
+        .btn:hover { background: #0056b3; }
+        .messages { margin-bottom: 20px; }
+        .message { padding: 10px; border-radius: 4px; margin-bottom: 10px; }
+        .message.error { background: #ffe6e6; color: #cc0000; }
+        .message.success { background: #e6ffe6; color: #006600; }
+        .auth-links { text-align: center; margin-top: 20px; }
+        .auth-links a { color: #007bff; text-decoration: none; }
+        .auth-links a:hover { text-decoration: underline; }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="login-form">
+            <h2>Login to NetCop Hub</h2>
+            
+            {% if messages %}
+                <div class="messages">
+                    {% for message in messages %}
+                        <div class="message {{ message.tags }}">{{ message }}</div>
+                    {% endfor %}
+                </div>
+            {% endif %}
+            
+            <form method="post">
+                {% csrf_token %}
+                <div class="form-group">
+                    <label for="email">Email:</label>
+                    <input type="email" id="email" name="email" required>
+                </div>
+                
+                <div class="form-group">
+                    <label for="password">Password:</label>
+                    <input type="password" id="password" name="password" required>
+                </div>
+                
+                <button type="submit" class="btn">Login</button>
+            </form>
+            
+            <div class="auth-links">
+                <p>Don't have an account? <a href="{% url 'register' %}">Register here</a></p>
+                <p><a href="{% url 'homepage' %}">Back to Homepage</a></p>
+            </div>
+        </div>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/templates/authentication/profile.html b/templates/authentication/profile.html
new file mode 100644
index 0000000..70491bd
--- /dev/null
+++ b/templates/authentication/profile.html
@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Profile - NetCop Hub</title>
+    <style>
+        body { font-family: Arial, sans-serif; margin: 0; padding: 20px; background-color: #f5f5f5; }
+        .container { max-width: 800px; margin: 0 auto; }
+        .profile-header { background: white; padding: 20px; border-radius: 8px; margin-bottom: 20px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
+        .wallet-status { padding: 15px; border-radius: 8px; margin: 20px 0; }
+        .wallet-status.high { background: #d4edda; color: #155724; }
+        .wallet-status.medium { background: #fff3cd; color: #856404; }
+        .wallet-status.low { background: #f8d7da; color: #721c24; }
+        .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 20px; }
+        .stat-card { background: white; padding: 20px; border-radius: 8px; text-align: center; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
+        .stat-value { font-size: 1.5em; font-weight: bold; color: #007bff; }
+        .popular-agents { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); margin-bottom: 20px; }
+        .agent-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid #eee; }
+        .agent-item:last-child { border-bottom: none; }
+        .transactions { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
+        .transaction-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid #eee; }
+        .transaction-item:last-child { border-bottom: none; }
+        .transaction-amount { font-weight: bold; }
+        .transaction-amount.positive { color: #28a745; }
+        .transaction-amount.negative { color: #dc3545; }
+        .btn { padding: 10px 20px; background: #007bff; color: white; text-decoration: none; border-radius: 5px; display: inline-block; margin-right: 10px; }
+        .btn:hover { background: #0056b3; }
+        .back-link { display: inline-block; margin-bottom: 20px; color: #007bff; text-decoration: none; }
+        .back-link:hover { text-decoration: underline; }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <a href="{% url 'homepage' %}" class="back-link">← Back to Homepage</a>
+        
+        <div class="profile-header">
+            <h1>Profile - {{ user.username }}</h1>
+            <p><strong>Email:</strong> {{ user.email }}</p>
+            <p><strong>Balance:</strong> ${{ user.wallet_balance }}</p>
+            
+            <div class="wallet-status {{ wallet_status.status }}">
+                <strong>{{ wallet_status.message }}</strong>
+            </div>
+            
+            <a href="{% url 'wallet' %}" class="btn">Manage Wallet</a>
+            <a href="{% url 'wallet_topup' %}" class="btn">Top Up</a>
+        </div>
+        
+        <div class="stats">
+            <div class="stat-card">
+                <div class="stat-value">${{ total_spent }}</div>
+                <div>Total Spent</div>
+            </div>
+            <div class="stat-card">
+                <div class="stat-value">${{ total_topped_up }}</div>
+                <div>Total Topped Up</div>
+            </div>
+            <div class="stat-card">
+                <div class="stat-value">{{ total_agents_used }}</div>
+                <div>Agents Used</div>
+            </div>
+        </div>
+        
+        {% if popular_agents %}
+            <div class="popular-agents">
+                <h2>Your Most Used Agents</h2>
+                {% for agent in popular_agents %}
+                    <div class="agent-item">
+                        <span>{{ agent.agent_slug }}</span>
+                        <span><strong>{{ agent.count }}</strong> times</span>
+                    </div>
+                {% endfor %}
+            </div>
+        {% endif %}
+        
+        <div class="transactions">
+            <h2>Recent Transactions</h2>
+            {% if transactions %}
+                {% for transaction in transactions %}
+                    <div class="transaction-item">
+                        <div>
+                            <strong>{{ transaction.description }}</strong>
+                            <small>{{ transaction.created_at|date:"M d, Y H:i" }}</small>
+                        </div>
+                        <div class="transaction-amount {% if transaction.type == 'top_up' %}positive{% else %}negative{% endif %}">
+                            {% if transaction.type == 'top_up' %}+{% else %}-{% endif %}${{ transaction.amount }}
+                        </div>
+                    </div>
+                {% endfor %}
+            {% else %}
+                <p>No transactions yet.</p>
+            {% endif %}
+        </div>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/templates/authentication/register.html b/templates/authentication/register.html
new file mode 100644
index 0000000..7d34ed2
--- /dev/null
+++ b/templates/authentication/register.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Register - NetCop Hub</title>
+    <style>
+        body { font-family: Arial, sans-serif; margin: 0; padding: 20px; background-color: #f5f5f5; }
+        .container { max-width: 400px; margin: 50px auto; }
+        .register-form { background: white; padding: 30px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
+        .form-group { margin-bottom: 20px; }
+        .form-group label { display: block; margin-bottom: 5px; font-weight: bold; }
+        .form-group input { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; }
+        .btn { width: 100%; padding: 12px; background: #007bff; color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 1em; }
+        .btn:hover { background: #0056b3; }
+        .messages { margin-bottom: 20px; }
+        .message { padding: 10px; border-radius: 4px; margin-bottom: 10px; }
+        .message.error { background: #ffe6e6; color: #cc0000; }
+        .message.success { background: #e6ffe6; color: #006600; }
+        .auth-links { text-align: center; margin-top: 20px; }
+        .auth-links a { color: #007bff; text-decoration: none; }
+        .auth-links a:hover { text-decoration: underline; }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="register-form">
+            <h2>Register for NetCop Hub</h2>
+            
+            {% if messages %}
+                <div class="messages">
+                    {% for message in messages %}
+                        <div class="message {{ message.tags }}">{{ message }}</div>
+                    {% endfor %}
+                </div>
+            {% endif %}
+            
+            <form method="post">
+                {% csrf_token %}
+                <div class="form-group">
+                    <label for="username">Username:</label>
+                    <input type="text" id="username" name="username" required>
+                </div>
+                
+                <div class="form-group">
+                    <label for="email">Email:</label>
+                    <input type="email" id="email" name="email" required>
+                </div>
+                
+                <div class="form-group">
+                    <label for="password1">Password:</label>
+                    <input type="password" id="password1" name="password1" required>
+                </div>
+                
+                <div class="form-group">
+                    <label for="password2">Confirm Password:</label>
+                    <input type="password" id="password2" name="password2" required>
+                </div>
+                
+                <button type="submit" class="btn">Register</button>
+            </form>
+            
+            <div class="auth-links">
+                <p>Already have an account? <a href="{% url 'login' %}">Login here</a></p>
+                <p><a href="{% url 'homepage' %}">Back to Homepage</a></p>
+            </div>
+        </div>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/templates/base.html b/templates/base.html
deleted file mode 100644
index bbec678..0000000
--- a/templates/base.html
+++ /dev/null
@@ -1,74 +0,0 @@
-{% load static %}
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>{% block title %}NetCop AI Hub{% endblock %}</title>
-    <link rel="icon" type="image/png" href="{% static 'favicon.png' %}">
-    <script src="https://cdn.tailwindcss.com"></script>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
-    <style>
-        body { font-family: 'Inter', sans-serif; }
-        .glass { backdrop-filter: blur(10px); background: rgba(255, 255, 255, 0.1); }
-        .gradient-bg { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
-    </style>
-</head>
-<body class="bg-gray-50">
-    <!-- Navigation -->
-    <nav class="bg-white shadow-sm border-b">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div class="flex justify-between items-center h-16">
-                <div class="flex items-center">
-                    <a href="{% url 'marketplace' %}" class="text-xl font-bold text-gray-900">
-                        NetCop AI Hub
-                    </a>
-                </div>
-                
-                <div class="flex items-center space-x-4">
-                    {% if user.is_authenticated %}
-                        <div class="glass px-3 py-1 rounded-full">
-                            <span class="text-sm font-medium">💰 {{ user.wallet_balance }} AED</span>
-                        </div>
-                        <a href="{% url 'pricing' %}" class="text-blue-600 hover:text-blue-800">Top Up</a>
-                        <a href="{% url 'profile' %}" class="text-gray-600 hover:text-gray-800">Profile</a>
-                        <a href="{% url 'logout' %}" class="text-red-600 hover:text-red-800">Logout</a>
-                    {% else %}
-                        <a href="{% url 'login' %}" class="text-blue-600 hover:text-blue-800">Login</a>
-                        <a href="{% url 'register' %}" class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700">Sign Up</a>
-                    {% endif %}
-                </div>
-            </div>
-        </div>
-    </nav>
-
-    <!-- Messages -->
-    {% if messages %}
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-4">
-            {% for message in messages %}
-                {% if message.tags == 'error' %}
-                    <div class="alert alert-error bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
-                {% else %}
-                    <div class="alert alert-success bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-4">
-                {% endif %}
-                    {{ message }}
-                </div>
-            {% endfor %}
-        </div>
-    {% endif %}
-
-    <!-- Main Content -->
-    <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-        {% block content %}{% endblock %}
-    </main>
-
-    <!-- Footer -->
-    <footer class="bg-gray-800 text-white mt-20">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-            <div class="text-center">
-                <p>&copy; 2024 NetCop AI Hub. All rights reserved.</p>
-            </div>
-        </div>
-    </footer>
-</body>
-</html>
\ No newline at end of file
diff --git a/templates/core/agent_detail.html b/templates/core/agent_detail.html
new file mode 100644
index 0000000..37fcdba
--- /dev/null
+++ b/templates/core/agent_detail.html
@@ -0,0 +1,118 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{{ agent.name }} - NetCop Hub</title>
+    <style>
+        body { font-family: Arial, sans-serif; margin: 0; padding: 20px; background-color: #f5f5f5; }
+        .container { max-width: 800px; margin: 0 auto; }
+        .agent-detail { background: white; padding: 30px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
+        .agent-header { display: flex; align-items: center; margin-bottom: 20px; }
+        .agent-icon { font-size: 3em; margin-right: 20px; }
+        .agent-info h1 { margin: 0; }
+        .agent-price { color: #007bff; font-size: 1.5em; font-weight: bold; margin: 10px 0; }
+        .agent-rating { color: #ffa500; font-size: 1.1em; }
+        .user-balance { background: #e8f5e8; padding: 10px; border-radius: 5px; margin: 20px 0; }
+        .insufficient-balance { background: #ffe6e6; padding: 10px; border-radius: 5px; margin: 20px 0; color: #cc0000; }
+        .agent-form { background: #f8f9fa; padding: 20px; border-radius: 8px; margin: 20px 0; }
+        .form-group { margin-bottom: 15px; }
+        .form-group label { display: block; margin-bottom: 5px; font-weight: bold; }
+        .form-group input, .form-group textarea { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; }
+        .form-group textarea { height: 100px; resize: vertical; }
+        .btn { padding: 12px 24px; background: #007bff; color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 1em; }
+        .btn:hover { background: #0056b3; }
+        .btn:disabled { background: #ccc; cursor: not-allowed; }
+        .back-link { display: inline-block; margin-bottom: 20px; color: #007bff; text-decoration: none; }
+        .back-link:hover { text-decoration: underline; }
+        .recent-usage { margin-top: 30px; }
+        .usage-item { background: #f8f9fa; padding: 10px; margin: 5px 0; border-radius: 4px; }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <a href="{% url 'homepage' %}" class="back-link">← Back to Homepage</a>
+        
+        <div class="agent-detail">
+            <div class="agent-header">
+                <div class="agent-icon">{{ agent.icon }}</div>
+                <div class="agent-info">
+                    <h1>{{ agent.name }}</h1>
+                    <div class="agent-price">${{ agent.price }}</div>
+                    <div class="agent-rating">★ {{ agent.rating }} ({{ agent.review_count }} reviews)</div>
+                </div>
+            </div>
+            
+            <p>{{ agent.description }}</p>
+            
+            {% if user.is_authenticated %}
+                <div class="user-balance">
+                    Your Balance: ${{ user_balance }}
+                </div>
+                
+                {% if can_use_agent %}
+                    <div class="agent-form">
+                        <h3>Use {{ agent.name }}</h3>
+                        <form method="post" action="{% url 'use_agent' agent.slug %}" enctype="multipart/form-data">
+                            {% csrf_token %}
+                            
+                            {% if agent.slug == 'data-analyzer' %}
+                                <div class="form-group">
+                                    <label for="file">Upload Data File:</label>
+                                    <input type="file" id="file" name="file" accept=".csv,.xlsx,.json" required>
+                                </div>
+                            {% elif agent.slug == 'five-whys' %}
+                                <div class="form-group">
+                                    <label for="problem">Problem Description:</label>
+                                    <textarea id="problem" name="problem" placeholder="Describe the problem you want to analyze..." required></textarea>
+                                </div>
+                            {% elif agent.slug == 'weather-reporter' %}
+                                <div class="form-group">
+                                    <label for="location">Location:</label>
+                                    <input type="text" id="location" name="location" placeholder="Enter city name or coordinates" required>
+                                </div>
+                            {% elif agent.slug == 'job-posting-generator' %}
+                                <div class="form-group">
+                                    <label for="job_details">Job Details:</label>
+                                    <textarea id="job_details" name="job_details" placeholder="Enter job title, requirements, company info..." required></textarea>
+                                </div>
+                            {% elif agent.slug == 'social-ads-generator' %}
+                                <div class="form-group">
+                                    <label for="ad_requirements">Ad Requirements:</label>
+                                    <textarea id="ad_requirements" name="ad_requirements" placeholder="Describe your product/service, target audience, goals..." required></textarea>
+                                </div>
+                            {% elif agent.slug == 'faq-generator' %}
+                                <div class="form-group">
+                                    <label for="content_source">Content Source:</label>
+                                    <textarea id="content_source" name="content_source" placeholder="Paste your content, documentation, or product information..." required></textarea>
+                                </div>
+                            {% endif %}
+                            
+                            <button type="submit" class="btn">Use Agent (${{ agent.price }})</button>
+                        </form>
+                    </div>
+                {% else %}
+                    <div class="insufficient-balance">
+                        <strong>Insufficient Balance!</strong> You need ${{ agent.price }} to use this agent.
+                        <a href="{% url 'wallet_topup' %}" style="color: #007bff;">Top up your wallet</a>
+                    </div>
+                {% endif %}
+                
+                {% if recent_usage %}
+                    <div class="recent-usage">
+                        <h3>Your Recent Usage</h3>
+                        {% for usage in recent_usage %}
+                            <div class="usage-item">
+                                <strong>${{ usage.amount }}</strong> - {{ usage.description }}
+                                <small>({{ usage.created_at|date:"M d, Y H:i" }})</small>
+                            </div>
+                        {% endfor %}
+                    </div>
+                {% endif %}
+            {% else %}
+                <p><a href="{% url 'login' %}">Login</a> to use this agent.</p>
+            {% endif %}
+        </div>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/templates/core/homepage.html b/templates/core/homepage.html
new file mode 100644
index 0000000..a234a90
--- /dev/null
+++ b/templates/core/homepage.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>NetCop Hub - AI Agent Marketplace</title>
+    <style>
+        body { font-family: Arial, sans-serif; margin: 0; padding: 20px; background-color: #f5f5f5; }
+        .container { max-width: 1200px; margin: 0 auto; }
+        .header { background: white; padding: 20px; border-radius: 8px; margin-bottom: 20px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
+        .user-info { float: right; }
+        .balance { background: #e8f5e8; padding: 5px 15px; border-radius: 20px; color: #2d5a2d; }
+        .agents-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
+        .agent-card { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
+        .agent-header { display: flex; align-items: center; margin-bottom: 15px; }
+        .agent-icon { font-size: 2em; margin-right: 15px; }
+        .agent-name { font-size: 1.3em; font-weight: bold; margin: 0; }
+        .agent-price { color: #007bff; font-weight: bold; }
+        .agent-rating { color: #ffa500; }
+        .category-section { margin-bottom: 30px; }
+        .category-title { font-size: 1.5em; margin-bottom: 15px; padding: 10px; background: #007bff; color: white; border-radius: 5px; }
+        .btn { padding: 10px 20px; background: #007bff; color: white; text-decoration: none; border-radius: 5px; display: inline-block; margin-top: 10px; }
+        .btn:hover { background: #0056b3; }
+        .auth-links { margin-top: 10px; }
+        .auth-links a { margin-right: 15px; text-decoration: none; color: #007bff; }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="header">
+            <h1>NetCop Hub - AI Agent Marketplace</h1>
+            <div class="user-info">
+                {% if user.is_authenticated %}
+                    <p>Welcome, {{ user.username }}!</p>
+                    <div class="balance">Balance: ${{ user_balance }}</div>
+                    <div class="auth-links">
+                        <a href="{% url 'profile' %}">Profile</a>
+                        <a href="{% url 'wallet' %}">Wallet</a>
+                        <a href="{% url 'logout' %}">Logout</a>
+                    </div>
+                {% else %}
+                    <div class="auth-links">
+                        <a href="{% url 'login' %}">Login</a>
+                        <a href="{% url 'register' %}">Register</a>
+                    </div>
+                {% endif %}
+            </div>
+            <div style="clear: both;"></div>
+        </div>
+
+        {% if categories %}
+            {% for category_name, category_agents in categories.items %}
+                <div class="category-section">
+                    <div class="category-title">{{ category_name }}</div>
+                    <div class="agents-grid">
+                        {% for agent in category_agents %}
+                            <div class="agent-card">
+                                <div class="agent-header">
+                                    <div class="agent-icon">{{ agent.icon }}</div>
+                                    <div>
+                                        <div class="agent-name">{{ agent.name }}</div>
+                                        <div class="agent-price">${{ agent.price }}</div>
+                                        <div class="agent-rating">
+                                            ★ {{ agent.rating }} ({{ agent.review_count }} reviews)
+                                        </div>
+                                    </div>
+                                </div>
+                                <p>{{ agent.description }}</p>
+                                <a href="{% url 'agent_detail' agent.slug %}" class="btn">Use Agent</a>
+                            </div>
+                        {% endfor %}
+                    </div>
+                </div>
+            {% endfor %}
+        {% else %}
+            <div class="agents-grid">
+                <div class="agent-card">
+                    <h3>No agents available</h3>
+                    <p>Please check back later or contact the administrator.</p>
+                </div>
+            </div>
+        {% endif %}
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/templates/core/wallet.html b/templates/core/wallet.html
new file mode 100644
index 0000000..996126d
--- /dev/null
+++ b/templates/core/wallet.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Wallet - NetCop Hub</title>
+    <style>
+        body { font-family: Arial, sans-serif; margin: 0; padding: 20px; background-color: #f5f5f5; }
+        .container { max-width: 800px; margin: 0 auto; }
+        .wallet-header { background: white; padding: 20px; border-radius: 8px; margin-bottom: 20px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
+        .balance { font-size: 2em; color: #007bff; font-weight: bold; }
+        .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 20px; }
+        .stat-card { background: white; padding: 20px; border-radius: 8px; text-align: center; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
+        .stat-value { font-size: 1.5em; font-weight: bold; color: #007bff; }
+        .transactions { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
+        .transaction-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid #eee; }
+        .transaction-item:last-child { border-bottom: none; }
+        .transaction-amount { font-weight: bold; }
+        .transaction-amount.positive { color: #28a745; }
+        .transaction-amount.negative { color: #dc3545; }
+        .btn { padding: 10px 20px; background: #007bff; color: white; text-decoration: none; border-radius: 5px; display: inline-block; margin-bottom: 20px; }
+        .btn:hover { background: #0056b3; }
+        .back-link { display: inline-block; margin-bottom: 20px; color: #007bff; text-decoration: none; }
+        .back-link:hover { text-decoration: underline; }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <a href="{% url 'homepage' %}" class="back-link">← Back to Homepage</a>
+        
+        <div class="wallet-header">
+            <h1>Your Wallet</h1>
+            <div class="balance">${{ current_balance }}</div>
+            <a href="{% url 'wallet_topup' %}" class="btn">Top Up Wallet</a>
+        </div>
+        
+        <div class="stats">
+            <div class="stat-card">
+                <div class="stat-value">${{ total_spent }}</div>
+                <div>Total Spent</div>
+            </div>
+            <div class="stat-card">
+                <div class="stat-value">${{ total_topped_up }}</div>
+                <div>Total Topped Up</div>
+            </div>
+        </div>
+        
+        <div class="transactions">
+            <h2>Recent Transactions</h2>
+            {% if transactions %}
+                {% for transaction in transactions %}
+                    <div class="transaction-item">
+                        <div>
+                            <strong>{{ transaction.description }}</strong>
+                            <small>{{ transaction.created_at|date:"M d, Y H:i" }}</small>
+                        </div>
+                        <div class="transaction-amount {% if transaction.type == 'top_up' %}positive{% else %}negative{% endif %}">
+                            {% if transaction.type == 'top_up' %}+{% else %}-{% endif %}${{ transaction.amount }}
+                        </div>
+                    </div>
+                {% endfor %}
+            {% else %}
+                <p>No transactions yet.</p>
+            {% endif %}
+        </div>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/templates/core/wallet_topup.html b/templates/core/wallet_topup.html
new file mode 100644
index 0000000..16518de
--- /dev/null
+++ b/templates/core/wallet_topup.html
@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Top Up Wallet - NetCop Hub</title>
+    <style>
+        body { font-family: Arial, sans-serif; margin: 0; padding: 20px; background-color: #f5f5f5; }
+        .container { max-width: 600px; margin: 0 auto; }
+        .topup-form { background: white; padding: 30px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
+        .amount-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 15px; margin: 20px 0; }
+        .amount-option { padding: 20px; border: 2px solid #ddd; border-radius: 8px; text-align: center; cursor: pointer; transition: all 0.3s; }
+        .amount-option:hover { border-color: #007bff; background: #f8f9fa; }
+        .amount-option.selected { border-color: #007bff; background: #e7f3ff; }
+        .amount-value { font-size: 1.5em; font-weight: bold; color: #007bff; }
+        .btn { width: 100%; padding: 15px; background: #007bff; color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 1.1em; margin-top: 20px; }
+        .btn:hover { background: #0056b3; }
+        .btn:disabled { background: #ccc; cursor: not-allowed; }
+        .back-link { display: inline-block; margin-bottom: 20px; color: #007bff; text-decoration: none; }
+        .back-link:hover { text-decoration: underline; }
+        .messages { margin-bottom: 20px; }
+        .message { padding: 10px; border-radius: 4px; margin-bottom: 10px; }
+        .message.error { background: #ffe6e6; color: #cc0000; }
+        .message.success { background: #e6ffe6; color: #006600; }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <a href="{% url 'wallet' %}" class="back-link">← Back to Wallet</a>
+        
+        <div class="topup-form">
+            <h1>Top Up Your Wallet</h1>
+            
+            {% if messages %}
+                <div class="messages">
+                    {% for message in messages %}
+                        <div class="message {{ message.tags }}">{{ message }}</div>
+                    {% endfor %}
+                </div>
+            {% endif %}
+            
+            <form method="post" id="topup-form">
+                {% csrf_token %}
+                <p>Select an amount to add to your wallet:</p>
+                
+                <div class="amount-options">
+                    <div class="amount-option" data-amount="10">
+                        <div class="amount-value">$10</div>
+                        <div>Basic</div>
+                    </div>
+                    <div class="amount-option" data-amount="50">
+                        <div class="amount-value">$50</div>
+                        <div>Popular</div>
+                    </div>
+                    <div class="amount-option" data-amount="100">
+                        <div class="amount-value">$100</div>
+                        <div>Best Value</div>
+                    </div>
+                    <div class="amount-option" data-amount="500">
+                        <div class="amount-value">$500</div>
+                        <div>Premium</div>
+                    </div>
+                </div>
+                
+                <input type="hidden" name="amount" id="selected-amount" value="">
+                <button type="submit" class="btn" id="topup-btn" disabled>Select an amount</button>
+            </form>
+        </div>
+    </div>
+    
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const amountOptions = document.querySelectorAll('.amount-option');
+            const selectedAmountInput = document.getElementById('selected-amount');
+            const topupBtn = document.getElementById('topup-btn');
+            
+            amountOptions.forEach(option => {
+                option.addEventListener('click', function() {
+                    // Remove selected class from all options
+                    amountOptions.forEach(opt => opt.classList.remove('selected'));
+                    
+                    // Add selected class to clicked option
+                    this.classList.add('selected');
+                    
+                    // Set the selected amount
+                    const amount = this.getAttribute('data-amount');
+                    selectedAmountInput.value = amount;
+                    
+                    // Enable submit button
+                    topupBtn.disabled = false;
+                    topupBtn.textContent = `Top Up $${amount}`;
+                });
+            });
+        });
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/templates/debug.html b/templates/debug.html
deleted file mode 100644
index 8975379..0000000
--- a/templates/debug.html
+++ /dev/null
@@ -1,36 +0,0 @@
-{% extends 'base.html' %}
-
-{% block title %}Debug - Environment Status{% endblock %}
-
-{% block content %}
-<div style="padding: 20px; font-family: monospace; max-width: 800px; margin: 0 auto;">
-    {% if not debug_mode %}
-        <h1>🚫 Debug page disabled in production</h1>
-        <p>This debug page is only available in development mode.</p>
-    {% else %}
-        <h1>🔧 Environment Debug Page</h1>
-        
-        <div style="background: #f5f5f5; padding: 15px; border-radius: 8px; margin-bottom: 20px;">
-            <h2>Environment Variables Status:</h2>
-            <pre>{{ env_status|safe }}</pre>
-        </div>
-        
-        <div style="background: #e8f4f8; padding: 15px; border-radius: 8px;">
-            <h3>💡 Troubleshooting Tips:</h3>
-            <ul>
-                <li>Make sure .env file exists in your project root</li>
-                <li>Restart your Django server after changing environment variables</li>
-                <li>In production, set environment variables in your hosting platform dashboard</li>
-                <li>Check that sensitive variables are properly configured</li>
-            </ul>
-        </div>
-        
-        <div style="background: #fff3cd; padding: 15px; border-radius: 8px; margin-top: 20px;">
-            <h3>🔍 Database Status:</h3>
-            <p>Database Connection: <strong style="color: {{ db_status.color }};">{{ db_status.status }}</strong></p>
-            <p>User Count: <strong>{{ user_count }}</strong></p>
-            <p>Agent Count: <strong>{{ agent_count }}</strong></p>
-        </div>
-    {% endif %}
-</div>
-{% endblock %}
diff --git a/templates/homepage.html b/templates/homepage.html
deleted file mode 100644
index ae8befa..0000000
--- a/templates/homepage.html
+++ /dev/null
@@ -1,1039 +0,0 @@
-{% load static %}
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>NetCop AI Hub - AI & Cybersecurity Solutions</title>
-    <link rel="icon" type="image/png" href="{% static 'favicon.png' %}">
-    <script src="https://cdn.tailwindcss.com"></script>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
-    <style>
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-
-        :root {
-            --primary-gradient: linear-gradient(135deg, #40E0D0 0%, #1E40AF 100%);
-            --secondary-gradient: linear-gradient(135deg, #4FC3F7 0%, #29B6F6 100%);
-            --dark-blue: #1E40AF;
-            --light-blue: #40E0D0;
-            --text-dark: #1f2937;
-            --text-light: #6b7280;
-            --text-white: #ffffff;
-            --bg-light: #f8fafc;
-            --white: #ffffff;
-            --shadow-light: 0 4px 6px rgba(0, 0, 0, 0.07);
-            --shadow-medium: 0 10px 25px rgba(0, 0, 0, 0.15);
-        }
-
-        html {
-            scroll-behavior: smooth;
-        }
-
-        body {
-            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
-            line-height: 1.6;
-            color: var(--text-dark);
-            overflow-x: hidden;
-        }
-
-        /* Page-level fade-in animation */
-        .page-container {
-            opacity: 1;
-            transition: opacity 0.5s ease-in-out;
-        }
-
-        /* Header & Navigation */
-        .header {
-            position: fixed;
-            top: 0;
-            width: 100%;
-            background: rgba(255, 255, 255, 0.95);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-            z-index: 1000;
-            transition: all 0.3s ease;
-        }
-
-        .header.scrolled {
-            background: rgba(255, 255, 255, 0.98);
-            box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
-        }
-
-        .nav-container {
-            max-width: 1200px;
-            margin: 0 auto;
-            padding: 1rem 2rem;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-
-        .logo {
-            display: flex;
-            align-items: center;
-            text-decoration: none;
-            color: var(--dark-blue);
-        }
-
-        .logo-text {
-            font-size: 1.8rem;
-            font-weight: 700;
-            margin-left: 0.5rem;
-        }
-
-        .nav-menu {
-            display: flex;
-            list-style: none;
-            gap: 2rem;
-        }
-
-        .nav-menu a {
-            text-decoration: none;
-            color: var(--text-dark);
-            font-weight: 500;
-            transition: color 0.3s ease;
-        }
-
-        .nav-menu a:hover {
-            color: var(--dark-blue);
-        }
-
-        .nav-toggle {
-            display: none;
-            flex-direction: column;
-            cursor: pointer;
-        }
-
-        .nav-toggle span {
-            width: 25px;
-            height: 3px;
-            background: var(--text-dark);
-            margin: 3px 0;
-            transition: 0.3s;
-        }
-
-        /* Animations */
-        @keyframes float {
-            0% { transform: translate(0px, 0px) scale(1); }
-            33% { transform: translate(30px, -50px) scale(1.1); }
-            66% { transform: translate(-20px, 20px) scale(0.9); }
-            100% { transform: translate(0px, 0px) scale(1); }
-        }
-
-        @keyframes gradientShift {
-            0% { background-position: 0% 50%; }
-            50% { background-position: 100% 50%; }
-            100% { background-position: 0% 50%; }
-        }
-
-        .animate-float {
-            animation: float 8s ease-in-out infinite;
-        }
-
-        .gradient-text {
-            background: linear-gradient(135deg, #8b5cf6 0%, #3b82f6 40%, #6366f1 80%, #8b5cf6 100%);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            background-size: 300% 300%;
-            animation: gradientShift 6s ease-in-out infinite;
-        }
-
-        /* Service card hover effects */
-        .service-card {
-            transition: transform 0.3s ease, box-shadow 0.3s ease;
-        }
-
-        .service-card:hover {
-            transform: translateY(-10px) scale(1.02);
-            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
-        }
-
-        /* Button hover effects */
-        .btn-hover {
-            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-        }
-
-        .btn-hover:hover {
-            transform: translateY(-3px) scale(1.02);
-        }
-
-        /* Form styles */
-        input:focus, textarea:focus {
-            border-color: #40E0D0 !important;
-            outline: none !important;
-            box-shadow: 0 0 0 3px rgba(64, 224, 208, 0.1) !important;
-        }
-
-        /* Responsive Design */
-        @media (max-width: 768px) {
-            .nav-menu {
-                position: fixed;
-                left: -100%;
-                top: 70px;
-                flex-direction: column;
-                background-color: var(--white);
-                width: 100%;
-                text-align: center;
-                transition: 0.3s;
-                box-shadow: var(--shadow-light);
-                padding: 2rem 0;
-            }
-
-            .nav-menu.active {
-                left: 0;
-            }
-
-            .nav-toggle {
-                display: flex;
-            }
-
-            .float-element {
-                display: none !important;
-            }
-        }
-    </style>
-</head>
-<body>
-    <div class="page-container">
-        <!-- Navigation -->
-        <header class="header">
-            <nav class="nav-container">
-                <a href="{% url 'homepage' %}" class="logo">
-                    <span class="logo-text">NetCop AI Hub</span>
-                </a>
-                <ul class="nav-menu">
-                    <li><a href="{% url 'marketplace' %}">AI Marketplace</a></li>
-                    <li><a href="{% url 'pricing' %}">Pricing</a></li>
-                    {% if user.is_authenticated %}
-                        <li><a href="{% url 'profile' %}">Profile</a></li>
-                        <li><a href="{% url 'logout' %}">Logout</a></li>
-                    {% else %}
-                        <li><a href="{% url 'login' %}">Login</a></li>
-                        <li><a href="{% url 'register' %}">Register</a></li>
-                    {% endif %}
-                </ul>
-                <div class="nav-toggle">
-                    <span></span>
-                    <span></span>
-                    <span></span>
-                </div>
-            </nav>
-        </header>
-
-        <!-- Enhanced Hero Section with Light Background -->
-        <section style="
-            position: relative; 
-            padding: clamp(40px, 10vw, 80px) clamp(16px, 4vw, 24px) clamp(60px, 15vw, 100px); 
-            background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 30%, #f1f5f9 70%, #f8fafc 100%);
-            overflow: hidden;
-            min-height: clamp(70vh, 85vh, 85vh);
-            display: flex;
-            align-items: center;
-            margin-top: 70px;
-        ">
-            <!-- Subtle Background Elements -->
-            <div style="
-                position: absolute;
-                top: 0;
-                left: 0;
-                right: 0;
-                bottom: 0;
-                background: radial-gradient(circle at 20% 20%, rgba(139, 92, 246, 0.05) 0%, transparent 50%), 
-                           radial-gradient(circle at 80% 80%, rgba(59, 130, 246, 0.05) 0%, transparent 50%), 
-                           radial-gradient(circle at 40% 60%, rgba(236, 72, 153, 0.03) 0%, transparent 50%);
-                pointer-events: none;
-            "></div>
-
-            <div style="max-width: 1280px; margin: 0 auto; text-align: center; position: relative; z-index: 1; width: 100%; padding: 0 clamp(8px, 2vw, 16px);">
-                <!-- Floating Elements with Better Positioning -->
-                <div class="float-element" style="
-                    position: absolute;
-                    top: clamp(30px, 8vw, 60px);
-                    left: clamp(5%, 10%, 15%);
-                    width: clamp(60px, 15vw, 100px);
-                    height: clamp(60px, 15vw, 100px);
-                    background: linear-gradient(135deg, rgba(147, 51, 234, 0.15) 0%, rgba(147, 51, 234, 0.05) 100%);
-                    border-radius: 50%;
-                    animation: float 8s ease-in-out infinite;
-                    filter: blur(1px);
-                "></div>
-                <div class="float-element" style="
-                    position: absolute;
-                    top: clamp(60px, 12vw, 120px);
-                    right: clamp(5%, 15%, 20%);
-                    width: clamp(50px, 12vw, 80px);
-                    height: clamp(50px, 12vw, 80px);
-                    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(59, 130, 246, 0.05) 100%);
-                    border-radius: 50%;
-                    animation: float 6s ease-in-out infinite;
-                    animation-delay: 2s;
-                    filter: blur(1px);
-                "></div>
-                <div class="float-element" style="
-                    position: absolute;
-                    bottom: clamp(60px, 12vw, 120px);
-                    left: clamp(20%, 30%, 40%);
-                    width: clamp(40px, 10vw, 60px);
-                    height: clamp(40px, 10vw, 60px);
-                    background: linear-gradient(135deg, rgba(236, 72, 153, 0.15) 0%, rgba(236, 72, 153, 0.05) 100%);
-                    border-radius: 50%;
-                    animation: float 7s ease-in-out infinite;
-                    animation-delay: 4s;
-                    filter: blur(1px);
-                "></div>
-
-                <!-- Trust Badge -->
-                <div style="
-                    display: inline-flex;
-                    align-items: center;
-                    gap: 8px;
-                    background: rgba(59, 130, 246, 0.08);
-                    padding: 8px 20px;
-                    border-radius: 50px;
-                    margin-bottom: 40px;
-                    font-size: 14px;
-                    font-weight: 600;
-                    color: #3b82f6;
-                    border: 1px solid rgba(59, 130, 246, 0.15);
-                    backdrop-filter: blur(10px);
-                ">
-                    <span style="font-size: 12px;">✨</span>
-                    <span>Trusted by Industry Leaders</span>
-                </div>
-
-                <h1 style="
-                    font-size: clamp(36px, 8vw, 110px);
-                    font-weight: 800;
-                    margin-bottom: clamp(24px, 6vw, 40px);
-                    line-height: 1.1;
-                    letter-spacing: -0.02em;
-                ">
-                    <span class="gradient-text">AI & Cybersecurity</span>
-                    <br>
-                    <span style="color: #1e293b; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);">Solutions</span>
-                </h1>
-
-                <p style="
-                    font-size: clamp(1.1rem, 3vw, 1.4rem);
-                    color: #475569;
-                    margin-bottom: clamp(32px, 8vw, 56px);
-                    max-width: 720px;
-                    margin: 0 auto clamp(32px, 8vw, 56px) auto;
-                    line-height: 1.7;
-                    font-weight: 400;
-                    padding: 0 clamp(8px, 2vw, 16px);
-                ">
-                    Secure your digital future with state-of-the-art AI solutions and expert cybersecurity strategies tailored for your business needs.
-                </p>
-
-                <!-- Enhanced CTA Buttons -->
-                <div style="
-                    display: flex;
-                    justify-content: center;
-                    gap: clamp(12px, 3vw, 20px);
-                    flex-wrap: wrap;
-                    margin-bottom: clamp(40px, 10vw, 80px);
-                    padding: 0 clamp(8px, 2vw, 16px);
-                ">
-                    <a href="#contact" class="btn-hover" style="
-                        background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
-                        color: white;
-                        padding: clamp(14px, 4vw, 18px) clamp(24px, 6vw, 36px);
-                        border-radius: 14px;
-                        font-weight: 700;
-                        font-size: clamp(14px, 3.5vw, 18px);
-                        text-decoration: none;
-                        box-shadow: 0 8px 24px rgba(59, 130, 246, 0.25), 0 4px 12px rgba(0, 0, 0, 0.05);
-                        letter-spacing: 0.01em;
-                        min-height: 48px;
-                        min-width: clamp(140px, 40vw, 180px);
-                        text-align: center;
-                        display: inline-flex;
-                        align-items: center;
-                        justify-content: center;
-                    ">
-                        Get Protected Now
-                    </a>
-                    <a href="{% url 'marketplace' %}" class="btn-hover" style="
-                        background: white;
-                        color: #3b82f6;
-                        padding: clamp(14px, 4vw, 18px) clamp(24px, 6vw, 36px);
-                        border-radius: 14px;
-                        font-weight: 600;
-                        font-size: clamp(14px, 3.5vw, 18px);
-                        border: 2px solid #e2e8f0;
-                        text-decoration: none;
-                        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(59, 130, 246, 0.08);
-                        display: inline-flex;
-                        align-items: center;
-                        justify-content: center;
-                        letter-spacing: 0.01em;
-                        min-height: 48px;
-                        min-width: clamp(140px, 40vw, 180px);
-                        text-align: center;
-                    ">
-                        Explore AI Hub
-                    </a>
-                </div>
-
-                <!-- Enhanced Trust Indicators -->
-                <div style="
-                    display: grid;
-                    grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
-                    gap: clamp(16px, 4vw, 48px);
-                    max-width: 600px;
-                    margin: 0 auto;
-                    padding: 0 clamp(8px, 2vw, 16px);
-                ">
-                    <div style="
-                        text-align: center;
-                        padding: clamp(16px, 4vw, 24px) clamp(12px, 3vw, 16px);
-                        background: rgba(255, 255, 255, 0.5);
-                        border-radius: 16px;
-                        border: 1px solid rgba(255, 255, 255, 0.8);
-                        backdrop-filter: blur(10px);
-                        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
-                    ">
-                        <div style="
-                            font-size: clamp(1.8rem, 5vw, 2.5rem);
-                            font-weight: 800;
-                            margin-bottom: 8px;
-                            background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
-                            -webkit-background-clip: text;
-                            -webkit-text-fill-color: transparent;
-                        ">{{ total_agents }}+</div>
-                        <div style="
-                            font-size: clamp(12px, 3vw, 15px);
-                            color: #64748b;
-                            font-weight: 500;
-                            letter-spacing: 0.01em;
-                        ">Active AI Agents</div>
-                    </div>
-                    <div style="
-                        text-align: center;
-                        padding: clamp(16px, 4vw, 24px) clamp(12px, 3vw, 16px);
-                        background: rgba(255, 255, 255, 0.5);
-                        border-radius: 16px;
-                        border: 1px solid rgba(255, 255, 255, 0.8);
-                        backdrop-filter: blur(10px);
-                        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
-                    ">
-                        <div style="
-                            font-size: clamp(1.8rem, 5vw, 2.5rem);
-                            font-weight: 800;
-                            margin-bottom: 8px;
-                            background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
-                            -webkit-background-clip: text;
-                            -webkit-text-fill-color: transparent;
-                        ">24/7</div>
-                        <div style="
-                            font-size: clamp(12px, 3vw, 15px);
-                            color: #64748b;
-                            font-weight: 500;
-                            letter-spacing: 0.01em;
-                        ">Rapid Response</div>
-                    </div>
-                    <div style="
-                        text-align: center;
-                        padding: clamp(16px, 4vw, 24px) clamp(12px, 3vw, 16px);
-                        background: rgba(255, 255, 255, 0.5);
-                        border-radius: 16px;
-                        border: 1px solid rgba(255, 255, 255, 0.8);
-                        backdrop-filter: blur(10px);
-                        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
-                    ">
-                        <div style="
-                            font-size: clamp(1.8rem, 5vw, 2.5rem);
-                            font-weight: 800;
-                            margin-bottom: 8px;
-                            background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
-                            -webkit-background-clip: text;
-                            -webkit-text-fill-color: transparent;
-                        ">{{ total_users }}+</div>
-                        <div style="
-                            font-size: clamp(12px, 3vw, 15px);
-                            color: #64748b;
-                            font-weight: 500;
-                            letter-spacing: 0.01em;
-                        ">Registered Users</div>
-                    </div>
-                </div>
-            </div>
-        </section>
-
-        <!-- Enhanced Company Profile Section -->
-        <section style="
-            padding: clamp(60px, 15vw, 120px) clamp(16px, 4vw, 24px);
-            background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #f1f5f9 100%);
-            position: relative;
-            overflow: hidden;
-        ">
-            <!-- Background decorative elements -->
-            <div style="
-                position: absolute;
-                top: 10%;
-                right: 5%;
-                width: 200px;
-                height: 200px;
-                background: rgba(30, 64, 175, 0.03);
-                border-radius: 50%;
-                filter: blur(40px);
-            "></div>
-            <div style="
-                position: absolute;
-                bottom: 10%;
-                left: 5%;
-                width: 150px;
-                height: 150px;
-                background: rgba(64, 224, 208, 0.05);
-                border-radius: 50%;
-                filter: blur(30px);
-            "></div>
-
-            <div style="max-width: 1200px; margin: 0 auto; position: relative; z-index: 1;">
-                <!-- Section Header -->
-                <div style="text-align: center; margin-bottom: clamp(40px, 10vw, 80px);">
-                    <div style="
-                        display: inline-flex;
-                        align-items: center;
-                        gap: 8px;
-                        background: rgba(30, 64, 175, 0.1);
-                        padding: 8px 20px;
-                        border-radius: 50px;
-                        margin-bottom: 24px;
-                        border: 1px solid rgba(30, 64, 175, 0.2);
-                    ">
-                        <span style="font-size: 16px;">🏢</span>
-                        <span style="font-size: 14px; font-weight: 600; color: #1E40AF;">About Netcop Consultancy</span>
-                    </div>
-                    <h2 style="
-                        font-size: clamp(2rem, 5vw, 3.5rem);
-                        font-weight: 800;
-                        color: #1E40AF;
-                        margin-bottom: 16px;
-                        text-align: center;
-                    ">Your Trusted Digital Guardian</h2>
-                    <p style="
-                        font-size: 1.2rem;
-                        color: #6b7280;
-                        max-width: 600px;
-                        margin: 0 auto;
-                        line-height: 1.6;
-                    ">Pioneering the future of cybersecurity with AI-powered solutions</p>
-                </div>
-
-                <div style="
-                    display: grid;
-                    grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
-                    gap: clamp(40px, 10vw, 80px);
-                    align-items: center;
-                ">
-                    <!-- Content Side -->
-                    <div>
-                        <div style="
-                            background: white;
-                            padding: clamp(24px, 6vw, 48px);
-                            border-radius: 24px;
-                            box-shadow: 0 20px 60px rgba(30, 64, 175, 0.08);
-                            border: 1px solid rgba(255, 255, 255, 0.8);
-                            position: relative;
-                        ">
-                            <!-- Decorative corner -->
-                            <div style="
-                                position: absolute;
-                                top: 0;
-                                right: 0;
-                                width: 80px;
-                                height: 80px;
-                                background: linear-gradient(135deg, #40E0D0 0%, #1E40AF 100%);
-                                border-top-right-radius: 24px;
-                                border-bottom-left-radius: 24px;
-                                display: flex;
-                                align-items: center;
-                                justify-content: center;
-                                font-size: 24px;
-                            ">🛡️</div>
-
-                            <h3 style="
-                                font-size: clamp(1.3rem, 4vw, 1.8rem);
-                                font-weight: 700;
-                                color: #1E40AF;
-                                margin-bottom: clamp(16px, 4vw, 24px);
-                                margin-top: clamp(12px, 3vw, 20px);
-                            ">Defending Digital Frontiers</h3>
-
-                            <p style="
-                                color: #4b5563;
-                                font-size: clamp(14px, 3.5vw, 18px);
-                                line-height: 1.8;
-                                margin-bottom: clamp(20px, 5vw, 32px);
-                            ">
-                                At Netcop Consultancy, we provide <strong>state-of-the-art AI & Cybersecurity solutions</strong> tailored to safeguard your business. From advanced AI Agents to robust defense strategies, we empower you to navigate the digital world with confidence.
-                            </p>
-
-                            <!-- Enhanced badges -->
-                            <div style="
-                                display: grid;
-                                grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr));
-                                gap: clamp(12px, 3vw, 16px);
-                                margin-bottom: clamp(20px, 5vw, 32px);
-                            ">
-                                <div style="
-                                    background: linear-gradient(135deg, #40E0D0 0%, #1E40AF 100%);
-                                    color: white;
-                                    padding: clamp(12px, 3vw, 16px);
-                                    border-radius: 12px;
-                                    font-size: clamp(12px, 3vw, 14px);
-                                    font-weight: 600;
-                                    text-align: center;
-                                    box-shadow: 0 4px 16px rgba(64, 224, 208, 0.3);
-                                ">
-                                    <div style="font-size: clamp(18px, 4vw, 24px); margin-bottom: 8px;">📅</div>
-                                    {{ total_agents }}+ AI Agents Available
-                                </div>
-                                <div style="
-                                    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-                                    color: white;
-                                    padding: clamp(12px, 3vw, 16px);
-                                    border-radius: 12px;
-                                    font-size: clamp(12px, 3vw, 14px);
-                                    font-weight: 600;
-                                    text-align: center;
-                                    box-shadow: 0 4px 16px rgba(102, 126, 234, 0.3);
-                                ">
-                                    <div style="font-size: clamp(18px, 4vw, 24px); margin-bottom: 8px;">🏆</div>
-                                    Top Certifications
-                                </div>
-                            </div>
-
-                            <div style="
-                                background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
-                                color: white;
-                                padding: clamp(12px, 3vw, 16px);
-                                border-radius: 12px;
-                                font-size: clamp(12px, 3vw, 14px);
-                                font-weight: 600;
-                                text-align: center;
-                                box-shadow: 0 4px 16px rgba(245, 158, 11, 0.3);
-                            ">
-                                <div style="font-size: clamp(18px, 4vw, 24px); margin-bottom: 8px;">⚫</div>
-                                Lean Six Sigma Black Belt
-                            </div>
-                        </div>
-                    </div>
-
-                    <!-- Visual Side -->
-                    <div style="position: relative;">
-                        <!-- Main visual container -->
-                        <div style="
-                            width: 100%;
-                            max-width: 500px;
-                            height: clamp(250px, 50vw, 400px);
-                            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-                            border-radius: clamp(16px, 4vw, 32px);
-                            display: flex;
-                            align-items: center;
-                            justify-content: center;
-                            font-size: clamp(3rem, 8vw, 5rem);
-                            box-shadow: 0 32px 80px rgba(30, 64, 175, 0.2);
-                            position: relative;
-                            margin: 0 auto;
-                            overflow: hidden;
-                        ">
-                            <!-- Animated background pattern -->
-                            <div class="animate-float" style="
-                                position: absolute;
-                                top: 20%;
-                                left: 20%;
-                                width: 60px;
-                                height: 60px;
-                                background: rgba(255, 255, 255, 0.1);
-                                border-radius: 12px;
-                            "></div>
-                            <div class="animate-float" style="
-                                position: absolute;
-                                bottom: 20%;
-                                right: 20%;
-                                width: 40px;
-                                height: 40px;
-                                background: rgba(64, 224, 208, 0.3);
-                                border-radius: 50%;
-                                animation-delay: 2s;
-                            "></div>
-
-                            <!-- Main icon -->
-                            <div style="
-                                color: white;
-                                text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
-                                z-index: 1;
-                                position: relative;
-                            ">🛡️</div>
-                        </div>
-
-                        <!-- Floating elements around the main visual -->
-                        <div class="float-element animate-float" style="
-                            position: absolute;
-                            top: 10%;
-                            right: clamp(-20%, -10%, -5%);
-                            width: clamp(50px, 12vw, 80px);
-                            height: clamp(50px, 12vw, 80px);
-                            background: white;
-                            border-radius: clamp(8px, 2vw, 16px);
-                            box-shadow: 0 8px 32px rgba(30, 64, 175, 0.15);
-                            display: flex;
-                            align-items: center;
-                            justify-content: center;
-                            font-size: clamp(1.2rem, 3vw, 2rem);
-                        ">🔒</div>
-                        <div class="float-element animate-float" style="
-                            position: absolute;
-                            bottom: 15%;
-                            left: clamp(-10%, -5%, 0%);
-                            width: clamp(40px, 10vw, 60px);
-                            height: clamp(40px, 10vw, 60px);
-                            background: white;
-                            border-radius: 50%;
-                            box-shadow: 0 8px 32px rgba(64, 224, 208, 0.15);
-                            display: flex;
-                            align-items: center;
-                            justify-content: center;
-                            font-size: clamp(1rem, 2.5vw, 1.5rem);
-                            animation-delay: 1s;
-                        ">🤖</div>
-                    </div>
-                </div>
-
-                <!-- Bottom achievement strip -->
-                <div style="
-                    margin-top: clamp(40px, 10vw, 80px);
-                    background: white;
-                    border-radius: clamp(12px, 3vw, 20px);
-                    padding: clamp(20px, 5vw, 32px);
-                    box-shadow: 0 16px 48px rgba(30, 64, 175, 0.08);
-                    display: grid;
-                    grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr));
-                    gap: clamp(16px, 4vw, 32px);
-                    align-items: center;
-                ">
-                    <div style="text-align: center;">
-                        <div style="font-size: clamp(1.5rem, 4vw, 2rem); margin-bottom: 8px;">🎯</div>
-                        <div style="font-size: clamp(14px, 3.5vw, 18px); font-weight: 600; color: #1E40AF;">Mission Critical</div>
-                        <div style="font-size: clamp(12px, 3vw, 14px); color: #6b7280;">Zero Compromise</div>
-                    </div>
-                    <div style="text-align: center;">
-                        <div style="font-size: clamp(1.5rem, 4vw, 2rem); margin-bottom: 8px;">⚡</div>
-                        <div style="font-size: clamp(14px, 3.5vw, 18px); font-weight: 600; color: #1E40AF;">Rapid Response</div>
-                        <div style="font-size: clamp(12px, 3vw, 14px); color: #6b7280;">24/7 Protection</div>
-                    </div>
-                    <div style="text-align: center;">
-                        <div style="font-size: clamp(1.5rem, 4vw, 2rem); margin-bottom: 8px;">🔬</div>
-                        <div style="font-size: clamp(14px, 3.5vw, 18px); font-weight: 600; color: #1E40AF;">Innovation</div>
-                        <div style="font-size: clamp(12px, 3vw, 14px); color: #6b7280;">Cutting Edge Tech</div>
-                    </div>
-                    <div style="text-align: center;">
-                        <div style="font-size: clamp(1.5rem, 4vw, 2rem); margin-bottom: 8px;">🤝</div>
-                        <div style="font-size: clamp(14px, 3.5vw, 18px); font-weight: 600; color: #1E40AF;">Trusted Partner</div>
-                        <div style="font-size: clamp(12px, 3vw, 14px); color: #6b7280;">Industry Leaders</div>
-                    </div>
-                </div>
-            </div>
-        </section>
-
-        <!-- Services Section - Modern Cards -->
-        <section style="padding: clamp(40px, 10vw, 80px) clamp(16px, 4vw, 24px); background: linear-gradient(135deg, #f6f8ff 0%, #e8f0fe 100%);">
-            <div style="max-width: 1200px; margin: 0 auto;">
-                <h2 style="font-size: clamp(1.8rem, 5vw, 2.5rem); font-weight: 700; text-align: center; margin-bottom: 16px; color: #1E40AF;">
-                    Our Services
-                </h2>
-                <p style="text-align: center; color: #6b7280; font-size: clamp(16px, 4vw, 20px); margin-bottom: clamp(24px, 6vw, 48px);">
-                    Tailored strategies for your business
-                </p>
-                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: clamp(16px, 4vw, 32px);">
-                    <div class="service-card" style="background: white; border-radius: clamp(12px, 3vw, 20px); padding: clamp(20px, 5vw, 40px); box-shadow: 0 8px 32px rgba(30, 64, 175, 0.08); text-align: center;">
-                        <div style="font-size: clamp(2rem, 6vw, 3rem); margin-bottom: clamp(12px, 3vw, 20px);">🛡️</div>
-                        <h3 style="font-size: clamp(1.2rem, 4vw, 1.5rem); font-weight: 700; color: #1E40AF; margin-bottom: clamp(12px, 3vw, 16px);">Cybersecurity Consultation</h3>
-                        <p style="color: #6b7280; font-size: clamp(14px, 3.5vw, 18px); line-height: 1.6;">
-                            Tailored strategies, advanced threat detection, and comprehensive security frameworks to protect your digital assets and business operations.
-                        </p>
-                    </div>
-                    <div class="service-card" style="background: white; border-radius: clamp(12px, 3vw, 20px); padding: clamp(20px, 5vw, 40px); box-shadow: 0 8px 32px rgba(30, 64, 175, 0.08); text-align: center;">
-                        <div style="font-size: clamp(2rem, 6vw, 3rem); margin-bottom: clamp(12px, 3vw, 20px);">🤖</div>
-                        <h3 style="font-size: clamp(1.2rem, 4vw, 1.5rem); font-weight: 700; color: #1E40AF; margin-bottom: clamp(12px, 3vw, 16px);">AI Based Automation</h3>
-                        <p style="color: #6b7280; font-size: clamp(14px, 3.5vw, 18px); line-height: 1.6;">
-                            Empower your Business with AI. Strategic AI adoption, machine learning solutions, and intelligent automation to transform your processes.
-                        </p>
-                    </div>
-                    <div class="service-card" style="background: white; border-radius: clamp(12px, 3vw, 20px); padding: clamp(20px, 5vw, 40px); box-shadow: 0 8px 32px rgba(30, 64, 175, 0.08); text-align: center;">
-                        <div style="font-size: clamp(2rem, 6vw, 3rem); margin-bottom: clamp(12px, 3vw, 20px);">⚡</div>
-                        <h3 style="font-size: clamp(1.2rem, 4vw, 1.5rem); font-weight: 700; color: #1E40AF; margin-bottom: clamp(12px, 3vw, 16px);">Rapid Response Solutions</h3>
-                        <p style="color: #6b7280; font-size: clamp(14px, 3.5vw, 18px); line-height: 1.6;">
-                            Rapid response to minimize damage. Emergency incident response and real-time threat mitigation to protect your business.
-                        </p>
-                    </div>
-                </div>
-            </div>
-        </section>
-
-        <!-- Clients Section - Modern Cards -->
-        <section style="padding: clamp(40px, 10vw, 80px) clamp(16px, 4vw, 24px); background: linear-gradient(135deg, #e0f7fa 0%, #f0f9ff 100%);">
-            <div style="max-width: 1200px; margin: 0 auto;">
-                <h2 style="font-size: clamp(1.8rem, 5vw, 2.5rem); font-weight: 700; text-align: center; margin-bottom: clamp(24px, 6vw, 48px); color: #1E40AF;">
-                    Our Clients
-                </h2>
-                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: clamp(16px, 4vw, 32px);">
-                    <div style="background: white; border-radius: clamp(12px, 3vw, 16px); padding: clamp(20px, 5vw, 32px); box-shadow: 0 4px 16px rgba(30, 64, 175, 0.07); text-align: center;">
-                        <div style="font-size: clamp(1.5rem, 4vw, 2rem); margin-bottom: 8px;">🏭</div>
-                        <h3 style="font-size: clamp(14px, 3.5vw, 18px); font-weight: 600; color: #1E40AF; margin-bottom: 6px;">MTSV Foods Industries Pvt Ltd</h3>
-                        <p style="color: #6b7280; font-size: clamp(12px, 3vw, 16px);">Food & Beverage Industry</p>
-                    </div>
-                    <div style="background: white; border-radius: clamp(12px, 3vw, 16px); padding: clamp(20px, 5vw, 32px); box-shadow: 0 4px 16px rgba(30, 64, 175, 0.07); text-align: center;">
-                        <div style="font-size: clamp(1.5rem, 4vw, 2rem); margin-bottom: 8px;">🏗️</div>
-                        <h3 style="font-size: clamp(14px, 3.5vw, 18px); font-weight: 600; color: #1E40AF; margin-bottom: 6px;">Apple Tree Industries</h3>
-                        <p style="color: #6b7280; font-size: clamp(12px, 3vw, 16px);">Manufacturing & Processing</p>
-                    </div>
-                    <div style="background: white; border-radius: clamp(12px, 3vw, 16px); padding: clamp(20px, 5vw, 32px); box-shadow: 0 4px 16px rgba(30, 64, 175, 0.07); text-align: center;">
-                        <div style="font-size: clamp(1.5rem, 4vw, 2rem); margin-bottom: 8px;">💻</div>
-                        <h3 style="font-size: clamp(14px, 3.5vw, 18px); font-weight: 600; color: #1E40AF; margin-bottom: 6px;">TechStart Solutions</h3>
-                        <p style="color: #6b7280; font-size: clamp(12px, 3vw, 16px);">Technology Consulting</p>
-                    </div>
-                    <div style="background: white; border-radius: clamp(12px, 3vw, 16px); padding: clamp(20px, 5vw, 32px); box-shadow: 0 4px 16px rgba(30, 64, 175, 0.07); text-align: center;">
-                        <div style="font-size: clamp(1.5rem, 4vw, 2rem); margin-bottom: 8px;">🚚</div>
-                        <h3 style="font-size: clamp(14px, 3.5vw, 18px); font-weight: 600; color: #1E40AF; margin-bottom: 6px;">Global Logistics Corp</h3>
-                        <p style="color: #6b7280; font-size: clamp(12px, 3vw, 16px);">Supply Chain Management</p>
-                    </div>
-                </div>
-            </div>
-        </section>
-
-        <!-- Our Founder Section -->
-        <section style="padding: clamp(40px, 10vw, 80px) clamp(16px, 4vw, 24px); background: white;">
-            <div style="max-width: 1200px; margin: 0 auto;">
-                <h2 style="font-size: clamp(1.8rem, 5vw, 2.5rem); font-weight: 700; text-align: center; margin-bottom: clamp(24px, 6vw, 48px); color: #1E40AF;">
-                    Our Founder
-                </h2>
-                <div style="
-                    display: grid;
-                    grid-template-columns: repeat(auto-fit, minmax(min(350px, 100%), 1fr));
-                    gap: clamp(30px, 8vw, 60px);
-                    align-items: center;
-                ">
-                    <div style="order: 2;">
-                        <div style="
-                            width: 100%;
-                            max-width: 400px;
-                            margin: 0 auto;
-                            background: linear-gradient(135deg, #40E0D0 0%, #1E40AF 100%);
-                            border-radius: clamp(16px, 4vw, 24px);
-                            padding: clamp(24px, 6vw, 40px);
-                            text-align: center;
-                            color: white;
-                            box-shadow: 0 20px 40px rgba(30, 64, 175, 0.15);
-                        ">
-                            <div style="font-size: clamp(2.5rem, 8vw, 4rem); margin-bottom: clamp(12px, 3vw, 20px);">👨‍💼</div>
-                            <h3 style="font-size: clamp(1.3rem, 4vw, 1.8rem); font-weight: 700; margin-bottom: 8px;">Abhay Pal Chauhan</h3>
-                            <p style="font-size: clamp(14px, 3.5vw, 18px); opacity: 0.9; margin-bottom: 16px;">
-                                Founder & Principal Consultant
-                            </p>
-                            <div style="display: flex; gap: clamp(8px, 2vw, 12px); flex-wrap: wrap; justify-content: center;">
-                                <div style="background: rgba(255, 255, 255, 0.2); padding: clamp(6px, 2vw, 8px) clamp(12px, 3vw, 16px); border-radius: clamp(16px, 4vw, 20px); font-size: clamp(10px, 2.5vw, 12px); font-weight: 600;">
-                                    {{ total_agents }}+ AI Agents Available
-                                </div>
-                                <div style="background: rgba(255, 255, 255, 0.2); padding: clamp(6px, 2vw, 8px) clamp(12px, 3vw, 16px); border-radius: clamp(16px, 4vw, 20px); font-size: clamp(10px, 2.5vw, 12px); font-weight: 600;">
-                                    Cybersecurity Expert
-                                </div>
-                                <div style="background: rgba(255, 255, 255, 0.2); padding: clamp(6px, 2vw, 8px) clamp(12px, 3vw, 16px); border-radius: clamp(16px, 4vw, 20px); font-size: clamp(10px, 2.5vw, 12px); font-weight: 600;">
-                                    Six Sigma Black Belt
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div style="order: 1;">
-                        <p style="color: #6b7280; font-size: clamp(16px, 4vw, 19px); line-height: 1.8; margin-bottom: clamp(16px, 4vw, 24px);">
-                            Our Founder leverages over <strong style="color: #1E40AF;">18 years of expertise</strong> in cybersecurity and process automation and optimization, backed by top certifications in Cybersecurity and <strong style="color: #1E40AF;">Black Belt in Lean Six Sigma</strong>.
-                        </p>
-                        <p style="color: #6b7280; font-size: clamp(16px, 4vw, 19px); line-height: 1.8; margin-bottom: clamp(20px, 5vw, 32px);">
-                            His unique blend of technical knowledge and operational excellence ensures <strong style="color: #1E40AF;">tailored, secure, and efficient solutions</strong> for our clients, driving business resilience and maximizing value in every engagement.
-                        </p>
-                        <div style="background: linear-gradient(135deg, #f6f8ff 0%, #e8f0fe 100%); padding: clamp(16px, 4vw, 24px); border-radius: clamp(12px, 3vw, 16px); border-left: 4px solid #1E40AF;">
-                            <p style="color: #1E40AF; font-size: clamp(14px, 3.5vw, 18px); font-weight: 600; font-style: italic;">
-                                "Delivering top-tier solutions that combine cutting-edge technology with proven operational methodologies to secure and optimize your business operations."
-                            </p>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </section>
-
-        <!-- Contact Section - Modern Form -->
-        <section id="contact" style="padding: clamp(40px, 10vw, 80px) clamp(16px, 4vw, 24px); background: linear-gradient(135deg, #f0f9ff 0%, #e0f7fa 100%);">
-            <div style="max-width: 1200px; margin: 0 auto;">
-                <h2 style="font-size: clamp(1.8rem, 5vw, 2.5rem); font-weight: 700; text-align: center; margin-bottom: clamp(24px, 6vw, 48px); color: #1E40AF;">
-                    Get In Touch
-                </h2>
-                <div style="
-                    display: grid;
-                    grid-template-columns: repeat(auto-fit, minmax(min(350px, 100%), 1fr));
-                    gap: clamp(30px, 8vw, 60px);
-                    align-items: start;
-                ">
-                    <!-- Contact Form -->
-                    <form method="post" action="{% url 'homepage' %}" style="background: white; border-radius: clamp(16px, 4vw, 20px); padding: clamp(24px, 6vw, 40px); box-shadow: 0 8px 32px rgba(30, 64, 175, 0.08);">
-                        {% csrf_token %}
-                        <h3 style="font-size: clamp(1.2rem, 4vw, 1.5rem); font-weight: 700; color: #1E40AF; margin-bottom: clamp(16px, 4vw, 24px);">Send us a Message</h3>
-                        <div style="margin-bottom: 24px;">
-                            <label for="name" style="display: block; margin-bottom: 8px; color: #1E40AF; font-weight: 600;">Full Name</label>
-                            <input
-                                type="text"
-                                id="name"
-                                name="name"
-                                required
-                                style="width: 100%; padding: clamp(12px, 3vw, 14px); border-radius: clamp(8px, 2vw, 12px); border: 2px solid #e5e7eb; font-size: clamp(14px, 3.5vw, 16px); transition: border-color 0.2s ease;"
-                            />
-                        </div>
-                        <div style="margin-bottom: 24px;">
-                            <label for="email" style="display: block; margin-bottom: 8px; color: #1E40AF; font-weight: 600;">Email Address</label>
-                            <input
-                                type="email"
-                                id="email"
-                                name="email"
-                                required
-                                style="width: 100%; padding: clamp(12px, 3vw, 14px); border-radius: clamp(8px, 2vw, 12px); border: 2px solid #e5e7eb; font-size: clamp(14px, 3.5vw, 16px); transition: border-color 0.2s ease;"
-                            />
-                        </div>
-                        <div style="margin-bottom: 24px;">
-                            <label for="company" style="display: block; margin-bottom: 8px; color: #1E40AF; font-weight: 600;">Company</label>
-                            <input
-                                type="text"
-                                id="company"
-                                name="company"
-                                style="width: 100%; padding: clamp(12px, 3vw, 14px); border-radius: clamp(8px, 2vw, 12px); border: 2px solid #e5e7eb; font-size: clamp(14px, 3.5vw, 16px); transition: border-color 0.2s ease;"
-                            />
-                        </div>
-                        <div style="margin-bottom: 32px;">
-                            <label for="message" style="display: block; margin-bottom: 8px; color: #1E40AF; font-weight: 600;">Message</label>
-                            <textarea
-                                id="message"
-                                name="message"
-                                rows="5"
-                                required
-                                style="width: 100%; padding: clamp(12px, 3vw, 14px); border-radius: clamp(8px, 2vw, 12px); border: 2px solid #e5e7eb; font-size: clamp(14px, 3.5vw, 16px); resize: vertical; transition: border-color 0.2s ease;"
-                            ></textarea>
-                        </div>
-                        <button type="submit" class="btn-hover" style="width: 100%; background: linear-gradient(135deg, #40E0D0 0%, #1E40AF 100%); color: white; padding: clamp(14px, 4vw, 16px); border-radius: clamp(8px, 2vw, 12px); font-weight: 600; font-size: clamp(14px, 3.5vw, 18px); border: none; cursor: pointer; box-shadow: 0 4px 16px rgba(30, 64, 175, 0.20); min-height: 48px;">
-                            Send Message
-                        </button>
-                    </form>
-
-                    <!-- Contact Information -->
-                    <div style="background: white; border-radius: clamp(16px, 4vw, 20px); padding: clamp(24px, 6vw, 40px); box-shadow: 0 8px 32px rgba(30, 64, 175, 0.08);">
-                        <h3 style="font-size: clamp(1.2rem, 4vw, 1.5rem); font-weight: 700; color: #1E40AF; margin-bottom: clamp(16px, 4vw, 24px);">Contact Information</h3>
-
-                        <!-- Mailing Address -->
-                        <div style="margin-bottom: clamp(20px, 5vw, 32px); display: flex; align-items: flex-start; gap: clamp(12px, 3vw, 16px);">
-                            <div style="
-                                width: clamp(40px, 10vw, 50px);
-                                height: clamp(40px, 10vw, 50px);
-                                background: linear-gradient(135deg, #40E0D0 0%, #1E40AF 100%);
-                                border-radius: clamp(8px, 2vw, 12px);
-                                display: flex;
-                                align-items: center;
-                                justify-content: center;
-                                font-size: clamp(16px, 4vw, 20px);
-                                flex-shrink: 0;
-                            ">📍</div>
-                            <div>
-                                <h4 style="font-size: clamp(16px, 4vw, 19px); font-weight: 600; color: #1E40AF; margin-bottom: 8px;">Mailing Address</h4>
-                                <p style="color: #6b7280; line-height: 1.6; font-size: clamp(14px, 3.5vw, 16px);">
-                                    Meydan Grandstand, 6th floor<br>
-                                    Meydan Road, Nad Al Sheba<br>
-                                    Dubai, U.A.E.
-                                </p>
-                            </div>
-                        </div>
-
-                        <!-- Email Address -->
-                        <div style="margin-bottom: clamp(20px, 5vw, 32px); display: flex; align-items: flex-start; gap: clamp(12px, 3vw, 16px);">
-                            <div style="
-                                width: clamp(40px, 10vw, 50px);
-                                height: clamp(40px, 10vw, 50px);
-                                background: linear-gradient(135deg, #40E0D0 0%, #1E40AF 100%);
-                                border-radius: clamp(8px, 2vw, 12px);
-                                display: flex;
-                                align-items: center;
-                                justify-content: center;
-                                font-size: clamp(16px, 4vw, 20px);
-                                flex-shrink: 0;
-                            ">✉️</div>
-                            <div>
-                                <h4 style="font-size: clamp(16px, 4vw, 19px); font-weight: 600; color: #1E40AF; margin-bottom: 8px;">Email Address</h4>
-                                <p style="color: #6b7280; line-height: 1.6; font-size: clamp(14px, 3.5vw, 16px);">
-                                    <a href="mailto:abhay@netcopconsultancy.com" style="color: #6366f1; text-decoration: none;">
-                                        abhay@netcopconsultancy.com
-                                    </a>
-                                </p>
-                            </div>
-                        </div>
-
-                        <!-- Commitment Statement -->
-                        <div style="
-                            background: linear-gradient(135deg, #f6f8ff 0%, #e8f0fe 100%);
-                            padding: clamp(16px, 4vw, 24px);
-                            border-radius: clamp(12px, 3vw, 16px);
-                            border-left: 4px solid #1E40AF;
-                            margin-top: clamp(20px, 5vw, 32px);
-                        ">
-                            <p style="color: #1E40AF; font-size: clamp(14px, 3.5vw, 18px); font-weight: 600; text-align: center;">
-                                We are committed to deliver top-tier AI & Cybersecurity solutions for businesses of all sizes.
-                            </p>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </section>
-
-        <!-- Footer -->
-        <footer style="background: #1f2937; color: white; padding: 3rem 2rem 1rem; text-align: center;">
-            <div style="max-width: 1200px; margin: 0 auto; margin-bottom: 2rem;">
-                <h3 style="color: #40E0D0; margin-bottom: 1rem;">NetCop AI Hub</h3>
-                <p style="color: #9ca3af;">AI & Cybersecurity Solutions</p>
-            </div>
-            <div style="border-top: 1px solid #374151; padding-top: 1rem; color: #9ca3af;">
-                © 2025 NetCop AI Hub. All rights reserved.
-            </div>
-        </footer>
-    </div>
-
-    <script>
-        // Header scroll effect
-        window.addEventListener('scroll', () => {
-            const header = document.querySelector('.header');
-            if (header) {
-                header.classList.toggle('scrolled', window.scrollY > 100);
-            }
-        });
-
-        // Mobile menu toggle
-        document.querySelector('.nav-toggle').addEventListener('click', () => {
-            document.querySelector('.nav-menu').classList.toggle('active');
-        });
-
-        // Smooth scrolling for anchor links
-        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
-            anchor.addEventListener('click', function (e) {
-                e.preventDefault();
-                const target = document.querySelector(this.getAttribute('href'));
-                if (target) {
-                    target.scrollIntoView({
-                        behavior: 'smooth'
-                    });
-                }
-            });
-        });
-    </script>
-</body>
-</html>
\ No newline at end of file
diff --git a/templates/marketplace.html b/templates/marketplace.html
deleted file mode 100644
index f9712cb..0000000
--- a/templates/marketplace.html
+++ /dev/null
@@ -1,45 +0,0 @@
-{% extends 'base.html' %}
-
-{% block title %}AI Agent Marketplace - NetCop AI Hub{% endblock %}
-
-{% block content %}
-<div class="text-center mb-12">
-    <h1 class="text-4xl font-bold text-gray-900 mb-4">AI Agent Marketplace</h1>
-    <p class="text-xl text-gray-600">Choose from our collection of powerful AI agents</p>
-</div>
-
-<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-    {% for agent in agents %}
-    <div class="bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow duration-300">
-        <div class="p-6">
-            <div class="flex items-center justify-between mb-4">
-                <div class="w-12 h-12 bg-gradient-to-r {{ agent.get_gradient_class }} rounded-lg flex items-center justify-center text-white font-bold">
-                    {{ agent.icon }}
-                </div>
-                <div class="text-right">
-                    <div class="text-lg font-bold text-gray-900">{{ agent.price_display }}</div>
-                    <div class="text-sm text-gray-500">per use</div>
-                </div>
-            </div>
-            
-            <h3 class="text-xl font-semibold text-gray-900 mb-2">{{ agent.name }}</h3>
-            <p class="text-gray-600 mb-4">{{ agent.description }}</p>
-            
-            <div class="flex items-center justify-between mb-4">
-                <div class="flex items-center">
-                    <span class="text-yellow-400">★</span>
-                    <span class="ml-1 text-sm text-gray-600">{{ agent.rating }} ({{ agent.review_count }})</span>
-                </div>
-                <span class="bg-{{ agent.category == 'analytics' and 'blue' or 'green' }}-100 text-{{ agent.category == 'analytics' and 'blue' or 'green' }}-800 px-2 py-1 rounded-full text-xs">
-                    {{ agent.get_category_display }}
-                </span>
-            </div>
-            
-            <a href="{% url 'agent_detail' agent.slug %}" class="block w-full bg-blue-600 text-white text-center py-2 rounded-md hover:bg-blue-700 transition-colors">
-                Use Agent
-            </a>
-        </div>
-    </div>
-    {% endfor %}
-</div>
-{% endblock %}
diff --git a/templates/reset_password.html b/templates/reset_password.html
deleted file mode 100644
index 20e9366..0000000
--- a/templates/reset_password.html
+++ /dev/null
@@ -1,58 +0,0 @@
-{% extends 'base.html' %}
-
-{% block title %}Reset Password - NetCop AI Hub{% endblock %}
-
-{% block content %}
-<div style="min-height: 100vh; background: linear-gradient(135deg, #f6f8ff 0%, #e8f0fe 50%, #f0f7ff 100%); display: flex; align-items: center; justify-content: center; padding: 20px;">
-    
-    <div style="background: white; border-radius: 20px; padding: 40px; width: 100%; max-width: 400px; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);">
-        <div style="text-align: center; margin-bottom: 32px;">
-            <h1 style="font-size: 28px; font-weight: bold; color: #1f2937; margin-bottom: 8px;">
-                Reset Your Password
-            </h1>
-            <p style="color: #6b7280;">
-                Enter your new password below
-            </p>
-        </div>
-
-        {% if error %}
-            <div style="background: #fef2f2; border: 1px solid #fecaca; color: #dc2626; padding: 16px; border-radius: 12px; text-align: center; margin-bottom: 20px;">
-                <div style="font-size: 48px; margin-bottom: 16px;">❌</div>
-                <h3 style="font-weight: bold; margin-bottom: 8px;">Error</h3>
-                <p style="margin-bottom: 16px;">{{ error }}</p>
-                <a href="{% url 'homepage' %}" style="background: #dc2626; color: white; padding: 8px 16px; border-radius: 8px; text-decoration: none; font-size: 14px;">
-                    Go to Homepage
-                </a>
-            </div>
-        {% else %}
-            <form method="post" style="display: flex; flex-direction: column; gap: 20px;">
-                {% csrf_token %}
-                
-                <div>
-                    <label style="display: block; margin-bottom: 8px; font-weight: 500; color: #374151;">
-                        New Password
-                    </label>
-                    <input type="password" name="password" required style="width: 100%; padding: 12px 16px; border: 2px solid #e5e7eb; border-radius: 12px; font-size: 16px; transition: border-color 0.2s;" placeholder="Enter new password">
-                </div>
-
-                <div>
-                    <label style="display: block; margin-bottom: 8px; font-weight: 500; color: #374151;">
-                        Confirm Password
-                    </label>
-                    <input type="password" name="confirm_password" required style="width: 100%; padding: 12px 16px; border: 2px solid #e5e7eb; border-radius: 12px; font-size: 16px; transition: border-color 0.2s;" placeholder="Confirm new password">
-                </div>
-
-                <button type="submit" style="background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%); color: white; padding: 14px 24px; border-radius: 12px; font-size: 16px; font-weight: 600; border: none; cursor: pointer; transition: transform 0.2s;" onmouseover="this.style.transform='scale(1.02)'" onmouseout="this.style.transform='scale(1)'">
-                    Update Password
-                </button>
-            </form>
-        {% endif %}
-
-        <div style="text-align: center; margin-top: 24px; padding-top: 24px; border-top: 1px solid #e5e7eb;">
-            <a href="{% url 'homepage' %}" style="background: none; border: none; color: #3b82f6; font-weight: 500; cursor: pointer; text-decoration: underline;">
-                Back to Homepage
-            </a>
-        </div>
-    </div>
-</div>
-{% endblock %}
\ No newline at end of file
diff --git a/test_views.py b/test_views.py
new file mode 100644
index 0000000..f446dd6
--- /dev/null
+++ b/test_views.py
@@ -0,0 +1,34 @@
+#!/usr/bin/env python
+import os
+import sys
+import django
+
+# Add project root to path
+sys.path.insert(0, os.path.dirname(os.path.abspath(__file__)))
+
+# Setup Django
+os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'netcop_hub.settings')
+django.setup()
+
+from django.test import RequestFactory
+from django.contrib.auth import get_user_model
+from core.views import homepage_view
+
+# Create a test request
+factory = RequestFactory()
+request = factory.get('/')
+
+# Create a mock user
+from django.contrib.auth.models import AnonymousUser
+request.user = AnonymousUser()
+
+try:
+    # Test homepage view
+    response = homepage_view(request)
+    print(f"Homepage view status: {response.status_code}")
+    print("Homepage view working correctly!")
+    
+except Exception as e:
+    print(f"Error in homepage view: {e}")
+    import traceback
+    traceback.print_exc()
\ No newline at end of file
diff --git a/wallet/__init__.py b/wallet/__init__.py
new file mode 100644
index 0000000..e69de29
diff --git a/wallet/admin.py b/wallet/admin.py
new file mode 100644
index 0000000..c466519
--- /dev/null
+++ b/wallet/admin.py
@@ -0,0 +1,31 @@
+from django.contrib import admin
+from .models import WalletTransaction
+
+
+@admin.register(WalletTransaction)
+class WalletTransactionAdmin(admin.ModelAdmin):
+    list_display = ('user', 'type', 'amount', 'agent_slug', 'created_at', 'id')
+    list_filter = ('type', 'created_at', 'agent_slug')
+    search_fields = ('user__username', 'user__email', 'description', 'agent_slug')
+    readonly_fields = ('id', 'created_at')
+    ordering = ('-created_at',)
+    
+    fieldsets = (
+        ('Transaction Details', {
+            'fields': ('user', 'type', 'amount', 'description')
+        }),
+        ('Agent Information', {
+            'fields': ('agent_slug',)
+        }),
+        ('Payment Information', {
+            'fields': ('stripe_session_id',)
+        }),
+        ('Metadata', {
+            'fields': ('id', 'created_at')
+        }),
+    )
+    
+    def get_readonly_fields(self, request, obj=None):
+        if obj:  # editing an existing object
+            return self.readonly_fields + ('user', 'type', 'amount')
+        return self.readonly_fields
diff --git a/apps/wallet/apps.py b/wallet/apps.py
similarity index 100%
rename from apps/wallet/apps.py
rename to wallet/apps.py
diff --git a/apps/wallet/migrations/0001_initial.py b/wallet/migrations/0001_initial.py
similarity index 96%
rename from apps/wallet/migrations/0001_initial.py
rename to wallet/migrations/0001_initial.py
index 835183b..0a28d70 100644
--- a/apps/wallet/migrations/0001_initial.py
+++ b/wallet/migrations/0001_initial.py
@@ -1,4 +1,4 @@
-# Generated by Django 5.2.4 on 2025-07-08 08:17
+# Generated by Django 5.2.4 on 2025-07-08 15:00
 
 import django.db.models.deletion
 import uuid
diff --git a/wallet/migrations/__init__.py b/wallet/migrations/__init__.py
new file mode 100644
index 0000000..e69de29
diff --git a/apps/wallet/models.py b/wallet/models.py
similarity index 100%
rename from apps/wallet/models.py
rename to wallet/models.py
index 7938f03..acaf2da 100644
--- a/apps/wallet/models.py
+++ b/wallet/models.py
@@ -4,6 +4,7 @@ import uuid
 
 User = get_user_model()
 
+
 class WalletTransaction(models.Model):
     TRANSACTION_TYPES = [
         ('top_up', 'Top Up'),
@@ -25,4 +26,3 @@ class WalletTransaction(models.Model):
     
     def __str__(self):
         return f"{self.user.email} - {self.amount} AED ({self.type})"
-
diff --git a/wallet/stripe_handler.py b/wallet/stripe_handler.py
new file mode 100644
index 0000000..7d41904
--- /dev/null
+++ b/wallet/stripe_handler.py
@@ -0,0 +1,106 @@
+import stripe
+from django.conf import settings
+from django.contrib.auth import get_user_model
+from django.http import JsonResponse
+from decimal import Decimal
+import json
+
+User = get_user_model()
+stripe.api_key = settings.STRIPE_SECRET_KEY
+
+
+class StripePaymentHandler:
+    def __init__(self):
+        self.payment_links = {
+            10: 'https://buy.stripe.com/test_28EbJ16AA7ly3ic7vh2VG0a',
+            50: 'https://buy.stripe.com/test_4gM00jbUUgW83ic3f12VG0b',
+            100: 'https://buy.stripe.com/test_aFadR99MM35ibOI6rd2VG0c',
+            500: 'https://buy.stripe.com/test_14AbJ12kk7lyf0U16T2VG0d'
+        }
+    
+    def create_checkout_session(self, user, amount):
+        """Create a Stripe checkout session for wallet top-up"""
+        if amount not in self.payment_links:
+            raise ValueError(f"Invalid amount: {amount}")
+        
+        payment_link = self.payment_links[amount]
+        
+        # Return the payment link URL with user reference
+        return {
+            'payment_url': f"{payment_link}?client_reference_id={user.id}&prefilled_email={user.email}",
+            'session_id': None  # Payment links don't have session IDs
+        }
+    
+    def verify_payment(self, session_id):
+        """Verify payment from Stripe webhook"""
+        try:
+            session = stripe.checkout.Session.retrieve(session_id)
+            
+            if session.payment_status == 'paid':
+                return {
+                    'success': True,
+                    'amount': session.amount_total / 100,  # Convert from cents
+                    'customer_email': session.customer_details.email,
+                    'client_reference_id': session.client_reference_id
+                }
+            else:
+                return {'success': False, 'error': 'Payment not completed'}
+                
+        except stripe.error.StripeError as e:
+            return {'success': False, 'error': str(e)}
+    
+    def handle_webhook(self, payload, signature):
+        """Handle Stripe webhook events"""
+        try:
+            event = stripe.Webhook.construct_event(
+                payload, signature, settings.STRIPE_WEBHOOK_SECRET
+            )
+        except ValueError:
+            return {'success': False, 'error': 'Invalid payload'}
+        except stripe.error.SignatureVerificationError:
+            return {'success': False, 'error': 'Invalid signature'}
+        
+        if event['type'] == 'checkout.session.completed':
+            session = event['data']['object']
+            
+            # Process successful payment
+            user_id = session.get('client_reference_id')
+            amount = session['amount_total'] / 100  # Convert from cents
+            
+            if user_id:
+                try:
+                    user = User.objects.get(id=user_id)
+                    user.add_balance(
+                        amount=amount,
+                        description=f"Wallet top-up via Stripe",
+                        stripe_session_id=session['id']
+                    )
+                    return {'success': True, 'message': 'Payment processed successfully'}
+                except User.DoesNotExist:
+                    return {'success': False, 'error': 'User not found'}
+        
+        return {'success': True, 'message': 'Event processed'}
+    
+    def process_refund(self, session_id, amount=None):
+        """Process refund for a payment"""
+        try:
+            session = stripe.checkout.Session.retrieve(session_id)
+            payment_intent = session.payment_intent
+            
+            if amount:
+                refund = stripe.Refund.create(
+                    payment_intent=payment_intent,
+                    amount=int(amount * 100)  # Convert to cents
+                )
+            else:
+                refund = stripe.Refund.create(payment_intent=payment_intent)
+            
+            return {
+                'success': True,
+                'refund_id': refund.id,
+                'amount': refund.amount / 100,
+                'status': refund.status
+            }
+            
+        except stripe.error.StripeError as e:
+            return {'success': False, 'error': str(e)}
\ No newline at end of file
diff --git a/apps/wallet/tests.py b/wallet/tests.py
similarity index 100%
rename from apps/wallet/tests.py
rename to wallet/tests.py
diff --git a/wallet/views.py b/wallet/views.py
new file mode 100644
index 0000000..91ea44a
--- /dev/null
+++ b/wallet/views.py
@@ -0,0 +1,3 @@
+from django.shortcuts import render
+
+# Create your views here.