diff --git a/backend/src/handlers/posts.rs b/backend/src/handlers/posts.rs
index 21b226b..fd7870f 100644
--- a/backend/src/handlers/posts.rs
+++ b/backend/src/handlers/posts.rs
@@ -27,7 +27,17 @@ pub async fn create_post(
 
     let file_path = state.data_dir.join("posts").join(format!("{}.md", payload.slug));
     
-    fs::write(&file_path, &payload.content).map_err(|e| {
+    let mut file_content = String::new();
+    if let Some(ref summary) = payload.summary {
+        if !summary.trim().is_empty() {
+            file_content.push_str("---\nsummary: ");
+            file_content.push_str(&summary.replace('\n', " "));
+            file_content.push_str("\n---\n");
+        }
+    }
+    file_content.push_str(&payload.content);
+
+    fs::write(&file_path, &file_content).map_err(|e| {
         error!("Write error for post {}: {}", payload.slug, e);
         AppError::Internal("Write error".to_string(), Some(e.to_string()))
     })?;
@@ -35,6 +45,7 @@ pub async fn create_post(
     info!("Post created/updated: {}", payload.slug);
     Ok(Json(PostDetail {
         slug: payload.slug,
+        summary: payload.summary,
         content: payload.content,
     }))
 }
@@ -74,10 +85,27 @@ pub async fn list_posts(State(state): State<Arc<AppState>>) -> impl IntoResponse
                 if let Some(slug) = path.file_stem().and_then(|s| s.to_str()) {
                     let mut excerpt = String::new();
                     if let Ok(content) = fs::read_to_string(&path) {
-                        let clean_content = content.replace("#", "").replace("\n", " ");
-                        excerpt = clean_content.chars().take(200).collect::<String>();
-                        if clean_content.len() > 200 {
-                            excerpt.push_str("...");
+                        if content.starts_with("---\n") {
+                            let parts: Vec<&str> = content.splitn(3, "---\n").collect();
+                            if parts.len() == 3 {
+                                let frontmatter = parts[1];
+                                for line in frontmatter.lines() {
+                                    if line.starts_with("summary: ") {
+                                        excerpt = line.trim_start_matches("summary: ").to_string();
+                                        break;
+                                    }
+                                }
+                                if excerpt.is_empty() {
+                                    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("..."); }
+                                }
+                            }
+                        } else {
+                            let clean_content = content.replace("#", "").replace("\n", " ");
+                            excerpt = clean_content.chars().take(200).collect::<String>();
+                            if clean_content.len() > 200 { excerpt.push_str("..."); }
                         }
                     }
                     posts.push(PostInfo {
@@ -99,7 +127,26 @@ pub async fn get_post(
     let file_path = state.data_dir.join("posts").join(format!("{}.md", slug));
     
     match fs::read_to_string(&file_path) {
-        Ok(content) => Ok(Json(PostDetail { slug, content })),
+        Ok(raw_content) => {
+            let mut summary = None;
+            let mut content = raw_content.clone();
+
+            if raw_content.starts_with("---\n") {
+                let parts: Vec<&str> = raw_content.splitn(3, "---\n").collect();
+                if parts.len() == 3 {
+                    let frontmatter = parts[1];
+                    for line in frontmatter.lines() {
+                        if line.starts_with("summary: ") {
+                            summary = Some(line.trim_start_matches("summary: ").to_string());
+                            break;
+                        }
+                    }
+                    content = parts[2].to_string();
+                }
+            }
+
+            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/models.rs b/backend/src/models.rs
index 909d386..3730edf 100644
--- a/backend/src/models.rs
+++ b/backend/src/models.rs
@@ -36,12 +36,14 @@ pub struct PostInfo {
 #[derive(Serialize)]
 pub struct PostDetail {
     pub slug: String,
+    pub summary: Option<String>,
     pub content: String,
 }
 
 #[derive(Deserialize)]
 pub struct CreatePostRequest {
     pub slug: String,
+    pub summary: Option<String>,
     pub content: String,
 }
 
diff --git a/frontend/src/layouts/Layout.astro b/frontend/src/layouts/Layout.astro
index 0f85c27..f6274a0 100644
--- a/frontend/src/layouts/Layout.astro
+++ b/frontend/src/layouts/Layout.astro
@@ -30,7 +30,7 @@ try {
 ---
 
 <!doctype html>
-<html lang="en">
+<html lang="en" class={siteConfig.theme}>
 	<head>
 		<meta charset="UTF-8" />
 		<meta name="viewport" content="width=device-width" />
diff --git a/frontend/src/pages/admin/editor.astro b/frontend/src/pages/admin/editor.astro
index ed9cd06..2812589 100644
--- a/frontend/src/pages/admin/editor.astro
+++ b/frontend/src/pages/admin/editor.astro
@@ -35,6 +35,16 @@ import AdminLayout from '../../layouts/AdminLayout.astro';
             />
         </div>
 
+        <div>
+            <label for="summary" class="block text-sm font-medium text-subtext1 mb-2">Custom Summary (Optional)</label>
+            <textarea 
+                id="summary" 
+                rows="2"
+                placeholder="A brief description of this post for the frontpage..."
+                class="w-full bg-crust border border-surface1 rounded-lg px-4 py-3 text-text focus:outline-none focus:border-mauve transition-colors resize-none"
+            ></textarea>
+        </div>
+
         <div class="relative">
             <div class="flex flex-col md:flex-row justify-between items-start md:items-end mb-2 gap-2">
                 <label for="content" class="block text-sm font-medium text-subtext1 italic">Tip: Type '/' to browse your assets</label>
@@ -108,6 +118,7 @@ import AdminLayout from '../../layouts/AdminLayout.astro';
             const token = e.detail.token;
             
             const slugInput = document.getElementById('slug') as HTMLInputElement;
+            const summaryInput = document.getElementById('summary') as HTMLTextAreaElement;
             const contentInput = document.getElementById('content') as HTMLTextAreaElement;
             const fileInput = document.getElementById('file-upload') as HTMLInputElement;
             const saveBtn = document.getElementById('save-btn');
@@ -267,8 +278,8 @@ import AdminLayout from '../../layouts/AdminLayout.astro';
                 }
             });
 
-            fileInput?.addEventListener('change', async (e) => {
-                const file = (e.target as HTMLInputElement).files?.[0];
+            fileInput?.addEventListener('change', async (ev) => {
+                const file = (ev.target as HTMLInputElement).files?.[0];
                 if (!file) return;
 
                 const formData = new FormData();
@@ -289,14 +300,18 @@ import AdminLayout from '../../layouts/AdminLayout.astro';
                         const err = await res.json();
                         showAlert(`Upload failed: ${err.error}`, 'error');
                     }
-                } catch (e) {
+                } catch (err) {
                     showAlert('Network error during upload.', 'error');
                 }
                 fileInput.value = '';
             });
 
             saveBtn?.addEventListener('click', async () => {
-                const payload = { slug: slugInput.value, content: editor.getValue() };
+                const payload = { 
+                    slug: slugInput.value, 
+                    summary: summaryInput.value || null,
+                    content: editor.getValue() 
+                };
                 if (!payload.slug || !payload.content) {
                     showAlert('Slug and content are required.', 'error');
                     return;
@@ -312,7 +327,7 @@ import AdminLayout from '../../layouts/AdminLayout.astro';
                     });
                     if (res.ok) showAlert('Post saved!', 'success');
                     else showAlert('Error saving post.', 'error');
-                } catch (e) {
+                } catch (err) {
                     showAlert('Failed to connect to server.', 'error');
                 }
             });
@@ -326,7 +341,7 @@ import AdminLayout from '../../layouts/AdminLayout.astro';
                         });
                         if (res.ok) window.location.href = '/admin';
                         else showAlert('Error deleting post.', 'error');
-                    } catch (e) {
+                    } catch (err) {
                         showAlert('Connection error.', 'error');
                     }
                 }
@@ -341,6 +356,9 @@ import AdminLayout from '../../layouts/AdminLayout.astro';
                 fetch(`/api/posts/${encodeURIComponent(editSlug)}`)
                     .then(res => res.json())
                     .then(data => { 
+                        if (data.summary) {
+                            summaryInput.value = data.summary;
+                        }
                         if (data.content) {
                             editor.setValue(data.content);
                         }
diff --git a/frontend/src/styles/global.css b/frontend/src/styles/global.css
index 2847489..4fe25e9 100644
--- a/frontend/src/styles/global.css
+++ b/frontend/src/styles/global.css
@@ -79,59 +79,54 @@
 
 body {
   background-color: var(--base);
-  color: var(--text);
+  color: var(--text) !important;
   min-height: 100vh;
   transition: background-color 0.3s ease, color 0.3s ease;
 }
 
 /* Dynamic CodeMirror Theme */
 .cm-s-narlblog.CodeMirror {
-  background: var(--crust);
-  color: var(--text);
+  background: var(--crust) !important;
+  color: var(--text) !important;
   border: 1px solid var(--surface1);
 }
-.cm-s-narlblog .cm-header { color: var(--mauve); font-weight: bold; }
-.cm-s-narlblog .cm-string { color: var(--green); }
-.cm-s-narlblog .cm-link { color: var(--blue); text-decoration: underline; }
-.cm-s-narlblog .cm-url { color: var(--sky); }
-.cm-s-narlblog .cm-comment { color: var(--subtext0); font-style: italic; }
-.cm-s-narlblog .cm-quote { color: var(--peach); }
-.cm-s-narlblog .CodeMirror-cursor { border-left-color: var(--text); }
-.cm-s-narlblog.cm-fat-cursor .CodeMirror-cursor { background: var(--text); }
-.cm-s-narlblog .CodeMirror-selected { background: var(--surface2); }
-.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); }
+.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; }
 
 /* Dynamic Highlight.js Theme */
-.hljs { color: var(--text); background: transparent; }
-.hljs-comment, .hljs-quote { color: var(--subtext0); font-style: italic; }
-.hljs-keyword, .hljs-selector-tag, .hljs-subst { color: var(--mauve); font-weight: bold; }
-.hljs-number, .hljs-literal, .hljs-variable, .hljs-template-variable, .hljs-tag .hljs-attr { color: var(--peach); }
-.hljs-string, .hljs-doctag { color: var(--green); }
-.hljs-title, .hljs-section, .hljs-selector-id { color: var(--blue); font-weight: bold; }
-.hljs-subst { font-weight: normal; }
-.hljs-type, .hljs-class .hljs-title { color: var(--yellow); font-weight: bold; }
-.hljs-tag, .hljs-name, .hljs-attribute { color: var(--blue); font-weight: normal; }
-.hljs-regexp, .hljs-link { color: var(--sky); }
-.hljs-symbol, .hljs-bullet { color: var(--pink); }
-.hljs-built_in, .hljs-builtin-name { color: var(--red); }
-.hljs-meta { color: var(--overlay1); 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; }
+.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; }
 
 /* Typography styles for Markdown */
-.prose h1 { @apply text-3xl md:text-4xl font-bold mb-4 md:mb-6 text-mauve; }
-.prose h2 { @apply text-2xl md:text-3xl font-semibold mb-3 md:mb-4 mt-6 md:mt-8 text-lavender; }
-.prose h3 { @apply text-xl md:text-2xl font-medium mb-2 md:mb-3 mt-4 md:mt-6 text-blue; }
-.prose p { @apply mb-3 md:mb-4 leading-relaxed text-sm md:text-base; }
-.prose a { @apply text-blue hover:text-sky underline underline-offset-4 decoration-2 decoration-blue/30 hover:decoration-sky transition-colors; }
-.prose ul { @apply list-disc list-inside mb-3 md:mb-4 text-sm md:text-base; }
-.prose ol { @apply list-decimal list-inside mb-3 md:mb-4 text-sm md:text-base; }
-.prose blockquote { @apply border-l-4 border-surface2 pl-4 italic text-subtext0 my-4 md:my-6 text-sm md:text-base; }
-.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; }
-.prose code { @apply bg-surface0 px-1.5 py-0.5 rounded text-xs md:text-sm font-mono text-peach; }
+.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 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 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; }
 
 .glass {