diff --git a/static/css/auth.css b/static/css/auth.css
index 3d0904f..e6420aa 100644
--- a/static/css/auth.css
+++ b/static/css/auth.css
@@ -37,4 +37,41 @@ body {
 
 .alert {
     border-radius: 10px;
-} 
\ No newline at end of file
+} 
+
+body {
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: linear-gradient(135deg, 
+        var(--primary-opacity-15) 0%,
+        var(--bg-color) 25%,
+        var(--bg-color) 75%,
+        var(--primary-opacity-15) 100%);
+    position: relative;
+    overflow: hidden;
+}
+body::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: radial-gradient(circle at 50% 50%, 
+        var(--primary-opacity-8) 0%,
+        transparent 50%);
+    z-index: -1;
+}
+.auth-container {
+    width: 100%;
+    max-width: 400px;
+    margin: 0 auto;
+}
+.auth-card {
+    backdrop-filter: blur(10px);
+    background-color: var(--white);
+    box-shadow: 0 8px 32px var(--shadow-color);
+    border: 1px solid var(--border-light);
+}
\ No newline at end of file
diff --git a/static/js/color-logger.js b/static/js/color-logger.js
new file mode 100644
index 0000000..8d3ad2f
--- /dev/null
+++ b/static/js/color-logger.js
@@ -0,0 +1,6 @@
+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());
+}); 
\ No newline at end of file
diff --git a/templates/auth/login.html b/templates/auth/login.html
index d19ac96..bab79eb 100644
--- a/templates/auth/login.html
+++ b/templates/auth/login.html
@@ -9,52 +9,7 @@
     <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>
-    <style>
-        body {
-            min-height: 100vh;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            background: linear-gradient(135deg, 
-                var(--primary-opacity-15) 0%,
-                var(--bg-color) 25%,
-                var(--bg-color) 75%,
-                var(--primary-opacity-15) 100%);
-            position: relative;
-            overflow: hidden;
-        }
-        body::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background: radial-gradient(circle at 50% 50%, 
-                var(--primary-opacity-8) 0%,
-                transparent 50%);
-            z-index: -1;
-        }
-        .auth-container {
-            width: 100%;
-            max-width: 400px;
-            margin: 0 auto;
-        }
-        .auth-card {
-            backdrop-filter: blur(10px);
-            background-color: var(--white);
-            box-shadow: 0 8px 32px var(--shadow-color);
-            border: 1px solid var(--border-light);
-        }
-    </style>
+    <script src="{{ url_for('static', filename='js/color-logger.js') }}"></script>
 </head>
 <body>
     <div class="container">
diff --git a/templates/auth/register.html b/templates/auth/register.html
index a5e167e..d9143db 100644
--- a/templates/auth/register.html
+++ b/templates/auth/register.html
@@ -9,14 +9,7 @@
     <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>
+    <script src="{{ url_for('static', filename='js/color-logger.js') }}"></script>
 </head>
 <body>
     <div class="container">
@@ -27,14 +20,6 @@
                     <p class="mb-0">Join DocuPulse today</p>
                 </div>
                 <div class="card-body p-4">
-                    {% with messages = get_flashed_messages(with_categories=true) %}
-                        {% if messages %}
-                            {% for category, message in messages %}
-                                <div class="alert alert-{{ category }}">{{ message }}</div>
-                            {% endfor %}
-                        {% endif %}
-                    {% endwith %}
-                    
                     <form method="POST" action="{{ url_for('auth.register') }}">
                         <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                         <div class="mb-3">
diff --git a/templates/common/base.html b/templates/common/base.html
index 0835c1f..6532404 100644
--- a/templates/common/base.html
+++ b/templates/common/base.html
@@ -13,14 +13,7 @@
     <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>
+    <script src="{{ url_for('static', filename='js/color-logger.js') }}"></script>
 </head>
 <body>
     <!-- Navigation -->