diff --git a/routes/__pycache__/main.cpython-313.pyc b/routes/__pycache__/main.cpython-313.pyc
index 54be398..7d9d1d0 100644
Binary files a/routes/__pycache__/main.cpython-313.pyc and b/routes/__pycache__/main.cpython-313.pyc differ
diff --git a/routes/main.py b/routes/main.py
index 5e46c84..5a78311 100644
--- a/routes/main.py
+++ b/routes/main.py
@@ -356,9 +356,15 @@ def init_routes(main_bp):
             flash('Only administrators can update settings.', 'error')
             return redirect(url_for('main.dashboard'))
         
+        logger.debug(f"Form data: {request.form}")
+        logger.debug(f"CSRF token: {request.form.get('csrf_token')}")
+        
         primary_color = request.form.get('primary_color')
         secondary_color = request.form.get('secondary_color')
         
+        logger.debug(f"Primary color: {primary_color}")
+        logger.debug(f"Secondary color: {secondary_color}")
+        
         if not primary_color or not secondary_color:
             flash('Both primary and secondary colors are required.', 'error')
             return redirect(url_for('main.settings'))
@@ -369,8 +375,10 @@ def init_routes(main_bp):
         
         try:
             db.session.commit()
+            logger.debug("Colors updated successfully in database")
             flash('Color settings updated successfully!', 'success')
         except Exception as e:
+            logger.error(f"Error updating colors: {str(e)}")
             db.session.rollback()
             flash('An error occurred while updating color settings.', 'error')
         
@@ -447,9 +455,17 @@ def init_routes(main_bp):
 
     @main_bp.route('/dynamic-colors.css')
     def dynamic_colors():
-        site_settings = SiteSettings.get_settings()
+        """Generate dynamic CSS variables based on site settings"""
+        logger.info(f"[Dynamic Colors] Request from: {request.referrer}")
         
-        # Calculate derived colors
+        # Get colors from settings
+        site_settings = SiteSettings.get_settings()
+        primary_color = site_settings.primary_color
+        secondary_color = site_settings.secondary_color
+        
+        logger.info(f"[Dynamic Colors] Current colors - Primary: {primary_color}, Secondary: {secondary_color}")
+        
+        # Convert hex to RGB for opacity calculations
         def hex_to_rgb(hex_color):
             hex_color = hex_color.lstrip('#')
             return tuple(int(hex_color[i:i+2], 16) for i in (0, 2, 4))
@@ -457,60 +473,49 @@ def init_routes(main_bp):
         def rgb_to_hex(rgb):
             return '#{:02x}{:02x}{:02x}'.format(rgb[0], rgb[1], rgb[2])
         
-        def lighten_color(hex_color, amount):
+        def lighten_color(hex_color, amount=0.2):
             rgb = hex_to_rgb(hex_color)
-            return rgb_to_hex(tuple(min(255, int(c + (255 - c) * amount)) for c in rgb))
+            rgb = tuple(min(255, int(c + (255 - c) * amount)) for c in rgb)
+            return rgb_to_hex(rgb)
         
-        # Calculate all color variants
-        primary_light = lighten_color(site_settings.primary_color, 0.15)
-        primary_bg_light = lighten_color(site_settings.primary_color, 0.9)
-        primary_opacity_15 = site_settings.primary_color + '26'
+        # Calculate derived colors
+        primary_rgb = hex_to_rgb(primary_color)
+        secondary_rgb = hex_to_rgb(secondary_color)
         
-        secondary_light = lighten_color(site_settings.secondary_color, 0.15)
-        secondary_bg_light = lighten_color(site_settings.secondary_color, 0.9)
-        secondary_opacity_15 = site_settings.secondary_color + '26'
-        
-        # Calculate chart colors
-        primary_chart_light = lighten_color(site_settings.primary_color, 0.2)
-        primary_chart_lighter = lighten_color(site_settings.primary_color, 0.4)
-        primary_chart_lightest = lighten_color(site_settings.primary_color, 0.6)
-        primary_chart_pale = lighten_color(site_settings.primary_color, 0.8)
-        
-        secondary_chart_light = lighten_color(site_settings.secondary_color, 0.2)
-        secondary_chart_lighter = lighten_color(site_settings.secondary_color, 0.4)
-        secondary_chart_lightest = lighten_color(site_settings.secondary_color, 0.6)
-        secondary_chart_pale = lighten_color(site_settings.secondary_color, 0.8)
+        # Lighten colors for hover states
+        primary_light = lighten_color(primary_color, 0.2)
+        secondary_light = lighten_color(secondary_color, 0.2)
         
+        # Generate CSS with opacity variables
         css = f"""
         :root {{
             /* Primary Colors */
-            --primary-color: {site_settings.primary_color};
+            --primary-color: {primary_color};
             --primary-light: {primary_light};
-            --primary-bg-light: {primary_bg_light};
-            --primary-opacity-15: {primary_opacity_15};
+            --primary-rgb: {primary_rgb[0]}, {primary_rgb[1]}, {primary_rgb[2]};
+            --primary-opacity-8: rgba({primary_rgb[0]}, {primary_rgb[1]}, {primary_rgb[2]}, 0.08);
+            --primary-opacity-15: rgba({primary_rgb[0]}, {primary_rgb[1]}, {primary_rgb[2]}, 0.15);
+            --primary-opacity-25: rgba({primary_rgb[0]}, {primary_rgb[1]}, {primary_rgb[2]}, 0.25);
+            --primary-opacity-50: rgba({primary_rgb[0]}, {primary_rgb[1]}, {primary_rgb[2]}, 0.5);
             
             /* Secondary Colors */
-            --secondary-color: {site_settings.secondary_color};
+            --secondary-color: {secondary_color};
             --secondary-light: {secondary_light};
-            --secondary-bg-light: {secondary_bg_light};
-            --secondary-opacity-15: {secondary_opacity_15};
+            --secondary-rgb: {secondary_rgb[0]}, {secondary_rgb[1]}, {secondary_rgb[2]};
+            --secondary-opacity-8: rgba({secondary_rgb[0]}, {secondary_rgb[1]}, {secondary_rgb[2]}, 0.08);
+            --secondary-opacity-15: rgba({secondary_rgb[0]}, {secondary_rgb[1]}, {secondary_rgb[2]}, 0.15);
+            --secondary-opacity-25: rgba({secondary_rgb[0]}, {secondary_rgb[1]}, {secondary_rgb[2]}, 0.25);
+            --secondary-opacity-50: rgba({secondary_rgb[0]}, {secondary_rgb[1]}, {secondary_rgb[2]}, 0.5);
             
             /* Chart Colors */
-            --chart-primary: {site_settings.primary_color};
-            --chart-secondary: {site_settings.secondary_color};
-            --chart-warning: #ffd700;
-            
-            /* Primary Chart Colors */
-            --chart-primary-light: {primary_chart_light};
-            --chart-primary-lighter: {primary_chart_lighter};
-            --chart-primary-lightest: {primary_chart_lightest};
-            --chart-primary-pale: {primary_chart_pale};
-            
-            /* Secondary Chart Colors */
-            --chart-secondary-light: {secondary_chart_light};
-            --chart-secondary-lighter: {secondary_chart_lighter};
-            --chart-secondary-lightest: {secondary_chart_lightest};
-            --chart-secondary-pale: {secondary_chart_pale};
+            --chart-color-1: {primary_color};
+            --chart-color-2: {secondary_color};
+            --chart-color-3: {lighten_color(primary_color, 0.4)};
+            --chart-color-4: {lighten_color(secondary_color, 0.4)};
         }}
         """
+        
+        logger.info(f"[Dynamic Colors] Generated CSS with primary color: {primary_color}")
+        logger.info(f"[Dynamic Colors] Cache version: {site_settings.updated_at.timestamp()}")
+        
         return Response(css, mimetype='text/css') 
\ No newline at end of file
diff --git a/static/css/auth.css b/static/css/auth.css
index 66a6d7f..3d0904f 100644
--- a/static/css/auth.css
+++ b/static/css/auth.css
@@ -1,6 +1,3 @@
-/* Import color variables */
-@import 'colors.css';
-
 body {
     background-color: var(--bg-color);
 }
diff --git a/static/css/base.css b/static/css/base.css
index 0d1aa6b..bd1dcc6 100644
--- a/static/css/base.css
+++ b/static/css/base.css
@@ -1,6 +1,3 @@
-/* Import color variables */
-@import 'colors.css';
-
 body {
     background-color: var(--bg-color);
 }
diff --git a/static/css/dashboard.css b/static/css/dashboard.css
index a231b08..ea69399 100644
--- a/static/css/dashboard.css
+++ b/static/css/dashboard.css
@@ -1,6 +1,3 @@
-/* Import color variables */
-@import 'colors.css';
-
 /* Masonry Layout */
 .masonry {
     column-count: 1;
diff --git a/static/css/home.css b/static/css/home.css
index 692c6a5..07d1a2f 100644
--- a/static/css/home.css
+++ b/static/css/home.css
@@ -1,6 +1,3 @@
-/* Import color variables */
-@import 'colors.css';
-
 .navbar {
     background-color: var(--primary-color) !important;
 }
diff --git a/static/css/trash.css b/static/css/trash.css
index 82764f4..9f4ebcc 100644
--- a/static/css/trash.css
+++ b/static/css/trash.css
@@ -1,6 +1,3 @@
-/* Import color variables */
-@import 'colors.css';
-
 .btn-group .btn.active {
     background-color: var(--primary-bg-light) !important;
     border-color: var(--primary-color) !important;
diff --git a/static/js/settings.js b/static/js/settings.js
index 81c3e83..61cae45 100644
--- a/static/js/settings.js
+++ b/static/js/settings.js
@@ -1,6 +1,7 @@
 document.addEventListener('DOMContentLoaded', function() {
     const primaryColorInput = document.getElementById('primaryColor');
     const secondaryColorInput = document.getElementById('secondaryColor');
+    const colorSettingsForm = document.getElementById('colorSettingsForm');
 
     // Tab persistence
     const settingsTabs = document.querySelectorAll('#settingsTabs button[data-bs-toggle="tab"]');
@@ -163,15 +164,37 @@ document.addEventListener('DOMContentLoaded', function() {
 
     // Initialize colors from database values
     function initializeColors() {
-        // Reset inputs to original database values
-        primaryColorInput.value = primaryColorInput.dataset.originalValue;
-        secondaryColorInput.value = secondaryColorInput.dataset.originalValue;
+        // Get the current computed CSS variable values
+        const computedPrimaryColor = getComputedStyle(document.documentElement).getPropertyValue('--primary-color').trim();
+        const computedSecondaryColor = getComputedStyle(document.documentElement).getPropertyValue('--secondary-color').trim();
+
+        console.log('[Settings] Initializing colors:', {
+            primary: computedPrimaryColor,
+            secondary: computedSecondaryColor,
+            timestamp: new Date().toISOString()
+        });
+
+        // Update input values
+        primaryColorInput.value = computedPrimaryColor;
+        secondaryColorInput.value = computedSecondaryColor;
 
         // Update all color previews
-        updateAllColors(primaryColorInput.value, true);
-        updateAllColors(secondaryColorInput.value, false);
+        updateAllColors(computedPrimaryColor, true);
+        updateAllColors(computedSecondaryColor, false);
     }
 
     // Initialize colors when the page loads
     initializeColors();
+
+    // Handle form submission
+    if (colorSettingsForm) {
+        colorSettingsForm.addEventListener('submit', function(e) {
+            console.log('[Settings] Form submitted with values:', {
+                primary: primaryColorInput.value,
+                secondary: secondaryColorInput.value,
+                csrf: document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
+                timestamp: new Date().toISOString()
+            });
+        });
+    }
 }); 
\ No newline at end of file
diff --git a/templates/auth/login.html b/templates/auth/login.html
index 87b24b8..b0a2c0b 100644
--- a/templates/auth/login.html
+++ b/templates/auth/login.html
@@ -8,7 +8,15 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
     <link rel="stylesheet" href="{{ url_for('static', filename='css/auth.css') }}">
     <link rel="stylesheet" href="{{ url_for('static', filename='css/colors.css') }}">
-    <link rel="stylesheet" href="{{ url_for('main.dynamic_colors') }}">
+    <link rel="stylesheet" href="{{ url_for('main.dynamic_colors') }}?v={{ site_settings.updated_at.timestamp() }}" onload="console.log('[CSS] Dynamic colors loaded with version:', '{{ site_settings.updated_at.timestamp() }}')">
+    <script>
+        console.log('[CSS] Base colors loaded');
+        document.addEventListener('DOMContentLoaded', function() {
+            console.log('[CSS] All CSS files loaded');
+            console.log('[CSS] Primary color:', getComputedStyle(document.documentElement).getPropertyValue('--primary-color').trim());
+            console.log('[CSS] Secondary color:', getComputedStyle(document.documentElement).getPropertyValue('--secondary-color').trim());
+        });
+    </script>
     <style>
         body {
             min-height: 100vh;
diff --git a/templates/auth/register.html b/templates/auth/register.html
index e2d0d3b..a5e167e 100644
--- a/templates/auth/register.html
+++ b/templates/auth/register.html
@@ -7,6 +7,16 @@
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
     <link rel="stylesheet" href="{{ url_for('static', filename='css/auth.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/colors.css') }}">
+    <link rel="stylesheet" href="{{ url_for('main.dynamic_colors') }}?v={{ site_settings.updated_at.timestamp() }}" onload="console.log('[CSS] Dynamic colors loaded with version:', '{{ site_settings.updated_at.timestamp() }}')">
+    <script>
+        console.log('[CSS] Base colors loaded');
+        document.addEventListener('DOMContentLoaded', function() {
+            console.log('[CSS] All CSS files loaded');
+            console.log('[CSS] Primary color:', getComputedStyle(document.documentElement).getPropertyValue('--primary-color').trim());
+            console.log('[CSS] Secondary color:', getComputedStyle(document.documentElement).getPropertyValue('--secondary-color').trim());
+        });
+    </script>
 </head>
 <body>
     <div class="container">
diff --git a/templates/common/base.html b/templates/common/base.html
index 837b77f..0835c1f 100644
--- a/templates/common/base.html
+++ b/templates/common/base.html
@@ -10,8 +10,17 @@
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
     <link href="{{ url_for('static', filename='css/file-grid.css') }}" rel="stylesheet">
     <link href="{{ url_for('static', filename='css/base.css') }}" rel="stylesheet">
-    <link rel="stylesheet" href="{{ url_for('main.dynamic_colors') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/colors.css') }}">
+    <link rel="stylesheet" href="{{ url_for('main.dynamic_colors') }}?v={{ site_settings.updated_at.timestamp() }}" onload="console.log('[CSS] Dynamic colors loaded with version:', '{{ site_settings.updated_at.timestamp() }}')">
     {% block extra_css %}{% endblock %}
+    <script>
+        console.log('[CSS] Base colors loaded');
+        document.addEventListener('DOMContentLoaded', function() {
+            console.log('[CSS] All CSS files loaded');
+            console.log('[CSS] Primary color:', getComputedStyle(document.documentElement).getPropertyValue('--primary-color').trim());
+            console.log('[CSS] Secondary color:', getComputedStyle(document.documentElement).getPropertyValue('--secondary-color').trim());
+        });
+    </script>
 </head>
 <body>
     <!-- Navigation -->
diff --git a/templates/dashboard/dashboard.html b/templates/dashboard/dashboard.html
index c351d95..f63666c 100644
--- a/templates/dashboard/dashboard.html
+++ b/templates/dashboard/dashboard.html
@@ -5,7 +5,6 @@
 
 {% block extra_css %}
 <link rel="stylesheet" href="{{ url_for('static', filename='css/dashboard.css') }}">
-<link rel="stylesheet" href="{{ url_for('main.dynamic_colors') }}">
 {% endblock %}
 
 {% block content %}
@@ -70,17 +69,11 @@ document.addEventListener('DOMContentLoaded', function() {
 
   // Get all chart colors
   const chartColors = {
-    primary: getCssVar('--chart-primary'),
-    secondary: getCssVar('--chart-secondary'),
-    warning: getCssVar('--chart-warning'),
-    primaryLight: getCssVar('--chart-primary-light'),
-    primaryLighter: getCssVar('--chart-primary-lighter'),
-    primaryLightest: getCssVar('--chart-primary-lightest'),
-    primaryPale: getCssVar('--chart-primary-pale'),
-    secondaryLight: getCssVar('--chart-secondary-light'),
-    secondaryLighter: getCssVar('--chart-secondary-lighter'),
-    secondaryLightest: getCssVar('--chart-secondary-lightest'),
-    secondaryPale: getCssVar('--chart-secondary-pale')
+    color1: getCssVar('--chart-color-1'),
+    color2: getCssVar('--chart-color-2'),
+    color3: getCssVar('--chart-color-3'),
+    color4: getCssVar('--chart-color-4'),
+    warning: getCssVar('--warning-color')
   };
 
   // Contact Status Chart
@@ -92,7 +85,7 @@ document.addEventListener('DOMContentLoaded', function() {
         labels: ['Active', 'Inactive'],
         datasets: [{
           data: [{{ active_count }}, {{ inactive_count }}],
-          backgroundColor: [chartColors.primary, chartColors.secondary],
+          backgroundColor: [chartColors.color1, chartColors.color2],
           borderWidth: 0,
           hoverOffset: 4
         }]
@@ -119,7 +112,7 @@ document.addEventListener('DOMContentLoaded', function() {
         labels: ['Starred', 'Unstarred'],
         datasets: [{
           data: [{{ starred_count }}, {{ file_count - starred_count }}],
-          backgroundColor: [chartColors.warning, chartColors.primary],
+          backgroundColor: [chartColors.warning, chartColors.color1],
           borderWidth: 0,
           hoverOffset: 4
         }]
@@ -145,16 +138,10 @@ document.addEventListener('DOMContentLoaded', function() {
       datasets: [{
         data: [{% for type in storage_by_type %}{{ type.total_size }}{% if not loop.last %}, {% endif %}{% endfor %}],
         backgroundColor: [
-          chartColors.primary,
-          chartColors.primaryLight,
-          chartColors.primaryLighter,
-          chartColors.primaryLightest,
-          chartColors.primaryPale,
-          chartColors.secondary,
-          chartColors.secondaryLight,
-          chartColors.secondaryLighter,
-          chartColors.secondaryLightest,
-          chartColors.secondaryPale
+          chartColors.color1,
+          chartColors.color2,
+          chartColors.color3,
+          chartColors.color4
         ],
         borderWidth: 0,
         hoverOffset: 4
@@ -185,16 +172,10 @@ document.addEventListener('DOMContentLoaded', function() {
       datasets: [{
         data: [{% for type in trash_by_type %}{{ type.count }}{% if not loop.last %}, {% endif %}{% endfor %}],
         backgroundColor: [
-          chartColors.primary,
-          chartColors.primaryLight,
-          chartColors.primaryLighter,
-          chartColors.primaryLightest,
-          chartColors.primaryPale,
-          chartColors.secondary,
-          chartColors.secondaryLight,
-          chartColors.secondaryLighter,
-          chartColors.secondaryLightest,
-          chartColors.secondaryPale
+          chartColors.color1,
+          chartColors.color2,
+          chartColors.color3,
+          chartColors.color4
         ],
         borderWidth: 0,
         hoverOffset: 4
diff --git a/templates/trash/trash.html b/templates/trash/trash.html
index f55bdfc..6f0a6d4 100644
--- a/templates/trash/trash.html
+++ b/templates/trash/trash.html
@@ -5,7 +5,6 @@
 
 {% block extra_css %}
 <link rel="stylesheet" href="{{ url_for('static', filename='css/trash.css') }}">
-<link rel="stylesheet" href="{{ url_for('main.dynamic_colors') }}">
 {% endblock %}
 
 {% block content %}