diff --git a/Makefile b/Makefile
index 785a2c3..2b25aa4 100644
--- a/Makefile
+++ b/Makefile
@@ -53,16 +53,22 @@ test-e2e-ui: test-data-cleanup build
 	npx playwright test --ui
 
 # Code quality commands
+frontend-format:
+	cd frontend && $(MAKE) format
+
 frontend-format-check:
 	cd frontend && $(MAKE) format-check
 
 lint:
 	golangci-lint run
 
-fmt: frontend-format-check
+format: frontend-format
+	go fmt ./...
+
+check-format: frontend-format-check
 	go fmt ./...
 
-quality: fmt lint test test-e2e
+quality: check-format lint test test-e2e
 
 # Release commands for each platform
 release-darwin-arm64:
diff --git a/db/db.go b/db/db.go
index ffb4629..cc8ebe3 100644
--- a/db/db.go
+++ b/db/db.go
@@ -27,11 +27,11 @@ func New(cfg *config.Config) (*gorm.DB, error) {
 	// Initialize default settings if they don't exist
 	var settings models.Settings
 	if err := db.FirstOrCreate(&settings, models.Settings{
-		Title:        "Captain",
-		Subtitle:     "An AI authored blog engine",
-		ChromaStyle:  "solarized-dark",
-		Theme:        "default",
-		PostsPerPage: 10,
+		Title:            "Captain",
+		Subtitle:         "An AI authored blog engine",
+		ChromaStyle:      "solarized-dark",
+		PostsPerPage:     10,
+		UseLogoAsFavicon: false,
 	}).Error; err != nil {
 		return nil, fmt.Errorf("failed to initialize default settings: %w", err)
 	}
diff --git a/e2e/specs/admin.spec.ts b/e2e/specs/admin.spec.ts
index 7709313..69332bc 100644
--- a/e2e/specs/admin.spec.ts
+++ b/e2e/specs/admin.spec.ts
@@ -112,7 +112,7 @@ test.describe('Admin Panel E2E Tests', () => {
             const pageSlug = 'test-page';
 
             await page.click('text=Pages');
-            await page.click('text=Create New Page');
+            await page.click('text=Create Your First Page');
             await page.locator('input[name="title"]').pressSequentially(pageTitle);
             const slugValue = await page.locator('input[name="slug"]').inputValue();
             expect(slugValue).toBe(pageSlug);
@@ -137,7 +137,7 @@ test.describe('Admin Panel E2E Tests', () => {
             await page.click('text=Menu Items');
 
             // Create custom URL menu item
-            await page.click('text=Create New Menu Item');
+            await page.click('text=Create your first menu item!');
             await page.fill('input[name="label"]', 'Custom Link');
             await page.fill('input[name="url"]', 'https://example.com');
             await page.click('button:has-text("Create Menu Item")');
@@ -181,18 +181,14 @@ test.describe('Admin Panel E2E Tests', () => {
 
             await page.fill('input[name="title"]', 'Updated Title');
             await page.fill('input[name="subtitle"]', 'Updated Subtitle');
-            await page.selectOption('select[name="theme"]', 'dark');
-            await page.fill('input[name="posts_per_page"]', '1');
-
-            const settingsSaveResponse = page.waitForResponse('**/admin/settings');
-            await page.click('button:has-text("Save Settings")');
+            await page.fill('input[name="posts-per-page"]', '1');
 
-            const response = await settingsSaveResponse;
-            await expect(response.status()).toBe(302);
+            await page.click('button:has-text("Save")');
+            await expect(page.locator('button:has-text("Saved")')).toBeVisible();
 
             // Verify post time updated
             await page.goto('/admin/posts');
-            const thirdPost = page.locator('tr').nth(3);
+            const thirdPost = page.locator('tbody tr').nth(2);
             const publishedAt = await thirdPost.locator('td').nth(2).textContent();
             expect(publishedAt).toContain('October 26, 1985 at 11:00 AM');
 
diff --git a/e2e/specs/post-visibility.spec.ts b/e2e/specs/post-visibility.spec.ts
index ad57b1e..9f2230c 100644
--- a/e2e/specs/post-visibility.spec.ts
+++ b/e2e/specs/post-visibility.spec.ts
@@ -37,12 +37,9 @@ test.describe('Post Visibility', () => {
     // Go to settings page
     await page.goto('/admin/settings');
     // Set page per page to 50
-    await page.fill('input[name="posts_per_page"]', '50');
-    const settingsSaveResponse = page.waitForResponse('**/admin/settings');
-    await page.click('button:has-text("Save Settings")');
-
-    const response = await settingsSaveResponse;
-    await expect(response.status()).toBe(302);
+    await page.fill('input[name="posts-per-page"]', '50');
+    await page.click('button:has-text("Save")');
+    await expect(page.locator('button:has-text("Saved")')).toBeVisible();
 
     // Verify posts are visible and properly marked when logged in
     await page.goto('/');
diff --git a/embedded/admin/static/css/admin.css b/embedded/admin/static/css/admin.css
index 8540aee..6b86be6 100644
--- a/embedded/admin/static/css/admin.css
+++ b/embedded/admin/static/css/admin.css
@@ -316,37 +316,6 @@ code, pre {
     min-width: 200px;
 }
 
-.btn {
-    display: inline-block;
-    padding: 0.5rem 1rem;
-    border-radius: 4px;
-    border: none;
-    cursor: pointer;
-    text-decoration: none;
-    font-size: 0.9rem;
-    line-height: 1.5;
-}
-
-.btn-primary {
-    background: var(--admin-accent);
-    color: white;
-}
-
-.btn-edit {
-    background: var(--admin-accent);
-    color: white;
-}
-
-.btn-delete {
-    background: var(--admin-danger);
-    color: white;
-}
-
-.btn-view {
-    background: var(--admin-success);
-    color: white;
-}
-
 .tag {
     display: inline-block;
     padding: 0.2rem 0.5rem;
@@ -489,21 +458,6 @@ label {
     border: 1px solid var(--admin-border);
 }
 
-.btn-submit {
-    background: var(--admin-accent);
-    color: #000;
-    border: none;
-    padding: 0.75rem 1.5rem;
-    border-radius: 4px;
-    cursor: pointer;
-    font-size: 1rem;
-    font-weight: bold;
-}
-
-.btn-submit:hover {
-    opacity: 0.9;
-}
-
 .toggle-switch {
     position: relative;
     display: inline-block;
diff --git a/embedded/admin/static/img/logo.png b/embedded/admin/static/img/logo.png
new file mode 100644
index 0000000..40be35e
Binary files /dev/null and b/embedded/admin/static/img/logo.png differ
diff --git a/embedded/admin/static/js/admin.js b/embedded/admin/static/js/admin.js
index 4e0c5b8..6158e43 100644
--- a/embedded/admin/static/js/admin.js
+++ b/embedded/admin/static/js/admin.js
@@ -76,6 +76,18 @@ function deleteUser(id) {
         });
 }
 
+function togglePassword(id) {
+    const input = document.getElementById(id);
+    const button = input.nextElementSibling;
+    if (input.type === 'password') {
+        input.type = 'text';
+        button.textContent = 'Hide';
+    } else {
+        input.type = 'password';
+        button.textContent = 'Show';
+    }
+}
+
 
 function initializeMenuItemForm() {
     const pageSelect = document.getElementById('page_id');
@@ -322,6 +334,47 @@ function openLogoMediaSelector() {
     });
 }
 
+function initializeDarkModeToggle() {
+    const themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon');
+    const themeToggleLightIcon = document.getElementById('theme-toggle-light-icon');
+    const themeToggleBtn = document.getElementById('theme-toggle');
+
+    // Change the icons inside the button based on previous settings
+    if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+        themeToggleLightIcon.classList.remove('hidden');
+    } else {
+        themeToggleDarkIcon.classList.remove('hidden');
+    }
+
+    themeToggleBtn.addEventListener('click', function() {
+        // toggle icons inside button
+        themeToggleDarkIcon.classList.toggle('hidden');
+        themeToggleLightIcon.classList.toggle('hidden');
+
+        // if set via local storage previously
+        if (localStorage.getItem('color-theme')) {
+            if (localStorage.getItem('color-theme') === 'light') {
+                document.documentElement.classList.add('dark');
+                localStorage.setItem('color-theme', 'dark');
+            } else {
+                document.documentElement.classList.remove('dark');
+                localStorage.setItem('color-theme', 'light');
+            }
+
+        // if NOT set via local storage previously
+        } else {
+            if (document.documentElement.classList.contains('dark')) {
+                document.documentElement.classList.remove('dark');
+                localStorage.setItem('color-theme', 'light');
+            } else {
+                document.documentElement.classList.add('dark');
+                localStorage.setItem('color-theme', 'dark');
+            }
+        }
+        
+    });
+}
+
 (function () {
 
     document.querySelectorAll('[x-dynamic-date]').forEach((element) => {
@@ -367,7 +420,7 @@ function openLogoMediaSelector() {
                 }
             } else {
                 error(json.error);
-                document.querySelector('.editor-container').scrollIntoView()
+                document.querySelector('.app-container').scrollIntoView()
             }
         }
     });
@@ -377,11 +430,12 @@ function openLogoMediaSelector() {
             let method = 'POST';
             let url = '/admin/api/pages';
 
+            done('saving');
+
             if (props.id) {
                 method = 'PUT';
                 url = url + '/' + props.id;
             }
-            done('saving');
 
             const resp = await fetch(url, {
                 method,
@@ -399,11 +453,69 @@ function openLogoMediaSelector() {
                 }
             } else {
                 error(json.error);
-                document.querySelector('.editor-container').scrollIntoView()
+                document.querySelector('.app-container').scrollIntoView()
             }
         }
     });
 
+    Inity.register('settings', Apps.Settings, {
+        onSubmit: async (data, done, error, props) => {
+            let method = 'POST';
+            let url = '/admin/api/settings';
+
+            if (props.id) {
+                method = 'PUT';
+            }
+
+            done('saving');
+
+            const resp = await fetch(url, {
+                method,
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(data),
+            });
+
+            const json = await resp.json();
+
+            if (resp.ok) {
+                done('saved');
+            } else {
+                error(json.error);
+                document.querySelector('.app-container').scrollIntoView()
+            }
+        }, 
+        uploadLogoHandler: async (files, uploadStarted, uploadFinished) => {
+            const data = new FormData();
+            data.append('logo', files[0]);
+            data.append('filename', files[0].name);
+
+            const resp = await fetch('/admin/api/logo', {
+                method: 'POST',
+                body: data,
+            });
+
+            if (resp.ok) {
+                const json = await resp.json();
+                uploadFinished(null, '/media/' + json.logoUrl);
+            } else {
+                uploadFinished(json.error, null);
+            }
+            uploadStarted();
+        },
+        deleteLogoHandler: async () => {
+            const resp = await fetch('/admin/api/logo', {
+                method: 'DELETE',
+            });
+
+            if (!resp.ok) {
+                const json = await resp.json();
+                console.error(json.error);
+            }
+        },
+    });
+
     document.addEventListener("DOMContentLoaded", () => Inity.attach());
 })();
 
@@ -412,4 +524,5 @@ document.addEventListener('DOMContentLoaded', () => {
     initializeMenuItemForm();
     initializeMenuItems();
     initializeMenuToggle();
+    initializeDarkModeToggle();
 });
diff --git a/embedded/admin/static/js/menu.js b/embedded/admin/static/js/menu.js
new file mode 100644
index 0000000..b3541b9
--- /dev/null
+++ b/embedded/admin/static/js/menu.js
@@ -0,0 +1,39 @@
+document.addEventListener('DOMContentLoaded', function() {
+    const menuToggle = document.getElementById('menu-toggle');
+    const sidebar = document.getElementById('sidebar');
+    
+    function toggleMenu() {
+        const isOpen = !sidebar.classList.contains('-translate-x-full');
+        
+        if (isOpen) {
+            // Close menu
+            sidebar.classList.add('-translate-x-full');
+            document.body.classList.remove('overflow-hidden');
+        } else {
+            // Open menu
+            sidebar.classList.remove('-translate-x-full');
+            document.body.classList.add('overflow-hidden');
+        }
+    }
+
+    menuToggle.addEventListener('click', toggleMenu);
+
+    // Handle clicks outside menu on mobile
+    document.addEventListener('click', function(event) {
+        const isMobile = window.innerWidth < 768;
+        const isOpen = !sidebar.classList.contains('-translate-x-full');
+        const clickedOutside = !sidebar.contains(event.target) && !menuToggle.contains(event.target);
+        
+        if (isMobile && isOpen && clickedOutside) {
+            toggleMenu();
+        }
+    });
+
+    // Close menu when window is resized to desktop view
+    window.addEventListener('resize', function() {
+        if (window.innerWidth >= 768) { // md breakpoint
+            sidebar.classList.add('-translate-x-full');
+            document.body.classList.remove('overflow-hidden');
+        }
+    });
+});
diff --git a/embedded/admin/templates/admin_404.tmpl b/embedded/admin/templates/admin_404.tmpl
index 85004b4..d3e6dae 100644
--- a/embedded/admin/templates/admin_404.tmpl
+++ b/embedded/admin/templates/admin_404.tmpl
@@ -4,8 +4,8 @@
     <h1>404 - Page Not Found</h1>
     <p>The page you are looking for does not exist.</p>
     <div class="error-actions">
-        <a href="/admin" class="btn btn-primary">
-            <i class="fas fa-home"></i> Back to Dashboard
+        <a href="/admin" class="btn-primary">
+            ← Back to Dashboard
         </a>
     </div>
 </div>
diff --git a/embedded/admin/templates/admin_500.tmpl b/embedded/admin/templates/admin_500.tmpl
index 0425d05..4a86d8a 100644
--- a/embedded/admin/templates/admin_500.tmpl
+++ b/embedded/admin/templates/admin_500.tmpl
@@ -8,8 +8,8 @@
     </div>
     {{end}}
     <div class="error-actions">
-        <a href="/admin" class="btn btn-primary">
-            <i class="fas fa-home"></i> Back to Dashboard
+        <a href="/admin" class="btn-primary">
+            ← Back to Dashboard
         </a>
     </div>
 </div>
diff --git a/embedded/admin/templates/admin_confirm_delete_media.tmpl b/embedded/admin/templates/admin_confirm_delete_media.tmpl
index 5ea24e2..8a15e51 100644
--- a/embedded/admin/templates/admin_confirm_delete_media.tmpl
+++ b/embedded/admin/templates/admin_confirm_delete_media.tmpl
@@ -1,13 +1,11 @@
 {{ template "admin_header" . }}
-<div class="admin-page">
-    <h1>Confirm Delete Media</h1>
-    <div class="confirm-delete">
-        <p>Are you sure you want to delete "{{.media.Name}}"?</p>
-        <p>This action cannot be undone.</p>
-        <div class="actions">
-            <button onclick="deleteMedia({{.media.ID}})" class="btn btn-delete">Delete</button>
-            <a href="/admin/media" class="btn">Cancel</a>
-        </div>
+<h1 class="title">Confirm Delete Media</h1>
+<div class="confirm-delete">
+    <h3>Are you sure you want to delete "{{.media.Name}}"?</h3>
+    <p>This action cannot be undone.</p>
+    <div class="actions">
+        <button onclick="deleteMedia({{.media.ID}})" class="btn-danger">Delete</button>
+        <a href="/admin/media" class="btn-secondary">Cancel</a>
     </div>
 </div>
 {{ template "admin_footer" . }}
diff --git a/embedded/admin/templates/admin_confirm_delete_menu_item.tmpl b/embedded/admin/templates/admin_confirm_delete_menu_item.tmpl
index 0c18945..f4273dd 100644
--- a/embedded/admin/templates/admin_confirm_delete_menu_item.tmpl
+++ b/embedded/admin/templates/admin_confirm_delete_menu_item.tmpl
@@ -1,13 +1,11 @@
 {{ template "admin_header" . }}
-<div class="admin-page">
-    <h1>Confirm Delete Menu Item</h1>
-    <div class="confirm-delete">
-        <p>Are you sure you want to delete the menu item "{{.menuItem.Label}}"?</p>
-        <p>This action cannot be undone.</p>
-        <div class="actions">
-            <button onclick="deleteMenuItem({{.menuItem.ID}})" class="btn btn-delete">Delete</button>
-            <a href="/admin/menus" class="btn">Cancel</a>
-        </div>
+<h1 class="title">Confirm Delete Menu Item</h1>
+<div class="confirm-delete">
+    <h3>Are you sure you want to delete the menu item "{{.menuItem.Label}}"?</h3>
+    <p>This action cannot be undone.</p>
+    <div class="actions">
+        <button onclick="deleteMenuItem({{.menuItem.ID}})" class="btn-danger">Delete</button>
+        <a href="/admin/menus" class="btn-secondary">Cancel</a>
     </div>
 </div>
 {{ template "admin_footer" . }}
\ No newline at end of file
diff --git a/embedded/admin/templates/admin_confirm_delete_page.tmpl b/embedded/admin/templates/admin_confirm_delete_page.tmpl
index b7cd600..5a91bae 100644
--- a/embedded/admin/templates/admin_confirm_delete_page.tmpl
+++ b/embedded/admin/templates/admin_confirm_delete_page.tmpl
@@ -1,13 +1,11 @@
 {{ template "admin_header" . }}
-<div class="admin-page">
-    <h1>Confirm Delete Page</h1>
-    <div class="confirm-delete">
-        <p>Are you sure you want to delete the page "{{.page.Title}}"?</p>
-        <p>This action cannot be undone.</p>
-        <div class="actions">
-            <button onclick="deletePage({{.page.ID}})" class="btn btn-delete">Delete</button>
-            <a href="/admin/pages" class="btn">Cancel</a>
-        </div>
+<h1 class="title">Confirm Delete Page</h1>
+<div class="confirm-delete">
+    <h3>Are you sure you want to delete the page "{{.page.Title}}"?</h3>
+    <p>This action cannot be undone.</p>
+    <div class="actions">
+        <button onclick="deletePage({{.page.ID}})" class="btn-danger">Delete</button>
+        <a href="/admin/pages" class="btn-secondary">Cancel</a>
     </div>
 </div>
 {{ template "admin_footer" . }}
\ No newline at end of file
diff --git a/embedded/admin/templates/admin_confirm_delete_post.tmpl b/embedded/admin/templates/admin_confirm_delete_post.tmpl
index 39b2fcf..41a835c 100644
--- a/embedded/admin/templates/admin_confirm_delete_post.tmpl
+++ b/embedded/admin/templates/admin_confirm_delete_post.tmpl
@@ -1,13 +1,11 @@
 {{ template "admin_header" . }}
-<div class="admin-page">
-    <h1>Confirm Delete Post</h1>
-    <div class="confirm-delete">
-        <p>Are you sure you want to delete the post "{{.post.Title}}"?</p>
-        <p>This action cannot be undone.</p>
-        <div class="actions">
-            <button onclick="deletePost({{.post.ID}})" class="btn btn-delete">Delete</button>
-            <a href="/admin/posts" class="btn">Cancel</a>
-        </div>
+<h1 class="title">Confirm Post Deletion</h1>
+<div class="confirm-delete">
+    <h3>Are you sure you want to delete the post "{{.post.Title}}"?</h3>
+    <p>This action cannot be undone.</p>
+    <div class="actions">
+        <button onclick="deletePost({{.post.ID}})" class="btn-danger">Delete</button>
+        <a href="/admin/posts" class="btn-secondary">Cancel</a>
     </div>
 </div>
 {{ template "admin_footer" . }}
\ No newline at end of file
diff --git a/embedded/admin/templates/admin_confirm_delete_tag.tmpl b/embedded/admin/templates/admin_confirm_delete_tag.tmpl
index a55ecd3..c535cf5 100644
--- a/embedded/admin/templates/admin_confirm_delete_tag.tmpl
+++ b/embedded/admin/templates/admin_confirm_delete_tag.tmpl
@@ -1,13 +1,11 @@
 {{ template "admin_header" . }}
-<div class="admin-page">
-    <h1>Confirm Delete Tag</h1>
-    <div class="confirm-delete">
-        <p>Are you sure you want to delete the tag "{{.tag.Name}}"?</p>
-        <p>This action cannot be undone.</p>
-        <div class="actions">
-            <button onclick="deleteTag({{.tag.ID}})" class="btn btn-delete">Delete</button>
-            <a href="/admin/tags" class="btn">Cancel</a>
-        </div>
+<h1 class="title">Confirm Delete Tag</h1>
+<div class="confirm-delete">
+    <h3>Are you sure you want to delete the tag "{{.tag.Name}}"?</h3>
+    <p>This action cannot be undone.</p>
+    <div class="actions">
+        <button onclick="deleteTag({{.tag.ID}})" class="btn-danger">Delete</button>
+        <a href="/admin/tags" class="btn-secondary">Cancel</a>
     </div>
 </div>
 {{ template "admin_footer" . }}
\ No newline at end of file
diff --git a/embedded/admin/templates/admin_confirm_delete_user.tmpl b/embedded/admin/templates/admin_confirm_delete_user.tmpl
index 949da14..b3e55fe 100644
--- a/embedded/admin/templates/admin_confirm_delete_user.tmpl
+++ b/embedded/admin/templates/admin_confirm_delete_user.tmpl
@@ -1,48 +1,21 @@
 {{ template "admin_header" . }}
-<div class="admin-page">
-    <div class="page-header">
-        <h1>Delete User</h1>
-        <a href="/admin/users" class="btn">← Back to Users</a>
+<h1 class="title">Delete User</h1>
+<div class="confirm-delete">
+    <h3>Are you sure you want to delete the user "{{.user.FirstName}} {{.user.LastName}}"?</h3>
+    {{if .hasContent}}
+    <div>
+        <span>This user has authored posts. If you delete this user:</span>
+    <ul class="my-2 ml-16 list-disc text-left">
+            <li>Their posts will be preserved</li>
+            <li>Their name will still appear as the author</li>
+            <li>But they will no longer be able to log in or edit content</li>
+        </ul>
     </div>
-
-    {{ if .error }}
-        <div class="error-message">{{ .error }}</div>
-    {{ end }}
-
-    <div class="confirm-delete">
-        <p>Are you sure you want to delete the user "{{.user.FirstName}} {{.user.LastName}}"?</p>
-        {{if .hasContent}}
-        <div class="alert alert-warning">
-            <p>This user has authored posts. If you delete this user:</p>
-            <ul>
-                <li>Their posts will be preserved</li>
-                <li>Their name will still appear as the author</li>
-                <li>But they will no longer be able to log in or edit content</li>
-            </ul>
-        </div>
-        {{end}}
-        <p>This action cannot be undone.</p>
-        <div class="actions">
-            <button onclick="deleteUser({{.user.ID}})" class="btn btn-delete">Delete</button>
-            <a href="/admin/users" class="btn">Cancel</a>
-        </div>
+    {{end}}
+    <p class="my-2">This action cannot be undone.</p>
+    <div class="actions">
+        <button onclick="deleteUser({{.user.ID}})" class="btn-danger">Delete</button>
+        <a href="/admin/users" class="btn-secondary">Cancel</a>
     </div>
 </div>
-
-<script>
-function deleteUser(id) {
-    fetch(`/admin/users/${id}`, {
-        method: 'DELETE',
-        headers: {
-            'Content-Type': 'application/json'
-        }
-    }).then(response => {
-        if (response.ok) {
-            window.location.href = '/admin/users';
-        } else {
-            alert('Failed to delete user');
-        }
-    });
-}
-</script>
 {{ template "admin_footer" . }}
diff --git a/embedded/admin/templates/admin_create_menu_item.tmpl b/embedded/admin/templates/admin_create_menu_item.tmpl
index a177dd9..3da5583 100644
--- a/embedded/admin/templates/admin_create_menu_item.tmpl
+++ b/embedded/admin/templates/admin_create_menu_item.tmpl
@@ -1,53 +1,53 @@
 {{ template "admin_header" . }}
-<div class="admin-page">
-    <div class="page-header">
-        <h1>Create Menu Item</h1>
-        <a href="/admin/menus" class="btn">← Back to Menu Items</a>
+<div class="mb-8">
+    <h1 class="title">Create Menu Item</h1>
+    <div class="header-actions">
+        <a href="/admin/menus" class="btn-secondary">← Back to Menu Items</a>
     </div>
+</div>
 
-    {{ if .error }}
-        <div class="error-message">{{ .error }}</div>
-    {{ end }}
+{{ if .error }}
+    <div class="error-message">{{ .error }}</div>
+{{ end }}
 
-    <div class="editor-container">
-        <form id="create-menu-item-form" method="POST" action="/admin/menus/create">
-            <div class="form-group">
-                <label for="label">Label</label>
-                <input type="text" 
-                    id="label" 
-                    name="label" 
-                    class="form-control" 
-                    required 
-                    placeholder="Enter menu item label">
-                <small class="help-text">The text that will appear in the menu</small>
-            </div>
+<div class="editor-container">
+    <form id="create-menu-item-form" method="POST" action="/admin/menus/create">
+        <div class="form-group">
+            <label for="label">Label</label>
+            <input type="text" 
+                id="label" 
+                name="label" 
+                class="form-control" 
+                required 
+                placeholder="Enter menu item label">
+            <small class="help-text">The text that will appear in the menu</small>
+        </div>
 
-            <div class="form-group">
-                <label for="url">URL</label>
-                <input type="text" 
-                    id="url" 
-                    name="url" 
-                    class="form-control" 
-                    placeholder="Enter custom URL">
-                <small class="help-text">Enter a custom URL or select a page below</small>
-            </div>
+        <div class="form-group">
+            <label for="url">URL</label>
+            <input type="text" 
+                id="url" 
+                name="url" 
+                class="form-control" 
+                placeholder="Enter custom URL">
+            <small class="help-text">Enter a custom URL or select a page below</small>
+        </div>
 
-            <div class="form-group">
-                <label for="page_id">Link to Page</label>
-                <select id="page_id" name="page_id" class="form-control">
-                    <option value="">Select a page...</option>
-                    {{range .pages}}
-                    <option value="{{.ID}}" data-slug="{{.Slug}}">{{.Title}}</option>
-                    {{end}}
-                </select>
-                <small class="help-text">Optional: Select a page to automatically set its URL</small>
-            </div>
+        <div class="form-group">
+            <label for="page_id">Link to Page</label>
+            <select id="page_id" name="page_id" class="form-control">
+                <option value="">Select a page...</option>
+                {{range .pages}}
+                <option value="{{.ID}}" data-slug="{{.Slug}}">{{.Title}}</option>
+                {{end}}
+            </select>
+            <small class="help-text">Optional: Select a page to automatically set its URL</small>
+        </div>
 
-            <div class="form-actions">
-                <button type="submit" class="btn btn-primary">Create Menu Item</button>
-                <a href="/admin/menus" class="btn">Cancel</a>
-            </div>
-        </form>
-    </div>
+        <div class="form-actions">
+            <button type="submit" class="btn-primary">Create Menu Item</button>
+            <a href="/admin/menus" class="btn-secondary">Cancel</a>
+        </div>
+    </form>
 </div>
 {{ template "admin_footer" . }}
diff --git a/embedded/admin/templates/admin_create_page.tmpl b/embedded/admin/templates/admin_create_page.tmpl
index 573c2ec..d72f4c8 100644
--- a/embedded/admin/templates/admin_create_page.tmpl
+++ b/embedded/admin/templates/admin_create_page.tmpl
@@ -1,18 +1,13 @@
 {{ template "admin_header" . }}
 {{ template "media_selector" . }}
-<div class="admin-page">
-    <div class="page-header">
-        <h1 class="text-4xl text-bold mb-4">Create New Page</h1>
-        <a href="/admin/pages" class="btn">← Back to Pages</a>
-    </div>
 
-    {{ if .error }}
-        <div class="error-message">{{ .error }}</div>
-    {{ end }}
+<div class="mb-8">
+    <h1 class="title">Create New Page</h1>
+    <a href="/admin/pages" class="btn-secondary">← Back to Pages</a>
+</div>
 
-    <div class="editor-container">
-        <div x-inity="pages"></div>
-    </div>
+<div class="page-container">
+    <div x-inity="pages"></div>
 </div>
 
 {{ template "admin_footer" . }}
\ No newline at end of file
diff --git a/embedded/admin/templates/admin_create_post.tmpl b/embedded/admin/templates/admin_create_post.tmpl
index cc897fd..1fcf4b1 100644
--- a/embedded/admin/templates/admin_create_post.tmpl
+++ b/embedded/admin/templates/admin_create_post.tmpl
@@ -1,17 +1,11 @@
 {{ template "admin_header" . }}
 {{ template "media_selector" . }}
-<div class="admin-page">
-    <div class="page-header">
-        <h1 class="text-4xl text-bold mb-4">Create New Post</h1>
-        <a href="/admin/posts" class="btn">← Back to Posts</a>
-    </div>
-
-    {{ if .error }}
-        <div class="error-message">{{ .error }}</div>
-    {{ end }}
+<div class="mb-8">
+    <h1 class="title">Create New Post</h1>
+    <a href="/admin/posts" class="btn-secondary">← Back to Posts</a>
+</div>
 
-    <div class="editor-container">
-          <div x-inity="posts"></div>
-    </div>
+<div class="app-container">
+        <div x-inity="posts"></div>
 </div>
 {{ template "admin_footer" . }}
diff --git a/embedded/admin/templates/admin_create_tag.tmpl b/embedded/admin/templates/admin_create_tag.tmpl
index 0210511..36b933c 100644
--- a/embedded/admin/templates/admin_create_tag.tmpl
+++ b/embedded/admin/templates/admin_create_tag.tmpl
@@ -1,29 +1,27 @@
 {{ template "admin_header" . }}
-<div class="admin-page">
-    <div class="page-header">
-        <h1>Create New Tag</h1>
-        <a href="/admin/tags" class="btn">← Back to Tags</a>
-    </div>
+<div class="mb-8">
+    <h1 class="title">Create New Tag</h1>
+    <a href="/admin/tags" class="btn-secondary">← Back to Tags</a>
+</div>
 
-    {{ if .error }}
-        <div class="error-message">{{ .error }}</div>
-    {{ end }}
+{{ if .error }}
+    <div class="error-message">{{ .error }}</div>
+{{ end }}
 
-    <div class="editor-container">
-        <form method="POST" action="/admin/tags/create" class="form">
-            <div class="form-group">
-                <label for="name">Tag Name</label>
-                <input type="text" 
-                       id="name" 
-                       name="name" 
-                       class="form-control" 
-                       required 
-                       placeholder="Enter tag name">
-            </div>
-            <div class="form-group">
-                <button type="submit" class="btn btn-primary">Create Tag</button>
-            </div>
-        </form>
-    </div>
+<div class="editor-container">
+    <form method="POST" action="/admin/tags/create" class="form">
+        <div class="form-group">
+            <label for="name">Tag Name</label>
+            <input type="text" 
+                    id="name" 
+                    name="name" 
+                    class="form-control" 
+                    required 
+                    placeholder="Enter tag name">
+        </div>
+        <div class="form-group">
+            <button type="submit" class="btn-primary">Create Tag</button>
+        </div>
+    </form>
 </div>
 {{ template "admin_footer" . }}
\ No newline at end of file
diff --git a/embedded/admin/templates/admin_create_user.tmpl b/embedded/admin/templates/admin_create_user.tmpl
index 3e64246..84b5c45 100644
--- a/embedded/admin/templates/admin_create_user.tmpl
+++ b/embedded/admin/templates/admin_create_user.tmpl
@@ -1,54 +1,38 @@
 {{ template "admin_header" . }}
-<div class="admin-page">
-    <div class="page-header">
-        <h1>Create New User</h1>
-        <a href="/admin/users" class="btn">← Back to Users</a>
-    </div>
+<div class="mb-8">
+    <h1 class="title">Create User</h1>
+    <a href="/admin/users" class="btn-secondary">← Back to Users</a>
+</div>
 
-    {{ if .error }}
-        <div class="error-message">{{ .error }}</div>
-    {{ end }}
+{{ if .error }}
+    <div class="error-message">{{ .error }}</div>
+{{ end }}
 
-    <div class="editor-container">
-        <form method="POST" action="/admin/users/create" class="form">
-            <div class="form-group">
-                <label for="firstName">First Name</label>
-                <input type="text" id="firstName" name="firstName" required class="form-control">
-            </div>
-            <div class="form-group">
-                <label for="lastName">Last Name</label>
-                <input type="text" id="lastName" name="lastName" required class="form-control">
-            </div>
-            <div class="form-group">
-                <label for="email">Email</label>
-                <input type="email" id="email" name="email" required class="form-control">
+<div class="editor-container">
+    <form method="POST" action="/admin/users/create" class="form">
+        <div class="form-group">
+            <label for="firstName">First Name</label>
+            <input type="text" id="firstName" name="firstName" required class="form-control">
+        </div>
+        <div class="form-group">
+            <label for="lastName">Last Name</label>
+            <input type="text" id="lastName" name="lastName" required class="form-control">
+        </div>
+        <div class="form-group">
+            <label for="email">Email</label>
+            <input type="email" id="email" name="email" required class="form-control">
+        </div>
+        <div class="form-group">
+            <label for="password">Password</label>
+            <div class="password-input-group">
+                <input type="password" id="password" name="password" required class="form-control mb-2">
+                <button type="button" class="btn-secondary" onclick="togglePassword('password')">Show</button>
             </div>
-            <div class="form-group">
-                <label for="password">Password</label>
-                <div class="password-input-group">
-                    <input type="password" id="password" name="password" required class="form-control">
-                    <button type="button" class="btn btn-secondary" onclick="togglePassword('password')">Show</button>
-                </div>
-            </div>
-            <div class="form-actions">
-                <button type="submit" class="btn btn-primary">Create User</button>
-                <a href="/admin/users" class="btn">Cancel</a>
-            </div>
-        </form>
-    </div>
+        </div>
+        <div class="form-actions">
+            <button type="submit" class="btn-primary">Create User</button>
+            <a href="/admin/users" class="btn-secondary">Cancel</a>
+        </div>
+    </form>
 </div>
-
-<script>
-function togglePassword(id) {
-    const input = document.getElementById(id);
-    const button = input.nextElementSibling;
-    if (input.type === 'password') {
-        input.type = 'text';
-        button.textContent = 'Hide';
-    } else {
-        input.type = 'password';
-        button.textContent = 'Show';
-    }
-}
-</script>
 {{ template "admin_footer" . }}
diff --git a/embedded/admin/templates/admin_delete_menu_item.tmpl b/embedded/admin/templates/admin_delete_menu_item.tmpl
index 88d1358..7a73ccc 100644
--- a/embedded/admin/templates/admin_delete_menu_item.tmpl
+++ b/embedded/admin/templates/admin_delete_menu_item.tmpl
@@ -1,20 +1,16 @@
 {{ template "admin_header" . }}
-<div class="admin-page">
-    <div class="page-header">
-        <h1>Delete Menu Item</h1>
-        <a href="/admin/menus" class="btn">← Back to Menu Items</a>
-    </div>
+<h1 class="title">Delete Menu Item</h1>
+<a href="/admin/menus" class="btn-secondary">← Back to Menu Items</a>
 
-    <div class="confirmation-container">
-        <p class="warning-text">Are you sure you want to delete the menu item "{{.item.Label}}"?</p>
-        <p>This action cannot be undone.</p>
+<div class="confirmation-container">
+    <p class="warning-text">Are you sure you want to delete the menu item "{{.item.Label}}"?</p>
+    <p>This action cannot be undone.</p>
 
-        <form method="POST" action="/admin/menus/{{.item.ID}}/delete" class="form">
-            <div class="form-actions">
-                <button type="submit" class="btn btn-danger">Delete Menu Item</button>
-                <a href="/admin/menus" class="btn">Cancel</a>
-            </div>
-        </form>
-    </div>
+    <form method="POST" action="/admin/menus/{{.item.ID}}/delete" class="form">
+        <div class="form-actions">
+            <button type="submit" class="btn-danger">Delete Menu Item</button>
+            <a href="/admin/menus" class="btn-secondary">Cancel</a>
+        </div>
+    </form>
 </div>
 {{ template "admin_footer" . }}
diff --git a/embedded/admin/templates/admin_edit_menu_item.tmpl b/embedded/admin/templates/admin_edit_menu_item.tmpl
index 5d67dd6..255ff43 100644
--- a/embedded/admin/templates/admin_edit_menu_item.tmpl
+++ b/embedded/admin/templates/admin_edit_menu_item.tmpl
@@ -1,14 +1,14 @@
 {{ template "admin_header" . }}
-<div class="admin-page">
-    <div class="page-header">
-        <h1>Edit Menu Item</h1>
+<div class="p-4">
+    <div class="mb-8">
+        <h1 class="title">Edit Menu Item</h1>
         <div class="header-actions">
-            <a href="/admin/menus" class="btn">← Back to Menu Items</a>
+            <a href="/admin/menus" class="btn-secondary">← Back to Menu Items</a>
         </div>
     </div>
 
     {{if .error}}
-    <div class="error-message">{{.error}}</div>
+        <div class="error-message">{{.error}}</div>
     {{end}}
 
     <div class="editor-container">
@@ -48,8 +48,8 @@
             </div>
 
             <div class="form-actions">
-                <button type="submit" class="btn btn-primary">Update Menu Item</button>
-                <a href="/admin/menus" class="btn">Cancel</a>
+                <button type="submit" class="btn-primary">Update Menu Item</button>
+                <a href="/admin/menus" class="btn-secondary">Cancel</a>
             </div>
         </form>
     </div>
diff --git a/embedded/admin/templates/admin_edit_page.tmpl b/embedded/admin/templates/admin_edit_page.tmpl
index 358d06b..bb2b9e5 100644
--- a/embedded/admin/templates/admin_edit_page.tmpl
+++ b/embedded/admin/templates/admin_edit_page.tmpl
@@ -1,21 +1,22 @@
 {{ template "admin_header" . }}
 {{ template "media_selector" . }}
-<div class="admin-page">
-    <div class="page-header">
-        <h1 class="text-4xl text-bold mb-4">Edit Page</h1>
-        <div class="header-actions">
-            <a href="/admin/pages" class="btn">← Back to Pages</a>
-            <a href="/pages/{{.page.Slug}}" class="btn" target="_blank">View Page</a>
+<div class="p-4">
+    <div class="mb-8">
+        <h1 class="title">Edit Page</h1>
+        <div>
+            <a href="/admin/pages" class="btn-secondary">← Back to Pages</a>
+            <a href="/pages/{{.page.Slug}}" class="btn-secondary" target="_blank">
+                View Page
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" />
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
+                </svg>
+            </a>
         </div>
     </div>
 
-    {{ if .error }}
-    <div class="error-message">{{ .error }}</div>
-    {{ end }}
-
-    <div class="editor-container">
-        <div x-inity="pages" x-props='{{ .page.ToJSON }}'></div>
+    <div class="app-container">
+        <div x-inity="pages">{{ .page.ToJSON }}</div>
     </div>
 </div>
-
 {{ template "admin_footer" . }}
\ No newline at end of file
diff --git a/embedded/admin/templates/admin_edit_post.tmpl b/embedded/admin/templates/admin_edit_post.tmpl
index 03d4bb4..e6e4012 100644
--- a/embedded/admin/templates/admin_edit_post.tmpl
+++ b/embedded/admin/templates/admin_edit_post.tmpl
@@ -1,20 +1,22 @@
 {{ template "admin_header" . }}
 {{ template "media_selector" . }}
-<div class="admin-page">
-    <div class="page-header">
-        <h1 class="text-4xl text-bold mb-4">Edit Post</h1>
-        <div class="header-actions">
-            <a href="/admin/posts" class="btn">← Back to Posts</a>
-            <a href="/posts/{{.post.Slug}}" class="btn" target="_blank">View Post</a>
+<div class="p-4">
+    <div class="mb-8">
+        <h1 class="title">Edit Post</h1>
+        <div>
+            <a href="/admin/posts" class="btn-secondary">← Back to Posts</a>
+            <a href="/posts/{{.post.Slug}}" class="btn-secondary" target="_blank">
+                View Post
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" />
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
+                </svg>
+            </a>
         </div>
     </div>
 
-    {{ if .error }}
-    <div class="error-message">{{ .error }}</div>
-    {{ end }}
-
-    <div class="editor-container">
-        <div x-inity="posts" x-props='{{ .post.ToJSON }}'></div>
+    <div class="app-container">
+        <div x-inity="posts">{{ .post.ToJSON }}</div>
     </div>
 </div>
 {{ template "admin_footer" . }}
\ No newline at end of file
diff --git a/embedded/admin/templates/admin_edit_tag.tmpl b/embedded/admin/templates/admin_edit_tag.tmpl
index 283111e..290b64e 100644
--- a/embedded/admin/templates/admin_edit_tag.tmpl
+++ b/embedded/admin/templates/admin_edit_tag.tmpl
@@ -1,9 +1,9 @@
 {{ template "admin_header" . }}
 
-<div class="admin-page">
-    <div class="page-header">
-        <h1>Edit Tag</h1>
-        <a href="/admin/tags" class="btn">← Back to Tags</a>
+<div class="p-4">
+    <div class="mb-8">
+        <h1 class="title">Edit Tag</h1>
+        <a href="/admin/tags" class="btn-secondary">← Back to Tags</a>
     </div>
 
     {{ if .error }}
@@ -20,7 +20,7 @@
             <input type="text" id="slug" name="slug" class="form-control" value="{{.tag.Slug}}" required>
         </div>
         <div class="form-actions">
-            <button type="submit" class="btn-submit">Update Tag</button> &nbsp;
+            <button type="submit" class="btn-primary">Update Tag</button> &nbsp;
         </div>
     </form>
 </div>
diff --git a/embedded/admin/templates/admin_edit_user.tmpl b/embedded/admin/templates/admin_edit_user.tmpl
index 81a281f..1272729 100644
--- a/embedded/admin/templates/admin_edit_user.tmpl
+++ b/embedded/admin/templates/admin_edit_user.tmpl
@@ -1,43 +1,40 @@
 {{ template "admin_header" . }}
-<div class="admin-page">
-    <div class="page-header">
-        <h1>Edit User</h1>
-        <a href="/admin/users" class="btn">← Back to Users</a>
-    </div>
+<div class="mb-8">
+    <h1 class="title">Edit User</h1>
+    <a href="/admin/users" class="btn-secondary">← Back to Users</a>
+</div>
 
-    {{ if .error }}
-        <div class="error-message">{{ .error }}</div>
-    {{ end }}
+{{ if .error }}
+    <div class="error-message">{{ .error }}</div>
+{{ end }}
 
-    <div class="editor-container">
-        <form method="POST" action="/admin/users/{{.user.ID}}/edit" class="form">
-            <div class="form-group">
-                <label for="firstName">First Name</label>
-                <input type="text" id="firstName" name="firstName" value="{{.user.FirstName}}" required class="form-control">
-            </div>
-            <div class="form-group">
-                <label for="lastName">Last Name</label>
-                <input type="text" id="lastName" name="lastName" value="{{.user.LastName}}" required class="form-control">
-            </div>
-            <div class="form-group">
-                <label for="email">Email</label>
-                <input type="email" id="email" name="email" value="{{.user.Email}}" required class="form-control">
+<div class="editor-container">
+    <form method="POST" action="/admin/users/{{.user.ID}}/edit" class="form">
+        <div class="form-group">
+            <label for="firstName">First Name</label>
+            <input type="text" id="firstName" name="firstName" value="{{.user.FirstName}}" required class="form-control">
+        </div>
+        <div class="form-group">
+            <label for="lastName">Last Name</label>
+            <input type="text" id="lastName" name="lastName" value="{{.user.LastName}}" required class="form-control">
+        </div>
+        <div class="form-group">
+            <label for="email">Email</label>
+            <input type="email" id="email" name="email" value="{{.user.Email}}" required class="form-control">
+        </div>
+        <div class="form-group">
+            <label for="password">New Password (leave empty to keep current)</label>
+            <div class="password-input-group">
+                <input type="password" id="password" name="password" class="form-control mb-2">
+                <button type="button" class="btn-secondary" onclick="togglePassword('password')">Show</button>
             </div>
-            <div class="form-group">
-                <label for="password">New Password (leave empty to keep current)</label>
-                <div class="password-input-group">
-                    <input type="password" id="password" name="password" class="form-control">
-                    <button type="button" class="btn btn-secondary" onclick="togglePassword('password')">Show</button>
-                </div>
-            </div>
-            <div class="form-actions">
-                <button type="submit" class="btn btn-primary">Update User</button>
-                <a href="/admin/users" class="btn">Cancel</a>
-            </div>
-        </form>
-    </div>
+        </div>
+        <div class="form-actions">
+            <button type="submit" class="btn-primary">Update User</button>
+            <a href="/admin/users" class="btn-secondary">Cancel</a>
+        </div>
+    </form>
 </div>
-
 <script>
 function togglePassword(id) {
     const input = document.getElementById(id);
diff --git a/embedded/admin/templates/admin_index.tmpl b/embedded/admin/templates/admin_index.tmpl
index 25f6082..7f067ac 100644
--- a/embedded/admin/templates/admin_index.tmpl
+++ b/embedded/admin/templates/admin_index.tmpl
@@ -1,37 +1,88 @@
 {{ template "admin_header" . }}
-<div class="admin-page">
-    <h1>Dashboard</h1>
-    
-    <div class="dashboard-stats">
-        <div class="stat-card">
-            <h3>Posts</h3>
-            <div class="stat-number">{{.postCount}}</div>
-            <a href="/admin/posts" class="btn btn-primary">Manage Posts</a>
+<div class="min-h-96">
+    <h1 class="title">Dashboard</h1>
+
+    <div class="grid grid-cols-1 gap-8 p-4 lg:grid-cols-2 xl:grid-cols-4">
+        <!-- Posts card -->
+        <div class="flex items-center justify-between p-4 bg-white rounded-lg border border-gray-200 hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700">
+            <div>
+                <h6 class="text-xs font-medium leading-none tracking-wider text-gray-500 uppercase dark:text-gray-400">
+                    Posts
+                </h6>
+                <span class="text-xl font-semibold text-gray-900 dark:text-gray-400">{{ .postCount }}</span>
+            </div>
+            <div>
+                <span>
+                    <svg class="w-8 h-8 text-gray-300 dark:text-primary-dark" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" />
+                    </svg>
+                </span>
+            </div>
         </div>
-        
-        <div class="stat-card">
-            <h3>Tags</h3>
-            <div class="stat-number">{{.tagCount}}</div>
-            <a href="/admin/tags" class="btn btn-primary">Manage Tags</a>
+
+        <!-- Pages card -->
+        <div class="flex items-center justify-between p-4 bg-white rounded-lg border border-gray-200 hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700">
+            <div>
+                <h6 class="text-xs font-medium leading-none tracking-wider text-gray-500 uppercase dark:text-gray-400">
+                    Pages
+                </h6>
+                <span class="text-xl font-semibold text-gray-900 dark:text-gray-400">{{ .pageCount }}</span>
+            </div>
+            <div>
+                <span>
+                    <svg class="w-8 h-8 text-gray-300 dark:text-primary-dark" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" />
+                    </svg>
+                </span>
+            </div>
         </div>
-        
-        <div class="stat-card">
-            <h3>Users</h3>
-            <div class="stat-number">{{.userCount}}</div>
-            <a href="/admin/users" class="btn btn-primary">Manage Users</a>
+
+        <!-- Users card -->
+        <div class="flex items-center justify-between p-4 bg-white rounded-lg border border-gray-200 hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700">
+            <div>
+                <h6 class="text-xs font-medium leading-none tracking-wider text-gray-500 uppercase dark:text-gray-400">
+                    Users
+                </h6>
+                <span class="text-xl font-semibold text-gray-900 dark:text-gray-400">{{ .userCount }}</span>
+            </div>
+            <div>
+                <span>
+                    <svg class="w-8 h-8 text-gray-300 dark:text-primary-dark" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"></path>
+                    </svg>
+                </span>
+            </div>
         </div>
-    </div>
 
-    <div class="recent-activity">
-        <h2>Recent Posts</h2>
+        <!-- Tags card -->
+        <div class="flex items-center justify-between p-4 bg-white rounded-lg border border-gray-200 hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700">
+            <div>
+                <h6 class="text-xs font-medium leading-none tracking-wider text-gray-500 uppercase dark:text-gray-400">
+                    Tags
+                </h6>
+                <span class="text-xl font-semibold text-gray-900 dark:text-gray-400">{{ .tagCount }}</span>
+            </div>
+            <div>
+                <span>
+                    <svg class="w-8 h-8 text-gray-300 dark:text-primary-dark" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.568 3H5.25A2.25 2.25 0 0 0 3 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 0 0 5.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 0 0 9.568 3Z" />
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 6h.008v.008H6V6Z" />
+                    </svg>
+                </span>
+            </div>
+        </div>
+    </div>
+    <div class="mt-8">
+        <h2 class="text-2xl mb-4 text-gray-900 dark:text-gray-400">Recent Posts</h2>
         {{if .recentPosts}}
-        <div class="table-container">
-            <table class="admin-table">
+
+        <div class="relative overflow-x-auto rounded-lg">
+            <table class="table">
                 <thead>
                     <tr>
-                        <th>Title</th>
-                        <th>Published</th>
-                        <th>Actions</th>
+                        <th scope="col">Title</th>
+                        <th scope="col">Published</th>
+                        <th scope="col">Actions</th>
                     </tr>
                 </thead>
                 <tbody>
@@ -42,17 +93,21 @@
                             {{.PublishedAt.Format "2006-01-02 15:04"}}
                         </td>
                         <td>
-                            <a href="/admin/posts/{{.ID}}/edit" class="btn btn-edit">Edit</a>
+                            <a href="/admin/posts/{{.ID}}/edit" class="btn-primary">Edit</a>
                         </td>
                     </tr>
                     {{end}}
                 </tbody>
             </table>
-        </div>
         {{else}}
         <div class="empty-state">
-            <p>You haven't created any posts yet. Start your blogging journey by creating your first post!</p>
-            <a href="/admin/posts/create" class="btn btn-primary">Create Your First Post</a>
+            <p>No posts found. Start writing your first blog post!</p>
+            <a href="/admin/posts/create" class="link-primary">
+                Create Your First Post
+                <svg class="w-4 h-4 ms-2 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
+                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
+                </svg>
+            </a>
         </div>
         {{end}}
     </div>
diff --git a/embedded/admin/templates/admin_media_list.tmpl b/embedded/admin/templates/admin_media_list.tmpl
index 2acdf3d..89b086f 100644
--- a/embedded/admin/templates/admin_media_list.tmpl
+++ b/embedded/admin/templates/admin_media_list.tmpl
@@ -1,51 +1,53 @@
 {{ template "admin_header" . }}
 
-<div class="admin-page">
-    <div class="page-header">
-        <h1>Media Library</h1>
-        <div class="actions">
-            <a href="/admin/media/upload" class="btn btn-primary">Upload Media</a>
-        </div>
+<div class="mb-8">
+    <h1 class="title">Media Library</h1>
+    <a href="/admin/media/upload" class="btn-primary">Upload Media</a>
+</div>
+
+{{ if not .media }}
+    <div class="empty-state">
+        <p>No media files found. Upload your first media file to get started.</p>
+        <a href="/admin/media/upload" class="link-primary">
+            Upload Media
+            <svg class="w-4 h-4 ms-2 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
+                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
+            </svg>
+        </a>
     </div>
+{{ else }}
+<div class="media-grid">
+    {{ range .media }}
+    <div class="media-item">
+        {{ if eq (slice .MimeType 0 5) "image" }}
+        <div class="media-preview">
+            <img src="/media/{{ .Path }}" alt="{{ .Name }}">
+        </div>
+        {{ else }}
+        <div class="media-preview file">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" />
+            </svg>
 
-    {{ if not .media }}
-        <div class="empty-state">
-            <i class="fas fa-images"></i>
-            <h2>No Media Files Yet</h2>
-            <p>Upload your first media file to get started.</p>
-            <a href="/admin/media/upload" class="btn btn-primary">Upload Media</a>
         </div>
-    {{ else }}
-    <div class="media-grid">
-        {{ range .media }}
-        <div class="media-item">
-            {{ if eq (slice .MimeType 0 5) "image" }}
-            <div class="media-preview">
-                <img src="/media/{{ .Path }}" alt="{{ .Name }}">
-            </div>
-            {{ else }}
-            <div class="media-preview file">
-                <i class="fas fa-file"></i>
-            </div>
+        {{ end }}
+        <div class="media-info">
+            <h3>{{ .Name }}</h3>
+            <p class="size">{{ .Size | formatSize }}</p>
+            {{ if .Description }}
+            <p class="description">{{ .Description }}</p>
             {{ end }}
-            <div class="media-info">
-                <h3>{{ .Name }}</h3>
-                <p class="size">{{ .Size | formatSize }}</p>
-                {{ if .Description }}
-                <p class="description">{{ .Description }}</p>
-                {{ end }}
-                <div class="actions">
-                    <button onclick="copyMediaTag('{{ .GetMarkdownTag }}')" class="btn btn-small">
-                        Copy Markdown
-                    </button>
-                    <a href="/admin/media/{{ .ID }}/delete" class="btn btn-small btn-delete">Delete</a>
-                </div>
+            <div class="actions">
+                <button onclick="copyMediaTag('{{ .GetMarkdownTag }}')" class="btn-small">
+                    Copy Markdown
+                </button>
+                <a href="/admin/media/{{ .ID }}/delete" class="btn-delete">Delete</a>
             </div>
         </div>
-        {{ end }}
     </div>
     {{ end }}
 </div>
+{{ end }}
 
 <script>
 function copyMediaTag(tag) {
diff --git a/embedded/admin/templates/admin_media_upload.tmpl b/embedded/admin/templates/admin_media_upload.tmpl
index 25c74b5..186c00b 100644
--- a/embedded/admin/templates/admin_media_upload.tmpl
+++ b/embedded/admin/templates/admin_media_upload.tmpl
@@ -1,11 +1,9 @@
 {{ template "admin_header" . }}
 
-<div class="admin-page">
-    <div class="page-header">
-        <h1>Upload Media</h1>
-        <div class="actions">
-            <a href="/admin/media" class="btn">Back to Media Library</a>
-        </div>
+<div class="p-4">
+    <div class="mb-8">
+        <h1 class="title">Upload Media</h1>
+        <a href="/admin/media" class="btn-secondary">← Back to Media Library</a>
     </div>
 
     {{ if .error }}
@@ -18,7 +16,7 @@
         <form action="/admin/media/upload" method="POST" enctype="multipart/form-data">
             <div class="form-group">
                 <label for="file">File</label>
-                <input type="file" id="file" name="file" required accept=".jpg, .jpeg, .png, .gif, .webp, .pdf, .doc, .docx">
+                <input type="file" id="file" name="file" required accept=".jpg, .jpeg, .png, .gif, .webp, .pdf, .doc, .docx" class="btn-secondary">
                 <p>
                     <small class="form-text">Supported formats: images (jpg, png, gif, webp), documents (pdf, doc, docx), and more.</small>
                 </p>
@@ -37,7 +35,7 @@
             </div>
 
             <div class="form-actions">
-                <button type="submit" class="btn btn-primary">Upload</button>
+                <button type="submit" class="btn-primary">Upload</button>
             </div>
         </form>
     </div>
diff --git a/embedded/admin/templates/admin_menu_items.tmpl b/embedded/admin/templates/admin_menu_items.tmpl
index 556c419..a80a38e 100644
--- a/embedded/admin/templates/admin_menu_items.tmpl
+++ b/embedded/admin/templates/admin_menu_items.tmpl
@@ -1,13 +1,22 @@
 {{ template "admin_header" . }}
-<div class="admin-page">
-    <div class="page-header">
-        <h1>Menu Items</h1>
-        <a href="/admin/menus/create" class="btn btn-primary">Create New Menu Item</a>
-    </div>
+<div>
+    <h1 class="title">Menu Items</h1>
+
+
+    {{ if .menuItems }}
+        <div class="mb-8 cursor-pointer">
+            <a href="/admin/menus/create" class="btn-primary">
+                Create New Menu Item
+                <svg class="w-3 h-3 ms-2 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
+                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
+                </svg>
+            </a>
+        </div>
+    {{ end }}
 
     <div class="table-container">
         {{if .menuItems}}
-        <table class="admin-table">
+        <table class="table">
             <thead>
                 <tr>
                     <th>Label</th>
@@ -32,10 +41,10 @@
                     <td>{{.Position}}</td>
                     <td class="actions">
                         <div class="action-buttons">
-                            <a href="/admin/menus/{{.ID}}/edit" class="btn btn-edit">Edit</a>
-                            <a href="/admin/menus/{{.ID}}/delete" class="btn btn-delete">Delete</a>
-                            <button class="btn btn-small move-up" data-id="{{.ID}}" {{if eq .Position 1}}disabled{{end}}>↑</button>
-                            <button class="btn btn-small move-down" data-id="{{.ID}}" {{if eq .Position $.lastPosition}}disabled{{end}}>↓</button>
+                            <a href="/admin/menus/{{.ID}}/edit" class="btn-primary">Edit</a>
+                            <a href="/admin/menus/{{.ID}}/delete" class="btn-danger">Delete</a>
+                            <button class="btn-secondary move-up" data-id="{{.ID}}" {{if eq .Position 1}}disabled{{end}}>↑</button>
+                            <button class="btn-secondary move-down" data-id="{{.ID}}" {{if eq .Position $.lastPosition}}disabled{{end}}>↓</button>
                         </div>
                     </td>
                 </tr>
@@ -44,8 +53,13 @@
         </table>
         {{else}}
         <div class="empty-state">
-            <p>No menu items found. Create your first menu item!</p>
-            <a href="/admin/menus/create" class="btn btn-primary">Create Menu Item</a>
+            <p>No menu items found.</p>
+            <a href="/admin/menus/create" class="link-primary">
+                Create your first menu item!
+                <svg class="w-4 h-4 ms-2 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
+                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
+                </svg>
+            </a>
         </div>
         {{end}}
     </div>
diff --git a/embedded/admin/templates/admin_pages.tmpl b/embedded/admin/templates/admin_pages.tmpl
index 00f51c3..d09a16c 100644
--- a/embedded/admin/templates/admin_pages.tmpl
+++ b/embedded/admin/templates/admin_pages.tmpl
@@ -1,13 +1,21 @@
 {{ template "admin_header" . }}
-<div class="admin-page">
-    <div class="page-header">
-        <h1 class="text-4xl text-bold mb-4">Pages</h1>
-        <a href="/admin/pages/create" class="btn btn-primary">Create New Page</a>
+<div>
+    <h1 class="title">Pages</h1>
+
+    {{ if .pages }}
+    <div class="mb-8 cursor-pointer">
+        <a href="/admin/pages/create" class="btn-primary">
+            Create New Page
+            <svg class="w-3 h-3 ms-2 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
+                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
+            </svg>
+        </a>
     </div>
-    
+    {{ end }}
+
     <div class="table-container">
         {{if .pages}}
-        <table class="admin-table">
+        <table class="table">
             <thead>
                 <tr>
                     <th>Title</th>
@@ -25,9 +33,9 @@
                     <td>{{.ContentType}}</td>
                     <td>{{if .Visible}}Yes{{else}}No{{end}}</td>
                     <td class="actions">
-                        <a href="/admin/pages/{{.ID}}/edit" class="btn btn-edit">Edit</a>
-                        <a href="/admin/pages/{{.ID}}/delete" class="btn btn-delete">Delete</a>
-                        <a href="/pages/{{.Slug}}" class="btn btn-view" target="_blank">View</a>
+                        <a href="/admin/pages/{{.ID}}/edit" class="btn-primary">Edit</a>
+                        <a href="/admin/pages/{{.ID}}/delete" class="btn-danger">Delete</a>
+                        <a href="/pages/{{.Slug}}" class="btn-secondary" target="_blank">View</a>
                     </td>
                 </tr>
                 {{end}}
@@ -36,7 +44,12 @@
         {{else}}
         <div class="empty-state">
             <p>No pages found. Get started by creating your first page!</p>
-            <a href="/admin/pages/create" class="btn btn-primary">Create Page</a>
+            <a href="/admin/pages/create" class="link-primary">
+                Create Your First Page
+                <svg class="w-4 h-4 ms-2 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
+                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
+                </svg>
+            </a>
         </div>
         {{end}}
     </div>
diff --git a/embedded/admin/templates/admin_posts.tmpl b/embedded/admin/templates/admin_posts.tmpl
index 81e466a..f790b2f 100644
--- a/embedded/admin/templates/admin_posts.tmpl
+++ b/embedded/admin/templates/admin_posts.tmpl
@@ -1,52 +1,64 @@
 {{ template "admin_header" . }}
-<div class="admin-page">
-    <div class="page-header">
-        <h1 class="text-4xl text-bold mb-4">Posts</h1>
-        <a href="/admin/posts/create" class="btn btn-primary">Create New Post</a>
-    </div>
+<h1 class="title">Posts</h1>
+
+{{ if .posts }}
+<div class="mb-8 cursor-pointer">
+    <a href="/admin/posts/create" class="btn-primary">
+        Create New Post
+        <svg class="w-3 h-3 ms-2 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
+        </svg>
+    </a>
+</div>
+{{ end }}
 
-    <div class="table-container">
-        {{if .posts}}
-        <table class="admin-table">
-            <thead>
-                <tr>
-                    <th>Title</th>
-                    <th>Author</th>
-                    <th>Published</th>
-                    <th>Visible</th>
-                    <th>Tags</th>
-                    <th>Actions</th>
-                </tr>
-            </thead>
-            <tbody>
-                {{range .posts}}
-                <tr>
-                    <td>{{.Title}}</td>
-                    <td>{{if .Author}}{{.Author.FirstName}} {{.Author.LastName}}{{else}}<em>Deleted User</em>{{end}}</td>
-                    <td x-dynamic-date="{{.PublishedAtUTC}}" x-dynamic-date-timezone="{{.PublishedAtTimeZoneOffset}}">
-                        {{.PublishedAt.Format "2006-01-02 15:04"}}
-                    </td>
-                    <td>{{if .Visible}}Yes{{else}}No{{end}}</td>
-                    <td class="tags">
-                        {{range .Tags}}
+<div class="table-container">
+    {{if .posts}}
+    <table class="table">
+        <thead>
+            <tr>
+                <th scope="col">Title</th>
+                <th scope="col">Author</th>
+                <th scope="col">Published</th>
+                <th scope="col">Visible</th>
+                <th scope="col">Tags</th>
+                <th scope="col">Actions</th>
+            </tr>
+        </thead>
+        <tbody>
+            {{range .posts}}
+            <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
+                <td>{{.Title}}</td>
+                <td>{{if .Author}}{{.Author.FirstName}} {{.Author.LastName}}{{else}}<em>Deleted User</em>{{end}}</td>
+                <td x-dynamic-date="{{.PublishedAtUTC}}" x-dynamic-date-timezone="{{.PublishedAtTimeZoneOffset}}">
+                    {{.PublishedAt.Format "2006-01-02 15:04"}}
+                </td>
+                <td>{{if .Visible}}Yes{{else}}No{{end}}</td>
+                <td>
+                    {{range .Tags}}
                         <span class="tag">{{.Name}}</span>
-                        {{end}}
-                    </td>
-                    <td class="actions">
-                        <a href="/admin/posts/{{.ID}}/edit" class="btn btn-edit">Edit</a>
-                        <a href="/admin/posts/{{.ID}}/delete" class="btn btn-delete">Delete</a>
-                        <a href="/posts/{{.Slug}}" class="btn btn-view" target="_blank">View</a>
-                    </td>
-                </tr>
-                {{end}}
-            </tbody>
-        </table>
-        {{else}}
-        <div class="empty-state">
-            <p>No posts found. Start writing your first blog post!</p>
-            <a href="/admin/posts/create" class="btn btn-primary">Create Post</a>
-        </div>
-        {{end}}
+                    {{end}}
+                </td>
+                <td>
+                    <a href="/admin/posts/{{.ID}}/edit" class="btn-primary">Edit</a>
+                    <a href="/admin/posts/{{.ID}}/delete" class="btn-danger">Delete</a>
+                    <a href="/posts/{{.Slug}}" target="_blank" class="btn-secondary">View</a>
+                </td>
+            </tr>
+            {{end}}
+        </tbody>
+    </table>
+    {{else}}
+    <div class="empty-state">
+        <p>No posts found. Start writing your first blog post!</p>
+        <a href="/admin/posts/create" class="link-primary">
+            Create Your First Post
+            <svg class="w-4 h-4 ms-2 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
+                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
+            </svg>
+        </a>
     </div>
+    {{end}}
 </div>
+
 {{ template "admin_footer" . }}
\ No newline at end of file
diff --git a/embedded/admin/templates/admin_settings.tmpl b/embedded/admin/templates/admin_settings.tmpl
index 8de28b8..074056a 100644
--- a/embedded/admin/templates/admin_settings.tmpl
+++ b/embedded/admin/templates/admin_settings.tmpl
@@ -1,109 +1,11 @@
 {{ template "admin_header" . }}
 {{ template "media_selector" . }}
 
-<div class="admin-page">
-    <div class="page-header">
-        <h1>Site Settings</h1>
-    </div>
 
-    {{ if .errors }}
-    <div class="alert alert-error">
-        {{ range .errors }}
-        <p>{{ . }}</p>
-        {{ end }}
+<div class="app-container">
+    <div x-inity="settings" data-logo-url="{{.logoUrl}}">
+    {{ .settings.ToJSON }}
     </div>
-    {{ end }}
-
-    <form method="POST" action="/admin/settings" class="settings-form">
-        <input type="hidden" name="id" value="{{ .settings.ID }}">
-        
-        <div class="form-group">
-            <label for="title">Site Title</label>
-            <input type="text" id="title" name="title" value="{{ .settings.Title }}" required class="form-control">
-        </div>
-
-        <div class="form-group">
-            <label for="subtitle">Site Subtitle</label>
-            <input type="text" id="subtitle" name="subtitle" value="{{ .settings.Subtitle }}" required class="form-control">
-        </div>
-
-        <div class="form-group">
-            <label for="logo_id">Site Logo</label>
-            <div class="media-selector">
-                <input type="hidden" id="logo_id" name="logo_id" value="{{ if .settings.LogoID }}{{ .settings.LogoID }}{{ end }}">
-                <div class="image-preview">
-                    {{ if .logo }}
-                        <img src="/media/{{ .logo.Path }}" alt="Current logo">
-                    {{ else }}
-                        <span class="no-image">No logo selected</span>
-                    {{ end }}
-                </div>
-                <p class="form-help">
-                    Hint: Size should be at least 300x300, preferrably square. Image format should be JPEG or PNG
-                </p>
-                <button type="button" class="btn btn-secondary" onclick="openLogoMediaSelector()">Select Logo</button>
-            </div>
-        </div>
-
-        <div class="form-group">
-            <label class="checkbox-label">
-                <input type="checkbox" name="use_favicon" {{ if .settings.UseFavicon }}checked{{ end }}>
-                Use logo as favicon (will generate favicon.ico and touch icons)
-            </label>
-        </div>
-
-        <div class="form-group">
-            <label for="theme">Admin Theme</label>
-            <select id="theme" name="theme" class="form-control">
-                <option value="light" {{ if eq .settings.Theme "light" }}selected{{ end }}>Light</option>
-                <option value="dark" {{ if eq .settings.Theme "dark" }}selected{{ end }}>Dark</option>
-            </select>
-        </div>
-
-        <div class="form-group">
-            <label for="chroma_style">Code Highlighting Theme</label>
-            <select id="chroma_style" name="chroma_style" required class="form-control">
-                {{ range .chromaStyles }}
-                    <option value="{{ . }}" {{ if eq . $.settings.ChromaStyle }}selected{{ end }}>{{ . }}</option>
-                {{ end }}
-            </select>
-            <div class="form-help">Theme used for syntax highlighting in code blocks</div>
-        </div>
-
-        <div class="form-group">
-            <label for="posts_per_page">Posts Per Page</label>
-            <input type="number" id="posts_per_page" name="posts_per_page" value="{{ .settings.PostsPerPage }}" min="1" max="50" required class="form-control">
-            <div class="form-help">Number of posts to display per page (1-50)</div>
-        </div>
-
-        <div class="form-actions">
-            <button type="submit" class="btn btn-primary">Save Settings</button>
-        </div>
-    </form>
 </div>
 
-<script>
-function openMediaLibrary(targetField) {
-    window.open('/admin/media?select=true&target=' + targetField, 'media_library', 'width=800,height=600');
-}
-
-window.addEventListener('message', function(event) {
-    if (event.data.type === 'media_selected') {
-        document.getElementById(event.data.target).value = event.data.id;
-        // Optionally refresh the preview
-        if (event.data.url) {
-            const container = document.getElementById(event.data.target).closest('.media-selector');
-            let img = container.querySelector('img');
-            if (!img) {
-                img = document.createElement('img');
-                img.className = 'current-logo';
-                container.insertBefore(img, container.firstChild);
-            }
-            img.src = event.data.url;
-            img.alt = 'Current logo';
-        }
-    }
-});
-</script>
-
 {{ template "admin_footer" . }}
diff --git a/embedded/admin/templates/admin_tag_posts.tmpl b/embedded/admin/templates/admin_tag_posts.tmpl
index 8af459f..f0ce741 100644
--- a/embedded/admin/templates/admin_tag_posts.tmpl
+++ b/embedded/admin/templates/admin_tag_posts.tmpl
@@ -1,12 +1,13 @@
 
 {{ template "admin_header" . }}
-<div class="admin-page">
-    <div class="page-header">
-        <h1>Posts tagged with "{{.tag.Name}}"</h1>
-        <a href="/admin/tags" class="btn">← Back to Tags</a>
+<div class="p-4">
+    <div class="mb-8">
+        <h1 class="title">Posts tagged with "{{.tag.Name}}"</h1>
+        <a href="/admin/tags" class="btn-secondary">← Back to Tags</a>
     </div>
+
     <div class="table-container">
-        <table class="admin-table">
+        <table class="table">
             <thead>
                 <tr>
                     <th>Title</th>
@@ -26,9 +27,9 @@
                     </td>
                     <td>{{if .Visible}}Yes{{else}}No{{end}}</td>
                     <td class="actions">
-                        <a href="/admin/posts/{{.ID}}/edit" class="btn btn-edit">Edit</a>
-                        <a href="/posts/{{.Slug}}" target="_blank" class="btn btn-view">View</a>
-                        <a href="/admin/posts/{{.ID}}/delete" class="btn btn-delete">Delete</a>
+                        <a href="/admin/posts/{{.ID}}/edit" class="btn-primary">Edit</a>
+                        <a href="/admin/posts/{{.ID}}/delete" class="btn-danger">Delete</a>
+                        <a href="/posts/{{.Slug}}" target="_blank" class="btn-secondary">View</a>
                     </td>
                 </tr>
                 {{else}}
diff --git a/embedded/admin/templates/admin_tags.tmpl b/embedded/admin/templates/admin_tags.tmpl
index e8d6e5b..57c66de 100644
--- a/embedded/admin/templates/admin_tags.tmpl
+++ b/embedded/admin/templates/admin_tags.tmpl
@@ -1,17 +1,21 @@
 {{ template "admin_header" . }}
-<div class="admin-page">
-    <div class="page-header">
-        <h1>Tags</h1>
-        <a href="/admin/tags/create" class="btn btn-primary">Create New Tag</a>
-    </div>
-    
-    {{if .error}}
-    <div class="error-message">{{.error}}</div>
-    {{end}}
+<div>
+    <h1 class="title">Tags</h1>
+
+    {{ if .tags }}
+        <div class="mb-8 cursor-pointer">
+            <a href="/admin/tags/create" class="btn-primary">
+                Create New Tag
+                <svg class="w-3 h-3 ms-2 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
+                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
+                </svg>
+            </a>
+        </div>
+    {{ end }}
 
     <div class="table-container">
         {{if .tags}}
-        <table class="admin-table">
+        <table class="table">
             <thead>
                 <tr>
                     <th>Tag Name</th>
@@ -27,9 +31,9 @@
                     <td>{{.Slug}}</td>
                     <td>{{.PostCount}}</td>
                     <td class="actions">
-                        <a href="/admin/tags/{{.ID}}/posts" class="btn btn-view">View Posts</a>
-                        <a href="/admin/tags/{{.ID}}/edit" class="btn btn-primary">Edit</a>
-                        <a href="/admin/tags/{{.ID}}/delete" class="btn btn-delete">Delete</a>
+                        <a href="/admin/tags/{{.ID}}/edit" class="btn-primary">Edit</a>
+                        <a href="/admin/tags/{{.ID}}/delete" class="btn-danger">Delete</a>
+                        <a href="/admin/tags/{{.ID}}/posts" class="btn-secondary">View Posts</a>
                     </td>
                 </tr>
                 {{end}}
@@ -37,8 +41,13 @@
         </table>
         {{else}}
         <div class="empty-state">
-            <p>No tags found. Create tags to organize your posts!</p>
-            <a href="/admin/tags/create" class="btn btn-primary">Create Tag</a>
+            <p>No tags found</p>
+            <a href="/admin/tags/create" class="link-primary">
+                Create your first tag!
+                <svg class="w-4 h-4 ms-2 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
+                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
+                </svg>
+            </a>
         </div>
         {{end}}
     </div>
diff --git a/embedded/admin/templates/admin_users.tmpl b/embedded/admin/templates/admin_users.tmpl
index 7df766e..4720c19 100644
--- a/embedded/admin/templates/admin_users.tmpl
+++ b/embedded/admin/templates/admin_users.tmpl
@@ -1,35 +1,41 @@
 {{ template "admin_header" . }}
-<div class="admin-page">
-    <div class="page-header">
-        <h1>Users</h1>
-        <a href="/admin/users/create" class="btn btn-primary">Create New User</a>
-    </div>
-    <div class="table-container">
-        <table class="admin-table">
-            <thead>
-                <tr>
-                    <th>Name</th>
-                    <th>Email</th>
-                    <th>Created At</th>
-                    <th>Updated At</th>
-                    <th>Actions</th>
-                </tr>
-            </thead>
-            <tbody>
-                {{range .users}}
-                <tr>
-                    <td>{{.FirstName}} {{.LastName}}</td>
-                    <td>{{.Email}}</td>
-                    <td>{{.CreatedAt.Format "2006-01-02 15:04"}}</td>
-                    <td>{{.UpdatedAt.Format "2006-01-02 15:04"}}</td>
-                    <td class="actions">
-                        <a href="/admin/users/{{.ID}}/edit" class="btn btn-edit">Edit</a>
-                        <a href="/admin/users/{{.ID}}/delete" class="btn btn-delete">Delete</a>
-                    </td>
-                </tr>
-                {{end}}
-            </tbody>
-        </table>
-    </div>
+
+<h1 class="title">Users</h1>
+ <div class="mb-8 cursor-pointer">
+    <a href="/admin/users/create" class="btn-primary">
+        Create New User
+        <svg class="w-3 h-3 ms-2 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
+        </svg>
+    </a>
+</div>
+
+
+<div class="table-container">
+    <table class="table">
+        <thead>
+            <tr>
+                <th>Name</th>
+                <th>Email</th>
+                <th>Created At</th>
+                <th>Updated At</th>
+                <th>Actions</th>
+            </tr>
+        </thead>
+        <tbody>
+            {{range .users}}
+            <tr>
+                <td>{{.FirstName}} {{.LastName}}</td>
+                <td>{{.Email}}</td>
+                <td>{{.CreatedAt.Format "2006-01-02 15:04"}}</td>
+                <td>{{.UpdatedAt.Format "2006-01-02 15:04"}}</td>
+                <td class="actions">
+                    <a href="/admin/users/{{.ID}}/edit" class="btn-primary">Edit</a>
+                    <a href="/admin/users/{{.ID}}/delete" class="btn-danger">Delete</a>
+                </td>
+            </tr>
+            {{end}}
+        </tbody>
+    </table>
 </div>
 {{ template "admin_footer" . }}
\ No newline at end of file
diff --git a/embedded/admin/templates/includes/admin_header.tmpl b/embedded/admin/templates/includes/admin_header.tmpl
index cfe6f22..0508a19 100644
--- a/embedded/admin/templates/includes/admin_header.tmpl
+++ b/embedded/admin/templates/includes/admin_header.tmpl
@@ -6,81 +6,113 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{{ if .title }}{{ .title }} - {{ end }}Captain Admin - {{ .settings.Title }}</title>
     {{ if .faviconHTML }}{{ .faviconHTML | raw }}{{ end }}
-    <link rel="stylesheet" href="/admin/static/css/fontawesome.min.css">
-    <link rel="stylesheet" href="/admin/static/css/admin.css">
+    <script>
+      if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+          document.documentElement.classList.add('dark');
+      } else {
+          document.documentElement.classList.remove('dark')
+      }
+    </script>
     <link rel="stylesheet" href="/admin/static/css/app.css">
+    <script src="/admin/static/js/menu.js"></script>
 </head>
-<body>
+<body class="dark:bg-neutral-900">
     {{ template "includes/flash_messages" . }}
-    <button class="menu-toggle" id="menu-toggle">☰</button>
-    <div class="admin-container">
-        <nav class="admin-nav">
-            <div class="logo">
-                <i class="fas fa-tools"></i>
-                Admin Dashboard
-            </div>
-            <ul>
-                <li>
-                    <a href="/admin">
-                        <i class="fas fa-gauge-high"></i>
-                        Dashboard
-                    </a>
-                </li>
-                <li>
-                    <a href="/admin/posts">
-                        <i class="fas fa-newspaper"></i>
-                        Posts
-                    </a>
-                </li>
-                <li>
-                    <a href="/admin/pages">
-                        <i class="fas fa-file-lines"></i>
-                        Pages
-                    </a>
-                </li>
-                <li>
-                    <a href="/admin/menus">
-                        <i class="fas fa-bars"></i>
-                        Menu Items
-                    </a>
-                </li>
-                <li>
-                    <a href="/admin/tags">
-                        <i class="fas fa-tags"></i>
-                        Tags
-                    </a>
-                </li>
-                <li>
-                    <a href="/admin/media">
-                        <i class="fas fa-image"></i>
-                        Media
-                    </a>
-                </li>
-                <li>
-                    <a href="/admin/users">
-                        <i class="fas fa-users"></i>
-                        Users
-                    </a>
-                </li>
-                <li>
-                    <a href="/admin/settings">
-                        <i class="fas fa-tools"></i>
-                        Settings
-                    </a>
-                </li>
-                <li>
-                    <a href="/logout" class="logout">
-                        <i class="fas fa-right-from-bracket"></i>
-                        Logout
-                    </a>
-                </li>
-                <li>
-                    <a href="/" id="back-to-site">
-                        <i class="fas fa-arrow-left"></i>
-                        Go back to public site
-                    </a>
-                </li>
+    <button id="menu-toggle" class="fixed top-4 right-8 z-50 p-2 rounded-lg text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-500 dark:focus:ring-gray-400 lg:hidden">
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+        </svg>
+    </button>
+    <div class="flex h-screen lg:pt-8">
+      <!-- Sidebar -->
+      <div id="sidebar" class="fixed lg:static w-full lg:w-64 h-full lg:h-auto inset-0 lg:inset-auto bg-white dark:bg-slate-800 flex flex-col lg:mx-8 lg:rounded-xl transform -translate-x-full lg:translate-x-0 transition-transform duration-300 ease-in-out z-40">
+        <div class="p-4 flex items-center gap-2">
+          <img src="/admin/static/img/logo.png" alt="Captain Logo"  />
+        </div>
+
+        <!-- Navigation -->
+        <nav class="p-4">
+          <div class="mb-4">
+            <ul class="main-menu">
+              <li>
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M15.59 14.37a6 6 0 0 1-5.84 7.38v-4.8m5.84-2.58a14.98 14.98 0 0 0 6.16-12.12A14.98 14.98 0 0 0 9.631 8.41m5.96 5.96a14.926 14.926 0 0 1-5.841 2.58m-.119-8.54a6 6 0 0 0-7.381 5.84h4.8m2.581-5.84a14.927 14.927 0 0 0-2.58 5.84m2.699 2.7c-.103.021-.207.041-.311.06a15.09 15.09 0 0 1-2.448-2.448 14.9 14.9 0 0 1 .06-.312m-2.24 2.39a4.493 4.493 0 0 0-1.757 4.306 4.493 4.493 0 0 0 4.306-1.758M16.5 9a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z" />
+                </svg>
+                <a href="/admin">Dashboard</a>
+              </li>
+              <li>
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 0 1 .865-.501 48.172 48.172 0 0 0 3.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0 0 12 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018Z" />
+                </svg>
+                <a href="/admin/posts">Posts</a>
+              </li>
+              <li>
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" />
+                </svg>
+                <a href="/admin/pages">Pages</a>
+              </li>
+              <li>
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
+                </svg>
+                <a href="/admin/menus">Menu Items</a>
+              </li>
+              <li>
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M9.568 3H5.25A2.25 2.25 0 0 0 3 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 0 0 5.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 0 0 9.568 3Z" />
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M6 6h.008v.008H6V6Z" />
+                </svg>
+                <a href="/admin/tags">Tags</a>
+              </li>
+              <li>
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z" />
+                </svg>
+                <a href="/admin/media">Media</a>
+              </li>
+              <li>
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197M15 6.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6 3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-13.5 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z" />
+                </svg>
+                <a href="/admin/users">Users</a>
+              </li>
             </ul>
+          </div>
         </nav>
-        <main class="admin-content">
+
+        <!-- Bottom Actions -->
+        <div class="p-4 space-y-2 border-t border-gray-200 dark:border-gray-700 min-h-fit">
+          <button class="flex items-center gap-2 text-gray-700 dark:text-gray-400 px-2 py-1 w-full">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z" />
+              <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
+            </svg>
+            <a href="/admin/settings" class="text-gray-900 dark:text-gray-400 hover:underline">Settings</a>
+          </button>
+          <button class="flex items-center gap-2 text-gray-700 dark:text-gray-400 px-2 py-1 w-full">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" />
+              <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
+            </svg>
+            <a href="/" class="text-gray-900 dark:text-gray-400 hover:underline">Go to public site</a>
+          </button>
+          <button class="flex items-center gap-2 text-red-600 px-2 py-1 w-full">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0 0 13.5 3h-6a2.25 2.25 0 0 0-2.25 2.25v13.5A2.25 2.25 0 0 0 7.5 21h6a2.25 2.25 0 0 0 2.25-2.25V15M12 9l-3 3m0 0 3 3m-3-3h12.75" />
+            </svg>
+            <a href="/logout" class="hover:underline">Logout</a>
+          </button>
+        </div>
+       <div class="p-4">
+        <button id="theme-toggle" type="button" class="flex items-center gap-2 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5">
+          <svg id="theme-toggle-dark-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path></svg>
+          <svg id="theme-toggle-light-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
+        </button>
+       </div>
+      </div>
+
+      <!-- Main Content -->
+      <div id="main-content" class="flex-1 p-4 lg:p-1 transition-all duration-300 ease-in-out">
+         <main class="rounded-xl bg-white dark:bg-slate-800 lg:mx-8 p-4">
 {{end}}
\ No newline at end of file
diff --git a/embedded/admin/templates/includes/flash_messages.tmpl b/embedded/admin/templates/includes/flash_messages.tmpl
index c7abb9d..1fd9380 100644
--- a/embedded/admin/templates/includes/flash_messages.tmpl
+++ b/embedded/admin/templates/includes/flash_messages.tmpl
@@ -4,7 +4,9 @@
     <div class="flash-message flash-{{.Severity.String | lower}}" role="alert">
         <span class="message-text">{{.Text}}</span>
         <button type="button" class="dismiss-button" onclick="this.parentElement.remove()">
-            <i class="fas fa-times"></i>
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+            </svg>
         </button>
     </div>
     {{end}}
diff --git a/embedded/admin/templates/includes/media_selector.tmpl b/embedded/admin/templates/includes/media_selector.tmpl
index 7249f52..4b4dac4 100644
--- a/embedded/admin/templates/includes/media_selector.tmpl
+++ b/embedded/admin/templates/includes/media_selector.tmpl
@@ -4,7 +4,9 @@
         <div class="modal-header">
             <h3>Media Library</h3>
             <button onclick="closeMediaModal()" class="close-button">
-                <i class="fas fa-times"></i>
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+                </svg>
             </button>
         </div>
 
diff --git a/embedded/admin/templates/setup.tmpl b/embedded/admin/templates/setup.tmpl
index 368c16d..fe49ad0 100644
--- a/embedded/admin/templates/setup.tmpl
+++ b/embedded/admin/templates/setup.tmpl
@@ -3,6 +3,7 @@
 <head>
     <title>Captain Setup</title>
     <link rel="stylesheet" href="/admin/static/css/admin.css">
+    <link rel="stylesheet" href="/admin/static/css/app.css">
     <style>
         body {
             display: flex;
@@ -24,17 +25,14 @@
             text-align: center;
             margin-bottom: 2rem;
         }
-        .setup-header h1 {
-            margin: 0;
-            color: #333;
-        }
+  
     </style>
 </head>
 <body>
     <div class="setup-container">
         <div class="setup-header">
-            <h1>Welcome to Captain</h1>
-            <p>Create your admin account to get started</p>
+            <h1 class="text-2xl font-bold mb-4 text-gray-900">Welcome to Captain</h1>
+            <p class="text-gray-600">Create your admin account to get started</p>
         </div>
         <form method="POST" action="/setup">
             <div class="form-group">
@@ -56,7 +54,7 @@
                 <label for="password">Password</label>
                 <input type="password" id="password" name="password" required class="form-control">
             </div>
-            <button type="submit" class="btn btn-primary btn-block">Create Admin Account</button>
+            <button type="submit" class="btn-primary">Create Admin Account</button>
         </form>
     </div>
 </body>
diff --git a/embedded/public/templates/includes/footer.tmpl b/embedded/public/templates/includes/footer.tmpl
index 66d184e..5608b47 100644
--- a/embedded/public/templates/includes/footer.tmpl
+++ b/embedded/public/templates/includes/footer.tmpl
@@ -4,7 +4,7 @@
                 <a href="/admin" class="subtle-link">Admin</a>
             </div>
             <div class="footer-powered-by">
-                <span>Powered by <a href="https://github.com/github.com/captain-corp/captain" class="subtle-link">Captain</a> v{{ .version }}</span>
+                <span>Powered by <a href="https://github.com/captain-corp/captain" class="subtle-link">Captain</a> v{{ .version }}</span>
             </div>
         </div>
         <script src="/static/js/main.js"></script>
diff --git a/frontend/dev/dev.ts b/frontend/dev/dev.ts
index c5ae924..f4f977a 100644
--- a/frontend/dev/dev.ts
+++ b/frontend/dev/dev.ts
@@ -3,16 +3,10 @@ import "../src/app.css";
 
 import Posts from "../src/apps/Posts.svelte";
 import Pages from "../src/apps/Pages.svelte";
+import Settings from "../src/apps/Settings.svelte";
 import { Inity } from "../src/lib/inity";
 
 Inity.register("posts", Posts, {
-  title: "My First Post",
-  slug: "my-first-post",
-  excerpt: "This is my first post.",
-  content: "Hello, world!",
-  tags: ["tag1", "tag2", "tag3"],
-  visible: true,
-  savingState: "saved",
   onSubmit: (data, done, error) => {
     console.log("Submitted post data:", data);
     done("saved");
@@ -21,10 +15,6 @@ Inity.register("posts", Posts, {
 });
 
 Inity.register("pages", Pages, {
-  title: "My First Page",
-  slug: "my-first-page",
-  content: "Hello, world!",
-  savingState: "saved",
   onSubmit: (data, done, error) => {
     console.log("Submitted page data:", data);
     done("saved");
@@ -32,4 +22,13 @@ Inity.register("pages", Pages, {
   },
 });
 
+Inity.register("settings", Settings, {
+  onSubmit: (data, done, error) => {
+    console.log("Submitted settings data:", data);
+    done("saved");
+    error('Error');
+  },
+});
+
+
 Inity.attach();
diff --git a/frontend/dev/index.html b/frontend/dev/index.html
index fdf9240..ad85f65 100644
--- a/frontend/dev/index.html
+++ b/frontend/dev/index.html
@@ -1,25 +1,39 @@
 <!DOCTYPE html>
-<html lang="en" >
+<html lang="en">
   <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + Svelte</title>
+      <meta charset="UTF-8">
+      <meta name="viewport" content="width=device-width, initial-scale=1.0">
+      <title>Captain Admin</title>
   </head>
-  <body>
+  <body class="dark:bg-gray-900">
+    <!-- Content Area -->
+    <div class="max-w-5xl mx-auto p-6">
+      <h1 class="text-2xl font-bold mb-4 text-gray-900 dark:text-white">Settings</h1>
+      <div x-inity="settings">
+        {"codeThemeOptions": [
+          {"name": "Solarized Light", "value": "solarized-light"},
+          {"name": "Solarized Dark", "value":"solarized-dark"},
+          {"name": "Github", "value":"github"},
+          {"name": "TTCN", "value":"ttcn"},
+          {"name": "Monokai", "value":"monokai"}
+        ]}
+      </div>
+    </div>
+    <hr>
 
     <div class="max-w-5xl mx-auto p-6">
-      <h1 class="text-2xl font-bold mb-4 text-gray-900">Posts</h1>
-      <div x-inity="posts" x-props='{ "publish": "scheduled" }'></div>
+      <h1 class="text-2xl font-bold mb-4 text-gray-900 dark:text-white">Posts</h1>
+      <div x-inity="posts">
+        {"title": "My First Post"}
+      </div>
     </div>
     <hr>
 
     <div class="max-w-5xl mx-auto p-6">
-      <h1 class="text-2xl font-bold mb-4 text-gray-900">Pages</h1>
+      <h1 class="text-2xl font-bold mb-4 text-gray-900 dark:text-white">Pages</h1>
       <div x-inity="pages"></div>
     </div>
     <hr>
-
-
-  <script type="module" src="./dev.ts"></script>
+    <script type="module" src="./dev.ts"></script>
   </body>
 </html>
diff --git a/frontend/index.html b/frontend/index.html
index b45c334..769be7d 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -1,12 +1,15 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + Svelte</title>
-  </head>
-  <body>
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Captain Admin</title>
+    <link rel="stylesheet" href="./src/app.css">
 
+</head>
+<body>
+  <!-- Content Area -->
+    <main class="rounded-xl bg-white mr-8">
     <div class="max-w-5xl mx-auto p-6">
       <h1 class="text-2xl font-bold mb-4 text-gray-900">Posts</h1>
       <div x-inity="posts"></div>
@@ -14,12 +17,11 @@ <h1 class="text-2xl font-bold mb-4 text-gray-900">Posts</h1>
     <hr>
 
     <div class="max-w-5xl mx-auto p-6">
-      <h1 class="text-2xl font-bold mb-4 text-gray-900">Posts</h1>
+      <h1 class="text-2xl font-bold mb-4 text-gray-900">Pages</h1>
       <div x-inity="pages"></div>
     </div>
     <hr>
-
-
+  </main>
   <script type="module" src="/src/main.ts"></script>
   </body>
 </html>
diff --git a/frontend/public/logo.png b/frontend/public/logo.png
new file mode 100644
index 0000000..eafa415
Binary files /dev/null and b/frontend/public/logo.png differ
diff --git a/frontend/src/app.css b/frontend/src/app.css
index b40151b..2b50fe9 100644
--- a/frontend/src/app.css
+++ b/frontend/src/app.css
@@ -2,30 +2,196 @@
 @import 'tailwindcss/components';
 @import 'tailwindcss/utilities';
 
-:root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
 
-  color-scheme: light dark;
-  color: rgba(9, 9, 9, 0.87);
-  background-color: #ffffff;
+@layer components {
+  /* Typography */
 
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
+  .title {
+    @apply text-2xl md:text-3xl font-bold mb-4 text-gray-900 dark:text-gray-400;
+  }
+
+  /* Buttons */
+
+  .btn-primary {
+    @apply inline-flex items-center text-sm text-white dark:text-white border border-indigo-700 bg-indigo-600 hover:text-indigo-100 hover:bg-indigo-700 px-4 py-2 rounded gap-1;
+  }
+
+  .btn-secondary {
+    @apply inline-flex items-center text-sm text-gray-600 dark:text-gray-400 border border-gray-900 hover:bg-gray-500 hover:text-white px-4 py-2 rounded gap-1;
+  }
+
+  .btn-secondary[disabled] {
+    @apply opacity-50 cursor-not-allowed;
+  }
+
+  .btn-danger {
+    @apply inline-flex items-center text-sm text-red-600 dark:text-red-400 border border-red-500 hover:bg-red-500 hover:text-white px-4 py-2 rounded gap-1;
+  }
+
+  .link-primary {
+    @apply inline-flex items-center font-medium text-indigo-600 dark:text-indigo-500 hover:underline;
+  }
+
+  .link-secondary {
+    @apply inline-flex items-center font-medium text-gray-600 dark:text-gray-400 hover:underline;
+  }
+
+  /* Table */
+
+  .table {
+    @apply w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400;
+  }
+
+  .table thead {
+    @apply text-xs text-gray-700 uppercase bg-gray-100 dark:bg-gray-700 dark:text-gray-400;
+  }
+
+  .table thead th,
+  .table tbody td {
+    @apply px-6 py-3;
+  }
+
+  /* Components */
+  .tag {
+    @apply bg-gray-100 text-gray-800 text-xs font-medium mr-2 px-2.5 py-2.5 rounded dark:bg-gray-700 dark:text-gray-300;
+  }
+
+  .empty-state {
+    @apply text-center min-h-40 py-6;
+  }
+
+  .empty-state p {
+    @apply text-gray-500 dark:text-gray-400 mb-4;
+  }
+
+  /* Main menu */
+
+  .main-menu {
+    @apply space-y-2;
+  }
+
+  .main-menu li {
+    @apply flex items-center gap-2 text-gray-700 dark:text-gray-400 px-2 py-1;
+  }
+
+  .main-menu li a {
+    @apply font-medium text-gray-900 dark:text-gray-400 hover:text-indigo-600 dark:hover:text-indigo-500;
+  }
+
+  .main-menu li svg {
+    @apply size-6;
+  }
 
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
+  /* Confirmation message */
+
+  .confirm-delete {
+    @apply max-w-md mx-auto text-center;
+  }
+
+  .confirm-delete h3 {
+    @apply mb-4 text-gray-700 dark:text-gray-400 text-2xl font-semibold;
+  }
+
+  .confirm-delete p {
+    @apply mb-4 text-red-500 dark:text-red-400 italic;
   }
-  a:hover {
-    color: #747bff;
+
+  .confirm-delete .actions {
+    @apply space-x-2;
   }
-  button {
-    background-color: #f9f9f9;
+
+  /* Forms */
+
+  .form-group {
+    @apply mb-4;
+  }
+
+  .form-group label {
+    @apply block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300;
   }
+
+  .form-group input,
+  .form-group textarea {
+    @apply block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white rounded focus:ring-indigo-500 focus:border-indigo-500 dark:focus:ring-indigo-500 dark:focus:border-indigo-500;
+  }
+
+  .form-group input:focus,
+  .form-group textarea:focus {
+    @apply border-indigo-500;
+  }
+}
+
+body {
+  background-color: #f6f6f6;
+  font-family: 'Inter', sans-serif;
+}
+
+/* Flash messages */
+
+.flash-messages {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  z-index: 1000;
+  max-width: 400px;
+}
+
+.flash-message {
+  padding: 15px;
+  margin-bottom: 10px;
+  border-radius: 4px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  animation: slideIn 0.3s ease-out;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.flash-message .message-text {
+  flex: 1;
+}
+
+.flash-message .dismiss-button {
+  background: none;
+  border: none;
+  color: inherit;
+  opacity: 0.7;
+  cursor: pointer;
+  padding: 0 0 0 10px;
+  font-size: 14px;
+}
+
+.flash-message .dismiss-button:hover {
+  opacity: 1;
+}
+
+.flash-debug {
+  background-color: #e3e3e3;
+  color: #333;
+  border-left: 4px solid #666;
+}
+
+.flash-info {
+  background-color: #e3f2fd;
+  color: #0d47a1;
+  border-left: 4px solid #2196f3;
+}
+
+.flash-success {
+  background-color: #e8f5e9;
+  color: #1b5e20;
+  border-left: 4px solid #4caf50;
+}
+
+.flash-warning {
+  background-color: #fff3e0;
+  color: #e65100;
+  border-left: 4px solid #ff9800;
+}
+
+.flash-error {
+  background-color: #ffebee;
+  color: #b71c1c;
+  border-left: 4px solid #f44336;
 }
diff --git a/frontend/src/apps/Media.svelte b/frontend/src/apps/Media.svelte
new file mode 100644
index 0000000..e69de29
diff --git a/frontend/src/apps/Pages.svelte b/frontend/src/apps/Pages.svelte
index 7f9d054..4999dd2 100644
--- a/frontend/src/apps/Pages.svelte
+++ b/frontend/src/apps/Pages.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { onMount } from 'svelte';
-  import { Alert, Input, Label, Textarea, Toggle, Select } from 'flowbite-svelte';
+  import { Alert, Input, Label, Toggle, Select } from 'flowbite-svelte';
 
   import { type Pages } from '../utils/types/pages';
   import { slugify } from '../utils/text';
diff --git a/frontend/src/apps/Settings.svelte b/frontend/src/apps/Settings.svelte
new file mode 100644
index 0000000..7cfc78c
--- /dev/null
+++ b/frontend/src/apps/Settings.svelte
@@ -0,0 +1,177 @@
+<script lang="ts">
+  import { Input, Label, Select, Toast, Toggle } from 'flowbite-svelte';
+
+  import { type Settings } from '../utils/types/settings';
+  import SubmitButton from '../lib/SubmitButton.svelte';
+  import type { SavingStates } from '../utils/types/common';
+  import FileDropzone from '../lib/FileDropzone.svelte';
+  import Logo from '../lib/Logo.svelte';
+  import { CheckCircleSolid, CloseCircleSolid } from 'flowbite-svelte-icons';
+
+  let {
+    title = '',
+    subtitle = '',
+    logoUrl = '',
+    useLogoAsFavicon = false,
+    codeHighlightTheme = 'default',
+    codeThemeOptions = [],
+    postsPerPage = 10,
+    onSubmit = (
+      data: any,
+      done: (savingState: SavingStates) => void,
+      error: (error: any) => void
+    ) => {},
+    uploadLogoHandler = (
+      files: File[],
+      uploadStarted: () => void,
+      uploadFinished: (error: string | null, url: string | null) => void
+    ) => {},
+    deleteLogoHandler = () => {},
+  }: Settings = $props();
+
+  let error = $state('');
+  let message = $state('');
+  let savingState = $state('draft');
+
+  function setLogo(url: string) {
+    logoUrl = url;
+    message = 'Upload done';
+  }
+
+  function deleteLogo() {
+    logoUrl = '';
+    message = 'Logo deleted';
+  }
+
+  function handleSubmit(e: Event) {
+    e.preventDefault();
+    error = '';
+    savingState = 'saving';
+
+    onSubmit(
+      {
+        title,
+        subtitle,
+        useLogoAsFavicon,
+        codeHighlightTheme,
+        postsPerPage,
+      },
+      (newSavingState: string) => {
+        savingState = newSavingState;
+        if (savingState === 'saved') {
+          message = 'Settings saved';
+        }
+      },
+      (newError: string) => {
+        error = newError;
+      }
+    );
+  }
+</script>
+
+<form onsubmit={handleSubmit} class="space-y-6">
+  <!-- Site Title -->
+  <div>
+    <Label for="title" class="block text-sm font-bold text-gray-700 mb-2">Site Title</Label>
+    <Input type="text" id="title" name="title" bind:value={title} required />
+  </div>
+
+  <!-- Site Subtitle -->
+  <div>
+    <Label for="subtitle" class="block text-sm font-bold text-gray-700 mb-2">Site Subtitle</Label>
+    <Input type="text" id="subtitle" name="subtitle" bind:value={subtitle} required />
+  </div>
+
+  <!-- Logo -->
+  <div>
+    <Label for="logo" class="block text-sm font-bold text-gray-700 mb-2">Logo</Label>
+    {#if logoUrl}
+      <Logo
+        {logoUrl}
+        onDelete={() => {
+          deleteLogoHandler();
+          deleteLogo();
+          useLogoAsFavicon = false;
+        }}
+      />
+    {:else}
+      <FileDropzone
+        accept="image/*"
+        onFilesSelectedHandler={(files, uploadStarted, uploadFinished) => {
+          uploadLogoHandler(files, uploadStarted, (error, url) => {
+            if (error) {
+              error = error;
+            } else {
+              setLogo(url);
+              message = 'Upload successful!';
+            }
+            uploadFinished(error, url);
+          });
+        }}
+      />
+    {/if}
+
+    {#if error}
+      <Toast color="red" dismissable={true} position="top-right">
+        <svelte:fragment slot="icon">
+          <CloseCircleSolid class="w-5 h-5" />
+          <span class="sr-only">Error icon</span>
+        </svelte:fragment>
+        {error}
+      </Toast>
+    {/if}
+
+    {#if message}
+      <Toast color="green" dismissable={true} position="top-right">
+        <svelte:fragment slot="icon">
+          <CheckCircleSolid class="w-5 h-5" />
+          <span class="sr-only">Check icon</span>
+        </svelte:fragment>
+        {message}
+      </Toast>
+    {/if}
+  </div>
+
+  <!-- Use logo as favicon -->
+  <div>
+    <Label for="use-logo-as-favicon" class="block text-sm font-bold text-gray-700 mb-2"
+      >Use logo as favicon</Label
+    >
+    <Toggle id="use-logo-as-favicon" name="use-logo-as-favicon" bind:checked={useLogoAsFavicon}>
+      <svelte:fragment slot="offLabel">No</svelte:fragment>
+      <span>Yes</span>
+    </Toggle>
+  </div>
+
+  <!-- Code highlighting theme -->
+  <div>
+    <Label for="code-theme" class="block text-sm font-bold text-gray-700 mb-2"
+      >Code highlighting theme</Label
+    >
+    <Select
+      id="code-theme"
+      name="code-theme"
+      bind:value={codeHighlightTheme}
+      items={codeThemeOptions}
+    ></Select>
+  </div>
+
+  <!-- Posts per page -->
+  <div>
+    <Label for="posts-per-page" class="block text-sm font-bold text-gray-700 mb-2"
+      >Posts per page</Label
+    >
+    <Input
+      type="number"
+      id="posts-per-page"
+      name="posts-per-page"
+      bind:value={postsPerPage}
+      required
+    />
+  </div>
+
+  <!-- Save Button -->
+  <div class="flex justify-end">
+    <SubmitButton {savingState} />
+  </div>
+</form>
diff --git a/frontend/src/lib/Editor.svelte b/frontend/src/lib/Editor.svelte
index a8325cb..ed2a57c 100644
--- a/frontend/src/lib/Editor.svelte
+++ b/frontend/src/lib/Editor.svelte
@@ -13,6 +13,6 @@
     bind:value
     {name}
     {rows}
-    class="h-48 w-full my-2 p-2 border border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm"
+    class="h-48 w-full my-2 p-2 border border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-indigo-500 dark:focus:border-indigo-500"
   ></textarea>
 </div>
diff --git a/frontend/src/lib/EditorToolbar.svelte b/frontend/src/lib/EditorToolbar.svelte
index db69acf..316aa09 100644
--- a/frontend/src/lib/EditorToolbar.svelte
+++ b/frontend/src/lib/EditorToolbar.svelte
@@ -101,9 +101,18 @@
 </script>
 
 <div>
-  <button data-command="Bold" onclick={executeCommand}>B</button>
-  <button data-command="Italic" onclick={executeCommand}>I</button>
-  <button>H</button>
+  <button
+    data-command="Bold"
+    onclick={executeCommand}
+    class="font-bold border border-black dark:border-gray-400 text-black dark:text-white">B</button
+  >
+  <button
+    data-command="Italic"
+    onclick={executeCommand}
+    class="font-italic border border-black dark:border-gray-400 text-black dark:text-white"
+    >I</button
+  >
+  <button class="border border-black dark:border-gray-400 text-black dark:text-white">H</button>
   <Dropdown>
     <DropdownItem data-command="H1" on:click={executeCommand}>Heading 1</DropdownItem>
     <DropdownItem data-command="H2" on:click={executeCommand}>Heading 2</DropdownItem>
@@ -112,16 +121,32 @@
     <DropdownItem data-command="H5" on:click={executeCommand}>Heading 5</DropdownItem>
     <DropdownItem data-command="H6" on:click={executeCommand}>Heading 6</DropdownItem>
   </Dropdown>
-  <button data-command="Link" onclick={executeCommand}>
+  <button
+    data-command="Link"
+    onclick={executeCommand}
+    class="border border-black dark:border-gray-400 text-black dark:text-white"
+  >
     <LinkOutline class="w-4 h-6" />
   </button>
-  <button data-command="Image" onclick={executeCommand}>
+  <button
+    data-command="Image"
+    onclick={executeCommand}
+    class="border border-black dark:border-gray-400 text-black dark:text-white"
+  >
     <ImageSolid class="w-4 h-6" />
   </button>
-  <button data-command="Code" onclick={executeCommand}>
+  <button
+    data-command="Code"
+    onclick={executeCommand}
+    class="border border-black dark:border-gray-400 text-black dark:text-white"
+  >
     <FileCodeOutline class="w-4 h-6" />
   </button>
-  <button data-command="Quote" onclick={executeCommand}>
+  <button
+    data-command="Quote"
+    onclick={executeCommand}
+    class="border border-black dark:border-gray-400 text-black dark:text-white"
+  >
     <QuoteSolid class="w-4 h-6" />
   </button>
 </div>
@@ -129,17 +154,8 @@
 <style>
   button {
     margin-right: 5px;
-    border: 1px solid #ccc;
     padding: 5px 10px;
     border-radius: 4px;
     vertical-align: middle;
   }
-
-  button[data-command='Bold'] {
-    font-weight: bold;
-  }
-
-  button[data-command='Italic'] {
-    font-style: italic;
-  }
 </style>
diff --git a/frontend/src/lib/FileDropzone.svelte b/frontend/src/lib/FileDropzone.svelte
new file mode 100644
index 0000000..f0257d3
--- /dev/null
+++ b/frontend/src/lib/FileDropzone.svelte
@@ -0,0 +1,119 @@
+<script lang="ts">
+  import { Spinner } from 'flowbite-svelte';
+  import { type FileDropzone } from '../utils/types/filedropzone';
+
+  let {
+    accept = '*/*',
+    multiple = false,
+    maxSize = 10_000_000,
+    onFilesSelectedHandler = () => {},
+  }: FileDropzone = $props();
+  let isDragging = $state(false);
+  let isUploading = $state(false);
+  let error = $state<string | null>(null);
+  let files = $state<File[]>([]);
+
+  $effect(() => {
+    if (files.length > 0) {
+      const validFiles = files.filter((file) => {
+        if (file.size > maxSize) {
+          error = `File ${file.name} exceeds ${maxSize / 1_000_000}MB limit`;
+          return false;
+        }
+        return true;
+      });
+
+      if (validFiles.length > 0) {
+        onFilesSelectedHandler(validFiles, uploadStarted, uploadFinished);
+      }
+    }
+  });
+
+  function uploadStarted(): void {
+    isUploading = true;
+    error = null;
+    files = [];
+  }
+
+  function uploadFinished(): void {
+    isUploading = false;
+    files = [];
+  }
+
+  function preventDefaults(e: Event): void {
+    e.preventDefault();
+    e.stopPropagation();
+  }
+
+  function handleDragEnter(): void {
+    isDragging = true;
+  }
+
+  function handleDragLeave(): void {
+    isDragging = false;
+  }
+
+  function handleDrop(e: DragEvent): void {
+    preventDefaults(e);
+    isDragging = false;
+    files = Array.from(e.dataTransfer?.files ?? []);
+  }
+
+  function handleInputChange(e: Event): void {
+    files = Array.from((e.target as HTMLInputElement).files ?? []);
+    (e.target as HTMLInputElement).value = '';
+  }
+</script>
+
+<svelte:window on:dragover={preventDefaults} on:drop={preventDefaults} />
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+  class="group relative cursor-pointer border-2 border-dashed rounded-xl p-8 text-center transition-colors"
+  class:border-indigo-500={isDragging}
+  class:border-red-500={error}
+  ondragover={handleDragEnter}
+  ondragleave={handleDragLeave}
+  ondrop={handleDrop}
+>
+  {#if error}
+    <p class="text-sm text-destructive mt-2">{error}</p>
+  {/if}
+
+  {#if isUploading}
+    <div class="absolute inset-0 w-full h-full flex items-center justify-center">
+      <Spinner class="size-8" />
+    </div>
+  {:else}
+    <input
+      type="file"
+      {accept}
+      {multiple}
+      onchange={handleInputChange}
+      class="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
+      aria-label="File upload"
+    />
+
+    <div class="flex flex-col items-center justify-center gap-3">
+      <div
+        class="h-12 w-12 bg-muted rounded-full flex items-center justify-center transition-colors group-hover:bg-muted/80"
+      >
+        <svg
+          class="w-6 h-6 text-muted-foreground"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
+          />
+        </svg>
+      </div>
+
+      <p class="text-sm text-muted-foreground font-medium">Drag files here or click to upload</p>
+    </div>
+  {/if}
+</div>
diff --git a/frontend/src/lib/ImageUpload.svelte b/frontend/src/lib/ImageUpload.svelte
new file mode 100644
index 0000000..b58d767
--- /dev/null
+++ b/frontend/src/lib/ImageUpload.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+  import { Button, Spinner } from 'flowbite-svelte';
+</script>
+
+<div class="flex items-center space-x-4">
+  <p>Image Upload</p>
+  <input type="file" />
+</div>
diff --git a/frontend/src/lib/Logo.svelte b/frontend/src/lib/Logo.svelte
new file mode 100644
index 0000000..cc38ffc
--- /dev/null
+++ b/frontend/src/lib/Logo.svelte
@@ -0,0 +1,16 @@
+<script>
+  let { logoUrl = $bindable(''), onDelete = () => {} } = $props();
+</script>
+
+<div class="mb-4 flex justify-center items-center flex-col">
+  <div class="w-32 h-32 object-cover rounded">
+    <img src={logoUrl} alt="Logo" class="w-32 h-32 object-cover rounded" />
+  </div>
+  <button
+    type="button"
+    class="mt-4 inline-flex justify-center px-4 py-2 text-sm font-medium text-red-700 hover:text-red-900"
+    onclick={() => onDelete()}
+  >
+    Delete
+  </button>
+</div>
diff --git a/frontend/src/lib/inity.ts b/frontend/src/lib/inity.ts
index c193aaa..7522e13 100644
--- a/frontend/src/lib/inity.ts
+++ b/frontend/src/lib/inity.ts
@@ -22,23 +22,25 @@ export const Inity = {
       const elements = document.querySelectorAll(`[x-inity="${name}"]`);
       const { Component } = entry as InityProps;
 
-      elements.forEach((element) => {
+      elements.forEach((element: HTMLElement) => {
         let props: any = {};
-        let elementProps: string = element.getAttribute('x-props');
+        let elementPropsText: string = element.textContent || '';
 
-        if (elementProps) {
+        if (elementPropsText) {
           try {
-            props = JSON.parse(elementProps);
+            props = JSON.parse(elementPropsText);
+            element.textContent = '';
           } catch (e) {
             console.group('Inity');
-            console.warn('Could not parse x-props attribute for element', element);
-            console.warn('Props', elementProps);
+            console.warn('Could not parse attribute for element', element);
+            console.warn('Props', elementPropsText);
             console.warn('Error', e);
             console.groupEnd();
           }
         }
 
         Object.assign(props, this.data[name].props);
+        Object.assign(props, element.dataset);
 
         for (const [key, value] of Object.entries(this.data[name].props)) {
           if (value instanceof Function) {
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index 34f8c54..10b0776 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -2,11 +2,13 @@ import './app.css';
 
 import Posts from './apps/Posts.svelte';
 import Pages from './apps/Pages.svelte';
+import Settings from './apps/Settings.svelte';
 import { Inity } from './lib/inity';
 
 const Apps = {
   Posts,
   Pages,
+  Settings,
 };
 
 Object.assign(window, {
diff --git a/frontend/src/utils/types/filedropzone.ts b/frontend/src/utils/types/filedropzone.ts
new file mode 100644
index 0000000..03c9a69
--- /dev/null
+++ b/frontend/src/utils/types/filedropzone.ts
@@ -0,0 +1,10 @@
+export interface FileDropzone {
+  accept?: string;
+  multiple?: boolean;
+  maxSize?: number;
+  onFilesSelectedHandler?: (
+    files: File[],
+    uploadStarted: () => void,
+    uploadFinished: (error: string | null, url: string | null) => void
+  ) => void;
+}
diff --git a/frontend/src/utils/types/settings.ts b/frontend/src/utils/types/settings.ts
new file mode 100644
index 0000000..bf783d6
--- /dev/null
+++ b/frontend/src/utils/types/settings.ts
@@ -0,0 +1,24 @@
+import { type SavingStates } from './common';
+
+import type { SelectOptionType } from 'flowbite-svelte';
+
+export interface Settings {
+  title?: string;
+  subtitle?: string;
+  logoUrl?: string;
+  useLogoAsFavicon?: boolean;
+  codeHighlightTheme?: string;
+  codeThemeOptions: SelectOptionType<String>[];
+  postsPerPage?: number;
+  deleteLogoHandler?: () => void;
+  uploadLogoHandler?: (
+    files: File[],
+    uploadStarted: () => void,
+    uploadFinished: (error: string | null, url: string | null) => void
+  ) => void;
+  onSubmit?: (
+    data: any,
+    done: (savingState: SavingStates) => void,
+    error: (error: any) => void
+  ) => void;
+}
diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts
index d91c405..ddfc160 100644
--- a/frontend/tailwind.config.ts
+++ b/frontend/tailwind.config.ts
@@ -5,7 +5,9 @@ import type { Config } from "tailwindcss";
 export default {
   content: [
     "./src/**/*.{html,js,svelte,ts}",
+    "./node_modules/flowbite/**/*.js",
     "./node_modules/flowbite-svelte/**/*.{html,js,svelte,ts}",
+    "../embedded/admin/templates/**/*.{tmpl,js}",
   ],
   darkMode: "class",
   theme: {
diff --git a/handlers/admin.go b/handlers/admin.go
index 235b5a7..f98fb3f 100644
--- a/handlers/admin.go
+++ b/handlers/admin.go
@@ -33,6 +33,14 @@ func (h *AdminHandlers) Index(c *fiber.Ctx) error {
 	}
 	postCount := int64(len(posts))
 
+	pages, err := h.repos.Pages.FindAll()
+	if err != nil {
+		return c.Status(http.StatusInternalServerError).Render("admin_500", fiber.Map{
+			"error": err.Error(),
+		})
+	}
+	pageCount := int64(len(pages))
+
 	tags, err := h.repos.Tags.FindAll()
 	if err != nil {
 		return c.Status(http.StatusInternalServerError).Render("admin_500", fiber.Map{
@@ -60,6 +68,7 @@ func (h *AdminHandlers) Index(c *fiber.Ctx) error {
 	data := fiber.Map{
 		"title":       "Dashboard",
 		"postCount":   postCount,
+		"pageCount":   pageCount,
 		"tagCount":    tagCount,
 		"userCount":   userCount,
 		"recentPosts": recentPosts,
diff --git a/handlers/admin_api.go b/handlers/admin_api.go
index a89d099..abd1c70 100644
--- a/handlers/admin_api.go
+++ b/handlers/admin_api.go
@@ -2,7 +2,10 @@ package handlers
 
 import (
 	"fmt"
+	"log"
+	"mime"
 	"net/http"
+	"path/filepath"
 	"time"
 
 	"github.com/captain-corp/captain/flash"
@@ -36,6 +39,14 @@ type pageRequest struct {
 	Visible     bool   `json:"visible"`
 }
 
+type settingsRequest struct {
+	CodeHighlightTheme string `json:"codeHighlightTheme"`
+	PostsPerPage       int    `json:"postsPerPage"`
+	Title              string `json:"title"`
+	Subtitle           string `json:"subtitle"`
+	UseLogoAsFavicon   bool   `json:"useLogoAsFavicon"`
+}
+
 type publishedTime struct {
 	Raw            time.Time
 	Timezone       string
@@ -297,3 +308,135 @@ func (h *AdminHandlers) ApiGetTags(c *fiber.Ctx) error {
 
 	return c.JSON(response)
 }
+
+// ApiUpdateSettings handles the POST /api/settings route
+func (h *AdminHandlers) ApiUpdateSettings(c *fiber.Ctx) error {
+	var logo *models.Media
+	settings, _ := h.repos.Settings.Get()
+	settingsPost := new(settingsRequest)
+
+	if err := c.BodyParser(settingsPost); err != nil {
+		// TODO: Log error
+		fmt.Printf("Failed to parse request body: %v\n", err)
+		return c.Status(http.StatusBadRequest).JSON(fiber.Map{"error": "Invalid request body"})
+	}
+
+	settings.Title = settingsPost.Title
+	settings.Subtitle = settingsPost.Subtitle
+	settings.ChromaStyle = settingsPost.CodeHighlightTheme
+	settings.PostsPerPage = settingsPost.PostsPerPage
+	settings.UseLogoAsFavicon = settingsPost.UseLogoAsFavicon
+
+	if settings.LogoID != nil {
+		media, err := h.repos.Media.FindByID(*settings.LogoID)
+		if err != nil {
+			return c.Status(http.StatusInternalServerError).JSON(fiber.Map{"error": "Failed to find logo"})
+		}
+		logo = media
+	} else {
+		settings.UseLogoAsFavicon = false
+	}
+
+	if err := h.repos.Settings.Update(settings); err != nil {
+		// TODO: Log error
+		fmt.Printf("Failed to update settings: %v\n", err)
+		return c.Status(http.StatusInternalServerError).JSON(fiber.Map{"error": "Failed to update settings"})
+	}
+
+	if settingsPost.UseLogoAsFavicon && logo != nil {
+		if err := GenerateFavicons(h.repos, logo, h.storage); err != nil {
+			log.Printf("Warning: favicon generation failed: %v", err)
+		}
+	}
+
+	return c.JSON(fiber.Map{"success": true})
+}
+
+// ApiUploadLogo handles logo upload and favicon generation
+func (h *AdminHandlers) ApiUploadLogo(c *fiber.Ctx) error {
+	file, err := c.FormFile("logo")
+	if err != nil {
+		return c.Status(http.StatusBadRequest).JSON(fiber.Map{
+			"error": "No logo file uploaded",
+		})
+	}
+
+	// Save to storage
+	contents, err := file.Open()
+	if err != nil {
+		return c.Status(http.StatusInternalServerError).JSON(fiber.Map{
+			"error": "Failed to open logo file",
+		})
+	}
+	uploadedFile, err := h.storage.Save(file.Filename, contents)
+	if err != nil {
+		return c.Status(http.StatusInternalServerError).JSON(fiber.Map{
+			"error": "Failed to save logo",
+		})
+	}
+
+	// Create media record
+	media := &models.Media{
+		Name:     file.Filename,
+		Path:     uploadedFile,
+		MimeType: mime.TypeByExtension(filepath.Ext(file.Filename)),
+		Size:     file.Size,
+	}
+
+	if err := h.repos.Media.Create(media); err != nil {
+		return c.Status(http.StatusInternalServerError).JSON(fiber.Map{
+			"error": "Failed to create media record",
+		})
+	}
+
+	// Update settings with new logo ID
+	settings, _ := h.repos.Settings.Get()
+	settings.LogoID = &media.ID
+	if err := h.repos.Settings.Update(settings); err != nil {
+		return c.Status(http.StatusInternalServerError).JSON(fiber.Map{
+			"error": "Failed to update settings",
+		})
+	}
+
+	return c.JSON(fiber.Map{
+		"message": "Logo uploaded successfully",
+		"logoUrl": media.Path,
+	})
+}
+
+// ApiDeleteLogo handles logo removal
+func (h *AdminHandlers) ApiDeleteLogo(c *fiber.Ctx) error {
+	settings, _ := h.repos.Settings.Get()
+	if settings.LogoID == nil {
+		return c.Status(http.StatusBadRequest).JSON(fiber.Map{
+			"error": "No logo to delete",
+		})
+	}
+
+	media, err := h.repos.Media.FindByID(*settings.LogoID)
+	if err != nil {
+		return c.Status(http.StatusInternalServerError).JSON(fiber.Map{
+			"error": "Failed to find logo",
+		})
+	}
+
+	// Remove media record
+	if err := h.repos.Media.Delete(media); err != nil {
+		return c.Status(http.StatusInternalServerError).JSON(fiber.Map{
+			"error": "Failed to delete logo record",
+		})
+	}
+
+	// Clear logo ID and favicon setting
+	settings.LogoID = nil
+	settings.UseLogoAsFavicon = false
+	if err := h.repos.Settings.Update(settings); err != nil {
+		return c.Status(http.StatusInternalServerError).JSON(fiber.Map{
+			"error": "Failed to update settings",
+		})
+	}
+
+	return c.JSON(fiber.Map{
+		"message": "Logo removed successfully",
+	})
+}
diff --git a/handlers/admin_posts.go b/handlers/admin_posts.go
index 9adac3e..ea6a853 100644
--- a/handlers/admin_posts.go
+++ b/handlers/admin_posts.go
@@ -131,20 +131,14 @@ func (h *AdminHandlers) ShowEditPost(c *fiber.Ctx) error {
 
 	if err != nil {
 		flash.Error(c, "Invalid post ID")
-		return c.Status(http.StatusBadRequest).JSON(fiber.Map{
-			"error":    "Invalid post ID",
-			"redirect": "/admin/posts",
-		})
+		return c.Status(http.StatusBadRequest).Render("admin_400", fiber.Map{})
 	}
 
 	post, err = h.repos.Posts.FindByID(id)
 
 	if err != nil {
 		flash.Error(c, "Post not found")
-		return c.Status(http.StatusNotFound).JSON(fiber.Map{
-			"error":    "Post not found",
-			"redirect": "/admin/posts",
-		})
+		return c.Status(http.StatusNotFound).Render("admin_404", fiber.Map{})
 	}
 
 	return c.Render("admin_edit_post", fiber.Map{
diff --git a/handlers/admin_settings.go b/handlers/admin_settings.go
index 086c822..bab7c67 100644
--- a/handlers/admin_settings.go
+++ b/handlers/admin_settings.go
@@ -1,112 +1,35 @@
 package handlers
 
 import (
-	"fmt"
 	"net/http"
-	"strconv"
 
 	"github.com/gofiber/fiber/v2"
 
-	"github.com/captain-corp/captain/config"
-	"github.com/captain-corp/captain/flash"
 	"github.com/captain-corp/captain/models"
 )
 
 // ShowSettings handles the GET /admin/settings route
 func (h *AdminHandlers) ShowSettings(c *fiber.Ctx) error {
+	var logo *models.Media
+	var logoUrl string
+
 	settings, err := h.repos.Settings.Get()
 	if err != nil {
-		flash.Error(c, "Failed to load settings")
 		return c.Status(http.StatusInternalServerError).Render("admin_500", fiber.Map{
 			"error": err.Error(),
 		})
 	}
 
-	var logo *models.Media
 	if settings.LogoID != nil {
 		logo, _ = h.repos.Media.FindByID(*settings.LogoID)
+		logoUrl = "/media/" + logo.Path
 	}
 
 	data := fiber.Map{
-		"title":        "Site Settings",
-		"settings":     settings,
-		"logo":         logo,
-		"chromaStyles": config.GetChromaStyles(),
+		"title":    "Site Settings",
+		"settings": settings,
+		"logoUrl":  logoUrl,
 	}
 
 	return c.Render("admin_settings", data)
 }
-
-// UpdateSettings handles the POST /admin/settings route
-func (h *AdminHandlers) UpdateSettings(c *fiber.Ctx) error {
-	form, _ := h.repos.Settings.Get()
-	var errors []string
-
-	// Get form values
-	form.Title = c.FormValue("title")
-	form.Subtitle = c.FormValue("subtitle")
-	form.ChromaStyle = c.FormValue("chroma_style")
-	form.Theme = c.FormValue("theme")
-	postsPerPage := c.FormValue("posts_per_page")
-	logoID := c.FormValue("logo_id")
-	useFavicon := c.FormValue("use_favicon") == "on"
-
-	// Validate required fields
-	if form.Title == "" {
-		errors = append(errors, "Title is required")
-	}
-	if form.Subtitle == "" {
-		errors = append(errors, "Subtitle is required")
-	}
-
-	// Parse posts per page
-	if pp, err := strconv.Atoi(postsPerPage); err == nil {
-		form.PostsPerPage = pp
-	} else {
-		errors = append(errors, "Posts per page must be a number")
-	}
-
-	// Handle logo
-	if logoID != "" {
-		if id, err := strconv.ParseUint(logoID, 10, 32); err == nil {
-			uid := uint(id)
-			form.LogoID = &uid
-		}
-	} else {
-		form.LogoID = nil
-	}
-	form.UseFavicon = useFavicon
-
-	if len(errors) > 0 {
-		for _, err := range errors {
-			flash.Error(c, err)
-		}
-		return c.Redirect("/admin/settings")
-	}
-
-	if err := h.repos.Settings.Update(form); err != nil {
-		flash.Error(c, "Failed to save settings")
-		return c.Status(http.StatusInternalServerError).Render("admin_500", fiber.Map{
-			"error": err.Error(),
-		})
-	}
-
-	// Generate favicons if enabled and logo is set
-	if form.UseFavicon && form.LogoID != nil {
-		logo, err := h.repos.Media.FindByID(*form.LogoID)
-		if err != nil {
-			return fmt.Errorf("failed to get logo: %w", err)
-		}
-
-		if err := GenerateFavicons(h.repos, logo, h.storage); err != nil {
-			flash.Error(c, "Failed to generate favicons")
-			fmt.Printf("Failed to generate favicons: %v\n", err)
-			return c.Status(http.StatusInternalServerError).Render("admin_500", fiber.Map{
-				"error": err.Error(),
-			})
-		}
-	}
-
-	flash.Success(c, "Settings updated successfully")
-	return c.Redirect("/admin/settings")
-}
diff --git a/handlers/admin_users.go b/handlers/admin_users.go
index 28cbadf..33234e0 100644
--- a/handlers/admin_users.go
+++ b/handlers/admin_users.go
@@ -253,9 +253,19 @@ func (h *AdminHandlers) ConfirmDeleteUser(c *fiber.Ctx) error {
 		return c.Status(http.StatusNotFound).Render("admin_404", fiber.Map{})
 	}
 
+	postCount, err := h.repos.Posts.CountByAuthor(user)
+	if err != nil {
+		return c.Status(http.StatusInternalServerError).Render("admin_500", fiber.Map{
+			"error": err.Error(),
+		})
+	}
+
+	hasContent := postCount > 0
+
 	return c.Render("admin_confirm_delete_user", fiber.Map{
-		"title": "Confirm user deletion",
-		"user":  user,
+		"title":      "Confirm user deletion",
+		"user":       user,
+		"hasContent": hasContent,
 	})
 }
 
diff --git a/handlers/routes.go b/handlers/routes.go
index f80756d..3a54fdf 100644
--- a/handlers/routes.go
+++ b/handlers/routes.go
@@ -117,7 +117,6 @@ func RegisterAdminRoutes(repos *repository.Repositories, storage storage.Provide
 
 	// Settings
 	admin.Get("/settings", adminHandlers.ShowSettings)
-	admin.Post("/settings", adminHandlers.UpdateSettings)
 
 	admin.Use("/", flash.Middleware())
 
@@ -126,6 +125,8 @@ func RegisterAdminRoutes(repos *repository.Repositories, storage storage.Provide
 	api.Get("/tags", adminHandlers.ApiGetTags)
 	api.Get("/media", adminMediaHandlers.ApiGetMediaList)
 
+	api.Post("/settings", adminHandlers.ApiUpdateSettings)
+
 	// Posts API routes
 	api.Post("/posts", adminHandlers.ApiCreatePost)
 	api.Put("/posts/:id", adminHandlers.ApiUpdatePost)
@@ -134,5 +135,9 @@ func RegisterAdminRoutes(repos *repository.Repositories, storage storage.Provide
 	api.Post("/pages", adminHandlers.ApiCreatePage)
 	api.Put("/pages/:id", adminHandlers.ApiUpdatePage)
 
+	// logo API routes
+	api.Post("/logo", adminHandlers.ApiUploadLogo)
+	api.Delete("/logo", adminHandlers.ApiDeleteLogo)
+
 	return app
 }
diff --git a/main.go b/main.go
index fbaba62..4021b12 100644
--- a/main.go
+++ b/main.go
@@ -16,6 +16,7 @@ import (
 
 //go:embed embedded/admin/static/css/*
 //go:embed embedded/admin/static/js/*
+//go:embed embedded/admin/static/img/*
 //go:embed embedded/admin/static/fonts/*
 //go:embed embedded/admin/templates/includes/*
 //go:embed embedded/admin/templates/*
diff --git a/middleware/favicon.go b/middleware/favicon.go
index de853e0..977788d 100644
--- a/middleware/favicon.go
+++ b/middleware/favicon.go
@@ -30,7 +30,7 @@ func InjectFavicon(repositories *repository.Repositories) fiber.Handler {
 
 		settings := c.Locals("settings").(*models.Settings)
 
-		if settings.UseFavicon {
+		if settings.UseLogoAsFavicon {
 			err := c.Bind(fiber.Map{
 				"faviconHTML": generateFaviconHTML(),
 			})
@@ -78,8 +78,6 @@ func ServeFavicon(repositories *repository.Repositories, storage storage.Provide
 
 func readFromStorage(repositories *repository.Repositories, storage storage.Provider, filename string) ([]byte, error) {
 	f, err := repositories.Media.FindByFilename(filename)
-	fmt.Printf("Favicon: %v\n", f)
-	fmt.Printf("Name: %v\n", filename)
 
 	if err != nil {
 		return nil, err
diff --git a/models/settings.go b/models/settings.go
index a2dccc2..9a5b9d4 100644
--- a/models/settings.go
+++ b/models/settings.go
@@ -1,17 +1,40 @@
 package models
 
 import (
+	"encoding/json"
+
+	"github.com/captain-corp/captain/config"
 	"gorm.io/gorm"
 )
 
 // Settings represents the site configuration
 type Settings struct {
 	gorm.Model
-	Title        string `gorm:"not null" form:"title"`
-	Subtitle     string `gorm:"not null" form:"subtitle"`
-	ChromaStyle  string `gorm:"not null" form:"chroma_style"`
-	Theme        string `gorm:"not null" form:"theme"`
-	PostsPerPage int    `gorm:"not null" form:"posts_per_page"`
-	LogoID       *uint  `gorm:"" form:"logo_id"`
-	UseFavicon   bool   `gorm:"not null;default:false" form:"use_favicon"`
+	Title            string `gorm:"not null" form:"title"`
+	Subtitle         string `gorm:"not null" form:"subtitle"`
+	ChromaStyle      string `gorm:"not null" form:"chroma_style"`
+	PostsPerPage     int    `gorm:"not null" form:"posts_per_page"`
+	LogoID           *uint  `gorm:"" form:"logo_id"`
+	UseLogoAsFavicon bool   `gorm:"not null;default:false" form:"use_favicon"`
+}
+
+func (s *Settings) ToJSON() string {
+
+	chromaStyleList := make([]map[string]string, len(config.GetChromaStyles()))
+	for i, style := range config.GetChromaStyles() {
+		chromaStyleList[i] = map[string]string{
+			"name":  style,
+			"value": style,
+		}
+	}
+
+	b, _ := json.Marshal(map[string]interface{}{
+		"title":              s.Title,
+		"subtitle":           s.Subtitle,
+		"codeHighlightTheme": s.ChromaStyle,
+		"codeThemeOptions":   chromaStyleList,
+		"postsPerPage":       s.PostsPerPage,
+		"useLogoAsFavicon":   s.UseLogoAsFavicon,
+	})
+	return string(b)
 }
diff --git a/repository/settings_repository.go b/repository/settings_repository.go
index c9e572e..8e36ac2 100644
--- a/repository/settings_repository.go
+++ b/repository/settings_repository.go
@@ -27,7 +27,6 @@ func (r *settingsRepository) Get() (*models.Settings, error) {
 			Title:        system.DefaultTitle,
 			Subtitle:     system.DefaultSubtitle,
 			ChromaStyle:  system.DefaultChromaStyle,
-			Theme:        system.DefaultTheme,
 			PostsPerPage: system.DefaultPostsPerPage,
 		}
 		if err := r.Create(settings); err != nil {