diff --git a/.claude/documentation/ARCHITECTURE_DESIGN.md b/.claude/documentation/ARCHITECTURE_DESIGN.md
index 06f2e9a..d9c7fb8 100644
--- a/.claude/documentation/ARCHITECTURE_DESIGN.md
+++ b/.claude/documentation/ARCHITECTURE_DESIGN.md
@@ -36,33 +36,37 @@ Picture Frame Creator is a Vue.js-based web application that allows users to cre
 ```
 ┌─────────────────────────────────────────────────────────────┐
 │                         App.vue                             │
-│  (Root Component - Layout Container)                        │
+│  (Root Component - Responsive Layout Container)             │
+│  Desktop: Sidebar + Canvas | Mobile: Canvas + Bottom Panel  │
 └────────┬───────────────────────────────┬────────────────────┘
          │                               │
-┌────────▼────────┐             ┌────────▼─────────┐
-│ AppHeader.vue   │             │CanvasContainer   │
-│ (Header)        │             │  FrameCanvas     │
-└─────────────────┘             │  (Rendering)     │
-                                └────────┬─────────┘
-┌─────────────────┐                      │
-│ ConfigBar.vue   │             ┌────────┴─────────┐
-│ (Row 1 & 2)     │             │                  │
-└────────┬────────┘         ┌───▼──────┐    ┌─────▼──────┐
-         │                  │  Konva   │    │   Image    │
-   ┌─────┴──────┐           │  Stage   │    │  Upload    │
-   │            │           └──────────┘    └────────────┘
-┌──▼───┐  ┌────▼────┐
-│Orient│  │  Ratio  │
-│Toggle│  │Selector │
-└──────┘  └─────────┘
+         │                       ┌───────▼──────────┐
+         │                       │ CanvasContainer  │
+         │                       │   FrameCanvas    │
+         │                       │   (Rendering)    │
+         │                       └────────┬─────────┘
+         │                                │
+┌────────▼────────┐              ┌───────┴─────────┐
+│ ConfigBar.vue   │              │                 │
+│ (Configuration) │          ┌───▼──────┐   ┌─────▼──────┐
+└────────┬────────┘          │  Konva   │   │   Image    │
+         │                   │  Stage   │   │  Upload    │
+   ┌─────┴───────┐           └──────────┘   └────────────┘
+   │             │
+   │  ConfigElement Wrapper (x7)
+   │             │
+┌──▼───┐  ┌────▼────┐  ┌────────┐  ┌─────────┐
+│Orient│  │  Ratio  │  │ Color  │  │  Frame  │
+│Toggle│  │Selector │  │ Picker │  │  Size   │
+└──────┘  └─────────┘  └────────┘  └─────────┘
 ┌──────┐  ┌────────┐  ┌────────┐
-│Color │  │ Frame  │  │Spacing │
-│Picker│  │  Size  │  │ Input  │
+│Border│  │ Format │  │Quality │
+│Slider│  │Selector│  │ Slider │
 └──────┘  └────────┘  └────────┘
 
 ┌─────────────────┐
 │ ActionBar.vue   │
-│ (Below Canvas)  │
+│ (Action Buttons)│
 └────────┬────────┘
          │
    ┌─────┴──────┐
@@ -114,33 +118,34 @@ User Interaction
 ```
 src/
 ├── main.js                      # Application entry point
-├── App.vue                      # Root component
+├── App.vue                      # Root component with responsive layout
 ├── assets/
 │   └── styles/
-│       └── main.css            # Tailwind imports, global styles
+│       └── main.css            # Tailwind imports, shared component styles
 ├── components/
 │   ├── layout/
-│   │   ├── AppHeader.vue       # Header
-│   │   ├── ConfigBar.vue       # Configuration controls bar (2 rows)
-│   │   ├── ActionBar.vue       # Action buttons bar (below canvas)
+│   │   ├── ConfigBar.vue       # Configuration controls container
+│   │   ├── ActionBar.vue       # Action buttons container
 │   │   └── CanvasContainer.vue # Canvas wrapper with upload zones
 │   ├── canvas/
 │   │   ├── FrameCanvas.vue     # Main Konva canvas component
 │   │   └── ImageUploadZone.vue # Image upload interface
-│   ├── controls/
-│   │   ├── AspectRatioSelector.vue  # Button group (3:2, 4:3, 5:4, 16:9)
-│   │   ├── ColorPicker.vue          # Color swatch + hex input
-│   │   ├── DownloadButton.vue       # Download canvas button
-│   │   ├── FrameSizeInput.vue       # Frame size input (uses BaseInput)
-│   │   ├── OrientationToggle.vue    # Portrait/Landscape toggle
-│   │   ├── ResetButton.vue          # Reset configuration button
-│   │   └── SpacingInput.vue         # Spacing input (uses BaseInput)
-│   └── shared/
-│       └── BaseInput.vue       # Reusable input component
+│   ├── shared/
+│   │   └── ConfigElement.vue   # Configuration control wrapper
+│   └── controls/
+│       ├── AspectRatioSelector.vue  # Button group (3:2, 4:3, 5:4, 16:9)
+│       ├── BorderSlider.vue         # Border percentage slider (1-25%)
+│       ├── ColorPicker.vue          # HTML5 color picker
+│       ├── DownloadButton.vue       # Download canvas button
+│       ├── FormatSelector.vue       # Export format selector (PNG, JPEG, WebP)
+│       ├── FrameSizeSelector.vue    # Frame size selector (presets + native)
+│       ├── OrientationToggle.vue    # Portrait/Landscape toggle
+│       ├── QualitySlider.vue        # Export quality slider (1-100%)
+│       └── ResetButton.vue          # Reset configuration button
 ├── composables/
 │   ├── useFrameConfig.js       # Frame configuration state
 │   ├── useImageState.js        # Image upload and management
-│   ├── useCanvasRenderer.js    # Canvas rendering logic
+│   └── useCanvasRenderer.js    # Canvas rendering logic
 └── utils/
     ├── calculations.js         # Dimension calculations
     ├── validation.js           # Validation functions
@@ -154,26 +159,38 @@ src/
 ### 5.1 Component Responsibilities
 
 #### **App.vue**
-- Root application container
-- Provides main layout structure
-- Manages canvas stage reference and preview width
+- Root application container with responsive layout
+- **Desktop**: Horizontal layout with sidebar and canvas area
+- **Mobile**: Vertical reverse layout with canvas on top and bottom panel
+- **Mobile Panel**: CSS-only slide-up settings panel using checkbox hack
+  - Chevron button toggles panel visibility
+  - Panel slides over canvas without JavaScript
+  - Settings displayed vertically when expanded
+- Manages canvas stage reference and preview width calculation
 - Coordinates ConfigBar, CanvasContainer, and ActionBar
 
-#### **AppHeader.vue**
-- Application title ("Framed")
-
 #### **ConfigBar.vue**
-- Groups frame configuration controls in 2 rows:
-  - **Row 1**: OrientationToggle + AspectRatioSelector (side-by-side on desktop, stacked on mobile)
-  - **Row 2**: ColorPicker + FrameSizeInput + SpacingInput (responsive flex layout)
+- Container for all frame configuration and export settings controls
+- Vertical stack layout for both desktop and mobile
+- Uses ConfigElement wrapper for consistent control presentation
+- Contains 7 configuration controls:
+  - Orientation, Aspect Ratio, Frame Color, Frame Size, Border Size, Export Format, Quality
 - No props required (uses composables directly)
 
 #### **ActionBar.vue**
-- Contains action buttons positioned below canvas
-- **Desktop**: Buttons aligned right, side-by-side
-- **Mobile**: Stacked vertically with Download on top (flex-col-reverse)
+- Container for action buttons (Reset and Download)
+- **Desktop**: Buttons aligned in sidebar bottom section
+- **Mobile**: Fixed at bottom of screen below canvas
 - Receives stage and previewWidth props for download functionality
 
+#### **ConfigElement.vue**
+- Shared wrapper component for consistent configuration control layout
+- Provides two slots:
+  - **label**: Configuration control label (e.g., "Orientation", "Border Size")
+  - **element**: The actual control component
+- Standardizes spacing, typography, and layout across all configuration controls
+- Used by all controls in ConfigBar for visual consistency
+
 #### **CanvasContainer.vue**
 - Canvas wrapper and orchestration
 - Integrates FrameCanvas with ImageUploadZones
@@ -191,47 +208,50 @@ src/
 - Displays upload placeholder or preview
 - Validates image files on upload
 
-#### **OrientationToggle.vue**
-- Button group: Portrait and Landscape
-- Uses scoped CSS for styling (.orientation-btn, .btn-active, .btn-inactive)
-- Full-width responsive layout with equal button distribution
+#### **Control Components**
+
+**OrientationToggle.vue**
+- Button group for Portrait and Landscape orientations
+- Uses shared selector button styles from main.css
 
-#### **AspectRatioSelector.vue**
-- Button group: 3:2, 4:3, 5:4, 16:9 ratios
-- Uses scoped CSS matching OrientationToggle style
-- Always horizontal layout, buttons shrink/grow equally
+**AspectRatioSelector.vue**
+- Button group for aspect ratio presets: 3:2, 4:3, 5:4, 16:9
+- Uses shared selector button styles from main.css
 
-#### **ColorPicker.vue**
-- Color swatch (40px square) + hex text input
-- Uses scoped CSS (.color-picker-swatch, .color-text-input)
-- Height matches BaseInput components
+**ColorPicker.vue**
+- Native HTML5 color picker for frame color selection
 - Auto-validation and formatting for hex colors
-- Hint text: "(hex format)"
 
-#### **FrameSizeInput.vue**
-- Uses BaseInput component
-- Number input with "px" unit display
-- Validation for min/max frame size
+**FrameSizeSelector.vue**
+- Button group for frame size presets: 1024px, 2048px, 4096px, Native
+- Uses shared selector button styles from main.css
+- Native option uses original uploaded image dimensions
+
+**BorderSlider.vue**
+- Range slider for border percentage (1-25%)
+- Uses shared range slider styles from main.css
+- Border calculated as percentage of frame size
+- Fixed inner spacing between images (not configurable)
 
-#### **SpacingInput.vue**
-- Uses BaseInput component
-- Number input with "px" unit display
-- Validation for min/max spacing
+**FormatSelector.vue**
+- Button group for export formats: PNG, JPEG, WebP
+- Uses shared selector button styles from main.css
+- Dynamically generates filenames at download time
 
-#### **DownloadButton.vue**
+**QualitySlider.vue**
+- Range slider for export quality (1-100%)
+- Uses shared range slider styles from main.css
+- Affects compression for JPEG and WebP formats
+
+**DownloadButton.vue**
 - Triggers high-resolution canvas export
-- Disables when images not uploaded
+- Disabled when images not uploaded
 - Shows loading state during export
 
-#### **ResetButton.vue**
+**ResetButton.vue**
 - Resets all configuration to defaults
 - Clears uploaded images
 
-#### **BaseInput.vue**
-- Shared input component with label, hint, and error display
-- Supports unit display (e.g., "px")
-- Consistent styling across all form inputs
-
 ---
 
 ## 6. State Management
@@ -247,9 +267,9 @@ The application uses Vue 3 Composition API composables for state management, pro
 {
   orientation: 'portrait' | 'landscape',
   aspectRatio: '3:2' | '4:3' | '5:4' | '16:9',
-  backgroundColor: string,      // Hex color
-  frameSize: number,             // pixels (default 3000)
-  spacing: number,               // pixels (default 150)
+  backgroundColor: string,       // Hex color
+  frameSize: number,             // pixels (default 2048)
+  borderPercentage: number,      // 1-25% (default 2)
   frameWidth: computed,          // Based on orientation and aspect ratio
   frameHeight: computed,         // Based on orientation and aspect ratio
 }
@@ -262,15 +282,33 @@ The application uses Vue 3 Composition API composables for state management, pro
     {
       id: string,
       file: File,
+      fileName: string,
       dataUrl: string,
       width: number,
       height: number,
+      orientation: string,
+      aspectRatio: number,
     },
     // ... second image
   ]
 }
 ```
 
+#### **Canvas Renderer** (`useCanvasRenderer.js`)
+```javascript
+{
+  quality: number,               // 1-100% (default 85)
+  format: string,                // 'image/png' | 'image/jpeg' | 'image/webp'
+  stageConfig: computed,
+  backgroundConfig: computed,
+  image1Config: computed,
+  image2Config: computed,
+  previewScale: computed,
+  isReady: computed,
+  canExport: computed,
+}
+```
+
 ---
 
 ## 7. Konva Integration
@@ -355,31 +393,43 @@ Removed, only dark UI
 
 ## 10. Testing Strategy
 
-### 10.1 Testing Coverage
+### 10.1 Testing Approach
 
-- **Unit Tests (70%)**: Pure functions, utilities, composables
-- **Component Tests (25%)**: Vue components in isolation
-- **Integration Tests (5%)**: Full user workflows
+The application follows a **behavior-driven testing** philosophy, focusing on user interactions, state changes, and business logic rather than implementation details.
 
 ### 10.2 Testing Tools
 
 - **Vitest**: Test framework with Vite integration
 - **@vue/test-utils**: Vue component testing utilities
 - **happy-dom**: Lightweight DOM implementation
-
-### 10.3 Test Coverage
-
-| Category | Target | Current Status |
-|----------|--------|----------------|
-| Overall | 60%+ | ✅ Achieved |
-| Utils | 95%+ | ✅ Achieved |
-| Composables | 80%+ | ✅ Achieved |
-| Components | 70%+ | ✅ Achieved |
-
-**Total Tests**: 350 tests passing
-- All components have dedicated test suites
-- Vitest with @vue/test-utils for component testing
-- Mock components used for integration tests to avoid dependency issues
+- **Coverage**: v8 provider targeting 60%+ coverage for src/ folder only
+
+### 10.3 Test Focus Areas
+
+**What We Test:**
+- User interactions and button clicks
+- State changes via composables
+- Business logic (disabled states, format updates, value calculations)
+- Edge cases and error handling
+- Integration between components
+- Accessibility attributes with user interactions
+- Event emissions with payloads
+
+**What We Don't Test:**
+- CSS classes and styling
+- Layout implementation details (flex, padding, margins)
+- TestId attributes
+- Input attribute presence (min, max, step)
+- Basic DOM structure
+- Simple getters/setters without logic
+
+### 10.4 Coverage Strategy
+
+- **Unit Tests**: Pure functions, utilities, composables
+- **Component Tests**: Vue components focusing on behavior
+- **Integration Tests**: Component interaction workflows
+- All major components have dedicated test suites
+- Mock components used for integration tests to isolate dependencies
 
 ---
 
@@ -402,18 +452,14 @@ export const ORIENTATIONS = {
 
 export const IMAGE_CONSTRAINTS = {
   maxFileSize: 40 * 1024 * 1024, // 40MB
-  minDimension: 800,
   supportedFormats: ['image/jpeg', 'image/png', 'image/webp'],
-  aspectRatioTolerance: 0.05,
 };
 
 export const FRAME_CONSTRAINTS = {
-  minSize: 2000,
-  maxSize: 6000,
-  defaultSize: 3000,
-  minSpacing: 50,
-  maxSpacing: 500,
-  defaultSpacing: 150,
+  minSize: 800,
+  maxSize: 10000,
+  minBorderPercentage: 1,
+  maxBorderPercentage: 25,
 };
 ```
 
@@ -421,7 +467,8 @@ export const FRAME_CONSTRAINTS = {
 
 Key functions:
 - `calculateFrameDimensions()`: Calculate frame width/height based on orientation and aspect ratio
-- `calculateImageLayout()`: Calculate positions for two images
+- `calculateBorderSpacing()`: Calculate border spacing from percentage
+- `calculateImageLayout()`: Calculate positions for two images with border and fixed 20px inner spacing
 - `calculatePreviewScale()`: Calculate scale ratio for responsive preview
 - `calculateScaledDimensions()`: Fit image within container maintaining aspect ratio
 - `calculateCenterOffset()`: Center image within slot
@@ -429,10 +476,12 @@ Key functions:
 ### 11.3 Validation (`utils/validation.js`)
 
 Key functions:
-- `validateImageFile()`: Validate file type and size
+- `validateFile()`: Validate file type and size
+- `validateImageDimensions()`: Validate image meets minimum dimensions
 - `validateFrameSize()`: Validate frame size within constraints
 - `validateSpacing()`: Validate spacing within constraints
-- `isValidHexColor()`: Validate hex color codes
+- `extractValidFilenameChars()`: Extract valid characters from filename (1-10 chars)
+- `generateUuidV1Short()`: Generate 8-character time-based UUID
 
 ---
 
@@ -459,17 +508,16 @@ Key functions:
 - Less boilerplate code
 - Better integration with Vue lifecycle
 
-### 12.3 Color Picker: Native HTML5 + Text Input
+### 12.3 Color Picker: Native HTML5
 
-**Decision**: Use native `input type="color"` with hex text input
+**Decision**: Use native `input type="color"`
 
 **Rationale**:
 - No external dependencies
-- Native OS color picker UI for visual selection
-- Text input allows precise hex color entry
+- Native OS color picker UI
 - Better accessibility
 - Smaller bundle size
-- Dual input method improves UX
+- Direct color selection without additional UI complexity
 
 ### 12.4 Canvas Export: pixelRatio Scaling
 
@@ -492,27 +540,47 @@ Key functions:
 - Clearer visual feedback of current selection
 - Consistent styling with Tailwind utility classes
 
-### 12.6 Responsive Layout: Flexbox
+### 12.6 Responsive Layout: Flexbox with Mobile Slide-up Panel
 
-**Decision**: Use flexbox for responsive layout with mobile-first approach
+**Decision**: Use flexbox for responsive layout with CSS-only mobile panel
 
 **Rationale**:
-- ConfigBar Row 1 & 2: `flex-col` on mobile, `md:flex-row` on desktop
-- ActionBar: `flex-col-reverse` on mobile (Download on top), `sm:flex-row sm:justify-end` on desktop
-- Equal distribution with `flex-1` on child containers
-- Simpler than CSS Grid for this use case
+- **Desktop**: Horizontal layout with sidebar (`flex-row`)
+- **Mobile**: Vertical reverse layout with bottom panel (`flex-col-reverse`)
+- **Mobile Panel**: CSS checkbox hack for slide-up panel without JavaScript
+  - No state management overhead
+  - Pure CSS transitions and transforms
+  - Better performance (no JS event handlers)
+  - Simpler implementation
+- Flexbox simpler than CSS Grid for this use case
 - Better browser support and performance
 
-### 12.7 CSS Organization: Scoped CSS with Tailwind @apply
+### 12.7 CSS Organization: Shared Component Styles
 
-**Decision**: Move repetitive Tailwind classes to scoped CSS using `@apply`
+**Decision**: Centralize common component styles in main.css
 
 **Rationale**:
-- Reduces template clutter
-- Easier to maintain consistent styling
-- Better separation of concerns (structure vs. styling)
-- Improves readability of component templates
-- Allows for semantic class names (.btn-active, .ratio-btn, etc.)
+- DRY principle - single source of truth for shared component styling
+- **Selector buttons**: All selector components share identical button group styles
+  - Classes: `.selector-group`, `.selector-btn`, `.selector-btn-active`, `.selector-btn-inactive`
+  - Used by: OrientationToggle, AspectRatioSelector, FrameSizeSelector, FormatSelector
+- **Range sliders**: Shared slider styling and value label positioning
+  - Used by: BorderSlider, QualitySlider
+- Better maintainability - style changes in one place
+- Reduced code duplication
+- Consistent styling guaranteed across all similar controls
+
+### 12.8 Component Wrapper Pattern: ConfigElement
+
+**Decision**: Create shared ConfigElement wrapper for all configuration controls
+
+**Rationale**:
+- Consistent label and element layout across all controls
+- Single source of truth for configuration control presentation
+- Reduces code duplication in ConfigBar
+- Easier to maintain and update styling
+- Slot-based design allows flexibility while maintaining consistency
+- Separates structure (ConfigElement) from functionality (control components)
 
 ---
 
@@ -595,14 +663,35 @@ Key functions:
 
 ---
 
-**Document Version**: 3.0
-**Last Updated**: 2025-10-10
+**Document Version**: 4.0
+**Last Updated**: 2025-01-24
 **Status**: Current
 
 ---
 
 ## Changelog
 
+### Version 4.0 (2025-01-24)
+- **Major UI Update**: Mobile slide-up settings panel with CSS-only implementation
+  - Documented CSS checkbox hack pattern for mobile panel
+  - Added mobile UX pattern documentation (chevron toggle, slide-up animation)
+  - Updated App.vue to reflect responsive layout changes
+- **New Component**: ConfigElement.vue wrapper for consistent control layout
+  - Added to project structure under `shared/` folder
+  - Documented component wrapper pattern (section 12.8)
+- **Component Updates**:
+  - ConfigBar: Now uses ConfigElement wrapper, single vertical stack layout
+  - Removed: FileNameInput, SpacingInput, FrameSizeInput, BaseInput components
+  - Renamed: QualityInput → QualitySlider
+- **Architecture Diagram**: Updated to reflect ConfigElement and mobile panel pattern
+- **Testing Strategy**: Rewritten to focus on behavior-driven testing approach
+  - Removed specific test counts and coverage percentages
+  - Added "What We Test" vs "What We Don't Test" guidelines
+  - Coverage now targets src/ folder only
+- **CSS Organization**: Documented shared range slider styles alongside selector styles
+- **Responsive Layout**: Updated section 12.6 to document mobile panel decision
+- **Technology Stack**: Updated Tailwind CSS version
+
 ### Version 3.0 (2025-10-10)
 - Updated architecture diagram to reflect ActionBar component separation
 - Added ActionBar.vue component documentation
@@ -613,7 +702,6 @@ Key functions:
 - Updated constants to include FRAME_CONSTRAINTS
 - Added validation functions for frame size and spacing
 - Documented UI refactoring decisions (sections 12.5-12.7)
-- Updated test coverage with current statistics (350 tests)
 - Removed BaseSelect.vue from project structure (no longer used)
 
 ### Version 2.0 (2025-10-09)
diff --git a/package.json b/package.json
index 5e0a840..715eb87 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "erost-framed",
-  "version": "1.1.0",
+  "version": "2.0.0",
   "description": "Canvas-based picture framing application",
   "type": "module",
   "scripts": {
diff --git a/public/manifest.json b/public/manifest.json
index 6a9dd1a..7b1bdd1 100644
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -66,18 +66,39 @@
   "categories": ["photography", "photo"],
   "screenshots": [
     {
-      "src": "/screenshots/framed-wide.png",
-      "sizes": "2328x1164",
+      "src": "/screenshots/desktop-1280x800-landscape.png",
+      "sizes": "1280x800",
       "type": "image/png",
       "form_factor": "wide",
-      "label": "Framed desktop"
+      "label": "Desktop version, landscape frame"
     },
     {
-      "src": "/screenshots/framed-portrait.png",
-      "sizes": "625x1056",
+      "src": "/screenshots/desktop-1280x800-portrait.png",
+      "sizes": "1280x800",
+      "type": "image/png",
+      "form_factor": "wide",
+      "label": "Desktop version, portrait frame"
+    },
+    {
+      "src": "/screenshots/mobile-402x764-portrait.png",
+      "sizes": "402x764",
+      "type": "image/png",
+      "form_factor": "narrow",
+      "label": "Mobile version, portrait frame"
+    },
+    {
+      "src": "/screenshots/mobile-402x764-portrait-settings.png",
+      "sizes": "402x764",
+      "type": "image/png",
+      "form_factor": "narrow",
+      "label": "Mobile version, open settings"
+    },
+    {
+      "src": "/screenshots/mobile-402x764-landscape.png",
+      "sizes": "402x764",
       "type": "image/png",
       "form_factor": "narrow",
-      "label": "Framed mobile"
+      "label": "Mobile version, landscape frame"
     }
   ]
 }
diff --git a/public/screenshots/desktop-1280x800-landscape.png b/public/screenshots/desktop-1280x800-landscape.png
new file mode 100644
index 0000000..16ff56e
Binary files /dev/null and b/public/screenshots/desktop-1280x800-landscape.png differ
diff --git a/public/screenshots/desktop-1280x800-portrait.png b/public/screenshots/desktop-1280x800-portrait.png
new file mode 100644
index 0000000..77da7a2
Binary files /dev/null and b/public/screenshots/desktop-1280x800-portrait.png differ
diff --git a/public/screenshots/framed-portrait.png b/public/screenshots/framed-portrait.png
deleted file mode 100644
index bbd6c01..0000000
Binary files a/public/screenshots/framed-portrait.png and /dev/null differ
diff --git a/public/screenshots/framed-wide.png b/public/screenshots/framed-wide.png
deleted file mode 100644
index b84b2d0..0000000
Binary files a/public/screenshots/framed-wide.png and /dev/null differ
diff --git a/public/screenshots/mobile-402x764-landscape.png b/public/screenshots/mobile-402x764-landscape.png
new file mode 100644
index 0000000..1b3fdc8
Binary files /dev/null and b/public/screenshots/mobile-402x764-landscape.png differ
diff --git a/public/screenshots/mobile-402x764-portrait-settings.png b/public/screenshots/mobile-402x764-portrait-settings.png
new file mode 100644
index 0000000..5c820ef
Binary files /dev/null and b/public/screenshots/mobile-402x764-portrait-settings.png differ
diff --git a/public/screenshots/mobile-402x764-portrait.png b/public/screenshots/mobile-402x764-portrait.png
new file mode 100644
index 0000000..8e5ef6c
Binary files /dev/null and b/public/screenshots/mobile-402x764-portrait.png differ
diff --git a/src/App.vue b/src/App.vue
index af8c86a..e1d86eb 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,69 +3,114 @@
   Picture Frame Creator - Main application layout
 -->
 <template>
-  <div class="min-h-screen bg-gray-900">
-    <!-- Header -->
-    <AppHeader />
+  <div class="min-h-screen bg-gray-900 flex flex-col-reverse md:flex-row overflow-hidden">
+    <!-- Desktop: Left Sidebar with Controls | Mobile: Bottom Action Bar + CSS Slide-up Panel -->
+    <aside
+      ref="asideRef"
+      class="md:w-80 flex flex-col md:border-r md:border-gray-700 md:h-screen relative"
+    >
+      <!-- Hidden checkbox for CSS-only toggle (mobile only) -->
+      <input
+        id="settings-panel-toggle"
+        type="checkbox"
+        class="hidden"
+        data-testid="panel-toggle-checkbox"
+      >
+
+      <!-- Settings Panel Wrapper (chevron + panel move together) -->
+      <div class="settings-panel-wrapper md:flex-1 md:p-4 md:space-y-4 md:overflow-y-auto">
+        <!-- Mobile: Circular Chevron Toggle Button (centered on top border of panel) -->
+        <label
+          for="settings-panel-toggle"
+          class="chevron-toggle md:hidden"
+          data-testid="panel-toggle-button"
+        >
+          <svg
+            class="chevron-icon w-4 h-4 transition-transform duration-300"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+            aria-hidden="true"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M5 15l7-7 7 7"
+            />
+          </svg>
+        </label>
+
+        <!-- Configuration Controls - Slide-up Panel (Mobile) / Sidebar (Desktop) -->
+        <div class="settings-panel">
+          <ConfigBar />
+        </div>
+      </div>
 
-    <!-- Main Content -->
+      <!-- Action Buttons (Mobile) / Bottom Section (Desktop) -->
+      <div
+        class="action-section md:border-t md:border-gray-700 md:p-4 md:space-y-3 md:overflow-y-auto"
+      >
+        <ActionBar
+          :stage="stage"
+          :preview-width="previewWidth"
+        />
+      </div>
+    </aside>
+
+    <!-- Canvas Area -->
     <main
       ref="mainContentRef"
-      class="container mx-auto px-4 py-8 max-w-7xl"
+      class="flex-1 flex items-center justify-center overflow-hidden"
     >
-      <!-- Configuration Bar -->
-      <ConfigBar class="mb-8" />
-
-      <!-- Canvas with Integrated Upload Zones -->
       <CanvasContainer
         ref="canvasContainerRef"
         :preview-width="previewWidth"
         @canvas-ready="handleCanvasReady"
       />
-
-      <!-- Action Bar -->
-      <ActionBar
-        :stage="stage"
-        :preview-width="previewWidth"
-        class="mt-6"
-      />
     </main>
-
-    <!-- Footer -->
-    <footer
-      class="mt-16 py-8 text-center text-sm text-gray-400 border-t border-gray-700"
-    >
-      <p>
-        Framed &copy; 2025
-        <span class="mx-2">•</span>
-        Built by <a
-          href="https://erost.net"
-          target="_blank"
-        >erost.net</a>
-      </p>
-    </footer>
   </div>
 </template>
 
 <script setup>
-import { ref, onMounted, onUnmounted } from 'vue';
+import { ref, onMounted, onUnmounted, watch } from 'vue';
 import { PREVIEW_CONSTRAINTS } from '@/utils/constants';
-import AppHeader from '@/components/layout/AppHeader.vue';
+import { useFrameConfig } from '@/composables/useFrameConfig';
 import ConfigBar from '@/components/layout/ConfigBar.vue';
 import CanvasContainer from '@/components/layout/CanvasContainer.vue';
 import ActionBar from '@/components/layout/ActionBar.vue';
 
 /**
  * Root application component
- * Integrates all major components
+ * Integrates all major components with responsive, space-efficient layout
+ *
+ * Layout structure:
+ * - Desktop (≥768px): Horizontal flexbox with left sidebar (320px, full height)
+ *   and flex canvas area
+ *   - Left sidebar (scrollable sections):
+ *     - ConfigBar section: Configuration controls
+ *     - ActionBar section: Output settings + full-width action buttons
+ *   - Right area: Canvas taking maximum available space
+ *   - No header or footer for maximum space efficiency
+ *
+ * - Mobile (<768px): Vertical reverse flexbox (column-reverse)
+ *   - Canvas: Top area taking remaining space
+ *   - Controls: Bottom area (2 rows):
+ *     - Row 1 (ConfigBar): Horizontal scrollable configuration controls
+ *     - Row 2 (ActionBar): Action buttons sharing width equally
+ *   - Uses flex-col-reverse to position controls at bottom while maintaining proper document flow
  */
 
 const canvasContainerRef = ref(null);
 const mainContentRef = ref(null);
+const asideRef = ref(null);
 const stage = ref(null);
 const previewWidth = ref(PREVIEW_CONSTRAINTS.defaultWidth);
 let resizeObserver = null;
 let resizeTimeout = null;
 
+const { frameWidth, frameHeight } = useFrameConfig();
+
 /**
  * Handle canvas ready event
  * Stores the Konva stage reference needed for downloads
@@ -75,27 +120,60 @@ const handleCanvasReady = (konvaStage) => {
 };
 
 /**
- * Update preview width based on main content container size
- * Shared between ConfigBar and CanvasContainer for consistent sizing
+ * Update preview width based on window size and aside dimensions
+ * Ensures canvas fits within available space by scaling to fit both width and height
  */
 const updatePreviewWidth = () => {
-  if (mainContentRef.value) {
-    // Get container width
-    const containerWidth = mainContentRef.value.clientWidth;
+  if (frameWidth.value && frameHeight.value) {
+    // Use window dimensions for accurate viewport size
+    const windowWidth = window.innerWidth;
+    const windowHeight = window.innerHeight;
+    const isDesktop = window.matchMedia('(min-width: 768px)').matches;
 
-    // Account for max-w-[1024px] constraint and padding
-    const maxWidth = 1024;
-    const effectiveWidth = Math.min(containerWidth, maxWidth);
+    // Start with full window dimensions
+    let availableWidth = windowWidth;
+    let availableHeight = windowHeight;
 
-    // Account for padding (px-4 = 16px on each side = 32px total)
-    // and CanvasContainer padding (p-6 = 24px on each side = 48px total)
-    const availableWidth = effectiveWidth - 32 - 48;
+    // Subtract aside dimensions
+    if (isDesktop && asideRef.value) {
+      // Desktop: aside is on the left, subtract its width
+      const asideWidth = asideRef.value.clientWidth;
+      availableWidth -= asideWidth;
+    } else if (!isDesktop && asideRef.value) {
+      // Mobile: aside is at the bottom, subtract its height
+      const asideHeight = asideRef.value.clientHeight;
+      availableHeight -= asideHeight;
+    }
+
+    // Account for FrameCanvas padding: p-4 (16px on all sides, both desktop and mobile)
+    const paddingHorizontal = 32; // left + right (16px × 2)
+    const paddingVertical = 32;   // top + bottom (16px × 2)
+
+    availableWidth -= paddingHorizontal;
+    availableHeight -= paddingVertical;
+
+    // Calculate scale factors for both dimensions
+    const scaleByWidth = availableWidth / frameWidth.value;
+    const scaleByHeight = availableHeight / frameHeight.value;
+
+    // Use the smaller scale to ensure both dimensions fit
+    const scale = Math.min(scaleByWidth, scaleByHeight);
+
+    // Calculate final width based on scale
+    const scaledWidth = frameWidth.value * scale;
 
     // Cap at maximum width for canvas
-    previewWidth.value = Math.min(availableWidth, PREVIEW_CONSTRAINTS.defaultWidth);
+    previewWidth.value = Math.min(scaledWidth, PREVIEW_CONSTRAINTS.defaultWidth);
   }
 };
 
+/**
+ * Watch for frame dimension changes and recalculate preview width
+ */
+watch([frameWidth, frameHeight], () => {
+  updatePreviewWidth();
+});
+
 /**
  * Set up responsive sizing on mount
  */
@@ -104,7 +182,7 @@ onMounted(() => {
   updatePreviewWidth();
 
   // Use ResizeObserver for efficient container size tracking
-  if (typeof ResizeObserver !== 'undefined' && mainContentRef.value) {
+  if (typeof ResizeObserver !== 'undefined') {
     resizeObserver = new ResizeObserver(() => {
       // Use requestAnimationFrame to batch updates and prevent ResizeObserver loop
       if (resizeTimeout) {
@@ -115,7 +193,16 @@ onMounted(() => {
         resizeTimeout = null;
       });
     });
-    resizeObserver.observe(mainContentRef.value);
+
+    // Observe main content area
+    if (mainContentRef.value) {
+      resizeObserver.observe(mainContentRef.value);
+    }
+
+    // Observe aside (mobile bottom bar height can change)
+    if (asideRef.value) {
+      resizeObserver.observe(asideRef.value);
+    }
   } else {
     // Fallback to window resize event
     window.addEventListener('resize', updatePreviewWidth);
@@ -136,3 +223,85 @@ onUnmounted(() => {
   }
 });
 </script>
+
+<style scoped>
+/* Mobile slide-up panel - CSS only with checkbox hack */
+@media (max-width: 767px) {
+  /* Aside container for proper stacking */
+  aside {
+    display: flex;
+    flex-direction: column-reverse; /* Action bar at bottom, panel slides from below */
+  }
+
+  /* Action section stays at bottom */
+  .action-section {
+    position: relative;
+    z-index: 60;
+    background-color: rgb(31 41 55); /* bg-gray-800 */
+  }
+
+  /* Settings panel wrapper - grows from 0 to 33vh */
+  .settings-panel-wrapper {
+    position: absolute;
+    bottom: 100%; /* Position above action section */
+    left: 0;
+    right: 0;
+    height: 0; /* Start collapsed */
+    overflow: visible; /* Allow chevron to show */
+    transition: height 0.3s ease-in-out;
+    z-index: 70;
+  }
+
+  /* Circular chevron toggle button - attached to wrapper bottom */
+  .chevron-toggle {
+    position: absolute;
+    top: -16px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 32px;
+    height: 32px;
+    background-color: rgb(31 41 55); /* bg-gray-800 */
+    border: 2px solid rgb(55 65 81); /* border-gray-700 */
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    z-index: 80; /* Higher than wrapper */
+    transition: background-color 0.2s, border-color 0.2s;
+  }
+
+  .chevron-toggle:hover {
+    background-color: rgb(55 65 81); /* bg-gray-700 */
+    border-color: rgb(75 85 99); /* border-gray-600 */
+  }
+
+  /* Settings panel content */
+  .settings-panel {
+    width: 100%;
+    height: 100%; /* Fixed height for content */
+    background-color: rgb(31 41 55); /* bg-gray-800 */
+    border-top: 1px solid rgb(55 65 81); /* border-gray-700 */
+    overflow-y: auto;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    padding-top: 1rem;
+    overflow: hidden;
+  }
+
+  /* When checkbox is checked, expand wrapper to show panel */
+  #settings-panel-toggle:checked ~ .settings-panel-wrapper {
+    height: 33vh;
+  }
+
+  #settings-panel-toggle:checked ~ .settings-panel-wrapper > .settings-panel {
+    padding-bottom: 1rem;
+    overflow-y: auto;
+  }
+
+  /* Rotate chevron when panel is open */
+  #settings-panel-toggle:checked ~ .settings-panel-wrapper .chevron-icon {
+    transform: rotate(180deg);
+  }
+}
+</style>
diff --git a/src/assets/styles/main.css b/src/assets/styles/main.css
index 9506d6c..4279b33 100644
--- a/src/assets/styles/main.css
+++ b/src/assets/styles/main.css
@@ -36,4 +36,112 @@
     @apply bg-gray-50 dark:bg-gray-700;
     @apply border-b border-gray-200 dark:border-gray-600;
   }
+
+  /**
+   * Shared button group selector styles
+   * Used by: OrientationToggle, AspectRatioSelector, FrameSizeSelector, FormatSelector
+   */
+
+  /* Container for button group */
+  .selector-group {
+    @apply flex w-full rounded-lg border border-gray-600 p-1 bg-gray-800;
+  }
+
+  /* Base button styles for selector buttons */
+  .selector-btn {
+    @apply flex flex-1 items-center justify-center px-3 py-2 text-sm font-medium rounded-md;
+    @apply focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 whitespace-nowrap;
+    @apply transition-colors;
+  }
+
+  /* Active button state (currently selected option) */
+  .selector-btn-active {
+    @apply bg-gray-700 text-blue-400 shadow-sm;
+  }
+
+  /* Inactive button state (non-selected options) */
+  .selector-btn-inactive {
+    @apply text-gray-300 hover:text-gray-100 hover:bg-gray-700 cursor-pointer;
+  }
+
+  /**
+   * Shared range slider styles
+   * Used by: QualitySlider, BorderSlider
+   */
+
+  /* Range input with value label in thumb */
+  .range-input-with-value {
+    @apply w-full appearance-none cursor-pointer bg-transparent;
+    @apply focus:outline-none;
+    height: 32px; /* Increased height to accommodate squared thumb */
+  }
+
+  .range-input-with-value::-webkit-slider-thumb {
+    @apply appearance-none rounded cursor-pointer opacity-0;
+    width: 32px;
+    height: 32px;
+  }
+
+  .range-input-with-value::-moz-range-thumb {
+    @apply rounded border-0 cursor-pointer opacity-0;
+    width: 32px;
+    height: 32px;
+  }
+
+  .range-input-with-value::-webkit-slider-runnable-track {
+    @apply w-full h-2 rounded-lg;
+    @apply bg-gray-200 dark:bg-gray-600;
+  }
+
+  .range-input-with-value::-moz-range-track {
+    @apply w-full h-2 rounded-lg;
+    @apply bg-gray-200 dark:bg-gray-600;
+  }
+
+  /* Value label that appears as thumb */
+  .range-value-label {
+    @apply absolute pointer-events-none;
+    @apply flex items-center justify-center;
+    @apply bg-blue-600 dark:bg-blue-500 text-white;
+    @apply rounded font-medium text-xs;
+    @apply transition-colors;
+    width: 32px;
+    height: 32px;
+    top: 0px;
+  }
+
+  .range-input-with-value:hover + .range-value-label {
+    @apply bg-blue-700 dark:bg-blue-600;
+  }
+
+  .range-input-with-value:focus + .range-value-label {
+    @apply ring-2 ring-blue-500 ring-offset-2;
+  }
+
+  .range-input-with-value:disabled + .range-value-label {
+    @apply opacity-50 cursor-not-allowed;
+  }
+
+  /**
+   * Shared action button styles
+   * Used by: DownloadButton, ResetButton
+   */
+
+  /* Base action button styles (common layout and interaction) */
+  .action-btn {
+    @apply w-full inline-flex items-center justify-center;
+    @apply font-medium rounded-lg transition-colors;
+    @apply focus:outline-none focus:ring-2 focus:ring-offset-2;
+    @apply px-4 py-2 text-base cursor-pointer;
+  }
+
+  /* Primary action button variant (blue) */
+  .action-btn-primary {
+    @apply bg-blue-500 text-white hover:bg-blue-600 focus:ring-blue-500;
+  }
+
+  /* Secondary action button variant (gray) */
+  .action-btn-secondary {
+    @apply bg-gray-700 text-gray-100 hover:bg-gray-600 focus:ring-gray-500;
+  }
 }
diff --git a/src/components/canvas/FrameCanvas.vue b/src/components/canvas/FrameCanvas.vue
index ba2a883..cad9c70 100644
--- a/src/components/canvas/FrameCanvas.vue
+++ b/src/components/canvas/FrameCanvas.vue
@@ -87,7 +87,7 @@
                 />
               </svg>
               <p class="text-sm font-medium text-gray-300">
-                {{ orientation === 'portrait' ? 'Top' : 'Left' }} Image
+                {{ orientation === ORIENTATIONS.PORTRAIT ? 'Top' : 'Left' }} Image
               </p>
               <p class="text-xs text-gray-400 mt-1">
                 Click or drop
@@ -158,7 +158,7 @@
                 />
               </svg>
               <p class="text-sm font-medium text-gray-300">
-                {{ orientation === 'portrait' ? 'Bottom' : 'Right' }} Image
+                {{ orientation === ORIENTATIONS.PORTRAIT ? 'Bottom' : 'Right' }} Image
               </p>
               <p class="text-xs text-gray-400 mt-1">
                 Click or drop
@@ -228,7 +228,8 @@ import { ref, computed, onMounted, watch, toRef } from 'vue';
 import { useCanvasRenderer } from '@/composables/useCanvasRenderer';
 import { useImageState } from '@/composables/useImageState';
 import { useFrameConfig } from '@/composables/useFrameConfig';
-import { PREVIEW_CONSTRAINTS } from '@/utils/constants';
+import { PREVIEW_CONSTRAINTS, ORIENTATIONS } from '@/utils/constants';
+import { logError } from '@/utils/logger';
 
 /**
  * FrameCanvas component
@@ -276,28 +277,44 @@ const {
 const { images, addImage, removeImage: removeImageFromState } = useImageState();
 const { orientation } = useFrameConfig();
 
+/**
+ * Create an image element from a data URL
+ * @param {string} dataUrl - The data URL to load
+ * @returns {Promise<HTMLImageElement>} Promise that resolves with the loaded image
+ */
+const createImageElement = (dataUrl) => {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.onload = () => resolve(img);
+    img.onerror = () => reject(new Error('Failed to load image'));
+    img.src = dataUrl;
+  });
+};
+
 /**
  * Load image elements from dataUrls
  */
-watch(() => images.value[0], (newImage) => {
+watch(() => images.value[0], async (newImage) => {
   if (newImage && newImage.dataUrl) {
-    const img = new Image();
-    img.onload = () => {
-      image1Element.value = img;
-    };
-    img.src = newImage.dataUrl;
+    try {
+      image1Element.value = await createImageElement(newImage.dataUrl);
+    } catch (error) {
+      logError('Failed to load image 1:', error);
+      image1Element.value = null;
+    }
   } else {
     image1Element.value = null;
   }
 }, { immediate: true });
 
-watch(() => images.value[1], (newImage) => {
+watch(() => images.value[1], async (newImage) => {
   if (newImage && newImage.dataUrl) {
-    const img = new Image();
-    img.onload = () => {
-      image2Element.value = img;
-    };
-    img.src = newImage.dataUrl;
+    try {
+      image2Element.value = await createImageElement(newImage.dataUrl);
+    } catch (error) {
+      logError('Failed to load image 2:', error);
+      image2Element.value = null;
+    }
   } else {
     image2Element.value = null;
   }
@@ -406,7 +423,7 @@ const processFile = async (file, position) => {
   try {
     await addImage(file, position);
   } catch (error) {
-    console.error('Image upload error:', error);
+    logError('Image upload error:', error);
   }
 };
 
diff --git a/src/components/canvas/ImageUploadZone.vue b/src/components/canvas/ImageUploadZone.vue
index 01ea6dc..3cbbd62 100644
--- a/src/components/canvas/ImageUploadZone.vue
+++ b/src/components/canvas/ImageUploadZone.vue
@@ -46,7 +46,7 @@
         Click or drag & drop
       </p>
       <p class="text-xs text-gray-400 mt-2">
-        JPEG, PNG, or WebP (max 10MB)
+        JPEG, PNG, or WebP (max {{ maxFileSizeMB }}MB)
       </p>
     </div>
 
@@ -95,6 +95,7 @@
 <script setup>
 import { ref, computed } from 'vue';
 import { useImageState } from '@/composables/useImageState';
+import { IMAGE_CONSTRAINTS } from '@/utils/constants';
 
 /**
  * ImageUploadZone component
@@ -143,6 +144,13 @@ const zoneClasses = computed(() => ({
   'border-red-400': error.value,
 }));
 
+/**
+ * Get file size in MB for display
+ */
+const maxFileSizeMB = computed(() => {
+  return Math.round(IMAGE_CONSTRAINTS.maxFileSize / (1024 * 1024));
+});
+
 /**
  * Handle click to trigger file input
  */
diff --git a/src/components/controls/AspectRatioSelector.vue b/src/components/controls/AspectRatioSelector.vue
index b1a0b45..d143d98 100644
--- a/src/components/controls/AspectRatioSelector.vue
+++ b/src/components/controls/AspectRatioSelector.vue
@@ -5,8 +5,7 @@
 <template>
   <div :data-testid="testId">
     <div
-      class="flex w-full rounded-lg border border-gray-600
-             p-1 bg-gray-800"
+      class="selector-group"
       role="group"
       aria-label="Frame aspect ratio"
     >
@@ -15,10 +14,10 @@
         :key="ratio"
         type="button"
         :class="[
-          'ratio-btn',
+          'selector-btn',
           {
-            'btn-active': aspectRatio === ratio,
-            'btn-inactive': aspectRatio !== ratio
+            'selector-btn-active': aspectRatio === ratio,
+            'selector-btn-inactive': aspectRatio !== ratio
           }
         ]"
         :aria-pressed="aspectRatio === ratio"
@@ -32,7 +31,6 @@
 </template>
 
 <script setup>
-import { computed } from 'vue';
 import { useFrameConfig } from '@/composables/useFrameConfig';
 import { ASPECT_RATIOS } from '@/utils/constants';
 
@@ -57,9 +55,7 @@ const { aspectRatio, updateAspectRatio } = useFrameConfig();
  * Get aspect ratio options from constants
  * Returns array of ratio strings (e.g., ['3:2', '4:3', '5:4', '16:9'])
  */
-const aspectRatioOptions = computed(() => {
-  return Object.keys(ASPECT_RATIOS);
-});
+const aspectRatioOptions = Object.keys(ASPECT_RATIOS);
 
 /**
  * Handle aspect ratio selection
@@ -69,33 +65,3 @@ const handleSelect = (ratio) => {
   updateAspectRatio(ratio);
 };
 </script>
-
-<style scoped>
-@import "tailwindcss" reference;
-
-/**
- * Base button styles for aspect ratio selector buttons
- * Contains all common styling applied to all ratio buttons
- */
-.ratio-btn {
-  @apply flex flex-1 items-center justify-center px-3 py-2 text-sm font-medium rounded-md;
-  @apply focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 whitespace-nowrap;
-  @apply transition-colors;
-}
-
-/**
- * Active button state
- * Applied to the currently selected aspect ratio
- */
-.btn-active {
-  @apply bg-gray-700 text-blue-400 shadow-sm;
-}
-
-/**
- * Inactive button state
- * Applied to non-selected aspect ratios
- */
-.btn-inactive {
-  @apply text-gray-300 hover:text-gray-100 hover:bg-gray-700 cursor-pointer;
-}
-</style>
diff --git a/src/components/controls/BorderSlider.vue b/src/components/controls/BorderSlider.vue
new file mode 100644
index 0000000..5335aa0
--- /dev/null
+++ b/src/components/controls/BorderSlider.vue
@@ -0,0 +1,69 @@
+<!--
+  BorderSlider Component
+  Range slider for border spacing as percentage of frame size
+-->
+<template>
+  <div class="relative">
+    <input
+      id="border"
+      v-model.number="borderPercentage"
+      type="range"
+      name="border"
+      :min="FRAME_CONSTRAINTS.minBorderPercentage"
+      :max="FRAME_CONSTRAINTS.maxBorderPercentage"
+      step="1"
+      class="range-input-with-value"
+      :data-testid="`${testId}-input`"
+      @input="handleInput"
+    >
+    <div
+      class="range-value-label"
+      :style="{
+        left: `calc(${
+          (borderPercentage - FRAME_CONSTRAINTS.minBorderPercentage)
+          / (FRAME_CONSTRAINTS.maxBorderPercentage - FRAME_CONSTRAINTS.minBorderPercentage)
+          * 100
+        }% ${LABEL_OFFSET})`
+      }"
+      :data-testid="`${testId}-value-label`"
+    >
+      {{ borderPercentage }}
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useFrameConfig } from '@/composables/useFrameConfig';
+import { FRAME_CONSTRAINTS } from '@/utils/constants';
+
+/**
+ * BorderSlider component
+ * Allows users to adjust border spacing as a percentage of frame size (1-25%)
+ * Border percentage applies to both sides of the frame
+ */
+
+defineProps({
+  /**
+   * Test ID for testing
+   */
+  testId: {
+    type: String,
+    default: 'border-slider',
+  },
+});
+
+/**
+ * Offset for positioning the range value label
+ * This centers the label above the slider thumb
+ */
+const LABEL_OFFSET = '-16px';
+
+const { borderPercentage, updateBorderPercentage } = useFrameConfig();
+
+/**
+ * Handle input event to update border percentage
+ */
+const handleInput = (event) => {
+  updateBorderPercentage(Number(event.target.value));
+};
+</script>
diff --git a/src/components/controls/ColorPicker.vue b/src/components/controls/ColorPicker.vue
index ef58afc..ee67467 100644
--- a/src/components/controls/ColorPicker.vue
+++ b/src/components/controls/ColorPicker.vue
@@ -1,54 +1,87 @@
 <!--
   ColorPicker Component
-  Color picker using native HTML input type="color"
+  Button group selector with preset colors (White, Black) and custom color picker
 -->
 <template>
-  <div
-    class="flex flex-col gap-1"
-    :data-testid="testId"
-  >
-    <label
-      for="background-color"
-      class="text-sm font-medium text-gray-300"
+  <div :data-testid="testId">
+    <div
+      class="selector-group"
+      role="group"
+      aria-label="Frame background color"
     >
-      Frame Color
-    </label>
-
-    <div class="flex items-center gap-3">
-      <input
-        id="background-color"
-        v-model="localColor"
-        type="color"
-        class="color-picker-swatch"
-        data-testid="color-picker-input"
-        @change="handleColorChange"
+      <!-- White preset -->
+      <button
+        type="button"
+        :class="[
+          'selector-btn',
+          {
+            'selector-btn-active': isWhiteActive,
+            'selector-btn-inactive': !isWhiteActive
+          }
+        ]"
+        :aria-pressed="isWhiteActive"
+        data-testid="color-white"
+        @click="handleSelectWhite"
       >
-
-      <input
-        v-model="colorInput"
-        type="text"
-        class="color-text-input"
-        placeholder="#FFFFFF"
-        maxlength="7"
-        data-testid="color-input"
-        @input="handleManualInput"
-        @blur="handleManualBlur"
+        <div
+          class="color-swatch"
+          :style="{ backgroundColor: COLOR_PRESETS.WHITE, border: '1px solid #4B5563' }"
+        />
+      </button>
+
+      <!-- Black preset -->
+      <button
+        type="button"
+        :class="[
+          'selector-btn',
+          {
+            'selector-btn-active': isBlackActive,
+            'selector-btn-inactive': !isBlackActive
+          }
+        ]"
+        :aria-pressed="isBlackActive"
+        data-testid="color-black"
+        @click="handleSelectBlack"
+      >
+        <div
+          class="color-swatch"
+          :style="{ backgroundColor: COLOR_PRESETS.BLACK }"
+        />
+      </button>
+
+      <!-- Custom color picker -->
+      <div
+        :class="[
+          'custom-color-wrapper',
+          'selector-btn',
+          {
+            'selector-btn-active': isCustomActive,
+            'selector-btn-inactive': !isCustomActive
+          }
+        ]"
+        @click="handleSelectCustom"
       >
+        <input
+          v-model="customColor"
+          type="color"
+          class="custom-color-input color-swatch"
+          :aria-pressed="isCustomActive"
+          data-testid="color-custom"
+          @change="handleCustomColorChange"
+        >
+      </div>
     </div>
-
-    <span class="text-sm text-gray-400">
-      (hex format)
-    </span>
   </div>
 </template>
 
 <script setup>
-import { ref, watch } from 'vue';
+import { computed, ref, watch } from 'vue';
 import { useFrameConfig } from '@/composables/useFrameConfig';
+import { COLOR_PRESETS, COLOR_MODES } from '@/utils/constants';
 
 /**
  * ColorPicker component
- * Uses native HTML color input for color selection
+ * Provides preset color options (White, Black) and custom color selection
  */
 
 defineProps({
@@ -63,96 +96,132 @@ defineProps({
 
 const { backgroundColor, updateBackgroundColor } = useFrameConfig();
 
-const localColor = ref(backgroundColor.value);
-const colorInput = ref(backgroundColor.value);
+// Track which mode is selected using COLOR_MODES constants
+const selectedMode = ref(COLOR_MODES.WHITE);
+// Custom color state for the color input (defaults to gray)
+const customColor = ref(COLOR_PRESETS.GRAY);
 
 /**
- * Handle color change from native color picker
+ * Check if white preset is active
  */
-const handleColorChange = (event) => {
-  const value = event.target.value.toUpperCase();
-  updateBackgroundColor(value);
-  colorInput.value = value;
+const isWhiteActive = computed(() => selectedMode.value === COLOR_MODES.WHITE);
+
+/**
+ * Check if black preset is active
+ */
+const isBlackActive = computed(() => selectedMode.value === COLOR_MODES.BLACK);
+
+/**
+ * Check if custom mode is active
+ */
+const isCustomActive = computed(() => selectedMode.value === COLOR_MODES.CUSTOM);
+
+/**
+ * Handle white preset selection
+ */
+const handleSelectWhite = () => {
+  selectedMode.value = COLOR_MODES.WHITE;
+  updateBackgroundColor(COLOR_PRESETS.WHITE);
 };
 
 /**
- * Handle manual color input
+ * Handle black preset selection
  */
-const handleManualInput = (event) => {
-  let value = event.target.value;
+const handleSelectBlack = () => {
+  selectedMode.value = COLOR_MODES.BLACK;
+  updateBackgroundColor(COLOR_PRESETS.BLACK);
+};
 
-  // Auto-prepend # if not present
-  if (value && !value.startsWith('#')) {
-    value = '#' + value;
-    colorInput.value = value;
-  }
+/**
+ * Handle custom mode selection (when clicking the custom button)
+ */
+const handleSelectCustom = () => {
+  selectedMode.value = COLOR_MODES.CUSTOM;
 };
 
 /**
- * Handle manual color input blur
+ * Handle custom color selection from color picker
+ * Updates both the custom color state and the background color
  */
-const handleManualBlur = () => {
-  const value = colorInput.value.toUpperCase();
-
-  // Validate hex color format
-  const hexPattern = /^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/;
-  if (hexPattern.test(value)) {
-    updateBackgroundColor(value);
-    localColor.value = value;
-  } else {
-    // Reset to current valid color if invalid
-    colorInput.value = backgroundColor.value;
-    localColor.value = backgroundColor.value;
-  }
+const handleCustomColorChange = (event) => {
+  const value = event.target.value.toUpperCase();
+  selectedMode.value = COLOR_MODES.CUSTOM;
+  customColor.value = value;
+  updateBackgroundColor(value);
 };
 
 /**
- * Watch for background color changes from other sources
+ * Watch backgroundColor changes from external sources
+ * (e.g., reset button) to determine which mode should be active
  */
 watch(backgroundColor, (newColor) => {
-  if (colorInput.value !== newColor) {
-    colorInput.value = newColor;
-    localColor.value = newColor;
+  if (newColor === COLOR_PRESETS.WHITE) {
+    selectedMode.value = COLOR_MODES.WHITE;
+  } else if (newColor === COLOR_PRESETS.BLACK) {
+    selectedMode.value = COLOR_MODES.BLACK;
+  } else {
+    selectedMode.value = COLOR_MODES.CUSTOM;
+    customColor.value = newColor;
+  }
+});
+
+/**
+ * Watch selectedMode changes to update background color for custom mode
+ */
+watch(selectedMode, (mode) => {
+  if (mode === COLOR_MODES.CUSTOM) {
+    updateBackgroundColor(customColor.value);
   }
 });
 </script>
 
 <style scoped>
 @import "tailwindcss" reference;
+/**
+ * Color swatch inside button
+ * Small padding so selector-btn-active background is visible around it
+ */
+.color-swatch {
+  width: 100%;
+  height: 32px;
+  border-radius: 4px;
+  margin: 3px;
+}
 
 /**
- * Color picker swatch
- * Sized to match BaseInput height (py-2 = ~40px)
+ * Custom color wrapper to match button width in selector group
  */
-.color-picker-swatch {
-  @apply w-10 h-10 border border-gray-600 rounded-lg cursor-pointer;
-  @apply focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2;
-  -webkit-appearance: none;
-  padding: 0;
+.custom-color-wrapper {
+  flex: 1;
 }
 
 /**
- * Color text input
- * Matches BaseInput styling
+ * Style the custom color input to look like a selector button
+ * Apply shared selector button classes
  */
-.color-text-input {
-  @apply flex-1 px-3 py-2 border border-gray-600 rounded-lg;
-  @apply bg-gray-800 text-gray-100 text-sm;
-  @apply focus:ring-2 focus:ring-blue-500 focus:border-blue-500;
+.custom-color-input {
+  /* Inherit selector button styles */
+  cursor: pointer;
+  border: none;
+
+  /* Remove default browser styling */
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
 }
 
-/* Remove default color input styling on some browsers */
-input[type="color"]::-webkit-color-swatch-wrapper {
-  padding: 2px;
+/* Style the color swatch inside the input */
+.custom-color-input::-webkit-color-swatch-wrapper {
+  padding: 0;
 }
 
-input[type="color"]::-webkit-color-swatch {
+.custom-color-input::-webkit-color-swatch {
   border: none;
-  border-radius: 6px;
+  border-radius: 4px;
 }
 
-input[type="color"]::-moz-color-swatch {
+.custom-color-input::-moz-color-swatch {
   border: none;
-  border-radius: 6px;
+  border-radius: 4px;
 }
 </style>
diff --git a/src/components/controls/DownloadButton.vue b/src/components/controls/DownloadButton.vue
index afa5fb9..1e6c6e5 100644
--- a/src/components/controls/DownloadButton.vue
+++ b/src/components/controls/DownloadButton.vue
@@ -4,13 +4,9 @@
 -->
 <template>
   <button
-    class="
-      inline-flex items-center justify-center font-medium rounded-lg transition-colors
-      focus:outline-none focus:ring-2 focus:ring-offset-2 bg-blue-500 text-white hover:bg-blue-600
-      focus:ring-blue-500 px-4 py-2 text-base
-    "
-    :class="{'opacity-50 cursor-not-allowed': disabled || loading}"
-    :disabled="disabled || loading"
+    class="action-btn action-btn-primary"
+    :class="{'opacity-50 cursor-not-allowed': !canExport || loading}"
+    :disabled="!canExport || loading"
     :aria-busy="loading"
     :data-testid="testId"
     @click="handleDownload"
@@ -29,18 +25,23 @@
         d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
       />
     </svg>
-    Download
+    Save
   </button>
 </template>
 
 <script setup>
-import { ref, computed, toRef } from 'vue';
+import { ref, toRef } from 'vue';
 import { useCanvasRenderer } from '@/composables/useCanvasRenderer';
+import { logError } from '@/utils/logger';
 
 /**
  * DownloadButton component
  * Downloads the rendered canvas as an image file
  * Disabled when images are not uploaded
+ *
+ * Button takes full width of container:
+ * - Desktop: Full width of sidebar
+ * - Mobile: Equal share with Reset button
  */
 
 const props = defineProps({
@@ -60,14 +61,6 @@ const props = defineProps({
     required: true,
   },
 
-  /**
-   * Download filename
-   */
-  filename: {
-    type: String,
-    default: 'framed-image',
-  },
-
   /**
    * Test ID for testing
    */
@@ -83,14 +76,6 @@ const { canExport, downloadImage } = useCanvasRenderer({
 
 const loading = ref(false);
 
-/**
- * Check if download button should be disabled
- * Disabled when images are not uploaded or during download
- */
-const disabled = computed(() => {
-  return !canExport.value;
-});
-
 /**
  * Handle download action
  */
@@ -103,11 +88,10 @@ const handleDownload = () => {
 
   try {
     downloadImage(
-      props.stage,
-      props.filename
+      props.stage
     );
   } catch (error) {
-    console.error('Download failed:', error);
+    logError('Download failed:', error);
   } finally {
     loading.value = false;
   }
diff --git a/src/components/controls/FileNameInput.vue b/src/components/controls/FileNameInput.vue
deleted file mode 100644
index 21416f9..0000000
--- a/src/components/controls/FileNameInput.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<!--
-  FileNameInput Component
-  Desidered filename for download with validation
--->
-<template>
-  <BaseInput
-    v-model="fileName"
-    type="text"
-    label="Filename"
-    :error="validationError"
-    :test-id="testId"
-  />
-</template>
-
-<script setup>
-import { computed } from 'vue';
-import BaseInput from '@/components/shared/BaseInput.vue';
-import { validateFileName } from '@/utils/validation';
-import { useCanvasRenderer } from '@/composables/useCanvasRenderer';
-
-defineProps({
-  /**
-   * Test ID for testing
-   */
-  testId: {
-    type: String,
-    default: 'file-name-input',
-  },
-});
-
-const { fileName } = useCanvasRenderer();
-
-const validationError = computed(() => {
-  const result = validateFileName(fileName.value);
-  return result.error || '';
-});
-
-</script>
\ No newline at end of file
diff --git a/src/components/controls/FormatSelector.vue b/src/components/controls/FormatSelector.vue
index 6332e8d..851e92e 100644
--- a/src/components/controls/FormatSelector.vue
+++ b/src/components/controls/FormatSelector.vue
@@ -1,32 +1,32 @@
 <!--
   FormatSelector Component
-  Select image export format (PNG, JPEG)
+  Button group selector for image export format (PNG, JPEG, WebP)
 -->
 <template>
-  <div class="flex flex-col gap-1">
-    <label 
-      for="format" 
-      class="text-sm font-medium text-gray-300"
+  <div :data-testid="testId">
+    <div
+      class="selector-group"
+      role="group"
+      aria-label="Export format"
     >
-      Format
-    </label>
-    <select
-      id="format"
-      v-model="format"
-      class="px-3 py-2 bg-gray-700 text-gray-100 rounded cursor-pointer h-[42px]
-            focus:ring-2 focus:ring-blue-400 focus:outline-none 
-            hover:bg-gray-600 appearance-none"
-      :data-testid="testId"
-      @change="handleFormatChange"
-    >
-      <option
+      <button
         v-for="fmt in IMAGE_FORMATS"
         :key="fmt.mimeType"
-        :value="fmt.mimeType"
+        type="button"
+        :class="[
+          'selector-btn',
+          {
+            'selector-btn-active': format === fmt.mimeType,
+            'selector-btn-inactive': format !== fmt.mimeType
+          }
+        ]"
+        :aria-pressed="format === fmt.mimeType"
+        :data-testid="`format-${fmt.extension}`"
+        @click="handleSelect(fmt.mimeType)"
       >
-        .{{ fmt.extension }}
-      </option>
-    </select>
+        {{ fmt.label }}
+      </button>
+    </div>
   </div>
 </template>
 
@@ -34,6 +34,11 @@
 import { useCanvasRenderer } from '@/composables/useCanvasRenderer';
 import { IMAGE_FORMATS } from '@/utils/constants';
 
+/**
+ * FormatSelector component
+ * Allows users to select the export format from predefined options using a button group
+ */
+
 defineProps({
   /**
    * Test ID for testing
@@ -47,10 +52,10 @@ defineProps({
 const { format, updateFormat } = useCanvasRenderer();
 
 /**
- * Handle format change
- * @param {Event} event - Change event
+ * Handle format selection
+ * Updates the canvas renderer with the selected format
  */
-const handleFormatChange = (event) => {
-  updateFormat(event.target.value);
+const handleSelect = (mimeType) => {
+  updateFormat(mimeType);
 };
 </script>
diff --git a/src/components/controls/FrameSizeInput.vue b/src/components/controls/FrameSizeInput.vue
deleted file mode 100644
index 3c66819..0000000
--- a/src/components/controls/FrameSizeInput.vue
+++ /dev/null
@@ -1,63 +0,0 @@
-<!--
-  FrameSizeInput Component
-  Number input for frame size (longest side) with validation
--->
-<template>
-  <BaseInput
-    v-model="frameSize"
-    type="number"
-    label="Frame Size"
-    unit="px"
-    :min="FRAME_CONSTRAINTS.minSize"
-    :max="FRAME_CONSTRAINTS.maxSize"
-    :step="100"
-    :error="validationError"
-    :hint="`range(${FRAME_CONSTRAINTS.minSize}px:${FRAME_CONSTRAINTS.maxSize}px)`"
-    :test-id="testId"
-    @blur="handleBlur"
-  />
-</template>
-
-<script setup>
-import { computed } from 'vue';
-import { useFrameConfig } from '@/composables/useFrameConfig';
-import { FRAME_CONSTRAINTS } from '@/utils/constants';
-import { validateFrameSize } from '@/utils/validation';
-import BaseInput from '@/components/shared/BaseInput.vue';
-
-/**
- * FrameSizeInput component
- * Input for frame size (longest side) with validation and constraints
- */
-
-defineProps({
-  /**
-   * Test ID for testing
-   */
-  testId: {
-    type: String,
-    default: 'frame-size-input',
-  },
-});
-
-const { frameSize, updateFrameSize } = useFrameConfig();
-
-/**
- * Validate frame size and return error message
- */
-const validationError = computed(() => {
-  const result = validateFrameSize(frameSize.value);
-  return result.error || '';
-});
-
-/**
- * Handle blur event to validate and clamp value
- */
-const handleBlur = () => {
-  const result = validateFrameSize(frameSize.value);
-
-  if (!result.valid && result.clamped !== undefined) {
-    updateFrameSize(result.clamped);
-  }
-};
-</script>
diff --git a/src/components/controls/FrameSizeSelector.vue b/src/components/controls/FrameSizeSelector.vue
new file mode 100644
index 0000000..88463b4
--- /dev/null
+++ b/src/components/controls/FrameSizeSelector.vue
@@ -0,0 +1,68 @@
+<!--
+  FrameSizeSelector Component
+  Button group selector for frame size with preset options
+-->
+<template>
+  <div :data-testid="testId">
+    <div
+      class="selector-group"
+      role="group"
+      aria-label="Frame size"
+    >
+      <button
+        v-for="option in FRAME_SIZE_OPTIONS"
+        :key="option.value"
+        type="button"
+        :class="[
+          'selector-btn',
+          {
+            'selector-btn-active': isActive(option),
+            'selector-btn-inactive': !isActive(option)
+          }
+        ]"
+        :aria-pressed="isActive(option)"
+        :data-testid="`frame-size-${option.value}`"
+        @click="handleSelect(option)"
+      >
+        {{ option.label }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useFrameConfig } from '@/composables/useFrameConfig';
+import { FRAME_SIZE_OPTIONS } from '@/utils/constants';
+
+/**
+ * FrameSizeSelector component
+ * Allows users to select the frame size from predefined options using a button group
+ */
+
+defineProps({
+  /**
+   * Test ID for testing
+   */
+  testId: {
+    type: String,
+    default: 'frame-size-selector',
+  },
+});
+
+const { frameSize, updateFrameSize } = useFrameConfig();
+
+/**
+ * Check if an option is currently active
+ */
+const isActive = (option) => {
+  return frameSize.value === option.value;
+};
+
+/**
+ * Handle frame size selection
+ * Updates the frame configuration with the selected size
+ */
+const handleSelect = (option) => {
+  updateFrameSize(option.value);
+};
+</script>
diff --git a/src/components/controls/OrientationToggle.vue b/src/components/controls/OrientationToggle.vue
index 21f2fc1..e29b3b4 100644
--- a/src/components/controls/OrientationToggle.vue
+++ b/src/components/controls/OrientationToggle.vue
@@ -4,83 +4,80 @@
 -->
 <template>
   <div
+    class="selector-group"
+    role="group"
+    aria-label="Frame orientation"
     :data-testid="testId"
   >
-    <div
-      class="flex w-full rounded-lg border border-gray-600
-             p-1 bg-gray-800"
-      role="group"
-      aria-label="Frame orientation"
+    <button
+      type="button"
+      :class="[
+        'selector-btn',
+        {
+          'selector-btn-active': orientation === ORIENTATIONS.PORTRAIT,
+          'selector-btn-inactive': orientation !== ORIENTATIONS.PORTRAIT
+        }
+      ]"
+      :aria-pressed="orientation === ORIENTATIONS.PORTRAIT"
+      data-testid="orientation-portrait"
+      @click="handleSelect(ORIENTATIONS.PORTRAIT)"
     >
-      <button
-        type="button"
-        :class="[
-          'orientation-btn',
-          {
-            'btn-active': orientation === 'portrait',
-            'btn-inactive': orientation !== 'portrait'
-          }
-        ]"
-        :aria-pressed="orientation === 'portrait'"
-        data-testid="orientation-portrait"
-        @click="handleSelect('portrait')"
+      <svg
+        class="w-5 h-5"
+        fill="none"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+        aria-hidden="true"
       >
-        <svg
-          class="w-5 h-5"
-          fill="none"
-          stroke="currentColor"
-          viewBox="0 0 24 24"
-          aria-hidden="true"
-        >
-          <rect
-            x="7"
-            y="4"
-            width="10"
-            height="16"
-            rx="1"
-            stroke-width="2"
-          />
-        </svg>
-        <span class="ml-2">Portrait</span>
-      </button>
+        <rect
+          x="7"
+          y="4"
+          width="10"
+          height="16"
+          rx="1"
+          stroke-width="2"
+        />
+      </svg>
+      <span class="ml-2">Portrait</span>
+    </button>
 
-      <button
-        type="button"
-        :class="[
-          'orientation-btn',
-          {
-            'btn-active': orientation === 'landscape',
-            'btn-inactive': orientation !== 'landscape'
-          }
-        ]"
-        :aria-pressed="orientation === 'landscape'"
-        data-testid="orientation-landscape"
-        @click="handleSelect('landscape')"
+    <button
+      type="button"
+      :class="[
+        'selector-btn',
+        {
+          'selector-btn-active': orientation === ORIENTATIONS.LANDSCAPE,
+          'selector-btn-inactive': orientation !== ORIENTATIONS.LANDSCAPE
+        }
+      ]"
+      :aria-pressed="orientation === ORIENTATIONS.LANDSCAPE"
+      data-testid="orientation-landscape"
+      @click="handleSelect(ORIENTATIONS.LANDSCAPE)"
+    >
+      <svg
+        class="w-5 h-5"
+        fill="none"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+        aria-hidden="true"
       >
-        <svg
-          class="w-5 h-5"
-          fill="none"
-          stroke="currentColor"
-          viewBox="0 0 24 24"
-          aria-hidden="true"
-        >
-          <rect
-            x="4"
-            y="7"
-            width="16"
-            height="10"
-            rx="1"
-            stroke-width="2"
-          />
-        </svg>
-        <span class="ml-2">Landscape</span>
-      </button>
-    </div>
+        <rect
+          x="4"
+          y="7"
+          width="16"
+          height="10"
+          rx="1"
+          stroke-width="2"
+        />
+      </svg>
+      <span class="ml-2">Landscape</span>
+    </button>
   </div>
 </template>
 
 <script setup>
 import { useFrameConfig } from '@/composables/useFrameConfig';
+import { ORIENTATIONS } from '@/utils/constants';
 
 /**
  * OrientationToggle component
@@ -106,33 +103,3 @@ const handleSelect = (value) => {
   updateOrientation(value);
 };
 </script>
-
-<style scoped>
-@import "tailwindcss" reference;
-
-/**
- * Base button styles for orientation toggle buttons
- * Contains all common styling applied to both buttons
- */
-.orientation-btn {
-  @apply flex flex-1 items-center justify-center px-4 py-2 text-sm font-medium rounded-md;
-  @apply focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2;
-  @apply transition-colors;
-}
-
-/**
- * Active button state
- * Applied to the currently selected orientation
- */
-.btn-active {
-  @apply bg-gray-700 text-blue-400 shadow-sm;
-}
-
-/**
- * Inactive button state
- * Applied to the non-selected orientation
- */
-.btn-inactive {
-  @apply text-gray-300 hover:text-gray-100 hover:bg-gray-700 cursor-pointer;
-}
-</style>
diff --git a/src/components/controls/QualityInput.vue b/src/components/controls/QualityInput.vue
deleted file mode 100644
index a5911d8..0000000
--- a/src/components/controls/QualityInput.vue
+++ /dev/null
@@ -1,164 +0,0 @@
-<!--
-  QualityInput Component
-  Desidered output quality
--->
-<template>
-  <div
-    class="flex flex-col gap-1"
-    :data-testid="testId"
-  >
-    <label
-      for="quality"
-      class="text-sm font-medium text-gray-300"
-    >
-      Quality
-    </label>
-    <div class="relative py-1">
-      <input
-        id="quality"
-        v-model="quality"
-        type="range"
-        name="quality"
-        min="1"
-        max="100"
-        class="range-input-with-value"
-        data-testid="quality-range-input"
-        @input="handleQualityChange"
-      >
-      <div
-        class="range-value-label"
-        :style="{ left: `calc(${(quality - 1) / 99 * 100}% - 16px)` }"
-        data-testid="quality-value-label"
-      >
-        {{ quality }}
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { useCanvasRenderer } from '@/composables/useCanvasRenderer';
-
-defineProps({
-  /**
-   * Test ID for testing
-   */
-  testId: {
-    type: String,
-    default: 'quality-input',
-  },
-});
-
-const { quality, updateQuality} = useCanvasRenderer();
-
-const handleQualityChange = (event) => {
-  const value = event.target.value;
-  updateQuality(value);
-};
-
-</script>
-
-<style scoped>
-@import "tailwindcss" reference;
-
-.range-input {
-  @apply w-full appearance-none cursor-pointer bg-transparent;
-  @apply focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2;
-  @apply transition-colors;
-}
-
-/* Range input thumb (slider handle) */
-.range-input::-webkit-slider-thumb {
-  @apply appearance-none w-4 h-4 rounded-full;
-  @apply bg-blue-600 dark:bg-blue-500;
-  @apply hover:bg-blue-700 dark:hover:bg-blue-600;
-  @apply cursor-pointer;
-  @apply transition-colors;
-  margin-top: -4px; /* Centers 16px thumb on 8px track: (16-8)/2 = 4px */
-}
-
-.range-input::-moz-range-thumb {
-  @apply w-4 h-4 rounded-full border-0;
-  @apply bg-blue-600 dark:bg-blue-500;
-  @apply hover:bg-blue-700 dark:hover:bg-blue-600;
-  @apply cursor-pointer;
-  @apply transition-colors;
-}
-
-/* Range input track */
-.range-input::-webkit-slider-runnable-track {
-  @apply w-full h-2 rounded-lg;
-  @apply bg-gray-200 dark:bg-gray-600;
-}
-
-.range-input::-moz-range-track {
-  @apply w-full h-2 rounded-lg;
-  @apply bg-gray-200 dark:bg-gray-600;
-}
-
-/* Disabled state */
-.range-input:disabled {
-  @apply opacity-50 cursor-not-allowed;
-}
-
-.range-input:disabled::-webkit-slider-thumb {
-  @apply cursor-not-allowed;
-}
-
-.range-input:disabled::-moz-range-thumb {
-  @apply cursor-not-allowed;
-}
-
-/* Range input with value label in thumb */
-.range-input-with-value {
-  @apply w-full appearance-none cursor-pointer bg-transparent;
-  @apply focus:outline-none;
-  height: 32px; /* Increased height to accommodate squared thumb */
-}
-
-.range-input-with-value::-webkit-slider-thumb {
-  @apply appearance-none rounded cursor-pointer opacity-0;
-  width: 32px;
-  height: 32px;
-}
-
-.range-input-with-value::-moz-range-thumb {
-  @apply rounded border-0 cursor-pointer opacity-0;
-  width: 32px;
-  height: 32px;
-}
-
-.range-input-with-value::-webkit-slider-runnable-track {
-  @apply w-full h-2 rounded-lg;
-  @apply bg-gray-200 dark:bg-gray-600;
-}
-
-.range-input-with-value::-moz-range-track {
-  @apply w-full h-2 rounded-lg;
-  @apply bg-gray-200 dark:bg-gray-600;
-}
-
-/* Value label that appears as thumb */
-.range-value-label {
-  @apply absolute pointer-events-none;
-  @apply flex items-center justify-center;
-  @apply bg-blue-600 dark:bg-blue-500 text-white;
-  @apply rounded font-medium text-xs;
-  @apply transition-colors;
-  width: 32px;
-  height: 32px;
-  top: 4px; /* Account for py-1 (4px) padding on parent container */
-}
-
-.range-input-with-value:hover + .range-value-label {
-  @apply bg-blue-700 dark:bg-blue-600;
-}
-
-.range-input-with-value:focus + .range-value-label {
-  @apply ring-2 ring-blue-500 ring-offset-2;
-}
-
-.range-input-with-value:disabled + .range-value-label {
-  @apply opacity-50 cursor-not-allowed;
-}
-</style>
\ No newline at end of file
diff --git a/src/components/controls/QualitySlider.vue b/src/components/controls/QualitySlider.vue
new file mode 100644
index 0000000..6a3540c
--- /dev/null
+++ b/src/components/controls/QualitySlider.vue
@@ -0,0 +1,52 @@
+<!--
+  QualitySlider Component
+  Desired output quality
+-->
+<template>
+  <div class="relative">
+    <input
+      id="quality"
+      v-model="quality"
+      type="range"
+      name="quality"
+      min="1"
+      max="100"
+      class="range-input-with-value"
+      data-testid="quality-range-input"
+      @input="handleQualityChange"
+    >
+    <div
+      class="range-value-label"
+      :style="{ left: `calc(${(quality - 1) / 99 * 100}% - 16px)` }"
+      data-testid="quality-value-label"
+    >
+      {{ quality }}
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useCanvasRenderer } from '@/composables/useCanvasRenderer';
+
+defineProps({
+  /**
+   * Test ID for testing
+   */
+  testId: {
+    type: String,
+    default: 'quality-slider',
+  },
+});
+
+const { quality, updateQuality} = useCanvasRenderer();
+
+/**
+ * Handle quality change event
+ * @param {Event} event - Input event from range slider
+ */
+const handleQualityChange = (event) => {
+  const value = Number(event.target.value);
+  updateQuality(value);
+};
+
+</script>
diff --git a/src/components/controls/ResetButton.vue b/src/components/controls/ResetButton.vue
index 9b3d12a..e2edd2b 100644
--- a/src/components/controls/ResetButton.vue
+++ b/src/components/controls/ResetButton.vue
@@ -4,11 +4,7 @@
 -->
 <template>
   <button
-    class="
-      inline-flex items-center justify-center font-medium rounded-lg transition-colors
-      focus:outline-none focus:ring-2 focus:ring-offset-2 bg-gray-700 text-gray-100
-      hover:bg-gray-600 focus:ring-gray-500 px-4 py-2 text-base
-    "
+    class="action-btn action-btn-secondary"
     :data-testid="testId"
     @click="handleReset"
   >
@@ -38,6 +34,10 @@ import { useImageState } from '@/composables/useImageState';
 /**
  * ResetButton component
  * Resets all configuration and clears images
+ *
+ * Button takes full width of container:
+ * - Desktop: Full width of sidebar
+ * - Mobile: Equal share with Download button
  */
 
 defineProps({
diff --git a/src/components/controls/SpacingInput.vue b/src/components/controls/SpacingInput.vue
deleted file mode 100644
index 39d262c..0000000
--- a/src/components/controls/SpacingInput.vue
+++ /dev/null
@@ -1,63 +0,0 @@
-<!--
-  SpacingInput Component
-  Number input for spacing between images and frame edges
--->
-<template>
-  <BaseInput
-    v-model="spacing"
-    type="number"
-    label="Spacing"
-    unit="px"
-    :min="FRAME_CONSTRAINTS.minSpacing"
-    :max="FRAME_CONSTRAINTS.maxSpacing"
-    :step="10"
-    :error="validationError"
-    :hint="`range(${FRAME_CONSTRAINTS.minSpacing}px:${FRAME_CONSTRAINTS.maxSpacing}px)`"
-    :test-id="testId"
-    @blur="handleBlur"
-  />
-</template>
-
-<script setup>
-import { computed } from 'vue';
-import { useFrameConfig } from '@/composables/useFrameConfig';
-import { FRAME_CONSTRAINTS } from '@/utils/constants';
-import { validateSpacing } from '@/utils/validation';
-import BaseInput from '@/components/shared/BaseInput.vue';
-
-/**
- * SpacingInput component
- * Input for spacing between images and frame edges with validation
- */
-
-defineProps({
-  /**
-   * Test ID for testing
-   */
-  testId: {
-    type: String,
-    default: 'spacing-input',
-  },
-});
-
-const { spacing, updateSpacing } = useFrameConfig();
-
-/**
- * Validate spacing and return error message
- */
-const validationError = computed(() => {
-  const result = validateSpacing(spacing.value);
-  return result.error || '';
-});
-
-/**
- * Handle blur event to validate and clamp value
- */
-const handleBlur = () => {
-  const result = validateSpacing(spacing.value);
-
-  if (!result.valid && result.clamped !== undefined) {
-    updateSpacing(result.clamped);
-  }
-};
-</script>
diff --git a/src/components/layout/ActionBar.vue b/src/components/layout/ActionBar.vue
index 943df4a..f177357 100644
--- a/src/components/layout/ActionBar.vue
+++ b/src/components/layout/ActionBar.vue
@@ -1,39 +1,24 @@
 <!--
   ActionBar Component
-  Action buttons (Download and Reset) placed below the canvas
+  Action buttons for reset and download
+  Desktop: Vertical stack at bottom of sidebar
+  Mobile: Horizontal row at bottom
 -->
 <template>
   <div
-    class="w-full max-w-[1024px] mx-auto bg-gray-800 border
-           border-gray-700 rounded-lg shadow-sm px-6 py-4"
+    class="bg-gray-800 md:bg-transparent md:border-0 border-t border-gray-700
+           md:rounded-none md:shadow-none md:px-0 md:py-0 px-3 py-4"
     data-testid="action-bar"
   >
-    <div class="flex flex-col gap-6">
-      <!-- Row 1: Quality and file output controls -->
-      <div
-        class="flex flex-col lg:flex-row gap-6 lg:items-start"
-        data-testid="output-action-bar"
-      >
-        <!-- Filename and Format stay together on mobile and desktop -->
-        <div class="flex flex-1 gap-2 items-start">
-          <div class="flex-1">
-            <FileNameInput />
-          </div>
-          <div class="w-14">
-            <FormatSelector />
-          </div>
-        </div>
-        <div class="flex-1">
-          <QualityInput />
-        </div>
-      </div>
-
-      <!-- Row 2: Buttons -->
-      <div
-        class="flex flex-col lg:flex-row gap-4 lg:justify-end lg:items-start"
-        data-testid="buttons-action-bar"
-      >
+    <!-- Desktop: Vertical stack | Mobile: Horizontal row -->
+    <div
+      class="flex flex-1 md:flex-col gap-2 md:gap-2"
+      data-testid="buttons-action-bar"
+    >
+      <div class="flex-1">
         <ResetButton />
+      </div>
+      <div class="flex-1">
         <DownloadButton
           :stage="stage"
           :preview-width="previewWidth"
@@ -46,15 +31,16 @@
 <script setup>
 import ResetButton from '@/components/controls/ResetButton.vue';
 import DownloadButton from '@/components/controls/DownloadButton.vue';
-import FileNameInput from '@/components/controls/FileNameInput.vue';
-import QualityInput from '@/components/controls/QualityInput.vue';
-import FormatSelector from '@/components/controls/FormatSelector.vue';
 
 /**
  * ActionBar component
- * Contains action buttons (Download and Reset)
- * - Desktop: Buttons aligned right, side by side
- * - Mobile: Stacked vertically (Download on top), full width
+ * Contains action buttons for reset and download
+ *
+ * Layout:
+ * - Desktop (≥768px): Vertical stack at bottom of sidebar
+ *   - Reset and Download buttons stacked, full-width
+ * - Mobile (<768px): Horizontal row at bottom
+ *   - Reset and Download buttons shown side-by-side, equal width
  */
 
 defineProps({
diff --git a/src/components/layout/AppHeader.vue b/src/components/layout/AppHeader.vue
deleted file mode 100644
index a5cd410..0000000
--- a/src/components/layout/AppHeader.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<!--
-  AppHeader Component
-  Top header bar with application title and theme toggle
--->
-<template>
-  <header
-    class="w-full bg-gray-800 border-b border-gray-700 px-6 py-4"
-    data-testid="app-header"
-  >
-    <h1 class="text-2xl font-bold text-gray-100">
-      Framed
-    </h1>
-  </header>
-</template>
-
-<script setup>
-/**
- * AppHeader component
- * Displays application title
- */
-</script>
diff --git a/src/components/layout/CanvasContainer.vue b/src/components/layout/CanvasContainer.vue
index 697823e..3ccfcab 100644
--- a/src/components/layout/CanvasContainer.vue
+++ b/src/components/layout/CanvasContainer.vue
@@ -4,18 +4,14 @@
 -->
 <template>
   <div
-    ref="containerRef"
-    class="w-full max-w-[1024px] mx-auto bg-gray-800 border
-           border-gray-700 rounded-lg shadow-sm p-6"
+    class="w-full h-full flex items-center justify-center"
     data-testid="canvas-container"
   >
-    <div class="w-full flex items-center justify-center">
-      <FrameCanvas
-        ref="canvasRef"
-        :preview-width="previewWidth"
-        @ready="handleCanvasReady"
-      />
-    </div>
+    <FrameCanvas
+      ref="canvasRef"
+      :preview-width="previewWidth"
+      @ready="handleCanvasReady"
+    />
   </div>
 </template>
 
@@ -40,7 +36,6 @@ defineProps({
 
 const emit = defineEmits(['canvasReady']);
 
-const containerRef = ref(null);
 const canvasRef = ref(null);
 
 /**
diff --git a/src/components/layout/ConfigBar.vue b/src/components/layout/ConfigBar.vue
index 8390c45..ed34684 100644
--- a/src/components/layout/ConfigBar.vue
+++ b/src/components/layout/ConfigBar.vue
@@ -1,60 +1,116 @@
 <!--
   ConfigBar Component
-  Top configuration bar with all frame controls and action buttons
+  Configuration controls for frame settings
+  Desktop: Vertical stack in sidebar
+  Mobile: Horizontal row at bottom
 -->
 <template>
   <div
-    class="w-full max-w-[1024px] mx-auto bg-gray-800 border
-           border-gray-700 rounded-lg shadow-sm px-6 py-4"
+    class="bg-gray-800 md:bg-transparent md:border-0 border-gray-700
+           md:rounded-none md:shadow-none md:px-0 md:py-0 px-4 py-0"
     data-testid="config-bar"
   >
-    <div class="flex flex-col gap-6">
-      <!-- Row 1: Orientation and Aspect Ratio Controls -->
-      <div
-        class="flex flex-col md:flex-row gap-4 md:items-center"
-        data-testid="row-orientation-aspect"
-      >
-        <div class="flex-1">
-          <OrientationToggle />
-        </div>
-        <div class="flex-1">
-          <AspectRatioSelector />
-        </div>
+    <!-- Desktop & Mobile Panel: Vertical stack -->
+    <div class="flex flex-col gap-3 md:gap-4">
+      <div class="w-full">
+        <ConfigElement test-id="config-orientation">
+          <template #label>
+            Orientation
+          </template>
+          <template #element>
+            <OrientationToggle />
+          </template>
+        </ConfigElement>
       </div>
-
-      <!-- Row 2: Frame Configuration Controls -->
-      <div
-        class="flex flex-col md:flex-row gap-4"
-        data-testid="row-frame-config"
-      >
-        <div class="flex-1">
-          <ColorPicker />
-        </div>
-        <div class="flex-1">
-          <FrameSizeInput />
-        </div>
-        <div class="flex-1">
-          <SpacingInput />
-        </div>
+      <div class="w-full">
+        <ConfigElement test-id="config-aspect-ratio">
+          <template #label>
+            Aspect Ratio
+          </template>
+          <template #element>
+            <AspectRatioSelector />
+          </template>
+        </ConfigElement>
+      </div>
+      <div class="w-full">
+        <ConfigElement test-id="config-frame-size">
+          <template #label>
+            Frame Size
+          </template>
+          <template #element>
+            <FrameSizeSelector />
+          </template>
+        </ConfigElement>
+      </div>
+      <div class="w-full">
+        <ConfigElement test-id="config-frame-color">
+          <template #label>
+            Frame Color
+          </template>
+          <template #element>
+            <ColorPicker />
+          </template>
+        </ConfigElement>
+      </div>
+      <div class="w-full">
+        <ConfigElement test-id="config-border-size">
+          <template #label>
+            Border Size
+          </template>
+          <template #element>
+            <BorderSlider />
+          </template>
+        </ConfigElement>
+      </div>
+      <div class="w-full">
+        <ConfigElement test-id="config-export-format">
+          <template #label>
+            Export Format
+          </template>
+          <template #element>
+            <FormatSelector />
+          </template>
+        </ConfigElement>
+      </div>
+      <div class="w-full">
+        <ConfigElement test-id="config-quality">
+          <template #label>
+            Quality
+          </template>
+          <template #element>
+            <QualitySlider />
+          </template>
+        </ConfigElement>
       </div>
     </div>
   </div>
 </template>
 
 <script setup>
+import ConfigElement from '@/components/shared/ConfigElement.vue';
 import OrientationToggle from '@/components/controls/OrientationToggle.vue';
 import AspectRatioSelector from '@/components/controls/AspectRatioSelector.vue';
 import ColorPicker from '@/components/controls/ColorPicker.vue';
-import FrameSizeInput from '@/components/controls/FrameSizeInput.vue';
-import SpacingInput from '@/components/controls/SpacingInput.vue';
+import FrameSizeSelector from '@/components/controls/FrameSizeSelector.vue';
+import BorderSlider from '@/components/controls/BorderSlider.vue';
+import FormatSelector from '@/components/controls/FormatSelector.vue';
+import QualitySlider from '@/components/controls/QualitySlider.vue';
 
 /**
  * ConfigBar component
- * Contains all frame configuration controls
- * Organized in 2 rows:
- * - Row 1: OrientationToggle and AspectRatioSelector 
- *          (side by side on desktop with equal width, stacked on mobile)
- * - Row 2: ColorPicker, FrameSizeInput, SpacingInput 
- *          (responsive flex layout)
+ * Contains all frame configuration and output settings controls
+ *
+ * Layout:
+ * - Desktop (≥768px): Vertical stack in left sidebar
+ * - Mobile (<768px): Horizontal scrollable row at bottom
+ *
+ * Controls included:
+ * - OrientationToggle: Switch between portrait/landscape
+ * - AspectRatioSelector: Select aspect ratio preset
+ * - ColorPicker: Choose frame color
+ * - FrameSizeSelector: Select frame size preset
+ * - BorderSlider: Adjust border spacing as percentage
+ * - FormatSelector: Choose export format (PNG, JPEG, WebP)
+ * - QualitySlider: Adjust export quality percentage
  */
 </script>
diff --git a/src/components/shared/BaseInput.vue b/src/components/shared/BaseInput.vue
deleted file mode 100644
index 5e9c35c..0000000
--- a/src/components/shared/BaseInput.vue
+++ /dev/null
@@ -1,218 +0,0 @@
-<!--
-  BaseInput Component
-  Reusable number input component with label, unit display, and validation
--->
-<template>
-  <div
-    class="flex flex-col gap-1"
-    :data-testid="testId"
-  >
-    <label
-      v-if="label"
-      :for="inputId"
-      class="text-sm font-medium text-gray-300"
-    >
-      {{ label }}
-      <span
-        v-if="required"
-        class="text-red-500"
-        aria-label="required"
-      >*</span>
-    </label>
-
-    <div class="relative">
-      <input
-        :id="inputId"
-        :type="type"
-        :value="modelValue"
-        :min="min"
-        :max="max"
-        :step="step"
-        :disabled="disabled"
-        :required="required"
-        :placeholder="placeholder"
-        :aria-invalid="!!error"
-        :aria-describedby="error ? `${inputId}-error` : undefined"
-        class="w-full px-3 py-2 border border-gray-600 rounded-lg bg-gray-800
-               text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-blue-500
-               disabled:opacity-50 disabled:cursor-not-allowed"
-        :class="[
-          { 'border-red-400': error },
-          { 'pr-10': unit }
-        ]"
-        data-testid="number-input"
-        @input="handleInput"
-        @blur="handleBlur"
-      >
-
-      <span
-        v-if="unit"
-        class="absolute right-3 top-1/2 -translate-y-1/2 text-sm text-gray-400"
-        aria-hidden="true"
-      >
-        {{ unit }}
-      </span>
-    </div>
-
-    <span
-      v-if="error"
-      :id="`${inputId}-error`"
-      class="text-sm text-red-400"
-      role="alert"
-      data-testid="input-error"
-    >
-      {{ error }}
-    </span>
-
-    <span
-      v-if="hint && !error"
-      class="text-sm text-gray-400"
-      data-testid="input-hint"
-    >
-      {{ hint }}
-    </span>
-  </div>
-</template>
-
-<script setup>
-import { computed } from 'vue';
-
-/**
- * BaseInput component
- * Reusable number input with label, validation, unit display, and min/max constraints
- */
-
-const props = defineProps({
-  /**
-   * v-model value
-   */
-  modelValue: {
-    type: [Number, String],
-    default: 0,
-  },
-
-  /**
-   * Input type
-   */
-  type: {
-    type: String,
-    default: 'number',
-    validator: (value) => ['number', 'text'].includes(value),
-  },
-
-  /**
-   * Label text
-   */
-  label: {
-    type: String,
-    default: '',
-  },
-
-  /**
-   * Placeholder text
-   */
-  placeholder: {
-    type: String,
-    default: '',
-  },
-
-  /**
-   * Unit to display (e.g., 'px', '%', 'em')
-   */
-  unit: {
-    type: String,
-    default: '',
-  },
-
-  /**
-   * Minimum value
-   */
-  min: {
-    type: Number,
-    default: undefined,
-  },
-
-  /**
-   * Maximum value
-   */
-  max: {
-    type: Number,
-    default: undefined,
-  },
-
-  /**
-   * Step value
-   */
-  step: {
-    type: Number,
-    default: 1,
-  },
-
-  /**
-   * Disabled state
-   */
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-
-  /**
-   * Required field
-   */
-  required: {
-    type: Boolean,
-    default: false,
-  },
-
-  /**
-   * Error message
-   */
-  error: {
-    type: String,
-    default: '',
-  },
-
-  /**
-   * Hint message
-   */
-  hint: {
-    type: String,
-    default: '',
-  },
-
-  /**
-   * Test ID for testing
-   */
-  testId: {
-    type: String,
-    default: 'base-input',
-  },
-});
-
-const emit = defineEmits(['update:modelValue', 'blur']);
-
-/**
- * Generate unique ID for the input
- */
-const inputId = computed(() => `input-${Math.random().toString(36).substr(2, 9)}`);
-
-/**
- * Handle input event
- */
-const handleInput = (event) => {
-  let value = event.target.value;
-
-  if (props.type === 'number') {
-    value = value === '' ? 0 : Number(value);
-  }
-
-  emit('update:modelValue', value);
-};
-
-/**
- * Handle blur event
- */
-const handleBlur = (event) => {
-  emit('blur', event);
-};
-</script>
diff --git a/src/components/shared/ConfigElement.vue b/src/components/shared/ConfigElement.vue
new file mode 100644
index 0000000..fc6c0b0
--- /dev/null
+++ b/src/components/shared/ConfigElement.vue
@@ -0,0 +1,50 @@
+<!--
+  ConfigElement Component
+  Wrapper component for consistent configuration control layout
+  Provides label and element slots for standardized naming and spacing
+-->
+<template>
+  <div
+    class="flex flex-col gap-2"
+    :data-testid="testId"
+  >
+    <!-- Label slot for configuration name -->
+    <div
+      v-if="$slots.label"
+      class="text-xs font-medium text-gray-400 uppercase tracking-wide"
+    >
+      <slot name="label" />
+    </div>
+
+    <!-- Element slot for the actual control component -->
+    <div>
+      <slot name="element" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+/**
+ * ConfigElement component
+ * Provides consistent layout for configuration controls
+ *
+ * Slots:
+ * - label: Configuration control label (e.g., "Orientation", "Border Size")
+ * - element: The actual control component (e.g., OrientationToggle, BorderSlider)
+ *
+ * Layout:
+ * - Label above element
+ * - Consistent spacing and typography
+ * - Label styled with uppercase text, small size, and muted color
+ */
+
+defineProps({
+  /**
+   * Test ID for testing
+   */
+  testId: {
+    type: String,
+    default: 'config-element',
+  },
+});
+</script>
diff --git a/src/composables/useCanvasRenderer.js b/src/composables/useCanvasRenderer.js
index af51cbf..9b8b444 100644
--- a/src/composables/useCanvasRenderer.js
+++ b/src/composables/useCanvasRenderer.js
@@ -7,6 +7,7 @@
 import { ref, computed } from 'vue';
 import {
   calculateImageLayout,
+  calculateBorderSpacing,
   calculatePreviewScale,
   calculateScaledDimensions,
   calculateCenterOffset,
@@ -14,9 +15,8 @@ import {
 import { useFrameConfig } from '@/composables/useFrameConfig';
 import { useImageState } from '@/composables/useImageState';
 import { EXPORT_DEFAULT, IMAGE_FORMATS, PREVIEW_CONSTRAINTS } from '@/utils/constants';
-import { validateFileName } from '@/utils/validation';
+import { extractValidFilenameChars, generateUuidV1Short } from '@/utils/validation';
 
-const fileName = ref(EXPORT_DEFAULT.defaultFileName);
 const quality = ref(EXPORT_DEFAULT.defaultQuality);
 const format = ref(EXPORT_DEFAULT.defaultFormat);
 
@@ -85,11 +85,16 @@ export function useCanvasRenderer(options = {}) {
    * @type {import('vue').ComputedRef<Object>}
    */
   const imageLayout = computed(() => {
+    const borderSpacing = calculateBorderSpacing(
+      frameConfig.frameSize.value,
+      frameConfig.borderPercentage.value
+    );
+
     return calculateImageLayout(
       frameConfig.frameWidth.value,
       frameConfig.frameHeight.value,
       frameConfig.orientation.value,
-      frameConfig.spacing.value
+      borderSpacing
     );
   });
 
@@ -183,20 +188,40 @@ export function useCanvasRenderer(options = {}) {
   });
 
   /**
-   * @param {string} desiredFilename - Input filename
-   * @param {string} format - Image format ('png' or 'jpeg')
-   * @returns {string} the filename with extension based on format
+   * Generate filename based on product name, image names, and UUID
+   * Format: <product_name>-<first_image>-<second_image>-<uuid>.<ext>
+   * @param {string} mimeType - Image format mime type ('image/png' or 'image/jpeg')
+   * @returns {string} Generated filename with extension
    */
-  const composeFileName = (desiredFileName, format) => {
-    return desiredFileName + '.' + format.split('/')[1];
+  const generateFileName = (mimeType) => {
+    const productName = 'framed';
+    const extension = mimeType.split('/')[1];
+
+    // Get image filenames
+    const image1 = imageState.images.value[0];
+    const image2 = imageState.images.value[1];
+
+    // Extract valid characters from filenames (1-10 chars)
+    const image1Part = image1?.fileName
+      ? extractValidFilenameChars(image1.fileName)
+      : '';
+    const image2Part = image2?.fileName
+      ? extractValidFilenameChars(image2.fileName)
+      : '';
+
+    // Use UUID if no valid characters found
+    const part1 = image1Part || generateUuidV1Short();
+    const part2 = image2Part || generateUuidV1Short();
+
+    // Generate UUID for end of filename
+    const uuid = generateUuidV1Short();
+
+    return `${productName}-${part1}-${part2}-${uuid}.${extension}`;
   };
 
   /**
    * Download canvas as image
    * @param {Object} stage - Konva stage instance
-   * @param {string} filename - Download filename
-   * @param {string} format - Image format ('png' or 'jpeg')
-   * @param {number} quality - Image quality (0-1) for JPEG
    * @returns {void}
    */
   const downloadImage = (stage) => {
@@ -209,7 +234,7 @@ export function useCanvasRenderer(options = {}) {
     const currentFrameWidth = frameConfig.frameWidth.value;
     const pixelRatio = currentFrameWidth / currentStageWidth;
     const qualityPercentage = quality.value / 100;
-    const downloadFileName = composeFileName(fileName.value, format.value);
+    const downloadFileName = generateFileName(format.value);
 
     try {
       const mimeType = format.value;
@@ -239,20 +264,12 @@ export function useCanvasRenderer(options = {}) {
     return imageState.images.value[0] !== null && imageState.images.value[1] !== null;
   });
 
-  /**
-   * Check if filename is valid
-   * @type {import('vue').ComputedRef<boolean>}
-   */
-  const isFileNameValid = computed(() => {
-    return validateFileName(fileName.value).valid;
-  });
-
   /**
    * Check if canvas is ready for export
    * @type {import('vue').ComputedRef<boolean>}
    */
   const canExport = computed(() => {
-    return isReady.value && isFileNameValid.value;
+    return isReady.value;
   });
 
   // Return public API
@@ -273,7 +290,6 @@ export function useCanvasRenderer(options = {}) {
     canExport,
 
     // Export configuration refs
-    fileName,
     quality,
     format,
 
diff --git a/src/composables/useFrameConfig.js b/src/composables/useFrameConfig.js
index 86d09ad..d21e1ac 100644
--- a/src/composables/useFrameConfig.js
+++ b/src/composables/useFrameConfig.js
@@ -5,7 +5,7 @@
  */
 
 import { ref, computed } from 'vue';
-import { DEFAULT_CONFIG } from '@/utils/constants.js';
+import { DEFAULT_CONFIG, ORIENTATIONS } from '@/utils/constants.js';
 import { calculateFrameDimensions } from '@/utils/calculations.js';
 
 // Singleton state
@@ -13,7 +13,7 @@ const orientation = ref(DEFAULT_CONFIG.orientation);
 const aspectRatio = ref(DEFAULT_CONFIG.aspectRatio);
 const backgroundColor = ref(DEFAULT_CONFIG.backgroundColor);
 const frameSize = ref(DEFAULT_CONFIG.frameSize); // Size of longest side
-const spacing = ref(DEFAULT_CONFIG.spacing);
+const borderPercentage = ref(DEFAULT_CONFIG.borderPercentage); // Border as percentage (1-25)
 
 // Computed dimensions based on frameSize (longest side)
 const frameDimensions = computed(() => {
@@ -34,7 +34,7 @@ export function useFrameConfig() {
    * @param {string} value - New orientation ('portrait' or 'landscape')
    */
   const updateOrientation = (value) => {
-    if (value === 'portrait' || value === 'landscape') {
+    if (value === ORIENTATIONS.PORTRAIT || value === ORIENTATIONS.LANDSCAPE) {
       orientation.value = value;
     }
   };
@@ -43,7 +43,9 @@ export function useFrameConfig() {
    * Toggle orientation between portrait and landscape
    */
   const toggleOrientation = () => {
-    orientation.value = orientation.value === 'portrait' ? 'landscape' : 'portrait';
+    orientation.value = orientation.value === ORIENTATIONS.PORTRAIT
+      ? ORIENTATIONS.LANDSCAPE
+      : ORIENTATIONS.PORTRAIT;
   };
 
   /**
@@ -71,11 +73,11 @@ export function useFrameConfig() {
   };
 
   /**
-   * Update spacing between elements
-   * @param {number} value - New spacing in pixels
+   * Update border percentage
+   * @param {number} value - New border percentage (1-25)
    */
-  const updateSpacing = (value) => {
-    spacing.value = Number(value);
+  const updateBorderPercentage = (value) => {
+    borderPercentage.value = Number(value);
   };
 
   /**
@@ -86,7 +88,7 @@ export function useFrameConfig() {
     aspectRatio.value = DEFAULT_CONFIG.aspectRatio;
     backgroundColor.value = DEFAULT_CONFIG.backgroundColor;
     frameSize.value = DEFAULT_CONFIG.frameSize;
-    spacing.value = DEFAULT_CONFIG.spacing;
+    borderPercentage.value = DEFAULT_CONFIG.borderPercentage;
   };
 
   // Return public API
@@ -98,7 +100,7 @@ export function useFrameConfig() {
     frameSize,
     frameWidth, // Computed based on frameSize
     frameHeight, // Computed based on frameSize
-    spacing,
+    borderPercentage,
 
     // Methods
     updateOrientation,
@@ -106,7 +108,7 @@ export function useFrameConfig() {
     updateAspectRatio,
     updateBackgroundColor,
     updateFrameSize,
-    updateSpacing,
+    updateBorderPercentage,
     reset,
   };
 }
diff --git a/src/composables/useImageState.js b/src/composables/useImageState.js
index 7877e12..ef79369 100644
--- a/src/composables/useImageState.js
+++ b/src/composables/useImageState.js
@@ -4,7 +4,7 @@
  */
 
 import { ref } from 'vue';
-import { validateFile, validateImageDimensions } from '@/utils/validation.js';
+import { validateFile } from '@/utils/validation.js';
 import { getImageOrientation, calculateAspectRatio } from '@/utils/calculations.js';
 
 /**
@@ -25,15 +25,9 @@ function loadImageMetadata(file) {
         const orientation = getImageOrientation(width, height);
         const aspectRatio = calculateAspectRatio(width, height);
 
-        // Validate dimensions
-        const dimensionValidation = validateImageDimensions(width, height);
-        if (!dimensionValidation.valid) {
-          reject(new Error(dimensionValidation.error));
-          return;
-        }
-
         resolve({
           file,
+          fileName: file.name,
           dataUrl: e.target.result,
           width,
           height,
diff --git a/src/main.js b/src/main.js
index 37be519..1db5f8a 100644
--- a/src/main.js
+++ b/src/main.js
@@ -6,6 +6,7 @@ import { createApp } from 'vue';
 import VueKonva from 'vue-konva';
 import App from './App.vue';
 import './assets/styles/main.css';
+import { logError } from './utils/logger';
 
 const app = createApp(App);
 app.use(VueKonva);
@@ -19,7 +20,7 @@ if ('serviceWorker' in navigator) {
     navigator.serviceWorker
       .register('/sw.js')
       .catch((error) => {
-        console.error('Service Worker registration failed:', error);
+        logError('Service Worker registration failed:', error);
       });
   });
 }
diff --git a/src/utils/calculations.js b/src/utils/calculations.js
index 2d5cbd8..5ae6e7c 100644
--- a/src/utils/calculations.js
+++ b/src/utils/calculations.js
@@ -2,7 +2,20 @@
  * Calculation utilities for frame dimensions and image layouts
  */
 
-import { ASPECT_RATIOS } from './constants.js';
+import { ASPECT_RATIOS, ORIENTATIONS } from './constants.js';
+
+/**
+ * Calculate border spacing from percentage of frame size
+ * Border percentage applies to both sides, so divide by 2
+ * Example: frameSize=2048, borderPercentage=2 -> Math.round(2048 * 0.02 / 2) = 20px per side
+ *
+ * @param {number} frameSize - Size of the longest side in pixels
+ * @param {number} borderPercentage - Border percentage (1-25)
+ * @returns {number} Border spacing in pixels (per side)
+ */
+export function calculateBorderSpacing(frameSize, borderPercentage) {
+  return Math.round((frameSize * borderPercentage) / 100 / 2);
+}
 
 /**
  * Calculate frame dimensions based on size (longest side), aspect ratio, and orientation
@@ -24,7 +37,7 @@ export function calculateFrameDimensions(size, aspectRatio, orientation) {
     throw new Error(`Invalid aspect ratio: ${aspectRatio}`);
   }
 
-  if (orientation === 'portrait') {
+  if (orientation === ORIENTATIONS.PORTRAIT) {
     // Portrait: height is the longest side (size parameter)
     // Width = height / ratio
     // For 4:3 portrait with size=1080: width = 1080 / (4/3) = 810
@@ -32,7 +45,7 @@ export function calculateFrameDimensions(size, aspectRatio, orientation) {
       width: size / ratio,
       height: size,
     };
-  } else if (orientation === 'landscape') {
+  } else if (orientation === ORIENTATIONS.LANDSCAPE) {
     // Landscape: width is the longest side (size parameter)
     // Height = width / ratio
     // For 4:3 landscape with size=1080: height = 1080 / (4/3) = 810
@@ -47,63 +60,66 @@ export function calculateFrameDimensions(size, aspectRatio, orientation) {
 
 /**
  * Calculate dimensions and positions for two images in a frame
- * Uses uniform spacing between all elements (edges and images)
+ * Border spacing applies to frame edges, fixed inner spacing between images
  *
  * Spacing concept:
- * - Portrait: [spacing][image1][spacing][image2][spacing] (vertical)
- * - Landscape: [spacing][image1][spacing][image2][spacing] (horizontal)
+ * - Portrait: [border][image1][inner][image2][border] (vertical)
+ * - Landscape: [border][image1][inner][image2][border] (horizontal)
+ * - Inner spacing is always 20px (fixed distance between images)
  *
  * @param {number} frameWidth - Frame width in pixels
  * @param {number} frameHeight - Frame height in pixels
  * @param {string} orientation - Frame orientation ('portrait' or 'landscape')
- * @param {number} spacing - Uniform spacing between elements
+ * @param {number} borderSpacing - Border spacing in pixels (edge distance)
  * @returns {Object} Layout object with image1 and image2 positions/dimensions
  */
-export function calculateImageLayout(frameWidth, frameHeight, orientation, spacing) {
-  if (orientation === 'portrait') {
-    // Stack vertically: [spacing][image1][spacing][image2][spacing]
-    // Available height for images: frameHeight - 3*spacing (top, middle, bottom)
-    const availableHeight = frameHeight - 3 * spacing;
+export function calculateImageLayout(frameWidth, frameHeight, orientation, borderSpacing) {
+  const INNER_SPACING = 20; // Fixed spacing between images
+
+  if (orientation === ORIENTATIONS.PORTRAIT) {
+    // Stack vertically: [border][image1][inner][image2][border]
+    // Available height for images: frameHeight - 2*border - inner
+    const availableHeight = frameHeight - 2 * borderSpacing - INNER_SPACING;
     const imageHeight = availableHeight / 2;
 
-    // Full width minus spacing on both sides
-    const availableWidth = frameWidth - 2 * spacing;
+    // Full width minus border on both sides
+    const availableWidth = frameWidth - 2 * borderSpacing;
     const imageWidth = availableWidth;
 
     return {
       image1: {
-        x: spacing,
-        y: spacing,
+        x: borderSpacing,
+        y: borderSpacing,
         width: imageWidth,
         height: imageHeight,
       },
       image2: {
-        x: spacing,
-        y: spacing + imageHeight + spacing,
+        x: borderSpacing,
+        y: borderSpacing + imageHeight + INNER_SPACING,
         width: imageWidth,
         height: imageHeight,
       },
     };
   } else {
-    // Stack horizontally: [spacing][image1][spacing][image2][spacing]
-    // Available width for images: frameWidth - 3*spacing (left, middle, right)
-    const availableWidth = frameWidth - 3 * spacing;
+    // Stack horizontally: [border][image1][inner][image2][border]
+    // Available width for images: frameWidth - 2*border - inner
+    const availableWidth = frameWidth - 2 * borderSpacing - INNER_SPACING;
     const imageWidth = availableWidth / 2;
 
-    // Full height minus spacing on both sides
-    const availableHeight = frameHeight - 2 * spacing;
+    // Full height minus border on both sides
+    const availableHeight = frameHeight - 2 * borderSpacing;
     const imageHeight = availableHeight;
 
     return {
       image1: {
-        x: spacing,
-        y: spacing,
+        x: borderSpacing,
+        y: borderSpacing,
         width: imageWidth,
         height: imageHeight,
       },
       image2: {
-        x: spacing + imageWidth + spacing,
-        y: spacing,
+        x: borderSpacing + imageWidth + INNER_SPACING,
+        y: borderSpacing,
         width: imageWidth,
         height: imageHeight,
       },
@@ -198,7 +214,7 @@ export function calculatePreviewScale(frameWidth, containerWidth) {
  * @returns {string} 'portrait' or 'landscape'
  */
 export function getImageOrientation(width, height) {
-  return height > width ? 'portrait' : 'landscape';
+  return height > width ? ORIENTATIONS.PORTRAIT : ORIENTATIONS.LANDSCAPE;
 }
 
 /**
diff --git a/src/utils/constants.js b/src/utils/constants.js
index 11b16a7..c5ea563 100644
--- a/src/utils/constants.js
+++ b/src/utils/constants.js
@@ -23,6 +23,26 @@ export const ORIENTATIONS = {
   LANDSCAPE: 'landscape',
 };
 
+/**
+ * Background color preset options
+ * @constant {Object}
+ */
+export const COLOR_PRESETS = {
+  WHITE: '#FFFFFF',
+  BLACK: '#000000',
+  GRAY: '#808080',
+};
+
+/**
+ * Color picker mode values
+ * @constant {Object}
+ */
+export const COLOR_MODES = {
+  WHITE: 'white',
+  BLACK: 'black',
+  CUSTOM: 'custom',
+};
+
 /**
  * Default frame configuration
  * @constant {Object}
@@ -30,9 +50,9 @@ export const ORIENTATIONS = {
 export const DEFAULT_CONFIG = {
   orientation: 'portrait',
   aspectRatio: '3:2',
-  backgroundColor: '#FFFFFF',
+  backgroundColor: COLOR_PRESETS.WHITE,
   frameSize: 2048, // Size of the longest side (height for portrait, width for landscape)
-  spacing: 20,
+  borderPercentage: 2, // Border as percentage of frame size (1-25)
 };
 
 /**
@@ -41,20 +61,26 @@ export const DEFAULT_CONFIG = {
  */
 export const IMAGE_CONSTRAINTS = {
   maxFileSize: 40 * 1024 * 1024, // 40MB
-  minDimension: 800,
   supportedFormats: ['image/jpeg', 'image/png', 'image/webp'],
-  aspectRatioTolerance: 0.05, // 5%
 };
 
+/**
+ * Frame size options for export
+ * @constant {Array.<Object>}
+ */
+export const FRAME_SIZE_OPTIONS = [
+  { label: '1024px', value: 1024 },
+  { label: '2048px', value: 2048 },
+  { label: '4096px', value: 4096 }
+];
+
 /**
  * Frame dimension constraints
  * @constant {Object}
  */
 export const FRAME_CONSTRAINTS = {
-  minSize: 800,
-  maxSize: 10000,
-  minSpacing: 0,
-  maxSpacing: 500,
+  minBorderPercentage: 1,
+  maxBorderPercentage: 25,
 };
 
 /**
@@ -70,8 +96,9 @@ export const PREVIEW_CONSTRAINTS = {
  * @constant {Array.<Object>}
  */
 export const IMAGE_FORMATS = [
-  { mimeType: 'image/png', extension: 'png' },
-  { mimeType: 'image/jpeg', extension: 'jpeg' },
+  { mimeType: 'image/png', extension: 'png', label: 'PNG' },
+  { mimeType: 'image/jpeg', extension: 'jpeg', label: 'JPEG' },
+  { mimeType: 'image/webp', extension: 'webp', label: 'WebP' },
 ];
 
 export const EXPORT_DEFAULT = {
@@ -79,5 +106,3 @@ export const EXPORT_DEFAULT = {
   defaultFileName: 'framed',
   defaultFormat: IMAGE_FORMATS[0].mimeType,
 };
-
-export const FILE_NAME_VALIDATOR = /^[\w,\s-]+$/;
diff --git a/src/utils/logger.js b/src/utils/logger.js
new file mode 100644
index 0000000..b610b8e
--- /dev/null
+++ b/src/utils/logger.js
@@ -0,0 +1,20 @@
+/**
+ * Logger utility
+ * Provides logging methods that can be disabled in production
+ */
+
+/**
+ * Check if we're in production mode
+ */
+const isProduction = import.meta.env.PROD;
+
+/**
+ * Log error message
+ * In production, errors are silently ignored to avoid exposing implementation details
+ * @param  {...any} args - Arguments to log
+ */
+export const logError = (...args) => {
+  if (!isProduction) {
+    console.error(...args);
+  }
+};
diff --git a/src/utils/validation.js b/src/utils/validation.js
index f90d365..f7f243d 100644
--- a/src/utils/validation.js
+++ b/src/utils/validation.js
@@ -2,7 +2,7 @@
  * Validation utilities for images and configuration
  */
 
-import { IMAGE_CONSTRAINTS, FILE_NAME_VALIDATOR } from './constants.js';
+import { IMAGE_CONSTRAINTS } from './constants.js';
 
 /**
  * Validate image file before upload
@@ -35,89 +35,47 @@ export function validateFile(file) {
 }
 
 /**
- * Validate image dimensions meet minimum requirements
- * @param {number} width - Image width in pixels
- * @param {number} height - Image height in pixels
- * @returns {Object} Validation result {valid: boolean, error?: string}
+ * Extract valid filename characters from a filename
+ * @param {string} filename - Original filename with extension
+ * @returns {string} Valid characters (1-10 chars), or empty string if none
  */
-export function validateImageDimensions(width, height) {
-  const minDim = IMAGE_CONSTRAINTS.minDimension;
-  const shortestSide = Math.min(width, height);
-
-  if (shortestSide < minDim) {
-    return {
-      valid: false,
-      error:
-        `Image must be at least ${minDim}px on the shortest side. ` + `Current: ${shortestSide}px`,
-    };
-  }
+export function extractValidFilenameChars(filename) {
+  if (!filename) return '';
 
-  return { valid: true };
-}
+  // Remove extension
+  const nameWithoutExt = filename.replace(/\.[^/.]+$/, '');
 
-/**
- * Validate frame size (longest side) is within acceptable range
- * @param {number} size - Frame size in pixels
- * @param {number} minSize - Minimum allowed size
- * @param {number} maxSize - Maximum allowed size
- * @returns {Object} Validation result {valid: boolean, error?: string, clamped?: number}
- */
-export function validateFrameSize(size, minSize = 800, maxSize = 10000) {
-  if (size < minSize) {
-    return {
-      valid: false,
-      error: `Frame size must be at least ${minSize}px`,
-      clamped: minSize,
-    };
-  }
-
-  if (size > maxSize) {
-    return {
-      valid: false,
-      error: `Frame size must not exceed ${maxSize}px`,
-      clamped: maxSize,
-    };
-  }
+  // Extract only valid characters (alphanumeric, spaces, underscore, dash, comma)
+  const validChars = nameWithoutExt.replace(/[^\w,\s-]/g, '');
 
-  return { valid: true };
+  // Return first 10 characters, min 1, max 10
+  return validChars.slice(0, 10);
 }
 
+// Counter for ensuring uniqueness when generating UUIDs in rapid succession
+let uuidCounter = 0;
+
 /**
- * Validate spacing is within acceptable range
- * @param {number} size - Spacing size in pixels
- * @param {number} minSize - Minimum allowed size
- * @param {number} maxSize - Maximum allowed size
- * @returns {Object} Validation result {valid: boolean, error?: string, clamped?: number}
+ * Generate UUID v1 (time-based)
+ * Returns first 8 characters of UUID v1
+ * @returns {string} First 8 characters of UUID v1
  */
-export function validateSpacing(size, minSize = 0, maxSize = 500) {
-  if (size < minSize) {
-    return {
-      valid: false,
-      error: `Spacing must be at least ${minSize}px`,
-      clamped: minSize,
-    };
-  }
-
-  if (size > maxSize) {
-    return {
-      valid: false,
-      error: `Spacing must not exceed ${maxSize}px`,
-      clamped: maxSize,
-    };
-  }
+export function generateUuidV1Short() {
+  // UUID v1 format: time_low-time_mid-time_hi_and_version-clock_seq-node
+  const timestamp = Date.now();
+  const timeHex = timestamp.toString(16).padStart(12, '0');
 
-  return { valid: true };
-}
+  // Increment counter for uniqueness in rapid succession
+  uuidCounter = (uuidCounter + 1) % 0xffff;
 
-export function validateFileName(value) {
-  const validator = FILE_NAME_VALIDATOR;
+  // Add random component and counter for uniqueness
+  const random = Math.floor(Math.random() * 0xffff)
+    .toString(16)
+    .padStart(4, '0');
+  const counter = uuidCounter.toString(16).padStart(4, '0');
 
-  if (!validator.test(value)) {
-    return {
-      valid: false,
-      error: 'Invalid filename. Only alphanumeric, spaces, underscope, and dashes are allowed',
-    };
-  }
+  // Construct UUID v1-like identifier (simplified version)
+  const uuid = `${timeHex.slice(-6)}${counter}${random}`;
 
-  return { valid: true };
+  return uuid.slice(0, 8);
 }
\ No newline at end of file
diff --git a/tests/unit/App.test.js b/tests/unit/App.test.js
index b9686ee..a5175d7 100644
--- a/tests/unit/App.test.js
+++ b/tests/unit/App.test.js
@@ -1,8 +1,28 @@
 import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
 import { mount } from '@vue/test-utils';
+import { ref } from 'vue';
 import App from '@/App.vue';
 import { PREVIEW_CONSTRAINTS } from '@/utils/constants';
 
+// Mock useFrameConfig composable
+vi.mock('@/composables/useFrameConfig', () => ({
+  useFrameConfig: () => ({
+    frameWidth: ref(1000),
+    frameHeight: ref(750),
+    orientation: ref('landscape'),
+    aspectRatio: ref('4:3'),
+    frameSize: ref(1000),
+    borderPercentage: ref(2),
+    frameColor: ref('#ffffff'),
+    backgroundColor: ref('#000000'),
+    updateBackgroundColor: vi.fn(),
+    updateAspectRatio: vi.fn(),
+    updateFrameSize: vi.fn(),
+    updateBorderPercentage: vi.fn(),
+    reset: vi.fn(),
+  }),
+}));
+
 describe('App.vue - Window Resize', () => {
   let mockResizeObserver;
   let resizeObserverCallback;
@@ -24,6 +44,28 @@ describe('App.vue - Window Resize', () => {
       return id;
     });
     global.cancelAnimationFrame = vi.fn();
+
+    // Mock window.matchMedia
+    global.window.matchMedia = vi.fn((query) => ({
+      matches: query === '(min-width: 768px)',
+      media: query,
+      onchange: null,
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+      dispatchEvent: vi.fn(),
+    }));
+
+    // Mock window dimensions (default to desktop size)
+    Object.defineProperty(window, 'innerWidth', {
+      writable: true,
+      configurable: true,
+      value: 1280,
+    });
+    Object.defineProperty(window, 'innerHeight', {
+      writable: true,
+      configurable: true,
+      value: 800,
+    });
   });
 
   afterEach(() => {
@@ -31,105 +73,156 @@ describe('App.vue - Window Resize', () => {
   });
 
   describe('updatePreviewWidth()', () => {
-    it('does nothing when mainContentRef is not set', () => {
+    it('calculates preview width from window dimensions', () => {
       const wrapper = mount(App);
-      const initialWidth = wrapper.vm.previewWidth;
 
-      wrapper.vm.mainContentRef = null;
-      wrapper.vm.updatePreviewWidth();
+      // Mock window dimensions
+      window.innerWidth = 1280;
+      window.innerHeight = 800;
 
-      expect(wrapper.vm.previewWidth).toBe(initialWidth);
-    });
-
-    it('calculates preview width from container width', () => {
-      const wrapper = mount(App);
-
-      // Mock mainContentRef with specific width
-      wrapper.vm.mainContentRef = {
-        clientWidth: 1000,
+      // Mock asideRef with sidebar width (desktop: 320px)
+      wrapper.vm.asideRef = {
+        clientWidth: 320,
+        clientHeight: 100,
       };
 
       wrapper.vm.updatePreviewWidth();
 
-      // Container: 1000px
-      // Effective width: min(1000, 1024) = 1000
-      // Available width: 1000 - 32 - 48 = 920
-      // Preview width: min(920, 800) = 800
+      // Desktop mode: Window: 1280px x 800px, Aside: 320px wide
+      // Available width: 1280 - 320 = 960, minus padding: 960 - 32 = 928
+      // Available height: 800, minus padding: 800 - 32 = 768
+      // Frame: 1000px x 750px
+      // Scale by width: 928 / 1000 = 0.928
+      // Scale by height: 768 / 750 = 1.024
+      // Use min scale: 0.928
+      // Scaled width: 1000 * 0.928 = 928
+      // Preview width: min(928, 800) = 800
       expect(wrapper.vm.previewWidth).toBe(800);
     });
 
-    it('caps at max width of 1024px', () => {
+    it('caps at max width of 800px', () => {
       const wrapper = mount(App);
 
-      wrapper.vm.mainContentRef = {
-        clientWidth: 2000,
+      // Large window
+      window.innerWidth = 2000;
+      window.innerHeight = 1500;
+
+      wrapper.vm.asideRef = {
+        clientWidth: 320,
+        clientHeight: 100,
       };
 
       wrapper.vm.updatePreviewWidth();
 
-      // Container: 2000px
-      // Effective width: min(2000, 1024) = 1024
-      // Available width: 1024 - 32 - 48 = 944
-      // Preview width: min(944, 800) = 800
+      // Desktop mode: Window: 2000px x 1500px, Aside: 320px
+      // Available width: 2000 - 320 - 32 = 1648
+      // Available height: 1500 - 32 = 1468
+      // Frame: 1000px x 750px
+      // Scale by width: 1648 / 1000 = 1.648
+      // Scale by height: 1468 / 750 = 1.957
+      // Use min scale: 1.648
+      // Scaled width: 1000 * 1.648 = 1648
+      // Preview width: min(1648, 800) = 800 (capped)
       expect(wrapper.vm.previewWidth).toBe(800);
     });
 
-    it('subtracts padding from available width', () => {
+    it('subtracts padding and aside from available space', () => {
       const wrapper = mount(App);
 
-      wrapper.vm.mainContentRef = {
-        clientWidth: 500,
+      // Small window
+      window.innerWidth = 820;
+      window.innerHeight = 600;
+
+      wrapper.vm.asideRef = {
+        clientWidth: 320,
+        clientHeight: 100,
       };
 
       wrapper.vm.updatePreviewWidth();
 
-      // Container: 500px
-      // Effective width: min(500, 1024) = 500
-      // Available width: 500 - 32 - 48 = 420
-      // Preview width: min(420, 800) = 420
-      expect(wrapper.vm.previewWidth).toBe(420);
+      // Desktop mode: Window: 820px x 600px, Aside: 320px
+      // Available width: 820 - 320 - 32 = 468
+      // Available height: 600 - 32 = 568
+      // Frame: 1000px x 750px
+      // Scale by width: 468 / 1000 = 0.468
+      // Scale by height: 568 / 750 = 0.757
+      // Use min scale: 0.468
+      // Scaled width: 1000 * 0.468 = 468
+      expect(wrapper.vm.previewWidth).toBe(468);
     });
 
     it('caps at PREVIEW_CONSTRAINTS.defaultWidth', () => {
       const wrapper = mount(App);
 
-      wrapper.vm.mainContentRef = {
-        clientWidth: 1024,
+      window.innerWidth = 1520;
+      window.innerHeight = 900;
+
+      wrapper.vm.asideRef = {
+        clientWidth: 320,
+        clientHeight: 100,
       };
 
       wrapper.vm.updatePreviewWidth();
 
-      // Container: 1024px
-      // Effective width: min(1024, 1024) = 1024
-      // Available width: 1024 - 32 - 48 = 944
-      // Preview width: min(944, 800) = 800
+      // Desktop mode: Window: 1520px x 900px, Aside: 320px
+      // Available width: 1520 - 320 - 32 = 1168
+      // Available height: 900 - 32 = 868
+      // Frame: 1000px x 750px
+      // Scale by width: 1168 / 1000 = 1.168
+      // Scale by height: 868 / 750 = 1.157
+      // Use min scale: 1.157
+      // Scaled width: 1000 * 1.157 = 1157
+      // Preview width: min(1157, 800) = 800 (capped)
       expect(wrapper.vm.previewWidth).toBe(PREVIEW_CONSTRAINTS.defaultWidth);
     });
 
-    it('handles small container widths', () => {
+    it('handles mobile mode with bottom aside', () => {
       const wrapper = mount(App);
 
-      wrapper.vm.mainContentRef = {
-        clientWidth: 200,
+      // Mock mobile mode for small screens
+      global.window.matchMedia = vi.fn((query) => ({
+        matches: false, // Mobile mode
+        media: query,
+        onchange: null,
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
+        dispatchEvent: vi.fn(),
+      }));
+
+      window.innerWidth = 400;
+      window.innerHeight = 800;
+
+      wrapper.vm.asideRef = {
+        clientWidth: 400,
+        clientHeight: 150, // Bottom aside height
       };
 
       wrapper.vm.updatePreviewWidth();
 
-      // Container: 200px
-      // Effective width: min(200, 1024) = 200
-      // Available width: 200 - 32 - 48 = 120
-      // Preview width: min(120, 800) = 120
-      expect(wrapper.vm.previewWidth).toBe(120);
+      // Mobile mode: Window: 400px x 800px, Aside: 150px height at bottom
+      // Available width: 400 - 32 = 368
+      // Available height: 800 - 150 - 32 = 618
+      // Frame: 1000px x 750px
+      // Scale by width: 368 / 1000 = 0.368
+      // Scale by height: 618 / 750 = 0.824
+      // Use min scale: 0.368
+      // Scaled width: 1000 * 0.368 = 368
+      expect(wrapper.vm.previewWidth).toBe(368);
     });
 
     it('handles exact default width scenario', () => {
       const wrapper = mount(App);
 
       // To get exactly 800px preview width:
-      // Available width = 800
-      // Container width = 800 + 32 + 48 = 880
-      wrapper.vm.mainContentRef = {
-        clientWidth: 880,
+      // Need scale of 0.8 (800 / 1000)
+      // Available width needed: 1000 * 0.8 = 800
+      // Window width: 800 + 320 (aside) + 32 (padding) = 1152
+      window.innerWidth = 1152;
+      window.innerHeight = 900;
+
+      wrapper.vm.asideRef = {
+        clientWidth: 320,
+        clientHeight: 100,
       };
 
       wrapper.vm.updatePreviewWidth();
@@ -142,9 +235,12 @@ describe('App.vue - Window Resize', () => {
     it('calls updatePreviewWidth on mount', () => {
       const wrapper = mount(App);
 
-      // Mock mainContentRef
-      wrapper.vm.mainContentRef = {
-        clientWidth: 1000,
+      window.innerWidth = 1280;
+      window.innerHeight = 800;
+
+      wrapper.vm.asideRef = {
+        clientWidth: 320,
+        clientHeight: 100,
       };
 
       // Manually trigger mounted behavior
@@ -175,7 +271,9 @@ describe('App.vue - Window Resize', () => {
       await wrapper.vm.$nextTick();
 
       if (resizeObserverCallback) {
-        wrapper.vm.mainContentRef = { clientWidth: 1000 };
+        window.innerWidth = 1280;
+        window.innerHeight = 800;
+        wrapper.vm.asideRef = { clientWidth: 320, clientHeight: 100 };
         resizeObserverCallback();
         expect(global.requestAnimationFrame).toHaveBeenCalled();
       }
@@ -186,7 +284,9 @@ describe('App.vue - Window Resize', () => {
       await wrapper.vm.$nextTick();
 
       if (resizeObserverCallback) {
-        wrapper.vm.mainContentRef = { clientWidth: 1000 };
+        window.innerWidth = 1280;
+        window.innerHeight = 800;
+        wrapper.vm.asideRef = { clientWidth: 320, clientHeight: 100 };
 
         // First resize
         resizeObserverCallback();
@@ -300,7 +400,9 @@ describe('App.vue - Window Resize', () => {
       await wrapper.vm.$nextTick();
 
       if (resizeObserverCallback) {
-        wrapper.vm.mainContentRef = { clientWidth: 1000 };
+        window.innerWidth = 1280;
+        window.innerHeight = 800;
+        wrapper.vm.asideRef = { clientWidth: 320, clientHeight: 100 };
 
         // Simulate rapid resize events
         resizeObserverCallback();
@@ -317,62 +419,97 @@ describe('App.vue - Window Resize', () => {
       await wrapper.vm.$nextTick();
 
       if (resizeObserverCallback) {
-        
-
-        wrapper.vm.mainContentRef = { clientWidth: 600 };
+        window.innerWidth = 920;
+        window.innerHeight = 800;
+        wrapper.vm.asideRef = { clientWidth: 320, clientHeight: 100 };
         resizeObserverCallback();
 
         // Width should be updated (via requestAnimationFrame callback)
-        // Available width: 600 - 32 - 48 = 520
-        expect(wrapper.vm.previewWidth).toBe(520);
+        // Desktop mode: Window: 920px x 800px, Aside: 320px
+        // Available width: 920 - 320 - 32 = 568
+        // Available height: 800 - 32 = 768
+        // Frame: 1000px x 750px
+        // Scale by width: 568 / 1000 = 0.568
+        // Scale by height: 768 / 750 = 1.024
+        // Use min scale: 0.568
+        // Scaled width: 1000 * 0.568 = 568
+        expect(wrapper.vm.previewWidth).toBe(568);
       }
     });
   });
 
   describe('Edge Cases', () => {
-    it('handles zero width container', () => {
+    it('handles very small window width', () => {
       const wrapper = mount(App);
 
-      wrapper.vm.mainContentRef = {
-        clientWidth: 0,
+      window.innerWidth = 368;
+      window.innerHeight = 800;
+
+      wrapper.vm.asideRef = {
+        clientWidth: 320,
+        clientHeight: 100,
       };
 
       wrapper.vm.updatePreviewWidth();
 
-      // Container: 0px
-      // Effective width: min(0, 1024) = 0
-      // Available width: 0 - 32 - 48 = -80
-      // Preview width: min(-80, 800) = -80
-      expect(wrapper.vm.previewWidth).toBeLessThan(0);
+      // Desktop mode: Window: 368px x 800px, Aside: 320px
+      // Available width: 368 - 320 - 32 = 16
+      // Available height: 800 - 32 = 768
+      // Scale by width: 16 / 1000 = 0.016
+      // Scale by height: 768 / 750 = 1.024
+      // Use min scale: 0.016
+      // Scaled width: 1000 * 0.016 = 16
+      expect(wrapper.vm.previewWidth).toBe(16);
     });
 
-    it('handles very large container width', () => {
+    it('handles very large window dimensions', () => {
       const wrapper = mount(App);
 
-      wrapper.vm.mainContentRef = {
-        clientWidth: 10000,
+      window.innerWidth = 10000;
+      window.innerHeight = 8000;
+
+      wrapper.vm.asideRef = {
+        clientWidth: 320,
+        clientHeight: 100,
       };
 
       wrapper.vm.updatePreviewWidth();
 
-      // Still capped at 1024 max width, then 800 preview max
+      // Desktop mode: Window: 10000px x 8000px, Aside: 320px
+      // Available width: 10000 - 320 - 32 = 9648
+      // Available height: 8000 - 32 = 7968
+      // Frame: 1000px x 750px
+      // Scale by width: 9648 / 1000 = 9.648
+      // Scale by height: 7968 / 750 = 10.624
+      // Use min scale: 9.648
+      // Scaled width: 1000 * 9.648 = 9648
+      // Capped at 800
       expect(wrapper.vm.previewWidth).toBe(800);
     });
 
-    it('handles negative width scenarios gracefully', () => {
+    it('handles small window with aside', () => {
       const wrapper = mount(App);
 
-      wrapper.vm.mainContentRef = {
-        clientWidth: 50, // Less than padding total (80)
+      window.innerWidth = 620;
+      window.innerHeight = 600;
+
+      wrapper.vm.asideRef = {
+        clientWidth: 320,
+        clientHeight: 100,
       };
 
       wrapper.vm.updatePreviewWidth();
 
-      // Container: 50px
-      // Effective width: min(50, 1024) = 50
-      // Available width: 50 - 32 - 48 = -30
-      // Preview width: min(-30, 800) = -30
-      expect(wrapper.vm.previewWidth).toBe(-30);
+      // Desktop mode: Window: 620px x 600px, Aside: 320px
+      // Available width: 620 - 320 - 32 = 268
+      // Available height: 600 - 32 = 568
+      // Frame: 1000px x 750px
+      // Scale by width: 268 / 1000 = 0.268
+      // Scale by height: 568 / 750 = 0.757
+      // Use min scale: 0.268
+      // Scaled width: 1000 * 0.268 = 268
+      expect(wrapper.vm.previewWidth).toBe(268);
     });
   });
+
 });
diff --git a/tests/unit/components/canvas/FrameCanvas.test.js b/tests/unit/components/canvas/FrameCanvas.test.js
index e16fc9c..b0cb607 100644
--- a/tests/unit/components/canvas/FrameCanvas.test.js
+++ b/tests/unit/components/canvas/FrameCanvas.test.js
@@ -4,6 +4,7 @@ import { mount } from '@vue/test-utils';
 import FrameCanvas from '@/components/canvas/FrameCanvas.vue';
 import { useImageState } from '@/composables/useImageState';
 import { useFrameConfig } from '@/composables/useFrameConfig';
+import { ORIENTATIONS } from '@/utils/constants';
 
 // Mock Image class for testing
 class MockImage {
@@ -63,74 +64,6 @@ describe('FrameCanvas', () => {
       frameConfig = useFrameConfig();
     });
 
-    describe('Rendering', () => {
-      it('renders with default props', () => {
-        const wrapper = mount(FrameCanvas);
-        expect(wrapper.exists()).toBe(true);
-      });
-
-      it('renders with custom testId', () => {
-        const wrapper = mount(FrameCanvas, {
-          props: { testId: 'custom-canvas' },
-        });
-        expect(wrapper.find('[data-testid="custom-canvas"]').exists()).toBe(true);
-      });
-
-      it('renders with custom previewWidth', () => {
-        const wrapper = mount(FrameCanvas, {
-          props: { previewWidth: 1000 },
-        });
-        expect(wrapper.exists()).toBe(true);
-      });
-
-      it('shows canvas placeholder when stageConfig is not ready', () => {
-        const wrapper = mount(FrameCanvas);
-        // Canvas may initialize immediately, so check if either placeholder or stage exists
-        const hasPlaceholder = wrapper.find('[data-testid="canvas-placeholder"]').exists();
-        const hasStage = wrapper.find('[data-testid="konva-stage"]').exists();
-        expect(hasPlaceholder || hasStage).toBe(true);
-      });
-
-      it('shows konva stage when stageConfig is ready', async () => {
-        const wrapper = mount(FrameCanvas, {
-          props: { previewWidth: 800 },
-        });
-
-        // Wait for composable to initialize
-        await nextTick();
-        await nextTick();
-
-        if (wrapper.find('[data-testid="konva-stage"]').exists()) {
-          expect(wrapper.find('[data-testid="konva-stage"]').exists()).toBe(true);
-        }
-      });
-    });
-
-    describe('Props', () => {
-      it('accepts previewWidth prop', () => {
-        const wrapper = mount(FrameCanvas, {
-          props: { previewWidth: 1200 },
-        });
-        expect(wrapper.props('previewWidth')).toBe(1200);
-      });
-
-      it('uses default previewWidth when not provided', () => {
-        const wrapper = mount(FrameCanvas);
-        expect(wrapper.props('previewWidth')).toBe(800);
-      });
-
-      it('accepts testId prop', () => {
-        const wrapper = mount(FrameCanvas, {
-          props: { testId: 'my-canvas' },
-        });
-        expect(wrapper.props('testId')).toBe('my-canvas');
-      });
-
-      it('uses default testId when not provided', () => {
-        const wrapper = mount(FrameCanvas);
-        expect(wrapper.props('testId')).toBe('frame-canvas');
-      });
-    });
 
     describe('Image Watchers', () => {
       it('creates image element when image is added to position 0', async () => {
@@ -254,18 +187,6 @@ describe('FrameCanvas', () => {
       });
     });
 
-    describe('File Input Interaction', () => {
-      it('has file inputs for both positions', () => {
-        const wrapper = mount(FrameCanvas);
-        expect(wrapper.vm.fileInput1).toBeDefined();
-        expect(wrapper.vm.fileInput2).toBeDefined();
-      });
-
-      it('triggerFileInput method exists', () => {
-        const wrapper = mount(FrameCanvas);
-        expect(typeof wrapper.vm.triggerFileInput).toBe('function');
-      });
-    });
 
     describe('Drag and Drop State', () => {
       it('initializes dragOver state as false for both positions', () => {
@@ -322,28 +243,14 @@ describe('FrameCanvas', () => {
     });
 
     describe('Integration with Composables', () => {
-      it('uses useCanvasRenderer composable', () => {
-        const wrapper = mount(FrameCanvas);
-        expect(wrapper.vm.stageConfig).toBeDefined();
-        expect(wrapper.vm.backgroundConfig).toBeDefined();
-      });
-
-      it('uses useImageState composable', () => {
-        const wrapper = mount(FrameCanvas);
-        expect(wrapper.vm.images).toBeDefined();
-      });
-
-      it('uses useFrameConfig composable', () => {
-        const wrapper = mount(FrameCanvas);
-        expect(wrapper.vm.orientation).toBeDefined();
-      });
-
       it('responds to orientation changes', async () => {
         const wrapper = mount(FrameCanvas);
         const initialOrientation = wrapper.vm.orientation;
 
         frameConfig.updateOrientation(
-          initialOrientation === 'portrait' ? 'landscape' : 'portrait'
+          initialOrientation === ORIENTATIONS.PORTRAIT
+            ? ORIENTATIONS.LANDSCAPE
+            : ORIENTATIONS.PORTRAIT
         );
         await nextTick();
 
@@ -383,62 +290,6 @@ describe('FrameCanvas', () => {
 
         expect(imageState.images.value[1]).toBe(null);
       });
-
-      it('calls removeImage without errors', async () => {
-        const wrapper = mount(FrameCanvas);
-
-        imageState.images.value[0] = {
-          dataUrl: 'data:image/png;base64,test',
-          width: 800,
-          height: 600,
-        };
-        await nextTick();
-
-        // Just verify the method works without error
-        expect(() => wrapper.vm.removeImage(0)).not.toThrow();
-      });
-    });
-
-    describe('getCanvasContainerStyle', () => {
-      it('returns style object with dimensions', () => {
-        const wrapper = mount(FrameCanvas);
-        const style = wrapper.vm.getCanvasContainerStyle();
-        expect(style).toBeDefined();
-      });
-    });
-
-    describe('getUploadZoneStyle', () => {
-      it('calculates zone style for image layout', () => {
-        const wrapper = mount(FrameCanvas);
-        if (wrapper.vm.imageLayout) {
-          const style = wrapper.vm.getUploadZoneStyle(wrapper.vm.imageLayout.image1, 0);
-          expect(style).toBeDefined();
-        }
-      });
-    });
-
-    describe('getUploadZoneClass', () => {
-      it('returns class object for zone 0', () => {
-        const wrapper = mount(FrameCanvas);
-        const classes = wrapper.vm.getUploadZoneClass(0);
-        expect(classes).toBeDefined();
-        expect(typeof classes).toBe('object');
-      });
-
-      it('returns class object for zone 1', () => {
-        const wrapper = mount(FrameCanvas);
-        const classes = wrapper.vm.getUploadZoneClass(1);
-        expect(classes).toBeDefined();
-        expect(typeof classes).toBe('object');
-      });
-    });
-
-    describe('getStage', () => {
-      it('getStage method exists', () => {
-        const wrapper = mount(FrameCanvas);
-        // Just verify the method exists
-        expect(typeof wrapper.vm.getStage).toBe('function');
-      });
     });
   });
 });
diff --git a/tests/unit/components/canvas/ImageUploadZone.test.js b/tests/unit/components/canvas/ImageUploadZone.test.js
index f582a4a..c9a9a27 100644
--- a/tests/unit/components/canvas/ImageUploadZone.test.js
+++ b/tests/unit/components/canvas/ImageUploadZone.test.js
@@ -54,14 +54,6 @@ describe('ImageUploadZone', () => {
       expect(wrapper.find('.image-upload-zone').exists()).toBe(true);
     });
 
-    it('renders with default test ID', () => {
-      const wrapper = mount(ImageUploadZone, {
-        props: { position: 0 },
-      });
-
-      expect(wrapper.attributes('data-testid')).toBe('image-upload-zone');
-    });
-
     it('renders with custom test ID', () => {
       const wrapper = mount(ImageUploadZone, {
         props: { position: 0, testId: 'custom-upload' },
@@ -78,25 +70,6 @@ describe('ImageUploadZone', () => {
       const input = wrapper.find('[data-testid="custom-upload-input"]');
       expect(input.exists()).toBe(true);
     });
-
-    it('renders hidden file input', () => {
-      const wrapper = mount(ImageUploadZone, {
-        props: { position: 0 },
-      });
-
-      const input = wrapper.find('input[type="file"]');
-      expect(input.exists()).toBe(true);
-      expect(input.classes()).toContain('hidden');
-    });
-
-    it('sets correct accepted file types', () => {
-      const wrapper = mount(ImageUploadZone, {
-        props: { position: 0 },
-      });
-
-      const input = wrapper.find('input[type="file"]');
-      expect(input.attributes('accept')).toBe('image/jpeg,image/png,image/webp');
-    });
   });
 
   describe('Upload Content for Position 0', () => {
@@ -107,31 +80,6 @@ describe('ImageUploadZone', () => {
 
       expect(wrapper.text()).toContain('Upload First Image');
     });
-
-    it('displays upload icon', () => {
-      const wrapper = mount(ImageUploadZone, {
-        props: { position: 0 },
-      });
-
-      expect(wrapper.find('svg[aria-hidden="true"]').exists()).toBe(true);
-    });
-
-    it('displays drag and drop instruction', () => {
-      const wrapper = mount(ImageUploadZone, {
-        props: { position: 0 },
-      });
-
-      expect(wrapper.text()).toContain('Click or drag & drop');
-    });
-
-    it('displays file format and size information', () => {
-      const wrapper = mount(ImageUploadZone, {
-        props: { position: 0 },
-      });
-
-      expect(wrapper.text()).toContain('JPEG, PNG, or WebP');
-      expect(wrapper.text()).toContain('max 10MB');
-    });
   });
 
   describe('Upload Content for Position 1', () => {
@@ -142,14 +90,6 @@ describe('ImageUploadZone', () => {
 
       expect(wrapper.text()).toContain('Upload Second Image');
     });
-
-    it('validates position prop', () => {
-      const wrapper = mount(ImageUploadZone, {
-        props: { position: 0 },
-      });
-
-      expect([0, 1]).toContain(wrapper.vm.position);
-    });
   });
 
   describe('Click to Upload', () => {
@@ -323,77 +263,6 @@ describe('ImageUploadZone', () => {
   });
 
   describe('Image Preview', () => {
-    it('shows image preview when image is uploaded', async () => {
-      const wrapper = mount(ImageUploadZone, {
-        props: { position: 0 },
-      });
-
-      const file = new File(['test'], 'test.jpg', { type: 'image/jpeg' });
-      await imageState.addImage(file, 0);
-      await new Promise((resolve) => setTimeout(resolve, 10));
-      await wrapper.vm.$nextTick();
-
-      expect(wrapper.find('.image-preview').exists()).toBe(true);
-      expect(wrapper.find('.upload-content').exists()).toBe(false);
-    });
-
-    it('displays uploaded image', async () => {
-      const wrapper = mount(ImageUploadZone, {
-        props: { position: 0 },
-      });
-
-      const file = new File(['test'], 'test.jpg', { type: 'image/jpeg' });
-      await imageState.addImage(file, 0);
-      await new Promise((resolve) => setTimeout(resolve, 10));
-      await wrapper.vm.$nextTick();
-
-      const img = wrapper.find('img');
-      expect(img.exists()).toBe(true);
-      expect(img.attributes('src')).toContain('data:image');
-    });
-
-    it('sets correct alt text for image', async () => {
-      const wrapper = mount(ImageUploadZone, {
-        props: { position: 0 },
-      });
-
-      const file = new File(['test'], 'test.jpg', { type: 'image/jpeg' });
-      await imageState.addImage(file, 0);
-      await new Promise((resolve) => setTimeout(resolve, 10));
-      await wrapper.vm.$nextTick();
-
-      const img = wrapper.find('img');
-      expect(img.attributes('alt')).toBe('Uploaded image 1');
-    });
-
-    it('sets correct alt text for second image', async () => {
-      const wrapper = mount(ImageUploadZone, {
-        props: { position: 1 },
-      });
-
-      const file = new File(['test'], 'test.jpg', { type: 'image/jpeg' });
-      await imageState.addImage(file, 1);
-      await new Promise((resolve) => setTimeout(resolve, 10));
-      await wrapper.vm.$nextTick();
-
-      const img = wrapper.find('img');
-      expect(img.attributes('alt')).toBe('Uploaded image 2');
-    });
-
-    it('shows remove button when image is uploaded', async () => {
-      const wrapper = mount(ImageUploadZone, {
-        props: { position: 0 },
-      });
-
-      const file = new File(['test'], 'test.jpg', { type: 'image/jpeg' });
-      await imageState.addImage(file, 0);
-      await new Promise((resolve) => setTimeout(resolve, 10));
-      await wrapper.vm.$nextTick();
-
-      const removeButton = wrapper.find('.remove-button');
-      expect(removeButton.exists()).toBe(true);
-    });
-
     it('remove button has correct test ID', async () => {
       const wrapper = mount(ImageUploadZone, {
         props: { position: 0, testId: 'custom-upload' },
@@ -516,18 +385,6 @@ describe('ImageUploadZone', () => {
       expect(wrapper.text()).toContain('Upload failed');
     });
 
-    it('error message has role="alert"', async () => {
-      const wrapper = mount(ImageUploadZone, {
-        props: { position: 0 },
-      });
-
-      wrapper.vm.error = 'Upload failed';
-      await wrapper.vm.$nextTick();
-
-      const errorMsg = wrapper.find('.error-message');
-      expect(errorMsg.attributes('role')).toBe('alert');
-    });
-
     it('can display error message programmatically', async () => {
       const wrapper = mount(ImageUploadZone, {
         props: { position: 0 },
@@ -565,46 +422,6 @@ describe('ImageUploadZone', () => {
     });
   });
 
-  describe('Accessibility', () => {
-    it('remove button has aria-label', async () => {
-      const wrapper = mount(ImageUploadZone, {
-        props: { position: 0 },
-      });
-
-      const file = new File(['test'], 'test.jpg', { type: 'image/jpeg' });
-      await imageState.addImage(file, 0);
-      await new Promise((resolve) => setTimeout(resolve, 10));
-      await wrapper.vm.$nextTick();
-
-      const removeButton = wrapper.find('.remove-button');
-      expect(removeButton.attributes('aria-label')).toBe('Remove image');
-    });
-
-    it('upload icon has aria-hidden', () => {
-      const wrapper = mount(ImageUploadZone, {
-        props: { position: 0 },
-      });
-
-      const svg = wrapper.find('svg[aria-hidden="true"]');
-      expect(svg.exists()).toBe(true);
-    });
-
-    it('remove button is a button element', async () => {
-      const wrapper = mount(ImageUploadZone, {
-        props: { position: 0 },
-      });
-
-      const file = new File(['test'], 'test.jpg', { type: 'image/jpeg' });
-      await imageState.addImage(file, 0);
-      await new Promise((resolve) => setTimeout(resolve, 10));
-      await wrapper.vm.$nextTick();
-
-      const removeButton = wrapper.find('.remove-button');
-      expect(removeButton.element.tagName).toBe('BUTTON');
-      expect(removeButton.attributes('type')).toBe('button');
-    });
-  });
-
   describe('Edge Cases', () => {
     it('handles missing file in change event', async () => {
       const wrapper = mount(ImageUploadZone, {
diff --git a/tests/unit/components/controls/AspectRatioSelector.test.js b/tests/unit/components/controls/AspectRatioSelector.test.js
index 57244d4..d67567f 100644
--- a/tests/unit/components/controls/AspectRatioSelector.test.js
+++ b/tests/unit/components/controls/AspectRatioSelector.test.js
@@ -12,44 +12,7 @@ describe('AspectRatioSelector', () => {
     frameConfig.reset();
   });
 
-  describe('Rendering', () => {
-    it('renders aspect ratio button group', () => {
-      const wrapper = mount(AspectRatioSelector);
-
-      expect(wrapper.find('[role="group"]').exists()).toBe(true);
-    });
-
-    it('renders all aspect ratio buttons', () => {
-      const wrapper = mount(AspectRatioSelector);
-
-      const buttons = wrapper.findAll('button');
-      const ratioCount = Object.keys(ASPECT_RATIOS).length;
-
-      expect(buttons).toHaveLength(ratioCount);
-    });
-
-    it('renders correct button labels', () => {
-      const wrapper = mount(AspectRatioSelector);
-
-      const buttons = wrapper.findAll('button');
-      const buttonTexts = buttons.map((btn) => btn.text());
-
-      expect(buttonTexts).toContain('3:2');
-      expect(buttonTexts).toContain('4:3');
-      expect(buttonTexts).toContain('5:4');
-      expect(buttonTexts).toContain('16:9');
-    });
-  });
-
   describe('Initial Value', () => {
-    it('3:2 button is active by default', () => {
-      const wrapper = mount(AspectRatioSelector);
-
-      const button = wrapper.find('[data-testid="aspect-ratio-3-2"]');
-      expect(button.attributes('aria-pressed')).toBe('true');
-      expect(button.classes()).toContain('btn-active');
-    });
-
     it('reflects current aspect ratio from config', async () => {
       frameConfig.updateAspectRatio('16:9');
 
@@ -144,92 +107,4 @@ describe('AspectRatioSelector', () => {
       expect(button32.attributes('aria-pressed')).toBe('false');
     });
   });
-
-  describe('Accessibility', () => {
-    it('has role group', () => {
-      const wrapper = mount(AspectRatioSelector);
-
-      expect(wrapper.find('[role="group"]').exists()).toBe(true);
-    });
-
-    it('has aria-label on button group', () => {
-      const wrapper = mount(AspectRatioSelector);
-
-      expect(wrapper.find('[role="group"]').attributes('aria-label')).toBe('Frame aspect ratio');
-    });
-
-    it('sets aria-pressed correctly', async () => {
-      const wrapper = mount(AspectRatioSelector);
-
-      const button32 = wrapper.find('[data-testid="aspect-ratio-3-2"]');
-      const button43 = wrapper.find('[data-testid="aspect-ratio-4-3"]');
-
-      expect(button32.attributes('aria-pressed')).toBe('true');
-      expect(button43.attributes('aria-pressed')).toBe('false');
-
-      await button43.trigger('click');
-      await wrapper.vm.$nextTick();
-
-      expect(button32.attributes('aria-pressed')).toBe('false');
-      expect(button43.attributes('aria-pressed')).toBe('true');
-    });
-
-    it('has custom test ID', () => {
-      const wrapper = mount(AspectRatioSelector, {
-        props: { testId: 'custom-ratio' },
-      });
-
-      expect(wrapper.attributes('data-testid')).toBe('custom-ratio');
-    });
-
-    it('all buttons have scoped class with focus ring styles', () => {
-      const wrapper = mount(AspectRatioSelector);
-
-      const buttons = wrapper.findAll('button');
-      buttons.forEach((button) => {
-        // All buttons should have the base class that includes focus:ring in scoped CSS
-        expect(button.classes()).toContain('ratio-btn');
-      });
-    });
-  });
-
-  describe('Visual Consistency', () => {
-    it('active button has btn-active class', () => {
-      const wrapper = mount(AspectRatioSelector);
-
-      const activeButton = wrapper.find('[data-testid="aspect-ratio-3-2"]');
-      expect(activeButton.classes()).toContain('btn-active');
-    });
-
-    it('inactive buttons have btn-inactive class', () => {
-      const wrapper = mount(AspectRatioSelector);
-
-      const inactiveButton = wrapper.find('[data-testid="aspect-ratio-4-3"]');
-      expect(inactiveButton.classes()).toContain('btn-inactive');
-    });
-  });
-
-  describe('Component Structure', () => {
-    it('uses scoped CSS classes', () => {
-      const wrapper = mount(AspectRatioSelector);
-
-      const buttons = wrapper.findAll('button');
-      buttons.forEach((button) => {
-        expect(button.classes()).toContain('ratio-btn');
-      });
-    });
-
-    it('applies btn-active to active button only', () => {
-      const wrapper = mount(AspectRatioSelector);
-
-      const activeButton = wrapper.find('[data-testid="aspect-ratio-3-2"]');
-      const inactiveButton = wrapper.find('[data-testid="aspect-ratio-4-3"]');
-
-      expect(activeButton.classes()).toContain('btn-active');
-      expect(activeButton.classes()).not.toContain('btn-inactive');
-
-      expect(inactiveButton.classes()).toContain('btn-inactive');
-      expect(inactiveButton.classes()).not.toContain('btn-active');
-    });
-  });
 });
diff --git a/tests/unit/components/controls/BorderSlider.test.js b/tests/unit/components/controls/BorderSlider.test.js
new file mode 100644
index 0000000..2ba7e29
--- /dev/null
+++ b/tests/unit/components/controls/BorderSlider.test.js
@@ -0,0 +1,229 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { mount } from '@vue/test-utils';
+import BorderSlider from '@/components/controls/BorderSlider.vue';
+import { useFrameConfig } from '@/composables/useFrameConfig';
+import { FRAME_CONSTRAINTS } from '@/utils/constants';
+
+describe('BorderSlider', () => {
+  let frameConfig;
+
+  beforeEach(() => {
+    frameConfig = useFrameConfig();
+    frameConfig.reset();
+  });
+
+
+  describe('Initial Value', () => {
+    it('displays default border percentage value', () => {
+      const wrapper = mount(BorderSlider);
+      const input = wrapper.find('input[type="range"]');
+      expect(input.element.value).toBe(String(frameConfig.borderPercentage.value));
+    });
+
+    it('displays custom border percentage value from config', async () => {
+      frameConfig.updateBorderPercentage(10);
+
+      const wrapper = mount(BorderSlider);
+      await wrapper.vm.$nextTick();
+
+      const input = wrapper.find('input[type="range"]');
+      expect(input.element.value).toBe('10');
+    });
+
+    it('updates label with current value', () => {
+      frameConfig.updateBorderPercentage(5);
+      const wrapper = mount(BorderSlider);
+
+      const valueLabel = wrapper.find('[data-testid="border-slider-value-label"]');
+      expect(valueLabel.text()).toBe('5');
+    });
+  });
+
+  describe('Value Updates', () => {
+    it('updates border percentage when slider changes', async () => {
+      const wrapper = mount(BorderSlider);
+      const input = wrapper.find('input[type="range"]');
+
+      await input.setValue(10);
+
+      expect(frameConfig.borderPercentage.value).toBe(10);
+    });
+
+    it('updates to minimum value', async () => {
+      const wrapper = mount(BorderSlider);
+      const input = wrapper.find('input[type="range"]');
+
+      await input.setValue(FRAME_CONSTRAINTS.minBorderPercentage);
+
+      expect(frameConfig.borderPercentage.value).toBe(FRAME_CONSTRAINTS.minBorderPercentage);
+    });
+
+    it('updates to maximum value', async () => {
+      const wrapper = mount(BorderSlider);
+      const input = wrapper.find('input[type="range"]');
+
+      await input.setValue(FRAME_CONSTRAINTS.maxBorderPercentage);
+
+      expect(frameConfig.borderPercentage.value).toBe(FRAME_CONSTRAINTS.maxBorderPercentage);
+    });
+
+    it('accepts intermediate values', async () => {
+      const wrapper = mount(BorderSlider);
+      const input = wrapper.find('input[type="range"]');
+
+      await input.setValue(15);
+
+      expect(frameConfig.borderPercentage.value).toBe(15);
+    });
+
+    it('updates label when value changes', async () => {
+      const wrapper = mount(BorderSlider);
+      const input = wrapper.find('input[type="range"]');
+
+      await input.setValue(12);
+      await wrapper.vm.$nextTick();
+
+      const valueLabel = wrapper.find('[data-testid="border-slider-value-label"]');
+      expect(valueLabel.text()).toBe('12');
+    });
+  });
+
+  describe('Reactivity', () => {
+    it('updates input when border percentage changes externally', async () => {
+      const wrapper = mount(BorderSlider);
+
+      frameConfig.updateBorderPercentage(8);
+      await wrapper.vm.$nextTick();
+
+      const input = wrapper.find('input[type="range"]');
+      expect(input.element.value).toBe('8');
+    });
+
+    it('updates label when border percentage changes externally', async () => {
+      const wrapper = mount(BorderSlider);
+
+      frameConfig.updateBorderPercentage(20);
+      await wrapper.vm.$nextTick();
+
+      const valueLabel = wrapper.find('[data-testid="border-slider-value-label"]');
+      expect(valueLabel.text()).toBe('20');
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('handles multiple rapid value changes', async () => {
+      const wrapper = mount(BorderSlider);
+      const input = wrapper.find('input[type="range"]');
+
+      await input.setValue(5);
+      await input.setValue(10);
+      await input.setValue(15);
+      await wrapper.vm.$nextTick();
+
+      expect(frameConfig.borderPercentage.value).toBe(15);
+    });
+
+    it('handles minimum boundary', async () => {
+      const wrapper = mount(BorderSlider);
+      const input = wrapper.find('input[type="range"]');
+
+      await input.setValue(FRAME_CONSTRAINTS.minBorderPercentage);
+      await wrapper.vm.$nextTick();
+
+      expect(frameConfig.borderPercentage.value).toBe(FRAME_CONSTRAINTS.minBorderPercentage);
+      const valueLabel = wrapper.find('[data-testid="border-slider-value-label"]');
+      expect(valueLabel.text()).toBe(String(FRAME_CONSTRAINTS.minBorderPercentage));
+    });
+
+    it('handles maximum boundary', async () => {
+      const wrapper = mount(BorderSlider);
+      const input = wrapper.find('input[type="range"]');
+
+      await input.setValue(FRAME_CONSTRAINTS.maxBorderPercentage);
+      await wrapper.vm.$nextTick();
+
+      expect(frameConfig.borderPercentage.value).toBe(FRAME_CONSTRAINTS.maxBorderPercentage);
+      const valueLabel = wrapper.find('[data-testid="border-slider-value-label"]');
+      expect(valueLabel.text()).toBe(String(FRAME_CONSTRAINTS.maxBorderPercentage));
+    });
+
+    it('handles alternating values', async () => {
+      const wrapper = mount(BorderSlider);
+      const input = wrapper.find('input[type="range"]');
+
+      await input.setValue(3);
+      await wrapper.vm.$nextTick();
+      expect(frameConfig.borderPercentage.value).toBe(3);
+
+      await input.setValue(20);
+      await wrapper.vm.$nextTick();
+      expect(frameConfig.borderPercentage.value).toBe(20);
+
+      await input.setValue(7);
+      await wrapper.vm.$nextTick();
+      expect(frameConfig.borderPercentage.value).toBe(7);
+    });
+
+    it('handles large jumps in value', async () => {
+      const wrapper = mount(BorderSlider);
+      const input = wrapper.find('input[type="range"]');
+
+      await input.setValue(1);
+      await wrapper.vm.$nextTick();
+      expect(frameConfig.borderPercentage.value).toBe(1);
+
+      await input.setValue(25);
+      await wrapper.vm.$nextTick();
+      expect(frameConfig.borderPercentage.value).toBe(25);
+    });
+  });
+
+  describe('Integration', () => {
+    it('works with frame configuration composable', async () => {
+      const wrapper = mount(BorderSlider);
+      const input = wrapper.find('input[type="range"]');
+
+      // Initial state
+      const initialValue = frameConfig.borderPercentage.value;
+
+      // Change value
+      await input.setValue(18);
+
+      // Verify config updated
+      expect(frameConfig.borderPercentage.value).toBe(18);
+      expect(frameConfig.borderPercentage.value).not.toBe(initialValue);
+    });
+
+    it('responds to external config changes', async () => {
+      const wrapper = mount(BorderSlider);
+
+      // Change externally
+      frameConfig.updateBorderPercentage(14);
+      await wrapper.vm.$nextTick();
+
+      // Verify UI updated
+      const input = wrapper.find('input[type="range"]');
+      expect(input.element.value).toBe('14');
+      const valueLabel = wrapper.find('[data-testid="border-slider-value-label"]');
+      expect(valueLabel.text()).toBe('14');
+    });
+  });
+
+
+  describe('Real-world Scenarios', () => {
+    it('handles typical border percentages', async () => {
+      const wrapper = mount(BorderSlider);
+      const input = wrapper.find('input[type="range"]');
+      const valueLabel = wrapper.find('[data-testid="border-slider-value-label"]');
+
+      const commonValues = [2, 5, 10, 15, 20];
+
+      for (const value of commonValues) {
+        await input.setValue(value);
+        await wrapper.vm.$nextTick();
+        expect(frameConfig.borderPercentage.value).toBe(value);
+        expect(valueLabel.text()).toBe(String(value));
+      }
+    });
+  });
+});
diff --git a/tests/unit/components/controls/ColorPicker.test.js b/tests/unit/components/controls/ColorPicker.test.js
index 7d43029..4009159 100644
--- a/tests/unit/components/controls/ColorPicker.test.js
+++ b/tests/unit/components/controls/ColorPicker.test.js
@@ -2,6 +2,7 @@ import { describe, it, expect, beforeEach } from 'vitest';
 import { mount } from '@vue/test-utils';
 import ColorPicker from '@/components/controls/ColorPicker.vue';
 import { useFrameConfig } from '@/composables/useFrameConfig';
+import { COLOR_PRESETS } from '@/utils/constants';
 
 describe('ColorPicker', () => {
   let frameConfig;
@@ -12,70 +13,56 @@ describe('ColorPicker', () => {
   });
 
   describe('Rendering', () => {
-    it('renders color picker with label', () => {
+    it('renders button group with role', () => {
       const wrapper = mount(ColorPicker);
-
-      expect(wrapper.text()).toBeTruthy();
+      const group = wrapper.find('[role="group"]');
+      expect(group.exists()).toBe(true);
+      expect(group.attributes('aria-label')).toBe('Frame background color');
     });
+  });
 
-    it('renders color input field', () => {
+  describe('Preset Colors', () => {
+    it('selects white preset when clicked', async () => {
       const wrapper = mount(ColorPicker);
+      const whiteButton = wrapper.find('[data-testid="color-white"]');
 
-      expect(wrapper.find('[data-testid="color-input"]').exists()).toBe(true);
-    });
-
-    it('renders native color picker input', () => {
-      const wrapper = mount(ColorPicker);
+      await whiteButton.trigger('click');
 
-      const colorInput = wrapper.find('[data-testid="color-picker-input"]');
-      expect(colorInput.exists()).toBe(true);
-      expect(colorInput.attributes('type')).toBe('color');
+      expect(frameConfig.backgroundColor.value).toBe(COLOR_PRESETS.WHITE);
     });
 
-    it('has proper label association', () => {
+    it('selects black preset when clicked', async () => {
       const wrapper = mount(ColorPicker);
+      const blackButton = wrapper.find('[data-testid="color-black"]');
 
-      const label = wrapper.find('label');
-      const colorInput = wrapper.find('[data-testid="color-picker-input"]');
+      await blackButton.trigger('click');
 
-      expect(label.attributes('for')).toBe('background-color');
-      expect(colorInput.attributes('id')).toBe('background-color');
+      expect(frameConfig.backgroundColor.value).toBe(COLOR_PRESETS.BLACK);
     });
-  });
 
-  describe('Initial Value', () => {
-    it('displays default background color in text input', () => {
+    it('marks white button as active when white is selected', async () => {
       const wrapper = mount(ColorPicker);
 
-      const input = wrapper.find('[data-testid="color-input"]');
-      expect(input.element.value).toBe('#FFFFFF');
+      // White is default, should be active
+      const whiteButton = wrapper.find('[data-testid="color-white"]');
+      expect(whiteButton.attributes('aria-pressed')).toBe('true');
     });
 
-    it('displays default background color in color picker', () => {
+    it('marks black button as active when black is selected', async () => {
       const wrapper = mount(ColorPicker);
+      const blackButton = wrapper.find('[data-testid="color-black"]');
 
-      const colorInput = wrapper.find('[data-testid="color-picker-input"]');
-      expect(colorInput.element.value).toBe('#ffffff');
-    });
-
-    it('displays custom background color from config', async () => {
-      frameConfig.updateBackgroundColor('#FF0000');
-
-      const wrapper = mount(ColorPicker);
+      await blackButton.trigger('click');
       await wrapper.vm.$nextTick();
 
-      const input = wrapper.find('[data-testid="color-input"]');
-      const colorInput = wrapper.find('[data-testid="color-picker-input"]');
-
-      expect(input.element.value).toBe('#FF0000');
-      expect(colorInput.element.value).toBe('#ff0000');
+      expect(blackButton.attributes('aria-pressed')).toBe('true');
     });
   });
 
-  describe('Native Color Picker Interaction', () => {
-    it('updates background color when color picker changes', async () => {
+  describe('Custom Color', () => {
+    it('updates background color when custom color changes', async () => {
       const wrapper = mount(ColorPicker);
-      const colorInput = wrapper.find('[data-testid="color-picker-input"]');
+      const colorInput = wrapper.find('[data-testid="color-custom"]');
 
       await colorInput.setValue('#00FF00');
       await colorInput.trigger('change');
@@ -83,166 +70,72 @@ describe('ColorPicker', () => {
       expect(frameConfig.backgroundColor.value).toBe('#00FF00');
     });
 
-    it('updates text input when color picker changes', async () => {
+    it('converts custom color to uppercase', async () => {
       const wrapper = mount(ColorPicker);
-      const colorInput = wrapper.find('[data-testid="color-picker-input"]');
-      const textInput = wrapper.find('[data-testid="color-input"]');
+      const colorInput = wrapper.find('[data-testid="color-custom"]');
 
-      await colorInput.setValue('#00FF00');
+      await colorInput.setValue('#00ff00');
       await colorInput.trigger('change');
 
-      expect(textInput.element.value).toBe('#00FF00');
-    });
-  });
-
-  describe('Manual Input', () => {
-    it('auto-prepends # to color input', async () => {
-      const wrapper = mount(ColorPicker);
-      const input = wrapper.find('[data-testid="color-input"]');
-
-      await input.setValue('FF0000');
-
-      expect(input.element.value).toBe('#FF0000');
-    });
-
-    it('accepts valid hex color on blur', async () => {
-      const wrapper = mount(ColorPicker);
-      const input = wrapper.find('[data-testid="color-input"]');
-
-      await input.setValue('#00FF00');
-      await input.trigger('blur');
-
       expect(frameConfig.backgroundColor.value).toBe('#00FF00');
     });
 
-    it('accepts 3-digit hex color', async () => {
-      const wrapper = mount(ColorPicker);
-      const input = wrapper.find('[data-testid="color-input"]');
-
-      await input.setValue('#F00');
-      await input.trigger('blur');
-
-      expect(frameConfig.backgroundColor.value).toBe('#F00');
-    });
-
-    it('rejects invalid hex color on blur', async () => {
-      const wrapper = mount(ColorPicker);
-      const input = wrapper.find('[data-testid="color-input"]');
-
-      const originalColor = frameConfig.backgroundColor.value;
-
-      await input.setValue('invalid');
-      await input.trigger('blur');
-
-      expect(input.element.value).toBe(originalColor);
-      expect(frameConfig.backgroundColor.value).toBe(originalColor);
-    });
-
-    it('rejects hex color with invalid characters', async () => {
-      const wrapper = mount(ColorPicker);
-      const input = wrapper.find('[data-testid="color-input"]');
-
-      const originalColor = frameConfig.backgroundColor.value;
-
-      await input.setValue('#GGGGGG');
-      await input.trigger('blur');
-
-      expect(input.element.value).toBe(originalColor);
-    });
-
-    it('handles empty input', async () => {
-      const wrapper = mount(ColorPicker);
-      const input = wrapper.find('[data-testid="color-input"]');
-
-      const originalColor = frameConfig.backgroundColor.value;
-
-      await input.setValue('');
-      await input.trigger('blur');
-
-      expect(input.element.value).toBe(originalColor);
-    });
-
-    it('updates color picker when valid text input is entered', async () => {
+    it('marks custom button as active when custom color is selected', async () => {
       const wrapper = mount(ColorPicker);
-      const textInput = wrapper.find('[data-testid="color-input"]');
-      const colorInput = wrapper.find('[data-testid="color-picker-input"]');
+      const customInput = wrapper.find('[data-testid="color-custom"]');
 
-      await textInput.setValue('#0000FF');
-      await textInput.trigger('blur');
+      await customInput.setValue('#FF5733');
+      await customInput.trigger('change');
+      await wrapper.vm.$nextTick();
 
-      expect(colorInput.element.value).toBe('#0000ff');
+      expect(customInput.attributes('aria-pressed')).toBe('true');
     });
   });
 
   describe('Reactivity', () => {
-    it('updates inputs when background color changes externally', async () => {
+    it('updates button state when background color changes externally', async () => {
       const wrapper = mount(ColorPicker);
 
-      frameConfig.updateBackgroundColor('#0000FF');
+      frameConfig.updateBackgroundColor(COLOR_PRESETS.BLACK);
       await wrapper.vm.$nextTick();
 
-      const textInput = wrapper.find('[data-testid="color-input"]');
-      const colorInput = wrapper.find('[data-testid="color-picker-input"]');
-
-      expect(textInput.element.value).toBe('#0000FF');
-      expect(colorInput.element.value).toBe('#0000ff');
-    });
-  });
-
-  describe('Accessibility', () => {
-    it('has custom test ID', () => {
-      const wrapper = mount(ColorPicker, {
-        props: { testId: 'custom-picker' },
-      });
-
-      expect(wrapper.attributes('data-testid')).toBe('custom-picker');
-    });
-
-    it('has placeholder text', () => {
-      const wrapper = mount(ColorPicker);
-
-      const input = wrapper.find('[data-testid="color-input"]');
-      expect(input.attributes('placeholder')).toBe('#FFFFFF');
-    });
-
-    it('has max length for hex color', () => {
-      const wrapper = mount(ColorPicker);
-
-      const input = wrapper.find('[data-testid="color-input"]');
-      expect(input.attributes('maxlength')).toBe('7');
+      const blackButton = wrapper.find('[data-testid="color-black"]');
+      expect(blackButton.attributes('aria-pressed')).toBe('true');
     });
 
-    it('color picker uses scoped class', () => {
+    it('syncs custom color input when external color changes', async () => {
       const wrapper = mount(ColorPicker);
 
-      const colorInput = wrapper.find('[data-testid="color-picker-input"]');
-      expect(colorInput.classes()).toContain('color-picker-swatch');
-    });
-
-    it('has hint text for color format', () => {
-      const wrapper = mount(ColorPicker);
+      frameConfig.updateBackgroundColor('#0000FF');
+      await wrapper.vm.$nextTick();
 
-      expect(wrapper.text()).toBeTruthy();
+      const colorInput = wrapper.find('[data-testid="color-custom"]');
+      expect(colorInput.element.value).toBe('#0000ff');
     });
   });
 
-  describe('Component Structure', () => {
-    it('uses scoped CSS classes', () => {
+  describe('Integration', () => {
+    it('switches between preset and custom colors', async () => {
       const wrapper = mount(ColorPicker);
 
-      const colorSwatch = wrapper.find('[data-testid="color-picker-input"]');
-      const textInput = wrapper.find('[data-testid="color-input"]');
+      // Start with white (default)
+      expect(frameConfig.backgroundColor.value).toBe(COLOR_PRESETS.WHITE);
 
-      expect(colorSwatch.classes()).toContain('color-picker-swatch');
-      expect(textInput.classes()).toContain('color-text-input');
-    });
+      // Switch to black
+      const blackButton = wrapper.find('[data-testid="color-black"]');
+      await blackButton.trigger('click');
+      expect(frameConfig.backgroundColor.value).toBe(COLOR_PRESETS.BLACK);
 
-    it('color swatch uses scoped class for sizing', () => {
-      const wrapper = mount(ColorPicker);
-      const colorSwatch = wrapper.find('[data-testid="color-picker-input"]');
+      // Switch to custom color
+      const colorInput = wrapper.find('[data-testid="color-custom"]');
+      await colorInput.setValue('#FF5733');
+      await colorInput.trigger('change');
+      expect(frameConfig.backgroundColor.value).toBe('#FF5733');
 
-      // Size is defined in scoped CSS via .color-picker-swatch
-      expect(colorSwatch.classes()).toContain('color-picker-swatch');
+      // Switch back to white
+      const whiteButton = wrapper.find('[data-testid="color-white"]');
+      await whiteButton.trigger('click');
+      expect(frameConfig.backgroundColor.value).toBe(COLOR_PRESETS.WHITE);
     });
   });
 });
diff --git a/tests/unit/components/controls/DownloadButton.test.js b/tests/unit/components/controls/DownloadButton.test.js
index d7eab60..cb4f05b 100644
--- a/tests/unit/components/controls/DownloadButton.test.js
+++ b/tests/unit/components/controls/DownloadButton.test.js
@@ -72,23 +72,6 @@ describe('DownloadButton', () => {
     };
   });
 
-  describe('Rendering', () => {
-    it('renders download button', () => {
-      const wrapper = mount(DownloadButton, {
-        props: { previewWidth: 800 },
-      });
-
-      expect(wrapper.find('button').exists()).toBe(true);
-    });
-
-    it('displays download icon when not loading', () => {
-      const wrapper = mount(DownloadButton, {
-        props: { previewWidth: 800 },
-      });
-
-      expect(wrapper.find('svg').exists()).toBe(true);
-    });
-  });
 
   describe('Disabled State', () => {
     it('is disabled when no images uploaded', () => {
@@ -117,13 +100,6 @@ describe('DownloadButton', () => {
       expect(button.attributes('disabled')).toBeUndefined();
     });
 
-    it('shows "Download" text even when disabled', () => {
-      const wrapper = mount(DownloadButton, {
-        props: { previewWidth: 800 },
-      });
-
-      expect(wrapper.text()).toContain('Download');
-    });
   });
 
   describe('Props', () => {
@@ -151,43 +127,4 @@ describe('DownloadButton', () => {
     });
   });
 
-  describe('Accessibility', () => {
-    it('has custom test ID', () => {
-      const wrapper = mount(DownloadButton, {
-        props: { testId: 'custom-download', previewWidth: 800, },
-      });
-
-      expect(wrapper.attributes('data-testid')).toBe('custom-download');
-    });
-
-    it('icon is hidden from screen readers', () => {
-      const wrapper = mount(DownloadButton, {
-        props: { previewWidth: 800 },
-      });
-
-      const svg = wrapper.find('svg');
-      if (svg.exists()) {
-        expect(svg.attributes('aria-hidden')).toBe('true');
-      }
-    });
-
-    it('has aria-busy attribute', async () => {
-      const file1 = new File([''], 'test1.jpg', { type: 'image/jpeg' });
-      const file2 = new File([''], 'test2.jpg', { type: 'image/jpeg' });
-
-      await imageState.addImage(file1, 0);
-      await imageState.addImage(file2, 1);
-
-      const wrapper = mount(DownloadButton, {
-        props: { stage: mockStage, previewWidth: 800 },
-      });
-
-      await wrapper.vm.$nextTick();
-
-      const button = wrapper.find('button');
-
-      // Button should have aria-busy attribute (defaults to false when not loading)
-      expect(button.attributes('aria-busy')).toBeDefined();
-    });
-  });
 });
diff --git a/tests/unit/components/controls/FormatSelector.test.js b/tests/unit/components/controls/FormatSelector.test.js
index bb30e9a..eaad249 100644
--- a/tests/unit/components/controls/FormatSelector.test.js
+++ b/tests/unit/components/controls/FormatSelector.test.js
@@ -14,65 +14,39 @@ describe('FormatSelector', () => {
     wrapper = mount(FormatSelector);
   });
 
-  describe('Structure', () => {
-    it('renders the format selector', () => {
-      expect(wrapper.find('[data-testid="format-selector"]').exists()).toBe(true);
-    });
-
-    it('is a select element', () => {
-      expect(wrapper.find('[data-testid="format-selector"]').element.tagName).toBe('SELECT');
+  describe('Rendering', () => {
+    it('renders button group with role', () => {
+      const group = wrapper.find('[role="group"]');
+      expect(group.exists()).toBe(true);
+      expect(group.attributes('aria-label')).toBe('Export format');
     });
   });
 
-  describe('Format Options', () => {
-    it('displays all available formats from IMAGE_FORMATS', () => {
-      const options = wrapper.findAll('option');
-      expect(options).toHaveLength(IMAGE_FORMATS.length);
-    });
+  describe('Behavior', () => {
+    it('updates format when button is clicked', async () => {
+      const jpegButton = wrapper.find('[data-testid="format-jpeg"]');
+      await jpegButton.trigger('click');
 
-    it('displays format extensions not mime types', () => {
-      const options = wrapper.findAll('option');
-      options.forEach((option, index) => {
-        const format = IMAGE_FORMATS[index];
-        expect(option.text()).toBe(`.${format.extension}`);
-      });
+      expect(canvasRenderer.format.value).toBe('image/jpeg');
     });
 
-    it('uses mime type as option value', () => {
-      const options = wrapper.findAll('option');
-      options.forEach((option, index) => {
-        const format = IMAGE_FORMATS[index];
-        expect(option.element.value).toBe(format.mimeType);
-      });
-    });
-  });
+    it('updates active state when format changes', async () => {
+      const webpButton = wrapper.find('[data-testid="format-webp"]');
+      await webpButton.trigger('click');
 
-  describe('Behavior', () => {
-    it('binds to format value from composable', () => {
-      const select = wrapper.find('[data-testid="format-selector"]');
-      expect(select.element.value).toBe(IMAGE_FORMATS[0].mimeType);
-    });
+      await wrapper.vm.$nextTick();
 
-    it('updates format when selection changes', async () => {
-      const select = wrapper.find('[data-testid="format-selector"]');
-      const newFormat = IMAGE_FORMATS[1].mimeType;
-      await select.setValue(newFormat);
+      expect(webpButton.attributes('aria-pressed')).toBe('true');
 
-      expect(canvasRenderer.format.value).toBe(newFormat);
+      const pngButton = wrapper.find('[data-testid="format-png"]');
+      expect(pngButton.attributes('aria-pressed')).toBe('false');
     });
-  });
 
-  describe('Props', () => {
-    it('accepts custom testId prop', () => {
-      wrapper = mount(FormatSelector, {
-        props: { testId: 'custom-test-id' },
-      });
-
-      expect(wrapper.find('[data-testid="custom-test-id"]').exists()).toBe(true);
-    });
+    it('calls updateFormat with correct mime type', async () => {
+      const webpButton = wrapper.find('[data-testid="format-webp"]');
+      await webpButton.trigger('click');
 
-    it('uses default testId when not provided', () => {
-      expect(wrapper.props('testId')).toBe('format-selector');
+      expect(canvasRenderer.format.value).toBe('image/webp');
     });
   });
 });
diff --git a/tests/unit/components/controls/FrameSizeInput.test.js b/tests/unit/components/controls/FrameSizeInput.test.js
deleted file mode 100644
index 4a7da01..0000000
--- a/tests/unit/components/controls/FrameSizeInput.test.js
+++ /dev/null
@@ -1,533 +0,0 @@
-import { describe, it, expect, beforeEach } from 'vitest';
-import { mount } from '@vue/test-utils';
-import FrameSizeInput from '@/components/controls/FrameSizeInput.vue';
-import BaseInput from '@/components/shared/BaseInput.vue';
-import { useFrameConfig } from '@/composables/useFrameConfig';
-import { FRAME_CONSTRAINTS } from '@/utils/constants';
-
-describe('FrameSizeInput', () => {
-  let frameConfig;
-
-  beforeEach(() => {
-    frameConfig = useFrameConfig();
-    frameConfig.reset();
-  });
-
-  describe('Rendering', () => {
-    it('renders BaseInput component', () => {
-      const wrapper = mount(FrameSizeInput);
-      expect(wrapper.findComponent(BaseInput).exists()).toBe(true);
-    });
-
-    it('renders with default test ID', () => {
-      const wrapper = mount(FrameSizeInput);
-      expect(wrapper.attributes('data-testid')).toBe('frame-size-input');
-    });
-
-    it('renders with custom test ID', () => {
-      const wrapper = mount(FrameSizeInput, {
-        props: { testId: 'custom-frame-size' },
-      });
-      expect(wrapper.attributes('data-testid')).toBe('custom-frame-size');
-    });
-
-    it('displays frame size label', () => {
-      const wrapper = mount(FrameSizeInput);
-      expect(wrapper.text()).toContain('Frame Size');
-    });
-
-    it('displays px unit', () => {
-      const wrapper = mount(FrameSizeInput);
-      const baseInput = wrapper.findComponent(BaseInput);
-      expect(baseInput.props('unit')).toBe('px');
-    });
-
-    it('displays hint with range information', () => {
-      const wrapper = mount(FrameSizeInput);
-      const baseInput = wrapper.findComponent(BaseInput);
-      expect(baseInput.props('hint')).toBe(
-        `range(${FRAME_CONSTRAINTS.minSize}px:${FRAME_CONSTRAINTS.maxSize}px)`
-      );
-    });
-  });
-
-  describe('Input Configuration', () => {
-    it('has number type', () => {
-      const wrapper = mount(FrameSizeInput);
-      const baseInput = wrapper.findComponent(BaseInput);
-      expect(baseInput.props('type')).toBe('number');
-    });
-
-    it('sets minimum constraint', () => {
-      const wrapper = mount(FrameSizeInput);
-      const baseInput = wrapper.findComponent(BaseInput);
-      expect(baseInput.props('min')).toBe(FRAME_CONSTRAINTS.minSize);
-    });
-
-    it('sets maximum constraint', () => {
-      const wrapper = mount(FrameSizeInput);
-      const baseInput = wrapper.findComponent(BaseInput);
-      expect(baseInput.props('max')).toBe(FRAME_CONSTRAINTS.maxSize);
-    });
-
-    it('sets step to 100', () => {
-      const wrapper = mount(FrameSizeInput);
-      const baseInput = wrapper.findComponent(BaseInput);
-      expect(baseInput.props('step')).toBe(100);
-    });
-  });
-
-  describe('Initial Value', () => {
-    it('displays default frame size value', () => {
-      const wrapper = mount(FrameSizeInput);
-      const baseInput = wrapper.findComponent(BaseInput);
-      expect(baseInput.props('modelValue')).toBe(frameConfig.frameSize.value);
-    });
-
-    it('displays custom frame size value from config', async () => {
-      frameConfig.updateFrameSize(2000);
-
-      const wrapper = mount(FrameSizeInput);
-      await wrapper.vm.$nextTick();
-
-      const baseInput = wrapper.findComponent(BaseInput);
-      expect(baseInput.props('modelValue')).toBe(2000);
-    });
-  });
-
-  describe('Value Updates', () => {
-    it('updates frame size when input changes', async () => {
-      const wrapper = mount(FrameSizeInput);
-      const baseInput = wrapper.findComponent(BaseInput);
-
-      await baseInput.vm.$emit('update:modelValue', 1500);
-
-      expect(frameConfig.frameSize.value).toBe(1500);
-    });
-
-    it('updates to minimum value', async () => {
-      const wrapper = mount(FrameSizeInput);
-      const baseInput = wrapper.findComponent(BaseInput);
-
-      await baseInput.vm.$emit('update:modelValue', FRAME_CONSTRAINTS.minSize);
-
-      expect(frameConfig.frameSize.value).toBe(FRAME_CONSTRAINTS.minSize);
-    });
-
-    it('updates to maximum value', async () => {
-      const wrapper = mount(FrameSizeInput);
-      const baseInput = wrapper.findComponent(BaseInput);
-
-      await baseInput.vm.$emit('update:modelValue', FRAME_CONSTRAINTS.maxSize);
-
-      expect(frameConfig.frameSize.value).toBe(FRAME_CONSTRAINTS.maxSize);
-    });
-
-    it('accepts intermediate values', async () => {
-      const wrapper = mount(FrameSizeInput);
-      const baseInput = wrapper.findComponent(BaseInput);
-
-      await baseInput.vm.$emit('update:modelValue', 5000);
-
-      expect(frameConfig.frameSize.value).toBe(5000);
-    });
-
-    it('accepts values in steps of 100', async () => {
-      const wrapper = mount(FrameSizeInput);
-      const baseInput = wrapper.findComponent(BaseInput);
-
-      await baseInput.vm.$emit('update:modelValue', 3200);
-
-      expect(frameConfig.frameSize.value).toBe(3200);
-    });
-  });
-
-  describe('Validation', () => {
-    it('shows no error for valid frame size', () => {
-      frameConfig.updateFrameSize(2000);
-
-      const wrapper = mount(FrameSizeInput);
-      const baseInput = wrapper.findComponent(BaseInput);
-
-      expect(baseInput.props('error')).toBe('');
-    });
-
-    it('shows error for frame size below minimum', async () => {
-      const wrapper = mount(FrameSizeInput);
-      const baseInput = wrapper.findComponent(BaseInput);
-
-      await baseInput.vm.$emit('update:modelValue', 500);
-      await wrapper.vm.$nextTick();
-
-      expect(baseInput.props('error')).toBe(
-        `Frame size must be at least ${FRAME_CONSTRAINTS.minSize}px`
-      );
-    });
-
-    it('shows error for frame size above maximum', async () => {
-      const wrapper = mount(FrameSizeInput);
-      const baseInput = wrapper.findComponent(BaseInput);
-
-      await baseInput.vm.$emit('update:modelValue', 15000);
-      await wrapper.vm.$nextTick();
-
-      expect(baseInput.props('error')).toBe(
-        `Frame size must not exceed ${FRAME_CONSTRAINTS.maxSize}px`
-      );
-    });
-
-    it('shows no error at minimum boundary', async () => {
-      const wrapper = mount(FrameSizeInput);
-      const baseInput = wrapper.findComponent(BaseInput);
-
-      await baseInput.vm.$emit('update:modelValue', FRAME_CONSTRAINTS.minSize);
-      await wrapper.vm.$nextTick();
-
-      expect(baseInput.props('error')).toBe('');
-    });
-
-    it('shows no error at maximum boundary', async () => {
-      const wrapper = mount(FrameSizeInput);
-      const baseInput = wrapper.findComponent(BaseInput);
-
-      await baseInput.vm.$emit('update:modelValue', FRAME_CONSTRAINTS.maxSize);
-      await wrapper.vm.$nextTick();
-
-      expect(baseInput.props('error')).toBe('');
-    });
-
-    it('shows error for zero value', async () => {
-      const wrapper = mount(FrameSizeInput);
-      const baseInput = wrapper.findComponent(BaseInput);
-
-      await baseInput.vm.$emit('update:modelValue', 0);
-      await wrapper.vm.$nextTick();
-
-      expect(baseInput.props('error')).toBe(
-        `Frame size must be at least ${FRAME_CONSTRAINTS.minSize}px`
-      );
-    });
-  });
-
-  describe('Blur Handling', () => {
-    it('clamps value to minimum on blur when below range', async () => {
-      const wrapper = mount(FrameSizeInput);
-      const baseInput = wrapper.findComponent(BaseInput);
-
-      // Set invalid value
-      await baseInput.vm.$emit('update:modelValue', 500);
-      await wrapper.vm.$nextTick();
-
-      // Trigger blur
-      await baseInput.vm.$emit('blur');
-      await wrapper.vm.$nextTick();
-
-      expect(frameConfig.frameSize.value).toBe(FRAME_CONSTRAINTS.minSize);
-    });
-
-    it('clamps value to maximum on blur when above range', async () => {
-      const wrapper = mount(FrameSizeInput);
-      const baseInput = wrapper.findComponent(BaseInput);
-
-      // Set invalid value
-      await baseInput.vm.$emit('update:modelValue', 15000);
-      await wrapper.vm.$nextTick();
-
-      // Trigger blur
-      await baseInput.vm.$emit('blur');
-      await wrapper.vm.$nextTick();
-
-      expect(frameConfig.frameSize.value).toBe(FRAME_CONSTRAINTS.maxSize);
-    });
-
-    it('does not change value on blur when valid', async () => {
-      const wrapper = mount(FrameSizeInput);
-      const baseInput = wrapper.findComponent(BaseInput);
-
-      // Set valid value
-      await baseInput.vm.$emit('update:modelValue', 2000);
-      await wrapper.vm.$nextTick();
-
-      // Trigger blur
-      await baseInput.vm.$emit('blur');
-      await wrapper.vm.$nextTick();
-
-      expect(frameConfig.frameSize.value).toBe(2000);
-    });
-
-    it('handles blur at minimum boundary', async () => {
-      const wrapper = mount(FrameSizeInput);
-      const baseInput = wrapper.findComponent(BaseInput);
-
-      await baseInput.vm.$emit('update:modelValue', FRAME_CONSTRAINTS.minSize);
-      await baseInput.vm.$emit('blur');
-      await wrapper.vm.$nextTick();
-
-      expect(frameConfig.frameSize.value).toBe(FRAME_CONSTRAINTS.minSize);
-    });
-
-    it('handles blur at maximum boundary', async () => {
-      const wrapper = mount(FrameSizeInput);
-      const baseInput = wrapper.findComponent(BaseInput);
-
-      await baseInput.vm.$emit('update:modelValue', FRAME_CONSTRAINTS.maxSize);
-      await baseInput.vm.$emit('blur');
-      await wrapper.vm.$nextTick();
-
-      expect(frameConfig.frameSize.value).toBe(FRAME_CONSTRAINTS.maxSize);
-    });
-
-    it('clamps zero value to minimum on blur', async () => {
-      const wrapper = mount(FrameSizeInput);
-      const baseInput = wrapper.findComponent(BaseInput);
-
-      await baseInput.vm.$emit('update:modelValue', 0);
-      await baseInput.vm.$emit('blur');
-      await wrapper.vm.$nextTick();
-
-      expect(frameConfig.frameSize.value).toBe(FRAME_CONSTRAINTS.minSize);
-    });
-  });
-
-  describe('Reactivity', () => {
-    it('updates input when frame size changes externally', async () => {
-      const wrapper = mount(FrameSizeInput);
-
-      frameConfig.updateFrameSize(3000);
-      await wrapper.vm.$nextTick();
-
-      const baseInput = wrapper.findComponent(BaseInput);
-      expect(baseInput.props('modelValue')).toBe(3000);
-    });
-
-    it('clears error when value becomes valid', async () => {
-      const wrapper = mount(FrameSizeInput);
-      const baseInput = wrapper.findComponent(BaseInput);
-
-      // Set invalid value
-      await baseInput.vm.$emit('update:modelValue', 15000);
-      await wrapper.vm.$nextTick();
-      expect(baseInput.props('error')).toBeTruthy();
-
-      // Set valid value
-      await baseInput.vm.$emit('update:modelValue', 2000);
-      await wrapper.vm.$nextTick();
-      expect(baseInput.props('error')).toBe('');
-    });
-
-    it('updates error when value becomes invalid', async () => {
-      const wrapper = mount(FrameSizeInput);
-      const baseInput = wrapper.findComponent(BaseInput);
-
-      // Set valid value
-      await baseInput.vm.$emit('update:modelValue', 2000);
-      await wrapper.vm.$nextTick();
-      expect(baseInput.props('error')).toBe('');
-
-      // Set invalid value
-      await baseInput.vm.$emit('update:modelValue', 500);
-      await wrapper.vm.$nextTick();
-      expect(baseInput.props('error')).toBeTruthy();
-    });
-  });
-
-  describe('Edge Cases', () => {
-    it('handles multiple rapid value changes', async () => {
-      const wrapper = mount(FrameSizeInput);
-      const baseInput = wrapper.findComponent(BaseInput);
-
-      await baseInput.vm.$emit('update:modelValue', 1000);
-      await baseInput.vm.$emit('update:modelValue', 2000);
-      await baseInput.vm.$emit('update:modelValue', 3000);
-      await wrapper.vm.$nextTick();
-
-      expect(frameConfig.frameSize.value).toBe(3000);
-    });
-
-    it('handles clamping below minimum multiple times', async () => {
-      const wrapper = mount(FrameSizeInput);
-      const baseInput = wrapper.findComponent(BaseInput);
-
-      // First invalid value
-      await baseInput.vm.$emit('update:modelValue', 500);
-      await baseInput.vm.$emit('blur');
-      await wrapper.vm.$nextTick();
-      expect(frameConfig.frameSize.value).toBe(FRAME_CONSTRAINTS.minSize);
-
-      // Second invalid value
-      await baseInput.vm.$emit('update:modelValue', 300);
-      await baseInput.vm.$emit('blur');
-      await wrapper.vm.$nextTick();
-      expect(frameConfig.frameSize.value).toBe(FRAME_CONSTRAINTS.minSize);
-    });
-
-    it('handles clamping above maximum multiple times', async () => {
-      const wrapper = mount(FrameSizeInput);
-      const baseInput = wrapper.findComponent(BaseInput);
-
-      // First invalid value
-      await baseInput.vm.$emit('update:modelValue', 12000);
-      await baseInput.vm.$emit('blur');
-      await wrapper.vm.$nextTick();
-      expect(frameConfig.frameSize.value).toBe(FRAME_CONSTRAINTS.maxSize);
-
-      // Second invalid value
-      await baseInput.vm.$emit('update:modelValue', 15000);
-      await baseInput.vm.$emit('blur');
-      await wrapper.vm.$nextTick();
-      expect(frameConfig.frameSize.value).toBe(FRAME_CONSTRAINTS.maxSize);
-    });
-
-    it('handles alternating valid and invalid values', async () => {
-      const wrapper = mount(FrameSizeInput);
-      const baseInput = wrapper.findComponent(BaseInput);
-
-      // Valid
-      await baseInput.vm.$emit('update:modelValue', 2000);
-      await wrapper.vm.$nextTick();
-      expect(baseInput.props('error')).toBe('');
-
-      // Invalid
-      await baseInput.vm.$emit('update:modelValue', 15000);
-      await wrapper.vm.$nextTick();
-      expect(baseInput.props('error')).toBeTruthy();
-
-      // Valid again
-      await baseInput.vm.$emit('update:modelValue', 3000);
-      await wrapper.vm.$nextTick();
-      expect(baseInput.props('error')).toBe('');
-    });
-
-    it('handles large step increments', async () => {
-      const wrapper = mount(FrameSizeInput);
-      const baseInput = wrapper.findComponent(BaseInput);
-
-      await baseInput.vm.$emit('update:modelValue', 1000);
-      await wrapper.vm.$nextTick();
-      expect(frameConfig.frameSize.value).toBe(1000);
-
-      await baseInput.vm.$emit('update:modelValue', 9000);
-      await wrapper.vm.$nextTick();
-      expect(frameConfig.frameSize.value).toBe(9000);
-    });
-  });
-
-  describe('Integration with BaseInput', () => {
-    it('passes correct props to BaseInput', () => {
-      const wrapper = mount(FrameSizeInput);
-      const baseInput = wrapper.findComponent(BaseInput);
-
-      expect(baseInput.props()).toMatchObject({
-        type: 'number',
-        label: 'Frame Size',
-        unit: 'px',
-        min: FRAME_CONSTRAINTS.minSize,
-        max: FRAME_CONSTRAINTS.maxSize,
-        step: 100,
-      });
-    });
-
-    it('uses v-model binding with BaseInput', async () => {
-      const wrapper = mount(FrameSizeInput);
-      const baseInput = wrapper.findComponent(BaseInput);
-
-      // Check initial binding
-      expect(baseInput.props('modelValue')).toBe(frameConfig.frameSize.value);
-
-      // Update value
-      await baseInput.vm.$emit('update:modelValue', 4500);
-
-      // Check value updated through v-model
-      expect(frameConfig.frameSize.value).toBe(4500);
-    });
-
-    it('forwards blur event to BaseInput', async () => {
-      const wrapper = mount(FrameSizeInput);
-      const baseInput = wrapper.findComponent(BaseInput);
-
-      // Set invalid value and blur
-      await baseInput.vm.$emit('update:modelValue', 500);
-      await baseInput.vm.$emit('blur');
-      await wrapper.vm.$nextTick();
-
-      // Verify handleBlur was called (value was clamped)
-      expect(frameConfig.frameSize.value).toBe(FRAME_CONSTRAINTS.minSize);
-    });
-  });
-
-  describe('Component Composition', () => {
-    it('is a wrapper around BaseInput', () => {
-      const wrapper = mount(FrameSizeInput);
-      expect(wrapper.findComponent(BaseInput).exists()).toBe(true);
-      expect(wrapper.findAllComponents(BaseInput)).toHaveLength(1);
-    });
-
-    it('has BaseInput as direct child', () => {
-      const wrapper = mount(FrameSizeInput);
-      const baseInput = wrapper.findComponent(BaseInput);
-
-      expect(baseInput.exists()).toBe(true);
-      expect(wrapper.html()).toContain('data-testid="number-input"');
-    });
-  });
-
-  describe('Constraints Verification', () => {
-    it('uses FRAME_CONSTRAINTS.minSize constant', () => {
-      const wrapper = mount(FrameSizeInput);
-      const baseInput = wrapper.findComponent(BaseInput);
-      expect(baseInput.props('min')).toBe(FRAME_CONSTRAINTS.minSize);
-      expect(FRAME_CONSTRAINTS.minSize).toBe(800);
-    });
-
-    it('uses FRAME_CONSTRAINTS.maxSize constant', () => {
-      const wrapper = mount(FrameSizeInput);
-      const baseInput = wrapper.findComponent(BaseInput);
-      expect(baseInput.props('max')).toBe(FRAME_CONSTRAINTS.maxSize);
-      expect(FRAME_CONSTRAINTS.maxSize).toBe(10000);
-    });
-
-    it('has larger step size than SpacingInput', () => {
-      const wrapper = mount(FrameSizeInput);
-      const baseInput = wrapper.findComponent(BaseInput);
-      expect(baseInput.props('step')).toBe(100);
-    });
-  });
-
-  describe('Real-world Scenarios', () => {
-    it('handles typical frame sizes', async () => {
-      const wrapper = mount(FrameSizeInput);
-      const baseInput = wrapper.findComponent(BaseInput);
-
-      const commonSizes = [1920, 2560, 3840, 4096];
-
-      for (const size of commonSizes) {
-        await baseInput.vm.$emit('update:modelValue', size);
-        await wrapper.vm.$nextTick();
-        expect(frameConfig.frameSize.value).toBe(size);
-        expect(baseInput.props('error')).toBe('');
-      }
-    });
-
-    it('provides helpful error for too small frames', async () => {
-      const wrapper = mount(FrameSizeInput);
-      const baseInput = wrapper.findComponent(BaseInput);
-
-      await baseInput.vm.$emit('update:modelValue', 640);
-      await wrapper.vm.$nextTick();
-
-      expect(baseInput.props('error')).toContain('at least');
-      expect(baseInput.props('error')).toContain('800');
-    });
-
-    it('provides helpful error for too large frames', async () => {
-      const wrapper = mount(FrameSizeInput);
-      const baseInput = wrapper.findComponent(BaseInput);
-
-      await baseInput.vm.$emit('update:modelValue', 20000);
-      await wrapper.vm.$nextTick();
-
-      expect(baseInput.props('error')).toContain('not exceed');
-      expect(baseInput.props('error')).toContain('10000');
-    });
-  });
-});
diff --git a/tests/unit/components/controls/FrameSizeSelector.test.js b/tests/unit/components/controls/FrameSizeSelector.test.js
new file mode 100644
index 0000000..6fda580
--- /dev/null
+++ b/tests/unit/components/controls/FrameSizeSelector.test.js
@@ -0,0 +1,176 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { mount } from '@vue/test-utils';
+import FrameSizeSelector from '@/components/controls/FrameSizeSelector.vue';
+import { useFrameConfig } from '@/composables/useFrameConfig';
+
+describe('FrameSizeSelector', () => {
+  let frameConfig;
+
+  beforeEach(() => {
+    frameConfig = useFrameConfig();
+    frameConfig.reset();
+  });
+
+  describe('Interaction', () => {
+    it('updates frame size when 1024px button is clicked', async () => {
+      const wrapper = mount(FrameSizeSelector);
+      const button = wrapper.find('[data-testid="frame-size-1024"]');
+
+      await button.trigger('click');
+
+      expect(frameConfig.frameSize.value).toBe(1024);
+    });
+
+    it('updates frame size when 2048px button is clicked', async () => {
+      const wrapper = mount(FrameSizeSelector);
+      const button = wrapper.find('[data-testid="frame-size-2048"]');
+
+      await button.trigger('click');
+
+      expect(frameConfig.frameSize.value).toBe(2048);
+    });
+
+    it('updates frame size when 4096px button is clicked', async () => {
+      const wrapper = mount(FrameSizeSelector);
+      const button = wrapper.find('[data-testid="frame-size-4096"]');
+
+      await button.trigger('click');
+
+      expect(frameConfig.frameSize.value).toBe(4096);
+    });
+
+    it('switches active state when different button is clicked', async () => {
+      frameConfig.updateFrameSize(1024);
+      const wrapper = mount(FrameSizeSelector);
+
+      const button1024 = wrapper.find('[data-testid="frame-size-1024"]');
+      const button2048 = wrapper.find('[data-testid="frame-size-2048"]');
+
+      expect(button1024.attributes('aria-pressed')).toBe('true');
+      expect(button2048.attributes('aria-pressed')).toBe('false');
+
+      await button2048.trigger('click');
+      await wrapper.vm.$nextTick();
+
+      expect(button1024.attributes('aria-pressed')).toBe('false');
+      expect(button2048.attributes('aria-pressed')).toBe('true');
+    });
+
+    it('clicking active button does not cause error', async () => {
+      frameConfig.updateFrameSize(2048);
+      const wrapper = mount(FrameSizeSelector);
+
+      const button = wrapper.find('[data-testid="frame-size-2048"]');
+      await button.trigger('click');
+      await wrapper.vm.$nextTick();
+
+      expect(button.attributes('aria-pressed')).toBe('true');
+      expect(frameConfig.frameSize.value).toBe(2048);
+    });
+  });
+
+  describe('Reactivity', () => {
+    it('updates display when frame size changes externally', async () => {
+      const wrapper = mount(FrameSizeSelector);
+
+      frameConfig.updateFrameSize(4096);
+      await wrapper.vm.$nextTick();
+
+      const button = wrapper.find('[data-testid="frame-size-4096"]');
+      expect(button.attributes('aria-pressed')).toBe('true');
+    });
+
+    it('previous button becomes inactive when size changes externally', async () => {
+      frameConfig.updateFrameSize(1024);
+      const wrapper = mount(FrameSizeSelector);
+
+      const button1024 = wrapper.find('[data-testid="frame-size-1024"]');
+      expect(button1024.attributes('aria-pressed')).toBe('true');
+
+      frameConfig.updateFrameSize(2048);
+      await wrapper.vm.$nextTick();
+
+      expect(button1024.attributes('aria-pressed')).toBe('false');
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('sets aria-pressed correctly', async () => {
+      frameConfig.updateFrameSize(1024);
+      const wrapper = mount(FrameSizeSelector);
+
+      const button1024 = wrapper.find('[data-testid="frame-size-1024"]');
+      const button2048 = wrapper.find('[data-testid="frame-size-2048"]');
+
+      expect(button1024.attributes('aria-pressed')).toBe('true');
+      expect(button2048.attributes('aria-pressed')).toBe('false');
+
+      await button2048.trigger('click');
+      await wrapper.vm.$nextTick();
+
+      expect(button1024.attributes('aria-pressed')).toBe('false');
+      expect(button2048.attributes('aria-pressed')).toBe('true');
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('handles rapid button clicks', async () => {
+      const wrapper = mount(FrameSizeSelector);
+
+      const button1024 = wrapper.find('[data-testid="frame-size-1024"]');
+      const button2048 = wrapper.find('[data-testid="frame-size-2048"]');
+      const button4096 = wrapper.find('[data-testid="frame-size-4096"]');
+
+      await button1024.trigger('click');
+      await button2048.trigger('click');
+      await button4096.trigger('click');
+      await wrapper.vm.$nextTick();
+
+      expect(frameConfig.frameSize.value).toBe(4096);
+    });
+
+    it('handles unknown size values gracefully', async () => {
+      frameConfig.updateFrameSize(9999);
+      const wrapper = mount(FrameSizeSelector);
+
+      const buttons = wrapper.findAll('button');
+      const activeButtons = buttons.filter(
+        (btn) => btn.attributes('aria-pressed') === 'true'
+      );
+
+      // No button should be active for unknown size
+      expect(activeButtons).toHaveLength(0);
+    });
+  });
+
+  describe('Integration', () => {
+    it('works with frame configuration composable', async () => {
+      // Set initial size different from 2048
+      frameConfig.updateFrameSize(1024);
+      const wrapper = mount(FrameSizeSelector);
+
+      // Initial state
+      const initialSize = frameConfig.frameSize.value;
+
+      // Click button
+      const button = wrapper.find('[data-testid="frame-size-2048"]');
+      await button.trigger('click');
+
+      // Verify config updated
+      expect(frameConfig.frameSize.value).toBe(2048);
+      expect(frameConfig.frameSize.value).not.toBe(initialSize);
+    });
+
+    it('responds to external config changes', async () => {
+      const wrapper = mount(FrameSizeSelector);
+
+      // Change externally
+      frameConfig.updateFrameSize(4096);
+      await wrapper.vm.$nextTick();
+
+      // Verify UI updated
+      const button = wrapper.find('[data-testid="frame-size-4096"]');
+      expect(button.attributes('aria-pressed')).toBe('true');
+    });
+  });
+});
diff --git a/tests/unit/components/controls/OrientationToggle.test.js b/tests/unit/components/controls/OrientationToggle.test.js
index 831dbed..bb318c8 100644
--- a/tests/unit/components/controls/OrientationToggle.test.js
+++ b/tests/unit/components/controls/OrientationToggle.test.js
@@ -12,67 +12,7 @@ describe('OrientationToggle', () => {
     frameConfig.reset();
   });
 
-  describe('Rendering', () => {
-    it('renders portrait button', () => {
-      const wrapper = mount(OrientationToggle);
-
-      expect(wrapper.find('[data-testid="orientation-portrait"]').exists()).toBe(true);
-      expect(wrapper.find('[data-testid="orientation-portrait"]').text()).toContain('Portrait');
-    });
-
-    it('renders landscape button', () => {
-      const wrapper = mount(OrientationToggle);
-
-      expect(wrapper.find('[data-testid="orientation-landscape"]').exists()).toBe(true);
-      expect(wrapper.find('[data-testid="orientation-landscape"]').text()).toContain('Landscape');
-    });
-
-    it('renders both SVG icons', () => {
-      const wrapper = mount(OrientationToggle);
-
-      const svgs = wrapper.findAll('svg');
-      expect(svgs).toHaveLength(2);
-    });
-
-    it('has full-width flex layout', () => {
-      const wrapper = mount(OrientationToggle);
-
-      const buttonGroup = wrapper.find('[role="group"]');
-      expect(buttonGroup.classes()).toContain('flex');
-      expect(buttonGroup.classes()).toContain('w-full');
-      expect(buttonGroup.classes()).not.toContain('inline-flex');
-      expect(buttonGroup.classes()).not.toContain('flex-col');
-    });
-
-    it('buttons use scoped CSS class with flex-1', () => {
-      const wrapper = mount(OrientationToggle);
-
-      const portraitBtn = wrapper.find('[data-testid="orientation-portrait"]');
-      const landscapeBtn = wrapper.find('[data-testid="orientation-landscape"]');
-
-      // Buttons should have the base class that includes flex-1 in scoped CSS
-      expect(portraitBtn.classes()).toContain('orientation-btn');
-      expect(landscapeBtn.classes()).toContain('orientation-btn');
-    });
-  });
-
   describe('Active State', () => {
-    it('portrait button is active by default', () => {
-      const wrapper = mount(OrientationToggle);
-
-      const portraitBtn = wrapper.find('[data-testid="orientation-portrait"]');
-      expect(portraitBtn.attributes('aria-pressed')).toBe('true');
-      expect(portraitBtn.classes()).toContain('btn-active');
-    });
-
-    it('landscape button is inactive by default', () => {
-      const wrapper = mount(OrientationToggle);
-
-      const landscapeBtn = wrapper.find('[data-testid="orientation-landscape"]');
-      expect(landscapeBtn.attributes('aria-pressed')).toBe('false');
-      expect(landscapeBtn.classes()).toContain('btn-inactive');
-    });
-
     it('switches active state when button is clicked', async () => {
       const wrapper = mount(OrientationToggle);
 
@@ -131,12 +71,6 @@ describe('OrientationToggle', () => {
       expect(wrapper.find('[role="group"]').exists()).toBe(true);
     });
 
-    it('has aria-label on button group', () => {
-      const wrapper = mount(OrientationToggle);
-
-      expect(wrapper.find('[role="group"]').attributes('aria-label')).toBe('Frame orientation');
-    });
-
     it('sets aria-pressed correctly', async () => {
       const wrapper = mount(OrientationToggle);
 
@@ -152,51 +86,5 @@ describe('OrientationToggle', () => {
       expect(portraitBtn.attributes('aria-pressed')).toBe('false');
       expect(landscapeBtn.attributes('aria-pressed')).toBe('true');
     });
-
-    it('has custom test ID', () => {
-      const wrapper = mount(OrientationToggle, {
-        props: { testId: 'custom-orientation' },
-      });
-
-      expect(wrapper.attributes('data-testid')).toBe('custom-orientation');
-    });
-  });
-
-  describe('Component Structure', () => {
-    it('uses scoped CSS classes', () => {
-      const wrapper = mount(OrientationToggle);
-
-      const portraitBtn = wrapper.find('[data-testid="orientation-portrait"]');
-      const landscapeBtn = wrapper.find('[data-testid="orientation-landscape"]');
-
-      // Check that custom class names are applied
-      expect(portraitBtn.classes()).toContain('orientation-btn');
-      expect(landscapeBtn.classes()).toContain('orientation-btn');
-    });
-
-    it('applies btn-active to active button', () => {
-      const wrapper = mount(OrientationToggle);
-
-      const portraitBtn = wrapper.find('[data-testid="orientation-portrait"]');
-      const landscapeBtn = wrapper.find('[data-testid="orientation-landscape"]');
-
-      // Portrait is active by default
-      expect(portraitBtn.classes()).toContain('btn-active');
-      expect(landscapeBtn.classes()).toContain('btn-inactive');
-    });
-
-    it('applies btn-inactive to inactive button', async () => {
-      const wrapper = mount(OrientationToggle);
-
-      // Switch to landscape so portrait becomes inactive
-      await wrapper.find('[data-testid="orientation-landscape"]').trigger('click');
-      await wrapper.vm.$nextTick();
-
-      const portraitBtn = wrapper.find('[data-testid="orientation-portrait"]');
-      const landscapeBtn = wrapper.find('[data-testid="orientation-landscape"]');
-
-      expect(landscapeBtn.classes()).toContain('btn-active');
-      expect(portraitBtn.classes()).toContain('btn-inactive');
-    });
   });
 });
diff --git a/tests/unit/components/controls/QualitySlider.test.js b/tests/unit/components/controls/QualitySlider.test.js
new file mode 100644
index 0000000..5bb1e08
--- /dev/null
+++ b/tests/unit/components/controls/QualitySlider.test.js
@@ -0,0 +1,278 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { mount } from '@vue/test-utils';
+import QualitySlider from '@/components/controls/QualitySlider.vue';
+import { useCanvasRenderer } from '@/composables/useCanvasRenderer';
+
+describe('QualitySlider', () => {
+  let canvasRenderer;
+
+  beforeEach(() => {
+    canvasRenderer = useCanvasRenderer();
+    canvasRenderer.updateQuality(80); // Reset to default
+  });
+
+  describe('Rendering', () => {
+    it('renders slider container', () => {
+      const wrapper = mount(QualitySlider);
+      expect(wrapper.find('[data-testid="quality-range-input"]').exists()).toBe(true);
+    });
+
+    it('renders with default test ID', () => {
+      const wrapper = mount(QualitySlider);
+      expect(wrapper.vm.testId).toBe('quality-slider');
+    });
+
+    it('renders with custom test ID', () => {
+      const wrapper = mount(QualitySlider, {
+        props: { testId: 'custom-quality' },
+      });
+      expect(wrapper.vm.testId).toBe('custom-quality');
+    });
+
+    it('displays value in label', () => {
+      const wrapper = mount(QualitySlider);
+      const valueLabel = wrapper.find('[data-testid="quality-value-label"]');
+      expect(valueLabel.exists()).toBe(true);
+      expect(valueLabel.text()).toBeTruthy();
+    });
+  });
+
+  describe('Input Configuration', () => {
+    it('has range type', () => {
+      const wrapper = mount(QualitySlider);
+      const input = wrapper.find('input[type="range"]');
+      expect(input.exists()).toBe(true);
+    });
+
+    it('sets minimum to 1', () => {
+      const wrapper = mount(QualitySlider);
+      const input = wrapper.find('input[type="range"]');
+      expect(input.attributes('min')).toBe('1');
+    });
+
+    it('sets maximum to 100', () => {
+      const wrapper = mount(QualitySlider);
+      const input = wrapper.find('input[type="range"]');
+      expect(input.attributes('max')).toBe('100');
+    });
+
+    it('has name attribute', () => {
+      const wrapper = mount(QualitySlider);
+      const input = wrapper.find('input[type="range"]');
+      expect(input.attributes('name')).toBe('quality');
+    });
+  });
+
+  describe('Initial Value', () => {
+    it('displays default quality value', () => {
+      const wrapper = mount(QualitySlider);
+      const input = wrapper.find('input[type="range"]');
+      expect(input.element.value).toBe(String(canvasRenderer.quality.value));
+    });
+
+    it('displays custom quality value from config', async () => {
+      canvasRenderer.updateQuality(50);
+
+      const wrapper = mount(QualitySlider);
+      await wrapper.vm.$nextTick();
+
+      const input = wrapper.find('input[type="range"]');
+      expect(input.element.value).toBe('50');
+    });
+
+    it('updates label with current value', () => {
+      canvasRenderer.updateQuality(75);
+      const wrapper = mount(QualitySlider);
+
+      const valueLabel = wrapper.find('[data-testid="quality-value-label"]');
+      expect(valueLabel.text()).toBe('75');
+    });
+  });
+
+  describe('Value Updates', () => {
+    it('updates quality when slider changes', async () => {
+      const wrapper = mount(QualitySlider);
+      const input = wrapper.find('input[type="range"]');
+
+      await input.setValue(90);
+
+      expect(canvasRenderer.quality.value).toBe(90);
+    });
+
+    it('updates to minimum value', async () => {
+      const wrapper = mount(QualitySlider);
+      const input = wrapper.find('input[type="range"]');
+
+      await input.setValue(1);
+
+      expect(canvasRenderer.quality.value).toBe(1);
+    });
+
+    it('updates to maximum value', async () => {
+      const wrapper = mount(QualitySlider);
+      const input = wrapper.find('input[type="range"]');
+
+      await input.setValue(100);
+
+      expect(canvasRenderer.quality.value).toBe(100);
+    });
+
+    it('accepts intermediate values', async () => {
+      const wrapper = mount(QualitySlider);
+      const input = wrapper.find('input[type="range"]');
+
+      await input.setValue(65);
+
+      expect(canvasRenderer.quality.value).toBe(65);
+    });
+
+    it('updates label when value changes', async () => {
+      const wrapper = mount(QualitySlider);
+      const input = wrapper.find('input[type="range"]');
+
+      await input.setValue(55);
+      await wrapper.vm.$nextTick();
+
+      const valueLabel = wrapper.find('[data-testid="quality-value-label"]');
+      expect(valueLabel.text()).toBe('55');
+    });
+  });
+
+  describe('Reactivity', () => {
+    it('updates input when quality changes externally', async () => {
+      const wrapper = mount(QualitySlider);
+
+      canvasRenderer.updateQuality(45);
+      await wrapper.vm.$nextTick();
+
+      const input = wrapper.find('input[type="range"]');
+      expect(input.element.value).toBe('45');
+    });
+
+    it('updates label when quality changes externally', async () => {
+      const wrapper = mount(QualitySlider);
+
+      canvasRenderer.updateQuality(95);
+      await wrapper.vm.$nextTick();
+
+      const valueLabel = wrapper.find('[data-testid="quality-value-label"]');
+      expect(valueLabel.text()).toBe('95');
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('handles multiple rapid value changes', async () => {
+      const wrapper = mount(QualitySlider);
+      const input = wrapper.find('input[type="range"]');
+
+      await input.setValue(25);
+      await input.setValue(50);
+      await input.setValue(75);
+      await wrapper.vm.$nextTick();
+
+      expect(canvasRenderer.quality.value).toBe(75);
+    });
+
+    it('handles minimum boundary', async () => {
+      const wrapper = mount(QualitySlider);
+      const input = wrapper.find('input[type="range"]');
+
+      await input.setValue(1);
+      await wrapper.vm.$nextTick();
+
+      expect(canvasRenderer.quality.value).toBe(1);
+      const valueLabel = wrapper.find('[data-testid="quality-value-label"]');
+      expect(valueLabel.text()).toBe('1');
+    });
+
+    it('handles maximum boundary', async () => {
+      const wrapper = mount(QualitySlider);
+      const input = wrapper.find('input[type="range"]');
+
+      await input.setValue(100);
+      await wrapper.vm.$nextTick();
+
+      expect(canvasRenderer.quality.value).toBe(100);
+      const valueLabel = wrapper.find('[data-testid="quality-value-label"]');
+      expect(valueLabel.text()).toBe('100');
+    });
+
+    it('handles alternating values', async () => {
+      const wrapper = mount(QualitySlider);
+      const input = wrapper.find('input[type="range"]');
+
+      await input.setValue(30);
+      await wrapper.vm.$nextTick();
+      expect(canvasRenderer.quality.value).toBe(30);
+
+      await input.setValue(70);
+      await wrapper.vm.$nextTick();
+      expect(canvasRenderer.quality.value).toBe(70);
+
+      await input.setValue(40);
+      await wrapper.vm.$nextTick();
+      expect(canvasRenderer.quality.value).toBe(40);
+    });
+
+    it('handles large jumps in value', async () => {
+      const wrapper = mount(QualitySlider);
+      const input = wrapper.find('input[type="range"]');
+
+      await input.setValue(1);
+      await wrapper.vm.$nextTick();
+      expect(canvasRenderer.quality.value).toBe(1);
+
+      await input.setValue(100);
+      await wrapper.vm.$nextTick();
+      expect(canvasRenderer.quality.value).toBe(100);
+    });
+  });
+
+  describe('Integration', () => {
+    it('works with canvas renderer composable', async () => {
+      const wrapper = mount(QualitySlider);
+      const input = wrapper.find('input[type="range"]');
+
+      // Initial state
+      const initialValue = canvasRenderer.quality.value;
+
+      // Change value
+      await input.setValue(85);
+
+      // Verify config updated
+      expect(canvasRenderer.quality.value).toBe(85);
+      expect(canvasRenderer.quality.value).not.toBe(initialValue);
+    });
+
+    it('responds to external config changes', async () => {
+      const wrapper = mount(QualitySlider);
+
+      // Change externally
+      canvasRenderer.updateQuality(60);
+      await wrapper.vm.$nextTick();
+
+      // Verify UI updated
+      const input = wrapper.find('input[type="range"]');
+      expect(input.element.value).toBe('60');
+      const valueLabel = wrapper.find('[data-testid="quality-value-label"]');
+      expect(valueLabel.text()).toBe('60');
+    });
+  });
+
+  describe('Real-world Scenarios', () => {
+    it('handles typical quality percentages', async () => {
+      const wrapper = mount(QualitySlider);
+      const input = wrapper.find('input[type="range"]');
+      const valueLabel = wrapper.find('[data-testid="quality-value-label"]');
+
+      const commonValues = [50, 70, 80, 90, 100];
+
+      for (const value of commonValues) {
+        await input.setValue(value);
+        await wrapper.vm.$nextTick();
+        expect(canvasRenderer.quality.value).toBe(value);
+        expect(valueLabel.text()).toBe(String(value));
+      }
+    });
+  });
+});
diff --git a/tests/unit/components/controls/ResetButton.test.js b/tests/unit/components/controls/ResetButton.test.js
index be86118..19cc1cd 100644
--- a/tests/unit/components/controls/ResetButton.test.js
+++ b/tests/unit/components/controls/ResetButton.test.js
@@ -55,19 +55,6 @@ describe('ResetButton', () => {
     imageState.clearImages();
   });
 
-  describe('Rendering', () => {
-    it('renders reset button', () => {
-      const wrapper = mount(ResetButton);
-
-      expect(wrapper.find('button').exists()).toBe(true);
-    });
-
-    it('displays reset icon', () => {
-      const wrapper = mount(ResetButton);
-
-      expect(wrapper.find('svg').exists()).toBe(true);
-    });
-  });
 
   describe('Interaction', () => {
     it('resets frame configuration when clicked', async () => {
@@ -110,19 +97,4 @@ describe('ResetButton', () => {
     }, 10000);
   });
 
-  describe('Accessibility', () => {
-    it('has custom test ID', () => {
-      const wrapper = mount(ResetButton, {
-        props: { testId: 'custom-reset' },
-      });
-
-      expect(wrapper.attributes('data-testid')).toBe('custom-reset');
-    });
-
-    it('icon is hidden from screen readers', () => {
-      const wrapper = mount(ResetButton);
-
-      expect(wrapper.find('svg').attributes('aria-hidden')).toBe('true');
-    });
-  });
 });
diff --git a/tests/unit/components/controls/SpacingInput.test.js b/tests/unit/components/controls/SpacingInput.test.js
deleted file mode 100644
index b25bb43..0000000
--- a/tests/unit/components/controls/SpacingInput.test.js
+++ /dev/null
@@ -1,444 +0,0 @@
-import { describe, it, expect, beforeEach } from 'vitest';
-import { mount } from '@vue/test-utils';
-import SpacingInput from '@/components/controls/SpacingInput.vue';
-import BaseInput from '@/components/shared/BaseInput.vue';
-import { useFrameConfig } from '@/composables/useFrameConfig';
-import { FRAME_CONSTRAINTS } from '@/utils/constants';
-
-describe('SpacingInput', () => {
-  let frameConfig;
-
-  beforeEach(() => {
-    frameConfig = useFrameConfig();
-    frameConfig.reset();
-  });
-
-  describe('Rendering', () => {
-    it('renders BaseInput component', () => {
-      const wrapper = mount(SpacingInput);
-      expect(wrapper.findComponent(BaseInput).exists()).toBe(true);
-    });
-
-    it('renders with default test ID', () => {
-      const wrapper = mount(SpacingInput);
-      expect(wrapper.attributes('data-testid')).toBe('spacing-input');
-    });
-
-    it('renders with custom test ID', () => {
-      const wrapper = mount(SpacingInput, {
-        props: { testId: 'custom-spacing' },
-      });
-      expect(wrapper.attributes('data-testid')).toBe('custom-spacing');
-    });
-
-    it('displays spacing label', () => {
-      const wrapper = mount(SpacingInput);
-      expect(wrapper.text()).toContain('Spacing');
-    });
-
-    it('displays px unit', () => {
-      const wrapper = mount(SpacingInput);
-      const baseInput = wrapper.findComponent(BaseInput);
-      expect(baseInput.props('unit')).toBe('px');
-    });
-
-    it('displays hint with range information', () => {
-      const wrapper = mount(SpacingInput);
-      const baseInput = wrapper.findComponent(BaseInput);
-      expect(baseInput.props('hint')).toBe(
-        `range(${FRAME_CONSTRAINTS.minSpacing}px:${FRAME_CONSTRAINTS.maxSpacing}px)`
-      );
-    });
-  });
-
-  describe('Input Configuration', () => {
-    it('has number type', () => {
-      const wrapper = mount(SpacingInput);
-      const baseInput = wrapper.findComponent(BaseInput);
-      expect(baseInput.props('type')).toBe('number');
-    });
-
-    it('sets minimum constraint', () => {
-      const wrapper = mount(SpacingInput);
-      const baseInput = wrapper.findComponent(BaseInput);
-      expect(baseInput.props('min')).toBe(FRAME_CONSTRAINTS.minSpacing);
-    });
-
-    it('sets maximum constraint', () => {
-      const wrapper = mount(SpacingInput);
-      const baseInput = wrapper.findComponent(BaseInput);
-      expect(baseInput.props('max')).toBe(FRAME_CONSTRAINTS.maxSpacing);
-    });
-
-    it('sets step to 10', () => {
-      const wrapper = mount(SpacingInput);
-      const baseInput = wrapper.findComponent(BaseInput);
-      expect(baseInput.props('step')).toBe(10);
-    });
-  });
-
-  describe('Initial Value', () => {
-    it('displays default spacing value', () => {
-      const wrapper = mount(SpacingInput);
-      const baseInput = wrapper.findComponent(BaseInput);
-      expect(baseInput.props('modelValue')).toBe(frameConfig.spacing.value);
-    });
-
-    it('displays custom spacing value from config', async () => {
-      frameConfig.updateSpacing(100);
-
-      const wrapper = mount(SpacingInput);
-      await wrapper.vm.$nextTick();
-
-      const baseInput = wrapper.findComponent(BaseInput);
-      expect(baseInput.props('modelValue')).toBe(100);
-    });
-  });
-
-  describe('Value Updates', () => {
-    it('updates spacing when input changes', async () => {
-      const wrapper = mount(SpacingInput);
-      const baseInput = wrapper.findComponent(BaseInput);
-
-      await baseInput.vm.$emit('update:modelValue', 50);
-
-      expect(frameConfig.spacing.value).toBe(50);
-    });
-
-    it('updates to minimum value', async () => {
-      const wrapper = mount(SpacingInput);
-      const baseInput = wrapper.findComponent(BaseInput);
-
-      await baseInput.vm.$emit('update:modelValue', FRAME_CONSTRAINTS.minSpacing);
-
-      expect(frameConfig.spacing.value).toBe(FRAME_CONSTRAINTS.minSpacing);
-    });
-
-    it('updates to maximum value', async () => {
-      const wrapper = mount(SpacingInput);
-      const baseInput = wrapper.findComponent(BaseInput);
-
-      await baseInput.vm.$emit('update:modelValue', FRAME_CONSTRAINTS.maxSpacing);
-
-      expect(frameConfig.spacing.value).toBe(FRAME_CONSTRAINTS.maxSpacing);
-    });
-
-    it('updates to zero', async () => {
-      const wrapper = mount(SpacingInput);
-      const baseInput = wrapper.findComponent(BaseInput);
-
-      await baseInput.vm.$emit('update:modelValue', 0);
-
-      expect(frameConfig.spacing.value).toBe(0);
-    });
-
-    it('accepts intermediate values', async () => {
-      const wrapper = mount(SpacingInput);
-      const baseInput = wrapper.findComponent(BaseInput);
-
-      await baseInput.vm.$emit('update:modelValue', 250);
-
-      expect(frameConfig.spacing.value).toBe(250);
-    });
-  });
-
-  describe('Validation', () => {
-    it('shows no error for valid spacing', () => {
-      frameConfig.updateSpacing(50);
-
-      const wrapper = mount(SpacingInput);
-      const baseInput = wrapper.findComponent(BaseInput);
-
-      expect(baseInput.props('error')).toBe('');
-    });
-
-    it('shows error for spacing below minimum', async () => {
-      const wrapper = mount(SpacingInput);
-      const baseInput = wrapper.findComponent(BaseInput);
-
-      await baseInput.vm.$emit('update:modelValue', -10);
-      await wrapper.vm.$nextTick();
-
-      expect(baseInput.props('error')).toBe(
-        `Spacing must be at least ${FRAME_CONSTRAINTS.minSpacing}px`
-      );
-    });
-
-    it('shows error for spacing above maximum', async () => {
-      const wrapper = mount(SpacingInput);
-      const baseInput = wrapper.findComponent(BaseInput);
-
-      await baseInput.vm.$emit('update:modelValue', 600);
-      await wrapper.vm.$nextTick();
-
-      expect(baseInput.props('error')).toBe(
-        `Spacing must not exceed ${FRAME_CONSTRAINTS.maxSpacing}px`
-      );
-    });
-
-    it('shows no error at minimum boundary', async () => {
-      const wrapper = mount(SpacingInput);
-      const baseInput = wrapper.findComponent(BaseInput);
-
-      await baseInput.vm.$emit('update:modelValue', FRAME_CONSTRAINTS.minSpacing);
-      await wrapper.vm.$nextTick();
-
-      expect(baseInput.props('error')).toBe('');
-    });
-
-    it('shows no error at maximum boundary', async () => {
-      const wrapper = mount(SpacingInput);
-      const baseInput = wrapper.findComponent(BaseInput);
-
-      await baseInput.vm.$emit('update:modelValue', FRAME_CONSTRAINTS.maxSpacing);
-      await wrapper.vm.$nextTick();
-
-      expect(baseInput.props('error')).toBe('');
-    });
-  });
-
-  describe('Blur Handling', () => {
-    it('clamps value to minimum on blur when below range', async () => {
-      const wrapper = mount(SpacingInput);
-      const baseInput = wrapper.findComponent(BaseInput);
-
-      // Set invalid value
-      await baseInput.vm.$emit('update:modelValue', -50);
-      await wrapper.vm.$nextTick();
-
-      // Trigger blur
-      await baseInput.vm.$emit('blur');
-      await wrapper.vm.$nextTick();
-
-      expect(frameConfig.spacing.value).toBe(FRAME_CONSTRAINTS.minSpacing);
-    });
-
-    it('clamps value to maximum on blur when above range', async () => {
-      const wrapper = mount(SpacingInput);
-      const baseInput = wrapper.findComponent(BaseInput);
-
-      // Set invalid value
-      await baseInput.vm.$emit('update:modelValue', 700);
-      await wrapper.vm.$nextTick();
-
-      // Trigger blur
-      await baseInput.vm.$emit('blur');
-      await wrapper.vm.$nextTick();
-
-      expect(frameConfig.spacing.value).toBe(FRAME_CONSTRAINTS.maxSpacing);
-    });
-
-    it('does not change value on blur when valid', async () => {
-      const wrapper = mount(SpacingInput);
-      const baseInput = wrapper.findComponent(BaseInput);
-
-      // Set valid value
-      await baseInput.vm.$emit('update:modelValue', 100);
-      await wrapper.vm.$nextTick();
-
-      // Trigger blur
-      await baseInput.vm.$emit('blur');
-      await wrapper.vm.$nextTick();
-
-      expect(frameConfig.spacing.value).toBe(100);
-    });
-
-    it('handles blur at minimum boundary', async () => {
-      const wrapper = mount(SpacingInput);
-      const baseInput = wrapper.findComponent(BaseInput);
-
-      await baseInput.vm.$emit('update:modelValue', FRAME_CONSTRAINTS.minSpacing);
-      await baseInput.vm.$emit('blur');
-      await wrapper.vm.$nextTick();
-
-      expect(frameConfig.spacing.value).toBe(FRAME_CONSTRAINTS.minSpacing);
-    });
-
-    it('handles blur at maximum boundary', async () => {
-      const wrapper = mount(SpacingInput);
-      const baseInput = wrapper.findComponent(BaseInput);
-
-      await baseInput.vm.$emit('update:modelValue', FRAME_CONSTRAINTS.maxSpacing);
-      await baseInput.vm.$emit('blur');
-      await wrapper.vm.$nextTick();
-
-      expect(frameConfig.spacing.value).toBe(FRAME_CONSTRAINTS.maxSpacing);
-    });
-  });
-
-  describe('Reactivity', () => {
-    it('updates input when spacing changes externally', async () => {
-      const wrapper = mount(SpacingInput);
-
-      frameConfig.updateSpacing(200);
-      await wrapper.vm.$nextTick();
-
-      const baseInput = wrapper.findComponent(BaseInput);
-      expect(baseInput.props('modelValue')).toBe(200);
-    });
-
-    it('clears error when value becomes valid', async () => {
-      const wrapper = mount(SpacingInput);
-      const baseInput = wrapper.findComponent(BaseInput);
-
-      // Set invalid value
-      await baseInput.vm.$emit('update:modelValue', 600);
-      await wrapper.vm.$nextTick();
-      expect(baseInput.props('error')).toBeTruthy();
-
-      // Set valid value
-      await baseInput.vm.$emit('update:modelValue', 100);
-      await wrapper.vm.$nextTick();
-      expect(baseInput.props('error')).toBe('');
-    });
-
-    it('updates error when value becomes invalid', async () => {
-      const wrapper = mount(SpacingInput);
-      const baseInput = wrapper.findComponent(BaseInput);
-
-      // Set valid value
-      await baseInput.vm.$emit('update:modelValue', 100);
-      await wrapper.vm.$nextTick();
-      expect(baseInput.props('error')).toBe('');
-
-      // Set invalid value
-      await baseInput.vm.$emit('update:modelValue', -10);
-      await wrapper.vm.$nextTick();
-      expect(baseInput.props('error')).toBeTruthy();
-    });
-  });
-
-  describe('Edge Cases', () => {
-    it('handles zero spacing', async () => {
-      const wrapper = mount(SpacingInput);
-      const baseInput = wrapper.findComponent(BaseInput);
-
-      await baseInput.vm.$emit('update:modelValue', 0);
-      await wrapper.vm.$nextTick();
-
-      expect(frameConfig.spacing.value).toBe(0);
-      expect(baseInput.props('error')).toBe('');
-    });
-
-    it('handles multiple rapid value changes', async () => {
-      const wrapper = mount(SpacingInput);
-      const baseInput = wrapper.findComponent(BaseInput);
-
-      await baseInput.vm.$emit('update:modelValue', 10);
-      await baseInput.vm.$emit('update:modelValue', 50);
-      await baseInput.vm.$emit('update:modelValue', 100);
-      await wrapper.vm.$nextTick();
-
-      expect(frameConfig.spacing.value).toBe(100);
-    });
-
-    it('handles clamping negative values multiple times', async () => {
-      const wrapper = mount(SpacingInput);
-      const baseInput = wrapper.findComponent(BaseInput);
-
-      // First invalid value
-      await baseInput.vm.$emit('update:modelValue', -10);
-      await baseInput.vm.$emit('blur');
-      await wrapper.vm.$nextTick();
-      expect(frameConfig.spacing.value).toBe(FRAME_CONSTRAINTS.minSpacing);
-
-      // Second invalid value
-      await baseInput.vm.$emit('update:modelValue', -20);
-      await baseInput.vm.$emit('blur');
-      await wrapper.vm.$nextTick();
-      expect(frameConfig.spacing.value).toBe(FRAME_CONSTRAINTS.minSpacing);
-    });
-
-    it('handles clamping excessive values multiple times', async () => {
-      const wrapper = mount(SpacingInput);
-      const baseInput = wrapper.findComponent(BaseInput);
-
-      // First invalid value
-      await baseInput.vm.$emit('update:modelValue', 600);
-      await baseInput.vm.$emit('blur');
-      await wrapper.vm.$nextTick();
-      expect(frameConfig.spacing.value).toBe(FRAME_CONSTRAINTS.maxSpacing);
-
-      // Second invalid value
-      await baseInput.vm.$emit('update:modelValue', 700);
-      await baseInput.vm.$emit('blur');
-      await wrapper.vm.$nextTick();
-      expect(frameConfig.spacing.value).toBe(FRAME_CONSTRAINTS.maxSpacing);
-    });
-  });
-
-  describe('Integration with BaseInput', () => {
-    it('passes correct props to BaseInput', () => {
-      const wrapper = mount(SpacingInput);
-      const baseInput = wrapper.findComponent(BaseInput);
-
-      expect(baseInput.props()).toMatchObject({
-        type: 'number',
-        label: 'Spacing',
-        unit: 'px',
-        min: FRAME_CONSTRAINTS.minSpacing,
-        max: FRAME_CONSTRAINTS.maxSpacing,
-        step: 10,
-      });
-    });
-
-    it('uses v-model binding with BaseInput', async () => {
-      const wrapper = mount(SpacingInput);
-      const baseInput = wrapper.findComponent(BaseInput);
-
-      // Check initial binding
-      expect(baseInput.props('modelValue')).toBe(frameConfig.spacing.value);
-
-      // Update value
-      await baseInput.vm.$emit('update:modelValue', 150);
-
-      // Check value updated through v-model
-      expect(frameConfig.spacing.value).toBe(150);
-    });
-
-    it('forwards blur event to BaseInput', async () => {
-      const wrapper = mount(SpacingInput);
-      const baseInput = wrapper.findComponent(BaseInput);
-
-      // Set invalid value and blur
-      await baseInput.vm.$emit('update:modelValue', -10);
-      await baseInput.vm.$emit('blur');
-      await wrapper.vm.$nextTick();
-
-      // Verify handleBlur was called (value was clamped)
-      expect(frameConfig.spacing.value).toBe(FRAME_CONSTRAINTS.minSpacing);
-    });
-  });
-
-  describe('Component Composition', () => {
-    it('is a wrapper around BaseInput', () => {
-      const wrapper = mount(SpacingInput);
-      expect(wrapper.findComponent(BaseInput).exists()).toBe(true);
-      expect(wrapper.findAllComponents(BaseInput)).toHaveLength(1);
-    });
-
-    it('has BaseInput as direct child', () => {
-      const wrapper = mount(SpacingInput);
-      const baseInput = wrapper.findComponent(BaseInput);
-
-      expect(baseInput.exists()).toBe(true);
-      expect(wrapper.html()).toContain('data-testid="number-input"');
-    });
-  });
-
-  describe('Constraints Verification', () => {
-    it('uses FRAME_CONSTRAINTS.minSpacing constant', () => {
-      const wrapper = mount(SpacingInput);
-      const baseInput = wrapper.findComponent(BaseInput);
-      expect(baseInput.props('min')).toBe(FRAME_CONSTRAINTS.minSpacing);
-      expect(FRAME_CONSTRAINTS.minSpacing).toBe(0);
-    });
-
-    it('uses FRAME_CONSTRAINTS.maxSpacing constant', () => {
-      const wrapper = mount(SpacingInput);
-      const baseInput = wrapper.findComponent(BaseInput);
-      expect(baseInput.props('max')).toBe(FRAME_CONSTRAINTS.maxSpacing);
-      expect(FRAME_CONSTRAINTS.maxSpacing).toBe(500);
-    });
-  });
-});
diff --git a/tests/unit/components/layout/ActionBar.test.js b/tests/unit/components/layout/ActionBar.test.js
index 423cbbe..0ed6308 100644
--- a/tests/unit/components/layout/ActionBar.test.js
+++ b/tests/unit/components/layout/ActionBar.test.js
@@ -17,20 +17,6 @@ vi.mock('@/components/controls/DownloadButton.vue', () => ({
   },
 }));
 
-vi.mock('@/components/controls/QualityInput.vue', () => ({
-  default: {
-    name: 'QualityInput',
-    template: '<div data-testid="quality-input">Quality</div>',
-  },
-}));
-
-vi.mock('@/components/controls/FileNameInput.vue', () => ({
-  default: {
-    name: 'FileNameInput',
-    template: '<div data-testid="file-name-input">Filename</div>',
-  },
-}));
-
 describe('ActionBar', () => {
   let wrapper;
 
@@ -40,25 +26,6 @@ describe('ActionBar', () => {
     });
   });
 
-  describe('Structure', () => {
-    it('renders the action bar with correct structure', () => {
-      expect(wrapper.find('[data-testid="action-bar"]').exists()).toBe(true);
-    });
-
-    it('renders all components (inputs and buttons)', () => {
-      expect(wrapper.find('[data-testid="quality-input"]').exists()).toBe(true);
-      expect(wrapper.find('[data-testid="file-name-input"]').exists()).toBe(true);
-      expect(wrapper.find('[data-testid="reset-button"]').exists()).toBe(true);
-      expect(wrapper.find('[data-testid="download-button"]').exists()).toBe(true);
-    });
-
-    it('contains output controls and action buttons', () => {
-      expect(wrapper.find('[data-testid="output-action-bar"]').exists()).toBe(true);
-      expect(wrapper.find('[data-testid="buttons-action-bar"]').exists()).toBe(true);
-    });
-  });
-
-
   describe('Props', () => {
     it('accepts stage prop for download functionality', () => {
       const mockStage = { toDataURL: vi.fn() };
@@ -72,10 +39,6 @@ describe('ActionBar', () => {
       expect(wrapper.props('stage')).toStrictEqual(mockStage);
     });
 
-    it('requires previewWidth prop', () => {
-      expect(wrapper.props('previewWidth')).toBe(800);
-    });
-
     it('has default null stage', () => {
       wrapper = mount(ActionBar, {
         props: {
@@ -86,18 +49,4 @@ describe('ActionBar', () => {
       expect(wrapper.props('stage')).toBeNull();
     });
   });
-
-  describe('Component Organization', () => {
-    it('has quality and filename inputs in output section', () => {
-      const outputSection = wrapper.find('[data-testid="output-action-bar"]');
-      expect(outputSection.find('[data-testid="quality-input"]').exists()).toBe(true);
-      expect(outputSection.find('[data-testid="file-name-input"]').exists()).toBe(true);
-    });
-
-    it('has reset and download buttons in buttons section', () => {
-      const buttonsSection = wrapper.find('[data-testid="buttons-action-bar"]');
-      expect(buttonsSection.find('[data-testid="reset-button"]').exists()).toBe(true);
-      expect(buttonsSection.find('[data-testid="download-button"]').exists()).toBe(true);
-    });
-  });
 });
diff --git a/tests/unit/components/layout/AppHeader.test.js b/tests/unit/components/layout/AppHeader.test.js
deleted file mode 100644
index 57ef6a9..0000000
--- a/tests/unit/components/layout/AppHeader.test.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { mount } from '@vue/test-utils';
-import AppHeader from '@/components/layout/AppHeader.vue';
-
-describe('AppHeader', () => {
-  it('renders the header with correct structure', () => {
-    const wrapper = mount(AppHeader);
-
-    expect(wrapper.find('[data-testid="app-header"]').exists()).toBe(true);
-    expect(wrapper.find('h1').text()).toBe('Framed');
-  });
-
-  it('displays the application title', () => {
-    const wrapper = mount(AppHeader);
-
-    const title = wrapper.find('h1');
-    expect(title.exists()).toBe(true);
-    expect(title.text()).toBe('Framed');
-  });
-
-});
diff --git a/tests/unit/components/layout/CanvasContainer.test.js b/tests/unit/components/layout/CanvasContainer.test.js
index def8de1..3b16b50 100644
--- a/tests/unit/components/layout/CanvasContainer.test.js
+++ b/tests/unit/components/layout/CanvasContainer.test.js
@@ -25,44 +25,7 @@ describe('CanvasContainer', () => {
     }));
   });
 
-  it('renders the canvas container with correct structure', () => {
-    wrapper = mount(CanvasContainer, {
-      props: { previewWidth: 800 },
-    });
-    expect(wrapper.find('[data-testid="canvas-container"]').exists()).toBe(true);
-  });
-
-  it('renders FrameCanvas component', () => {
-    wrapper = mount(CanvasContainer, {
-      props: { previewWidth: 800 },
-    });
-    expect(wrapper.find('[data-testid="frame-canvas"]').exists()).toBe(true);
-  });
-
-  it('has max width constraint', () => {
-    wrapper = mount(CanvasContainer, {
-      props: { previewWidth: 800 },
-    });
-    const container = wrapper.find('[data-testid="canvas-container"]');
-    expect(container.classes()).toContain('max-w-[1024px]');
-  });
-
-  it('is full width', () => {
-    wrapper = mount(CanvasContainer, {
-      props: { previewWidth: 800 },
-    });
-    const container = wrapper.find('[data-testid="canvas-container"]');
-    expect(container.classes()).toContain('w-full');
-  });
-
   describe('handleCanvasReady function', () => {
-    it('handleCanvasReady method exists', () => {
-      wrapper = mount(CanvasContainer, {
-        props: { previewWidth: 800 },
-      });
-      expect(typeof wrapper.vm.handleCanvasReady).toBe('function');
-    });
-
     it('emits canvasReady event when handleCanvasReady is called', () => {
       wrapper = mount(CanvasContainer, {
         props: { previewWidth: 800 },
@@ -81,15 +44,6 @@ describe('CanvasContainer', () => {
       expect(wrapper.emitted('canvasReady')[0][0]).toStrictEqual(mockStage);
     });
 
-    it('emits canvasReady event exactly once per call', () => {
-      wrapper = mount(CanvasContainer, {
-        props: { previewWidth: 800 },
-      });
-      const mockStage = { toDataURL: vi.fn() };
-      wrapper.vm.handleCanvasReady(mockStage);
-      expect(wrapper.emitted('canvasReady')).toHaveLength(1);
-    });
-
     it('can call handleCanvasReady multiple times', () => {
       wrapper = mount(CanvasContainer, {
         props: { previewWidth: 800 },
@@ -100,20 +54,4 @@ describe('CanvasContainer', () => {
       expect(wrapper.emitted('canvasReady')).toHaveLength(2);
     });
   });
-
-  describe('Refs', () => {
-    it('has containerRef defined', () => {
-      wrapper = mount(CanvasContainer, {
-        props: { previewWidth: 800 },
-      });
-      expect(wrapper.vm.containerRef).toBeDefined();
-    });
-
-    it('has canvasRef defined', () => {
-      wrapper = mount(CanvasContainer, {
-        props: { previewWidth: 800 },
-      });
-      expect(wrapper.vm.canvasRef).toBeDefined();
-    });
-  });
 });
diff --git a/tests/unit/components/layout/ConfigBar.test.js b/tests/unit/components/layout/ConfigBar.test.js
index 0890d8e..64a40c6 100644
--- a/tests/unit/components/layout/ConfigBar.test.js
+++ b/tests/unit/components/layout/ConfigBar.test.js
@@ -24,17 +24,31 @@ vi.mock('@/components/controls/ColorPicker.vue', () => ({
   },
 }));
 
-vi.mock('@/components/controls/FrameSizeInput.vue', () => ({
+vi.mock('@/components/controls/FrameSizeSelector.vue', () => ({
   default: {
-    name: 'FrameSizeInput',
-    template: '<div data-testid="frame-size-input">FrameSizeInput</div>',
+    name: 'FrameSizeSelector',
+    template: '<div data-testid="frame-size-selector">FrameSizeSelector</div>',
   },
 }));
 
-vi.mock('@/components/controls/SpacingInput.vue', () => ({
+vi.mock('@/components/controls/BorderSlider.vue', () => ({
   default: {
-    name: 'SpacingInput',
-    template: '<div data-testid="spacing-input">SpacingInput</div>',
+    name: 'BorderSlider',
+    template: '<div data-testid="border-slider">BorderSlider</div>',
+  },
+}));
+
+vi.mock('@/components/controls/FormatSelector.vue', () => ({
+  default: {
+    name: 'FormatSelector',
+    template: '<div data-testid="format-selector">FormatSelector</div>',
+  },
+}));
+
+vi.mock('@/components/controls/QualitySlider.vue', () => ({
+  default: {
+    name: 'QualitySlider',
+    template: '<div data-testid="quality-slider">QualitySlider</div>',
   },
 }));
 
@@ -45,63 +59,15 @@ describe('ConfigBar', () => {
     wrapper = mount(ConfigBar);
   });
 
-  describe('Structure', () => {
-    it('renders the config bar with correct structure', () => {
-      expect(wrapper.find('[data-testid="config-bar"]').exists()).toBe(true);
-    });
-
-    it('renders both configuration rows', () => {
-      expect(wrapper.find('[data-testid="row-orientation-aspect"]').exists()).toBe(true);
-      expect(wrapper.find('[data-testid="row-frame-config"]').exists()).toBe(true);
-    });
-  });
-
-  describe('Row 1: Orientation and Aspect Ratio', () => {
-    it('renders orientation and aspect ratio controls', () => {
-      const row = wrapper.find('[data-testid="row-orientation-aspect"]');
-      expect(row.find('[data-testid="orientation-toggle"]').exists()).toBe(true);
-      expect(row.find('[data-testid="aspect-ratio-selector"]').exists()).toBe(true);
-    });
-
-    it('contains exactly 2 child components', () => {
-      const row = wrapper.find('[data-testid="row-orientation-aspect"]');
-      const children = row.findAll('[data-testid]');
-      expect(children).toHaveLength(2);
-    });
-  });
-
-  describe('Row 2: Frame Configuration Controls', () => {
-    it('renders color picker, frame size, and spacing controls', () => {
-      const row = wrapper.find('[data-testid="row-frame-config"]');
-      expect(row.find('[data-testid="color-picker"]').exists()).toBe(true);
-      expect(row.find('[data-testid="frame-size-input"]').exists()).toBe(true);
-      expect(row.find('[data-testid="spacing-input"]').exists()).toBe(true);
-    });
-
-    it('contains exactly 3 child components', () => {
-      const row = wrapper.find('[data-testid="row-frame-config"]');
-      const children = row.findAll('[data-testid]');
-      expect(children).toHaveLength(3);
-    });
-  });
-
-
-  describe('Component Rendering', () => {
+  describe('Component Integration', () => {
     it('renders all control components', () => {
       expect(wrapper.find('[data-testid="orientation-toggle"]').exists()).toBe(true);
       expect(wrapper.find('[data-testid="aspect-ratio-selector"]').exists()).toBe(true);
       expect(wrapper.find('[data-testid="color-picker"]').exists()).toBe(true);
-      expect(wrapper.find('[data-testid="frame-size-input"]').exists()).toBe(true);
-      expect(wrapper.find('[data-testid="spacing-input"]').exists()).toBe(true);
-    });
-  });
-
-  describe('Layout Organization', () => {
-    it('maintains correct order of rows', () => {
-      const rows = wrapper.findAll('[data-testid^="row-"]');
-      expect(rows).toHaveLength(2);
-      expect(rows[0].attributes('data-testid')).toBe('row-orientation-aspect');
-      expect(rows[1].attributes('data-testid')).toBe('row-frame-config');
+      expect(wrapper.find('[data-testid="frame-size-selector"]').exists()).toBe(true);
+      expect(wrapper.find('[data-testid="border-slider"]').exists()).toBe(true);
+      expect(wrapper.find('[data-testid="format-selector"]').exists()).toBe(true);
+      expect(wrapper.find('[data-testid="quality-slider"]').exists()).toBe(true);
     });
   });
 });
diff --git a/tests/unit/components/shared/BaseInput.test.js b/tests/unit/components/shared/BaseInput.test.js
deleted file mode 100644
index 7306449..0000000
--- a/tests/unit/components/shared/BaseInput.test.js
+++ /dev/null
@@ -1,491 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { mount } from '@vue/test-utils';
-import BaseInput from '@/components/shared/BaseInput.vue';
-
-describe('BaseInput', () => {
-  describe('Rendering', () => {
-    it('renders input element', () => {
-      const wrapper = mount(BaseInput);
-      expect(wrapper.find('[data-testid="number-input"]').exists()).toBe(true);
-    });
-
-    it('renders with default test ID', () => {
-      const wrapper = mount(BaseInput);
-      expect(wrapper.attributes('data-testid')).toBe('base-input');
-    });
-
-    it('renders with custom test ID', () => {
-      const wrapper = mount(BaseInput, {
-        props: { testId: 'custom-input' },
-      });
-      expect(wrapper.attributes('data-testid')).toBe('custom-input');
-    });
-
-    it('renders without label by default', () => {
-      const wrapper = mount(BaseInput);
-      expect(wrapper.find('label').exists()).toBe(false);
-    });
-
-    it('renders with label when provided', () => {
-      const wrapper = mount(BaseInput, {
-        props: { label: 'Test Label' },
-      });
-      const label = wrapper.find('label');
-      expect(label.exists()).toBe(true);
-      expect(label.text()).toContain('Test Label');
-    });
-
-    it('renders unit display when provided', () => {
-      const wrapper = mount(BaseInput, {
-        props: { unit: 'px' },
-      });
-      const unitSpan = wrapper.find('.absolute.right-3');
-      expect(unitSpan.exists()).toBe(true);
-      expect(unitSpan.text()).toBe('px');
-    });
-
-    it('does not render unit display when not provided', () => {
-      const wrapper = mount(BaseInput);
-      const unitSpan = wrapper.find('.absolute.right-3');
-      expect(unitSpan.exists()).toBe(false);
-    });
-
-    it('renders required asterisk when required is true', () => {
-      const wrapper = mount(BaseInput, {
-        props: { label: 'Required Field', required: true },
-      });
-      const asterisk = wrapper.find('[aria-label="required"]');
-      expect(asterisk.exists()).toBe(true);
-      expect(asterisk.text()).toBe('*');
-    });
-
-    it('does not render required asterisk when required is false', () => {
-      const wrapper = mount(BaseInput, {
-        props: { label: 'Optional Field', required: false },
-      });
-      const asterisk = wrapper.find('[aria-label="required"]');
-      expect(asterisk.exists()).toBe(false);
-    });
-
-    it('renders error message when error prop is provided', () => {
-      const wrapper = mount(BaseInput, {
-        props: { error: 'Invalid value' },
-      });
-      const errorSpan = wrapper.find('[data-testid="input-error"]');
-      expect(errorSpan.exists()).toBe(true);
-      expect(errorSpan.text()).toBe('Invalid value');
-    });
-
-    it('renders hint message when hint prop is provided', () => {
-      const wrapper = mount(BaseInput, {
-        props: { hint: 'Enter a number between 1-100' },
-      });
-      const hintSpan = wrapper.find('[data-testid="input-hint"]');
-      expect(hintSpan.exists()).toBe(true);
-      expect(hintSpan.text()).toBe('Enter a number between 1-100');
-    });
-
-    it('does not render hint when error is present', () => {
-      const wrapper = mount(BaseInput, {
-        props: { hint: 'This is a hint', error: 'This is an error' },
-      });
-      const hintSpan = wrapper.find('[data-testid="input-hint"]');
-      expect(hintSpan.exists()).toBe(false);
-    });
-  });
-
-  describe('Input Type', () => {
-    it('defaults to number type', () => {
-      const wrapper = mount(BaseInput);
-      const input = wrapper.find('[data-testid="number-input"]');
-      expect(input.attributes('type')).toBe('number');
-    });
-
-    it('accepts text type', () => {
-      const wrapper = mount(BaseInput, {
-        props: { type: 'text' },
-      });
-      const input = wrapper.find('[data-testid="number-input"]');
-      expect(input.attributes('type')).toBe('text');
-    });
-
-    it('validates input type prop', () => {
-      // Vue will warn about invalid prop values in development
-      const wrapper = mount(BaseInput, {
-        props: { type: 'number' },
-      });
-      expect(wrapper.vm.type).toBe('number');
-    });
-  });
-
-  describe('Input Attributes', () => {
-    it('sets min attribute when provided', () => {
-      const wrapper = mount(BaseInput, {
-        props: { min: 10 },
-      });
-      const input = wrapper.find('[data-testid="number-input"]');
-      expect(input.attributes('min')).toBe('10');
-    });
-
-    it('sets max attribute when provided', () => {
-      const wrapper = mount(BaseInput, {
-        props: { max: 100 },
-      });
-      const input = wrapper.find('[data-testid="number-input"]');
-      expect(input.attributes('max')).toBe('100');
-    });
-
-    it('sets step attribute with default value of 1', () => {
-      const wrapper = mount(BaseInput);
-      const input = wrapper.find('[data-testid="number-input"]');
-      expect(input.attributes('step')).toBe('1');
-    });
-
-    it('sets custom step attribute', () => {
-      const wrapper = mount(BaseInput, {
-        props: { step: 0.5 },
-      });
-      const input = wrapper.find('[data-testid="number-input"]');
-      expect(input.attributes('step')).toBe('0.5');
-    });
-
-    it('sets placeholder attribute', () => {
-      const wrapper = mount(BaseInput, {
-        props: { placeholder: 'Enter value' },
-      });
-      const input = wrapper.find('[data-testid="number-input"]');
-      expect(input.attributes('placeholder')).toBe('Enter value');
-    });
-
-    it('sets disabled attribute when disabled is true', () => {
-      const wrapper = mount(BaseInput, {
-        props: { disabled: true },
-      });
-      const input = wrapper.find('[data-testid="number-input"]');
-      expect(input.attributes('disabled')).toBeDefined();
-    });
-
-    it('does not set disabled attribute when disabled is false', () => {
-      const wrapper = mount(BaseInput, {
-        props: { disabled: false },
-      });
-      const input = wrapper.find('[data-testid="number-input"]');
-      expect(input.attributes('disabled')).toBeUndefined();
-    });
-
-    it('sets required attribute when required is true', () => {
-      const wrapper = mount(BaseInput, {
-        props: { required: true },
-      });
-      const input = wrapper.find('[data-testid="number-input"]');
-      expect(input.attributes('required')).toBeDefined();
-    });
-  });
-
-  describe('Model Value', () => {
-    it('displays default value of 0', () => {
-      const wrapper = mount(BaseInput);
-      const input = wrapper.find('[data-testid="number-input"]');
-      expect(input.element.value).toBe('0');
-    });
-
-    it('displays provided number value', () => {
-      const wrapper = mount(BaseInput, {
-        props: { modelValue: 42 },
-      });
-      const input = wrapper.find('[data-testid="number-input"]');
-      expect(input.element.value).toBe('42');
-    });
-
-    it('displays provided string value', () => {
-      const wrapper = mount(BaseInput, {
-        props: { modelValue: 'test', type: 'text' },
-      });
-      const input = wrapper.find('[data-testid="number-input"]');
-      expect(input.element.value).toBe('test');
-    });
-
-    it('emits update:modelValue event when number input changes', async () => {
-      const wrapper = mount(BaseInput);
-      const input = wrapper.find('[data-testid="number-input"]');
-
-      await input.setValue('25');
-
-      expect(wrapper.emitted('update:modelValue')).toBeTruthy();
-      expect(wrapper.emitted('update:modelValue')[0]).toEqual([25]);
-    });
-
-    it('emits update:modelValue event when text input changes', async () => {
-      const wrapper = mount(BaseInput, {
-        props: { type: 'text' },
-      });
-      const input = wrapper.find('[data-testid="number-input"]');
-
-      await input.setValue('hello');
-
-      expect(wrapper.emitted('update:modelValue')).toBeTruthy();
-      expect(wrapper.emitted('update:modelValue')[0]).toEqual(['hello']);
-    });
-
-    it('converts empty string to 0 for number type', async () => {
-      const wrapper = mount(BaseInput, {
-        props: { modelValue: 42 },
-      });
-      const input = wrapper.find('[data-testid="number-input"]');
-
-      await input.setValue('');
-
-      expect(wrapper.emitted('update:modelValue')).toBeTruthy();
-      expect(wrapper.emitted('update:modelValue')[0]).toEqual([0]);
-    });
-
-    it('converts string to number for number type', async () => {
-      const wrapper = mount(BaseInput);
-      const input = wrapper.find('[data-testid="number-input"]');
-
-      await input.setValue('123');
-
-      expect(wrapper.emitted('update:modelValue')[0]).toEqual([123]);
-    });
-  });
-
-  describe('Event Handling', () => {
-    it('emits blur event when input loses focus', async () => {
-      const wrapper = mount(BaseInput);
-      const input = wrapper.find('[data-testid="number-input"]');
-
-      await input.trigger('blur');
-
-      expect(wrapper.emitted('blur')).toBeTruthy();
-      expect(wrapper.emitted('blur')).toHaveLength(1);
-    });
-
-    it('emits blur event with event object', async () => {
-      const wrapper = mount(BaseInput);
-      const input = wrapper.find('[data-testid="number-input"]');
-
-      await input.trigger('blur');
-
-      expect(wrapper.emitted('blur')[0][0]).toBeInstanceOf(Event);
-    });
-
-    it('emits update:modelValue on input event', async () => {
-      const wrapper = mount(BaseInput);
-      const input = wrapper.find('[data-testid="number-input"]');
-
-      await input.trigger('input');
-
-      expect(wrapper.emitted('update:modelValue')).toBeTruthy();
-    });
-  });
-
-  describe('CSS Classes', () => {
-    it('applies padding-right class when unit is present', () => {
-      const wrapper = mount(BaseInput, {
-        props: { unit: 'px' },
-      });
-      const input = wrapper.find('[data-testid="number-input"]');
-      expect(input.classes()).toContain('pr-10');
-    });
-
-    it('does not apply padding-right class when unit is not present', () => {
-      const wrapper = mount(BaseInput);
-      const input = wrapper.find('[data-testid="number-input"]');
-      expect(input.classes()).not.toContain('pr-10');
-    });
-
-    it('applies disabled cursor class when disabled', () => {
-      const wrapper = mount(BaseInput, {
-        props: { disabled: true },
-      });
-      const input = wrapper.find('[data-testid="number-input"]');
-      expect(input.classes()).toContain('disabled:cursor-not-allowed');
-    });
-  });
-
-  describe('Accessibility', () => {
-    it('generates unique input ID', () => {
-      const wrapper1 = mount(BaseInput, {
-        props: { label: 'Input 1' },
-      });
-      const wrapper2 = mount(BaseInput, {
-        props: { label: 'Input 2' },
-      });
-
-      const input1 = wrapper1.find('[data-testid="number-input"]');
-      const input2 = wrapper2.find('[data-testid="number-input"]');
-
-      expect(input1.attributes('id')).toBeTruthy();
-      expect(input2.attributes('id')).toBeTruthy();
-      expect(input1.attributes('id')).not.toBe(input2.attributes('id'));
-    });
-
-    it('associates label with input via for and id attributes', () => {
-      const wrapper = mount(BaseInput, {
-        props: { label: 'Test Label' },
-      });
-
-      const label = wrapper.find('label');
-      const input = wrapper.find('[data-testid="number-input"]');
-
-      expect(label.attributes('for')).toBe(input.attributes('id'));
-    });
-
-    it('sets aria-invalid to true when error is present', () => {
-      const wrapper = mount(BaseInput, {
-        props: { error: 'Invalid input' },
-      });
-      const input = wrapper.find('[data-testid="number-input"]');
-      expect(input.attributes('aria-invalid')).toBe('true');
-    });
-
-    it('sets aria-invalid to false when no error', () => {
-      const wrapper = mount(BaseInput);
-      const input = wrapper.find('[data-testid="number-input"]');
-      expect(input.attributes('aria-invalid')).toBe('false');
-    });
-
-    it('sets aria-describedby when error is present', () => {
-      const wrapper = mount(BaseInput, {
-        props: { error: 'Invalid input' },
-      });
-      const input = wrapper.find('[data-testid="number-input"]');
-      const errorId = input.attributes('aria-describedby');
-
-      expect(errorId).toBeTruthy();
-      expect(errorId).toContain('-error');
-
-      const errorSpan = wrapper.find(`#${errorId}`);
-      expect(errorSpan.exists()).toBe(true);
-    });
-
-    it('does not set aria-describedby when no error', () => {
-      const wrapper = mount(BaseInput);
-      const input = wrapper.find('[data-testid="number-input"]');
-      expect(input.attributes('aria-describedby')).toBeUndefined();
-    });
-
-    it('error message has role="alert"', () => {
-      const wrapper = mount(BaseInput, {
-        props: { error: 'Error message' },
-      });
-      const errorSpan = wrapper.find('[data-testid="input-error"]');
-      expect(errorSpan.attributes('role')).toBe('alert');
-    });
-
-    it('unit span has aria-hidden="true"', () => {
-      const wrapper = mount(BaseInput, {
-        props: { unit: 'px' },
-      });
-      const unitSpan = wrapper.find('.absolute.right-3');
-      expect(unitSpan.attributes('aria-hidden')).toBe('true');
-    });
-  });
-
-  describe('Component Structure', () => {
-    it('has proper container structure', () => {
-      const wrapper = mount(BaseInput);
-      expect(wrapper.classes()).toContain('flex');
-      expect(wrapper.classes()).toContain('flex-col');
-      expect(wrapper.classes()).toContain('gap-1');
-    });
-
-    it('has relative positioning for unit display', () => {
-      const wrapper = mount(BaseInput, {
-        props: { unit: 'px' },
-      });
-      const inputContainer = wrapper.find('.relative');
-      expect(inputContainer.exists()).toBe(true);
-    });
-
-    it('positions unit span absolutely', () => {
-      const wrapper = mount(BaseInput, {
-        props: { unit: 'px' },
-      });
-      const unitSpan = wrapper.find('.absolute.right-3');
-      expect(unitSpan.classes()).toContain('absolute');
-      expect(unitSpan.classes()).toContain('right-3');
-      expect(unitSpan.classes()).toContain('top-1/2');
-      expect(unitSpan.classes()).toContain('-translate-y-1/2');
-    });
-  });
-
-  describe('Edge Cases', () => {
-    it('handles zero as model value', () => {
-      const wrapper = mount(BaseInput, {
-        props: { modelValue: 0 },
-      });
-      const input = wrapper.find('[data-testid="number-input"]');
-      expect(input.element.value).toBe('0');
-    });
-
-    it('handles negative numbers', () => {
-      const wrapper = mount(BaseInput, {
-        props: { modelValue: -10 },
-      });
-      const input = wrapper.find('[data-testid="number-input"]');
-      expect(input.element.value).toBe('-10');
-    });
-
-    it('handles decimal numbers', () => {
-      const wrapper = mount(BaseInput, {
-        props: { modelValue: 3.14 },
-      });
-      const input = wrapper.find('[data-testid="number-input"]');
-      expect(input.element.value).toBe('3.14');
-    });
-
-    it('handles both error and required props together', () => {
-      const wrapper = mount(BaseInput, {
-        props: {
-          label: 'Required Field',
-          required: true,
-          error: 'This field is required',
-        },
-      });
-
-      const asterisk = wrapper.find('[aria-label="required"]');
-      const errorMsg = wrapper.find('[data-testid="input-error"]');
-
-      expect(asterisk.exists()).toBe(true);
-      expect(errorMsg.exists()).toBe(true);
-    });
-
-    it('handles both hint and unit props together', () => {
-      const wrapper = mount(BaseInput, {
-        props: {
-          hint: 'Enter width in pixels',
-          unit: 'px',
-        },
-      });
-
-      const hintSpan = wrapper.find('[data-testid="input-hint"]');
-      const unitSpan = wrapper.find('.absolute.right-3');
-
-      expect(hintSpan.exists()).toBe(true);
-      expect(unitSpan.exists()).toBe(true);
-    });
-
-    it('handles empty string label', () => {
-      const wrapper = mount(BaseInput, {
-        props: { label: '' },
-      });
-      expect(wrapper.find('label').exists()).toBe(false);
-    });
-
-    it('handles multiple rapid input changes', async () => {
-      const wrapper = mount(BaseInput);
-      const input = wrapper.find('[data-testid="number-input"]');
-
-      await input.setValue('1');
-      await input.setValue('12');
-      await input.setValue('123');
-
-      const emitted = wrapper.emitted('update:modelValue');
-      expect(emitted).toHaveLength(3);
-      expect(emitted[0]).toEqual([1]);
-      expect(emitted[1]).toEqual([12]);
-      expect(emitted[2]).toEqual([123]);
-    });
-  });
-});
diff --git a/tests/unit/components/shared/ConfigElement.test.js b/tests/unit/components/shared/ConfigElement.test.js
new file mode 100644
index 0000000..a07e839
--- /dev/null
+++ b/tests/unit/components/shared/ConfigElement.test.js
@@ -0,0 +1,65 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import ConfigElement from '@/components/shared/ConfigElement.vue';
+
+describe('ConfigElement', () => {
+  describe('Slot Rendering', () => {
+    it('renders label and element slot content', () => {
+      const wrapper = mount(ConfigElement, {
+        slots: {
+          label: 'Orientation',
+          element: '<div data-testid="test-control">Control Content</div>',
+        },
+      });
+
+      expect(wrapper.text()).toContain('Orientation');
+      expect(wrapper.find('[data-testid="test-control"]').exists()).toBe(true);
+      expect(wrapper.text()).toContain('Control Content');
+    });
+
+    it('renders element slot without label', () => {
+      const wrapper = mount(ConfigElement, {
+        slots: {
+          element: '<div data-testid="test-control">Control Content</div>',
+        },
+      });
+
+      expect(wrapper.find('[data-testid="test-control"]').exists()).toBe(true);
+    });
+  });
+
+  describe('Integration', () => {
+    it('renders complex element slot content', () => {
+      const wrapper = mount(ConfigElement, {
+        slots: {
+          label: 'Frame Size',
+          element: `
+            <div class="selector-group">
+              <button>1024px</button>
+              <button>2048px</button>
+              <button>4096px</button>
+            </div>
+          `,
+        },
+      });
+
+      expect(wrapper.text()).toContain('Frame Size');
+      expect(wrapper.findAll('button')).toHaveLength(3);
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('label text is visible and readable', () => {
+      const wrapper = mount(ConfigElement, {
+        slots: {
+          label: 'Border Size',
+          element: '<input type="range" />',
+        },
+      });
+
+      const labelText = wrapper.find('.text-xs');
+      expect(labelText.isVisible()).toBe(true);
+      expect(labelText.text()).toBe('Border Size');
+    });
+  });
+});
diff --git a/tests/unit/composables/useCanvasRenderer.test.js b/tests/unit/composables/useCanvasRenderer.test.js
index be0b279..df58e1a 100644
--- a/tests/unit/composables/useCanvasRenderer.test.js
+++ b/tests/unit/composables/useCanvasRenderer.test.js
@@ -19,9 +19,10 @@ describe('useCanvasRenderer', () => {
       orientation: ref('portrait'),
       aspectRatio: ref('3:2'),
       backgroundColor: ref('#FFFFFF'),
+      frameSize: ref(4500),
       frameWidth: ref(3000),
       frameHeight: ref(4500), // Portrait 3:2 = 3000 * 1.5
-      spacing: ref(100),
+      borderPercentage: ref(2),
     };
 
     mockImageState = {
@@ -34,7 +35,6 @@ describe('useCanvasRenderer', () => {
 
     // Reset singleton state to defaults
     const renderer = useCanvasRenderer();
-    renderer.fileName.value = EXPORT_DEFAULT.defaultFileName;
     renderer.quality.value = EXPORT_DEFAULT.defaultQuality;
     renderer.format.value = EXPORT_DEFAULT.defaultFormat;
   });
@@ -392,48 +392,30 @@ describe('useCanvasRenderer', () => {
       expect(renderer.canExport.value).toBe(false);
     });
 
-    it('should be false when filename is invalid even if images are ready', () => {
+    it('should be true when both images are ready', () => {
       mockImageState.images.value[0] = { width: 1800, height: 1200 };
       mockImageState.images.value[1] = { width: 1800, height: 1200 };
 
       const renderer = useCanvasRenderer();
 
-      // Set invalid filename
-      renderer.fileName.value = 'invalid/filename';
-
-      expect(renderer.isReady.value).toBe(true);
-      expect(renderer.canExport.value).toBe(false);
-    });
-
-    it('should be true when images are ready and filename is valid', () => {
-      mockImageState.images.value[0] = { width: 1800, height: 1200 };
-      mockImageState.images.value[1] = { width: 1800, height: 1200 };
-
-      const renderer = useCanvasRenderer();
-
-      // Set valid filename
-      renderer.fileName.value = 'valid-filename';
-
       expect(renderer.isReady.value).toBe(true);
       expect(renderer.canExport.value).toBe(true);
     });
 
-    it('should update reactively when filename validity changes', () => {
+    it('should update reactively when images change', () => {
       mockImageState.images.value[0] = { width: 1800, height: 1200 };
       mockImageState.images.value[1] = { width: 1800, height: 1200 };
 
       const renderer = useCanvasRenderer();
 
-      // Start with valid filename
-      renderer.fileName.value = 'valid-filename';
       expect(renderer.canExport.value).toBe(true);
 
-      // Change to invalid filename
-      renderer.fileName.value = 'invalid/filename';
+      // Remove an image
+      mockImageState.images.value[0] = null;
       expect(renderer.canExport.value).toBe(false);
 
-      // Change back to valid
-      renderer.fileName.value = 'another_valid_filename';
+      // Add it back
+      mockImageState.images.value[0] = { width: 1800, height: 1200 };
       expect(renderer.canExport.value).toBe(true);
     });
   });
@@ -468,7 +450,18 @@ describe('useCanvasRenderer', () => {
       );
     });
 
-    it('should download PNG by default', () => {
+    it('should download PNG with generated filename', () => {
+      mockImageState.images.value[0] = {
+        width: 1800,
+        height: 1200,
+        fileName: 'my-photo.jpg'
+      };
+      mockImageState.images.value[1] = {
+        width: 1800,
+        height: 1200,
+        fileName: 'vacation.jpg'
+      };
+
       const renderer = useCanvasRenderer({ previewWidth: ref(800) });
 
       renderer.downloadImage(mockStage);
@@ -480,16 +473,27 @@ describe('useCanvasRenderer', () => {
         qualityPercentage: 0.85,
         pixelRatio: 3.75,
       });
-      expect(mockLink.download).toBe('framed.png');
+      // Filename should match pattern: framed-<img1>-<img2>-<uuid>.png
+      expect(mockLink.download).toMatch(/^framed-my-photo-vacation-[0-9a-f]{8}\.png$/);
       expect(mockLink.click).toHaveBeenCalled();
     });
 
     it('should download JPEG with custom format', () => {
+      mockImageState.images.value[0] = {
+        width: 1800,
+        height: 1200,
+        fileName: 'photo1.jpg'
+      };
+      mockImageState.images.value[1] = {
+        width: 1800,
+        height: 1200,
+        fileName: 'photo2.jpg'
+      };
+
       const renderer = useCanvasRenderer({ previewWidth: ref(800) });
 
-      // Set custom format and filename via singleton
+      // Set custom format via singleton
       renderer.format.value = 'image/jpeg';
-      renderer.fileName.value = 'custom';
 
       renderer.downloadImage(mockStage);
 
@@ -498,10 +502,61 @@ describe('useCanvasRenderer', () => {
         qualityPercentage: 0.85,
         pixelRatio: 3.75,
       });
-      expect(mockLink.download).toBe('custom.jpeg');
+      expect(mockLink.download).toMatch(/^framed-photo1-photo2-[0-9a-f]{8}\.jpeg$/);
+    });
+
+    it('should generate UUID when filenames are missing', () => {
+      mockImageState.images.value[0] = {
+        width: 1800,
+        height: 1200,
+        // No fileName property
+      };
+      mockImageState.images.value[1] = {
+        width: 1800,
+        height: 1200,
+        fileName: null
+      };
+
+      const renderer = useCanvasRenderer({ previewWidth: ref(800) });
+
+      renderer.downloadImage(mockStage);
+
+      // Filename should use UUIDs for both image parts
+      expect(mockLink.download).toMatch(/^framed-[0-9a-f]{8}-[0-9a-f]{8}-[0-9a-f]{8}\.png$/);
+    });
+
+    it('should generate UUID when filenames contain only invalid chars', () => {
+      mockImageState.images.value[0] = {
+        width: 1800,
+        height: 1200,
+        fileName: '@#$%^&*.jpg'
+      };
+      mockImageState.images.value[1] = {
+        width: 1800,
+        height: 1200,
+        fileName: '!!!.jpg'
+      };
+
+      const renderer = useCanvasRenderer({ previewWidth: ref(800) });
+
+      renderer.downloadImage(mockStage);
+
+      // Filename should use UUIDs for both image parts (no valid chars)
+      expect(mockLink.download).toMatch(/^framed-[0-9a-f]{8}-[0-9a-f]{8}-[0-9a-f]{8}\.png$/);
     });
 
     it('should use custom quality', () => {
+      mockImageState.images.value[0] = {
+        width: 1800,
+        height: 1200,
+        fileName: 'photo1.jpg'
+      };
+      mockImageState.images.value[1] = {
+        width: 1800,
+        height: 1200,
+        fileName: 'photo2.jpg'
+      };
+
       const renderer = useCanvasRenderer({ previewWidth: ref(800) });
 
       // Set custom quality via singleton (80%)
@@ -609,7 +664,8 @@ describe('useCanvasRenderer', () => {
       // All elements should use preview-scaled coordinates
       expect(renderer.backgroundConfig.value.width).toBe(800);
       const scale = 800 / 3000;
-      expect(renderer.image1Config.value.x).toBeGreaterThanOrEqual(100 * scale); // Scaled coords
+      // Border is 2% of 4500 / 2 = 45px per side
+      expect(renderer.image1Config.value.x).toBeGreaterThanOrEqual(40 * scale); // Scaled coords
 
       // Simulate window resize
       previewWidth.value = 600;
@@ -622,7 +678,7 @@ describe('useCanvasRenderer', () => {
       // Element dimensions should update proportionally
       expect(renderer.backgroundConfig.value.width).toBe(600);
       const newScale = 600 / 3000;
-      expect(renderer.image1Config.value.x).toBeGreaterThanOrEqual(100 * newScale);
+      expect(renderer.image1Config.value.x).toBeGreaterThanOrEqual(40 * newScale);
     });
 
     it('should maintain aspect ratio during responsive scaling', () => {
diff --git a/tests/unit/composables/useFrameConfig.test.js b/tests/unit/composables/useFrameConfig.test.js
index fc51433..86578fd 100644
--- a/tests/unit/composables/useFrameConfig.test.js
+++ b/tests/unit/composables/useFrameConfig.test.js
@@ -4,7 +4,7 @@
 
 import { describe, it, expect, beforeEach } from 'vitest';
 import { useFrameConfig } from '@/composables/useFrameConfig.js';
-import { DEFAULT_CONFIG, ASPECT_RATIOS } from '@/utils/constants.js';
+import { DEFAULT_CONFIG, ASPECT_RATIOS, ORIENTATIONS } from '@/utils/constants.js';
 
 describe('useFrameConfig', () => {
   let frameConfig;
@@ -12,7 +12,7 @@ describe('useFrameConfig', () => {
   // Helper to calculate expected dimensions
   const calcDimensions = (frameSize, aspectRatio, orientation) => {
     const ratio = ASPECT_RATIOS[aspectRatio];
-    if (orientation === 'portrait') {
+    if (orientation === ORIENTATIONS.PORTRAIT) {
       return {
         width: frameSize / ratio,
         height: frameSize,
@@ -50,8 +50,8 @@ describe('useFrameConfig', () => {
       expect(frameConfig.frameSize.value).toBe(DEFAULT_CONFIG.frameSize);
     });
 
-    it('should initialize with default spacing', () => {
-      expect(frameConfig.spacing.value).toBe(DEFAULT_CONFIG.spacing);
+    it('should initialize with default border percentage', () => {
+      expect(frameConfig.borderPercentage.value).toBe(DEFAULT_CONFIG.borderPercentage);
     });
 
     it('should calculate dimensions based on frameSize, aspect ratio, and orientation', () => {
@@ -67,14 +67,14 @@ describe('useFrameConfig', () => {
 
   describe('updateOrientation', () => {
     it('should update orientation to portrait', () => {
-      frameConfig.orientation.value = 'landscape';
-      frameConfig.updateOrientation('portrait');
-      expect(frameConfig.orientation.value).toBe('portrait');
+      frameConfig.orientation.value = ORIENTATIONS.LANDSCAPE;
+      frameConfig.updateOrientation(ORIENTATIONS.PORTRAIT);
+      expect(frameConfig.orientation.value).toBe(ORIENTATIONS.PORTRAIT);
     });
 
     it('should update orientation to landscape', () => {
-      frameConfig.updateOrientation('landscape');
-      expect(frameConfig.orientation.value).toBe('landscape');
+      frameConfig.updateOrientation(ORIENTATIONS.LANDSCAPE);
+      expect(frameConfig.orientation.value).toBe(ORIENTATIONS.LANDSCAPE);
     });
 
     it('should update frame dimensions when orientation changes', () => {
@@ -82,17 +82,17 @@ describe('useFrameConfig', () => {
       const portraitExpected = calcDimensions(
         DEFAULT_CONFIG.frameSize,
         DEFAULT_CONFIG.aspectRatio,
-        'portrait'
+        ORIENTATIONS.PORTRAIT
       );
       expect(frameConfig.frameWidth.value).toBeCloseTo(portraitExpected.width, 1);
       expect(frameConfig.frameHeight.value).toBe(portraitExpected.height);
 
       // Change to landscape
-      frameConfig.updateOrientation('landscape');
+      frameConfig.updateOrientation(ORIENTATIONS.LANDSCAPE);
       const landscapeExpected = calcDimensions(
         DEFAULT_CONFIG.frameSize,
         DEFAULT_CONFIG.aspectRatio,
-        'landscape'
+        ORIENTATIONS.LANDSCAPE
       );
       expect(frameConfig.frameWidth.value).toBe(landscapeExpected.width);
       expect(frameConfig.frameHeight.value).toBeCloseTo(landscapeExpected.height, 1);
@@ -107,20 +107,20 @@ describe('useFrameConfig', () => {
 
   describe('toggleOrientation', () => {
     it('should toggle from portrait to landscape', () => {
-      frameConfig.orientation.value = 'portrait';
+      frameConfig.orientation.value = ORIENTATIONS.PORTRAIT;
       frameConfig.toggleOrientation();
-      expect(frameConfig.orientation.value).toBe('landscape');
+      expect(frameConfig.orientation.value).toBe(ORIENTATIONS.LANDSCAPE);
     });
 
     it('should toggle from landscape to portrait', () => {
-      frameConfig.orientation.value = 'landscape';
+      frameConfig.orientation.value = ORIENTATIONS.LANDSCAPE;
       frameConfig.toggleOrientation();
-      expect(frameConfig.orientation.value).toBe('portrait');
+      expect(frameConfig.orientation.value).toBe(ORIENTATIONS.PORTRAIT);
     });
 
     it('should update frame height when toggling orientation', () => {
       // Start with portrait
-      frameConfig.orientation.value = 'portrait';
+      frameConfig.orientation.value = ORIENTATIONS.PORTRAIT;
       const portraitHeight = frameConfig.frameHeight.value;
 
       // Toggle to landscape
@@ -219,31 +219,31 @@ describe('useFrameConfig', () => {
     });
   });
 
-  describe('updateSpacing', () => {
-    it('should update spacing to new value', () => {
-      frameConfig.updateSpacing(150);
-      expect(frameConfig.spacing.value).toBe(150);
+  describe('updateBorderPercentage', () => {
+    it('should update border percentage to new value', () => {
+      frameConfig.updateBorderPercentage(10);
+      expect(frameConfig.borderPercentage.value).toBe(10);
     });
 
     it('should convert string to number', () => {
-      frameConfig.updateSpacing('200');
-      expect(frameConfig.spacing.value).toBe(200);
+      frameConfig.updateBorderPercentage('15');
+      expect(frameConfig.borderPercentage.value).toBe(15);
     });
 
-    it('should allow spacing of 0', () => {
-      frameConfig.updateSpacing(0);
-      expect(frameConfig.spacing.value).toBe(0);
+    it('should allow border percentage of 1', () => {
+      frameConfig.updateBorderPercentage(1);
+      expect(frameConfig.borderPercentage.value).toBe(1);
     });
   });
 
   describe('reset', () => {
     it('should reset all values to defaults', () => {
       // Change all values
-      frameConfig.updateOrientation('landscape');
+      frameConfig.updateOrientation(ORIENTATIONS.LANDSCAPE);
       frameConfig.updateAspectRatio('16:9');
       frameConfig.updateBackgroundColor('#000000');
       frameConfig.updateFrameSize(5000);
-      frameConfig.updateSpacing(200);
+      frameConfig.updateBorderPercentage(10);
 
       // Reset
       frameConfig.reset();
@@ -255,7 +255,7 @@ describe('useFrameConfig', () => {
         DEFAULT_CONFIG.backgroundColor
       );
       expect(frameConfig.frameSize.value).toBe(DEFAULT_CONFIG.frameSize);
-      expect(frameConfig.spacing.value).toBe(DEFAULT_CONFIG.spacing);
+      expect(frameConfig.borderPercentage.value).toBe(DEFAULT_CONFIG.borderPercentage);
     });
 
     it('should reset computed frame dimensions', () => {
@@ -286,25 +286,25 @@ describe('useFrameConfig', () => {
   describe('Reactivity', () => {
     it('should react to multiple state changes', () => {
       // Change orientation to landscape
-      frameConfig.updateOrientation('landscape');
+      frameConfig.updateOrientation(ORIENTATIONS.LANDSCAPE);
       // Change aspect ratio to 16:9
       frameConfig.updateAspectRatio('16:9');
 
       // Calculate expected dimensions with current frameSize (DEFAULT_CONFIG.frameSize)
-      const expected = calcDimensions(DEFAULT_CONFIG.frameSize, '16:9', 'landscape');
+      const expected = calcDimensions(DEFAULT_CONFIG.frameSize, '16:9', ORIENTATIONS.LANDSCAPE);
       expect(frameConfig.frameWidth.value).toBe(expected.width);
       expect(frameConfig.frameHeight.value).toBeCloseTo(expected.height, 1);
     });
 
     it('should maintain reactivity after reset', () => {
       frameConfig.reset();
-      frameConfig.updateOrientation('landscape');
+      frameConfig.updateOrientation(ORIENTATIONS.LANDSCAPE);
 
       // Should still be reactive (landscape 3:2 with default frameSize)
       const expected = calcDimensions(
         DEFAULT_CONFIG.frameSize,
         DEFAULT_CONFIG.aspectRatio,
-        'landscape'
+        ORIENTATIONS.LANDSCAPE
       );
       expect(frameConfig.frameWidth.value).toBe(expected.width);
       expect(frameConfig.frameHeight.value).toBeCloseTo(expected.height, 1);
@@ -328,14 +328,14 @@ describe('useFrameConfig', () => {
       expect(frameConfig.frameHeight.value).toBe(800);
     });
 
-    it('should handle zero spacing', () => {
-      frameConfig.updateSpacing(0);
-      expect(frameConfig.spacing.value).toBe(0);
+    it('should handle minimum border percentage', () => {
+      frameConfig.updateBorderPercentage(1);
+      expect(frameConfig.borderPercentage.value).toBe(1);
     });
 
-    it('should handle large spacing', () => {
-      frameConfig.updateSpacing(500);
-      expect(frameConfig.spacing.value).toBe(500);
+    it('should handle maximum border percentage', () => {
+      frameConfig.updateBorderPercentage(25);
+      expect(frameConfig.borderPercentage.value).toBe(25);
     });
   });
 });
diff --git a/tests/unit/composables/useImageState.test.js b/tests/unit/composables/useImageState.test.js
index 05790be..d5d0beb 100644
--- a/tests/unit/composables/useImageState.test.js
+++ b/tests/unit/composables/useImageState.test.js
@@ -160,28 +160,6 @@ describe('useImageState', () => {
       );
     });
 
-    it('should reject image with dimensions too small', async () => {
-      // Mock small image
-      global.Image = class SmallImage {
-        constructor() {
-          this.width = 500;
-          this.height = 300;
-        }
-        set src(value) {
-          setTimeout(() => this.onload && this.onload(), 0);
-        }
-      };
-
-      const file = new MockFile([], 'small.jpg', { type: 'image/jpeg' });
-
-      await expect(imageState.addImage(file, 0)).rejects.toThrow(
-        'Image must be at least'
-      );
-
-      // Restore original mock
-      global.Image = MockImage;
-    });
-
     it('should handle portrait orientation correctly', async () => {
       // Mock portrait image
       global.Image = class PortraitImage {
diff --git a/tests/unit/utils/calculations.test.js b/tests/unit/utils/calculations.test.js
index c31d5fe..d3468e3 100644
--- a/tests/unit/utils/calculations.test.js
+++ b/tests/unit/utils/calculations.test.js
@@ -11,11 +11,12 @@ import {
   getImageOrientation,
   calculateAspectRatio,
 } from '@/utils/calculations';
+import { ORIENTATIONS } from '@/utils/constants';
 
 describe('calculations.js', () => {
   describe('calculateImageLayout', () => {
     it('calculates vertical layout for portrait orientation', () => {
-      const layout = calculateImageLayout(3000, 4500, 'portrait', 100);
+      const layout = calculateImageLayout(3000, 4500, ORIENTATIONS.PORTRAIT, 100);
 
       expect(layout.image1).toBeDefined();
       expect(layout.image2).toBeDefined();
@@ -30,7 +31,7 @@ describe('calculations.js', () => {
     });
 
     it('calculates horizontal layout for landscape orientation', () => {
-      const layout = calculateImageLayout(4500, 3000, 'landscape', 100);
+      const layout = calculateImageLayout(4500, 3000, ORIENTATIONS.LANDSCAPE, 100);
 
       expect(layout.image1).toBeDefined();
       expect(layout.image2).toBeDefined();
@@ -45,8 +46,8 @@ describe('calculations.js', () => {
     });
 
     it('accounts for border size in layout', () => {
-      const layoutSmallBorder = calculateImageLayout(3000, 4500, 'portrait', 50);
-      const layoutLargeBorder = calculateImageLayout(3000, 4500, 'portrait', 200);
+      const layoutSmallBorder = calculateImageLayout(3000, 4500, ORIENTATIONS.PORTRAIT, 50);
+      const layoutLargeBorder = calculateImageLayout(3000, 4500, ORIENTATIONS.PORTRAIT, 200);
 
       // Larger border should result in smaller available space
       expect(layoutSmallBorder.image1.width).toBeGreaterThan(
@@ -57,13 +58,13 @@ describe('calculations.js', () => {
       );
     });
 
-    it('maintains proper padding between images', () => {
-      const spacing = 100;
-      const layout = calculateImageLayout(3000, 4500, 'portrait', spacing);
+    it('maintains fixed inner spacing between images', () => {
+      const borderSpacing = 100;
+      const layout = calculateImageLayout(3000, 4500, ORIENTATIONS.PORTRAIT, borderSpacing);
 
-      // Gap between images should equal the spacing parameter
+      // Gap between images should be fixed at 20px (INNER_SPACING)
       const gap = layout.image2.y - (layout.image1.y + layout.image1.height);
-      expect(gap).toBeCloseTo(spacing, 0);
+      expect(gap).toBeCloseTo(20, 0);
     });
   });
 
@@ -169,17 +170,17 @@ describe('calculations.js', () => {
   describe('getImageOrientation', () => {
     it('returns portrait for taller images', () => {
       const orientation = getImageOrientation(1200, 1600);
-      expect(orientation).toBe('portrait');
+      expect(orientation).toBe(ORIENTATIONS.PORTRAIT);
     });
 
     it('returns landscape for wider images', () => {
       const orientation = getImageOrientation(1600, 1200);
-      expect(orientation).toBe('landscape');
+      expect(orientation).toBe(ORIENTATIONS.LANDSCAPE);
     });
 
     it('returns landscape for square images', () => {
       const orientation = getImageOrientation(1200, 1200);
-      expect(orientation).toBe('landscape');
+      expect(orientation).toBe(ORIENTATIONS.LANDSCAPE);
     });
   });
 
diff --git a/tests/unit/utils/constants.test.js b/tests/unit/utils/constants.test.js
index 3e96492..6efd247 100644
--- a/tests/unit/utils/constants.test.js
+++ b/tests/unit/utils/constants.test.js
@@ -6,9 +6,11 @@ import { describe, it, expect } from 'vitest';
 import {
   ASPECT_RATIOS,
   ORIENTATIONS,
+  COLOR_PRESETS,
   DEFAULT_CONFIG,
   IMAGE_CONSTRAINTS,
   FRAME_CONSTRAINTS,
+  FRAME_SIZE_OPTIONS,
   PREVIEW_CONSTRAINTS,
 } from '@/utils/constants';
 
@@ -36,13 +38,21 @@ describe('constants.js', () => {
     });
   });
 
+  describe('COLOR_PRESETS', () => {
+    it('should contain white, black, and gray presets', () => {
+      expect(COLOR_PRESETS.WHITE).toBe('#FFFFFF');
+      expect(COLOR_PRESETS.BLACK).toBe('#000000');
+      expect(COLOR_PRESETS.GRAY).toBe('#808080');
+    });
+  });
+
   describe('DEFAULT_CONFIG', () => {
     it('should have all required properties', () => {
       expect(DEFAULT_CONFIG).toHaveProperty('orientation');
       expect(DEFAULT_CONFIG).toHaveProperty('aspectRatio');
       expect(DEFAULT_CONFIG).toHaveProperty('backgroundColor');
       expect(DEFAULT_CONFIG).toHaveProperty('frameSize');
-      expect(DEFAULT_CONFIG).toHaveProperty('spacing');
+      expect(DEFAULT_CONFIG).toHaveProperty('borderPercentage');
     });
 
     it('should have valid default values', () => {
@@ -50,22 +60,18 @@ describe('constants.js', () => {
       expect(DEFAULT_CONFIG.aspectRatio).toBe('3:2');
       expect(DEFAULT_CONFIG.backgroundColor).toBe('#FFFFFF');
       expect(DEFAULT_CONFIG.frameSize).toBe(2048);
-      expect(DEFAULT_CONFIG.spacing).toBe(20);
+      expect(DEFAULT_CONFIG.borderPercentage).toBe(2);
     });
   });
 
   describe('IMAGE_CONSTRAINTS', () => {
     it('should have all constraint properties', () => {
       expect(IMAGE_CONSTRAINTS).toHaveProperty('maxFileSize');
-      expect(IMAGE_CONSTRAINTS).toHaveProperty('minDimension');
       expect(IMAGE_CONSTRAINTS).toHaveProperty('supportedFormats');
-      expect(IMAGE_CONSTRAINTS).toHaveProperty('aspectRatioTolerance');
     });
 
     it('should have reasonable constraint values', () => {
       expect(IMAGE_CONSTRAINTS.maxFileSize).toBe(40 * 1024 * 1024);
-      expect(IMAGE_CONSTRAINTS.minDimension).toBe(800);
-      expect(IMAGE_CONSTRAINTS.aspectRatioTolerance).toBe(0.05);
     });
 
     it('should support common image formats', () => {
@@ -75,15 +81,43 @@ describe('constants.js', () => {
     });
   });
 
-  describe('FRAME_CONSTRAINTS', () => {
-    it('should have size constraints', () => {
-      expect(FRAME_CONSTRAINTS.minSize).toBe(800);
-      expect(FRAME_CONSTRAINTS.maxSize).toBe(10000);
+  describe('FRAME_SIZE_OPTIONS', () => {
+    it('should have all frame size options', () => {
+      expect(FRAME_SIZE_OPTIONS).toHaveLength(3);
+    });
+
+    it('should contain 1024px option', () => {
+      const option = FRAME_SIZE_OPTIONS.find(opt => opt.value === 1024);
+      expect(option).toBeDefined();
+      expect(option.label).toBe('1024px');
+    });
+
+    it('should contain 2048px option', () => {
+      const option = FRAME_SIZE_OPTIONS.find(opt => opt.value === 2048);
+      expect(option).toBeDefined();
+      expect(option.label).toBe('2048px');
+    });
+
+    it('should contain 4096px option', () => {
+      const option = FRAME_SIZE_OPTIONS.find(opt => opt.value === 4096);
+      expect(option).toBeDefined();
+      expect(option.label).toBe('4096px');
     });
 
-    it('should have spacing constraints', () => {
-      expect(FRAME_CONSTRAINTS.minSpacing).toBe(0);
-      expect(FRAME_CONSTRAINTS.maxSpacing).toBe(500);
+    it('should have label and value properties', () => {
+      FRAME_SIZE_OPTIONS.forEach(option => {
+        expect(option).toHaveProperty('label');
+        expect(option).toHaveProperty('value');
+        expect(typeof option.label).toBe('string');
+        expect(typeof option.value).toBe('number');
+      });
+    });
+  });
+
+  describe('FRAME_CONSTRAINTS', () => {
+    it('should have border percentage constraints', () => {
+      expect(FRAME_CONSTRAINTS.minBorderPercentage).toBe(1);
+      expect(FRAME_CONSTRAINTS.maxBorderPercentage).toBe(25);
     });
   });
 
diff --git a/tests/unit/utils/validation.test.js b/tests/unit/utils/validation.test.js
index 7f6b2d1..38bdcf9 100644
--- a/tests/unit/utils/validation.test.js
+++ b/tests/unit/utils/validation.test.js
@@ -5,9 +5,8 @@
 import { describe, it, expect } from 'vitest';
 import {
   validateFile,
-  validateImageDimensions,
-  validateFrameSize,
-  validateSpacing,
+  extractValidFilenameChars,
+  generateUuidV1Short,
 } from '@/utils/validation';
 
 describe('validation.js', () => {
@@ -70,112 +69,68 @@ describe('validation.js', () => {
     });
   });
 
-  describe('validateImageDimensions', () => {
-    it('validates dimensions above minimum', () => {
-      const result = validateImageDimensions(1920, 1080);
-      expect(result.valid).toBe(true);
-      expect(result.error).toBeUndefined();
+  describe('extractValidFilenameChars', () => {
+    it('extracts alphanumeric characters from filename', () => {
+      const result = extractValidFilenameChars('my-photo-2024.jpg');
+      expect(result).toBe('my-photo-2');
     });
 
-    it('validates dimensions at minimum (landscape)', () => {
-      const result = validateImageDimensions(1200, 800);
-      expect(result.valid).toBe(true);
+    it('removes file extension', () => {
+      const result = extractValidFilenameChars('image.png');
+      expect(result).toBe('image');
     });
 
-    it('validates dimensions at minimum (portrait)', () => {
-      const result = validateImageDimensions(800, 1200);
-      expect(result.valid).toBe(true);
+    it('limits to 10 characters', () => {
+      const result = extractValidFilenameChars('verylongfilename.jpg');
+      expect(result).toBe('verylongfi');
     });
 
-    it('rejects dimensions below minimum (width)', () => {
-      const result = validateImageDimensions(600, 1200);
-      expect(result.valid).toBe(false);
-      expect(result.error).toContain('at least 800px');
+    it('preserves spaces, underscores, dashes, and commas', () => {
+      const result = extractValidFilenameChars('photo_01, test-name.jpg');
+      expect(result).toBe('photo_01, ');
     });
 
-    it('rejects dimensions below minimum (height)', () => {
-      const result = validateImageDimensions(1200, 600);
-      expect(result.valid).toBe(false);
-      expect(result.error).toContain('at least 800px');
+    it('removes invalid special characters', () => {
+      const result = extractValidFilenameChars('photo@#$%test.jpg');
+      expect(result).toBe('phototest');
     });
 
-    it('error message includes actual dimension', () => {
-      const result = validateImageDimensions(1200, 600);
-      expect(result.error).toContain('600px');
+    it('handles filename without extension', () => {
+      const result = extractValidFilenameChars('myimage');
+      expect(result).toBe('myimage');
     });
-  });
 
-  describe('validateFrameSize', () => {
-    it('validates size within range', () => {
-      const result = validateFrameSize(3000);
-      expect(result.valid).toBe(true);
-    });
-
-    it('validates minimum size', () => {
-      const result = validateFrameSize(800);
-      expect(result.valid).toBe(true);
-    });
-
-    it('validates maximum size', () => {
-      const result = validateFrameSize(10000);
-      expect(result.valid).toBe(true);
-    });
-
-    it('rejects size below minimum', () => {
-      const result = validateFrameSize(700);
-      expect(result.valid).toBe(false);
-      expect(result.error).toContain('at least 800px');
+    it('returns empty string for null or undefined', () => {
+      expect(extractValidFilenameChars(null)).toBe('');
+      expect(extractValidFilenameChars(undefined)).toBe('');
+      expect(extractValidFilenameChars('')).toBe('');
     });
 
-    it('rejects size above maximum', () => {
-      const result = validateFrameSize(10001);
-      expect(result.valid).toBe(false);
-      expect(result.error).toContain('not exceed 10000px');
+    it('returns empty string when only invalid characters', () => {
+      const result = extractValidFilenameChars('@#$%^&*.jpg');
+      expect(result).toBe('');
     });
 
-    it('accepts custom min and max values', () => {
-      const result = validateFrameSize(1500, 1000, 2000);
-      expect(result.valid).toBe(true);
+    it('handles multiple extensions correctly', () => {
+      const result = extractValidFilenameChars('archive.tar.gz');
+      expect(result).toBe('archivetar');
     });
 
-    it('validates against custom minimum', () => {
-      const result = validateFrameSize(900, 1000, 2000);
-      expect(result.valid).toBe(false);
-      expect(result.error).toContain('1000px');
+    it('handles short filenames (min 1 char)', () => {
+      const result = extractValidFilenameChars('a.jpg');
+      expect(result).toBe('a');
     });
   });
 
-  describe('validateSpacing', () => {
-    it('validates spacing within range', () => {
-      const result = validateSpacing(100);
-      expect(result.valid).toBe(true);
+  describe('generateUuidV1Short', () => {
+    it('generates 8-character string', () => {
+      const uuid = generateUuidV1Short();
+      expect(uuid).toHaveLength(8);
     });
 
-    it('validates minimum spacing', () => {
-      const result = validateSpacing(0);
-      expect(result.valid).toBe(true);
-    });
-
-    it('validates maximum spacing', () => {
-      const result = validateSpacing(500);
-      expect(result.valid).toBe(true);
-    });
-
-    it('rejects negative spacing', () => {
-      const result = validateSpacing(-10);
-      expect(result.valid).toBe(false);
-      expect(result.error).toContain('at least 0px');
-    });
-
-    it('rejects spacing above maximum', () => {
-      const result = validateSpacing(501);
-      expect(result.valid).toBe(false);
-      expect(result.error).toContain('not exceed 500px');
-    });
-
-    it('accepts custom min and max values', () => {
-      const result = validateSpacing(75, 50, 100);
-      expect(result.valid).toBe(true);
+    it('generates hexadecimal characters only', () => {
+      const uuid = generateUuidV1Short();
+      expect(uuid).toMatch(/^[0-9a-f]{8}$/);
     });
   });
 });
diff --git a/vite.config.js b/vite.config.js
index b28aa8c..9b6a51f 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -27,6 +27,7 @@ export default defineConfig({
     coverage: {
       provider: 'v8',
       reporter: ['text', 'json', 'html'],
+      include: ['src/**/*.{js,vue}'],
       exclude: [
         '**/node_modules/**',
         '**/dist/**',