)
}
export default AppLayout
```
### 4.2 Update LoginPage Component
**File:** `frontend/src/pages/LoginPage.tsx`
Replace the entire file with:
```typescript
import { useState } from 'react'
import { Link, useNavigate, useLocation } from 'react-router-dom'
import { useAuthStore } from '@/store/authStore'
import { cn } from '@/lib/utils'
export function LoginPage() {
const navigate = useNavigate()
const location = useLocation()
const { login, isLoading, error, clearError } = useAuthStore()
const [email, setEmail] = useState('')
const [password, setPassword] = useState('')
const [localError, setLocalError] = useState('')
const from = (location.state as { from?: { pathname: string } })?.from?.pathname || '/trees'
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault()
setLocalError('')
clearError()
if (!email || !password) {
setLocalError('Please enter both email and password')
return
}
try {
await login({ email, password })
navigate(from, { replace: true })
} catch {
// Error is set in the store
}
}
return (
{/* Header with Logo */}
ResolutionFlow
Decision Tree Platform
Sign in to your account
)
}
export default LoginPage
```
### 4.3 Update RegisterPage Component
**File:** `frontend/src/pages/RegisterPage.tsx`
**Changes needed:**
1. Add the logo SVG before the title (same as LoginPage)
2. Update title to match ResolutionFlow branding
3. Update submit button to use gradient styling
**Find this section:**
```typescript