diff --git a/PROJECT_CONTEXT.md b/PROJECT_CONTEXT.md
index a260514..6e03849 100644
--- a/PROJECT_CONTEXT.md
+++ b/PROJECT_CONTEXT.md
@@ -1,6 +1,6 @@
 # BoxBox Project Context
 
-> **Last updated:** 2026-05-06  
+> **Last updated:** 2026-06-12
 > **Purpose:** Single source of truth for the non-`docs/` Markdown files and current codebase state.  
 > **Scope:** Consolidates project truth from the previous non-`docs/` Markdown set. The old audit, roadmap, refactor-plan, and nested starter README files were removed on 2026-05-06 after this file became the local source of truth.  
 > **Excluded by request:** Contents of `docs/` Markdown files are not merged here, though this file notes known drift between `docs/` and the implementation where it affects project truth.
@@ -321,7 +321,7 @@ Backend testing gaps remain:
 
 - SvelteKit app is built as a static SPA with fallback.
 - Root layout initializes Svelte Query and handles auth redirects.
-- Main app flow includes login, browse, settings, and a manual `/test` component/demo route.
+- Main app flow includes login, browse, and settings. The old unauthenticated `/test` component/demo route was removed during the 2026-06-12 cleanup.
 - `browse/+page.svelte` is the main file manager screen and composes the active UI.
 
 ### Important frontend directories
@@ -347,7 +347,7 @@ Older frontend refactor files are stale in several areas. These are now implemen
 - `src/lib/utils/fileTypes.ts` exists and is the central file-type source.
 - `src/lib/utils/format.ts` exists for formatting.
 - Design tokens are defined in `src/routes/layout.css`.
-- `src/lib/components/ui/` exists with base components including `Button`, `Input`, `Select`, `Toggle`, `Card`, `Modal`, `Spinner`, `Badge`, `ProgressBar`, `ContextMenu`, `Toast`, and `InlineRename`.
+- `src/lib/components/ui/` exists with base components including `Button`, `Input`, `Select`, `Toggle`, `Modal`, `Spinner`, `Badge`, `ProgressBar`, `ContextMenu`, `Toast`, and `InlineRename`.
 - No `<style>` blocks were found under `frontend/src` during this audit.
 - `FileBrowser.svelte` referenced by old docs no longer exists.
 
@@ -409,14 +409,12 @@ Current upload utility supports:
 - Upload progress callbacks.
 - `getUploadStatus()`.
 - `resumeUpload()`.
-- An `UploadManager` helper class.
 
 Upload integration status:
 
 - `uploadStore.addFiles()` generates the upload ID for UI queue tracking.
 - The upload ID is passed through `UploadOptions` into chunk upload requests.
 - Normal queue flow now calls `resumeUpload()` first and falls back to a fresh upload with the same upload ID if no server session exists.
-- `UploadManager` also passes its generated upload ID into `uploadFile()`.
 
 ### WebSocket frontend
 
@@ -462,7 +460,7 @@ Current video state:
 - No Vitest config was found.
 - No Playwright config was found.
 - No frontend automated test files were found.
-- A manual `/test` route exists as a component/demo page.
+- No manual component/demo route remains.
 
 Verification status:
 
@@ -686,7 +684,7 @@ The test roadmap remains mostly aspirational for frontend and partially implemen
 ### Frontend now
 
 - No automated frontend test infrastructure found.
-- Manual `/test` route exists.
+- No manual `/test` route remains.
 
 ### Frontend next tests
 
@@ -723,6 +721,8 @@ A pragmatic target:
 - MIME type duplication in backend stream handler has been fixed.
 - Frontend config/storage/file-type/design-system foundation is now implemented.
 - Base UI components exist.
+- The old frontend `/test` route and its demo-only components were removed.
+- The old frontend `UploadManager` helper class was removed; the active upload queue is `upload.svelte.ts`.
 - No component `<style>` blocks were found under `frontend/src`.
 - `FileBrowser.svelte` referenced by older docs no longer exists.
 - More than one store is now migrated to runes: `clipboard`, `upload`, and `toast` are Svelte 5-style stores.
diff --git a/backend/cmd/server/main.go b/backend/cmd/server/main.go
index 67e3297..4e5f71c 100644
--- a/backend/cmd/server/main.go
+++ b/backend/cmd/server/main.go
@@ -52,7 +52,7 @@ func main() {
 	defer cancel()
 
 	// Initialize components
-	server, hub, jobService, authService, streamHandler, _, err := initializeServer(ctx, cfg)
+	server, hub, jobService, authService, streamHandler, err := initializeServer(cfg)
 	if err != nil {
 		log.Fatal().Err(err).Msg("Failed to initialize server")
 	}
@@ -90,11 +90,11 @@ func main() {
 	}()
 
 	// Wait for shutdown signal
-	waitForShutdown(ctx, cancel, server, jobService, authService, streamHandler)
+	waitForShutdown(cancel, server, jobService, authService, streamHandler)
 }
 
 // initializeServer creates and configures all server components
-func initializeServer(ctx context.Context, cfg *model.ServerConfig) (*http.Server, *websocket.Hub, service.JobService, service.AuthService, *handler.StreamHandler, *handler.SettingsHandler, error) {
+func initializeServer(cfg *model.ServerConfig) (*http.Server, *websocket.Hub, service.JobService, service.AuthService, *handler.StreamHandler, error) {
 	// Create filesystem abstraction (using real OS filesystem)
 	fs := filesystem.NewOsFS()
 
@@ -146,7 +146,7 @@ func initializeServer(ctx context.Context, cfg *model.ServerConfig) (*http.Serve
 	})
 
 	jobService := service.NewJobService(fs, hub, service.JobServiceConfig{
-		Workers:     4,
+		Workers:     config.DefaultJobWorkers,
 		MountPoints: mountPoints,
 	})
 
@@ -159,7 +159,7 @@ func initializeServer(ctx context.Context, cfg *model.ServerConfig) (*http.Serve
 	// Create handlers
 	authHandler := handler.NewAuthHandler(authService)
 	fileHandler := handler.NewFileHandler(fileService)
-	streamHandler := handler.NewStreamHandler(fileService, cfg.ChunkSizeMB)
+	streamHandler := handler.NewStreamHandler(fileService, cfg.ChunkSizeMB, cfg.MaxUploadMB)
 	jobHandler := handler.NewJobHandler(jobService)
 	searchHandler := handler.NewSearchHandler(searchService)
 	wsHandler := handler.NewWebSocketHandler(hub, authService, cfg.AllowedOrigins)
@@ -169,7 +169,6 @@ func initializeServer(ctx context.Context, cfg *model.ServerConfig) (*http.Serve
 	// Create router
 	router := createRouter(cfg, authService, authHandler, fileHandler, streamHandler, jobHandler, searchHandler, wsHandler, systemHandler, settingsHandler, mountPoints)
 
-	// Create HTTP server
 	// Create HTTP server
 	server := &http.Server{
 		Addr:         fmt.Sprintf("%s:%d", cfg.Host, cfg.Port),
@@ -179,7 +178,7 @@ func initializeServer(ctx context.Context, cfg *model.ServerConfig) (*http.Serve
 		IdleTimeout:  config.HTTPIdleTimeout,
 	}
 
-	return server, hub, jobService, authService, streamHandler, settingsHandler, nil
+	return server, hub, jobService, authService, streamHandler, nil
 }
 
 // createRouter sets up chi router with all routes and middleware
@@ -282,7 +281,7 @@ func createRouter(
 }
 
 // waitForShutdown handles graceful shutdown on interrupt signals
-func waitForShutdown(ctx context.Context, cancel context.CancelFunc, server *http.Server, jobService service.JobService, authService service.AuthService, streamHandler *handler.StreamHandler) {
+func waitForShutdown(cancel context.CancelFunc, server *http.Server, jobService service.JobService, authService service.AuthService, streamHandler *handler.StreamHandler) {
 	// Create channel to receive OS signals
 	sigCh := make(chan os.Signal, 1)
 	signal.Notify(sigCh, os.Interrupt, syscall.SIGTERM)
@@ -295,7 +294,7 @@ func waitForShutdown(ctx context.Context, cancel context.CancelFunc, server *htt
 	cancel()
 
 	// Create shutdown context with timeout
-	shutdownCtx, shutdownCancel := context.WithTimeout(context.Background(), 30*time.Second)
+	shutdownCtx, shutdownCancel := context.WithTimeout(context.Background(), config.ShutdownTimeout)
 	defer shutdownCancel()
 
 	// Stop job service
diff --git a/backend/internal/config/config.go b/backend/internal/config/config.go
index ec84e42..1b03e22 100644
--- a/backend/internal/config/config.go
+++ b/backend/internal/config/config.go
@@ -16,8 +16,8 @@ func Load(configPath string) (*model.ServerConfig, error) {
 	// Set defaults
 	v.SetDefault("port", 80)
 	v.SetDefault("host", "0.0.0.0")
-	v.SetDefault("max_upload_mb", 10240) // 10GB default
-	v.SetDefault("chunk_size_mb", 5)     // 5MB chunks
+	v.SetDefault("max_upload_mb", DefaultMaxUploadMB) // 10GB default
+	v.SetDefault("chunk_size_mb", 5)                  // 5MB chunks
 	v.SetDefault("rate_limit_rps", 10.0)
 	v.SetDefault("data_dir", DefaultDataDir)
 
diff --git a/backend/internal/config/constants.go b/backend/internal/config/constants.go
index c59698a..40fcc06 100644
--- a/backend/internal/config/constants.go
+++ b/backend/internal/config/constants.go
@@ -78,6 +78,9 @@ const (
 
 // Upload configuration constants
 const (
+	// DefaultMaxUploadMB is the default maximum accepted upload size in megabytes
+	DefaultMaxUploadMB = 10240
+
 	// DefaultChunkSizeMB is the default chunk size for uploads in megabytes
 	DefaultChunkSizeMB = 10
 
diff --git a/backend/internal/handler/errors.go b/backend/internal/handler/errors.go
index 0c81969..a79e27c 100644
--- a/backend/internal/handler/errors.go
+++ b/backend/internal/handler/errors.go
@@ -55,17 +55,3 @@ func HandleServiceError(w http.ResponseWriter, err error) {
 	// Default to internal server error
 	writeError(w, "Internal server error", model.ErrCodeInternalError, http.StatusInternalServerError)
 }
-
-// HandleServiceErrorWithLog converts service errors to HTTP responses and returns
-// whether the error was handled (true) or was an internal error (false)
-func HandleServiceErrorWithLog(w http.ResponseWriter, err error) bool {
-	for _, mapping := range serviceErrorMappings {
-		if errors.Is(err, mapping.Error) {
-			writeError(w, mapping.Message, mapping.Code, mapping.StatusCode)
-			return true
-		}
-	}
-	// Internal server error - caller should log the actual error
-	writeError(w, "Internal server error", model.ErrCodeInternalError, http.StatusInternalServerError)
-	return false
-}
diff --git a/backend/internal/handler/file.go b/backend/internal/handler/file.go
index 136f397..917e3ac 100644
--- a/backend/internal/handler/file.go
+++ b/backend/internal/handler/file.go
@@ -5,10 +5,10 @@ import (
 	"io"
 	"net/http"
 	"strconv"
-	"strings"
 
 	"github.com/go-chi/chi/v5"
 	"github.com/homelab/filemanager/internal/model"
+	"github.com/homelab/filemanager/internal/pkg/validator"
 	"github.com/homelab/filemanager/internal/service"
 )
 
@@ -140,14 +140,12 @@ func (h *FileHandler) CreateItem(w http.ResponseWriter, r *http.Request) {
 		itemType = "directory"
 	}
 
-	// Validate item name
 	if req.Name == "" {
 		writeError(w, "Name is required", model.ErrCodeValidationError, http.StatusBadRequest)
 		return
 	}
 
-	// Check for invalid characters in name
-	if strings.ContainsAny(req.Name, "/\\") || req.Name == "." || req.Name == ".." || strings.ContainsRune(req.Name, 0) {
+	if !validator.IsValidFileName(req.Name) {
 		writeError(w, "Name cannot contain path separators or special path names", model.ErrCodeValidationError, http.StatusBadRequest)
 		return
 	}
diff --git a/backend/internal/handler/response.go b/backend/internal/handler/response.go
index 1c21ef0..b82522c 100644
--- a/backend/internal/handler/response.go
+++ b/backend/internal/handler/response.go
@@ -7,82 +7,19 @@ import (
 	"github.com/homelab/filemanager/internal/model"
 )
 
-// ErrorResponse represents an error response
-type ErrorResponse struct {
-	Error   string `json:"error"`
-	Code    string `json:"code"`
-	Details string `json:"details,omitempty"`
-}
-
 // writeError writes an error response with the specified message, code, and status
 func writeError(w http.ResponseWriter, message, code string, status int) {
 	w.Header().Set("Content-Type", "application/json")
 	w.WriteHeader(status)
-	json.NewEncoder(w).Encode(ErrorResponse{
+	json.NewEncoder(w).Encode(model.ErrorResponse{
 		Error: message,
 		Code:  code,
 	})
 }
 
-// writeErrorWithDetails writes an error response with additional details
-func writeErrorWithDetails(w http.ResponseWriter, message, code, details string, status int) {
-	w.Header().Set("Content-Type", "application/json")
-	w.WriteHeader(status)
-	json.NewEncoder(w).Encode(ErrorResponse{
-		Error:   message,
-		Code:    code,
-		Details: details,
-	})
-}
-
 // writeJSON writes a JSON response with the specified data and status code
 func writeJSON(w http.ResponseWriter, data interface{}, status int) {
 	w.Header().Set("Content-Type", "application/json")
 	w.WriteHeader(status)
 	json.NewEncoder(w).Encode(data)
 }
-
-// writeSuccess writes a simple success response
-func writeSuccess(w http.ResponseWriter, message string) {
-	writeJSON(w, map[string]string{"message": message}, http.StatusOK)
-}
-
-// writeCreated writes a 201 Created response with the specified data
-func writeCreated(w http.ResponseWriter, data interface{}) {
-	writeJSON(w, data, http.StatusCreated)
-}
-
-// writeNoContent writes a 204 No Content response
-func writeNoContent(w http.ResponseWriter) {
-	w.WriteHeader(http.StatusNoContent)
-}
-
-// writeBadRequest writes a 400 Bad Request error response
-func writeBadRequest(w http.ResponseWriter, message string) {
-	writeError(w, message, model.ErrCodeValidationError, http.StatusBadRequest)
-}
-
-// writeUnauthorized writes a 401 Unauthorized error response
-func writeUnauthorized(w http.ResponseWriter, message string) {
-	writeError(w, message, model.ErrCodeUnauthorized, http.StatusUnauthorized)
-}
-
-// writeForbidden writes a 403 Forbidden error response
-func writeForbidden(w http.ResponseWriter, message string) {
-	writeError(w, message, model.ErrCodePermissionDenied, http.StatusForbidden)
-}
-
-// writeNotFound writes a 404 Not Found error response
-func writeNotFound(w http.ResponseWriter, message string) {
-	writeError(w, message, model.ErrCodeNotFound, http.StatusNotFound)
-}
-
-// writeConflict writes a 409 Conflict error response
-func writeConflict(w http.ResponseWriter, message string) {
-	writeError(w, message, model.ErrCodeConflict, http.StatusConflict)
-}
-
-// writeInternalError writes a 500 Internal Server Error response
-func writeInternalError(w http.ResponseWriter, message string) {
-	writeError(w, message, model.ErrCodeInternalError, http.StatusInternalServerError)
-}
diff --git a/backend/internal/handler/stream.go b/backend/internal/handler/stream.go
index b72b13a..f36ec8b 100644
--- a/backend/internal/handler/stream.go
+++ b/backend/internal/handler/stream.go
@@ -23,22 +23,29 @@ import (
 	"github.com/homelab/filemanager/internal/service"
 )
 
+var errUploadTooLarge = errors.New("upload too large")
+
 // StreamHandler handles streaming upload and download operations
 type StreamHandler struct {
-	fileService   service.FileService
-	uploadManager *UploadManager
-	chunkSizeMB   int
+	fileService    service.FileService
+	uploadManager  *UploadManager
+	chunkSizeMB    int
+	maxUploadBytes int64
 }
 
 // NewStreamHandler creates a new stream handler
-func NewStreamHandler(fileService service.FileService, chunkSizeMB int) *StreamHandler {
+func NewStreamHandler(fileService service.FileService, chunkSizeMB int, maxUploadMB int) *StreamHandler {
 	if chunkSizeMB <= 0 {
-		chunkSizeMB = 10 // Default 10MB chunks
+		chunkSizeMB = config.DefaultChunkSizeMB
+	}
+	if maxUploadMB <= 0 {
+		maxUploadMB = config.DefaultMaxUploadMB
 	}
 	return &StreamHandler{
-		fileService:   fileService,
-		uploadManager: NewUploadManager(config.DefaultUploadTempDir),
-		chunkSizeMB:   chunkSizeMB,
+		fileService:    fileService,
+		uploadManager:  NewUploadManager(config.DefaultUploadTempDir),
+		chunkSizeMB:    chunkSizeMB,
+		maxUploadBytes: int64(maxUploadMB) * 1024 * 1024,
 	}
 }
 
@@ -346,7 +353,11 @@ func (h *StreamHandler) Upload(w http.ResponseWriter, r *http.Request) {
 	// Parse upload headers
 	uploadReq, err := h.parseUploadHeaders(r)
 	if err != nil {
-		writeError(w, err.Error(), model.ErrCodeValidationError, http.StatusBadRequest)
+		status := http.StatusBadRequest
+		if errors.Is(err, errUploadTooLarge) {
+			status = http.StatusRequestEntityTooLarge
+		}
+		writeError(w, err.Error(), model.ErrCodeValidationError, status)
 		return
 	}
 
@@ -376,6 +387,9 @@ func (h *StreamHandler) Upload(w http.ResponseWriter, r *http.Request) {
 			writeError(w, "Failed to create upload session", model.ErrCodeInternalError, http.StatusInternalServerError)
 			return
 		}
+	} else if !session.matches(path, uploadReq) {
+		writeError(w, "Upload session metadata does not match this request", model.ErrCodeConflict, http.StatusConflict)
+		return
 	}
 
 	// Check if chunk was already received (for resumable uploads)
@@ -398,13 +412,25 @@ func (h *StreamHandler) Upload(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
-	_, err = io.Copy(chunkFile, r.Body)
+	limitedBody := http.MaxBytesReader(w, r.Body, uploadReq.ExpectedChunkSize())
+	writtenBytes, err := io.Copy(chunkFile, limitedBody)
+	_ = limitedBody.Close()
 	chunkFile.Close()
 	if err != nil {
 		_ = os.Remove(chunkPath)
+		var maxBytesErr *http.MaxBytesError
+		if errors.As(err, &maxBytesErr) {
+			writeError(w, "Chunk body exceeds declared chunk size", model.ErrCodeValidationError, http.StatusRequestEntityTooLarge)
+			return
+		}
 		writeError(w, "Failed to write chunk", model.ErrCodeInternalError, http.StatusInternalServerError)
 		return
 	}
+	if writtenBytes != uploadReq.ExpectedChunkSize() {
+		_ = os.Remove(chunkPath)
+		writeError(w, "Chunk body size does not match upload metadata", model.ErrCodeValidationError, http.StatusBadRequest)
+		return
+	}
 
 	// Mark chunk as received
 	session.MarkChunkReceived(uploadReq.ChunkIndex)
@@ -492,6 +518,29 @@ func (h *StreamHandler) parseUploadHeaders(r *http.Request) (*UploadRequest, err
 	if err != nil || totalSize < 1 {
 		return nil, errors.New("X-Total-Size must be a positive integer")
 	}
+	if h.maxUploadBytes > 0 && totalSize > h.maxUploadBytes {
+		return nil, fmt.Errorf("%w: maximum size is %d bytes", errUploadTooLarge, h.maxUploadBytes)
+	}
+
+	expectedTotalChunks := (totalSize + chunkSize - 1) / chunkSize
+	if int64(totalChunks) != expectedTotalChunks {
+		return nil, errors.New("X-Total-Chunks does not match X-Total-Size and X-Chunk-Size")
+	}
+
+	expectedChunkSize := chunkSize
+	if chunkIndex == totalChunks-1 {
+		expectedChunkSize = totalSize - int64(chunkIndex)*chunkSize
+	}
+	if expectedChunkSize < 1 || expectedChunkSize > chunkSize {
+		return nil, errors.New("invalid upload chunk metadata")
+	}
+
+	if r.ContentLength > expectedChunkSize {
+		return nil, fmt.Errorf("%w: request body exceeds expected chunk size", errUploadTooLarge)
+	}
+	if r.ContentLength >= 0 && r.ContentLength != expectedChunkSize {
+		return nil, errors.New("request body size does not match upload metadata")
+	}
 
 	// Checksum is optional but required on final chunk for verification
 	checksum := r.Header.Get("X-Checksum")
@@ -506,6 +555,21 @@ func (h *StreamHandler) parseUploadHeaders(r *http.Request) (*UploadRequest, err
 	}, nil
 }
 
+func (r *UploadRequest) ExpectedChunkSize() int64 {
+	if r.ChunkIndex == r.TotalChunks-1 {
+		return r.TotalSize - int64(r.ChunkIndex)*r.ChunkSize
+	}
+
+	return r.ChunkSize
+}
+
+func (s *UploadSession) matches(path string, uploadReq *UploadRequest) bool {
+	return s.Path == path &&
+		s.TotalChunks == uploadReq.TotalChunks &&
+		s.ChunkSize == uploadReq.ChunkSize &&
+		s.TotalSize == uploadReq.TotalSize
+}
+
 // assembleChunks combines all chunks into the final file
 func (h *StreamHandler) assembleChunks(session *UploadSession, destPath string, expectedChecksum string) error {
 	// Get the filesystem from the file service
diff --git a/backend/internal/handler/stream_property_test.go b/backend/internal/handler/stream_property_test.go
index 78b29e3..e1dc496 100644
--- a/backend/internal/handler/stream_property_test.go
+++ b/backend/internal/handler/stream_property_test.go
@@ -36,11 +36,15 @@ func setupTestStreamHandler() (*StreamHandler, *filesystem.AferoFS, service.File
 	}
 
 	fileSvc := service.NewFileService(fs, service.FileServiceConfig{MountPoints: mounts})
-	streamHandler := NewStreamHandler(fileSvc, 1) // 1MB chunk size for testing
+	streamHandler := NewStreamHandler(fileSvc, 1, 100) // 1MB chunks, 100MB max for testing
 
 	return streamHandler, fs, fileSvc
 }
 
+func testChunkCount(totalSize, chunkSize int) int {
+	return (totalSize + chunkSize - 1) / chunkSize
+}
+
 // createTestRouter creates a chi router with the stream handler for testing
 func createStreamTestRouter(handler *StreamHandler) *chi.Mux {
 	r := chi.NewRouter()
@@ -50,6 +54,87 @@ func createStreamTestRouter(handler *StreamHandler) *chi.Mux {
 	return r
 }
 
+func newChunkUploadRequest(
+	filePath string,
+	body []byte,
+	uploadID string,
+	chunkIndex int,
+	totalChunks int,
+	chunkSize int,
+	totalSize int,
+) *http.Request {
+	req := httptest.NewRequest("POST", "/api/v1/upload/"+filePath, bytes.NewReader(body))
+	req.Header.Set("X-Upload-ID", uploadID)
+	req.Header.Set("X-Chunk-Index", strconv.Itoa(chunkIndex))
+	req.Header.Set("X-Total-Chunks", strconv.Itoa(totalChunks))
+	req.Header.Set("X-Chunk-Size", strconv.Itoa(chunkSize))
+	req.Header.Set("X-Total-Size", strconv.Itoa(totalSize))
+	return req
+}
+
+func TestUploadRejectsTotalSizeAboveConfiguredMax(t *testing.T) {
+	handler, _, _ := setupTestStreamHandler()
+	handler.maxUploadBytes = 2
+	router := createStreamTestRouter(handler)
+
+	req := newChunkUploadRequest("media/too-large.bin", []byte("ab"), "too-large", 0, 2, 2, 3)
+	rec := httptest.NewRecorder()
+
+	router.ServeHTTP(rec, req)
+
+	if rec.Code != http.StatusRequestEntityTooLarge {
+		t.Fatalf("expected status %d, got %d: %s", http.StatusRequestEntityTooLarge, rec.Code, rec.Body.String())
+	}
+}
+
+func TestUploadRejectsChunkBodyLargerThanMetadata(t *testing.T) {
+	handler, _, _ := setupTestStreamHandler()
+	router := createStreamTestRouter(handler)
+
+	req := newChunkUploadRequest("media/chunk-large.bin", []byte("abc"), "chunk-large", 0, 2, 2, 3)
+	rec := httptest.NewRecorder()
+
+	router.ServeHTTP(rec, req)
+
+	if rec.Code != http.StatusRequestEntityTooLarge {
+		t.Fatalf("expected status %d, got %d: %s", http.StatusRequestEntityTooLarge, rec.Code, rec.Body.String())
+	}
+}
+
+func TestUploadRejectsChunkBodyShorterThanMetadata(t *testing.T) {
+	handler, _, _ := setupTestStreamHandler()
+	router := createStreamTestRouter(handler)
+
+	req := newChunkUploadRequest("media/chunk-short.bin", []byte("a"), "chunk-short", 0, 2, 2, 3)
+	rec := httptest.NewRecorder()
+
+	router.ServeHTTP(rec, req)
+
+	if rec.Code != http.StatusBadRequest {
+		t.Fatalf("expected status %d, got %d: %s", http.StatusBadRequest, rec.Code, rec.Body.String())
+	}
+}
+
+func TestUploadRejectsSessionMetadataMismatch(t *testing.T) {
+	handler, _, _ := setupTestStreamHandler()
+	router := createStreamTestRouter(handler)
+
+	firstReq := newChunkUploadRequest("media/original.bin", []byte("ab"), "same-id", 0, 2, 2, 4)
+	firstRec := httptest.NewRecorder()
+	router.ServeHTTP(firstRec, firstReq)
+	if firstRec.Code != http.StatusOK {
+		t.Fatalf("expected initial status %d, got %d: %s", http.StatusOK, firstRec.Code, firstRec.Body.String())
+	}
+
+	secondReq := newChunkUploadRequest("media/other.bin", []byte("cd"), "same-id", 1, 2, 2, 4)
+	secondRec := httptest.NewRecorder()
+	router.ServeHTTP(secondRec, secondReq)
+
+	if secondRec.Code != http.StatusConflict {
+		t.Fatalf("expected status %d, got %d: %s", http.StatusConflict, secondRec.Code, secondRec.Body.String())
+	}
+}
+
 // **Feature: homelab-file-manager, Property 4: Upload/Download Round-Trip Integrity**
 // **Validates: Requirements 2.5, 3.1**
 //
@@ -158,9 +243,10 @@ func TestProperty_UploadDownloadRoundTripIntegrity(t *testing.T) {
 			if chunkSize < 1 {
 				chunkSize = 1
 			}
+			totalChunks := testChunkCount(len(content), chunkSize)
 
 			// Upload in chunks
-			for i := 0; i < numChunks; i++ {
+			for i := 0; i < totalChunks; i++ {
 				start := i * chunkSize
 				end := start + chunkSize
 				if end > len(content) {
@@ -175,12 +261,12 @@ func TestProperty_UploadDownloadRoundTripIntegrity(t *testing.T) {
 				uploadReq := httptest.NewRequest("POST", "/api/v1/upload/"+filePath, bytes.NewReader(chunkData))
 				uploadReq.Header.Set("X-Upload-ID", uploadID)
 				uploadReq.Header.Set("X-Chunk-Index", strconv.Itoa(i))
-				uploadReq.Header.Set("X-Total-Chunks", strconv.Itoa(numChunks))
+				uploadReq.Header.Set("X-Total-Chunks", strconv.Itoa(totalChunks))
 				uploadReq.Header.Set("X-Chunk-Size", strconv.Itoa(chunkSize))
 				uploadReq.Header.Set("X-Total-Size", strconv.Itoa(len(content)))
 
 				// Add checksum on final chunk
-				if i == numChunks-1 {
+				if i == totalChunks-1 {
 					uploadReq.Header.Set("X-Checksum", expectedChecksum)
 				}
 
@@ -189,7 +275,7 @@ func TestProperty_UploadDownloadRoundTripIntegrity(t *testing.T) {
 
 				// Last chunk should return 201, others 200
 				expectedStatus := http.StatusOK
-				if i == numChunks-1 {
+				if i == totalChunks-1 {
 					expectedStatus = http.StatusCreated
 				}
 				if uploadRec.Code != expectedStatus {
@@ -214,7 +300,6 @@ func TestProperty_UploadDownloadRoundTripIntegrity(t *testing.T) {
 	properties.TestingRun(t)
 }
 
-
 // **Feature: homelab-file-manager, Property 5: Resumable Upload Correctness**
 // **Validates: Requirements 2.3**
 //
@@ -270,6 +355,16 @@ func TestProperty_ResumableUploadCorrectness(t *testing.T) {
 			if chunkSize < 1 {
 				chunkSize = 1
 			}
+			totalChunks := testChunkCount(len(content), chunkSize)
+			if totalChunks < 2 {
+				return true
+			}
+			if interruptAt >= totalChunks-1 {
+				interruptAt = totalChunks - 2
+			}
+			if interruptAt < 0 {
+				interruptAt = 0
+			}
 
 			// Phase 1: Upload chunks up to interrupt point
 			for i := 0; i <= interruptAt; i++ {
@@ -287,7 +382,7 @@ func TestProperty_ResumableUploadCorrectness(t *testing.T) {
 				uploadReq := httptest.NewRequest("POST", "/api/v1/upload/"+filePath, bytes.NewReader(chunkData))
 				uploadReq.Header.Set("X-Upload-ID", uploadID)
 				uploadReq.Header.Set("X-Chunk-Index", strconv.Itoa(i))
-				uploadReq.Header.Set("X-Total-Chunks", strconv.Itoa(numChunks))
+				uploadReq.Header.Set("X-Total-Chunks", strconv.Itoa(totalChunks))
 				uploadReq.Header.Set("X-Chunk-Size", strconv.Itoa(chunkSize))
 				uploadReq.Header.Set("X-Total-Size", strconv.Itoa(len(content)))
 
@@ -300,7 +395,7 @@ func TestProperty_ResumableUploadCorrectness(t *testing.T) {
 			}
 
 			// Phase 2: Resume upload from interrupt point + 1
-			for i := interruptAt + 1; i < numChunks; i++ {
+			for i := interruptAt + 1; i < totalChunks; i++ {
 				start := i * chunkSize
 				end := start + chunkSize
 				if end > len(content) {
@@ -315,12 +410,12 @@ func TestProperty_ResumableUploadCorrectness(t *testing.T) {
 				uploadReq := httptest.NewRequest("POST", "/api/v1/upload/"+filePath, bytes.NewReader(chunkData))
 				uploadReq.Header.Set("X-Upload-ID", uploadID)
 				uploadReq.Header.Set("X-Chunk-Index", strconv.Itoa(i))
-				uploadReq.Header.Set("X-Total-Chunks", strconv.Itoa(numChunks))
+				uploadReq.Header.Set("X-Total-Chunks", strconv.Itoa(totalChunks))
 				uploadReq.Header.Set("X-Chunk-Size", strconv.Itoa(chunkSize))
 				uploadReq.Header.Set("X-Total-Size", strconv.Itoa(len(content)))
 
 				// Add checksum on final chunk
-				if i == numChunks-1 {
+				if i == totalChunks-1 {
 					uploadReq.Header.Set("X-Checksum", expectedChecksum)
 				}
 
@@ -329,7 +424,7 @@ func TestProperty_ResumableUploadCorrectness(t *testing.T) {
 
 				// Last chunk should return 201, others 200
 				expectedStatus := http.StatusOK
-				if i == numChunks-1 {
+				if i == totalChunks-1 {
 					expectedStatus = http.StatusCreated
 				}
 				if uploadRec.Code != expectedStatus {
@@ -369,6 +464,7 @@ func TestProperty_ResumableUploadCorrectness(t *testing.T) {
 			if chunkSize < 1 {
 				chunkSize = 1
 			}
+			totalChunks := testChunkCount(len(content), chunkSize)
 
 			// Upload first chunk
 			start := 0
@@ -381,7 +477,7 @@ func TestProperty_ResumableUploadCorrectness(t *testing.T) {
 			uploadReq := httptest.NewRequest("POST", "/api/v1/upload/"+filePath, bytes.NewReader(chunkData))
 			uploadReq.Header.Set("X-Upload-ID", uploadID)
 			uploadReq.Header.Set("X-Chunk-Index", "0")
-			uploadReq.Header.Set("X-Total-Chunks", strconv.Itoa(numChunks))
+			uploadReq.Header.Set("X-Total-Chunks", strconv.Itoa(totalChunks))
 			uploadReq.Header.Set("X-Chunk-Size", strconv.Itoa(chunkSize))
 			uploadReq.Header.Set("X-Total-Size", strconv.Itoa(len(content)))
 
@@ -396,7 +492,7 @@ func TestProperty_ResumableUploadCorrectness(t *testing.T) {
 			uploadReq2 := httptest.NewRequest("POST", "/api/v1/upload/"+filePath, bytes.NewReader(chunkData))
 			uploadReq2.Header.Set("X-Upload-ID", uploadID)
 			uploadReq2.Header.Set("X-Chunk-Index", "0")
-			uploadReq2.Header.Set("X-Total-Chunks", strconv.Itoa(numChunks))
+			uploadReq2.Header.Set("X-Total-Chunks", strconv.Itoa(totalChunks))
 			uploadReq2.Header.Set("X-Chunk-Size", strconv.Itoa(chunkSize))
 			uploadReq2.Header.Set("X-Total-Size", strconv.Itoa(len(content)))
 
@@ -413,7 +509,6 @@ func TestProperty_ResumableUploadCorrectness(t *testing.T) {
 	properties.TestingRun(t)
 }
 
-
 // **Feature: homelab-file-manager, Property 6: Range Request Correctness**
 // **Validates: Requirements 3.2**
 //
@@ -601,15 +696,15 @@ func TestProperty_RangeRequestCorrectness(t *testing.T) {
 	properties.TestingRun(t)
 }
 
-
 // Helper function to perform chunked upload
 func performChunkedUpload(router http.Handler, filePath, uploadID string, content []byte, numChunks int, checksum string) error {
 	chunkSize := (len(content) + numChunks - 1) / numChunks
 	if chunkSize < 1 {
 		chunkSize = 1
 	}
+	totalChunks := testChunkCount(len(content), chunkSize)
 
-	for i := 0; i < numChunks; i++ {
+	for i := 0; i < totalChunks; i++ {
 		start := i * chunkSize
 		end := start + chunkSize
 		if end > len(content) {
@@ -624,11 +719,11 @@ func performChunkedUpload(router http.Handler, filePath, uploadID string, conten
 		uploadReq := httptest.NewRequest("POST", "/api/v1/upload/"+filePath, bytes.NewReader(chunkData))
 		uploadReq.Header.Set("X-Upload-ID", uploadID)
 		uploadReq.Header.Set("X-Chunk-Index", strconv.Itoa(i))
-		uploadReq.Header.Set("X-Total-Chunks", strconv.Itoa(numChunks))
+		uploadReq.Header.Set("X-Total-Chunks", strconv.Itoa(totalChunks))
 		uploadReq.Header.Set("X-Chunk-Size", strconv.Itoa(chunkSize))
 		uploadReq.Header.Set("X-Total-Size", strconv.Itoa(len(content)))
 
-		if i == numChunks-1 && checksum != "" {
+		if i == totalChunks-1 && checksum != "" {
 			uploadReq.Header.Set("X-Checksum", checksum)
 		}
 
@@ -636,7 +731,7 @@ func performChunkedUpload(router http.Handler, filePath, uploadID string, conten
 		router.ServeHTTP(uploadRec, uploadReq)
 
 		expectedStatus := http.StatusOK
-		if i == numChunks-1 {
+		if i == totalChunks-1 {
 			expectedStatus = http.StatusCreated
 		}
 		if uploadRec.Code != expectedStatus {
diff --git a/backend/internal/middleware/auth.go b/backend/internal/middleware/auth.go
index 0e2c67a..f305b56 100644
--- a/backend/internal/middleware/auth.go
+++ b/backend/internal/middleware/auth.go
@@ -60,12 +60,6 @@ func JWTAuth(authService service.AuthService) func(next http.Handler) http.Handl
 	}
 }
 
-// GetUserClaims retrieves user claims from the request context
-func GetUserClaims(ctx context.Context) (*service.Claims, bool) {
-	claims, ok := ctx.Value(UserClaimsKey).(*service.Claims)
-	return claims, ok
-}
-
 // writeAuthError writes an authentication error response
 func writeAuthError(w http.ResponseWriter, message string, status int) {
 	w.Header().Set("Content-Type", "application/json")
diff --git a/backend/internal/model/config.go b/backend/internal/model/config.go
index 2db62e5..ff9e0de 100644
--- a/backend/internal/model/config.go
+++ b/backend/internal/model/config.go
@@ -26,23 +26,6 @@ type ServerConfig struct {
 	RateLimitRPS   float64           `mapstructure:"rate_limit_rps"`  // Auth endpoint rate limit (requests per second)
 }
 
-// DefaultServerConfig returns sensible defaults for server configuration
-func DefaultServerConfig() ServerConfig {
-	return ServerConfig{
-		Port:        8080,
-		Host:        "0.0.0.0",
-		MountPoints: []MountPoint{},
-		JWTSecret:   "",
-		MaxUploadMB: 10240, // 10GB
-		ChunkSizeMB: 5,     // 5MB chunks
-		DataDir:     "",
-		// Security defaults
-		Users:          nil,  // Must be configured
-		AllowedOrigins: nil,  // nil = allow all (for homelab)
-		RateLimitRPS:   10.0, // 10 requests per second per IP
-	}
-}
-
 // Validate checks that the configuration is valid
 func (c *ServerConfig) Validate() error {
 	if c.JWTSecret == "" {
@@ -76,23 +59,3 @@ func (c *ServerConfig) Validate() error {
 
 	return nil
 }
-
-// IsMountPointReadOnly checks if a mount point is read-only by name
-func (c *ServerConfig) IsMountPointReadOnly(name string) bool {
-	for _, mp := range c.MountPoints {
-		if mp.Name == name {
-			return mp.ReadOnly
-		}
-	}
-	return true // Default to read-only if not found
-}
-
-// GetMountPoint returns a mount point by name, or nil if not found
-func (c *ServerConfig) GetMountPoint(name string) *MountPoint {
-	for i := range c.MountPoints {
-		if c.MountPoints[i].Name == name {
-			return &c.MountPoints[i]
-		}
-	}
-	return nil
-}
diff --git a/backend/internal/model/error.go b/backend/internal/model/error.go
index f4529eb..f5f8725 100644
--- a/backend/internal/model/error.go
+++ b/backend/internal/model/error.go
@@ -23,20 +23,3 @@ const (
 	ErrCodeChecksumMismatch = "CHECKSUM_MISMATCH"
 	ErrCodeInternalError    = "INTERNAL_ERROR"
 )
-
-// NewErrorResponse creates a new error response
-func NewErrorResponse(err, code string) ErrorResponse {
-	return ErrorResponse{
-		Error: err,
-		Code:  code,
-	}
-}
-
-// NewErrorResponseWithDetails creates a new error response with details
-func NewErrorResponseWithDetails(err, code, details string) ErrorResponse {
-	return ErrorResponse{
-		Error:   err,
-		Code:    code,
-		Details: details,
-	}
-}
diff --git a/backend/internal/model/job.go b/backend/internal/model/job.go
index 82e2347..85840ab 100644
--- a/backend/internal/model/job.go
+++ b/backend/internal/model/job.go
@@ -51,14 +51,6 @@ type JobParams struct {
 	DestPath   string  `json:"destPath,omitempty"`
 }
 
-// JobError represents detailed error information for a failed job
-type JobError struct {
-	Code    string `json:"code"`
-	Message string `json:"message"`
-	Path    string `json:"path,omitempty"`
-	Cause   string `json:"cause,omitempty"`
-}
-
 // IsTerminal returns true if the job state is a terminal state
 func (s JobState) IsTerminal() bool {
 	return s == JobStateCompleted || s == JobStateFailed || s == JobStateCancelled
diff --git a/backend/internal/pkg/filesystem/fs.go b/backend/internal/pkg/filesystem/fs.go
index 213461b..2f044ab 100644
--- a/backend/internal/pkg/filesystem/fs.go
+++ b/backend/internal/pkg/filesystem/fs.go
@@ -4,10 +4,8 @@
 package filesystem
 
 import (
-	"io"
 	"io/fs"
 	"os"
-	"time"
 
 	"github.com/spf13/afero"
 )
@@ -60,12 +58,6 @@ type AferoFS struct {
 	fs afero.Fs
 }
 
-// New creates a new AferoFS wrapping the given afero.Fs
-func New(afs afero.Fs) *AferoFS {
-	return &AferoFS{fs: afs}
-}
-
-
 // NewOsFS creates a new AferoFS using the real OS filesystem
 func NewOsFS() *AferoFS {
 	return &AferoFS{fs: afero.NewOsFs()}
@@ -76,11 +68,6 @@ func NewMemMapFS() *AferoFS {
 	return &AferoFS{fs: afero.NewMemMapFs()}
 }
 
-// Underlying returns the underlying afero.Fs
-func (a *AferoFS) Underlying() afero.Fs {
-	return a.fs
-}
-
 // ReadDir reads the directory named by dirname and returns a list of directory entries.
 func (a *AferoFS) ReadDir(name string) ([]fs.DirEntry, error) {
 	entries, err := afero.ReadDir(a.fs, name)
@@ -175,57 +162,3 @@ func (d *dirEntry) Type() fs.FileMode {
 func (d *dirEntry) Info() (fs.FileInfo, error) {
 	return d.info, nil
 }
-
-// FileInfo wraps os.FileInfo with additional helper methods
-type FileInfo struct {
-	name    string
-	size    int64
-	mode    fs.FileMode
-	modTime time.Time
-	isDir   bool
-}
-
-// NewFileInfo creates a FileInfo from fs.FileInfo
-func NewFileInfo(info fs.FileInfo) *FileInfo {
-	return &FileInfo{
-		name:    info.Name(),
-		size:    info.Size(),
-		mode:    info.Mode(),
-		modTime: info.ModTime(),
-		isDir:   info.IsDir(),
-	}
-}
-
-func (f *FileInfo) Name() string       { return f.name }
-func (f *FileInfo) Size() int64        { return f.size }
-func (f *FileInfo) Mode() fs.FileMode  { return f.mode }
-func (f *FileInfo) ModTime() time.Time { return f.modTime }
-func (f *FileInfo) IsDir() bool        { return f.isDir }
-func (f *FileInfo) Sys() interface{}   { return nil }
-
-// CopyFile copies a file from src to dst
-func (a *AferoFS) CopyFile(src, dst string) error {
-	srcFile, err := a.fs.Open(src)
-	if err != nil {
-		return err
-	}
-	defer srcFile.Close()
-
-	srcInfo, err := srcFile.Stat()
-	if err != nil {
-		return err
-	}
-
-	dstFile, err := a.fs.Create(dst)
-	if err != nil {
-		return err
-	}
-	defer dstFile.Close()
-
-	_, err = io.Copy(dstFile, srcFile)
-	if err != nil {
-		return err
-	}
-
-	return a.fs.Chmod(dst, srcInfo.Mode())
-}
diff --git a/backend/internal/pkg/validator/path.go b/backend/internal/pkg/validator/path.go
index 309296e..2ee0b58 100644
--- a/backend/internal/pkg/validator/path.go
+++ b/backend/internal/pkg/validator/path.go
@@ -13,10 +13,10 @@ import (
 
 // Errors returned by path validation functions
 var (
-	ErrPathTraversal     = errors.New("path traversal detected")
-	ErrEmptyPath         = errors.New("path cannot be empty")
-	ErrInvalidPath       = errors.New("invalid path")
-	ErrOutsideMountPoint = errors.New("path is outside configured mount points")
+	ErrPathTraversal      = errors.New("path traversal detected")
+	ErrEmptyPath          = errors.New("path cannot be empty")
+	ErrInvalidPath        = errors.New("invalid path")
+	ErrOutsideMountPoint  = errors.New("path is outside configured mount points")
 	ErrMountPointNotFound = errors.New("mount point not found")
 )
 
@@ -69,7 +69,6 @@ func SanitizePath(basePath, requestedPath string) (string, error) {
 	return fullPath, nil
 }
 
-
 // containsTraversalSequence checks if a path contains any path traversal sequences
 func containsTraversalSequence(path string) bool {
 	// Check for various forms of path traversal
@@ -93,13 +92,13 @@ func containsTraversalSequence(path string) bool {
 
 	// Also check for URL-encoded traversal sequences
 	encodedPatterns := []string{
-		"%2e%2e",     // ..
-		"%2e%2e%2f",  // ../
-		"%2e%2e/",    // ../
-		"..%2f",      // ../
-		"%2e%2e%5c",  // ..\
-		"%2e%2e\\",   // ..\
-		"..%5c",      // ..\
+		"%2e%2e",    // ..
+		"%2e%2e%2f", // ../
+		"%2e%2e/",   // ../
+		"..%2f",     // ../
+		"%2e%2e%5c", // ..\
+		"%2e%2e\\",  // ..\
+		"..%5c",     // ..\
 	}
 
 	lowerPath := strings.ToLower(path)
@@ -121,7 +120,7 @@ func ValidatePathAgainstMounts(requestedPath string, mounts []model.MountPoint)
 
 	// Clean and normalize the requested path
 	cleanPath := filepath.Clean(requestedPath)
-	
+
 	// Remove leading slash for comparison
 	cleanPath = strings.TrimPrefix(cleanPath, "/")
 	cleanPath = strings.TrimPrefix(cleanPath, "\\")
@@ -130,7 +129,7 @@ func ValidatePathAgainstMounts(requestedPath string, mounts []model.MountPoint)
 	for i := range mounts {
 		mount := &mounts[i]
 		mountName := strings.TrimPrefix(mount.Name, "/")
-		
+
 		// Check if the path starts with this mount point name
 		if cleanPath == mountName || strings.HasPrefix(cleanPath, mountName+"/") || strings.HasPrefix(cleanPath, mountName+"\\") {
 			// Extract the relative path within the mount
@@ -151,28 +150,6 @@ func ValidatePathAgainstMounts(requestedPath string, mounts []model.MountPoint)
 	return nil, "", ErrOutsideMountPoint
 }
 
-// GetMountPointFromPath extracts the mount point name from a path.
-// Returns the mount point name and the remaining path.
-func GetMountPointFromPath(path string) (mountName string, remainingPath string) {
-	// Clean and normalize
-	cleanPath := filepath.Clean(path)
-	cleanPath = strings.TrimPrefix(cleanPath, "/")
-	cleanPath = strings.TrimPrefix(cleanPath, "\\")
-
-	// Split on first separator
-	parts := strings.SplitN(cleanPath, "/", 2)
-	if len(parts) == 0 {
-		return "", ""
-	}
-
-	mountName = parts[0]
-	if len(parts) > 1 {
-		remainingPath = parts[1]
-	}
-
-	return mountName, remainingPath
-}
-
 // IsValidFileName checks if a filename is valid (no path separators or special chars)
 func IsValidFileName(name string) bool {
 	if name == "" {
@@ -201,9 +178,9 @@ func IsValidFileName(name string) bool {
 func NormalizePath(path string) string {
 	// Clean the path
 	cleaned := filepath.Clean(path)
-	
+
 	// Convert to forward slashes for consistency
 	normalized := filepath.ToSlash(cleaned)
-	
+
 	return normalized
 }
diff --git a/backend/internal/service/auth.go b/backend/internal/service/auth.go
index c0844ce..160292d 100644
--- a/backend/internal/service/auth.go
+++ b/backend/internal/service/auth.go
@@ -34,12 +34,6 @@ type TokenPair struct {
 	ExpiresAt    time.Time `json:"expiresAt"`
 }
 
-// UserCredentials represents login credentials
-type UserCredentials struct {
-	Username string `json:"username"`
-	Password string `json:"password"`
-}
-
 // AuthService defines the authentication service interface
 type AuthService interface {
 	Login(ctx context.Context, username, password string) (*TokenPair, error)
@@ -50,7 +44,6 @@ type AuthService interface {
 	StopCleanup()
 }
 
-
 // authService implements AuthService
 type authService struct {
 	jwtSecret          []byte
@@ -74,10 +67,10 @@ type AuthServiceConfig struct {
 // NewAuthService creates a new authentication service
 func NewAuthService(cfg AuthServiceConfig) AuthService {
 	if cfg.AccessTokenExpiry == 0 {
-		cfg.AccessTokenExpiry = 15 * time.Minute
+		cfg.AccessTokenExpiry = config.DefaultAccessTokenExpiry
 	}
 	if cfg.RefreshTokenExpiry == 0 {
-		cfg.RefreshTokenExpiry = 7 * 24 * time.Hour // 7 days
+		cfg.RefreshTokenExpiry = config.DefaultRefreshTokenExpiry
 	}
 	if cfg.Users == nil {
 		cfg.Users = make(map[string]string)
@@ -129,7 +122,6 @@ func (s *authService) Refresh(ctx context.Context, refreshToken string) (*TokenP
 	return s.generateTokenPair(claims.Username)
 }
 
-
 // ValidateToken validates a JWT token and returns the claims
 func (s *authService) ValidateToken(tokenString string) (*Claims, error) {
 	token, err := jwt.ParseWithClaims(tokenString, &Claims{}, func(token *jwt.Token) (interface{}, error) {
diff --git a/backend/internal/service/job.go b/backend/internal/service/job.go
index 1ee4c55..fbb046a 100644
--- a/backend/internal/service/job.go
+++ b/backend/internal/service/job.go
@@ -18,10 +18,10 @@ import (
 
 // Job service errors
 var (
-	ErrJobNotFound     = errors.New("job not found")
+	ErrJobNotFound       = errors.New("job not found")
 	ErrJobNotCancellable = errors.New("job cannot be cancelled")
-	ErrInvalidJobType  = errors.New("invalid job type")
-	ErrInvalidJobParams = errors.New("invalid job parameters")
+	ErrInvalidJobType    = errors.New("invalid job type")
+	ErrInvalidJobParams  = errors.New("invalid job parameters")
 )
 
 // JobService defines the job operations service interface
@@ -42,9 +42,7 @@ type JobService interface {
 
 // runningJob tracks a job that is currently executing
 type runningJob struct {
-	job    *model.Job
 	cancel context.CancelFunc
-	mu     sync.RWMutex
 }
 
 // jobService implements JobService
@@ -60,7 +58,6 @@ type jobService struct {
 	mountPoints []model.MountPoint
 }
 
-
 // JobServiceConfig holds configuration for the job service
 type JobServiceConfig struct {
 	Workers     int
@@ -71,13 +68,13 @@ type JobServiceConfig struct {
 func NewJobService(fsys filesystem.FS, hub *websocket.Hub, cfg JobServiceConfig) JobService {
 	workers := cfg.Workers
 	if workers <= 0 {
-		workers = 4 // default worker count
+		workers = config.DefaultJobWorkers
 	}
 
 	return &jobService{
 		fs:          fsys,
 		hub:         hub,
-		workQueue:   make(chan *model.Job, 100),
+		workQueue:   make(chan *model.Job, config.JobQueueSize),
 		workers:     workers,
 		stopCh:      make(chan struct{}),
 		mountPoints: cfg.MountPoints,
@@ -242,12 +239,11 @@ func (s *jobService) Cancel(ctx context.Context, jobID string) error {
 	return nil
 }
 
-
 // execute runs a job
 func (s *jobService) execute(ctx context.Context, job *model.Job) {
 	// Create cancellable context for this job
 	jobCtx, cancel := context.WithCancel(ctx)
-	rj := &runningJob{job: job, cancel: cancel}
+	rj := &runningJob{cancel: cancel}
 	s.jobs.Store(job.ID, rj)
 	defer func() {
 		s.jobs.Delete(job.ID)
@@ -430,7 +426,6 @@ func (s *jobService) copyDirRecursive(ctx context.Context, job *model.Job, srcDi
 	return nil
 }
 
-
 // executeMove moves a file or directory
 func (s *jobService) executeMove(ctx context.Context, job *model.Job) error {
 	// Try simple rename first (works if on same filesystem)
diff --git a/frontend/src/lib/components/Breadcrumb.svelte b/frontend/src/lib/components/Breadcrumb.svelte
deleted file mode 100644
index 4b0894c..0000000
--- a/frontend/src/lib/components/Breadcrumb.svelte
+++ /dev/null
@@ -1,61 +0,0 @@
-<script lang="ts">
-	/**
-	 * Breadcrumb component for path navigation
-	 */
-	import { Home, ChevronRight } from 'lucide-svelte';
-
-	interface Props {
-		segments: string[];
-		onNavigate?: (path: string) => void;
-	}
-
-	let { segments = [], onNavigate }: Props = $props();
-
-	function buildPath(index: number): string {
-		return segments.slice(0, index + 1).join('/');
-	}
-
-	function handleClick(index: number): void {
-		onNavigate?.(buildPath(index));
-	}
-
-	function handleRootClick(): void {
-		onNavigate?.('');
-	}
-</script>
-
-<nav aria-label="Breadcrumb" class="flex items-center gap-1 text-sm">
-	<button
-		type="button"
-		onclick={handleRootClick}
-		class="flex items-center text-text-secondary transition-colors hover:text-text-primary"
-		aria-label="Go to root"
-	>
-		<Home size={18} />
-	</button>
-
-	{#if segments.length > 0}
-		{#each segments as segment, index (index)}
-			<ChevronRight size={16} class="shrink-0 text-text-muted" />
-
-			{#if index === segments.length - 1}
-				<span
-					class="max-w-[200px] truncate font-medium text-text-primary"
-					title={segment}
-					aria-current="page"
-				>
-					{segment}
-				</span>
-			{:else}
-				<button
-					type="button"
-					onclick={() => handleClick(index)}
-					class="max-w-[150px] truncate text-text-secondary transition-colors hover:text-text-primary"
-					title={segment}
-				>
-					{segment}
-				</button>
-			{/if}
-		{/each}
-	{/if}
-</nav>
diff --git a/frontend/src/lib/components/DriveCard.svelte b/frontend/src/lib/components/DriveCard.svelte
deleted file mode 100644
index 7a1ef5e..0000000
--- a/frontend/src/lib/components/DriveCard.svelte
+++ /dev/null
@@ -1,161 +0,0 @@
-<script lang="ts">
-	import type { DriveStats } from '$lib/api/files';
-	import { HardDrive, Pencil, X } from 'lucide-svelte';
-	import { formatFileSize } from '$lib/utils/format';
-	import { Badge, ProgressBar, ContextMenu, InlineRename } from '$lib/components/ui';
-	import { settingsStore } from '$lib/stores/settings';
-
-	interface Props {
-		drive: DriveStats;
-		onClick?: () => void;
-	}
-
-	let { drive, onClick }: Props = $props();
-
-	let renaming = $state(false);
-	let contextMenuOpen = $state(false);
-	let contextMenuPosition = $state({ x: 0, y: 0 });
-
-	const usedFormatted = $derived(formatFileSize(drive.usedBytes));
-	const totalFormatted = $derived(formatFileSize(drive.totalBytes));
-	const freeFormatted = $derived(formatFileSize(drive.freeBytes));
-
-	// Subscribe to the store reactively so UI updates when drive names change
-	const customName = $derived($settingsStore.driveNameOverrides[drive.name]);
-	const displayName = $derived(customName || drive.name);
-
-	const progressVariant = $derived.by(() => {
-		if (drive.usedPct >= 90) return 'danger' as const;
-		if (drive.usedPct >= 75) return 'warning' as const;
-		return 'default' as const;
-	});
-
-	// Use the already-derived customName for reactivity
-	const hasCustomName = $derived(!!customName);
-
-	function startRenaming(): void {
-		renaming = true;
-		contextMenuOpen = false;
-	}
-
-	function handleSaveRename(newValue: string): void {
-		if (newValue) {
-			settingsStore.setDriveName(drive.name, newValue);
-		} else {
-			settingsStore.removeDriveName(drive.name);
-		}
-		renaming = false;
-	}
-
-	function handleCancelRename(): void {
-		renaming = false;
-	}
-
-	function resetName(): void {
-		settingsStore.removeDriveName(drive.name);
-		contextMenuOpen = false;
-	}
-
-	function handleCardClick(): void {
-		if (!renaming) {
-			onClick?.();
-		}
-	}
-
-	function handleContextMenu(e: MouseEvent): void {
-		e.preventDefault();
-		contextMenuPosition = { x: e.clientX, y: e.clientY };
-		contextMenuOpen = true;
-	}
-
-	function handleMenuSelect(id: string): void {
-		if (id === 'rename') {
-			startRenaming();
-		} else if (id === 'reset') {
-			resetName();
-		}
-	}
-
-	function handleMenuClose(): void {
-		contextMenuOpen = false;
-	}
-
-	function handleClickOutside(e: MouseEvent): void {
-		if (contextMenuOpen && e.target !== null) {
-			contextMenuOpen = false;
-		}
-	}
-</script>
-
-<svelte:window onclick={handleClickOutside} />
-
-<button
-	type="button"
-	class="relative flex w-full cursor-pointer items-stretch gap-3 rounded-lg border border-border-primary bg-surface-secondary p-4 text-left transition-all duration-150 hover:border-border-focus hover:bg-surface-tertiary"
-	onclick={handleCardClick}
-	oncontextmenu={handleContextMenu}
->
-	<div
-		class="flex w-16 shrink-0 items-center justify-center rounded bg-surface-elevated text-text-secondary"
-	>
-		<HardDrive size={24} />
-	</div>
-
-	<div class="flex min-w-0 flex-1 flex-col gap-1 py-0.5">
-		{#if renaming}
-			<InlineRename value={displayName} onSave={handleSaveRename} onCancel={handleCancelRename} />
-		{:else}
-			<div class="grid h-5 grid-cols-[minmax(0,1fr)_5.25rem] items-center gap-2">
-				<span class="min-w-0 truncate text-sm font-medium text-text-primary" title={displayName}>
-					{displayName}
-				</span>
-				<div class="flex w-[5.25rem] shrink-0 justify-end overflow-hidden">
-					<Badge variant="default">{totalFormatted}</Badge>
-				</div>
-			</div>
-		{/if}
-		<div class="text-xs text-text-muted">
-			{usedFormatted} used · {freeFormatted} free
-			{#if drive.readOnly}
-				<span class="ml-1 text-warning">· Read-only</span>
-			{/if}
-		</div>
-		{#if drive.device}
-			<div
-				class="truncate font-mono text-[10px] text-text-muted"
-				title="{drive.device} ({drive.fsType || 'unknown'})"
-			>
-				{drive.device}{#if drive.fsType}
-					· {drive.fsType}{/if}
-			</div>
-		{/if}
-
-		<div class="flex items-center gap-3">
-			<div class="flex-1">
-				<ProgressBar value={drive.usedPct} size="sm" variant={progressVariant} />
-			</div>
-			<span
-				class="shrink-0 text-[11px] {drive.usedPct >= 90
-					? 'text-danger'
-					: drive.usedPct >= 75
-						? 'text-warning'
-						: 'text-text-muted'}"
-			>
-				{drive.usedPct.toFixed(1)}%
-			</span>
-		</div>
-	</div>
-
-	{#if contextMenuOpen && !renaming}
-		<ContextMenu
-			x={contextMenuPosition.x}
-			y={contextMenuPosition.y}
-			items={[
-				{ id: 'rename', label: 'Rename', icon: Pencil },
-				...(hasCustomName ? [{ id: 'reset', label: 'Reset Name', icon: X }] : [])
-			]}
-			onSelect={handleMenuSelect}
-			onClose={handleMenuClose}
-		/>
-	{/if}
-</button>
diff --git a/frontend/src/lib/components/JobMonitor.svelte b/frontend/src/lib/components/JobMonitor.svelte
deleted file mode 100644
index e189cf9..0000000
--- a/frontend/src/lib/components/JobMonitor.svelte
+++ /dev/null
@@ -1,135 +0,0 @@
-<script lang="ts">
-	/**
-	 * JobMonitor component showing background jobs
-	 * Displays progress, status, and cancel option
-	 */
-
-	import type { Job } from '$lib/api/jobs';
-	import { isJobActive, isJobTerminal } from '$lib/api/jobs';
-	import { formatPercentage, formatFileDate } from '$lib/utils/format';
-	import { X, Copy, FolderInput, Trash2, Settings } from 'lucide-svelte';
-	import { Badge, ProgressBar, Button } from '$lib/components/ui';
-
-	interface Props {
-		jobs: Job[];
-		onCancel?: (jobId: string) => void;
-		onRemove?: (jobId: string) => void;
-		onClearCompleted?: () => void;
-		showCompleted?: boolean;
-		maxDisplay?: number;
-	}
-
-	let { jobs = [], onCancel, onRemove, onClearCompleted, showCompleted = true, maxDisplay = 10 }: Props = $props();
-
-	const filteredJobs = $derived(
-		(showCompleted ? jobs : jobs.filter((j) => !isJobTerminal(j))).slice(0, maxDisplay)
-	);
-
-	const activeCount = $derived(jobs.filter(isJobActive).length);
-	const completedCount = $derived(jobs.filter(isJobTerminal).length);
-
-	function getStatusText(job: Job): string {
-		switch (job.state) {
-			case 'pending': return 'Waiting...';
-			case 'running': return `${formatPercentage(job.progress, 0, false)}`;
-			case 'completed': return 'Completed';
-			case 'failed': return job.error || 'Failed';
-			case 'cancelled': return 'Cancelled';
-			default: return '';
-		}
-	}
-
-	function getFileName(path: string): string {
-		const parts = path.split('/');
-		return parts[parts.length - 1] || path;
-	}
-
-	function getFolderPath(path: string): string {
-		const parts = path.split('/');
-		parts.pop(); // Remove filename
-		return parts.join('/') || '/';
-	}
-</script>
-
-{#if filteredJobs.length > 0}
-	<div class="bg-surface-secondary border border-border-primary rounded-lg overflow-hidden">
-		<div class="px-4 py-3 bg-surface-primary border-b border-border-secondary flex items-center justify-between">
-			<h3 class="m-0 text-sm font-semibold text-text-primary flex items-center gap-2">
-				Background Jobs
-				{#if activeCount > 0}
-					<Badge variant="info">{activeCount} active</Badge>
-				{/if}
-			</h3>
-			{#if completedCount > 0 && onClearCompleted}
-				<Button variant="ghost" size="sm" onclick={onClearCompleted}>
-					Clear done
-				</Button>
-			{/if}
-		</div>
-
-		<ul class="list-none m-0 p-0 max-h-[400px] overflow-y-auto" role="list">
-			{#each filteredJobs as job (job.id)}
-				<li class="px-4 py-3 border-b border-border-secondary last:border-b-0 transition-all hover:bg-surface-tertiary">
-					<div class="flex items-stretch gap-3">
-						<!-- Icon that transforms to X on hover - stretches to match content -->
-						<button
-							type="button"
-							class="group shrink-0 w-16 flex items-center justify-center rounded bg-surface-elevated text-text-secondary border-none cursor-pointer transition-all hover:bg-danger/20 hover:text-danger"
-							onclick={() => isJobTerminal(job) ? onRemove?.(job.id) : onCancel?.(job.id)}
-							aria-label={isJobTerminal(job) ? 'Remove from list' : 'Cancel job'}
-						>
-							<span class="group-hover:hidden">
-								{#if job.type === 'copy'}
-									<Copy size={20} />
-								{:else if job.type === 'move'}
-									<FolderInput size={20} />
-								{:else if job.type === 'delete'}
-									<Trash2 size={20} />
-								{:else}
-									<Settings size={20} />
-								{/if}
-							</span>
-							<span class="hidden group-hover:block">
-								<X size={20} />
-							</span>
-						</button>
-						
-						<div class="flex-1 min-w-0 flex flex-col gap-1 py-0.5">
-							<div class="flex items-center justify-between gap-2">
-								<span class="text-sm font-medium text-text-primary overflow-hidden text-ellipsis whitespace-nowrap" title={job.sourcePath}>
-									{getFileName(job.sourcePath)}
-								</span>
-								<span class="text-xs text-text-muted shrink-0">
-									{formatFileDate(job.createdAt)}
-								</span>
-							</div>
-							<div class="text-xs text-text-muted overflow-hidden text-ellipsis whitespace-nowrap" title="{getFolderPath(job.sourcePath)}{job.destPath ? ` → ${getFolderPath(job.destPath)}` : ''}">
-								{getFolderPath(job.sourcePath)}{#if job.destPath}<span class="mx-1">→</span>{getFolderPath(job.destPath)}{/if}
-							</div>
-							
-							<!-- Progress bar with inline status on same row -->
-							<div class="flex items-center gap-3">
-								<div class="flex-1">
-									<ProgressBar 
-										value={job.state === 'completed' ? 100 : job.progress} 
-										size="sm" 
-										variant={job.state === 'completed' ? 'success' : job.state === 'failed' ? 'danger' : 'default'}
-									/>
-								</div>
-								<span class="text-[11px] shrink-0 {job.state === 'completed' ? 'text-success' : ''} {job.state === 'failed' ? 'text-danger' : ''} {job.state === 'running' ? 'text-accent' : 'text-text-muted'}">
-									{getStatusText(job)}
-								</span>
-							</div>
-						</div>
-					</div>
-				</li>
-			{/each}
-		</ul>
-
-		{#if jobs.length > maxDisplay}
-			<div class="px-4 py-2 text-center text-xs text-text-muted bg-surface-primary border-t border-border-secondary">
-				+{jobs.length - maxDisplay} more jobs
-			</div>
-		{/if}
-	</div>
-{/if}
diff --git a/frontend/src/lib/components/PicoLogo.svelte b/frontend/src/lib/components/PicoLogo.svelte
deleted file mode 100644
index 1ac1960..0000000
--- a/frontend/src/lib/components/PicoLogo.svelte
+++ /dev/null
@@ -1,25 +0,0 @@
-<script lang="ts">
-	/**
-	 * PicoLogo - ASCII art branding component
-	 */
-	interface Props {
-		size?: 'sm' | 'md' | 'lg';
-	}
-
-	let { size = 'md' }: Props = $props();
-
-	const sizeClasses = {
-		sm: 'text-[8px] leading-[1.1]',
-		md: 'text-xs leading-[1.2]',
-		lg: 'text-sm leading-[1.2]',
-	};
-</script>
-
-<pre class="font-mono text-center font-bold whitespace-pre select-none {sizeClasses[size]}">
-<span class="text-danger">██████╗</span> <span class="text-warning">██╗</span> <span class="text-success">██████╗</span> <span class="text-accent">██████╗</span>
-<span class="text-danger"> ██╔══██╗</span><span class="text-warning">██║</span><span class="text-success">██╔════╝</span><span class="text-accent">██╔═══██╗</span>
-<span class="text-danger"> ██████╔╝</span><span class="text-warning">██║</span><span class="text-success">██║     </span><span class="text-accent">██║   ██║</span>
-<span class="text-danger"> ██╔═══╝ </span><span class="text-warning">██║</span><span class="text-success">██║     </span><span class="text-accent">██║   ██║</span>
-<span class="text-danger"> ██║     </span><span class="text-warning">██║</span><span class="text-success">╚██████╗</span><span class="text-accent">╚██████╔╝</span>
-<span class="text-danger">╚═╝     </span><span class="text-warning">╚═╝</span> <span class="text-success">╚═════╝</span> <span class="text-accent">╚═════╝</span>
-</pre>
diff --git a/frontend/src/lib/components/Sidebar.svelte b/frontend/src/lib/components/Sidebar.svelte
index c3fb573..d80daf6 100644
--- a/frontend/src/lib/components/Sidebar.svelte
+++ b/frontend/src/lib/components/Sidebar.svelte
@@ -2,7 +2,6 @@
 	/**
 	 * Sidebar component - navigation panel with places and favorites
 	 */
-	import type { MountPoint } from '$lib/api/files';
 	import {
 		ChevronDown,
 		Server,
@@ -18,7 +17,6 @@
 	import { settingsStore } from '$lib/stores/settings';
 
 	interface Props {
-		roots?: MountPoint[];
 		currentPath?: string;
 		onNavigate?: (path: string) => void;
 	}
diff --git a/frontend/src/lib/components/Toolbar.svelte b/frontend/src/lib/components/Toolbar.svelte
index f5a026b..45077ba 100644
--- a/frontend/src/lib/components/Toolbar.svelte
+++ b/frontend/src/lib/components/Toolbar.svelte
@@ -9,10 +9,24 @@
 		Home,
 		RefreshCw,
 		Settings,
-		FolderUp
+		FolderUp,
+		Folder,
+		Loader2
 	} from 'lucide-svelte';
+	import { tick } from 'svelte';
+	import { listDirectory, listRoots } from '$lib/api/files';
 	import SearchBar from '$lib/components/SearchBar.svelte';
 
+	interface PathSuggestion {
+		path: string;
+	}
+
+	interface PathDisplayPart {
+		text: string;
+		selected: boolean;
+		caret?: boolean;
+	}
+
 	interface Props {
 		pathSegments?: string[];
 		canGoBack?: boolean;
@@ -31,6 +45,7 @@
 		searchLoading?: boolean;
 		onSearchInput?: (query: string) => void;
 		onSearchClear?: () => void;
+		includeHiddenSuggestions?: boolean;
 	}
 
 	let {
@@ -50,9 +65,47 @@
 		searchValue = '',
 		searchLoading = false,
 		onSearchInput,
-		onSearchClear
+		onSearchClear,
+		includeHiddenSuggestions = false
 	}: Props = $props();
 
+	const suggestionPageSize = 1000;
+
+	let isEditingPath = $state(false);
+	let pathDraft = $state('');
+	let suggestions = $state<PathSuggestion[]>([]);
+	let activeSuggestionIndex = $state(0);
+	let suggestionSelectedByKeyboard = $state(false);
+	let isLoadingSuggestions = $state(false);
+	let pathSelectionStart = $state(0);
+	let pathSelectionEnd = $state(0);
+	let pathInputEl = $state<HTMLInputElement | undefined>();
+	let suggestionListEl = $state<HTMLDivElement | undefined>();
+	let suggestionTimer: ReturnType<typeof setTimeout> | undefined;
+	let blurTimer: ReturnType<typeof setTimeout> | undefined;
+	let suggestionRequestId = 0;
+
+	const currentPath = $derived(pathSegments.join('/'));
+	const activeSuggestion = $derived(suggestions[activeSuggestionIndex] ?? null);
+	const completionSuffix = $derived.by(() => {
+		if (!isEditingPath || !activeSuggestion) return '';
+
+		const normalizedDraft = normalizeInputPath(pathDraft).toLocaleLowerCase();
+		const suggestionPath = activeSuggestion.path;
+
+		if (!suggestionPath.toLocaleLowerCase().startsWith(normalizedDraft)) return '';
+		return suggestionPath.slice(normalizedDraft.length);
+	});
+	const hasPathSelection = $derived(pathSelectionStart !== pathSelectionEnd);
+	const pathSelectionMin = $derived(Math.min(pathSelectionStart, pathSelectionEnd));
+	const pathSelectionMax = $derived(Math.max(pathSelectionStart, pathSelectionEnd));
+	const draftDisplayParts = $derived.by(() =>
+		buildPathDisplayParts(pathDraft, pathSelectionMin, pathSelectionMax, pathSelectionStart)
+	);
+	const completionDisplayText = $derived(
+		!hasPathSelection && pathDraft.length > 0 ? formatPathText(completionSuffix) : ''
+	);
+
 	function buildPath(index: number): string {
 		return pathSegments.slice(0, index + 1).join('/');
 	}
@@ -65,12 +118,366 @@
 		onNavigate?.('');
 	}
 
+	function normalizeInputPath(value: string): string {
+		return value
+			.replaceAll('\\', '/')
+			.replace(/^\/+/, '')
+			.replace(/\/{2,}/g, '/');
+	}
+
+	function normalizeNavigablePath(value: string): string {
+		return normalizeInputPath(value).replace(/\/+$/, '').trim();
+	}
+
+	function formatPathText(value: string): string {
+		return value
+			.replaceAll('\\', '/')
+			.replace(/\/{2,}/g, '/')
+			.replaceAll('/', ' / ');
+	}
+
+	function pushDisplayPart(parts: PathDisplayPart[], part: PathDisplayPart): void {
+		const previous = parts.at(-1);
+		if (!part.caret && previous && !previous.caret && previous.selected === part.selected) {
+			previous.text += part.text;
+			return;
+		}
+
+		parts.push(part);
+	}
+
+	function buildPathDisplayParts(
+		value: string,
+		selectionMin: number,
+		selectionMax: number,
+		caretOffset: number
+	): PathDisplayPart[] {
+		const normalized = normalizeInputPath(value);
+		const parts: PathDisplayPart[] = [];
+
+		for (let offset = 0; offset <= normalized.length; offset += 1) {
+			if (selectionMin === selectionMax && offset === caretOffset) {
+				pushDisplayPart(parts, { text: '', selected: false, caret: true });
+			}
+
+			if (offset === normalized.length) break;
+
+			pushDisplayPart(parts, {
+				text: normalized[offset] === '/' ? ' / ' : normalized[offset],
+				selected: offset >= selectionMin && offset < selectionMax
+			});
+		}
+
+		return parts;
+	}
+
+	function syncPathSelection(): void {
+		if (!pathInputEl) return;
+
+		pathSelectionStart = pathInputEl.selectionStart ?? pathDraft.length;
+		pathSelectionEnd = pathInputEl.selectionEnd ?? pathSelectionStart;
+	}
+
+	function scrollActiveSuggestionIntoView(): void {
+		const activeOption = suggestionListEl?.querySelector<HTMLElement>(
+			`[data-suggestion-index="${activeSuggestionIndex}"]`
+		);
+
+		activeOption?.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+	}
+
+	function queueActiveSuggestionScroll(): void {
+		void tick().then(scrollActiveSuggestionIntoView);
+	}
+
+	function resetSuggestionScroll(): void {
+		void tick().then(() => {
+			if (suggestionListEl) {
+				suggestionListEl.scrollTop = 0;
+			}
+		});
+	}
+
+	function getSuggestionParts(value: string): { parentPath: string; prefix: string } {
+		const normalized = normalizeInputPath(value);
+		const withoutTrailingSlash = normalized.replace(/\/+$/, '');
+
+		if (normalized.endsWith('/')) {
+			return { parentPath: withoutTrailingSlash, prefix: '' };
+		}
+
+		const lastSlashIndex = withoutTrailingSlash.lastIndexOf('/');
+		if (lastSlashIndex === -1) {
+			return { parentPath: '', prefix: withoutTrailingSlash };
+		}
+
+		return {
+			parentPath: withoutTrailingSlash.slice(0, lastSlashIndex),
+			prefix: withoutTrailingSlash.slice(lastSlashIndex + 1)
+		};
+	}
+
+	function buildSuggestionPath(parentPath: string, name: string): string {
+		return parentPath ? `${parentPath}/${name}` : name;
+	}
+
+	function filterSuggestions(
+		names: Array<{ name: string }>,
+		parentPath: string,
+		prefix: string
+	): PathSuggestion[] {
+		const normalizedPrefix = prefix.toLocaleLowerCase();
+
+		return names
+			.filter((item) => item.name.toLocaleLowerCase().startsWith(normalizedPrefix))
+			.map((item) => ({
+				path: buildSuggestionPath(parentPath, item.name)
+			}));
+	}
+
+	async function fetchRootSuggestions(prefix: string): Promise<PathSuggestion[]> {
+		const response = await listRoots();
+		return filterSuggestions(response.roots, '', prefix);
+	}
+
+	async function fetchChildSuggestions(
+		parentPath: string,
+		prefix: string
+	): Promise<PathSuggestion[]> {
+		let page = 1;
+		let loadedCount = 0;
+		let totalCount = Number.POSITIVE_INFINITY;
+		const directories: Array<{ name: string }> = [];
+
+		while (loadedCount < totalCount) {
+			const response = await listDirectory(parentPath, {
+				page,
+				pageSize: suggestionPageSize,
+				sortBy: 'name',
+				sortDir: 'asc',
+				includeHidden: includeHiddenSuggestions || prefix.startsWith('.'),
+				filter: prefix || undefined
+			});
+
+			directories.push(...response.items.filter((item) => item.isDir));
+			loadedCount += response.items.length;
+			totalCount = response.totalCount;
+
+			if (response.items.length === 0) break;
+			page += 1;
+		}
+
+		return filterSuggestions(directories, parentPath, prefix);
+	}
+
+	async function loadSuggestions(value: string): Promise<void> {
+		const requestId = ++suggestionRequestId;
+		const { parentPath, prefix } = getSuggestionParts(value);
+
+		isLoadingSuggestions = true;
+
+		try {
+			const nextSuggestions = parentPath
+				? await fetchChildSuggestions(parentPath, prefix)
+				: await fetchRootSuggestions(prefix);
+
+			if (requestId !== suggestionRequestId) return;
+
+			suggestions = nextSuggestions;
+			activeSuggestionIndex = 0;
+			suggestionSelectedByKeyboard = false;
+			resetSuggestionScroll();
+		} catch {
+			if (requestId !== suggestionRequestId) return;
+			suggestions = [];
+			activeSuggestionIndex = 0;
+			suggestionSelectedByKeyboard = false;
+			resetSuggestionScroll();
+		} finally {
+			if (requestId === suggestionRequestId) {
+				isLoadingSuggestions = false;
+			}
+		}
+	}
+
+	function queueSuggestions(): void {
+		if (suggestionTimer) {
+			clearTimeout(suggestionTimer);
+		}
+
+		if (!isEditingPath) return;
+
+		const value = pathDraft;
+		suggestionTimer = setTimeout(() => {
+			void loadSuggestions(value);
+		}, 120);
+	}
+
+	async function beginPathEdit(): Promise<void> {
+		if (isEditingPath) return;
+
+		isEditingPath = true;
+		pathDraft = currentPath;
+		pathSelectionStart = 0;
+		pathSelectionEnd = currentPath.length;
+		suggestions = [];
+		activeSuggestionIndex = 0;
+		suggestionSelectedByKeyboard = false;
+		queueSuggestions();
+
+		await tick();
+
+		pathInputEl?.focus();
+		pathInputEl?.select();
+		syncPathSelection();
+	}
+
+	function cancelPathEdit(): void {
+		if (suggestionTimer) {
+			clearTimeout(suggestionTimer);
+		}
+
+		isEditingPath = false;
+		pathDraft = '';
+		pathSelectionStart = 0;
+		pathSelectionEnd = 0;
+		suggestions = [];
+		activeSuggestionIndex = 0;
+		suggestionSelectedByKeyboard = false;
+		isLoadingSuggestions = false;
+		suggestionRequestId++;
+	}
+
+	function commitPath(value: string = pathDraft): void {
+		const nextPath = normalizeNavigablePath(value);
+		cancelPathEdit();
+
+		if (nextPath !== currentPath) {
+			onNavigate?.(nextPath);
+		}
+	}
+
+	function completePath(value: string): void {
+		pathDraft = `${value}/`;
+		activeSuggestionIndex = 0;
+		suggestionSelectedByKeyboard = false;
+		queueSuggestions();
+
+		void tick().then(() => {
+			const cursorPosition = pathDraft.length;
+			pathInputEl?.focus();
+			pathInputEl?.setSelectionRange(cursorPosition, cursorPosition);
+			syncPathSelection();
+		});
+	}
+
+	function handlePathBarClick(event: MouseEvent): void {
+		const target = event.target as HTMLElement;
+		if (target.closest('button') || isEditingPath) return;
+
+		void beginPathEdit();
+	}
+
+	function handlePathBarKeydown(event: KeyboardEvent): void {
+		const target = event.target as HTMLElement;
+		if (target.closest('button, input') || isEditingPath) return;
+		if (event.key !== 'Enter' && event.key !== 'F2') return;
+
+		event.preventDefault();
+		void beginPathEdit();
+	}
+
+	function handlePathInput(event: Event): void {
+		pathDraft = normalizeInputPath((event.target as HTMLInputElement).value);
+		activeSuggestionIndex = 0;
+		suggestionSelectedByKeyboard = false;
+		queueSuggestions();
+
+		void tick().then(syncPathSelection);
+	}
+
+	function handlePathInputFocus(): void {
+		if (blurTimer) {
+			clearTimeout(blurTimer);
+		}
+
+		syncPathSelection();
+	}
+
+	function handlePathInputBlur(): void {
+		blurTimer = setTimeout(() => {
+			if (isEditingPath) {
+				cancelPathEdit();
+			}
+		}, 120);
+	}
+
+	function handlePathSubmit(event: SubmitEvent): void {
+		event.preventDefault();
+
+		const shouldUseSuggestion =
+			Boolean(activeSuggestion) &&
+			(suggestionSelectedByKeyboard || (pathDraft.length > 0 && !pathDraft.endsWith('/')));
+
+		commitPath(shouldUseSuggestion ? activeSuggestion?.path : pathDraft);
+	}
+
+	function isCaretAtEnd(): boolean {
+		return (
+			pathInputEl?.selectionStart === pathDraft.length &&
+			pathInputEl?.selectionEnd === pathDraft.length
+		);
+	}
+
+	function handlePathKeydown(event: KeyboardEvent): void {
+		switch (event.key) {
+			case 'Escape':
+				event.preventDefault();
+				cancelPathEdit();
+				break;
+
+			case 'ArrowDown':
+				if (suggestions.length === 0) return;
+				event.preventDefault();
+				activeSuggestionIndex = (activeSuggestionIndex + 1) % suggestions.length;
+				suggestionSelectedByKeyboard = true;
+				queueActiveSuggestionScroll();
+				break;
+
+			case 'ArrowUp':
+				if (suggestions.length === 0) return;
+				event.preventDefault();
+				activeSuggestionIndex =
+					(activeSuggestionIndex - 1 + suggestions.length) % suggestions.length;
+				suggestionSelectedByKeyboard = true;
+				queueActiveSuggestionScroll();
+				break;
+
+			case 'Tab':
+				if (!activeSuggestion) return;
+				event.preventDefault();
+				completePath(activeSuggestion.path);
+				break;
+
+			case 'ArrowRight':
+				if (!activeSuggestion || !completionSuffix || !isCaretAtEnd()) return;
+				event.preventDefault();
+				completePath(activeSuggestion.path);
+				break;
+		}
+	}
+
+	function handleSuggestionPointerDown(event: PointerEvent, suggestion: PathSuggestion): void {
+		event.preventDefault();
+		commitPath(suggestion.path);
+	}
+
 	const navBtnClass =
 		'w-7 h-7 flex items-center justify-center bg-transparent border-none rounded text-text-secondary cursor-pointer transition-all duration-100 hover:enabled:bg-surface-elevated hover:enabled:text-text-primary disabled:text-text-disabled disabled:cursor-not-allowed';
 </script>
 
 <div
-	class="flex items-center gap-2 border-b border-border-secondary bg-surface-primary px-3 py-1.5"
+	class="relative z-50 flex items-center gap-2 border-b border-border-secondary bg-surface-primary px-3 py-1.5"
 >
 	<!-- Navigation buttons -->
 	<div class="flex gap-0.5">
@@ -93,36 +500,131 @@
 
 	<!-- Path bar -->
 	<div
-		class="flex min-w-0 flex-1 items-center gap-1.5 rounded border border-border-primary bg-surface-secondary px-2 py-1"
+		class="relative flex min-w-0 flex-1 cursor-text items-center gap-1.5 rounded border border-border-primary bg-surface-secondary px-2 py-1 focus-within:border-border-focus"
+		role="button"
+		tabindex="0"
+		aria-label="Edit location"
+		onclick={handlePathBarClick}
+		onkeydown={handlePathBarKeydown}
 	>
 		<button
 			type="button"
 			class="flex h-4.5 w-4.5 shrink-0 cursor-pointer items-center justify-center border-none bg-transparent text-text-secondary hover:text-text-primary"
-			onclick={handleRootClick}
+			onclick={(event) => {
+				event.stopPropagation();
+				handleRootClick();
+			}}
 			title="Go to root"
 		>
 			<Home size={14} />
 		</button>
-		<div class="flex flex-1 items-center gap-1 overflow-hidden">
-			{#if pathSegments.length === 0}
+		<div class="relative flex min-w-0 flex-1 items-center">
+			{#if isEditingPath}
+				<form class="relative h-5 w-full" onsubmit={handlePathSubmit}>
+					<div
+						class="pointer-events-none absolute inset-0 flex min-w-0 items-center overflow-hidden text-[13px] whitespace-nowrap"
+						aria-hidden="true"
+					>
+						{#if pathDraft.length === 0}
+							<span class="text-text-muted">Type a location</span>
+						{:else}
+							<div class="flex min-w-0 items-center overflow-hidden">
+								{#each draftDisplayParts as part, index (`path-part-${index}-${part.text}-${part.selected}-${part.caret}`)}
+									{#if part.caret}
+										<span class="inline-block h-3.5 w-px shrink-0 animate-pulse bg-accent"></span>
+									{:else}
+										<span
+											class="min-w-0 truncate rounded-sm {part.selected
+												? 'bg-accent px-0.5 text-white'
+												: 'text-text-primary'}">{part.text}</span
+										>
+									{/if}
+								{/each}
+								{#if completionDisplayText}
+									<span class="min-w-0 truncate text-text-muted">{completionDisplayText}</span>
+								{/if}
+							</div>
+						{/if}
+					</div>
+
+					<!-- Keep a real input for keyboard editing while rendering the path as custom breadcrumbs. -->
+					<input
+						bind:this={pathInputEl}
+						type="text"
+						value={pathDraft}
+						oninput={handlePathInput}
+						onkeydown={handlePathKeydown}
+						onkeyup={syncPathSelection}
+						onclick={syncPathSelection}
+						onselect={syncPathSelection}
+						onpointerup={syncPathSelection}
+						onfocus={handlePathInputFocus}
+						onblur={handlePathInputBlur}
+						class="absolute inset-0 z-10 h-full w-full cursor-text border-none bg-transparent p-0 text-[13px] text-transparent caret-transparent outline-none selection:bg-transparent"
+						placeholder="Type a location"
+						autocomplete="off"
+						autocapitalize="off"
+						spellcheck="false"
+						aria-label="Location"
+						aria-autocomplete="list"
+					/>
+				</form>
+			{:else if pathSegments.length === 0}
 				<span class="text-[13px] whitespace-nowrap text-text-primary">This Server</span>
 			{:else}
-				{#each pathSegments as segment, index (index)}
-					{#if index > 0}
-						<span class="text-xs text-text-muted">/</span>
+				<div class="flex flex-1 items-center gap-1 overflow-hidden">
+					{#each pathSegments as segment, index (index)}
+						{#if index > 0}
+							<span class="text-xs text-text-muted">/</span>
+						{/if}
+						{#if index === pathSegments.length - 1}
+							<span class="text-[13px] whitespace-nowrap text-text-primary">{segment}</span>
+						{:else}
+							<button
+								type="button"
+								class="cursor-pointer border-none bg-transparent p-0 text-[13px] text-text-secondary hover:text-white hover:underline"
+								onclick={(event) => {
+									event.stopPropagation();
+									handleSegmentClick(index);
+								}}
+							>
+								{segment}
+							</button>
+						{/if}
+					{/each}
+				</div>
+			{/if}
+
+			{#if isEditingPath && (suggestions.length > 0 || isLoadingSuggestions)}
+				<div
+					bind:this={suggestionListEl}
+					class="absolute top-full right-0 left-0 z-[200] mt-1 max-h-64 overflow-auto rounded border border-border-primary bg-[#202020] py-1 shadow-2xl ring-1 ring-black/40"
+				>
+					{#if isLoadingSuggestions && suggestions.length === 0}
+						<div class="flex items-center gap-2 px-3 py-2 text-xs text-text-secondary">
+							<Loader2 size={14} class="animate-spin" />
+							<span>Finding folders...</span>
+						</div>
 					{/if}
-					{#if index === pathSegments.length - 1}
-						<span class="text-[13px] whitespace-nowrap text-text-primary">{segment}</span>
-					{:else}
+
+					{#each suggestions as suggestion, index (suggestion.path)}
 						<button
 							type="button"
-							class="cursor-pointer border-none bg-transparent p-0 text-[13px] text-text-secondary hover:text-white hover:underline"
-							onclick={() => handleSegmentClick(index)}
+							data-suggestion-index={index}
+							class="flex w-full items-center gap-2 border-none px-3 py-1.5 text-left text-[13px] {index ===
+							activeSuggestionIndex
+								? 'bg-accent-muted text-white'
+								: 'bg-transparent text-text-primary hover:bg-[#2b2b2b]'}"
+							onpointerdown={(event) => handleSuggestionPointerDown(event, suggestion)}
+							onmouseenter={() => {
+								activeSuggestionIndex = index;
+							}}
 						>
-							{segment}
+							<Folder size={14} class="shrink-0 text-folder" />
+							<span class="min-w-0 flex-1 truncate">{suggestion.path}</span>
 						</button>
-					{/if}
-				{/each}
+					{/each}
+				</div>
 			{/if}
 		</div>
 	</div>
diff --git a/frontend/src/lib/components/UploadDropzone.svelte b/frontend/src/lib/components/UploadDropzone.svelte
deleted file mode 100644
index f3d92cb..0000000
--- a/frontend/src/lib/components/UploadDropzone.svelte
+++ /dev/null
@@ -1,123 +0,0 @@
-<script lang="ts">
-	/**
-	 * UploadDropzone component with drag-drop support
-	 * Triggers chunked upload on file drop
-	 */
-	import { Upload } from 'lucide-svelte';
-
-	interface Props {
-		disabled?: boolean;
-		accept?: string;
-		multiple?: boolean;
-		onFilesSelected?: (files: File[]) => void;
-	}
-
-	let { disabled = false, accept = '', multiple = true, onFilesSelected }: Props = $props();
-
-	let isDragOver = $state(false);
-	let fileInput: HTMLInputElement;
-
-	function handleDragOver(event: DragEvent) {
-		if (disabled) return;
-		event.preventDefault();
-		event.stopPropagation();
-		isDragOver = true;
-	}
-
-	function handleDragLeave(event: DragEvent) {
-		event.preventDefault();
-		event.stopPropagation();
-		isDragOver = false;
-	}
-
-	function handleDrop(event: DragEvent) {
-		event.preventDefault();
-		event.stopPropagation();
-		isDragOver = false;
-
-		if (disabled) return;
-
-		const files = event.dataTransfer?.files;
-		if (files && files.length > 0) {
-			const fileArray = multiple ? Array.from(files) : [files[0]];
-			onFilesSelected?.(fileArray);
-		}
-	}
-
-	function handleFileChange(event: Event) {
-		const target = event.target as HTMLInputElement;
-		const files = target.files;
-
-		if (files && files.length > 0) {
-			const fileArray = Array.from(files);
-			onFilesSelected?.(fileArray);
-		}
-
-		target.value = '';
-	}
-
-	function openFilePicker() {
-		if (!disabled) {
-			fileInput?.click();
-		}
-	}
-
-	function handleKeyDown(event: KeyboardEvent) {
-		if (event.key === 'Enter' || event.key === ' ') {
-			event.preventDefault();
-			openFilePicker();
-		}
-	}
-</script>
-
-<div
-	class="flex flex-col items-center justify-center p-8 border-2 border-dashed rounded-lg cursor-pointer transition-all min-h-[150px]
-		{isDragOver ? 'border-accent bg-accent/10 border-solid' : 'border-border-primary bg-surface-secondary hover:border-text-muted hover:bg-surface-tertiary'}
-		{disabled ? 'opacity-50 cursor-not-allowed' : ''}
-		focus:outline-2 focus:outline-accent focus:outline-offset-2"
-	ondragover={handleDragOver}
-	ondragleave={handleDragLeave}
-	ondrop={handleDrop}
-	onclick={openFilePicker}
-	onkeydown={handleKeyDown}
-	tabindex={disabled ? -1 : 0}
-	role="button"
-	aria-label="Upload files by clicking or dragging"
-	aria-disabled={disabled}
->
-	<input
-		bind:this={fileInput}
-		type="file"
-		{accept}
-		{multiple}
-		{disabled}
-		onchange={handleFileChange}
-		class="absolute w-px h-px p-0 -m-px overflow-hidden whitespace-nowrap border-0"
-		style="clip: rect(0, 0, 0, 0);"
-		aria-hidden="true"
-		tabindex="-1"
-	/>
-
-	<div class="flex flex-col items-center gap-3 text-center">
-		<div class="flex items-center justify-center w-12 h-12 {isDragOver ? 'text-accent' : 'text-text-muted'}">
-			<Upload size={48} />
-		</div>
-
-		<div class="flex flex-col gap-1">
-			{#if isDragOver}
-				<span class="text-sm text-text-primary">Drop files here</span>
-			{:else}
-				<span class="text-sm text-text-secondary">
-					<span class="text-accent font-medium">Click to upload</span> or drag and drop
-				</span>
-				<span class="text-xs text-text-muted">
-					{#if accept}
-						Accepted: {accept}
-					{:else}
-						Any file type
-					{/if}
-				</span>
-			{/if}
-		</div>
-	</div>
-</div>
diff --git a/frontend/src/lib/components/preview/CodePreview.svelte b/frontend/src/lib/components/preview/CodePreview.svelte
index 4c793a2..d9b96d1 100644
--- a/frontend/src/lib/components/preview/CodePreview.svelte
+++ b/frontend/src/lib/components/preview/CodePreview.svelte
@@ -6,6 +6,7 @@
 	import { getMonacoLanguage } from '$lib/utils/fileTypes';
 	import { getFileContent, saveFileContent, type FileInfo } from '$lib/api/files';
 	import { Button, Spinner } from '$lib/components/ui';
+	import type * as Monaco from 'monaco-editor';
 
 	interface Props {
 		url: string;
@@ -17,9 +18,9 @@
 	let { url, filename, path, onSaved }: Props = $props();
 
 	let containerElement: HTMLDivElement | null = $state(null);
-	let editor: any = $state(null);
-	let monaco: any = $state(null);
-	let changeDisposable: { dispose: () => void } | null = null;
+	let editor: Monaco.editor.IStandaloneCodeEditor | null = $state(null);
+	let monaco: typeof Monaco | null = $state(null);
+	let changeDisposable: Monaco.IDisposable | null = null;
 	let content = $state<string | null>(null);
 	let error = $state<string | null>(null);
 	let loading = $state(true);
@@ -35,8 +36,8 @@
 		return value instanceof Error ? value.message : 'Failed to save file.';
 	}
 
-	function defineTheme() {
-		monaco.editor.defineTheme('filemanager-dark', {
+	function defineTheme(monacoApi: typeof Monaco) {
+		monacoApi.editor.defineTheme('filemanager-dark', {
 			base: 'vs-dark',
 			inherit: true,
 			rules: [],
@@ -53,9 +54,10 @@
 
 	function createEditor() {
 		if (!monaco || !containerElement || editor) return;
+		const monacoApi = monaco;
 
-		defineTheme();
-		editor = monaco.editor.create(containerElement, {
+		defineTheme(monacoApi);
+		const createdEditor = monacoApi.editor.create(containerElement, {
 			value: content ?? '',
 			language: language,
 			theme: 'filemanager-dark',
@@ -75,12 +77,13 @@
 				horizontalScrollbarSize: 10
 			}
 		});
+		editor = createdEditor;
 
-		changeDisposable = editor.onDidChangeModelContent(() => {
-			dirty = content !== null && editor.getValue() !== content;
+		changeDisposable = createdEditor.onDidChangeModelContent(() => {
+			dirty = content !== null && createdEditor.getValue() !== content;
 			saveMessage = null;
 		});
-		editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, () => {
+		createdEditor.addCommand(monacoApi.KeyMod.CtrlCmd | monacoApi.KeyCode.KeyS, () => {
 			void handleSave();
 		});
 	}
@@ -114,7 +117,7 @@
 
 			// Configure Monaco environment for web workers
 			self.MonacoEnvironment = {
-				getWorker: function (_moduleId: string, label: string) {
+				getWorker: function () {
 					return new Worker(
 						URL.createObjectURL(
 							new Blob([`self.onmessage = function() {}`], { type: 'text/javascript' })
@@ -182,7 +185,10 @@
 		editor.setValue(content);
 		dirty = false;
 		if (monaco) {
-			monaco.editor.setModelLanguage(editor.getModel(), language);
+			const model = editor.getModel();
+			if (model) {
+				monaco.editor.setModelLanguage(model, language);
+			}
 		}
 	});
 </script>
diff --git a/frontend/src/lib/components/preview/OfficePreview.svelte b/frontend/src/lib/components/preview/OfficePreview.svelte
index 28ab151..ccc8b71 100644
--- a/frontend/src/lib/components/preview/OfficePreview.svelte
+++ b/frontend/src/lib/components/preview/OfficePreview.svelte
@@ -65,7 +65,10 @@
 				: null;
 		sheets = [];
 		selectedSheet = 0;
+		// Third-party preview renderers own these host containers.
+		// eslint-disable-next-line svelte/no-dom-manipulating
 		if (docxContainer) docxContainer.replaceChildren();
+		// eslint-disable-next-line svelte/no-dom-manipulating
 		if (pptxContainer) pptxContainer.replaceChildren();
 	}
 
@@ -83,6 +86,7 @@
 		}
 
 		const { renderAsync } = await import('docx-preview');
+		// eslint-disable-next-line svelte/no-dom-manipulating
 		docxContainer.replaceChildren();
 		await renderAsync(buffer, docxContainer, undefined, {
 			breakPages: true,
@@ -125,6 +129,7 @@
 		}
 
 		const { init } = await import('pptx-preview');
+		// eslint-disable-next-line svelte/no-dom-manipulating
 		pptxContainer.replaceChildren();
 		const previewer = init(pptxContainer, {
 			width: 960,
@@ -253,7 +258,7 @@
 									>
 										{rowIndex + 1}
 									</th>
-									{#each Array.from({ length: maxColumns }) as _, columnIndex (columnIndex)}
+									{#each Array.from({ length: maxColumns }, (_, index) => index) as columnIndex (columnIndex)}
 										<td
 											class="max-w-[360px] min-w-[120px] border border-[#d8dee8] px-2 py-1 align-top whitespace-pre-wrap"
 											title={formatCell(row[columnIndex])}
diff --git a/frontend/src/lib/components/preview/VideoPreview.svelte b/frontend/src/lib/components/preview/VideoPreview.svelte
index 8b75aa9..68d58ef 100644
--- a/frontend/src/lib/components/preview/VideoPreview.svelte
+++ b/frontend/src/lib/components/preview/VideoPreview.svelte
@@ -3,6 +3,7 @@
 	 * VideoPreview - HTML5 video player with streaming support
 	 */
 	import { Button } from '$lib/components/ui';
+	import { formatFileSize } from '$lib/utils/format';
 	import { Download } from 'lucide-svelte';
 
 	interface Props {
@@ -12,12 +13,13 @@
 		sizeBytes?: number;
 	}
 
-	let { url, downloadUrl }: Props = $props();
+	let { url, filename, downloadUrl, sizeBytes }: Props = $props();
 
 	let failedUrl = $state<string | null>(null);
 	let errorMessage = $state<string | null>(null);
 
 	const currentError = $derived(failedUrl === url ? errorMessage : null);
+	const videoLabel = $derived(sizeBytes ? `${filename} (${formatFileSize(sizeBytes)})` : filename);
 
 	function setError(message: string) {
 		failedUrl = url;
@@ -67,6 +69,8 @@
 		{#key url}
 			<video
 				src={url}
+				aria-label={videoLabel}
+				title={videoLabel}
 				controls
 				preload="metadata"
 				playsinline
diff --git a/frontend/src/lib/components/settings/SettingsRow.svelte b/frontend/src/lib/components/settings/SettingsRow.svelte
deleted file mode 100644
index 216e4ac..0000000
--- a/frontend/src/lib/components/settings/SettingsRow.svelte
+++ /dev/null
@@ -1,25 +0,0 @@
-<script lang="ts">
-	/**
-	 * Settings row component for individual settings
-	 * Displays label, description, and a control (toggle, select, or custom)
-	 */
-	import type { Snippet } from 'svelte';
-
-	interface Props {
-		label: string;
-		description?: string;
-		children?: Snippet;
-	}
-
-	let { label, description, children }: Props = $props();
-</script>
-
-<div class="flex items-center justify-between py-2 px-3">
-	<div class="flex flex-col gap-0.5">
-		<span class="text-[13px] text-text-primary">{label}</span>
-		{#if description}
-			<span class="text-[11px] text-text-muted">{description}</span>
-		{/if}
-	</div>
-	{@render children?.()}
-</div>
diff --git a/frontend/src/lib/components/settings/SettingsSection.svelte b/frontend/src/lib/components/settings/SettingsSection.svelte
deleted file mode 100644
index 7cb4b00..0000000
--- a/frontend/src/lib/components/settings/SettingsSection.svelte
+++ /dev/null
@@ -1,41 +0,0 @@
-<script lang="ts">
-	/**
-	 * Collapsible settings section component
-	 * Provides consistent header styling and expand/collapse behavior
-	 */
-	import { ChevronDown } from 'lucide-svelte';
-	import type { Snippet, SvelteComponent } from 'svelte';
-
-	interface Props {
-		title: string;
-		// eslint-disable-next-line @typescript-eslint/no-explicit-any
-		icon: any;
-		collapsed?: boolean;
-		children?: Snippet;
-	}
-
-	let { title, icon: Icon, collapsed = $bindable(false), children }: Props = $props();
-
-	const sectionHeaderClass =
-		'w-full flex items-center gap-1.5 px-3 py-2.5 bg-transparent border-none text-text-secondary text-[11px] font-medium uppercase tracking-wide cursor-pointer text-left hover:text-text-primary';
-</script>
-
-<div class="border-b border-border-secondary">
-	<button
-		type="button"
-		class={sectionHeaderClass}
-		onclick={() => (collapsed = !collapsed)}
-	>
-		<ChevronDown
-			size={14}
-			class="shrink-0 transition-transform duration-150 {collapsed ? '-rotate-90' : ''}"
-		/>
-		<Icon size={14} class="shrink-0 opacity-60" />
-		<span>{title}</span>
-	</button>
-	{#if !collapsed}
-		<div class="pb-3">
-			{@render children?.()}
-		</div>
-	{/if}
-</div>
diff --git a/frontend/src/lib/components/settings/index.ts b/frontend/src/lib/components/settings/index.ts
deleted file mode 100644
index f554d23..0000000
--- a/frontend/src/lib/components/settings/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-/**
- * Settings components barrel export
- */
-export { default as SettingsSection } from './SettingsSection.svelte';
-export { default as SettingsRow } from './SettingsRow.svelte';
diff --git a/frontend/src/lib/components/settings/wallpaper/WallpaperPickerModal.svelte b/frontend/src/lib/components/settings/wallpaper/WallpaperPickerModal.svelte
index 6ca2fed..920f825 100644
--- a/frontend/src/lib/components/settings/wallpaper/WallpaperPickerModal.svelte
+++ b/frontend/src/lib/components/settings/wallpaper/WallpaperPickerModal.svelte
@@ -9,7 +9,7 @@
 		Image as ImageIcon,
 		Upload
 	} from 'lucide-svelte';
-	import { Button, Modal, Select } from '$lib/components/ui';
+	import { Button, Modal, ProgressBar, Select } from '$lib/components/ui';
 	import { listDirectory, listRoots, type FileInfo, type MountPoint } from '$lib/api/files';
 	import { resolveBackgroundImage, toServerBackgroundImage } from '$lib/stores/settings';
 	import { formatFileSize } from '$lib/utils/format';
@@ -34,17 +34,19 @@
 	interface Props {
 		open?: boolean;
 		currentMode?: BackgroundImageMode;
+		frostedGlass?: boolean;
 		showHiddenFiles: boolean;
 		onapply?: (selection: WallpaperSelection) => void;
 		onclose?: () => void;
 	}
 
-	const LOCAL_WALLPAPER_MAX_BYTES = 10 * 1024 * 1024;
+	const LOCAL_WALLPAPER_MAX_BYTES = 20 * 1024 * 1024;
 	const PREVIEW_ROWS = [0, 1, 2, 3, 4, 5];
 
 	let {
 		open = true,
 		currentMode = DEFAULT_BACKGROUND_IMAGE_MODE,
+		frostedGlass = false,
 		showHiddenFiles,
 		onapply,
 		onclose
@@ -57,6 +59,9 @@
 	let serverWallpaperLoading = $state(false);
 	let serverWallpaperError = $state<string | null>(null);
 	let localWallpaperError = $state<string | null>(null);
+	let localWallpaperUploading = $state(false);
+	let localWallpaperProgress = $state(0);
+	let localWallpaperProgressLabel = $state('');
 	let previewBackgroundImage = $state<string | null>(null);
 	let previewName = $state('');
 	let previewOrigin = $state<PreviewOrigin | null>(null);
@@ -144,6 +149,8 @@
 	}
 
 	function openLocalWallpaperPicker() {
+		if (localWallpaperUploading) return;
+
 		localWallpaperError = null;
 		localWallpaperInput?.click();
 	}
@@ -153,26 +160,38 @@
 		const file = input.files?.[0];
 		input.value = '';
 
-		if (!file) return;
+		if (!file || localWallpaperUploading) return;
 
 		localWallpaperError = null;
+		localWallpaperProgress = 0;
+		localWallpaperProgressLabel = '';
 		if (!file.type.startsWith('image/') && !isLocalImageFile(file.name)) {
 			localWallpaperError = 'Choose an image file.';
 			return;
 		}
 
 		if (file.size > LOCAL_WALLPAPER_MAX_BYTES) {
-			localWallpaperError = `Choose an image smaller than ${formatFileSize(LOCAL_WALLPAPER_MAX_BYTES)}.`;
+			localWallpaperError = `Choose an image smaller than ${formatFileSize(LOCAL_WALLPAPER_MAX_BYTES)} so it can be saved locally.`;
 			return;
 		}
 
 		try {
-			previewBackgroundImage = await readFileAsDataUrl(file);
+			localWallpaperUploading = true;
+			localWallpaperProgressLabel = 'Preparing wallpaper upload...';
+			previewBackgroundImage = await readFileAsDataUrl(file, (progress) => {
+				localWallpaperProgress = progress;
+				localWallpaperProgressLabel =
+					progress >= 100 ? 'Preparing preview...' : 'Uploading wallpaper...';
+			});
 			previewName = file.name;
 			previewOrigin = 'local';
 			previewMode = normalizeBackgroundImageMode(currentMode);
 		} catch {
 			localWallpaperError = 'Unable to read this image.';
+			localWallpaperProgress = 0;
+			localWallpaperProgressLabel = '';
+		} finally {
+			localWallpaperUploading = false;
 		}
 	}
 
@@ -186,6 +205,8 @@
 		previewBackgroundImage = null;
 		previewName = '';
 		previewOrigin = null;
+		localWallpaperProgress = 0;
+		localWallpaperProgressLabel = '';
 
 		if (origin === 'server') {
 			wallpaperSource = 'server';
@@ -236,23 +257,24 @@
 				style:background-repeat={previewBackgroundStyle.repeat}
 				style:background-position={previewBackgroundStyle.position}
 			>
-				<div class="absolute inset-0 bg-black/35"></div>
+				<div class="absolute inset-0 bg-black/30"></div>
 				<div
-					class="relative flex h-full overflow-hidden rounded bg-surface-primary/70 backdrop-blur-md"
+					class="preview-chrome relative flex h-full overflow-hidden rounded bg-surface-primary/70"
+					data-frosted-glass={frostedGlass ? 'true' : undefined}
 				>
 					<div class="w-36 shrink-0 border-r border-white/10 p-3">
 						<div class="space-y-2">
-							<div class="h-7 rounded bg-white/12"></div>
-							<div class="h-7 rounded bg-accent/55"></div>
-							<div class="h-7 rounded bg-white/12"></div>
-							<div class="h-7 rounded bg-white/12"></div>
+							<div class="preview-field h-7 rounded"></div>
+							<div class="preview-field preview-field-accent h-7 rounded"></div>
+							<div class="preview-field h-7 rounded"></div>
+							<div class="preview-field h-7 rounded"></div>
 						</div>
 					</div>
 					<div class="flex min-w-0 flex-1 flex-col">
 						<div class="flex h-12 items-center gap-2 border-b border-white/10 px-3">
-							<div class="h-7 w-7 rounded bg-white/12"></div>
-							<div class="h-7 flex-1 rounded bg-white/12"></div>
-							<div class="h-7 w-20 rounded bg-white/12"></div>
+							<div class="preview-field h-7 w-7 rounded"></div>
+							<div class="preview-field h-7 flex-1 rounded"></div>
+							<div class="preview-field h-7 w-20 rounded"></div>
 						</div>
 						<div class="flex-1 p-4">
 							<div class="rounded border border-white/10 bg-surface-secondary/70">
@@ -261,11 +283,11 @@
 										class="grid grid-cols-[1fr_90px_110px] items-center gap-4 border-b border-white/10 px-3 py-3 last:border-b-0"
 									>
 										<div class="flex items-center gap-2">
-											<div class="h-4 w-4 rounded bg-accent/55"></div>
-											<div class="h-2.5 w-32 rounded bg-white/35"></div>
+											<div class="preview-field preview-field-accent h-4 w-4 rounded"></div>
+											<div class="preview-field preview-field-strong h-2.5 w-32 rounded"></div>
 										</div>
-										<div class="h-2.5 rounded bg-white/20"></div>
-										<div class="h-2.5 rounded bg-white/20"></div>
+										<div class="preview-field preview-field-muted h-2.5 rounded"></div>
+										<div class="preview-field preview-field-muted h-2.5 rounded"></div>
 									</div>
 								{/each}
 							</div>
@@ -316,17 +338,35 @@
 
 				<button
 					type="button"
-					class="flex h-16 cursor-pointer items-center gap-3 rounded-lg border border-border-primary bg-surface-secondary px-4 py-3 text-left transition-colors hover:border-border-focus hover:bg-surface-tertiary"
+					class="flex h-16 cursor-pointer items-center gap-3 rounded-lg border border-border-primary bg-surface-secondary px-4 py-3 text-left transition-colors hover:border-border-focus hover:bg-surface-tertiary disabled:cursor-not-allowed disabled:opacity-60"
 					onclick={openLocalWallpaperPicker}
+					disabled={localWallpaperUploading}
+					aria-busy={localWallpaperUploading}
 				>
 					<span class="rounded bg-accent/15 p-2 text-accent"><Upload size={22} /></span>
 					<span>
 						<span class="block text-sm font-medium text-text-primary">This Device</span>
-						<span class="block text-xs text-text-muted">Upload a local image</span>
+						<span class="block text-xs text-text-muted">
+							{localWallpaperUploading ? 'Uploading wallpaper...' : 'Upload a local image'}
+						</span>
 					</span>
 				</button>
 			</div>
 
+			{#if localWallpaperUploading}
+				<div
+					class="rounded border border-border-primary bg-surface-secondary px-3 py-2"
+					role="status"
+					aria-live="polite"
+				>
+					<div class="mb-2 flex items-center justify-between gap-3 text-xs">
+						<span class="text-text-secondary">{localWallpaperProgressLabel}</span>
+						<span class="shrink-0 font-medium text-accent">{localWallpaperProgress}%</span>
+					</div>
+					<ProgressBar value={localWallpaperProgress} size="sm" />
+				</div>
+			{/if}
+
 			{#if localWallpaperError}
 				<div
 					class="flex items-start gap-2 rounded border border-danger/30 bg-danger/15 px-3 py-2 text-sm text-danger"
@@ -440,3 +480,39 @@
 		</div>
 	{/if}
 </Modal>
+
+<style>
+	.preview-field {
+		background: rgb(255 255 255 / 0.12);
+	}
+
+	.preview-field-muted {
+		background: rgb(255 255 255 / 0.2);
+	}
+
+	.preview-field-strong {
+		background: rgb(255 255 255 / 0.35);
+	}
+
+	.preview-field-accent {
+		background: color-mix(in srgb, var(--color-accent) 55%, transparent);
+	}
+
+	.preview-chrome[data-frosted-glass='true'] .preview-field {
+		-webkit-backdrop-filter: blur(14px) saturate(145%);
+		backdrop-filter: blur(14px) saturate(145%);
+		background: rgb(255 255 255 / 0.16);
+	}
+
+	.preview-chrome[data-frosted-glass='true'] .preview-field-muted {
+		background: rgb(255 255 255 / 0.24);
+	}
+
+	.preview-chrome[data-frosted-glass='true'] .preview-field-strong {
+		background: rgb(255 255 255 / 0.4);
+	}
+
+	.preview-chrome[data-frosted-glass='true'] .preview-field-accent {
+		background: color-mix(in srgb, var(--color-accent) 62%, transparent);
+	}
+</style>
diff --git a/frontend/src/lib/components/settings/wallpaper/WallpaperSettings.svelte b/frontend/src/lib/components/settings/wallpaper/WallpaperSettings.svelte
index 409854c..0ec4dea 100644
--- a/frontend/src/lib/components/settings/wallpaper/WallpaperSettings.svelte
+++ b/frontend/src/lib/components/settings/wallpaper/WallpaperSettings.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { Image as ImageIcon, ScanSearch, Sparkles } from 'lucide-svelte';
 	import { Button, Select, Toggle } from '$lib/components/ui';
-	import { isValidBackgroundImage, resolveBackgroundImage } from '$lib/stores/settings';
+	import { isValidBackgroundImage, normalizeBackgroundImage } from '$lib/stores/settings';
 	import {
 		DEFAULT_BACKGROUND_IMAGE_MODE,
 		WALLPAPER_DISPLAY_OPTIONS,
@@ -40,7 +40,7 @@
 	let wallpaperDialogOpen = $state(false);
 
 	const backgroundImageIsValid = $derived(isValidBackgroundImage(backgroundImage));
-	const hasBackgroundImage = $derived(resolveBackgroundImage(backgroundImage) !== null);
+	const hasBackgroundImage = $derived(normalizeBackgroundImage(backgroundImage) !== null);
 	const normalizedMode = $derived(normalizeBackgroundImageMode(backgroundImageMode));
 
 	function handleBackgroundClear() {
@@ -125,6 +125,7 @@
 	<WallpaperPickerModal
 		open={wallpaperDialogOpen}
 		currentMode={normalizedMode}
+		{frostedGlass}
 		{showHiddenFiles}
 		onapply={handleWallpaperApply}
 		onclose={() => (wallpaperDialogOpen = false)}
diff --git a/frontend/src/lib/components/ui/Card.svelte b/frontend/src/lib/components/ui/Card.svelte
deleted file mode 100644
index e3e3491..0000000
--- a/frontend/src/lib/components/ui/Card.svelte
+++ /dev/null
@@ -1,42 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-
-	interface Props {
-		variant?: 'default' | 'interactive';
-		padding?: 'none' | 'sm' | 'md' | 'lg';
-		children: Snippet;
-		onclick?: () => void;
-	}
-
-	let { variant = 'default', padding = 'md', children, onclick }: Props = $props();
-
-	const baseClasses = 'bg-surface-secondary border border-border-primary rounded-md';
-
-	const variantClasses: Record<string, string> = {
-		default: '',
-		interactive: 'cursor-pointer transition-all duration-150 hover:bg-surface-tertiary hover:border-border-focus',
-	};
-
-	const paddingClasses: Record<string, string> = {
-		none: '',
-		sm: 'p-2',
-		md: 'p-4',
-		lg: 'p-6',
-	};
-
-	const isButton = $derived(variant === 'interactive' && onclick);
-</script>
-
-{#if isButton}
-	<button
-		type="button"
-		class="{baseClasses} {variantClasses[variant]} {paddingClasses[padding]} w-full text-left"
-		{onclick}
-	>
-		{@render children()}
-	</button>
-{:else}
-	<div class="{baseClasses} {variantClasses[variant]} {paddingClasses[padding]}">
-		{@render children()}
-	</div>
-{/if}
diff --git a/frontend/src/lib/components/ui/ContextMenu.svelte b/frontend/src/lib/components/ui/ContextMenu.svelte
index 8a4ba1d..a2207ea 100644
--- a/frontend/src/lib/components/ui/ContextMenu.svelte
+++ b/frontend/src/lib/components/ui/ContextMenu.svelte
@@ -3,8 +3,6 @@
 	 * Context Menu component - reusable right-click menu
 	 * Follows UI component patterns from contributing guidelines
 	 */
-	import type { Snippet } from 'svelte';
-
 	export interface ContextMenuItem {
 		id: string;
 		label: string;
@@ -29,22 +27,22 @@
 	// Adjust position to keep menu within viewport
 	let adjustedPosition = $derived.by(() => {
 		if (!menuRef) return { x, y };
-		
+
 		const menuWidth = 200; // approximate width
 		const menuHeight = items.length * 36; // approximate height
 		const viewportWidth = typeof window !== 'undefined' ? window.innerWidth : 1920;
 		const viewportHeight = typeof window !== 'undefined' ? window.innerHeight : 1080;
-		
+
 		let adjustedX = x;
 		let adjustedY = y;
-		
+
 		if (x + menuWidth > viewportWidth) {
 			adjustedX = viewportWidth - menuWidth - 8;
 		}
 		if (y + menuHeight > viewportHeight) {
 			adjustedY = viewportHeight - menuHeight - 8;
 		}
-		
+
 		return { x: adjustedX, y: adjustedY };
 	});
 
@@ -74,39 +72,42 @@
 <div
 	class="fixed inset-0 z-50"
 	onclick={handleBackdropClick}
-	oncontextmenu={(e) => { e.preventDefault(); onClose(); }}
+	oncontextmenu={(e) => {
+		e.preventDefault();
+		onClose();
+	}}
 >
 	<div
 		bind:this={menuRef}
-		class="fixed bg-surface-primary border border-border-primary rounded-lg shadow-xl py-1 min-w-45 max-w-70"
+		class="fixed max-w-70 min-w-45 rounded-lg border border-border-primary bg-surface-primary py-1 shadow-xl"
 		style="left: {adjustedPosition.x}px; top: {adjustedPosition.y}px;"
 		role="menu"
 	>
 		{#each items as item (item.id)}
 			{#if item.separator}
-				<div class="h-px bg-border-secondary my-1 mx-2"></div>
+				<div class="mx-2 my-1 h-px bg-border-secondary"></div>
 			{:else}
 				<button
 					type="button"
-					class="w-full flex items-center gap-3 px-3 py-2 text-left text-[13px] transition-colors
-						{item.disabled 
-							? 'text-text-disabled cursor-not-allowed' 
-							: 'text-text-primary hover:bg-surface-secondary cursor-pointer'}"
+					class="flex w-full items-center gap-3 px-3 py-2 text-left text-[13px] transition-colors
+						{item.disabled
+						? 'cursor-not-allowed text-text-disabled'
+						: 'cursor-pointer text-text-primary hover:bg-surface-secondary'}"
 					disabled={item.disabled}
 					onclick={() => handleItemClick(item)}
 					role="menuitem"
 				>
 					{#if item.icon}
-					{@const IconComponent = item.icon}
-					<span class="flex items-center justify-center w-4 h-4 text-text-secondary">
-						<IconComponent size={14} />
+						{@const IconComponent = item.icon}
+						<span class="flex h-4 w-4 items-center justify-center text-text-secondary">
+							<IconComponent size={14} />
 						</span>
 					{:else}
 						<span class="w-4"></span>
 					{/if}
 					<span class="flex-1">{item.label}</span>
 					{#if item.shortcut}
-						<span class="text-text-muted text-[11px]">{item.shortcut}</span>
+						<span class="text-[11px] text-text-muted">{item.shortcut}</span>
 					{/if}
 				</button>
 			{/if}
diff --git a/frontend/src/lib/components/ui/ProgressButton.svelte b/frontend/src/lib/components/ui/ProgressButton.svelte
new file mode 100644
index 0000000..c749f11
--- /dev/null
+++ b/frontend/src/lib/components/ui/ProgressButton.svelte
@@ -0,0 +1,108 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		variant?: 'primary' | 'secondary' | 'ghost' | 'danger';
+		size?: 'sm' | 'md' | 'lg' | 'icon';
+		disabled?: boolean;
+		type?: 'button' | 'submit' | 'reset';
+		title?: string;
+		children: Snippet;
+		onclick?: (e: MouseEvent) => void;
+		progress?: number | null;
+		max?: number;
+		progressVariant?: 'default' | 'success' | 'warning' | 'danger';
+		progressLabel?: string;
+		busy?: boolean;
+		className?: string;
+	}
+
+	let {
+		variant = 'primary',
+		size = 'md',
+		disabled = false,
+		type = 'button',
+		title,
+		children,
+		onclick,
+		progress = null,
+		max = 100,
+		progressVariant = 'default',
+		progressLabel = '',
+		busy = false,
+		className = ''
+	}: Props = $props();
+
+	const percentage = $derived(
+		progress === null || max <= 0 ? 0 : Math.min(100, Math.max(0, (progress / max) * 100))
+	);
+	const showProgress = $derived(progress !== null && progress > 0);
+	const isDisabled = $derived(disabled || busy);
+	const accessibleTitle = $derived(progressLabel || title);
+
+	const baseClasses =
+		'relative isolate inline-flex cursor-pointer items-center justify-center overflow-hidden rounded font-medium transition-all duration-150 disabled:cursor-not-allowed';
+
+	const variantClasses: Record<string, string> = {
+		primary: 'bg-accent text-white hover:enabled:bg-accent-hover',
+		secondary:
+			'border border-border-primary bg-surface-secondary text-text-secondary hover:enabled:bg-surface-tertiary hover:enabled:text-text-primary',
+		ghost:
+			'bg-transparent text-text-secondary hover:enabled:bg-surface-secondary hover:enabled:text-text-primary',
+		danger: 'bg-danger text-white hover:enabled:bg-danger-hover'
+	};
+
+	const progressShellClasses =
+		'border border-border-focus bg-surface-secondary text-text-primary shadow-[inset_0_0_0_1px_rgba(255,255,255,0.03)]';
+
+	const sizeClasses: Record<string, string> = {
+		sm: 'px-2 py-1 text-xs gap-1',
+		md: 'px-4 py-2 text-sm gap-2',
+		lg: 'px-6 py-3 text-base gap-2',
+		icon: 'h-7 w-7 p-0'
+	};
+
+	const contentGapClasses: Record<string, string> = {
+		sm: 'gap-1',
+		md: 'gap-2',
+		lg: 'gap-2',
+		icon: 'gap-0'
+	};
+
+	const fillClasses: Record<string, string> = {
+		default: 'bg-accent/70',
+		success: 'bg-success/75',
+		warning: 'bg-warning/75',
+		danger: 'bg-danger/80'
+	};
+</script>
+
+<button
+	{type}
+	class="{baseClasses} {showProgress ? progressShellClasses : variantClasses[variant]} {sizeClasses[
+		size
+	]} {isDisabled && !showProgress ? 'opacity-50' : ''} {className}"
+	disabled={isDisabled}
+	title={accessibleTitle}
+	aria-busy={busy || undefined}
+	{onclick}
+>
+	{#if showProgress}
+		<span
+			class="absolute inset-y-0 left-0 -z-10 rounded-l {fillClasses[
+				progressVariant
+			]} transition-all duration-300"
+			style:width={percentage + '%'}
+		></span>
+	{/if}
+	<span
+		class="relative inline-flex items-center justify-center {contentGapClasses[
+			size
+		]} whitespace-nowrap"
+	>
+		{@render children()}
+	</span>
+	{#if progressLabel}
+		<span class="sr-only" role="status" aria-live="polite">{progressLabel}</span>
+	{/if}
+</button>
diff --git a/frontend/src/lib/components/ui/Select.svelte b/frontend/src/lib/components/ui/Select.svelte
index 2d87c6b..646ca70 100644
--- a/frontend/src/lib/components/ui/Select.svelte
+++ b/frontend/src/lib/components/ui/Select.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { ChevronDown } from 'lucide-svelte';
+
 	interface Option {
 		value: string;
 		label: string;
@@ -22,15 +24,23 @@
 	}
 </script>
 
-<select
-	{value}
-	{disabled}
-	{id}
-	{name}
-	onchange={handleChange}
-	class="w-full px-3 py-2 bg-surface-secondary border border-border-primary rounded text-text-primary text-sm transition-colors duration-150 focus:outline-none focus:border-border-focus disabled:opacity-50 disabled:cursor-not-allowed appearance-none cursor-pointer"
->
-	{#each options as option (option.value)}
-		<option value={option.value}>{option.label}</option>
-	{/each}
-</select>
+<div class="relative w-full">
+	<select
+		{value}
+		{disabled}
+		{id}
+		{name}
+		onchange={handleChange}
+		class="h-8 w-full cursor-pointer appearance-none rounded border border-border-primary bg-surface-secondary px-3 pr-8 text-sm leading-none text-text-primary transition-colors duration-150 focus:border-border-focus focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+	>
+		{#each options as option (option.value)}
+			<option value={option.value}>{option.label}</option>
+		{/each}
+	</select>
+	<ChevronDown
+		size={14}
+		class="pointer-events-none absolute top-1/2 right-2 -translate-y-1/2 text-text-muted {disabled
+			? 'opacity-50'
+			: ''}"
+	/>
+</div>
diff --git a/frontend/src/lib/components/ui/Toast.svelte b/frontend/src/lib/components/ui/Toast.svelte
index fb6bc29..e2d5da4 100644
--- a/frontend/src/lib/components/ui/Toast.svelte
+++ b/frontend/src/lib/components/ui/Toast.svelte
@@ -3,7 +3,7 @@
 	 * Toast notification container component
 	 * Displays toast notifications from the toastStore
 	 */
-	import { toastStore, type Toast } from '$lib/stores/toast.svelte';
+	import { toastStore } from '$lib/stores/toast.svelte';
 	import { CheckCircle, XCircle, Info, AlertTriangle, X } from 'lucide-svelte';
 	import { fly, fade } from 'svelte/transition';
 
@@ -34,28 +34,31 @@
 </script>
 
 {#if toastStore.toasts.length > 0}
-	<div class="fixed bottom-4 right-4 z-[100] flex flex-col gap-2 max-w-sm pointer-events-none">
+	<div class="pointer-events-none fixed right-4 bottom-11 z-[100] flex max-w-sm flex-col gap-2">
 		{#each toastStore.toasts as toast (toast.id)}
+			{@const Icon = iconMap[toast.type]}
 			<div
-				class="pointer-events-auto flex items-start gap-3 px-4 py-3 rounded-lg border shadow-lg backdrop-blur-sm {colorMap[toast.type]}"
+				class="pointer-events-auto flex items-start gap-3 rounded-lg border px-4 py-3 shadow-lg backdrop-blur-sm {colorMap[
+					toast.type
+				]}"
 				in:fly={{ x: 100, duration: 200 }}
 				out:fade={{ duration: 150 }}
 				role="alert"
 			>
 				<!-- Icon -->
-				<div class="shrink-0 mt-0.5 {iconColorMap[toast.type]}">
-					<svelte:component this={iconMap[toast.type]} size={18} />
+				<div class="mt-0.5 shrink-0 {iconColorMap[toast.type]}">
+					<Icon size={18} />
 				</div>
 
 				<!-- Message -->
-				<p class="flex-1 text-sm text-text-primary m-0 pr-2">
+				<p class="m-0 flex-1 pr-2 text-sm text-text-primary">
 					{toast.message}
 				</p>
 
 				<!-- Dismiss button -->
 				<button
 					type="button"
-					class="shrink-0 p-0.5 rounded text-text-muted hover:text-text-primary hover:bg-surface-elevated transition-colors"
+					class="shrink-0 rounded p-0.5 text-text-muted transition-colors hover:bg-surface-elevated hover:text-text-primary"
 					onclick={() => handleDismiss(toast.id)}
 					aria-label="Dismiss notification"
 				>
diff --git a/frontend/src/lib/components/ui/index.ts b/frontend/src/lib/components/ui/index.ts
index b240c3e..365d5e6 100644
--- a/frontend/src/lib/components/ui/index.ts
+++ b/frontend/src/lib/components/ui/index.ts
@@ -4,10 +4,10 @@
  */
 
 export { default as Button } from './Button.svelte';
+export { default as ProgressButton } from './ProgressButton.svelte';
 export { default as Input } from './Input.svelte';
 export { default as Select } from './Select.svelte';
 export { default as Toggle } from './Toggle.svelte';
-export { default as Card } from './Card.svelte';
 export { default as Modal } from './Modal.svelte';
 export { default as Spinner } from './Spinner.svelte';
 export { default as Badge } from './Badge.svelte';
diff --git a/frontend/src/lib/stores/files.ts b/frontend/src/lib/stores/files.ts
index ae65ccb..aad7e55 100644
--- a/frontend/src/lib/stores/files.ts
+++ b/frontend/src/lib/stores/files.ts
@@ -4,15 +4,8 @@
  */
 
 import { writable, derived, get } from 'svelte/store';
-import {
-	listRoots,
-	listDirectory,
-	createDirectory,
-	rename,
-	deleteFile,
-	search,
-	type ListOptions
-} from '$lib/api/files';
+import { type ListOptions } from '$lib/api/files';
+import { CONFIG } from '$lib/config';
 
 /**
  * Current path state
@@ -114,7 +107,7 @@ export interface ListOptionsState extends ListOptions {
  */
 const defaultListOptions: ListOptionsState = {
 	page: 1,
-	pageSize: 50,
+	pageSize: CONFIG.ui.defaultPageSize,
 	sortBy: 'name',
 	sortDir: 'asc',
 	filter: ''
@@ -190,179 +183,3 @@ export const fileQueryKeys = {
 		[...fileQueryKeys.all, 'list', path, options] as const,
 	search: (path: string, query: string) => [...fileQueryKeys.all, 'search', path, query] as const
 };
-
-/**
- * Query options factory for listing mount points (roots)
- */
-export function rootsQueryOptions() {
-	return {
-		queryKey: fileQueryKeys.roots(),
-		queryFn: () => listRoots()
-	};
-}
-
-/**
- * Query options factory for listing directory contents
- */
-export function directoryQueryOptions(path: string, options: ListOptions) {
-	return {
-		queryKey: fileQueryKeys.list(path, options),
-		queryFn: () => listDirectory(path, options),
-		enabled: path !== ''
-	};
-}
-
-/**
- * Query options factory for searching files
- */
-export function searchQueryOptions(path: string, query: string) {
-	return {
-		queryKey: fileQueryKeys.search(path, query),
-		queryFn: () => search(path, query),
-		enabled: query.length > 0
-	};
-}
-
-/**
- * Mutation options for creating directories
- */
-export function createDirectoryMutationOptions() {
-	return {
-		mutationFn: ({ basePath, name }: { basePath: string; name: string }) =>
-			createDirectory(basePath, name)
-	};
-}
-
-/**
- * Mutation options for renaming files/directories
- */
-export function renameMutationOptions() {
-	return {
-		mutationFn: ({ oldPath, newPath }: { oldPath: string; newPath: string }) =>
-			rename(oldPath, newPath)
-	};
-}
-
-/**
- * Mutation options for deleting files/directories
- */
-export function deleteMutationOptions() {
-	return {
-		mutationFn: ({ path, confirm }: { path: string; confirm?: boolean }) =>
-			deleteFile(path, confirm)
-	};
-}
-
-/**
- * Selection state for multi-select operations
- */
-export interface SelectionState {
-	selectedItems: Set<string>;
-	lastSelectedItem: string | null;
-}
-
-/**
- * Create the selection store
- */
-function createSelectionStore() {
-	const { subscribe, set, update } = writable<SelectionState>({
-		selectedItems: new Set(),
-		lastSelectedItem: null
-	});
-
-	function select(path: string): void {
-		update((state) => {
-			const newSelected = new Set(state.selectedItems);
-			newSelected.add(path);
-			return {
-				selectedItems: newSelected,
-				lastSelectedItem: path
-			};
-		});
-	}
-
-	function deselect(path: string): void {
-		update((state) => {
-			const newSelected = new Set(state.selectedItems);
-			newSelected.delete(path);
-			return {
-				...state,
-				selectedItems: newSelected
-			};
-		});
-	}
-
-	function toggle(path: string): void {
-		update((state) => {
-			const newSelected = new Set(state.selectedItems);
-			if (newSelected.has(path)) {
-				newSelected.delete(path);
-			} else {
-				newSelected.add(path);
-			}
-			return {
-				selectedItems: newSelected,
-				lastSelectedItem: path
-			};
-		});
-	}
-
-	function selectOnly(path: string): void {
-		set({
-			selectedItems: new Set([path]),
-			lastSelectedItem: path
-		});
-	}
-
-	function selectAll(paths: string[]): void {
-		set({
-			selectedItems: new Set(paths),
-			lastSelectedItem: paths[paths.length - 1] || null
-		});
-	}
-
-	function clearSelection(): void {
-		set({
-			selectedItems: new Set(),
-			lastSelectedItem: null
-		});
-	}
-
-	function isSelected(path: string): boolean {
-		return get({ subscribe }).selectedItems.has(path);
-	}
-
-	function getSelectedItems(): string[] {
-		return Array.from(get({ subscribe }).selectedItems);
-	}
-
-	return {
-		subscribe,
-		select,
-		deselect,
-		toggle,
-		selectOnly,
-		selectAll,
-		clearSelection,
-		isSelected,
-		getSelectedItems
-	};
-}
-
-/**
- * Selection store singleton
- */
-export const selectionStore = createSelectionStore();
-
-/**
- * Derived store for selected items count
- */
-export const selectedCount = derived(selectionStore, ($selection) => $selection.selectedItems.size);
-
-/**
- * Derived store for whether any items are selected
- */
-export const hasSelection = derived(
-	selectionStore,
-	($selection) => $selection.selectedItems.size > 0
-);
diff --git a/frontend/src/lib/stores/jobs.ts b/frontend/src/lib/stores/jobs.ts
index 37cd29b..e9a1901 100644
--- a/frontend/src/lib/stores/jobs.ts
+++ b/frontend/src/lib/stores/jobs.ts
@@ -3,18 +3,8 @@
  * Requirements: 4.4
  */
 
-import { writable, derived, get } from 'svelte/store';
-import {
-	listJobs,
-	getJob,
-	createJob,
-	cancelJob,
-	isJobActive,
-	isJobTerminal,
-	type Job,
-	type JobState,
-	type CreateJobRequest
-} from '$lib/api/jobs';
+import { writable, derived } from 'svelte/store';
+import { listJobs, isJobActive, isJobTerminal, type Job, type JobState } from '$lib/api/jobs';
 
 /**
  * Job update from WebSocket
@@ -114,60 +104,6 @@ function createJobsStore() {
 		});
 	}
 
-	/**
-	 * Remove a job from the store
-	 */
-	function removeJob(jobId: string): void {
-		update((state) => {
-			const newJobs = new Map(state.jobs);
-			newJobs.delete(jobId);
-			return { ...state, jobs: newJobs };
-		});
-	}
-
-	/**
-	 * Clear all completed/failed/cancelled jobs
-	 */
-	function clearTerminalJobs(): void {
-		update((state) => {
-			const newJobs = new Map<string, Job>();
-			for (const [id, job] of state.jobs) {
-				if (isJobActive(job)) {
-					newJobs.set(id, job);
-				}
-			}
-			return { ...state, jobs: newJobs };
-		});
-	}
-
-	/**
-	 * Get a job by ID
-	 */
-	function getJobById(jobId: string): Job | undefined {
-		return get({ subscribe }).jobs.get(jobId);
-	}
-
-	/**
-	 * Get all jobs as an array
-	 */
-	function getAllJobs(): Job[] {
-		return Array.from(get({ subscribe }).jobs.values());
-	}
-
-	/**
-	 * Get active jobs
-	 */
-	function getActiveJobs(): Job[] {
-		return getAllJobs().filter(isJobActive);
-	}
-
-	/**
-	 * Clear error
-	 */
-	function clearError(): void {
-		update((state) => ({ ...state, error: null }));
-	}
-
 	/**
 	 * Reset store to initial state
 	 */
@@ -180,12 +116,6 @@ function createJobsStore() {
 		loadJobs,
 		upsertJob,
 		updateFromWebSocket,
-		removeJob,
-		clearTerminalJobs,
-		getJobById,
-		getAllJobs,
-		getActiveJobs,
-		clearError,
 		reset
 	};
 }
@@ -195,15 +125,6 @@ function createJobsStore() {
  */
 export const jobsStore = createJobsStore();
 
-/**
- * Derived store for jobs as array (sorted by creation time, newest first)
- */
-export const jobsList = derived(jobsStore, ($jobs) =>
-	Array.from($jobs.jobs.values()).sort(
-		(a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
-	)
-);
-
 /**
  * Derived store for active jobs only
  */
@@ -212,110 +133,3 @@ export const activeJobs = derived(jobsStore, ($jobs) =>
 		.filter(isJobActive)
 		.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime())
 );
-
-/**
- * Derived store for active jobs count
- */
-export const activeJobsCount = derived(
-	jobsStore,
-	($jobs) => Array.from($jobs.jobs.values()).filter(isJobActive).length
-);
-
-/**
- * Derived store for whether there are any active jobs
- */
-export const hasActiveJobs = derived(jobsStore, ($jobs) =>
-	Array.from($jobs.jobs.values()).some(isJobActive)
-);
-
-/**
- * Derived store for completed jobs
- */
-export const completedJobs = derived(jobsStore, ($jobs) =>
-	Array.from($jobs.jobs.values())
-		.filter((job) => job.state === 'completed')
-		.sort(
-			(a, b) =>
-				new Date(b.completedAt || b.createdAt).getTime() -
-				new Date(a.completedAt || a.createdAt).getTime()
-		)
-);
-
-/**
- * Derived store for failed jobs
- */
-export const failedJobs = derived(jobsStore, ($jobs) =>
-	Array.from($jobs.jobs.values())
-		.filter((job) => job.state === 'failed')
-		.sort(
-			(a, b) =>
-				new Date(b.completedAt || b.createdAt).getTime() -
-				new Date(a.completedAt || a.createdAt).getTime()
-		)
-);
-
-/**
- * Query key factory for jobs
- */
-export const jobQueryKeys = {
-	all: ['jobs'] as const,
-	list: () => [...jobQueryKeys.all, 'list'] as const,
-	detail: (id: string) => [...jobQueryKeys.all, 'detail', id] as const
-};
-
-/**
- * Query options factory for listing all jobs
- */
-export function jobsQueryOptions() {
-	return {
-		queryKey: jobQueryKeys.list(),
-		queryFn: () => listJobs(),
-		refetchInterval: 5000 // Refetch every 5 seconds for active jobs
-	};
-}
-
-/**
- * Query options factory for a specific job
- */
-export function jobQueryOptions(jobId: string) {
-	return {
-		queryKey: jobQueryKeys.detail(jobId),
-		queryFn: () => getJob(jobId),
-		enabled: !!jobId
-	};
-}
-
-/**
- * Mutation options for creating a new job
- */
-export function createJobMutationOptions() {
-	return {
-		mutationFn: (request: CreateJobRequest) => createJob(request),
-		onSuccess: (job: Job) => {
-			jobsStore.upsertJob(job);
-		}
-	};
-}
-
-/**
- * Mutation options for cancelling a job
- */
-export function cancelJobMutationOptions() {
-	return {
-		mutationFn: (jobId: string) => cancelJob(jobId),
-		onSuccess: (_: unknown, jobId: string) => {
-			// Update the job state locally
-			const job = jobsStore.getJobById(jobId);
-			if (job) {
-				jobsStore.upsertJob({
-					...job,
-					state: 'cancelled',
-					completedAt: new Date().toISOString()
-				});
-			}
-		}
-	};
-}
-
-// Re-export utility functions
-export { isJobActive, isJobTerminal } from '$lib/api/jobs';
diff --git a/frontend/src/lib/stores/settings.ts b/frontend/src/lib/stores/settings.ts
index 6d1ba78..6c7632c 100644
--- a/frontend/src/lib/stores/settings.ts
+++ b/frontend/src/lib/stores/settings.ts
@@ -14,6 +14,12 @@ import {
 	normalizeBackgroundImageMode,
 	type BackgroundImageMode
 } from '$lib/utils/wallpaper';
+import {
+	isInlineWallpaperDataUrl,
+	isLocalWallpaperReference,
+	resolveLocalWallpaperUrl,
+	saveLocalWallpaperDataUrl
+} from '$lib/utils/wallpaperStorage';
 
 export interface UserSettings {
 	showHiddenFiles: boolean;
@@ -87,7 +93,8 @@ function isSupportedBackgroundImage(value: string): boolean {
 		return true;
 	}
 	if (value.startsWith('/') && !value.startsWith('//')) return true;
-	if (/^data:image\/(avif|gif|jpeg|jpg|png|svg\+xml|webp);base64,/i.test(value)) return true;
+	if (isInlineWallpaperDataUrl(value)) return true;
+	if (isLocalWallpaperReference(value)) return true;
 
 	try {
 		const url = new URL(value);
@@ -126,9 +133,23 @@ export function resolveBackgroundImage(backgroundImage: string | null): string |
 	if (!normalized) return null;
 
 	const serverPath = getServerBackgroundPath(normalized);
+	if (isLocalWallpaperReference(normalized)) return null;
 	return serverPath ? getPreviewUrl(serverPath) : normalized;
 }
 
+export async function resolveBackgroundImageUrl(
+	backgroundImage: string | null
+): Promise<string | null> {
+	const normalized = normalizeBackgroundImage(backgroundImage);
+	if (!normalized) return null;
+
+	if (isLocalWallpaperReference(normalized)) {
+		return resolveLocalWallpaperUrl(normalized);
+	}
+
+	return resolveBackgroundImage(normalized);
+}
+
 function parseHexColor(color: string): [number, number, number] {
 	const hex = color.slice(1);
 	return [
@@ -203,6 +224,23 @@ async function loadDriveNames(): Promise<Record<string, string>> {
 	}
 }
 
+async function migrateInlineBackgroundImage(settings: UserSettings): Promise<UserSettings> {
+	const backgroundImage = normalizeBackgroundImage(settings.backgroundImage);
+	if (!backgroundImage || !isInlineWallpaperDataUrl(backgroundImage)) {
+		return settings;
+	}
+
+	try {
+		const migratedBackgroundImage = await saveLocalWallpaperDataUrl(backgroundImage);
+		return {
+			...settings,
+			backgroundImage: migratedBackgroundImage
+		};
+	} catch {
+		return settings;
+	}
+}
+
 function createSettingsStore() {
 	const { subscribe, set, update } = writable<UserSettings>(loadSettings());
 
@@ -210,8 +248,27 @@ function createSettingsStore() {
 		subscribe,
 
 		async initialize() {
+			const currentSettings = get({ subscribe });
+			const migratedSettings = await migrateInlineBackgroundImage(currentSettings);
+			if (migratedSettings !== currentSettings) {
+				try {
+					saveSettings(migratedSettings);
+				} catch {
+					// Keep the in-memory migrated reference even if the browser refuses persistence.
+				}
+				set(migratedSettings);
+			}
+
 			const driveNames = await loadDriveNames();
-			update((current) => ({ ...current, driveNameOverrides: driveNames }));
+			update((current) => {
+				const updated = { ...current, driveNameOverrides: driveNames };
+				try {
+					saveSettings(updated);
+				} catch {
+					// Initialization should not fail auth because local preference persistence is full.
+				}
+				return updated;
+			});
 		},
 
 		set(settings: UserSettings) {
@@ -311,6 +368,29 @@ export const settingsStore = createSettingsStore();
 // Note: initialize() should be called after successful authentication
 // Do not call here as the API requires auth
 
+export const resolvedBackgroundImageUrl = derived(
+	settingsStore,
+	($settings, set) => {
+		const requestedBackgroundImage = $settings.backgroundImage;
+		let cancelled = false;
+
+		set(resolveBackgroundImage(requestedBackgroundImage));
+
+		resolveBackgroundImageUrl(requestedBackgroundImage)
+			.then((url) => {
+				if (!cancelled) set(url);
+			})
+			.catch(() => {
+				if (!cancelled) set(null);
+			});
+
+		return () => {
+			cancelled = true;
+		};
+	},
+	null as string | null
+);
+
 // Derived stores for individual settings
 export const showHiddenFiles = derived(settingsStore, ($s) => $s.showHiddenFiles);
 export const showFileExtensions = derived(settingsStore, ($s) => $s.showFileExtensions);
diff --git a/frontend/src/lib/stores/websocket.ts b/frontend/src/lib/stores/websocket.ts
index 9dd7756..288dfaf 100644
--- a/frontend/src/lib/stores/websocket.ts
+++ b/frontend/src/lib/stores/websocket.ts
@@ -5,6 +5,7 @@
 
 import { writable, derived, get } from 'svelte/store';
 import { getAccessToken } from '$lib/api/client';
+import { CONFIG } from '$lib/config';
 import { jobsStore, type JobUpdate } from './jobs';
 
 /**
@@ -64,16 +65,16 @@ const initialState: WebSocketState = {
  * Exponential backoff configuration
  */
 const BACKOFF_CONFIG = {
-	initialDelayMs: 1000,
-	maxDelayMs: 30000,
+	initialDelayMs: CONFIG.websocket.initialReconnectDelayMs,
+	maxDelayMs: CONFIG.websocket.maxReconnectDelayMs,
 	multiplier: 2,
-	maxAttempts: 10
+	maxAttempts: CONFIG.websocket.maxReconnectAttempts
 };
 
 /**
  * Ping interval for connection health
  */
-const PING_INTERVAL_MS = 30000;
+const PING_INTERVAL_MS = CONFIG.websocket.pingIntervalMs;
 
 /**
  * Create the WebSocket store
diff --git a/frontend/src/lib/utils/fileTypes.ts b/frontend/src/lib/utils/fileTypes.ts
index 246f74d..9a454d7 100644
--- a/frontend/src/lib/utils/fileTypes.ts
+++ b/frontend/src/lib/utils/fileTypes.ts
@@ -117,10 +117,56 @@ const OFFICE_PREVIEW_EXTENSIONS = new Set<string>([
 	...FILE_EXTENSIONS.presentation
 ]);
 
+const SPECIAL_CODE_FILENAMES = new Set<string>([
+	'dockerfile',
+	'makefile',
+	'gnumakefile',
+	'cmakelists.txt',
+	'gemfile',
+	'rakefile'
+]);
+
+const SHELL_DOTFILES = new Set<string>([
+	'.bashrc',
+	'.bash_profile',
+	'.bash_login',
+	'.bash_logout',
+	'.profile',
+	'.zshrc',
+	'.zprofile',
+	'.zshenv',
+	'.zlogin',
+	'.zlogout',
+	'.kshrc',
+	'.cshrc',
+	'.tcshrc'
+]);
+
+const DOTFILE_LANGUAGE_MAP: Record<string, string> = {
+	'.env': 'dotenv',
+	'.envrc': 'shell',
+	'.gitconfig': 'ini',
+	'.gitignore': 'ignore',
+	'.dockerignore': 'ignore',
+	'.editorconfig': 'ini',
+	'.npmrc': 'ini',
+	'.yarnrc': 'ini',
+	'.curlrc': 'shell',
+	'.wgetrc': 'ini',
+	'.vimrc': 'vim'
+};
+
+function isSingleDotfile(filename: string): boolean {
+	const baseName = filename.split('/').pop() ?? filename;
+	return baseName.startsWith('.') && baseName.indexOf('.', 1) === -1 && baseName.length > 1;
+}
+
 /**
  * Get the file extension from a filename
  */
 export function getExtension(filename: string): string {
+	if (isSingleDotfile(filename)) return '';
+
 	const lastDot = filename.lastIndexOf('.');
 	if (lastDot === -1) return '';
 	return filename.slice(lastDot + 1).toLowerCase();
@@ -149,11 +195,11 @@ export function getPreviewType(filename: string): PreviewType {
 
 	// Handle special filenames without extensions
 	const lowerName = filename.toLowerCase();
-	if (['dockerfile', 'makefile', 'cmakelists.txt', 'gemfile', 'rakefile'].includes(lowerName)) {
+	if (SPECIAL_CODE_FILENAMES.has(lowerName)) {
 		return 'code';
 	}
-	if (lowerName.startsWith('.') && !ext) {
-		// Dotfiles like .gitignore, .env, etc.
+	if (isSingleDotfile(lowerName)) {
+		// Dotfiles like .bashrc, .gitignore, .env, etc.
 		return 'code';
 	}
 
@@ -188,7 +234,9 @@ export function getMonacoLanguage(filename: string): string {
 	// Special filenames
 	if (lowerName === 'dockerfile') return 'dockerfile';
 	if (lowerName === 'makefile' || lowerName === 'gnumakefile') return 'makefile';
-	if (lowerName.endsWith('.gitignore') || lowerName.endsWith('.dockerignore')) return 'ignore';
+	if (SHELL_DOTFILES.has(lowerName)) return 'shell';
+	if (DOTFILE_LANGUAGE_MAP[lowerName]) return DOTFILE_LANGUAGE_MAP[lowerName];
+	if (isSingleDotfile(lowerName)) return 'plaintext';
 
 	const languageMap: Record<string, string> = {
 		// JavaScript/TypeScript
@@ -279,7 +327,12 @@ export function canPreview(filename: string): boolean {
  */
 export function getFileTypeDescription(filename: string): string {
 	const ext = getExtension(filename);
-	if (!ext) return 'File';
+	const lowerName = filename.toLowerCase();
+
+	if (SHELL_DOTFILES.has(lowerName)) return 'Shell Config';
+	if (DOTFILE_LANGUAGE_MAP[lowerName]) return 'Config File';
+	if (isSingleDotfile(lowerName)) return 'Dotfile';
+	if (!ext) return SPECIAL_CODE_FILENAMES.has(lowerName) ? 'Code File' : 'File';
 
 	const typeMap: Record<string, string> = {
 		// Documents
@@ -421,7 +474,9 @@ export function getFileIcon(filename: string, isDir: boolean): ComponentType {
 	if (isDir) return Folder;
 
 	const ext = getExtension(filename);
-	if (!ext) return File;
+	if (!ext) {
+		return getPreviewType(filename) === 'code' ? FileCode : File;
+	}
 
 	// Check each category
 	if (FILE_EXTENSIONS.image.includes(ext as (typeof FILE_EXTENSIONS.image)[number]))
diff --git a/frontend/src/lib/utils/upload.ts b/frontend/src/lib/utils/upload.ts
index 24f1ebd..aff6bc7 100644
--- a/frontend/src/lib/utils/upload.ts
+++ b/frontend/src/lib/utils/upload.ts
@@ -7,6 +7,7 @@ import { getAccessToken } from '$lib/api/client';
 import { CONFIG } from '$lib/config';
 
 const DEFAULT_CHUNK_SIZE = CONFIG.upload.defaultChunkSize;
+const MAX_CHECKSUM_BYTES = DEFAULT_CHUNK_SIZE * 2;
 
 // API base URL
 const API_BASE_URL = '/api/v1/stream';
@@ -90,15 +91,12 @@ export async function calculateChecksum(file: File): Promise<string> {
 export async function calculateChecksumStreaming(
 	file: File,
 	chunkSize: number = DEFAULT_CHUNK_SIZE
-): Promise<string> {
-	// For smaller files, use the simple method
-	if (file.size <= chunkSize * 2) {
-		return calculateChecksum(file);
+): Promise<string | undefined> {
+	const checksumLimit = Math.max(chunkSize * 2, MAX_CHECKSUM_BYTES);
+	if (file.size > checksumLimit) {
+		return undefined;
 	}
 
-	// For larger files, we need to hash incrementally
-	// Note: Web Crypto API doesn't support streaming, so we read the whole file
-	// This is a limitation of the browser environment
 	return calculateChecksum(file);
 }
 
@@ -486,139 +484,3 @@ export async function resumeUpload(
 		return { success: false, error: progress.error };
 	}
 }
-
-/**
- * Upload manager for handling multiple concurrent uploads
- */
-export class UploadManager {
-	private uploads: Map<
-		string,
-		{ file: File; path: string; progress: UploadProgress; abortController: AbortController }
-	> = new Map();
-	private onProgressCallback?: (uploads: UploadProgress[]) => void;
-
-	constructor(onProgress?: (uploads: UploadProgress[]) => void) {
-		this.onProgressCallback = onProgress;
-	}
-
-	/**
-	 * Add a file to the upload queue and start uploading
-	 */
-	async addUpload(
-		file: File,
-		destinationPath: string,
-		options: Omit<UploadOptions, 'signal' | 'onProgress'> = {}
-	): Promise<string> {
-		const uploadId = generateUploadId();
-		const abortController = new AbortController();
-
-		const progress: UploadProgress = {
-			uploadId,
-			fileName: file.name,
-			totalSize: file.size,
-			uploadedSize: 0,
-			percentage: 0,
-			currentChunk: 0,
-			totalChunks: getChunkCount(file.size, options.chunkSize),
-			status: 'pending'
-		};
-
-		this.uploads.set(uploadId, { file, path: destinationPath, progress, abortController });
-		this.notifyProgress();
-
-		// Start upload in background
-		this.startUpload(uploadId, options);
-
-		return uploadId;
-	}
-
-	/**
-	 * Start or resume an upload
-	 */
-	private async startUpload(
-		uploadId: string,
-		options: Omit<UploadOptions, 'signal' | 'onProgress'> = {}
-	): Promise<void> {
-		const upload = this.uploads.get(uploadId);
-		if (!upload) return;
-
-		const result = await uploadFile(upload.file, upload.path, {
-			...options,
-			uploadId,
-			signal: upload.abortController.signal,
-			onProgress: (progress) => {
-				const existing = this.uploads.get(uploadId);
-				if (existing) {
-					existing.progress = progress;
-					this.notifyProgress();
-				}
-			}
-		});
-
-		if (!result.success && upload.progress.status !== 'cancelled') {
-			upload.progress.status = 'error';
-			upload.progress.error = result.error;
-			this.notifyProgress();
-		}
-	}
-
-	/**
-	 * Cancel an upload
-	 */
-	cancelUpload(uploadId: string): void {
-		const upload = this.uploads.get(uploadId);
-		if (upload) {
-			upload.abortController.abort();
-			upload.progress.status = 'cancelled';
-			this.notifyProgress();
-		}
-	}
-
-	/**
-	 * Remove an upload from the manager
-	 */
-	removeUpload(uploadId: string): void {
-		const upload = this.uploads.get(uploadId);
-		if (upload) {
-			upload.abortController.abort();
-			this.uploads.delete(uploadId);
-			this.notifyProgress();
-		}
-	}
-
-	/**
-	 * Get all upload progress
-	 */
-	getUploads(): UploadProgress[] {
-		return Array.from(this.uploads.values()).map((u) => ({ ...u.progress }));
-	}
-
-	/**
-	 * Get a specific upload's progress
-	 */
-	getUpload(uploadId: string): UploadProgress | undefined {
-		const upload = this.uploads.get(uploadId);
-		return upload ? { ...upload.progress } : undefined;
-	}
-
-	/**
-	 * Notify progress callback
-	 */
-	private notifyProgress(): void {
-		if (this.onProgressCallback) {
-			this.onProgressCallback(this.getUploads());
-		}
-	}
-
-	/**
-	 * Clear completed/failed/cancelled uploads
-	 */
-	clearFinished(): void {
-		for (const [id, upload] of this.uploads) {
-			if (['complete', 'error', 'cancelled'].includes(upload.progress.status)) {
-				this.uploads.delete(id);
-			}
-		}
-		this.notifyProgress();
-	}
-}
diff --git a/frontend/src/lib/utils/wallpaper.ts b/frontend/src/lib/utils/wallpaper.ts
index 617f6ac..baa9ca8 100644
--- a/frontend/src/lib/utils/wallpaper.ts
+++ b/frontend/src/lib/utils/wallpaper.ts
@@ -52,11 +52,21 @@ export function isWallpaperImageFile(item: FileInfo): boolean {
 	);
 }
 
-export function readFileAsDataUrl(file: File): Promise<string> {
+export function readFileAsDataUrl(
+	file: File,
+	onProgress?: (progress: number) => void
+): Promise<string> {
 	return new Promise((resolve, reject) => {
 		const reader = new FileReader();
+		reader.onloadstart = () => onProgress?.(0);
+		reader.onprogress = (event) => {
+			if (event.lengthComputable && event.total > 0) {
+				onProgress?.(Math.round((event.loaded / event.total) * 100));
+			}
+		};
 		reader.onload = () => {
 			if (typeof reader.result === 'string') {
+				onProgress?.(100);
 				resolve(reader.result);
 			} else {
 				reject(new Error('Unsupported file result'));
diff --git a/frontend/src/lib/utils/wallpaperStorage.ts b/frontend/src/lib/utils/wallpaperStorage.ts
new file mode 100644
index 0000000..bc10f2b
--- /dev/null
+++ b/frontend/src/lib/utils/wallpaperStorage.ts
@@ -0,0 +1,179 @@
+const DATABASE_NAME = 'boxbox-wallpapers';
+const DATABASE_VERSION = 1;
+const STORE_NAME = 'wallpapers';
+const LOCAL_WALLPAPER_PREFIX = 'boxbox-local-wallpaper:';
+const LOCAL_WALLPAPER_ID_PATTERN = /^[a-z0-9_-]{8,}$/i;
+const INLINE_WALLPAPER_PATTERN = /^data:image\/(avif|gif|jpeg|jpg|png|svg\+xml|webp);base64,/i;
+
+interface StoredLocalWallpaper {
+	id: string;
+	blob: Blob;
+	type: string;
+	createdAt: number;
+}
+
+const localWallpaperUrlCache = new Map<string, string>();
+
+export function isInlineWallpaperDataUrl(value: string): boolean {
+	return INLINE_WALLPAPER_PATTERN.test(value.trim());
+}
+
+export function toLocalWallpaperReference(id: string): string {
+	return `${LOCAL_WALLPAPER_PREFIX}${id}`;
+}
+
+export function getLocalWallpaperId(reference: string): string | null {
+	const trimmed = reference.trim();
+	if (!trimmed.startsWith(LOCAL_WALLPAPER_PREFIX)) return null;
+
+	const id = trimmed.slice(LOCAL_WALLPAPER_PREFIX.length);
+	return LOCAL_WALLPAPER_ID_PATTERN.test(id) ? id : null;
+}
+
+export function isLocalWallpaperReference(value: string): boolean {
+	return getLocalWallpaperId(value) !== null;
+}
+
+export async function saveLocalWallpaperDataUrl(dataUrl: string): Promise<string> {
+	if (!isInlineWallpaperDataUrl(dataUrl)) {
+		throw new Error('Only image data URLs can be saved as local wallpapers.');
+	}
+
+	const id = createLocalWallpaperId();
+	const blob = dataUrlToBlob(dataUrl);
+	const database = await openWallpaperDatabase();
+
+	try {
+		const transaction = database.transaction(STORE_NAME, 'readwrite');
+		transaction.objectStore(STORE_NAME).put({
+			id,
+			blob,
+			type: blob.type,
+			createdAt: Date.now()
+		} satisfies StoredLocalWallpaper);
+		await waitForTransaction(transaction);
+	} finally {
+		database.close();
+	}
+
+	return toLocalWallpaperReference(id);
+}
+
+export async function resolveLocalWallpaperUrl(reference: string): Promise<string | null> {
+	const id = getLocalWallpaperId(reference);
+	if (!id) return null;
+
+	const cachedUrl = localWallpaperUrlCache.get(id);
+	if (cachedUrl) return cachedUrl;
+
+	const database = await openWallpaperDatabase();
+
+	try {
+		const transaction = database.transaction(STORE_NAME, 'readonly');
+		const request = transaction.objectStore(STORE_NAME).get(id) as IDBRequest<
+			StoredLocalWallpaper | undefined
+		>;
+		const wallpaper = await requestToPromise(request);
+		await waitForTransaction(transaction);
+
+		if (!wallpaper) return null;
+
+		const url = URL.createObjectURL(wallpaper.blob);
+		localWallpaperUrlCache.set(id, url);
+		return url;
+	} finally {
+		database.close();
+	}
+}
+
+export async function deleteLocalWallpaper(reference: string | null): Promise<void> {
+	if (!reference) return;
+
+	const id = getLocalWallpaperId(reference);
+	if (!id) return;
+
+	revokeCachedLocalWallpaperUrl(id);
+
+	const database = await openWallpaperDatabase();
+
+	try {
+		const transaction = database.transaction(STORE_NAME, 'readwrite');
+		transaction.objectStore(STORE_NAME).delete(id);
+		await waitForTransaction(transaction);
+	} finally {
+		database.close();
+	}
+}
+
+function openWallpaperDatabase(): Promise<IDBDatabase> {
+	if (typeof indexedDB === 'undefined') {
+		throw new Error('Local wallpaper storage is not available in this browser.');
+	}
+
+	return new Promise((resolve, reject) => {
+		const request = indexedDB.open(DATABASE_NAME, DATABASE_VERSION);
+
+		request.onupgradeneeded = () => {
+			const database = request.result;
+			if (!database.objectStoreNames.contains(STORE_NAME)) {
+				database.createObjectStore(STORE_NAME, { keyPath: 'id' });
+			}
+		};
+		request.onsuccess = () => resolve(request.result);
+		request.onerror = () =>
+			reject(request.error ?? new Error('Unable to open local wallpaper storage.'));
+		request.onblocked = () =>
+			reject(new Error('Local wallpaper storage is blocked by another browser tab.'));
+	});
+}
+
+function requestToPromise<T>(request: IDBRequest<T>): Promise<T> {
+	return new Promise((resolve, reject) => {
+		request.onsuccess = () => resolve(request.result);
+		request.onerror = () => reject(request.error ?? new Error('Local wallpaper storage failed.'));
+	});
+}
+
+function waitForTransaction(transaction: IDBTransaction): Promise<void> {
+	return new Promise((resolve, reject) => {
+		transaction.oncomplete = () => resolve();
+		transaction.onabort = () =>
+			reject(transaction.error ?? new Error('Local wallpaper storage was aborted.'));
+		transaction.onerror = () =>
+			reject(transaction.error ?? new Error('Local wallpaper storage failed.'));
+	});
+}
+
+function dataUrlToBlob(dataUrl: string): Blob {
+	const commaIndex = dataUrl.indexOf(',');
+	if (commaIndex === -1) throw new Error('Invalid image data URL.');
+
+	const metadata = dataUrl.slice(0, commaIndex);
+	const encoded = dataUrl.slice(commaIndex + 1);
+	const mimeType = metadata.match(/^data:([^;]+);base64$/i)?.[1];
+	if (!mimeType?.startsWith('image/')) throw new Error('Invalid image data URL.');
+
+	const binary = atob(encoded);
+	const bytes = new Uint8Array(binary.length);
+	for (let index = 0; index < binary.length; index += 1) {
+		bytes[index] = binary.charCodeAt(index);
+	}
+
+	return new Blob([bytes], { type: mimeType });
+}
+
+function createLocalWallpaperId(): string {
+	if (typeof crypto !== 'undefined' && 'randomUUID' in crypto) {
+		return crypto.randomUUID();
+	}
+
+	return `${Date.now().toString(36)}-${Math.random().toString(36).slice(2)}`;
+}
+
+function revokeCachedLocalWallpaperUrl(id: string): void {
+	const cachedUrl = localWallpaperUrlCache.get(id);
+	if (!cachedUrl) return;
+
+	URL.revokeObjectURL(cachedUrl);
+	localWallpaperUrlCache.delete(id);
+}
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index eea0b7e..bd9e9ed 100644
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -12,7 +12,11 @@
 	import { FolderOpen } from 'lucide-svelte';
 	import { activeJobs, jobsStore } from '$lib/stores/jobs';
 	import { websocketStore } from '$lib/stores/websocket';
-	import { applyAccentColor, resolveBackgroundImage, settingsStore } from '$lib/stores/settings';
+	import {
+		applyAccentColor,
+		resolvedBackgroundImageUrl,
+		settingsStore
+	} from '$lib/stores/settings';
 	import { getWallpaperBackgroundStyle, normalizeBackgroundImageMode } from '$lib/utils/wallpaper';
 
 	let { children } = $props();
@@ -29,15 +33,15 @@
 	});
 
 	// Public routes that don't require authentication
-	const publicRoutes = ['/login', '/test'];
+	const publicRoutes = ['/login'];
 	const isWorkspacePage = $derived(
 		page.url.pathname.startsWith('/browse') || page.url.pathname.startsWith('/settings')
 	);
 	const isLoginPage = $derived(page.url.pathname.startsWith('/login'));
-	const backgroundImage = $derived(resolveBackgroundImage($settingsStore.backgroundImage));
 	const backgroundImageMode = $derived(
 		normalizeBackgroundImageMode($settingsStore.backgroundImageMode)
 	);
+	const backgroundImage = $derived($resolvedBackgroundImageUrl);
 	const hasBackgroundImage = $derived(backgroundImage !== null);
 	const frostedGlass = $derived(hasBackgroundImage && $settingsStore.frostedGlass);
 	const backgroundImageStyle = $derived(
diff --git a/frontend/src/routes/browse/+page.svelte b/frontend/src/routes/browse/+page.svelte
index c443289..fd25ec4 100644
--- a/frontend/src/routes/browse/+page.svelte
+++ b/frontend/src/routes/browse/+page.svelte
@@ -656,7 +656,7 @@
 
 <div class="flex h-screen w-full overflow-hidden bg-surface-primary">
 	<!-- Sidebar -->
-	<Sidebar {roots} currentPath={path} onNavigate={handleNavigate} />
+	<Sidebar currentPath={path} onNavigate={handleNavigate} />
 
 	<!-- Main content area -->
 	<div class="flex min-w-0 flex-1 flex-col">
@@ -679,6 +679,7 @@
 			searchLoading={isSearchActive && searchQueryResult.isFetching}
 			onSearchInput={handleSearchInput}
 			onSearchClear={handleSearchClear}
+			includeHiddenSuggestions={settings.showHiddenFiles}
 		/>
 
 		<!-- File list or Drive cards -->
diff --git a/frontend/src/routes/settings/+page.svelte b/frontend/src/routes/settings/+page.svelte
index a30fbd4..50f1166 100644
--- a/frontend/src/routes/settings/+page.svelte
+++ b/frontend/src/routes/settings/+page.svelte
@@ -2,6 +2,7 @@
 	/**
 	 * Settings page - workspace-style preferences screen matching the file browser shell.
 	 */
+	import { onDestroy, tick } from 'svelte';
 	import { goto } from '$app/navigation';
 	import { resolve } from '$app/paths';
 	import { authStore } from '$lib/stores/auth';
@@ -16,8 +17,14 @@
 	} from '$lib/stores/settings';
 	import SearchBar from '$lib/components/SearchBar.svelte';
 	import WallpaperSettings from '$lib/components/settings/wallpaper/WallpaperSettings.svelte';
-	import { Button, Select, Toggle } from '$lib/components/ui';
+	import { Button, ProgressButton, Select, Toggle } from '$lib/components/ui';
 	import { normalizeBackgroundImageMode } from '$lib/utils/wallpaper';
+	import {
+		deleteLocalWallpaper,
+		isInlineWallpaperDataUrl,
+		isLocalWallpaperReference,
+		saveLocalWallpaperDataUrl
+	} from '$lib/utils/wallpaperStorage';
 	import {
 		ChevronLeft,
 		Eye,
@@ -35,10 +42,16 @@
 
 	type SettingsSectionId = 'display' | 'personalization' | 'behavior' | 'defaults' | 'account';
 	type SettingsCategory = 'all' | SettingsSectionId;
+	type ApplyProgressVariant = 'default' | 'success' | 'danger';
 
 	let settings = $state<UserSettings>({ ...$settingsStore });
 	let activeCategory = $state<SettingsCategory>('all');
 	let searchQuery = $state('');
+	let isApplyingSettings = $state(false);
+	let applyProgress = $state(0);
+	let applyProgressStatus = $state('');
+	let applyProgressVariant = $state<ApplyProgressVariant>('default');
+	let applyProgressResetTimer: ReturnType<typeof setTimeout> | null = null;
 
 	const hasChanges = $derived(JSON.stringify(settings) !== JSON.stringify($settingsStore));
 	const normalizedSearch = $derived(searchQuery.trim().toLowerCase());
@@ -47,7 +60,15 @@
 		normalizeAccentColor(settings.accentColor) ?? DEFAULT_ACCENT_COLOR
 	);
 	const backgroundImageIsValid = $derived(isValidBackgroundImage(settings.backgroundImage));
-	const canSave = $derived(hasChanges && accentColorIsValid && backgroundImageIsValid);
+	const canSave = $derived(
+		hasChanges && accentColorIsValid && backgroundImageIsValid && !isApplyingSettings
+	);
+	const showApplyProgress = $derived(isApplyingSettings || applyProgress > 0);
+	const saveButtonText = $derived.by(() => {
+		if (applyProgressVariant === 'danger' && applyProgress > 0) return 'Failed';
+		if (applyProgressVariant === 'success' && applyProgress >= 100) return 'Saved';
+		return isApplyingSettings ? 'Saving' : 'Save';
+	});
 
 	const navItems: Array<{
 		id: SettingsCategory;
@@ -114,29 +135,145 @@
 	const panelHeaderClass =
 		'flex items-start justify-between gap-4 border-b border-border-secondary bg-surface-primary/55 px-4 py-3';
 	const settingRowClass =
-		'flex items-center justify-between gap-4 border-b border-border-secondary px-4 py-3 last:border-b-0';
+		'flex min-h-12 items-center justify-between gap-4 border-b border-border-secondary px-4 py-2 last:border-b-0';
+
+	onDestroy(() => {
+		clearApplyProgressResetTimer();
+	});
+
+	function clearApplyProgressResetTimer() {
+		if (!applyProgressResetTimer) return;
 
-	function handleSave() {
-		if (!accentColorIsValid || !backgroundImageIsValid) return;
+		clearTimeout(applyProgressResetTimer);
+		applyProgressResetTimer = null;
+	}
+
+	function scheduleApplyProgressReset(delay: number) {
+		clearApplyProgressResetTimer();
+		applyProgressResetTimer = setTimeout(() => {
+			applyProgress = 0;
+			applyProgressStatus = '';
+			applyProgressVariant = 'default';
+			applyProgressResetTimer = null;
+		}, delay);
+	}
 
-		const backgroundImage = normalizeBackgroundImage(settings.backgroundImage);
+	function waitForPaint(): Promise<void> {
+		return new Promise((resolvePaint) => {
+			if (typeof requestAnimationFrame === 'undefined') {
+				resolvePaint();
+				return;
+			}
 
-		settingsStore.set({
-			...settings,
-			accentColor: normalizeAccentColor(settings.accentColor),
-			backgroundImage,
-			backgroundImageMode: normalizeBackgroundImageMode(settings.backgroundImageMode),
-			frostedGlass: backgroundImage ? settings.frostedGlass : false
+			requestAnimationFrame(() => resolvePaint());
+		});
+	}
+
+	async function setApplyProgress(value: number, status: string) {
+		applyProgress = value;
+		applyProgressStatus = status;
+		await tick();
+		await waitForPaint();
+	}
+
+	async function handleSave() {
+		if (!accentColorIsValid || !backgroundImageIsValid || isApplyingSettings) return;
+
+		clearApplyProgressResetTimer();
+		isApplyingSettings = true;
+		applyProgressVariant = 'default';
+		let savedLocalBackgroundImage: string | null = null;
+
+		try {
+			await setApplyProgress(15, 'Validating settings...');
+
+			const previousBackgroundImage = $settingsStore.backgroundImage;
+			let backgroundImage = normalizeBackgroundImage(settings.backgroundImage);
+			if (backgroundImage && isInlineWallpaperDataUrl(backgroundImage)) {
+				await setApplyProgress(35, 'Saving wallpaper locally...');
+				backgroundImage = await saveLocalWallpaperDataUrl(backgroundImage);
+				savedLocalBackgroundImage = backgroundImage;
+			}
+
+			const nextSettings = {
+				...settings,
+				accentColor: normalizeAccentColor(settings.accentColor),
+				backgroundImage,
+				backgroundImageMode: normalizeBackgroundImageMode(settings.backgroundImageMode),
+				frostedGlass: backgroundImage ? settings.frostedGlass : false
+			};
+
+			await setApplyProgress(
+				55,
+				backgroundImage ? 'Applying wallpaper and preferences...' : 'Applying preferences...'
+			);
+
+			settingsStore.set(nextSettings);
+			settings = { ...nextSettings };
+
+			await setApplyProgress(85, 'Refreshing workspace...');
+			cleanupLocalWallpaper(previousBackgroundImage, backgroundImage);
+			applyProgressVariant = 'success';
+			await setApplyProgress(100, 'Settings applied');
+			scheduleApplyProgressReset(900);
+		} catch (error) {
+			cleanupLocalWallpaper(savedLocalBackgroundImage, null);
+			applyProgressVariant = 'danger';
+			applyProgress = 100;
+			applyProgressStatus = getApplyErrorMessage(error);
+			scheduleApplyProgressReset(4000);
+		} finally {
+			isApplyingSettings = false;
+		}
+	}
+
+	function getApplyErrorMessage(error: unknown): string {
+		if (isStorageQuotaError(error)) {
+			return 'This wallpaper is too large to save locally. Choose a smaller image or pick one from the server.';
+		}
+
+		return error instanceof Error ? error.message : 'Unable to apply settings.';
+	}
+
+	function isStorageQuotaError(error: unknown): boolean {
+		const errorText = error instanceof Error ? `${error.name} ${error.message}` : String(error);
+		return /quota|NS_ERROR_DOM_QUOTA_REACHED|exceeded/i.test(errorText);
+	}
+
+	function cleanupLocalWallpaper(
+		previousBackgroundImage: string | null,
+		nextBackgroundImage: string | null
+	) {
+		if (
+			!previousBackgroundImage ||
+			previousBackgroundImage === nextBackgroundImage ||
+			!isLocalWallpaperReference(previousBackgroundImage)
+		) {
+			return;
+		}
+
+		deleteLocalWallpaper(previousBackgroundImage).catch(() => {
+			// Cleanup failure should not make an already saved preference look failed.
 		});
 	}
 
 	function handleCancel() {
+		clearApplyProgressResetTimer();
+		applyProgress = 0;
+		applyProgressStatus = '';
+		applyProgressVariant = 'default';
 		settings = { ...$settingsStore };
 	}
 
 	function handleReset() {
+		clearApplyProgressResetTimer();
+		applyProgress = 0;
+		applyProgressStatus = '';
+		applyProgressVariant = 'default';
+		const previousBackgroundImage = $settingsStore.backgroundImage;
 		settingsStore.reset();
 		settings = { ...$settingsStore };
+		cleanupLocalWallpaper(previousBackgroundImage, null);
 	}
 
 	async function handleLogout() {
@@ -300,21 +437,26 @@
 					size="sm"
 					onclick={handleCancel}
 					title="Discard changes"
-					disabled={!hasChanges}
+					disabled={!hasChanges || isApplyingSettings}
 				>
 					<X size={16} />
 					<span class="hidden sm:inline">Cancel</span>
 				</Button>
-				<Button
+				<ProgressButton
 					variant="primary"
 					size="sm"
 					onclick={handleSave}
-					title="Save changes"
+					title={applyProgressStatus || 'Save changes'}
 					disabled={!canSave}
+					busy={isApplyingSettings}
+					progress={showApplyProgress ? applyProgress : null}
+					progressVariant={applyProgressVariant}
+					progressLabel={applyProgressStatus}
+					className="min-w-20"
 				>
 					<Save size={16} />
-					<span class="hidden sm:inline">Save</span>
-				</Button>
+					<span class="hidden sm:inline">{saveButtonText}</span>
+				</ProgressButton>
 			</div>
 		</div>
 
diff --git a/frontend/src/routes/test/+page.svelte b/frontend/src/routes/test/+page.svelte
deleted file mode 100644
index a8b7673..0000000
--- a/frontend/src/routes/test/+page.svelte
+++ /dev/null
@@ -1,532 +0,0 @@
-<script lang="ts">
-	/**
-	 * Component Testing Page
-	 * Test all UI components without backend
-	 */
-	import {
-		Button,
-		Input,
-		Select,
-		Toggle,
-		Card,
-		Modal,
-		Spinner,
-		Badge,
-		ProgressBar,
-	} from '$lib/components/ui';
-	import Toolbar from '$lib/components/Toolbar.svelte';
-	import Sidebar from '$lib/components/Sidebar.svelte';
-	import StatusBar from '$lib/components/StatusBar.svelte';
-	import SystemDriveCard from '$lib/components/SystemDriveCard.svelte';
-	import FileList from '$lib/components/FileList.svelte';
-	import FileGrid from '$lib/components/FileGrid.svelte';
-	import Breadcrumb from '$lib/components/Breadcrumb.svelte';
-	import SearchBar from '$lib/components/SearchBar.svelte';
-	import UploadDropzone from '$lib/components/UploadDropzone.svelte';
-	import UploadProgress from '$lib/components/UploadProgress.svelte';
-	import JobMonitor from '$lib/components/JobMonitor.svelte';
-	import PicoLogo from '$lib/components/PicoLogo.svelte';
-	import type { ContextMenuItem } from '$lib/components/ui/ContextMenu.svelte';
-	import ContextMenu from '$lib/components/ui/ContextMenu.svelte';
-	import { FlaskConical, Bell, Copy, Scissors, ClipboardPaste, Trash2, Pencil } from 'lucide-svelte';
-	import type { FileInfo, MountPoint } from '$lib/api/files';
-	import type { ViewMode } from '$lib/types/files';
-	import type { SystemDrive } from '$lib/api/system';
-	import type { Job } from '$lib/api/jobs';
-	import type { UploadProgress as UploadProgressType } from '$lib/utils/upload';
-
-	// UI Component States
-	let inputValue = $state('');
-	let selectValue = $state('option1');
-	let toggleChecked = $state(false);
-	let modalOpen = $state(false);
-	let progressValue = $state(65);
-
-	// Context Menu State
-	let contextMenuOpen = $state(false);
-	let contextMenuX = $state(0);
-	let contextMenuY = $state(0);
-	let contextMenuItems: ContextMenuItem[] = $state([
-		{ id: 'copy', label: 'Copy', icon: Copy, shortcut: 'Ctrl+C' },
-		{ id: 'cut', label: 'Cut', icon: Scissors, shortcut: 'Ctrl+X' },
-		{ id: 'paste', label: 'Paste', icon: ClipboardPaste, shortcut: 'Ctrl+V', disabled: true },
-		{ id: 'sep1', label: '', separator: true },
-		{ id: 'delete', label: 'Delete', icon: Trash2, shortcut: 'Del' },
-		{ id: 'rename', label: 'Rename', icon: Pencil, shortcut: 'F2' },
-	]);
-
-
-	// Toolbar state
-	let toolbarPath = $state(['Documents', 'Projects', 'Frontend']);
-	let viewMode = $state<ViewMode>('list');
-
-	// Mock data for components
-	const mockRoots: MountPoint[] = [
-		{ name: 'Home', readOnly: false },
-		{ name: 'Media', readOnly: true },
-		{ name: 'Downloads', readOnly: false },
-	];
-
-	const mockSystemDrives: SystemDrive[] = [
-		{ device: '/dev/sda1', mountPoint: '/home', fsType: 'ext4', totalBytes: 500000000000, usedBytes: 350000000000, freeBytes: 150000000000, usedPct: 70 },
-		{ device: '/dev/sdb1', mountPoint: '/media/storage', fsType: 'ntfs', totalBytes: 2000000000000, usedBytes: 1800000000000, freeBytes: 200000000000, usedPct: 90 },
-		{ device: '/dev/sdc1', mountPoint: '/mnt/downloads', fsType: 'ext4', totalBytes: 100000000000, usedBytes: 25000000000, freeBytes: 75000000000, usedPct: 25 },
-	];
-
-	const mockFiles: FileInfo[] = [
-		{ name: 'Documents', path: '/Documents', isDir: true, size: 0, modTime: '2025-01-01T10:00:00Z', permissions: 'drwxr-xr-x' },
-		{ name: 'Photos', path: '/Photos', isDir: true, size: 0, modTime: '2025-01-01T09:00:00Z', permissions: 'drwxr-xr-x' },
-		{ name: 'report.pdf', path: '/report.pdf', isDir: false, size: 1024000, modTime: '2025-01-01T08:00:00Z', permissions: '-rw-r--r--' },
-		{ name: 'image.png', path: '/image.png', isDir: false, size: 2048000, modTime: '2024-12-25T12:00:00Z', permissions: '-rw-r--r--' },
-		{ name: 'video.mp4', path: '/video.mp4', isDir: false, size: 150000000, modTime: '2024-12-20T15:30:00Z', permissions: '-rw-r--r--' },
-		{ name: 'music.mp3', path: '/music.mp3', isDir: false, size: 5000000, modTime: '2024-12-15T18:00:00Z', permissions: '-rw-r--r--' },
-		{ name: 'script.js', path: '/script.js', isDir: false, size: 15000, modTime: '2024-12-10T09:00:00Z', permissions: '-rw-r--r--' },
-		{ name: 'data.json', path: '/data.json', isDir: false, size: 8500, modTime: '2024-12-05T14:00:00Z', permissions: '-rw-r--r--' },
-	];
-
-	const mockJobs: Job[] = [
-		{ id: '1', type: 'copy', state: 'running', sourcePath: '/home/file1.zip', destPath: '/backup/file1.zip', progress: 45, createdAt: '2025-01-01T10:00:00Z' },
-		{ id: '2', type: 'move', state: 'pending', sourcePath: '/downloads/movie.mp4', destPath: '/media/movie.mp4', progress: 0, createdAt: '2025-01-01T10:01:00Z' },
-		{ id: '3', type: 'delete', state: 'completed', sourcePath: '/tmp/old-file.txt', progress: 100, createdAt: '2025-01-01T09:00:00Z', completedAt: '2025-01-01T09:01:00Z' },
-		{ id: '4', type: 'copy', state: 'failed', sourcePath: '/home/broken.zip', destPath: '/backup/broken.zip', progress: 30, error: 'Disk full', createdAt: '2025-01-01T08:00:00Z' },
-	];
-
-	const mockUploads: UploadProgressType[] = [
-		{ uploadId: 'u1', fileName: 'large-video.mp4', totalSize: 500000000, uploadedSize: 250000000, percentage: 50, currentChunk: 5, totalChunks: 10, status: 'uploading' },
-		{ uploadId: 'u2', fileName: 'document.pdf', totalSize: 1024000, uploadedSize: 1024000, percentage: 100, currentChunk: 1, totalChunks: 1, status: 'complete' },
-		{ uploadId: 'u3', fileName: 'image.png', totalSize: 2048000, uploadedSize: 0, percentage: 0, currentChunk: 0, totalChunks: 1, status: 'pending' },
-	];
-
-	let selectedPaths = $state(new Set<string>());
-	let sortBy = $state<'name' | 'size' | 'modTime' | 'type'>('name');
-	let sortDir = $state<'asc' | 'desc'>('asc');
-	let searchQuery = $state('');
-	let searchLoading = $state(false);
-
-	function handleNavigate(path: string) {
-		console.log('Navigate to:', path);
-	}
-
-	function handleFileClick(file: FileInfo) {
-		console.log('File clicked:', file);
-	}
-
-	function handleFilesSelected(files: File[]) {
-		console.log('Files selected:', files.map(f => f.name));
-	}
-</script>
-
-<svelte:head>
-	<title>Component Test Page</title>
-</svelte:head>
-
-<div class="min-h-screen bg-surface-primary text-text-primary p-8">
-	<h1 class="text-3xl font-bold mb-8 flex items-center gap-3"><FlaskConical size={32} /> Component Test Page</h1>
-	<p class="text-text-secondary mb-8">Test all UI components without backend connection</p>
-
-	<!-- Section: Branding -->
-	<section class="mb-12">
-		<h2 class="text-2xl font-semibold mb-6 pb-2 border-b border-border-primary">Branding</h2>
-		
-		<div class="mb-8">
-			<h3 class="text-lg font-medium mb-4 text-text-secondary">PicoLogo</h3>
-			<div class="flex flex-wrap gap-8 items-end">
-				<div class="flex flex-col items-center gap-2">
-					<PicoLogo size="sm" />
-					<span class="text-xs text-text-muted">Small</span>
-				</div>
-				<div class="flex flex-col items-center gap-2">
-					<PicoLogo size="md" />
-					<span class="text-xs text-text-muted">Medium</span>
-				</div>
-				<div class="flex flex-col items-center gap-2">
-					<PicoLogo size="lg" />
-					<span class="text-xs text-text-muted">Large</span>
-				</div>
-			</div>
-		</div>
-	</section>
-
-	<!-- Section: Base UI Components -->
-	<section class="mb-12">
-		<h2 class="text-2xl font-semibold mb-6 pb-2 border-b border-border-primary">Base UI Components</h2>
-
-		<!-- Buttons -->
-		<div class="mb-8">
-			<h3 class="text-lg font-medium mb-4 text-text-secondary">Buttons</h3>
-			<div class="flex flex-wrap gap-4 items-center">
-				<Button variant="primary">Primary</Button>
-				<Button variant="secondary">Secondary</Button>
-				<Button variant="ghost">Ghost</Button>
-				<Button variant="danger">Danger</Button>
-				<Button variant="primary" disabled>Disabled</Button>
-				<Button variant="primary" size="sm">Small</Button>
-				<Button variant="primary" size="lg">Large</Button>
-				<Button variant="secondary" size="icon" title="Icon Button"><Bell size={16} /></Button>
-			</div>
-		</div>
-
-		<!-- Inputs -->
-		<div class="mb-8">
-			<h3 class="text-lg font-medium mb-4 text-text-secondary">Inputs</h3>
-			<div class="flex flex-wrap gap-4 items-start max-w-md">
-				<div class="w-full">
-					<Input placeholder="Type something..." bind:value={inputValue} />
-					<p class="text-xs text-text-muted mt-1">Value: {inputValue || '(empty)'}</p>
-				</div>
-				<div class="w-full">
-					<Input type="password" placeholder="Password input" />
-				</div>
-				<div class="w-full">
-					<Input placeholder="Disabled input" disabled />
-				</div>
-			</div>
-		</div>
-
-		<!-- Select -->
-		<div class="mb-8">
-			<h3 class="text-lg font-medium mb-4 text-text-secondary">Select</h3>
-			<div class="max-w-xs">
-				<Select
-					bind:value={selectValue}
-					options={[
-						{ value: 'option1', label: 'Option 1' },
-						{ value: 'option2', label: 'Option 2' },
-						{ value: 'option3', label: 'Option 3' },
-					]}
-				/>
-				<p class="text-xs text-text-muted mt-1">Selected: {selectValue}</p>
-			</div>
-		</div>
-
-		<!-- Toggle -->
-		<div class="mb-8">
-			<h3 class="text-lg font-medium mb-4 text-text-secondary">Toggle</h3>
-			<div class="flex flex-col gap-4">
-				<Toggle bind:checked={toggleChecked} label="Enable feature" />
-				<p class="text-xs text-text-muted">State: {toggleChecked ? 'ON' : 'OFF'}</p>
-				<Toggle checked={true} disabled label="Disabled toggle" />
-			</div>
-		</div>
-
-		<!-- Badges -->
-		<div class="mb-8">
-			<h3 class="text-lg font-medium mb-4 text-text-secondary">Badges</h3>
-			<div class="flex flex-wrap gap-3">
-				<Badge>Default</Badge>
-				<Badge variant="success">Success</Badge>
-				<Badge variant="warning">Warning</Badge>
-				<Badge variant="danger">Danger</Badge>
-				<Badge variant="info">Info</Badge>
-			</div>
-		</div>
-
-		<!-- Spinner -->
-		<div class="mb-8">
-			<h3 class="text-lg font-medium mb-4 text-text-secondary">Spinner</h3>
-			<div class="flex gap-6 items-center">
-				<div class="flex flex-col items-center gap-2">
-					<Spinner size="sm" />
-					<span class="text-xs text-text-muted">Small</span>
-				</div>
-				<div class="flex flex-col items-center gap-2">
-					<Spinner size="md" />
-					<span class="text-xs text-text-muted">Medium</span>
-				</div>
-				<div class="flex flex-col items-center gap-2">
-					<Spinner size="lg" />
-					<span class="text-xs text-text-muted">Large</span>
-				</div>
-			</div>
-		</div>
-
-		<!-- Progress Bar -->
-		<div class="mb-8">
-			<h3 class="text-lg font-medium mb-4 text-text-secondary">Progress Bar</h3>
-			<div class="flex flex-col gap-4 max-w-md">
-				<div>
-					<ProgressBar value={progressValue} showLabel />
-					<input type="range" min="0" max="100" bind:value={progressValue} class="w-full mt-2" />
-				</div>
-				<ProgressBar value={100} variant="success" />
-				<ProgressBar value={75} variant="warning" />
-				<ProgressBar value={30} variant="danger" />
-				<ProgressBar value={50} size="sm" />
-			</div>
-		</div>
-
-		<!-- Cards -->
-		<div class="mb-8">
-			<h3 class="text-lg font-medium mb-4 text-text-secondary">Cards</h3>
-			<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-				<Card>
-					<h4 class="font-medium mb-2">Default Card</h4>
-					<p class="text-sm text-text-secondary">This is a basic card component.</p>
-				</Card>
-				<Card variant="interactive" onclick={() => console.log('Card clicked!')}>
-					<h4 class="font-medium mb-2">Interactive Card</h4>
-					<p class="text-sm text-text-secondary">Click me! I'm interactive.</p>
-				</Card>
-				<Card padding="lg">
-					<h4 class="font-medium mb-2">Large Padding</h4>
-					<p class="text-sm text-text-secondary">This card has more padding.</p>
-				</Card>
-			</div>
-		</div>
-
-		<!-- Modal -->
-		<div class="mb-8">
-			<h3 class="text-lg font-medium mb-4 text-text-secondary">Modal</h3>
-			<Button onclick={() => modalOpen = true}>Open Modal</Button>
-			<Modal open={modalOpen} title="Test Modal" onclose={() => modalOpen = false}>
-				{#snippet children()}
-					<p class="text-text-secondary">This is the modal content. You can put anything here.</p>
-					<div class="mt-4">
-						<Input placeholder="Example input in modal" />
-					</div>
-				{/snippet}
-				{#snippet footer()}
-					<Button variant="secondary" onclick={() => modalOpen = false}>Cancel</Button>
-					<Button variant="primary" onclick={() => modalOpen = false}>Confirm</Button>
-				{/snippet}
-			</Modal>
-		</div>
-	</section>
-
-	<!-- Section: Context Menu -->
-	<section class="mb-12">
-		<h2 class="text-2xl font-semibold mb-6 pb-2 border-b border-border-primary">Context Menu</h2>
-
-		<div class="mb-8">
-			<h3 class="text-lg font-medium mb-4 text-text-secondary">Right-click anywhere to open context menu</h3>
-			<!-- svelte-ignore a11y_no_static_element_interactions -->
-			<div
-				class="w-full h-48 border-2 border-dashed border-border-secondary rounded-lg flex items-center justify-center text-text-muted"
-				role="region"
-				oncontextmenu={(e) => {
-					e.preventDefault();
-					contextMenuX = e.clientX;
-					contextMenuY = e.clientY;
-					contextMenuOpen = true;
-				}}
-			>
-				Right-click Area
-			</div>
-
-			{#if contextMenuOpen}
-				<ContextMenu
-					x={contextMenuX}
-					y={contextMenuY}
-					items={contextMenuItems}
-					onSelect={(id) => {
-						console.log('Context menu item selected:', id);
-						contextMenuOpen = false;
-					}}
-					onClose={() => contextMenuOpen = false}
-				/>
-			{/if}
-		</div>
-	</section>
-
-	<!-- Section: File Manager Components -->
-	<section class="mb-12">
-		<h2 class="text-2xl font-semibold mb-6 pb-2 border-b border-border-primary">File Manager Components</h2>
-
-		<!-- Breadcrumb -->
-		<div class="mb-8">
-			<h3 class="text-lg font-medium mb-4 text-text-secondary">Breadcrumb</h3>
-			<Breadcrumb segments={toolbarPath} onNavigate={handleNavigate} />
-		</div>
-
-		<!-- SearchBar -->
-		<div class="mb-8">
-			<h3 class="text-lg font-medium mb-4 text-text-secondary">SearchBar</h3>
-			<div class="max-w-md">
-				<SearchBar
-					value={searchQuery}
-					isLoading={searchLoading}
-					onSearch={(q) => console.log('Search:', q)}
-					onInput={(q) => { searchQuery = q; console.log('Input:', q); }}
-				/>
-				<div class="mt-2">
-					<Toggle bind:checked={searchLoading} label="Simulate loading" />
-				</div>
-			</div>
-		</div>
-
-		<!-- Toolbar -->
-		<div class="mb-8">
-			<h3 class="text-lg font-medium mb-4 text-text-secondary">Toolbar</h3>
-			<div class="border border-border-primary rounded overflow-hidden">
-				<Toolbar
-					pathSegments={toolbarPath}
-					canGoBack={true}
-					canGoForward={false}
-					canGoUp={true}
-					onBack={() => console.log('Back')}
-					onForward={() => console.log('Forward')}
-					onUp={() => console.log('Up')}
-					onNavigate={handleNavigate}
-					onRefresh={() => console.log('Refresh')}
-					onSettings={() => console.log('Settings')}
-				/>
-			</div>
-		</div>
-
-		<!-- StatusBar -->
-		<div class="mb-8">
-			<h3 class="text-lg font-medium mb-4 text-text-secondary">StatusBar</h3>
-			<div class="border border-border-primary rounded overflow-hidden">
-				<StatusBar
-					itemCount={mockFiles.length}
-					selectedCount={selectedPaths.size}
-					{viewMode}
-					onViewModeChange={(mode) => viewMode = mode}
-				/>
-			</div>
-		</div>
-
-		<!-- SystemDriveCard -->
-		<div class="mb-8">
-			<h3 class="text-lg font-medium mb-4 text-text-secondary">SystemDriveCard</h3>
-			<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-				{#each mockSystemDrives as drive (drive.mountPoint)}
-					<SystemDriveCard {drive} onClick={() => console.log('Drive clicked:', drive.mountPoint)} />
-				{/each}
-			</div>
-		</div>
-
-		<!-- Sidebar -->
-		<div class="mb-8">
-			<h3 class="text-lg font-medium mb-4 text-text-secondary">Sidebar</h3>
-			<div class="border border-border-primary rounded overflow-hidden h-[400px]">
-				<Sidebar
-					roots={mockRoots}
-					currentPath="Home"
-					onNavigate={handleNavigate}
-				/>
-			</div>
-		</div>
-
-		<!-- FileList -->
-		<div class="mb-8">
-			<h3 class="text-lg font-medium mb-4 text-text-secondary">FileList</h3>
-			<div class="border border-border-primary rounded overflow-hidden h-[400px]">
-				<FileList
-					items={mockFiles}
-					{sortBy}
-					{sortDir}
-					{selectedPaths}
-					isLoading={false}
-					compactMode={false}
-					onItemClick={handleFileClick}
-					onSortChange={(field, dir) => { sortBy = field; sortDir = dir; }}
-					onSelectionChange={(paths) => selectedPaths = paths}
-				/>
-			</div>
-			<p class="text-xs text-text-muted mt-2">Selected: {selectedPaths.size} items</p>
-		</div>
-
-		<!-- FileGrid -->
-		<div class="mb-8">
-			<h3 class="text-lg font-medium mb-4 text-text-secondary">FileGrid</h3>
-			<div class="border border-border-primary rounded overflow-hidden h-[400px]">
-				<FileGrid
-					items={mockFiles}
-					{selectedPaths}
-					isLoading={false}
-					compactMode={false}
-					onItemClick={handleFileClick}
-					onSelectionChange={(paths) => selectedPaths = paths}
-				/>
-			</div>
-			<p class="text-xs text-text-muted mt-2">Selected: {selectedPaths.size} items</p>
-		</div>
-	</section>
-
-	<!-- Section: Upload & Job Components -->
-	<section class="mb-12">
-		<h2 class="text-2xl font-semibold mb-6 pb-2 border-b border-border-primary">Upload & Job Components</h2>
-
-		<!-- UploadDropzone -->
-		<div class="mb-8">
-			<h3 class="text-lg font-medium mb-4 text-text-secondary">UploadDropzone</h3>
-			<div class="max-w-md">
-				<UploadDropzone onFilesSelected={handleFilesSelected} />
-			</div>
-		</div>
-
-		<!-- UploadProgress -->
-		<div class="mb-8">
-			<h3 class="text-lg font-medium mb-4 text-text-secondary">UploadProgress</h3>
-			<div class="max-w-md">
-				<UploadProgress
-					uploads={mockUploads}
-					onCancel={(id) => console.log('Cancel upload:', id)}
-					onRemove={(id) => console.log('Remove upload:', id)}
-					onClearCompleted={() => console.log('Clear completed uploads')}
-				/>
-			</div>
-		</div>
-
-		<!-- JobMonitor -->
-		<div class="mb-8">
-			<h3 class="text-lg font-medium mb-4 text-text-secondary">JobMonitor</h3>
-			<div class="max-w-md">
-				<JobMonitor
-					jobs={mockJobs}
-					onCancel={(id) => console.log('Cancel job:', id)}
-					onRemove={(id) => console.log('Remove job:', id)}
-					onClearCompleted={() => console.log('Clear completed jobs')}
-				/>
-			</div>
-		</div>
-	</section>
-
-	<!-- Section: Color Palette -->
-	<section class="mb-12">
-		<h2 class="text-2xl font-semibold mb-6 pb-2 border-b border-border-primary">Design Tokens (Color Palette)</h2>
-
-		<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
-			<!-- Surface colors -->
-			<div class="flex flex-col gap-2">
-				<h4 class="text-sm font-medium text-text-secondary">Surfaces</h4>
-				<div class="h-12 bg-surface-primary border border-border-primary rounded flex items-center justify-center text-xs">surface-primary</div>
-				<div class="h-12 bg-surface-secondary border border-border-primary rounded flex items-center justify-center text-xs">surface-secondary</div>
-				<div class="h-12 bg-surface-tertiary border border-border-primary rounded flex items-center justify-center text-xs">surface-tertiary</div>
-				<div class="h-12 bg-surface-elevated border border-border-primary rounded flex items-center justify-center text-xs">surface-elevated</div>
-			</div>
-
-			<!-- Text colors -->
-			<div class="flex flex-col gap-2">
-				<h4 class="text-sm font-medium text-text-secondary">Text</h4>
-				<div class="h-12 bg-surface-secondary rounded flex items-center justify-center text-xs text-text-primary">text-primary</div>
-				<div class="h-12 bg-surface-secondary rounded flex items-center justify-center text-xs text-text-secondary">text-secondary</div>
-				<div class="h-12 bg-surface-secondary rounded flex items-center justify-center text-xs text-text-muted">text-muted</div>
-				<div class="h-12 bg-surface-secondary rounded flex items-center justify-center text-xs text-text-disabled">text-disabled</div>
-			</div>
-
-			<!-- Accent colors -->
-			<div class="flex flex-col gap-2">
-				<h4 class="text-sm font-medium text-text-secondary">Accent</h4>
-				<div class="h-12 bg-accent rounded flex items-center justify-center text-xs text-white">accent</div>
-				<div class="h-12 bg-accent-hover rounded flex items-center justify-center text-xs text-white">accent-hover</div>
-				<div class="h-12 bg-accent-muted rounded flex items-center justify-center text-xs text-white">accent-muted</div>
-				<div class="h-12 bg-selection rounded flex items-center justify-center text-xs text-white">selection</div>
-			</div>
-
-			<!-- Semantic colors -->
-			<div class="flex flex-col gap-2">
-				<h4 class="text-sm font-medium text-text-secondary">Semantic</h4>
-				<div class="h-12 bg-success rounded flex items-center justify-center text-xs text-white">success</div>
-				<div class="h-12 bg-warning rounded flex items-center justify-center text-xs text-white">warning</div>
-				<div class="h-12 bg-danger rounded flex items-center justify-center text-xs text-white">danger</div>
-				<div class="h-12 bg-folder rounded flex items-center justify-center text-xs text-black">folder</div>
-			</div>
-		</div>
-	</section>
-
-	<footer class="text-center text-text-muted text-sm py-8 border-t border-border-primary">
-		<p>Component Test Page - No backend required</p>
-	</footer>
-</div>
diff --git a/scripts/local-test.ts b/scripts/local-test.ts
index b0bc0e5..ef69030 100644
--- a/scripts/local-test.ts
+++ b/scripts/local-test.ts
@@ -396,32 +396,13 @@ function isPortAvailable(host: string, port: number): Promise<boolean> {
   });
 }
 
-async function isPortListening(port: number): Promise<boolean> {
-  const proc = spawn({
-    cmd: ["ss", "-ltnH"],
-    stdout: "pipe",
-    stderr: "ignore",
-  });
-
-  const output = await new Response(proc.stdout).text();
-  await proc.exited;
-
-  if (proc.exitCode !== 0) {
-    return false;
-  }
-
-  return output
-    .split("\n")
-    .some((line) => line.trim().split(/\s+/)[3]?.endsWith(`:${port}`));
-}
-
 async function findAvailablePort(
   host: string,
   preferredPort: number,
   label: string,
 ): Promise<number> {
   for (let port = preferredPort; port < preferredPort + 50; port++) {
-    if ((await isPortAvailable(host, port)) && !(await isPortListening(port))) {
+    if (await isPortAvailable(host, port)) {
       if (port !== preferredPort) {
         console.log(
           `${colors.yellow}${label} port ${preferredPort} is busy; using ${port}.${colors.reset}`,
diff --git a/website/src/components/AppInterfaceDemo.astro b/website/src/components/AppInterfaceDemo.astro
index 0263014..5acbf10 100644
--- a/website/src/components/AppInterfaceDemo.astro
+++ b/website/src/components/AppInterfaceDemo.astro
@@ -211,34 +211,42 @@ import {
   const appWindow = document.getElementById('app-window');
 
   if (appWindow) {
+    let ticking = false;
+
+    function updateDemoTransform() {
+      const scrollY = window.scrollY;
+      // Adjust these values to tune the animation timing
+      const maxScroll = window.innerHeight * 0.6;
+
+      let progress = Math.min(Math.max(scrollY / maxScroll, 0), 1);
+
+      // Use an easing function for smoother landing
+      // EaseOutQuart
+      const easeProgress = 1 - Math.pow(1 - progress, 4);
+
+      // Calculate transform values based on progress
+      const rotateX = 20 - (20 * easeProgress); // 20deg to 0deg
+      const scale = 0.85 + (0.15 * easeProgress); // 0.85 to 1.0
+      const translateY = -50 * (1 - easeProgress); // move up slightly as it rotates
+
+      appWindow.style.transform = `perspective(2000px) translateY(${translateY}px) rotateX(${rotateX}deg) scale(${scale})`;
+
+      if (progress > 0.8) {
+        appWindow.classList.add('shadow-accent/30');
+        appWindow.classList.remove('shadow-black/60');
+      } else {
+        appWindow.classList.add('shadow-black/60');
+        appWindow.classList.remove('shadow-accent/30');
+      }
+    }
+
     window.addEventListener('scroll', () => {
-      // Use requestAnimationFrame for smooth performance
+      if (ticking) return;
+      ticking = true;
       window.requestAnimationFrame(() => {
-        const scrollY = window.scrollY;
-        // Adjust these values to tune the animation timing
-        const maxScroll = window.innerHeight * 0.6;
-
-        let progress = Math.min(Math.max(scrollY / maxScroll, 0), 1);
-
-        // Use an easing function for smoother landing
-        // EaseOutQuart
-        const easeProgress = 1 - Math.pow(1 - progress, 4);
-
-        // Calculate transform values based on progress
-        const rotateX = 20 - (20 * easeProgress); // 20deg to 0deg
-        const scale = 0.85 + (0.15 * easeProgress); // 0.85 to 1.0
-        const translateY = -50 * (1 - easeProgress); // move up slightly as it rotates
-
-        appWindow.style.transform = `perspective(2000px) translateY(${translateY}px) rotateX(${rotateX}deg) scale(${scale})`;
-
-        if (progress > 0.8) {
-          appWindow.classList.add('shadow-accent/30');
-          appWindow.classList.remove('shadow-black/60');
-        } else {
-          appWindow.classList.add('shadow-black/60');
-          appWindow.classList.remove('shadow-accent/30');
-        }
+        updateDemoTransform();
+        ticking = false;
       });
-    });
+    }, { passive: true });
   }
-</script>
\ No newline at end of file
+</script>
diff --git a/website/src/components/FeatureCard.astro b/website/src/components/FeatureCard.astro
deleted file mode 100644
index 7a0ba41..0000000
--- a/website/src/components/FeatureCard.astro
+++ /dev/null
@@ -1,13 +0,0 @@
----
-
-// Since this is Astro using @lucide/astro, the Icon prop is an Astro component.
-const { title, desc, icon: Icon } = Astro.props;
----
-
-<div class="feature-card p-8 rounded-xl bg-surface-secondary border border-border-primary">
-  <div class="w-12 h-12 rounded-lg bg-surface-elevated flex items-center justify-center text-accent mb-6 border border-border-secondary">
-    <Icon class="w-6 h-6" />
-  </div>
-  <h3 class="text-xl font-bold text-white mb-3">{title}</h3>
-  <p class="text-text-secondary leading-relaxed">{desc}</p>
-</div>
diff --git a/website/src/components/FeaturesBento.astro b/website/src/components/FeaturesBento.astro
index 65922c2..49d750a 100644
--- a/website/src/components/FeaturesBento.astro
+++ b/website/src/components/FeaturesBento.astro
@@ -5,7 +5,6 @@ import {
   Code,
   Zap,
   CirclePlay,
-  Play,
   Box,
   Terminal,
   FileCode,
diff --git a/website/src/layouts/DocsLayout.astro b/website/src/layouts/DocsLayout.astro
index 15a7a09..8b35ee8 100644
--- a/website/src/layouts/DocsLayout.astro
+++ b/website/src/layouts/DocsLayout.astro
@@ -1,6 +1,6 @@
 ---
 import Layout from './Layout.astro';
-import { ArrowLeft, ExternalLink, Github } from '@lucide/astro';
+import { ArrowLeft, Github } from '@lucide/astro';
 import type { DocHeading, DocNavItem, DocPage } from '../lib/docs';
 
 interface Props {
diff --git a/website/src/lib/docs.ts b/website/src/lib/docs.ts
index ad9759a..eec0ed0 100644
--- a/website/src/lib/docs.ts
+++ b/website/src/lib/docs.ts
@@ -22,56 +22,55 @@ export type DocPage = DocNavItem & {
 
 const docsDirectory = resolveDocsDirectory();
 
-const docMeta: Record<string, Omit<DocNavItem, 'slug'>> = {
-	index: {
+const docNav = [
+	{
+		slug: 'index',
 		title: 'Overview',
 		description: 'Start here: what BoxBox is and where to find each project reference.'
 	},
-	quickstart: {
+	{
+		slug: 'quickstart',
 		title: 'Quick Start',
 		description: 'Install BoxBox quickly with Docker Compose and the published GHCR image.'
 	},
-	docker: {
+	{
+		slug: 'docker',
 		title: 'Docker Deployment',
 		description: 'Deploy from GHCR with Compose, port binding, and optional reverse proxy examples.'
 	},
-	configuration: {
+	{
+		slug: 'configuration',
 		title: 'Configuration',
 		description: 'Configure users, mount points, origins, upload limits, ports, and environment overrides.'
 	},
-	api: {
+	{
+		slug: 'api',
 		title: 'API Reference',
 		description: 'REST endpoints, chunked uploads, streaming previews, background jobs, and WebSocket messages.'
 	},
-	development: {
+	{
+		slug: 'development',
 		title: 'Development',
 		description: 'Run the Go backend, SvelteKit app, and Astro website locally.'
 	},
-	security: {
+	{
+		slug: 'security',
 		title: 'Security',
 		description: 'Harden credentials, mounted paths, origins, reverse proxy behavior, and upload storage.'
 	},
-	architecture: {
+	{
+		slug: 'architecture',
 		title: 'Architecture',
 		description: 'How the Go server, embedded SvelteKit app, services, jobs, and storage paths fit together.'
 	},
-	troubleshooting: {
+	{
+		slug: 'troubleshooting',
 		title: 'Troubleshooting',
 		description: 'Fix common deployment, login, mount, upload, preview, and WebSocket issues.'
 	}
-};
+] satisfies DocNavItem[];
 
-const navOrder = [
-	'index',
-	'quickstart',
-	'docker',
-	'configuration',
-	'api',
-	'development',
-	'security',
-	'architecture',
-	'troubleshooting'
-];
+const docMeta = new Map(docNav.map(({ slug, ...meta }) => [slug, meta]));
 
 marked.setOptions({
 	gfm: true,
@@ -80,15 +79,7 @@ marked.setOptions({
 
 export function getDocNav(): DocNavItem[] {
 	const available = new Set(getDocSlugs());
-	return navOrder
-		.filter((slug) => available.has(slug))
-		.map((slug) => ({
-			slug,
-			...(docMeta[slug] ?? {
-				title: titleFromSlug(slug),
-				description: ''
-			})
-		}));
+	return docNav.filter((doc) => available.has(doc.slug));
 }
 
 export function getDocSlugs(): string[] {
@@ -104,7 +95,7 @@ export async function getDocPage(slug: string): Promise<DocPage> {
 	const linked = normalizeMarkdownDocLinks(rendered);
 	const highlighted = await highlightCodeBlocks(linked);
 	const { html, headings } = addHeadingIds(highlighted);
-	const meta = docMeta[normalizedSlug] ?? {
+	const meta = docMeta.get(normalizedSlug) ?? {
 		title: titleFromMarkdown(markdown) ?? titleFromSlug(normalizedSlug),
 		description: ''
 	};
diff --git a/website/src/styles/global.css b/website/src/styles/global.css
index 8dbc049..6155133 100644
--- a/website/src/styles/global.css
+++ b/website/src/styles/global.css
@@ -70,15 +70,6 @@ body {
   border: 1px solid rgba(255, 255, 255, 0.05);
 }
 
-.feature-card {
-  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
-}
-.feature-card:hover {
-  transform: translateY(-8px);
-  background: var(--color-surface-secondary);
-  border-color: var(--color-border-focus);
-}
-
 /* Custom scrollbar for the mock UI */
 .mock-scrollbar::-webkit-scrollbar {
   width: 6px;