diff --git a/templates/system_admin_branding.html b/templates/system_admin_branding.html
index ebc008f..80910e1 100644
--- a/templates/system_admin_branding.html
+++ b/templates/system_admin_branding.html
@@ -1,30 +1,40 @@
 {% extends "layout.html" %}
 
 {% block content %}
-<div class="container">
-    <div class="header-section">
-        <h1>🎨 System Administrator - Branding Settings</h1>
-        <p class="subtitle">Customize the appearance and branding of your TimeTrack instance</p>
-        <a href="{{ url_for('system_admin_dashboard') }}" class="btn btn-secondary">← Back to Dashboard</a>
+<div class="management-container">
+    <div class="management-header">
+        <h1>🎨 Branding Settings</h1>
+        <div class="management-actions">
+            <a href="{{ url_for('system_admin_dashboard') }}" class="btn btn-secondary">← Back to Dashboard</a>
+        </div>
     </div>
+    
+    <p class="subtitle">Customize the appearance and branding of {{ branding.app_name }}</p>
 
     <!-- Current Branding Preview -->
-    <div class="stats-section">
-        <h3>👁️ Current Branding Preview</h3>
-        <div class="branding-preview">
-            <div class="preview-card">
-                <div class="preview-header">
-                    {% if branding.logo_filename %}
-                        <img src="{{ url_for('static', filename='uploads/branding/' + branding.logo_filename) }}" 
-                             alt="{{ branding.logo_alt_text }}" 
-                             class="preview-logo">
-                    {% endif %}
-                    <h4>{{ branding.app_name }}</h4>
-                </div>
-                <div class="preview-content">
-                    <p>This is how your branding will appear to users.</p>
-                    <div class="preview-button" style="background-color: {{ branding.primary_color }};">
-                        Sample Button
+    <div class="management-section">
+        <h2>👁️ Current Branding Preview</h2>
+        <div class="management-card branding-preview-card">
+            <div class="card-header">
+                <h3>Live Preview</h3>
+            </div>
+            <div class="card-body">
+                <div class="preview-demo">
+                    <div class="demo-header">
+                        {% if branding.logo_filename %}
+                            <img src="{{ url_for('static', filename='uploads/branding/' + branding.logo_filename) }}" 
+                                 alt="{{ branding.logo_alt_text }}" 
+                                 class="demo-logo">
+                        {% else %}
+                            <span class="demo-text-logo">{{ branding.app_name }}</span>
+                        {% endif %}
+                    </div>
+                    <div class="demo-content">
+                        <p>Welcome to {{ branding.app_name }}</p>
+                        <button class="btn btn-primary" style="background-color: {{ branding.primary_color }}; border-color: {{ branding.primary_color }};">
+                            Sample Button
+                        </button>
+                        <a href="#" style="color: {{ branding.primary_color }};">Sample Link</a>
                     </div>
                 </div>
             </div>
@@ -32,191 +42,270 @@
     </div>
 
     <!-- Branding Settings Form -->
-    <div class="settings-section">
-        <h3>🔧 Branding Configuration</h3>
-        <form method="POST" enctype="multipart/form-data" class="settings-form">
-            <!-- Application Name -->
-            <div class="setting-group">
-                <div class="setting-header">
-                    <h4>Application Name</h4>
-                    <p>The name that appears throughout the application</p>
-                </div>
-                <div class="setting-control">
-                    <label for="app_name">Application Name:</label>
-                    <input type="text" id="app_name" name="app_name" 
-                           value="{{ branding.app_name }}" 
-                           class="form-control"
-                           placeholder="TimeTrack" 
-                           required>
-                    <small class="setting-description">
-                        This name will appear in the title, navigation, and throughout the interface.
-                    </small>
-                </div>
-            </div>
+    <div class="management-section">
+        <h2>🔧 Branding Configuration</h2>
+        <div class="management-card">
+            <form method="POST" enctype="multipart/form-data" class="settings-form">
+                <!-- Application Name -->
+                <div class="form-section">
+                    <h3>📝 Basic Information</h3>
+                    <div class="form-group">
+                        <label for="app_name">Application Name</label>
+                        <input type="text" id="app_name" name="app_name" 
+                               value="{{ branding.app_name }}" 
+                               class="form-control"
+                               placeholder="TimeTrack" 
+                               required>
+                        <small class="form-text text-muted">
+                            This name will appear in the title, navigation, and throughout the interface.
+                        </small>
+                    </div>
 
-            <!-- Logo Upload -->
-            <div class="setting-group">
-                <div class="setting-header">
-                    <h4>Logo Upload</h4>
-                    <p>Upload a custom logo for your application</p>
+                    <div class="form-group">
+                        <label for="logo_alt_text">Logo Alternative Text</label>
+                        <input type="text" id="logo_alt_text" name="logo_alt_text" 
+                               value="{{ branding.logo_alt_text }}" 
+                               class="form-control"
+                               placeholder="Company Logo">
+                        <small class="form-text text-muted">
+                            Text displayed when the logo cannot be loaded (accessibility).
+                        </small>
+                    </div>
                 </div>
-                <div class="setting-control">
-                    <label for="logo_file">Logo File:</label>
-                    <input type="file" id="logo_file" name="logo_file" 
-                           accept="image/*" 
-                           class="form-control">
-                    {% if branding.logo_filename %}
-                        <div class="current-file">
-                            <strong>Current logo:</strong>
-                            <img src="{{ url_for('static', filename='uploads/branding/' + branding.logo_filename) }}" 
-                                 alt="{{ branding.logo_alt_text }}" 
-                                 class="current-logo">
+
+                <!-- Visual Assets -->
+                <div class="form-section">
+                    <h3>🖼️ Visual Assets</h3>
+                    <div class="form-row">
+                        <div class="form-group col-md-6">
+                            <label for="logo_file">Logo Image</label>
+                            <input type="file" id="logo_file" name="logo_file" 
+                                   accept="image/*" 
+                                   class="form-control-file">
+                            {% if branding.logo_filename %}
+                                <div class="current-asset">
+                                    <img src="{{ url_for('static', filename='uploads/branding/' + branding.logo_filename) }}" 
+                                         alt="{{ branding.logo_alt_text }}" 
+                                         class="current-logo">
+                                    <span class="asset-label">Current logo</span>
+                                </div>
+                            {% endif %}
+                            <small class="form-text text-muted">
+                                PNG, JPG, GIF, SVG. Recommended: 200x50px
+                            </small>
                         </div>
-                    {% endif %}
-                    <small class="setting-description">
-                        Supported formats: PNG, JPG, GIF, SVG. Recommended size: 200x50px or similar aspect ratio.
-                    </small>
-                </div>
-            </div>
 
-            <!-- Logo Alt Text -->
-            <div class="setting-group">
-                <div class="setting-header">
-                    <h4>Logo Alt Text</h4>
-                    <p>Alternative text for the logo (accessibility)</p>
-                </div>
-                <div class="setting-control">
-                    <label for="logo_alt_text">Alt Text:</label>
-                    <input type="text" id="logo_alt_text" name="logo_alt_text" 
-                           value="{{ branding.logo_alt_text }}" 
-                           class="form-control"
-                           placeholder="Company Logo">
-                    <small class="setting-description">
-                        This text will be read by screen readers and shown when the logo cannot be displayed.
-                    </small>
-                </div>
-            </div>
-
-            <!-- Favicon Upload -->
-            <div class="setting-group">
-                <div class="setting-header">
-                    <h4>Favicon Upload</h4>
-                    <p>Upload a custom favicon (browser tab icon)</p>
-                </div>
-                <div class="setting-control">
-                    <label for="favicon_file">Favicon File:</label>
-                    <input type="file" id="favicon_file" name="favicon_file" 
-                           accept="image/*" 
-                           class="form-control">
-                    {% if branding.favicon_filename %}
-                        <div class="current-file">
-                            <strong>Current favicon:</strong>
-                            <img src="{{ url_for('static', filename='uploads/branding/' + branding.favicon_filename) }}" 
-                                 alt="Current favicon" 
-                                 class="current-favicon">
+                        <div class="form-group col-md-6">
+                            <label for="favicon_file">Favicon</label>
+                            <input type="file" id="favicon_file" name="favicon_file" 
+                                   accept="image/*" 
+                                   class="form-control-file">
+                            {% if branding.favicon_filename %}
+                                <div class="current-asset">
+                                    <img src="{{ url_for('static', filename='uploads/branding/' + branding.favicon_filename) }}" 
+                                         alt="Current favicon" 
+                                         class="current-favicon">
+                                    <span class="asset-label">Current favicon</span>
+                                </div>
+                            {% endif %}
+                            <small class="form-text text-muted">
+                                ICO, PNG. Recommended: 16x16px or 32x32px
+                            </small>
                         </div>
-                    {% endif %}
-                    <small class="setting-description">
-                        Supported formats: ICO, PNG (16x16px or 32x32px recommended).
-                    </small>
+                    </div>
                 </div>
-            </div>
 
-            <!-- Primary Color -->
-            <div class="setting-group">
-                <div class="setting-header">
-                    <h4>Primary Color</h4>
-                    <p>The primary color used throughout the application</p>
+                <!-- Theme Settings -->
+                <div class="form-section">
+                    <h3>🎨 Theme Settings</h3>
+                    <div class="form-group">
+                        <label for="primary_color">Primary Color</label>
+                        <div class="color-picker-wrapper">
+                            <input type="color" id="primary_color" name="primary_color" 
+                                   value="{{ branding.primary_color }}" 
+                                   class="form-control color-picker">
+                            <input type="text" value="{{ branding.primary_color }}" 
+                                   class="form-control color-value" 
+                                   id="primary_color_text"
+                                   pattern="^#[0-9A-Fa-f]{6}$"
+                                   placeholder="#007bff">
+                        </div>
+                        <small class="form-text text-muted">
+                            This color will be used for buttons, links, and other UI elements.
+                        </small>
+                    </div>
                 </div>
-                <div class="setting-control">
-                    <label for="primary_color">Primary Color:</label>
-                    <input type="color" id="primary_color" name="primary_color" 
-                           value="{{ branding.primary_color }}" 
-                           class="form-control color-picker">
-                    <small class="setting-description">
-                        This color will be used for buttons, links, and other UI elements throughout the application.
-                    </small>
-                </div>
-            </div>
 
-            <!-- Save Button -->
-            <div class="form-actions">
-                <button type="submit" class="btn btn-primary">💾 Save Branding Settings</button>
-            </div>
-        </form>
+                <!-- Save Button -->
+                <div class="form-actions">
+                    <button type="submit" class="btn btn-primary">💾 Save Branding Settings</button>
+                    <a href="{{ url_for('system_admin_dashboard') }}" class="btn btn-secondary">Cancel</a>
+                </div>
+            </form>
+        </div>
     </div>
 </div>
 
 <style>
-/* Branding-specific styles that complement the existing design system */
-.branding-preview {
+/* Branding-specific styles */
+.branding-preview-card {
+    margin-bottom: 2rem;
+}
+
+.preview-demo {
     background: #f8f9fa;
-    border: 1px solid #dee2e6;
-    border-radius: 5px;
-    padding: 20px;
-    margin-top: 15px;
+    border-radius: 8px;
+    padding: 2rem;
+    text-align: center;
 }
 
-.preview-card {
-    background: white;
-    border-radius: 5px;
-    padding: 20px;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-    max-width: 400px;
+.demo-header {
+    margin-bottom: 1.5rem;
+    padding-bottom: 1rem;
+    border-bottom: 1px solid #dee2e6;
 }
 
-.preview-header {
-    display: flex;
-    align-items: center;
-    gap: 15px;
-    margin-bottom: 15px;
-    padding-bottom: 15px;
-    border-bottom: 1px solid #eee;
-}
-
-.preview-logo {
-    max-height: 40px;
-    max-width: 150px;
+.demo-logo {
+    max-height: 50px;
+    max-width: 200px;
     object-fit: contain;
 }
 
-.preview-button {
-    color: white;
-    padding: 8px 16px;
-    border-radius: 4px;
-    display: inline-block;
-    margin-top: 10px;
-    font-size: 14px;
-    border: none;
-    cursor: pointer;
+.demo-text-logo {
+    font-size: 1.5rem;
+    font-weight: 600;
+    color: #333;
 }
 
-.current-file {
-    margin-top: 10px;
-    padding: 10px;
+.demo-content {
+    margin-top: 1rem;
+}
+
+.demo-content p {
+    color: #6c757d;
+    margin-bottom: 1rem;
+}
+
+.demo-content .btn {
+    margin-right: 1rem;
+}
+
+/* Current assets display */
+.current-asset {
+    margin-top: 0.5rem;
+    padding: 0.75rem;
     background: #f8f9fa;
     border-radius: 4px;
-    border: 1px solid #dee2e6;
+    display: flex;
+    align-items: center;
+    gap: 1rem;
 }
 
 .current-logo {
-    max-height: 30px;
-    max-width: 100px;
+    max-height: 40px;
+    max-width: 120px;
     object-fit: contain;
-    margin-left: 10px;
 }
 
 .current-favicon {
-    max-height: 16px;
-    max-width: 16px;
+    width: 32px;
+    height: 32px;
     object-fit: contain;
-    margin-left: 10px;
+}
+
+.asset-label {
+    font-size: 0.875rem;
+    color: #6c757d;
+}
+
+/* Color picker styling */
+.color-picker-wrapper {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+    max-width: 300px;
 }
 
 .color-picker {
-    width: 80px !important;
-    height: 40px;
-    padding: 0 !important;
+    width: 60px;
+    height: 38px;
+    padding: 0.25rem;
+    border: 1px solid #ced4da;
+    border-radius: 4px;
+    cursor: pointer;
 }
+
+.color-value {
+    flex: 1;
+    font-family: monospace;
+}
+
+/* Form sections */
+.form-section {
+    margin-bottom: 2rem;
+    padding-bottom: 2rem;
+    border-bottom: 1px solid #dee2e6;
+}
+
+.form-section:last-child {
+    border-bottom: none;
+    margin-bottom: 0;
+}
+
+.form-section h3 {
+    margin-bottom: 1rem;
+    color: #495057;
+    font-size: 1.1rem;
+    font-weight: 600;
+}
+
+/* File input styling */
+.form-control-file {
+    display: block;
+    width: 100%;
+    padding: 0.375rem 0;
+}
+
+/* Form row for two-column layout */
+.form-row {
+    display: flex;
+    flex-wrap: wrap;
+    margin-right: -0.5rem;
+    margin-left: -0.5rem;
+}
+
+.form-row > .col-md-6 {
+    flex: 0 0 50%;
+    max-width: 50%;
+    padding-right: 0.5rem;
+    padding-left: 0.5rem;
+}
+
+@media (max-width: 768px) {
+    .form-row > .col-md-6 {
+        flex: 0 0 100%;
+        max-width: 100%;
+    }
+}
+
+/* Sync color inputs */
 </style>
+
+<script>
+// Sync color picker with text input
+document.addEventListener('DOMContentLoaded', function() {
+    const colorPicker = document.getElementById('primary_color');
+    const colorText = document.getElementById('primary_color_text');
+    
+    colorPicker.addEventListener('input', function() {
+        colorText.value = this.value;
+    });
+    
+    colorText.addEventListener('input', function() {
+        if (this.value.match(/^#[0-9A-Fa-f]{6}$/)) {
+            colorPicker.value = this.value;
+        }
+    });
+});
+</script>
 {% endblock %}
\ No newline at end of file