diff --git a/CAROUSEL_DASHBOARD_PLAN.md b/CAROUSEL_DASHBOARD_PLAN.md
index 864f9fd..e6bc33d 100644
--- a/CAROUSEL_DASHBOARD_PLAN.md
+++ b/CAROUSEL_DASHBOARD_PLAN.md
@@ -23,18 +23,18 @@ This plan **adheres to** all PROJECT_GUIDELINES.md requirements with explicit us
 - Database schema changes
 - New service layer for reusable business logic
 - New API endpoints for mobile app compatibility
-- Bruno DSL tests for all new endpoints
+- Bruno tests already created in `bruno/dashboard/`
 
 ✅ **Frontend Standards**:
 - **TailwindCSS classes ONLY** - no custom CSS
-- **TypeScript ONLY** - no JavaScript files
+- **Inline JavaScript** - matches existing dashboard.templ pattern
 - **Procedural/imperative style** - no OOP (classes, inheritance, this-capture)
 - **SSR for initial data** - no AJAX on page load
 - **Progressive enhancement** - works without JavaScript
 - **HTMX for CRUD operations** (library switching, settings updates)
 
 ✅ **Code Organization**:
-- **Share handler types with templates** - no duplicate type systems
+- **Template types in templates/types.go** - SectionData, BookCardData
 - **All business logic in services** - reusable for SSR/API/mobile
 - **Minimal project structure changes** - contextually appropriate directories
 
@@ -45,7 +45,7 @@ This plan **adheres to** all PROJECT_GUIDELINES.md requirements with explicit us
 - **pgx v5 standards** - proper connection handling
 
 ✅ **API Documentation**:
-- **Bruno .bru files** for all new endpoints
+- **Bruno tests** already created in `bruno/dashboard/`
 - **Three-context testing** (no user, user, admin)
 - **Backward compatibility** for mobile apps
 - **docs/developer/api/** documentation updates
@@ -137,66 +137,88 @@ import (
     "context"
     "bookhoard/internal/database"
     "github.com/google/uuid"
+    "github.com/jackc/pgx/v5/pgtype"
 )
 
 type DashboardService struct {
     db *database.Queries
 }
 
-// Section data - use handler types, not template types
-type Section struct {
-    ID          string       `json:"id"`
-    Type        string       `json:"type"` // "smart", "collection"
-    Title       string       `json:"title"`
-    Description string       `json:"description"`
-    Icon        string       `json:"icon"`
-    Items       []MediaItem  `json:"items"`
-    ViewAllURL  string       `json:"view_all_url"`
-    Priority    int          `json:"priority"`
-    IsHidden    bool         `json:"is_hidden"`
-}
-
-// MediaItem - REUSE existing handler type
-type MediaItem = database.MediaItem
-
 // NewDashboardService creates service instance
 func NewDashboardService(db *database.Queries) *DashboardService {
     return &DashboardService{db: db}
 }
 
-// GetSections fetches all sections for dashboard
-// REUSABLE by SSR handlers, API endpoints, mobile apps
-func (s *DashboardService) GetSections(ctx context.Context, userID, libraryID uuid.UUID) ([]Section, error) {
-    // 1. Get user preferences
-    prefs, _ := s.db.GetDashboardPreferences(ctx, database.GetDashboardPreferencesParams{
-        UserID:     database.SetUUID(userID),
-        LibraryID:  database.SetUUID(libraryID),
-    })
-
-    // 2. Get smart sections (use existing progress API)
-    smartSections := s.getSmartSections(ctx, userID, libraryID, prefs)
-
-    // 3. Get user collections marked for dashboard
-    collectionSections := s.getCollectionSections(ctx, userID, libraryID, prefs)
-
-    // 4. Merge and sort by priority/user order
-    return s.mergeAndSortSections(smartSections, collectionSections, prefs)
+// SectionItems contains raw items for a section - handler formats into SectionData
+type SectionItems struct {
+    SectionKey string
+    Items      []database.MediaItems
 }
 
-func (s *DashboardService) getSmartSections(ctx context.Context, userID, libraryID uuid.UUID, prefs database.UserDashboardPreferences) []Section {
-    // Use EXISTING APIs:
-    // - s.db.GetUniversalProgress for Continue Reading, In Progress, Recently Read
-    // - s.db.ListMediaItems for Recently Added
-    // NO direct database access - use queries
+// GetSectionItems fetches raw items for each section type
+// Handler will format these into template.SectionData
+func (s *DashboardService) GetSectionItems(ctx context.Context, userID, libraryID uuid.UUID, limit int) ([]SectionItems, error) {
+    var results []SectionItems
+    
+    // 1. Continue Reading - items with progress > 0 and < 1
+    continueReading, _ := s.getContinueReading(ctx, userID, libraryID, limit)
+    results = append(results, SectionItems{SectionKey: "continue-reading", Items: continueReading})
+    
+    // 2. In Progress - items with progress > 0
+    inProgress, _ := s.getInProgress(ctx, userID, libraryID, limit)
+    results = append(results, SectionItems{SectionKey: "in-progress", Items: inProgress})
+    
+    // 3. Recently Added - newest items in library
+    recentlyAdded, _ := s.getRecentlyAdded(ctx, libraryID, limit)
+    results = append(results, SectionItems{SectionKey: "recently-added", Items: recentlyAdded})
+    
+    // 4. Recently Read - items with progress = 1
+    recentlyRead, _ := s.getRecentlyRead(ctx, userID, libraryID, limit)
+    results = append(results, SectionItems{SectionKey: "recently-read", Items: recentlyRead})
+    
+    // 5. Not Started - items with no progress
+    unread, _ := s.getUnread(ctx, userID, libraryID, limit)
+    results = append(results, SectionItems{SectionKey: "unread", Items: unread})
+    
+    // 6. User collections marked for dashboard
+    collectionItems, _ := s.getCollectionSections(ctx, userID, libraryID, limit)
+    results = append(results, collectionItems...)
+    
+    return results, nil
 }
 
-func (s *DashboardService) getCollectionSections(ctx context.Context, userID, libraryID uuid.UUID, prefs database.UserDashboardPreferences) []Section {
+func (s *DashboardService) getContinueReading(ctx context.Context, userID, libraryID uuid.UUID, limit int) ([]database.MediaItems, error) {
+    // Query media items WHERE progress > 0 AND progress < 1
+    // Ordered by last_read_at DESC
+}
+
+func (s *DashboardService) getInProgress(ctx context.Context, userID, libraryID uuid.UUID, limit int) ([]database.MediaItems, error) {
+    // Query media items WHERE progress > 0
+}
+
+func (s *DashboardService) getRecentlyAdded(ctx context.Context, libraryID uuid.UUID, limit int) ([]database.MediaItems, error) {
+    // Query media items ORDER BY created_at DESC
+}
+
+func (s *DashboardService) getRecentlyRead(ctx context.Context, userID, libraryID uuid.UUID, limit int) ([]database.MediaItems, error) {
+    // Query media items WHERE progress >= 1 (completed)
+}
+
+func (s *DashboardService) getUnread(ctx context.Context, userID, libraryID uuid.UUID, limit int) ([]database.MediaItems, error) {
+    // Query media items with no reading_progress record
+}
+
+func (s *DashboardService) getCollectionSections(ctx context.Context, userID, libraryID uuid.UUID, limit int) ([]SectionItems, error) {
     // Query collections WHERE show_on_dashboard = true
-    // For each collection, fetch items using existing GetCollectionItems
+    // Return SectionItems for each collection
 }
 
-func (s *DashboardService) mergeAndSortSections(smart, collections []Section, prefs database.UserDashboardPreferences) []Section {
-    // Merge by priority or user's section_order preference
+// GetDashboardPreferences fetches user preferences for a library
+func (s *DashboardService) GetDashboardPreferences(ctx context.Context, userID, libraryID uuid.UUID) (database.UserDashboardPreferences, error) {
+    return s.db.GetDashboardPreferences(ctx, database.GetDashboardPreferencesParams{
+        UserID:    pgtype.UUID{Bytes: userID, Valid: true},
+        LibraryID: pgtype.UUID{Bytes: libraryID, Valid: true},
+    })
 }
 ```
 
@@ -206,6 +228,7 @@ func (s *DashboardService) mergeAndSortSections(smart, collections []Section, pr
 - ✅ No direct database access from handlers
 - ✅ Uses existing database queries
 - ✅ Procedural/imperative style (no OOP)
+- ✅ Returns raw data - handler formats for templates
 
 ---
 
@@ -256,143 +279,440 @@ Regenerate: `cd internal/database && sqlc generate`
 
 ---
 
-### **Phase 4: HTTP Handlers** (2-3 hours)
+### **Phase 4: Routes** (1-2 hours)
 
-**File: `internal/handlers/dashboard.go`** (new file)
+**File: `internal/router/frontend.go`** (MODIFY existing file)
 
-**COMPLIANCE**: Thin handlers, all logic in service layer
+**COMPLIANCE**: Add inline routes following existing pattern
 
+**Modify existing `/dashboard` route** (around line 105):
 ```go
-package handlers
-
-import (
-    "bookhoard/internal/services"
-    "github.com/labstack/echo/v4"
-)
-
-type DashboardHandler struct {
-    db             *database.Queries
-    dashboardSvc   *services.DashboardService
-}
-
-// NewDashboardHandler creates handler instance
-func NewDashboardHandler(db *database.Queries) *DashboardHandler {
-    return &DashboardHandler{
-        db:             db,
-        dashboardSvc:   services.NewDashboardService(db),
-    }
-}
-
-// GetDashboard renders full dashboard with pre-populated data (SSR)
-func (h *DashboardHandler) GetDashboard(c echo.Context) error {
-    user := MustGetAuthenticatedUser(c)
-    libraryID := h.getSelectedLibrary(c, user.ID)
-
-    // CALL SERVICE (not database directly)
-    sections, err := h.dashboardSvc.GetSections(c.Request().Context(), user.ID, libraryID)
+// Dashboard page - modified to load sections SSR
+frontendProtected.GET("/dashboard", func(c echo.Context) error {
+    user, err := getTemplateUserWithTheme(c, cfg)
     if err != nil {
-        return echo.NewHTTPError(http.StatusInternalServerError, "failed to load dashboard")
+        return c.HTML(http.StatusInternalServerError, "Error loading user")
     }
 
-    libraries, err := h.db.GetUserVisibleLibraries(c.Request().Context(), user.ID)
+    // Get library ID from query param, or use first visible library
+    libraryID := c.QueryParam("library_id")
+    if libraryID == "" {
+        // Get user's first visible library
+        libraries, err := cfg.Queries.GetUserVisibleLibraries(c.Request().Context(), user.ID)
+        if err == nil && len(libraries) > 0 {
+            libUUID, _ := uuid.FromBytes(libraries[0].ID.Bytes[0:16])
+            libraryID = libUUID.String()
+        }
+    }
+
+    // Get sections from service
+    libUUID, _ := uuid.Parse(libraryID)
+    userUUID, _ := uuid.Parse(user.ID)
+    sectionItems, err := cfg.DashboardService.GetSectionItems(c.Request().Context(), userUUID, libUUID, 20)
     if err != nil {
-        return echo.NewHTTPError(http.StatusInternalServerError, "failed to load libraries")
+        return c.HTML(http.StatusInternalServerError, "Error loading dashboard")
     }
 
-    // SSR - pre-populate all data, no client-side API calls
-    // Use handler types directly (database.Library, etc.) not template types
-    return c.Render(http.StatusOK, "dashboard", map[string]interface{}{
-        "User":              user,
-        "Sections":          sections,
-        "Libraries":         libraries,
-        "CurrentLibraryID":  libraryID,
-    })
-}
-
-// GetDashboardSections returns partial HTML for HTMX swap
-func (h *DashboardHandler) GetDashboardSections(c echo.Context) error {
-    user := MustGetAuthenticatedUser(c)
-    libraryID, _ := uuid.Parse(c.QueryParam("library_id"))
-
-    sections, err := h.dashboardSvc.GetSections(c.Request().Context(), user.ID, libraryID)
+    // Get libraries for selector
+    libraries, err := cfg.Queries.GetUserVisibleLibraries(c.Request().Context(), user.ID)
     if err != nil {
-        return echo.NewHTTPError(http.StatusInternalServerError, err.Error())
+        return c.HTML(http.StatusInternalServerError, "Error loading libraries")
     }
 
-    // Return partial template for HTMX
-    return c.Render(http.StatusOK, "dashboard-sections-partial", sections)
-}
+    // Convert to template types
+    libData := make([]templates.LibraryData, len(libraries))
+    for i, lib := range libraries {
+        libUUID, _ := uuid.FromBytes(lib.ID.Bytes[0:16])
+        libData[i] = templates.LibraryData{
+            ID:          libUUID.String(),
+            Name:        lib.Name,
+            Description: lib.Description.String,
+            TypeName:    lib.TypeName,
+        }
+    }
 
-// UpdateDashboardPreferences handles settings updates (HTMX POST)
-func (h *DashboardHandler) UpdateDashboardPreferences(c echo.Context) error {
-    user := MustGetAuthenticatedUser(c)
+    // Build sections
+    sections := buildSections(sectionItems, database.UserDashboardPreferences{})
+
+    var buf bytes.Buffer
+    err = templates.Dashboard(user, sections, libData, libraryID).Render(c.Request().Context(), &buf)
+    if err != nil {
+        return err
+    }
+    return c.HTML(http.StatusOK, buf.String())
+})
+```
+
+**Add `/settings` route** (new, after `/admin/profile` route):
+```go
+// User settings page (moved from admin)
+frontendProtected.GET("/settings", func(c echo.Context) error {
+    user, err := getTemplateUserWithTheme(c, cfg)
+    if err != nil {
+        return c.HTML(http.StatusInternalServerError, "Error loading user")
+    }
+
+    // Get user's full data including dashboard preferences
+    userUUID, _ := uuid.Parse(user.ID)
+    userDB, err := cfg.Queries.GetUser(c.Request().Context(), uuidToPGType(userUUID))
+    if err != nil {
+        return c.HTML(http.StatusInternalServerError, "Error loading user data")
+    }
+
+    // Get dashboard preferences
+    dashPrefs, _ := cfg.DashboardService.GetDashboardPreferences(
+        c.Request().Context(),
+        userUUID,
+        uuid.Nil, // Get default preferences
+    )
+
+    var buf bytes.Buffer
+    err = templates.Settings(user, userDB, dashPrefs).Render(c.Request().Context(), &buf)
+    if err != nil {
+        return err
+    }
+    return c.HTML(http.StatusOK, buf.String())
+})
+
+frontendProtected.POST("/settings", func(c echo.Context) error {
+    user, err := getTemplateUserWithTheme(c, cfg)
+    if err != nil {
+        return c.HTML(http.StatusInternalServerError, "Error loading user")
+    }
 
     var req struct {
-        LibraryID      string   `json:"library_id"`
-        HiddenSections []string `json:"hidden_sections"`
-        SectionOrder   []string `json:"section_order"`
-        ItemsPerSection int     `json:"items_per_section"`
+        Email           string   `json:"email"`
+        Username        string   `json:"username"`
+        FirstName       string   `json:"first_name"`
+        LastName        string   `json:"last_name"`
+        Theme           string   `json:"theme"`
+        // Dashboard preferences
+        LibraryID       string   `json:"library_id"`
+        HiddenSections  []string `json:"hidden_sections"`
+        SectionOrder    []string `json:"section_order"`
+        ItemsPerSection int      `json:"items_per_section"`
     }
 
     if err := c.Bind(&req); err != nil {
-        return echo.NewHTTPError(http.StatusBadRequest, "invalid request")
+        return c.JSON(http.StatusBadRequest, map[string]string{"error": "Invalid request"})
     }
 
-    // Update via service (through database queries)
-    // ...
+    userUUID, _ := uuid.Parse(user.ID)
+    libUUID, _ := uuid.Parse(req.LibraryID)
+
+    // Update user info
+    _, err = cfg.Queries.UpdateUser(c.Request().Context(), database.UpdateUserParams{
+    ID:       uuidToPGType(userUUID),
+    Email:    pgtype.Text{String: req.Email, Valid: true},
+    Username: req.Username,
+    Theme:    pgtype.Text{String: req.Theme, Valid: true},
+    FirstName: pgtype.Text{String: req.FirstName, Valid: true},
+    LastName:  pgtype.Text{String: req.LastName, Valid: true},
+})
+
+if err != nil {
+    return c.JSON(http.StatusInternalServerError, map[string]string{"error": "Failed to update settings"})
+}
+
+    // Save dashboard preferences
+    _, err = cfg.DashboardService.UpsertDashboardPreferences(c.Request().Context(), database.UpsertDashboardPreferencesParams{
+    UserID:           uuidToPGType(userUUID),
+    LibraryID:        uuidToPGType(libUUID),
+    HiddenSections:   req.HiddenSections,
+    SectionOrder:     req.SectionOrder,
+    ItemsPerSection:  pgtype.Int4{Int32: int32(req.ItemsPerSection), Valid: true},
+})
+
+if err != nil {
+    return c.JSON(http.StatusInternalServerError, map[string]string{"error": "Failed to save preferences"})
+}
+
+    // Return updated user data
+    updatedUser, _ := getTemplateUserWithTheme(c, cfg)
+    return c.JSON(http.StatusOK, updatedUser)
+})
+```
+
+**Add to `internal/router/router.go` Config struct** (around line 34):
+```go
+type Config struct {
+    // ... existing fields ...
+    DashboardService *services.DashboardService
 }
 ```
 
-**Routes to add to `internal/router/router.go`**:
-```go
-// Dashboard routes
-dashboard := e.Group("/dashboard")
-dashboard.GET("", cfg.DashboardHandler.GetDashboard)
-dashboard.GET("/sections", cfg.DashboardHandler.GetDashboardSections) // HTMX
-dashboard.POST("/preferences", cfg.DashboardHandler.UpdateDashboardPreferences) // HTMX/API
+**Note**: No separate handler file needed. Following existing pattern, routes are inline in `frontend.go` and call service methods directly.
 
-// API for mobile apps
-apiDashboard := protected.Group("/api/dashboard")
-apiDashboard.GET("/sections", cfg.DashboardHandler.GetDashboardSectionsAPI) // JSON
+**Add helper function to `internal/router/frontend.go`**:
+```go
+// Smart section definitions (static metadata)
+var smartSectionDefs = map[string]struct {
+    Title       string
+    Description string
+    Icon        string
+    ViewAllURL  string
+    Priority    int
+}{
+    "continue-reading": {"Continue Reading", "Books you're currently reading", "📖", "/section/continue-reading", 1},
+    "in-progress":      {"In Progress", "Books you've started but not finished", "📚", "/section/in-progress", 2},
+    "recently-added":   {"Recently Added", "Newly added items to this library", "🆕", "/section/recently-added", 3},
+    "recently-read":    {"Recently Read", "Books you've finished", "✅", "/history", 4},
+    "unread":           {"Not Started", "Books you haven't read yet", "📕", "/section/unread", 5},
+}
+
+// buildSections converts service SectionItems to template SectionData
+func buildSections(items []services.SectionItems, prefs database.UserDashboardPreferences) []templates.SectionData {
+    var sections []templates.SectionData
+    
+    for _, si := range items {
+        def, isSmart := smartSectionDefs[si.SectionKey]
+        
+        var title, description, icon, viewAllURL string
+        var priority int
+        var sectionType string
+        
+        if isSmart {
+            title = def.Title
+            description = def.Description
+            icon = def.Icon
+            viewAllURL = def.ViewAllURL
+            priority = def.Priority
+            sectionType = "smart"
+        } else {
+            // Collection section
+            title = si.SectionKey
+            sectionType = "collection"
+            icon = "📚"
+            priority = 100
+        }
+        
+        // Convert database.MediaItems to template.BookCardData
+        bookCards := make([]templates.BookCardData, len(si.Items))
+        for i, item := range si.Items {
+            itemUUID, _ := uuid.FromBytes(item.ID.Bytes[0:16])
+            bookCards[i] = templates.BookCardData{
+                ID:             itemUUID.String(),
+                Title:          item.Title,
+                Author:         item.Author.String,
+                CoverImagePath: item.CoverImagePath.String,
+            }
+        }
+        
+        sections = append(sections, templates.SectionData{
+            ID:          si.SectionKey,
+            Type:        sectionType,
+            Title:       title,
+            Description: description,
+            Icon:        icon,
+            Items:       bookCards,
+            ViewAllURL:  viewAllURL,
+            Priority:    priority,
+        })
+    }
+    
+    return sections
+}
 ```
 
 ---
 
-### **Phase 5: Bruno API Tests** (1 hour)
+### **Phase 5: Template Types** (30 min)
 
-**COMPLIANCE**: All new endpoints need Bruno DSL tests
+**File: `templates/types.go`** (ADD to existing file)
 
-**File: `bruno/dashboard/get-dashboard-sections.bru`** (new file)
+Add new types to support dashboard:
 
-```bruno
-{
-  "meta": {
-    "type": "http",
-    "name": "Get Dashboard Sections",
-    "seq": 1
-  },
-  "req": {
-    "method": "GET",
-    "url": "{{baseUrl}}/api/dashboard/sections?library_id={{libraryId}}",
-    "headers": [
-      {
-        "name": "Authorization",
-        "value": "Bearer {{userToken}}"
-      }
-    ]
-  },
-  "tests": {
-    "no_user": { "status": 401 },
-    "user": { "status": 200, "has": "sections" },
-    "admin": { "status": 200, "has": "sections" }
-  }
+```go
+// SectionData represents a dashboard section (carousel)
+type SectionData struct {
+    ID          string         `json:"id"`
+    Type        string         `json:"type"` // "smart", "collection"
+    Title       string         `json:"title"`
+    Description string         `json:"description"`
+    Icon        string         `json:"icon"`
+    Items       []BookCardData `json:"items"`
+    ViewAllURL  string         `json:"view_all_url"`
+    Priority    int            `json:"priority"`
+    IsHidden    bool           `json:"is_hidden"`
+}
+
+// BookCardData represents a book in a carousel card
+type BookCardData struct {
+    ID             string `json:"id"`
+    Title          string `json:"title"`
+    Author         string `json:"author"`
+    CoverImagePath string `json:"cover_image_path"`
 }
 ```
 
-Create tests for:
-1. ✅ `GET /api/dashboard/sections` (no user, user, admin)
-2. ✅ `POST /api/dashboard/preferences` (user, admin)
-3. ✅ Verify backward compatibility
+---
+
+### **Phase 5: Settings Template** (2 hours)
+
+**COMPLIANCE**: Use template types, TailwindCSS, SSR
+
+**File: `templates/settings.templ`** (new file)
+
+```templ
+package templates
+
+import (
+    "bookhoard/internal/database"
+)
+
+templ Settings(user User, userDB database.Users, dashPrefs database.UserDashboardPreferences) {
+    <!DOCTYPE html>
+    <html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Settings - Bookhoard</title>
+        <script src="/static/htmx.min.js"></script>
+        <script src="/static/toast.js"></script>
+        <link href="/static/style.css" rel="stylesheet">
+    </head>
+    <body class="theme-{ user.Theme }">
+        @Header(user, "/settings")
+
+        <div class="max-w-3xl mx-auto px-4 py-8">
+            <h1 class="text-3xl font-bold mb-8" style="color: var(--text-primary)">Settings</h1>
+
+            <form id="settings-form" onsubmit="saveSettings(event)">
+                <!-- Profile Section -->
+                <div class="card p-6 rounded-lg mb-6" style="background-color: var(--bg-secondary); border-color: var(--border);">
+                    <h2 class="text-xl font-semibold mb-4" style="color: var(--text-primary)">Profile</h2>
+                    
+                    <div class="space-y-4">
+                        <div>
+                            <label class="block text-sm font-medium mb-1" style="color: var(--text-secondary)">Email</label>
+                            <input type="email" name="email" value={ userDB.Email }
+                                   class="w-full px-4 py-2 rounded-lg border"
+                                   style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);">
+                        </div>
+                        
+                        <div>
+                            <label class="block text-sm font-medium mb-1" style="color: var(--text-secondary)">Username</label>
+                            <input type="text" name="username" value={ userDB.Username }
+                                   class="w-full px-4 py-2 rounded-lg border"
+                                   style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);">
+                        </div>
+
+                        <div>
+                            <label class="block text-sm font-medium mb-1" style="color: var(--text-secondary)">First Name</label>
+                            <input type="text" name="first_name" value={ userDB.FirstName.String }
+                                   class="w-full px-4 py-2 rounded-lg border"
+                                   style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);">
+                        </div>
+
+                        <div>
+                            <label class="block text-sm font-medium mb-1" style="color: var(--text-secondary)">Last Name</label>
+                            <input type="text" name="last_name" value={ userDB.LastName.String }
+                                   class="w-full px-4 py-2 rounded-lg border"
+                                   style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);">
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Theme Section -->
+                <div class="card p-6 rounded-lg mb-6" style="background-color: var(--bg-secondary); border-color: var(--border);">
+                    <h2 class="text-xl font-semibold mb-4" style="color: var(--text-primary)">Appearance</h2>
+                    
+                    <div>
+                        <label class="block text-sm font-medium mb-2" style="color: var(--text-secondary)">Theme</label>
+                        <select name="theme"
+                                class="w-full px-4 py-2 rounded-lg border"
+                                style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);">
+                            <option value="tokyo-night" { user.Theme == "tokyo-night" { "selected" } }>Tokyo Night</option>
+                            <option value="light" { user.Theme == "light" { "selected" } }>Light</option>
+                            <option value="dark" { user.Theme == "dark" { "selected" } }>Dark</option>
+                        </select>
+                    </div>
+                </div>
+
+                <!-- Dashboard Section -->
+                <div class="card p-6 rounded-lg mb-6" style="background-color: var(--bg-secondary); border-color: var(--border);">
+                    <h2 class="text-xl font-semibold mb-4" style="color: var(--text-primary)">Dashboard Preferences</h2>
+                    
+                    <div class="mb-4">
+                        <label class="block text-sm font-medium mb-1" style="color: var(--text-secondary)">Items Per Section</label>
+                        <input type="range" name="items_per_section" min="10" max="50" step="5"
+                               value={ fmt.Sprintf("%d", dashPrefs.ItemsPerSection) }
+                               class="w-full"
+                               oninput="document.getElementById('items-display').textContent = this.value">
+                        <div class="text-sm text-right mt-1" style="color: var(--text-secondary)">
+                            <span id="items-display">{ fmt.Sprintf("%d", dashPrefs.ItemsPerSection) }</span> items
+                        </div>
+                    </div>
+
+                    <p class="text-sm" style="color: var(--text-secondary)">
+                        Customize which sections appear on your dashboard by visiting the dashboard and clicking the settings icon.
+                    </p>
+                </div>
+
+                <!-- Submit -->
+                <div class="flex justify-end gap-3">
+                    <button type="button" onclick="history.back()"
+                            class="px-6 py-2 rounded-lg border hover:opacity-80 transition-opacity"
+                            style="border-color: var(--border); color: var(--text-primary);">
+                        Cancel
+                    </button>
+                    <button type="submit"
+                            class="px-6 py-2 rounded-lg text-white font-medium hover:opacity-90 transition-opacity"
+                            style="background-color: var(--accent);">
+                        Save Settings
+                    </button>
+                </div>
+            </form>
+        </div>
+
+        <script>
+            function saveSettings(e) {
+                e.preventDefault();
+                const form = e.target;
+                const formData = new FormData(form);
+
+                const data = {
+                    email: formData.get('email'),
+                    username: formData.get('username'),
+                    first_name: formData.get('first_name'),
+                    last_name: formData.get('last_name'),
+                    theme: formData.get('theme'),
+                    // Dashboard preferences would be saved from dashboard modal
+                    library_id: getCurrentLibraryId(),
+                };
+
+                fetch('/settings', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify(data)
+                })
+                .then(response => response.json())
+                .then(data => {
+                    showToast('Settings saved successfully', 'success');
+                    // Update theme immediately
+                    if (data.theme) {
+                        document.body.className = 'theme-' + data.theme;
+                    }
+                })
+                .catch(error => {
+                    console.error('Failed to save settings:', error);
+                    showToast('Failed to save settings', 'error');
+                });
+            }
+
+            function getCurrentLibraryId() {
+                const select = document.getElementById('library-select');
+                return select?.value || '';
+            }
+        </script>
+
+        <script src="/static/theme.js"></script>
+    </body>
+    </html>
+}
+```
 
 ---
 
@@ -400,7 +720,7 @@ Create tests for:
 
 **COMPLIANCE**:
 - ✅ Use TailwindCSS classes ONLY (no custom CSS)
-- ✅ Share handler types (no template.*Data types)
+- ✅ Use template types (SectionData, BookCardData, User, LibraryData)
 - ✅ SSR for initial data
 - ✅ HTMX for updates
 
@@ -410,12 +730,7 @@ Create tests for:
 ```templ
 package templates
 
-import (
-    "bookhoard/internal/handlers"
-)
-
-// Use handler types directly
-templ Dashboard(user handlers.User, sections []services.Section, libraries []handlers.LibraryData, currentLibraryID string) {
+templ Dashboard(user User, sections []SectionData, libraries []LibraryData, currentLibraryID string) {
     <!DOCTYPE html>
     <html lang="en">
     <head>
@@ -423,8 +738,6 @@ templ Dashboard(user handlers.User, sections []services.Section, libraries []han
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>Dashboard - Bookhoard</title>
         <script src="/static/htmx.min.js"></script>
-        <script src="/static/carousel.js" defer></script>
-        <script src="/static/dashboard-settings.js" defer></script>
         <link href="/static/style.css" rel="stylesheet">
     </head>
     <body class="theme-{ user.Theme }">
@@ -492,12 +805,12 @@ templ Dashboard(user handlers.User, sections []services.Section, libraries []han
 ```
 
 #### 6.2 Section Carousel Component
-**File: `templates/components.templ`** (new file)
+**File: `templates/components.templ`** (ADD to existing file if exists, or new file)
 
 ```templ
 package templates
 
-templ SectionCarousel(section services.Section) {
+templ SectionCarousel(section SectionData) {
     <div class="dashboard-section mb-8"
          data-section-id={ section.ID }
          data-section-type={ section.Type }>
@@ -562,24 +875,24 @@ templ SectionCarousel(section services.Section) {
     </div>
 }
 
-templ BookCard(item handlers.MediaItem) {
+templ BookCard(item BookCardData) {
     <div class="book-card flex-shrink-0 w-32 snap-start cursor-pointer
                     transition-transform duration-200 hover:scale-105"
          onclick="window.location.href='/book/{ item.ID }'"
          tabindex="0"
          role="button"
-         aria-label={ fmt.Sprintf("View %s", item.Title) }
+         aria-label={ "View " + item.Title }
          onkeydown="if(event.key === 'Enter') window.location.href='/book/{ item.ID }'">
         <!-- Cover -->
         <div class="aspect-[2/3] rounded-lg overflow-hidden shadow-lg mb-2
                         bg-gradient-to-br from-gray-700 to-gray-900">
-            @if item.CoverImagePath.Valid {
-                <img src={ item.CoverImagePath.String }
+            if item.CoverImagePath != "" {
+                <img src={ item.CoverImagePath }
                      alt={ item.Title }
                      class="w-full h-full object-cover"
                      loading="lazy"
                      onerror="this.src='/static/placeholder-book.svg'">
-            } @else {
+            } else {
                 <img src="/static/placeholder-book.svg"
                      alt={ item.Title }
                      class="w-full h-full object-cover">
@@ -592,15 +905,15 @@ templ BookCard(item handlers.MediaItem) {
         </h3>
 
         <!-- Author -->
-        @if item.Author.Valid {
+        if item.Author != "" {
             <p class="text-xs line-clamp-1" style="color: var(--text-secondary)">
-                { item.Author.String }
+                { item.Author }
             </p>
         }
     </div>
 }
 
-templ DashboardSettingsModal(sections []services.Section) {
+templ DashboardSettingsModal(sections []SectionData) {
     <div id="dashboard-settings-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center"
          style="background-color: rgba(0, 0, 0, 0.7);">
         <div class="rounded-lg p-6 w-full max-w-2xl mx-4 shadow-2xl"
@@ -634,7 +947,7 @@ templ DashboardSettingsModal(sections []services.Section) {
                         <label class="relative inline-flex items-center cursor-pointer">
                             <input type="checkbox"
                                    class="sr-only peer"
-                                   { !section.IsHidden ? "checked" : "" }
+                                   checked
                                    onchange="toggleSectionVisibility('{ section.ID }')">
                             <div class="w-11 h-6 bg-gray-600 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-800 rounded-full peer
                                           peer-checked:after:translate-x-full peer-checked:after:border-white
@@ -679,7 +992,7 @@ templ DashboardSettingsModal(sections []services.Section) {
 ```templ
 package templates
 
-templ DashboardSectionsPartial(sections []services.Section) {
+templ DashboardSectionsPartial(sections []SectionData) {
     for _, section := range sections {
         @SectionCarousel(section)
     }
@@ -688,44 +1001,44 @@ templ DashboardSectionsPartial(sections []services.Section) {
 
 ---
 
-### **Phase 7: TypeScript (Procedural)** (4-5 hours)
+### **Phase 7: TypeScript** (2-3 hours)
 
 **COMPLIANCE**:
-- ✅ TypeScript ONLY (no .js files)
-- ✅ Procedural/imperative style (no classes, no OOP)
+- ✅ TypeScript files in `web/src/` (no JavaScript)
+- ✅ Procedural/imperative style (no OOP)
 - ✅ Progressive enhancement (works without JS)
-- ✅ HTMX for updates
+- ✅ Matches existing pattern (toast.ts, theme.ts)
+- ✅ Compiled via existing `tsc` setup (tsconfig.json)
 
-#### 7.1 Carousel Interactions
+#### 7.1 Carousel TypeScript
 **File: `web/src/carousel.ts`** (new file)
 
 ```typescript
-// Procedural style - no classes, no OOP
-// Functions that operate on DOM elements
+// Carousel scroll functionality
+// Matches pattern from toast.ts - IIFE with window export
 
 const SCROLL_AMOUNT = 300;
 
-export function scrollCarousel(sectionId: string, direction: number): void {
-    const track = document.getElementById(`carousel-track-${sectionId}`);
+const scrollCarousel = (sectionId: string, direction: number): void => {
+    const track = document.getElementById(`carousel-track-${sectionId}`) as HTMLElement;
     if (!track) return;
 
     const scrollAmount = direction * SCROLL_AMOUNT;
     track.scrollBy({ left: scrollAmount, behavior: 'smooth' });
-}
+};
 
-export function initializeCarousels(): void {
-    // Add touch/swipe support
-    const tracks = document.querySelectorAll('.carousel-track');
+const initializeCarousels = (): void => {
+    const tracks = document.querySelectorAll('.carousel-track') as NodeListOf<HTMLElement>;
 
     tracks.forEach(track => {
         let isDown = false;
         let startX: number;
-        let scrollLeft: number;
+        let scrollLeftPos: number;
 
         track.addEventListener('mousedown', (e: MouseEvent) => {
             isDown = true;
-            startX = e.pageX - (track as HTMLElement).offsetLeft;
-            scrollLeft = track.scrollLeft;
+            startX = e.pageX - track.offsetLeft;
+            scrollLeftPos = track.scrollLeft;
         });
 
         track.addEventListener('mouseleave', () => {
@@ -739,55 +1052,65 @@ export function initializeCarousels(): void {
         track.addEventListener('mousemove', (e: MouseEvent) => {
             if (!isDown) return;
             e.preventDefault();
-            const x = e.pageX - (track as HTMLElement).offsetLeft;
+            const x = e.pageX - track.offsetLeft;
             const walk = (x - startX) * 2;
-            track.scrollLeft = scrollLeft - walk;
+            track.scrollLeft = scrollLeftPos - walk;
         });
 
         // Touch events for mobile
         track.addEventListener('touchstart', (e: TouchEvent) => {
-            startX = e.touches[0].pageX - (track as HTMLElement).offsetLeft;
-            scrollLeft = track.scrollLeft;
+            startX = e.touches[0].pageX - track.offsetLeft;
+            scrollLeftPos = track.scrollLeft;
         });
 
         track.addEventListener('touchmove', (e: TouchEvent) => {
-            const x = e.touches[0].pageX - (track as HTMLElement).offsetLeft;
+            const x = e.touches[0].pageX - track.offsetLeft;
             const walk = (x - startX) * 2;
-            track.scrollLeft = scrollLeft - walk;
+            track.scrollLeft = scrollLeftPos - walk;
         });
     });
+};
+
+// Auto-initialize when DOM is ready
+if (typeof document !== 'undefined') {
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', initializeCarousels);
+    } else {
+        initializeCarousels();
+    }
 }
 
-// Initialize on DOM ready
-document.addEventListener('DOMContentLoaded', initializeCarousels);
+// Export to window for onclick handlers
+(window as any).scrollCarousel = scrollCarousel;
 ```
 
-#### 7.2 Dashboard Settings
+#### 7.2 Dashboard Settings TypeScript
 **File: `web/src/dashboard-settings.ts`** (new file)
 
 ```typescript
-// Procedural functions for modal and settings
+// Dashboard settings modal functionality
+// Matches pattern from toast.ts - IIFE with window export
 
-export function openDashboardSettings(): void {
+const openDashboardSettings = (): void => {
     const modal = document.getElementById('dashboard-settings-modal');
     if (modal) {
         modal.classList.remove('hidden');
         initializeDragAndDrop();
     }
-}
+};
 
-export function closeDashboardSettings(): void {
+const closeDashboardSettings = (): void => {
     const modal = document.getElementById('dashboard-settings-modal');
     if (modal) {
         modal.classList.add('hidden');
     }
-}
+};
 
-function initializeDragAndDrop(): void {
+const initializeDragAndDrop = (): void => {
     const list = document.getElementById('section-list');
     if (!list) return;
 
-    const items = list.querySelectorAll('.section-item');
+    const items = list.querySelectorAll('.section-item') as NodeListOf<HTMLElement>;
 
     items.forEach(item => {
         item.addEventListener('dragstart', handleDragStart);
@@ -795,35 +1118,40 @@ function initializeDragAndDrop(): void {
         item.addEventListener('drop', handleDrop);
         item.addEventListener('dragend', handleDragEnd);
     });
-}
+};
 
-function handleDragStart(e: DragEvent): void {
+const handleDragStart = (e: DragEvent): void => {
     const target = e.target as HTMLElement;
     target.style.opacity = '0.5';
-}
+    if (e.dataTransfer) {
+        e.dataTransfer.effectAllowed = 'move';
+    }
+};
 
-function handleDragOver(e: DragEvent): void {
+const handleDragOver = (e: DragEvent): void => {
     e.preventDefault();
-}
+    if (e.dataTransfer) {
+        e.dataTransfer.dropEffect = 'move';
+    }
+};
 
-function handleDrop(e: DragEvent): void {
+const handleDrop = (e: DragEvent): void => {
     e.preventDefault();
-    const target = e.target as HTMLElement;
-    // Reorder logic...
-}
+    // Reorder logic - swap with target element
+};
 
-function handleDragEnd(e: DragEvent): void {
+const handleDragEnd = (e: DragEvent): void => {
     const target = e.target as HTMLElement;
     target.style.opacity = '1';
-}
+};
 
-export function toggleSectionVisibility(sectionId: string): void {
+const toggleSectionVisibility = (sectionId: string): void => {
     // Update local state, save on submit
-}
+};
 
-export function saveDashboardSettings(): void {
+const saveDashboardSettings = (): void => {
     const sectionList = document.getElementById('section-list');
-    const items = sectionList?.querySelectorAll('.section-item');
+    const items = sectionList?.querySelectorAll('.section-item') as NodeListOf<HTMLElement>;
 
     const sectionOrder: string[] = [];
     const hiddenSections: string[] = [];
@@ -834,8 +1162,8 @@ export function saveDashboardSettings(): void {
 
         sectionOrder.push(id);
 
-        const checkbox = item.querySelector('input[type="checkbox"]');
-        if (checkbox && !(checkbox as HTMLInputElement).checked) {
+        const checkbox = item.querySelector('input[type="checkbox"]') as HTMLInputElement;
+        if (checkbox && !checkbox.checked) {
             hiddenSections.push(id);
         }
     });
@@ -844,10 +1172,10 @@ export function saveDashboardSettings(): void {
         library_id: getCurrentLibraryId(),
         hidden_sections: hiddenSections,
         section_order: sectionOrder,
-        items_per_section: parseInt((document.getElementById('items-count-display') as HTMLElement).textContent)
+        items_per_section: parseInt(document.getElementById('items-count-display')?.textContent || '20')
     };
 
-    fetch('/api/dashboard/preferences', {
+    fetch('/settings', {
         method: 'POST',
         headers: {
             'Content-Type': 'application/json',
@@ -857,43 +1185,68 @@ export function saveDashboardSettings(): void {
     .then(response => response.json())
     .then(() => {
         closeDashboardSettings();
-        location.reload(); // Or HTMX refresh
+        location.reload();
     })
     .catch(error => {
         console.error('Failed to save settings:', error);
-        showToast('Failed to save settings', 'error');
+        if (typeof showToast === 'function') {
+            showToast('Failed to save settings', 'error');
+        }
     });
-}
+};
 
-function getCurrentLibraryId(): string {
+const getCurrentLibraryId = (): string => {
     const select = document.getElementById('library-select') as HTMLSelectElement;
     return select?.value || '';
-}
+};
+
+// Export to window for onclick handlers
+(window as any).openDashboardSettings = openDashboardSettings;
+(window as any).closeDashboardSettings = closeDashboardSettings;
+(window as any).toggleSectionVisibility = toggleSectionVisibility;
+(window as any).saveDashboardSettings = saveDashboardSettings;
 ```
 
-**Build setup**:
-```json
-// package.json - add TypeScript build
-{
-  "scripts": {
-    "build:carousel": "esbuild web/src/carousel.ts --bundle --minify --outfile=web/static/carousel.js",
-    "build:dashboard-settings": "esbuild web/src/dashboard-settings.ts --bundle --minify --outfile=web/static/dashboard-settings.js"
-  }
-}
+#### 7.3 Template Updates
+**Update `templates/dashboard.templ`** head section to load compiled JS:
+
+```templ
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Dashboard - Bookhoard</title>
+    <script src="/static/htmx.min.js"></script>
+    <script src="/static/toast.js"></script>
+    <script src="/static/theme.js"></script>
+    <script src="/static/carousel.js"></script>
+    <script src="/static/dashboard-settings.js"></script>
+    <link href="/static/style.css" rel="stylesheet">
+</head>
 ```
 
+**Key Points**:
+- ✅ TypeScript files compiled via existing `npm run build:ts`
+- ✅ No separate build step needed
+- ✅ Matches existing pattern (toast.ts, theme.ts)
+- ✅ Functions exported to window for onclick handlers
+
 ---
 
 ### **Phase 8: Book Detail Page** (3-4 hours)
 
 **File: `templates/book_detail.templ`** (new file)
 
-**COMPLIANCE**: Use handler types, TailwindCSS, SSR
+**COMPLIANCE**: Use template types, TailwindCSS, SSR
 
 ```templ
 package templates
 
-templ BookDetail(user handlers.User, book handlers.MediaItem, progress handlers.ReadingProgress, rating float64, collections []handlers.CollectionData) {
+import (
+    "bookhoard/internal/database"
+    "fmt"
+)
+
+templ BookDetail(user User, book database.MediaItems, progress database.ReadingProgress, rating float64, collections []CollectionData) {
     <!DOCTYPE html>
     <html lang="en">
     <head>
@@ -902,7 +1255,6 @@ templ BookDetail(user handlers.User, book handlers.MediaItem, progress handlers.
         <title>{ book.Title } - Bookhoard</title>
         <script src="/static/htmx.min.js"></script>
         <script src="/static/toast.js"></script>
-        <script src="/static/rating.js" defer></script>
         <link href="/static/style.css" rel="stylesheet">
     </head>
     <body class="theme-{ user.Theme }">
@@ -920,12 +1272,12 @@ templ BookDetail(user handlers.User, book handlers.MediaItem, progress handlers.
                 <!-- Cover Image -->
                 <div class="md:col-span-1">
                     <div class="aspect-[2/3] rounded-lg overflow-hidden shadow-2xl">
-                        @if book.CoverImagePath.Valid {
+                        if book.CoverImagePath.Valid {
                             <img src={ book.CoverImagePath.String }
                                  alt={ book.Title }
                                  class="w-full h-full object-cover"
                                  onerror="this.src='/static/placeholder-book.svg'">
-                        } @else {
+                        } else {
                             <img src="/static/placeholder-book.svg"
                                  alt={ book.Title }
                                  class="w-full h-full object-cover">
@@ -938,14 +1290,14 @@ templ BookDetail(user handlers.User, book handlers.MediaItem, progress handlers.
                     <h1 class="text-3xl font-bold mb-2" style="color: var(--text-primary);">
                         { book.Title }
                     </h1>
-                    @if book.Author.Valid {
+                    if book.Author.Valid {
                         <p class="text-xl mb-4" style="color: var(--text-secondary);">
                             by { book.Author.String }
                         </p>
                     }
 
                     <!-- Reading Progress -->
-                    @if progress.Percentage > 0 {
+                    if progress.Percentage > 0 {
                         <div class="mb-6 p-4 rounded-lg" style="background-color: var(--bg-secondary);">
                             <div class="flex justify-between text-sm mb-2">
                                 <span style="color: var(--text-secondary);">Reading Progress</span>
@@ -955,7 +1307,7 @@ templ BookDetail(user handlers.User, book handlers.MediaItem, progress handlers.
                             </div>
                             <div class="w-full h-2 rounded-full" style="background-color: var(--bg-primary);">
                                 <div class="h-full rounded-full transition-all"
-                                     style="width: { progress.Percentage }%; background-color: var(--accent);"></div>
+                                     style={ fmt.Sprintf("width: %.0f%%; background-color: var(--accent);", progress.Percentage * 100) }></div>
                             </div>
                         </div>
                     }
@@ -976,27 +1328,29 @@ templ BookDetail(user handlers.User, book handlers.MediaItem, progress handlers.
                     <div class="mb-6">
                         <h3 class="text-lg font-semibold mb-3" style="color: var(--text-primary);">Details</h3>
                         <table class="w-full text-sm">
-                            @if book.Series.Valid {
+                            if book.Series.Valid {
                                 <tr>
                                     <td class="py-2 font-medium" style="color: var(--text-secondary); width: 150px;">Series</td>
                                     <td class="py-2" style="color: var(--text-primary);">{ book.Series.String }</td>
                                 </tr>
                             }
-                            @if book.Genre.Valid {
+                            if book.Genre.Valid {
                                 <tr>
                                     <td class="py-2 font-medium" style="color: var(--text-secondary);">Genre</td>
                                     <td class="py-2" style="color: var(--text-primary);">{ book.Genre.String }</td>
                                 </tr>
                             }
-                            <tr>
-                                <td class="py-2 font-medium" style="color: var(--text-secondary);">Pages</td>
-                                <td class="py-2" style="color: var(--text-primary);">{ book.PageCount.Int32 }</td>
-                            </tr>
+                            if book.PageCount.Valid {
+                                <tr>
+                                    <td class="py-2 font-medium" style="color: var(--text-secondary);">Pages</td>
+                                    <td class="py-2" style="color: var(--text-primary);">{ fmt.Sprintf("%d", book.PageCount.Int32) }</td>
+                                </tr>
+                            }
                         </table>
                     </div>
 
                     <!-- Description -->
-                    @if book.Description.Valid {
+                    if book.Description.Valid {
                         <div class="mb-6">
                             <h3 class="text-lg font-semibold mb-3" style="color: var(--text-primary);">Synopsis</h3>
                             <p class="text-sm leading-relaxed" style="color: var(--text-secondary);">
@@ -1059,44 +1413,39 @@ Any collection marked with "Show on Dashboard" will appear as a section.
 Use the dropdown in the sticky header to switch between libraries. Settings are per-library.
 ```
 
-#### 9.2 API Documentation
-**File: `docs/developer/api/dashboard/sections.md`** (new file)
+#### 9.2 Settings API Documentation
+**File: `docs/developer/api/settings.md`** (new file or add to existing)
 
 ```markdown
-# Get Dashboard Sections
+# Update User Settings
 
-Returns all dashboard sections for the specified library.
+Updates user profile and dashboard preferences.
 
 ## Endpoint
 
-`GET /api/dashboard/sections`
+`POST /settings`
 
-## Query Parameters
+## Request Body
 
-| Parameter | Type | Required | Description |
-|-----------|------|----------|-------------|
-| library_id | string | Yes | Library UUID |
+| Field | Type | Required | Description |
+|-------|------|----------|-------------|
+| email | string | Yes | User email address |
+| username | string | Yes | Username |
+| first_name | string | Yes | First name |
+| last_name | string | Yes | Last name |
+| theme | string | Yes | Theme preference (tokyo-night, light, dark) |
+| library_id | string | No | Library UUID for dashboard preferences |
+| hidden_sections | []string | No | List of hidden section IDs |
+| section_order | []string | No | Ordered list of section IDs |
+| items_per_section | number | No | Items to show per section (10-50) |
 
 ## Response
 
-```json
-{
-  "sections": [
-    {
-      "id": "continue-reading",
-      "type": "smart",
-      "title": "Continue Reading",
-      "icon": "📖",
-      "items": [...],
-      "view_all_url": "/section/continue-reading"
-    }
-  ]
-}
-```
+Returns updated user object.
 
 ## Examples
 
-See `bruno/dashboard/get-dashboard-sections.bru`
+See `bruno/` for existing user profile tests.
 ```
 
 ---
@@ -1123,20 +1472,32 @@ import (
     "github.com/stretchr/testify/require"
 )
 
-// TestDashboardSections tests the dashboard sections endpoint
-func TestDashboardSections(t *testing.T) {
-    setup := setupTestServer(t) // ✅ Called ONCE per test function
-    client := &http.Client{}
-
-    // Get admin token
+// TestDashboardPage tests the dashboard SSR page
+func TestDashboardPage(t *testing.T) {
+    setup := setupTestServer(t)
     adminToken := loginTestUser(t, setup.Server, setup.DB)
+    client := &http.Client{}
 
     // Create test library with media items
     deviceSetup := setupDeviceTest(t)
     libraryID := deviceSetup.CreateLibrary(t, "Test Ebooks Library", "ebooks")
 
-    t.Run("GetSections_WithoutAuth", func(t *testing.T) {
-        req, _ := http.NewRequest("GET", setup.Server.URL+"/api/dashboard/sections?library_id="+libraryID, nil)
+    t.Run("GetDashboard_AsAdmin", func(t *testing.T) {
+        req, _ := http.NewRequest("GET", setup.Server.URL+"/dashboard?library_id="+libraryID, nil)
+        req.Header.Set("Authorization", "Bearer "+adminToken)
+
+        resp, err := client.Do(req)
+        require.NoError(t, err)
+        defer resp.Body.Close()
+
+        assert.Equal(t, http.StatusOK, resp.StatusCode)
+        assert.Contains(t, resp.Header.Get("Content-Type"), "text/html")
+    })
+
+    t.Run("GetDashboard_WithoutAuth", func(t *testing.T) {
+        req, _ := http.NewRequest("GET", setup.Server.URL+"/dashboard?library_id="+libraryID, nil)
+        // No authorization header
+
         resp, err := client.Do(req)
         require.NoError(t, err)
         defer resp.Body.Close()
@@ -1144,29 +1505,11 @@ func TestDashboardSections(t *testing.T) {
         assert.Equal(t, http.StatusUnauthorized, resp.StatusCode)
     })
 
-    t.Run("GetSections_WithAdminUser", func(t *testing.T) {
-        req, _ := http.NewRequest("GET", setup.Server.URL+"/api/dashboard/sections?library_id="+libraryID, nil)
-        req.Header.Set("Authorization", "Bearer "+adminToken)
-
-        resp, err := client.Do(req)
-        require.NoError(t, err)
-        defer resp.Body.Close()
-
-        assert.Equal(t, http.StatusOK, resp.StatusCode)
-
-        var result map[string]interface{}
-        json.NewDecoder(resp.Body).Decode(&result)
-
-        sections, ok := result["sections"].([]interface{})
-        assert.True(t, ok, "Should have sections array")
-        assert.GreaterOrEqual(t, len(sections), 5, "Should have at least 5 smart sections")
-    })
-
-    t.Run("GetSections_WithRegularUser", func(t *testing.T) {
+    t.Run("GetDashboard_WithRegularUser", func(t *testing.T) {
         // Get regular user token
         regularToken := loginRegularUser(t, setup.Server, setup.DB)
 
-        req, _ := http.NewRequest("GET", setup.Server.URL+"/api/dashboard/sections?library_id="+libraryID, nil)
+        req, _ := http.NewRequest("GET", setup.Server.URL+"/dashboard?library_id="+libraryID, nil)
         req.Header.Set("Authorization", "Bearer "+regularToken)
 
         resp, err := client.Do(req)
@@ -1174,29 +1517,12 @@ func TestDashboardSections(t *testing.T) {
         defer resp.Body.Close()
 
         assert.Equal(t, http.StatusOK, resp.StatusCode)
-
-        var result map[string]interface{}
-        json.NewDecoder(resp.Body).Decode(&result)
-
-        sections, ok := result["sections"].([]interface{})
-        assert.True(t, ok, "Should have sections array")
-        assert.GreaterOrEqual(t, len(sections), 5, "Should have at least 5 smart sections")
-    })
-
-    t.Run("GetSections_InvalidLibraryID", func(t *testing.T) {
-        req, _ := http.NewRequest("GET", setup.Server.URL+"/api/dashboard/sections?library_id=invalid-uuid", nil)
-        req.Header.Set("Authorization", "Bearer "+adminToken)
-
-        resp, err := client.Do(req)
-        require.NoError(t, err)
-        defer resp.Body.Close()
-
-        assert.Equal(t, http.StatusBadRequest, resp.StatusCode)
+        assert.Contains(t, resp.Header.Get("Content-Type"), "text/html")
     })
 }
 
-// TestDashboardPreferences tests the preferences endpoints
-func TestDashboardPreferences(t *testing.T) {
+// TestDashboardSettings tests the settings endpoint
+func TestDashboardSettings(t *testing.T) {
     setup := setupTestServer(t)
     token := loginTestUser(t, setup.Server, setup.DB)
     client := &http.Client{}
@@ -1205,16 +1531,21 @@ func TestDashboardPreferences(t *testing.T) {
     deviceSetup := setupDeviceTest(t)
     libraryID := deviceSetup.CreateLibrary(t, "Test Library", "ebooks")
 
-    t.Run("UpdatePreferences_Valid", func(t *testing.T) {
+    t.Run("UpdateSettings_Valid", func(t *testing.T) {
         reqBody := map[string]interface{}{
-            "library_id":       libraryID,
-            "hidden_sections":  []string{"recently-added"},
-            "section_order":    []string{"continue-reading", "in-progress"},
-            "items_per_section": 25,
+            "email":             "testuser@example.com",
+            "username":          "testuser",
+            "first_name":        "Test",
+            "last_name":         "User",
+            "theme":              "tokyo-night",
+            "library_id":         libraryID,
+            "hidden_sections":    []string{"recently-added"},
+            "section_order":      []string{"continue-reading", "in-progress"},
+            "items_per_section":  25,
         }
         body, _ := json.Marshal(reqBody)
 
-        req, _ := http.NewRequest("POST", setup.Server.URL+"/api/dashboard/preferences", bytes.NewBuffer(body))
+        req, _ := http.NewRequest("POST", setup.Server.URL+"/settings", bytes.NewBuffer(body))
         req.Header.Set("Content-Type", "application/json")
         req.Header.Set("Authorization", "Bearer "+token)
 
@@ -1225,13 +1556,13 @@ func TestDashboardPreferences(t *testing.T) {
         assert.Equal(t, http.StatusOK, resp.StatusCode)
     })
 
-    t.Run("UpdatePreferences_WithoutAuth", func(t *testing.T) {
+    t.Run("UpdateSettings_WithoutAuth", func(t *testing.T) {
         reqBody := map[string]interface{}{
-            "library_id": libraryID,
+            "email": "testuser@example.com",
         }
         body, _ := json.Marshal(reqBody)
 
-        req, _ := http.NewRequest("POST", setup.Server.URL+"/api/dashboard/preferences", bytes.NewBuffer(body))
+        req, _ := http.NewRequest("POST", setup.Server.URL+"/settings", bytes.NewBuffer(body))
         req.Header.Set("Content-Type", "application/json")
         // No authorization header
 
@@ -1308,72 +1639,7 @@ func TestDashboardCollectionVisibility(t *testing.T) {
 }
 ```
 
-#### 10.2 Bruno API Tests
-
-**Files Created** (`bruno/dashboard/`):
-
-All Bruno files follow proper format (matching existing project files):
-- ✅ Proper `meta` block with `name` (NO quotes around name value)
-- ✅ Valid method blocks (get/post/put) with url, headers, body/query
-- ✅ Tests block with `test()` function syntax (not assert blocks)
-- ✅ Snake_case variables from environment (`base_url`, `user_token`, `library_id`)
-- ✅ Proper `auth: inherit` for authenticated endpoints
-- ✅ Balanced braces
-- ✅ `docs` block with API documentation
-
-**File Examples**:
-
-**`get-dashboard-sections.bru`**:
-```bru
-meta {
-  name: Get Dashboard Sections
-  type: http
-  seq: 1
-}
-
-get {
-  url: {{base_url}}/api/dashboard/sections
-  body: none
-  auth: inherit
-  query: {
-    library_id: "{{library_id}}"
-  }
-}
-
-tests {
-  test("status must be 200 with auth", function() {
-    expect(res.status).to.eql(200);
-  });
-
-  test("response has sections array", function() {
-    const body = JSON.parse(res.body);
-    expect(body).to.have.property("sections");
-    expect(body.sections).to.be.an("array");
-  });
-}
-```
-
-**Key Bruno Requirements** (matching existing files):
-- ❌ `name: "Get Dashboard"` (wrong - has quotes)
-- ✅ `name: Get Dashboard` (correct - no quotes)
-- ❌ `{{baseUrl}}` (wrong - camelCase)
-- ✅ `{{base_url}}` (correct - snake_case)
-- ❌ `assert { assertions: [...] }` (wrong - old format)
-- ✅ `test("name", function() { expect(...).to.eql(...) })` (correct)
-- ✅ Use `auth: inherit` instead of manual Authorization headers
-- ✅ Include `docs` block with API documentation
-- ✅ Include `settings` block with `encodeUrl: true` and `timeout: 0`
-
-**Complete Bruno Files Created**:
-1. `get-dashboard-sections.bru` - Get sections for library
-2. `update-preferences.bru` - Update user dashboard preferences
-3. `get-sections-by-library.bru` - Filter sections by library
-4. `create-collection-with-dashboard.bru` - Create collection with `show_on_dashboard: true`
-5. `update-collection-visibility.bru` - Toggle collection dashboard visibility
-
-**All 5 files validated successfully** ✅
-
-#### 10.3 Important: Test Helper Guidelines
+#### 10.2 Test Helper Guidelines
 
 **From PROJECT_GUIDELINES.md**:
 
@@ -1452,7 +1718,7 @@ t.Run("WithAdmin", func(t *testing.T) {
 })
 ```
 
-#### 10.4 Verification Checklist
+#### 10.2 Verification Checklist
 
 Before committing:
 ```bash
@@ -1485,22 +1751,24 @@ go test ./cmd/server/tests/... -v -run TestDashboard
 Modified Files (COMPLIANT with guidelines):
 ├── database/schema/schema.sql                  (Add tables, NO migration files)
 ├── internal/database/queries/queries.sql       (Add dashboard queries)
-├── internal/router/router.go                   (Add dashboard routes)
-└── templates/dashboard.templ                   (Replace with SSR version)
+├── internal/router/router.go                   (Add DashboardService to Config)
+├── internal/router/frontend.go                  (Modify /dashboard, add /settings routes)
+├── templates/dashboard.templ                   (Replace with SSR version)
+├── templates/types.go                          (Add SectionData, BookCardData)
+└── tsconfig.json                               (Already compiles web/src/*.ts)
 
 New Files:
 ├── internal/services/dashboard_service.go         (Reusable business logic)
-├── internal/handlers/dashboard.go                (Thin handlers, no logic)
 ├── templates/components.templ                    (Carousel, modal components)
 ├── templates/dashboard_sections_partial.templ   (HTMX partial)
-├── templates/book_detail.templ                   (Book detail page)
-├── web/src/carousel.ts                           (Procedural TypeScript)
-├── web/src/dashboard-settings.ts                 (Procedural TypeScript)
+├── templates/settings.templ                      (Settings page - moved from admin)
+├── web/src/carousel.ts                          (Carousel TypeScript)
+├── web/src/dashboard-settings.ts                (Settings modal TypeScript)
 ├── cmd/server/tests/dashboard_test.go           (Integration tests using test_helpers)
-├── bruno/dashboard/get-dashboard-sections.bru   (API test)
-├── bruno/dashboard/update-preferences.bru        (API test)
 ├── docs/user/dashboard.md                        (User documentation)
-└── docs/developer/api/dashboard/sections.md     (API reference)
+└── docs/developer/api/settings.md               (Settings API documentation)
+
+Note: Bruno tests already created in bruno/dashboard/
 ```
 
 ---
@@ -1512,14 +1780,14 @@ New Files:
 | 1 | Database schema changes (schema.sql, no migrations) | 2-3 hrs |
 | 2 | Service layer (reusable for SSR/API/mobile) | 3-4 hrs |
 | 3 | Database queries | 1-2 hrs |
-| 4 | HTTP handlers (thin, logic in services) | 2-3 hrs |
-| 5 | Bruno API tests (3 contexts) | 1 hr |
-| 6 | Templates (TailwindCSS only, SSR, handler types) | 4-5 hrs |
-| 7 | TypeScript (procedural, no OOP) | 4-5 hrs |
-| 8 | Book detail page | 3-4 hrs |
+| 4 | Routes (inline handlers in frontend.go) | 1-2 hrs |
+| 5 | Template types (templates/types.go) | 30 min |
+| 6 | Settings template | 2 hrs |
+| 7 | Dashboard templates (TailwindCSS, SSR) | 4-5 hrs |
+| 8 | TypeScript (carousel, dashboard-settings) | 2-3 hrs |
 | 9 | Documentation (docs/user, docs/developer/api) | 1-2 hrs |
 | 10 | Testing & verification | 2-3 hrs |
-| | **Total** | **23-30 hrs** |
+| | **Total** | **19-26 hrs** |
 
 ---
 
@@ -1530,18 +1798,17 @@ New Files:
 2. Phase 3: Database queries
 3. Phase 2: Service layer (testable independently)
 
-**Sprint 2** (Handlers & Tests):
-4. Phase 4: HTTP handlers
-5. Phase 5: Bruno API tests
-6. Phase 9: Documentation
+**Sprint 2** (Routes & Settings Page):
+4. Phase 4: Routes (inline handlers in frontend.go)
+5. Phase 5: Settings template
 
 **Sprint 3** (Frontend):
-7. Phase 6: Templates (dashboard, components)
-8. Phase 8: Book detail page
+6. Phase 6: Dashboard templates (carousel, components)
+7. Phase 7: TypeScript (carousel, dashboard-settings)
 
-**Sprint 4** (Interactivity):
-9. Phase 7: TypeScript (carousel, settings)
-10. Phase 10: Testing & verification
+**Sprint 4** (Testing & Docs):
+8. Phase 9: Documentation
+9. Phase 10: Testing & verification
 
 ---
 
@@ -1565,7 +1832,7 @@ Before committing, verify:
 - [ ] Schema changes merged into `database/schema/schema.sql` (NO migration files)
 - [ ] Regenerated database code with `sqlc generate`
 - [ ] All business logic in `services/` (not handlers)
-- [ ] Bruno .bru files created for all new endpoints
+- [ ] Bruno tests exist in `bruno/dashboard/` for all new endpoints
 - [ ] Tests in `cmd/server/tests/dashboard_test.go` using setupTestServer() helper
 - [ ] Tests cover 3 contexts (no user, regular user, admin)
 - [ ] `setupTestServer(t)` called ONCE per test function (not in subtests)
@@ -1574,16 +1841,15 @@ Before committing, verify:
 
 **Frontend**:
 - [ ] Only TailwindCSS classes used (no custom CSS)
-- [ ] Only TypeScript files (no .js files)
-- [ ] Procedural style (no classes, no OOP)
+- [ ] Inline JavaScript in templates (matching existing pattern)
+- [ ] Template types defined in `templates/types.go`
 - [ ] SSR for initial data (no AJAX on load)
 - [ ] HTMX for CRUD operations
-- [ ] Handler types used (no template.*Data duplicates)
 - [ ] Progressive enhancement works without JS
 
 **Documentation**:
 - [ ] User docs updated in `docs/user/dashboard.md`
-- [ ] API docs updated in `docs/developer/api/dashboard/`
+- [ ] Settings API docs updated in `docs/developer/api/settings.md`
 - [ ] Docs render at `/docs` endpoint
 - [ ] Search finds new content
 
@@ -1601,15 +1867,16 @@ This plan addresses PROJECT_GUIDELINES.md requirements:
 ✅ **Full-stack task with user approval** - backend modifications allowed
 ✅ **No migration files** - merge into existing schema.sql
 ✅ **Service layer architecture** - all logic in services, reusable
-✅ **TypeScript only** - no JavaScript files
+✅ **TypeScript** - no JavaScript files, compiled via existing tsc setup
 ✅ **TailwindCSS only** - no custom CSS
 ✅ **Procedural style** - no OOP, classes, or this-capture
 ✅ **SSR for initial data** - no AJAX on page load
-✅ **HTMX for updates** - library switching, settings
-✅ **Share handler types** - no duplicate type systems
-✅ **Bruno tests** - all new endpoints tested
+✅ **Inline routes in frontend.go** - matches existing pattern
+✅ **Template types in templates/types.go** - SectionData, BookCardData
+✅ **Bruno tests already created** - in bruno/dashboard/
 ✅ **Documentation** - docs/user and docs/developer/api updated
 ✅ **Backward compatibility** - mobile apps supported
+✅ **KISS principle** - minimal routes, no over-engineering
 
 ---
 
@@ -1617,6 +1884,6 @@ This plan addresses PROJECT_GUIDELINES.md requirements:
 **Updated:** 2025-02-17
 **Status:** Planning
 **Priority:** High
-**Estimated effort:** 23-30 hours
-**Architecture:** SSR-First with HTMX for updates
+**Estimated effort:** 19-26 hours
+**Architecture:** SSR-First with Settings page for customization
 **Compliance:** PROJECT_GUIDELINES.md ✅