diff --git a/docs/stories/epic-12-branding-refresh.md b/docs/epics/epic-12-branding-refresh.md
similarity index 100%
rename from docs/stories/epic-12-branding-refresh.md
rename to docs/epics/epic-12-branding-refresh.md
diff --git a/docs/epics/epic-13-auth-page-design.md b/docs/epics/epic-13-auth-page-design.md
new file mode 100644
index 0000000..86b73a6
--- /dev/null
+++ b/docs/epics/epic-13-auth-page-design.md
@@ -0,0 +1,167 @@
+# Epic 13: Authentication Pages Design Enhancement
+
+## Epic Goal
+
+Transform the authentication pages (login, forgot password, reset password, etc.) from plain layouts into visually engaging, branded experiences using a split-screen design with the LIBRA logo prominently featured and improved component visibility.
+
+## Epic Description
+
+### Existing System Context
+
+- **Current functionality:** Auth pages use a simple centered layout with minimal styling
+- **Technology stack:** Laravel 12, Livewire 3/Volt, Flux UI, Tailwind CSS 4
+- **Current layout:** `resources/views/components/layouts/auth/simple.blade.php` - plain white/cream background
+- **Existing split layout:** `resources/views/components/layouts/auth/split.blade.php` - exists but uses generic styling
+- **Language toggle component:** `resources/views/components/language-toggle.blade.php` - has `light` variant with low visibility
+
+### Enhancement Details
+
+**What's being added/changed:**
+
+1. **Split Layout Design for Auth Pages**
+   - Left panel: Dark primary background (`#2D3624`) with centered LIBRA logo
+   - Right panel: Warm cream background with subtle botanical/geometric pattern and form content
+   - Responsive: On mobile, shows only the form side with logo above
+
+2. **Language Toggle Visibility Fix**
+   - Update `light` variant to use darker color (`text-primary` instead of `text-body/70`)
+   - Ensure proper contrast on light backgrounds
+   - Maintain existing appearance on dark backgrounds (public navigation)
+
+3. **Subtle Background Pattern**
+   - Add elegant, subtle pattern to form side (wheat/botanical motif or geometric)
+   - Pattern should complement the brand without being distracting
+   - SVG-based for performance and scalability
+
+**Auth Pages Affected:**
+- `/login` - Login page
+- `/forgot-password` - Forgot password page
+- `/reset-password` - Reset password page
+- `/two-factor-challenge` - 2FA challenge page
+- `/confirm-password` - Password confirmation page
+- `/email/verify` - Email verification page
+
+**Success criteria:**
+- Auth pages display split layout on desktop (logo left, form right)
+- Mobile view maintains usability with logo above form
+- Language toggle clearly visible on all auth pages
+- Subtle pattern adds visual interest without distraction
+- Brand consistency with existing design system
+- Bilingual support maintained (RTL/LTR)
+
+---
+
+## Stories
+
+### Story 13.1: Language Toggle Visibility Enhancement
+**File:** `story-13.1-language-toggle-visibility.md`
+
+Update the language toggle component's `light` variant to use a darker, more visible color scheme while maintaining the existing `dark` variant appearance for navigation headers.
+
+### Story 13.2: Auth Layout Split Design Update
+**File:** `story-13.2-auth-split-layout.md`
+
+Update the existing split layout (`auth/split.blade.php`) to use LIBRA brand colors. Left panel with Dark Forest Green background and centered logo, right panel with form content.
+
+### Story 13.3: Subtle Background Pattern Implementation
+**File:** `story-13.3-background-pattern.md`
+
+Create and implement a subtle SVG-based background pattern for the auth form side. Pattern should use brand colors at low opacity for an elegant, professional appearance.
+
+### Story 13.4: Auth Pages Migration to Split Layout
+**File:** `story-13.4-auth-pages-migration.md`
+
+Migrate all auth pages from the simple layout to the enhanced split layout. Ensure proper RTL support and mobile responsiveness.
+
+### Story 13.5: Visual QA and Refinement
+**File:** `story-13.5-visual-qa.md`
+
+Comprehensive visual testing across all auth pages, browsers, and screen sizes. Fix any visual issues and ensure brand consistency.
+
+---
+
+## Compatibility Requirements
+
+- [x] Existing auth functionality remains unchanged
+- [x] Form validation and error handling preserved
+- [x] RTL (Arabic) and LTR (English) support maintained
+- [x] Mobile responsiveness required
+- [x] Accessibility standards (WCAG AA) maintained
+- [x] No impact on authentication logic
+
+## Technical Considerations
+
+### Color Values
+
+```css
+/* Primary for left panel */
+--color-primary: #2D3624;      /* Dark Forest Green */
+
+/* Background for right panel */
+--color-background: #F4F1EA;   /* Warm Cream */
+
+/* Pattern overlay (low opacity) */
+--color-cta: #A68966;          /* Warm Gold at ~5-10% opacity */
+
+/* Language toggle light variant */
+--color-primary: #2D3624;      /* Dark Forest Green for text */
+```
+
+### Layout Structure
+
+```
+Desktop (lg+):
++---------------------------+---------------------------+
+|                           |                           |
+|    LIBRA Logo             |    [Language Toggle]      |
+|    (centered)             |                           |
+|                           |    Login Form             |
+|    Dark Forest Green      |    (centered, pattern bg) |
+|    Background             |                           |
+|                           |    Warm Cream Background  |
++---------------------------+---------------------------+
+
+Mobile:
++---------------------------+
+|    [Language Toggle]      |
+|                           |
+|    LIBRA Logo             |
+|                           |
+|    Login Form             |
+|    (pattern bg)           |
++---------------------------+
+```
+
+### SVG Pattern Considerations
+
+- Pattern should be subtle (5-10% opacity)
+- Use wheat/botanical motif aligned with LIBRA brand
+- Alternatively, use geometric pattern for cleaner look
+- Must tile seamlessly
+- Performance-optimized (small file size)
+
+---
+
+## Risk Mitigation
+
+- **Primary Risk:** Layout changes may break on certain screen sizes or RTL mode
+- **Mitigation:** Thorough testing on multiple devices and both language directions
+- **Rollback Plan:** Auth layout can be reverted to simple layout via single file change
+
+## Definition of Done
+
+- [ ] All stories completed with acceptance criteria met
+- [ ] Language toggle visible and accessible on auth pages
+- [ ] Split layout displays correctly on desktop and tablet
+- [ ] Mobile layout is functional and attractive
+- [ ] RTL (Arabic) layout mirrors correctly
+- [ ] Pattern is subtle and professional
+- [ ] No regression in auth functionality
+- [ ] Visual QA completed on major browsers (Chrome, Firefox, Safari)
+- [ ] Accessibility audit passed (contrast ratios, focus states)
+
+## Dependencies
+
+- Epic 12 (Branding Refresh) should be completed first for consistent colors
+- Existing logo assets from Epic 12
+- No external dependencies required
diff --git a/docs/epics/index.md b/docs/epics/index.md
index 2bee744..a61c7d4 100644
--- a/docs/epics/index.md
+++ b/docs/epics/index.md
@@ -27,8 +27,11 @@ This document provides an index of all epics for the Libra Law Firm platform dev
 | 8 | [Email Notification System](./epic-8-email-notifications.md) | 10 | High | Epic 1-4 |
 | 9 | [Design & Branding Implementation](./epic-9-design-branding.md) | 11 | High | Epic 1 |
 | 10 | [Brand Color Refresh](./epic-10-brand-color-refresh.md) | 3 | High | Epic 9 |
+| 11 | [Guest Booking](./epic-11-guest-booking.md) | 4 | High | Epic 3 |
+| 12 | [Branding Refresh - Logo & Colors](./epic-12-branding-refresh.md) | 6 | High | Epic 9, 10 |
+| 13 | [Auth Page Design Enhancement](./epic-13-auth-page-design.md) | 5 | Medium | Epic 12 |
 
-**Total Stories:** 68
+**Total Stories:** 83
 
 ---
 
@@ -53,6 +56,9 @@ This document provides an index of all epics for the Libra Law Firm platform dev
 
 ### Phase 5: Brand Refresh
 10. **Epic 10: Brand Color Refresh** - Update to new LIBRA for Rights color palette
+11. **Epic 11: Guest Booking** - Public booking form for unauthenticated visitors
+12. **Epic 12: Branding Refresh** - Logo and color scheme updates
+13. **Epic 13: Auth Page Design** - Enhanced authentication page layouts
 
 ---
 
@@ -62,6 +68,7 @@ This document provides an index of all epics for the Libra Law Firm platform dev
 Epic 1 (Core Foundation)
     ├── Epic 2 (User Management)
     │       └── Epic 3 (Booking)
+    │       │       └── Epic 11 (Guest Booking)
     │       └── Epic 4 (Timeline)
     │               └── Epic 6 (Admin Dashboard)
     │               └── Epic 7 (Client Dashboard)
@@ -69,6 +76,8 @@ Epic 1 (Core Foundation)
     ├── Epic 5 (Posts)
     └── Epic 9 (Design)
             └── Epic 10 (Brand Color Refresh)
+                    └── Epic 12 (Branding Refresh)
+                            └── Epic 13 (Auth Page Design)
 ```
 
 ---
diff --git a/docs/stories/story-13.1-language-toggle-visibility.md b/docs/stories/story-13.1-language-toggle-visibility.md
new file mode 100644
index 0000000..2902d65
--- /dev/null
+++ b/docs/stories/story-13.1-language-toggle-visibility.md
@@ -0,0 +1,96 @@
+# Story 13.1: Language Toggle Visibility Enhancement
+
+## Story
+
+**As a** user on authentication pages
+**I want to** clearly see and interact with the language toggle
+**So that** I can easily switch between Arabic and English
+
+## Acceptance Criteria
+
+### AC1: Update Light Variant Text Color
+
+**Given** the language toggle has a `light` variant for light backgrounds
+**When** viewed on auth pages (white/cream background)
+**Then** the inactive language uses `text-primary` (Dark Forest Green #2D3624) instead of `text-body/70`
+
+### AC2: Update Light Variant Hover State
+
+**Given** the user hovers over an inactive language option
+**When** the variant is `light`
+**Then** the hover state uses:
+- Text: `text-cta-hover` (Darker Gold #8A7555)
+- Background: `bg-primary/10` (subtle dark background)
+
+### AC3: Update Light Variant Separator Color
+
+**Given** the separator `|` between languages
+**When** the variant is `light`
+**Then** it uses `text-primary/50` instead of `text-body/30` for better visibility
+
+### AC4: Dark Variant Unchanged
+
+**Given** the language toggle has a `dark` variant for dark backgrounds (navigation bar)
+**When** viewed on the public navigation
+**Then** the existing styling remains unchanged:
+- Inactive: `text-off-white`
+- Hover: `text-cta hover:bg-active-hover`
+- Separator: `text-cta/50`
+
+### AC5: Active State Unchanged
+
+**Given** the currently active language
+**When** displayed in either variant
+**Then** it maintains the existing active styling:
+- `bg-active text-white font-bold`
+
+### AC6: Contrast Compliance
+
+**Given** accessibility requirements
+**When** the light variant is used on Warm Cream background (#F4F1EA)
+**Then** the text contrast meets WCAG AA:
+- Dark Forest Green (#2D3624) on Warm Cream (#F4F1EA): ≥4.5:1
+
+## Technical Notes
+
+### File to Modify
+- `resources/views/components/language-toggle.blade.php`
+
+### Current Implementation (Light Variant)
+```php
+'text-body/70 hover:text-body hover:bg-active-hover' => app()->getLocale() !== 'ar' && $variant === 'light',
+```
+
+### New Implementation (Light Variant)
+```php
+'text-primary hover:text-cta-hover hover:bg-primary/10' => app()->getLocale() !== 'ar' && $variant === 'light',
+```
+
+### Color Reference
+| Element | Current | New |
+|---------|---------|-----|
+| Inactive Text | `text-body/70` (~70% opacity) | `text-primary` (100% Dark Forest Green) |
+| Hover Text | `text-body` | `text-cta-hover` (Darker Gold) |
+| Hover Background | `bg-active-hover` | `bg-primary/10` (subtle dark) |
+| Separator | `text-body/30` | `text-primary/50` |
+
+## Dev Checklist
+
+- [ ] Update Arabic link light variant classes
+- [ ] Update English link light variant classes
+- [ ] Update separator light variant class
+- [ ] Verify dark variant unchanged
+- [ ] Test on login page
+- [ ] Test on forgot-password page
+- [ ] Test RTL (Arabic) layout
+- [ ] Test LTR (English) layout
+- [ ] Verify contrast ratios
+
+## Estimation
+
+**Complexity:** Low
+**Risk:** Low - Component-level CSS changes only
+
+## Dependencies
+
+- Epic 12 completed (brand colors defined)
diff --git a/docs/stories/story-13.2-auth-split-layout.md b/docs/stories/story-13.2-auth-split-layout.md
new file mode 100644
index 0000000..fdf6b53
--- /dev/null
+++ b/docs/stories/story-13.2-auth-split-layout.md
@@ -0,0 +1,139 @@
+# Story 13.2: Auth Layout Split Design Update
+
+## Story
+
+**As a** visitor to the authentication pages
+**I want to** see a visually appealing split-screen layout with the LIBRA branding
+**So that** the login experience feels professional and aligned with the brand identity
+
+## Acceptance Criteria
+
+### AC1: Left Panel - Brand Side (Desktop)
+
+**Given** the split layout is viewed on desktop (lg+ breakpoint)
+**When** the page loads
+**Then** the left panel displays:
+- Full height (`h-full`)
+- Dark Forest Green background (`bg-primary` #2D3624)
+- LIBRA logo centered vertically and horizontally
+- Logo size: Large (`size="lg"` or `size="xl"`)
+- No text below logo (clean, minimal design)
+
+### AC2: Right Panel - Form Side (Desktop)
+
+**Given** the split layout is viewed on desktop
+**When** the page loads
+**Then** the right panel displays:
+- Warm Cream background (`bg-background` #F4F1EA)
+- Form content centered
+- Language toggle in top-right corner
+- Adequate padding for comfortable reading
+
+### AC3: Mobile Layout
+
+**Given** the split layout is viewed on mobile (below lg breakpoint)
+**When** the page loads
+**Then**:
+- Left panel (brand side) is hidden
+- Logo appears above the form (centered, size="xl")
+- Form takes full width with padding
+- Language toggle in top-right corner
+- Background uses Warm Cream
+
+### AC4: RTL (Arabic) Support
+
+**Given** the user's locale is Arabic
+**When** the split layout renders
+**Then**:
+- Layout mirrors correctly (brand panel on right, form on left)
+- Language toggle appears in top-left (logical `end`)
+- All text alignment respects RTL
+
+### AC5: Language Toggle Positioning
+
+**Given** the language toggle component
+**When** displayed on the split layout
+**Then**:
+- Position: Fixed in top corner (`absolute end-4 top-4 z-50`)
+- Uses `variant="light"` for visibility on light background
+- Accessible via keyboard navigation
+
+### AC6: Remove Inspiring Quotes
+
+**Given** the existing split layout has inspiring quotes
+**When** the layout is updated
+**Then** the quotes section is removed for a cleaner, branded appearance
+
+### AC7: Responsive Breakpoints
+
+**Given** various screen sizes
+**When** the layout responds
+**Then**:
+- `lg+` (≥1024px): Full split layout (50/50)
+- Below `lg`: Mobile layout (form only with logo above)
+
+## Technical Notes
+
+### File to Modify
+- `resources/views/components/layouts/auth/split.blade.php`
+
+### Current Structure
+```html
+<main class="relative grid h-dvh ... lg:grid-cols-2">
+    <!-- Left: Brand panel with neutral-900 bg and quotes -->
+    <div class="bg-muted relative hidden h-full ... lg:flex">
+        <div class="absolute inset-0 bg-neutral-900"></div>
+        <!-- Logo and quotes -->
+    </div>
+    <!-- Right: Form -->
+    <div class="w-full lg:p-8">...</div>
+</main>
+```
+
+### Target Structure
+```html
+<main class="relative grid h-dvh ... lg:grid-cols-2">
+    <!-- Left: Brand panel with primary bg -->
+    <div class="relative hidden h-full flex-col items-center justify-center lg:flex bg-primary">
+        <x-logo size="xl" />
+    </div>
+    <!-- Right: Form with pattern bg -->
+    <div class="w-full bg-background lg:p-8">
+        <!-- Language toggle -->
+        <div class="absolute end-4 top-4 z-50">
+            <x-language-toggle variant="light" />
+        </div>
+        <!-- Form content -->
+    </div>
+</main>
+```
+
+### Color Values
+| Element | Color | Hex |
+|---------|-------|-----|
+| Left Panel Background | `bg-primary` | #2D3624 |
+| Right Panel Background | `bg-background` | #F4F1EA |
+| Logo | Default (adapts to dark bg) | - |
+
+## Dev Checklist
+
+- [ ] Update left panel background to `bg-primary`
+- [ ] Center logo in left panel (remove quotes)
+- [ ] Update right panel background to `bg-background`
+- [ ] Position language toggle correctly
+- [ ] Test desktop layout (50/50 split)
+- [ ] Test mobile layout (form only)
+- [ ] Test RTL mirroring
+- [ ] Verify logo visibility on dark background
+- [ ] Remove inspiring quotes code
+- [ ] Ensure z-index layering correct
+
+## Estimation
+
+**Complexity:** Medium
+**Risk:** Low - Layout restructuring with existing components
+
+## Dependencies
+
+- Story 13.1 (Language Toggle Visibility) - Can run in parallel
+- Epic 12 (Brand colors defined)
diff --git a/docs/stories/story-13.3-background-pattern.md b/docs/stories/story-13.3-background-pattern.md
new file mode 100644
index 0000000..ec392d6
--- /dev/null
+++ b/docs/stories/story-13.3-background-pattern.md
@@ -0,0 +1,148 @@
+# Story 13.3: Subtle Background Pattern Implementation
+
+## Story
+
+**As a** visitor to the authentication pages
+**I want to** see a subtle, elegant background pattern on the form side
+**So that** the page feels polished and professionally designed
+
+## Acceptance Criteria
+
+### AC1: Create SVG Pattern Asset
+
+**Given** the need for a subtle background pattern
+**When** the pattern is created
+**Then**:
+- SVG format for scalability and performance
+- Uses brand color (Warm Gold #A68966) at 5-8% opacity
+- Pattern type: Geometric or botanical (wheat/leaf motif)
+- Seamlessly tileable
+- File size under 5KB for performance
+
+### AC2: Pattern Placement
+
+**Given** the SVG pattern is created
+**When** applied to the auth layout
+**Then**:
+- Pattern appears on the form side (right panel desktop, full background mobile)
+- Pattern overlays the Warm Cream background
+- Pattern is fixed/static (doesn't scroll with content)
+- Pattern doesn't interfere with form readability
+
+### AC3: Pattern Opacity
+
+**Given** readability requirements
+**When** the pattern is displayed
+**Then**:
+- Opacity is subtle (5-8%)
+- Text remains clearly readable
+- Pattern adds visual interest without distraction
+
+### AC4: CSS Implementation
+
+**Given** the pattern asset
+**When** integrated into CSS
+**Then**:
+- Applied via `background-image` or pseudo-element
+- Uses `background-repeat: repeat` for tiling
+- Background is fixed or positioned appropriately
+- Can be easily disabled if needed
+
+### AC5: Performance Consideration
+
+**Given** page load performance
+**When** the pattern loads
+**Then**:
+- Pattern is inlined or loaded efficiently
+- No noticeable delay in page rendering
+- Pattern works without JavaScript
+
+### AC6: Mobile Compatibility
+
+**Given** mobile viewport
+**When** pattern is displayed
+**Then**:
+- Pattern scales appropriately
+- No horizontal scrolling caused by pattern
+- Pattern remains subtle on smaller screens
+
+## Technical Notes
+
+### Pattern Options
+
+**Option A: Geometric (Recommended)**
+- Simple diagonal lines or dots
+- Clean, modern aesthetic
+- Easier to create and maintain
+
+**Option B: Botanical**
+- Wheat/leaf silhouettes
+- Aligns with LIBRA brand identity
+- More complex but more unique
+
+### SVG Pattern Example (Geometric)
+```svg
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20">
+  <circle cx="2" cy="2" r="1" fill="#A68966" fill-opacity="0.06"/>
+</svg>
+```
+
+### CSS Implementation Options
+
+**Option 1: Inline SVG in CSS**
+```css
+.auth-pattern {
+    background-image: url("data:image/svg+xml,...");
+    background-repeat: repeat;
+}
+```
+
+**Option 2: Pseudo-element Overlay**
+```css
+.auth-form-side::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background-image: url('/images/pattern.svg');
+    background-repeat: repeat;
+    opacity: 0.06;
+    pointer-events: none;
+}
+```
+
+**Option 3: Tailwind Arbitrary Value**
+```html
+<div class="bg-[url('/images/pattern.svg')]">
+```
+
+### Files to Create/Modify
+- `public/images/auth-pattern.svg` (new) OR inline in CSS
+- `resources/css/app.css` (if adding pattern class)
+- `resources/views/components/layouts/auth/split.blade.php` (apply pattern)
+
+### Pattern Design Guidelines
+- Color: Warm Gold (#A68966)
+- Opacity: 5-8% (0.05-0.08)
+- Size: 20-40px tiles for subtle effect
+- Style: Minimalist, professional
+
+## Dev Checklist
+
+- [ ] Design/select pattern style (geometric vs botanical)
+- [ ] Create SVG pattern file
+- [ ] Optimize SVG for file size
+- [ ] Add pattern to auth layout CSS
+- [ ] Test pattern visibility at various screen sizes
+- [ ] Verify text readability over pattern
+- [ ] Test in both Arabic and English
+- [ ] Verify no horizontal scroll issues
+- [ ] Check pattern on high-DPI displays
+
+## Estimation
+
+**Complexity:** Medium
+**Risk:** Low - Decorative enhancement only
+
+## Dependencies
+
+- Story 13.2 (Auth Split Layout) - Must be completed first
diff --git a/docs/stories/story-13.4-auth-pages-migration.md b/docs/stories/story-13.4-auth-pages-migration.md
new file mode 100644
index 0000000..f07e4eb
--- /dev/null
+++ b/docs/stories/story-13.4-auth-pages-migration.md
@@ -0,0 +1,182 @@
+# Story 13.4: Auth Pages Migration to Split Layout
+
+## Story
+
+**As a** user accessing any authentication page
+**I want to** see the consistent, branded split layout
+**So that** all auth pages provide a cohesive, professional experience
+
+## Acceptance Criteria
+
+### AC1: Login Page Migration
+
+**Given** the login page at `/login`
+**When** the page loads
+**Then**:
+- Uses the updated split layout (`x-layouts.auth.split` or updated `x-layouts.auth`)
+- Form content displays correctly
+- All form validation works as before
+- "Forgot password" link works
+- "Remember me" checkbox works
+
+### AC2: Forgot Password Page Migration
+
+**Given** the forgot password page at `/forgot-password`
+**When** the page loads
+**Then**:
+- Uses the updated split layout
+- Email input displays correctly
+- Form submission works as before
+- Success/error messages display properly
+
+### AC3: Reset Password Page Migration
+
+**Given** the reset password page at `/reset-password/{token}`
+**When** the page loads
+**Then**:
+- Uses the updated split layout
+- Password fields display correctly
+- Password visibility toggle works
+- Form validation works as before
+
+### AC4: Two-Factor Challenge Page Migration
+
+**Given** the 2FA challenge page at `/two-factor-challenge`
+**When** the page loads
+**Then**:
+- Uses the updated split layout
+- OTP input displays correctly
+- Recovery code option works
+- Form submission works as before
+
+### AC5: Confirm Password Page Migration
+
+**Given** the confirm password page at `/confirm-password`
+**When** the page loads
+**Then**:
+- Uses the updated split layout
+- Password field displays correctly
+- Form submission works as before
+
+### AC6: Email Verification Page Migration
+
+**Given** the email verification page at `/email/verify`
+**When** the page loads
+**Then**:
+- Uses the updated split layout
+- Verification message displays correctly
+- Resend button works as before
+
+### AC7: Update Default Auth Layout
+
+**Given** the auth layout wrapper (`x-layouts.auth`)
+**When** called by auth pages
+**Then**:
+- Routes to the split layout instead of simple layout
+- All existing slot content passes through correctly
+
+### AC8: RTL Support Verified
+
+**Given** Arabic language selected
+**When** any auth page loads
+**Then**:
+- Layout correctly mirrors
+- Form labels align right
+- Input text aligns right
+- Error messages align right
+
+### AC9: Mobile Responsiveness Verified
+
+**Given** mobile viewport (below lg breakpoint)
+**When** any auth page loads
+**Then**:
+- Single column layout displays
+- Logo appears above form
+- All form elements are touch-friendly (min 44px)
+- No horizontal scrolling
+
+### AC10: Accessibility Maintained
+
+**Given** accessibility requirements
+**When** auth pages render
+**Then**:
+- Skip link still works
+- Focus states visible
+- Screen reader navigation works
+- Form labels properly associated
+
+## Technical Notes
+
+### Files to Modify
+
+| File | Change |
+|------|--------|
+| `resources/views/components/layouts/auth.blade.php` | Update to use split layout |
+| `resources/views/livewire/auth/login.blade.php` | Verify layout usage |
+| `resources/views/livewire/auth/forgot-password.blade.php` | Verify layout usage |
+| `resources/views/livewire/auth/reset-password.blade.php` | Verify layout usage |
+| `resources/views/livewire/auth/two-factor-challenge.blade.php` | Verify layout usage |
+| `resources/views/livewire/auth/confirm-password.blade.php` | Verify layout usage |
+| `resources/views/livewire/auth/verify-email.blade.php` | Verify layout usage |
+
+### Current Auth Layout Wrapper
+```php
+// resources/views/components/layouts/auth.blade.php
+<x-layouts.auth.simple :title="$title ?? null">
+    {{ $slot }}
+</x-layouts.auth.simple>
+```
+
+### Updated Auth Layout Wrapper
+```php
+// resources/views/components/layouts/auth.blade.php
+<x-layouts.auth.split :title="$title ?? null">
+    {{ $slot }}
+</x-layouts.auth.split>
+```
+
+### Auth Page Structure
+All auth pages use this pattern:
+```php
+<x-layouts.auth>
+    <div class="flex flex-col gap-6">
+        <x-auth-header :title="..." :description="..." />
+        <!-- Form content -->
+    </div>
+</x-layouts.auth>
+```
+
+No changes needed to individual page content - just the layout wrapper.
+
+## Dev Checklist
+
+- [ ] Update `auth.blade.php` to use split layout
+- [ ] Test login page functionality
+- [ ] Test forgot-password page functionality
+- [ ] Test reset-password page functionality
+- [ ] Test two-factor-challenge page functionality
+- [ ] Test confirm-password page functionality
+- [ ] Test verify-email page functionality
+- [ ] Test all pages in Arabic (RTL)
+- [ ] Test all pages on mobile
+- [ ] Verify form validation still works
+- [ ] Verify error messages display correctly
+- [ ] Verify success messages display correctly
+- [ ] Run existing auth tests
+
+## Estimation
+
+**Complexity:** Low-Medium
+**Risk:** Medium - Affects all auth pages, but changes are minimal
+
+## Dependencies
+
+- Story 13.2 (Auth Split Layout) - Must be completed first
+- Story 13.3 (Background Pattern) - Should be completed first
+
+## Testing Notes
+
+Run existing auth tests to ensure no regression:
+```bash
+php artisan test tests/Feature/Auth/
+```
diff --git a/docs/stories/story-13.5-visual-qa.md b/docs/stories/story-13.5-visual-qa.md
new file mode 100644
index 0000000..ab5c7e0
--- /dev/null
+++ b/docs/stories/story-13.5-visual-qa.md
@@ -0,0 +1,231 @@
+# Story 13.5: Visual QA and Refinement
+
+## Story
+
+**As a** product owner
+**I want to** ensure all auth pages look polished and consistent
+**So that** users have a professional, trustworthy experience
+
+## Acceptance Criteria
+
+### AC1: Cross-Browser Testing
+
+**Given** the updated auth pages
+**When** tested in major browsers
+**Then** all pages render correctly in:
+- Chrome (latest)
+- Firefox (latest)
+- Safari (latest)
+- Edge (latest)
+
+### AC2: Desktop Viewport Testing
+
+**Given** desktop viewports
+**When** auth pages are viewed
+**Then** the split layout displays correctly at:
+- 1920x1080 (Full HD)
+- 1440x900 (Common laptop)
+- 1280x720 (HD)
+- 1024x768 (iPad landscape / small desktop)
+
+### AC3: Mobile Viewport Testing
+
+**Given** mobile viewports
+**When** auth pages are viewed
+**Then** the mobile layout displays correctly at:
+- 375x667 (iPhone SE)
+- 390x844 (iPhone 12/13/14)
+- 428x926 (iPhone 14 Plus)
+- 360x800 (Android common)
+- 768x1024 (iPad portrait)
+
+### AC4: RTL Visual Verification
+
+**Given** Arabic language selected
+**When** all auth pages are viewed
+**Then**:
+- Split layout mirrors correctly (logo panel on right)
+- Form alignment is correct (right-aligned labels)
+- Language toggle in correct position
+- No text overflow or clipping
+- Pattern (if directional) mirrors appropriately
+
+### AC5: Logo Visibility Verification
+
+**Given** the LIBRA logo on the brand panel
+**When** viewed on desktop
+**Then**:
+- Logo is clearly visible on dark background
+- Logo is properly centered
+- Logo size is appropriate (not too large, not too small)
+- Logo maintains aspect ratio
+
+### AC6: Language Toggle Visibility Verification
+
+**Given** the language toggle on auth pages
+**When** viewed
+**Then**:
+- Text is clearly readable
+- Contrast ratio meets WCAG AA
+- Active state is clearly indicated
+- Hover states are visible
+- Touch target is adequate on mobile (44px min)
+
+### AC7: Pattern Subtlety Verification
+
+**Given** the background pattern
+**When** viewed across all pages
+**Then**:
+- Pattern is visible but not distracting
+- Text remains easily readable
+- Pattern doesn't create visual noise
+- Pattern works on all screen sizes
+
+### AC8: Form Element Alignment
+
+**Given** form elements on auth pages
+**When** viewed
+**Then**:
+- Labels align consistently
+- Input fields have consistent width
+- Buttons are properly sized
+- Error messages align with fields
+- Spacing is consistent
+
+### AC9: Color Consistency
+
+**Given** the brand color palette
+**When** auth pages are viewed
+**Then**:
+- Left panel uses correct Dark Forest Green (#2D3624)
+- Right panel uses correct Warm Cream (#F4F1EA)
+- Buttons use correct Warm Gold (#A68966)
+- Text uses correct colors
+- No unintended color variations
+
+### AC10: Animation/Transition Polish
+
+**Given** interactive elements
+**When** interacted with
+**Then**:
+- Hover transitions are smooth (150-200ms)
+- Focus states are visible
+- No jarring visual changes
+- Page transitions (if any) are smooth
+
+### AC11: Print Stylesheet (Optional)
+
+**Given** a user prints an auth page
+**When** the page is printed
+**Then**:
+- Form is readable
+- Background pattern doesn't waste ink
+- Logo prints appropriately (or is hidden)
+
+### AC12: Fix Any Visual Issues
+
+**Given** issues discovered during QA
+**When** fixes are needed
+**Then**:
+- Issues are documented
+- Fixes are implemented
+- Fixes are re-tested
+- No regression introduced
+
+## Technical Notes
+
+### QA Checklist Template
+
+```markdown
+## Browser: [Browser Name]
+## Viewport: [Width x Height]
+## Language: [EN/AR]
+
+### Login Page
+- [ ] Split layout correct
+- [ ] Logo visible and centered
+- [ ] Form aligned properly
+- [ ] Language toggle visible
+- [ ] Pattern subtle
+- [ ] Form validation works
+- [ ] Error messages display
+
+### Forgot Password Page
+- [ ] Layout correct
+- [ ] Form works
+- [ ] Messages display
+
+### Reset Password Page
+- [ ] Layout correct
+- [ ] Form works
+- [ ] Password visibility works
+
+### 2FA Challenge Page
+- [ ] Layout correct
+- [ ] OTP input works
+- [ ] Recovery code option works
+
+### Confirm Password Page
+- [ ] Layout correct
+- [ ] Form works
+
+### Email Verification Page
+- [ ] Layout correct
+- [ ] Resend button works
+
+### Overall
+- [ ] No horizontal scrolling
+- [ ] No visual glitches
+- [ ] Colors correct
+- [ ] Spacing consistent
+```
+
+### Common Issues to Watch For
+
+1. **Logo sizing** - May need adjustment per viewport
+2. **Pattern tiling** - Check for visible seams
+3. **RTL mirroring** - Icons and directional elements
+4. **Input placeholder visibility** - May need color adjustment
+5. **Focus ring visibility** - Ensure visible on both backgrounds
+6. **Z-index stacking** - Language toggle over pattern
+
+### Files That May Need Adjustment
+- `resources/views/components/layouts/auth/split.blade.php`
+- `resources/css/app.css` (pattern, spacing)
+- `resources/views/components/language-toggle.blade.php`
+- `resources/views/components/logo.blade.php` (if size needs tweaking)
+
+## Dev Checklist
+
+- [ ] Test Chrome desktop
+- [ ] Test Firefox desktop
+- [ ] Test Safari desktop
+- [ ] Test Edge desktop
+- [ ] Test Chrome mobile
+- [ ] Test Safari mobile (iOS)
+- [ ] Test Chrome Android
+- [ ] Test all viewports listed
+- [ ] Test English layout
+- [ ] Test Arabic layout
+- [ ] Document any issues found
+- [ ] Fix all issues
+- [ ] Re-test fixes
+- [ ] Get stakeholder sign-off
+
+## Estimation
+
+**Complexity:** Medium
+**Risk:** Low - Refinement only, no functional changes
+
+## Dependencies
+
+- Story 13.1 (Language Toggle) - Must be completed
+- Story 13.2 (Split Layout) - Must be completed
+- Story 13.3 (Pattern) - Must be completed
+- Story 13.4 (Pages Migration) - Must be completed
+
+## Sign-off
+
+- [ ] Developer sign-off
+- [ ] Design review (if applicable)
+- [ ] Stakeholder approval