diff --git a/.gitignore b/.gitignore
index 14b9aad..fc4bc00 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,6 @@
 # dependencies
 node_modules/
+/public
 
 # environment
 .env
@@ -21,3 +22,4 @@ pids
 
 #cursor
 .cursor
+package-lock.json
\ No newline at end of file
diff --git a/controllers/blogCategoryController.js b/controllers/blogCategoryController.js
index 4043d22..52f5086 100644
--- a/controllers/blogCategoryController.js
+++ b/controllers/blogCategoryController.js
@@ -1,4 +1,5 @@
 const BlogCategory = require('../models/blogCategory');
+const slugify = require('slugify');
 
 // -------------------- Admin Controllers --------------------
 
@@ -49,12 +50,11 @@ exports.store = async (req, res) => {
     } = req.body;
     
     // Generate slug
-    const slug = name
-      .toLowerCase()
-      .replace(/[^a-z0-9\s-]/g, '')
-      .replace(/\s+/g, '-')
-      .replace(/-+/g, '-')
-      .trim('-');
+    const slug = slugify(name, {
+      lower: true,
+      strict: true,
+      locale: 'vi'
+    });
     
     // Check if slug exists
     const existingCategory = await BlogCategory.findOne({ slug });
@@ -130,12 +130,11 @@ exports.update = async (req, res) => {
     category.isActive = isActive === 'on';
     
     // Generate new slug if name changed
-    const newSlug = name
-      .toLowerCase()
-      .replace(/[^a-z0-9\s-]/g, '')
-      .replace(/\s+/g, '-')
-      .replace(/-+/g, '-')
-      .trim('-');
+    const newSlug = slugify(name, {
+      lower: true,
+      strict: true,
+      locale: 'vi'
+    });
     
     if (newSlug !== category.slug) {
       const existingCategory = await BlogCategory.findOne({ 
@@ -166,6 +165,14 @@ exports.destroy = async (req, res) => {
     const category = await BlogCategory.findById(req.params.id);
     
     if (!category) {
+      // Check if it's an AJAX request
+      const isAjax = req.xhr || req.headers['accept']?.includes('application/json') || req.headers['content-type']?.includes('application/json');
+      if (isAjax) {
+        return res.status(404).json({
+          success: false,
+          message: 'Category not found'
+        });
+      }
       req.flash('error_msg', 'Category not found');
       return res.redirect('/admin/blog/categories');
     }
@@ -175,16 +182,44 @@ exports.destroy = async (req, res) => {
     const postCount = await Blog.countDocuments({ category: { $in: [category.name] } });
     
     if (postCount > 0) {
+      // Check if it's an AJAX request
+      const isAjax = req.xhr || req.headers['accept']?.includes('application/json') || req.headers['content-type']?.includes('application/json');
+      if (isAjax) {
+        return res.status(400).json({
+          success: false,
+          message: 'Cannot delete category that has blog posts'
+        });
+      }
       req.flash('error_msg', 'Cannot delete category that has blog posts');
       return res.redirect('/admin/blog/categories');
     }
     
     await BlogCategory.findByIdAndDelete(req.params.id);
     
+    // Check if it's an AJAX request
+    const isAjax = req.xhr || req.headers['accept']?.includes('application/json') || req.headers['content-type']?.includes('application/json');
+    if (isAjax) {
+      return res.json({
+        success: true,
+        message: 'Category deleted successfully'
+      });
+    }
+    
     req.flash('success_msg', 'Category deleted successfully');
     res.redirect('/admin/blog/categories');
   } catch (err) {
     console.error('Category delete error:', err);
+    
+    // Check if it's an AJAX request
+    const isAjax = req.xhr || req.headers['accept']?.includes('application/json') || req.headers['content-type']?.includes('application/json');
+    if (isAjax) {
+      return res.status(500).json({
+        success: false,
+        message: 'Error deleting category',
+        error: err.message || 'Error deleting category'
+      });
+    }
+    
     req.flash('error_msg', 'Error deleting category');
     res.redirect('/admin/blog/categories');
   }
@@ -202,10 +237,18 @@ exports.api = async (req, res) => {
       await category.updatePostCount();
     }
     
-    res.json(categories);
+    res.json({
+      success: true,
+      message: 'Categories fetched successfully',
+      data: categories
+    });
   } catch (err) {
     console.error('Categories API error:', err);
-    res.status(500).json({ error: 'Error loading categories' });
+    res.status(500).json({
+      success: false,
+      message: 'Error loading categories',
+      error: err.message || 'Error loading categories'
+    });
   }
 };
 
@@ -218,13 +261,81 @@ exports.apiShow = async (req, res) => {
     }).lean();
     
     if (!category) {
-      return res.status(404).json({ error: 'Category not found' });
+      return res.status(404).json({
+        success: false,
+        message: 'Category not found'
+      });
     }
     
-    res.json(category);
+    res.json({
+      success: true,
+      message: 'Category fetched successfully',
+      data: category
+    });
   } catch (err) {
     console.error('Category show API error:', err);
-    res.status(500).json({ error: 'Error loading category' });
+    res.status(500).json({
+      success: false,
+      message: 'Error loading category',
+      error: err.message || 'Error loading category'
+    });
+  }
+};
+
+// Quick create category (for inline creation in blog form)
+exports.quickCreate = async (req, res) => {
+  try {
+    const { name, description } = req.body;
+    
+    if (!name || !name.trim()) {
+      return res.status(400).json({
+        success: false,
+        message: 'Category name is required'
+      });
+    }
+    
+    const categoryName = name.trim();
+    
+    // Generate slug
+    const slug = slugify(categoryName, {
+      lower: true,
+      strict: true,
+      locale: 'vi'
+    });
+    
+    // Check if category already exists
+    let category = await BlogCategory.findOne({ slug });
+    
+    if (category) {
+      return res.json({
+        success: true,
+        message: 'Category already exists',
+        data: category.toObject()
+      });
+    }
+    
+    // Create new category
+    category = new BlogCategory({
+      name: categoryName,
+      slug,
+      description: description || '',
+      isActive: true
+    });
+    
+    await category.save();
+    
+    res.json({
+      success: true,
+      message: 'Category created successfully',
+      data: category.toObject()
+    });
+  } catch (err) {
+    console.error('Quick create category error:', err);
+    res.status(500).json({
+      success: false,
+      message: 'Error creating category',
+      error: err.message || 'Error creating category'
+    });
   }
 };
 
diff --git a/controllers/blogController.js b/controllers/blogController.js
index bc02bc4..22ce42b 100644
--- a/controllers/blogController.js
+++ b/controllers/blogController.js
@@ -4,17 +4,17 @@ const BlogTag = require('../models/blogTag');
 const BlogComment = require('../models/blogComment');
 const RecentPost = require('../models/recentPost');
 const { addBaseUrlToImages } = require('../utils/imageHelper');
+const slugify = require('slugify');
 
 // -------------------- Helper Functions --------------------
 
 // Generate slug from title
 const generateSlug = (title) => {
-  return title
-    .toLowerCase()
-    .replace(/[^a-z0-9\s-]/g, '')
-    .replace(/\s+/g, '-')
-    .replace(/-+/g, '-')
-    .trim('-');
+  return slugify(title, {
+    lower: true,
+    strict: true,
+    locale: 'vi'
+  });
 };
 
 // Update category post counts
@@ -69,12 +69,15 @@ exports.index = async (req, res) => {
     
     // Get categories for filter
     const categories = await BlogCategory.getActive();
+
+    const frontendUrl = process.env.FRONTEND_URL || 'http://localhost:3000';
     
     res.render('admin/blog/index', {
       layout: 'layouts/main',
       title: 'Blog Management',
       blogs,
       categories,
+      frontendUrl,
       pagination: {
         current: page,
         total: totalPages,
@@ -98,13 +101,16 @@ exports.create = async (req, res) => {
     const categories = await BlogCategory.getActive();
     const tags = await BlogTag.getActive();
     
+    const frontendUrl = process.env.FRONTEND_URL || 'http://localhost:3000';
+    
     res.render('admin/blog/create', {
       layout: 'layouts/main',
       title: 'Create New Blog Post',
       categories,
       tags,
       currentPath: req.path,
-      user: req.session.user
+      user: req.session.user,
+      frontendUrl
     });
   } catch (err) {
     console.error('Blog create form error:', err);
@@ -125,7 +131,9 @@ exports.store = async (req, res) => {
       status,
       isFeatured,
       author,
-      galleryImages
+      galleryImages,
+      quote,
+      contentAfterQuote
     } = req.body;
     
     // Generate slug
@@ -149,12 +157,14 @@ exports.store = async (req, res) => {
       status: status || 'published',
       isFeatured: isFeatured === 'on',
       author: author || 'Admin',
-      galleryImages: galleryImages ? (Array.isArray(galleryImages) ? galleryImages : [galleryImages]) : []
+      galleryImages: galleryImages ? (Array.isArray(galleryImages) ? galleryImages : [galleryImages]) : [],
+      quote: quote || '',
+      contentAfterQuote: contentAfterQuote || ''
     };
     
-    // Handle featured image
-    if (req.file) {
-      blogData.featuredImage = `/uploads/blog/${req.file.filename}`;
+    // Handle featured image - using featuredImageUrl from form (uploaded via AJAX)
+    if (req.body.featuredImageUrl) {
+      blogData.featuredImage = req.body.featuredImageUrl;
     }
     
     // Create blog
@@ -188,6 +198,8 @@ exports.edit = async (req, res) => {
     const categories = await BlogCategory.getActive();
     const tags = await BlogTag.getActive();
     
+    const frontendUrl = process.env.FRONTEND_URL || 'http://localhost:3000';
+    
     res.render('admin/blog/edit', {
       layout: 'layouts/main',
       title: 'Edit Blog Post',
@@ -195,7 +207,8 @@ exports.edit = async (req, res) => {
       categories,
       tags,
       currentPath: req.path,
-      user: req.session.user
+      user: req.session.user,
+      frontendUrl
     });
   } catch (err) {
     console.error('Blog edit form error:', err);
@@ -223,7 +236,9 @@ exports.update = async (req, res) => {
       status,
       isFeatured,
       author,
-      galleryImages
+      galleryImages,
+      quote,
+      contentAfterQuote
     } = req.body;
     
     // Update blog data
@@ -236,10 +251,12 @@ exports.update = async (req, res) => {
     blog.isFeatured = isFeatured === 'on';
     blog.author = author || 'Admin';
     blog.galleryImages = galleryImages ? (Array.isArray(galleryImages) ? galleryImages : [galleryImages]) : [];
+    blog.quote = quote || '';
+    blog.contentAfterQuote = contentAfterQuote || '';
     
-    // Handle featured image
-    if (req.file) {
-      blog.featuredImage = `/uploads/blog/${req.file.filename}`;
+    // Handle featured image - using featuredImageUrl from form (uploaded via AJAX)
+    if (req.body.featuredImageUrl) {
+      blog.featuredImage = req.body.featuredImageUrl;
     }
     
     // Generate new slug if title changed
@@ -373,11 +390,30 @@ exports.apiShow = async (req, res) => {
       });
     }
     
-    // Get comments for this post
-    const comments = await BlogComment.getApprovedByPost(blog._id);
+    // Get comments for this post (parent comments only)
+    const parentComments = await BlogComment.getApprovedByPost(blog._id);
+    
+    // Get replies for each parent comment
+    const commentsWithReplies = await Promise.all(
+      parentComments.map(async (parentComment) => {
+        const replies = await BlogComment.getReplies(parentComment._id);
+        return {
+          ...parentComment.toObject(),
+          replies: replies.map(reply => reply.toObject())
+        };
+      })
+    );
+    
+    // Flatten comments array (parent + replies)
+    const allComments = commentsWithReplies.flatMap(comment => [
+      comment,
+      ...comment.replies
+    ]);
     
     // Add comments to blog
-    blog.comments = comments;
+    blog.comments = allComments;
+    // Keep commentsCount in sync for frontend
+    blog.commentsCount = allComments.length;
     
     // Add base URL to images
     const baseUrl = process.env.BACKEND_URL || `${req.protocol}://${req.get('host')}`;
@@ -398,6 +434,72 @@ exports.apiShow = async (req, res) => {
   }
 };
 
+// Create a comment (no moderation for now: default approved)
+exports.apiCreateComment = async (req, res) => {
+  try {
+    const { authorName, content, parentId } = req.body || {};
+
+    if (!authorName || !String(authorName).trim()) {
+      return res.status(400).json({
+        success: false,
+        message: "authorName is required",
+      });
+    }
+
+    if (!content || !String(content).trim()) {
+      return res.status(400).json({
+        success: false,
+        message: "content is required",
+      });
+    }
+
+    const blog = await Blog.findOne({ slug: req.params.slug, status: "published" }).lean();
+    if (!blog) {
+      return res.status(404).json({
+        success: false,
+        message: "Blog post not found",
+      });
+    }
+
+    // If replying, ensure parent exists and belongs to same post
+    let parentObjectId = null;
+    if (parentId) {
+      const parent = await BlogComment.findOne({ _id: parentId, postId: blog._id }).lean();
+      if (!parent) {
+        return res.status(400).json({
+          success: false,
+          message: "Invalid parentId",
+        });
+      }
+      parentObjectId = parentId;
+    }
+
+    const newComment = await BlogComment.create({
+      postId: blog._id,
+      authorName: String(authorName).trim(),
+      content: String(content).trim(),
+      parentId: parentObjectId,
+      status: "approved",
+    });
+
+    // Keep counter roughly correct (also counts replies)
+    await Blog.updateOne({ _id: blog._id }, { $inc: { commentsCount: 1 } });
+
+    return res.json({
+      success: true,
+      message: "Comment created successfully",
+      data: newComment.toJSON(),
+    });
+  } catch (err) {
+    console.error("Create comment API error:", err);
+    return res.status(500).json({
+      success: false,
+      message: "Error creating comment",
+      error: err.message || "Error creating comment",
+    });
+  }
+};
+
 // Get featured blogs
 exports.apiFeatured = async (req, res) => {
   try {
@@ -408,7 +510,7 @@ exports.apiFeatured = async (req, res) => {
       .lean();
     
     // Add base URL to images
-    const baseUrl = process.env.BACKEND_URL || `${req.protocol}://${req.get('host')}`;
+    const baseUrl = process.env.BACKEND_URL || `${req.protocol}://${req.get('port')}`;
     const processedBlogs = blogs.map(blog => addBaseUrlToImages(blog, baseUrl));
     
     res.json({
diff --git a/controllers/blogTagController.js b/controllers/blogTagController.js
index f4232ef..6daeb6b 100644
--- a/controllers/blogTagController.js
+++ b/controllers/blogTagController.js
@@ -1,4 +1,5 @@
 const BlogTag = require('../models/blogTag');
+const slugify = require('slugify');
 
 // -------------------- Admin Controllers --------------------
 
@@ -48,12 +49,11 @@ exports.store = async (req, res) => {
     } = req.body;
     
     // Generate slug
-    const slug = name
-      .toLowerCase()
-      .replace(/[^a-z0-9\s-]/g, '')
-      .replace(/\s+/g, '-')
-      .replace(/-+/g, '-')
-      .trim('-');
+    const slug = slugify(name, {
+      lower: true,
+      strict: true,
+      locale: 'vi'
+    });
     
     // Check if slug exists
     const existingTag = await BlogTag.findOne({ slug });
@@ -126,12 +126,11 @@ exports.update = async (req, res) => {
     tag.isActive = isActive === 'on';
     
     // Generate new slug if name changed
-    const newSlug = name
-      .toLowerCase()
-      .replace(/[^a-z0-9\s-]/g, '')
-      .replace(/\s+/g, '-')
-      .replace(/-+/g, '-')
-      .trim('-');
+    const newSlug = slugify(name, {
+      lower: true,
+      strict: true,
+      locale: 'vi'
+    });
     
     if (newSlug !== tag.slug) {
       const existingTag = await BlogTag.findOne({ 
@@ -162,6 +161,14 @@ exports.destroy = async (req, res) => {
     const tag = await BlogTag.findById(req.params.id);
     
     if (!tag) {
+      // Check if it's an AJAX request
+      const isAjax = req.xhr || req.headers['accept']?.includes('application/json') || req.headers['content-type']?.includes('application/json');
+      if (isAjax) {
+        return res.status(404).json({
+          success: false,
+          message: 'Tag not found'
+        });
+      }
       req.flash('error_msg', 'Tag not found');
       return res.redirect('/admin/blog/tags');
     }
@@ -171,16 +178,44 @@ exports.destroy = async (req, res) => {
     const postCount = await Blog.countDocuments({ tags: { $in: [tag.name] } });
     
     if (postCount > 0) {
+      // Check if it's an AJAX request
+      const isAjax = req.xhr || req.headers['accept']?.includes('application/json') || req.headers['content-type']?.includes('application/json');
+      if (isAjax) {
+        return res.status(400).json({
+          success: false,
+          message: 'Cannot delete tag that is used in blog posts'
+        });
+      }
       req.flash('error_msg', 'Cannot delete tag that is used in blog posts');
       return res.redirect('/admin/blog/tags');
     }
     
     await BlogTag.findByIdAndDelete(req.params.id);
     
+    // Check if it's an AJAX request
+    const isAjax = req.xhr || req.headers['accept']?.includes('application/json') || req.headers['content-type']?.includes('application/json');
+    if (isAjax) {
+      return res.json({
+        success: true,
+        message: 'Tag deleted successfully'
+      });
+    }
+    
     req.flash('success_msg', 'Tag deleted successfully');
     res.redirect('/admin/blog/tags');
   } catch (err) {
     console.error('Tag delete error:', err);
+    
+    // Check if it's an AJAX request
+    const isAjax = req.xhr || req.headers['accept']?.includes('application/json') || req.headers['content-type']?.includes('application/json');
+    if (isAjax) {
+      return res.status(500).json({
+        success: false,
+        message: 'Error deleting tag',
+        error: err.message || 'Error deleting tag'
+      });
+    }
+    
     req.flash('error_msg', 'Error deleting tag');
     res.redirect('/admin/blog/tags');
   }
@@ -198,10 +233,18 @@ exports.api = async (req, res) => {
       await tag.updatePostCount();
     }
     
-    res.json(tags);
+    res.json({
+      success: true,
+      message: 'Tags fetched successfully',
+      data: tags
+    });
   } catch (err) {
     console.error('Tags API error:', err);
-    res.status(500).json({ error: 'Error loading tags' });
+    res.status(500).json({
+      success: false,
+      message: 'Error loading tags',
+      error: err.message || 'Error loading tags'
+    });
   }
 };
 
@@ -210,10 +253,19 @@ exports.apiPopular = async (req, res) => {
   try {
     const limit = parseInt(req.query.limit) || 10;
     const tags = await BlogTag.getPopular(limit);
-    res.json(tags);
+    
+    res.json({
+      success: true,
+      message: 'Popular tags fetched successfully',
+      data: tags
+    });
   } catch (err) {
     console.error('Popular tags API error:', err);
-    res.status(500).json({ error: 'Error loading popular tags' });
+    res.status(500).json({
+      success: false,
+      message: 'Error loading popular tags',
+      error: err.message || 'Error loading popular tags'
+    });
   }
 };
 
@@ -226,13 +278,80 @@ exports.apiShow = async (req, res) => {
     }).lean();
     
     if (!tag) {
-      return res.status(404).json({ error: 'Tag not found' });
+      return res.status(404).json({
+        success: false,
+        message: 'Tag not found'
+      });
     }
     
-    res.json(tag);
+    res.json({
+      success: true,
+      message: 'Tag fetched successfully',
+      data: tag
+    });
   } catch (err) {
     console.error('Tag show API error:', err);
-    res.status(500).json({ error: 'Error loading tag' });
+    res.status(500).json({
+      success: false,
+      message: 'Error loading tag',
+      error: err.message || 'Error loading tag'
+    });
+  }
+};
+
+// Quick create tag (for inline creation in blog form)
+exports.quickCreate = async (req, res) => {
+  try {
+    const { name } = req.body;
+    
+    if (!name || !name.trim()) {
+      return res.status(400).json({
+        success: false,
+        message: 'Tag name is required'
+      });
+    }
+    
+    const tagName = name.trim();
+    
+    // Generate slug
+    const slug = slugify(tagName, {
+      lower: true,
+      strict: true,
+      locale: 'vi'
+    });
+    
+    // Check if tag already exists
+    let tag = await BlogTag.findOne({ slug });
+    
+    if (tag) {
+      return res.json({
+        success: true,
+        message: 'Tag already exists',
+        data: tag.toObject()
+      });
+    }
+    
+    // Create new tag
+    tag = new BlogTag({
+      name: tagName,
+      slug,
+      isActive: true
+    });
+    
+    await tag.save();
+    
+    res.json({
+      success: true,
+      message: 'Tag created successfully',
+      data: tag.toObject()
+    });
+  } catch (err) {
+    console.error('Quick create tag error:', err);
+    res.status(500).json({
+      success: false,
+      message: 'Error creating tag',
+      error: err.message || 'Error creating tag'
+    });
   }
 };
 
diff --git a/data/blog.json b/data/blog.json
index e04489c..4a6b1d2 100644
--- a/data/blog.json
+++ b/data/blog.json
@@ -50,43 +50,53 @@
       "status": "published",
       "publishedAt": "11 March 2025",
       "isFeatured": true,
-      "featuredImage": "/uploads/blog/work-visa-canada-main.jpg",
+      "featuredImage": "/assets/img/inner-page/news-details/details-1.jpg",
       "galleryImages": [
-        "/uploads/blog/work-visa-canada-1.jpg",
-        "/uploads/blog/work-visa-canada-2.jpg"
+        "/assets/img/inner-page/news-details/details-2.jpg",
+        "/assets/img/inner-page/news-details/details-3.jpg"
       ],
+      "quote": "This blog really helped me understand the difference between student and work visas. The explanations were clear and practical.",
+      "contentAfterQuote": "<p class=\"mb-3\">It provides access to world-class universities, cultural exposure, and global networking opportunities. With a student visa, you may also get part-time work rights, which can help support your expenses and give you valuable international work experience. However, the primary focus remains on academics and personal growth. On the other hand, a work visa is perfect for those who want to establish themselves in a career overseas.</p><p>It provides immediate access to job markets, stable income, and often a pathway to permanent residency. Work visas are suitable for skilled professionals who are ready to contribute to the global workforce and achieve long-term career goals. Ultimately, the choice comes down to your personal aspirations. If education and exploration are your priorities, a student visa is ideal. If career advancement and stability are your goals, a work visa is the right fit.</p>",
       "commentsCount": 3
     },
     {
       "title": "Top 5 Scholarship Programs For International Students",
       "slug": "top-5-scholarship-programs-international-students",
       "excerpt": "Danh sách 5 chương trình học bổng nổi bật dành cho sinh viên quốc tế với mức hỗ trợ hấp dẫn.",
-      "content": "<p>Nếu bạn đang tìm kiếm học bổng để giảm chi phí du học, đây là 5 chương trình bạn không nên bỏ qua. Mỗi chương trình đều có tiêu chí xét tuyển, mức hỗ trợ và thời hạn đăng ký khác nhau.</p>",
+      "content": "<p>Nếu bạn đang tìm kiếm học bổng để giảm chi phí du học, đây là 5 chương trình bạn không nên bỏ qua. Mỗi chương trình đều có tiêu chí xét tuyển, mức hỗ trợ và thời hạn đăng ký khác nhau.</p><p class=\"mt-4 mb-3\">Học bổng là một trong những cách tốt nhất để giảm gánh nặng tài chính khi du học. Các chương trình học bổng không chỉ hỗ trợ về mặt tài chính mà còn mở ra nhiều cơ hội phát triển nghề nghiệp và mở rộng mạng lưới quan hệ quốc tế.</p>",
       "category": ["Study Abroad"],
       "tags": ["StudentVisa", "Scholarship"],
       "author": "Admin",
       "status": "published",
       "publishedAt": "20 March 2025",
       "isFeatured": false,
-      "featuredImage": "/uploads/blog/scholarship-programs-main.jpg",
-      "galleryImages": [],
-      "commentsCount": 0
+      "featuredImage": "/assets/img/inner-page/news-details/details-1.jpg",
+      "galleryImages": [
+        "/assets/img/inner-page/news-details/details-2.jpg",
+        "/assets/img/inner-page/news-details/details-3.jpg"
+      ],
+      "quote": "These scholarship programs opened doors I never thought possible. The application process was straightforward, and the support I received was incredible.",
+      "contentAfterQuote": "<p class=\"mb-3\">Applying for scholarships requires careful planning and preparation. Start by researching each program's requirements, deadlines, and eligibility criteria. Make sure to prepare all necessary documents well in advance, including transcripts, recommendation letters, and personal statements. Each scholarship has its own unique focus, so tailor your application to highlight how you align with their values and goals.</p><p>Remember that scholarship applications are competitive, so it's important to stand out. Showcase your academic achievements, extracurricular activities, and community involvement. Be authentic in your personal statement and demonstrate how the scholarship will help you achieve your educational and career aspirations. With dedication and proper preparation, you can increase your chances of securing financial support for your studies abroad.</p>",
+      "commentsCount": 2
     },
     {
       "title": "10 Travel Safety Tips You Should Know Before Flying",
       "slug": "10-travel-safety-tips-before-flying",
       "excerpt": "Những lưu ý quan trọng để đảm bảo an toàn cho chuyến bay và hành trình của bạn.",
-      "content": "<p>An toàn luôn là ưu tiên hàng đầu khi đi du lịch. Dưới đây là 10 tips giúp bạn yên tâm hơn trên mọi chuyến đi, từ việc chuẩn bị giấy tờ, bảo hiểm đến cách bảo vệ tài sản cá nhân.</p>",
+      "content": "<p>An toàn luôn là ưu tiên hàng đầu khi đi du lịch. Dưới đây là 10 tips giúp bạn yên tâm hơn trên mọi chuyến đi, từ việc chuẩn bị giấy tờ, bảo hiểm đến cách bảo vệ tài sản cá nhân.</p><p class=\"mt-4 mb-3\">Du lịch là một trải nghiệm tuyệt vời, nhưng điều quan trọng là phải chuẩn bị kỹ lưỡng để đảm bảo an toàn. Những tips này được đúc kết từ kinh nghiệm thực tế của nhiều du khách và sẽ giúp bạn tránh được những rủi ro không đáng có.</p>",
       "category": ["Travel Tips"],
       "tags": ["TravelSafety"],
       "author": "Admin",
       "status": "published",
       "publishedAt": "05 April 2025",
       "isFeatured": false,
-      "featuredImage": "/uploads/blog/travel-safety-main.jpg",
+      "featuredImage": "/assets/img/inner-page/news-details/details-1.jpg",
       "galleryImages": [
-        "/uploads/blog/travel-safety-1.jpg"
+        "/assets/img/inner-page/news-details/details-2.jpg",
+        "/assets/img/inner-page/news-details/details-3.jpg"
       ],
+      "quote": "These safety tips saved me from potential problems during my trip. I especially appreciated the advice about travel insurance and document preparation.",
+      "contentAfterQuote": "<p class=\"mb-3\">Before you travel, make sure to research your destination thoroughly. Understand local customs, laws, and potential safety concerns. Keep copies of important documents like your passport, visa, and travel insurance in multiple places - both physical and digital. Inform family or friends about your itinerary and check in regularly during your trip.</p><p>When packing, prioritize essential items and keep valuables secure. Use luggage locks and consider travel insurance for expensive items. Stay aware of your surroundings, especially in crowded areas, and trust your instincts if something feels off. By following these safety tips, you can focus on enjoying your journey while staying protected throughout your travels.</p>",
       "commentsCount": 1
     }
   ],
@@ -94,19 +104,19 @@
     {
       "title": "Ultimate Guide To Getting A Work Visa In Canada",
       "slug": "ultimate-guide-work-visa-canada",
-      "thumbnail": "/uploads/blog/work-visa-canada-main.jpg",
+      "thumbnail": "/assets/img/inner-page/news-details/post-1.jpg",
       "publishedAt": "11 March 2025"
     },
     {
       "title": "Top 5 Scholarship Programs For International Students",
       "slug": "top-5-scholarship-programs-international-students",
-      "thumbnail": "/uploads/blog/scholarship-programs-main.jpg",
+      "thumbnail": "/assets/img/inner-page/news-details/post-2.jpg",
       "publishedAt": "20 March 2025"
     },
     {
       "title": "10 Travel Safety Tips You Should Know Before Flying",
       "slug": "10-travel-safety-tips-before-flying",
-      "thumbnail": "/uploads/blog/travel-safety-main.jpg",
+      "thumbnail": "/assets/img/inner-page/news-details/post-3.jpg",
       "publishedAt": "05 April 2025"
     }
   ],
@@ -129,6 +139,24 @@
       "status": "approved",
       "parentAuthorName": "Frank Flores"
     },
+    {
+      "postSlug": "top-5-scholarship-programs-international-students",
+      "authorName": "Sarah Johnson",
+      "authorAvatar": "/assets/img/inner-page/news-details/comment-1.png",
+      "content": "Cảm ơn bạn đã chia sẻ thông tin về các chương trình học bổng này. Mình đã apply và đang chờ kết quả!",
+      "createdAt": "March 15, 2025",
+      "status": "approved",
+      "parentAuthorName": null
+    },
+    {
+      "postSlug": "top-5-scholarship-programs-international-students",
+      "authorName": "Michael Chen",
+      "authorAvatar": "/assets/img/inner-page/news-details/comment-2.png",
+      "content": "Bài viết rất chi tiết và hữu ích. Mình đã tìm thấy một chương trình phù hợp với mình.",
+      "createdAt": "March 18, 2025",
+      "status": "approved",
+      "parentAuthorName": null
+    },
     {
       "postSlug": "10-travel-safety-tips-before-flying",
       "authorName": "Jenny Wilson",
diff --git a/models/blog.js b/models/blog.js
index 39aea69..89bf9bb 100644
--- a/models/blog.js
+++ b/models/blog.js
@@ -71,6 +71,20 @@ const blogSchema = new mongoose.Schema({
   commentsCount: {
     type: Number,
     default: 0
+  },
+  
+  // Quote/Sidebar section
+  quote: {
+    type: String,
+    default: '',
+    trim: true
+  },
+  
+  // Content after quote
+  contentAfterQuote: {
+    type: String,
+    default: '',
+    trim: true
   }
 }, {
   timestamps: true
diff --git a/routes/admin.js b/routes/admin.js
index fb7d1ff..b14f98c 100644
--- a/routes/admin.js
+++ b/routes/admin.js
@@ -478,6 +478,7 @@ router.post("/blog/categories/create", ensureAuthenticated, blogCategoryControll
 router.get("/blog/categories/:id/edit", ensureAuthenticated, blogCategoryController.edit);
 router.post("/blog/categories/:id/edit", ensureAuthenticated, blogCategoryController.update);
 router.post("/blog/categories/:id/delete", ensureAuthenticated, blogCategoryController.destroy);
+router.post("/blog/categories/quick-create", ensureAuthenticated, blogCategoryController.quickCreate);
 
 // Blog Tags Management
 router.get("/blog/tags", ensureAuthenticated, blogTagController.index);
@@ -486,5 +487,6 @@ router.post("/blog/tags/create", ensureAuthenticated, blogTagController.store);
 router.get("/blog/tags/:id/edit", ensureAuthenticated, blogTagController.edit);
 router.post("/blog/tags/:id/edit", ensureAuthenticated, blogTagController.update);
 router.post("/blog/tags/:id/delete", ensureAuthenticated, blogTagController.destroy);
+router.post("/blog/tags/quick-create", ensureAuthenticated, blogTagController.quickCreate);
 
 module.exports = router;
diff --git a/routes/index.js b/routes/index.js
index 3322df9..7b58529 100644
--- a/routes/index.js
+++ b/routes/index.js
@@ -168,6 +168,9 @@ router.get("/api/blog/tags/:slug", blogTagController.apiShow);
 router.get("/api/blog/:id/categories", blogController.apiCategories);
 router.get("/api/blog/:id/tags", blogController.apiTags);
 
+// Blog comments (must come before /api/blog/:slug)
+router.post("/api/blog/:slug/comments", blogController.apiCreateComment);
+
 // Blog detail by slug (must come last among blog routes)
 router.get("/api/blog/:slug", blogController.apiShow);
 
diff --git a/server.js b/server.js
index eb71f17..4c46226 100644
--- a/server.js
+++ b/server.js
@@ -58,8 +58,6 @@ app.use(
   express.static(path.join(__dirname, "public")),
 );
 
-// Serve other public files
-app.use(express.static(path.join(__dirname, "public")));
 // Session configuration
 app.use(
   session({
diff --git a/views/admin/blog/create.ejs b/views/admin/blog/create.ejs
new file mode 100644
index 0000000..0a839d4
--- /dev/null
+++ b/views/admin/blog/create.ejs
@@ -0,0 +1,1008 @@
+<div class="container">
+    <div class="d-flex justify-content-between align-items-center mt-4 mb-4">
+        <div>
+            <h1 class="h3 mb-0" style="color: var(--primary-dark);">
+                <%= title %>
+            </h1>
+            <p class="text-muted mb-0">Create a new blog post</p>
+        </div>
+        <div>
+            <a href="/admin/blog" class="btn btn-outline-secondary">
+                <i class="fas fa-arrow-left me-1"></i>Back to Blog List
+            </a>
+        </div>
+    </div>
+
+    <div class="row">
+        <div class="col-12">
+            <form action="/admin/blog/create" method="POST" id="blogForm">
+                <!-- Navigation Tabs -->
+                <div class="card shadow-sm border-0 mb-4">
+                    <div class="card-header bg-white border-bottom">
+                        <ul class="nav nav-tabs card-header-tabs" role="tablist">
+                            <li class="nav-item">
+                                <a class="nav-link active" data-bs-toggle="tab" href="#blogInfo" role="tab">
+                                    <i class="fas fa-info-circle me-2"></i>Blog Information
+                                </a>
+                            </li>
+                            <li class="nav-item">
+                                <a class="nav-link" data-bs-toggle="tab" href="#categorization" role="tab">
+                                    <i class="fas fa-tags me-2"></i>Categorization
+                                </a>
+                            </li>
+                            <li class="nav-item">
+                                <a class="nav-link" data-bs-toggle="tab" href="#settings" role="tab">
+                                    <i class="fas fa-cog me-2"></i>Settings
+                                </a>
+                            </li>
+                        </ul>
+                    </div>
+
+                    <div class="card-body">
+                        <div class="tab-content">
+                            <!-- Blog Information Tab -->
+                            <div class="tab-pane fade show active" id="blogInfo" role="tabpanel">
+                                <div class="card border shadow-sm">
+                                    <div class="card-body">
+                                        <!-- Featured Image - Vị trí trên đầu -->
+                                        <div class="row g-3 mb-4">
+                                            <div class="col-md-12">
+                                                <label for="featuredImageUrl" class="form-label fw-medium">Featured
+                                                    Image <span class="text-danger">*</span></label>
+                                                <div class="input-group">
+                                                    <input type="text" class="form-control" id="featuredImageUrl"
+                                                        name="featuredImageUrl" required
+                                                        placeholder="Enter image URL or upload">
+                                                    <button type="button"
+                                                        class="btn btn-outline-primary btn-upload-image"
+                                                        data-target-input="featuredImageUrl" data-image-type="blog">
+                                                        <i class="fas fa-upload me-1"></i>Upload
+                                                    </button>
+                                                </div>
+                                                <div class="form-text">Upload a featured image for this blog post or
+                                                    enter image URL.</div>
+                                                <div id="featuredImagePreview" class="mt-2"></div>
+                                            </div>
+                                        </div>
+
+                                        <!-- Title - Vị trí dưới Featured Image -->
+                                        <div class="row g-3 mb-4">
+                                            <div class="col-md-12">
+                                                <label for="title" class="form-label fw-medium">Title <span
+                                                        class="text-danger">*</span></label>
+                                                <input type="text" class="form-control" id="title" name="title" required
+                                                    placeholder="Enter blog post title">
+                                                <div class="form-text">The title will be used to generate the URL slug
+                                                    automatically.</div>
+                                            </div>
+                                        </div>
+
+                                        <!-- Content (EditorJS) - Nằm dưới Title -->
+                                        <div class="row g-3 mb-4">
+                                            <div class="col-md-12">
+                                                <label for="content" class="form-label fw-medium">Content <span
+                                                        class="text-danger">*</span></label>
+                                                <div id="editorjs-content" class="border rounded p-3"
+                                                    style="min-height: 400px;"></div>
+                                                <input type="hidden" id="content" name="content" required>
+                                                <div class="form-text">Write the main content of the blog post using the
+                                                    editor.</div>
+                                            </div>
+                                        </div>
+
+                                        <!-- Gallery Images - Bắt buộc 2 ảnh -->
+                                        <div class="row g-3 mb-4">
+                                            <div class="col-md-12">
+                                                <label class="form-label fw-medium">Gallery Images <span
+                                                        class="text-danger">*</span></label>
+                                                <div class="form-text mb-2">Exactly 2 images required (row, 2 columns)
+                                                </div>
+                                                <div id="galleryContainer" class="row g-3">
+                                                    <div class="col-md-6">
+                                                        <div class="input-group">
+                                                            <input type="text" class="form-control gallery-image-input"
+                                                                id="galleryImages_0" name="galleryImages[]" required
+                                                                placeholder="Enter image URL or upload">
+                                                            <button type="button"
+                                                                class="btn btn-outline-primary btn-upload-image"
+                                                                data-target-input="galleryImages_0"
+                                                                data-image-type="blog">
+                                                                <i class="fas fa-upload me-1"></i>Upload
+                                                            </button>
+                                                        </div>
+                                                        <div id="galleryPreview_0" class="mt-2"></div>
+                                                    </div>
+                                                    <div class="col-md-6">
+                                                        <div class="input-group">
+                                                            <input type="text" class="form-control gallery-image-input"
+                                                                id="galleryImages_1" name="galleryImages[]" required
+                                                                placeholder="Enter image URL or upload">
+                                                            <button type="button"
+                                                                class="btn btn-outline-primary btn-upload-image"
+                                                                data-target-input="galleryImages_1"
+                                                                data-image-type="blog">
+                                                                <i class="fas fa-upload me-1"></i>Upload
+                                                            </button>
+                                                        </div>
+                                                        <div id="galleryPreview_1" class="mt-2"></div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+
+                                        <!-- Quote/Sidebar - Nằm ngay dưới Gallery Images -->
+                                        <div class="row g-3 mb-4">
+                                            <div class="col-md-12">
+                                                <label for="quote" class="form-label fw-medium">Quote/Sidebar</label>
+                                                <textarea class="form-control" id="quote" name="quote" rows="3"
+                                                    placeholder="Enter a quote or sidebar text (optional)"></textarea>
+                                                <div class="form-text">This will be displayed as a highlighted quote in
+                                                    the blog post.</div>
+                                            </div>
+                                        </div>
+
+                                        <!-- Content After Quote (EditorJS) -->
+                                        <div class="row g-3 mb-4">
+                                            <div class="col-md-12">
+                                                <label for="contentAfterQuote" class="form-label fw-medium">Content
+                                                    After Quote</label>
+                                                <div id="editorjs-contentAfterQuote" class="border rounded p-3"
+                                                    style="min-height: 400px;"></div>
+                                                <input type="hidden" id="contentAfterQuote" name="contentAfterQuote">
+                                                <div class="form-text">Content that appears after the quote section.
+                                                </div>
+                                            </div>
+                                        </div>
+
+                                        <!-- Additional Fields -->
+                                        <div class="row g-3">
+                                            <div class="col-md-12">
+                                                <label for="excerpt" class="form-label fw-medium">Excerpt <span
+                                                        class="text-danger">*</span></label>
+                                                <textarea class="form-control" id="excerpt" name="excerpt" rows="3"
+                                                    required maxlength="500"
+                                                    placeholder="Enter a brief summary of the blog post (max 500 characters)"></textarea>
+                                                <div class="form-text">
+                                                    <span id="excerptCount">0</span>/500 characters
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <!-- Categorization Tab -->
+                            <div class="tab-pane fade" id="categorization" role="tabpanel">
+                                <div class="card border shadow-sm">
+                                    <div class="card-body">
+                                        <div class="row g-3">
+                                            <!-- Categories Column -->
+                                            <div class="col-md-6">
+                                                <label class="form-label fw-medium">Categories</label>
+                                                <div class="d-flex gap-2 mb-2">
+                                                    <input type="text" class="form-control form-control-sm" 
+                                                        id="newCategoryInput" 
+                                                        placeholder="Enter new category name">
+                                                    <button type="button" class="btn btn-sm btn-outline-primary" 
+                                                        id="addCategoryBtn">
+                                                        <i class="fas fa-plus me-1"></i>Add
+                                                    </button>
+                                                </div>
+                                                <div class="form-check-group" id="categoriesContainer" style="max-height: 300px; overflow-y: auto;">
+                                                    <% categories.forEach(category=> { %>
+                                                        <div class="form-check d-flex align-items-center justify-content-between mb-2" data-category-id="<%= category._id %>">
+                                                            <div class="d-flex align-items-center">
+                                                            <input class="form-check-input" type="checkbox"
+                                                                name="category" value="<%= category.name %>"
+                                                                id="category_<%= category._id %>">
+                                                                <label class="form-check-label ms-2"
+                                                                for="category_<%= category._id %>">
+                                                                <%= category.name %>
+                                                            </label>
+                                                            </div>
+                                                            <button type="button" class="btn btn-sm btn-outline-danger delete-category-btn" 
+                                                                data-category-id="<%= category._id %>"
+                                                                data-category-name="<%= category.name %>"
+                                                                title="Delete category">
+                                                                <i class="fas fa-trash"></i>
+                                                            </button>
+                                                        </div>
+                                                        <% }); %>
+                                                </div>
+                                                <div class="form-text">Select one or more categories for this blog post.</div>
+                                            </div>
+
+                                            <!-- Tags Column -->
+                                            <div class="col-md-6">
+                                                <label class="form-label fw-medium">Tags</label>
+                                                <div class="d-flex gap-2 mb-2">
+                                                    <input type="text" class="form-control form-control-sm" 
+                                                        id="newTagInput" 
+                                                        placeholder="Enter new tag name">
+                                                    <button type="button" class="btn btn-sm btn-outline-primary" 
+                                                        id="addTagBtn">
+                                                        <i class="fas fa-plus me-1"></i>Add
+                                                    </button>
+                                                </div>
+                                                <div class="form-check-group" id="tagsContainer" style="max-height: 300px; overflow-y: auto;">
+                                                    <% tags.forEach(tag=> { %>
+                                                        <div class="form-check d-flex align-items-center justify-content-between mb-2" data-tag-id="<%= tag._id %>">
+                                                            <div class="d-flex align-items-center">
+                                                            <input class="form-check-input" type="checkbox" name="tags"
+                                                                value="<%= tag.name %>" id="tag_<%= tag._id %>">
+                                                                <label class="form-check-label ms-2" for="tag_<%= tag._id %>">
+                                                                <%= tag.name %>
+                                                            </label>
+                                                            </div>
+                                                            <button type="button" class="btn btn-sm btn-outline-danger delete-tag-btn" 
+                                                                data-tag-id="<%= tag._id %>"
+                                                                data-tag-name="<%= tag.name %>"
+                                                                title="Delete tag">
+                                                                <i class="fas fa-trash"></i>
+                                                            </button>
+                                                        </div>
+                                                        <% }); %>
+                                                </div>
+                                                <div class="form-text">Select one or more tags for this blog post.</div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <!-- Settings Tab -->
+                            <div class="tab-pane fade" id="settings" role="tabpanel">
+                                <div class="card border shadow-sm">
+                                    <div class="card-body">
+                                        <div class="row g-3">
+                                            <div class="col-md-6">
+                                                <label for="author" class="form-label fw-medium">Author</label>
+                                                <input type="text" class="form-control" id="author" name="author"
+                                                    value="Admin" placeholder="Enter author name">
+                                            </div>
+
+                                            <div class="col-md-6">
+                                                <label for="status" class="form-label fw-medium">Status</label>
+                                                <select class="form-select" id="status" name="status">
+                                                    <option value="published" selected>Published</option>
+                                                    <option value="draft">Draft</option>
+                                                </select>
+                                            </div>
+
+                                            <div class="col-md-12">
+                                                <div class="form-check">
+                                                    <input class="form-check-input" type="checkbox" name="isFeatured"
+                                                        id="isFeatured">
+                                                    <label class="form-check-label" for="isFeatured">
+                                                        Mark as Featured Post
+                                                    </label>
+                                                </div>
+                                                <div class="form-text">Featured posts can be highlighted on the blog page.</div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="d-grid gap-2 d-md-flex justify-content-md-end mb-4">
+                    <a href="/admin/blog" class="btn btn-outline-secondary">
+                        <i class="fas fa-times me-1"></i>Cancel
+                    </a>
+                    <button type="submit" class="btn btn-primary">
+                        <i class="fas fa-save me-1"></i>Create Blog Post
+                    </button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
+
+<!-- Editor.js Dependencies -->
+<script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@2.28.2"></script>
+<script src="https://cdn.jsdelivr.net/npm/@editorjs/header@2.7.0"></script>
+<script src="https://cdn.jsdelivr.net/npm/@editorjs/paragraph@2.11.3"></script>
+<script src="https://cdn.jsdelivr.net/npm/@editorjs/list@1.8.0"></script>
+<script src="https://cdn.jsdelivr.net/npm/@editorjs/image@2.8.1"></script>
+<script src="https://cdn.jsdelivr.net/npm/@editorjs/quote@2.5.0"></script>
+<script src="https://cdn.jsdelivr.net/npm/@editorjs/marker@1.3.0"></script>
+<script src="https://cdn.jsdelivr.net/npm/@editorjs/embed@2.5.3"></script>
+<script src="https://cdn.jsdelivr.net/npm/@editorjs/code@2.8.0"></script>
+<script src="https://cdn.jsdelivr.net/npm/@editorjs/delimiter@1.4.0"></script>
+<script src="https://cdn.jsdelivr.net/npm/@editorjs/table@2.2.2"></script>
+<script src="https://cdn.jsdelivr.net/npm/@editorjs/checklist@1.5.0"></script>
+<script src="https://cdn.jsdelivr.net/npm/@editorjs/inline-code@1.4.0"></script>
+<script src="https://cdn.jsdelivr.net/npm/@editorjs/underline@1.1.0"></script>
+
+<script>
+    document.addEventListener('DOMContentLoaded', async function () {
+        // Wait a bit for all scripts to load
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        // Check if EditorJS is loaded
+        if (typeof EditorJS === 'undefined') {
+            console.error('EditorJS is not loaded');
+            alert('EditorJS failed to load. Please refresh the page.');
+            return;
+        }
+
+        // Build tools object, only including plugins that are loaded
+        const tools = {
+                    header: {
+                        class: Header,
+                        config: {
+                            levels: [2, 3, 4],
+                            defaultLevel: 2
+                        }
+                    },
+                    paragraph: {
+                        class: Paragraph,
+                        inlineToolbar: true
+                    },
+                    list: {
+                        class: List,
+                        inlineToolbar: true,
+                        config: {
+                            defaultStyle: 'unordered'
+                        }
+                    },
+                    image: {
+                        class: Image,
+                        config: {
+                            endpoints: {
+                                byFile: '/admin/upload/image?imageType=blog'
+                            }
+                        }
+                    },
+                    quote: {
+                        class: Quote,
+                        inlineToolbar: true,
+                        shortcut: 'CMD+SHIFT+O',
+                        config: {
+                            quotePlaceholder: 'Enter a quote',
+                            captionPlaceholder: 'Quote\'s author'
+                        }
+                    },
+                    marker: {
+                        class: Marker,
+                        shortcut: 'CMD+SHIFT+M'
+                    },
+                    embed: {
+                        class: Embed,
+                        config: {
+                            services: {
+                                youtube: true,
+                                vimeo: true
+                            }
+                        }
+                    }
+        };
+
+        // Add optional plugins if they're loaded
+        if (typeof Code !== 'undefined') {
+            tools.code = {
+                class: Code,
+                config: {
+                    placeholder: 'Enter code'
+                }
+            };
+        }
+        if (typeof Delimiter !== 'undefined') {
+            tools.delimiter = Delimiter;
+        }
+        if (typeof Table !== 'undefined') {
+            tools.table = {
+                class: Table,
+                inlineToolbar: true,
+                config: {
+                    rows: 2,
+                    cols: 2
+                }
+            };
+        }
+        if (typeof Checklist !== 'undefined') {
+            tools.checklist = {
+                class: Checklist,
+                inlineToolbar: true
+            };
+        }
+        if (typeof InlineCode !== 'undefined') {
+            tools.inlineCode = {
+                class: InlineCode,
+                shortcut: 'CMD+SHIFT+I'
+            };
+        }
+        if (typeof Underline !== 'undefined') {
+            tools.underline = Underline;
+        }
+
+        // Initialize EditorJS for Content
+        let contentEditor = null;
+        try {
+            contentEditor = new EditorJS({
+                holder: 'editorjs-content',
+                placeholder: 'Write your blog content here...',
+                data: { blocks: [] },
+                tools: tools
+            });
+            window.contentEditor = contentEditor;
+        } catch (error) {
+            console.error('Error initializing content editor:', error);
+        }
+
+        // Initialize EditorJS for Content After Quote
+        let contentAfterQuoteEditor = null;
+        try {
+            contentAfterQuoteEditor = new EditorJS({
+                holder: 'editorjs-contentAfterQuote',
+                placeholder: 'Write content after quote here...',
+                data: { blocks: [] },
+                tools: tools
+            });
+            window.contentAfterQuoteEditor = contentAfterQuoteEditor;
+        } catch (error) {
+            console.error('Error initializing contentAfterQuote editor:', error);
+        }
+
+        // Excerpt character counter
+        const excerptInput = document.getElementById('excerpt');
+        const excerptCount = document.getElementById('excerptCount');
+
+        excerptInput.addEventListener('input', function () {
+            excerptCount.textContent = this.value.length;
+        });
+
+        // Image upload handler
+        document.querySelectorAll('.btn-upload-image').forEach(button => {
+            button.addEventListener('click', function () {
+                const targetInput = this.dataset.targetInput;
+                const imageType = this.dataset.imageType;
+                openImageUploader(targetInput, imageType);
+            });
+        });
+
+        function openImageUploader(targetInput, imageType) {
+            const fileInput = document.createElement('input');
+            fileInput.type = 'file';
+            fileInput.accept = 'image/*';
+            fileInput.style.display = 'none';
+            document.body.appendChild(fileInput);
+
+            fileInput.onchange = async function (e) {
+                const file = e.target.files[0];
+                if (!file) return;
+
+                try {
+                    const formData = new FormData();
+                    formData.append('image', file);
+
+                    const uploadBtn = document.querySelector(`[data-target-input="${targetInput}"]`);
+                    const originalBtnHtml = uploadBtn ? uploadBtn.innerHTML : 'Upload';
+                    if (uploadBtn) {
+                        uploadBtn.disabled = true;
+                        uploadBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Uploading...';
+                    }
+
+                    const response = await fetch(`/admin/upload/image?imageType=${imageType}`, {
+                        method: 'POST',
+                        body: formData
+                    });
+
+                    if (!response.ok) {
+                        throw new Error('Upload failed');
+                    }
+
+                    const result = await response.json();
+
+                    if (!result.success) {
+                        throw new Error(result.error || 'Upload failed');
+                    }
+
+                    // Update input value
+                    let input = document.getElementById(targetInput);
+                    if (!input) {
+                        const uploadBtn = document.querySelector(`[data-target-input="${targetInput}"]`);
+                        if (uploadBtn) {
+                            const inputGroup = uploadBtn.closest('.input-group');
+                            if (inputGroup) {
+                                input = inputGroup.querySelector('input[type="text"]');
+                            }
+                        }
+                    }
+
+                    if (input && input.tagName === 'INPUT') {
+                        // Lưu đúng relative path vào input (ví dụ: /uploads/blog/xxx.png)
+                        input.value = result.path;
+
+                        // Show preview sử dụng đúng data gốc (không gắn thêm URL)
+                        if (targetInput === 'featuredImageUrl') {
+                            const preview = document.getElementById('featuredImagePreview');
+                            const previewUrl = result.path || '';
+                            preview.innerHTML = `
+                                <img src="${previewUrl}" class="img-thumbnail" 
+                                  style="max-width: 300px; max-height: 200px; object-fit: cover;" 
+                                  alt="Featured image preview">
+                            `;
+                        } else if (targetInput.startsWith('galleryImages_')) {
+                            const index = targetInput.split('_')[1];
+                            const preview = document.getElementById(`galleryPreview_${index}`);
+                            if (preview) {
+                                const previewUrl = result.path || '';
+                                preview.innerHTML = `
+                                    <img src="${previewUrl}" class="img-thumbnail" 
+                                      style="max-width: 200px; max-height: 150px; object-fit: cover;" 
+                                      alt="Gallery image preview">
+                                `;
+                            }
+                        }
+                    } else {
+                        console.error('Could not find input for:', targetInput);
+                    }
+
+                    if (uploadBtn) {
+                        uploadBtn.disabled = false;
+                        uploadBtn.innerHTML = originalBtnHtml;
+                    }
+
+                } catch (error) {
+                    console.error('Upload error:', error);
+                    alert('Failed to upload image: ' + error.message);
+
+                    const uploadBtn = document.querySelector(`[data-target-input="${targetInput}"]`);
+                    if (uploadBtn) {
+                        uploadBtn.disabled = false;
+                        uploadBtn.innerHTML = uploadBtn.innerHTML.replace('Uploading...', 'Upload');
+                    }
+                } finally {
+                    document.body.removeChild(fileInput);
+                }
+            };
+
+            fileInput.click();
+        }
+
+        // Form submission handler
+        const form = document.getElementById('blogForm');
+        form.addEventListener('submit', async function (e) {
+            e.preventDefault();
+
+            const submitBtn = form.querySelector('button[type="submit"]');
+            const originalBtnHtml = submitBtn.innerHTML;
+            submitBtn.disabled = true;
+            submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Creating...';
+
+            try {
+                // Save content from EditorJS
+                if (contentEditor) {
+                    const contentData = await contentEditor.save();
+                    document.getElementById('content').value = JSON.stringify(contentData);
+                }
+
+                // Save contentAfterQuote from EditorJS
+                if (contentAfterQuoteEditor) {
+                    const contentAfterQuoteData = await contentAfterQuoteEditor.save();
+                    document.getElementById('contentAfterQuote').value = JSON.stringify(contentAfterQuoteData);
+                }
+
+                // Validate gallery images (must have exactly 2)
+                const galleryInputs = document.querySelectorAll('input[name="galleryImages[]"]');
+                let filledCount = 0;
+                galleryInputs.forEach(input => {
+                    if (input.value.trim()) {
+                        filledCount++;
+                    }
+                });
+
+                if (filledCount < 2) {
+                    alert('Please upload exactly 2 gallery images.');
+                    submitBtn.disabled = false;
+                    submitBtn.innerHTML = originalBtnHtml;
+                    return;
+                }
+
+                form.submit();
+            } catch (error) {
+                console.error('Save error:', error);
+                alert('Error saving content: ' + error.message);
+                submitBtn.disabled = false;
+                submitBtn.innerHTML = originalBtnHtml;
+            }
+        });
+
+        // Add Category functionality
+        const addCategoryBtn = document.getElementById('addCategoryBtn');
+        const newCategoryInput = document.getElementById('newCategoryInput');
+        const categoriesContainer = document.getElementById('categoriesContainer');
+
+        addCategoryBtn.addEventListener('click', async function() {
+            const categoryName = newCategoryInput.value.trim();
+            if (!categoryName) {
+                alert('Please enter a category name');
+                return;
+            }
+
+            const btnHtml = addCategoryBtn.innerHTML;
+            addCategoryBtn.disabled = true;
+            addCategoryBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Adding...';
+
+            try {
+                const response = await fetch('/admin/blog/categories/quick-create', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({ name: categoryName })
+                });
+
+                const result = await response.json();
+
+                    if (result.success) {
+                    // Check if checkbox already exists
+                    const existingCheckbox = document.querySelector(`input[name="category"][value="${result.data.name}"]`);
+                    if (!existingCheckbox) {
+                        // Add new checkbox with delete button
+                        const newItem = document.createElement('div');
+                        newItem.className = 'form-check d-flex align-items-center justify-content-between mb-2';
+                        newItem.setAttribute('data-category-id', result.data._id);
+                        newItem.innerHTML = `
+                            <div class="d-flex align-items-center">
+                                <input class="form-check-input" type="checkbox"
+                                    name="category" value="${result.data.name}"
+                                    id="category_${result.data._id}" checked>
+                                <label class="form-check-label ms-2" for="category_${result.data._id}">
+                                    ${result.data.name}
+                                </label>
+                            </div>
+                            <button type="button" class="btn btn-sm btn-outline-danger delete-category-btn" 
+                                data-category-id="${result.data._id}"
+                                data-category-name="${result.data.name}"
+                                title="Delete category">
+                                <i class="fas fa-trash"></i>
+                            </button>
+                        `;
+                        categoriesContainer.appendChild(newItem);
+                    } else {
+                        // Just check it if it exists
+                        existingCheckbox.checked = true;
+                    }
+                    newCategoryInput.value = '';
+                } else {
+                    alert(result.message || 'Error creating category');
+                }
+            } catch (error) {
+                console.error('Error creating category:', error);
+                alert('Error creating category: ' + error.message);
+            } finally {
+                addCategoryBtn.disabled = false;
+                addCategoryBtn.innerHTML = btnHtml;
+            }
+        });
+
+        // Allow Enter key to add category
+        newCategoryInput.addEventListener('keypress', function(e) {
+            if (e.key === 'Enter') {
+                e.preventDefault();
+                addCategoryBtn.click();
+            }
+        });
+
+        // Add Tag functionality
+        const addTagBtn = document.getElementById('addTagBtn');
+        const newTagInput = document.getElementById('newTagInput');
+        const tagsContainer = document.getElementById('tagsContainer');
+
+        addTagBtn.addEventListener('click', async function() {
+            const tagName = newTagInput.value.trim();
+            if (!tagName) {
+                alert('Please enter a tag name');
+                return;
+            }
+
+            const btnHtml = addTagBtn.innerHTML;
+            addTagBtn.disabled = true;
+            addTagBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Adding...';
+
+            try {
+                const response = await fetch('/admin/blog/tags/quick-create', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({ name: tagName })
+                });
+
+                const result = await response.json();
+
+                if (result.success) {
+                    // Check if checkbox already exists
+                    const existingCheckbox = document.querySelector(`input[name="tags"][value="${result.data.name}"]`);
+                    if (!existingCheckbox) {
+                        // Add new checkbox with delete button
+                        const newItem = document.createElement('div');
+                        newItem.className = 'form-check d-flex align-items-center justify-content-between mb-2';
+                        newItem.setAttribute('data-tag-id', result.data._id);
+                        newItem.innerHTML = `
+                            <div class="d-flex align-items-center">
+                                <input class="form-check-input" type="checkbox" name="tags"
+                                    value="${result.data.name}" id="tag_${result.data._id}" checked>
+                                <label class="form-check-label ms-2" for="tag_${result.data._id}">
+                                    ${result.data.name}
+                                </label>
+                            </div>
+                            <button type="button" class="btn btn-sm btn-outline-danger delete-tag-btn" 
+                                data-tag-id="${result.data._id}"
+                                data-tag-name="${result.data.name}"
+                                title="Delete tag">
+                                <i class="fas fa-trash"></i>
+                            </button>
+                        `;
+                        tagsContainer.appendChild(newItem);
+                    } else {
+                        // Just check it if it exists
+                        existingCheckbox.checked = true;
+                    }
+                    newTagInput.value = '';
+                } else {
+                    alert(result.message || 'Error creating tag');
+                }
+            } catch (error) {
+                console.error('Error creating tag:', error);
+                alert('Error creating tag: ' + error.message);
+            } finally {
+                addTagBtn.disabled = false;
+                addTagBtn.innerHTML = btnHtml;
+            }
+        });
+
+        // Allow Enter key to add tag
+        newTagInput.addEventListener('keypress', function(e) {
+            if (e.key === 'Enter') {
+                e.preventDefault();
+                addTagBtn.click();
+            }
+        });
+
+    });
+</script>
+
+<!-- Delete Category Confirmation Modal -->
+<div class="modal fade" id="deleteCategoryModal" tabindex="-1" aria-labelledby="deleteCategoryModalLabel" aria-hidden="true"
+    data-bs-backdrop="true" data-bs-keyboard="true">
+    <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-content">
+            <div class="modal-header bg-danger text-white">
+                <h5 class="modal-title" id="deleteCategoryModalLabel">
+                    <i class="fas fa-trash me-2"></i>Confirm Delete Category
+                </h5>
+                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
+                    aria-label="Close"></button>
+            </div>
+            <div class="modal-body">
+                <p>Are you sure you want to delete the category "<span id="deleteCategoryName" class="fw-bold"></span>"?</p>
+                <p class="text-danger mb-0">
+                    <small>
+                        <i class="fas fa-exclamation-triangle me-1"></i>This action cannot be undone.</small>
+                </p>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
+                <button type="button" class="btn btn-danger" id="confirmDeleteCategoryBtn">
+                    <i class="fas fa-trash me-1"></i>Delete
+                </button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Delete Tag Confirmation Modal -->
+<div class="modal fade" id="deleteTagModal" tabindex="-1" aria-labelledby="deleteTagModalLabel" aria-hidden="true"
+    data-bs-backdrop="false" data-bs-keyboard="true">
+    <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-content">
+            <div class="modal-header bg-danger text-white">
+                <h5 class="modal-title" id="deleteTagModalLabel">
+                    <i class="fas fa-trash me-2"></i>Confirm Delete Tag
+                </h5>
+                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
+                    aria-label="Close"></button>
+            </div>
+            <div class="modal-body">
+                <p>Are you sure you want to delete the tag "<span id="deleteTagName" class="fw-bold"></span>"?</p>
+                <p class="text-danger mb-0">
+                    <small>
+                        <i class="fas fa-exclamation-triangle me-1"></i>This action cannot be undone.</small>
+                </p>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
+                <button type="button" class="btn btn-danger" id="confirmDeleteTagBtn">
+                    <i class="fas fa-trash me-1"></i>Delete
+                </button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<style>
+    /* Fix modal z-index */
+    #deleteCategoryModal, #deleteTagModal {
+        z-index: 2050 !important;
+    }
+
+    #deleteCategoryModal .modal-content, #deleteTagModal .modal-content {
+        z-index: 2070 !important;
+        position: relative;
+    }
+
+    #deleteCategoryModal.show, #deleteTagModal.show {
+        display: block !important;
+    }
+</style>
+
+<script>
+    document.addEventListener('DOMContentLoaded', function () {
+        // Initialize Category Delete Modal
+        const deleteCategoryModalElement = document.getElementById('deleteCategoryModal');
+        const deleteCategoryModal = new bootstrap.Modal(deleteCategoryModalElement, {
+            backdrop: false,
+            keyboard: true,
+            focus: true
+        });
+
+        let currentCategoryId = null;
+        let currentCategoryBtn = null;
+
+        // Handle category delete buttons
+        document.addEventListener('click', function(e) {
+            if (e.target.closest('.delete-category-btn')) {
+                e.preventDefault();
+                const btn = e.target.closest('.delete-category-btn');
+                currentCategoryId = btn.dataset.categoryId;
+                const categoryName = btn.dataset.categoryName;
+                currentCategoryBtn = btn;
+
+                // Set category name in modal
+                document.getElementById('deleteCategoryName').textContent = categoryName;
+
+                // Show modal
+                deleteCategoryModal.show();
+            }
+        });
+
+        // Handle confirm delete category
+        document.getElementById('confirmDeleteCategoryBtn').addEventListener('click', async function() {
+            if (!currentCategoryId || !currentCategoryBtn) return;
+
+            const btn = currentCategoryBtn;
+            const btnHtml = btn.innerHTML;
+            btn.disabled = true;
+            btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
+
+            try {
+                const response = await fetch(`/admin/blog/categories/${currentCategoryId}/delete`, {
+                    method: 'POST',
+                    headers: {
+                        'Accept': 'application/json',
+                        'Content-Type': 'application/json',
+                    }
+                });
+
+                const contentType = response.headers.get('content-type');
+                if (contentType && contentType.includes('application/json')) {
+                    const result = await response.json();
+                    if (result.success) {
+                        // Close modal
+                        deleteCategoryModal.hide();
+                        // Remove the category from the list
+                        const categoryItem = btn.closest('[data-category-id]');
+                        if (categoryItem) {
+                            categoryItem.remove();
+                        }
+                    } else {
+                        alert(result.message || 'Error deleting category');
+                        btn.disabled = false;
+                        btn.innerHTML = btnHtml;
+                    }
+                } else {
+                    // If response is not JSON, assume success (redirect response)
+                    deleteCategoryModal.hide();
+                    const categoryItem = btn.closest('[data-category-id]');
+                    if (categoryItem) {
+                        categoryItem.remove();
+                    }
+                }
+            } catch (error) {
+                console.error('Error deleting category:', error);
+                alert('Error deleting category: ' + error.message);
+                btn.disabled = false;
+                btn.innerHTML = btnHtml;
+            } finally {
+                currentCategoryId = null;
+                currentCategoryBtn = null;
+            }
+        });
+
+        // Initialize Tag Delete Modal
+        const deleteTagModalElement = document.getElementById('deleteTagModal');
+        const deleteTagModal = new bootstrap.Modal(deleteTagModalElement, {
+            backdrop: false,
+            keyboard: true,
+            focus: true
+        });
+
+        let currentTagId = null;
+        let currentTagBtn = null;
+
+        // Handle tag delete buttons
+        document.addEventListener('click', function(e) {
+            if (e.target.closest('.delete-tag-btn')) {
+                e.preventDefault();
+                const btn = e.target.closest('.delete-tag-btn');
+                currentTagId = btn.dataset.tagId;
+                const tagName = btn.dataset.tagName;
+                currentTagBtn = btn;
+
+                // Set tag name in modal
+                document.getElementById('deleteTagName').textContent = tagName;
+
+                // Show modal
+                deleteTagModal.show();
+            }
+        });
+
+        // Handle confirm delete tag
+        document.getElementById('confirmDeleteTagBtn').addEventListener('click', async function() {
+            if (!currentTagId || !currentTagBtn) return;
+
+            const btn = currentTagBtn;
+            const btnHtml = btn.innerHTML;
+            btn.disabled = true;
+            btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
+
+            try {
+                const response = await fetch(`/admin/blog/tags/${currentTagId}/delete`, {
+                    method: 'POST',
+                    headers: {
+                        'Accept': 'application/json',
+                        'Content-Type': 'application/json',
+                    }
+                });
+
+                const contentType = response.headers.get('content-type');
+                if (contentType && contentType.includes('application/json')) {
+                    const result = await response.json();
+                    if (result.success) {
+                        // Close modal
+                        deleteTagModal.hide();
+                        // Remove the tag from the list
+                        const tagItem = btn.closest('[data-tag-id]');
+                        if (tagItem) {
+                            tagItem.remove();
+                        }
+                    } else {
+                        alert(result.message || 'Error deleting tag');
+                        btn.disabled = false;
+                        btn.innerHTML = btnHtml;
+                    }
+                } else {
+                    // If response is not JSON, assume success (redirect response)
+                    deleteTagModal.hide();
+                    const tagItem = btn.closest('[data-tag-id]');
+                    if (tagItem) {
+                        tagItem.remove();
+                    }
+                }
+            } catch (error) {
+                console.error('Error deleting tag:', error);
+                alert('Error deleting tag: ' + error.message);
+                btn.disabled = false;
+                btn.innerHTML = btnHtml;
+            } finally {
+                currentTagId = null;
+                currentTagBtn = null;
+            }
+        });
+    });
+</script>
\ No newline at end of file
diff --git a/views/admin/blog/edit.ejs b/views/admin/blog/edit.ejs
new file mode 100644
index 0000000..838ed55
--- /dev/null
+++ b/views/admin/blog/edit.ejs
@@ -0,0 +1,1152 @@
+<div class="container">
+    <div class="d-flex justify-content-between align-items-center mt-4 mb-4">
+        <div>
+            <h1 class="h3 mb-0" style="color: var(--primary-dark);">
+                <%= title %>
+            </h1>
+            <p class="text-muted mb-0">Edit blog post</p>
+        </div>
+        <div>
+            <a href="/admin/blog" class="btn btn-outline-secondary">
+                <i class="fas fa-arrow-left me-1"></i>Back to Blog List
+            </a>
+        </div>
+    </div>
+
+    <div class="row">
+        <div class="col-12">
+            <form action="/admin/blog/<%= blog._id %>/edit" method="POST" id="blogForm">
+                <!-- Navigation Tabs -->
+                <div class="card shadow-sm border-0 mb-4">
+                    <div class="card-header bg-white border-bottom">
+                        <ul class="nav nav-tabs card-header-tabs" role="tablist">
+                            <li class="nav-item">
+                                <a class="nav-link active" data-bs-toggle="tab" href="#blogInfo" role="tab">
+                                    <i class="fas fa-info-circle me-2"></i>Blog Information
+                                </a>
+                            </li>
+                            <li class="nav-item">
+                                <a class="nav-link" data-bs-toggle="tab" href="#categorization" role="tab">
+                                    <i class="fas fa-tags me-2"></i>Categorization
+                                </a>
+                            </li>
+                            <li class="nav-item">
+                                <a class="nav-link" data-bs-toggle="tab" href="#settings" role="tab">
+                                    <i class="fas fa-cog me-2"></i>Settings
+                                </a>
+                            </li>
+                        </ul>
+                    </div>
+
+                    <div class="card-body">
+                        <div class="tab-content">
+                            <!-- Blog Information Tab -->
+                            <div class="tab-pane fade show active" id="blogInfo" role="tabpanel">
+                                <div class="card border shadow-sm">
+                                    <div class="card-body">
+                                        <!-- Featured Image - Vị trí trên đầu -->
+                                        <div class="row g-3 mb-4">
+                                            <div class="col-md-12">
+                                                <label for="featuredImageUrl" class="form-label fw-medium">Featured
+                                                    Image <span class="text-danger">*</span></label>
+                                                <div class="input-group">
+                                                    <input type="text" class="form-control" id="featuredImageUrl"
+                                                        name="featuredImageUrl" value="<%= blog.featuredImage || '' %>"
+                                                        required placeholder="Enter image URL or upload">
+                                                    <button type="button"
+                                                        class="btn btn-outline-primary btn-upload-image"
+                                                        data-target-input="featuredImageUrl" data-image-type="blog">
+                                                        <i class="fas fa-upload me-1"></i>Upload
+                                                    </button>
+                                                </div>
+                                                <div class="form-text">Upload a new featured image or enter image URL.
+                                                </div>
+                                                <div id="featuredImagePreview" class="mt-2">
+                                                    <% if (blog.featuredImage) { %>
+                                                        <img src="<%= blog.featuredImage.startsWith('http') ? blog.featuredImage : (typeof frontendUrl !== 'undefined' ? frontendUrl : '') + blog.featuredImage %>"
+                                                            class="img-thumbnail"
+                                                            style="max-width: 300px; max-height: 200px; object-fit: cover;"
+                                                            alt="Featured image preview">
+                                                        <% } %>
+                                                </div>
+                                            </div>
+                                        </div>
+
+                                        <!-- Title - Vị trí dưới Featured Image -->
+                                        <div class="row g-3 mb-4">
+                                            <div class="col-md-12">
+                                                <label for="title" class="form-label fw-medium">Title <span
+                                                        class="text-danger">*</span></label>
+                                                <input type="text" class="form-control" id="title" name="title" required
+                                                    value="<%= blog.title %>" placeholder="Enter blog post title">
+                                                <div class="form-text">The title will be used to generate the URL slug
+                                                    automatically.</div>
+                                            </div>
+                                        </div>
+
+                                        <!-- Content (EditorJS) - Nằm dưới Title -->
+                                        <div class="row g-3 mb-4">
+                                            <div class="col-md-12">
+                                                <label for="content" class="form-label fw-medium">Content <span
+                                                        class="text-danger">*</span></label>
+                                                <div id="editorjs-content" class="border rounded p-3"
+                                                    style="min-height: 400px;"></div>
+                                                <input type="hidden" id="content" name="content" required>
+                                                <div class="form-text">Write the main content of the blog post using the
+                                                    editor.</div>
+                                            </div>
+                                        </div>
+
+                                        <!-- Gallery Images - Bắt buộc 2 ảnh -->
+                                        <div class="row g-3 mb-4">
+                                            <div class="col-md-12">
+                                                <label class="form-label fw-medium">Gallery Images <span
+                                                        class="text-danger">*</span></label>
+                                                <div class="form-text mb-2">Exactly 2 images required (row, 2 columns)
+                                                </div>
+                                                <div id="galleryContainer" class="row g-3">
+                                                    <% const galleryImages=blog.galleryImages || []; const
+                                                        image1=galleryImages[0] || '' ; const image2=galleryImages[1]
+                                                        || '' ; %>
+                                                        <div class="col-md-6">
+                                                            <div class="input-group">
+                                                                <input type="text"
+                                                                    class="form-control gallery-image-input"
+                                                                    id="galleryImages_0" name="galleryImages[]"
+                                                                    value="<%= image1 %>" required
+                                                                    placeholder="Enter image URL or upload">
+                                                                <button type="button"
+                                                                    class="btn btn-outline-primary btn-upload-image"
+                                                                    data-target-input="galleryImages_0"
+                                                                    data-image-type="blog">
+                                                                    <i class="fas fa-upload me-1"></i>Upload
+                                                                </button>
+                                                            </div>
+                                                            <div id="galleryPreview_0" class="mt-2">
+                                                                <% if (image1) { %>
+                                                                    <img src="<%= image1.startsWith('http') ? image1 : (typeof frontendUrl !== 'undefined' ? frontendUrl : '') + image1 %>"
+                                                                        class="img-thumbnail"
+                                                                        style="max-width: 200px; max-height: 150px; object-fit: cover;"
+                                                                        alt="Gallery image 1 preview">
+                                                                    <% } %>
+                                                            </div>
+                                                        </div>
+                                                        <div class="col-md-6">
+                                                            <div class="input-group">
+                                                                <input type="text"
+                                                                    class="form-control gallery-image-input"
+                                                                    id="galleryImages_1" name="galleryImages[]"
+                                                                    value="<%= image2 %>" required
+                                                                    placeholder="Enter image URL or upload">
+                                                                <button type="button"
+                                                                    class="btn btn-outline-primary btn-upload-image"
+                                                                    data-target-input="galleryImages_1"
+                                                                    data-image-type="blog">
+                                                                    <i class="fas fa-upload me-1"></i>Upload
+                                                                </button>
+                                                            </div>
+                                                            <div id="galleryPreview_1" class="mt-2">
+                                                                <% if (image2) { %>
+                                                                    <img src="<%= image2.startsWith('http') ? image2 : (typeof frontendUrl !== 'undefined' ? frontendUrl : '') + image2 %>"
+                                                                        class="img-thumbnail"
+                                                                        style="max-width: 200px; max-height: 150px; object-fit: cover;"
+                                                                        alt="Gallery image 2 preview">
+                                                                    <% } %>
+                                                            </div>
+                                                        </div>
+                                                </div>
+                                            </div>
+                                        </div>
+
+                                        <!-- Quote/Sidebar - Nằm ngay dưới Gallery Images -->
+                                        <div class="row g-3 mb-4">
+                                            <div class="col-md-12">
+                                                <label for="quote" class="form-label fw-medium">Quote/Sidebar</label>
+                                                <textarea class="form-control" id="quote" name="quote" rows="3"
+                                                    placeholder="Enter a quote or sidebar text (optional)"><%= blog.quote || '' %></textarea>
+                                                <div class="form-text">This will be displayed as a highlighted quote in
+                                                    the blog post.</div>
+                                            </div>
+                                        </div>
+
+                                        <!-- Content After Quote (EditorJS) -->
+                                        <div class="row g-3 mb-4">
+                                            <div class="col-md-12">
+                                                <label for="contentAfterQuote" class="form-label fw-medium">Content
+                                                    After Quote</label>
+                                                <div id="editorjs-contentAfterQuote" class="border rounded p-3"
+                                                    style="min-height: 400px;"></div>
+                                                <input type="hidden" id="contentAfterQuote" name="contentAfterQuote">
+                                                <div class="form-text">Content that appears after the quote section.
+                                                </div>
+                                            </div>
+                                        </div>
+
+                                        <!-- Additional Fields -->
+                                        <div class="row g-3">
+                                            <div class="col-md-12">
+                                                <label for="excerpt" class="form-label fw-medium">Excerpt <span
+                                                        class="text-danger">*</span></label>
+                                                <textarea class="form-control" id="excerpt" name="excerpt" rows="3"
+                                                    required maxlength="500"
+                                                    placeholder="Enter a brief summary of the blog post (max 500 characters)"><%= blog.excerpt || '' %></textarea>
+                                                <div class="form-text">
+                                                    <span id="excerptCount">
+                                                        <%= (blog.excerpt || '' ).length %>
+                                                    </span>/500 characters
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <!-- Categorization Tab -->
+                            <div class="tab-pane fade" id="categorization" role="tabpanel">
+                                <div class="card border shadow-sm">
+                                    <div class="card-body">
+                                        <div class="row g-3">
+                                            <!-- Categories Column -->
+                                            <div class="col-md-6">
+                                                <label class="form-label fw-medium">Categories</label>
+                                                <div class="d-flex gap-2 mb-2">
+                                                    <input type="text" class="form-control form-control-sm"
+                                                        id="newCategoryInput" placeholder="Enter new category name">
+                                                    <button type="button" class="btn btn-sm btn-outline-primary"
+                                                        id="addCategoryBtn">
+                                                        <i class="fas fa-plus me-1"></i>Add
+                                                    </button>
+                                                </div>
+                                                <div class="form-check-group" id="categoriesContainer"
+                                                    style="max-height: 300px; overflow-y: auto;">
+                                                    <% categories.forEach(category=> { %>
+                                                        <div class="form-check d-flex align-items-center justify-content-between mb-2"
+                                                            data-category-id="<%= category._id %>">
+                                                            <div class="d-flex align-items-center">
+                                                                <input class="form-check-input" type="checkbox"
+                                                                    name="category" value="<%= category.name %>"
+                                                                    id="category_<%= category._id %>" <%=blog.category
+                                                                    && blog.category.includes(category.name) ? 'checked'
+                                                                    : '' %>>
+                                                                <label class="form-check-label ms-2"
+                                                                    for="category_<%= category._id %>">
+                                                                    <%= category.name %>
+                                                                </label>
+                                                            </div>
+                                                            <button type="button"
+                                                                class="btn btn-sm btn-outline-danger delete-category-btn"
+                                                                data-category-id="<%= category._id %>"
+                                                                data-category-name="<%= category.name %>"
+                                                                title="Delete category">
+                                                                <i class="fas fa-trash"></i>
+                                                            </button>
+                                                        </div>
+                                                        <% }); %>
+                                                </div>
+                                                <div class="form-text">Select one or more categories for this blog post.
+                                                </div>
+                                            </div>
+
+                                            <!-- Tags Column -->
+                                            <div class="col-md-6">
+                                                <label class="form-label fw-medium">Tags</label>
+                                                <div class="d-flex gap-2 mb-2">
+                                                    <input type="text" class="form-control form-control-sm"
+                                                        id="newTagInput" placeholder="Enter new tag name">
+                                                    <button type="button" class="btn btn-sm btn-outline-primary"
+                                                        id="addTagBtn">
+                                                        <i class="fas fa-plus me-1"></i>Add
+                                                    </button>
+                                                </div>
+                                                <div class="form-check-group" id="tagsContainer"
+                                                    style="max-height: 300px; overflow-y: auto;">
+                                                    <% tags.forEach(tag=> { %>
+                                                        <div class="form-check d-flex align-items-center justify-content-between mb-2"
+                                                            data-tag-id="<%= tag._id %>">
+                                                            <div class="d-flex align-items-center">
+                                                                <input class="form-check-input" type="checkbox"
+                                                                    name="tags" value="<%= tag.name %>"
+                                                                    id="tag_<%= tag._id %>" <%=blog.tags &&
+                                                                    blog.tags.includes(tag.name) ? 'checked' : '' %>>
+                                                                <label class="form-check-label ms-2"
+                                                                    for="tag_<%= tag._id %>">
+                                                                    <%= tag.name %>
+                                                                </label>
+                                                            </div>
+                                                            <button type="button"
+                                                                class="btn btn-sm btn-outline-danger delete-tag-btn"
+                                                                data-tag-id="<%= tag._id %>"
+                                                                data-tag-name="<%= tag.name %>" title="Delete tag">
+                                                                <i class="fas fa-trash"></i>
+                                                            </button>
+                                                        </div>
+                                                        <% }); %>
+                                                </div>
+                                                <div class="form-text">Select one or more tags for this blog post.</div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <!-- Settings Tab -->
+                            <div class="tab-pane fade" id="settings" role="tabpanel">
+                                <div class="card border shadow-sm">
+                                    <div class="card-body">
+                                        <div class="row g-3">
+                                            <div class="col-md-6">
+                                                <label for="author" class="form-label fw-medium">Author</label>
+                                                <input type="text" class="form-control" id="author" name="author"
+                                                    value="<%= blog.author || 'Admin' %>"
+                                                    placeholder="Enter author name">
+                                            </div>
+
+                                            <div class="col-md-6">
+                                                <label for="status" class="form-label fw-medium">Status</label>
+                                                <select class="form-select" id="status" name="status">
+                                                    <option value="published" <%=blog.status==='published' ? 'selected'
+                                                        : '' %>>Published</option>
+                                                    <option value="draft" <%=blog.status==='draft' ? 'selected' : '' %>
+                                                        >Draft</option>
+                                                </select>
+                                            </div>
+
+                                            <div class="col-md-12">
+                                                <div class="form-check">
+                                                    <input class="form-check-input" type="checkbox" name="isFeatured"
+                                                        id="isFeatured" <%=blog.isFeatured ? 'checked' : '' %>>
+                                                    <label class="form-check-label" for="isFeatured">
+                                                        Mark as Featured Post
+                                                    </label>
+                                                </div>
+                                                <div class="form-text">Featured posts can be highlighted on the blog
+                                                    page.</div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="d-grid gap-2 d-md-flex justify-content-md-end mb-4">
+                    <a href="/admin/blog" class="btn btn-outline-secondary">
+                        <i class="fas fa-times me-1"></i>Cancel
+                    </a>
+                    <button type="submit" class="btn btn-primary">
+                        <i class="fas fa-save me-1"></i>Update Blog Post
+                    </button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
+
+<!-- Editor.js Dependencies -->
+<script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@2.28.2"></script>
+<script src="https://cdn.jsdelivr.net/npm/@editorjs/header@2.7.0"></script>
+<script src="https://cdn.jsdelivr.net/npm/@editorjs/paragraph@2.11.3"></script>
+<script src="https://cdn.jsdelivr.net/npm/@editorjs/list@1.8.0"></script>
+<script src="https://cdn.jsdelivr.net/npm/@editorjs/image@2.8.1"></script>
+<script src="https://cdn.jsdelivr.net/npm/@editorjs/quote@2.5.0"></script>
+<script src="https://cdn.jsdelivr.net/npm/@editorjs/marker@1.3.0"></script>
+<script src="https://cdn.jsdelivr.net/npm/@editorjs/embed@2.5.3"></script>
+<script src="https://cdn.jsdelivr.net/npm/@editorjs/code@2.8.0"></script>
+<script src="https://cdn.jsdelivr.net/npm/@editorjs/delimiter@1.4.0"></script>
+<script src="https://cdn.jsdelivr.net/npm/@editorjs/table@2.2.2"></script>
+<script src="https://cdn.jsdelivr.net/npm/@editorjs/checklist@1.5.0"></script>
+<script src="https://cdn.jsdelivr.net/npm/@editorjs/inline-code@1.4.0"></script>
+<script src="https://cdn.jsdelivr.net/npm/@editorjs/underline@1.1.0"></script>
+
+<script>
+    document.addEventListener('DOMContentLoaded', async function () {
+        // Wait a bit for all scripts to load
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        // Check if EditorJS is loaded
+        if (typeof EditorJS === 'undefined') {
+            console.error('EditorJS is not loaded');
+            alert('EditorJS failed to load. Please refresh the page.');
+            return;
+        }
+
+        // Parse existing content
+        let initialContentData = { blocks: [] };
+        let initialContentAfterQuoteData = { blocks: [] };
+
+        try {
+            <% if (blog.content) { %>
+                const blogContentRaw = <% - JSON.stringify(blog.content) %>;
+                if (blogContentRaw) {
+                    if (typeof blogContentRaw === 'string' && blogContentRaw.trim()) {
+                        // Try to parse as JSON string
+                        try {
+                            initialContentData = JSON.parse(blogContentRaw);
+                            // Validate it has blocks property
+                            if (!initialContentData.blocks || !Array.isArray(initialContentData.blocks)) {
+                                throw new Error('Invalid EditorJS format');
+                            }
+                        } catch (e) {
+                            // If not JSON, convert to EditorJS format
+                            initialContentData = {
+                                blocks: [{
+                                    type: 'paragraph',
+                                    data: {
+                                        text: blogContentRaw
+                                    }
+                                }]
+                            };
+                        }
+                    } else if (typeof blogContentRaw === 'object' && blogContentRaw !== null) {
+                        // Already an object, check if it's valid EditorJS format
+                        if (blogContentRaw.blocks && Array.isArray(blogContentRaw.blocks)) {
+                            initialContentData = blogContentRaw;
+                        } else {
+                            // Convert object to EditorJS format
+                            initialContentData = {
+                                blocks: [{
+                                    type: 'paragraph',
+                                    data: {
+                                        text: JSON.stringify(blogContentRaw)
+                                    }
+                                }]
+                            };
+                        }
+                    }
+                }
+            <% } %>
+        } catch (error) {
+            console.error('Error parsing content:', error);
+        }
+
+        try {
+            <% if (blog.contentAfterQuote) { %>
+                const blogContentAfterQuoteRaw = <% - JSON.stringify(blog.contentAfterQuote) %>;
+                if (blogContentAfterQuoteRaw) {
+                    if (typeof blogContentAfterQuoteRaw === 'string' && blogContentAfterQuoteRaw.trim()) {
+                        // Try to parse as JSON string
+                        try {
+                            initialContentAfterQuoteData = JSON.parse(blogContentAfterQuoteRaw);
+                            // Validate it has blocks property
+                            if (!initialContentAfterQuoteData.blocks || !Array.isArray(initialContentAfterQuoteData.blocks)) {
+                                throw new Error('Invalid EditorJS format');
+                            }
+                        } catch (e) {
+                            // If not JSON, convert to EditorJS format
+                            initialContentAfterQuoteData = {
+                                blocks: [{
+                                    type: 'paragraph',
+                                    data: {
+                                        text: blogContentAfterQuoteRaw
+                                    }
+                                }]
+                            };
+                        }
+                    } else if (typeof blogContentAfterQuoteRaw === 'object' && blogContentAfterQuoteRaw !== null) {
+                        // Already an object, check if it's valid EditorJS format
+                        if (blogContentAfterQuoteRaw.blocks && Array.isArray(blogContentAfterQuoteRaw.blocks)) {
+                            initialContentAfterQuoteData = blogContentAfterQuoteRaw;
+                        } else {
+                            // Convert object to EditorJS format
+                            initialContentAfterQuoteData = {
+                                blocks: [{
+                                    type: 'paragraph',
+                                    data: {
+                                        text: JSON.stringify(blogContentAfterQuoteRaw)
+                                    }
+                                }]
+                            };
+                        }
+                    }
+                }
+            <% } %>
+        } catch (error) {
+            console.error('Error parsing contentAfterQuote:', error);
+        }
+
+        // Build tools object, only including plugins that are loaded
+        const tools = {
+            header: {
+                class: Header,
+                config: {
+                    levels: [2, 3, 4],
+                    defaultLevel: 2
+                }
+            },
+            paragraph: {
+                class: Paragraph,
+                inlineToolbar: true
+            },
+            list: {
+                class: List,
+                inlineToolbar: true,
+                config: {
+                    defaultStyle: 'unordered'
+                }
+            },
+            image: {
+                class: Image,
+                config: {
+                    endpoints: {
+                        byFile: '/admin/upload/image?imageType=blog'
+                    }
+                }
+            },
+            quote: {
+                class: Quote,
+                inlineToolbar: true,
+                shortcut: 'CMD+SHIFT+O',
+                config: {
+                    quotePlaceholder: 'Enter a quote',
+                    captionPlaceholder: 'Quote\'s author'
+                }
+            },
+            marker: {
+                class: Marker,
+                shortcut: 'CMD+SHIFT+M'
+            },
+            embed: {
+                class: Embed,
+                config: {
+                    services: {
+                        youtube: true,
+                        vimeo: true
+                    }
+                }
+            }
+        };
+
+        // Add optional plugins if they're loaded
+        if (typeof Code !== 'undefined') {
+            tools.code = {
+                class: Code,
+                config: {
+                    placeholder: 'Enter code'
+                }
+            };
+        }
+        if (typeof Delimiter !== 'undefined') {
+            tools.delimiter = Delimiter;
+        }
+        if (typeof Table !== 'undefined') {
+            tools.table = {
+                class: Table,
+                inlineToolbar: true,
+                config: {
+                    rows: 2,
+                    cols: 2
+                }
+            };
+        }
+        if (typeof Checklist !== 'undefined') {
+            tools.checklist = {
+                class: Checklist,
+                inlineToolbar: true
+            };
+        }
+        if (typeof InlineCode !== 'undefined') {
+            tools.inlineCode = {
+                class: InlineCode,
+                shortcut: 'CMD+SHIFT+I'
+            };
+        }
+        if (typeof Underline !== 'undefined') {
+            tools.underline = Underline;
+        }
+
+        // Initialize EditorJS for Content
+        let contentEditor = null;
+        try {
+            contentEditor = new EditorJS({
+                holder: 'editorjs-content',
+                placeholder: 'Write your blog content here...',
+                data: initialContentData,
+                tools: tools
+            });
+            window.contentEditor = contentEditor;
+        } catch (error) {
+            console.error('Error initializing content editor:', error);
+        }
+
+        // Initialize EditorJS for Content After Quote
+        let contentAfterQuoteEditor = null;
+        try {
+            contentAfterQuoteEditor = new EditorJS({
+                holder: 'editorjs-contentAfterQuote',
+                placeholder: 'Write content after quote here...',
+                data: initialContentAfterQuoteData,
+                tools: tools
+            });
+            window.contentAfterQuoteEditor = contentAfterQuoteEditor;
+        } catch (error) {
+            console.error('Error initializing contentAfterQuote editor:', error);
+        }
+
+        // Excerpt character counter
+        const excerptInput = document.getElementById('excerpt');
+        const excerptCount = document.getElementById('excerptCount');
+
+        excerptInput.addEventListener('input', function () {
+            excerptCount.textContent = this.value.length;
+        });
+
+        // Image upload handler
+        document.querySelectorAll('.btn-upload-image').forEach(button => {
+            button.addEventListener('click', function () {
+                const targetInput = this.dataset.targetInput;
+                const imageType = this.dataset.imageType;
+                openImageUploader(targetInput, imageType);
+            });
+        });
+
+        function openImageUploader(targetInput, imageType) {
+            const fileInput = document.createElement('input');
+            fileInput.type = 'file';
+            fileInput.accept = 'image/*';
+            fileInput.style.display = 'none';
+            document.body.appendChild(fileInput);
+
+            fileInput.onchange = async function (e) {
+                const file = e.target.files[0];
+                if (!file) return;
+
+                try {
+                    const formData = new FormData();
+                    formData.append('image', file);
+
+                    const uploadBtn = document.querySelector(`[data-target-input="${targetInput}"]`);
+                    const originalBtnHtml = uploadBtn ? uploadBtn.innerHTML : 'Upload';
+                    if (uploadBtn) {
+                        uploadBtn.disabled = true;
+                        uploadBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Uploading...';
+                    }
+
+                    const response = await fetch(`/admin/upload/image?imageType=${imageType}`, {
+                        method: 'POST',
+                        body: formData
+                    });
+
+                    if (!response.ok) {
+                        throw new Error('Upload failed');
+                    }
+
+                    const result = await response.json();
+
+                    if (!result.success) {
+                        throw new Error(result.error || 'Upload failed');
+                    }
+
+                    // Update input value
+                    let input = document.getElementById(targetInput);
+                    if (!input) {
+                        const uploadBtn = document.querySelector(`[data-target-input="${targetInput}"]`);
+                        if (uploadBtn) {
+                            const inputGroup = uploadBtn.closest('.input-group');
+                            if (inputGroup) {
+                                input = inputGroup.querySelector('input[type="text"]');
+                            }
+                        }
+                    }
+
+                    if (input && input.tagName === 'INPUT') {
+                        input.value = result.path;
+
+                        // Show preview
+                        if (targetInput === 'featuredImageUrl') {
+                            const preview = document.getElementById('featuredImagePreview');
+                            const previewUrl = (result.path && (result.path.startsWith('http://') || result.path.startsWith('https://')))
+                                ? result.path
+                                : (window.location.origin + result.path);
+                            preview.innerHTML = `
+                                <img src="${previewUrl}" class="img-thumbnail" 
+                                  style="max-width: 300px; max-height: 200px; object-fit: cover;" 
+                                  alt="Featured image preview">
+                            `;
+                        } else if (targetInput.startsWith('galleryImages_')) {
+                            const index = targetInput.split('_')[1];
+                            const preview = document.getElementById(`galleryPreview_${index}`);
+                            if (preview) {
+                                const previewUrl = (result.path && (result.path.startsWith('http://') || result.path.startsWith('https://')))
+                                    ? result.path
+                                    : (window.location.origin + result.path);
+                                preview.innerHTML = `
+                                    <img src="${previewUrl}" class="img-thumbnail" 
+                                      style="max-width: 200px; max-height: 150px; object-fit: cover;" 
+                                      alt="Gallery image preview">
+                                `;
+                            }
+                        }
+                    } else {
+                        console.error('Could not find input for:', targetInput);
+                    }
+
+                    if (uploadBtn) {
+                        uploadBtn.disabled = false;
+                        uploadBtn.innerHTML = originalBtnHtml;
+                    }
+
+                } catch (error) {
+                    console.error('Upload error:', error);
+                    alert('Failed to upload image: ' + error.message);
+
+                    const uploadBtn = document.querySelector(`[data-target-input="${targetInput}"]`);
+                    if (uploadBtn) {
+                        uploadBtn.disabled = false;
+                        uploadBtn.innerHTML = uploadBtn.innerHTML.replace('Uploading...', 'Upload');
+                    }
+                } finally {
+                    document.body.removeChild(fileInput);
+                }
+            };
+
+            fileInput.click();
+        }
+
+        // Form submission handler
+        const form = document.getElementById('blogForm');
+        form.addEventListener('submit', async function (e) {
+            e.preventDefault();
+
+            const submitBtn = form.querySelector('button[type="submit"]');
+            const originalBtnHtml = submitBtn.innerHTML;
+            submitBtn.disabled = true;
+            submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Updating...';
+
+            try {
+                // Save content from EditorJS
+                if (contentEditor) {
+                    const contentData = await contentEditor.save();
+                    document.getElementById('content').value = JSON.stringify(contentData);
+                }
+
+                // Save contentAfterQuote from EditorJS
+                if (contentAfterQuoteEditor) {
+                    const contentAfterQuoteData = await contentAfterQuoteEditor.save();
+                    document.getElementById('contentAfterQuote').value = JSON.stringify(contentAfterQuoteData);
+                }
+
+                // Validate gallery images (must have exactly 2)
+                const galleryInputs = document.querySelectorAll('input[name="galleryImages[]"]');
+                let filledCount = 0;
+                galleryInputs.forEach(input => {
+                    if (input.value.trim()) {
+                        filledCount++;
+                    }
+                });
+
+                if (filledCount < 2) {
+                    alert('Please upload exactly 2 gallery images.');
+                    submitBtn.disabled = false;
+                    submitBtn.innerHTML = originalBtnHtml;
+                    return;
+                }
+
+                form.submit();
+            } catch (error) {
+                console.error('Save error:', error);
+                alert('Error saving content: ' + error.message);
+                submitBtn.disabled = false;
+                submitBtn.innerHTML = originalBtnHtml;
+            }
+        });
+
+        // Add Category functionality
+        const addCategoryBtn = document.getElementById('addCategoryBtn');
+        const newCategoryInput = document.getElementById('newCategoryInput');
+        const categoriesContainer = document.getElementById('categoriesContainer');
+
+        addCategoryBtn.addEventListener('click', async function () {
+            const categoryName = newCategoryInput.value.trim();
+            if (!categoryName) {
+                alert('Please enter a category name');
+                return;
+            }
+
+            const btnHtml = addCategoryBtn.innerHTML;
+            addCategoryBtn.disabled = true;
+            addCategoryBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Adding...';
+
+            try {
+                const response = await fetch('/admin/blog/categories/quick-create', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({ name: categoryName })
+                });
+
+                const result = await response.json();
+
+                if (result.success) {
+                    // Check if checkbox already exists
+                    const existingCheckbox = document.querySelector(`input[name="category"][value="${result.data.name}"]`);
+                    if (!existingCheckbox) {
+                        // Add new checkbox with delete button
+                        const newItem = document.createElement('div');
+                        newItem.className = 'form-check d-flex align-items-center justify-content-between mb-2';
+                        newItem.setAttribute('data-category-id', result.data._id);
+                        newItem.innerHTML = `
+                            <div class="d-flex align-items-center">
+                                <input class="form-check-input" type="checkbox"
+                                    name="category" value="${result.data.name}"
+                                    id="category_${result.data._id}" checked>
+                                <label class="form-check-label ms-2" for="category_${result.data._id}">
+                                    ${result.data.name}
+                                </label>
+                            </div>
+                            <button type="button" class="btn btn-sm btn-outline-danger delete-category-btn" 
+                                data-category-id="${result.data._id}"
+                                data-category-name="${result.data.name}"
+                                title="Delete category">
+                                <i class="fas fa-trash"></i>
+                            </button>
+                        `;
+                        categoriesContainer.appendChild(newItem);
+                    } else {
+                        // Just check it if it exists
+                        existingCheckbox.checked = true;
+                    }
+                    newCategoryInput.value = '';
+                } else {
+                    alert(result.message || 'Error creating category');
+                }
+            } catch (error) {
+                console.error('Error creating category:', error);
+                alert('Error creating category: ' + error.message);
+            } finally {
+                addCategoryBtn.disabled = false;
+                addCategoryBtn.innerHTML = btnHtml;
+            }
+        });
+
+        // Allow Enter key to add category
+        newCategoryInput.addEventListener('keypress', function (e) {
+            if (e.key === 'Enter') {
+                e.preventDefault();
+                addCategoryBtn.click();
+            }
+        });
+
+        // Add Tag functionality
+        const addTagBtn = document.getElementById('addTagBtn');
+        const newTagInput = document.getElementById('newTagInput');
+        const tagsContainer = document.getElementById('tagsContainer');
+
+        addTagBtn.addEventListener('click', async function () {
+            const tagName = newTagInput.value.trim();
+            if (!tagName) {
+                alert('Please enter a tag name');
+                return;
+            }
+
+            const btnHtml = addTagBtn.innerHTML;
+            addTagBtn.disabled = true;
+            addTagBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Adding...';
+
+            try {
+                const response = await fetch('/admin/blog/tags/quick-create', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({ name: tagName })
+                });
+
+                const result = await response.json();
+
+                if (result.success) {
+                    // Check if checkbox already exists
+                    const existingCheckbox = document.querySelector(`input[name="tags"][value="${result.data.name}"]`);
+                    if (!existingCheckbox) {
+                        // Add new checkbox with delete button
+                        const newItem = document.createElement('div');
+                        newItem.className = 'form-check d-flex align-items-center justify-content-between mb-2';
+                        newItem.setAttribute('data-tag-id', result.data._id);
+                        newItem.innerHTML = `
+                            <div class="d-flex align-items-center">
+                                <input class="form-check-input" type="checkbox" name="tags"
+                                    value="${result.data.name}" id="tag_${result.data._id}" checked>
+                                <label class="form-check-label ms-2" for="tag_${result.data._id}">
+                                    ${result.data.name}
+                                </label>
+                            </div>
+                            <button type="button" class="btn btn-sm btn-outline-danger delete-tag-btn" 
+                                data-tag-id="${result.data._id}"
+                                data-tag-name="${result.data.name}"
+                                title="Delete tag">
+                                <i class="fas fa-trash"></i>
+                            </button>
+                        `;
+                        tagsContainer.appendChild(newItem);
+                    } else {
+                        // Just check it if it exists
+                        existingCheckbox.checked = true;
+                    }
+                    newTagInput.value = '';
+                } else {
+                    alert(result.message || 'Error creating tag');
+                }
+            } catch (error) {
+                console.error('Error creating tag:', error);
+                alert('Error creating tag: ' + error.message);
+            } finally {
+                addTagBtn.disabled = false;
+                addTagBtn.innerHTML = btnHtml;
+            }
+        });
+
+        // Allow Enter key to add tag
+        newTagInput.addEventListener('keypress', function (e) {
+            if (e.key === 'Enter') {
+                e.preventDefault();
+                addTagBtn.click();
+            }
+        });
+
+    });
+</script>
+
+<!-- Delete Category Confirmation Modal -->
+<div class="modal fade" id="deleteCategoryModal" tabindex="-1" aria-labelledby="deleteCategoryModalLabel"
+    aria-hidden="true" data-bs-backdrop="true" data-bs-keyboard="true">
+    <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-content">
+            <div class="modal-header bg-danger text-white">
+                <h5 class="modal-title" id="deleteCategoryModalLabel">
+                    <i class="fas fa-trash me-2"></i>Confirm Delete Category
+                </h5>
+                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
+                    aria-label="Close"></button>
+            </div>
+            <div class="modal-body">
+                <p>Are you sure you want to delete the category "<span id="deleteCategoryName" class="fw-bold"></span>"?
+                </p>
+                <p class="text-danger mb-0">
+                    <small>
+                        <i class="fas fa-exclamation-triangle me-1"></i>This action cannot be undone.</small>
+                </p>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
+                <button type="button" class="btn btn-danger" id="confirmDeleteCategoryBtn">
+                    <i class="fas fa-trash me-1"></i>Delete
+                </button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Delete Tag Confirmation Modal -->
+<div class="modal fade" id="deleteTagModal" tabindex="-1" aria-labelledby="deleteTagModalLabel" aria-hidden="true"
+    data-bs-backdrop="false" data-bs-keyboard="true">
+    <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-content">
+            <div class="modal-header bg-danger text-white">
+                <h5 class="modal-title" id="deleteTagModalLabel">
+                    <i class="fas fa-trash me-2"></i>Confirm Delete Tag
+                </h5>
+                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
+                    aria-label="Close"></button>
+            </div>
+            <div class="modal-body">
+                <p>Are you sure you want to delete the tag "<span id="deleteTagName" class="fw-bold"></span>"?</p>
+                <p class="text-danger mb-0">
+                    <small>
+                        <i class="fas fa-exclamation-triangle me-1"></i>This action cannot be undone.</small>
+                </p>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
+                <button type="button" class="btn btn-danger" id="confirmDeleteTagBtn">
+                    <i class="fas fa-trash me-1"></i>Delete
+                </button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<style>
+    /* Fix modal z-index */
+    #deleteCategoryModal,
+    #deleteTagModal {
+        z-index: 2050 !important;
+    }
+
+    #deleteCategoryModal .modal-content,
+    #deleteTagModal .modal-content {
+        z-index: 2070 !important;
+        position: relative;
+    }
+
+    #deleteCategoryModal.show,
+    #deleteTagModal.show {
+        display: block !important;
+    }
+</style>
+
+<script>
+    document.addEventListener('DOMContentLoaded', function () {
+        // Initialize Category Delete Modal
+        const deleteCategoryModalElement = document.getElementById('deleteCategoryModal');
+        const deleteCategoryModal = new bootstrap.Modal(deleteCategoryModalElement, {
+            backdrop: false,
+            keyboard: true,
+            focus: true
+        });
+
+        let currentCategoryId = null;
+        let currentCategoryBtn = null;
+
+        // Handle category delete buttons
+        document.addEventListener('click', function (e) {
+            if (e.target.closest('.delete-category-btn')) {
+                e.preventDefault();
+                const btn = e.target.closest('.delete-category-btn');
+                currentCategoryId = btn.dataset.categoryId;
+                const categoryName = btn.dataset.categoryName;
+                currentCategoryBtn = btn;
+
+                // Set category name in modal
+                document.getElementById('deleteCategoryName').textContent = categoryName;
+
+                // Show modal
+                deleteCategoryModal.show();
+            }
+        });
+
+        // Handle confirm delete category
+        document.getElementById('confirmDeleteCategoryBtn').addEventListener('click', async function () {
+            if (!currentCategoryId || !currentCategoryBtn) return;
+
+            const btn = currentCategoryBtn;
+            const btnHtml = btn.innerHTML;
+            btn.disabled = true;
+            btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
+
+            try {
+                const response = await fetch(`/admin/blog/categories/${currentCategoryId}/delete`, {
+                    method: 'POST',
+                    headers: {
+                        'Accept': 'application/json',
+                        'Content-Type': 'application/json',
+                    }
+                });
+
+                const contentType = response.headers.get('content-type');
+                if (contentType && contentType.includes('application/json')) {
+                    const result = await response.json();
+                    if (result.success) {
+                        // Close modal
+                        deleteCategoryModal.hide();
+                        // Remove the category from the list
+                        const categoryItem = btn.closest('[data-category-id]');
+                        if (categoryItem) {
+                            categoryItem.remove();
+                        }
+                    } else {
+                        alert(result.message || 'Error deleting category');
+                        btn.disabled = false;
+                        btn.innerHTML = btnHtml;
+                    }
+                } else {
+                    // If response is not JSON, assume success (redirect response)
+                    deleteCategoryModal.hide();
+                    const categoryItem = btn.closest('[data-category-id]');
+                    if (categoryItem) {
+                        categoryItem.remove();
+                    }
+                }
+            } catch (error) {
+                console.error('Error deleting category:', error);
+                alert('Error deleting category: ' + error.message);
+                btn.disabled = false;
+                btn.innerHTML = btnHtml;
+            } finally {
+                currentCategoryId = null;
+                currentCategoryBtn = null;
+            }
+        });
+
+        // Initialize Tag Delete Modal
+        const deleteTagModalElement = document.getElementById('deleteTagModal');
+        const deleteTagModal = new bootstrap.Modal(deleteTagModalElement, {
+            backdrop: false,
+            keyboard: true,
+            focus: true
+        });
+
+        let currentTagId = null;
+        let currentTagBtn = null;
+
+        // Handle tag delete buttons
+        document.addEventListener('click', function (e) {
+            if (e.target.closest('.delete-tag-btn')) {
+                e.preventDefault();
+                const btn = e.target.closest('.delete-tag-btn');
+                currentTagId = btn.dataset.tagId;
+                const tagName = btn.dataset.tagName;
+                currentTagBtn = btn;
+
+                // Set tag name in modal
+                document.getElementById('deleteTagName').textContent = tagName;
+
+                // Show modal
+                deleteTagModal.show();
+            }
+        });
+
+        // Handle confirm delete tag
+        document.getElementById('confirmDeleteTagBtn').addEventListener('click', async function () {
+            if (!currentTagId || !currentTagBtn) return;
+
+            const btn = currentTagBtn;
+            const btnHtml = btn.innerHTML;
+            btn.disabled = true;
+            btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
+
+            try {
+                const response = await fetch(`/admin/blog/tags/${currentTagId}/delete`, {
+                    method: 'POST',
+                    headers: {
+                        'Accept': 'application/json',
+                        'Content-Type': 'application/json',
+                    }
+                });
+
+                const contentType = response.headers.get('content-type');
+                if (contentType && contentType.includes('application/json')) {
+                    const result = await response.json();
+                    if (result.success) {
+                        // Close modal
+                        deleteTagModal.hide();
+                        // Remove the tag from the list
+                        const tagItem = btn.closest('[data-tag-id]');
+                        if (tagItem) {
+                            tagItem.remove();
+                        }
+                    } else {
+                        alert(result.message || 'Error deleting tag');
+                        btn.disabled = false;
+                        btn.innerHTML = btnHtml;
+                    }
+                } else {
+                    // If response is not JSON, assume success (redirect response)
+                    deleteTagModal.hide();
+                    const tagItem = btn.closest('[data-tag-id]');
+                    if (tagItem) {
+                        tagItem.remove();
+                    }
+                }
+            } catch (error) {
+                console.error('Error deleting tag:', error);
+                alert('Error deleting tag: ' + error.message);
+                btn.disabled = false;
+                btn.innerHTML = btnHtml;
+            } finally {
+                currentTagId = null;
+                currentTagBtn = null;
+            }
+        });
+    });
+</script>
\ No newline at end of file
diff --git a/views/admin/blog/index.ejs b/views/admin/blog/index.ejs
new file mode 100644
index 0000000..68adadb
--- /dev/null
+++ b/views/admin/blog/index.ejs
@@ -0,0 +1,300 @@
+<div class="container">
+    <div class="d-flex justify-content-between align-items-center mt-4 mb-4">
+        <div>
+            <h1 class="h3 mb-0" style="color: var(--primary-dark);">
+                <%= title %>
+            </h1>
+            <p class="text-muted mb-0">Manage blog posts and articles</p>
+        </div>
+        <div class="d-flex gap-2">
+            <% if (typeof frontendUrl !=='undefined' ) { %>
+                <a href="<%= frontendUrl %>/blog" class="btn btn-outline-primary" target="_blank">
+                    <i class="fas fa-external-link-alt me-2"></i>View Blog Page
+                </a>
+                <% } %>
+                    <a href="/admin/blog/create" class="btn btn-primary">
+                        <i class="fas fa-plus me-2"></i>Create New Post
+                    </a>
+        </div>
+    </div>
+
+    <!-- Filters -->
+    <div class="card border-0 shadow-sm mb-4">
+        <div class="card-body">
+            <form method="GET" action="/admin/blog" class="row g-3">
+                <div class="col-md-3">
+                    <label class="form-label">Search</label>
+                    <input type="text" class="form-control" name="search" value="<%= query.search || '' %>"
+                        placeholder="Search title or excerpt...">
+                </div>
+                <div class="col-md-2">
+                    <label class="form-label">Status</label>
+                    <select class="form-select" name="status">
+                        <option value="">All</option>
+                        <option value="published" <%=query.status==='published' ? 'selected' : '' %>>Published</option>
+                        <option value="draft" <%=query.status==='draft' ? 'selected' : '' %>>Draft</option>
+                    </select>
+                </div>
+                <div class="col-md-3">
+                    <label class="form-label">Category</label>
+                    <select class="form-select" name="category">
+                        <option value="">All Categories</option>
+                        <% categories.forEach(cat=> { %>
+                            <option value="<%= cat.name %>" <%=query.category===cat.name ? 'selected' : '' %>>
+                                <%= cat.name %>
+                            </option>
+                            <% }); %>
+                    </select>
+                </div>
+                <div class="col-md-2">
+                    <label class="form-label">&nbsp;</label>
+                    <button type="submit" class="btn btn-primary w-100">
+                        <i class="fas fa-search me-1"></i>Filter
+                    </button>
+                </div>
+                <div class="col-md-2">
+                    <label class="form-label">&nbsp;</label>
+                    <a href="/admin/blog" class="btn btn-outline-secondary w-100">
+                        <i class="fas fa-times me-1"></i>Clear
+                    </a>
+                </div>
+            </form>
+        </div>
+    </div>
+
+    <!-- Blog List -->
+    <div class="card border-0 shadow-sm">
+        <div class="card-body p-4">
+            <% if (blogs && blogs.length> 0) { %>
+                <div class="table-responsive">
+                    <table class="table table-hover align-middle">
+                        <thead>
+                            <tr>
+                                <th scope="col" style="width: 60px">Image</th>
+                                <th scope="col">Title</th>
+                                <th scope="col">Category</th>
+                                <th scope="col">Status</th>
+                                <th scope="col">Author</th>
+                                <th scope="col">Published</th>
+                                <th scope="col" style="width: 200px">Actions</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <% blogs.forEach((blog, index)=> { %>
+                                <tr>
+                                    <td>
+                                        <% if (blog.featuredImage) { %>
+                                            <img src="<%= blog.featuredImage.startsWith('http') ? blog.featuredImage : (typeof frontendUrl !== 'undefined' ? frontendUrl : '') + blog.featuredImage %>"
+                                                alt="<%= blog.title %>" class="img-thumbnail"
+                                                style="width: 50px; height: 50px; object-fit: cover;">
+                                            <% } else { %>
+                                                <div class="bg-light d-flex align-items-center justify-content-center"
+                                                    style="width: 50px; height: 50px;">
+                                                    <i class="fas fa-image text-muted"></i>
+                                                </div>
+                                                <% } %>
+                                    </td>
+                                    <td>
+                                        <div>
+                                            <span class="fw-medium">
+                                                <%= blog.title %>
+                                            </span>
+                                            <% if (blog.isFeatured) { %>
+                                                <span class="badge bg-warning text-dark ms-2">Featured</span>
+                                                <% } %>
+                                        </div>
+                                        <small class="text-muted">
+                                            <%= blog.excerpt.substring(0, 60) %>...
+                                        </small>
+                                    </td>
+                                    <td>
+                                        <% if (blog.category && blog.category.length> 0) { %>
+                                            <% blog.category.slice(0, 2).forEach(cat=> { %>
+                                                <span class="badge bg-secondary me-1">
+                                                    <%= cat %>
+                                                </span>
+                                                <% }); %>
+                                                    <% if (blog.category.length> 2) { %>
+                                                        <span class="text-muted">+<%= blog.category.length - 2 %></span>
+                                                        <% } %>
+                                                            <% } else { %>
+                                                                <span class="text-muted">-</span>
+                                                                <% } %>
+                                    </td>
+                                    <td>
+                                        <% if (blog.status==='published' ) { %>
+                                            <span class="badge bg-success">Published</span>
+                                            <% } else { %>
+                                                <span class="badge bg-secondary">Draft</span>
+                                                <% } %>
+                                    </td>
+                                    <td>
+                                        <%= blog.author || 'Admin' %>
+                                    </td>
+                                    <td>
+                                        <%= blog.publishedAt || '-' %>
+                                    </td>
+                                    <td>
+                                        <div class="btn-group" role="group">
+                                            <% if (typeof frontendUrl !=='undefined' ) { %>
+                                                <a href="<%= frontendUrl %>/blog/<%= blog.slug %>" target="_blank"
+                                                    class="btn btn-sm btn-outline-secondary">
+                                                    <i class="fas fa-external-link-alt me-1"></i>View
+                                                </a>
+                                                <% } %>
+                                                    <a href="/admin/blog/<%= blog._id %>/edit"
+                                                        class="btn btn-sm btn-outline-primary">
+                                                        <i class="fas fa-edit me-1"></i>Edit
+                                                    </a>
+                                                    <button type="button" class="btn btn-sm btn-outline-danger"
+                                                        data-custom-modal="open" data-id="<%= blog._id %>"
+                                                        data-title="<%= blog.title %>">
+                                                        <i class="fas fa-trash-alt me-1"></i>Delete
+                                                    </button>
+                                        </div>
+                                    </td>
+                                </tr>
+                                <% }); %>
+                        </tbody>
+                    </table>
+                </div>
+
+                <!-- Pagination -->
+                <% if (pagination && pagination.total> 1) { %>
+                    <nav aria-label="Blog pagination" class="mt-4">
+                        <ul class="pagination justify-content-center">
+                            <% if (pagination.current> 1) { %>
+                                <li class="page-item">
+                                    <a class="page-link"
+                                        href="?page=<%= pagination.current - 1 %><%= query.search ? '&search=' + query.search : '' %><%= query.status ? '&status=' + query.status : '' %><%= query.category ? '&category=' + query.category : '' %>">Previous</a>
+                                </li>
+                                <% } %>
+
+                                    <% for (let i=1; i <=pagination.total; i++) { %>
+                                        <% if (i===pagination.current) { %>
+                                            <li class="page-item active">
+                                                <span class="page-link">
+                                                    <%= i %>
+                                                </span>
+                                            </li>
+                                            <% } else if (i===1 || i===pagination.total || (i>= pagination.current - 2
+                                                && i <= pagination.current + 2)) { %>
+                                                    <li class="page-item">
+                                                        <a class="page-link"
+                                                            href="?page=<%= i %><%= query.search ? '&search=' + query.search : '' %><%= query.status ? '&status=' + query.status : '' %><%= query.category ? '&category=' + query.category : '' %>">
+                                                            <%= i %>
+                                                        </a>
+                                                    </li>
+                                                    <% } else if (i===pagination.current - 3 || i===pagination.current +
+                                                        3) { %>
+                                                        <li class="page-item disabled">
+                                                            <span class="page-link">...</span>
+                                                        </li>
+                                                        <% } %>
+                                                            <% } %>
+
+                                                                <% if (pagination.current < pagination.total) { %>
+                                                                    <li class="page-item">
+                                                                        <a class="page-link"
+                                                                            href="?page=<%= pagination.current + 1 %><%= query.search ? '&search=' + query.search : '' %><%= query.status ? '&status=' + query.status : '' %><%= query.category ? '&category=' + query.category : '' %>">Next</a>
+                                                                    </li>
+                                                                    <% } %>
+                        </ul>
+                    </nav>
+                    <% } %>
+                        <% } else { %>
+                            <div class="text-center py-5">
+                                <i class="fas fa-blog text-muted mb-3" style="font-size: 3rem;"></i>
+                                <h5 class="text-muted mb-3">No Blog Posts Found</h5>
+                                <a href="/admin/blog/create" class="btn btn-primary">
+                                    <i class="fas fa-plus-circle me-1"></i>Create First Blog Post
+                                </a>
+                            </div>
+                            <% } %>
+        </div>
+    </div>
+</div>
+
+<!-- Delete Blog Confirmation Modal -->
+<div class="modal fade" id="deleteBlogModal" tabindex="-1" aria-labelledby="deleteBlogModalLabel" aria-hidden="true"
+    data-bs-backdrop="true" data-bs-keyboard="true">
+    <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-content">
+            <div class="modal-header bg-danger text-white">
+                <h5 class="modal-title" id="deleteBlogModalLabel">
+                    <i class="fas fa-trash me-2"></i>Confirm Delete
+                </h5>
+                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
+                    aria-label="Close"></button>
+            </div>
+            <div class="modal-body">
+                <p>Are you sure you want to delete the blog post "<span id="deleteBlogTitle" class="fw-bold"></span>"?
+                </p>
+                <p class="text-danger mb-0">
+                    <small>
+                        <i class="fas fa-exclamation-triangle me-1"></i>This action cannot be
+                        undone.</small>
+                </p>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
+                <form id="deleteBlogForm" method="POST" style="display: inline;">
+                    <button type="submit" class="btn btn-danger">
+                        <i class="fas fa-trash me-1"></i>Delete
+                    </button>
+                </form>
+            </div>
+        </div>
+    </div>
+</div>
+
+<style>
+    /* Fix modal z-index - must be higher than everything else */
+    #deleteBlogModal {
+        z-index: 2050 !important;
+    }
+
+    #deleteBlogModal .modal-dialog {
+        z-index: 2060 !important;
+        position: relative;
+    }
+
+    #deleteBlogModal .modal-content {
+        z-index: 2070 !important;
+        position: relative;
+    }
+
+    /* Ensure modal is clickable */
+    #deleteBlogModal.show {
+        display: block !important;
+    }
+</style>
+
+<script>
+    document.addEventListener('DOMContentLoaded', function () { // Initialize modal instance once
+        const deleteModalElement = document.getElementById('deleteBlogModal');
+        const deleteModal = new bootstrap.Modal(deleteModalElement, {
+            backdrop: false,
+            keyboard: true,
+            focus: true
+        });
+
+        // Handle delete buttons
+        document.querySelectorAll('[data-custom-modal="open"]').forEach(button => {
+            button.addEventListener('click', function (e) {
+                e.preventDefault();
+                const blogId = this.getAttribute('data-id');
+                const blogTitle = this.getAttribute('data-title');
+
+                // Set blog title in modal
+                document.getElementById('deleteBlogTitle').textContent = blogTitle;
+
+                // Set form action
+                document.getElementById('deleteBlogForm').action = `/admin/blog/${blogId}/delete`;
+
+                // Show Bootstrap modal
+                deleteModal.show();
+            });
+        });
+    });
+</script>
\ No newline at end of file
diff --git a/views/layouts/admin.ejs b/views/layouts/admin.ejs
index 01eca05..7d7e49d 100644
--- a/views/layouts/admin.ejs
+++ b/views/layouts/admin.ejs
@@ -85,7 +85,6 @@
               <a class="nav-link" href="/admin/camp-location">Camp Location</a>
             </li>
             <li class="nav-item">
-
             <li class="nav-item">
               <a class="nav-link" href="/admin/form">Form</a>
             </li>
diff --git a/views/layouts/main.ejs b/views/layouts/main.ejs
index e9857b1..6111b28 100644
--- a/views/layouts/main.ejs
+++ b/views/layouts/main.ejs
@@ -777,54 +777,36 @@
               & Booking</a>
           </li>
         </ul>
+        <li>
+          <a class="dropdown-item <%= currentPath === '/admin/travel' ? 'active' : '' %>"
+            href="/admin/travel">Travel</a>
+        </li>
+        <li>
+          <a class="dropdown-item <%= currentPath === '/admin/terms-conditions' ? 'active' : '' %>"
+            href="/admin/terms-conditions">Terms & Conditions</a>
+        </li>
+        <li>
+          <a class="dropdown-item <%= currentPath === '/admin/service' ? 'active' : '' %>"
+            href="/admin/service">Service</a>
+        </li>
+
+        </ul>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link <%= currentPath === '/admin/contact' ? 'active' : '' %>" href="/admin/contact">Contact
+            Us</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link <%= currentPath === '/admin/camp-location' ? 'active' : '' %>"
+            href="/admin/camp-location">Camp Location</a>
+        </li>
+
+        <li class="nav-item">
+          <a class="nav-link <%= currentPath === '/admin/activity' ? 'active' : '' %>" href="/admin/activity">Activity &
+            Booking</a>
+        </li>
+        </ul>
 
-                <li>
-                  <a
-                    class="dropdown-item <%= currentPath === '/admin/travel' ? 'active' : '' %>"
-                    href="/admin/travel"
-                    >Travel</a
-                  >
-                </li>
-                <li>
-                  <a
-                    class="dropdown-item <%= currentPath === '/admin/terms-conditions' ? 'active' : '' %>"
-                    href="/admin/terms-conditions"
-                    >Terms & Conditions</a
-                  >
-                </li>
-                 <li>
-                  <a
-                    class="dropdown-item <%= currentPath === '/admin/service' ? 'active' : '' %>"
-                    href="/admin/service"
-                    >Service</a>
-                </li>
-                 
-              </ul>
-            </li>
-            <li class="nav-item">
-              <a
-                class="nav-link <%= currentPath === '/admin/contact' ? 'active' : '' %>"
-                href="/admin/contact"
-                >Contact Us</a
-              >
-            </li>
-            <li class="nav-item">
-              <a
-                class="nav-link <%= currentPath === '/admin/camp-location' ? 'active' : '' %>"
-                href="/admin/camp-location"
-                >Camp Location</a
-              >
-            </li>
-          
-             <li class="nav-item">
-              <a
-                class="nav-link <%= currentPath === '/admin/activity' ? 'active' : '' %>"
-                href="/admin/activity"
-                >Activity & Booking</a
-              >
-            </li>
-          </ul>
-         
         </ul>
         <div class="d-flex align-items-center">
           <% if (locals.user) { %>