diff --git a/backend/src/auth.rs b/backend/src/auth.rs
index 861bf38..5a89fbd 100644
--- a/backend/src/auth.rs
+++ b/backend/src/auth.rs
@@ -1,6 +1,6 @@
+use crate::error::AppError;
 use axum::http::HeaderMap;
 use tracing::warn;
-use crate::error::AppError;
 
 pub fn check_auth(headers: &HeaderMap, admin_token: &str) -> Result<(), AppError> {
     let auth_header = headers.get("Authorization").and_then(|h| h.to_str().ok());
diff --git a/backend/src/error.rs b/backend/src/error.rs
index 363c8c4..97a7d28 100644
--- a/backend/src/error.rs
+++ b/backend/src/error.rs
@@ -1,7 +1,7 @@
 use axum::{
+    Json,
     http::StatusCode,
     response::{IntoResponse, Response},
-    Json,
 };
 
 use crate::models::ErrorResponse;
@@ -38,4 +38,4 @@ where
     fn from(err: E) -> Self {
         AppError::Internal("Internal Server Error".to_string(), Some(err.to_string()))
     }
-}
\ No newline at end of file
+}
diff --git a/backend/src/handlers/config.rs b/backend/src/handlers/config.rs
index 0f949e9..be6c1ea 100644
--- a/backend/src/handlers/config.rs
+++ b/backend/src/handlers/config.rs
@@ -1,18 +1,8 @@
-use axum::{
-    extract::State,
-    http::HeaderMap,
-    response::IntoResponse,
-    Json,
-};
+use axum::{Json, extract::State, http::HeaderMap, response::IntoResponse};
 use std::{fs, sync::Arc};
 use tracing::error;
 
-use crate::{
-    auth::check_auth,
-    error::AppError,
-    models::SiteConfig,
-    AppState,
-};
+use crate::{AppState, auth::check_auth, error::AppError, models::SiteConfig};
 
 pub async fn get_config(State(state): State<Arc<AppState>>) -> impl IntoResponse {
     let config_path = state.data_dir.join("config.json");
@@ -20,7 +10,7 @@ pub async fn get_config(State(state): State<Arc<AppState>>) -> impl IntoResponse
         .ok()
         .and_then(|c| serde_json::from_str::<SiteConfig>(&c).ok())
         .unwrap_or_default();
-    
+
     Json(config)
 }
 
@@ -43,4 +33,4 @@ pub async fn update_config(
     })?;
 
     Ok(Json(payload))
-}
\ No newline at end of file
+}
diff --git a/backend/src/handlers/posts.rs b/backend/src/handlers/posts.rs
index fd7870f..b9755b1 100644
--- a/backend/src/handlers/posts.rs
+++ b/backend/src/handlers/posts.rs
@@ -1,17 +1,17 @@
 use axum::{
+    Json,
     extract::{Path, State},
     http::{HeaderMap, StatusCode},
     response::IntoResponse,
-    Json,
 };
 use std::{fs, sync::Arc};
 use tracing::{error, info, warn};
 
 use crate::{
+    AppState,
     auth::check_auth,
     error::AppError,
     models::{CreatePostRequest, PostDetail, PostInfo},
-    AppState,
 };
 
 pub async fn create_post(
@@ -25,8 +25,11 @@ pub async fn create_post(
         return Err(AppError::BadRequest("Invalid slug".to_string()));
     }
 
-    let file_path = state.data_dir.join("posts").join(format!("{}.md", payload.slug));
-    
+    let file_path = state
+        .data_dir
+        .join("posts")
+        .join(format!("{}.md", payload.slug));
+
     let mut file_content = String::new();
     if let Some(ref summary) = payload.summary {
         if !summary.trim().is_empty() {
@@ -59,7 +62,7 @@ pub async fn delete_post(
 
     let file_path = state.data_dir.join("posts").join(format!("{}.md", slug));
     info!("Attempting to delete post at: {:?}", file_path);
-    
+
     if !file_path.exists() {
         warn!("Post not found for deletion: {}", slug);
         return Err(AppError::NotFound("Post not found".to_string()));
@@ -99,13 +102,17 @@ pub async fn list_posts(State(state): State<Arc<AppState>>) -> impl IntoResponse
                                     let body = parts[2];
                                     let clean_content = body.replace("#", "").replace("\n", " ");
                                     excerpt = clean_content.chars().take(200).collect::<String>();
-                                    if clean_content.len() > 200 { excerpt.push_str("..."); }
+                                    if clean_content.len() > 200 {
+                                        excerpt.push_str("...");
+                                    }
                                 }
                             }
                         } else {
                             let clean_content = content.replace("#", "").replace("\n", " ");
                             excerpt = clean_content.chars().take(200).collect::<String>();
-                            if clean_content.len() > 200 { excerpt.push_str("..."); }
+                            if clean_content.len() > 200 {
+                                excerpt.push_str("...");
+                            }
                         }
                     }
                     posts.push(PostInfo {
@@ -125,7 +132,7 @@ pub async fn get_post(
     Path(slug): Path<String>,
 ) -> Result<Json<PostDetail>, AppError> {
     let file_path = state.data_dir.join("posts").join(format!("{}.md", slug));
-    
+
     match fs::read_to_string(&file_path) {
         Ok(raw_content) => {
             let mut summary = None;
@@ -145,8 +152,12 @@ pub async fn get_post(
                 }
             }
 
-            Ok(Json(PostDetail { slug, summary, content }))
-        },
+            Ok(Json(PostDetail {
+                slug,
+                summary,
+                content,
+            }))
+        }
         Err(_) => Err(AppError::NotFound("Post not found".to_string())),
     }
-}
\ No newline at end of file
+}
diff --git a/backend/src/handlers/upload.rs b/backend/src/handlers/upload.rs
index b1e4c54..49ebf12 100644
--- a/backend/src/handlers/upload.rs
+++ b/backend/src/handlers/upload.rs
@@ -1,17 +1,16 @@
 use axum::{
+    Json,
     extract::{Multipart, State},
     http::HeaderMap,
-    response::IntoResponse,
-    Json,
 };
 use std::{fs, sync::Arc};
 use tracing::{error, info, warn};
 
 use crate::{
+    AppState,
     auth::check_auth,
     error::AppError,
     models::{FileInfo, UploadResponse},
-    AppState,
 };
 
 pub async fn list_uploads(
@@ -57,12 +56,12 @@ pub async fn upload_file(
 
         info!("Processing upload for: {}", file_name);
         let slugified_name = slug::slugify(&file_name);
-        
+
         let extension = std::path::Path::new(&file_name)
             .extension()
             .and_then(|e| e.to_str())
             .unwrap_or("");
-        
+
         let final_name = if !extension.is_empty() {
             format!("{}.{}", slugified_name, extension)
         } else {
@@ -79,7 +78,12 @@ pub async fn upload_file(
             file_path
         };
 
-        let final_name_str = final_path.file_name().unwrap().to_str().unwrap().to_string();
+        let final_name_str = final_path
+            .file_name()
+            .unwrap()
+            .to_str()
+            .unwrap()
+            .to_string();
 
         let data = match field.bytes().await {
             Ok(bytes) => bytes,
@@ -91,7 +95,10 @@ pub async fn upload_file(
 
         if let Err(e) = fs::write(&final_path, &data) {
             error!("Failed to write file to {:?}: {}", final_path, e);
-            return Err(AppError::Internal("Write error".to_string(), Some(e.to_string())));
+            return Err(AppError::Internal(
+                "Write error".to_string(),
+                Some(e.to_string()),
+            ));
         }
 
         info!("File uploaded successfully to {:?}", final_path);
@@ -102,4 +109,4 @@ pub async fn upload_file(
 
     warn!("Upload failed: no file found in multipart stream");
     Err(AppError::BadRequest("No file found".to_string()))
-}
\ No newline at end of file
+}
diff --git a/backend/src/main.rs b/backend/src/main.rs
index edb3635..4f18c29 100644
--- a/backend/src/main.rs
+++ b/backend/src/main.rs
@@ -4,9 +4,9 @@ pub mod handlers;
 pub mod models;
 
 use axum::{
-    extract::DefaultBodyLimit,
-    routing::{delete, get, post},
     Router,
+    extract::DefaultBodyLimit,
+    routing::{get, post},
 };
 use std::{env, fs, path::PathBuf, sync::Arc};
 use tower_http::{
@@ -54,9 +54,18 @@ async fn main() {
         .allow_headers(Any);
 
     let app = Router::new()
-        .route("/api/config", get(handlers::config::get_config).post(handlers::config::update_config))
-        .route("/api/posts", get(handlers::posts::list_posts).post(handlers::posts::create_post))
-        .route("/api/posts/{slug}", get(handlers::posts::get_post).delete(handlers::posts::delete_post))
+        .route(
+            "/api/config",
+            get(handlers::config::get_config).post(handlers::config::update_config),
+        )
+        .route(
+            "/api/posts",
+            get(handlers::posts::list_posts).post(handlers::posts::create_post),
+        )
+        .route(
+            "/api/posts/{slug}",
+            get(handlers::posts::get_post).delete(handlers::posts::delete_post),
+        )
         .route("/api/uploads", get(handlers::upload::list_uploads))
         .route("/api/upload", post(handlers::upload::upload_file))
         .nest_service("/uploads", ServeDir::new(uploads_dir))
diff --git a/backend/src/models.rs b/backend/src/models.rs
index 3730edf..be67440 100644
--- a/backend/src/models.rs
+++ b/backend/src/models.rs
@@ -18,7 +18,8 @@ impl Default for SiteConfig {
             title: "Narlblog".to_string(),
             subtitle: "A clean, modern blog".to_string(),
             welcome_title: "Welcome to my blog".to_string(),
-            welcome_subtitle: "Thoughts on software, design, and building things with Rust and Astro.".to_string(),
+            welcome_subtitle:
+                "Thoughts on software, design, and building things with Rust and Astro.".to_string(),
             footer: "Built with Rust & Astro".to_string(),
             favicon: "/favicon.svg".to_string(),
             theme: "mocha".to_string(),
diff --git a/frontend/src/components/ThemeSwitcher.astro b/frontend/src/components/ThemeSwitcher.astro
new file mode 100644
index 0000000..c27954a
--- /dev/null
+++ b/frontend/src/components/ThemeSwitcher.astro
@@ -0,0 +1,25 @@
+---
+const { defaultTheme } = Astro.props;
+---
+
+<select id="user-theme-switcher" class="bg-surface0/50 text-text border border-surface1 rounded px-2 py-1 text-xs focus:outline-none focus:border-mauve transition-colors cursor-pointer">
+    <option value="mocha">Mocha</option>
+    <option value="macchiato">Macchiato</option>
+    <option value="frappe">Frappe</option>
+    <option value="latte">Latte</option>
+    <option value="scaled-and-icy">Scaled and Icy</option>
+</select>
+
+<script is:inline define:vars={{ defaultTheme }}>
+    const switcher = document.getElementById('user-theme-switcher');
+    if (switcher) {
+        const savedTheme = localStorage.getItem('user-theme') || defaultTheme;
+        switcher.value = savedTheme;
+        
+        switcher.addEventListener('change', (e) => {
+            const newTheme = e.target.value;
+            localStorage.setItem('user-theme', newTheme);
+            document.documentElement.className = newTheme;
+        });
+    }
+</script>
diff --git a/frontend/src/layouts/Layout.astro b/frontend/src/layouts/Layout.astro
index 7c418c1..458db84 100644
--- a/frontend/src/layouts/Layout.astro
+++ b/frontend/src/layouts/Layout.astro
@@ -1,5 +1,6 @@
 ---
 import '../styles/global.css';
+import ThemeSwitcher from '../components/ThemeSwitcher.astro';
 
 interface Props {
 	title: string;
@@ -45,7 +46,7 @@ try {
 	</head>
 	<body class="bg-base text-text selection:bg-surface2 selection:text-text">
         <!-- Dynamic Mesh Gradient Background -->
-        <div class="fixed inset-0 z-[-1] overflow-hidden bg-base">
+        <div class="fixed inset-0 z-[-1] overflow-hidden bg-base text-text">
             <div class="absolute top-[-10%] left-[-10%] w-[60%] h-[50%] rounded-full bg-mauve/15 blur-[120px] opacity-70 animate-pulse" style="animation-duration: 10s;"></div>
             <div class="absolute bottom-[-10%] right-[-10%] w-[60%] h-[60%] rounded-full bg-blue/15 blur-[120px] opacity-60 animate-pulse" style="animation-duration: 15s;"></div>
             <div class="absolute top-[30%] right-[10%] w-[40%] h-[40%] rounded-full bg-teal/10 blur-[100px] opacity-50 animate-pulse" style="animation-duration: 12s;"></div>
@@ -62,13 +63,7 @@ try {
                 <div class="flex gap-3 md:gap-4 items-center text-sm md:text-base w-full md:w-auto justify-center md:justify-end">
                     <a href="/" class="text-subtext0 hover:text-text transition-colors">Home</a>
                     <a href="/admin" class="text-subtext0 hover:text-mauve transition-colors">Admin</a>
-                    <select id="user-theme-switcher" class="bg-surface0/50 text-text border border-surface1 rounded px-2 py-1 text-xs focus:outline-none focus:border-mauve transition-colors cursor-pointer">
-                        <option value="mocha">Mocha</option>
-                        <option value="macchiato">Macchiato</option>
-                        <option value="frappe">Frappe</option>
-                        <option value="latte">Latte</option>
-                        <option value="scaled-and-icy">Scaled and Icy</option>
-                    </select>
+                    <ThemeSwitcher defaultTheme={siteConfig.theme} />
                 </div>
             </header>
         </nav>
@@ -83,21 +78,5 @@ try {
                 &copy; {new Date().getFullYear()} {siteConfig.title}
             </div>
         </footer>
-
-        <script is:inline define:vars={{ defaultTheme: siteConfig.theme }}>
-            document.addEventListener('DOMContentLoaded', () => {
-                const switcher = document.getElementById('user-theme-switcher');
-                if (switcher) {
-                    const savedTheme = localStorage.getItem('user-theme') || defaultTheme;
-                    switcher.value = savedTheme;
-                    
-                    switcher.addEventListener('change', (e) => {
-                        const newTheme = e.target.value;
-                        localStorage.setItem('user-theme', newTheme);
-                        document.documentElement.className = newTheme;
-                    });
-                }
-            });
-        </script>
 	</body>
 </html>
diff --git a/frontend/src/pages/admin/editor.astro b/frontend/src/pages/admin/editor.astro
index e38254d..5c78e8d 100644
--- a/frontend/src/pages/admin/editor.astro
+++ b/frontend/src/pages/admin/editor.astro
@@ -3,7 +3,7 @@ import AdminLayout from '../../layouts/AdminLayout.astro';
 ---
 
 <AdminLayout title="Write Post">
-    <p slot="header-subtitle" id="post-status" class="text-subtext1 mt-2 text-sm md:text-base">Create/Edit post.</p>
+    <p slot="header-subtitle" id="post-status" class="mt-2 text-sm md:text-base" style="color: var(--text) !important;">Create/Edit post.</p>
 
     <div slot="header-actions" class="flex gap-4 w-full">
         <button id="delete-btn" class="hidden text-red hover:bg-red/10 px-6 py-3 rounded-lg transition-colors font-bold border border-red/20 w-full md:w-auto">
diff --git a/frontend/src/styles/global.css b/frontend/src/styles/global.css
index bd74ec7..81e9282 100644
--- a/frontend/src/styles/global.css
+++ b/frontend/src/styles/global.css
@@ -1,5 +1,10 @@
 @import "tailwindcss";
 
+/* 
+ * NARLBLOG PROFESSIONAL THEME ENGINE
+ * All UI components are automatically linked to these tokens.
+ */
+
 @theme {
   --color-crust: var(--crust);
   --color-mantle: var(--mantle);
@@ -65,11 +70,12 @@
   --flamingo: #eebebe; --rosewater: #f2d5cf;
 }
 
+/* Highly optimized light mode colors */
 .latte {
   --crust: #e6e9ef; --mantle: #dce0e8; --base: #eff1f5;
   --surface0: #ccd0da; --surface1: #bcc0cc; --surface2: #acb0be;
   --overlay0: #9ca0b0; --overlay1: #8c8fa1; --overlay2: #7c7f93;
-  --text: #4c4f69; --subtext0: #5c5f77; --subtext1: #6c6f85;
+  --text: #1e1e2e; --subtext0: #4c4f69; --subtext1: #5c5f77;
   --blue: #1e66f5; --lavender: #7287fd; --sapphire: #209fb5;
   --sky: #04a5e5; --teal: #179299; --green: #40a02b;
   --yellow: #df8e1d; --peach: #fe640b; --maroon: #e64553;
@@ -96,57 +102,18 @@ body {
   transition: background-color 0.3s ease, color 0.3s ease;
 }
 
-/* Dynamic CodeMirror Theme */
-.cm-s-narlblog.CodeMirror {
-  background: var(--crust) !important;
-  color: var(--text) !important;
-  border: 1px solid var(--surface1);
-}
-.cm-s-narlblog .cm-header { color: var(--mauve) !important; font-weight: bold; }
-.cm-s-narlblog .cm-string { color: var(--green) !important; }
-.cm-s-narlblog .cm-link { color: var(--blue) !important; text-decoration: underline; }
-.cm-s-narlblog .cm-url { color: var(--sky) !important; }
-.cm-s-narlblog .cm-comment { color: var(--subtext0) !important; font-style: italic; }
-.cm-s-narlblog .cm-quote { color: var(--peach) !important; }
-.cm-s-narlblog .CodeMirror-cursor { border-left-color: var(--text) !important; }
-.cm-s-narlblog.cm-fat-cursor .CodeMirror-cursor { background: var(--text) !important; }
-.cm-s-narlblog .CodeMirror-selected { background: var(--surface2) !important; }
-.cm-s-narlblog .CodeMirror-line::selection, .cm-s-narlblog .CodeMirror-line > span::selection, .cm-s-narlblog .CodeMirror-line > span > span::selection { background: var(--surface2); }
-.cm-s-narlblog .CodeMirror-line::-moz-selection, .cm-s-narlblog .CodeMirror-line > span::-moz-selection, .cm-s-narlblog .CodeMirror-line > span > span::-moz-selection { background: var(--surface2); }
-
-/* Dynamic Highlight.js Theme */
-.hljs { color: var(--text) !important; background: transparent !important; }
-.hljs-comment, .hljs-quote { color: var(--subtext0) !important; font-style: italic; }
-.hljs-keyword, .hljs-selector-tag, .hljs-subst { color: var(--mauve) !important; font-weight: bold; }
-.hljs-number, .hljs-literal, .hljs-variable, .hljs-template-variable, .hljs-tag .hljs-attr { color: var(--peach) !important; }
-.hljs-string, .hljs-doctag { color: var(--green) !important; }
-.hljs-title, .hljs-section, .hljs-selector-id { color: var(--blue) !important; font-weight: bold; }
-.hljs-type, .hljs-class .hljs-title { color: var(--yellow) !important; font-weight: bold; }
-.hljs-tag, .hljs-name, .hljs-attribute { color: var(--blue) !important; font-weight: normal; }
-.hljs-regexp, .hljs-link { color: var(--sky) !important; }
-.hljs-symbol, .hljs-bullet { color: var(--pink) !important; }
-.hljs-built_in, .hljs-builtin-name { color: var(--red) !important; }
-.hljs-meta { color: var(--overlay1) !important; font-weight: bold; }
-.hljs-deletion { background: var(--maroon); color: var(--crust); }
-.hljs-addition { background: var(--green); color: var(--crust); }
-.hljs-emphasis { font-style: italic; }
-.hljs-strong { font-weight: bold; }
-
-/* Typography styles for Markdown */
+/* Professional Typography */
 .prose { color: var(--text) !important; }
-.prose h1 { @apply text-3xl md:text-4xl font-bold mb-4 md:mb-6 text-mauve; color: var(--mauve) !important; }
-.prose h2 { @apply text-2xl md:text-3xl font-semibold mb-3 md:mb-4 mt-6 md:mt-8 text-lavender; color: var(--lavender) !important; }
-.prose h3 { @apply text-xl md:text-2xl font-medium mb-2 md:mb-3 mt-4 md:mt-6 text-blue; color: var(--blue) !important; }
+.prose h1 { @apply text-3xl md:text-4xl font-bold mb-4 md:mb-6; color: var(--mauve) !important; }
+.prose h2 { @apply text-2xl md:text-3xl font-semibold mb-3 md:mb-4 mt-6 md:mt-8; color: var(--lavender) !important; }
+.prose h3 { @apply text-xl md:text-2xl font-medium mb-2 md:mb-3 mt-4 md:mt-6; color: var(--blue) !important; }
 .prose p { @apply mb-3 md:mb-4 leading-relaxed text-sm md:text-base; color: var(--text) !important; }
-.prose a { @apply text-blue hover:text-sky underline underline-offset-4 decoration-2 decoration-blue/30 hover:decoration-sky transition-colors; color: var(--blue) !important; }
-.prose ul { @apply list-disc list-inside mb-3 md:mb-4 text-sm md:text-base; color: var(--text) !important; }
-.prose ol { @apply list-decimal list-inside mb-3 md:mb-4 text-sm md:text-base; color: var(--text) !important; }
-.prose blockquote { @apply border-l-4 border-surface2 pl-4 italic text-subtext0 my-4 md:my-6 text-sm md:text-base; color: var(--subtext0) !important; }
-.prose pre { @apply bg-crust p-3 md:p-4 rounded-xl overflow-x-auto border border-white/5 my-4 md:my-6 text-xs md:text-sm; background-color: var(--crust) !important; }
-.prose code { @apply bg-surface0 px-1.5 py-0.5 rounded text-xs md:text-sm font-mono text-peach; color: var(--peach) !important; }
+.prose blockquote { @apply border-l-4 border-surface2 pl-4 italic my-4 md:my-6; color: var(--subtext0) !important; }
+.prose pre { @apply p-3 md:p-4 rounded-xl overflow-x-auto border border-white/5 my-4 md:my-6 text-xs md:text-sm; background-color: var(--crust) !important; }
+.prose code { @apply bg-surface0 px-1.5 py-0.5 rounded text-xs md:text-sm font-mono; color: var(--peach) !important; }
 .prose pre code { background-color: transparent !important; padding: 0 !important; border-radius: 0 !important; color: inherit !important; }
-.prose img { @apply max-w-full h-auto rounded-xl shadow-lg border border-white/5 my-6 md:my-8; }
 
+/* Dynamic UI Components */
 .glass {
   background-color: color-mix(in srgb, var(--surface0) 60%, transparent);
   backdrop-filter: blur(12px);
@@ -154,3 +121,18 @@ body {
   box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
   border-radius: 1rem;
 }
+
+.cm-s-narlblog.CodeMirror {
+  background: var(--crust) !important;
+  color: var(--text) !important;
+  border: 1px solid var(--surface1);
+}
+.cm-s-narlblog .cm-header { color: var(--mauve) !important; }
+.cm-s-narlblog .cm-string { color: var(--green) !important; }
+.cm-s-narlblog .cm-keyword { color: var(--mauve) !important; font-weight: bold; }
+.cm-s-narlblog .CodeMirror-cursor { border-left-color: var(--text) !important; }
+
+.hljs { color: var(--text) !important; background: transparent !important; }
+.hljs-keyword, .hljs-selector-tag { color: var(--mauve) !important; font-weight: bold; }
+.hljs-string { color: var(--green) !important; }
+.hljs-comment { color: var(--subtext0) !important; font-style: italic; }