diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
index acd1cda..e3fcd0f 100644
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@@ -4,8 +4,6 @@ name: Deploy to GitHub Pages
 on:
   push:
     branches: [ main ]
-  pull_request:
-    branches: [ main ]
 
 # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
 permissions:
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
new file mode 100644
index 0000000..b2245c8
--- /dev/null
+++ b/.github/workflows/test.yml
@@ -0,0 +1,28 @@
+name: Test Build
+
+on:
+  pull_request:
+    branches: [ main ]
+
+jobs:
+  test-build:
+    runs-on: ubuntu-latest
+    
+    steps:
+    - name: Checkout
+      uses: actions/checkout@v4
+      
+    - name: Setup Node.js
+      uses: actions/setup-node@v4
+      with:
+        node-version: '18'
+        cache: 'npm'
+        
+    - name: Install dependencies
+      run: npm ci
+      
+    - name: Test Build
+      run: npm run build
+      env:
+        VITE_SUPABASE_URL: ${{ secrets.VITE_SUPABASE_URL }}
+        VITE_SUPABASE_ANON_KEY: ${{ secrets.VITE_SUPABASE_ANON_KEY }}
\ No newline at end of file
diff --git a/CONTENT_GUIDE.md b/CONTENT_GUIDE.md
new file mode 100644
index 0000000..4fb85a8
--- /dev/null
+++ b/CONTENT_GUIDE.md
@@ -0,0 +1,143 @@
+# Content Management Guide
+
+## Centralized Content Management System
+
+You now have a **single place** to manage all your content! No more managing titles and metadata in multiple places.
+
+## Quick Start - Adding New Content
+
+### 1. Adding a New Blog Post
+
+**Step 1:** Add entry to `/src/config/content-registry.ts` in the `BLOG_REGISTRY` array:
+
+```typescript
+{
+  id: 'my-new-blog-post',
+  title: 'My Amazing New Blog Post',
+  excerpt: 'A brief description of what this post is about',
+  date: '2024-01-20',
+  tags: ['React', 'TypeScript', 'Web Development'],
+  order: 4, // This determines the display order
+  featured: true, // Will show on homepage if true
+  pinned: false, // Optional: pin to top
+  image: 'https://example.com/image.jpg' // Optional: custom image
+}
+```
+
+**Step 2:** Create your markdown file at `/public/content/blog/my-new-blog-post.md`:
+
+```markdown
+# My Amazing New Blog Post
+
+Your blog content goes here. You can write in markdown format.
+
+## Subheading
+
+More content...
+```
+
+**That's it!** Your blog post will automatically appear in the correct order.
+
+### 2. Adding a New Project
+
+**Step 1:** Add entry to the `PROJECT_REGISTRY` array:
+
+```typescript
+{
+  id: 'my-awesome-project',
+  title: 'My Awesome Project',
+  description: 'A brief description of your project',
+  tags: ['React', 'Node.js', 'MongoDB'],
+  githubUrl: 'https://github.com/yourusername/project',
+  demoUrl: 'https://your-project-demo.com', // Optional
+  order: 7,
+  featured: true, // Will show on homepage if true
+}
+```
+
+**Step 2:** Create your project markdown file at `/public/content/projects/my-awesome-project.md`:
+
+```markdown
+# My Awesome Project
+
+Detailed description of your project, installation instructions, usage, etc.
+
+## Features
+
+- Feature 1
+- Feature 2
+
+## Getting Started
+
+Installation and setup instructions...
+```
+
+### 3. Adding a New Publication
+
+**Step 1:** Add entry to the `PUBLICATION_REGISTRY` array:
+
+```typescript
+{
+  id: 'my-research-paper',
+  title: 'My Research Paper Title',
+  date: '2024-01-15',
+  summary: 'A brief summary of your research findings',
+  link: 'https://arxiv.org/abs/your-paper',
+  tags: ['Machine Learning', 'Deep Learning', 'Computer Vision'],
+  order: 5,
+  featured: true, // Will show on homepage if true
+}
+```
+
+**Step 2:** Create your publication markdown file at `/public/content/publications/my-research-paper.md`:
+
+```markdown
+# My Research Paper Title
+
+## Abstract
+
+Your abstract goes here...
+
+## Introduction
+
+Your paper content...
+```
+
+## Key Benefits
+
+1. **Single Source of Truth**: All titles, order, and metadata in one file
+2. **Automatic Ordering**: Content displays in the order you specify
+3. **Featured Control**: Easy toggle for homepage display
+4. **Type Safety**: TypeScript ensures all required fields are present
+5. **Fallback Support**: Markdown frontMatter still works as backup
+
+## Important Notes
+
+- **Order numbers** determine display sequence (1, 2, 3, etc.)
+- **Featured items** appear on the homepage
+- **IDs** must match your markdown filenames exactly
+- **Markdown files** are optional - content can be empty if you only want the registry metadata
+
+## File Structure
+
+```
+/public/content/
+├── blog/
+│   ├── my-blog-post.md
+│   └── another-post.md
+├── projects/
+│   ├── my-project.md
+│   └── another-project.md
+└── publications/
+    ├── my-paper.md
+    └── another-paper.md
+```
+
+## Migration from Old System
+
+Your existing content will continue to work! The new system:
+- Uses registry data as the primary source
+- Falls back to markdown frontMatter if registry entry is missing
+- Maintains backward compatibility
+
+Now you can manage everything from one place! 🎉
\ No newline at end of file
diff --git a/src/App.tsx b/src/App.tsx
index a04dc97..7e9674a 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -5,17 +5,17 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
 import { ThemeProvider } from "@/components/theme-provider";
 import { Layout } from "@/components/layout";
-import Home from "./pages/Home";
-import Projects from "./pages/Projects";
-import Project from "./pages/Project";
-import Blog from "./pages/Blog";
-import BlogPost from "./pages/BlogPost";
-import About from "./pages/About";
-import Publications from "./pages/Publications";
-import Publication from "./pages/Publication";
-import NotFound from "./pages/NotFound";
+import Home from "./pages/home/Home";
+import Projects from "./pages/projects/Projects";
+import Project from "./pages/project/Project";
+import Blog from "./pages/blog/Blog";
+import BlogPost from "./pages/blogpost/BlogPost";
+import About from "./pages/about/About";
+import Publications from "./pages/publications/Publications";
+import Publication from "./pages/publication/Publication";
+import NotFound from "./pages/notfound/NotFound";
 import { sectionConfig } from "./config/sectionConfig";
-import AuthCallback from "@/pages/AuthCallback";
+import AuthCallback from "./pages/authcallback/AuthCallback";
 
 const queryClient = new QueryClient();
 
diff --git a/src/components/CareerTimeline.module.css b/src/components/CareerTimeline.module.css
new file mode 100644
index 0000000..850fa6b
--- /dev/null
+++ b/src/components/CareerTimeline.module.css
@@ -0,0 +1,253 @@
+/* Career Timeline Component CSS Module */
+
+.section {
+  @apply space-y-6;
+}
+
+.title {
+  @apply text-xl font-bold;
+}
+
+.timelineContainer {
+  @apply relative;
+}
+
+.mainTimelineLine {
+  @apply absolute left-6 top-0 bottom-0 w-0.5 bg-gradient-to-b from-primary via-primary/60 to-primary/20;
+}
+
+.timelineItems {
+  @apply space-y-8;
+}
+
+.companyItem {
+  @apply relative;
+}
+
+.companyHeader {
+  @apply relative flex items-start gap-6 mb-4;
+}
+
+.companyNode {
+  @apply relative z-10 flex-shrink-0;
+}
+
+.companyNodeCircle {
+  @apply w-12 h-12 rounded-full bg-gradient-to-br from-primary to-primary/60 shadow-md flex items-center justify-center border-2 border-background;
+}
+
+.companyIcon {
+  @apply w-4 h-4 text-primary-foreground;
+}
+
+.companyConnector {
+  @apply absolute top-6 left-12 w-6 h-0.5 bg-gradient-to-r from-primary/60 to-transparent;
+}
+
+.companyContent {
+  @apply flex-1 min-w-0;
+}
+
+.companyCard {
+  @apply shadow-md border-l-4 border-l-primary bg-primary/5;
+}
+
+.companyCard .cardHeader {
+  @apply px-4 py-3;
+}
+
+.companyCardHeader {
+  @apply pb-2;
+}
+
+.companyInfo {
+  @apply flex flex-wrap items-start justify-between gap-2;
+}
+
+.companyDetails {
+  @apply space-y-1;
+}
+
+.companyName {
+  @apply text-lg font-bold text-foreground;
+}
+
+.locationContainer {
+  @apply flex items-center gap-2 text-muted-foreground;
+}
+
+.locationIcon {
+  @apply w-4 h-4;
+}
+
+.locationText {
+  @apply text-sm;
+}
+
+.periodBadge {
+  @apply flex items-center gap-1 pt-2;
+}
+
+.periodIcon {
+  @apply w-3 h-3;
+}
+
+.rolesSection {
+  @apply ml-12 relative;
+}
+
+.rolesTimelineLine {
+  @apply absolute left-4 top-0 bottom-0 w-0.5 bg-gradient-to-b from-blue-500 via-blue-500/80 to-blue-500/40;
+}
+
+.rolesItems {
+  @apply space-y-6;
+}
+
+.roleItem {
+  @apply relative flex items-start gap-4;
+}
+
+.roleNode {
+  @apply relative z-10 flex-shrink-0;
+}
+
+.roleNodeCircle {
+  @apply w-8 h-8 rounded-full bg-gradient-to-br from-secondary to-secondary/60 shadow-sm flex items-center justify-center border-2 border-background;
+}
+
+.roleNodeDot {
+  @apply w-1.5 h-1.5 rounded-full bg-secondary-foreground;
+}
+
+.roleConnector {
+  @apply absolute top-4 left-8 w-4 h-0.5 bg-gradient-to-r from-secondary/60 to-transparent;
+}
+
+.roleContent {
+  @apply flex-1 min-w-0;
+}
+
+.roleCard {
+  @apply shadow-sm hover:shadow-md transition-all duration-300 border-l-2 border-l-secondary/30;
+}
+
+.roleCard .cardHeader {
+  @apply px-4 py-2;
+}
+
+.roleCard .cardContent {
+  @apply px-4 py-2;
+}
+
+.roleCardHeader {
+  @apply pb-2 pt-3;
+}
+
+.roleInfo {
+  @apply flex flex-wrap items-start justify-between gap-2;
+}
+
+.roleTitle {
+  @apply text-base font-bold text-foreground pt-2;
+}
+
+.roleCardContent {
+  @apply pt-3 space-y-2;
+}
+
+.sectionHeader {
+  @apply font-semibold text-foreground mb-1 flex items-center gap-2 text-sm;
+}
+
+.sectionDot {
+  @apply w-1.5 h-1.5 rounded-full;
+}
+
+.achievementsDot {
+  @apply bg-primary;
+}
+
+.responsibilitiesDot {
+  @apply bg-primary/80;
+}
+
+.milestonesDot {
+  @apply bg-primary/60;
+}
+
+.list {
+  @apply space-y-1 ml-2;
+}
+
+.listItem {
+  @apply text-muted-foreground flex items-start gap-2;
+}
+
+.listItemDot {
+  @apply w-1 h-1 rounded-full mt-2 flex-shrink-0;
+}
+
+.achievementsListDot {
+  @apply bg-secondary;
+}
+
+.responsibilitiesListDot {
+  @apply bg-secondary/80;
+}
+
+.listItemText {
+  @apply text-sm leading-relaxed;
+}
+
+.milestonesGrid {
+  @apply grid gap-2 sm:grid-cols-2 ml-2;
+}
+
+.milestoneItem {
+  @apply bg-muted/50 rounded-md p-2 border border-muted;
+}
+
+.milestoneText {
+  @apply text-xs text-foreground font-medium;
+}
+
+.roleProgression {
+  @apply mt-3 ml-4 flex items-center gap-2 text-muted-foreground;
+}
+
+.progressionLineBefore {
+  @apply flex-1 h-px bg-gradient-to-r from-secondary/20 to-transparent;
+}
+
+.progressionBadge {
+  @apply text-xs font-medium bg-secondary/10 px-2 py-1 rounded-full border border-secondary/20;
+}
+
+.progressionLineAfter {
+  @apply flex-1 h-px bg-gradient-to-l from-secondary/20 to-transparent;
+}
+
+.companyProgression {
+  @apply mt-6 ml-6 flex items-center gap-3 text-muted-foreground;
+}
+
+.companyProgressionLineBefore {
+  @apply flex-1 h-px bg-gradient-to-r from-primary/30 to-transparent;
+}
+
+.companyProgressionBadge {
+  @apply text-xs font-medium bg-muted px-3 py-1 rounded-full;
+}
+
+.companyProgressionLineAfter {
+  @apply flex-1 h-px bg-gradient-to-l from-primary/30 to-transparent;
+}
+
+.timelineEnd {
+  @apply absolute left-6 bottom-0 w-0.5 h-8 bg-gradient-to-b from-primary/20 to-transparent;
+}
+
+.timelineEndDot {
+  @apply absolute left-5 -bottom-1 w-3 h-3 rounded-full bg-primary/20 border-2 border-background;
+}
\ No newline at end of file
diff --git a/src/components/CareerTimeline.tsx b/src/components/CareerTimeline.tsx
index 874cb7d..c8ccf39 100644
--- a/src/components/CareerTimeline.tsx
+++ b/src/components/CareerTimeline.tsx
@@ -1,6 +1,7 @@
 import { Badge } from "@/components/ui/badge";
 import { Card, CardContent, CardHeader } from "@/components/ui/card";
 import { Building, Calendar, MapPin } from "lucide-react";
+import styles from './CareerTimeline.module.css';
 
 interface Role {
   id: string;
@@ -27,44 +28,44 @@ interface CareerTimelineProps {
 
 export function CareerTimeline({ items, title = "Career Journey" }: CareerTimelineProps) {
   return (
-    <section className="space-y-8">
-      <h2 className="text-2xl font-bold">{title}</h2>
+    <section className={styles.section}>
+      <h2 className={styles.title}>{title}</h2>
       
-      <div className="relative">
+      <div className={styles.timelineContainer}>
         {/* Main timeline line */}
-        <div className="absolute left-8 top-0 bottom-0 w-0.5 bg-gradient-to-b from-primary via-primary/60 to-primary/20" />
+        <div className={styles.mainTimelineLine} />
         
         {/* Timeline items */}
-        <div className="space-y-12">
+        <div className={styles.timelineItems}>
           {items.map((item, companyIndex) => (
-            <div key={item.id} className="relative">
+            <div key={item.id} className={styles.companyItem}>
               {/* Company Header */}
-              <div className="relative flex items-start gap-8 mb-6">
+              <div className={styles.companyHeader}>
                 {/* Company timeline node */}
-                <div className="relative z-10 flex-shrink-0">
-                  <div className="w-16 h-16 rounded-full bg-gradient-to-br from-primary to-primary/60 shadow-lg flex items-center justify-center border-4 border-background">
-                    <Building className="w-6 h-6 text-primary-foreground" />
+                <div className={styles.companyNode}>
+                  <div className={styles.companyNodeCircle}>
+                    <Building className={styles.companyIcon} />
                   </div>
                   {/* Connecting line to content */}
-                  <div className="absolute top-8 left-16 w-8 h-0.5 bg-gradient-to-r from-primary/60 to-transparent" />
+                  <div className={styles.companyConnector} />
                 </div>
                 
                 {/* Company header card */}
                 <div className="flex-1 min-w-0">
-                  <Card className="shadow-lg border-l-4 border-l-primary bg-primary/5">
-                    <CardHeader className="pb-4">
-                      <div className="flex flex-wrap items-start justify-between gap-2">
-                        <div className="space-y-1">
-                          <h3 className="text-2xl font-bold text-foreground">{item.company}</h3>
+                  <Card className={styles.companyCard}>
+                    <CardHeader className={`${styles.companyCardHeader} px-4 py-3`}>
+                      <div className={styles.companyInfo}>
+                        <div className={styles.companyDetails}>
+                          <h3 className={styles.companyName}>{item.company}</h3>
                           {item.location && (
-                            <div className="flex items-center gap-2 text-muted-foreground">
-                              <MapPin className="w-4 h-4" />
-                              <span className="text-sm">{item.location}</span>
+                            <div className={styles.locationContainer}>
+                              <MapPin className={styles.locationIcon} />
+                              <span className={styles.locationText}>{item.location}</span>
                             </div>
                           )}
                         </div>
-                        <Badge variant="outline" className="flex items-center gap-1">
-                          <Calendar className="w-3 h-3" />
+                        <Badge variant="outline" className={styles.periodBadge}>
+                          <Calendar className={styles.periodIcon} />
                           {item.overallPeriod}
                         </Badge>
                       </div>
@@ -74,48 +75,47 @@ export function CareerTimeline({ items, title = "Career Journey" }: CareerTimeli
               </div>
 
               {/* Roles Sub-timeline */}
-              <div className="ml-12 relative">
+              <div className={styles.rolesSection}>
                 {/* Sub-timeline line */}
-                <div className="absolute left-6 top-0 bottom-0 w-0.5 bg-gradient-to-b from-secondary via-secondary/60 to-secondary/20" />
+                <div className={styles.rolesTimelineLine} />
                 
-                <div className="space-y-8">
+                <div className={styles.rolesItems}>
                   {item.roles.map((role, roleIndex) => (
                     <div key={role.id} className="relative flex items-start gap-6">
                       {/* Role timeline node */}
                       <div className="relative z-10 flex-shrink-0">
-                        <div className="w-12 h-12 rounded-full bg-gradient-to-br from-secondary to-secondary/60 shadow-md flex items-center justify-center border-3 border-background">
-                          <div className="w-2 h-2 rounded-full bg-secondary-foreground" />
+                        <div className="w-8 h-8 rounded-full bg-gradient-to-br from-blue-500 to-blue-500/60 shadow-md flex items-center justify-center border-2 border-background">
+                          <div className="w-1.5 h-1.5 rounded-full bg-white dark:bg-slate-900" />
                         </div>
                         {/* Connecting line to content */}
-                        <div className="absolute top-6 left-12 w-6 h-0.5 bg-gradient-to-r from-secondary/60 to-transparent" />
+                        <div className="absolute top-4 left-8 w-6 h-0.5 bg-gradient-to-r from-blue-500/60 to-transparent" />
                       </div>
                       
                       {/* Role content card */}
                       <div className="flex-1 min-w-0">
-                        <Card className="shadow-md hover:shadow-lg transition-all duration-300 border-l-4 border-l-secondary/30">
-                          <CardHeader className="pb-3">
-                            <div className="flex flex-wrap items-start justify-between gap-2">
-                              <h4 className="text-lg font-bold text-foreground">{role.title}</h4>
-                              <Badge variant="secondary" className="flex items-center gap-1">
-                                <Calendar className="w-3 h-3" />
+                        <Card className={styles.roleCard}>
+                          <CardHeader className={`${styles.roleCardHeader} px-4 py-2`}>
+                            <div className={styles.roleInfo}>
+                              <h4 className={styles.roleTitle}>{role.title}</h4>
+                              <Badge variant="secondary" className={styles.periodBadge}>
+                                <Calendar className={styles.periodIcon} />
                                 {role.period}
                               </Badge>
                             </div>
                           </CardHeader>
                           
-                          <CardContent className="pt-0 space-y-4">
+                          <CardContent className={`${styles.roleCardContent} px-4 py-2`}>
                             {/* Key Achievements */}
                             {role.achievements.length > 0 && (
                               <div>
-                                <h5 className="font-semibold text-foreground mb-2 flex items-center gap-2 text-sm">
-                                  <div className="w-1.5 h-1.5 rounded-full bg-primary" />
+                                <h5 className={styles.sectionHeader}>
                                   Key Achievements
                                 </h5>
-                                <ul className="space-y-1.5">
+                                <ul className={styles.list}>
                                   {role.achievements.map((achievement, idx) => (
-                                    <li key={idx} className="text-muted-foreground flex items-start gap-2">
-                                      <div className="w-1 h-1 rounded-full bg-primary/60 mt-2 flex-shrink-0" />
-                                      <span className="text-sm leading-relaxed">{achievement}</span>
+                                    <li key={idx} className={styles.listItem}>
+                                      <div className={`${styles.listItemDot} ${styles.achievementsListDot}`} />
+                                      <span className={styles.listItemText}>{achievement}</span>
                                     </li>
                                   ))}
                                 </ul>
@@ -125,15 +125,14 @@ export function CareerTimeline({ items, title = "Career Journey" }: CareerTimeli
                             {/* Responsibilities */}
                             {role.responsibilities && role.responsibilities.length > 0 && (
                               <div>
-                                <h5 className="font-semibold text-foreground mb-2 flex items-center gap-2 text-sm">
-                                  <div className="w-1.5 h-1.5 rounded-full bg-secondary" />
+                                <h5 className={styles.sectionHeader}>
                                   Core Responsibilities
                                 </h5>
-                                <ul className="space-y-1.5">
+                                <ul className={styles.list}>
                                   {role.responsibilities.map((responsibility, idx) => (
-                                    <li key={idx} className="text-muted-foreground flex items-start gap-2">
-                                      <div className="w-1 h-1 rounded-full bg-secondary/60 mt-2 flex-shrink-0" />
-                                      <span className="text-sm leading-relaxed">{responsibility}</span>
+                                    <li key={idx} className={styles.listItem}>
+                                      <div className={`${styles.listItemDot} ${styles.responsibilitiesListDot}`} />
+                                      <span className={styles.listItemText}>{responsibility}</span>
                                     </li>
                                   ))}
                                 </ul>
@@ -143,14 +142,13 @@ export function CareerTimeline({ items, title = "Career Journey" }: CareerTimeli
                             {/* Milestones */}
                             {role.milestones && role.milestones.length > 0 && (
                               <div>
-                                <h5 className="font-semibold text-foreground mb-2 flex items-center gap-2 text-sm">
-                                  <div className="w-1.5 h-1.5 rounded-full bg-accent" />
+                                <h5 className={styles.sectionHeader}>
                                   Key Milestones
                                 </h5>
-                                <div className="grid gap-2 sm:grid-cols-2">
+                                <div className={styles.milestonesGrid}>
                                   {role.milestones.map((milestone, idx) => (
-                                    <div key={idx} className="bg-accent/10 rounded-md p-2 border border-accent/20">
-                                      <span className="text-xs text-foreground font-medium">{milestone}</span>
+                                    <div key={idx} className={styles.milestoneItem}>
+                                      <span className={styles.milestoneText}>{milestone}</span>
                                     </div>
                                   ))}
                                 </div>
diff --git a/src/components/ProfileSlideshow.tsx b/src/components/ProfileSlideshow.tsx
index 40333ae..954ce04 100644
--- a/src/components/ProfileSlideshow.tsx
+++ b/src/components/ProfileSlideshow.tsx
@@ -67,12 +67,28 @@ export function ProfileSlideshow() {
   const currentSlide = slideData[currentIndex];
 
   return (
-    <div className="relative w-[320px] h-[320px] sm:w-[420px] sm:h-[420px] md:w-[480px] md:h-[480px] lg:w-[520px] lg:h-[520px]">
-      <div className="relative w-full h-full group cursor-pointer" onClick={() => setIsPlaying(!isPlaying)}>
+    <div className="relative flex items-center justify-center gap-12">
+      {/* Left Navigation Button - Outside slideshow */}
+      <Button
+        variant="outline"
+        size="icon"
+        className="bg-background hover:bg-primary hover:text-primary-foreground border-2 border-primary/40 hover:border-primary shadow-lg hover:shadow-xl transition-all dark:bg-card dark:hover:bg-primary dark:border-primary/50"
+        onClick={(e) => {
+          e.stopPropagation();
+          goToPrevious();
+          setIsPlaying(false);
+        }}
+      >
+        <ChevronLeft className="h-5 w-5" />
+      </Button>
+
+      {/* Slideshow Container */}
+      <div className="relative w-[320px] h-[320px] sm:w-[420px] sm:h-[420px] md:w-[480px] md:h-[480px] lg:w-[520px] lg:h-[520px]">
+        <div className="relative w-full h-full group cursor-pointer" onClick={() => setIsPlaying(!isPlaying)} style={{ perspective: '800px', transformStyle: 'preserve-3d' }}>
         {/* Stacked Cards - Simplified transforms for better performance */}
         {slideData.map((slide, index) => {
           const offset = (index - currentIndex + slideData.length) % slideData.length;
-          const isVisible = offset <= 2; // Show fewer cards for better performance
+          const isVisible = offset <= 2; // Show background cards
           
           let transform = '';
           let opacity = 0;
@@ -81,26 +97,26 @@ export function ProfileSlideshow() {
           let shadowClass = 'shadow-lg';
           
           if (offset === 0) {
-            // Current image - front and center
-            transform = 'translate3d(0px, 0px, 0px) scale(1)';
+            // Current image - front and center - full priority
+            transform = 'translateX(0px) translateY(0px) translateZ(50px) scale(1) rotateY(0deg) rotateZ(0deg)';
             opacity = 1;
-            zIndex = 30;
-            borderColor = 'border-primary/20';
-            shadowClass = 'shadow-2xl shadow-primary/20';
+            zIndex = 100;
+            borderColor = 'border-primary/40';
+            shadowClass = 'shadow-2xl shadow-primary/30';
           } else if (offset === 1) {
-            // Next image - simpler transform
-            transform = 'translate3d(25px, 20px, 0px) scale(0.90)';
-            opacity = 0.8;
-            zIndex = 20;
-            borderColor = 'border-muted/30';
-            shadowClass = 'shadow-xl shadow-primary/10';
+            // Next image - more visible behind and to the right
+            transform = 'translateX(35px) translateY(20px) translateZ(0px) scale(0.92) rotateY(-6deg) rotateZ(2deg)';
+            opacity = 0.85;
+            zIndex = 50;
+            borderColor = 'border-primary/25';
+            shadowClass = 'shadow-xl shadow-primary/20';
           } else if (offset === 2) {
-            // Third image - minimal background presence
-            transform = 'translate3d(50px, 40px, 0px) scale(0.80)';
-            opacity = 0.6;
-            zIndex = 10;
-            borderColor = 'border-muted/20';
-            shadowClass = 'shadow-lg shadow-primary/5';
+            // Third image - visible further back
+            transform = 'translateX(65px) translateY(35px) translateZ(-30px) scale(0.84) rotateY(-12deg) rotateZ(4deg)';
+            opacity = 0.7;
+            zIndex = 25;
+            borderColor = 'border-primary/15';
+            shadowClass = 'shadow-lg shadow-primary/15';
           }
           
           return (
@@ -113,7 +129,8 @@ export function ProfileSlideshow() {
                 transform,
                 opacity,
                 zIndex,
-                transition: 'transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease-out',
+                transition: 'all 1s cubic-bezier(0.175, 0.885, 0.32, 1.275)',
+                transformStyle: 'preserve-3d',
                 backfaceVisibility: 'hidden', // Prevent flickering
                 WebkitBackfaceVisibility: 'hidden',
               }}
@@ -142,53 +159,58 @@ export function ProfileSlideshow() {
           );
         })}
 
-        {/* Navigation Arrows - Simplified styling */}
-        <Button
-          variant="secondary"
-          size="icon"
-          className="absolute left-4 top-1/2 -translate-y-1/2 opacity-70 hover:opacity-100 transition-opacity bg-background/90 hover:bg-background border border-primary/20 hover:border-primary/40 z-40 shadow-md"
-          onClick={(e) => {
-            e.stopPropagation();
-            goToPrevious();
-          }}
-        >
-          <ChevronLeft className="h-4 w-4 text-primary" />
-        </Button>
-
-        <Button
-          variant="secondary"
-          size="icon"
-          className="absolute right-4 top-1/2 -translate-y-1/2 opacity-70 hover:opacity-100 transition-opacity bg-background/90 hover:bg-background border border-primary/20 hover:border-primary/40 z-40 shadow-md"
-          onClick={(e) => {
-            e.stopPropagation();
-            goToNext();
-          }}
-        >
-          <ChevronRight className="h-4 w-4 text-primary" />
-        </Button>
 
-        {/* Play/Pause Indicator */}
-        <div className="absolute top-4 right-4 opacity-0 group-hover:opacity-100 transition-opacity z-40">
-          <Badge variant="secondary" className="bg-white/10 text-white border-white/20 text-xs">
-            {isPlaying ? 'Playing' : 'Paused'}
+        {/* Play/Pause Indicator - Always visible and prominent */}
+        <div className="absolute top-4 left-4 transition-all" style={{ zIndex: 9999 }}>
+          <Badge 
+            variant="outline"
+            className={`text-xs cursor-pointer border-2 shadow-lg font-semibold ${
+              isPlaying 
+                ? 'bg-primary/90 text-primary-foreground border-primary hover:bg-primary' 
+                : 'bg-secondary/90 text-secondary-foreground border-secondary hover:bg-secondary'
+            } hover:shadow-xl transition-all`}
+            onClick={(e) => {
+              e.stopPropagation();
+              setIsPlaying(!isPlaying);
+            }}
+          >
+            {isPlaying ? '▶ Playing' : '⏸ Paused'}
           </Badge>
         </div>
-      </div>
 
-      {/* Dots Indicator */}
-      <div className="absolute -bottom-10 left-1/2 -translate-x-1/2 flex space-x-2">
-        {slideData.map((_, index) => (
-          <button
-            key={index}
-            onClick={() => goToSlide(index)}
-            className={`w-2.5 h-2.5 rounded-full transition-all duration-300 ${
-              index === currentIndex 
-                ? 'bg-primary scale-110 shadow-sm shadow-primary/30' 
-                : 'bg-muted-foreground/40 hover:bg-muted-foreground/60'
-            }`}
-          />
-        ))}
+        {/* Dots Indicator - Further below slideshow */}
+        <div className="absolute -bottom-16 left-1/2 -translate-x-1/2 flex space-x-3" style={{ zIndex: 9999 }}>
+          {slideData.map((_, index) => (
+            <button
+              key={index}
+              onClick={() => {
+                goToSlide(index);
+                setIsPlaying(false);
+              }}
+              className={`w-3 h-3 rounded-full transition-all duration-300 border-2 ${
+                index === currentIndex 
+                  ? 'bg-primary border-primary scale-125 shadow-lg shadow-primary/40' 
+                  : 'bg-background border-primary/60 hover:border-primary hover:bg-primary/20 hover:scale-110'
+              }`}
+            />
+          ))}
+        </div>
       </div>
+      </div>
+
+      {/* Right Navigation Button - Outside slideshow */}
+      <Button
+        variant="outline"
+        size="icon"
+        className="bg-background hover:bg-primary hover:text-primary-foreground border-2 border-primary/40 hover:border-primary shadow-lg hover:shadow-xl transition-all dark:bg-card dark:hover:bg-primary dark:border-primary/50"
+        onClick={(e) => {
+          e.stopPropagation();
+          goToNext();
+          setIsPlaying(false);
+        }}
+      >
+        <ChevronRight className="h-5 w-5" />
+      </Button>
     </div>
   );
 }
\ No newline at end of file
diff --git a/src/components/blog-post-card.module.css b/src/components/blog-post-card.module.css
new file mode 100644
index 0000000..61308eb
--- /dev/null
+++ b/src/components/blog-post-card.module.css
@@ -0,0 +1,55 @@
+/* Blog Post Card Component CSS Module */
+
+.card {
+  @apply overflow-hidden rounded-lg border bg-card transition-colors hover:bg-accent/50 h-full flex flex-col;
+}
+
+.pinnedCard {
+  @apply ring-2 ring-primary/20;
+}
+
+.imageContainer {
+  @apply aspect-[2/1] w-full overflow-hidden bg-muted;
+}
+
+.image {
+  @apply w-full h-full object-cover object-center transition-transform duration-300 group-hover:scale-105;
+}
+
+.content {
+  @apply p-6 flex flex-col flex-grow;
+}
+
+.badgeContainer {
+  @apply flex flex-wrap items-center gap-2 mb-3;
+}
+
+/* .pinnedBadge styles now handled by .badge-featured utility class */
+
+.dateContainer {
+  @apply flex items-center text-xs text-muted-foreground ml-auto;
+}
+
+.dateIcon {
+  @apply mr-1 h-3 w-3;
+}
+
+.title {
+  @apply text-xl font-bold hover:text-primary transition-colors line-clamp-2;
+}
+
+.titleLink {
+  @apply block;
+}
+
+.excerpt {
+  @apply mt-2 text-muted-foreground line-clamp-3 flex-grow;
+}
+
+.tagsContainer {
+  @apply mt-4 flex flex-wrap gap-2;
+}
+
+.tag {
+  @apply hover:bg-secondary/80;
+}
\ No newline at end of file
diff --git a/src/components/blog-post-card.tsx b/src/components/blog-post-card.tsx
index 67ad583..72a62fb 100644
--- a/src/components/blog-post-card.tsx
+++ b/src/components/blog-post-card.tsx
@@ -2,6 +2,8 @@ import { BlogPost } from '@/types/blog';
 import { Badge } from '@/components/ui/badge';
 import { Calendar } from 'lucide-react';
 import { Link } from 'react-router-dom';
+import styles from './blog-post-card.module.css';
+import badgeStyles from '@/styles/badges.module.css';
 
 interface BlogPostCardProps {
   post: BlogPost;
@@ -18,49 +20,49 @@ export function BlogPostCard({ post, className = '' }: BlogPostCardProps) {
 
   return (
     <article
-      className={`group overflow-hidden rounded-lg border bg-card transition-colors hover:bg-accent/50 h-full flex flex-col ${className} ${
-        post.pinned ? 'ring-2 ring-primary/20' : ''
+      className={`group ${styles.card} ${className} ${
+        post.pinned ? styles.pinnedCard : ''
       }`}
     >
       {post.image && (
-        <div className="aspect-[2/1] w-full overflow-hidden bg-muted">
+        <div className={styles.imageContainer}>
           <img
             src={post.image}
             alt={post.title}
-            className="w-full h-full object-cover object-center transition-transform duration-300 group-hover:scale-105"
+            className={styles.image}
             loading="lazy"
           />
         </div>
       )}
-      <div className="p-6 flex flex-col flex-grow">
-        <div className="flex flex-wrap items-center gap-2 mb-3">
+      <div className={styles.content}>
+        <div className={styles.badgeContainer}>
           {post.pinned && (
-            <Badge variant="outline" className="bg-primary/10 hover:bg-primary/20 text-primary border-primary/10">
+            <Badge variant="outline" className={badgeStyles.pinned}>
               Pinned
             </Badge>
           )}
           {post.release && (
-            <Badge variant="outline" className="bg-primary/10 hover:bg-primary/20 text-primary border-primary/10">
+            <Badge variant="outline" className={badgeStyles.new}>
               New
             </Badge>
           )}
-          <div className="flex items-center text-xs text-muted-foreground ml-auto">
-            <Calendar className="mr-1 h-3 w-3" />
+          <div className={styles.dateContainer}>
+            <Calendar className={styles.dateIcon} />
             <time dateTime={post.date}>{formattedDate}</time>
           </div>
         </div>
 
-        <h3 className="text-xl font-bold hover:text-primary transition-colors line-clamp-2">
-          <Link to={`/blog/${post.id}`} className="block">
+        <h3 className={styles.title}>
+          <Link to={`/blog/${post.id}`} className={styles.titleLink}>
             {post.title}
           </Link>
         </h3>
 
-        <p className="mt-2 text-muted-foreground line-clamp-3 flex-grow">{post.excerpt}</p>
+        <p className={styles.excerpt}>{post.excerpt}</p>
 
-        <div className="mt-4 flex flex-wrap gap-2">
+        <div className={styles.tagsContainer}>
           {post.tags.map(tag => (
-            <Badge key={tag} variant="secondary" className="hover:bg-secondary/80">
+            <Badge key={tag} variant="secondary" className={styles.tag}>
               {tag}
             </Badge>
           ))}
diff --git a/src/components/contact-modal.module.css b/src/components/contact-modal.module.css
new file mode 100644
index 0000000..fe338b3
--- /dev/null
+++ b/src/components/contact-modal.module.css
@@ -0,0 +1,57 @@
+/* Contact Modal Component CSS Module */
+
+.content {
+  @apply sm:max-w-md;
+}
+
+.contactsContainer {
+  @apply space-y-6 py-4;
+}
+
+.contactItem {
+  @apply flex items-center gap-4 rounded-lg border p-4;
+}
+
+.iconContainer {
+  @apply rounded-full bg-primary/10 p-2;
+}
+
+.icon {
+  @apply h-5 w-5 text-primary;
+}
+
+.contactInfo {
+  @apply flex-1;
+}
+
+.label {
+  @apply text-sm font-medium;
+}
+
+.link {
+  @apply text-sm text-muted-foreground hover:underline;
+}
+
+.copyButton {
+  @apply h-8 w-8 p-0;
+}
+
+.copyIcon {
+  @apply h-4 w-4;
+}
+
+.srOnly {
+  @apply sr-only;
+}
+
+.footer {
+  @apply p-0;
+}
+
+.actionButtons {
+  @apply flex w-full gap-2;
+}
+
+.fullWidthButton {
+  @apply flex-1 rounded-md;
+}
\ No newline at end of file
diff --git a/src/components/contact-modal.tsx b/src/components/contact-modal.tsx
index 12bd1ea..995a12e 100644
--- a/src/components/contact-modal.tsx
+++ b/src/components/contact-modal.tsx
@@ -1,8 +1,10 @@
 import { useState } from 'react';
 import { Button } from '@/components/ui/button';
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
-import { Mail, Phone, Copy, Check } from 'lucide-react';
+import { Mail, Phone, Copy, Check, Linkedin, Download } from 'lucide-react';
 import { toast } from 'sonner';
+import { siteConfig } from '@/config';
+import styles from './contact-modal.module.css';
 
 interface ContactModalProps {
   open: boolean;
@@ -13,8 +15,7 @@ export function ContactModal({ open, onOpenChange }: ContactModalProps) {
   const [emailCopied, setEmailCopied] = useState(false);
   // const [phoneCopied, setPhoneCopied] = useState(false);
 
-  // Replace with your actual contact info
-  const email = 'kumar.ayush.cs@gmail.com';
+  const email = siteConfig.personal.email;
   // const phone = "+1 (123) 456-7890";
 
   const copyToClipboard = (text: string, type: 'email' | 'phone') => {
@@ -34,25 +35,25 @@ export function ContactModal({ open, onOpenChange }: ContactModalProps) {
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="sm:max-w-md">
+      <DialogContent className={styles.content}>
         <DialogHeader>
           <DialogTitle>Contact Me</DialogTitle>
           <DialogDescription>Feel free to reach out via email.</DialogDescription>
         </DialogHeader>
-        <div className="space-y-6 py-4">
-          <div className="flex items-center gap-4 rounded-lg border p-4">
-            <div className="rounded-full bg-primary/10 p-2">
-              <Mail className="h-5 w-5 text-primary" />
+        <div className={styles.contactsContainer}>
+          <div className={styles.contactItem}>
+            <div className={styles.iconContainer}>
+              <Mail className={styles.icon} />
             </div>
-            <div className="flex-1">
-              <p className="text-sm font-medium">Email</p>
-              <a href={`mailto:${email}`} className="text-sm text-muted-foreground hover:underline">
+            <div className={styles.contactInfo}>
+              <p className={styles.label}>Email</p>
+              <a href={`mailto:${email}`} className={styles.link}>
                 {email}
               </a>
             </div>
-            <Button variant="outline" size="sm" className="h-8 w-8 p-0" onClick={() => copyToClipboard(email, 'email')}>
-              {emailCopied ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
-              <span className="sr-only">Copy email</span>
+            <Button variant="outline" size="sm" className={styles.copyButton} onClick={() => copyToClipboard(email, 'email')}>
+              {emailCopied ? <Check className={styles.copyIcon} /> : <Copy className={styles.copyIcon} />}
+              <span className={styles.srOnly}>Copy email</span>
             </Button>
           </div>
 
@@ -81,10 +82,36 @@ export function ContactModal({ open, onOpenChange }: ContactModalProps) {
             </Button>
           </div> */}
         </div>
-        <DialogFooter className="sm:justify-center">
-          <Button variant="outline" onClick={() => onOpenChange(false)}>
-            Close
-          </Button>
+        <DialogFooter className={styles.footer}>
+          <div className={styles.actionButtons}>
+            <Button 
+              asChild 
+              className={`${styles.fullWidthButton} bg-blue-600 hover:bg-blue-700 text-white`}
+            >
+              <a 
+                href={siteConfig.social.linkedin} 
+                target="_blank" 
+                rel="noopener noreferrer"
+              >
+                <Linkedin className="mr-2 h-4 w-4" />
+                LinkedIn
+              </a>
+            </Button>
+            <Button 
+              asChild 
+              className={`${styles.fullWidthButton} bg-blue-500 hover:bg-blue-600 text-white`}
+            >
+              <a 
+                href={siteConfig.external.resumePath} 
+                target="_blank" 
+                rel="noopener noreferrer"
+                download
+              >
+                <Download className="mr-2 h-4 w-4" />
+                Resume
+              </a>
+            </Button>
+          </div>
         </DialogFooter>
       </DialogContent>
     </Dialog>
diff --git a/src/components/layout.module.css b/src/components/layout.module.css
new file mode 100644
index 0000000..19f7d8d
--- /dev/null
+++ b/src/components/layout.module.css
@@ -0,0 +1,29 @@
+/* Layout Component CSS Module */
+
+.layoutContainer {
+  @apply relative min-h-screen flex flex-col;
+}
+
+.main {
+  @apply flex-1 pt-16;
+}
+
+.footer {
+  @apply border-t py-6 md:py-8;
+}
+
+.footerContent {
+  @apply flex flex-col items-center justify-between gap-4 md:flex-row;
+}
+
+.copyright {
+  @apply text-center text-sm leading-loose text-muted-foreground md:text-left;
+}
+
+.socialLinks {
+  @apply flex items-center gap-4;
+}
+
+.socialLink {
+  @apply text-muted-foreground hover:text-foreground;
+}
\ No newline at end of file
diff --git a/src/components/layout.tsx b/src/components/layout.tsx
index 84c978a..8f0bf71 100644
--- a/src/components/layout.tsx
+++ b/src/components/layout.tsx
@@ -1,5 +1,6 @@
 
 import { MainNav } from "./main-nav";
+import styles from './layout.module.css';
 
 interface LayoutProps {
   children: React.ReactNode;
@@ -7,20 +8,20 @@ interface LayoutProps {
 
 export function Layout({ children }: LayoutProps) {
   return (
-    <div className="relative min-h-screen flex flex-col">
+    <div className={styles.layoutContainer}>
       <MainNav />
-      <main className="flex-1 pt-16">{children}</main>
-      <footer className="border-t py-6 md:py-8">
-        <div className="container flex flex-col items-center justify-between gap-4 md:flex-row">
-          <p className="text-center text-sm leading-loose text-muted-foreground md:text-left">
+      <main className={styles.main}>{children}</main>
+      <footer className={styles.footer}>
+        <div className={`container ${styles.footerContent}`}>
+          <p className={styles.copyright}>
             © {new Date().getFullYear()} Ayush Kumar. All rights reserved.
           </p>
-          <div className="flex items-center gap-4">
+          <div className={styles.socialLinks}>
             <a 
               href="https://github.com/" 
               target="_blank" 
               rel="noopener noreferrer"
-              className="text-muted-foreground hover:text-foreground"
+              className={styles.socialLink}
             >
               GitHub
             </a>
@@ -28,7 +29,7 @@ export function Layout({ children }: LayoutProps) {
               href="https://linkedin.com/" 
               target="_blank" 
               rel="noopener noreferrer"
-              className="text-muted-foreground hover:text-foreground"
+              className={styles.socialLink}
             >
               LinkedIn
             </a>
diff --git a/src/components/main-nav.module.css b/src/components/main-nav.module.css
new file mode 100644
index 0000000..2ed10c3
--- /dev/null
+++ b/src/components/main-nav.module.css
@@ -0,0 +1,185 @@
+/* Main Navigation Component CSS Module */
+
+.header {
+  @apply fixed top-0 left-0 right-0 z-40 border-b bg-background/80 backdrop-blur;
+}
+
+.headerContainer {
+  @apply flex h-16 items-center justify-between px-4;
+}
+
+.logoSection {
+  @apply flex items-center gap-4 md:gap-6;
+}
+
+.logoLink {
+  @apply flex items-center space-x-3;
+}
+
+.avatar {
+  @apply h-8 w-8;
+}
+
+.avatarFallback {
+  @apply bg-primary text-primary-foreground font-semibold;
+}
+
+.logoText {
+  @apply text-xl font-bold tracking-tight;
+}
+
+.navLinks {
+  @apply hidden md:flex md:gap-4 items-center;
+}
+
+.navLink {
+  @apply animated-underline text-sm font-medium transition-colors hover:text-foreground/80;
+}
+
+.navLinkActive {
+  @apply text-foreground;
+}
+
+.navLinkInactive {
+  @apply text-foreground/60;
+}
+
+.rightSection {
+  @apply flex items-center gap-2;
+}
+
+.searchContainer {
+  @apply relative w-[450px] hidden xl:block;
+}
+
+.searchIcon {
+  @apply absolute left-5 top-1/2 -translate-y-1/2 text-primary;
+}
+
+.searchIconSmall {
+  @apply h-5 w-5;
+}
+
+.searchIconLarge {
+  @apply h-6 w-6;
+}
+
+.searchInput {
+  @apply w-full pl-12 pr-4 py-2 rounded-full border border-border bg-background text-base font-medium focus:outline-none focus:ring-2 focus:ring-primary/30 transition-all shadow placeholder:text-muted-foreground;
+}
+
+.searchInputLarge {
+  @apply w-full pl-14 pr-4 py-5 rounded-full border-none bg-background/90 text-lg font-medium focus:outline-none focus:ring-2 focus:ring-primary/30 transition-all shadow-xl placeholder:text-muted-foreground;
+}
+
+.searchDropdown {
+  @apply absolute left-0 right-0 mt-2 z-50 rounded-2xl bg-background/95 shadow-2xl border border-border overflow-hidden;
+}
+
+.searchResults {
+  @apply max-h-96 overflow-y-auto;
+}
+
+.searchNoResults {
+  @apply p-6 text-center text-muted-foreground;
+}
+
+.searchSectionHeader {
+  @apply px-6 pt-4 pb-1 text-xs font-semibold text-muted-foreground uppercase;
+}
+
+.searchResultButton {
+  @apply w-full text-left px-6 py-3 hover:bg-accent/40 transition-colors;
+}
+
+.searchResultContent {
+  @apply block;
+}
+
+.searchResultTitle {
+  @apply font-medium;
+}
+
+.searchResultType {
+  @apply ml-2 text-xs text-muted-foreground;
+}
+
+.searchResultSnippet {
+  @apply block text-xs mt-1 text-muted-foreground;
+}
+
+.searchHighlight {
+  @apply px-1 rounded bg-primary/20 text-primary dark:bg-primary/40 dark:text-primary font-semibold;
+}
+
+.desktopActions {
+  @apply hidden md:flex items-center gap-2;
+}
+
+.mobileMenuButton {
+  @apply xl:hidden;
+}
+
+.mobileMenu {
+  @apply w-full sm:max-w-xs;
+}
+
+.mobileMenuContent {
+  @apply flex flex-col gap-6 pt-6;
+}
+
+.mobileMenuHeader {
+  @apply flex items-center justify-between;
+}
+
+.mobileMenuLogo {
+  @apply flex items-center space-x-3;
+}
+
+.mobileMenuLogoText {
+  @apply text-xl font-bold;
+}
+
+.mobileMenuThemes {
+  @apply flex items-center gap-2;
+}
+
+.mobileSearchContainer {
+  @apply relative w-full;
+}
+
+.mobileNavLinks {
+  @apply flex flex-col gap-4;
+}
+
+.mobileNavLink {
+  @apply text-foreground/60 hover:text-foreground text-sm font-medium transition-colors;
+}
+
+.mobileNavLinkActive {
+  @apply text-foreground;
+}
+
+.mobileContactButton {
+  @apply w-full mt-4;
+}
+
+.mobileAuthSection {
+  @apply mt-auto border-t pt-4;
+}
+
+.minimalSearchContainer {
+  @apply flex justify-center items-center min-h-[200px];
+}
+
+.minimalSearchWrapper {
+  @apply relative w-full max-w-2xl mx-auto;
+}
+
+.minimalSearchResults {
+  @apply flex justify-center w-full;
+}
+
+.minimalSearchResultsWrapper {
+  @apply w-full max-w-2xl mt-2 rounded-2xl bg-background/95 shadow-2xl border border-border overflow-hidden;
+}
\ No newline at end of file
diff --git a/src/components/main-nav.tsx b/src/components/main-nav.tsx
index 4073874..86cf4f4 100644
--- a/src/components/main-nav.tsx
+++ b/src/components/main-nav.tsx
@@ -23,6 +23,7 @@ import {
 import { loadBlogPosts, loadProjects, loadPublications } from '@/utils/content-loader';
 // Import the pikachu image
 import pikachuImage from '/pikachu.jpeg';
+import styles from './main-nav.module.css';
 
 // Base navigation items
 const baseNavItems = [
@@ -48,9 +49,9 @@ function getSnippet(text: string, query: string) {
   const match = text.slice(idx, idx + query.length);
   const after = text.slice(idx + query.length, end);
   return (
-    <span className="block text-xs mt-1 text-muted-foreground">
+    <span className={styles.searchResultSnippet}>
       ...{before}
-      <mark className="px-1 rounded bg-primary/20 text-primary dark:bg-primary/40 dark:text-primary font-semibold">{match}</mark>
+      <mark className={styles.searchHighlight}>{match}</mark>
       {after}...
     </span>
   );
@@ -65,17 +66,17 @@ function getSnippet(text: string, query: string) {
 // Custom minimal search bar for empty state
 function MinimalSearchBar({ value, onChange }: { value: string; onChange: (v: string) => void }) {
   return (
-    <div className="flex justify-center items-center min-h-[200px]">
-      <div className="relative w-full max-w-2xl mx-auto">
-        <span className="absolute left-6 top-1/2 -translate-y-1/2 text-primary">
-          <Search className="h-6 w-6" />
+    <div className={styles.minimalSearchContainer}>
+      <div className={styles.minimalSearchWrapper}>
+        <span className={`${styles.searchIcon} absolute left-6 top-1/2 -translate-y-1/2`}>
+          <Search className={styles.searchIconLarge} />
         </span>
         <input
           type="text"
           value={value}
           onChange={e => onChange(e.target.value)}
           placeholder="Search blog posts, projects, publications..."
-          className="w-full pl-14 pr-4 py-5 rounded-full border-none bg-background/90 text-lg font-medium focus:outline-none focus:ring-2 focus:ring-primary/30 transition-all shadow-xl placeholder:text-muted-foreground"
+          className={styles.searchInputLarge}
           autoFocus
           style={{ boxShadow: '0 6px 32px 0 rgb(0 0 0 / 0.10)' }}
         />
@@ -87,8 +88,8 @@ function MinimalSearchBar({ value, onChange }: { value: string; onChange: (v: st
 // Custom CommandList wrapper for beautiful dropdown
 function PrettyCommandList({ children }: { children: React.ReactNode }) {
   return (
-    <div className="flex justify-center w-full">
-      <div className="w-full max-w-2xl mt-2 rounded-2xl bg-background/95 shadow-2xl border border-border overflow-hidden">{children}</div>
+    <div className={styles.minimalSearchResults}>
+      <div className={styles.minimalSearchResultsWrapper}>{children}</div>
     </div>
   );
 }
@@ -178,24 +179,24 @@ export function MainNav() {
 
   return (
     <>
-      <header className="fixed top-0 left-0 right-0 z-40 border-b bg-background/80 backdrop-blur">
-        <div className="container flex h-16 items-center justify-between px-4">
-          <div className="flex items-center gap-4 md:gap-6">
-            <Link to="/" className="flex items-center space-x-3">
-              <Avatar className="h-8 w-8">
+      <header className={styles.header}>
+        <div className={`container ${styles.headerContainer}`}>
+          <div className={styles.logoSection}>
+            <Link to="/" className={styles.logoLink}>
+              <Avatar className={styles.avatar}>
                 <AvatarImage src={pikachuImage} alt="Ayush Kumar" />
-                <AvatarFallback className="bg-primary text-primary-foreground font-semibold">AK</AvatarFallback>
+                <AvatarFallback className={styles.avatarFallback}>AK</AvatarFallback>
               </Avatar>
-              <span className="text-xl font-bold tracking-tight">Ayush Kumar</span>
+              <span className={styles.logoText}>Ayush Kumar</span>
             </Link>
-            <nav className="hidden md:flex md:gap-4 items-center">
+            <nav className={styles.navLinks}>
               {navItems.map(item => (
                 <Link
                   key={item.name}
                   to={item.href}
                   className={cn(
-                    'animated-underline text-sm font-medium transition-colors hover:text-foreground/80',
-                    isActiveRoute(item.href) ? 'text-foreground' : 'text-foreground/60'
+                    styles.navLink,
+                    isActiveRoute(item.href) ? styles.navLinkActive : styles.navLinkInactive
                   )}
                 >
                   {item.name}
@@ -203,12 +204,12 @@ export function MainNav() {
               ))}
             </nav>
           </div>
-          <div className="flex items-center gap-2">
-            <div className="relative w-[450px] hidden xl:block">
+          <div className={styles.rightSection}>
+            <div className={styles.searchContainer}>
               {location.pathname === '/' && (
                 <>
-                  <span className="absolute left-5 top-1/2 -translate-y-1/2 text-primary">
-                    <Search className="h-5 w-5" />
+                  <span className={`${styles.searchIcon} absolute left-5 top-1/2 -translate-y-1/2`}>
+                    <Search className={styles.searchIconSmall} />
                   </span>
                   <input
                     ref={searchRef}
@@ -216,7 +217,7 @@ export function MainNav() {
                     value={searchQuery}
                     onChange={e => setSearchQuery(e.target.value)}
                     placeholder="Search blog posts, projects, publications..."
-                    className="w-full pl-12 pr-4 py-2 rounded-full border border-border bg-background text-base font-medium focus:outline-none focus:ring-2 focus:ring-primary/30 transition-all shadow placeholder:text-muted-foreground"
+                    className={styles.searchInput}
                     onFocus={() => searchQuery && setShowDropdown(true)}
                   />
                   {showDropdown && (
diff --git a/src/components/publication-card.module.css b/src/components/publication-card.module.css
new file mode 100644
index 0000000..893ee99
--- /dev/null
+++ b/src/components/publication-card.module.css
@@ -0,0 +1,55 @@
+/* Publication Card Component CSS Module */
+
+.card {
+  @apply h-full flex flex-col overflow-hidden transition-shadow hover:shadow-md;
+}
+
+.badgeContainer {
+  @apply flex flex-wrap gap-2 mb-2;
+}
+
+/* .featuredBadge styles now handled by .badge-featured utility class */
+
+.title {
+  @apply line-clamp-2;
+}
+
+.titleLink {
+  @apply hover:text-primary transition-colors;
+}
+
+.date {
+  @apply text-sm text-muted-foreground;
+}
+
+.content {
+  @apply flex-grow;
+}
+
+.summaryFull {
+  /* No line-clamp when showing full summary */
+}
+
+.summaryTruncated {
+  @apply line-clamp-3;
+}
+
+.footer {
+  @apply flex flex-col items-start gap-4 pt-4 !justify-start;
+}
+
+.tagsContainer {
+  @apply flex flex-wrap gap-2;
+}
+
+.tag {
+  @apply hover:bg-secondary/80;
+}
+
+.buttonsContainer {
+  @apply flex items-start !justify-start w-full;
+}
+
+.icon {
+  @apply mr-2 h-4 w-4;
+}
\ No newline at end of file
diff --git a/src/components/publication-card.tsx b/src/components/publication-card.tsx
index 825f2c7..ce3d80a 100644
--- a/src/components/publication-card.tsx
+++ b/src/components/publication-card.tsx
@@ -4,6 +4,8 @@ import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@/componen
 import { Button } from '@/components/ui/button';
 import { ExternalLink } from 'lucide-react';
 import { Link } from 'react-router-dom';
+import styles from './publication-card.module.css';
+import badgeStyles from '@/styles/badges.module.css';
 
 interface PublicationCardProps {
   publication: Publication;
@@ -12,44 +14,44 @@ interface PublicationCardProps {
 
 export function PublicationCard({ publication, showFullSummary = false }: PublicationCardProps) {
   return (
-    <Card className="h-full flex flex-col overflow-hidden transition-shadow hover:shadow-md">
+    <Card className={styles.card}>
       <CardHeader>
-        <div className="flex flex-wrap gap-2 mb-2">
+        <div className={styles.badgeContainer}>
           {publication.featured && (
-            <Badge variant="outline" className="bg-primary/10 hover:bg-primary/20 text-primary border-primary/10">
+            <Badge variant="outline" className={badgeStyles.featured}>
               Featured
             </Badge>
           )}
         </div>
-        <CardTitle className="line-clamp-2">
-          <Link to={`/publications/${publication.id}`} className="hover:text-primary transition-colors">
+        <CardTitle className={styles.title}>
+          <Link to={`/publications/${publication.id}`} className={styles.titleLink}>
             {publication.title}
           </Link>
         </CardTitle>
-        <div className="text-sm text-muted-foreground">
+        <div className={styles.date}>
           {new Date(publication.date).toLocaleDateString('en-US', {
             year: 'numeric',
             month: 'long',
           })}
         </div>
       </CardHeader>
-      <CardContent className="flex-grow">
-        <p className={showFullSummary ? '' : 'line-clamp-3'} title={publication.summary}>
+      <CardContent className={styles.content}>
+        <p className={showFullSummary ? styles.summaryFull : styles.summaryTruncated} title={publication.summary}>
           {publication.summary}
         </p>
       </CardContent>
-      <CardFooter className="flex flex-col items-stretch gap-4 pt-4">
-        <div className="flex flex-wrap gap-2">
+      <CardFooter className={styles.footer}>
+        <div className={styles.tagsContainer}>
           {publication.tags.map(tag => (
-            <Badge key={tag} variant="secondary" className="hover:bg-secondary/80">
+            <Badge key={tag} variant="secondary" className={styles.tag}>
               {tag}
             </Badge>
           ))}
         </div>
-        <div className="flex items-center gap-2">
+        <div className={styles.buttonsContainer}>
           <Button size="sm" asChild>
             <a href={publication.link} target="_blank" rel="noopener noreferrer">
-              <ExternalLink className="mr-2 h-4 w-4" />
+              <ExternalLink className={styles.icon} />
               View Publication
             </a>
           </Button>
diff --git a/src/config/career.config.ts b/src/config/career.config.ts
new file mode 100644
index 0000000..6d1955d
--- /dev/null
+++ b/src/config/career.config.ts
@@ -0,0 +1,245 @@
+export interface CareerRole {
+  id: string;
+  title: string;
+  period: string;
+  achievements: string[];
+  responsibilities?: string[];
+  milestones?: string[];
+}
+
+export interface CareerCompany {
+  id: string;
+  company: string;
+  location?: string;
+  overallPeriod: string;
+  type: 'company';
+  roles: CareerRole[];
+}
+
+export const careerData: CareerCompany[] = [
+  {
+    id: "guidewire",
+    company: "Guidewire Software Inc.",
+    location: "Remote",
+    overallPeriod: "Jun 2021 – Present",
+    type: "company",
+    roles: [
+      {
+        id: "swe2-guidewire",
+        title: "Software Engineer II",
+        period: "Jan 2023 – Present",
+        achievements: [
+          "Spearheaded the design and implementation of scalable microservice architectures using Go, contributing to high-availability systems deployed on AWS",
+          "Led end-to-end service development — from architectural design to production rollout — ensuring modularity, fault tolerance, and ease of integration across systems",
+          "Automated containerized deployments using Docker, Kubernetes (EKS), and KubeVela, enabling GitOps-driven workflows and significantly reducing deployment overhead"
+        ],
+        responsibilities: [
+          "Managed infrastructure as code with Terraform/Crossplane, ensuring environment consistency",
+          "Advocated and implemented test-driven development (TDD) practices across services",
+          "Built and maintained CI/CD pipelines with TeamCity and GitHub Actions"
+        ],
+        milestones: [
+          "Reduced deployment time by 60%",
+          "Improved test coverage to 85%",
+          "Led team of 4 engineers",
+          "Optimized database performance by 40%"
+        ]
+      },
+      {
+        id: "swe1-guidewire",
+        title: "Software Engineer I",
+        period: "Jun 2022 – Dec 2022",
+        achievements: [
+          "Developed and maintained microservices using Go and Java, focusing on reliability and performance optimization",
+          "Implemented comprehensive unit and integration testing suites, improving code quality and reducing production bugs",
+          "Collaborated with cross-functional teams to deliver features on time and within scope"
+        ],
+        responsibilities: [
+          "Backend service development and maintenance",
+          "Code review and mentoring junior developers",
+          "API design and documentation"
+        ],
+        milestones: [
+          "Achieved 95% code coverage",
+          "Delivered 12 major features",
+          "Mentored 2 junior engineers"
+        ]
+      },
+      {
+        id: "intern-guidewire",
+        title: "Software Engineer Intern",
+        period: "Jun 2021 – May 2022",
+        achievements: [
+          "Built and deployed RESTful APIs using Go and Spring Boot, serving thousands of daily requests",
+          "Contributed to the migration of legacy systems to cloud-native architectures",
+          "Participated in agile development processes and learned industry best practices"
+        ],
+        responsibilities: [
+          "Feature development under senior engineer guidance",
+          "Bug fixes and code refactoring",
+          "Technical documentation and testing"
+        ],
+        milestones: [
+          "Completed 8 sprint deliverables",
+          "Fixed 25+ production issues",
+          "Earned full-time offer"
+        ]
+      }
+    ]
+  },
+  {
+    id: "amazon",
+    company: "Amazon",
+    overallPeriod: "Jul 2022",
+    type: "company",
+    roles: [
+      {
+        id: "amazon-ml",
+        title: "ML Summer School Trainee",
+        period: "Jul 2022",
+        achievements: [
+          "Selected for an intensive machine learning training program conducted by Amazon's ML scientists",
+          "Gained hands-on experience with supervised/unsupervised learning, deep learning, and real-world ML pipelines",
+          "Engaged in problem-solving sessions focused on scalable ML solutions used in industry applications"
+        ],
+        milestones: [
+          "Top 5% performer in program",
+          "Completed 8 ML projects",
+          "Networked with 50+ ML engineers"
+        ]
+      }
+    ]
+  },
+  {
+    id: "cleareye",
+    company: "Cleareye.ai",
+    overallPeriod: "May 2022 – Jul 2022",
+    type: "company",
+    roles: [
+      {
+        id: "cleareye-ml",
+        title: "Machine Learning Intern",
+        period: "May 2022 – Jul 2022",
+        achievements: [
+          "Built and fine-tuned BERT and BiLSTM models for high-precision Named Entity Recognition (NER) in textual data",
+          "Created and managed labeled datasets, contributing to improved data accuracy and NLP pipeline performance"
+        ],
+        responsibilities: [
+          "Model development and fine-tuning",
+          "Dataset creation and management",
+          "Performance optimization and testing"
+        ],
+        milestones: [
+          "Achieved 94% NER accuracy",
+          "Processed 100K+ text samples",
+          "Reduced inference time by 30%"
+        ]
+      }
+    ]
+  },
+  {
+    id: "feynn",
+    company: "Feynn Labs",
+    overallPeriod: "Apr 2022 – Jun 2022",
+    type: "company",
+    roles: [
+      {
+        id: "feynn-ml",
+        title: "Machine Learning Intern",
+        period: "Apr 2022 – Jun 2022",
+        achievements: [
+          "Prototyped AI-powered products and services, focusing on practical deployment and integration feasibility",
+          "Performed market segmentation using machine learning and data analysis techniques to uncover business insights",
+          "Contributed to financial and business modeling for AI-driven solutions, aligning tech output with market value"
+        ],
+        milestones: [
+          "Delivered 3 AI prototypes",
+          "Identified $2M market opportunity",
+          "Presented to C-level executives"
+        ]
+      }
+    ]
+  },
+  {
+    id: "techbyheart",
+    company: "TechByHeart",
+    overallPeriod: "Feb 2022 – May 2022",
+    type: "company",
+    roles: [
+      {
+        id: "techbyheart-security",
+        title: "Cyber Security Analyst Intern",
+        period: "Feb 2022 – May 2022",
+        achievements: [
+          "Applied ML and analytics techniques to detect and respond to security threats in real-time",
+          "Documented security protocols and supported compliance through data-driven threat analysis"
+        ],
+        responsibilities: [
+          "Threat detection and analysis",
+          "Security protocol documentation",
+          "Compliance support and reporting"
+        ],
+        milestones: [
+          "Detected 150+ security threats",
+          "Improved response time by 25%",
+          "Automated 3 security workflows"
+        ]
+      }
+    ]
+  }
+];
+
+export const techStack = {
+  frontend: [
+    "React.js",
+    "TypeScript",
+    "Next.js",
+    "Tailwind CSS",
+    "Framer Motion",
+    "Redux",
+    "Zustand"
+  ],
+  backend: [
+    "Node.js",
+    "Express.js",
+    "MongoDB",
+    "PostgreSQL",
+    "GraphQL",
+    "Firebase"
+  ],
+  tools: [
+    "Git",
+    "VS Code",
+    "Docker",
+    "Webpack",
+    "Jest",
+    "Testing Library",
+    "Storybook",
+    "GitHub Actions",
+    "AWS"
+  ]
+};
+
+export const education = [
+  {
+    degree: "Bachelor of Science in Computer Science",
+    institution: "University Name",
+    period: "2015 - 2019",
+    description: "Graduated with honors. Specialized in web technologies and software engineering. Completed a senior project on real-time collaborative web applications."
+  }
+];
+
+export const openSourceContributions = {
+  contributions: {
+    title: "Open Source Contributions",
+    description: "Active contributor to several open-source projects including React-based libraries and developer tools.",
+    linkText: "View on GitHub",
+    linkUrl: "https://github.com/"
+  },
+  speakerWriter: {
+    title: "Speaker & Writer",
+    description: "Regularly speak at local meetups and occasionally at conferences. Published technical articles on web development.",
+    linkText: "See Talks & Articles",
+    linkUrl: "#"
+  }
+};
\ No newline at end of file
diff --git a/src/config/content-registry.ts b/src/config/content-registry.ts
new file mode 100644
index 0000000..2694193
--- /dev/null
+++ b/src/config/content-registry.ts
@@ -0,0 +1,181 @@
+// Centralized Content Registry
+// Add all your content items here with order and metadata
+
+export interface ContentEntry {
+  id: string;
+  title: string;
+  order: number;
+  featured?: boolean;
+  pinned?: boolean;
+  release?: boolean;
+  // Additional metadata that varies by content type
+  [key: string]: any;
+}
+
+export interface BlogEntry extends ContentEntry {
+  excerpt: string;
+  date: string;
+  tags: string[];
+  image?: string;
+}
+
+export interface ProjectEntry extends ContentEntry {
+  description: string;
+  tags: string[];
+  githubUrl: string;
+  demoUrl?: string;
+}
+
+export interface PublicationEntry extends ContentEntry {
+  date: string;
+  summary: string;
+  link: string;
+  tags: string[];
+}
+
+// BLOG POSTS - Add new blog posts here
+export const BLOG_REGISTRY: BlogEntry[] = [
+  {
+    id: 'understanding-javascript-closures',
+    title: 'Understanding JavaScript Closures',
+    excerpt: 'A deep dive into JavaScript closures and their practical applications',
+    date: '2024-01-15',
+    tags: ['JavaScript', 'Web Development', 'Programming'],
+    order: 1,
+    featured: true,
+    pinned: false,
+    image: 'https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?auto=format&fit=crop&w=600&q=80'
+  },
+  {
+    id: 'building-responsive-layouts-with-tailwind-css',
+    title: 'Building Responsive Layouts with Tailwind CSS',
+    excerpt: 'Learn how to create beautiful, responsive layouts using Tailwind CSS utility classes',
+    date: '2024-01-10',
+    tags: ['CSS', 'Tailwind', 'Web Design', 'Responsive'],
+    order: 2,
+    featured: false,
+  },
+  {
+    id: 'getting-started-with-react-hooks',
+    title: 'Getting Started with React Hooks',
+    excerpt: 'Master React Hooks and modern functional component patterns',
+    date: '2024-01-05',
+    tags: ['React', 'Hooks', 'JavaScript', 'Frontend'],
+    order: 3,
+    featured: true,
+  }
+];
+
+// PROJECTS - Add new projects here
+export const PROJECT_REGISTRY: ProjectEntry[] = [
+  {
+    id: 'personal-portfolio',
+    title: 'Personal Portfolio',
+    description: 'A modern, responsive portfolio website built with React and TypeScript',
+    tags: ['React', 'TypeScript', 'Tailwind CSS', 'Vite'],
+    githubUrl: 'https://github.com/roguepikachu/portfolio',
+    demoUrl: 'https://ayushkumar.dev',
+    order: 1,
+    featured: true,
+  },
+  {
+    id: 'blog-platform',
+    title: 'Blog Platform',
+    description: 'A full-stack blog platform with user authentication and content management',
+    tags: ['Next.js', 'TypeScript', 'Prisma', 'PostgreSQL'],
+    githubUrl: 'https://github.com/roguepikachu/blog-platform',
+    demoUrl: 'https://blog-platform-demo.vercel.app',
+    order: 2,
+    featured: true,
+  },
+  {
+    id: 'ecommerce-dashboard',
+    title: 'E-commerce Dashboard',
+    description: 'A comprehensive admin dashboard for e-commerce management',
+    tags: ['React', 'Node.js', 'MongoDB', 'Chart.js'],
+    githubUrl: 'https://github.com/roguepikachu/ecommerce-dashboard',
+    order: 3,
+    featured: true,
+  },
+  {
+    id: 'weather-app',
+    title: 'Weather App',
+    description: 'A beautiful weather application with location-based forecasts',
+    tags: ['React', 'OpenWeather API', 'CSS3'],
+    githubUrl: 'https://github.com/roguepikachu/weather-app',
+    demoUrl: 'https://weather-app-demo.vercel.app',
+    order: 4,
+    featured: false,
+  },
+  {
+    id: 'task-manager',
+    title: 'Task Manager',
+    description: 'A productivity app for managing tasks and projects efficiently',
+    tags: ['Vue.js', 'Firebase', 'Vuetify'],
+    githubUrl: 'https://github.com/roguepikachu/task-manager',
+    order: 5,
+    featured: false,
+  },
+  {
+    id: 'recipe-finder',
+    title: 'Recipe Finder',
+    description: 'Find and save your favorite recipes with this intuitive app',
+    tags: ['React Native', 'Recipe API', 'SQLite'],
+    githubUrl: 'https://github.com/roguepikachu/recipe-finder',
+    order: 6,
+    featured: false,
+  }
+];
+
+// PUBLICATIONS - Add new publications here
+export const PUBLICATION_REGISTRY: PublicationEntry[] = [
+  {
+    id: 'aerial-vehicle-detection-pca-deep-learning',
+    title: 'Aerial Vehicle Detection using PCA and Deep Learning',
+    date: '2023-12-01',
+    summary: 'A novel approach to aerial vehicle detection combining PCA dimensionality reduction with deep learning techniques',
+    link: 'https://arxiv.org/abs/example1',
+    tags: ['Deep Learning', 'Computer Vision', 'PCA', 'Aerial Detection'],
+    order: 1,
+    featured: true,
+  },
+  {
+    id: 'bert-tamil-dependency-parsing',
+    title: 'BERT for Tamil Dependency Parsing',
+    date: '2023-11-15',
+    summary: 'Implementing BERT-based models for improved Tamil language dependency parsing accuracy',
+    link: 'https://arxiv.org/abs/example2',
+    tags: ['NLP', 'BERT', 'Tamil Language', 'Dependency Parsing'],
+    order: 2,
+    featured: true,
+  },
+  {
+    id: 'mosquito-classification-deep-learning',
+    title: 'Mosquito Classification using Deep Learning',
+    date: '2023-10-20',
+    summary: 'Deep learning approaches for automated mosquito species classification from images',
+    link: 'https://arxiv.org/abs/example3',
+    tags: ['Deep Learning', 'Image Classification', 'Biology', 'CNN'],
+    order: 3,
+    featured: false,
+  },
+  {
+    id: 'speech-emotion-recognition-using-cnn-lstm-vit',
+    title: 'Speech Emotion Recognition using CNN, LSTM, and ViT',
+    date: '2023-09-30',
+    summary: 'A comprehensive study comparing CNN, LSTM, and Vision Transformer approaches for speech emotion recognition',
+    link: 'https://arxiv.org/abs/example4',
+    tags: ['Speech Recognition', 'Emotion Recognition', 'CNN', 'LSTM', 'Vision Transformer'],
+    order: 4,
+    featured: false,
+  }
+];
+
+// Utility functions to get sorted content
+export const getSortedBlogs = () => BLOG_REGISTRY.sort((a, b) => a.order - b.order);
+export const getSortedProjects = () => PROJECT_REGISTRY.sort((a, b) => a.order - b.order);
+export const getSortedPublications = () => PUBLICATION_REGISTRY.sort((a, b) => a.order - b.order);
+
+export const getFeaturedBlogs = () => getSortedBlogs().filter(blog => blog.featured);
+export const getFeaturedProjects = () => getSortedProjects().filter(project => project.featured);
+export const getFeaturedPublications = () => getSortedPublications().filter(pub => pub.featured);
\ No newline at end of file
diff --git a/src/config/index.ts b/src/config/index.ts
new file mode 100644
index 0000000..4a33002
--- /dev/null
+++ b/src/config/index.ts
@@ -0,0 +1,14 @@
+// Central configuration exports
+export { siteConfig } from './site.config';
+export type { SiteConfig } from './site.config';
+
+export { 
+  careerData,
+  techStack, 
+  education, 
+  openSourceContributions 
+} from './career.config';
+export type { CareerRole, CareerCompany } from './career.config';
+
+export { uiStrings, getString } from './ui-strings.config';
+export type { UIStrings } from './ui-strings.config';
\ No newline at end of file
diff --git a/src/config/site.config.ts b/src/config/site.config.ts
new file mode 100644
index 0000000..55002c3
--- /dev/null
+++ b/src/config/site.config.ts
@@ -0,0 +1,255 @@
+export const siteConfig = {
+  // Personal Information
+  personal: {
+    name: "Ayush Kumar",
+    initials: "AK",
+    email: "kumar.ayush.cs@gmail.com",
+    role: "Researcher, Developer, Writer",
+    tagline: "Engineer by trade, Designer by instinct, and Writer by habit",
+    shortBio: "Hi, I'm Ayush Kumar",
+    fullBio: `Hey there, I see you've stumbled across my portfolio. Since you're here, I'm Ayush. I'm a software engineer who likes building backend systems that actually hold up under pressure: scalable, resilient, and clean. I've got a bias for minimalism, so I keep things simple and straightforward wherever I can. Most of the time I'm experimenting with new tech, hacking together projects, or diving deep into cloud infrastructure and distributed systems. I'm also trying to pick up some guitar skills (slowly but surely), and when I need a break, fictional story-driven games have me hooked. Uncharted in particular — man, that's some serious storytelling and adventure.
+
+Pretty much always down to chat about code, cloud architectures, or why AI is either going to save us all or make us completely obsolete — haven't decided which yet! What brings you here?`,
+    aboutBio: `I work mostly with Go, Kubernetes, and cloud infrastructure — building backend systems that are meant to scale and stay up. My focus is on clean, maintainable architecture, automation, and performance. I've spent a lot of time designing microservices, setting up CI/CD pipelines, and getting things to run smoothly in production. I have a strong foundation in AI and data systems, with hands-on experience in applying machine learning where it genuinely improves outcomes — and the judgment to avoid it where simpler solutions are more effective.
+
+Outside of code, I write technical articles, contribute to open-source when I can, and keep learning whatever tool or system looks like it'll help me do better work. Not big on fluff. Just here to build useful stuff and keep improving.`,
+  },
+
+  // Social Links
+  social: {
+    github: "https://github.com/roguepikachu",
+    linkedin: "https://www.linkedin.com/in/cs-ayush-kumar/",
+    githubUsername: "roguepikachu",
+    linkedinUsername: "cs-ayush-kumar",
+  },
+
+  // External Links
+  external: {
+    resumePath: "/resume.pdf",
+    featuredVideoUrl:
+      "https://www.youtube.com/embed/MOkPoKh0-hA?si=DSxFyJUbzf3PMt9g",
+    meetupEventUrl: "https://www.meetup.com/collabnix/events/300163572/",
+  },
+
+  // Navigation
+  navigation: {
+    main: [
+      { name: "Home", href: "/" },
+      { name: "Projects", href: "/projects" },
+      { name: "Publications", href: "/publications" },
+      { name: "Blog", href: "/blog" },
+      { name: "About", href: "/about" },
+    ],
+  },
+
+  // Page Metadata
+  pages: {
+    home: {
+      title: "Home",
+      description: "Welcome to my portfolio",
+    },
+    projects: {
+      title: "Projects",
+      description: "A collection of my personal and professional projects.",
+    },
+    blog: {
+      title: "Blog",
+      description:
+        "Sharing ideas, insights, and lessons learned from navigating the tech world.",
+    },
+    publications: {
+      title: "Publications",
+      description: "Academic papers, articles, and research publications",
+    },
+    about: {
+      title: "About Me",
+      description: "Learn more about my journey and experience",
+    },
+  },
+
+  // Section Headings
+  sections: {
+    talks: {
+      title: "My Talks & Presentations",
+      description:
+        "Sharing knowledge and insights with the community through talks, workshops, and presentations",
+    },
+    featuredTalk: {
+      title: "Platform Engineering with Kubevela - Shipping Applications the Cloud Native Way",
+      subtitle: "Featured Tech Talk",
+      description: "Explored how KubeVela simplifies application delivery in cloud-native environments by providing a unified platform for developers and operators. Demonstrated practical approaches to managing application lifecycle, deployments, and scaling using modern platform engineering principles.",
+      badge: "Live Event",
+    },
+    collabnixMeetup: {
+      title: "jsPolicy - Easier & Faster Kubernetes Policies ",
+      subtitle: "A Show and Tell Collabnix Meetup",
+      description:
+        "Presented jsPolicy, a powerful JavaScript-based policy engine for Kubernetes that simplifies policy creation and enforcement. Demonstrated how jsPolicy enables developers to write more intuitive and maintainable admission controllers using familiar JavaScript or TypeScript syntax.",
+    },
+    recentPosts: {
+      title: "Recent Blog Posts",
+      viewAllText: "View All Posts",
+    },
+    featuredPublications: {
+      title: "Featured Publications",
+      viewAllText: "View All Publications",
+    },
+    featuredProjects: {
+      title: "Featured Projects",
+      description: "Check out some of my latest work",
+      viewAllText: "View All Projects",
+    },
+    professionalJourney: {
+      title: "Professional Journey",
+    },
+    techStack: {
+      title: "Tech Stack",
+      categories: {
+        frontend: "Frontend",
+        backend: "Backend",
+        tools: "Tools & DevOps",
+      },
+    },
+    education: {
+      title: "Education",
+    },
+    openSource: {
+      title: "Open Source & Community",
+    },
+  },
+
+  // UI Labels
+  ui: {
+    buttons: {
+      contact: "Contact",
+      contactMe: "Contact Me",
+      signIn: "Sign In",
+      signOut: "Sign Out",
+      githubProfile: "GitHub Profile",
+      linkedin: "LinkedIn",
+      viewOnGithub: "View on GitHub",
+      code: "Code",
+      demo: "Demo",
+      liveDemo: "Live Demo",
+      downloadResume: "Download Resume",
+      returnHome: "Return to Home",
+      sendMagicLink: "Send Magic Link",
+      postComment: "Post Comment",
+      viewDetails: "View Details",
+      readMore: "Read More",
+      viewProject: "View Project",
+      featured: "Featured",
+      liveEvent: "Live Event",
+    },
+    placeholders: {
+      searchGlobal: "Search blog posts, projects, publications...",
+      searchProjects: "Search projects...",
+      searchBlog: "Search blog posts...",
+      email: "name@example.com",
+      comment: "Write a comment...",
+    },
+    filters: {
+      filterByTag: "Filter by tag",
+      allTags: "All Tags",
+      searchCategories: {
+        blog: "Blog Posts",
+        projects: "Projects",
+        publications: "Publications",
+      },
+    },
+    badges: {
+      featured: "Featured",
+      liveEvent: "Live Event",
+      new: "New",
+      comingSoon: "Coming Soon",
+    },
+  },
+
+  // Loading States
+  loading: {
+    home: {
+      title: "Crafting digital experiences...",
+      message:
+        "Loading the portfolio with passion, creativity, and a touch of magic",
+    },
+    projects: {
+      title: "Building something awesome...",
+      message: "Compiling the latest projects and innovations",
+    },
+    blog: {
+      title: "Loading amazing content...",
+      message: "Just a moment while we fetch the latest blog posts",
+    },
+    publications: {
+      title: "Gathering research...",
+      message: "Loading publications and academic work",
+    },
+  },
+
+  // Messages & Notifications
+  messages: {
+    auth: {
+      signInRequired: "Please sign in to continue",
+      signInToVote: "Please sign in to vote",
+      signInToComment: "Please sign in to leave a comment.",
+      authFailed: "Authentication failed",
+      signInSuccess: "Successfully signed in",
+      signOutSuccess: "Successfully signed out",
+      magicLinkSent:
+        "🎉 Magic link sent! Check your email inbox and click the link to sign in.",
+      magicLinkDescription:
+        "Enter your email to receive a magic link for instant sign-in",
+    },
+    errors: {
+      pageNotFound: "Oops! Page not found",
+      pageNotFoundCode: "404",
+      voteFailure: "Failed to record vote",
+      loadError: "Failed to load content",
+      networkError: "Network error. Please try again.",
+      genericError: "Something went wrong. Please try again.",
+    },
+    success: {
+      emailCopied: "Email copied to clipboard",
+      phoneCopied: "Phone copied to clipboard",
+      linkCopied: "Link copied to clipboard",
+      saved: "Successfully saved",
+      deleted: "Successfully deleted",
+    },
+    empty: {
+      noComments: "No comments yet. Be the first to comment!",
+      noProjects: "No projects found",
+      noPosts: "No blog posts found",
+      noPublications: "No publications found",
+      noResults: "No results found",
+    },
+  },
+
+  // OAuth Providers
+  auth: {
+    providers: {
+      google: "Google",
+      github: "GitHub",
+      facebook: "Facebook",
+    },
+    modalTitle: "Sign in",
+    modalDescription: "Choose your preferred sign-in method",
+  },
+
+  // Footer
+  footer: {
+    copyright: "© 2024 Ayush Kumar. All rights reserved.",
+  },
+
+  // Theme
+  theme: {
+    storageKey: "devscribe-theme",
+  },
+
+  // Router
+  router: {
+    basePath: "/portfolio",
+  },
+};
+
+// Type-safe config getter
+export type SiteConfig = typeof siteConfig;
\ No newline at end of file
diff --git a/src/config/ui-strings.config.ts b/src/config/ui-strings.config.ts
new file mode 100644
index 0000000..93872ad
--- /dev/null
+++ b/src/config/ui-strings.config.ts
@@ -0,0 +1,352 @@
+// UI Strings Configuration - Contains all user-facing text strings
+
+export const uiStrings = {
+  // Page-specific strings
+  pages: {
+    home: {
+      loading: {
+        title: "Crafting digital experiences...",
+        message: "Loading the portfolio with passion, creativity, and a touch of magic"
+      },
+      sections: {
+        moreTalks: {
+          title: "More Talks Coming Soon",
+          badge: "Coming Soon",
+          description: "Stay tuned for upcoming presentations and workshop sessions on distributed systems, AI/ML implementations, and cloud-native architectures."
+        },
+        blogDescription: "Thoughts, ideas, and tutorials",
+        publicationsDescription: "Academic papers and research articles"
+      },
+      errors: {
+        loadingData: "Error loading data:"
+      }
+    },
+    
+    about: {
+      careerTimeline: {
+        defaultTitle: "Career Journey",
+        keyAchievements: "Key Achievements",
+        coreResponsibilities: "Core Responsibilities",
+        keyMilestones: "Key Milestones",
+        promoted: "Promoted",
+        newOpportunity: "New Opportunity"
+      },
+      profileInitials: "AK",
+      downloadResume: "Download Resume"
+    },
+    
+    blog: {
+      loading: {
+        title: "Loading amazing content...",
+        message: "Just a moment while we fetch the latest blog posts"
+      },
+      search: {
+        placeholder: "Search posts...",
+        clearLabel: "Clear search"
+      },
+      filters: {
+        tagLabel: "Filter by tag",
+        clearButton: "Clear",
+        allTags: "All Tags",
+        selectedTags: "Selected tags",
+        clearAllFilters: "Clear all filters"
+      },
+      empty: "No posts found matching your criteria.",
+      navigation: {
+        backToBlog: "Back to Blog",
+        backToAllPosts: "Back to all posts"
+      }
+    },
+    
+    blogPost: {
+      loading: {
+        title: "Reading between the lines...",
+        message: "Loading your article with care"
+      },
+      notFound: "Post not found",
+      badges: {
+        pinned: "Pinned",
+        new: "New"
+      },
+      readTime: "min read",
+      share: {
+        label: "Share this post:",
+        facebook: "Share on Facebook",
+        twitter: "Share on Twitter",
+        copyLink: "Copy Link",
+        copied: "Copied"
+      },
+      navigation: {
+        previous: "Previous post",
+        next: "Next post"
+      },
+      relatedPosts: "Related Posts"
+    },
+    
+    projects: {
+      loading: {
+        title: "Building something awesome...",
+        message: "Compiling the latest projects and innovations"
+      },
+      title: "Projects",
+      description: "A collection of my personal and professional projects.",
+      search: {
+        placeholder: "Search projects...",
+        clearLabel: "Clear search"
+      },
+      filters: {
+        tagLabel: "Filter by tag",
+        clearButton: "Clear",
+        allTags: "All Tags",
+        selectedTags: "Selected tags",
+        clearFilters: "Clear filters"
+      },
+      empty: "No projects found matching your criteria.",
+      navigation: {
+        backToProjects: "Back to Projects",
+        backToAllProjects: "Back to all projects"
+      },
+      buttons: {
+        viewOnGithub: "View on GitHub",
+        liveDemo: "Live Demo"
+      },
+      fallbackText: "For more details about this project, check out the GitHub repository.",
+      relatedProjects: "Related Projects"
+    },
+    
+    project: {
+      loading: {
+        title: "Compiling project...",
+        message: "Executing code and loading features"
+      },
+      notFound: "Project not found"
+    },
+    
+    publications: {
+      loading: {
+        title: "Curating knowledge...",
+        message: "Gathering the latest publications and research"
+      },
+      title: "Publications",
+      description: "Academic papers, articles, and research publications",
+      search: {
+        placeholder: "Search publications...",
+        clearLabel: "Clear search"
+      },
+      filters: {
+        tagLabel: "Filter by tag",
+        yearLabel: "Filter by year",
+        clearButton: "Clear",
+        tagPlaceholder: "Select a tag to filter",
+        yearPlaceholder: "Select a year",
+        allTags: "All Tags",
+        allYears: "All Years",
+        clearAllFilters: "Clear all filters"
+      },
+      empty: "No publications found matching your criteria.",
+      navigation: {
+        backToPublications: "Back to Publications",
+        backToAllPublications: "Back to all publications"
+      },
+      buttons: {
+        viewPublication: "View Publication",
+        doi: "DOI"
+      },
+      fallbackText: "For the complete publication, please visit the link above.",
+      relatedPublications: "Related Publications"
+    },
+    
+    publication: {
+      loading: {
+        title: "Loading publication...",
+        message: "Preparing academic content and insights"
+      },
+      notFound: "Publication not found"
+    },
+    
+    notFound: {
+      code: "404",
+      message: "Oops! Page not found",
+      returnHome: "Return to Home"
+    },
+    
+    index: {
+      welcome: "Welcome to Your Blank App",
+      description: "Start building your amazing project here!"
+    },
+    
+    authCallback: {
+      error: "Error handling auth callback:"
+    }
+  },
+  
+  // Component-specific strings
+  components: {
+    mainNav: {
+      toggleMenu: "Toggle menu",
+      noResults: "No results found.",
+      searchCategories: {
+        blogPosts: "Blog Posts",
+        projects: "Projects",
+        publications: "Publications"
+      },
+      typeLabels: {
+        blogPost: "Blog Post",
+        project: "Project",
+        publication: "Publication"
+      }
+    },
+    
+    layout: {
+      footer: {
+        copyright: (year: number) => `© ${year} Ayush Kumar. All rights reserved.`,
+        links: {
+          github: "GitHub",
+          linkedin: "LinkedIn"
+        }
+      }
+    },
+    
+    contactModal: {
+      title: "Contact Me",
+      description: "Feel free to reach out via email.",
+      emailLabel: "Email",
+      copyEmailLabel: "Copy email",
+      closeButton: "Close"
+    },
+    
+    themeToggle: {
+      label: "Toggle dark mode"
+    },
+    
+    votingButtons: {
+      errors: {
+        signInRequired: "Please sign in to vote",
+        voteFailed: "Failed to record vote"
+      }
+    },
+    
+    blogComment: {
+      errors: {
+        signInToLike: "Please sign in to like comments",
+        likeFailed: "Failed to update like",
+        signInToReply: "Please sign in to reply"
+      },
+      buttons: {
+        cancel: "Cancel",
+        reply: "Reply",
+        submitReply: "Submit Reply"
+      },
+      replyPlaceholder: "Write a reply..."
+    },
+    
+    commentSection: {
+      title: "Comments",
+      placeholder: "Write a comment...",
+      buttons: {
+        posting: "Posting...",
+        postComment: "Post Comment"
+      },
+      signInPrompt: "Please sign in to leave a comment.",
+      loading: "Loading comments...",
+      empty: "No comments yet. Be the first to comment!"
+    },
+    
+    profileSlideshow: {
+      slides: [
+        { caption: "Building the future", date: "2024" },
+        { caption: "Deep in code", date: "2023" },
+        { caption: "Innovation mindset", date: "2024" },
+        { caption: "Crafting solutions", date: "2023" }
+      ],
+      status: {
+        playing: "Playing",
+        paused: "Paused"
+      }
+    },
+    
+    authButton: {
+      loading: "Loading...",
+      signIn: "Sign In",
+      signOut: "Sign out",
+      dialogTitle: "Sign in",
+      dialogDescription: "Enter your email to receive a magic link for instant sign-in",
+      providers: {
+        google: "Google",
+        github: "GitHub",
+        facebook: "Facebook"
+      },
+      magicLink: {
+        separator: "Or continue with magic link",
+        placeholder: "name@example.com",
+        sending: "Sending magic link...",
+        sendButton: "Send Magic Link",
+        successMessage: "🎉 Magic link sent! Check your email inbox and click the link to sign in."
+      },
+      errors: {
+        authFailed: "Authentication failed",
+        logoutFailed: "Failed to log out"
+      },
+      messages: {
+        loggedOut: "You have been logged out"
+      },
+      fallbackName: "User"
+    }
+  },
+  
+  // Common UI elements
+  common: {
+    badges: {
+      featured: "Featured",
+      new: "New",
+      pinned: "Pinned",
+      liveEvent: "Live Event",
+      comingSoon: "Coming Soon"
+    },
+    buttons: {
+      code: "Code",
+      demo: "Demo",
+      liveDemo: "Live Demo",
+      viewProject: "View Project",
+      viewPublication: "View Publication",
+      viewOnGithub: "View on GitHub",
+      viewDetails: "View Details",
+      readMore: "Read More",
+      contact: "Contact",
+      contactMe: "Contact Me",
+      downloadResume: "Download Resume",
+      close: "Close",
+      cancel: "Cancel",
+      submit: "Submit",
+      save: "Save",
+      delete: "Delete",
+      edit: "Edit",
+      back: "Back",
+      next: "Next",
+      previous: "Previous",
+      clear: "Clear",
+      clearAll: "Clear all",
+      searchClear: "Clear search",
+      filterClear: "Clear filters"
+    }
+  }
+};
+
+// Type-safe string getter functions
+export type UIStrings = typeof uiStrings;
+
+// Helper function to get nested string values
+export const getString = (path: string): string => {
+  const keys = path.split('.');
+  let value: any = uiStrings;
+  
+  for (const key of keys) {
+    value = value?.[key];
+    if (value === undefined) {
+      console.warn(`String not found for path: ${path}`);
+      return path; // Return the path as fallback
+    }
+  }
+  
+  return typeof value === 'function' ? value : String(value);
+};
\ No newline at end of file
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
deleted file mode 100644
index f613396..0000000
--- a/src/pages/Home.tsx
+++ /dev/null
@@ -1,398 +0,0 @@
-import { useEffect, useState } from "react";
-import { Button } from "@/components/ui/button";
-import { Github, Linkedin, ArrowRight, Sparkles, Loader2 } from "lucide-react";
-import { ContactModal } from "@/components/contact-modal";
-import { Link } from "react-router-dom";
-import {
-  loadBlogPosts,
-  loadProjects,
-  loadPublications,
-} from "@/utils/content-loader";
-import { PublicationCard } from "@/components/publication-card";
-import { LoadingDots } from "../components/ui/LoadingDots";
-import { delay } from "../utils/delay";
-import { BlogPostCard } from "@/components/blog-post-card";
-import { ProfileSlideshow } from "@/components/ProfileSlideshow";
-
-export default function Home() {
-  const [contactModalOpen, setContactModalOpen] = useState(false);
-  const [posts, setPosts] = useState([]);
-  const [projects, setProjects] = useState([]);
-  const [publications, setPublications] = useState([]);
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    const loadData = async () => {
-      try {
-        const [postsData, projectsData, publicationsData] = await Promise.all([
-          loadBlogPosts(),
-          loadProjects(),
-          loadPublications(),
-        ]);
-        setPosts(postsData);
-        setProjects(projectsData);
-        setPublications(publicationsData);
-        await delay(); // Use default delay
-      } catch (error) {
-        console.error("Error loading data:", error);
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    loadData();
-  }, []);
-
-  const featuredPublications = publications
-    .filter((publication: any) => publication.featured)
-    .slice(0, 2);
-
-  // Add sectionConfig definition
-  const sectionConfig = {
-    blog: true,
-    publications: true,
-    projects: true,
-  };
-
-  if (loading) {
-    return (
-      <div className="container px-4 py-12 md:px-6 md:py-16 lg:py-24">
-        <div className="mx-auto max-w-5xl">
-          <div className="flex flex-col items-center justify-center space-y-6">
-            <div className="relative">
-              <Sparkles className="h-16 w-16 text-primary animate-pulse" />
-            </div>
-            <div className="text-center space-y-2">
-              <h2 className="text-2xl font-semibold">
-                Crafting digital experiences...
-              </h2>
-              <p className="text-muted-foreground">
-                Loading the portfolio with passion, creativity, and a touch of
-                magic
-              </p>
-            </div>
-            <LoadingDots size="md" />
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="flex flex-col min-h-screen">
-      {/* Hero Section */}
-      <section className="flex-1 flex items-center relative overflow-hidden">
-        <div className="container px-4 md:px-6 space-y-10 py-16 md:py-24">
-          <div className="grid gap-6 lg:grid-cols-[1fr_400px] lg:gap-12 xl:grid-cols-[1fr_500px]">
-            <div className="flex flex-col justify-center space-y-4">
-              <div className="space-y-2">
-                <h1 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl lg:text-6xl/none">
-                  Researcher, Developer, Writer
-                </h1>
-                <p className="max-w-[600px] text-gray-500 md:text-xl dark:text-gray-400">
-                  Hey there, I see you’ve stumbled across my portfolio. Since
-                  you’re here, I’m Ayush. I’m a software engineer who likes
-                  building backend systems that actually hold up under pressure:
-                  scalable, resilient, and clean. I’ve got a bias for
-                  minimalism, so I keep things simple and straightforward
-                  wherever I can. Most of the time I’m experimenting with new
-                  tech, hacking together projects, or diving deep into cloud
-                  infrastructure and distributed systems. I’m also trying to
-                  pick up some guitar skills (slowly but surely), and when I
-                  need a break, fictional story-driven games have me hooked.
-                  Uncharted in particular — man, that’s some serious
-                  storytelling and adventure.
-                </p>
-                <p className="max-w-[600px] text-gray-500 md:text-xl dark:text-gray-400 mt-4">
-                  Pretty much always down to chat about code, cloud
-                  architectures, or why AI is either going to save us all or
-                  make us completely obsolete — haven’t decided which yet! What
-                  brings you here?
-                </p>
-              </div>
-              <br />
-              <div className="flex flex-col sm:flex-row gap-2">
-                <Button asChild className="inline-flex items-center">
-                  <a
-                    href="https://github.com/roguepikachu"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >
-                    <Github className="mr-2 h-4 w-4" />
-                    GitHub Profile
-                  </a>
-                </Button>
-                <Button asChild variant="outline">
-                  <a
-                    href="https://www.linkedin.com/in/cs-ayush-kumar/"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >
-                    <Linkedin className="mr-2 h-4 w-4" />
-                    LinkedIn
-                  </a>
-                </Button>
-                <Button
-                  variant="secondary"
-                  onClick={() => setContactModalOpen(true)}
-                >
-                  Contact Me
-                </Button>
-              </div>
-            </div>
-            <div className="flex items-center justify-center">
-              <ProfileSlideshow />
-            </div>
-          </div>
-        </div>
-
-        {/* Decorative elements */}
-        <div className="absolute inset-0 -z-10 bg-[radial-gradient(rgba(var(--primary-rgb),0.06)_1px,transparent_1px)] dark:bg-[radial-gradient(rgba(255,255,255,0.04)_1px,transparent_1px)] [background-size:20px_20px] [mask-image:radial-gradient(ellipse_at_center,white,transparent)]"></div>
-      </section>
-
-      {/* My Talks Section */}
-      <section className="py-16 bg-gradient-to-br from-primary/5 to-secondary/5">
-        <div className="container px-4 md:px-6">
-          <div className="text-center mb-12">
-            <h2 className="text-2xl font-bold tracking-tight sm:text-3xl mb-4">
-              My Talks & Presentations
-            </h2>
-            <p className="text-muted-foreground max-w-2xl mx-auto">
-              Sharing knowledge and insights with the community through talks, workshops, and presentations
-            </p>
-          </div>
-          
-          <div className="grid gap-8 lg:grid-cols-2 items-start">
-            {/* Video Embed */}
-            <div className="group">
-              <div className="relative overflow-hidden rounded-xl border shadow-lg bg-card hover:shadow-xl transition-all duration-300">
-                <div className="aspect-video">
-                  <iframe 
-                    width="100%" 
-                    height="100%" 
-                    src="https://www.youtube.com/embed/MOkPoKh0-hA?si=DSxFyJUbzf3PMt9g" 
-                    title="YouTube video player" 
-                    frameBorder="0" 
-                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
-                    referrerPolicy="strict-origin-when-cross-origin" 
-                    allowFullScreen
-                    className="rounded-t-xl"
-                  ></iframe>
-                </div>
-                <div className="p-6">
-                  <h3 className="font-semibold text-lg mb-2">Featured Talk</h3>
-                  <p className="text-muted-foreground text-sm">
-                    Deep dive into modern development practices and cloud architecture
-                  </p>
-                </div>
-              </div>
-            </div>
-
-            {/* Meetup Event */}
-            <div className="space-y-6">
-              <div className="group cursor-pointer">
-                <div className="relative overflow-hidden rounded-xl border bg-card shadow-lg hover:shadow-xl transition-all duration-300 p-6">
-                  <div className="absolute top-4 right-4">
-                    <div className="inline-flex items-center rounded-full bg-primary/10 px-3 py-1 text-xs font-semibold text-primary">
-                      Live Event
-                    </div>
-                  </div>
-                  
-                  <div className="space-y-4">
-                    <div className="flex items-center gap-3">
-                      <div className="w-12 h-12 rounded-full bg-gradient-to-br from-primary to-secondary flex items-center justify-center">
-                        <Sparkles className="w-6 h-6 text-primary-foreground" />
-                      </div>
-                      <div>
-                        <h3 className="font-semibold text-lg">Collabnix Meetup</h3>
-                        <p className="text-muted-foreground text-sm">Community Event</p>
-                      </div>
-                    </div>
-                    
-                    <p className="text-muted-foreground">
-                      Engaged with the developer community to share insights on scalable systems, 
-                      cloud architecture, and modern development practices.
-                    </p>
-                    
-                    <Button asChild variant="outline" className="w-full">
-                      <a 
-                        href="https://www.meetup.com/collabnix/events/300163572/" 
-                        target="_blank" 
-                        rel="noopener noreferrer"
-                        className="inline-flex items-center justify-center"
-                      >
-                        View Event Details <ArrowRight className="ml-2 h-4 w-4" />
-                      </a>
-                    </Button>
-                  </div>
-                </div>
-              </div>
-              
-              {/* Additional Talk Placeholder */}
-              <div className="relative overflow-hidden rounded-xl border bg-card/50 shadow-sm p-6">
-                <div className="flex items-center justify-between mb-4">
-                  <h3 className="font-semibold">More Talks Coming Soon</h3>
-                  <div className="inline-flex items-center rounded-full bg-muted px-3 py-1 text-xs font-semibold text-muted-foreground">
-                    Coming Soon
-                  </div>
-                </div>
-                <p className="text-muted-foreground text-sm">
-                  Stay tuned for upcoming presentations and workshop sessions on 
-                  distributed systems, AI/ML implementations, and cloud-native architectures.
-                </p>
-              </div>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      {/* Blog Posts Section */}
-      {sectionConfig.blog && (
-        <section className="py-16">
-          <div className="container px-4 md:px-6">
-            <div className="flex flex-col md:flex-row justify-between items-center gap-4 mb-10">
-              <div>
-                <h2 className="text-2xl font-bold tracking-tight sm:text-3xl">
-                  Recent Blog Posts
-                </h2>
-                <p className="text-muted-foreground">
-                  Thoughts, ideas, and tutorials
-                </p>
-              </div>
-              <Button asChild variant="secondary">
-                <Link to="/blog" className="inline-flex items-center">
-                  View All Posts <ArrowRight className="ml-2 h-4 w-4" />
-                </Link>
-              </Button>
-            </div>
-            <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
-              {posts.slice(0, 3).map((post) => (
-                <BlogPostCard key={post.id} post={post} />
-              ))}
-            </div>
-          </div>
-        </section>
-      )}
-
-      {/* Publications Section - Conditional based on sectionConfig */}
-      {sectionConfig.publications && (
-        <section className="py-16 bg-muted/30">
-          <div className="container px-4 md:px-6">
-            <div className="flex flex-col md:flex-row justify-between items-center gap-4 mb-10">
-              <div>
-                <h2 className="text-2xl font-bold tracking-tight sm:text-3xl">
-                  Featured Publications
-                </h2>
-                <p className="text-muted-foreground">
-                  Academic papers and research articles
-                </p>
-              </div>
-              <Button asChild variant="secondary">
-                <Link to="/publications" className="inline-flex items-center">
-                  View All Publications <ArrowRight className="ml-2 h-4 w-4" />
-                </Link>
-              </Button>
-            </div>
-
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-              {featuredPublications.map((publication) => (
-                <PublicationCard
-                  key={publication.id}
-                  publication={publication}
-                />
-              ))}
-            </div>
-          </div>
-        </section>
-      )}
-
-      {/* Featured Projects Section - Conditional based on sectionConfig */}
-      {sectionConfig.projects && (
-        <section className="bg-muted/50 py-16">
-          <div className="container px-4 md:px-6">
-            <div className="flex flex-col md:flex-row justify-between items-center gap-4 mb-10">
-              <div>
-                <h2 className="text-2xl font-bold tracking-tight sm:text-3xl">
-                  Featured Projects
-                </h2>
-                <p className="text-muted-foreground">
-                  Check out some of my latest work
-                </p>
-              </div>
-              <Button asChild variant="secondary">
-                <Link to="/projects" className="inline-flex items-center">
-                  View All Projects <ArrowRight className="ml-2 h-4 w-4" />
-                </Link>
-              </Button>
-            </div>
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-              {projects
-                .filter((p) => p.featured)
-                .slice(0, 3)
-                .map((project) => (
-                  <div
-                    key={project.id}
-                    className="group rounded-lg border bg-card shadow-sm hover:shadow-md"
-                  >
-                    <div className="p-6 flex flex-col h-full">
-                      {/* Featured label */}
-                      <div className="inline-flex items-center rounded-full bg-primary/10 px-2.5 py-0.5 text-xs font-semibold text-primary mb-4 self-start">
-                        Featured
-                      </div>
-                      {/* Make the project title a clickable Link */}
-                      <Link to={`/projects/${project.id}`}>
-                        <h3 className="text-xl font-bold mb-2 hover:text-primary">
-                          {project.title}
-                        </h3>
-                      </Link>
-                      <p className="text-muted-foreground text-sm flex-grow">
-                        {project.description}
-                      </p>
-                      <div className="mt-4 flex flex-wrap gap-2">
-                        {project.tags.map((tag) => (
-                          <div
-                            key={tag}
-                            className="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold"
-                          >
-                            {tag}
-                          </div>
-                        ))}
-                      </div>
-                      <div className="flex items-center gap-3 mt-4 pt-4 border-t">
-                        <Button size="sm" variant="outline" asChild>
-                          <a
-                            href={project.githubUrl}
-                            target="_blank"
-                            rel="noopener noreferrer"
-                          >
-                            <Github className="mr-1 h-3 w-3" />
-                            Code
-                          </a>
-                        </Button>
-                        {project.demoUrl && (
-                          <Button size="sm" asChild>
-                            <a
-                              href={project.demoUrl}
-                              target="_blank"
-                              rel="noopener noreferrer"
-                            >
-                              Live Demo
-                            </a>
-                          </Button>
-                        )}
-                      </div>
-                    </div>
-                  </div>
-                ))}
-            </div>
-          </div>
-        </section>
-      )}
-
-      <ContactModal
-        open={contactModalOpen}
-        onOpenChange={setContactModalOpen}
-      />
-    </div>
-  );
-}
diff --git a/src/pages/Index.tsx b/src/pages/Index.tsx
deleted file mode 100644
index 52ea22c..0000000
--- a/src/pages/Index.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-// Update this page (the content is just a fallback if you fail to update the page)
-
-const Index = () => {
-  return (
-    <div className="min-h-screen flex items-center justify-center bg-gray-100">
-      <div className="text-center">
-        <h1 className="text-4xl font-bold mb-4">Welcome to Your Blank App</h1>
-        <p className="text-xl text-gray-600">Start building your amazing project here!</p>
-      </div>
-    </div>
-  );
-};
-
-export default Index;
diff --git a/src/pages/about/About.module.css b/src/pages/about/About.module.css
new file mode 100644
index 0000000..bb6a55b
--- /dev/null
+++ b/src/pages/about/About.module.css
@@ -0,0 +1,140 @@
+/* About Page CSS Module */
+
+/* Main Container */
+.container {
+  @apply px-4 py-12 md:px-6 md:py-16 lg:py-24;
+}
+
+.wrapper {
+  @apply mx-auto max-w-4xl;
+}
+
+/* Header Section */
+.headerSection {
+  @apply space-y-2 text-center;
+}
+
+.title {
+  @apply text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl;
+}
+
+.tagline {
+  @apply mx-auto max-w-[700px] text-gray-500 md:text-xl/relaxed dark:text-gray-400;
+}
+
+/* Profile Section */
+.profileSection {
+  @apply mt-12 grid gap-8 md:grid-cols-2 md:items-start;
+}
+
+.imageWrapper {
+  @apply aspect-square overflow-hidden rounded-xl border;
+}
+
+.imagePlaceholder {
+  @apply h-full w-full flex items-center justify-center bg-muted;
+}
+
+.avatarPlaceholder {
+  @apply flex items-center justify-center h-full w-full bg-gradient-to-br from-primary/20 to-secondary text-6xl font-bold text-primary;
+}
+
+.profileContent {
+  @apply flex flex-col justify-center;
+}
+
+.profileTitle {
+  @apply text-2xl font-bold;
+}
+
+.profileBio {
+  @apply mt-4 text-muted-foreground;
+}
+
+.profileButtons {
+  @apply mt-6 flex flex-wrap gap-3;
+}
+
+/* Separator */
+.separator {
+  @apply my-12;
+}
+
+/* Tech Stack Section */
+.techSection {
+  @apply space-y-8;
+}
+
+.sectionTitle {
+  @apply text-2xl font-bold;
+}
+
+.techGrid {
+  @apply grid gap-6 sm:grid-cols-2 md:grid-cols-3;
+}
+
+.techCard {
+  @apply rounded-lg border p-6;
+}
+
+.techCardTitle {
+  @apply font-bold text-lg mb-4;
+}
+
+.techBadges {
+  @apply flex flex-wrap gap-2;
+}
+
+/* Education Section */
+.educationSection {
+  @apply space-y-8;
+}
+
+.educationCard {
+  @apply rounded-lg border p-6;
+}
+
+.educationHeader {
+  @apply flex flex-wrap items-start justify-between gap-2;
+}
+
+.educationTitle {
+  @apply font-bold;
+}
+
+.educationInstitution {
+  @apply text-muted-foreground;
+}
+
+.educationDescription {
+  @apply mt-4 text-muted-foreground;
+}
+
+/* Open Source Section */
+.openSourceSection {
+  @apply space-y-8;
+}
+
+.openSourceGrid {
+  @apply grid gap-6 sm:grid-cols-2;
+}
+
+.openSourceCard {
+  @apply rounded-lg border p-6;
+}
+
+.openSourceTitle {
+  @apply font-bold text-lg;
+}
+
+.openSourceDescription {
+  @apply mt-2 text-muted-foreground;
+}
+
+.openSourceButton {
+  @apply mt-2 p-0;
+}
+
+.openSourceButtonInner {
+  @apply inline-flex items-center;
+}
\ No newline at end of file
diff --git a/src/pages/About.tsx b/src/pages/about/About.tsx
similarity index 78%
rename from src/pages/About.tsx
rename to src/pages/about/About.tsx
index be22608..c435c93 100644
--- a/src/pages/About.tsx
+++ b/src/pages/about/About.tsx
@@ -6,12 +6,14 @@ import { Badge } from "@/components/ui/badge";
 import { Download, ExternalLink } from "lucide-react";
 import { ContactModal } from "@/components/contact-modal";
 import { CareerTimeline } from "@/components/CareerTimeline";
+import { siteConfig, careerData, techStack, education, openSourceContributions } from "@/config";
+import styles from "./About.module.css";
 
 export default function About() {
   const [contactModalOpen, setContactModalOpen] = useState(false);
   
-  // Career timeline data
-  const careerData = [
+  // Career timeline data is now imported from config
+  /* const careerData = [
     {
       id: "guidewire",
       company: "Guidewire Software Inc.",
@@ -182,10 +184,10 @@ export default function About() {
         }
       ]
     }
-  ];
+  ]; */
   
-  // Tech stack data organized by categories
-  const techStack = {
+  // Tech stack data is now imported from config
+  /* const techStack = {
     frontend: [
       "React.js",
       "TypeScript",
@@ -214,42 +216,42 @@ export default function About() {
       "GitHub Actions",
       "AWS",
     ],
-  };
+  }; */
 
   return (
-    <div className="container px-4 py-12 md:px-6 md:py-16 lg:py-24">
-      <div className="mx-auto max-w-4xl">
-        <div className="space-y-2 text-center">
-          <h1 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl">About Me</h1>
-          <p className="mx-auto max-w-[700px] text-gray-500 md:text-xl/relaxed dark:text-gray-400">
-            Engineer by trade, Designer by instinct, and Writer by habit
+    <div className={`container ${styles.container}`}>
+      <div className={styles.wrapper}>
+        <div className={styles.headerSection}>
+          <h1 className={styles.title}>{siteConfig.pages.about.title}</h1>
+          <p className={styles.tagline}>
+            {siteConfig.personal.tagline}
           </p>
         </div>
 
         {/* Profile section */}
-        <div className="mt-12 grid gap-8 md:grid-cols-2 md:items-start">
-          <div className="aspect-square overflow-hidden rounded-xl border">
-            <div className="h-full w-full flex items-center justify-center bg-muted">
+        <div className={styles.profileSection}>
+          <div className={styles.imageWrapper}>
+            <div className={styles.imagePlaceholder}>
               {/* Replace with your image */}
-              <div className="flex items-center justify-center h-full w-full bg-gradient-to-br from-primary/20 to-secondary text-6xl font-bold text-primary">
+              <div className={styles.avatarPlaceholder}>
                 AK
               </div>
             </div>
           </div>
-          <div className="flex flex-col justify-center">
-            <h2 className="text-2xl font-bold">Hi, I'm Ayush Kumar</h2>
-            <p className="mt-4 text-muted-foreground">
+          <div className={styles.profileContent}>
+            <h2 className={styles.profileTitle}>Hi, I'm Ayush Kumar</h2>
+            <p className={styles.profileBio}>
               I work mostly with Go, Kubernetes, and cloud infrastructure — building backend systems that are meant to scale and stay up. My
               focus is on clean, maintainable architecture, automation, and performance. I’ve spent a lot of time designing microservices,
               setting up CI/CD pipelines, and getting things to run smoothly in production. I have a strong foundation in AI and data
               systems, with hands-on experience in applying machine learning where it genuinely improves outcomes — and the judgment to
               avoid it where simpler solutions are more effective..
-              <p className="mt-4 text-muted-foreground">
+              <p className={styles.profileBio}>
                 Outside of code, I write technical articles, contribute to open-source when I can, and keep learning whatever tool or system
                 looks like it’ll help me do better work. Not big on fluff. Just here to build useful stuff and keep improving.
               </p>
             </p>
-            <div className="mt-6 flex flex-wrap gap-3">
+            <div className={styles.profileButtons}>
               <Button asChild>
                 <a href="/resume.pdf" download>
                   <Download className="mr-2 h-4 w-4" />
@@ -263,7 +265,7 @@ export default function About() {
           </div>
         </div>
 
-        <Separator className="my-12" />
+        <Separator className={styles.separator} />
 
         {/* Career Timeline */}
         <CareerTimeline 
@@ -271,17 +273,17 @@ export default function About() {
           title="Professional Journey" 
         />
 
-        <Separator className="my-12" />
+        <Separator className={styles.separator} />
 
         {/* Tech Stack section */}
-        <section className="space-y-8">
-          <h2 className="text-2xl font-bold">Tech Stack</h2>
+        <section className={styles.techSection}>
+          <h2 className={styles.sectionTitle}>Tech Stack</h2>
 
-          <div className="grid gap-6 sm:grid-cols-2 md:grid-cols-3">
+          <div className={styles.techGrid}>
             {/* Frontend */}
-            <div className="rounded-lg border p-6">
-              <h3 className="font-bold text-lg mb-4">Frontend</h3>
-              <div className="flex flex-wrap gap-2">
+            <div className={styles.techCard}>
+              <h3 className={styles.techCardTitle}>Frontend</h3>
+              <div className={styles.techBadges}>
                 {techStack.frontend.map(tech => (
                   <Badge key={tech} variant="secondary">
                     {tech}
@@ -291,9 +293,9 @@ export default function About() {
             </div>
 
             {/* Backend */}
-            <div className="rounded-lg border p-6">
-              <h3 className="font-bold text-lg mb-4">Backend</h3>
-              <div className="flex flex-wrap gap-2">
+            <div className={styles.techCard}>
+              <h3 className={styles.techCardTitle}>Backend</h3>
+              <div className={styles.techBadges}>
                 {techStack.backend.map(tech => (
                   <Badge key={tech} variant="secondary">
                     {tech}
@@ -303,9 +305,9 @@ export default function About() {
             </div>
 
             {/* Tools */}
-            <div className="rounded-lg border p-6">
-              <h3 className="font-bold text-lg mb-4">Tools & DevOps</h3>
-              <div className="flex flex-wrap gap-2">
+            <div className={styles.techCard}>
+              <h3 className={styles.techCardTitle}>Tools & DevOps</h3>
+              <div className={styles.techBadges}>
                 {techStack.tools.map(tech => (
                   <Badge key={tech} variant="secondary">
                     {tech}
@@ -316,54 +318,54 @@ export default function About() {
           </div>
         </section>
 
-        <Separator className="my-12" />
+        <Separator className={styles.separator} />
 
         {/* Education section */}
-        <section className="space-y-8">
-          <h2 className="text-2xl font-bold">Education</h2>
+        <section className={styles.educationSection}>
+          <h2 className={styles.sectionTitle}>Education</h2>
 
-          <div className="rounded-lg border p-6">
-            <div className="flex flex-wrap items-start justify-between gap-2">
+          <div className={styles.educationCard}>
+            <div className={styles.educationHeader}>
               <div>
-                <h3 className="font-bold">Bachelor of Science in Computer Science</h3>
-                <p className="text-muted-foreground">University Name</p>
+                <h3 className={styles.educationTitle}>Bachelor of Science in Computer Science</h3>
+                <p className={styles.educationInstitution}>University Name</p>
               </div>
               <Badge variant="outline">2015 - 2019</Badge>
             </div>
-            <p className="mt-4 text-muted-foreground">
+            <p className={styles.educationDescription}>
               Graduated with honors. Specialized in web technologies and software engineering. Completed a senior project on real-time
               collaborative web applications.
             </p>
           </div>
         </section>
 
-        <Separator className="my-12" />
+        <Separator className={styles.separator} />
 
         {/* Open Source & Community */}
-        <section className="space-y-8">
-          <h2 className="text-2xl font-bold">Open Source & Community</h2>
+        <section className={styles.openSourceSection}>
+          <h2 className={styles.sectionTitle}>Open Source & Community</h2>
 
-          <div className="grid gap-6 sm:grid-cols-2">
-            <div className="rounded-lg border p-6">
-              <h3 className="font-bold text-lg">Open Source Contributions</h3>
-              <p className="mt-2 text-muted-foreground">
+          <div className={styles.openSourceGrid}>
+            <div className={styles.openSourceCard}>
+              <h3 className={styles.openSourceTitle}>Open Source Contributions</h3>
+              <p className={styles.openSourceDescription}>
                 Active contributor to several open-source projects including React-based libraries and developer tools.
               </p>
-              <Button variant="link" size="sm" asChild className="mt-2 p-0">
-                <a href="https://github.com/" target="_blank" rel="noopener noreferrer" className="inline-flex items-center">
+              <Button variant="link" size="sm" asChild className={styles.openSourceButton}>
+                <a href="https://github.com/" target="_blank" rel="noopener noreferrer" className={styles.openSourceButtonInner}>
                   View on GitHub
                   <ExternalLink className="ml-1 h-3 w-3" />
                 </a>
               </Button>
             </div>
 
-            <div className="rounded-lg border p-6">
-              <h3 className="font-bold text-lg">Speaker & Writer</h3>
-              <p className="mt-2 text-muted-foreground">
+            <div className={styles.openSourceCard}>
+              <h3 className={styles.openSourceTitle}>Speaker & Writer</h3>
+              <p className={styles.openSourceDescription}>
                 Regularly speak at local meetups and occasionally at conferences. Published technical articles on web development.
               </p>
-              <Button variant="link" size="sm" asChild className="mt-2 p-0">
-                <a href="#" target="_blank" rel="noopener noreferrer" className="inline-flex items-center">
+              <Button variant="link" size="sm" asChild className={styles.openSourceButton}>
+                <a href="#" target="_blank" rel="noopener noreferrer" className={styles.openSourceButtonInner}>
                   See Talks & Articles
                   <ExternalLink className="ml-1 h-3 w-3" />
                 </a>
diff --git a/src/pages/authcallback/AuthCallback.module.css b/src/pages/authcallback/AuthCallback.module.css
new file mode 100644
index 0000000..bf9c737
--- /dev/null
+++ b/src/pages/authcallback/AuthCallback.module.css
@@ -0,0 +1,5 @@
+/* AuthCallback Page CSS Module */
+
+.container {
+  @apply flex h-screen w-full items-center justify-center;
+}
\ No newline at end of file
diff --git a/src/pages/AuthCallback.tsx b/src/pages/authcallback/AuthCallback.tsx
similarity index 89%
rename from src/pages/AuthCallback.tsx
rename to src/pages/authcallback/AuthCallback.tsx
index 951aa0d..75791be 100644
--- a/src/pages/AuthCallback.tsx
+++ b/src/pages/authcallback/AuthCallback.tsx
@@ -2,6 +2,7 @@ import { useEffect } from "react";
 import { useNavigate } from "react-router-dom";
 import { supabase } from "@/lib/supabase";
 import { LoadingDots } from "@/components/ui/LoadingDots";
+import styles from './AuthCallback.module.css';
 
 export default function AuthCallback() {
   const navigate = useNavigate();
@@ -24,7 +25,7 @@ export default function AuthCallback() {
   }, [navigate]);
 
   return (
-    <div className="flex h-screen w-full items-center justify-center">
+    <div className={styles.container}>
       <LoadingDots />
     </div>
   );
diff --git a/src/pages/blog/Blog.module.css b/src/pages/blog/Blog.module.css
new file mode 100644
index 0000000..48398d5
--- /dev/null
+++ b/src/pages/blog/Blog.module.css
@@ -0,0 +1,164 @@
+/* Blog Page CSS Module */
+
+/* Loading Section */
+.loadingContainer {
+  @apply px-4 py-12 md:px-6 md:py-16 lg:py-24;
+}
+
+.loadingWrapper {
+  @apply mx-auto max-w-4xl;
+}
+
+.loadingContent {
+  @apply flex flex-col items-center justify-center space-y-6;
+}
+
+.loadingIconWrapper {
+  @apply relative;
+}
+
+.loadingIcon {
+  @apply h-16 w-16 text-primary animate-pulse;
+}
+
+.loadingTextWrapper {
+  @apply text-center space-y-2;
+}
+
+.loadingTitle {
+  @apply text-2xl font-semibold;
+}
+
+.loadingMessage {
+  @apply text-muted-foreground;
+}
+
+/* Main Container */
+.container {
+  @apply px-4 py-12 md:px-6 md:py-16 lg:py-24;
+}
+
+.wrapper {
+  @apply mx-auto max-w-4xl;
+}
+
+/* Header Section */
+.headerSection {
+  @apply space-y-2 text-center;
+}
+
+.title {
+  @apply text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl;
+}
+
+.subtitle {
+  @apply mx-auto max-w-[700px] text-gray-500 md:text-xl/relaxed dark:text-gray-400;
+}
+
+/* Filters Section */
+.filtersSection {
+  @apply mt-8 space-y-6;
+}
+
+.filtersRow {
+  @apply flex flex-col gap-4 sm:flex-row;
+}
+
+.searchWrapper {
+  @apply relative flex-1;
+}
+
+.searchIcon {
+  @apply absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground;
+}
+
+.searchInput {
+  @apply !pl-12;
+}
+
+.clearButton {
+  @apply absolute right-1 top-1/2 h-7 w-7 -translate-y-1/2;
+}
+
+.clearIcon {
+  @apply h-4 w-4;
+}
+
+.screenReaderOnly {
+  @apply sr-only;
+}
+
+.selectWrapper {
+  @apply w-full sm:w-[180px];
+}
+
+.selectHeader {
+  @apply flex items-center justify-between;
+}
+
+.selectTitle {
+  @apply text-sm font-medium sm:hidden;
+}
+
+.clearButtonSmall {
+  @apply h-7 text-xs hover:bg-transparent hover:underline sm:hidden;
+}
+
+.selectTrigger {
+  @apply w-full;
+}
+
+/* Selected Tags */
+.selectedTagsHeader {
+  @apply hidden sm:flex items-center justify-between;
+}
+
+.selectedTagsTitle {
+  @apply text-sm font-medium;
+}
+
+.selectedTagsClear {
+  @apply h-7 text-xs hover:bg-transparent hover:underline;
+}
+
+.selectedTagsContainer {
+  @apply mt-2 flex flex-wrap gap-2;
+}
+
+.selectedTag {
+  @apply cursor-pointer;
+}
+
+.selectedTagIcon {
+  @apply ml-1 h-3 w-3;
+}
+
+/* Blog Posts Section */
+.postsSection {
+  @apply mt-12;
+}
+
+.postsGrid {
+  @apply grid gap-6 sm:grid-cols-2;
+}
+
+.postWrapper {
+  @apply h-full;
+}
+
+.postCard {
+  @apply h-full;
+}
+
+/* No Results */
+.noResults {
+  @apply py-12 text-center;
+}
+
+.noResultsText {
+  @apply text-muted-foreground;
+}
+
+.clearFiltersButton {
+  @apply mt-2;
+}
\ No newline at end of file
diff --git a/src/pages/Blog.tsx b/src/pages/blog/Blog.tsx
similarity index 68%
rename from src/pages/Blog.tsx
rename to src/pages/blog/Blog.tsx
index 8f3e305..52642c7 100644
--- a/src/pages/Blog.tsx
+++ b/src/pages/blog/Blog.tsx
@@ -13,9 +13,10 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { LoadingDots } from '../components/ui/LoadingDots';
-import { delay } from '../utils/delay';
+import { LoadingDots } from '@/components/ui/LoadingDots';
+import { delay } from '@/utils/delay';
 import { Link } from "react-router-dom";
+import styles from './Blog.module.css';
 
 export default function Blog() {
   const [blogPosts, setBlogPosts] = useState<BlogPost[]>([]);
@@ -95,15 +96,15 @@ export default function Blog() {
 
   if (loading) {
     return (
-      <div className="container px-4 py-12 md:px-6 md:py-16 lg:py-24">
-        <div className="mx-auto max-w-4xl">
-          <div className="flex flex-col items-center justify-center space-y-6">
-            <div className="relative">
-              <BookOpen className="h-16 w-16 text-primary animate-pulse" />
+      <div className={`container ${styles.loadingContainer}`}>
+        <div className={styles.loadingWrapper}>
+          <div className={styles.loadingContent}>
+            <div className={styles.loadingIconWrapper}>
+              <BookOpen className={styles.loadingIcon} />
             </div>
-            <div className="text-center space-y-2">
-              <h2 className="text-2xl font-semibold">Loading amazing content...</h2>
-              <p className="text-muted-foreground">Just a moment while we fetch the latest blog posts</p>
+            <div className={styles.loadingTextWrapper}>
+              <h2 className={styles.loadingTitle}>Loading amazing content...</h2>
+              <p className={styles.loadingMessage}>Just a moment while we fetch the latest blog posts</p>
             </div>
             <LoadingDots size="md" />
           </div>
@@ -113,24 +114,24 @@ export default function Blog() {
   }
 
   return (
-    <div className="container px-4 py-12 md:px-6 md:py-16 lg:py-24">
-      <div className="mx-auto max-w-4xl">
-        <div className="space-y-2 text-center">
-          <h1 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl">Blog</h1>
-          <p className="mx-auto max-w-[700px] text-gray-500 md:text-xl/relaxed dark:text-gray-400">
+    <div className={`container ${styles.container}`}>
+      <div className={styles.wrapper}>
+        <div className={styles.headerSection}>
+          <h1 className={styles.title}>Blog</h1>
+          <p className={styles.subtitle}>
             Sharing ideas, insights, and lessons learned from navigating the tech world.
           </p>
         </div>
 
         {/* Filters */}
-        <div className="mt-8 space-y-6">
-          <div className="flex flex-col gap-4 sm:flex-row">
-            <div className="relative flex-1">
-              <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+        <div className={styles.filtersSection}>
+          <div className={styles.filtersRow}>
+            <div className={styles.searchWrapper}>
+              <Search className={styles.searchIcon} />
               <Input
                 type="search"
                 placeholder="Search posts..."
-                className="pl-8"
+                className={styles.searchInput}
                 value={searchQuery}
                 onChange={e => setSearchQuery(e.target.value)}
               />
@@ -138,22 +139,22 @@ export default function Blog() {
                 <Button
                   variant="ghost"
                   size="icon"
-                  className="absolute right-1 top-1/2 h-7 w-7 -translate-y-1/2"
+                  className={styles.clearButton}
                   onClick={() => setSearchQuery('')}
                 >
-                  <X className="h-4 w-4" />
-                  <span className="sr-only">Clear search</span>
+                  <X className={styles.clearIcon} />
+                  <span className={styles.screenReaderOnly}>Clear search</span>
                 </Button>
               )}
             </div>
-            <div className="w-full sm:w-[180px]">
-              <div className="flex items-center justify-between">
-                <h3 className="text-sm font-medium sm:hidden">Filter by tag</h3>
+            <div className={styles.selectWrapper}>
+              <div className={styles.selectHeader}>
+                <h3 className={styles.selectTitle}>Filter by tag</h3>
                 {selectedTags.length > 0 && (
                   <Button
                     variant="ghost"
                     size="sm"
-                    className="h-7 text-xs hover:bg-transparent hover:underline sm:hidden"
+                    className={styles.clearButtonSmall}
                     onClick={() => setSelectedTags([])}
                   >
                     Clear ({selectedTags.length})
@@ -161,7 +162,7 @@ export default function Blog() {
                 )}
               </div>
               <Select onValueChange={handleTagSelect}>
-                <SelectTrigger className="w-full">
+                <SelectTrigger className={styles.selectTrigger}>
                   <SelectValue placeholder="Filter by tag" />
                 </SelectTrigger>
                 <SelectContent>
@@ -179,22 +180,22 @@ export default function Blog() {
           {/* Selected tags */}
           {selectedTags.length > 0 && (
             <div>
-              <div className="hidden sm:flex items-center justify-between">
-                <h3 className="text-sm font-medium">Selected tags</h3>
+              <div className={styles.selectedTagsHeader}>
+                <h3 className={styles.selectedTagsTitle}>Selected tags</h3>
                 <Button
                   variant="ghost"
                   size="sm"
-                  className="h-7 text-xs hover:bg-transparent hover:underline"
+                  className={styles.selectedTagsClear}
                   onClick={() => setSelectedTags([])}
                 >
                   Clear ({selectedTags.length})
                 </Button>
               </div>
-              <div className="mt-2 flex flex-wrap gap-2">
+              <div className={styles.selectedTagsContainer}>
                 {selectedTags.map(tag => (
-                  <Badge key={tag} variant="default" className="cursor-pointer" onClick={() => toggleTag(tag)}>
+                  <Badge key={tag} variant="default" className={styles.selectedTag} onClick={() => toggleTag(tag)}>
                     {tag}
-                    <X className="ml-1 h-3 w-3" />
+                    <X className={styles.selectedTagIcon} />
                   </Badge>
                 ))}
               </div>
@@ -203,19 +204,19 @@ export default function Blog() {
         </div>
 
         {/* Blog posts grid */}
-        <div className="mt-12">
+        <div className={styles.postsSection}>
           {sortedPosts.length > 0 ? (
-            <div className="grid gap-6 sm:grid-cols-2">
+            <div className={styles.postsGrid}>
               {sortedPosts.map(post => (
-                <div key={post.id} className="h-full">
-                  <BlogPostCard post={post} className="h-full" />
+                <div key={post.id} className={styles.postWrapper}>
+                  <BlogPostCard post={post} className={styles.postCard} />
                 </div>
               ))}
             </div>
           ) : (
-            <div className="py-12 text-center">
-              <p className="text-muted-foreground">No posts found matching your criteria.</p>
-              <Button variant="link" onClick={clearFilters} className="mt-2">
+            <div className={styles.noResults}>
+              <p className={styles.noResultsText}>No posts found matching your criteria.</p>
+              <Button variant="link" onClick={clearFilters} className={styles.clearFiltersButton}>
                 Clear all filters
               </Button>
             </div>
diff --git a/src/pages/blogpost/BlogPost.module.css b/src/pages/blogpost/BlogPost.module.css
new file mode 100644
index 0000000..54586dc
--- /dev/null
+++ b/src/pages/blogpost/BlogPost.module.css
@@ -0,0 +1,198 @@
+/* BlogPost Page CSS Module */
+
+/* Loading Section */
+.loadingContainer {
+  @apply py-16 flex items-center justify-center;
+}
+
+.loadingContent {
+  @apply flex flex-col items-center space-y-6;
+}
+
+.loadingIconWrapper {
+  @apply relative;
+}
+
+.loadingIcon {
+  @apply h-16 w-16 text-primary animate-pulse;
+}
+
+.loadingTextWrapper {
+  @apply text-center space-y-2;
+}
+
+.loadingTitle {
+  @apply text-2xl font-semibold;
+}
+
+.loadingMessage {
+  @apply text-muted-foreground;
+}
+
+/* Not Found Section */
+.notFoundContainer {
+  @apply py-16 flex items-center justify-center;
+}
+
+.notFoundContent {
+  @apply text-center;
+}
+
+.notFoundTitle {
+  @apply text-xl;
+}
+
+.backToBlogatButton {
+  @apply mt-4;
+}
+
+/* Main Container */
+.container {
+  @apply py-12 md:py-16;
+}
+
+.wrapper {
+  @apply mx-auto max-w-3xl;
+}
+
+/* Back Link */
+.backLink {
+  @apply inline-flex items-center text-sm text-muted-foreground hover:text-foreground transition-colors mb-8;
+}
+
+.backIcon {
+  @apply mr-2 h-4 w-4;
+}
+
+/* Post Header */
+.postHeader {
+  @apply mb-10;
+}
+
+.badgesWrapper {
+  @apply flex flex-wrap items-center gap-2 mb-4;
+}
+
+/* .pinnedBadge styles now handled by .badge-featured utility class */
+
+/* .newBadge styles now handled by .badge-featured utility class */
+
+.postTitle {
+  @apply text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl mb-4;
+}
+
+.postMeta {
+  @apply flex flex-wrap items-center gap-x-6 gap-y-2 text-sm text-muted-foreground;
+}
+
+.metaItem {
+  @apply flex items-center;
+}
+
+.metaIcon {
+  @apply mr-1 h-4 w-4;
+}
+
+.tagsWrapper {
+  @apply mt-4 flex flex-wrap gap-2;
+}
+
+.tagLink {
+  @apply hover:bg-secondary/80;
+}
+
+.votingWrapper {
+  @apply mt-6;
+}
+
+/* Post Content */
+.contentPlaceholder {
+  @apply text-muted-foreground;
+}
+
+/* Share Section */
+.shareSection {
+  @apply mt-10 flex flex-wrap items-center gap-3 border-t pt-6;
+}
+
+.shareLabel {
+  @apply text-sm font-medium;
+}
+
+.shareButton {
+  @apply rounded-full;
+}
+
+.shareButtonCopy {
+  @apply ml-auto;
+}
+
+.shareIcon {
+  @apply h-4 w-4;
+}
+
+.shareIconSmall {
+  @apply mr-1 h-4 w-4;
+}
+
+.screenReaderOnly {
+  @apply sr-only;
+}
+
+/* Post Navigation */
+.postNavigation {
+  @apply mt-12 grid grid-cols-1 gap-4 sm:grid-cols-2;
+}
+
+.navLink {
+  @apply flex flex-col gap-1 rounded-lg border p-4 transition-colors hover:bg-muted;
+}
+
+.navLinkNext {
+  @apply flex flex-col gap-1 rounded-lg border p-4 transition-colors hover:bg-muted;
+}
+
+.navLinkNextSingle {
+  @apply flex flex-col gap-1 rounded-lg border p-4 transition-colors hover:bg-muted sm:col-start-2;
+}
+
+.navLabel {
+  @apply text-sm text-muted-foreground flex items-center;
+}
+
+.navLabelNext {
+  @apply text-sm text-muted-foreground flex items-center justify-end;
+}
+
+.navIcon {
+  @apply mr-1 h-3 w-3;
+}
+
+.navIconNext {
+  @apply ml-1 h-3 w-3;
+}
+
+.navTitle {
+  @apply font-medium group-hover:text-foreground/80;
+}
+
+.navTitleNext {
+  @apply font-medium text-right group-hover:text-foreground/80;
+}
+
+/* Related Posts */
+.relatedSection {
+  @apply mt-16;
+}
+
+.relatedSeparator {
+  @apply my-8;
+}
+
+.relatedTitle {
+  @apply text-2xl font-bold mb-8;
+}
+
+.relatedGrid {
+  @apply grid gap-6 sm:grid-cols-2;
+}
\ No newline at end of file
diff --git a/src/pages/BlogPost.tsx b/src/pages/blogpost/BlogPost.tsx
similarity index 65%
rename from src/pages/BlogPost.tsx
rename to src/pages/blogpost/BlogPost.tsx
index b211485..3e39b8c 100644
--- a/src/pages/BlogPost.tsx
+++ b/src/pages/blogpost/BlogPost.tsx
@@ -11,10 +11,12 @@ import { MarkdownRenderer, calculateReadingTime } from '@/utils/markdown-utils';
 import { toast } from 'sonner';
 import { CommentSection } from '@/components/blog/CommentSection';
 import { VotingButtons } from '@/components/VotingButtons';
-import { LoadingDots } from '../components/ui/LoadingDots';
-import { delay } from '../utils/delay';
+import { LoadingDots } from '@/components/ui/LoadingDots';
+import { delay } from '@/utils/delay';
+import badgeStyles from '@/styles/badges.module.css';
 import { supabase } from "@/lib/supabase";
 import { User } from "@supabase/supabase-js";
+import styles from './BlogPost.module.css';
 
 export default function BlogPost() {
   const { id } = useParams<{ id: string }>();
@@ -98,14 +100,14 @@ export default function BlogPost() {
   
   if (loading) {
     return (
-      <div className="container py-16 flex items-center justify-center">
-        <div className="flex flex-col items-center space-y-6">
-          <div className="relative">
-            <FileText className="h-16 w-16 text-primary animate-pulse" />
+      <div className={`container ${styles.loadingContainer}`}>
+        <div className={styles.loadingContent}>
+          <div className={styles.loadingIconWrapper}>
+            <FileText className={styles.loadingIcon} />
           </div>
-          <div className="text-center space-y-2">
-            <h2 className="text-2xl font-semibold">Reading between the lines...</h2>
-            <p className="text-muted-foreground">Loading your article with care</p>
+          <div className={styles.loadingTextWrapper}>
+            <h2 className={styles.loadingTitle}>Reading between the lines...</h2>
+            <p className={styles.loadingMessage}>Loading your article with care</p>
           </div>
           <LoadingDots size="sm" />
         </div>
@@ -115,10 +117,10 @@ export default function BlogPost() {
   
   if (!post) {
     return (
-      <div className="container py-16 flex items-center justify-center">
-        <div className="text-center">
-          <p className="text-xl">Post not found</p>
-          <Button variant="link" asChild className="mt-4">
+      <div className={`container ${styles.notFoundContainer}`}>
+        <div className={styles.notFoundContent}>
+          <p className={styles.notFoundTitle}>Post not found</p>
+          <Button variant="link" asChild className={styles.backToBlogButton}>
             <Link to="/blog">Back to Blog</Link>
           </Button>
         </div>
@@ -134,55 +136,55 @@ export default function BlogPost() {
   });
 
   return (
-    <div className="container py-12 md:py-16">
-      <div className="mx-auto max-w-3xl">
+    <div className={`container ${styles.container}`}>
+      <div className={styles.wrapper}>
         {/* Back to blog link */}
         <Link 
           to="/blog" 
-          className="inline-flex items-center text-sm text-muted-foreground hover:text-foreground transition-colors mb-8"
+          className={styles.backLink}
         >
-          <ArrowLeft className="mr-2 h-4 w-4" />
+          <ArrowLeft className={styles.backIcon} />
           Back to all posts
         </Link>
         
         {/* Post header */}
         <article>
-          <header className="mb-10">
-            <div className="flex flex-wrap items-center gap-2 mb-4">
+          <header className={styles.postHeader}>
+            <div className={styles.badgesWrapper}>
               {post.pinned && (
-                <Badge variant="outline" className="bg-primary/10 hover:bg-primary/20 text-primary border-primary/10">
+                <Badge variant="outline" className={badgeStyles.pinned}>
                   Pinned
                 </Badge>
               )}
               {post.release && (
-                <Badge variant="outline" className="bg-accent/10 hover:bg-accent/20 border-accent/10">
+                <Badge variant="outline" className={badgeStyles.new}>
                   New
                 </Badge>
               )}
             </div>
             
-            <h1 className="text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl mb-4">
+            <h1 className={styles.postTitle}>
               {post.title}
             </h1>
             
-            <div className="flex flex-wrap items-center gap-x-6 gap-y-2 text-sm text-muted-foreground">
-              <div className="flex items-center">
-                <Calendar className="mr-1 h-4 w-4" />
+            <div className={styles.postMeta}>
+              <div className={styles.metaItem}>
+                <Calendar className={styles.metaIcon} />
                 <time dateTime={post.date}>{formattedDate}</time>
               </div>
               
               {!!readingTime && (
-                <div className="flex items-center">
-                  <Clock className="mr-1 h-4 w-4" />
+                <div className={styles.metaItem}>
+                  <Clock className={styles.metaIcon} />
                   <span>{readingTime} min read</span>
                 </div>
               )}
             </div>
             
-            <div className="mt-4 flex flex-wrap gap-2">
+            <div className={styles.tagsWrapper}>
               {post.tags.map(tag => (
                 <Link to={`/blog?tag=${tag}`} key={tag}>
-                  <Badge variant="secondary" className="hover:bg-secondary/80">
+                  <Badge variant="secondary" className={styles.tagLink}>
                     {tag}
                   </Badge>
                 </Link>
@@ -190,7 +192,7 @@ export default function BlogPost() {
             </div>
 
             {/* Voting buttons */}
-            <div className="mt-6">
+            <div className={styles.votingWrapper}>
               <VotingButtons itemId={post.id} itemType="blog" />
             </div>
           </header>
@@ -199,44 +201,44 @@ export default function BlogPost() {
           {post.content ? (
             <MarkdownRenderer content={post.content} />
           ) : (
-            <p className="text-muted-foreground">No content available for this post.</p>
+            <p className={styles.contentPlaceholder}>No content available for this post.</p>
           )}
 
           {/* Share buttons */}
-          <div className="mt-10 flex flex-wrap items-center gap-3 border-t pt-6">
-            <span className="text-sm font-medium">Share this post:</span>
+          <div className={styles.shareSection}>
+            <span className={styles.shareLabel}>Share this post:</span>
             <Button 
               variant="outline" 
               size="sm" 
-              className="rounded-full" 
+              className={styles.shareButton} 
               onClick={() => shareOnSocialMedia('facebook')}
             >
-              <Facebook className="h-4 w-4" />
-              <span className="sr-only">Share on Facebook</span>
+              <Facebook className={styles.shareIcon} />
+              <span className={styles.screenReaderOnly}>Share on Facebook</span>
             </Button>
             <Button 
               variant="outline" 
               size="sm" 
-              className="rounded-full" 
+              className={styles.shareButton} 
               onClick={() => shareOnSocialMedia('twitter')}
             >
-              <Twitter className="h-4 w-4" />
-              <span className="sr-only">Share on Twitter</span>
+              <Twitter className={styles.shareIcon} />
+              <span className={styles.screenReaderOnly}>Share on Twitter</span>
             </Button>
             <Button 
               variant="outline" 
               size="sm" 
               onClick={copyToClipboard} 
-              className="ml-auto"
+              className={styles.shareButtonCopy}
             >
               {linkCopied ? (
                 <>
-                  <Check className="mr-1 h-4 w-4" />
+                  <Check className={styles.shareIconSmall} />
                   Copied
                 </>
               ) : (
                 <>
-                  <Copy className="mr-1 h-4 w-4" />
+                  <Copy className={styles.shareIconSmall} />
                   Copy Link
                 </>
               )}
@@ -244,31 +246,29 @@ export default function BlogPost() {
           </div>
           
           {/* Post navigation */}
-          <div className="mt-12 grid grid-cols-1 gap-4 sm:grid-cols-2">
+          <div className={styles.postNavigation}>
             {prevPost && (
               <Link
                 to={`/blog/${prevPost.id}`}
-                className="group flex flex-col gap-1 rounded-lg border p-4 transition-colors hover:bg-muted"
+                className={`group ${styles.navLink}`}
               >
-                <span className="text-sm text-muted-foreground flex items-center">
-                  <ArrowLeft className="mr-1 h-3 w-3" />
+                <span className={styles.navLabel}>
+                  <ArrowLeft className={styles.navIcon} />
                   Previous post
                 </span>
-                <span className="font-medium group-hover:text-foreground/80">{prevPost.title}</span>
+                <span className={styles.navTitle}>{prevPost.title}</span>
               </Link>
             )}
             {nextPost && (
               <Link
                 to={`/blog/${nextPost.id}`}
-                className={`group flex flex-col gap-1 rounded-lg border p-4 transition-colors hover:bg-muted ${
-                  !prevPost ? "sm:col-start-2" : ""
-                }`}
+                className={`group ${!prevPost ? styles.navLinkNextSingle : styles.navLinkNext}`}
               >
-                <span className="text-sm text-muted-foreground flex items-center justify-end">
+                <span className={styles.navLabelNext}>
                   Next post
-                  <ArrowRight className="ml-1 h-3 w-3" />
+                  <ArrowRight className={styles.navIconNext} />
                 </span>
-                <span className="font-medium text-right group-hover:text-foreground/80">{nextPost.title}</span>
+                <span className={styles.navTitleNext}>{nextPost.title}</span>
               </Link>
             )}
           </div>
@@ -280,10 +280,10 @@ export default function BlogPost() {
         
         {/* Related posts */}
         {relatedPosts.length > 0 && (
-          <div className="mt-16">
-            <Separator className="my-8" />
-            <h2 className="text-2xl font-bold mb-8">Related Posts</h2>
-            <div className="grid gap-6 sm:grid-cols-2">
+          <div className={styles.relatedSection}>
+            <Separator className={styles.relatedSeparator} />
+            <h2 className={styles.relatedTitle}>Related Posts</h2>
+            <div className={styles.relatedGrid}>
               {relatedPosts.map(post => (
                 <BlogPostCard key={post.id} post={post} />
               ))}
diff --git a/src/pages/home/Home.module.css b/src/pages/home/Home.module.css
new file mode 100644
index 0000000..ea4b3fc
--- /dev/null
+++ b/src/pages/home/Home.module.css
@@ -0,0 +1,269 @@
+/* Home Page CSS Module */
+
+/* Loading Section */
+.loadingContainer {
+  @apply container px-4 py-12 md:px-6 md:py-16 lg:py-24;
+}
+
+.loadingWrapper {
+  @apply mx-auto max-w-5xl;
+}
+
+.loadingContent {
+  @apply flex flex-col items-center justify-center space-y-6;
+}
+
+.loadingIconWrapper {
+  @apply relative;
+}
+
+.loadingIcon {
+  @apply h-16 w-16 text-primary animate-pulse;
+}
+
+.loadingTextWrapper {
+  @apply text-center space-y-2;
+}
+
+.loadingTitle {
+  @apply text-2xl font-semibold;
+}
+
+.loadingMessage {
+  @apply text-muted-foreground;
+}
+
+/* Main Container */
+.mainContainer {
+  @apply flex flex-col min-h-screen;
+}
+
+/* Hero Section */
+.heroSection {
+  @apply flex-1 flex items-center relative overflow-hidden;
+}
+
+.heroContainer {
+  @apply container px-4 md:px-6 space-y-10 py-16 md:py-24;
+}
+
+.heroGrid {
+  @apply grid gap-6 lg:grid-cols-[1fr_400px] lg:gap-12 xl:grid-cols-[1fr_500px];
+}
+
+.heroContent {
+  @apply flex flex-col justify-center space-y-4;
+}
+
+.heroTextWrapper {
+  @apply space-y-2;
+}
+
+.heroTitle {
+  @apply text-2xl font-bold tracking-tighter sm:text-3xl md:text-4xl lg:text-5xl/none mb-4;
+}
+
+.heroBio {
+  @apply max-w-[600px] text-gray-500 md:text-xl dark:text-gray-400 whitespace-pre-line;
+}
+
+.heroButtons {
+  @apply flex flex-col sm:flex-row gap-2;
+}
+
+.heroButton {
+  @apply inline-flex items-center;
+}
+
+.heroImageWrapper {
+  @apply flex items-center justify-center;
+}
+
+/* Talks Section */
+.talksSection {
+  @apply py-16 bg-gradient-to-br from-primary/5 to-secondary/5;
+}
+
+.talksContainer {
+  @apply container px-4 md:px-6;
+}
+
+.talksHeader {
+  @apply text-center mb-12;
+}
+
+.talksTitle {
+  @apply text-2xl font-bold tracking-tight sm:text-3xl mb-4;
+}
+
+.talksDescription {
+  @apply text-muted-foreground max-w-2xl mx-auto;
+}
+
+.talksGrid {
+  @apply grid gap-8 lg:grid-cols-2 items-start;
+}
+
+.talksColumn {
+  @apply space-y-6;
+}
+
+.talkCard {
+  @apply cursor-pointer;
+}
+
+.talkCardInner {
+  @apply relative overflow-hidden rounded-xl border bg-card shadow-lg hover:shadow-xl transition-all duration-300 p-6;
+}
+
+.talkBadgeWrapper {
+  @apply absolute top-4 right-4 flex gap-2;
+}
+
+.talkBadge {
+  @apply inline-flex items-center rounded-full bg-primary/10 px-3 py-1 text-xs font-semibold text-primary;
+}
+
+.talkContent {
+  @apply space-y-4 mt-6;
+}
+
+.talkHeader {
+  @apply flex items-start gap-3 flex-wrap;
+}
+
+.talkIconCircle {
+  @apply w-12 h-12 min-w-[3rem] rounded-full bg-gradient-to-br from-primary to-secondary flex items-center justify-center flex-shrink-0;
+}
+
+.talkIcon {
+  @apply w-6 h-6 text-primary-foreground;
+}
+
+.talkTextContainer {
+  @apply flex-1 min-w-0;
+}
+
+.talkTitle {
+  @apply font-semibold text-lg break-words;
+}
+
+.talkSubtitle {
+  @apply text-muted-foreground text-sm;
+}
+
+.videoWrapper {
+  @apply aspect-video rounded-lg overflow-hidden;
+}
+
+.videoIframe {
+  @apply w-full h-full;
+}
+
+.talkDescription {
+  @apply text-muted-foreground;
+}
+
+.eventButton {
+  @apply w-full;
+}
+
+.eventButtonInner {
+  @apply inline-flex items-center justify-center;
+}
+
+/* Coming Soon Card */
+.comingSoonCard {
+  @apply relative overflow-hidden rounded-xl border bg-card/50 shadow-sm p-6;
+}
+
+.comingSoonHeader {
+  @apply flex items-center justify-between mb-4;
+}
+
+.comingSoonTitle {
+  @apply font-semibold;
+}
+
+.comingSoonBadge {
+  @apply inline-flex items-center rounded-full bg-muted px-3 py-1 text-xs font-semibold text-muted-foreground;
+}
+
+.comingSoonText {
+  @apply text-muted-foreground text-sm;
+}
+
+/* Blog Section */
+.blogSection {
+  @apply py-16;
+}
+
+.sectionHeader {
+  @apply flex flex-col md:flex-row justify-between items-center gap-4 mb-10;
+}
+
+.sectionTitle {
+  @apply text-2xl font-bold tracking-tight sm:text-3xl;
+}
+
+.sectionDescription {
+  @apply text-muted-foreground;
+}
+
+.blogGrid {
+  @apply grid gap-6 sm:grid-cols-2 lg:grid-cols-3;
+}
+
+/* Publications Section */
+.publicationsSection {
+  @apply py-16 bg-muted/30;
+}
+
+.publicationsGrid {
+  @apply grid grid-cols-1 md:grid-cols-2 gap-6;
+}
+
+.publicationsGrid > * {
+  @apply justify-self-start;
+}
+
+/* Projects Section */
+.projectsSection {
+  @apply bg-muted/50 py-16;
+}
+
+.projectsGrid {
+  @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6;
+}
+
+.projectCard {
+  @apply rounded-lg border bg-card shadow-sm hover:shadow-md;
+}
+
+.projectCardInner {
+  @apply p-6 flex flex-col h-full;
+}
+
+.projectBadge {
+  @apply mb-4 self-start;
+}
+
+.projectTitle {
+  @apply text-xl font-bold mb-2 hover:text-primary;
+}
+
+.projectDescription {
+  @apply text-muted-foreground text-sm flex-grow;
+}
+
+.projectTags {
+  @apply mt-4 flex flex-wrap gap-2;
+}
+
+.projectTag {
+  @apply inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold;
+}
+
+.projectActions {
+  @apply flex items-center gap-3 mt-4 pt-4 border-t;
+}
\ No newline at end of file
diff --git a/src/pages/home/Home.tsx b/src/pages/home/Home.tsx
new file mode 100644
index 0000000..3b17bd1
--- /dev/null
+++ b/src/pages/home/Home.tsx
@@ -0,0 +1,402 @@
+import { useEffect, useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Github, Linkedin, ArrowRight, Sparkles, Loader2, Play } from "lucide-react";
+import { ContactModal } from "@/components/contact-modal";
+import { Link } from "react-router-dom";
+import {
+  loadBlogPosts,
+  loadProjects,
+  loadPublications,
+} from "@/utils/content-loader";
+import { PublicationCard } from "@/components/publication-card";
+import { LoadingDots } from "@/components/ui/LoadingDots";
+import { delay } from "@/utils/delay";
+import { BlogPostCard } from "@/components/blog-post-card";
+import { ProfileSlideshow } from "@/components/ProfileSlideshow";
+import { siteConfig } from "@/config";
+import styles from "./Home.module.css";
+import badgeStyles from "@/styles/badges.module.css";
+
+export default function Home() {
+  const [contactModalOpen, setContactModalOpen] = useState(false);
+  const [posts, setPosts] = useState([]);
+  const [projects, setProjects] = useState([]);
+  const [publications, setPublications] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const loadData = async () => {
+      try {
+        const [postsData, projectsData, publicationsData] = await Promise.all([
+          loadBlogPosts(),
+          loadProjects(),
+          loadPublications(),
+        ]);
+        setPosts(postsData);
+        setProjects(projectsData);
+        setPublications(publicationsData);
+        await delay(); // Use default delay
+      } catch (error) {
+        console.error("Error loading data:", error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    loadData();
+  }, []);
+
+  const featuredPublications = publications
+    .filter((publication: any) => publication.featured)
+    .slice(0, 2);
+
+  // Add sectionConfig definition
+  const sectionConfig = {
+    blog: true,
+    publications: true,
+    projects: true,
+  };
+
+  if (loading) {
+    return (
+      <div className={styles.loadingContainer}>
+        <div className={styles.loadingWrapper}>
+          <div className={styles.loadingContent}>
+            <div className={styles.loadingIconWrapper}>
+              <Sparkles className={styles.loadingIcon} />
+            </div>
+            <div className={styles.loadingTextWrapper}>
+              <h2 className={styles.loadingTitle}>
+                {siteConfig.loading.home.title}
+              </h2>
+              <p className={styles.loadingMessage}>
+                {siteConfig.loading.home.message}
+              </p>
+            </div>
+            <LoadingDots size="md" />
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={styles.mainContainer}>
+      {/* Hero Section */}
+      <section className={styles.heroSection}>
+        <div className={styles.heroContainer}>
+          <div className={styles.heroGrid}>
+            <div className={styles.heroContent}>
+              <div className={styles.heroTextWrapper}>
+                <h1 className={styles.heroTitle}>
+                  {siteConfig.personal.role}
+                </h1>
+                <p className={styles.heroBio}>
+                  {siteConfig.personal.fullBio}
+                </p>
+              </div>
+              <br />
+              <div className={styles.heroButtons}>
+                <Button asChild className={styles.heroButton}>
+                  <a
+                    href={siteConfig.social.github}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    <Github className="mr-2 h-4 w-4" />
+                    {siteConfig.ui.buttons.githubProfile}
+                  </a>
+                </Button>
+                <Button asChild variant="outline">
+                  <a
+                    href={siteConfig.social.linkedin}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    <Linkedin className="mr-2 h-4 w-4" />
+                    {siteConfig.ui.buttons.linkedin}
+                  </a>
+                </Button>
+                <Button
+                  variant="secondary"
+                  onClick={() => setContactModalOpen(true)}
+                >
+                  {siteConfig.ui.buttons.contactMe}
+                </Button>
+              </div>
+            </div>
+            <div className={styles.heroImageWrapper}>
+              <ProfileSlideshow />
+            </div>
+          </div>
+        </div>
+
+        {/* Decorative elements */}
+        <div className="absolute inset-0 -z-10 bg-[radial-gradient(rgba(var(--primary-rgb),0.06)_1px,transparent_1px)] dark:bg-[radial-gradient(rgba(255,255,255,0.04)_1px,transparent_1px)] [background-size:20px_20px] [mask-image:radial-gradient(ellipse_at_center,white,transparent)]"></div>
+      </section>
+
+      {/* My Talks Section */}
+      <section className={styles.talksSection}>
+        <div className={styles.talksContainer}>
+          <div className={styles.talksHeader}>
+            <h2 className={styles.talksTitle}>
+              {siteConfig.sections.talks.title}
+            </h2>
+            <p className={styles.talksDescription}>
+              {siteConfig.sections.talks.description}
+            </p>
+          </div>
+          
+          <div className={styles.talksGrid}>
+            {/* Featured Talk */}
+            <div className={styles.talksColumn}>
+              <div className={styles.talkCard}>
+                <div className={styles.talkCardInner}>
+                  <div className={styles.talkBadgeWrapper}>
+                    <div className={styles.talkBadge}>
+                      {siteConfig.ui.badges.liveEvent}
+                    </div>
+                    <div className={styles.talkBadge}>
+                      {siteConfig.ui.badges.featured}
+                    </div>
+                  </div>
+                  
+                  <div className={styles.talkContent}>
+                    <div className={styles.talkHeader}>
+                      <div className={styles.talkIconCircle}>
+                        <Play className={styles.talkIcon} />
+                      </div>
+                      <div className={styles.talkTextContainer}>
+                        <h3 className={styles.talkTitle}>{siteConfig.sections.featuredTalk.title}</h3>
+                      </div>
+                    </div>
+                    
+                    <p className={styles.talkDescription}>
+                      {siteConfig.sections.featuredTalk.description}
+                    </p>
+                    
+                    <div className={styles.videoWrapper}>
+                      <iframe 
+                        width="100%" 
+                        height="100%" 
+                        src={siteConfig.external.featuredVideoUrl} 
+                        title="YouTube video player" 
+                        frameBorder="0" 
+                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
+                        referrerPolicy="strict-origin-when-cross-origin" 
+                        allowFullScreen
+                        className={styles.videoIframe}
+                      ></iframe>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            {/* Meetup Event */}
+            <div className={styles.talksColumn}>
+              <div className={styles.talkCard}>
+                <div className={styles.talkCardInner}>
+                  <div className={styles.talkBadgeWrapper}>
+                    <div className={styles.talkBadge}>
+                      {siteConfig.ui.badges.liveEvent}
+                    </div>
+                  </div>
+                  
+                  <div className={styles.talkContent}>
+                    <div className={styles.talkHeader}>
+                      <div className={styles.talkIconCircle}>
+                        <Sparkles className={styles.talkIcon} />
+                      </div>
+                      <div>
+                        <h3 className={styles.talkTitle}>{siteConfig.sections.collabnixMeetup.title}</h3>
+                        <p className={styles.talkSubtitle}>{siteConfig.sections.collabnixMeetup.subtitle}</p>
+                      </div>
+                    </div>
+                    
+                    <p className={styles.talkDescription}>
+                      {siteConfig.sections.collabnixMeetup.description}
+                    </p>
+                    
+                    <Button asChild variant="outline" className={styles.eventButton}>
+                      <a 
+                        href={siteConfig.external.meetupEventUrl} 
+                        target="_blank" 
+                        rel="noopener noreferrer"
+                        className={styles.eventButtonInner}
+                      >
+                        View Event Details <ArrowRight className="ml-2 h-4 w-4" />
+                      </a>
+                    </Button>
+                  </div>
+                </div>
+              </div>
+              
+              {/* Additional Talk Placeholder */}
+              <div className={styles.comingSoonCard}>
+                <div className={styles.comingSoonHeader}>
+                  <h3 className={styles.comingSoonTitle}>More Talks Coming Soon</h3>
+                  <div className={styles.comingSoonBadge}>
+                    Coming Soon
+                  </div>
+                </div>
+                <p className={styles.comingSoonText}>
+                  Stay tuned for upcoming presentations and workshop sessions on 
+                  distributed systems, AI/ML implementations, and cloud-native architectures.
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Blog Posts Section */}
+      {sectionConfig.blog && (
+        <section className={styles.blogSection}>
+          <div className={styles.talksContainer}>
+            <div className={styles.sectionHeader}>
+              <div>
+                <h2 className={styles.sectionTitle}>
+                  {siteConfig.sections.recentPosts.title}
+                </h2>
+                <p className={styles.sectionDescription}>
+                  Thoughts, ideas, and tutorials
+                </p>
+              </div>
+              <Button asChild variant="secondary">
+                <Link to="/blog" className="inline-flex items-center">
+                  {siteConfig.sections.recentPosts.viewAllText} <ArrowRight className="ml-2 h-4 w-4" />
+                </Link>
+              </Button>
+            </div>
+            <div className={styles.blogGrid}>
+              {posts.slice(0, 3).map((post) => (
+                <BlogPostCard key={post.id} post={post} />
+              ))}
+            </div>
+          </div>
+        </section>
+      )}
+
+      {/* Publications Section - Conditional based on sectionConfig */}
+      {sectionConfig.publications && (
+        <section className={styles.publicationsSection}>
+          <div className={styles.talksContainer}>
+            <div className={styles.sectionHeader}>
+              <div>
+                <h2 className={styles.sectionTitle}>
+                  {siteConfig.sections.featuredPublications.title}
+                </h2>
+                <p className={styles.sectionDescription}>
+                  Academic papers and research articles
+                </p>
+              </div>
+              <Button asChild variant="secondary">
+                <Link to="/publications" className="inline-flex items-center">
+                  {siteConfig.sections.featuredPublications.viewAllText} <ArrowRight className="ml-2 h-4 w-4" />
+                </Link>
+              </Button>
+            </div>
+
+            <div className={styles.publicationsGrid}>
+              {featuredPublications.map((publication) => (
+                <PublicationCard
+                  key={publication.id}
+                  publication={publication}
+                />
+              ))}
+            </div>
+          </div>
+        </section>
+      )}
+
+      {/* Featured Projects Section - Conditional based on sectionConfig */}
+      {sectionConfig.projects && (
+        <section className={styles.projectsSection}>
+          <div className={styles.talksContainer}>
+            <div className={styles.sectionHeader}>
+              <div>
+                <h2 className={styles.sectionTitle}>
+                  {siteConfig.sections.featuredProjects.title}
+                </h2>
+                <p className={styles.sectionDescription}>
+                  {siteConfig.sections.featuredProjects.description}
+                </p>
+              </div>
+              <Button asChild variant="secondary">
+                <Link to="/projects" className="inline-flex items-center">
+                  {siteConfig.sections.featuredProjects.viewAllText} <ArrowRight className="ml-2 h-4 w-4" />
+                </Link>
+              </Button>
+            </div>
+            <div className={styles.projectsGrid}>
+              {projects
+                .filter((p) => p.featured)
+                .slice(0, 3)
+                .map((project) => (
+                  <div
+                    key={project.id}
+                    className={styles.projectCard}
+                  >
+                    <div className={styles.projectCardInner}>
+                      {/* Featured label */}
+                      <div className={`${badgeStyles.featuredDiv} ${styles.projectBadge}`}>
+                        {siteConfig.ui.badges.featured}
+                      </div>
+                      {/* Make the project title a clickable Link */}
+                      <Link to={`/projects/${project.id}`}>
+                        <h3 className={styles.projectTitle}>
+                          {project.title}
+                        </h3>
+                      </Link>
+                      <p className={styles.projectDescription}>
+                        {project.description}
+                      </p>
+                      <div className={styles.projectTags}>
+                        {project.tags.map((tag) => (
+                          <div
+                            key={tag}
+                            className={styles.projectTag}
+                          >
+                            {tag}
+                          </div>
+                        ))}
+                      </div>
+                      <div className={styles.projectActions}>
+                        <Button size="sm" variant="outline" asChild>
+                          <a
+                            href={project.githubUrl}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                          >
+                            <Github className="mr-1 h-3 w-3" />
+                            {siteConfig.ui.buttons.code}
+                          </a>
+                        </Button>
+                        {project.demoUrl && (
+                          <Button size="sm" asChild>
+                            <a
+                              href={project.demoUrl}
+                              target="_blank"
+                              rel="noopener noreferrer"
+                            >
+                              {siteConfig.ui.buttons.liveDemo}
+                            </a>
+                          </Button>
+                        )}
+                      </div>
+                    </div>
+                  </div>
+                ))}
+            </div>
+          </div>
+        </section>
+      )}
+
+      <ContactModal
+        open={contactModalOpen}
+        onOpenChange={setContactModalOpen}
+      />
+    </div>
+  );
+}
diff --git a/src/pages/index/Index.module.css b/src/pages/index/Index.module.css
new file mode 100644
index 0000000..b2f89d6
--- /dev/null
+++ b/src/pages/index/Index.module.css
@@ -0,0 +1,17 @@
+/* Index Page CSS Module */
+
+.container {
+  @apply min-h-screen flex items-center justify-center bg-gray-100;
+}
+
+.content {
+  @apply text-center;
+}
+
+.title {
+  @apply text-4xl font-bold mb-4;
+}
+
+.subtitle {
+  @apply text-xl text-gray-600;
+}
\ No newline at end of file
diff --git a/src/pages/index/Index.tsx b/src/pages/index/Index.tsx
new file mode 100644
index 0000000..a18692a
--- /dev/null
+++ b/src/pages/index/Index.tsx
@@ -0,0 +1,15 @@
+// Update this page (the content is just a fallback if you fail to update the page)
+import styles from './Index.module.css';
+
+const Index = () => {
+  return (
+    <div className={styles.container}>
+      <div className={styles.content}>
+        <h1 className={styles.title}>Welcome to Your Blank App</h1>
+        <p className={styles.subtitle}>Start building your amazing project here!</p>
+      </div>
+    </div>
+  );
+};
+
+export default Index;
diff --git a/src/pages/notfound/NotFound.module.css b/src/pages/notfound/NotFound.module.css
new file mode 100644
index 0000000..70cf342
--- /dev/null
+++ b/src/pages/notfound/NotFound.module.css
@@ -0,0 +1,21 @@
+/* NotFound Page CSS Module */
+
+.container {
+  @apply min-h-screen flex items-center justify-center bg-gray-100;
+}
+
+.content {
+  @apply text-center;
+}
+
+.title {
+  @apply text-4xl font-bold mb-4;
+}
+
+.message {
+  @apply text-xl text-gray-600 mb-4;
+}
+
+.homeLink {
+  @apply text-blue-500 hover:text-blue-700 underline;
+}
\ No newline at end of file
diff --git a/src/pages/NotFound.tsx b/src/pages/notfound/NotFound.tsx
similarity index 56%
rename from src/pages/NotFound.tsx
rename to src/pages/notfound/NotFound.tsx
index cda36da..38118fc 100644
--- a/src/pages/NotFound.tsx
+++ b/src/pages/notfound/NotFound.tsx
@@ -1,5 +1,6 @@
 import { useLocation } from "react-router-dom";
 import { useEffect } from "react";
+import styles from './NotFound.module.css';
 
 const NotFound = () => {
   const location = useLocation();
@@ -12,11 +13,11 @@ const NotFound = () => {
   }, [location.pathname]);
 
   return (
-    <div className="min-h-screen flex items-center justify-center bg-gray-100">
-      <div className="text-center">
-        <h1 className="text-4xl font-bold mb-4">404</h1>
-        <p className="text-xl text-gray-600 mb-4">Oops! Page not found</p>
-        <a href="/" className="text-blue-500 hover:text-blue-700 underline">
+    <div className={styles.container}>
+      <div className={styles.content}>
+        <h1 className={styles.title}>404</h1>
+        <p className={styles.message}>Oops! Page not found</p>
+        <a href="/" className={styles.homeLink}>
           Return to Home
         </a>
       </div>
diff --git a/src/pages/project/Project.module.css b/src/pages/project/Project.module.css
new file mode 100644
index 0000000..498e8a8
--- /dev/null
+++ b/src/pages/project/Project.module.css
@@ -0,0 +1,154 @@
+/* Project Page CSS Module */
+
+/* Loading Section */
+.loadingContainer {
+  @apply py-16 flex items-center justify-center;
+}
+
+.loadingContent {
+  @apply flex flex-col items-center space-y-6;
+}
+
+.loadingIconWrapper {
+  @apply relative;
+}
+
+.loadingIcon {
+  @apply h-16 w-16 text-primary animate-pulse;
+}
+
+.loadingTextWrapper {
+  @apply text-center space-y-2;
+}
+
+.loadingTitle {
+  @apply text-2xl font-semibold;
+}
+
+.loadingMessage {
+  @apply text-muted-foreground;
+}
+
+/* Not Found Section */
+.notFoundContainer {
+  @apply py-16 flex items-center justify-center;
+}
+
+.notFoundContent {
+  @apply text-center;
+}
+
+.notFoundTitle {
+  @apply text-xl;
+}
+
+.backToProjectsButton {
+  @apply mt-4;
+}
+
+/* Main Container */
+.container {
+  @apply py-12 md:py-16;
+}
+
+.wrapper {
+  @apply mx-auto max-w-3xl;
+}
+
+/* Back Link */
+.backLink {
+  @apply inline-flex items-center text-sm text-muted-foreground hover:text-foreground mb-8;
+}
+
+.backIcon {
+  @apply mr-2 h-4 w-4;
+}
+
+/* Project Header */
+.projectHeader {
+  @apply mb-10;
+}
+
+.badgesWrapper {
+  @apply flex flex-wrap items-center gap-2 mb-4;
+}
+
+/* .featuredBadge styles now handled by .badge-featured utility class */
+
+.projectTitle {
+  @apply text-3xl font-bold tracking-tight sm:text-4xl mb-4;
+}
+
+.tagsWrapper {
+  @apply mt-4 flex flex-wrap gap-2;
+}
+
+.tagLink {
+  @apply hover:bg-secondary/80;
+}
+
+.buttonWrapper {
+  @apply mt-6 flex flex-wrap gap-3;
+}
+
+.buttonInner {
+  @apply inline-flex items-center;
+}
+
+.buttonIcon {
+  @apply mr-2 h-4 w-4;
+}
+
+.votingWrapper {
+  @apply mt-6;
+}
+
+/* Project Content */
+.projectContent {
+  @apply max-w-none;
+}
+
+.contentPlaceholder {
+  @apply text-muted-foreground;
+}
+
+.contentExtra {
+  @apply mt-4;
+}
+
+/* Related Projects */
+.relatedSection {
+  @apply mt-16;
+}
+
+.relatedTitle {
+  @apply text-2xl font-bold mb-8;
+}
+
+.relatedGrid {
+  @apply grid gap-6 sm:grid-cols-2;
+}
+
+.relatedProjectCard {
+  @apply block rounded-lg border bg-card p-6 shadow-sm hover:bg-muted;
+}
+
+.relatedProjectTitle {
+  @apply font-medium group-hover:text-primary;
+}
+
+.relatedProjectDescription {
+  @apply mt-2 text-sm text-muted-foreground line-clamp-2;
+}
+
+.relatedProjectTags {
+  @apply mt-4 flex flex-wrap gap-2;
+}
+
+.relatedProjectTag {
+  @apply text-xs;
+}
+
+.relatedProjectTagsMore {
+  @apply text-xs text-muted-foreground;
+}
\ No newline at end of file
diff --git a/src/pages/Project.tsx b/src/pages/project/Project.tsx
similarity index 57%
rename from src/pages/Project.tsx
rename to src/pages/project/Project.tsx
index c69b9ee..dec1065 100644
--- a/src/pages/Project.tsx
+++ b/src/pages/project/Project.tsx
@@ -7,8 +7,10 @@ import { MarkdownRenderer } from '@/utils/markdown-utils';
 import { VotingButtons } from '@/components/VotingButtons';
 import { loadProjects } from '@/utils/content-loader';
 import { Project as ProjectType } from '@/types/project';
-import { LoadingDots } from '../components/ui/LoadingDots';
-import { delay } from '../utils/delay';
+import { LoadingDots } from '@/components/ui/LoadingDots';
+import { delay } from '@/utils/delay';
+import styles from './Project.module.css';
+import badgeStyles from '@/styles/badges.module.css';
 
 export default function Project() {
   const { id } = useParams<{ id: string }>();
@@ -52,14 +54,14 @@ export default function Project() {
 
   if (loading) {
     return (
-      <div className="container py-16 flex items-center justify-center">
-        <div className="flex flex-col items-center space-y-6">
-          <div className="relative">
-            <Code2 className="h-16 w-16 text-primary animate-pulse" />
+      <div className={`container ${styles.loadingContainer}`}>
+        <div className={styles.loadingContent}>
+          <div className={styles.loadingIconWrapper}>
+            <Code2 className={styles.loadingIcon} />
           </div>
-          <div className="text-center space-y-2">
-            <h2 className="text-2xl font-semibold">Compiling project...</h2>
-            <p className="text-muted-foreground">Executing code and loading features</p>
+          <div className={styles.loadingTextWrapper}>
+            <h2 className={styles.loadingTitle}>Compiling project...</h2>
+            <p className={styles.loadingMessage}>Executing code and loading features</p>
           </div>
           <LoadingDots size="lg" />
         </div>
@@ -69,10 +71,10 @@ export default function Project() {
 
   if (!project) {
     return (
-      <div className="container py-16 flex items-center justify-center">
-        <div className="text-center">
-          <p className="text-xl">Project not found</p>
-          <Button variant="link" asChild className="mt-4">
+      <div className={`container ${styles.notFoundContainer}`}>
+        <div className={styles.notFoundContent}>
+          <p className={styles.notFoundTitle}>Project not found</p>
+          <Button variant="link" asChild className={styles.backToProjectsButton}>
             <Link to="/projects">Back to Projects</Link>
           </Button>
         </div>
@@ -81,50 +83,50 @@ export default function Project() {
   }
 
   return (
-    <div className="container py-12 md:py-16">
-      <div className="mx-auto max-w-3xl">
+    <div className={`container ${styles.container}`}>
+      <div className={styles.wrapper}>
         {/* Back to projects link */}
         <Link
           to="/projects"
-          className="inline-flex items-center text-sm text-muted-foreground hover:text-foreground mb-8"
+          className={styles.backLink}
         >
-          <ArrowLeft className="mr-2 h-4 w-4" />
+          <ArrowLeft className={styles.backIcon} />
           Back to all projects
         </Link>
 
         {/* Project header */}
         <article>
-          <header className="mb-10">
-            <div className="flex flex-wrap items-center gap-2 mb-4">
+          <header className={styles.projectHeader}>
+            <div className={styles.badgesWrapper}>
               {project.featured && (
-                <Badge variant="outline" className="bg-primary/10 hover:bg-primary/20 text-primary border-primary/10">
+                <Badge variant="outline" className={badgeStyles.featured}>
                   Featured
                 </Badge>
               )}
             </div>
 
-            <h1 className="project-title text-3xl font-bold tracking-tight sm:text-4xl mb-4">{project.title}</h1>
+            <h1 className={styles.projectTitle}>{project.title}</h1>
 
-            <div className="mt-4 flex flex-wrap gap-2">
+            <div className={styles.tagsWrapper}>
               {project.tags.map(tag => (
-                <Badge key={tag} variant="secondary" className="hover:bg-secondary/80">
+                <Badge key={tag} variant="secondary" className={styles.tagLink}>
                   {tag}
                 </Badge>
               ))}
             </div>
 
-            <div className="mt-6 flex flex-wrap gap-3">
+            <div className={styles.buttonWrapper}>
               <Button asChild>
-                <a href={project.githubUrl} target="_blank" rel="noopener noreferrer" className="inline-flex items-center">
-                  <Github className="mr-2 h-4 w-4" />
+                <a href={project.githubUrl} target="_blank" rel="noopener noreferrer" className={styles.buttonInner}>
+                  <Github className={styles.buttonIcon} />
                   View on GitHub
                 </a>
               </Button>
 
               {project.demoUrl && (
                 <Button asChild variant="outline">
-                  <a href={project.demoUrl} target="_blank" rel="noopener noreferrer" className="inline-flex items-center">
-                    <ExternalLink className="mr-2 h-4 w-4" />
+                  <a href={project.demoUrl} target="_blank" rel="noopener noreferrer" className={styles.buttonInner}>
+                    <ExternalLink className={styles.buttonIcon} />
                     Live Demo
                   </a>
                 </Button>
@@ -132,44 +134,44 @@ export default function Project() {
             </div>
 
             {/* Voting buttons */}
-            <div className="mt-6">
+            <div className={styles.votingWrapper}>
               <VotingButtons itemId={String(project.id)} itemType="project" />
             </div>
           </header>
 
           {/* Project content */}
           {project.readme ? (
-            <div className="prose prose-lg dark:prose-invert max-w-none">
+            <div className={`prose prose-lg dark:prose-invert ${styles.projectContent}`}>
               <MarkdownRenderer content={project.readme} />
             </div>
           ) : (
-            <div className="prose prose-lg dark:prose-invert max-w-none">
-              <p className="text-muted-foreground">{project.description}</p>
-              <p className="mt-4">For more details about this project, check out the GitHub repository.</p>
+            <div className={`prose prose-lg dark:prose-invert ${styles.projectContent}`}>
+              <p className={styles.contentPlaceholder}>{project.description}</p>
+              <p className={styles.contentExtra}>For more details about this project, check out the GitHub repository.</p>
             </div>
           )}
         </article>
 
         {/* Related projects */}
         {relatedProjects.length > 0 && (
-          <div className="mt-16">
-            <h2 className="project-title text-2xl font-bold mb-8">Related Projects</h2>
-            <div className="grid gap-6 sm:grid-cols-2">
+          <div className={styles.relatedSection}>
+            <h2 className={styles.relatedTitle}>Related Projects</h2>
+            <div className={styles.relatedGrid}>
               {relatedProjects.map(proj => (
                 <Link
                   to={`/projects/${proj.id}`}
                   key={proj.id}
-                  className="block group rounded-lg border bg-card p-6 shadow-sm hover:bg-muted"
+                  className={`group ${styles.relatedProjectCard}`}
                 >
-                  <h3 className="project-title font-medium group-hover:text-primary">{proj.title}</h3>
-                  <p className="mt-2 text-sm text-muted-foreground line-clamp-2">{proj.description}</p>
-                  <div className="mt-4 flex flex-wrap gap-2">
+                  <h3 className={styles.relatedProjectTitle}>{proj.title}</h3>
+                  <p className={styles.relatedProjectDescription}>{proj.description}</p>
+                  <div className={styles.relatedProjectTags}>
                     {proj.tags.slice(0, 2).map(tag => (
-                      <Badge key={tag} variant="secondary" className="text-xs">
+                      <Badge key={tag} variant="secondary" className={styles.relatedProjectTag}>
                         {tag}
                       </Badge>
                     ))}
-                    {proj.tags.length > 2 && <span className="text-xs text-muted-foreground">+{proj.tags.length - 2}</span>}
+                    {proj.tags.length > 2 && <span className={styles.relatedProjectTagsMore}>+{proj.tags.length - 2}</span>}
                   </div>
                 </Link>
               ))}
diff --git a/src/pages/projects/Projects.module.css b/src/pages/projects/Projects.module.css
new file mode 100644
index 0000000..e50c975
--- /dev/null
+++ b/src/pages/projects/Projects.module.css
@@ -0,0 +1,201 @@
+/* Projects Page CSS Module */
+
+/* Loading Section */
+.loadingContainer {
+  @apply px-4 py-12 md:px-6 md:py-16 lg:py-24;
+}
+
+.loadingWrapper {
+  @apply mx-auto max-w-5xl;
+}
+
+.loadingContent {
+  @apply flex flex-col items-center justify-center space-y-6;
+}
+
+.loadingIconWrapper {
+  @apply relative;
+}
+
+.loadingIcon {
+  @apply h-16 w-16 text-primary animate-pulse;
+}
+
+.loadingTextWrapper {
+  @apply text-center space-y-2;
+}
+
+.loadingTitle {
+  @apply text-2xl font-semibold;
+}
+
+.loadingMessage {
+  @apply text-muted-foreground;
+}
+
+/* Main Container */
+.container {
+  @apply px-4 py-12 md:px-6 md:py-16 lg:py-24;
+}
+
+.wrapper {
+  @apply mx-auto max-w-5xl;
+}
+
+/* Header Section */
+.headerSection {
+  @apply space-y-2 text-center;
+}
+
+.title {
+  @apply text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl;
+}
+
+.subtitle {
+  @apply mx-auto max-w-[700px] text-gray-500 md:text-xl/relaxed dark:text-gray-400;
+}
+
+/* Filters Section */
+.filtersSection {
+  @apply mt-8 space-y-6;
+}
+
+.filtersRow {
+  @apply flex flex-col gap-4 sm:flex-row;
+}
+
+.searchWrapper {
+  @apply relative flex-1;
+}
+
+.searchIcon {
+  @apply absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground;
+}
+
+.searchInput {
+  @apply !pl-12;
+}
+
+.clearButton {
+  @apply absolute right-1 top-1/2 h-7 w-7 -translate-y-1/2;
+}
+
+.clearIcon {
+  @apply h-4 w-4;
+}
+
+.screenReaderOnly {
+  @apply sr-only;
+}
+
+.selectWrapper {
+  @apply w-full sm:w-[180px];
+}
+
+.selectHeader {
+  @apply flex items-center justify-between;
+}
+
+.selectTitle {
+  @apply text-sm font-medium sm:hidden;
+}
+
+.clearButtonSmall {
+  @apply h-7 text-xs hover:bg-transparent hover:underline sm:hidden;
+}
+
+.selectTrigger {
+  @apply w-full;
+}
+
+/* Selected Tags */
+.selectedTagsHeader {
+  @apply hidden sm:flex items-center justify-between;
+}
+
+.selectedTagsTitle {
+  @apply text-sm font-medium;
+}
+
+.selectedTagsClear {
+  @apply h-7 text-xs hover:bg-transparent hover:underline;
+}
+
+.selectedTagsContainer {
+  @apply mt-2 flex flex-wrap gap-2;
+}
+
+.selectedTag {
+  @apply cursor-pointer;
+}
+
+.selectedTagIcon {
+  @apply ml-1 h-3 w-3;
+}
+
+/* Search Snippet */
+.snippetText {
+  @apply block text-xs mt-1 text-muted-foreground;
+}
+
+.highlightMatch {
+  @apply px-1 rounded bg-primary/20 text-primary dark:bg-primary/40 dark:text-primary font-semibold;
+}
+
+/* Project Grid */
+.projectGrid {
+  @apply mt-8 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3;
+}
+
+.projectCard {
+  @apply overflow-hidden rounded-lg border bg-card hover:shadow-md;
+}
+
+.projectCardFeatured {
+  @apply overflow-hidden rounded-lg border bg-card hover:shadow-md ring-2 ring-primary/20;
+}
+
+.projectCardInner {
+  @apply p-6 flex flex-col h-full;
+}
+
+.featuredBadge {
+  @apply mb-4 self-start;
+}
+
+.featuredSpacer {
+  @apply mb-4;
+}
+
+.projectTitle {
+  @apply text-xl font-bold hover:text-primary;
+}
+
+.projectDescription {
+  @apply mt-2 text-muted-foreground text-sm flex-grow;
+}
+
+.projectTags {
+  @apply mt-4 flex flex-wrap gap-2;
+}
+
+.projectTag {
+  @apply inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold;
+}
+
+.projectActions {
+  @apply mt-6 pt-4 border-t flex items-center gap-3;
+}
+
+.actionIcon {
+  @apply mr-1 h-3 w-3;
+}
+
+/* No Results */
+.noResults {
+  @apply mt-16 text-center;
+}
+
+.noResultsText {
+  @apply text-muted-foreground;
+}
\ No newline at end of file
diff --git a/src/pages/Projects.tsx b/src/pages/projects/Projects.tsx
similarity index 69%
rename from src/pages/Projects.tsx
rename to src/pages/projects/Projects.tsx
index 80ec375..173fafc 100644
--- a/src/pages/Projects.tsx
+++ b/src/pages/projects/Projects.tsx
@@ -7,8 +7,11 @@ import { Github, Search, ExternalLink, Folder, Code2, Loader2, X } from 'lucide-
 import { Link } from 'react-router-dom';
 import { Project } from '@/types/project';
 import { loadProjects } from '@/utils/content-loader';
-import { LoadingDots } from '../components/ui/LoadingDots';
-import { delay } from '../utils/delay';
+import { LoadingDots } from '@/components/ui/LoadingDots';
+import { delay } from '@/utils/delay';
+import styles from './Projects.module.css';
+import { siteConfig } from '@/config';
+import badgeStyles from '@/styles/badges.module.css';
 
 export default function Projects() {
   const [projects, setProjects] = useState<Project[]>([]);
@@ -104,9 +107,9 @@ export default function Projects() {
     const match = plainText.slice(idx, idx + query.length);
     const after = plainText.slice(idx + query.length, end);
     return (
-      <span className="block text-xs mt-1 text-muted-foreground">
+      <span className={styles.snippetText}>
         ...{before}
-        <mark className="px-1 rounded bg-primary/20 text-primary dark:bg-primary/40 dark:text-primary font-semibold">{match}</mark>
+        <mark className={styles.highlightMatch}>{match}</mark>
         {after}...
       </span>
     );
@@ -114,15 +117,15 @@ export default function Projects() {
 
   if (loading) {
     return (
-      <div className="container px-4 py-12 md:px-6 md:py-16 lg:py-24">
-        <div className="mx-auto max-w-5xl">
-          <div className="flex flex-col items-center justify-center space-y-6">
-            <div className="relative">
-              <Folder className="h-16 w-16 text-primary animate-pulse" />
+      <div className={`container ${styles.loadingContainer}`}>
+        <div className={styles.loadingWrapper}>
+          <div className={styles.loadingContent}>
+            <div className={styles.loadingIconWrapper}>
+              <Folder className={styles.loadingIcon} />
             </div>
-            <div className="text-center space-y-2">
-              <h2 className="text-2xl font-semibold">Building something awesome...</h2>
-              <p className="text-muted-foreground">Compiling the latest projects and innovations</p>
+            <div className={styles.loadingTextWrapper}>
+              <h2 className={styles.loadingTitle}>Building something awesome...</h2>
+              <p className={styles.loadingMessage}>Compiling the latest projects and innovations</p>
             </div>
             <LoadingDots size="md" />
           </div>
@@ -132,24 +135,24 @@ export default function Projects() {
   }
 
   return (
-    <div className="container px-4 py-12 md:px-6 md:py-16 lg:py-24">
-      <div className="mx-auto max-w-5xl">
-        <div className="space-y-2 text-center">
-          <h1 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl">Projects</h1>
-          <p className="mx-auto max-w-[700px] text-gray-500 md:text-xl/relaxed dark:text-gray-400">
+    <div className={`container ${styles.container}`}>
+      <div className={styles.wrapper}>
+        <div className={styles.headerSection}>
+          <h1 className={styles.title}>Projects</h1>
+          <p className={styles.subtitle}>
             A collection of my personal and professional projects.
           </p>
         </div>
 
         {/* Filters */}
-        <div className="mt-8 space-y-6">
-          <div className="flex flex-col gap-4 sm:flex-row">
-            <div className="relative flex-1">
-              <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+        <div className={styles.filtersSection}>
+          <div className={styles.filtersRow}>
+            <div className={styles.searchWrapper}>
+              <Search className={styles.searchIcon} />
               <Input
                 type="search"
                 placeholder="Search projects..."
-                className="pl-8"
+                className={styles.searchInput}
                 value={searchQuery}
                 onChange={e => setSearchQuery(e.target.value)}
               />
@@ -157,22 +160,22 @@ export default function Projects() {
                 <Button
                   variant="ghost"
                   size="icon"
-                  className="absolute right-1 top-1/2 h-7 w-7 -translate-y-1/2"
+                  className={styles.clearButton}
                   onClick={() => setSearchQuery('')}
                 >
-                  <X className="h-4 w-4" />
-                  <span className="sr-only">Clear search</span>
+                  <X className={styles.clearIcon} />
+                  <span className={styles.screenReaderOnly}>Clear search</span>
                 </Button>
               )}
             </div>
-            <div className="w-full sm:w-[180px]">
-              <div className="flex items-center justify-between">
-                <h3 className="text-sm font-medium sm:hidden">Filter by tag</h3>
+            <div className={styles.selectWrapper}>
+              <div className={styles.selectHeader}>
+                <h3 className={styles.selectTitle}>Filter by tag</h3>
                 {selectedTags.length > 0 && (
                   <Button
                     variant="ghost"
                     size="sm"
-                    className="h-7 text-xs hover:bg-transparent hover:underline sm:hidden"
+                    className={styles.clearButtonSmall}
                     onClick={() => setSelectedTags([])}
                   >
                     Clear ({selectedTags.length})
@@ -180,7 +183,7 @@ export default function Projects() {
                 )}
               </div>
               <Select onValueChange={handleTagSelect}>
-                <SelectTrigger className="w-full">
+                <SelectTrigger className={styles.selectTrigger}>
                   <SelectValue placeholder="Filter by tag" />
                 </SelectTrigger>
                 <SelectContent>
@@ -198,27 +201,27 @@ export default function Projects() {
           {/* Selected tags */}
           {selectedTags.length > 0 && (
             <div>
-              <div className="hidden sm:flex items-center justify-between">
-                <h3 className="text-sm font-medium">Selected tags</h3>
+              <div className={styles.selectedTagsHeader}>
+                <h3 className={styles.selectedTagsTitle}>Selected tags</h3>
                 <Button
                   variant="ghost"
                   size="sm"
-                  className="h-7 text-xs hover:bg-transparent hover:underline"
+                  className={styles.selectedTagsClear}
                   onClick={() => setSelectedTags([])}
                 >
                   Clear ({selectedTags.length})
                 </Button>
               </div>
-              <div className="mt-2 flex flex-wrap gap-2">
+              <div className={styles.selectedTagsContainer}>
                 {selectedTags.map(tag => (
                   <Badge
                     key={tag}
                     variant="default"
-                    className="cursor-pointer"
+                    className={styles.selectedTag}
                     onClick={() => toggleTag(tag)}
                   >
                     {tag}
-                    <X className="ml-1 h-3 w-3" />
+                    <X className={styles.selectedTagIcon} />
                   </Badge>
                 ))}
               </div>
@@ -227,7 +230,7 @@ export default function Projects() {
         </div>
 
         {/* Project Grid */}
-        <div className="mt-8 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
+        <div className={styles.projectGrid}>
           {sortedProjects.map(project => {
             let snippet = null;
             if (searchQuery) {
@@ -240,42 +243,40 @@ export default function Projects() {
             return (
               <div
                 key={project.id}
-                className={`group overflow-hidden rounded-lg border bg-card hover:shadow-md ${
-                  project.featured ? 'ring-2 ring-primary/20' : ''
-                }`}
+                className={project.featured ? styles.projectCardFeatured : styles.projectCard}
               >
-                <div className="p-6 flex flex-col h-full">
+                <div className={styles.projectCardInner}>
                   {/* Featured label (or placeholder) above the title for alignment */}
                   {project.featured ? (
-                    <div className="inline-flex items-center rounded-full bg-primary/10 px-2.5 py-0.5 text-xs font-semibold text-primary mb-4 self-start" style={{ minHeight: '24px' }}>
+                    <div className={`${badgeStyles.featuredDiv} ${styles.featuredBadge}`} style={{ minHeight: '24px' }}>
                       Featured
                     </div>
                   ) : (
-                    <div className="mb-4" style={{ minHeight: '24px' }}></div>
+                    <div className={styles.featuredSpacer} style={{ minHeight: '24px' }}></div>
                   )}
                   <Link to={`/projects/${project.id}`}>
-                    <h2 className="project-title text-xl font-bold hover:text-primary">{project.title}</h2>
+                    <h2 className={styles.projectTitle}>{project.title}</h2>
                   </Link>
-                  <p className="mt-2 text-muted-foreground text-sm flex-grow">{project.description}</p>
+                  <p className={styles.projectDescription}>{project.description}</p>
                   {snippet}
-                  <div className="mt-4 flex flex-wrap gap-2">
+                  <div className={styles.projectTags}>
                     {project.tags.map(tag => (
-                      <div key={tag} className="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold">
+                      <div key={tag} className={styles.projectTag}>
                         {tag}
                       </div>
                     ))}
                   </div>
-                  <div className="mt-6 pt-4 border-t flex items-center gap-3">
+                  <div className={styles.projectActions}>
                     <Button size="sm" variant="outline" asChild>
                       <a href={project.githubUrl} target="_blank" rel="noopener noreferrer">
-                        <Github className="mr-1 h-3 w-3" />
+                        <Github className={styles.actionIcon} />
                         Code
                       </a>
                     </Button>
                     {project.demoUrl && (
                       <Button size="sm" asChild>
                         <a href={project.demoUrl} target="_blank" rel="noopener noreferrer">
-                          <ExternalLink className="mr-1 h-3 w-3" />
+                          <ExternalLink className={styles.actionIcon} />
                           Demo
                         </a>
                       </Button>
@@ -288,8 +289,8 @@ export default function Projects() {
         </div>
 
         {filteredProjects.length === 0 && (
-          <div className="mt-16 text-center">
-            <p className="text-muted-foreground">No projects found matching your criteria.</p>
+          <div className={styles.noResults}>
+            <p className={styles.noResultsText}>No projects found matching your criteria.</p>
             <Button
               variant="link"
               onClick={() => {
diff --git a/src/pages/Publication.tsx b/src/pages/publication/Publication.tsx
similarity index 96%
rename from src/pages/Publication.tsx
rename to src/pages/publication/Publication.tsx
index 3e45600..6b628e7 100644
--- a/src/pages/Publication.tsx
+++ b/src/pages/publication/Publication.tsx
@@ -7,8 +7,9 @@ import { ArrowLeft, Calendar, ExternalLink, GraduationCap } from 'lucide-react';
 import { Publication as PublicationType } from '@/types/publication';
 import { MarkdownRenderer } from '@/utils/markdown-utils';
 import { VotingButtons } from '@/components/VotingButtons';
-import { LoadingDots } from '../components/ui/LoadingDots';
-import { delay } from '../utils/delay';
+import { LoadingDots } from '@/components/ui/LoadingDots';
+import { delay } from '@/utils/delay';
+import badgeStyles from '@/styles/badges.module.css';
 
 export default function Publication() {
   const { id } = useParams<{ id: string }>();
@@ -95,7 +96,7 @@ export default function Publication() {
           <header className="mb-10">
             <div className="flex flex-wrap items-center gap-2 mb-4">
               {publication.featured && (
-                <Badge variant="outline" className="bg-primary/10 hover:bg-primary/20 text-primary border-primary/10">
+                <Badge variant="outline" className={badgeStyles.featured}>
                   Featured
                 </Badge>
               )}
diff --git a/src/pages/publications/Publications.module.css b/src/pages/publications/Publications.module.css
new file mode 100644
index 0000000..230ae21
--- /dev/null
+++ b/src/pages/publications/Publications.module.css
@@ -0,0 +1,201 @@
+/* Publications Page CSS Module */
+
+/* Loading Section */
+.loadingContainer {
+  @apply px-4 py-12 md:px-6 md:py-16 lg:py-24;
+}
+
+.loadingWrapper {
+  @apply mx-auto max-w-5xl;
+}
+
+.loadingContent {
+  @apply flex flex-col items-center justify-center space-y-6;
+}
+
+.loadingIconWrapper {
+  @apply relative;
+}
+
+.loadingIcon {
+  @apply h-16 w-16 text-primary animate-pulse;
+}
+
+.loadingTextWrapper {
+  @apply text-center space-y-2;
+}
+
+.loadingTitle {
+  @apply text-2xl font-semibold;
+}
+
+.loadingMessage {
+  @apply text-muted-foreground;
+}
+
+/* Main Container */
+.container {
+  @apply px-4 py-12 md:px-6 md:py-16 lg:py-24;
+}
+
+.wrapper {
+  @apply mx-auto max-w-5xl;
+}
+
+/* Header Section */
+.headerSection {
+  @apply space-y-2 text-center;
+}
+
+.title {
+  @apply text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl;
+}
+
+.subtitle {
+  @apply mx-auto max-w-[700px] text-gray-500 md:text-xl/relaxed dark:text-gray-400;
+}
+
+/* Filters Section */
+.filtersSection {
+  @apply mt-8 space-y-6;
+}
+
+.searchWrapper {
+  @apply relative;
+}
+
+.searchIcon {
+  @apply absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground;
+}
+
+.searchInput {
+  @apply !pl-12;
+}
+
+.clearButton {
+  @apply absolute right-1 top-1/2 h-7 w-7 -translate-y-1/2;
+}
+
+.clearIcon {
+  @apply h-4 w-4;
+}
+
+.screenReaderOnly {
+  @apply sr-only;
+}
+
+.filtersGrid {
+  @apply grid gap-6 md:grid-cols-2;
+}
+
+.filterHeader {
+  @apply flex items-center justify-between;
+}
+
+.filterTitle {
+  @apply text-sm font-medium;
+}
+
+.clearFilterButton {
+  @apply h-7 text-xs hover:bg-transparent hover:underline;
+}
+
+.filterDropdown {
+  @apply mt-2;
+}
+
+.selectTrigger {
+  @apply w-full;
+}
+
+/* Selected Tags */
+.selectedTagsContainer {
+  @apply mt-4 flex flex-wrap gap-2;
+}
+
+.selectedTag {
+  @apply cursor-pointer;
+}
+
+.selectedTagIcon {
+  @apply ml-1 h-3 w-3;
+}
+
+/* Search Snippet */
+.snippetText {
+  @apply block text-xs mt-1 text-muted-foreground;
+}
+
+.highlightMatch {
+  @apply px-1 rounded bg-primary/20 text-primary dark:bg-primary/40 dark:text-primary font-semibold;
+}
+
+/* Publications Grid */
+.publicationsSection {
+  @apply mt-12;
+}
+
+.publicationsGrid {
+  @apply grid gap-6 sm:grid-cols-2;
+}
+
+.publicationCard {
+  @apply overflow-hidden rounded-lg border bg-card hover:shadow-md;
+}
+
+.publicationCardFeatured {
+  @apply overflow-hidden rounded-lg border bg-card hover:shadow-md ring-2 ring-primary/20;
+}
+
+.publicationCardInner {
+  @apply p-6 flex flex-col h-full;
+}
+
+.featuredBadge {
+  @apply mb-4 self-start;
+}
+
+.featuredSpacer {
+  @apply mb-4;
+}
+
+.publicationTitle {
+  @apply text-xl font-bold hover:text-primary;
+}
+
+.publicationSummary {
+  @apply mt-2 text-muted-foreground text-sm flex-grow;
+}
+
+.publicationTags {
+  @apply mt-4 flex flex-wrap gap-2;
+}
+
+.publicationTag {
+  @apply inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold;
+}
+
+.publicationActions {
+  @apply mt-6 pt-4 border-t flex items-center gap-3;
+}
+
+.actionIcon {
+  @apply mr-2 h-4 w-4;
+}
+
+.actionIconSmall {
+  @apply mr-1 h-3 w-3;
+}
+
+/* No Results */
+.noResults {
+  @apply py-12 text-center;
+}
+
+.noResultsText {
+  @apply text-muted-foreground;
+}
+
+.clearFiltersButton {
+  @apply mt-2;
+}
\ No newline at end of file
diff --git a/src/pages/Publications.tsx b/src/pages/publications/Publications.tsx
similarity index 73%
rename from src/pages/Publications.tsx
rename to src/pages/publications/Publications.tsx
index 8a1a171..d821544 100644
--- a/src/pages/Publications.tsx
+++ b/src/pages/publications/Publications.tsx
@@ -6,10 +6,12 @@ import { loadPublications } from '@/utils/content-loader';
 import { PublicationCard } from '@/components/publication-card';
 import { ScrollText, Search, X } from 'lucide-react';
 import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
-import { LoadingDots } from '../components/ui/LoadingDots';
-import { delay } from '../utils/delay';
+import { LoadingDots } from '@/components/ui/LoadingDots';
+import { delay } from '@/utils/delay';
 import { Link } from 'react-router-dom';
 import { FileText, ExternalLink } from 'lucide-react';
+import styles from './Publications.module.css';
+import badgeStyles from '@/styles/badges.module.css';
 
 export default function Publications() {
   const [publications, setPublications] = useState([]);
@@ -143,9 +145,9 @@ export default function Publications() {
     const match = plainText.slice(idx, idx + query.length);
     const after = plainText.slice(idx + query.length, end);
     return (
-      <span className="block text-xs mt-1 text-muted-foreground">
+      <span className={styles.snippetText}>
         ...{before}
-        <mark className="px-1 rounded bg-primary/20 text-primary dark:bg-primary/40 dark:text-primary font-semibold">{match}</mark>
+        <mark className={styles.highlightMatch}>{match}</mark>
         {after}...
       </span>
     );
@@ -153,15 +155,15 @@ export default function Publications() {
 
   if (loading) {
     return (
-      <div className="container px-4 py-12 md:px-6 md:py-16 lg:py-24">
-        <div className="mx-auto max-w-5xl">
-          <div className="flex flex-col items-center justify-center space-y-6">
-            <div className="relative">
-              <ScrollText className="h-16 w-16 text-primary animate-pulse" />
+      <div className={`container ${styles.loadingContainer}`}>
+        <div className={styles.loadingWrapper}>
+          <div className={styles.loadingContent}>
+            <div className={styles.loadingIconWrapper}>
+              <ScrollText className={styles.loadingIcon} />
             </div>
-            <div className="text-center space-y-2">
-              <h2 className="text-2xl font-semibold">Curating knowledge...</h2>
-              <p className="text-muted-foreground">Gathering the latest publications and research</p>
+            <div className={styles.loadingTextWrapper}>
+              <h2 className={styles.loadingTitle}>Curating knowledge...</h2>
+              <p className={styles.loadingMessage}>Gathering the latest publications and research</p>
             </div>
             <LoadingDots size="md" />
           </div>
@@ -171,23 +173,23 @@ export default function Publications() {
   }
 
   return (
-    <div className="container px-4 py-12 md:px-6 md:py-16 lg:py-24">
-      <div className="mx-auto max-w-5xl">
-        <div className="space-y-2 text-center">
-          <h1 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl">Publications</h1>
-          <p className="mx-auto max-w-[700px] text-gray-500 md:text-xl/relaxed dark:text-gray-400">
+    <div className={`container ${styles.container}`}>
+      <div className={styles.wrapper}>
+        <div className={styles.headerSection}>
+          <h1 className={styles.title}>Publications</h1>
+          <p className={styles.subtitle}>
             Academic papers, articles, and research publications
           </p>
         </div>
 
         {/* Search and filters */}
-        <div className="mt-8 space-y-6">
-          <div className="relative">
-            <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+        <div className={styles.filtersSection}>
+          <div className={styles.searchWrapper}>
+            <Search className={styles.searchIcon} />
             <Input
               type="search"
               placeholder="Search publications..."
-              className="pl-10"
+              className={styles.searchInput}
               value={searchQuery}
               onChange={e => setSearchQuery(e.target.value)}
             />
@@ -195,25 +197,25 @@ export default function Publications() {
               <Button
                 variant="ghost"
                 size="icon"
-                className="absolute right-1 top-1/2 h-7 w-7 -translate-y-1/2"
+                className={styles.clearButton}
                 onClick={() => setSearchQuery('')}
               >
-                <X className="h-4 w-4" />
-                <span className="sr-only">Clear search</span>
+                <X className={styles.clearIcon} />
+                <span className={styles.screenReaderOnly}>Clear search</span>
               </Button>
             )}
           </div>
 
-          <div className="grid gap-6 md:grid-cols-2">
+          <div className={styles.filtersGrid}>
             {/* Tags filter */}
             <div>
-              <div className="flex items-center justify-between">
-                <h3 className="text-sm font-medium">Filter by tag</h3>
+              <div className={styles.filterHeader}>
+                <h3 className={styles.filterTitle}>Filter by tag</h3>
                 {selectedTags.length > 0 && (
                   <Button
                     variant="ghost"
                     size="sm"
-                    className="h-7 text-xs hover:bg-transparent hover:underline"
+                    className={styles.clearFilterButton}
                     onClick={() => setSelectedTags([])}
                   >
                     Clear ({selectedTags.length})
@@ -222,9 +224,9 @@ export default function Publications() {
               </div>
 
               {/* Tags dropdown */}
-              <div className="mt-2">
+              <div className={styles.filterDropdown}>
                 <Select onValueChange={handleTagSelect}>
-                  <SelectTrigger className="w-full">
+                  <SelectTrigger className={styles.selectTrigger}>
                     <SelectValue placeholder="Select a tag to filter" />
                   </SelectTrigger>
                   <SelectContent>
@@ -242,11 +244,11 @@ export default function Publications() {
 
               {/* Selected tags */}
               {selectedTags.length > 0 && (
-                <div className="mt-4 flex flex-wrap gap-2">
+                <div className={styles.selectedTagsContainer}>
                   {selectedTags.map(tag => (
-                    <Badge key={tag} variant="default" className="cursor-pointer" onClick={() => toggleTag(tag)}>
+                    <Badge key={tag} variant="default" className={styles.selectedTag} onClick={() => toggleTag(tag)}>
                       {tag}
-                      <X className="ml-1 h-3 w-3" />
+                      <X className={styles.selectedTagIcon} />
                     </Badge>
                   ))}
                 </div>
@@ -255,13 +257,13 @@ export default function Publications() {
 
             {/* Years filter */}
             <div>
-              <div className="flex items-center justify-between">
-                <h3 className="text-sm font-medium">Filter by year</h3>
+              <div className={styles.filterHeader}>
+                <h3 className={styles.filterTitle}>Filter by year</h3>
                 {selectedYear && (
                   <Button
                     variant="ghost"
                     size="sm"
-                    className="h-7 text-xs hover:bg-transparent hover:underline"
+                    className={styles.clearFilterButton}
                     onClick={() => setSelectedYear(null)}
                   >
                     Clear
@@ -270,9 +272,9 @@ export default function Publications() {
               </div>
 
               {/* Year dropdown */}
-              <div className="mt-2">
+              <div className={styles.filterDropdown}>
                 <Select onValueChange={handleYearSelect} value={selectedYear || 'all'}>
-                  <SelectTrigger className="w-full">
+                  <SelectTrigger className={styles.selectTrigger}>
                     <SelectValue placeholder="Select a year" />
                   </SelectTrigger>
                   <SelectContent>
@@ -290,9 +292,9 @@ export default function Publications() {
         </div>
 
         {/* Publications grid */}
-        <div className="mt-12">
+        <div className={styles.publicationsSection}>
           {sortedPublications.length > 0 ? (
-            <div className="grid gap-6 sm:grid-cols-2">
+            <div className={styles.publicationsGrid}>
               {sortedPublications.map(publication => {
                 let snippet = null;
                 if (searchQuery) {
@@ -305,42 +307,40 @@ export default function Publications() {
                 return (
                   <div
                     key={publication.id}
-                    className={`group overflow-hidden rounded-lg border bg-card hover:shadow-md ${
-                      publication.featured ? 'ring-2 ring-primary/20' : ''
-                    }`}
+                    className={publication.featured ? styles.publicationCardFeatured : styles.publicationCard}
                   >
-                    <div className="p-6 flex flex-col h-full">
+                    <div className={styles.publicationCardInner}>
                       {/* Featured label (or placeholder) above the title for alignment */}
                       {publication.featured ? (
-                        <div className="inline-flex items-center rounded-full bg-primary/10 px-2.5 py-0.5 text-xs font-semibold text-primary mb-4 self-start" style={{ minHeight: '24px' }}>
+                        <div className={`${badgeStyles.featuredDiv} ${styles.featuredBadge}`} style={{ minHeight: '24px' }}>
                           Featured
                         </div>
                       ) : (
-                        <div className="mb-4" style={{ minHeight: '24px' }}></div>
+                        <div className={styles.featuredSpacer} style={{ minHeight: '24px' }}></div>
                       )}
                       <Link to={`/publications/${publication.id}`}>
-                        <h2 className="publication-title text-xl font-bold hover:text-primary">{publication.title}</h2>
+                        <h2 className={styles.publicationTitle}>{publication.title}</h2>
                       </Link>
-                      <p className="mt-2 text-muted-foreground text-sm flex-grow">{publication.summary}</p>
+                      <p className={styles.publicationSummary}>{publication.summary}</p>
                       {snippet}
-                      <div className="mt-4 flex flex-wrap gap-2">
+                      <div className={styles.publicationTags}>
                         {publication.tags.map(tag => (
-                          <div key={tag} className="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold">
+                          <div key={tag} className={styles.publicationTag}>
                             {tag}
                           </div>
                         ))}
                       </div>
-                      <div className="mt-6 pt-4 border-t flex items-center gap-3">
+                      <div className={styles.publicationActions}>
                         <Button size="sm" asChild>
                           <a href={publication.link} target="_blank" rel="noopener noreferrer">
-                            <ExternalLink className="mr-2 h-4 w-4" />
+                            <ExternalLink className={styles.actionIcon} />
                             View Publication
                           </a>
                         </Button>
                         {publication.doiUrl && (
                           <Button size="sm" variant="outline" asChild>
                             <a href={publication.doiUrl} target="_blank" rel="noopener noreferrer">
-                              <ExternalLink className="mr-1 h-3 w-3" />
+                              <ExternalLink className={styles.actionIconSmall} />
                               DOI
                             </a>
                           </Button>
@@ -352,9 +352,9 @@ export default function Publications() {
               })}
             </div>
           ) : (
-            <div className="py-12 text-center">
-              <p className="text-muted-foreground">No publications found matching your criteria.</p>
-              <Button variant="link" onClick={clearFilters} className="mt-2">
+            <div className={styles.noResults}>
+              <p className={styles.noResultsText}>No publications found matching your criteria.</p>
+              <Button variant="link" onClick={clearFilters} className={styles.clearFiltersButton}>
                 Clear all filters
               </Button>
             </div>
diff --git a/src/styles/badges.module.css b/src/styles/badges.module.css
new file mode 100644
index 0000000..3b2b029
--- /dev/null
+++ b/src/styles/badges.module.css
@@ -0,0 +1,27 @@
+/* Common Badge Styles CSS Module */
+
+/* For Badge component with outline variant */
+.featured {
+  @apply bg-primary/10 hover:bg-primary/20 text-primary border-primary/20 transition-colors;
+}
+
+.pinned {
+  @apply bg-primary/10 hover:bg-primary/20 text-primary border-primary/20 transition-colors;
+}
+
+.new {
+  @apply bg-primary/10 hover:bg-primary/20 text-primary border-primary/20 transition-colors;
+}
+
+/* For div elements (list pages) - includes all styling */
+.featuredDiv {
+  @apply inline-flex items-center rounded-full bg-primary/10 hover:bg-primary/20 border border-primary/20 px-2.5 py-0.5 text-xs font-semibold text-primary transition-colors;
+}
+
+.pinnedDiv {
+  @apply inline-flex items-center rounded-full bg-primary/10 hover:bg-primary/20 border border-primary/20 px-2.5 py-0.5 text-xs font-semibold text-primary transition-colors;
+}
+
+.newDiv {
+  @apply inline-flex items-center rounded-full bg-primary/10 hover:bg-primary/20 border border-primary/20 px-2.5 py-0.5 text-xs font-semibold text-primary transition-colors;
+}
\ No newline at end of file
diff --git a/src/utils/content-loader.ts b/src/utils/content-loader.ts
index 62d0f44..1001e6f 100644
--- a/src/utils/content-loader.ts
+++ b/src/utils/content-loader.ts
@@ -1,3 +1,5 @@
+import { getSortedBlogs, getSortedProjects, getSortedPublications } from '@/config/content-registry';
+
 interface FrontMatter {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   [key: string]: any;
@@ -97,85 +99,80 @@ function parseFrontMatter(frontMatterText: string): FrontMatter {
 }
 
 export async function loadBlogPosts() {
-  const blogSlugs = [
-    'understanding-javascript-closures',
-    'building-responsive-layouts-with-tailwind-css',
-    'getting-started-with-react-hooks',
-  ];
-
+  const blogRegistry = getSortedBlogs();
   const posts = [];
 
-  // Default fallback image if no image is specified in frontMatter
+  // Default fallback image if no image is specified in registry
   const defaultImage = 'https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?auto=format&fit=crop&w=600&q=80';
 
-  for (const slug of blogSlugs) {
-    const contentItem = await loadMarkdownFile(`/blog/${slug}.md`);
-    if (contentItem) {
-      posts.push({
-        id: contentItem.frontMatter.id || slug,
-        title: contentItem.frontMatter.title || 'Untitled',
-        excerpt: contentItem.frontMatter.excerpt || '',
-        date: contentItem.frontMatter.date || new Date().toISOString(),
-        tags: contentItem.frontMatter.tags || [],
-        pinned: contentItem.frontMatter.pinned || false,
-        release: contentItem.frontMatter.release || false,
-        image: contentItem.frontMatter.image || defaultImage,
-        content: contentItem.content,
-      });
-    }
+  for (const blogEntry of blogRegistry) {
+    const contentItem = await loadMarkdownFile(`/blog/${blogEntry.id}.md`);
+    
+    // Use registry data as primary source, fallback to markdown frontMatter
+    posts.push({
+      id: blogEntry.id,
+      title: blogEntry.title,
+      excerpt: blogEntry.excerpt,
+      date: blogEntry.date,
+      tags: blogEntry.tags,
+      pinned: blogEntry.pinned || false,
+      release: blogEntry.release || false,
+      featured: blogEntry.featured || false,
+      image: blogEntry.image || defaultImage,
+      content: contentItem?.content || '',
+      // Keep any additional frontMatter from markdown
+      ...(contentItem?.frontMatter || {}),
+    });
   }
 
   return posts;
 }
 
 export async function loadProjects() {
-  const projectSlugs = ['personal-portfolio', 'blog-platform', 'ecommerce-dashboard', 'weather-app', 'task-manager', 'recipe-finder'];
-
+  const projectRegistry = getSortedProjects();
   const projects = [];
 
-  for (const slug of projectSlugs) {
-    const contentItem = await loadMarkdownFile(`/projects/${slug}.md`);
-    if (contentItem) {
-      projects.push({
-        id: slug,
-        title: contentItem.frontMatter.title || 'Untitled',
-        description: contentItem.frontMatter.description || '',
-        tags: contentItem.frontMatter.tags || [],
-        githubUrl: contentItem.frontMatter.githubUrl || '',
-        demoUrl: contentItem.frontMatter.demoUrl || '',
-        featured: contentItem.frontMatter.featured || false,
-        readme: contentItem.content,
-      });
-    }
+  for (const projectEntry of projectRegistry) {
+    const contentItem = await loadMarkdownFile(`/projects/${projectEntry.id}.md`);
+    
+    // Use registry data as primary source, fallback to markdown frontMatter
+    projects.push({
+      id: projectEntry.id,
+      title: projectEntry.title,
+      description: projectEntry.description,
+      tags: projectEntry.tags,
+      githubUrl: projectEntry.githubUrl,
+      demoUrl: projectEntry.demoUrl || '',
+      featured: projectEntry.featured || false,
+      readme: contentItem?.content || '',
+      // Keep any additional frontMatter from markdown
+      ...(contentItem?.frontMatter || {}),
+    });
   }
 
   return projects;
 }
 
 export async function loadPublications() {
-  const publicationSlugs = [
-    'aerial-vehicle-detection-pca-deep-learning',
-    'bert-tamil-dependency-parsing',
-    'mosquito-classification-deep-learning',
-    'speech-emotion-recognition-using-cnn-lstm-vit',
-  ];
-
+  const publicationRegistry = getSortedPublications();
   const publications = [];
 
-  for (const slug of publicationSlugs) {
-    const contentItem = await loadMarkdownFile(`/publications/${slug}.md`);
-    if (contentItem) {
-      publications.push({
-        id: contentItem.frontMatter.id || slug,
-        title: contentItem.frontMatter.title || 'Untitled',
-        date: contentItem.frontMatter.date || new Date().toISOString(),
-        summary: contentItem.frontMatter.summary || '',
-        link: contentItem.frontMatter.link || '',
-        tags: contentItem.frontMatter.tags || [],
-        featured: contentItem.frontMatter.featured || false,
-        content: contentItem.content,
-      });
-    }
+  for (const pubEntry of publicationRegistry) {
+    const contentItem = await loadMarkdownFile(`/publications/${pubEntry.id}.md`);
+    
+    // Use registry data as primary source, fallback to markdown frontMatter
+    publications.push({
+      id: pubEntry.id,
+      title: pubEntry.title,
+      date: pubEntry.date,
+      summary: pubEntry.summary,
+      link: pubEntry.link,
+      tags: pubEntry.tags,
+      featured: pubEntry.featured || false,
+      content: contentItem?.content || '',
+      // Keep any additional frontMatter from markdown
+      ...(contentItem?.frontMatter || {}),
+    });
   }
 
   return publications;