diff --git a/.idx/AGENTS.md b/.idx/AGENTS.md
new file mode 100644
index 00000000..02f81e88
--- /dev/null
+++ b/.idx/AGENTS.md
@@ -0,0 +1,22 @@
+# Expert AI Engineering Protocol
+
+## Clean Code & TypeScript Principles
+When modifying or extending this framework, strictly adhere to these principles:
+
+### 1. Robust Type Safety
+- **No 'any'**: Avoid the use of 'any' at all costs. Use Zod schemas for all external data sources and configuration files.
+- **Inference where possible**: Trust TypeScript's inference for local variables, but explicitly type exported constants and function parameters.
+- **Exhaustive Checks**: Use discriminating unions and exhaustive 'switch' checks for themes, routes, and layout types.
+
+### 2. Framework Modularity
+- **Source of Truth**: The centralized 'src/config.ts' is the single source of truth for site-wide settings. Do not hardcode strings (site names, social URLs, paths) in components.
+- **Feature Flags**: Respect all feature flags defined in 'CONFIG.features'. If a feature is disabled, the corresponding components should not render and routes should be guarded via middleware.
+- **CSS Variable Overrides**: Design changes should primarily be handled through HSL variable overrides defined in 'CONFIG.theme.overrides'.
+
+### 3. File Operations
+- **Atomic Writes**: Always ensure configuration files are well-formed before writing.
+- **Asset Integrity**: When changing PWA settings or site metadata, verify that the referenced assets (favicons, manifest icons) exist in the 'public/' directory.
+
+### 4. Verification Workflow
+- Every change must pass a full build ('npm run build') and all unit tests ('npm test').
+- Frontend changes require visual verification via Playwright, ensuring consistent layout across different configured themes.
diff --git a/FRAMEWORK_PLAN.md b/FRAMEWORK_PLAN.md
new file mode 100644
index 00000000..661f060f
--- /dev/null
+++ b/FRAMEWORK_PLAN.md
@@ -0,0 +1,103 @@
+# Framework Conversion Plan (v2)
+
+This document outlines the comprehensive strategy for transforming this repository into a reusable Astro blog framework, enhanced with senior-level architectural considerations for long-term maintainability.
+
+## 1. Centralized Configuration & Validation
+
+To ensure the framework is robust, we will implement a centralized configuration system using **Zod** for schema validation. This provides both TypeScript types and runtime error checking.
+
+### Configuration Schema (`src/schemas/config.ts`)
+```typescript
+import { z } from 'zod';
+
+export const FrameworkConfigSchema = z.object({
+  site: z.object({
+    title: z.string(),
+    description: z.string(),
+    author: z.string(),
+    logoText: z.string().optional(),
+    siteUrl: z.string().url(),
+    lang: z.string().default('en'),
+    social: z.record(z.string()).optional(),
+  }),
+  navigation: z.object({
+    header: z.array(z.object({ label: z.string(), href: z.string() })),
+    footer: z.array(z.object({ label: z.string(), href: z.string() })),
+  }),
+  features: z.object({
+    enableSearch: z.boolean().default(true),
+    enablePWA: z.boolean().default(true),
+    enableToolsPage: z.boolean().default(false),
+    enableRSS: z.boolean().default(true),
+  }),
+  theme: z.object({
+    active: z.enum(['newspaper', 'minimal', 'modern']).default('newspaper'),
+    overrides: z.record(z.string()).optional(),
+  }),
+  routing: z.object({
+    homepage: z.enum(['blog', 'tools']).default('blog'),
+  }),
+  assets: z.object({
+    favicon: z.string().default('/favicon.svg'),
+    defaultHeroImage: z.string().default('/placeholder-social.jpg'),
+    pwaIconsDir: z.string().default('/icons'),
+  })
+});
+
+export type FrameworkConfig = z.infer<typeof FrameworkConfigSchema>;
+```
+
+## 2. Dynamic Routing & Feature Toggles
+
+### Homepage Selection
+- **Refactor `src/pages/index.astro`**: It will serve as a dynamic router. Based on `config.routing.homepage`, it will import and render the appropriate template (Blog or Tools).
+
+### Disabling Routes
+- **Astro Middleware**: Use middleware to redirect requests for disabled features (e.g., `/tools`) back to the homepage if `enableToolsPage` is false. This ensures a clean user experience even if URLs are directly accessed.
+
+## 3. Advanced Theming System
+
+- **Tailwind v4 Integration**: Use `@theme` blocks in `src/styles/global.css` to define base variables.
+- **Dynamic CSS Injection**: In `PageLayout.astro`, inject a `<style>` block that maps `config.theme.overrides` to HSL variables. This allows users to tweak the theme without touching the CSS files.
+- **Component-Level Theming**: Use `class-variance-authority` (CVA) in components to support different styles for different themes.
+
+## 4. Asset Management
+
+- Centralize all asset paths in the configuration.
+- Provide a clear directory structure for user-provided assets (e.g., `public/user-assets/`) to avoid merge conflicts with framework updates.
+
+## 5. Content Bootstrapping & "Clean" Script
+
+To help users start fresh:
+- **`npm run framework:clean`**: A script that removes the "Giwan" demo content (blog posts in `src/pages/blog` and data in `src/data`) while keeping the directory structure intact.
+- **Placeholder Content**: Provide a "Hello World" template for the first blog post and a basic configuration.
+
+## 6. Maintainability & Upstream Sync
+
+- **Template Repository Strategy**: Mark the repo as a GitHub Template.
+- **Upstream Sync Guide**: Provide documentation on how users can pull updates from the core framework into their forks using `git remote add framework`.
+- **Decoupling Data**: Ensure all user-specific data (blog posts, tools data) is isolated from framework logic to minimize merge conflicts.
+
+## 7. Implementation Roadmap
+
+### Phase 1: Core Refactoring (Validation & Config)
+- Implement Zod schemas.
+- Update all components to pull from the validated config.
+
+### Phase 2: Routing & Logic (Features & Homepage)
+- Implement the dynamic `index.astro`.
+- Add middleware for route guarding.
+
+### Phase 3: Theming & Assets
+- Finalize the multi-theme CSS architecture.
+- Centralize asset handling.
+
+### Phase 4: Developer Experience (Scripts & Docs)
+- Create the `framework:clean` script.
+- Write comprehensive "Quick Start" and "Upstream Sync" documentation.
+
+## 8. Senior-Level Verification
+
+- **Edge Case Testing**: Verify build behavior when features are toggled off.
+- **Schema Validation**: Ensure the app fails gracefully with descriptive errors if the config is invalid.
+- **Performance Audit**: Use Lighthouse to ensure that adding framework layers doesn't impact the current high performance (especially PWA and SSR).
diff --git a/astro.config.ts b/astro.config.ts
index 002f9870..047a3679 100644
--- a/astro.config.ts
+++ b/astro.config.ts
@@ -7,7 +7,7 @@ import tailwindcss from "@tailwindcss/vite";
 import sitemap from "@astrojs/sitemap";
 import headersIntegration from "./src/integrations/headers";
 import pwaValidationIntegration from "./src/integrations/pwaValidation";
-import { SITE_CONFIG, PWA_CONFIG } from "./src/config";
+import { SITE_CONFIG, PWA_CONFIG, CONFIG } from "./src/config";
 
 // https://astro.build/config
 // https://docs.astro.build/en/guides/server-side-rendering/#enabling-ssr-in-your-project
@@ -16,116 +16,123 @@ export default defineConfig({
     vite: {
         plugins: [tailwindcss()],
     },
-    integrations: [mdx(), react(), sitemap(), headersIntegration(), VitePWA({
-        scope: '/',
-        registerType: 'prompt',
-        manifestFilename: 'manifest.json',
-        minify: false,
-        manifest: {
-            name: PWA_CONFIG.name,
-            short_name: PWA_CONFIG.shortName,
-            description: PWA_CONFIG.description,
-            lang: PWA_CONFIG.lang,
-            dir: PWA_CONFIG.dir,
-            icons: PWA_CONFIG.icons,
-            start_url: PWA_CONFIG.startUrl,
-            scope: PWA_CONFIG.scope,
-            display: PWA_CONFIG.display,
-            orientation: PWA_CONFIG.orientation,
-            theme_color: PWA_CONFIG.themeColor,
-            background_color: PWA_CONFIG.backgroundColor,
-            categories: PWA_CONFIG.categories,
-            prefer_related_applications: false
-        },
-        workbox: {
-            mode: 'development',
-            disableDevLogs: true,
-            navigateFallback: '/offline.html',
-            globPatterns: ['**/*.{js,css,html,ico,png,svg,webp,woff,woff2}'],
-            maximumFileSizeToCacheInBytes: 3 * 1024 * 1024, // 3MB limit
-            // Cache cleanup and management policies
-            cleanupOutdatedCaches: true, // Remove old caches automatically
-            skipWaiting: true, // Activate new service worker immediately
-            clientsClaim: true, // Take control of all clients immediately
-            runtimeCaching: [
-                // Blog posts - stale-while-revalidate, cache last 3 articles visited
-                {
-                    urlPattern: /\/blog\/.*/,
-                    handler: 'StaleWhileRevalidate',
-                    options: {
-                        cacheName: 'blog-posts',
-                        expiration: {
-                            maxEntries: 3, // Store only last 3 articles visited
-                            maxAgeSeconds: 30 * 24 * 60 * 60 // 30 days (1 month)
+    integrations: [
+        mdx(),
+        react(),
+        sitemap(),
+        headersIntegration(),
+        CONFIG.features.enablePWA ? VitePWA({
+            scope: '/',
+            registerType: 'prompt',
+            manifestFilename: 'manifest.json',
+            minify: false,
+            manifest: {
+                name: PWA_CONFIG.name,
+                short_name: PWA_CONFIG.shortName,
+                description: PWA_CONFIG.description,
+                lang: PWA_CONFIG.lang,
+                dir: PWA_CONFIG.dir,
+                icons: PWA_CONFIG.icons,
+                start_url: PWA_CONFIG.startUrl,
+                scope: PWA_CONFIG.scope,
+                display: PWA_CONFIG.display,
+                orientation: PWA_CONFIG.orientation,
+                theme_color: PWA_CONFIG.themeColor,
+                background_color: PWA_CONFIG.backgroundColor,
+                categories: PWA_CONFIG.categories,
+                prefer_related_applications: false
+            },
+            workbox: {
+                mode: 'development',
+                disableDevLogs: true,
+                navigateFallback: '/offline.html',
+                globPatterns: ['**/*.{js,css,html,ico,png,svg,webp,woff,woff2}'],
+                maximumFileSizeToCacheInBytes: 3 * 1024 * 1024, // 3MB limit
+                // Cache cleanup and management policies
+                cleanupOutdatedCaches: true, // Remove old caches automatically
+                skipWaiting: true, // Activate new service worker immediately
+                clientsClaim: true, // Take control of all clients immediately
+                runtimeCaching: [
+                    // Blog posts - stale-while-revalidate, cache last 3 articles visited
+                    {
+                        urlPattern: /\/blog\/.*/,
+                        handler: 'StaleWhileRevalidate',
+                        options: {
+                            cacheName: 'blog-posts',
+                            expiration: {
+                                maxEntries: 3, // Store only last 3 articles visited
+                                maxAgeSeconds: 30 * 24 * 60 * 60 // 30 days (1 month)
+                            }
                         }
-                    }
-                },
-                // Images - cache-first with 1-month expiration and size limits
-                {
-                    urlPattern: /\.(?:png|jpg|jpeg|svg|gif|webp|ico)$/,
-                    handler: 'CacheFirst',
-                    options: {
-                        cacheName: 'images',
-                        expiration: {
-                            maxEntries: 50, // Reasonable limit for images
-                            maxAgeSeconds: 30 * 24 * 60 * 60 // 30 days (1 month)
+                    },
+                    // Images - cache-first with 1-month expiration and size limits
+                    {
+                        urlPattern: /\.(?:png|jpg|jpeg|svg|gif|webp|ico)$/,
+                        handler: 'CacheFirst',
+                        options: {
+                            cacheName: 'images',
+                            expiration: {
+                                maxEntries: 50, // Reasonable limit for images
+                                maxAgeSeconds: 30 * 24 * 60 * 60 // 30 days (1 month)
+                            }
                         }
-                    }
-                },
-                // Static assets - cache-first with optimized limits
-                {
-                    urlPattern: /\.(?:js|css|woff|woff2|ttf|eot)$/,
-                    handler: 'CacheFirst',
-                    options: {
-                        cacheName: 'static-assets',
-                        expiration: {
-                            maxEntries: 30, // Reduced for better cache management
-                            maxAgeSeconds: 30 * 24 * 60 * 60 // 30 days (1 month)
+                    },
+                    // Static assets - cache-first with optimized limits
+                    {
+                        urlPattern: /\.(?:js|css|woff|woff2|ttf|eot)$/,
+                        handler: 'CacheFirst',
+                        options: {
+                            cacheName: 'static-assets',
+                            expiration: {
+                                maxEntries: 30, // Reduced for better cache management
+                                maxAgeSeconds: 30 * 24 * 60 * 60 // 30 days (1 month)
+                            }
                         }
-                    }
-                },
-                // Google Fonts stylesheets - stale while revalidate
-                {
-                    urlPattern: ({ url }) => url.origin === 'https://fonts.googleapis.com',
-                    handler: 'StaleWhileRevalidate',
-                    options: {
-                        cacheName: 'google-fonts-stylesheets',
-                        expiration: {
-                            maxEntries: 10,
-                            maxAgeSeconds: 30 * 24 * 60 * 60
+                    },
+                    // Google Fonts stylesheets - stale while revalidate
+                    {
+                        urlPattern: ({ url }) => url.origin === 'https://fonts.googleapis.com',
+                        handler: 'StaleWhileRevalidate',
+                        options: {
+                            cacheName: 'google-fonts-stylesheets',
+                            expiration: {
+                                maxEntries: 10,
+                                maxAgeSeconds: 30 * 24 * 60 * 60
+                            }
                         }
-                    }
-                },
-                // Google Fonts files - cache first
-                {
-                    urlPattern: ({ url }) => url.origin === 'https://fonts.gstatic.com',
-                    handler: 'CacheFirst',
-                    options: {
-                        cacheName: 'google-fonts-webfonts',
-                        expiration: {
-                            maxEntries: 10,
-                            maxAgeSeconds: 365 * 24 * 60 * 60
-                        },
-                        cacheableResponse: {
-                            statuses: [0, 200]
+                    },
+                    // Google Fonts files - cache first
+                    {
+                        urlPattern: ({ url }) => url.origin === 'https://fonts.gstatic.com',
+                        handler: 'CacheFirst',
+                        options: {
+                            cacheName: 'google-fonts-webfonts',
+                            expiration: {
+                                maxEntries: 10,
+                                maxAgeSeconds: 365 * 24 * 60 * 60
+                            },
+                            cacheableResponse: {
+                                statuses: [0, 200]
+                            }
                         }
-                    }
-                },
-                // API calls - network-first
-                {
-                    urlPattern: /\/api\/.*/,
-                    handler: 'NetworkFirst',
-                    options: {
-                        cacheName: 'api-cache',
-                        expiration: {
-                            maxEntries: 10,
-                            maxAgeSeconds: 24 * 60 * 60 // 24 hours
+                    },
+                    // API calls - network-first
+                    {
+                        urlPattern: /\/api\/.*/,
+                        handler: 'NetworkFirst',
+                        options: {
+                            cacheName: 'api-cache',
+                            expiration: {
+                                maxEntries: 10,
+                                maxAgeSeconds: 24 * 60 * 60 // 24 hours
+                            }
                         }
                     }
-                }
-            ]
-        }
-    }), pwaValidationIntegration()],
+                ]
+            }
+        }) : null,
+        CONFIG.features.enablePWA ? pwaValidationIntegration() : null
+    ].filter(Boolean) as any[],
     output: "static",
     outDir: "./docs",
     markdown: {
diff --git a/package-lock.json b/package-lock.json
index 2d0653da..4b177037 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -32,7 +32,8 @@
                 "react": "^19.2.4",
                 "react-dom": "^19.2.4",
                 "tailwind-merge": "^3.5.0",
-                "tailwindcss": "^4.2.2"
+                "tailwindcss": "^4.2.2",
+                "zod": "^4.3.6"
             },
             "devDependencies": {
                 "@babel/core": "^7.29.0",
@@ -221,15 +222,6 @@
                 "zod": "^4.3.6"
             }
         },
-        "node_modules/@astrojs/rss/node_modules/zod": {
-            "version": "4.3.6",
-            "resolved": "https://registry.npmjs.org/zod/-/zod-4.3.6.tgz",
-            "integrity": "sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg==",
-            "license": "MIT",
-            "funding": {
-                "url": "https://github.com/sponsors/colinhacks"
-            }
-        },
         "node_modules/@astrojs/sitemap": {
             "version": "3.7.2",
             "resolved": "https://registry.npmjs.org/@astrojs/sitemap/-/sitemap-3.7.2.tgz",
@@ -241,15 +233,6 @@
                 "zod": "^4.3.6"
             }
         },
-        "node_modules/@astrojs/sitemap/node_modules/zod": {
-            "version": "4.3.6",
-            "resolved": "https://registry.npmjs.org/zod/-/zod-4.3.6.tgz",
-            "integrity": "sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg==",
-            "license": "MIT",
-            "funding": {
-                "url": "https://github.com/sponsors/colinhacks"
-            }
-        },
         "node_modules/@astrojs/telemetry": {
             "version": "3.3.0",
             "resolved": "https://registry.npmjs.org/@astrojs/telemetry/-/telemetry-3.3.0.tgz",
@@ -9723,15 +9706,6 @@
                 "node": "^20.19.0 || ^22.12.0 || >=23"
             }
         },
-        "node_modules/astro/node_modules/zod": {
-            "version": "4.3.6",
-            "resolved": "https://registry.npmjs.org/zod/-/zod-4.3.6.tgz",
-            "integrity": "sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg==",
-            "license": "MIT",
-            "funding": {
-                "url": "https://github.com/sponsors/colinhacks"
-            }
-        },
         "node_modules/astrojs-compiler-sync": {
             "version": "1.1.1",
             "resolved": "https://registry.npmjs.org/astrojs-compiler-sync/-/astrojs-compiler-sync-1.1.1.tgz",
@@ -10476,6 +10450,16 @@
                 "devtools-protocol": "*"
             }
         },
+        "node_modules/chromium-bidi/node_modules/zod": {
+            "version": "3.25.76",
+            "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.76.tgz",
+            "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==",
+            "dev": true,
+            "license": "MIT",
+            "funding": {
+                "url": "https://github.com/sponsors/colinhacks"
+            }
+        },
         "node_modules/ci-info": {
             "version": "4.4.0",
             "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-4.4.0.tgz",
@@ -24431,10 +24415,9 @@
             }
         },
         "node_modules/zod": {
-            "version": "3.25.76",
-            "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.76.tgz",
-            "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==",
-            "dev": true,
+            "version": "4.3.6",
+            "resolved": "https://registry.npmjs.org/zod/-/zod-4.3.6.tgz",
+            "integrity": "sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg==",
             "license": "MIT",
             "funding": {
                 "url": "https://github.com/sponsors/colinhacks"
diff --git a/package.json b/package.json
index 0595f268..27ca5665 100644
--- a/package.json
+++ b/package.json
@@ -34,7 +34,8 @@
         "tools:freshness": "node scripts/tool-freshness-tracker.js",
         "lint": "eslint src --ext .ts,.tsx,.astro",
         "lint:putout": "npx putout \"src/**/*.{js,ts,tsx,json,md}\"",
-        "lint:putout:fix": "npx putout \"src/**/*.{js,ts,tsx,json,md}\" --fix"
+        "lint:putout:fix": "npx putout \"src/**/*.{js,ts,tsx,json,md}\" --fix",
+        "framework:clean": "node scripts/framework-clean.js"
     },
     "dependencies": {
         "@astrojs/mdx": "^5.0.3",
@@ -61,7 +62,8 @@
         "react": "^19.2.4",
         "react-dom": "^19.2.4",
         "tailwind-merge": "^3.5.0",
-        "tailwindcss": "^4.2.2"
+        "tailwindcss": "^4.2.2",
+        "zod": "^4.3.6"
     },
     "devDependencies": {
         "@babel/core": "^7.29.0",
diff --git a/scripts/framework-clean.js b/scripts/framework-clean.js
new file mode 100644
index 00000000..5c48a7ae
--- /dev/null
+++ b/scripts/framework-clean.js
@@ -0,0 +1,66 @@
+import fs from 'fs';
+import path from 'path';
+
+const BLOG_DIR = path.join(process.cwd(), 'src/pages/blog');
+const DATA_DIR = path.join(process.cwd(), 'src/data');
+
+function cleanDirectory(dir, keepFiles = []) {
+  if (!fs.existsSync(dir)) return;
+
+  const files = fs.readdirSync(dir);
+  for (const file of files) {
+    if (keepFiles.includes(file)) continue;
+
+    const filePath = path.join(dir, file);
+    const stat = fs.statSync(filePath);
+
+    if (stat.isDirectory()) {
+      fs.rmSync(filePath, { recursive: true, force: true });
+    } else {
+      fs.unlinkSync(filePath);
+    }
+  }
+}
+
+console.log('🧹 Cleaning demo content...');
+
+// Clean blog posts but keep a template
+const templatePost = `---
+title: "Welcome to your new Framework Blog"
+description: "This is your first post. You can edit or delete this in src/pages/blog/hello-world/index.mdx"
+pubDate: "${new Date().toISOString().split('T')[0]}"
+heroImage: "/placeholder-social.jpg"
+---
+
+Welcome! This blog was bootstrapped using the Astro Framework.
+`;
+
+cleanDirectory(BLOG_DIR);
+const helloWorldDir = path.join(BLOG_DIR, 'hello-world');
+if (!fs.existsSync(helloWorldDir)) fs.mkdirSync(helloWorldDir, { recursive: true });
+fs.writeFileSync(path.join(helloWorldDir, 'index.mdx'), templatePost);
+
+// All individual tool data files mentioned in src/data/tools.ts
+const toolFiles = [
+    'readingTools.ts', 'designTools.ts', 'developerTools.ts',
+    'softwareTools.ts', 'writingTools.ts', 'projectManagementTools.ts',
+    'socialTools.ts', 'dataTools.ts', 'wireframeTools.ts',
+    'searchTools.ts', 'ideAgentTools.ts', 'hostingTools.ts',
+    'frameworkTools.ts', 'testingTools.ts', 'monitoringTools.ts'
+];
+
+// Clean data tools
+const essentialFiles = ['categories.ts', 'labels.ts', 'tools.ts'];
+cleanDirectory(DATA_DIR, essentialFiles);
+
+// Reset individual tool files to empty arrays
+for (const file of toolFiles) {
+    const filePath = path.join(DATA_DIR, file);
+    fs.writeFileSync(filePath, 'export default [];\n');
+}
+
+// Ensure categories.ts has a clean list
+const cleanCategories = `export const categoriesList = ["all"];\nexport default {};\n`;
+fs.writeFileSync(path.join(DATA_DIR, 'categories.ts'), cleanCategories);
+
+console.log('✅ Framework cleaned and ready for your content!');
diff --git a/src/__tests__/config.test.ts b/src/__tests__/config.test.ts
new file mode 100644
index 00000000..8980777f
--- /dev/null
+++ b/src/__tests__/config.test.ts
@@ -0,0 +1,88 @@
+import { FrameworkConfigSchema } from '../schemas/config';
+
+describe('Framework Configuration Schema', () => {
+  it('validates a valid configuration', () => {
+    const validConfig = {
+      site: {
+        title: 'Test Blog',
+        description: 'A test description',
+        author: 'Test Author',
+        siteUrl: 'https://example.com',
+        social: {
+          twitter: '@test',
+        },
+      },
+      navigation: {
+        header: [{ label: 'Home', href: '/' }],
+        footer: [{ label: 'Privacy', href: '/privacy' }],
+      },
+      features: {
+        enableSearch: true,
+      },
+      theme: {
+        active: 'minimal',
+      },
+      routing: {
+        homepage: 'blog',
+      },
+      assets: {
+        favicon: '/favicon.svg',
+      },
+      publication: {
+          issueNumber: 1
+      }
+    };
+
+    const result = FrameworkConfigSchema.safeParse(validConfig);
+    expect(result.success).toBe(true);
+  });
+
+  it('fails on invalid configuration (missing site title)', () => {
+    const invalidConfig = {
+      site: {
+        description: 'Missing title',
+        author: 'Test Author',
+        siteUrl: 'https://example.com',
+      },
+    };
+
+    const result = FrameworkConfigSchema.safeParse(invalidConfig);
+    expect(result.success).toBe(false);
+  });
+
+  it('fails on invalid URL', () => {
+    const invalidConfig = {
+      site: {
+        title: 'Test Blog',
+        description: 'Test description',
+        author: 'Test Author',
+        siteUrl: 'not-a-url',
+      },
+    };
+
+    const result = FrameworkConfigSchema.safeParse(invalidConfig);
+    expect(result.success).toBe(false);
+  });
+
+  it('applies default values', () => {
+    const minimalConfig = {
+        site: {
+          title: 'Test Blog',
+          description: 'A test description',
+          author: 'Test Author',
+          siteUrl: 'https://example.com',
+          social: {},
+        },
+        navigation: {
+          header: [],
+          footer: [],
+        }
+    };
+
+    const result = FrameworkConfigSchema.parse(minimalConfig);
+    expect(result.site.lang).toBe('en');
+    expect(result.features.enableSearch).toBe(true);
+    expect(result.theme.active).toBe('newspaper');
+    expect(result.routing.homepage).toBe('blog');
+  });
+});
diff --git a/src/components/BaseHead.astro b/src/components/BaseHead.astro
index 078f6964..d7301be9 100644
--- a/src/components/BaseHead.astro
+++ b/src/components/BaseHead.astro
@@ -4,6 +4,7 @@
 import "../styles/global.css";
 import "../styles/enhanced-transitions.css";
 import {
+    CONFIG,
     SITE_CONFIG,
     PWA_CONFIG,
     APPLE_TOUCH_ICONS,
@@ -65,13 +66,13 @@ const {
 
 <!-- Optimized viewport for PWA -->
 <meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover" />
-<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+<link rel="icon" type="image/svg+xml" href={CONFIG.assets.favicon} />
 
 <!-- PWA Manifest -->
-<link rel="manifest" href="/manifest.json" />
+{CONFIG.features.enablePWA && <link rel="manifest" href="/manifest.json" />}
 
 <!-- RSS Feed Discovery -->
-<link rel="alternate" type="application/rss+xml" title={SITE_CONFIG.title} href={new URL("rss.xml", Astro.site)} />
+{CONFIG.features.enableRSS && <link rel="alternate" type="application/rss+xml" title={SITE_CONFIG.title} href={new URL("rss.xml", Astro.site)} />}
 
 <!-- Apple PWA Meta Tags -->
 <meta name="mobile-web-app-capable" content="yes" />
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index e393fe3a..632732d0 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -1,6 +1,15 @@
 ---
 import Logo from "./Header/HeaderLogo";
+import { CONFIG } from "../config";
 const today = new Date();
+
+const footerLinks = CONFIG.navigation.footer.filter(link => {
+    if (link.href === "/tools" && !CONFIG.features.enableToolsPage) return false;
+    if (link.href === "/search" && !CONFIG.features.enableSearch) return false;
+    return true;
+});
+
+const socialLinks = Object.entries(CONFIG.site.social).filter(([_, value]) => !!value);
 ---
 
 <footer id="footer" class="mt-12 border-t pt-8 pb-12" role="contentinfo" transition:name="footer">
@@ -8,26 +17,34 @@ const today = new Date();
     <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-8">
       <div class="text-left" transition:name="footer-brand">
         <Logo />
-        <p class="mb-4 text-sm">Exploring code and technology - delivered with clarity and insight.</p>
-        <p class="text-xs">&copy; {today.getFullYear()} G1. All rights reserved.</p>
+        <p class="mb-4 text-sm">{CONFIG.site.description}</p>
+        <p class="text-xs">&copy; {today.getFullYear()} {CONFIG.site.author}. All rights reserved.</p>
       </div>
       
       <div class="text-left" transition:name="footer-categories">
-        <h2 class="text-lg text-foreground font-bold mb-4 uppercase tracking-wider">Categories</h2>
+        <h2 class="text-lg text-foreground font-bold mb-4 uppercase tracking-wider">Links</h2>
         <ul class="space-y-2">
-          <li><a href="/" class="link-hover">Articles</a></li>
-          <li><a href="/tools" class="link-hover">Tools</a></li>
-          <li><a href="/search" class="link-hover">Search</a></li>
-          <li><a href="/about" class="link-hover">About</a></li>
+          {footerLinks.map(link => (
+            <li><a href={link.href} class="link-hover">{link.label}</a></li>
+          ))}
         </ul>
       </div>
       
       <div class="text-left" transition:name="footer-connect">
         <h2 class="text-lg text-foreground font-bold mb-4 uppercase tracking-wider">Connect</h2>
         <ul class="space-y-2">
-          <li><a href="/contact" class="link-hover">Contact</a></li>
-          <li><a href="/rss.xml" class="link-hover">RSS Feed</a></li>
-          <li><a href="https://github.com/giwan" class="link-hover" rel="noopener noreferrer" target="_blank">GitHub</a></li>
+          {socialLinks.map(([key, value]) => {
+              let href = value;
+              if (key === 'twitter') href = `https://twitter.com/${value}`;
+              if (key === 'github') href = `https://github.com/${value}`;
+              if (key === 'linkedin') href = `https://linkedin.com/in/${value}`;
+              if (key === 'email') href = `mailto:${value}`;
+
+              return (
+                <li><a href={href} class="link-hover" rel="noopener noreferrer" target="_blank" style="text-transform: capitalize;">{key}</a></li>
+              )
+          })}
+          {CONFIG.features.enableRSS && <li><a href="/rss.xml" class="link-hover">RSS Feed</a></li>}
         </ul>
       </div>
     </div>
diff --git a/src/components/Header.astro b/src/components/Header.astro
index 63a3ac79..95ab4f89 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -3,7 +3,7 @@ import HeaderNav from "./HeaderNav/HeaderNav.astro";
 import Logo from "./Header/HeaderLogo";
 import { ThemeToggle } from "./ThemeToggle";
 import { formatDateWithOptions } from "../utils/helpers.ts";
-import { SITE_DESCRIPTION, SITE_DATE, PUBLICATION_INFO } from "../config";
+import { SITE_DATE, PUBLICATION_INFO } from "../config";
 const currentDate = formatDateWithOptions(new Date().toString());
 ---
 
diff --git a/src/components/Header/HeaderLogo.tsx b/src/components/Header/HeaderLogo.tsx
index 306831dc..73921921 100644
--- a/src/components/Header/HeaderLogo.tsx
+++ b/src/components/Header/HeaderLogo.tsx
@@ -2,7 +2,7 @@
  * The site logo - newspaper style masthead
  */
 import React from "react";
-import { SITE_CONFIG } from "@/config";
+import { CONFIG } from "@/config";
 
 const HeaderLogo = () => (
     <div className="flex flex-col">
@@ -15,8 +15,8 @@ export default HeaderLogo;
 function Logo() {
     return (
         <p className="font-heading text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight text-primary mb-1">
-            <a href="/" className="hover:opacity-90 transition-opacity" aria-label={`${SITE_CONFIG.title} home`}>
-                G1
+            <a href="/" className="hover:opacity-90 transition-opacity" aria-label={`${CONFIG.site.title} home`}>
+                {CONFIG.site.logoText || CONFIG.site.title}
             </a>
         </p>
     );
diff --git a/src/components/HeaderNav/HeaderNav.astro b/src/components/HeaderNav/HeaderNav.astro
index ed48f36e..56d4d72e 100644
--- a/src/components/HeaderNav/HeaderNav.astro
+++ b/src/components/HeaderNav/HeaderNav.astro
@@ -1,7 +1,13 @@
 ---
 import HeaderLink from "../HeaderLink.astro";
-import links from "./headerLinks.json";
+import { CONFIG } from "../../config";
 import HeaderNavMobile from "./HeaderNavMobile"; // jsx component
+
+const links = CONFIG.navigation.header.filter(link => {
+    if (link.href === "/tools" && !CONFIG.features.enableToolsPage) return false;
+    if (link.href === "/search" && !CONFIG.features.enableSearch) return false;
+    return true;
+});
 ---
 
 <nav id="navigation" aria-label="Main navigation" transition:name="navigation">
@@ -11,7 +17,7 @@ import HeaderNavMobile from "./HeaderNavMobile"; // jsx component
         transition:name="desktop-navigation"
     >
         {
-            links.map(({ href, label }, index) => (
+            links.map(({ href, label }) => (
                 <HeaderLink
                     href={href}
                     class="font-medium text-foreground hover:bg-accent focus:bg-accent focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background transition-colors duration-200 rounded-sm text-base"
diff --git a/src/components/HeaderNav/MobileMenu.jsx b/src/components/HeaderNav/MobileMenu.jsx
index 86634072..2c2e2231 100644
--- a/src/components/HeaderNav/MobileMenu.jsx
+++ b/src/components/HeaderNav/MobileMenu.jsx
@@ -1,12 +1,18 @@
 import { useStore } from "@nanostores/react";
 import { $isMobileMenuOpen } from "../../stores/mobileMenuStore";
-import headerNavData from "./headerLinks.json";
+import { CONFIG } from "../../config";
 
 const MobileMenu = ({ onClose }) => {
   const isOpen = useStore($isMobileMenuOpen);
   
   if (!isOpen) return null;
 
+  const links = CONFIG.navigation.header.filter(link => {
+    if (link.href === "/tools" && !CONFIG.features.enableToolsPage) return false;
+    if (link.href === "/search" && !CONFIG.features.enableSearch) return false;
+    return true;
+  });
+
   return (
     <div className="mobile-menu-container fixed inset-0 bg-background border-r border-border" style={{ position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, zIndex: 9999 }}>
       <div className="p-4 bg-background text-foreground flex justify-between items-center border-b border-border">
@@ -22,7 +28,7 @@ const MobileMenu = ({ onClose }) => {
       
       <nav id="mobile-navigation" aria-label="Mobile navigation" className="p-6">
         <ul className="space-y-6">
-          {headerNavData.map(({ label, href }) => (
+          {links.map(({ label, href }) => (
             <li key={href} className="border-b border-border pb-4 last:border-b-0">
               <a 
                 href={href}
diff --git a/src/components/SEO.astro b/src/components/SEO.astro
index 0dbc0092..fe035970 100644
--- a/src/components/SEO.astro
+++ b/src/components/SEO.astro
@@ -47,7 +47,7 @@ const type = article ? 'article' : 'website';
 <meta property="og:image" content={socialImageURL} />
 <meta property="og:image:alt" content={title} />
 <meta property="og:site_name" content={SITE_CONFIG.title} />
-<meta property="og:locale" content="en_UK" />
+<meta property="og:locale" content={SITE_CONFIG.lang.replace('-', '_')} />
 
 <!-- Article Specific Open Graph Tags -->
 {article && (
@@ -68,5 +68,9 @@ const type = article ? 'article' : 'website';
 <meta property="twitter:title" content={title} />
 <meta property="twitter:description" content={description} />
 <meta property="twitter:image" content={socialImageURL} />
-<meta property="twitter:site" content={SITE_CONFIG.social.twitter} />
-<meta property="twitter:creator" content={SITE_CONFIG.social.twitter} />
+{SITE_CONFIG.social.twitter && (
+    <>
+        <meta property="twitter:site" content={SITE_CONFIG.social.twitter.startsWith('@') ? SITE_CONFIG.social.twitter : `@${SITE_CONFIG.social.twitter}`} />
+        <meta property="twitter:creator" content={SITE_CONFIG.social.twitter.startsWith('@') ? SITE_CONFIG.social.twitter : `@${SITE_CONFIG.social.twitter}`} />
+    </>
+)}
diff --git a/src/config.ts b/src/config.ts
index 334e6bf3..9b91f28f 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -1,92 +1,112 @@
-// Place any global data in this file.
-// You can import this data from anywhere in your site by using the `import` keyword.
+import { FrameworkConfigSchema, type FrameworkConfig } from "./schemas/config";
 
-export const SITE_CONFIG = {
-  title: "Giwan's Blog",
-  description: "Personal technical blog by Giwan – built with Astro.",
-  lang: "en",
-  dir: "ltr",
-  siteUrl: "https://giwan.github.io",
-  author: "Giwan",
-  social: {
-    twitter: "@giwan",
-    github: "giwan",
-    linkedin: "giwan",
-    mastodon: "https://mastodon.social/@giwan",
-    email: "giwan@mytoori.com",
+/**
+ * Validates and exports the framework configuration.
+ * For users: Edit this object to customize your site.
+ */
+const rawConfig = {
+  site: {
+    title: "Framework Demo",
+    description: "Testing the framework features.",
+    author: "Framework Tester",
+    logoText: "FT",
+    siteUrl: "https://example.com",
+    lang: "en",
+    dir: "ltr",
+    social: {
+      github: "framework",
+    },
+  },
+  navigation: {
+    header: [
+      { label: "Home", href: "/" },
+      { label: "Tools", href: "/tools" },
+    ],
+    footer: [
+      { label: "Privacy", href: "/privacy" },
+    ],
+  },
+  features: {
+    enableSearch: false,
+    enablePWA: true,
+    enableToolsPage: true,
+    enableRSS: false,
+  },
+  theme: {
+    active: "modern",
+    themeColor: "#3b82f6",
+    backgroundColor: "#f8fafc",
+  },
+  routing: {
+    homepage: "tools",
+  },
+  assets: {
+    favicon: "/favicon.svg",
+    defaultHeroImage: "/placeholder-social.jpg",
+  },
+  publication: {
+    issueNumber: 1,
   },
-  umamiWebsiteId: "0650b7e5-4c3a-44e4-9af7-b058f1a00a9e",
-};
-
-export const THEME_CONFIG = {
-  themeColor: "#272822",
-  backgroundColor: "#808080",
 };
 
-export const PWA_ICONS = [
-  { src: "/icons/16.png", sizes: "16x16", type: "image/png" },
-  { src: "/icons/32.png", sizes: "32x32", type: "image/png" },
-  { src: "/icons/64.png", sizes: "64x64", type: "image/png" },
-  { src: "/icons/72.png", sizes: "72x72", type: "image/png" },
-  { src: "/icons/android-launchericon-96-96.png", sizes: "96x96", type: "image/png" },
-  { src: "/icons/128.png", sizes: "128x128", type: "image/png" },
-  { src: "/icons/144.png", sizes: "144x144", type: "image/png" },
-  { src: "/icons/152.png", sizes: "152x152", type: "image/png" },
-  { src: "/icons/167.png", sizes: "167x167", type: "image/png" },
-  { src: "/icons/180.png", sizes: "180x180", type: "image/png" },
-  { src: "/icons/192.png", sizes: "192x192", type: "image/png" },
-  { src: "/icons/256.png", sizes: "256x256", type: "image/png" },
-  { src: "/icons/512.png", sizes: "512x512", type: "image/png" },
-  { src: "/icons/512-maskable.png", sizes: "512x512", type: "image/png", purpose: "maskable" },
-  { src: "/icons/1024.png", sizes: "1024x1024", type: "image/png" },
-];
+const result = FrameworkConfigSchema.safeParse(rawConfig);
 
-export const APPLE_TOUCH_ICONS = [
-  { href: "/icons/180.png" },
-  { href: "/icons/152.png", sizes: "152x152" },
-  { href: "/icons/167.png", sizes: "167x167" },
-];
-
-export const APPLE_SPLASH_SCREENS = [
-  { href: "/icons/SplashScreen.scale-200.png", media: "(max-device-width: 480px)" },
-  { href: "/icons/SplashScreen.scale-400.png", media: "(min-device-width: 481px)" },
-  { href: "/icons/SplashScreen.scale-100.png" },
-];
-
-export const WINDOWS_TILE_ICONS = {
-  tileColor: THEME_CONFIG.themeColor,
-  tileImage: "/icons/144.png",
-  square70: "/icons/SmallTile.scale-100.png",
-  square150: "/icons/Square150x150Logo.scale-100.png",
-  wide310: "/icons/Wide310x150Logo.scale-100.png",
-  square310: "/icons/LargeTile.scale-100.png",
-};
+if (!result.success) {
+  console.error("❌ Configuration validation failed:");
+  result.error.issues.forEach((issue) => {
+    console.error(` - [${issue.path.join(".")}] ${issue.message}`);
+  });
+  throw new Error("Framework initialization aborted due to invalid configuration.");
+}
 
+export const CONFIG: FrameworkConfig = result.data;
+export const SITE_CONFIG = CONFIG.site;
+export const THEME_CONFIG = CONFIG.theme;
 export const PWA_CONFIG = {
-  name: SITE_CONFIG.title,
-  shortName: "G1",
-  description: SITE_CONFIG.description,
+  name: CONFIG.site.title,
+  shortName: CONFIG.site.logoText || "Blog",
+  description: CONFIG.site.description,
   scope: "/",
   startUrl: "/",
-  display: "standalone",
-  orientation: "portrait-primary",
-  lang: SITE_CONFIG.lang,
-  dir: SITE_CONFIG.dir,
-  categories: ["blog", "technology", "development"],
-  themeColor: THEME_CONFIG.themeColor,
-  backgroundColor: THEME_CONFIG.backgroundColor,
-  icons: PWA_ICONS,
+  display: "standalone" as const,
+  orientation: "portrait-primary" as const,
+  lang: CONFIG.site.lang,
+  dir: CONFIG.site.dir,
+  categories: ["blog"],
+  themeColor: CONFIG.theme.themeColor,
+  backgroundColor: CONFIG.theme.backgroundColor,
+  icons: [
+    {
+      src: "/icons/192.png",
+      sizes: "192x192",
+      type: "image/png",
+      purpose: "any",
+    },
+    {
+      src: "/icons/512.png",
+      sizes: "512x512",
+      type: "image/png",
+      purpose: "any",
+    },
+    {
+      src: "/icons/512-maskable.png",
+      sizes: "512x512",
+      type: "image/png",
+      purpose: "maskable",
+    },
+  ],
 };
-
-export const ASSETS = {
-  defaultHeroImage: "/placeholder-social.jpg",
-  favicon: "/favicon.svg",
-};
-
-export const PUBLICATION_INFO = {
-  currentIssue: 42,
-};
-
-export const SITE_TITLE = SITE_CONFIG.title;
-export const SITE_DESCRIPTION = SITE_CONFIG.description;
+export const APPLE_TOUCH_ICONS = [
+  {
+    src: "/icons/180.png",
+    sizes: "180x180",
+    type: "image/png",
+  },
+];
+export const APPLE_SPLASH_SCREENS = [];
+export const WINDOWS_TILE_ICONS = { tileColor: "#000", tileImage: "" };
+export const ASSETS = CONFIG.assets;
+export const PUBLICATION_INFO = { currentIssue: CONFIG.publication.issueNumber || 1 };
+export const SITE_TITLE = CONFIG.site.title;
+export const SITE_DESCRIPTION = CONFIG.site.description;
 export const SITE_DATE = new Date().toISOString().split("T")[0];
diff --git a/src/layouts/BlogArticle.astro b/src/layouts/BlogArticle.astro
index a2b312b7..e0f7137e 100644
--- a/src/layouts/BlogArticle.astro
+++ b/src/layouts/BlogArticle.astro
@@ -1,6 +1,7 @@
 ---
 import type { MarkdownLayoutProps } from 'astro';
 import PageLayout from './PageLayout.astro';
+import { SITE_CONFIG, ASSETS } from "../config";
 
 type Props = MarkdownLayoutProps<{
   title: string;
@@ -90,26 +91,27 @@ const articleSchema = {
   },
   "datePublished": isoDate,
   "dateModified": isoUpdatedDate,
-  "inLanguage": "en-GB",
+  "inLanguage": SITE_CONFIG.lang || "en-US",
   ...(readTime && { "timeRequired": `PT${readTime}M` }),
   ...(tags.length > 0 && { "keywords": tags.join(", ") }),
   ...(categories.length > 0 && { "articleSection": categories.join(", ") }),
   "author": {
     "@type": "Person",
-    "name": "Giwan Persaud",
-    "url": "https://giwan.github.io",
-    "sameAs": [
-        "https://mastodon.social/@giwan",
-        "https://www.linkedin.com/in/giwan/",
-        "https://github.com/giwan"
-    ]
+    "name": SITE_CONFIG.author,
+    "url": SITE_CONFIG.siteUrl,
+    "sameAs": Object.entries(SITE_CONFIG.social || {}).map(([key, value]) => {
+        if (key === 'twitter') return `https://twitter.com/${value}`;
+        if (key === 'github') return `https://github.com/${value}`;
+        if (key === 'linkedin') return `https://linkedin.com/in/${value}`;
+        return value;
+    }).filter(v => v.startsWith('http'))
   },
   "publisher": {
     "@type": "Organization",
-    "name": "Giwan's Blog",
+    "name": SITE_CONFIG.title,
     "logo": {
       "@type": "ImageObject",
-      "url": new URL("/favicon.svg", Astro.site).toString(),
+      "url": new URL(ASSETS.favicon, Astro.site).toString(),
       "width": 60,
       "height": 60
     }
@@ -128,7 +130,7 @@ const articleSchema = {
     article: true,
     publishedTime: isoDate,
     modifiedTime: isoUpdatedDate,
-    author: "Giwan Persaud",
+    author: SITE_CONFIG.author,
     section: categories[0],
     tags: tags,
     keywords: tags
@@ -164,7 +166,7 @@ const articleSchema = {
       <!-- Metadata Row -->
       <div class="flex flex-col items-center gap-2 text-sm font-bold uppercase tracking-tighter text-muted-foreground">
         <div class="flex items-center gap-2">
-            <span>By Giwan Persaud</span>
+            <span>By {SITE_CONFIG.author}</span>
             <span class="w-1 h-1 bg-border rounded-full"></span>
             <time datetime={isoDate}>{formattedDate}</time>
         </div>
@@ -211,26 +213,22 @@ const articleSchema = {
       <!-- Share and Related Articles -->
       <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center">
         <div class="mb-4 sm:mb-0">
-          <h3 class="text-sm uppercase tracking-wider text-muted-foreground mb-2">Share this article</h3>
+          <h3 class="text-sm uppercase tracking-wider text-muted-foreground mb-2">Connect</h3>
           <div class="flex space-x-3" role="list">
-            <a href="https://mastodon.social/@giwan" class="text-muted-foreground hover:text-primary focus:text-primary transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 rounded-sm p-1" rel="me" role="listitem">
-              <span class="sr-only">Follow on Mastodon</span>
-              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-                <path d="M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38.265-.061.527-.132.786-.213.585-.184 1.27-.39 1.774-.753a.057.057 0 0 0 .023-.043v-1.809a.052.052 0 0 0-.02-.041.053.053 0 0 0-.046-.01 20.282 20.282 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.593 5.593 0 0 1-.319-1.433.053.053 0 0 1 .066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422.038-.008.077-.015.11-.024 2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545z"/>
-              </svg>
-            </a>
-            <a href="mailto:giwan@mytoori.com" class="text-muted-foreground hover:text-primary focus:text-primary transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 rounded-sm p-1" role="listitem">
-              <span class="sr-only">Send email</span>
-              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
-              </svg>
-            </a>
-            <a href="https://www.linkedin.com/in/giwan/" class="text-muted-foreground hover:text-primary focus:text-primary transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 rounded-sm p-1" rel="noopener noreferrer" target="_blank" role="listitem">
-              <span class="sr-only">Connect on LinkedIn (opens in new tab)</span>
-              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-                <path d="M20.5 2h-17A1.5 1.5 0 002 3.5v17A1.5 1.5 0 003.5 22h17a1.5 1.5 0 001.5-1.5v-17A1.5 1.5 0 0020.5 2zM8 19H5v-9h3zM6.5 8.25A1.75 1.75 0 118.3 6.5a1.78 1.78 0 01-1.8 1.75zM19 19h-3v-4.74c0-1.42-.6-1.93-1.38-1.93A1.74 1.74 0 0013 14.19V19h-3v-9h2.9v1.3a3.11 3.11 0 012.7-1.4c1.55 0 3.36.86 3.36 3.66z"/>
-              </svg>
-            </a>
+            {Object.entries(SITE_CONFIG.social || {}).map(([key, value]) => {
+                let href = value;
+                if (key === 'twitter') href = `https://twitter.com/${value}`;
+                if (key === 'github') href = `https://github.com/${value}`;
+                if (key === 'linkedin') href = `https://linkedin.com/in/${value}`;
+                if (key === 'email') href = `mailto:${value}`;
+
+                return (
+                  <a href={href} class="text-muted-foreground hover:text-primary focus:text-primary transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 rounded-sm p-1" rel="noopener noreferrer" target="_blank" role="listitem">
+                    <span class="sr-only">{key}</span>
+                    <span class="text-xs font-bold uppercase">{key}</span>
+                  </a>
+                )
+            })}
           </div>
         </div>
         
diff --git a/src/layouts/PageLayout.astro b/src/layouts/PageLayout.astro
index 57612b52..0ea23a50 100644
--- a/src/layouts/PageLayout.astro
+++ b/src/layouts/PageLayout.astro
@@ -6,7 +6,7 @@ import ServiceWorkerUpdateManager from "../components/ServiceWorkerUpdateManager
 import PWAErrorBoundary from "../components/PWAErrorBoundary";
 import ConditionalContent from "../components/ConditionalContent";
 import { AccessibilityControls } from "../components/AccessibilityControls";
-import { SITE_CONFIG } from "../config";
+import { SITE_CONFIG, CONFIG } from "../config";
 import "../styles/global.css";
 
 
@@ -39,6 +39,12 @@ const {
         keywords
     },
 } = Astro.props;
+
+const themeClass = `theme-${CONFIG.theme.active}`;
+const themeOverrides = CONFIG.theme.overrides || {};
+const overrideStyle = Object.entries(themeOverrides)
+    .map(([key, value]) => `--color-${key}: ${value};`)
+    .join(" ");
 ---
 
 <html lang={SITE_CONFIG.lang} dir={SITE_CONFIG.dir} transition:animate="fade">
@@ -60,7 +66,8 @@ const {
     </head>
 
     <body
-        class="bg-background min-h-screen font-sans text-foreground leading-relaxed"
+        class:list={["bg-background min-h-screen font-sans text-foreground leading-relaxed", themeClass]}
+        style={overrideStyle}
     >
         <!-- Skip Navigation Links -->
         <nav class="skip-links" aria-label="Skip navigation">
diff --git a/src/middleware.ts b/src/middleware.ts
new file mode 100644
index 00000000..d9a0f3e4
--- /dev/null
+++ b/src/middleware.ts
@@ -0,0 +1,21 @@
+import { defineMiddleware } from "astro:middleware";
+import { CONFIG } from "./config";
+
+export const onRequest = defineMiddleware((context, next) => {
+    const url = new URL(context.request.url);
+
+    // Feature guards
+    if (url.pathname.startsWith("/tools") && !CONFIG.features.enableToolsPage) {
+        return context.redirect("/");
+    }
+
+    if (url.pathname.startsWith("/search") && !CONFIG.features.enableSearch) {
+        return context.redirect("/");
+    }
+
+    if (url.pathname === "/rss.xml" && !CONFIG.features.enableRSS) {
+        return new Response(null, { status: 404 });
+    }
+
+    return next();
+});
diff --git a/src/pages/index.astro b/src/pages/index.astro
index ec161627..b80b2ab9 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,9 +1,26 @@
 ---
 import ArticlesList from "../components/ArticlesList.astro";
-import { SITE_TITLE, SITE_DESCRIPTION } from "../config";
+import ToolsList from "../components/ToolsList/ToolsList";
+import Categories from "../components/Categories/Categories";
+import { categoriesList as categories } from "../data/categories";
+import { SITE_TITLE, SITE_DESCRIPTION, CONFIG } from "../config";
 import PageLayout from "../layouts/PageLayout.astro";
+
+const category = String(categories[0]);
+const isBlogHomepage = CONFIG.routing.homepage === "blog";
 ---
 
 <PageLayout content={{ title: SITE_TITLE, description: SITE_DESCRIPTION }}>
-    <ArticlesList />
+    {isBlogHomepage ? (
+        <ArticlesList />
+    ) : (
+        <div class="space-y-8">
+            <header>
+                <h1 class="text-3xl font-bold tracking-tight mb-4">Developer Tools</h1>
+                <p class="text-muted-foreground text-lg">A curated collection of useful tools for developers and designers.</p>
+            </header>
+            <Categories client:load {...{ category }} />
+            <ToolsList client:load {...{ category }} />
+        </div>
+    )}
 </PageLayout>
diff --git a/src/schemas/config.ts b/src/schemas/config.ts
new file mode 100644
index 00000000..e3753130
--- /dev/null
+++ b/src/schemas/config.ts
@@ -0,0 +1,65 @@
+import { z } from "zod";
+
+export const FrameworkConfigSchema = z.object({
+  site: z.object({
+    title: z.string().min(1),
+    description: z.string().min(1),
+    author: z.string().min(1),
+    logoText: z.string().optional(),
+    siteUrl: z.string().url(),
+    lang: z.string().default("en"),
+    dir: z.enum(["ltr", "rtl"]).default("ltr"),
+    social: z.object({
+      twitter: z.string().optional(),
+      github: z.string().optional(),
+      linkedin: z.string().optional(),
+      mastodon: z.string().url().optional(),
+      email: z.string().email().optional(),
+    }).default({}),
+    umamiWebsiteId: z.string().optional(),
+  }),
+  navigation: z.object({
+    header: z.array(z.object({ label: z.string(), href: z.string() })).default([]),
+    footer: z.array(z.object({ label: z.string(), href: z.string() })).default([]),
+  }).default({}),
+  features: z.object({
+    enableSearch: z.boolean().default(true),
+    enablePWA: z.boolean().default(true),
+    enableToolsPage: z.boolean().default(false),
+    enableRSS: z.boolean().default(true),
+    enableSitemap: z.boolean().default(true),
+  }).default({
+    enableSearch: true,
+    enablePWA: true,
+    enableToolsPage: false,
+    enableRSS: true,
+    enableSitemap: true,
+  }),
+  theme: z.object({
+    active: z.enum(["newspaper", "minimal", "modern"]).default("newspaper"),
+    themeColor: z.string().default("#272822"),
+    backgroundColor: z.string().default("#808080"),
+    overrides: z.record(z.string()).optional(),
+  }).default({
+    active: "newspaper",
+    themeColor: "#272822",
+    backgroundColor: "#808080",
+  }),
+  routing: z.object({
+    homepage: z.enum(["blog", "tools"]).default("blog"),
+  }).default({
+    homepage: "blog",
+  }),
+  assets: z.object({
+    favicon: z.string().default("/favicon.svg"),
+    defaultHeroImage: z.string().default("/placeholder-social.jpg"),
+  }).default({
+    favicon: "/favicon.svg",
+    defaultHeroImage: "/placeholder-social.jpg",
+  }),
+  publication: z.object({
+    issueNumber: z.number().optional(),
+  }).default({}),
+});
+
+export type FrameworkConfig = z.infer<typeof FrameworkConfigSchema>;
diff --git a/src/styles/global.css b/src/styles/global.css
index ee04a9a9..d2c941b7 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -63,6 +63,9 @@
   --color-card-foreground: hsl(0 0% 98%);
 }
 
+/* Import Theme Variations */
+@import './themes.css';
+
 /* Import performance fallbacks */
 @import './performance-fallbacks.css';
 
diff --git a/src/styles/themes.css b/src/styles/themes.css
new file mode 100644
index 00000000..070c9878
--- /dev/null
+++ b/src/styles/themes.css
@@ -0,0 +1,62 @@
+/* Newspaper Theme (Default) */
+.theme-newspaper {
+  --color-background: hsl(36 33% 98%);
+  --color-foreground: hsl(240 6% 10%);
+  --color-primary: hsl(240 6% 10%);
+  --color-secondary: hsl(36 20% 94%);
+  --color-muted: hsl(36 20% 94%);
+  --color-muted-foreground: hsl(240 4% 45%);
+  --color-border: hsl(20 10% 88%);
+}
+
+.theme-newspaper.dark {
+  --color-background: hsl(240 10% 3.9%);
+  --color-foreground: hsl(0 0% 98%);
+  --color-primary: hsl(0 0% 98%);
+  --color-secondary: hsl(240 3.7% 15.9%);
+  --color-muted: hsl(240 3.7% 15.9%);
+  --color-muted-foreground: hsl(240 5% 64.9%);
+  --color-border: hsl(240 3.7% 15.9%);
+}
+
+/* Minimal Theme */
+.theme-minimal {
+  --color-background: hsl(0 0% 100%);
+  --color-foreground: hsl(0 0% 0%);
+  --color-primary: hsl(0 0% 0%);
+  --color-secondary: hsl(0 0% 96%);
+  --color-muted: hsl(0 0% 96%);
+  --color-muted-foreground: hsl(0 0% 40%);
+  --color-border: hsl(0 0% 90%);
+}
+
+.theme-minimal.dark {
+  --color-background: hsl(0 0% 0%);
+  --color-foreground: hsl(0 0% 100%);
+  --color-primary: hsl(0 0% 100%);
+  --color-secondary: hsl(0 0% 10%);
+  --color-muted: hsl(0 0% 10%);
+  --color-muted-foreground: hsl(0 0% 60%);
+  --color-border: hsl(0 0% 20%);
+}
+
+/* Modern Theme */
+.theme-modern {
+  --color-background: hsl(220 33% 98%);
+  --color-foreground: hsl(220 40% 10%);
+  --color-primary: hsl(220 90% 50%);
+  --color-secondary: hsl(220 20% 94%);
+  --color-muted: hsl(220 20% 94%);
+  --color-muted-foreground: hsl(220 10% 45%);
+  --color-border: hsl(220 15% 90%);
+}
+
+.theme-modern.dark {
+  --color-background: hsl(220 40% 5%);
+  --color-foreground: hsl(220 10% 98%);
+  --color-primary: hsl(220 90% 60%);
+  --color-secondary: hsl(220 30% 12%);
+  --color-muted: hsl(220 30% 12%);
+  --color-muted-foreground: hsl(220 10% 65%);
+  --color-border: hsl(220 30% 15%);
+}