diff --git a/components/ArticleList.js b/components/ArticleList.js
index e586b7ec..8291552e 100644
--- a/components/ArticleList.js
+++ b/components/ArticleList.js
@@ -2,37 +2,39 @@ import Link from '@/components/Link'
 import ArticleThumbnail from './ArticleThumbnail'
 
 const ArticleList = ({ slug, title, summary, tags, image }) => {
+  const visibleTags = (tags || []).slice(0, 3)
+
   return (
     <div className="group h-full">
-      <Link href={`/blog/${slug}`}>
-        <div className="relative flex h-full flex-col overflow-hidden rounded-2xl bg-white shadow-lg transition-all hover:-translate-y-2 hover:shadow-2xl dark:bg-gray-800">
-          <div className="relative overflow-hidden rounded-t-2xl pb-60">
+      <Link href={`/blog/${slug}`} className="block h-full">
+        <article className="surface-panel relative flex h-full flex-col overflow-hidden transition-all duration-300 hover:-translate-y-1">
+          <div className="relative overflow-hidden rounded-t-2xl pb-[58%]">
             <ArticleThumbnail slug={slug} title={title} image={image} />
-            <div className="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent opacity-0 transition-opacity group-hover:opacity-100"></div>
+            <div className="from-slate-950/30 absolute inset-0 bg-gradient-to-t to-transparent opacity-0 transition-opacity group-hover:opacity-100" />
           </div>
 
-          <div className="flex flex-1 flex-col p-6">
+          <div className="flex flex-1 flex-col p-5 sm:p-6">
             <div className="mb-4 flex flex-wrap gap-2">
-              {tags.slice(0, 3).map((tag) => (
+              {visibleTags.map((tag) => (
                 <span
                   key={tag}
-                  className="text-xs inline-block rounded-full bg-orange-100 px-3 py-1 font-medium text-orange-800 dark:bg-orange-900/30 dark:text-orange-300"
+                  className="text-xs inline-flex items-center rounded-full border border-orange-200 bg-orange-50 px-2.5 py-1 font-medium text-orange-700 dark:border-orange-700/60 dark:bg-orange-900/30 dark:text-orange-300"
                 >
                   {tag}
                 </span>
               ))}
             </div>
 
-            <h2 className="mb-3 text-xl font-bold text-gray-900 transition-colors group-hover:text-orange-600 dark:text-white dark:group-hover:text-orange-400">
+            <h2 className="mb-3 text-xl font-bold leading-tight text-slate-900 transition-colors group-hover:text-orange-600 dark:text-slate-100 dark:group-hover:text-orange-300">
               {title}
             </h2>
 
-            <p className="line-clamp-3 flex-1 leading-relaxed text-gray-600 dark:text-gray-300">
+            <p className="line-clamp-3 flex-1 text-sm leading-7 text-slate-600 dark:text-slate-300">
               {summary}
             </p>
 
-            <div className="mt-4 flex items-center font-medium text-orange-500 group-hover:text-orange-600 dark:text-orange-400 dark:group-hover:text-orange-300">
-              <span className="text-sm">Đọc thêm</span>
+            <div className="mt-5 inline-flex items-center text-sm font-semibold text-orange-600 dark:text-orange-300">
+              Đọc thêm
               <svg
                 className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1"
                 fill="none"
@@ -48,7 +50,7 @@ const ArticleList = ({ slug, title, summary, tags, image }) => {
               </svg>
             </div>
           </div>
-        </div>
+        </article>
       </Link>
     </div>
   )
diff --git a/components/ArticleThumbnail.js b/components/ArticleThumbnail.js
index 8d0d9e64..dd54c19a 100644
--- a/components/ArticleThumbnail.js
+++ b/components/ArticleThumbnail.js
@@ -1,12 +1,13 @@
-import Link from '@/components/Link'
 import Image from 'next/image'
 
-const ArticleThumbnail = ({ slug, title, image }) => {
+const ArticleThumbnail = ({ title, image }) => {
+  const thumbnail = image || '/static/images/default-ogp.png'
+
   return (
     <Image
       alt={title}
       className="absolute inset-0 h-full w-full transform object-cover opacity-90 transition duration-700 group-hover:opacity-100 dark:opacity-80"
-      src={image}
+      src={thumbnail}
       layout="fill"
       decoding="async"
       sizes="50vw"
diff --git a/components/BottomNav.js b/components/BottomNav.js
index ee0c618a..c8c335cb 100644
--- a/components/BottomNav.js
+++ b/components/BottomNav.js
@@ -6,38 +6,32 @@ const BottomNav = () => {
   const route = `/${router.pathname.split('/')[1]}`
 
   return (
-    <div className="sm:hidden">
-      <nav className="pb-safe fixed bottom-0 z-50 w-full border-t bg-zinc-100 dark:border-zinc-800 dark:bg-zinc-900">
-        <div className="relative mx-auto flex h-16 max-w-md items-center justify-around px-6">
+    <div className="md:hidden">
+      <nav className="pb-safe fixed bottom-0 z-50 w-full border-t border-slate-200/80 bg-white/95 backdrop-blur-lg dark:border-slate-700/70 dark:bg-slate-900/95">
+        <div className="relative mx-auto flex h-16 max-w-md items-center justify-around px-5">
           {links.map(({ href, label, icon, isHighlighted }) => (
-            <Link alt={label} key={label} href={href}>
-              {isHighlighted ? (
-                <button className="relative -top-4 flex h-14 w-14 transform flex-col items-center justify-center rounded-full bg-gradient-to-r from-orange-500 to-orange-600 text-white shadow-lg transition-transform hover:scale-105">
-                  <div className="flex flex-col items-center">
-                    {icon}
-                    <span className="mt-1 text-[10px] font-medium">{label}</span>
-                  </div>
-                </button>
-              ) : (
-                <button
-                  className={`flex h-full w-full flex-col items-center justify-center space-y-1 ${
-                    route === href
-                      ? 'text-orange-500 dark:text-orange-400'
-                      : 'text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-50'
-                  }`}
-                >
-                  {icon}
-                  <span
-                    className={`text-[13px] ${
-                      route === href
-                        ? 'text-orange-500 dark:text-orange-400'
-                        : 'text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-50'
-                    }`}
-                  >
-                    {label}
-                  </span>
-                </button>
-              )}
+            <Link
+              key={label}
+              href={href}
+              aria-label={label}
+              className={
+                isHighlighted
+                  ? 'shadow-orange-500/35 relative -top-4 flex h-14 w-14 flex-col items-center justify-center rounded-full bg-gradient-to-r from-orange-500 to-orange-600 text-white shadow-lg'
+                  : `flex h-full min-w-[52px] flex-col items-center justify-center gap-1 ${
+                      (href === '/' ? router.pathname === '/' : route === href)
+                        ? 'text-orange-500 dark:text-orange-300'
+                        : 'text-slate-600 dark:text-slate-400'
+                    }`
+              }
+            >
+              {icon}
+              <span
+                className={`text-[11px] font-medium ${
+                  isHighlighted ? 'text-white' : 'tracking-wide'
+                }`}
+              >
+                {label}
+              </span>
             </Link>
           ))}
         </div>
diff --git a/components/Card.js b/components/Card.js
index b2a505f9..fe98acfa 100644
--- a/components/Card.js
+++ b/components/Card.js
@@ -1,41 +1,61 @@
 import Image from './Image'
 import Link from './Link'
 
-const Card = ({ title, description, imgSrc, href, showMore = true, isFree }) => (
-  <div className="w-full p-4 md:w-1/2">
-    <Link alt={`Link tới ${title}`} href={href} className="block h-full">
-      <div className="hover:scale-105flex flex h-full h-full flex-col flex-col overflow-hidden overflow-hidden rounded-lg rounded-lg bg-gray-100 transition duration-500 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700">
-        {imgSrc && (
-          <div>
-            <Image
-              alt={title}
-              src={imgSrc}
-              className="h-64 w-full object-cover object-center"
-              width={544}
-              height={306}
-              loading="lazy"
-            />
+const Card = ({ title, description, imgSrc, href, showMore = true, isFree }) => {
+  const badge =
+    isFree === undefined ? null : isFree ? (
+      <span className="text-xs inline-flex w-fit items-center rounded-full border border-emerald-200 bg-emerald-50 px-2.5 py-1 font-semibold tracking-wide text-emerald-700 dark:border-emerald-700/60 dark:bg-emerald-900/30 dark:text-emerald-300">
+        MIỄN PHÍ
+      </span>
+    ) : (
+      <span className="text-xs inline-flex w-fit items-center rounded-full border border-orange-200 bg-orange-50 px-2.5 py-1 font-semibold tracking-wide text-orange-700 dark:border-orange-700/60 dark:bg-orange-900/30 dark:text-orange-300">
+        PREMIUM
+      </span>
+    )
+
+  return (
+    <div className="h-full">
+      <Link alt={`Link tới ${title}`} href={href} className="group block h-full">
+        <article className="surface-panel flex h-full flex-col overflow-hidden transition-all duration-300 hover:-translate-y-1">
+          {imgSrc && (
+            <div className="aspect-[16/10] overflow-hidden border-b border-slate-200 dark:border-slate-700">
+              <Image
+                alt={title}
+                src={imgSrc}
+                className="h-full w-full object-cover object-center transition-transform duration-500 group-hover:scale-105"
+                width={544}
+                height={306}
+                loading="lazy"
+              />
+            </div>
+          )}
+
+          <div className="flex flex-1 flex-col p-5 sm:p-6">
+            {badge && <div className="mb-3">{badge}</div>}
+            <h2 className="text-xl font-bold leading-tight text-slate-900 transition-colors group-hover:text-orange-600 dark:text-slate-100 dark:group-hover:text-orange-300">
+              {title}
+            </h2>
+            <p className="mt-3 flex-1 text-sm leading-7 text-slate-600 dark:text-slate-300">
+              {description}
+            </p>
+            {showMore && (
+              <span className="mt-5 inline-flex items-center text-sm font-semibold text-orange-600 dark:text-orange-300">
+                Xem chi tiết
+                <svg className="ml-2 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M13 7l5 5m0 0l-5 5m5-5H6"
+                  />
+                </svg>
+              </span>
+            )}
           </div>
-        )}
-        <div className="flex-grow p-6">
-          <h2 className="mb-3 text-xl font-bold leading-8 tracking-tight sm:text-2xl">
-            {isFree !== undefined &&
-              (isFree ? (
-                <span className="mb-2 inline-block rounded bg-green-100 px-2.5 py-0.5 text-sm font-medium text-green-800 dark:bg-green-900 dark:text-green-300">
-                  MIỄN PHÍ
-                </span>
-              ) : (
-                <span className="mb-2 inline-block rounded px-2.5 py-0.5 text-sm font-medium text-orange-800 dark:bg-orange-900 dark:text-orange-300">
-                  💎 PREMIUM
-                </span>
-              ))}
-            <div>{title}</div>
-          </h2>
-          <p className="prose mb-3 max-w-none text-gray-500 dark:text-gray-400">{description}</p>
-        </div>
-      </div>
-    </Link>
-  </div>
-)
+        </article>
+      </Link>
+    </div>
+  )
+}
 
 export default Card
diff --git a/components/CourseRegistrationForm.js b/components/CourseRegistrationForm.js
index 5a75b56d..64f4fe96 100644
--- a/components/CourseRegistrationForm.js
+++ b/components/CourseRegistrationForm.js
@@ -3,6 +3,7 @@ import { FaUser, FaEnvelope, FaPhone, FaGraduationCap, FaSpinner, FaTag } from '
 
 export default function CourseRegistrationForm({
   courseTitle = 'AWS SAA-C03',
+  courseLabel,
   theme = 'orange',
   onSuccess,
 }) {
@@ -177,6 +178,8 @@ export default function CourseRegistrationForm({
       button:
         'bg-gradient-to-r from-orange-600 to-orange-500 hover:from-orange-700 hover:to-orange-600',
       link: 'text-orange-600',
+      courseTag:
+        'border-orange-200 bg-orange-50 text-orange-700 dark:border-orange-500/40 dark:bg-orange-500/10 dark:text-orange-200',
     },
     purple: {
       bg: 'bg-gradient-to-br from-purple-50 to-purple-100 dark:from-purple-900/10 dark:to-purple-800/10',
@@ -186,6 +189,8 @@ export default function CourseRegistrationForm({
       button:
         'bg-gradient-to-r from-purple-600 to-pink-500 hover:from-purple-700 hover:to-pink-600',
       link: 'text-purple-600',
+      courseTag:
+        'border-purple-200 bg-purple-50 text-purple-700 dark:border-purple-500/40 dark:bg-purple-500/10 dark:text-purple-200',
     },
     blue: {
       bg: 'bg-gradient-to-br from-blue-50 to-blue-100 dark:from-blue-900/10 dark:to-blue-800/10',
@@ -194,10 +199,13 @@ export default function CourseRegistrationForm({
       hover: 'hover:bg-blue-50 dark:hover:bg-blue-900/20',
       button: 'bg-gradient-to-r from-blue-600 to-blue-500 hover:from-blue-700 hover:to-blue-600',
       link: 'text-blue-600',
+      courseTag:
+        'border-blue-200 bg-blue-50 text-blue-700 dark:border-blue-500/40 dark:bg-blue-500/10 dark:text-blue-200',
     },
   }
 
-  const currentTheme = themeColors[theme]
+  const currentTheme = themeColors[theme] || themeColors.orange
+  const selectedCourseLabel = courseLabel || courseTitle
 
   return (
     <section id="registration-form" className={`py-20 ${currentTheme.bg}`}>
@@ -209,6 +217,12 @@ export default function CourseRegistrationForm({
           <p className="text-xl text-gray-600 dark:text-gray-300">
             Điền thông tin để nhận tư vấn chi tiết và ưu đãi đặc biệt
           </p>
+          <div
+            className={`mt-4 inline-flex flex-wrap items-center justify-center gap-2 rounded-full border px-4 py-2 text-sm font-semibold ${currentTheme.courseTag}`}
+          >
+            <span>Khóa đang chọn:</span>
+            <span>{selectedCourseLabel}</span>
+          </div>
         </div>
 
         <div className="rounded-2xl bg-white p-8 shadow-xl dark:bg-gray-900">
@@ -227,6 +241,7 @@ export default function CourseRegistrationForm({
                     value={formData.name}
                     onChange={handleChange}
                     required
+                    autoComplete="name"
                     className={`w-full rounded-lg border border-gray-300 bg-white py-3 pl-10 pr-4 text-gray-900 focus:outline-none focus:ring-2 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 ${currentTheme.focus}`}
                     placeholder="Nhập họ và tên"
                   />
@@ -246,6 +261,7 @@ export default function CourseRegistrationForm({
                     value={formData.email}
                     onChange={handleChange}
                     required
+                    autoComplete="email"
                     className={`w-full rounded-lg border border-gray-300 bg-white py-3 pl-10 pr-4 text-gray-900 focus:outline-none focus:ring-2 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 ${currentTheme.focus}`}
                     placeholder="email@example.com"
                   />
@@ -265,6 +281,8 @@ export default function CourseRegistrationForm({
                     value={formData.phone}
                     onChange={handleChange}
                     required
+                    autoComplete="tel"
+                    inputMode="tel"
                     className={`w-full rounded-lg border border-gray-300 bg-white py-3 pl-10 pr-4 text-gray-900 focus:outline-none focus:ring-2 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 ${currentTheme.focus}`}
                     placeholder="0901234567"
                   />
@@ -293,40 +311,40 @@ export default function CourseRegistrationForm({
             </div>
 
             {/* Alumni Status */}
-            <div
+            <label
+              htmlFor="isAlumni"
               className={`flex cursor-pointer items-center rounded-lg border border-gray-200 p-4 transition dark:border-gray-600 ${currentTheme.hover}`}
-              onClick={() => setFormData({ ...formData, isAlumni: !formData.isAlumni })}
             >
               <input
+                id="isAlumni"
                 type="checkbox"
                 name="isAlumni"
                 checked={formData.isAlumni}
                 onChange={handleChange}
                 className={`mr-3 h-5 w-5 rounded border-gray-300 ${currentTheme.checkbox}`}
               />
-              <label className="cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
+              <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
                 Cựu học viên của VNTechies
-              </label>
-            </div>
+              </span>
+            </label>
 
             {/* Group Registration */}
-            <div
+            <label
+              htmlFor="groupRegistration"
               className={`flex cursor-pointer items-center rounded-lg border border-gray-200 p-4 transition dark:border-gray-600 ${currentTheme.hover}`}
-              onClick={() =>
-                setFormData({ ...formData, groupRegistration: !formData.groupRegistration })
-              }
             >
               <input
+                id="groupRegistration"
                 type="checkbox"
                 name="groupRegistration"
                 checked={formData.groupRegistration}
                 onChange={handleChange}
                 className={`mr-3 h-5 w-5 rounded border-gray-300 ${currentTheme.checkbox}`}
               />
-              <label className="cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
+              <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
                 Đăng ký theo nhóm (2+ người)
-              </label>
-            </div>
+              </span>
+            </label>
 
             {/* Coupon Code */}
             <div>
diff --git a/components/Footer.js b/components/Footer.js
index b42d8b70..b398c08c 100644
--- a/components/Footer.js
+++ b/components/Footer.js
@@ -3,129 +3,114 @@ import siteMetadata from '@/data/siteMetadata'
 import Image from 'next/image'
 import { footerNavLinks } from '@/data/Links'
 
-export default function Footer() {
-  const made_in_vn_svg = '/static/images/madeinvn.svg'
+const socialLinks = [
+  {
+    label: 'tiktok',
+    href: siteMetadata.tiktok,
+    color: 'text-black dark:text-white',
+    icon: (
+      <path d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z" />
+    ),
+  },
+  {
+    label: 'discord',
+    href: siteMetadata.discord,
+    color: 'text-indigo-500',
+    icon: (
+      <path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z" />
+    ),
+  },
+  {
+    label: 'facebook',
+    href: siteMetadata.facebook,
+    color: 'text-blue-600 dark:text-blue-300',
+    icon: (
+      <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" />
+    ),
+  },
+  {
+    label: 'github',
+    href: siteMetadata.github,
+    color: 'text-slate-800 dark:text-slate-200',
+    icon: (
+      <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
+    ),
+  },
+  {
+    label: 'twitter',
+    href: siteMetadata.twitter,
+    color: 'text-sky-500 dark:text-sky-300',
+    icon: (
+      <path d="M23.953 4.57a10 10 0 0 1-2.825.775 4.958 4.958 0 0 0 2.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 0 0-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 0 0-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 0 1-2.228-.616v.06a4.923 4.923 0 0 0 3.946 4.827 4.996 4.996 0 0 1-2.212.085 4.936 4.936 0 0 0 4.604 3.417 9.867 9.867 0 0 1-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 0 0 7.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0 0 24 4.59z" />
+    ),
+  },
+  {
+    label: 'youtube',
+    href: siteMetadata.youtube,
+    color: 'text-red-600 dark:text-red-300',
+    icon: (
+      <path d="M23.499 6.203a3.008 3.008 0 0 0-2.089-2.089c-1.87-.501-9.4-.501-9.4-.501s-7.509-.01-9.399.501a3.008 3.008 0 0 0-2.088 2.09A31.258 31.26 0 0 0 0 12.01a31.258 31.26 0 0 0 .523 5.785 3.008 3.008 0 0 0 2.088 2.089c1.869.502 9.4.502 9.4.502s7.508 0 9.399-.502a3.008 3.008 0 0 0 2.089-2.09 31.258 31.26 0 0 0 .5-5.784 31.258 31.26 0 0 0-.5-5.808zm-13.891 9.4V8.407l6.266 3.604z" />
+    ),
+  },
+]
 
+export default function Footer() {
   return (
-    <footer className="bg-white pb-20 dark:bg-gray-900 md:px-6 md:py-8">
-      <div className="sm:flex sm:items-center sm:justify-between">
-        <Link alt="Trang chủ" href="/" className="mb-4 flex items-center sm:mb-0">
-          <Image
-            src={'/static/images/logo.webp'}
-            width="200"
-            height="10"
-            alt="avatar"
-            className="w-200 h-10 rounded-full grayscale hover:grayscale-0"
-          />
-        </Link>
-        <ul className="mb-6 flex flex-wrap items-center text-sm text-gray-500 dark:text-gray-400 sm:mb-0">
-          {footerNavLinks.map(({ title, href }) => (
-            <li key={title}>
-              <Link alt={title} href={href} className="mr-4 hover:underline md:mr-6 ">
-                {title}
-              </Link>
-            </li>
-          ))}
-        </ul>
-      </div>
-      <hr className="my-6 border-gray-200 dark:border-gray-700 sm:mx-auto lg:my-8" />
-      <div className="sm:flex sm:items-center sm:justify-between">
-        <span className="text-sm text-gray-500 dark:text-gray-400 sm:text-center">
-          <Link alt="Trang chủ" href="/" className="">
-            <Image alt="made in Vietnam" width="129" height="20" src={made_in_vn_svg} />
-          </Link>{' '}
-        </span>
-        <div className="mt-4 mb-4 flex space-x-6 sm:mt-0 sm:justify-center">
-          <a
-            className="text-sm text-gray-500 transition hover:text-gray-600"
-            target="_blank"
-            rel="noopener noreferrer"
-            href={siteMetadata.tiktok}
-          >
-            <span className="sr-only">tiktok</span>
-            <svg
-              viewBox="0 0 24 24"
-              xmlns="https://www.w3.org/2000/svg"
-              className="h-5 w-5 fill-current text-black hover:opacity-90 dark:text-white"
-            >
-              <path d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z"></path>
-            </svg>
-          </a>
-          <a
-            className="text-sm text-gray-500 transition hover:text-gray-600"
-            target="_blank"
-            rel="noopener noreferrer"
-            href={siteMetadata.discord}
-          >
-            <span className="sr-only">discord</span>
-            <svg
-              viewBox="0 0 24 24"
-              xmlns="https://www.w3.org/2000/svg"
-              className="h-5 w-5 fill-current text-[#5865F2] hover:opacity-90"
-            >
-              <path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418Z"></path>
-            </svg>
-          </a>
-          <a
-            className="text-sm text-gray-500 transition hover:text-gray-600"
-            target="_blank"
-            rel="noopener noreferrer"
-            href={siteMetadata.facebook}
-          >
-            <span className="sr-only">facebook</span>
-            <svg
-              xmlns="https://www.w3.org/2000/svg"
-              viewBox="0 0 24 24"
-              className="h-5 w-5 fill-current text-[#4267B2] hover:opacity-90 dark:text-blue-100 hover:dark:opacity-90"
-            >
-              <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"></path>
-            </svg>
-          </a>
-          <a
-            className="text-sm text-gray-500 transition hover:text-gray-600"
-            target="_blank"
-            rel="noopener noreferrer"
-            href={siteMetadata.github}
-          >
-            <span className="sr-only">github</span>
-            <svg
-              viewBox="0 0 24 24"
-              xmlns="https://www.w3.org/2000/svg"
-              className="h-5 w-5 fill-current text-gray-800 hover:text-gray-700 dark:text-gray-300 hover:dark:text-gray-400"
-            >
-              <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path>
-            </svg>
-          </a>
-          <a
-            className="text-sm text-gray-500 transition hover:text-gray-600"
-            target="_blank"
-            rel="noopener noreferrer"
-            href={siteMetadata.twitter}
-          >
-            <span className="sr-only">twitter</span>
-            <svg
-              xmlns="https://www.w3.org/2000/svg"
-              viewBox="0 0 24 24"
-              className="hover:dark-opacity-90 h-5 w-5 fill-current text-[#1da1f2] hover:opacity-90 dark:text-blue-100"
-            >
-              <path d="M23.953 4.57a10 10 0 0 1-2.825.775 4.958 4.958 0 0 0 2.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 0 0-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 0 0-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 0 1-2.228-.616v.06a4.923 4.923 0 0 0 3.946 4.827 4.996 4.996 0 0 1-2.212.085 4.936 4.936 0 0 0 4.604 3.417 9.867 9.867 0 0 1-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 0 0 7.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0 0 24 4.59z"></path>
-            </svg>
-          </a>
-          <a
-            className="text-sm text-gray-500 transition hover:text-gray-600"
-            target="_blank"
-            rel="noopener noreferrer"
-            href={siteMetadata.youtube}
-          >
-            <span className="sr-only">youtube</span>
-            <svg
-              xmlns="https://www.w3.org/2000/svg"
-              viewBox="0 0 24 24"
-              className="h-5 w-5 fill-current text-[#ff0000] hover:text-[#dd0000]"
-            >
-              <path d="M23.499 6.203a3.008 3.008 0 0 0-2.089-2.089c-1.87-.501-9.4-.501-9.4-.501s-7.509-.01-9.399.501a3.008 3.008 0 0 0-2.088 2.09A31.258 31.26 0 0 0 0 12.01a31.258 31.26 0 0 0 .523 5.785 3.008 3.008 0 0 0 2.088 2.089c1.869.502 9.4.502 9.4.502s7.508 0 9.399-.502a3.008 3.008 0 0 0 2.089-2.09 31.258 31.26 0 0 0 .5-5.784 31.258 31.26 0 0 0-.5-5.808zm-13.891 9.4V8.407l6.266 3.604z"></path>
-            </svg>
-          </a>
+    <footer className="mt-16 pb-24 sm:pb-10">
+      <div className="surface-panel-muted px-6 py-8 sm:px-8 sm:py-10">
+        <div className="flex flex-col gap-8 lg:flex-row lg:items-center lg:justify-between">
+          <Link alt="Trang chủ" href="/" className="inline-flex items-center">
+            <Image
+              src="/static/images/logo.webp"
+              width={200}
+              height={40}
+              alt="VNTechies logo"
+              className="h-10 w-auto"
+            />
+          </Link>
+          <ul className="flex flex-wrap items-center gap-3 text-sm">
+            {footerNavLinks.map(({ title, href }) => (
+              <li key={title}>
+                <Link
+                  alt={title}
+                  href={href}
+                  className="rounded-lg px-3 py-2 font-medium text-slate-600 hover:bg-slate-200 hover:text-slate-900 dark:text-slate-300 dark:hover:bg-slate-800 dark:hover:text-slate-100"
+                >
+                  {title}
+                </Link>
+              </li>
+            ))}
+          </ul>
+        </div>
+
+        <div className="soft-divider my-8 h-px w-full bg-slate-200/80 dark:bg-slate-700/80" />
+
+        <div className="flex flex-col gap-6 sm:flex-row sm:items-center sm:justify-between">
+          <Link alt="Made in Vietnam" href="/" className="inline-flex w-fit items-center">
+            <Image
+              alt="made in Vietnam"
+              width={129}
+              height={20}
+              src="/static/images/madeinvn.svg"
+              className="h-5 w-auto"
+            />
+          </Link>
+          <div className="flex flex-wrap items-center gap-3">
+            {socialLinks.map(({ label, href, icon, color }) => (
+              <a
+                key={label}
+                className={`inline-flex h-10 w-10 items-center justify-center rounded-lg border border-slate-200 bg-white shadow-sm transition-all hover:-translate-y-0.5 hover:border-orange-300 hover:bg-orange-50 dark:border-slate-700 dark:bg-slate-800 dark:hover:border-orange-500/40 dark:hover:bg-slate-700 ${color}`}
+                target="_blank"
+                rel="noopener noreferrer"
+                href={href}
+              >
+                <span className="sr-only">{label}</span>
+                <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" className="h-5 w-5">
+                  {icon}
+                </svg>
+              </a>
+            ))}
+          </div>
         </div>
       </div>
     </footer>
diff --git a/components/Header.js b/components/Header.js
index 806b99f9..444b747f 100644
--- a/components/Header.js
+++ b/components/Header.js
@@ -1,6 +1,6 @@
 import siteMetadata from '@/data/siteMetadata'
 import Link from './Link'
-import Image from './Image'
+import Image from 'next/image'
 import { headerNavLinks } from '@/data/Links'
 import { useRouter } from 'next/router'
 import ThemeSwitch from './ThemeSwitch'
@@ -10,47 +10,53 @@ export default function Header() {
   const route = `/${router.pathname.split('/')[1]}`
 
   return (
-    <header className="flex items-center justify-between py-10">
-      <div>
-        <Link alt="Trang chủ" href="/" aria-label={siteMetadata.headerTitle}>
-          <div className="flex items-center justify-between">
-            <div className="mr-3">
-              <Image
-                src={'/static/images/logo.webp'}
-                width="200"
-                height="40"
-                alt="avatar"
-                className="w-200 h-10"
-              />
-            </div>
-          </div>
+    <header className="sticky top-0 z-40 py-4 sm:py-5">
+      <div className="surface-panel flex items-center justify-between gap-4 px-4 py-3 sm:px-5 lg:px-6">
+        <Link
+          alt="Trang chủ"
+          href="/"
+          aria-label={siteMetadata.headerTitle}
+          className="inline-flex items-center"
+        >
+          <Image
+            src="/static/images/logo.webp"
+            width={200}
+            height={40}
+            alt="VNTechies logo"
+            className="h-8 w-auto sm:h-9"
+            priority
+          />
         </Link>
-      </div>
-      <div className="flex items-center text-base leading-5">
-        <div className="hidden sm:block">
-          {headerNavLinks.map(({ title, href, isNew }) => (
-            <div key={title} className="relative inline-block">
-              <Link
-                alt={title}
-                href={href}
-                className={`relative rounded px-5 py-1 transition-all duration-150 sm:px-3 sm:py-2
-                  ${
-                    route === href && title === 'Khoá học'
-                      ? 'bg-orange-500 font-bold text-white shadow-lg dark:bg-orange-600 dark:text-white'
-                      : title === 'Khoá học'
-                      ? 'bg-orange-400/80 font-bold text-white shadow-lg hover:bg-orange-500 dark:bg-orange-700/80 dark:text-white'
-                      : route === href
-                      ? 'bg-gray-200 font-bold text-orange-500 dark:bg-gray-700 dark:text-orange-500'
-                      : 'font-medium text-zinc-600 hover:bg-gray-200 dark:text-zinc-400 dark:hover:bg-gray-700'
+        <div className="flex items-center gap-2 text-base leading-5 sm:gap-3">
+          <nav className="hidden items-center gap-1 md:flex">
+            {headerNavLinks.map(({ title, href }) => {
+              const isActive = route === href
+              const isFeatured = title === 'Khoá học'
+
+              return (
+                <Link
+                  alt={title}
+                  key={title}
+                  href={href}
+                  className={`rounded-lg px-3 py-2 text-sm font-semibold transition-all duration-200 ${
+                    isActive && isFeatured
+                      ? 'bg-orange-500 text-white shadow-lg shadow-orange-500/30'
+                      : isFeatured
+                      ? 'bg-orange-100 text-orange-700 hover:bg-orange-200 dark:bg-orange-900/50 dark:text-orange-200 dark:hover:bg-orange-900/80'
+                      : isActive
+                      ? 'bg-slate-900 text-white dark:bg-slate-100 dark:text-slate-900'
+                      : 'text-slate-600 hover:bg-slate-200 hover:text-slate-900 dark:text-slate-300 dark:hover:bg-slate-800 dark:hover:text-slate-100'
                   }`}
-              >
-                {title}
-              </Link>
-            </div>
-          ))}
+                >
+                  {title}
+                </Link>
+              )
+            })}
+          </nav>
+          <ThemeSwitch />
         </div>
-        <ThemeSwitch />
       </div>
+      <div className="h-3 bg-gradient-to-b from-orange-100/70 to-transparent dark:from-orange-500/10" />
     </header>
   )
 }
diff --git a/components/HorizontalCard.js b/components/HorizontalCard.js
index 7e6e4bd0..adaf2c48 100644
--- a/components/HorizontalCard.js
+++ b/components/HorizontalCard.js
@@ -2,21 +2,25 @@ import Link from '@/components/Link'
 import Image from '@/components/Image'
 
 const HorizontalCard = ({ title, href, image }) => {
+  const cover = image || '/static/images/default-ogp.png'
+
   return (
-    <Link alt={`Tới ${title}`} key={title} href={href}>
-      <button className="grid grid-cols-3 justify-start rounded-md bg-gray-100 text-sm drop-shadow transition duration-200 hover:-translate-y-1 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700">
-        <span className="relative h-full w-20 lg:h-24 lg:w-full">
+    <Link alt={`Toi ${title}`} key={title} href={href} className="group block">
+      <article className="surface-panel-muted grid grid-cols-[88px,1fr] items-stretch overflow-hidden text-sm transition-all duration-300 hover:-translate-y-1">
+        <span className="relative h-full w-full">
           <Image
             alt={title}
-            className="rounded-tl-md rounded-bl-md object-cover"
-            src={image}
+            className="h-full w-full object-cover"
+            src={cover}
             layout="fill"
             quality={75}
             loading="lazy"
           />
         </span>
-        <p className="text-xs col-span-2 p-2 text-left md:text-sm lg:p-4">{title}</p>
-      </button>
+        <p className="line-clamp-2 self-center p-3 text-left text-sm font-semibold text-slate-700 group-hover:text-orange-600 dark:text-slate-200 dark:group-hover:text-orange-300 sm:p-4">
+          {title}
+        </p>
+      </article>
     </Link>
   )
 }
diff --git a/components/Image.js b/components/Image.js
index c2e8733a..09590919 100644
--- a/components/Image.js
+++ b/components/Image.js
@@ -1,10 +1,6 @@
 import NextImage from 'next/image'
 
 // eslint-disable-next-line jsx-a11y/alt-text
-const Image = ({ ...rest }) => (
-  <p align="center">
-    <NextImage {...rest} />
-  </p>
-)
+const Image = ({ ...rest }) => <NextImage {...rest} />
 
 export default Image
diff --git a/components/LayoutWrapper.js b/components/LayoutWrapper.js
index 2dca099a..75f5b2b7 100644
--- a/components/LayoutWrapper.js
+++ b/components/LayoutWrapper.js
@@ -1,19 +1,21 @@
 import SectionContainer from './SectionContainer'
 import Footer from './Footer'
-
 import BottomNav from './BottomNav'
 import { useRouter } from 'next/router'
 import Header from './Header'
 
 const LayoutWrapper = ({ children }) => {
   const router = useRouter()
+  const isHomePage = router.pathname === '/'
 
   return (
     <>
-      <SectionContainer>
-        <div className="flex h-screen flex-col justify-between">
+      <SectionContainer className="app-shell">
+        <div className="relative flex min-h-screen flex-col pb-20 md:pb-0">
           <Header />
-          <main className="mb-auto">{children}</main>
+          <main className={`mb-auto flex-1 ${isHomePage ? '' : 'pb-4 pt-4 sm:pt-8'}`}>
+            {children}
+          </main>
           <Footer />
         </div>
       </SectionContainer>
diff --git a/components/PageTitle.js b/components/PageTitle.js
index 82419b55..47436be3 100644
--- a/components/PageTitle.js
+++ b/components/PageTitle.js
@@ -1,7 +1,3 @@
 export default function PageTitle({ children }) {
-  return (
-    <h1 className="text-3xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl sm:leading-10 md:text-5xl md:leading-14">
-      {children}
-    </h1>
-  )
+  return <h1 className="page-heading text-slate-900 dark:text-slate-100">{children}</h1>
 }
diff --git a/components/Pagination.js b/components/Pagination.js
index 94578c68..5a37ced7 100644
--- a/components/Pagination.js
+++ b/components/Pagination.js
@@ -5,30 +5,34 @@ export default function Pagination({ totalPages, currentPage }) {
   const nextPage = parseInt(currentPage) + 1 <= parseInt(totalPages)
 
   return (
-    <div className="space-y-2 pt-6 pb-8 md:space-y-5">
-      <nav className="flex justify-between">
-        {!prevPage && (
-          <button rel="previous" className="cursor-auto disabled:opacity-50" disabled={!prevPage}>
-            👈 Trước
-          </button>
-        )}
-        {prevPage && (
-          <Link href={currentPage - 1 === 1 ? `/blog/` : `/blog/page/${currentPage - 1}`}>
-            <button rel="previous">👈 Trang {currentPage - 1}</button>
+    <div className="pt-8 pb-12">
+      <nav className="surface-panel-muted flex items-center justify-between gap-3 px-4 py-3 sm:px-5">
+        {prevPage ? (
+          <Link
+            href={currentPage - 1 === 1 ? '/blog/' : `/blog/page/${currentPage - 1}`}
+            className="inline-flex items-center rounded-lg px-3 py-2 text-sm font-semibold text-slate-700 hover:bg-slate-200 dark:text-slate-200 dark:hover:bg-slate-700"
+          >
+            ← Trang {currentPage - 1}
           </Link>
+        ) : (
+          <span className="rounded-lg px-3 py-2 text-sm font-medium text-slate-400 dark:text-slate-500">
+            ← Trước
+          </span>
         )}
-        <span>
+        <span className="text-xs rounded-full bg-slate-200 px-3 py-1 font-semibold text-slate-700 dark:bg-slate-700 dark:text-slate-200">
           {currentPage} / {totalPages}
         </span>
-        {!nextPage && (
-          <button rel="next" className="cursor-auto disabled:opacity-50" disabled={!nextPage}>
-            Sau 👉
-          </button>
-        )}
-        {nextPage && (
-          <Link href={`/blog/page/${currentPage + 1}`}>
-            <button rel="next">Trang {currentPage + 1} 👉</button>
+        {nextPage ? (
+          <Link
+            href={`/blog/page/${currentPage + 1}`}
+            className="inline-flex items-center rounded-lg px-3 py-2 text-sm font-semibold text-slate-700 hover:bg-slate-200 dark:text-slate-200 dark:hover:bg-slate-700"
+          >
+            Trang {currentPage + 1} →
           </Link>
+        ) : (
+          <span className="rounded-lg px-3 py-2 text-sm font-medium text-slate-400 dark:text-slate-500">
+            Sau →
+          </span>
         )}
       </nav>
     </div>
diff --git a/components/SectionContainer.js b/components/SectionContainer.js
index 7e239023..6aaeacc2 100644
--- a/components/SectionContainer.js
+++ b/components/SectionContainer.js
@@ -1,3 +1,7 @@
-export default function SectionContainer({ children }) {
-  return <div className="mx-auto max-w-4xl px-4 sm:px-6 xl:max-w-6xl xl:px-0">{children}</div>
+export default function SectionContainer({ children, className = '' }) {
+  return (
+    <div className={`mx-auto w-full max-w-[84rem] px-4 sm:px-6 lg:px-10 ${className}`.trim()}>
+      {children}
+    </div>
+  )
 }
diff --git a/components/SummaryButton.js b/components/SummaryButton.js
index b4d6984f..2827f6df 100644
--- a/components/SummaryButton.js
+++ b/components/SummaryButton.js
@@ -34,7 +34,7 @@ const SummaryButton = ({ content }) => {
 
   return (
     <>
-      <div className="sticky top-[4.5rem] z-50 float-right -mr-16 hidden xl:block">
+      <div className="fixed right-4 z-[60] [bottom:calc(4.75rem+env(safe-area-inset-bottom))] sm:right-6 sm:bottom-6 md:right-8 md:bottom-36">
         <button
           onClick={handleSummarize}
           disabled={isLoading}
@@ -43,7 +43,7 @@ const SummaryButton = ({ content }) => {
         >
           {isLoading ? (
             <svg
-              className="h-5 w-5 animate-spin md:h-6 md:w-6"
+              className="h-5 w-5 animate-spin"
               xmlns="http://www.w3.org/2000/svg"
               fill="none"
               viewBox="0 0 24 24"
@@ -69,94 +69,6 @@ const SummaryButton = ({ content }) => {
                 viewBox="0 0 128 128"
                 xmlns="http://www.w3.org/2000/svg"
               >
-                <linearGradient
-                  id="a"
-                  x1="-.556"
-                  x2="-.628"
-                  y1="128.705"
-                  y2="128.977"
-                  gradientTransform="matrix(155.9359 0 0 -364.3 119.128 47001.098)"
-                  gradientUnits="userSpaceOnUse"
-                >
-                  <stop offset="0" stopColor="#eb6f07" />
-                  <stop offset="1" stopColor="#fab743" />
-                </linearGradient>
-                <path
-                  fill="url(#a)"
-                  d="M33.882 9.694 48.491 36.05 35.075 60.199a7.75 7.75 0 0 0 0 7.543l13.416 24.209-14.609 26.356a15.501 15.501 0 0 1-6.559-6.172L4.068 71.737a15.563 15.563 0 0 1 0-15.503l23.255-40.398a15.501 15.501 0 0 1 6.559-6.142z"
-                />
-                <linearGradient
-                  id="b"
-                  x1="-.594"
-                  x2="-.715"
-                  y1="129.358"
-                  y2="129.519"
-                  gradientTransform="matrix(149.7049 0 0 -194.8 131.59 25305.098)"
-                  gradientUnits="userSpaceOnUse"
-                >
-                  <stop offset="0" stopColor="#d96504" />
-                  <stop offset="1" stopColor="#d96504" stopOpacity="0" />
-                </linearGradient>
-                <path
-                  fill="url(#b)"
-                  d="M35.075 60.229a7.75 7.75 0 0 0 0 7.513l13.416 24.209-14.609 26.356a15.501 15.501 0 0 1-6.559-6.172L4.068 71.737c-1.848-3.19 8.497-7.006 31.007-11.478v-.03z"
-                  opacity=".7"
-                />
-                <linearGradient
-                  id="f"
-                  x1="-.561"
-                  x2="-.634"
-                  y1="128.688"
-                  y2="128.96"
-                  gradientTransform="matrix(201.2571 0 0 -375 180.743 48376)"
-                  gradientUnits="userSpaceOnUse"
-                >
-                  <stop offset="0" stopColor="#ffa95f" />
-                  <stop offset="1" stopColor="#ffebc8" />
-                </linearGradient>
-                <path
-                  fill="url(#f)"
-                  d="M40.739 119.886c-2.385 0-4.77-.566-6.857-1.58l28.681-51.727a5.353 5.353 0 0 0 0-5.188L33.882 9.694a15.492 15.492 0 0 1 6.857-1.61h23.255l28.92 52.145a7.75 7.75 0 0 1 0 7.513l-28.92 52.145H40.739z"
-                />
-              </svg>
-              <span className="text-sm font-medium md:text-base">Tóm tắt bằng AI</span>
-            </>
-          )}
-        </button>
-      </div>
-
-      {/* Mobile button */}
-      <div className="sticky top-[4.5rem] z-50 flex justify-end px-4 py-2 xl:hidden">
-        <button
-          onClick={handleSummarize}
-          disabled={isLoading}
-          className="flex items-center gap-2 rounded-lg bg-primary-500 px-4 py-2 text-white shadow-lg transition-all focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 hover:bg-primary-600 dark:bg-primary-400 dark:hover:bg-primary-300"
-          aria-label="Tóm tắt bài viết bằng AI"
-        >
-          {isLoading ? (
-            <svg
-              className="h-5 w-5 animate-spin"
-              xmlns="http://www.w3.org/2000/svg"
-              fill="none"
-              viewBox="0 0 24 24"
-            >
-              <circle
-                className="opacity-25"
-                cx="12"
-                cy="12"
-                r="10"
-                stroke="currentColor"
-                strokeWidth="4"
-              ></circle>
-              <path
-                className="opacity-75"
-                fill="currentColor"
-                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-              ></path>
-            </svg>
-          ) : (
-            <>
-              <svg className="h-5 w-5" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg">
                 <linearGradient
                   id="a-mobile"
                   x1="-.556"
@@ -207,7 +119,7 @@ const SummaryButton = ({ content }) => {
                   d="M40.739 119.886c-2.385 0-4.77-.566-6.857-1.58l28.681-51.727a5.353 5.353 0 0 0 0-5.188L33.882 9.694a15.492 15.492 0 0 1 6.857-1.61h23.255l28.92 52.145a7.75 7.75 0 0 1 0 7.513l-28.92 52.145H40.739z"
                 />
               </svg>
-              <span className="text-sm font-medium">Tóm tắt bằng AI</span>
+              <span className="hidden text-sm font-medium sm:inline">Tóm tắt bằng AI</span>
             </>
           )}
         </button>
diff --git a/components/Tag.js b/components/Tag.js
index 4735a259..ecad6558 100644
--- a/components/Tag.js
+++ b/components/Tag.js
@@ -3,10 +3,11 @@ import kebabCase from '@/lib/utils/kebabCase'
 
 const Tag = ({ text }) => {
   return (
-    <Link alt={`Tới tag ${kebabCase(text)}`} href={`/tags/${kebabCase(text)}`}>
-      <button className="mr-3 text-sm font-medium uppercase text-primary-500 hover:text-primary-600 dark:hover:text-primary-400">
-        {text.split(' ').join('-')}
-      </button>
+    <Link
+      href={`/tags/${kebabCase(text)}`}
+      className="text-xs mr-2 mb-2 inline-flex items-center rounded-full border border-orange-200 bg-orange-50 px-2.5 py-1 font-semibold uppercase tracking-wide text-orange-700 hover:bg-orange-100 dark:border-orange-700/60 dark:bg-orange-900/30 dark:text-orange-300 dark:hover:bg-orange-900/50"
+    >
+      {text.split(' ').join('-')}
     </Link>
   )
 }
diff --git a/components/ThemeSwitch.js b/components/ThemeSwitch.js
index cb7bff1c..f534b773 100644
--- a/components/ThemeSwitch.js
+++ b/components/ThemeSwitch.js
@@ -12,16 +12,16 @@ const ThemeSwitch = () => {
     <button
       aria-label="Toggle Dark Mode"
       type="button"
-      className="ml-1 mr-1 h-10 w-10 rounded p-1 sm:ml-4"
+      className="inline-flex h-10 w-10 items-center justify-center rounded-lg border border-slate-200 bg-slate-100/80 text-slate-700 transition-colors hover:bg-slate-200 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200 dark:hover:bg-slate-700"
       onClick={() => setTheme(theme === 'dark' || resolvedTheme === 'dark' ? 'light' : 'dark')}
     >
       <svg
         xmlns="https://www.w3.org/2000/svg"
         fill="none"
-        viewBox="0 0 30 30"
+        viewBox="0 0 24 24"
         strokeWidth="1.5"
         stroke="currentColor"
-        className="h-10 w-10"
+        className="h-5 w-5"
       >
         {mounted && (theme === 'dark' || resolvedTheme === 'dark') ? (
           <path
diff --git a/components/home/AWSCert.js b/components/home/AWSCert.js
index 161f318a..22ded700 100644
--- a/components/home/AWSCert.js
+++ b/components/home/AWSCert.js
@@ -26,7 +26,7 @@ const AWSCert = () => {
           </p>
         </div>
 
-        <div className="-m-4 flex flex-wrap justify-center">
+        <div className="grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-3">
           <Card
             title="Kinh nghiệm thi chứng chỉ AWS Certified Solutions Architect - Associate SAA-C03"
             description="Quá trình ôn tập cho kỳ thi AWSSA-A (Amazon AWS Certified Solutions Architect - Associate) - phiên bản SAA-C03"
diff --git a/components/home/DataCourse.js b/components/home/DataCourse.js
new file mode 100644
index 00000000..37667602
--- /dev/null
+++ b/components/home/DataCourse.js
@@ -0,0 +1,106 @@
+import Link from 'next/link'
+import Image from 'next/image'
+
+const DataCourse = () => {
+  return (
+    <section className="relative bg-gradient-to-br from-purple-50 via-white to-indigo-50 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900">
+      {/* Background decoration */}
+      <div className="absolute inset-0 overflow-hidden">
+        <div className="absolute -top-40 -right-32 h-80 w-80 rounded-full bg-purple-100 opacity-20 dark:bg-purple-900"></div>
+        <div className="absolute -bottom-40 -left-32 h-80 w-80 rounded-full bg-indigo-100 opacity-20 dark:bg-indigo-900"></div>
+      </div>
+
+      <div className="relative z-10 mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8 lg:py-24">
+        <div className="grid grid-cols-1 items-center gap-8 lg:grid-cols-2 lg:gap-12">
+          {/* Text content */}
+          <div>
+            <div className="mb-4 inline-flex items-center rounded-full bg-purple-100 px-4 py-2 text-sm font-semibold text-purple-800 dark:bg-purple-900/30 dark:text-purple-300">
+              <span className="mr-2">🚀</span>ĐỘC QUYỀN tại VNTechies
+            </div>
+            <h2 className="mb-6 text-3xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-4xl lg:text-5xl">
+              Chinh phục thế giới{' '}
+              <span className="bg-gradient-to-r from-purple-500 to-indigo-600 bg-clip-text text-transparent">
+                Data Engineer Bootcamp
+              </span>
+            </h2>
+            <p className="mb-8 text-xl leading-relaxed text-gray-600 dark:text-gray-300">
+              Chương trình 9 tuần (18 buổi) giúp bạn xây dựng năng lực Data Engineering thực chiến:
+              từ SQL, ETL, Data Lakehouse đến Kafka Streaming, Airflow orchestration, DataHub và
+              Feature Store.
+            </p>
+            <div className="xs:grid-cols-2 mb-6 grid grid-cols-1 gap-3 sm:gap-4">
+              {[
+                {
+                  title: 'SQL + Data Modeling',
+                  description: 'Thiết kế Data Mart, SCD và mô hình dữ liệu thực tế',
+                },
+                {
+                  title: 'Spark + Data Lakehouse',
+                  description: 'Triển khai kiến trúc bronze/silver/gold với batch pipeline',
+                },
+                {
+                  title: 'Kafka + Streaming',
+                  description: 'Xây CDC pipeline và xử lý dữ liệu real-time',
+                },
+                {
+                  title: 'Airflow + DataHub + Feast',
+                  description: 'Orchestration, governance, feature store cho hệ thống hoàn chỉnh',
+                },
+              ].map((feature, index) => (
+                <div key={index} className="rounded-lg bg-white p-4 shadow-sm dark:bg-gray-800">
+                  <h3 className="mb-1 font-medium text-gray-900 dark:text-white">
+                    {feature.title}
+                  </h3>
+                  <p className="text-sm text-gray-600 dark:text-gray-300">{feature.description}</p>
+                </div>
+              ))}
+            </div>
+            <div className="flex flex-col space-y-3 sm:flex-row sm:space-x-4 sm:space-y-0">
+              <Link
+                href="/courses/data-engineer-bootcamp/gioi-thieu"
+                className="inline-flex items-center justify-center rounded-lg bg-purple-600 px-6 py-3 text-base font-medium text-white shadow-md transition-all focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 hover:bg-purple-700"
+              >
+                Bắt đầu học ngay
+                <svg
+                  className="ml-2 h-5 w-5"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
+                    d="M13 7l5 5m0 0l-5 5m5-5H6"
+                  ></path>
+                </svg>
+              </Link>
+              <Link
+                href="/courses/register"
+                className="inline-flex items-center justify-center rounded-lg border border-gray-300 bg-white px-6 py-3 text-base font-medium text-gray-700 shadow-sm transition-all focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
+              >
+                Đăng ký tư vấn lộ trình
+              </Link>
+            </div>
+          </div>
+          {/* Image content */}
+          <div className="relative mx-auto max-w-lg lg:max-w-none">
+            <div className="overflow-hidden rounded-2xl shadow-2xl">
+              <Image
+                src="/static/images/courses/data-bootcamp.png"
+                alt="Data Engineer Bootcamp VDT-C01"
+                width={600}
+                height={400}
+                className="h-auto w-full object-cover"
+              />
+            </div>
+            <div className="absolute -bottom-6 -right-6 h-40 w-40 rounded-full bg-gradient-to-br from-purple-600 to-indigo-600 opacity-20 blur-2xl"></div>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default DataCourse
diff --git a/components/home/FreeCourses.js b/components/home/FreeCourses.js
index b7133f31..ad177c7f 100644
--- a/components/home/FreeCourses.js
+++ b/components/home/FreeCourses.js
@@ -27,7 +27,7 @@ const FreeCourses = () => {
           </p>
         </div>
 
-        <div className="-m-4 flex flex-wrap justify-center">
+        <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
           <Card
             title="90 Ngày DevOps v2 ♾️"
             description="Tập trung vào DevSecOps với các kiến thức bảo mật và chuyên sâu trong SDLC"
diff --git a/components/home/Hero.js b/components/home/Hero.js
index affd3533..a4b7111b 100644
--- a/components/home/Hero.js
+++ b/components/home/Hero.js
@@ -15,7 +15,7 @@ const Hero = () => {
         <div className="text-center">
           {/* Badge */}
           <div className="mb-4 inline-flex items-center rounded-full bg-orange-100 px-4 py-2 text-sm font-semibold text-orange-800 dark:bg-orange-900/30 dark:text-orange-300">
-            <span className="mr-2">🚀</span>5 khoá học AWS mới đã ra mắt
+            <span className="mr-2">🔥</span>Khoá học Data mới đã ra mắt
           </div>
 
           {/* Main heading */}
@@ -24,6 +24,10 @@ const Hero = () => {
             <br />
             <span className="bg-gradient-to-r from-orange-500 to-orange-600 bg-clip-text text-transparent">
               AWS Certification
+            </span>
+            {', '}
+            <span className="bg-gradient-to-r from-purple-500 to-purple-600 bg-clip-text text-transparent">
+              Data
             </span>{' '}
             và{' '}
             <span className="bg-gradient-to-r from-blue-500 to-blue-600 bg-clip-text text-transparent">
@@ -66,7 +70,7 @@ const Hero = () => {
               </svg>
             </a>
             <a
-              href="https://www.tiktok.com/@vntechies.dev"
+              href="https://www.tiktok.com/@vntechies"
               target="_blank"
               rel="noopener noreferrer"
               className="group flex h-12 w-12 items-center justify-center rounded-xl bg-black text-white shadow-lg transition-all hover:-translate-y-1 hover:bg-gray-800 hover:shadow-xl"
@@ -100,10 +104,10 @@ const Hero = () => {
           {/* CTA Buttons */}
           <div className="mb-8 flex flex-col gap-4 sm:flex-row sm:justify-center">
             <Link
-              href="/courses/aws/saa/gioi-thieu"
-              className="inline-flex items-center justify-center rounded-lg bg-orange-500 px-8 py-3 text-base font-semibold text-white shadow-lg transition-all focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 hover:bg-orange-600 hover:shadow-xl"
+              href="/courses/data-engineer-bootcamp/gioi-thieu"
+              className="inline-flex items-center justify-center rounded-lg bg-purple-500 px-8 py-3 text-base font-semibold text-white shadow-lg transition-all focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 hover:bg-purple-600 hover:shadow-xl"
             >
-              Khoá học AWS SAA
+              Data Engineer Bootcamp
               <svg className="ml-2 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path
                   strokeLinecap="round"
@@ -114,16 +118,16 @@ const Hero = () => {
               </svg>
             </Link>
             <Link
-              href="/aws-certification-paths"
+              href="/courses/aws/saa/gioi-thieu"
               className="inline-flex items-center justify-center rounded-lg border border-orange-300 bg-orange-50 px-8 py-3 text-base font-semibold text-orange-700 shadow-sm transition-all hover:bg-orange-100 dark:border-orange-600 dark:bg-orange-900/20 dark:text-orange-300 dark:hover:bg-orange-900/30"
             >
-              Định hướng AWS
+              Khoá học AWS SAA
               <svg className="ml-2 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path
                   strokeLinecap="round"
                   strokeLinejoin="round"
                   strokeWidth={2}
-                  d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"
+                  d="M13 7l5 5m0 0l-5 5m5-5H6"
                 />
               </svg>
             </Link>
@@ -137,7 +141,7 @@ const Hero = () => {
         </div>
 
         {/* Featured Courses */}
-        <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
+        <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5">
           {[
             {
               title: 'Solution Architect',
@@ -171,11 +175,24 @@ const Hero = () => {
               link: '/courses/devops/gioi-thieu',
               image: '/static/images/courses/vde.png',
             },
+            {
+              title: 'Data Engineer Bootcamp',
+              code: 'VDT-C01',
+              level: '9 tuần (18 buổi)',
+              color: 'from-purple-500 to-purple-600',
+              link: '/courses/data-engineer-bootcamp/gioi-thieu',
+              image: '/static/images/courses/vdt.png',
+              featured: true,
+            },
           ].map((course, index) => (
-            <Link key={index} href={course.link} className="group">
+            <Link key={index} href={course.link} className="group h-full">
               <div
-                className={`relative overflow-hidden rounded-xl bg-white p-6 shadow-lg transition-all hover:-translate-y-1 hover:shadow-xl dark:bg-gray-800 ${
-                  course.title === 'Solution Architect' ? 'ring-2 ring-orange-400' : ''
+                className={`relative h-full overflow-hidden rounded-xl bg-white p-6 shadow-lg transition-all hover:-translate-y-1 hover:shadow-xl dark:bg-gray-800 ${
+                  course.featured
+                    ? 'ring-2 ring-purple-400'
+                    : course.title === 'Solution Architect'
+                    ? 'ring-2 ring-orange-400'
+                    : ''
                 }`}
               >
                 <div className="mb-4 flex h-16 w-16 items-center justify-center">
@@ -185,6 +202,8 @@ const Hero = () => {
                       alt={
                         course.code === 'VDE-C01'
                           ? 'DevOps Engineer'
+                          : course.code === 'VDT-C01'
+                          ? 'Data Engineer Bootcamp'
                           : `AWS ${course.title} certification`
                       }
                       width={48}
@@ -201,19 +220,25 @@ const Hero = () => {
                     </div>
                   )}
                 </div>
-                <h3 className="mb-2 font-semibold text-gray-900 dark:text-white">
-                  {course.code === 'VDE-C01'
-                    ? 'Course DevOps Engineer VDE-C01'
-                    : `AWS ${course.title} certification`}
-                </h3>
-                <p className="mb-3 text-sm text-gray-600 dark:text-gray-400">{course.level}</p>
-                <div className="flex items-center justify-between">
-                  <span className="text-sm font-medium text-orange-500 group-hover:text-orange-600">
-                    Xem chi tiết →
-                  </span>
-                  <span className="text-xs rounded bg-gray-100 px-2 py-1 font-mono text-gray-600 dark:bg-gray-700 dark:text-gray-400">
-                    {course.code}
-                  </span>
+                <div className="flex h-full flex-col justify-between">
+                  <div>
+                    <h3 className="mb-2 min-h-[2.5rem] font-semibold text-gray-900 dark:text-white">
+                      {course.code === 'VDE-C01'
+                        ? 'Course DevOps Engineer VDE-C01'
+                        : course.code === 'VDT-C01'
+                        ? 'Data Engineer Bootcamp VDT-C01'
+                        : `AWS ${course.title} certification`}
+                    </h3>
+                    <p className="mb-3 text-sm text-gray-600 dark:text-gray-400">{course.level}</p>
+                  </div>
+                  <div className="flex items-center justify-between">
+                    <span className="text-sm font-medium text-orange-500 group-hover:text-orange-600">
+                      Xem chi tiết →
+                    </span>
+                    <span className="text-xs rounded bg-gray-100 px-2 py-1 font-mono text-gray-600 dark:bg-gray-700 dark:text-gray-400">
+                      {course.code}
+                    </span>
+                  </div>
                 </div>
               </div>
             </Link>
diff --git a/css/tailwind.css b/css/tailwind.css
index 1dd6df53..df60ad4f 100644
--- a/css/tailwind.css
+++ b/css/tailwind.css
@@ -2,6 +2,146 @@
 @tailwind components;
 @tailwind utilities;
 
+@layer base {
+  :root {
+    color-scheme: light;
+    --app-bg: #f3f5f9;
+    --app-bg-soft: #e9edf5;
+    --app-surface: #ffffff;
+    --app-surface-muted: #f8fafc;
+    --app-border: #e2e8f0;
+    --app-border-strong: #cbd5e1;
+    --app-text: #0f172a;
+    --app-text-muted: #475569;
+    --app-accent: #f97316;
+    --app-accent-strong: #ea580c;
+    --app-shadow: 0 16px 36px rgba(15, 23, 42, 0.08);
+    --font-body: 'InterVariable', 'Inter', 'Segoe UI', sans-serif;
+    --font-display: 'InterVariable', 'Inter', 'Segoe UI', sans-serif;
+  }
+
+  .dark {
+    color-scheme: dark;
+    --app-bg: #090d16;
+    --app-bg-soft: #111827;
+    --app-surface: #111827;
+    --app-surface-muted: #161f2f;
+    --app-border: #23324a;
+    --app-border-strong: #334155;
+    --app-text: #e2e8f0;
+    --app-text-muted: #94a3b8;
+    --app-accent: #fb923c;
+    --app-accent-strong: #f97316;
+    --app-shadow: 0 18px 38px rgba(2, 6, 23, 0.45);
+  }
+
+  html,
+  body,
+  #__next {
+    min-height: 100%;
+  }
+
+  body {
+    font-family: var(--font-body);
+    color: var(--app-text);
+    background: radial-gradient(1400px 420px at 12% -8%, rgba(249, 115, 22, 0.16), transparent 55%),
+      radial-gradient(1200px 420px at 92% -12%, rgba(14, 165, 233, 0.14), transparent 56%),
+      linear-gradient(180deg, var(--app-bg-soft) 0%, var(--app-bg) 32%, var(--app-bg) 100%);
+    @apply antialiased selection:bg-orange-200 selection:text-slate-900 dark:selection:bg-orange-500/40 dark:selection:text-orange-50;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-family: var(--font-display);
+    letter-spacing: -0.015em;
+    color: var(--app-text);
+  }
+
+  a {
+    @apply transition-colors duration-200;
+  }
+
+  *:focus-visible {
+    outline: 2px solid rgba(249, 115, 22, 0.65);
+    outline-offset: 2px;
+  }
+}
+
+@layer components {
+  .app-shell {
+    @apply relative overflow-hidden;
+  }
+
+  .app-shell::before {
+    content: '';
+    position: absolute;
+    pointer-events: none;
+    inset: 0;
+    background: radial-gradient(700px 220px at 50% 0%, rgba(249, 115, 22, 0.09), transparent 65%),
+      linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, transparent 10%);
+    z-index: -1;
+  }
+
+  .surface-panel {
+    background: var(--app-surface);
+    border: 1px solid var(--app-border);
+    box-shadow: var(--app-shadow);
+    @apply rounded-2xl;
+  }
+
+  .surface-panel-muted {
+    background: var(--app-surface-muted);
+    border: 1px solid var(--app-border);
+    @apply rounded-2xl;
+  }
+
+  .soft-divider {
+    border-color: var(--app-border);
+  }
+
+  .page-heading {
+    @apply text-3xl font-extrabold leading-tight sm:text-4xl lg:text-5xl;
+  }
+
+  .page-eyebrow {
+    @apply mb-4 inline-flex items-center gap-2 rounded-full px-4 py-1.5 text-sm font-semibold;
+    background: rgba(249, 115, 22, 0.12);
+    color: var(--app-accent-strong);
+    border: 1px solid rgba(249, 115, 22, 0.25);
+  }
+
+  .page-lead {
+    color: var(--app-text-muted);
+    @apply mt-4 max-w-3xl text-base leading-8 sm:text-xl;
+  }
+
+  .action-btn-primary {
+    @apply inline-flex items-center justify-center rounded-xl px-5 py-2.5 text-sm font-semibold text-white transition-transform duration-200 sm:px-6 sm:py-3 sm:text-base;
+    background: linear-gradient(135deg, #f97316, #ea580c);
+    box-shadow: 0 14px 30px rgba(234, 88, 12, 0.3);
+  }
+
+  .action-btn-primary:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 18px 30px rgba(234, 88, 12, 0.36);
+  }
+
+  .action-btn-secondary {
+    @apply inline-flex items-center justify-center rounded-xl px-5 py-2.5 text-sm font-semibold transition-colors duration-200 sm:px-6 sm:py-3 sm:text-base;
+    background: var(--app-surface);
+    border: 1px solid var(--app-border-strong);
+    color: var(--app-text);
+  }
+
+  .action-btn-secondary:hover {
+    background: var(--app-surface-muted);
+  }
+}
+
 .task-list-item::before {
   @apply hidden;
 }
diff --git a/data/authors/default.md b/data/authors/default.md
index 1612eafb..d978c8b0 100644
--- a/data/authors/default.md
+++ b/data/authors/default.md
@@ -1,8 +1,8 @@
 ---
 name: Anh Cloud
 avatar: /static/images/authors/anhcloud.jpeg
-occupation: Cây bút chính
-company: VNTechies Dev blog
+occupation: Thầy đồ
+company: VNTechies
 email: anhcloud@vntechies.dev
 twitter: https://twitter.com/vn_techies
 facebook: https://fb.me/vntechies.cloud
diff --git a/data/authors/hanguyen.md b/data/authors/hanguyen.md
index ba88561c..c5d58a18 100644
--- a/data/authors/hanguyen.md
+++ b/data/authors/hanguyen.md
@@ -1,8 +1,12 @@
 ---
 name: Ha Nguyen
-avatar: /static/images/authors/hanguyen.jpg
-occupation: Thợ Code
-company: Công ty TNNH Một Mình Tui
+avatar: /static/images/authors/hanguyen.jpeg
+occupation: Senior DevOps Engineer | AWS Community Builder
+company: PLAYSTUDIOS ASIA
+isMentor: true
+studentCount: 10
+startYear: 2020
+successRate: 95
 facebook: https://fb.me/coangha13
 linkedin: https://www.linkedin.com/in/coangha13
 github: https://github.com/vippr1237
diff --git a/data/authors/hungran.md b/data/authors/hungran.md
index 57ebc1a9..fe008b00 100644
--- a/data/authors/hungran.md
+++ b/data/authors/hungran.md
@@ -2,7 +2,7 @@
 name: Hung Vu
 avatar: /static/images/authors/hungran.png
 occupation: Senior DevOps Engineer & AWS Authorized Instructor
-company: PlayStudios
+company: PLAYSTUDIOS ASIA
 email: hung@vntechies.dev
 startYear: 2015
 studentCount: 100
diff --git a/data/authors/monmen.md b/data/authors/monmen.md
index 5d8d1800..ef32b819 100644
--- a/data/authors/monmen.md
+++ b/data/authors/monmen.md
@@ -1,7 +1,8 @@
 ---
 name: Minh Monmen
 avatar: /static/images/authors/monmen.jpeg
-occupation: Solution Architect
-company: NA
+occupation: Solutions Architect / Tech Blogger
+company: Calif
 url: https://viblo.asia/u/monmen
+linkedin: https://www.linkedin.com/in/minhpq331/
 ---
diff --git a/data/authors/phuongnm.md b/data/authors/phuongnm.md
index cbcce866..bfd0e795 100644
--- a/data/authors/phuongnm.md
+++ b/data/authors/phuongnm.md
@@ -1,8 +1,8 @@
 ---
 name: Phuong NM
 avatar: /static/images/authors/phuongnm.png
-occupation: Senior DevOps Engineer & AWS Academy Educator
-company: VNTechies Dev blog
+occupation: Service Delivery Manager & AWS Academy Educator
+company: VNTechies
 email: phuong@vntechies.dev
 linkedin: https://www.linkedin.com/in/mrphuongbn
 facebook: https://fb.me/pnm99
diff --git a/data/blog/aws/architecting-s3-efficiently.mdx b/data/blog/aws/architecting-s3-efficiently.mdx
index a2e42afd..45edb7b5 100644
--- a/data/blog/aws/architecting-s3-efficiently.mdx
+++ b/data/blog/aws/architecting-s3-efficiently.mdx
@@ -37,7 +37,7 @@ Vấn đề cơ bản với object store là **chi phí listing**. Khi bạn có
 
 ### Các Scheme Phân Vùng
 
-**Hive-style partitioning** vẫn là pattern chủ lực. Bằng cách mã hóa giá trị partition trong key prefix (`s3://bucket/table/year=2024/month=01/day=15/`), bạn cho phép query planner loại bỏ toàn bộ cây thư mục trước khi thực hiện bất kỳ lệnh gọi LIST nào [1]. Điều này hoạt động tuyệt vời khi các predicate của query phù hợp với các cột partition.
+**Hive-style partitioning** vẫn là pattern chủ lực. Bằng cách mã hóa giá trị partition trong key prefix (`s3://bucket/table/year=2024/month=01/day=15/`), bạn cho phép query planner loại bỏ toàn bộ cây thư mục trước khi thực hiện bất kỳ lệnh gọi LIST nào [^1]. Điều này hoạt động tuyệt vời khi các predicate của query phù hợp với các cột partition.
 
 ```
 # Tốt: Phù hợp với các pattern query phổ biến
@@ -49,9 +49,9 @@ s3://data-lake/events/
         part-00001.parquet
 ```
 
-**Date-based partitioning** là một dạng chuyên biệt được tối ưu hóa cho workload time-series. Hầu hết các analytical query đều lọc theo cửa sổ thời gian, khiến phân vùng theo thời gian trở nên phù hợp tự nhiên. Các table format tối ưu hóa rõ ràng cho việc pruning partition theo ngày [1][2].
+**Date-based partitioning** là một dạng chuyên biệt được tối ưu hóa cho workload time-series. Hầu hết các analytical query đều lọc theo cửa sổ thời gian, khiến phân vùng theo thời gian trở nên phù hợp tự nhiên. Các table format tối ưu hóa rõ ràng cho việc pruning partition theo ngày [^1][^2].
 
-**Hash-based partitioning** (bucketing) giải quyết một vấn đề khác: write hotspot và kích thước partition không giới hạn. Bằng cách phân phối dữ liệu qua các bucket cố định sử dụng hàm hash, bạn giới hạn số lượng file trên mỗi logical partition và phân tán tải I/O qua các prefix [3]:
+**Hash-based partitioning** (bucketing) giải quyết một vấn đề khác: write hotspot và kích thước partition không giới hạn. Bằng cách phân phối dữ liệu qua các bucket cố định sử dụng hàm hash, bạn giới hạn số lượng file trên mỗi logical partition và phân tán tải I/O qua các prefix [^3]:
 
 ```
 # Hash bucketing trong date partition
@@ -76,7 +76,7 @@ Vấn đề lớn hơn là **chi phí listing**. Với hàng tỷ object, ngay c
 
 Đây là nơi các table format thể hiện giá trị. Thay vì listing S3 để phát hiện data file, hãy duy trì một **transaction log compact** hoặc **cấu trúc manifest**:
 
-**Delta Lake** sử dụng transaction log append-only được compact định kỳ thành các Parquet checkpoint. Khi bạn query một bảng, bạn đọc log (thường là một vài file JSON nhỏ) thay vì listing bucket. Điều này tăng tốc các thao tác metadata theo bậc độ lớn [1].
+**Delta Lake** sử dụng transaction log append-only được compact định kỳ thành các Parquet checkpoint. Khi bạn query một bảng, bạn đọc log (thường là một vài file JSON nhỏ) thay vì listing bucket. Điều này tăng tốc các thao tác metadata theo bậc độ lớn [^1].
 
 ```
 s3://bucket/table/
@@ -87,7 +87,7 @@ s3://bucket/table/
     00000000000000000020.checkpoint.parquet  # Metadata đã compact
 ```
 
-**Apache Iceberg** sử dụng mô hình manifest-of-manifests. File metadata cấp cao nhất trỏ đến manifest list, từ đó trỏ đến manifest, cuối cùng mô tả các data file. Hệ thống phân cấp này cho phép planner prune ở nhiều cấp độ mà không cần chạm vào data object [4]:
+**Apache Iceberg** sử dụng mô hình manifest-of-manifests. File metadata cấp cao nhất trỏ đến manifest list, từ đó trỏ đến manifest, cuối cùng mô tả các data file. Hệ thống phân cấp này cho phép planner prune ở nhiều cấp độ mà không cần chạm vào data object [^4]:
 
 ```
 metadata/
@@ -105,7 +105,7 @@ Insight chính: **coi metadata như một concern hạng nhất**. Listing S3 kh
 
 1. **Căn chỉnh physical layout với query predicate**: Nếu người dùng luôn lọc theo `customer_id`, hãy partition theo nó
 2. **Tránh hệ thống phân cấp sâu**: Hơn 3-4 cấp partition tạo ra độ phức tạp mà không có lợi ích
-3. **Đặt các update liên quan gần nhau**: Giữ các file delta nhỏ gần dữ liệu chúng sửa đổi để đơn giản hóa compaction [5]
+3. **Đặt các update liên quan gần nhau**: Giữ các file delta nhỏ gần dữ liệu chúng sửa đổi để đơn giản hóa compaction [^5]
 
 ---
 
@@ -122,7 +122,7 @@ Nhiều file nhỏ là nỗi ác mộng của object-store analytics:
 - **Opening overhead**: Thiết lập kết nối và đọc header cho mỗi file nhỏ tích lũy lại
 - **Giảm throughput**: Engine dành nhiều thời gian cho coordination hơn là xử lý dữ liệu
 
-Các table format được phát minh phần lớn để giải quyết điều này. Bằng cách theo dõi file trong metadata compact thay vì dựa vào LIST, chúng giảm chi phí planning. Nhưng chúng không loại bỏ hoàn toàn vấn đề—reader vẫn phải mở mọi file [1][3].
+Các table format được phát minh phần lớn để giải quyết điều này. Bằng cách theo dõi file trong metadata compact thay vì dựa vào LIST, chúng giảm chi phí planning. Nhưng chúng không loại bỏ hoàn toàn vấn đề—reader vẫn phải mở mọi file [^1][^3].
 
 ### Vấn Đề File Lớn
 
@@ -139,7 +139,7 @@ _Hình 3: Vấn đề kích thước file - So sánh file nhỏ, file lớn và
 
 ### Sweet Spot (Tùy Thuộc Vào Workload)
 
-Nghiên cứu về cloud-optimized columnar storage nhấn mạnh việc tối ưu hóa **cấu trúc within-file** (row group, stripe) hơn là chỉ kích thước file [6][7]. Tuy nhiên, hướng dẫn thực tế:
+Nghiên cứu về cloud-optimized columnar storage nhấn mạnh việc tối ưu hóa **cấu trúc within-file** (row group, stripe) hơn là chỉ kích thước file [^6][^7]. Tuy nhiên, hướng dẫn thực tế:
 
 **Cho OLAP scan workload:**
 
@@ -151,7 +151,7 @@ Nghiên cứu về cloud-optimized columnar storage nhấn mạnh việc tối 
 
 - Chấp nhận file nhỏ hơn (10MB-100MB) từ việc ghi thường xuyên
 - Compact mạnh mẽ để ngăn tích tụ
-- Sử dụng adaptive buffering để batch các micro-batch [5]
+- Sử dụng adaptive buffering để batch các micro-batch [^5]
 
 **Cho mixed workload:**
 
@@ -187,14 +187,14 @@ Compaction là quá trình ghi lại các file nhỏ hoặc phân mảnh thành
 - Merge 10-100 file nhỏ gần đây thành một vài file lớn hơn
 - Chạy liên tục trong background
 - Chi phí tài nguyên thấp, lợi ích ngay lập tức cho read performance
-- Giảm áp lực metadata mà không cần ghi lại toàn bộ partition [5]
+- Giảm áp lực metadata mà không cần ghi lại toàn bộ partition [^5]
 
 **Major compaction** là không thường xuyên và toàn cục:
 
 - Ghi lại toàn bộ partition để có layout tối ưu
 - Áp dụng các tối ưu hóa nâng cao (Z-ordering, clustering)
 - Tốn nhiều tài nguyên, thường được lên lịch trong giờ thấp điểm
-- Cung cấp hiệu suất đọc tối đa và metadata compaction [1][5]
+- Cung cấp hiệu suất đọc tối đa và metadata compaction [^1][^5]
 
 ### Kỹ Thuật Lấy Cảm Hứng Từ LSM-Tree
 
@@ -205,14 +205,14 @@ Mô hình LSM-tree ánh xạ tuyệt vời với object storage:
 3. **Merge các file L1 vào L2** khi đạt ngưỡng (major compaction)
 4. **Giữ kích thước tier bị giới hạn** để kiểm soát write amplification
 
-Cách tiếp cận phân tầng này giới hạn số lượng file mà reader phải quét trong khi giữ công việc compaction ở mức tăng dần [9][3].
+Cách tiếp cận phân tầng này giới hạn số lượng file mà reader phải quét trong khi giữ công việc compaction ở mức tăng dần [^9][^3].
 
 ![LSM-Tree Compaction](/static/images/assets/data-engineering/lsm_tree_compaction.png)
 _Hình 4: Quá trình compaction theo kiểu LSM-Tree với các tier từ L0 đến L3+_
 
-**Delta Lake** compact chính transaction log của nó—khi log phát triển quá lớn, nó được compact thành Parquet checkpoint. Metadata compaction này quan trọng không kém data compaction [1].
+**Delta Lake** compact chính transaction log của nó—khi log phát triển quá lớn, nó được compact thành Parquet checkpoint. Metadata compaction này quan trọng không kém data compaction [^1].
 
-**Apache Iceberg** hỗ trợ các thao tác file rewrite rõ ràng và manifest-level pruning. Nó có thể compact manifest riêng biệt với data file, tối ưu hóa metadata độc lập [4].
+**Apache Iceberg** hỗ trợ các thao tác file rewrite rõ ràng và manifest-level pruning. Nó có thể compact manifest riêng biệt với data file, tối ưu hóa metadata độc lập [^4].
 
 ### Lên Lịch Compaction và Quản Lý Tài Nguyên
 
@@ -224,7 +224,7 @@ Compaction tốn nhiều I/O và CPU. Best practice:
 4. **Sử dụng cluster compute riêng** cho compaction nếu có thể
 5. **Làm cho compaction policy có thể cấu hình** theo table/partition
 
-Các hệ thống production coi compaction như một **mối quan tâm về capacity planning**, không phải là điều suy nghĩ sau [5][3].
+Các hệ thống production coi compaction như một **mối quan tâm về capacity planning**, không phải là điều suy nghĩ sau [^5][^3].
 
 ### Write Amplification vs Read Performance
 
@@ -237,7 +237,7 @@ Sự cân bằng thực tế được sử dụng bởi các lakehouse system:
 
 - **Incremental compaction** cho dữ liệu gần đây (write amplification thấp)
 - **Occasional major rewrite** cho tối ưu hóa dài hạn
-- **Partition-level policy** compact các hot partition mạnh mẽ hơn [1][5]
+- **Partition-level policy** compact các hot partition mạnh mẽ hơn [^1][^5]
 
 ---
 
@@ -251,7 +251,7 @@ Read amplification—quét nhiều dữ liệu hơn cần thiết—là kẻ th
 
 1. **Push column projection** vào file reader để chỉ các cột cần thiết được deserialize
 2. **Push filter predicate** xuống để bỏ qua các row group không khớp
-3. **Sử dụng file footer metadata** để tránh mở các file không thể chứa kết quả [6][8]
+3. **Sử dụng file footer metadata** để tránh mở các file không thể chứa kết quả [^6][^8]
 
 Parquet và ORC được thiết kế cho điều này, nhưng **bạn phải điều chỉnh kích thước row group** để có được lợi ích. Row group quá lớn giảm độ chi tiết pruning; quá nhỏ tăng footer overhead.
 
@@ -272,14 +272,14 @@ Parquet và ORC được thiết kế cho điều này, nhưng **bạn phải đ
 
 Nếu một query lọc `user_id > 60000`, planner bỏ qua file này hoàn toàn.
 
-**Bloom filter** mở rộng điều này cho equality predicate. Iceberg và Hudi hỗ trợ per-file bloom filter cho các cột high-cardinality, cho phép kiểm tra membership nhanh [4][10].
+**Bloom filter** mở rộng điều này cho equality predicate. Iceberg và Hudi hỗ trợ per-file bloom filter cho các cột high-cardinality, cho phép kiểm tra membership nhanh [^4][^10].
 
 **Zone map** (min/max index) được duy trì ở cả:
 
 - **File level** (trong table metadata)
 - **Row group level** (trong Parquet footer)
 
-Cách tiếp cận hai tầng này cho phép pruning thô trong quá trình planning và pruning tinh trong quá trình scanning [7].
+Cách tiếp cận hai tầng này cho phép pruning thô trong quá trình planning và pruning tinh trong quá trình scanning [^7].
 
 ![Read Amplification Optimization](/static/images/assets/data-engineering/read_amplification_optimization.png)
 _Hình 5: Tối ưu hóa Read Amplification - Pruning ở cấp file, row group và column_
@@ -291,7 +291,7 @@ _Hình 5: Tối ưu hóa Read Amplification - Pruning ở cấp file, row group
 - **Row group lớn hơn** → Footer overhead ít hơn, nén tốt hơn
 - **Row group nhỏ hơn** → Pruning chi tiết hơn, selectivity tốt hơn
 
-Nghiên cứu cho thấy rằng tối ưu hóa layout **trong và qua các ranh giới row group** cung cấp lợi ích throughput đáng kể trên cloud object storage [6]. Khuyến nghị thực tế:
+Nghiên cứu cho thấy rằng tối ưu hóa layout **trong và qua các ranh giới row group** cung cấp lợi ích throughput đáng kể trên cloud object storage [^6]. Khuyến nghị thực tế:
 
 - **128MB row group** cho general-purpose analytics
 - **256MB row group** cho scan-heavy workload
@@ -301,7 +301,7 @@ Cũng xem xét **row group alignment**:
 
 - Sắp xếp dữ liệu trước khi ghi để cluster các giá trị liên quan
 - Sử dụng Z-ordering hoặc Hilbert curve cho multi-dimensional clustering
-- Lệnh OPTIMIZE của Delta Lake triển khai điều này [1]
+- Lệnh OPTIMIZE của Delta Lake triển khai điều này [^1]
 
 ### Metadata-First Planning
 
@@ -314,7 +314,7 @@ Các table format hiện đại lưu trữ:
 - Partition information
 - Schema evolution history
 
-Metadata này được lưu trữ trong các file Avro hoặc Parquet compact, không phải trong chính data file. Planner đọc metadata trước, prune mạnh mẽ, sau đó chỉ đọc tập hợp tối thiểu các data file [4][1].
+Metadata này được lưu trữ trong các file Avro hoặc Parquet compact, không phải trong chính data file. Planner đọc metadata trước, prune mạnh mẽ, sau đó chỉ đọc tập hợp tối thiểu các data file [^4][^1].
 
 ---
 
@@ -330,7 +330,7 @@ Hãy xem các table format chính áp dụng các nguyên tắc này như thế
 
 - Transaction log theo dõi tất cả file mà không cần S3 listing
 - Log compaction hợp nhất các entry thành Parquet checkpoint
-- Lệnh OPTIMIZE trigger data file compaction [1]
+- Lệnh OPTIMIZE trigger data file compaction [^1]
 
 **Thuật toán compaction**:
 
@@ -342,7 +342,7 @@ Hãy xem các table format chính áp dụng các nguyên tắc này như thế
 
 - Append-only JSON log cho atomicity
 - Periodic Parquet checkpoint cho fast read
-- Time travel qua log replay [1]
+- Time travel qua log replay [^1]
 
 **Tốt nhất cho**: Team muốn operation đơn giản với ACID guarantee
 
@@ -354,19 +354,19 @@ Hãy xem các table format chính áp dụng các nguyên tắc này như thế
 
 - Manifest theo dõi file, tránh các thao tác LIST lặp lại
 - Manifest compaction tách biệt với data compaction
-- File-level statistic cho phép aggressive pruning [4]
+- File-level statistic cho phép aggressive pruning [^4]
 
 **Thuật toán compaction**:
 
 - Explicit rewrite operation qua API
 - Hỗ trợ cả copy-on-write và merge-on-read
-- Deletion vector cho delete hiệu quả [10]
+- Deletion vector cho delete hiệu quả [^10]
 
 **Quản lý metadata**:
 
 - Immutable metadata file với snapshot pointer
 - Manifest list cho hierarchical pruning
-- Extensive per-file statistic (min/max, null count, bloom filter) [4]
+- Extensive per-file statistic (min/max, null count, bloom filter) [^4]
 
 **Tốt nhất cho**: Team cần kiểm soát chi tiết và multi-engine compatibility
 
@@ -377,19 +377,19 @@ Hãy xem các table format chính áp dụng các nguyên tắc này như thế
 **Xử lý file nhỏ**:
 
 - COW: Ghi lại file ngay lập tức, tránh tích tụ file nhỏ
-- MOR: Chấp nhận delta log nhỏ, compact bất đồng bộ [3][11]
+- MOR: Chấp nhận delta log nhỏ, compact bất đồng bộ [^3][^11]
 
 **Thuật toán compaction**:
 
 - MOR: Incremental log được merge vào base file định kỳ
 - COW: Không cần compaction, file đã được tối ưu hóa
-- Configurable compaction strategy theo table [3]
+- Configurable compaction strategy theo table [^3]
 
 **Quản lý metadata**:
 
 - Timeline service theo dõi commit và compaction
 - File-level index cho upsert và incremental read
-- Metadata table cho fast query [11]
+- Metadata table cho fast query [^11]
 
 **Tốt nhất cho**: Team với streaming ingestion và update-heavy workload
 
@@ -537,7 +537,7 @@ Theo dõi các metric này:
 
 ## 8. Performance Benchmark và Kỳ Vọng
 
-Dựa trên LST-Bench và các triển khai thực tế [3]:
+Dựa trên LST-Bench và các triển khai thực tế [^3]:
 
 **Metadata operation:**
 
@@ -583,27 +583,17 @@ Cuộc cách mạng lakehouse đã cho thấy rằng object storage có thể s
 
 ## Tài Liệu Tham Khảo
 
-[1] Armbrust, M., Das, T., Sun, L., et al. (2020). Delta lake: high-performance ACID table storage over cloud object stores. _Proceedings of the VLDB Endowment_, 13(12). DOI: 10.14778/3415478.3415560
-
-[2] Towards Optimizing Storage Costs on the Cloud (2023). arXiv:2305.14818
-
-[3] Camacho-Rodríguez, J., Agrawal, A., Gruenheid, A., et al. (2023). LST-Bench: Benchmarking Log-Structured Tables in the Cloud. arXiv:2305.01120
-
-[4] Bringhurst, R., & Vuppalapati, R. (2024). _Apache Iceberg: The Definitive Guide_. O'Reilly Media.
-
-[5] Okolnychyi, A., Sun, C., Tanimura, K., et al. (2024). Petabyte-Scale Row-Level Operations in Data Lakehouses. _Proceedings of the VLDB Endowment_, 17(11). DOI: 10.14778/3685800.3685834
-
-[6] Bian, H., & Ailamaki, A. (2022). Pixels: An Efficient Column Store for Cloud Data Lakes. _Proceedings of ICDE 2022_. DOI: 10.1109/icde53745.2022.00276
-
-[7] FlatStor: An Efficient Embedded-Index Based Columnar Data Layout for Multimodal Data Workloads. _Proceedings of the VLDB Endowment_, 2024.
-
-[8] Durner, D., Leis, V., & Neumann, T. (2023). Exploiting Cloud Object Storage for High-Performance Analytics. _Proceedings of the VLDB Endowment_, 16(11). DOI: 10.14778/3611479.3611486
-
-[9] Kalmuk, D., Garcia-Arellano, C., Barber, R., et al. (2024). Native Cloud Object Storage in Db2 Warehouse: Implementing a Fast and Cost-Efficient Cloud Storage Architecture. _Proceedings of ACM SIGMOD 2024_. DOI: 10.1145/3626246.3653393
-
-[10] High Performance Read Operations in Merge-On-Read with Deletion Vectors in Apache Iceberg (2025). SAR Council Technical Report.
-
-[11] Jain, P., Kraft, P., Power, C., et al. (2024). Analyzing and Comparing Lakehouse Storage Systems. Technical Report.
+[^1]: Armbrust, M., Das, T., Sun, L., et al. (2020). Delta lake: high-performance ACID table storage over cloud object stores. _Proceedings of the VLDB Endowment_, 13(12). DOI: 10.14778/3415478.3415560
+[^2]: Towards Optimizing Storage Costs on the Cloud (2023). arXiv:2305.14818
+[^3]: Camacho-Rodríguez, J., Agrawal, A., Gruenheid, A., et al. (2023). LST-Bench: Benchmarking Log-Structured Tables in the Cloud. arXiv:2305.01120
+[^4]: Bringhurst, R., & Vuppalapati, R. (2024). _Apache Iceberg: The Definitive Guide_. O'Reilly Media.
+[^5]: Okolnychyi, A., Sun, C., Tanimura, K., et al. (2024). Petabyte-Scale Row-Level Operations in Data Lakehouses. _Proceedings of the VLDB Endowment_, 17(11). DOI: 10.14778/3685800.3685834
+[^6]: Bian, H., & Ailamaki, A. (2022). Pixels: An Efficient Column Store for Cloud Data Lakes. _Proceedings of ICDE 2022_. DOI: 10.1109/icde53745.2022.00276
+[^7]: FlatStor: An Efficient Embedded-Index Based Columnar Data Layout for Multimodal Data Workloads. _Proceedings of the VLDB Endowment_, 2024.
+[^8]: Durner, D., Leis, V., & Neumann, T. (2023). Exploiting Cloud Object Storage for High-Performance Analytics. _Proceedings of the VLDB Endowment_, 16(11). DOI: 10.14778/3611479.3611486
+[^9]: Kalmuk, D., Garcia-Arellano, C., Barber, R., et al. (2024). Native Cloud Object Storage in Db2 Warehouse: Implementing a Fast and Cost-Efficient Cloud Storage Architecture. _Proceedings of ACM SIGMOD 2024_. DOI: 10.1145/3626246.3653393
+[^10]: High Performance Read Operations in Merge-On-Read with Deletion Vectors in Apache Iceberg (2025). SAR Council Technical Report.
+[^11]: Jain, P., Kraft, P., Power, C., et al. (2024). Analyzing and Comparing Lakehouse Storage Systems. Technical Report.
 
 ---
 
diff --git a/data/courses/data-engineer-bootcamp/gioi-thieu.mdx b/data/courses/data-engineer-bootcamp/gioi-thieu.mdx
index fd046bd7..e2b9803c 100644
--- a/data/courses/data-engineer-bootcamp/gioi-thieu.mdx
+++ b/data/courses/data-engineer-bootcamp/gioi-thieu.mdx
@@ -1,5 +1,5 @@
 ---
-title: 'ĐỘC QUYỀN: Data Engineer Bootcamp'
+title: 'ĐỘC QUYỀN: Data Engineer Bootcamp (VDT-C01)'
 images: ['/static/images/courses/data-bootcamp.png']
 summary: 'Khóa học Data Engineering từ cơ bản đến nâng cao với thực hành thực tế'
 tags: ['data-engineering', 'big-data', 'data-lakehouse', 'spark', 'kafka']
@@ -15,7 +15,7 @@ schedule: '19:00 - 21:00 - UTC+7'
 location: 'Online qua Google Meet'
 ---
 
-## Data Engineer Bootcamp – 9 Tuần (18 Buổi)
+## Data Engineer Bootcamp (VDT-C01) – 9 Tuần (18 Buổi)
 
 Khóa học **Data Engineer Bootcamp** được thiết kế để trang bị cho học viên các kỹ năng cần thiết để trở thành Data Engineer chuyên nghiệp. Khóa học tập trung vào việc xây dựng các pipeline xử lý dữ liệu từ cơ bản đến nâng cao, bao gồm batch processing, streaming, và data lakehouse architecture.
 
diff --git a/data/courses/devops/gioi-thieu.mdx b/data/courses/devops/gioi-thieu.mdx
index ac781282..17b73588 100644
--- a/data/courses/devops/gioi-thieu.mdx
+++ b/data/courses/devops/gioi-thieu.mdx
@@ -1,5 +1,5 @@
 ---
-title: 'ĐỘC QUYỀN: Khoá học trở thành DevOps Engineer (VDE-C01)'
+title: 'ĐỘC QUYỀN: DevOps Engineer Bootcamp (VDE-C01)'
 images: ['/static/images/courses/devopseng01.png']
 summary: 'DevOps từ cơ bản đến nâng cao'
 tags: ['devops']
@@ -8,5 +8,5 @@ layout: CourseDevOps
 date: '2025-10-10'
 isFree: false
 index: 0
-price: '7.199.000 VNĐ'
+price: '8.000.000 VNĐ'
 ---
diff --git a/data/siteMetadata.js b/data/siteMetadata.js
index 34ff3a56..8527e392 100644
--- a/data/siteMetadata.js
+++ b/data/siteMetadata.js
@@ -26,7 +26,7 @@ const siteMetadata = {
   youtube: 'https://www.youtube.com/@vntechies',
   linkedin: 'https://linkedin.com/company/vntechies',
   messenger: 'https://m.me/vntechies',
-  tiktok: 'https://www.tiktok.com/@vntechies.dev',
+  tiktok: 'https://www.tiktok.com/@vntechies',
   discord: 'https://discord.com/invite/YecagKUqpS',
   locale: 'vi-VN',
   analytics: {
diff --git a/layouts/CourseData.js b/layouts/CourseData.js
index 1727a1d3..ce22904c 100644
--- a/layouts/CourseData.js
+++ b/layouts/CourseData.js
@@ -45,7 +45,7 @@ const testimonials = [
 ]
 
 const courseInfo = {
-  title: 'Data Engineer Bootcamp – 9 Tuần (18 Buổi)',
+  title: 'Data Engineer Bootcamp (VDT-C01) – 9 Tuần (18 Buổi)',
   subtitle: 'Từ Zero đến Hero với Data Engineering - Lộ trình đào tạo toàn diện',
   image: '/static/images/courses/dae-hero.png',
   startDate: '02/03/2025',
@@ -368,7 +368,7 @@ export default function CourseData({ frontMatter, mentorDetails, otherCourses =
                   Bootcamp
                 </span>
               </h1>
-              <p className="text-xl font-bold text-gray-500 sm:text-2xl">(18 Buổi - 09 tuần)</p>
+              <p className="text-xl font-bold text-gray-500 sm:text-2xl">(VDT-C01)</p>
             </div>
 
             <div className="grid items-center gap-16 lg:grid-cols-2">
@@ -875,7 +875,7 @@ export default function CourseData({ frontMatter, mentorDetails, otherCourses =
       </section>
 
       {/* Registration Form */}
-      <CourseRegistrationForm courseTitle="Data Engineer Bootcamp" theme="purple" />
+      <CourseRegistrationForm courseTitle="VDT-C01" theme="purple" />
 
       {/* Testimonials */}
       <section className="bg-slate-50 py-20 dark:bg-slate-800">
diff --git a/layouts/CourseDevOps.js b/layouts/CourseDevOps.js
index d4cd86e6..b316f507 100644
--- a/layouts/CourseDevOps.js
+++ b/layouts/CourseDevOps.js
@@ -43,7 +43,7 @@ const testimonials = [
 ]
 
 const courseInfo = {
-  title: 'ĐỘC QUYỀN: Khoá học trở thành DevOps Engineer từ Zero',
+  title: 'ĐỘC QUYỀN: Khoá học DevOps Engineer Bootcamp',
   subtitle: 'Từ Zero đến Hero với DevOps - Lộ trình đào tạo toàn diện',
   image: '/static/images/courses/devopseng01-hero.png',
   startDate: '9/10/2025',
diff --git a/layouts/CourseSimple.js b/layouts/CourseSimple.js
index 269c1a14..4598ae78 100644
--- a/layouts/CourseSimple.js
+++ b/layouts/CourseSimple.js
@@ -10,7 +10,6 @@ import { useRouter } from 'next/router'
 
 export default function CourseSimple({
   frontMatter,
-  authorDetails,
   next,
   prev,
   posts = [],
@@ -18,103 +17,78 @@ export default function CourseSimple({
   children,
 }) {
   const router = useRouter()
-  const { index, title, slug, summary, date, readingTime, images, fileName } = frontMatter
+  const { title, slug, summary, date, readingTime, images, fileName } = frontMatter
+
+  const renderCourseLinks = () => (
+    <ul className="mt-3 space-y-1.5">
+      {posts.map((post) => {
+        const isActive = router.asPath === `/courses/${post.slug}`
+        return (
+          <li
+            key={post.slug}
+            ref={
+              isActive
+                ? (el) => {
+                    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'center' })
+                  }
+                : null
+            }
+          >
+            <a
+              className={`block rounded-lg px-3 py-2 text-sm leading-6 transition-colors ${
+                isActive
+                  ? 'bg-orange-100 font-semibold text-orange-700 dark:bg-orange-900/40 dark:text-orange-300'
+                  : 'text-slate-700 hover:bg-slate-200 dark:text-slate-300 dark:hover:bg-slate-700'
+              }`}
+              href={`/courses/${post.slug}`}
+            >
+              {post.title}
+            </a>
+          </li>
+        )
+      })}
+    </ul>
+  )
 
   return (
     <SectionContainer>
       <ScrollTopAndComment />
-      <article>
-        <div className="xl:divide-y xl:divide-gray-200 xl:dark:divide-gray-700">
-          <header className="pt-6 xl:pb-6 xl:pt-12">
-            <div className="space-y-1 text-center">
-              <div className="max-w-2lg container mx-auto">
-                <h1 className="text-2xl font-bold leading-9 tracking-tight text-black dark:text-gray-50 sm:text-3xl sm:leading-10 md:text-5xl md:leading-14">
-                  {title}
-                </h1>
-              </div>
-              {summary && (
-                <div className="flex justify-center space-x-4">
-                  <div>
-                    <p className="text-medium leading-6 text-gray-500 dark:text-gray-400 ">
-                      {summary}
-                    </p>
-                  </div>
-                </div>
-              )}
-              <div className="flex flex-row items-center justify-center gap-2 pt-4 text-sm font-semibold text-gray-700 dark:text-gray-300">
-                <dt className="sr-only">Đăng vào</dt>
-                <dd className="">
-                  <time dateTime={date} className="text-sm font-semibold">
-                    {formatDate(date)}
-                  </time>
-                </dd>{' '}
-                {readingTime && (
-                  <>
-                    • <span>{`${readingTime.text.replace('min read', 'phút')}`}</span>
-                  </>
-                )}
-              </div>
-            </div>
-          </header>
+      <article className="surface-panel overflow-hidden px-3 py-6 sm:px-6 lg:px-8">
+        <header className="pb-4 text-center">
+          <span className="page-eyebrow mx-auto">Bài học</span>
+          <h1 className="page-heading text-slate-900 dark:text-slate-100">{title}</h1>
+          {summary && <p className="page-lead mx-auto mt-3 max-w-3xl">{summary}</p>}
+          <div className="mt-4 flex flex-wrap items-center justify-center gap-2 text-sm font-semibold text-slate-600 dark:text-slate-300">
+            <time dateTime={date}>{formatDate(date)}</time>
+            {readingTime && <span>- {readingTime.text.replace('min read', 'phút đọc')}</span>}
+          </div>
+        </header>
 
-          <div className="visible pr-4 pt-6 pb-6 md:invisible md:h-0 md:pt-0 md:pb-0 md:pr-0 xl:border-b xl:border-gray-200 xl:pt-11 xl:dark:border-gray-700">
-            <h3 className="dark:text-secondary-400 text-xl font-bold text-primary-600">Nội dung</h3>
-            <ul className="my-4">
-              {posts.map((post) => (
-                <li key={post.slug}>
-                  <a
-                    className={`my-2 block rounded-md py-4 px-2 text-sm text-gray-800 hover:bg-gray-200 dark:text-gray-300 hover:dark:bg-gray-800 ${
-                      router.asPath === `/courses/${post.slug}`
-                        ? 'bg-gray-200 font-bold text-primary-400 dark:bg-gray-800 dark:text-primary-400'
-                        : ''
-                    }`}
-                    href={`/courses/${post.slug}`}
-                  >
-                    {post.title}
-                  </a>
-                </li>
-              ))}
-            </ul>
+        <div className="md:hidden">
+          <div className="surface-panel-muted mb-6 p-4">
+            <h3 className="text-sm font-bold uppercase tracking-wide text-slate-700 dark:text-slate-200">
+              Nội dung khóa học
+            </h3>
+            {renderCourseLinks()}
           </div>
-          <div
-            className="divide-y divide-gray-200 pb-8 dark:divide-gray-700 md:grid md:grid-cols-3 md:gap-x-4 md:divide-y-0"
-            style={{ gridTemplateRows: 'auto 1fr' }}
-          >
-            <div className="invisible pt-0 pb-0 pr-4 md:visible md:pt-6 md:pb-10 md:pr-0 xl:border-b xl:border-gray-200 xl:pt-11 xl:dark:border-gray-700">
-              <div className="sticky top-8 h-0 overflow-y-scroll md:h-[calc(100vh-5.75rem)]">
-                <h3 className="dark:text-secondary-400 text-xl font-bold text-primary-600">
-                  Nội dung khoá học
+        </div>
+
+        <div className="grid gap-6 md:grid-cols-[290px,1fr]">
+          <aside className="hidden md:block">
+            <div className="sticky top-24 space-y-6">
+              <div className="surface-panel-muted max-h-[calc(100vh-8rem)] overflow-y-auto p-4">
+                <h3 className="text-sm font-bold uppercase tracking-wide text-slate-700 dark:text-slate-200">
+                  Nội dung khóa học
                 </h3>
-                <ul className="my-4">
-                  {posts.map((post) => (
-                    <li
-                      key={post.slug}
-                      ref={
-                        router.asPath === `/courses/${post.slug}`
-                          ? (el) => {
-                              if (el) el.scrollIntoView({ behavior: 'smooth' })
-                            }
-                          : null
-                      }
-                    >
-                      <a
-                        className={`my-2 block rounded-md py-4 px-2 text-sm text-gray-800 hover:bg-gray-200 dark:text-gray-300 hover:dark:bg-gray-800 ${
-                          router.asPath === `/courses/${post.slug}`
-                            ? 'bg-gray-200 font-bold text-primary-400 dark:bg-gray-800 dark:text-primary-400'
-                            : ''
-                        }`}
-                        href={`/courses/${post.slug}`}
-                      >
-                        {post.title}
-                      </a>
-                    </li>
-                  ))}
-                </ul>
-                <div className="hidden border-t border-gray-200 pt-12 dark:border-gray-700 md:block">
-                  <h3 className="dark:text-secondary-400 text-xl font-bold text-primary-600">
-                    Khoá học khác
+                {renderCourseLinks()}
+              </div>
+
+              {otherCourses.length > 0 && (
+                <div className="surface-panel-muted p-4">
+                  <h3 className="text-sm font-bold uppercase tracking-wide text-slate-700 dark:text-slate-200">
+                    Khóa học khác
                   </h3>
-                  <div className="flex flex-col gap-5 text-sm font-medium">
+                  <div className="mt-3 flex flex-col gap-3">
                     {otherCourses.map((course) => (
                       <HorizontalCard
                         key={course.title}
@@ -125,77 +99,57 @@ export default function CourseSimple({
                     ))}
                   </div>
                 </div>
-              </div>
-            </div>
-            <div className="divide-y divide-gray-200 px-2 dark:divide-gray-700 md:col-span-2 md:row-span-1 md:pb-0 lg:px-8">
-              {images && images[0] && (
-                <div className="prose max-w-none pt-10 text-base dark:prose-dark">
-                  <div className="mb-8 mt-4">
-                    <Image
-                      alt={title}
-                      className="rounded object-cover"
-                      src={images[0]}
-                      layout="responsive"
-                      width={640}
-                      height={400}
-                      quality={75}
-                      loading="lazy"
-                    />
-                  </div>
-                </div>
               )}
-              <Share fileName={fileName} href={`/courses/${slug}`} />
-              <div className="prose max-w-none pt-10 pb-8 text-base dark:prose-dark">
-                {children}
+            </div>
+          </aside>
+
+          <div className="min-w-0">
+            {images?.[0] && (
+              <div className="mb-6 overflow-hidden rounded-2xl border border-slate-200 dark:border-slate-700">
+                <Image
+                  alt={title}
+                  className="h-auto w-full object-cover"
+                  src={images[0]}
+                  width={1200}
+                  height={760}
+                  quality={75}
+                  loading="lazy"
+                />
               </div>
-              <footer>
-                <div className="flex flex-col text-sm font-medium sm:flex-row sm:justify-between sm:text-base">
-                  {!prev && (
-                    <div className="pt-4 xl:pt-8">
-                      <button
-                        rel="previous"
-                        className="cursor-auto disabled:opacity-50"
-                        disabled={!prev}
-                      >
-                        👈 Bài trước
-                      </button>
-                    </div>
-                  )}
-                  {prev && (
-                    <div className="pt-4 xl:pt-8">
-                      👈{' '}
-                      <Link
-                        href={`/courses/${prev.slug}`}
-                        className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
-                      >
-                        {prev.title}
-                      </Link>
-                    </div>
-                  )}
-                  {!next && (
-                    <div className="pt-4 xl:pt-8">
-                      <button
-                        rel="previous"
-                        className="cursor-auto disabled:opacity-50"
-                        disabled={!next}
-                      >
-                        Bài sau 👉
-                      </button>
-                    </div>
-                  )}
-                  {next && (
-                    <div className="pt-4 xl:pt-8">
-                      <Link
-                        href={`/courses/${next.slug}`}
-                        className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
-                      >
-                        {next.title}
-                      </Link>{' '}
-                      👉
-                    </div>
-                  )}
-                </div>
-              </footer>
+            )}
+
+            <Share fileName={fileName} href={`/courses/${slug}`} />
+            <div className="prose mt-8 max-w-none text-base dark:prose-dark">{children}</div>
+
+            <footer className="mt-10 flex flex-col gap-3 text-sm font-semibold sm:flex-row sm:justify-between sm:text-base">
+              {prev ? (
+                <Link
+                  href={`/courses/${prev.slug}`}
+                  className="inline-flex items-center rounded-lg border border-orange-200 bg-orange-50 px-4 py-2 text-orange-700 hover:bg-orange-100 dark:border-orange-700/60 dark:bg-orange-900/30 dark:text-orange-300 dark:hover:bg-orange-900/50"
+                >
+                  ← {prev.title}
+                </Link>
+              ) : (
+                <span className="inline-flex items-center rounded-lg border border-slate-200 bg-slate-100 px-4 py-2 text-slate-400 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-500">
+                  ← Bài trước
+                </span>
+              )}
+
+              {next ? (
+                <Link
+                  href={`/courses/${next.slug}`}
+                  className="inline-flex items-center rounded-lg border border-orange-200 bg-orange-50 px-4 py-2 text-orange-700 hover:bg-orange-100 dark:border-orange-700/60 dark:bg-orange-900/30 dark:text-orange-300 dark:hover:bg-orange-900/50"
+                >
+                  {next.title} →
+                </Link>
+              ) : (
+                <span className="inline-flex items-center rounded-lg border border-slate-200 bg-slate-100 px-4 py-2 text-slate-400 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-500">
+                  Bài sau →
+                </span>
+              )}
+            </footer>
+
+            <div className="mt-10">
               <Comments frontMatter={frontMatter} />
             </div>
           </div>
diff --git a/layouts/DocumentLayout.js b/layouts/DocumentLayout.js
index c7fc5fe5..153c081b 100644
--- a/layouts/DocumentLayout.js
+++ b/layouts/DocumentLayout.js
@@ -10,16 +10,13 @@ export default function DocumentLayout({ children, frontMatter }) {
         title={`${title} - ${siteMetadata.title}`}
         description={`${title} - ${siteMetadata.title}`}
       />
-      <div className="divide-y divide-gray-200 dark:divide-gray-700">
-        <div className="space-y-2 pt-6 pb-8 md:space-y-5">
-          <h1 className="md:text-6xl text-3xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl sm:leading-10 md:leading-14">
-            {title}
-          </h1>
-        </div>
-        <div className="items-start space-y-2 xl:grid xl:gap-x-8 xl:space-y-0">
-          <div className="prose max-w-none pt-8 pb-8 dark:prose-dark">{children}</div>
-        </div>
-      </div>
+      <article className="surface-panel overflow-hidden px-4 py-8 sm:px-8 lg:px-10">
+        <header className="mb-8">
+          <span className="page-eyebrow">Tài liệu</span>
+          <h1 className="page-heading text-slate-900 dark:text-slate-100">{title}</h1>
+        </header>
+        <div className="prose max-w-none pb-4 dark:prose-dark">{children}</div>
+      </article>
     </>
   )
 }
diff --git a/layouts/ListLayout.js b/layouts/ListLayout.js
index 5ea5a7a7..9eb4f634 100644
--- a/layouts/ListLayout.js
+++ b/layouts/ListLayout.js
@@ -5,7 +5,8 @@ import ArticleList from '@/components/ArticleList'
 export default function ListLayout({ posts, title, initialDisplayPosts = [], pagination }) {
   const [searchValue, setSearchValue] = useState('')
   const filteredBlogPosts = posts.filter((frontMatter) => {
-    const searchContent = frontMatter.title + frontMatter.summary + frontMatter.tags.join(' ')
+    const tags = frontMatter.tags || []
+    const searchContent = frontMatter.title + frontMatter.summary + tags.join(' ')
     return searchContent.toLowerCase().includes(searchValue.toLowerCase())
   })
 
@@ -15,22 +16,24 @@ export default function ListLayout({ posts, title, initialDisplayPosts = [], pag
 
   return (
     <>
-      <div className="divide-y divide-gray-200 dark:divide-gray-700">
-        <div className="space-y-2 pt-6 pb-8 md:space-y-5">
-          <h1 className="md:text-6xl text-3xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl sm:leading-10 md:leading-14">
-            {title}
-          </h1>
-          <div className="relative max-w-lg">
+      <section className="pb-4">
+        <div className="mb-8">
+          <span className="page-eyebrow">Kho tri thức</span>
+          <h1 className="page-heading text-slate-900 dark:text-slate-100">{title}</h1>
+          <p className="page-lead">Tìm kiếm bài viết theo tiêu đề, tóm tắt hoặc chủ đề.</p>
+        </div>
+        <div className="surface-panel-muted relative max-w-xl p-3">
+          <div className="relative">
             <input
               aria-label="Search articles"
               type="text"
               onChange={(e) => setSearchValue(e.target.value)}
               placeholder="Tìm bài viết"
-              className="block w-full rounded-md border border-gray-300 bg-white px-4 py-2 text-gray-900 focus:border-primary-500 focus:ring-primary-500 dark:border-gray-900 dark:bg-gray-800 dark:text-gray-100"
+              className="block w-full rounded-xl border border-slate-300 bg-white px-4 py-3 pr-12 text-sm text-slate-800 placeholder:text-slate-400 focus:border-orange-400 focus:outline-none focus:ring-2 focus:ring-orange-200 dark:border-slate-600 dark:bg-slate-900 dark:text-slate-100 dark:placeholder:text-slate-500 dark:focus:ring-orange-500/30"
             />
             <svg
-              className="absolute right-3 top-3 h-5 w-5 text-gray-400 dark:text-gray-300"
-              xmlns="https://www.w3.org/2000/svg"
+              className="absolute right-4 top-3.5 h-5 w-5 text-slate-400 dark:text-slate-500"
+              xmlns="http://www.w3.org/2000/svg"
               fill="none"
               viewBox="0 0 24 24"
               stroke="currentColor"
@@ -44,21 +47,24 @@ export default function ListLayout({ posts, title, initialDisplayPosts = [], pag
             </svg>
           </div>
         </div>
-        <div className="container mx-auto py-8">
-          <div className="grid grid-cols-1 gap-8 md:grid-cols-2 xl:grid-cols-3">
-            {!filteredBlogPosts.length && 'Không có bài viết nào.'}
-            {displayPosts.map((frontMatter) => {
-              return (
-                <ArticleList
-                  key={frontMatter.title}
-                  {...frontMatter}
-                  image={frontMatter.images[0]}
-                />
-              )
-            })}
-          </div>
+      </section>
+
+      <section className="py-6">
+        <div className="grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-3">
+          {!displayPosts.length && (
+            <div className="surface-panel col-span-full p-8 text-center">
+              <p className="text-sm text-slate-600 dark:text-slate-300">
+                {searchValue ? 'Không tìm thấy bài viết phù hợp.' : 'Không có bài viết nào.'}
+              </p>
+            </div>
+          )}
+          {displayPosts.map((frontMatter) => {
+            return (
+              <ArticleList key={frontMatter.title} {...frontMatter} image={frontMatter.images[0]} />
+            )
+          })}
         </div>
-      </div>
+      </section>
       {pagination && pagination.totalPages > 1 && !searchValue && (
         <Pagination currentPage={pagination.currentPage} totalPages={pagination.totalPages} />
       )}
diff --git a/layouts/PostLayout.js b/layouts/PostLayout.js
index c71ff144..939680f7 100644
--- a/layouts/PostLayout.js
+++ b/layouts/PostLayout.js
@@ -11,16 +11,30 @@ import Share from '@/components/Share'
 import HorizontalCard from '@/components/HorizontalCard'
 import SummaryButton from '@/components/SummaryButton'
 
-// const editUrl = (fileName) => `${siteMetadata.siteRepo}/blob/master/data/blog/${fileName}`
-// const discussUrl = (slug) =>
-//   `https://mobile.twitter.com/search?q=${encodeURIComponent(
-//     `${siteMetadata.siteUrl}/blog/${slug}`
-//   )}`
-
 const postDateTemplate = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }
 
+const formatFacebookHandle = (facebookUrl) => {
+  if (!facebookUrl) return ''
+
+  try {
+    const parsed = new URL(facebookUrl)
+    const rawPath = parsed.pathname.replace(/^\/+|\/+$/g, '')
+    if (!rawPath) return facebookUrl
+
+    // fb.me/<nick> and facebook.com/<nick> -> @nick
+    if (parsed.hostname.includes('fb.me') || parsed.hostname.includes('facebook.com')) {
+      const handle = rawPath.split('/')[0]
+      return handle ? `@${handle}` : facebookUrl
+    }
+  } catch {
+    return facebookUrl.replace('https://fb.me/', '@')
+  }
+
+  return facebookUrl
+}
+
 export default function PostLayout({ frontMatter, authorDetails, next, prev, children }) {
-  const { slug, fileName, date, title, images, tags } = frontMatter
+  const { slug, date, title, tags } = frontMatter
 
   return (
     <SectionContainer>
@@ -35,114 +49,134 @@ export default function PostLayout({ frontMatter, authorDetails, next, prev, chi
           typeof children === 'string' ? children : children?.props?.children?.toString() || title
         }
       />
-      <article>
-        <div className="xl:divide-y xl:divide-gray-200 xl:dark:divide-gray-700">
-          <header className="pt-6 xl:pb-6">
-            <div className="space-y-1 text-center">
-              <dl className="space-y-10">
-                <div>
-                  <dt className="sr-only">Đăng vào</dt>
-                  <dd className="text-base font-medium leading-6 text-gray-500 dark:text-gray-400">
-                    <time dateTime={date}>
-                      {new Date(date).toLocaleDateString(siteMetadata.locale, postDateTemplate)}
-                    </time>
-                  </dd>
-                </div>
-              </dl>
-              <div>
-                <PageTitle>{title}</PageTitle>
-              </div>
-            </div>
-          </header>
-          <div
-            className="divide-y divide-gray-200 pb-8 dark:divide-gray-700 xl:grid xl:grid-cols-4 xl:gap-x-6 xl:divide-y-0"
-            style={{ gridTemplateRows: 'auto 1fr' }}
-          >
-            <dl className="pt-6 pb-6 xl:pt-11">
-              <dt className="sr-only">Tác giả</dt>
-              <dd>
-                <ul className="flex justify-center space-x-8 sm:space-x-12 xl:block xl:space-x-0 xl:space-y-8">
-                  {authorDetails &&
-                    authorDetails.map((author) => (
-                      <li className="flex items-center space-x-2" key={author.name}>
-                        {author.avatar && (
-                          <Image
-                            src={author.avatar}
-                            width="38"
-                            height="38"
-                            alt="avatar"
-                            className="h-38 w-38 rounded-full"
-                            quality={75}
-                            loading="lazy"
-                          />
-                        )}
-                        <dl className="whitespace-nowrap text-sm font-medium leading-5">
-                          <dt className="sr-only">Name</dt>
-                          <dd className="text-gray-900 dark:text-gray-100">{author.name}</dd>
-                          <dt className="sr-only">Facebook</dt>
-                          <dd>
-                            {author.facebook && (
+
+      <article className="surface-panel overflow-hidden px-4 py-8 sm:px-8 lg:px-10">
+        <header className="mx-auto max-w-3xl text-center">
+          <span className="page-eyebrow mx-auto">
+            <time dateTime={date}>
+              {new Date(date).toLocaleDateString(siteMetadata.locale, postDateTemplate)}
+            </time>
+          </span>
+          <PageTitle>{title}</PageTitle>
+        </header>
+
+        <div className="mt-10 grid gap-8 xl:grid-cols-[230px,1fr]">
+          <aside className="space-y-5 xl:sticky xl:top-28 xl:self-start">
+            <div className="surface-panel-muted p-4 sm:p-5">
+              <h2 className="text-xs mb-4 font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">
+                Tác giả
+              </h2>
+              <ul className="space-y-4">
+                {authorDetails &&
+                  authorDetails.map((author) => {
+                    const facebookHandle = formatFacebookHandle(author.facebook)
+
+                    return (
+                      <li className="flex items-start gap-3" key={author.name}>
+                        {author.avatar &&
+                          (author.slug ? (
+                            <Link href={`/authors/${author.slug}`} className="flex-shrink-0">
+                              <Image
+                                src={author.avatar}
+                                width={44}
+                                height={44}
+                                alt={author.name}
+                                className="h-11 w-11 rounded-full object-cover"
+                                quality={75}
+                                loading="lazy"
+                              />
+                            </Link>
+                          ) : (
+                            <Image
+                              src={author.avatar}
+                              width={44}
+                              height={44}
+                              alt={author.name}
+                              className="h-11 w-11 rounded-full object-cover"
+                              quality={75}
+                              loading="lazy"
+                            />
+                          ))}
+
+                        <div className="min-w-0">
+                          {author.slug ? (
+                            <Link
+                              href={`/authors/${author.slug}`}
+                              className="block text-sm font-semibold leading-snug text-slate-900 hover:text-orange-600 dark:text-slate-100 dark:hover:text-orange-300"
+                            >
+                              {author.name}
+                            </Link>
+                          ) : (
+                            <p className="text-sm font-semibold leading-snug text-slate-900 dark:text-slate-100">
+                              {author.name}
+                            </p>
+                          )}
+
+                          {author.facebook && (
+                            <div className="mt-1 space-y-1">
                               <Link
                                 href={author.facebook}
-                                className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
+                                className="text-xs block font-medium text-orange-600 hover:text-orange-500 dark:text-orange-300 dark:hover:text-orange-200"
                               >
-                                {author.facebook.replace('https://fb.me/', '@')}
+                                {facebookHandle}
                               </Link>
-                            )}
-                          </dd>
-                        </dl>
+                            </div>
+                          )}
+                        </div>
                       </li>
-                    ))}
-                </ul>
-              </dd>
-            </dl>
-            <div className="xl:col-span-3 xl:row-span-2 xl:pb-0">
-              <div className="prose max-w-none pt-10 pb-8 dark:prose-dark">{children}</div>
-              <Share fileName={frontMatter.fileName} href={`/blog/${frontMatter.slug}`} />
+                    )
+                  })}
+              </ul>
+            </div>
+
+            {tags && (
+              <div className="surface-panel-muted p-4 sm:p-5">
+                <h2 className="text-xs mb-4 font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">
+                  Chủ đề
+                </h2>
+                <div className="flex flex-wrap">
+                  {tags.map((tag) => (
+                    <Tag key={tag} text={tag} />
+                  ))}
+                </div>
+              </div>
+            )}
+          </aside>
+
+          <div>
+            <div className="prose max-w-none pb-8 pt-2 dark:prose-dark">{children}</div>
+            <Share fileName={frontMatter.fileName} href={`/blog/${frontMatter.slug}`} />
+            <div className="mt-8">
               <Comments frontMatter={frontMatter} />
             </div>
-            <footer>
-              <div className="text-sm font-medium leading-5 xl:col-start-1 xl:row-start-2">
-                {tags && (
-                  <div className="py-4 xl:py-8">
-                    <h2 className="text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400">
-                      Tags
-                    </h2>
-                    <div className="flex flex-wrap">
-                      {tags.map((tag) => (
-                        <Tag key={tag} text={tag} />
-                      ))}
-                    </div>
-                  </div>
+
+            {(next || prev) && (
+              <div className="mt-8 grid grid-cols-1 gap-4 md:grid-cols-2">
+                {prev && (
+                  <HorizontalCard
+                    title={prev.title}
+                    image={prev.images[0]}
+                    href={`/blog/${prev.slug}`}
+                  />
                 )}
-                {(next || prev) && (
-                  <div className="my-4 hidden grid-cols-1 gap-4 dark:border-gray-800 md:grid">
-                    {prev && (
-                      <HorizontalCard
-                        title={prev.title}
-                        image={prev.images[0]}
-                        href={`/blog/${prev.slug}`}
-                      />
-                    )}
-                    {next && (
-                      <HorizontalCard
-                        title={next.title}
-                        image={next.images[0]}
-                        href={`/blog/${next.slug}`}
-                      />
-                    )}
-                  </div>
+                {next && (
+                  <HorizontalCard
+                    title={next.title}
+                    image={next.images[0]}
+                    href={`/blog/${next.slug}`}
+                  />
                 )}
               </div>
-              <div className="pt-4 xl:pt-8">
-                <Link
-                  href="/blog"
-                  className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
-                >
-                  👈 Quay trở lại blog
-                </Link>
-              </div>
-            </footer>
+            )}
+
+            <div className="pt-8">
+              <Link
+                href="/blog"
+                className="inline-flex items-center rounded-lg border border-orange-200 bg-orange-50 px-4 py-2 text-sm font-semibold text-orange-700 hover:bg-orange-100 dark:border-orange-700/60 dark:bg-orange-900/30 dark:text-orange-300 dark:hover:bg-orange-900/50"
+              >
+                ← Quay trở lại blog
+              </Link>
+            </div>
           </div>
         </div>
       </article>
diff --git a/layouts/PostSimple.js b/layouts/PostSimple.js
index 4ccc9f0c..e1bd874a 100644
--- a/layouts/PostSimple.js
+++ b/layouts/PostSimple.js
@@ -9,9 +9,10 @@ import Image from '@/components/Image'
 import HorizontalCard from '@/components/HorizontalCard'
 import SummaryButton from '@/components/SummaryButton'
 
-export default function PostLayout({ frontMatter, authorDetails, next, prev, children }) {
+export default function PostLayout({ frontMatter, next, prev, children }) {
   const { date, title, images } = frontMatter
   const postDateTemplate = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }
+  const cover = images?.[0] || '/static/images/default-ogp.png'
 
   return (
     <SectionContainer>
@@ -22,64 +23,61 @@ export default function PostLayout({ frontMatter, authorDetails, next, prev, chi
           typeof children === 'string' ? children : children?.props?.children?.toString() || title
         }
       />
-      <article>
-        <div>
-          <header>
-            <div className="space-y-1 border-b border-gray-200 pb-10 text-center dark:border-gray-700">
-              <dl>
-                <div>
-                  <dd className="text-base font-medium leading-6 text-gray-500 dark:text-gray-400">
-                    <time dateTime={date}>
-                      {new Date(date).toLocaleDateString(siteMetadata.locale, postDateTemplate)}
-                    </time>
-                  </dd>
-                </div>
-              </dl>
-              <div>
-                <PageTitle>{title}</PageTitle>
-              </div>
+
+      <article className="surface-panel overflow-hidden px-4 py-8 sm:px-8 lg:px-10">
+        <header className="mx-auto max-w-3xl text-center">
+          <span className="page-eyebrow mx-auto">
+            <time dateTime={date}>
+              {new Date(date).toLocaleDateString(siteMetadata.locale, postDateTemplate)}
+            </time>
+          </span>
+          <PageTitle>{title}</PageTitle>
+        </header>
+
+        <div className="mx-auto mt-8 max-w-4xl overflow-hidden rounded-2xl">
+          <Image
+            alt={title}
+            className="h-auto w-full object-cover"
+            src={cover}
+            width={1200}
+            height={760}
+            loading="lazy"
+          />
+        </div>
+
+        <div className="mx-auto mt-10 max-w-4xl">
+          <div className="prose prose-neutral max-w-none pb-8 dark:prose-dark">{children}</div>
+          <Comments frontMatter={frontMatter} />
+        </div>
+
+        {(prev || next) && (
+          <footer className="mx-auto mt-8 max-w-4xl">
+            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+              {prev && (
+                <HorizontalCard
+                  title={prev.title}
+                  image={prev.images[0]}
+                  href={`/blog/${prev.slug}`}
+                />
+              )}
+              {next && (
+                <HorizontalCard
+                  title={next.title}
+                  image={next.images[0]}
+                  href={`/blog/${next.slug}`}
+                />
+              )}
             </div>
-          </header>
-          <div className="mb-8 mt-4">
-            <Image
-              alt={title}
-              className="rounded object-cover"
-              src={images[0]}
-              layout="responsive"
-              width={640}
-              height={400}
-              loading="lazy"
-            />
-          </div>
-          <div
-            className="divide-y divide-gray-200 pb-8 dark:divide-gray-700 xl:divide-y-0 "
-            style={{ gridTemplateRows: 'auto 1fr' }}
+          </footer>
+        )}
+
+        <div className="mx-auto mt-8 max-w-4xl">
+          <Link
+            href="/blog"
+            className="inline-flex items-center rounded-lg border border-orange-200 bg-orange-50 px-4 py-2 text-sm font-semibold text-orange-700 hover:bg-orange-100 dark:border-orange-700/60 dark:bg-orange-900/30 dark:text-orange-300 dark:hover:bg-orange-900/50"
           >
-            <div className="grid grid-cols-6 gap-4 divide-y divide-gray-200 dark:divide-gray-700 xl:col-span-3 xl:row-span-2 xl:pb-0">
-              <div className="prose prose-neutral col-span-6 max-w-none pt-10 pb-8 dark:prose-dark md:col-span-4 md:col-start-2">
-                {children}
-              </div>
-            </div>
-            <Comments frontMatter={frontMatter} />
-            <footer>
-              <div className="flex grid flex-col gap-5 text-sm font-medium sm:flex-row sm:justify-between sm:text-base md:grid-cols-2">
-                {prev && (
-                  <HorizontalCard
-                    title={prev.title}
-                    image={prev.images[0]}
-                    href={`/blog/${prev.slug}`}
-                  />
-                )}
-                {next && (
-                  <HorizontalCard
-                    title={next.title}
-                    image={next.images[0]}
-                    href={`/blog/${next.slug}`}
-                  />
-                )}
-              </div>
-            </footer>
-          </div>
+            ← Quay trở lại blog
+          </Link>
         </div>
       </article>
     </SectionContainer>
diff --git a/pages/404.js b/pages/404.js
index 66912cb0..c6088fcd 100644
--- a/pages/404.js
+++ b/pages/404.js
@@ -6,28 +6,27 @@ export default function FourZeroFour() {
   return (
     <>
       <PageSEO title={`Lạc lối - ${siteMetadata.headerTitle}`} />
-      <div className="flex flex-col items-start justify-start md:mt-24 md:flex-row md:items-center md:justify-center md:space-x-6">
-        <div className="space-x-2 pt-6 pb-8 md:space-y-5">
-          <h1 className="text-6xl md:text-8xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 md:border-r-2 md:px-6 md:leading-14">
-            404
-          </h1>
-        </div>
-        <div className="max-w-md">
-          <p className="mb-4 text-xl font-bold leading-normal md:text-2xl">
-            Xin lỗi, không tìm thấy trang bạn vừa yêu cầu 😅
-          </p>
-          <p className="mb-8">Đừng lo, VNTechies còn nhiều bài viết khác 🤩</p>
-          <p className="text-lg leading-7">
-            Quay về{' '}
-            <Link alt="Trang chủ" href="/">
-              <button className="hover-underline-animation inline-flex flex-row items-center gap-2 font-bold">
-                trang chủ
-                <svg style={{ width: '24px', height: '24px' }} viewBox="0 0 24 24">
-                  <path fill="currentColor" d="M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z"></path>
-                </svg>
-              </button>
-            </Link>
-          </p>
+      <div className="mx-auto max-w-4xl py-12 sm:py-20">
+        <div className="surface-panel grid items-center gap-8 p-8 sm:p-12 md:grid-cols-[180px,1fr]">
+          <div className="text-center md:border-r md:border-slate-200 md:pr-8 md:text-left dark:md:border-slate-700">
+            <h1 className="text-7xl font-black tracking-tight text-slate-900 dark:text-slate-100">
+              404
+            </h1>
+          </div>
+          <div>
+            <span className="page-eyebrow mb-3">Trang không tồn tại</span>
+            <h2 className="text-2xl font-bold text-slate-900 dark:text-slate-100 sm:text-3xl">
+              Xin lỗi, không tìm thấy trang bạn vừa yêu cầu.
+            </h2>
+            <p className="mt-3 text-base leading-7 text-slate-600 dark:text-slate-300">
+              Bạn có thể quay lại trang chủ để tiếp tục đọc các bài viết mới nhất.
+            </p>
+            <div className="mt-6">
+              <Link alt="Trang chủ" href="/" className="action-btn-primary">
+                Về trang chủ
+              </Link>
+            </div>
+          </div>
         </div>
       </div>
     </>
diff --git a/pages/_app.js b/pages/_app.js
index c67b8433..7d96aaac 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -1,7 +1,6 @@
 import '@/css/tailwind.css'
 import '@/css/prism.css'
 import 'katex/dist/katex.css'
-
 import '@fontsource/inter/variable-full.css'
 
 import { ThemeProvider } from 'next-themes'
diff --git a/pages/about.js b/pages/about.js
index 150fe01f..02c747c4 100644
--- a/pages/about.js
+++ b/pages/about.js
@@ -1,21 +1,267 @@
-import { MDXLayoutRenderer } from '@/components/MDXComponents'
-import { getFileBySlug } from '@/lib/mdx'
+import Image from '@/components/Image'
+import Link from '@/components/Link'
+import { PageSEO } from '@/components/SEO'
+import siteMetadata from '@/data/siteMetadata'
+import { getAllFilesFrontMatter } from '@/lib/mdx'
 
-const DEFAULT_LAYOUT = 'AuthorLayout'
+const SOCIAL_FIELDS = [
+  { key: 'linkedin', label: 'LinkedIn' },
+  { key: 'github', label: 'GitHub' },
+  { key: 'facebook', label: 'Facebook' },
+  { key: 'twitter', label: 'X/Twitter' },
+  { key: 'website', label: 'Website' },
+  { key: 'url', label: 'Profile' },
+]
+
+const toNumber = (value) => {
+  const num = Number(value)
+  return Number.isFinite(num) ? num : 0
+}
+
+const getYearsLabel = (startYear) => {
+  const year = toNumber(startYear)
+  if (!year) return null
+
+  const years = new Date().getFullYear() - year
+  if (years <= 0) return null
+
+  return `${years}+ năm kinh nghiệm`
+}
+
+const getAuthorSocials = (author) => {
+  const socials = SOCIAL_FIELDS.filter((item) => author[item.key]).map((item) => ({
+    label: item.label,
+    href: author[item.key],
+  }))
+
+  if (author.email) {
+    socials.push({ label: 'Email', href: `mailto:${author.email}` })
+  }
+
+  return socials.slice(0, 4)
+}
+
+const sortByName = (a, b) => (a.name || '').localeCompare(b.name || '', 'vi')
 
 export async function getStaticProps() {
-  const authorDetails = await getFileBySlug('authors', ['default'])
-  return { props: { authorDetails } }
+  const authors = await getAllFilesFrontMatter('authors')
+  const posts = await getAllFilesFrontMatter('blog')
+
+  const postCountMap = posts.reduce((acc, post) => {
+    const postAuthors = post.authors || ['default']
+    postAuthors.forEach((authorSlug) => {
+      acc[authorSlug] = (acc[authorSlug] || 0) + 1
+    })
+    return acc
+  }, {})
+
+  const normalizedAuthors = authors
+    .filter((author) => author.slug)
+    .map((author) => ({
+      ...author,
+      postCount: postCountMap[author.slug] || 0,
+      yearsLabel: getYearsLabel(author.startYear),
+      socials: getAuthorSocials(author),
+    }))
+
+  const mentors = normalizedAuthors
+    .filter((author) => author.isMentor)
+    .sort((a, b) => toNumber(b.studentCount) - toNumber(a.studentCount) || sortByName(a, b))
+
+  const contributors = normalizedAuthors
+    .filter((author) => !author.isMentor)
+    .sort((a, b) => toNumber(b.postCount) - toNumber(a.postCount) || sortByName(a, b))
+
+  const totalStudents = mentors.reduce((sum, mentor) => sum + toNumber(mentor.studentCount), 0)
+
+  return {
+    props: {
+      mentors,
+      contributors,
+      stats: {
+        mentorCount: mentors.length,
+        authorCount: normalizedAuthors.length,
+        totalStudents,
+      },
+    },
+  }
 }
 
-export default function About({ authorDetails }) {
-  const { mdxSource, frontMatter } = authorDetails
+function ProfileCard({ person, isMentor = false }) {
+  const avatar = person.avatar || '/static/images/authors/anhcloud.jpeg'
+
+  return (
+    <article className="surface-panel flex h-full flex-col p-5 sm:p-6">
+      <div className="flex items-start gap-4">
+        <Image
+          src={avatar}
+          alt={person.name || 'Author avatar'}
+          width={72}
+          height={72}
+          className="h-16 w-16 rounded-2xl object-cover sm:h-20 sm:w-20"
+        />
+
+        <div className="min-w-0">
+          <h3 className="text-lg font-black leading-6 text-slate-900 dark:text-slate-100">
+            {person.name}
+          </h3>
+          {person.occupation && (
+            <p className="mt-1 text-sm font-semibold text-orange-600 dark:text-orange-300">
+              {person.occupation}
+            </p>
+          )}
+          {person.company && (
+            <p className="text-xs mt-1 text-slate-500 dark:text-slate-400">{person.company}</p>
+          )}
+        </div>
+      </div>
+
+      <div className="mt-4 flex flex-wrap gap-2">
+        {isMentor && (
+          <span className="rounded-full bg-orange-100 px-2.5 py-1 text-[11px] font-semibold text-orange-700 dark:bg-orange-900/40 dark:text-orange-300">
+            Mentor
+          </span>
+        )}
+        {person.yearsLabel && (
+          <span className="rounded-full bg-slate-100 px-2.5 py-1 text-[11px] font-semibold text-slate-700 dark:bg-slate-800 dark:text-slate-300">
+            {person.yearsLabel}
+          </span>
+        )}
+        {!!toNumber(person.studentCount) && (
+          <span className="rounded-full bg-sky-100 px-2.5 py-1 text-[11px] font-semibold text-sky-700 dark:bg-sky-900/40 dark:text-sky-300">
+            {toNumber(person.studentCount).toLocaleString('vi-VN')}+ học viên
+          </span>
+        )}
+        {!!toNumber(person.postCount) && (
+          <span className="rounded-full bg-emerald-100 px-2.5 py-1 text-[11px] font-semibold text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-300">
+            {toNumber(person.postCount)} bài viết
+          </span>
+        )}
+      </div>
+
+      {person.socials?.length > 0 && (
+        <div className="mt-4 flex flex-wrap gap-2">
+          {person.socials.map((social) => (
+            <a
+              key={`${person.slug}-${social.label}`}
+              href={social.href}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-xs rounded-lg border border-slate-200 bg-white px-2.5 py-1 font-semibold text-slate-600 hover:border-orange-300 hover:text-orange-600 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-300 dark:hover:border-orange-600 dark:hover:text-orange-300"
+            >
+              {social.label}
+            </a>
+          ))}
+        </div>
+      )}
+
+      <Link
+        href={`/authors/${person.slug}`}
+        className="mt-5 inline-flex items-center text-sm font-bold text-orange-600 hover:text-orange-500 dark:text-orange-300 dark:hover:text-orange-200"
+      >
+        Xem hồ sơ
+        <span className="ml-1">→</span>
+      </Link>
+    </article>
+  )
+}
 
+export default function About({ mentors, contributors, stats }) {
   return (
-    <MDXLayoutRenderer
-      layout={frontMatter.layout || DEFAULT_LAYOUT}
-      mdxSource={mdxSource}
-      frontMatter={frontMatter}
-    />
+    <>
+      <PageSEO
+        title={`Giới thiệu đội ngũ - ${siteMetadata.title}`}
+        description="Danh sách đầy đủ mentor và tác giả tại VNTechies. Kết nối cùng đội ngũ giàu kinh nghiệm Cloud, DevOps và Data."
+      />
+
+      <section className="pb-8 pt-8 sm:pb-10 sm:pt-10">
+        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+          <div className="mx-auto max-w-4xl text-center">
+            <span className="page-eyebrow">Về VNTechies</span>
+            <h1 className="text-4xl font-black leading-tight text-slate-900 dark:text-slate-100 sm:text-5xl">
+              Đội ngũ mentor và tác giả
+            </h1>
+            <p className="page-lead mx-auto">
+              Kết nối với đội ngũ chuyên gia Cloud, DevOps, Data, AI đang trực tiếp triển khai dự án
+              chia sẻ kiến thức thực chiến cho cộng đồng.
+            </p>
+          </div>
+
+          <div className="mx-auto mt-8 grid max-w-5xl gap-3 sm:grid-cols-3">
+            <div className="surface-panel-muted p-4 text-center">
+              <p className="text-3xl font-black text-slate-900 dark:text-slate-100">
+                {stats.mentorCount}
+              </p>
+              <p className="text-xs font-semibold text-slate-500 dark:text-slate-400 sm:text-sm">
+                Mentor
+              </p>
+            </div>
+            <div className="surface-panel-muted p-4 text-center">
+              <p className="text-3xl font-black text-slate-900 dark:text-slate-100">
+                {stats.authorCount}
+              </p>
+              <p className="text-xs font-semibold text-slate-500 dark:text-slate-400 sm:text-sm">
+                Author Profile
+              </p>
+            </div>
+            <div className="surface-panel-muted p-4 text-center">
+              <p className="text-3xl font-black text-slate-900 dark:text-slate-100">
+                {stats.totalStudents.toLocaleString('vi-VN')}+
+              </p>
+              <p className="text-xs font-semibold text-slate-500 dark:text-slate-400 sm:text-sm">
+                Học viên đã hỗ trợ
+              </p>
+            </div>
+          </div>
+
+          <div className="mt-8 flex flex-wrap justify-center gap-3">
+            <Link href="/courses/register" className="action-btn-primary">
+              Nhận tư vấn học tập
+            </Link>
+            <Link href="/courses" className="action-btn-secondary">
+              Xem các khóa học
+            </Link>
+          </div>
+        </div>
+      </section>
+
+      <section className="py-10 sm:py-14">
+        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+          <div className="mb-8 flex items-end justify-between gap-4">
+            <div>
+              <span className="page-eyebrow">Mentor</span>
+              <h2 className="text-3xl font-black text-slate-900 dark:text-slate-100 sm:text-4xl">
+                Mentor trực tiếp đồng hành
+              </h2>
+            </div>
+          </div>
+
+          <div className="grid gap-5 sm:grid-cols-2 xl:grid-cols-3">
+            {mentors.map((mentor) => (
+              <ProfileCard key={mentor.slug} person={mentor} isMentor />
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {contributors.length > 0 && (
+        <section className="pb-12 pt-4 sm:pb-16">
+          <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+            <div className="mb-8">
+              <span className="page-eyebrow">Author</span>
+              <h2 className="text-3xl font-black text-slate-900 dark:text-slate-100 sm:text-4xl">
+                Tác giả và cộng tác viên
+              </h2>
+            </div>
+
+            <div className="grid gap-5 sm:grid-cols-2 xl:grid-cols-3">
+              {contributors.map((contributor) => (
+                <ProfileCard key={contributor.slug} person={contributor} />
+              ))}
+            </div>
+          </div>
+        </section>
+      )}
+    </>
   )
 }
diff --git a/pages/aws-certification-paths.js b/pages/aws-certification-paths.js
index d33fa73a..655703fd 100644
--- a/pages/aws-certification-paths.js
+++ b/pages/aws-certification-paths.js
@@ -1356,7 +1356,7 @@ export default function AWSCertificationPaths() {
           </div>
           <div className="bg-gradient-to-r from-purple-600 to-pink-600 px-6 py-2 text-white">
             <h3 id="data-analytics" className="text-lg font-semibold">
-              Phân tích dữ liệu - Data Analytics
+              Data Engineering - Data Engineer Bootcamp (VDT-C01)
             </h3>
           </div>
 
diff --git a/pages/blog/[...slug].js b/pages/blog/[...slug].js
index 27f8e376..a4093aa5 100644
--- a/pages/blog/[...slug].js
+++ b/pages/blog/[...slug].js
@@ -27,7 +27,7 @@ export async function getStaticProps({ params }) {
   const authorList = post.frontMatter.authors || ['default']
   const authorPromise = authorList.map(async (author) => {
     const authorResults = await getFileBySlug('authors', [author])
-    return authorResults.frontMatter
+    return { ...authorResults.frontMatter, slug: author }
   })
   const authorDetails = await Promise.all(authorPromise)
 
diff --git a/pages/career.js b/pages/career.js
index 1c863034..4b7486be 100644
--- a/pages/career.js
+++ b/pages/career.js
@@ -11,13 +11,12 @@ export default function Career() {
     minutes: 0,
     seconds: 0,
   })
+  const launchDate = new Date('2026-10-15T00:00:00+07:00').getTime()
 
   useEffect(() => {
-    const targetDate = new Date('2025-10-15T00:00:00+07:00').getTime()
-
     const timer = setInterval(() => {
       const now = new Date().getTime()
-      const difference = targetDate - now
+      const difference = launchDate - now
 
       if (difference > 0) {
         setTimeLeft({
@@ -26,11 +25,13 @@ export default function Career() {
           minutes: Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60)),
           seconds: Math.floor((difference % (1000 * 60)) / 1000),
         })
+      } else {
+        setTimeLeft({ days: 0, hours: 0, minutes: 0, seconds: 0 })
       }
     }, 1000)
 
     return () => clearInterval(timer)
-  }, [])
+  }, [launchDate])
 
   return (
     <>
@@ -39,80 +40,96 @@ export default function Career() {
         description="VNTechies Career Center đang được phát triển - Coming Soon"
       />
 
-      <div className="mx-auto max-w-4xl px-4 py-16">
-        <div className="text-center">
-          {/* Header */}
-          <div className="mb-12">
-            <h1 className="mb-4 text-5xl font-bold text-gray-900 dark:text-gray-100">
+      <div className="mx-auto max-w-5xl px-4 py-12 sm:py-16">
+        <div className="space-y-8">
+          <div className="text-center">
+            <span className="page-eyebrow">Coming Soon</span>
+            <h1 className="page-heading text-slate-900 dark:text-slate-100">
               VNTechies Career Center
             </h1>
-            <p className="text-xl text-gray-600 dark:text-gray-300">Đang xây dựng - Coming Soon</p>
+            <p className="page-lead mx-auto">
+              Nền tảng kết nối việc làm Cloud, DevOps và Data dành cho cộng đồng kỹ sư Việt.
+            </p>
           </div>
 
-          {/* Countdown Timer */}
-          <div className="mb-12 rounded-2xl bg-gradient-to-br from-orange-50 to-orange-100 p-8 dark:from-orange-900/20 dark:to-orange-800/20">
+          <div className="surface-panel p-6 sm:p-8">
             <div className="mb-6 flex items-center justify-center gap-2">
-              <FaClock className="h-6 w-6 text-orange-600" />
-              <h2 className="text-2xl font-bold text-gray-900 dark:text-gray-100">Ra mắt trong</h2>
+              <FaClock className="h-5 w-5 text-orange-500" />
+              <h2 className="text-xl font-bold text-slate-900 dark:text-slate-100">Ra mắt trong</h2>
             </div>
-
-            <div className="grid grid-cols-4 gap-4">
-              <div className="rounded-lg bg-white p-4 shadow-lg dark:bg-gray-800">
-                <div className="text-3xl font-bold text-orange-600">{timeLeft.days}</div>
-                <div className="text-sm font-medium text-gray-600 dark:text-gray-400">Ngày</div>
+            <div className="grid grid-cols-2 gap-3 sm:grid-cols-4 sm:gap-4">
+              <div className="surface-panel-muted p-4 text-center">
+                <div className="text-3xl font-black text-orange-600 dark:text-orange-300">
+                  {timeLeft.days}
+                </div>
+                <div className="text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">
+                  Ngày
+                </div>
               </div>
-              <div className="rounded-lg bg-white p-4 shadow-lg dark:bg-gray-800">
-                <div className="text-3xl font-bold text-orange-600">{timeLeft.hours}</div>
-                <div className="text-sm font-medium text-gray-600 dark:text-gray-400">Giờ</div>
+              <div className="surface-panel-muted p-4 text-center">
+                <div className="text-3xl font-black text-orange-600 dark:text-orange-300">
+                  {timeLeft.hours}
+                </div>
+                <div className="text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">
+                  Giờ
+                </div>
               </div>
-              <div className="rounded-lg bg-white p-4 shadow-lg dark:bg-gray-800">
-                <div className="text-3xl font-bold text-orange-600">{timeLeft.minutes}</div>
-                <div className="text-sm font-medium text-gray-600 dark:text-gray-400">Phút</div>
+              <div className="surface-panel-muted p-4 text-center">
+                <div className="text-3xl font-black text-orange-600 dark:text-orange-300">
+                  {timeLeft.minutes}
+                </div>
+                <div className="text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">
+                  Phút
+                </div>
               </div>
-              <div className="rounded-lg bg-white p-4 shadow-lg dark:bg-gray-800">
-                <div className="text-3xl font-bold text-orange-600">{timeLeft.seconds}</div>
-                <div className="text-sm font-medium text-gray-600 dark:text-gray-400">Giây</div>
+              <div className="surface-panel-muted p-4 text-center">
+                <div className="text-3xl font-black text-orange-600 dark:text-orange-300">
+                  {timeLeft.seconds}
+                </div>
+                <div className="text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">
+                  Giây
+                </div>
               </div>
             </div>
           </div>
 
-          {/* Features Preview */}
-          <div className="mb-12 rounded-xl bg-white p-8 shadow-lg dark:bg-gray-800">
-            <h3 className="mb-6 text-2xl font-bold text-gray-900 dark:text-gray-100">Sắp có gì?</h3>
-            <div className="grid gap-6 md:grid-cols-3">
-              <div className="text-center">
-                <div className="mb-3 text-4xl">💼</div>
-                <h4 className="mb-2 font-semibold text-gray-900 dark:text-gray-100">Job Board</h4>
-                <p className="text-sm text-gray-600 dark:text-gray-400">
-                  Tìm việc Cloud/DevOps phù hợp
+          <div className="surface-panel p-6 sm:p-8">
+            <h3 className="mb-6 text-2xl font-bold text-slate-900 dark:text-slate-100">
+              Sắp có gì?
+            </h3>
+            <div className="grid gap-4 md:grid-cols-3">
+              <div className="surface-panel-muted p-4 text-center">
+                <div className="mb-2 text-3xl">💼</div>
+                <h4 className="font-semibold text-slate-900 dark:text-slate-100">Job Board</h4>
+                <p className="mt-1 text-sm text-slate-600 dark:text-slate-300">
+                  Tìm việc Cloud/DevOps phù hợp.
                 </p>
               </div>
-              <div className="text-center">
-                <div className="mb-3 text-4xl">🎯</div>
-                <h4 className="mb-2 font-semibold text-gray-900 dark:text-gray-100">
-                  Smart Matching
-                </h4>
-                <p className="text-sm text-gray-600 dark:text-gray-400">
-                  Gợi ý việc làm theo kỹ năng
+              <div className="surface-panel-muted p-4 text-center">
+                <div className="mb-2 text-3xl">🎯</div>
+                <h4 className="font-semibold text-slate-900 dark:text-slate-100">Smart Matching</h4>
+                <p className="mt-1 text-sm text-slate-600 dark:text-slate-300">
+                  Gợi ý vai trò dựa trên kỹ năng.
                 </p>
               </div>
-              <div className="text-center">
-                <div className="mb-3 text-4xl">🤝</div>
-                <h4 className="mb-2 font-semibold text-gray-900 dark:text-gray-100">Community</h4>
-                <p className="text-sm text-gray-600 dark:text-gray-400">
-                  Kết nối với cộng đồng VNTechies
+              <div className="surface-panel-muted p-4 text-center">
+                <div className="mb-2 text-3xl">🤝</div>
+                <h4 className="font-semibold text-slate-900 dark:text-slate-100">Community</h4>
+                <p className="mt-1 text-sm text-slate-600 dark:text-slate-300">
+                  Kết nối với mạng lưới mentor và học viên.
                 </p>
               </div>
             </div>
           </div>
 
-          {/* CTA */}
-          <div className="rounded-lg bg-gradient-to-r from-orange-600 to-orange-500 p-8 text-white">
-            <h3 className="mb-4 text-2xl font-bold">Muốn được thông báo khi ra mắt?</h3>
-            <p className="mb-6">Tham gia cộng đồng VNTechies để cập nhật thông tin mới nhất</p>
+          <div className="surface-panel bg-gradient-to-r from-orange-500 to-orange-600 p-6 text-white sm:p-8">
+            <h3 className="text-2xl font-bold">Muốn được thông báo khi ra mắt?</h3>
+            <p className="mt-2 text-sm sm:text-base">
+              Tham gia cộng đồng VNTechies để cập nhật sớm.
+            </p>
             <Link
               href="https://m.me/vntechies"
-              className="inline-flex items-center rounded-lg bg-white px-6 py-3 font-semibold text-orange-600 transition hover:bg-gray-100"
+              className="mt-5 inline-flex items-center rounded-lg bg-white px-5 py-2.5 text-sm font-semibold text-orange-600 transition hover:bg-orange-50 sm:text-base"
             >
               <FaRocket className="mr-2 h-4 w-4" />
               Liên hệ ngay
diff --git a/pages/courses.js b/pages/courses.js
index 6a299ebf..7a1c028d 100644
--- a/pages/courses.js
+++ b/pages/courses.js
@@ -28,40 +28,48 @@ export default function Courses({ courses }) {
         title={`Khoá học - ${siteMetadata.headerTitle}`}
         description={siteMetadata.descriptions.courses}
       />
-      <div className="divide-y divide-gray-200 dark:divide-gray-700">
-        <div className="space-y-2 pt-6 pb-8 md:space-y-5">
-          <h1 className="md:text-6xl text-3xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl sm:leading-10 md:leading-14">
-            📚 Khoá học
-          </h1>
-        </div>
-        <div className="container py-12">
-          {/* Tabs */}
-          <div className="mb-8 flex space-x-1 rounded-lg bg-gray-100 p-1 dark:bg-gray-800">
+      <div className="space-y-10">
+        <header className="pt-2">
+          <span className="page-eyebrow">Học tập có hướng dẫn</span>
+          <h1 className="page-heading text-slate-900 dark:text-slate-100">Khóa học</h1>
+          <p className="page-lead">
+            Chọn lộ trình phù hợp với mục tiêu của bạn. Các khoá premium chuyên sâu và các khóa miễn
+            để bắt đầu nhanh.
+          </p>
+        </header>
+
+        <section className="surface-panel p-3 sm:p-4">
+          <div className="grid grid-cols-2 gap-2">
             <button
               onClick={() => setActiveTab('premium')}
-              className={`flex-1 rounded-md px-4 py-2 text-sm font-medium transition-colors ${
+              className={`rounded-xl px-4 py-3 text-sm font-semibold transition-colors ${
                 activeTab === 'premium'
-                  ? 'bg-orange-500 text-white shadow-sm'
-                  : 'text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100'
+                  ? 'bg-orange-500 text-white'
+                  : 'bg-slate-100 text-slate-600 hover:bg-slate-200 dark:bg-slate-800 dark:text-slate-300 dark:hover:bg-slate-700'
               }`}
             >
-              💎 Premium ({paidCourses.length})
+              Premium ({paidCourses.length})
             </button>
             <button
               onClick={() => setActiveTab('free')}
-              className={`flex-1 rounded-md px-4 py-2 text-sm font-medium transition-colors ${
+              className={`rounded-xl px-4 py-3 text-sm font-semibold transition-colors ${
                 activeTab === 'free'
-                  ? 'bg-green-500 text-white shadow-sm'
-                  : 'text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100'
+                  ? 'bg-emerald-500 text-white'
+                  : 'bg-slate-100 text-slate-600 hover:bg-slate-200 dark:bg-slate-800 dark:text-slate-300 dark:hover:bg-slate-700'
               }`}
             >
-              🆓 Miễn phí ({freeCourses.length})
+              Miễn phí ({freeCourses.length})
             </button>
           </div>
+        </section>
 
-          {/* Course Grid */}
-          <div className="-m-4 flex flex-wrap">
-            {displayCourses.length === 0 && 'Không có khoá học nào.'}
+        <section>
+          <div className="grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-3">
+            {displayCourses.length === 0 && (
+              <div className="surface-panel col-span-full p-8 text-center text-sm text-slate-600 dark:text-slate-300">
+                Không có khóa học nào.
+              </div>
+            )}
             {displayCourses.map((course) => {
               return (
                 <Card
@@ -75,7 +83,7 @@ export default function Courses({ courses }) {
               )
             })}
           </div>
-        </div>
+        </section>
       </div>
     </>
   )
diff --git a/pages/courses/register.js b/pages/courses/register.js
index 11d3eb84..e2b6bb95 100644
--- a/pages/courses/register.js
+++ b/pages/courses/register.js
@@ -1,49 +1,179 @@
-import { useState } from 'react'
-import { PageSEO } from '../../components/SEO'
-import CourseRegistrationForm from '../../components/CourseRegistrationForm'
-import siteMetadata from '../../data/siteMetadata'
+import { useEffect, useMemo, useState } from 'react'
 import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { PageSEO } from '@/components/SEO'
+import Image from '@/components/Image'
+import CourseRegistrationForm from '@/components/CourseRegistrationForm'
+import siteMetadata from '@/data/siteMetadata'
+import { getAllFilesFrontMatter } from '@/lib/mdx'
 
-export default function Register() {
-  // Get course title from URL params if available, otherwise default
-  const [selectedCourse, setSelectedCourse] = useState('AWS SAA-C03')
-  const [selectedTheme, setSelectedTheme] = useState('orange')
-
-  const courses = [
-    {
-      title: 'AWS CLF-C02',
-      name: 'AWS Cloud Practitioner',
-      theme: 'blue',
-      url: '/courses/aws/clf/gioi-thieu',
-    },
-    {
-      title: 'AWS SAA-C03',
-      name: 'AWS Solutions Architect Associate',
-      theme: 'orange',
-      url: '/courses/aws/saa/gioi-thieu',
-    },
-    {
-      title: 'AWS DVA-C02',
-      name: 'AWS Developer Associate',
-      theme: 'purple',
-      url: '/courses/aws/dva/gioi-thieu',
-    },
-    {
-      title: 'AWS AIF-C01',
-      name: 'AWS AI Practitioner',
-      theme: 'orange',
-      url: '/courses/aws/aif/gioi-thieu',
-    },
-  ]
+const COURSE_META = {
+  'data-engineer-bootcamp': {
+    name: 'Data Engineer Bootcamp',
+    code: 'VDT-C01',
+    badge: 'Data Bootcamp',
+    theme: 'purple',
+    order: 1,
+  },
+  devops: {
+    name: 'DevOps Engineer',
+    code: 'VDE-C01',
+    badge: 'DevOps Bootcamp',
+    theme: 'blue',
+    order: 2,
+  },
+  'aws/saa': {
+    name: 'AWS Solutions Architect Associate',
+    code: 'SAA-C03',
+    badge: 'AWS Associate',
+    theme: 'orange',
+    order: 3,
+  },
+  'aws/clf': {
+    name: 'AWS Cloud Practitioner',
+    code: 'CLF-C02',
+    badge: 'AWS Foundational',
+    theme: 'blue',
+    order: 4,
+  },
+  'aws/dva': {
+    name: 'AWS Developer Associate',
+    code: 'DVA-C02',
+    badge: 'AWS Associate',
+    theme: 'orange',
+    order: 5,
+  },
+  'aws/aif': {
+    name: 'AWS AI Practitioner',
+    code: 'AIF-C01',
+    badge: 'AWS AI',
+    theme: 'purple',
+    order: 6,
+  },
+}
+
+const THEME_STYLES = {
+  orange: {
+    badge: 'bg-orange-100 text-orange-700 dark:bg-orange-900/80 dark:text-orange-200',
+    selected:
+      'border-orange-300 bg-orange-50/90 ring-2 ring-orange-300 dark:border-orange-400/70 dark:bg-slate-900 dark:ring-orange-400/60',
+  },
+  blue: {
+    badge: 'bg-blue-100 text-blue-700 dark:bg-blue-900/80 dark:text-blue-200',
+    selected:
+      'border-blue-300 bg-blue-50/90 ring-2 ring-blue-300 dark:border-blue-400/70 dark:bg-slate-900 dark:ring-blue-400/60',
+  },
+  purple: {
+    badge: 'bg-purple-100 text-purple-700 dark:bg-purple-900/80 dark:text-purple-200',
+    selected:
+      'border-purple-300 bg-purple-50/90 ring-2 ring-purple-300 dark:border-purple-400/70 dark:bg-slate-900 dark:ring-purple-400/60',
+  },
+}
+
+const extractCourseCode = (title = '') => {
+  const matched = title.match(/\(([A-Z0-9-]+)\)/i)
+  return matched?.[1]?.toUpperCase() || ''
+}
+
+const normalizeCourseName = (title = '') =>
+  title
+    .replace(/^ĐỘC QUYỀN:\s*/i, '')
+    .replace(/^Khoá học\s*/i, '')
+    .replace(/\([A-Z0-9-]+\)/gi, '')
+    .trim()
+
+const getThemeBySlug = (slug = '') => {
+  if (slug.startsWith('aws/')) return 'orange'
+  if (slug.includes('data')) return 'purple'
+  if (slug.includes('devops')) return 'blue'
+  return 'orange'
+}
+
+export async function getStaticProps() {
+  const allCourses = await getAllFilesFrontMatter('courses')
+  const mainCourses = allCourses.filter((course) => course.index === 0)
+
+  const paidCourses = mainCourses
+    .filter((course) => !course.isFree)
+    .map((course) => {
+      const meta = COURSE_META[course.slug] || {}
+      const code = meta.code || extractCourseCode(course.title)
+
+      return {
+        slug: course.slug,
+        url: `/courses/${course.slug}`,
+        name: meta.name || normalizeCourseName(course.title),
+        summary: course.summary || '',
+        code,
+        badge: meta.badge || (course.slug.startsWith('aws/') ? 'AWS Certification' : 'Bootcamp'),
+        theme: meta.theme || getThemeBySlug(course.slug),
+        order: meta.order ?? 99,
+        price: course.price || 'Liên hệ tư vấn',
+        image: course.images?.[0] || '/static/images/default-ogp.png',
+      }
+    })
+    .sort((a, b) => a.order - b.order || a.name.localeCompare(b.name, 'vi'))
+
+  const freeCourses = mainCourses
+    .filter((course) => course.isFree)
+    .map((course) => ({
+      slug: course.slug,
+      url: `/courses/${course.slug}`,
+      name: normalizeCourseName(course.title),
+      summary: course.summary || 'Khóa học miễn phí để bạn tự học theo lộ trình.',
+      image: course.images?.[0] || '/static/images/default-ogp.png',
+    }))
+    .sort((a, b) => a.name.localeCompare(b.name, 'vi'))
 
-  const handleCourseChange = (courseTitle) => {
-    const course = courses.find((c) => c.title === courseTitle)
-    setSelectedCourse(courseTitle)
-    setSelectedTheme(course?.theme || 'orange')
+  return {
+    props: {
+      paidCourses,
+      freeCourses,
+    },
   }
+}
+
+export default function Register({ paidCourses = [], freeCourses = [] }) {
+  const router = useRouter()
+  const fallbackCourse = paidCourses[0]
+  const [selectedSlug, setSelectedSlug] = useState(fallbackCourse?.slug || '')
+
+  useEffect(() => {
+    if (!router.isReady || paidCourses.length === 0) return
+
+    const queryValue = Array.isArray(router.query.course)
+      ? router.query.course[0]
+      : router.query.course
+    const normalizedQuery = queryValue?.toString().trim().toLowerCase()
+
+    if (!normalizedQuery) {
+      setSelectedSlug(fallbackCourse?.slug || '')
+      return
+    }
+
+    const matchedCourse = paidCourses.find(
+      (course) =>
+        course.slug.toLowerCase() === normalizedQuery ||
+        course.code?.toLowerCase() === normalizedQuery
+    )
+
+    if (matchedCourse) setSelectedSlug(matchedCourse.slug)
+  }, [router.isReady, router.query.course, paidCourses, fallbackCourse])
+
+  const selectedCourse = useMemo(
+    () => paidCourses.find((course) => course.slug === selectedSlug) || fallbackCourse,
+    [paidCourses, selectedSlug, fallbackCourse]
+  )
+
+  const selectedTheme = selectedCourse?.theme || 'orange'
+  const selectedCourseLabel = selectedCourse?.code
+    ? `${selectedCourse.name} (${selectedCourse.code})`
+    : selectedCourse?.name || 'Khóa học VNTechies'
+  const selectedCourseValue = selectedCourse?.code
+    ? `${selectedCourse.code} - ${selectedCourse.name}`
+    : selectedCourse?.name || 'Khóa học VNTechies'
 
   const handleRegistrationSuccess = () => {
-    // Scroll to the success message
     const successElement = document.querySelector('[data-success-message]')
     if (successElement) {
       successElement.scrollIntoView({
@@ -57,154 +187,208 @@ export default function Register() {
     <>
       <PageSEO
         title={`Đăng ký khóa học - ${siteMetadata.title}`}
-        description="Đăng ký tham gia các khóa học AWS, DevOps tại VNTechies. Nhận tư vấn chi tiết và ưu đãi đặc biệt cho học viên mới."
+        description="Đăng ký tham gia các khóa học AWS, DevOps và Data Engineering tại VNTechies. Nhận tư vấn lộ trình phù hợp và ưu đãi dành cho học viên."
         url={`${siteMetadata.siteUrl}/courses/register`}
       />
 
-      <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
-        {/* Header Section */}
-        <div className="bg-white shadow-sm dark:bg-gray-800">
-          <div className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
-            <div className="text-center">
-              <h1 className="text-4xl font-bold text-gray-900 dark:text-white">Đăng Ký Khóa Học</h1>
-              <p className="mt-4 text-xl text-gray-600 dark:text-gray-300">
-                Bắt đầu hành trình sự nghiệp Cloud/DevOps của bạn cùng VNTechies
-              </p>
+      <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-slate-50 dark:from-[#091428] dark:via-[#101b30] dark:to-[#1a2540]">
+        <section className="border-b border-slate-300/80 bg-white dark:border-slate-800 dark:bg-slate-800/80">
+          <div className="mx-auto max-w-6xl px-4 py-12 sm:py-16">
+            <span className="text-xs inline-flex rounded-full border border-orange-300/80 bg-orange-50 px-4 py-2 font-semibold uppercase tracking-wide text-orange-700 dark:border-orange-500/40 dark:bg-orange-500/10 dark:text-orange-200">
+              VNTechies Career Launchpad
+            </span>
+            <h1 className="mt-4 max-w-3xl text-3xl font-extrabold leading-tight text-slate-900 dark:text-slate-100 sm:text-5xl">
+              Chọn khoá học và đăng ký tư vấn trong 2 phút
+            </h1>
+            <p className="sm:text-lg mt-4 max-w-3xl text-base leading-relaxed text-slate-600 dark:text-slate-300">
+              Đội ngũ mentor sẽ liên hệ để tư vấn lộ trình phù hợp với mục tiêu của bạn.
+            </p>
+
+            <div className="mt-8 grid gap-3 sm:grid-cols-3">
+              <div className="rounded-2xl border border-slate-300 bg-white p-4 text-center shadow-sm dark:border-slate-700 dark:bg-slate-800/60">
+                <div className="text-2xl font-black text-slate-900 dark:text-slate-100">200+</div>
+                <p className="text-sm text-slate-600 dark:text-slate-300">Học viên đã tham gia</p>
+              </div>
+              <div className="rounded-2xl border border-slate-300 bg-white p-4 text-center shadow-sm dark:border-slate-700 dark:bg-slate-800/60">
+                <div className="text-2xl font-black text-slate-900 dark:text-slate-100">80%</div>
+                <p className="text-sm text-slate-600 dark:text-slate-300">Tỷ lệ hoàn thành khóa</p>
+              </div>
+              <div className="rounded-2xl border border-slate-300 bg-white p-4 text-center shadow-sm dark:border-slate-700 dark:bg-slate-800/60">
+                <div className="text-2xl font-black text-slate-900 dark:text-slate-100">9+</div>
+                <p className="text-sm text-slate-600 dark:text-slate-300">Mentor đang hỗ trợ</p>
+              </div>
             </div>
-          </div>
-        </div>
-
-        {/* Course Selection */}
-        <div className="mx-auto max-w-6xl px-4 py-24">
-          <div className="shadow-6xl mb-16 rounded-2xl bg-white p-20 dark:bg-gray-900">
-            <h2 className="mb-16 text-center text-5xl font-bold text-gray-900 dark:text-gray-100">
-              Chọn khóa học bạn quan tâm:
-            </h2>
-            <div className="grid grid-cols-1 gap-12 sm:grid-cols-2 lg:grid-cols-4">
-              {courses.map((course) => (
-                <div key={course.title} className="relative">
-                  <button
-                    onClick={() => handleCourseChange(course.title)}
-                    className={`relative h-44 w-full rounded-lg border-2 p-8 text-left transition-all hover:shadow-lg ${
-                      selectedCourse === course.title
-                        ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20'
-                        : 'border-gray-200 bg-white hover:border-gray-300 dark:border-gray-600 dark:bg-gray-700'
-                    }`}
-                  >
-                    <div className="text-lg font-semibold text-gray-900 dark:text-white">
-                      {course.title}
-                    </div>
-                    <div className="mt-3 text-sm text-gray-600 dark:text-gray-300">
-                      {course.name}
-                    </div>
-                  </button>
-                  <Link
-                    href={course.url}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="absolute top-2 right-2 z-10 flex h-8 w-8 items-center justify-center rounded-full bg-gray-100 text-gray-600 transition-all hover:bg-gray-200 hover:text-gray-800 dark:bg-gray-600 dark:text-gray-300 dark:hover:bg-gray-500 dark:hover:text-white"
-                    title="Xem chi tiết khóa học"
-                  >
-                    <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        strokeWidth={2}
-                        d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
-                      />
-                    </svg>
-                  </Link>
-                </div>
-              ))}
+
+            <div className="mt-8 flex flex-wrap gap-3">
+              <a
+                href="#course-selection"
+                className="inline-flex items-center justify-center rounded-xl bg-orange-500 px-5 py-3 text-sm font-semibold text-white transition hover:bg-orange-600"
+              >
+                Bắt đầu chọn khóa
+              </a>
+              <a
+                href="#registration-form"
+                className="inline-flex items-center justify-center rounded-xl border border-slate-400 bg-slate-100 px-5 py-3 text-sm font-semibold text-slate-700 transition hover:bg-slate-200 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-100 dark:hover:bg-slate-700"
+              >
+                Đi tới form đăng ký
+              </a>
             </div>
           </div>
-        </div>
-
-        {/* Registration Form */}
-        <CourseRegistrationForm
-          courseTitle={selectedCourse}
-          theme={selectedTheme}
-          onSuccess={handleRegistrationSuccess}
-        />
-
-        {/* Additional Info Section */}
-        <div className="bg-white py-12 dark:bg-gray-800">
-          <div className="mx-auto max-w-4xl px-4">
-            <div className="grid grid-cols-1 gap-8 md:grid-cols-3">
-              <div className="text-center">
-                <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-blue-100 dark:bg-blue-900">
-                  <svg
-                    className="h-8 w-8 text-blue-600 dark:text-blue-400"
-                    fill="none"
-                    stroke="currentColor"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={2}
-                      d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
-                    />
-                  </svg>
-                </div>
-                <h3 className="text-lg mb-2 font-semibold text-gray-900 dark:text-white">
-                  Cam kết chất lượng
-                </h3>
-                <p className="text-gray-600 dark:text-gray-300">
-                  99% học viên pass chứng chỉ trong lần thi đầu tiên
-                </p>
+        </section>
+
+        <main className="mx-auto max-w-6xl space-y-10 px-4 py-10 sm:py-12">
+          <section
+            id="course-selection"
+            className="rounded-2xl border border-slate-300 bg-white p-5 shadow-sm dark:border-slate-700 dark:bg-slate-800/60 sm:p-8"
+          >
+            <header className="max-w-3xl">
+              <h2 className="text-2xl font-bold text-slate-900 dark:text-slate-100 sm:text-3xl">
+                1. Chọn khóa học
+              </h2>
+              <p className="mt-2 text-sm text-slate-600 dark:text-slate-300 sm:text-base">
+                Chỉ cần nhấn vào thẻ khoá bạn muốn học.
+              </p>
+            </header>
+
+            {paidCourses.length === 0 ? (
+              <div className="mt-6 rounded-2xl border border-slate-300 bg-slate-100 p-6 text-sm text-slate-600 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-300">
+                Chưa có khóa premium nào để đăng ký.
               </div>
+            ) : (
+              <>
+                <div className="mt-6 grid gap-4 md:grid-cols-2 xl:grid-cols-3">
+                  {paidCourses.map((course) => {
+                    const isSelected = selectedSlug === course.slug
+                    const currentThemeStyles = THEME_STYLES[course.theme] || THEME_STYLES.orange
 
-              <div className="text-center">
-                <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-green-100 dark:bg-green-900">
-                  <svg
-                    className="h-8 w-8 text-green-600 dark:text-green-400"
-                    fill="none"
-                    stroke="currentColor"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={2}
-                      d="M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a1.994 1.994 0 01-2-2V10a2 2 0 012-2h2V6a2 2 0 012-2h6a2 2 0 012 2v10a2 2 0 01-2 2h-2v-2z"
-                    />
-                  </svg>
+                    return (
+                      <div
+                        key={course.slug}
+                        className={`overflow-hidden rounded-2xl border transition ${
+                          isSelected
+                            ? currentThemeStyles.selected
+                            : 'border-slate-300 bg-white hover:border-slate-400 dark:border-slate-700 dark:bg-slate-800/60 dark:hover:border-slate-500'
+                        }`}
+                      >
+                        <button
+                          type="button"
+                          onClick={() => setSelectedSlug(course.slug)}
+                          className="w-full p-5 text-left"
+                          aria-pressed={isSelected}
+                        >
+                          <div>
+                            <h3 className="sm:text-lg text-base font-bold text-slate-900 dark:text-slate-100">
+                              {course.name}
+                            </h3>
+                            <div className="mt-1 flex items-center gap-2">
+                              {course.code && (
+                                <span className="text-xs rounded-md bg-slate-50 px-2 py-1 font-semibold text-slate-700 dark:bg-slate-700 dark:text-slate-200">
+                                  {course.code}
+                                </span>
+                              )}
+                              <span
+                                className={`text-xs rounded-full px-2.5 py-1 font-semibold ${currentThemeStyles.badge}`}
+                              >
+                                {course.badge}
+                              </span>
+                            </div>
+                          </div>
+                          <p className="mt-3 text-sm font-semibold text-slate-800 dark:text-slate-100">
+                            {course.price}
+                          </p>
+                        </button>
+                        <div className="flex items-center justify-between border-t border-slate-200 px-5 py-3 dark:border-slate-700">
+                          <Link
+                            href={course.url}
+                            className="text-sm font-semibold text-orange-600 transition hover:text-orange-500 dark:text-orange-300 dark:hover:text-orange-200"
+                          >
+                            Chi tiết →
+                          </Link>
+                          <span className="text-xs text-slate-600 dark:text-slate-300">
+                            Nhấn vào thẻ để chọn
+                          </span>
+                        </div>
+                      </div>
+                    )
+                  })}
                 </div>
-                <h3 className="text-lg mb-2 font-semibold text-gray-900 dark:text-white">
-                  Hỗ trợ 24/7
-                </h3>
-                <p className="text-gray-600 dark:text-gray-300">
-                  Cộng đồng học viên và mentor hỗ trợ liên tục
-                </p>
-              </div>
 
-              <div className="text-center">
-                <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-orange-100 dark:bg-orange-900">
-                  <svg
-                    className="h-8 w-8 text-orange-600 dark:text-orange-400"
-                    fill="none"
-                    stroke="currentColor"
-                    viewBox="0 0 24 24"
+                {selectedCourse && (
+                  <div className="mt-6 rounded-2xl border border-slate-300 bg-white p-4 dark:border-slate-700 dark:bg-slate-800/60">
+                    <div className="flex items-center gap-4">
+                      <div className="relative h-16 w-28 overflow-hidden rounded-lg border border-slate-200 dark:border-slate-700">
+                        <Image
+                          src={selectedCourse.image}
+                          alt={selectedCourse.name}
+                          fill
+                          className="object-cover"
+                          sizes="112px"
+                        />
+                      </div>
+                      <div>
+                        <p className="text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400">
+                          Khóa đã chọn
+                        </p>
+                        <div className="mt-1 flex flex-wrap items-center gap-2">
+                          <h3 className="text-base font-bold text-slate-900 dark:text-slate-100">
+                            {selectedCourse.name}
+                          </h3>
+                          {selectedCourse.code && (
+                            <span className="text-xs rounded-full bg-slate-200 px-2.5 py-1 font-semibold text-slate-700 dark:bg-slate-700 dark:text-slate-200">
+                              {selectedCourse.code}
+                            </span>
+                          )}
+                        </div>
+                        <p className="mt-1 text-sm font-semibold text-slate-700 dark:text-slate-200">
+                          {selectedCourse.price}
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                )}
+              </>
+            )}
+          </section>
+
+          <CourseRegistrationForm
+            courseTitle={selectedCourseValue}
+            courseLabel={selectedCourseLabel}
+            theme={selectedTheme}
+            onSuccess={handleRegistrationSuccess}
+          />
+
+          {freeCourses.length > 0 && (
+            <section className="rounded-2xl border border-slate-300 bg-white p-5 shadow-sm dark:border-slate-700 dark:bg-slate-800/60 sm:p-8">
+              <h2 className="text-xl font-bold text-slate-900 dark:text-slate-100 sm:text-2xl">
+                Khoá miễn phí
+              </h2>
+              <div className="mt-4 grid gap-4 md:grid-cols-2 xl:grid-cols-3">
+                {freeCourses.map((course) => (
+                  <Link
+                    key={course.slug}
+                    href={course.url}
+                    className="overflow-hidden rounded-2xl border border-slate-300 bg-white transition hover:border-orange-300 hover:bg-orange-50/50 dark:border-slate-700 dark:bg-slate-800/60 dark:hover:border-orange-400/70 dark:hover:bg-orange-500/10"
                   >
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={2}
-                      d="M13 10V3L4 14h7v7l9-11h-7z"
-                    />
-                  </svg>
-                </div>
-                <h3 className="text-lg mb-2 font-semibold text-gray-900 dark:text-white">
-                  Thực hành nhiều
-                </h3>
-                <p className="text-gray-600 dark:text-gray-300">
-                  35%+ thời lượng là lab thực hành trên AWS
-                </p>
+                    <div className="relative aspect-[16/9] w-full overflow-hidden">
+                      <Image
+                        src={course.image}
+                        alt={course.name}
+                        fill
+                        className="object-cover"
+                        sizes="(max-width: 768px) 100vw, (max-width: 1280px) 50vw, 33vw"
+                      />
+                    </div>
+                    <div className="px-4 py-3">
+                      <h3 className="text-sm font-semibold text-slate-800 dark:text-slate-100">
+                        {course.name}
+                      </h3>
+                    </div>
+                  </Link>
+                ))}
               </div>
-            </div>
-          </div>
-        </div>
+            </section>
+          )}
+        </main>
       </div>
     </>
   )
diff --git a/pages/index.js b/pages/index.js
index b389f1da..b39a58ca 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,89 +1,971 @@
+import Image from 'next/image'
 import Link from '@/components/Link'
 import { PageSEO } from '@/components/SEO'
 import siteMetadata from '@/data/siteMetadata'
 import { getAllFilesFrontMatter } from '@/lib/mdx'
-
-import FAQ from '@/components/home/FAQ'
-import AWSCert from '@/components/home/AWSCert'
-import Hero from '@/components/home/Hero'
-import Features from '@/components/home/Features'
 import ArticleList from '@/components/ArticleList'
-import FreeCourses from '@/components/home/FreeCourses'
+import FAQ from '@/components/home/FAQ'
 
 const MAX_DISPLAY = 6
 
+const heroStats = [
+  { label: 'Học viên đã tham gia', value: '200+', icon: '/static/images/icons/users-icon.svg' },
+  { label: 'Tỷ lệ đỗ chứng chỉ', value: '95%', icon: '/static/images/icons/check-icon.svg' },
+  { label: 'Mentor đang hỗ trợ', value: '9+', icon: '/static/images/icons/mentor-icon.svg' },
+]
+
+const heroCourseLinks = [
+  {
+    label: 'AWS SAA-C03',
+    title: 'Khoá học AWS Solution Architect',
+    subtitle: 'Luyện thi & thực chiến AWS cùng chuyên gia',
+    href: '/courses/aws/saa/gioi-thieu',
+    icon: '/static/images/icons/aws-icon.svg',
+  },
+  {
+    label: 'DevOps VDE-C01',
+    title: 'Khoá học DevOps Engineer',
+    subtitle: 'DevOps từ cơ bản đến nâng cao',
+    href: '/courses/devops/gioi-thieu',
+    icon: '/static/images/icons/devops-icon.svg',
+  },
+  {
+    label: 'Data VDT-C01',
+    title: 'Data Engineer Bootcamp',
+    subtitle: 'Thực chiến cho Data Engineer',
+    href: '/courses/data-engineer-bootcamp/gioi-thieu',
+    icon: '/static/images/icons/data-icon.svg',
+  },
+]
+
+const uspPillars = [
+  {
+    title: 'Học để làm, không chỉ để thi chứng chỉ',
+    description: 'Mỗi module đều có lab và output rõ ràng để bạn dùng được ngay vào công việc.',
+    icon: '/static/images/icons/lab-icon.svg',
+  },
+  {
+    title: '100% mentor đang làm tại các tập đoàn đa quốc gia',
+    description:
+      'Mentor là lead, manager, senior ở các công ty lớn và trực tiếp review bài làm của bạn.',
+    icon: '/static/images/icons/company-icon.svg',
+  },
+  {
+    title: 'Luôn có lab miễn phí, có nền tảng học tập và thực hành riêng',
+    description: 'Bạn thực hành trên nền tảng riêng của VNTechies, không phát sinh thêm phí lab.',
+    icon: '/static/images/icons/platform-icon.svg',
+  },
+  {
+    title: 'Có hỗ trợ giảm giá thi chứng chỉ AWS',
+    description: 'Đội ngũ hỗ trợ tối ưu chi phí thi và hướng dẫn ôn tập đúng trọng tâm.',
+    icon: '/static/images/icons/discount-icon.svg',
+  },
+]
+
+const painPoints = [
+  'Học rất nhiều nhưng không biết thứ tự ưu tiên để tiến bộ nhanh.',
+  'Thiếu môi trường thực hành nên khó áp dụng vào dự án thật.',
+  'Không có người review nên mất thời gian với các lỗi lặp lại.',
+  'Muốn nâng lương hoặc chuyển việc nhưng chưa có lộ trình rõ ràng.',
+]
+
+const programOutcomes = [
+  {
+    title: 'Lộ trình rõ ràng theo tuần',
+    summary: 'Biết chính xác tuần này cần học gì và cần hoàn thành đầu ra nào.',
+    icon: '/static/images/icons/roadmap-icon.svg',
+  },
+  {
+    title: 'Năng lực thực chiến tốt hơn',
+    summary: 'Làm được bài lab theo bối cảnh production thay vì chỉ học lý thuyết.',
+    icon: '/static/images/icons/skills-icon.svg',
+  },
+  {
+    title: 'Tự tin khi phỏng vấn hoặc thi',
+    summary: 'Hiểu bản chất, biết cách trả lời tình huống và giải thích quyết định kỹ thuật.',
+    icon: '/static/images/icons/interview-icon.svg',
+  },
+  {
+    title: 'Cộng đồng và mentor đồng hành',
+    summary: 'Có người hỗ trợ khi gặp blockers, giữ nhịp học ổn định và liên tục.',
+    icon: '/static/images/icons/community-icon.svg',
+  },
+]
+
+const learningTracks = [
+  {
+    title: 'AWS Solution Architect',
+    summary: 'Luyện thi & thực chiến AWS cùng chuyên gia.',
+    audience:
+      'Phù hợp cho người muốn học AWS theo hướng vừa thi chứng chỉ vừa ứng dụng vào dự án thực tế.',
+    badge: 'SAA-C03',
+    href: '/courses/aws/saa/gioi-thieu',
+    cta: 'Xem khóa AWS SAA-C03',
+    image: '/static/images/courses/saa.png',
+  },
+  {
+    title: 'DevOps Engineer',
+    summary: 'DevOps từ cơ bản đến nâng cao.',
+    audience:
+      'Phù hợp cho người mới bắt đầu hoặc engineer muốn chuyển hướng sang DevOps một cách bài bản.',
+    badge: 'VDE-C01',
+    href: '/courses/devops/gioi-thieu',
+    cta: 'Xem khóa DevOps',
+    image: '/static/images/courses/vde.png',
+  },
+  {
+    title: 'Data Engineer',
+    summary: 'Khóa học Data Engineering từ cơ bản đến nâng cao với thực hành thực tế.',
+    audience:
+      'Phù hợp cho sinh viên có nền tảng lập trình, engineer muốn chuyển sang Data hoặc Data Analyst muốn nâng cấp lên Data Engineering.',
+    badge: 'VDT-C01',
+    href: '/courses/data-engineer-bootcamp/gioi-thieu',
+    cta: 'Xem khoá Data Engineer',
+    image: '/static/images/courses/vdt.png',
+  },
+]
+
+const testimonials = [
+  {
+    quote:
+      'Khóa học có cấu trúc rõ, mentor phản hồi nhanh. Mình áp dụng được ngay vào dự án AWS của team.',
+    name: 'Lê Văn Thắng',
+    role: 'Tech Lead',
+    avatar: '/static/images/customers/lethang.jpg',
+    rating: 5,
+  },
+  {
+    quote:
+      'Điểm mạnh nhất là phần lab thực tế và review CV/career path. Mình tự tin hơn rất nhiều khi phỏng vấn.',
+    name: 'Trần Duy Mạnh',
+    role: 'Data Engineer',
+    avatar: '/static/images/customers/tranduymanh.jpg',
+    rating: 5,
+  },
+  {
+    quote:
+      'Không chỉ học để thi chứng chỉ, mình hiểu được cách thiết kế hệ thống thực tế và tối ưu chi phí cloud.',
+    name: 'Võ Phi Hùng',
+    role: 'Division Manager',
+    avatar: '/static/images/customers/vophihung.jpg',
+    rating: 5,
+  },
+]
+
 export async function getStaticProps() {
   const posts = await getAllFilesFrontMatter('blog')
-
   return { props: { posts } }
 }
 
 export default function Home({ posts }) {
   return (
     <>
-      <PageSEO title={siteMetadata.title} description={siteMetadata.description} />
-      <Hero />
-      <Features />
-      <section className="relative bg-gradient-to-b from-white to-gray-50 dark:from-gray-800 dark:to-gray-900">
-        <div className="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8 lg:py-24">
-          <div className="mb-16 text-center">
-            <div className="mb-4 inline-flex items-center rounded-full bg-orange-100 px-4 py-2 text-sm font-semibold text-orange-800 dark:bg-orange-900/30 dark:text-orange-300">
-              <span className="mr-2">🌟</span>Cập nhật hàng tuần
+      <PageSEO
+        title={siteMetadata.title}
+        description="VNTechies giúp bạn học để làm: mentor từ tập đoàn đa quốc gia, lab miễn phí, lộ trình Cloud/DevOps/Data thực chiến và hỗ trợ giảm giá thi chứng chỉ AWS."
+      />
+
+      {/* Hero Section - Redesigned with Stronger Visual Impact */}
+      <section className="relative overflow-hidden pt-16 sm:pt-20 lg:pt-24">
+        {/* Background elements - visual flair */}
+        <div className="absolute -top-40 left-0 z-0 h-[600px] w-[600px] rounded-full bg-blue-500/10 blur-3xl"></div>
+        <div className="absolute -right-40 top-20 z-0 h-[500px] w-[500px] rounded-full bg-orange-500/10 blur-3xl"></div>
+        <div className="absolute -bottom-64 left-1/3 z-0 h-[400px] w-[400px] rounded-full bg-purple-500/10 blur-3xl"></div>
+
+        <div className="container mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+          <div className="relative z-10 flex flex-col items-center">
+            {/* Attention-grabbing eyebrow with visual emphasis */}
+            <div className="animate-pulse-slow inline-flex items-center rounded-full border border-orange-300/40 bg-gradient-to-r from-orange-50 to-orange-100 px-5 py-2 dark:border-orange-500/30 dark:from-orange-900/30 dark:to-orange-800/30">
+              <span className="mr-2 flex h-2.5 w-2.5 items-center justify-center rounded-full bg-orange-500"></span>
+              <span className="bg-gradient-to-r from-orange-600 to-orange-500 bg-clip-text text-sm font-semibold text-transparent dark:from-orange-400 dark:to-orange-300">
+                Lộ trình học thực chiến cùng mentor chuyên gia
+              </span>
             </div>
-            <h2 className="text-3xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-4xl lg:text-5xl">
-              Bài viết{' '}
-              <span className="bg-gradient-to-r from-orange-500 to-orange-600 bg-clip-text text-transparent">
-                mới nhất
+
+            {/* Main headline with gradient & animation */}
+            <h1 className="sm:text-6xl md:text-7xl mt-6 text-center text-5xl font-black tracking-tight text-slate-900 dark:text-white">
+              <span className="block">Từ Zero đến Hero với</span>
+              <span className="mt-1 block bg-gradient-to-r from-orange-600 via-orange-500 to-amber-500 bg-clip-text pb-1 text-transparent dark:from-orange-400 dark:via-orange-300 dark:to-amber-300">
+                Cloud, DevOps & Data
               </span>
+            </h1>
+
+            {/* Subheadline with improved clarity */}
+            <p className="mt-6 max-w-2xl text-center text-xl leading-relaxed text-slate-600 dark:text-slate-300 sm:text-2xl">
+              Học theo lộ trình cá nhân hóa, thực chiến với lab thực tế và mentor đồng hành từ các
+              tập đoàn công nghệ hàng đầu.
+            </p>
+
+            {/* Primary & Secondary CTA with improved visual hierarchy */}
+            <div className="mt-8 flex flex-col gap-4 sm:flex-row sm:gap-6">
+              <Link
+                href="/courses/register"
+                className="text-lg relative overflow-hidden rounded-xl bg-gradient-to-r from-orange-600 to-orange-500 px-8 py-4 font-bold text-white shadow-xl transition-all hover:scale-105 hover:shadow-orange-500/25 dark:from-orange-500 dark:to-orange-400 sm:px-10"
+              >
+                <span className="relative z-10">Đăng ký tư vấn miễn phí →</span>
+                <span className="absolute inset-0 -z-10 bg-gradient-to-r from-orange-500/80 to-orange-400/80 opacity-0 blur transition-opacity group-hover:opacity-100"></span>
+              </Link>
+              <Link
+                href="/courses"
+                className="text-lg rounded-xl border border-slate-300 bg-white px-8 py-4 font-bold text-slate-700 transition-all hover:border-orange-300 hover:bg-orange-50/50 hover:text-orange-600 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200 dark:hover:border-orange-700 dark:hover:bg-orange-900/20 dark:hover:text-orange-400 sm:px-10"
+              >
+                Khám phá khóa học
+              </Link>
+            </div>
+
+            {/* Trust indicators - time estimate & guarantee */}
+            <p className="mt-4 flex items-center gap-1.5 text-sm text-slate-500 dark:text-slate-400">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                className="h-4 w-4"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+                />
+              </svg>
+              <span>Tư vấn trong 15 phút, không ràng buộc, có đề xuất lộ trình phù hợp.</span>
+            </p>
+
+            {/* Highlighted courses with improved visual design */}
+            <div className="mt-12 grid w-full max-w-5xl gap-4 sm:grid-cols-3">
+              {heroCourseLinks.map((course) => (
+                <Link
+                  key={course.title}
+                  href={course.href}
+                  className="group relative overflow-hidden rounded-2xl border border-slate-200 bg-white p-6 shadow-sm transition-all hover:border-orange-300 hover:shadow-lg dark:border-slate-700 dark:bg-slate-800 dark:hover:border-orange-700"
+                >
+                  <div className="absolute -right-16 -top-16 h-32 w-32 rounded-full bg-gradient-to-br from-orange-100 to-orange-50 opacity-70 transition-transform duration-500 group-hover:scale-150 dark:from-orange-900/30 dark:to-orange-800/20"></div>
+
+                  <div className="relative">
+                    <p className="text-xs inline-flex items-center rounded-full bg-orange-100 px-3 py-1 font-semibold text-orange-700 dark:bg-orange-900/40 dark:text-orange-300">
+                      {course.label}
+                    </p>
+                    <p className="mt-3 text-xl font-bold text-slate-900 group-hover:text-orange-600 dark:text-slate-100 dark:group-hover:text-orange-400">
+                      {course.title}
+                    </p>
+                    <p className="mt-2 text-sm text-slate-600 dark:text-slate-400">
+                      {course.subtitle}
+                    </p>
+
+                    <div className="mt-4 flex items-center text-orange-600 dark:text-orange-400">
+                      <span className="text-sm font-medium">Xem chi tiết</span>
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        className="ml-1.5 h-4 w-4"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke="currentColor"
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth={2}
+                          d="M9 5l7 7-7 7"
+                        />
+                      </svg>
+                    </div>
+                  </div>
+                </Link>
+              ))}
+            </div>
+
+            {/* Social proof stats with icons and improved design */}
+            <div className="mt-12 grid w-full max-w-5xl gap-4 sm:grid-cols-3">
+              {heroStats.map((metric) => (
+                <div
+                  key={metric.label}
+                  className="flex flex-col items-center rounded-2xl border border-slate-200 bg-white p-6 shadow-sm dark:border-slate-700 dark:bg-slate-800"
+                >
+                  <div className="flex h-16 w-16 items-center justify-center rounded-full bg-orange-100 text-orange-600 dark:bg-orange-900/30 dark:text-orange-400">
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      className="h-8 w-8"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      stroke="currentColor"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"
+                      />
+                    </svg>
+                  </div>
+                  <p className="mt-4 text-3xl font-black text-slate-900 dark:text-white">
+                    {metric.value}
+                  </p>
+                  <p className="mt-1 text-center text-sm font-medium text-slate-600 dark:text-slate-400">
+                    {metric.label}
+                  </p>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Value Proposition Section - Redesigned with more visual appeal */}
+      <section className="py-20 sm:py-28">
+        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+          <div className="grid gap-10 lg:grid-cols-[1fr,1.2fr] lg:gap-16">
+            {/* Left column - Intro and CTA */}
+            <div className="relative rounded-3xl border border-slate-200 bg-white p-8 shadow-xl dark:border-slate-700 dark:bg-slate-800 sm:p-10">
+              <div className="absolute -top-6 left-8 inline-flex h-12 items-center rounded-full bg-gradient-to-r from-orange-600 to-orange-500 px-6 text-white shadow-lg dark:from-orange-500 dark:to-orange-400">
+                <span className="text-sm font-bold">TẠI SAO CHỌN VNTECHIES?</span>
+              </div>
+
+              <div className="mt-8">
+                <h2 className="text-3xl font-black leading-tight text-slate-900 dark:text-white sm:text-4xl lg:text-5xl">
+                  4 lý do để bạn học tốt hơn
+                </h2>
+                <p className="text-lg mt-4 leading-relaxed text-slate-600 dark:text-slate-300">
+                  VNTechies tập trung vào kết quả đầu ra thực tế, không chỉ là kiến thức lý thuyết
+                  và đã giúp hàng trăm học viên đạt được mục tiêu nghề nghiệp.
+                </p>
+
+                <div className="mt-8 flex flex-col gap-4 sm:flex-row">
+                  <Link href="/courses/register" className="action-btn-primary">
+                    <span>Nhận tư vấn ngay</span>
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      className="ml-2 h-5 w-5"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      stroke="currentColor"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M17 8l4 4m0 0l-4 4m4-4H3"
+                      />
+                    </svg>
+                  </Link>
+                  <Link href="/about" className="action-btn-secondary">
+                    <span>Về mentors</span>
+                  </Link>
+                </div>
+              </div>
+            </div>
+
+            {/* Right column - 4 USPs in an attractive grid */}
+            <div className="grid gap-5 sm:grid-cols-2">
+              {uspPillars.map((item, index) => (
+                <article
+                  key={item.title}
+                  className="group relative overflow-hidden rounded-2xl border border-slate-200 bg-white p-6 transition-all hover:border-orange-200 hover:shadow-lg dark:border-slate-700 dark:bg-slate-800 dark:hover:border-orange-900/50"
+                >
+                  <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-orange-100 text-orange-600 dark:bg-orange-900/30 dark:text-orange-400">
+                    <span className="text-xl font-bold">{index + 1}</span>
+                  </div>
+
+                  <h3 className="mt-4 text-xl font-bold text-slate-900 dark:text-white">
+                    {item.title}
+                  </h3>
+                  <p className="mt-2 text-sm leading-relaxed text-slate-600 dark:text-slate-300">
+                    {item.description}
+                  </p>
+                </article>
+              ))}
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Pain Points and Solutions - Redesigned with better contrast */}
+      <section className="py-20 sm:py-28">
+        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+          <div className="grid gap-10 lg:grid-cols-2 lg:gap-16">
+            {/* Left column - Pain Points */}
+            <div className="relative overflow-hidden rounded-3xl border border-red-100 bg-white p-8 shadow-xl dark:border-red-900/30 dark:bg-slate-800 sm:p-10">
+              <div className="absolute -top-10 -left-10 h-40 w-40 rounded-full bg-red-50 dark:bg-red-900/20"></div>
+              <div className="absolute -bottom-10 -right-10 h-40 w-40 rounded-full bg-red-50 dark:bg-red-900/20"></div>
+
+              <div className="relative">
+                <span className="inline-flex items-center gap-2 rounded-full border border-red-200 bg-red-50 px-4 py-1 text-sm font-semibold text-red-600 dark:border-red-800/50 dark:bg-red-900/30 dark:text-red-400">
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    className="h-4 w-4"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+                    />
+                  </svg>
+                  <span>Nếu bạn đang gặp khó</span>
+                </span>
+
+                <h2 className="mt-6 text-3xl font-black leading-tight text-slate-900 dark:text-white sm:text-4xl">
+                  Đây là lý do khiến nhiều người học mãi nhưng vẫn chưa bứt phá
+                </h2>
+
+                <ul className="mt-8 space-y-5">
+                  {painPoints.map((point) => (
+                    <li
+                      key={point}
+                      className="flex items-start gap-3 rounded-xl border border-red-100 bg-red-50/50 p-4 text-slate-800 dark:border-red-900/30 dark:bg-red-900/10 dark:text-slate-200"
+                    >
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        className="mt-1 h-5 w-5 flex-shrink-0 text-red-500"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke="currentColor"
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth={2}
+                          d="M6 18L18 6M6 6l12 12"
+                        />
+                      </svg>
+                      <span className="text-base">{point}</span>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            </div>
+
+            {/* Right column - Solutions */}
+            <div className="relative overflow-hidden rounded-3xl border border-emerald-100 bg-white p-8 shadow-xl dark:border-emerald-900/30 dark:bg-slate-800 sm:p-10">
+              <div className="absolute -top-10 -left-10 h-40 w-40 rounded-full bg-emerald-50 dark:bg-emerald-900/20"></div>
+              <div className="absolute -bottom-10 -right-10 h-40 w-40 rounded-full bg-emerald-50 dark:bg-emerald-900/20"></div>
+
+              <div className="relative">
+                <span className="inline-flex items-center gap-2 rounded-full border border-emerald-200 bg-emerald-50 px-4 py-1 text-sm font-semibold text-emerald-600 dark:border-emerald-800/50 dark:bg-emerald-900/30 dark:text-emerald-400">
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    className="h-4 w-4"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+                    />
+                  </svg>
+                  <span>Sau khi tham gia VNTechies</span>
+                </span>
+
+                <h2 className="mt-6 text-3xl font-black leading-tight text-slate-900 dark:text-white sm:text-4xl">
+                  Bạn có lộ trình, có mentor, có sản phẩm học tập cụ thể
+                </h2>
+
+                <div className="mt-8 grid gap-5 sm:grid-cols-2">
+                  {programOutcomes.map((item) => (
+                    <div
+                      key={item.title}
+                      className="flex flex-col rounded-xl border border-emerald-100 bg-emerald-50/50 p-5 dark:border-emerald-900/30 dark:bg-emerald-900/10"
+                    >
+                      <div className="flex h-10 w-10 items-center justify-center rounded-full bg-emerald-100 text-emerald-600 dark:bg-emerald-900/50 dark:text-emerald-400">
+                        <svg
+                          xmlns="http://www.w3.org/2000/svg"
+                          className="h-5 w-5"
+                          fill="none"
+                          viewBox="0 0 24 24"
+                          stroke="currentColor"
+                        >
+                          <path
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            strokeWidth={2}
+                            d="M5 13l4 4L19 7"
+                          />
+                        </svg>
+                      </div>
+                      <h3 className="text-lg mt-4 font-bold text-slate-900 dark:text-white">
+                        {item.title}
+                      </h3>
+                      <p className="mt-2 text-sm leading-relaxed text-slate-700 dark:text-slate-300">
+                        {item.summary}
+                      </p>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Learning Tracks - Redesigned with visual hierarchy */}
+      <section className="py-20 sm:py-28">
+        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+          <div className="mb-12 flex flex-col gap-6 sm:flex-row sm:items-end sm:justify-between">
+            <div>
+              <span className="page-eyebrow">Chọn lộ trình phù hợp</span>
+              <h2 className="page-heading text-slate-900 dark:text-white">
+                3 chương trình mũi nhọn để tăng tốc sự nghiệp
+              </h2>
+              <p className="page-lead max-w-2xl">
+                Mỗi lộ trình đều có đầu ra rõ ràng, mức độ thực hành cao và mentor theo sát để bạn
+                không bị bỏ lại giữa chừng.
+              </p>
+            </div>
+
+            <Link
+              href="/courses/register"
+              className="group relative overflow-hidden rounded-xl bg-gradient-to-br from-orange-500 to-orange-600 px-6 py-3 text-white shadow-lg transition-all hover:from-orange-600 hover:to-orange-700 hover:shadow-orange-500/20 sm:px-8 sm:py-4"
+            >
+              <span className="sm:text-lg relative z-10 flex items-center text-base font-bold">
+                Tư vấn chọn lộ trình
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  className="ml-2 h-5 w-5"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M17 8l4 4m0 0l-4 4m4-4H3"
+                  />
+                </svg>
+              </span>
+              <span className="absolute inset-0 -z-10 bg-gradient-to-br from-orange-600 to-orange-700 opacity-0 blur transition-opacity group-hover:opacity-100"></span>
+            </Link>
+          </div>
+
+          {/* Learning tracks cards with improved design */}
+          <div className="grid gap-8 lg:grid-cols-3">
+            {learningTracks.map((track) => (
+              <article
+                key={track.title}
+                className="group relative flex h-full flex-col overflow-hidden rounded-2xl border border-slate-200 bg-white p-8 shadow-xl transition-all hover:border-orange-300 hover:shadow-2xl dark:border-slate-700 dark:bg-slate-800 dark:hover:border-orange-800"
+              >
+                <div className="absolute -right-6 -top-6 h-32 w-32 rounded-full bg-gradient-to-br from-orange-100 to-orange-50 opacity-70 transition-all duration-500 group-hover:scale-150 dark:from-orange-900/30 dark:to-orange-800/20"></div>
+
+                {/* Badge and icon */}
+                <div className="relative mb-8 flex items-center justify-between">
+                  <span className="text-xs inline-flex items-center rounded-full border border-orange-300 bg-orange-100 px-3 py-1 font-semibold text-orange-700 dark:border-orange-700 dark:bg-orange-900/40 dark:text-orange-300">
+                    {track.badge}
+                  </span>
+                  <div className="flex h-14 w-14 items-center justify-center rounded-xl border border-slate-100 bg-white shadow-sm dark:border-slate-700 dark:bg-slate-700">
+                    <Image
+                      src={track.image}
+                      width={38}
+                      height={38}
+                      alt={track.title}
+                      className="h-9 w-9 object-contain"
+                    />
+                  </div>
+                </div>
+
+                {/* Content */}
+                <div className="relative flex flex-1 flex-col">
+                  <h3 className="min-h-[3.5rem] text-2xl font-bold text-slate-900 dark:text-white">
+                    {track.title}
+                  </h3>
+                  <p className="line-clamp-2 mt-3 min-h-[3.25rem] text-base leading-relaxed text-slate-600 dark:text-slate-300">
+                    {track.summary}
+                  </p>
+
+                  {/* Target audience */}
+                  <div className="mt-5 flex min-h-[12rem] flex-col rounded-xl border border-slate-200 bg-slate-50 p-4 dark:border-slate-700 dark:bg-slate-700/50">
+                    <div className="flex items-center">
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        className="h-5 w-5 flex-shrink-0 text-slate-500 dark:text-slate-400"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke="currentColor"
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth={2}
+                          d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
+                        />
+                      </svg>
+                      <span className="text-xs ml-2 font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">
+                        Đối tượng phù hợp
+                      </span>
+                    </div>
+                    <p className="line-clamp-5 mt-2 text-sm leading-relaxed text-slate-600 dark:text-slate-300">
+                      {track.audience}
+                    </p>
+                  </div>
+
+                  {/* CTAs */}
+                  <div className="mt-auto flex flex-col gap-2 pt-8">
+                    <Link
+                      href={track.href}
+                      className="inline-flex min-w-0 items-center text-sm font-semibold text-orange-600 transition-colors hover:text-orange-500 dark:text-orange-300 dark:hover:text-orange-200"
+                    >
+                      {track.cta}
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        className="ml-1 h-4 w-4"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke="currentColor"
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth={2}
+                          d="M9 5l7 7-7 7"
+                        />
+                      </svg>
+                    </Link>
+                    <Link
+                      href="/courses/register"
+                      className="inline-flex items-center self-end text-sm font-semibold text-slate-600 transition-colors hover:text-orange-600 dark:text-slate-300 dark:hover:text-orange-300"
+                    >
+                      Đăng ký tư vấn
+                    </Link>
+                  </div>
+                </div>
+              </article>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Testimonials Section - Redesigned with social proof */}
+      <section className="py-20 sm:py-28">
+        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+          <div className="relative overflow-hidden rounded-3xl border border-slate-200 bg-white p-8 shadow-xl dark:border-slate-700 dark:bg-slate-800 sm:p-10 lg:p-12">
+            <div className="absolute -top-14 -left-14 h-64 w-64 rounded-full bg-orange-100 opacity-70 dark:bg-orange-900/20"></div>
+            <div className="absolute -bottom-14 -right-14 h-64 w-64 rounded-full bg-blue-100 opacity-70 dark:bg-blue-900/20"></div>
+
+            <div className="relative mb-12">
+              <span className="inline-flex items-center gap-2 rounded-full border border-orange-200 bg-orange-100 px-4 py-1 text-sm font-semibold text-orange-700 dark:border-orange-800/50 dark:bg-orange-900/30 dark:text-orange-400">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  className="h-4 w-4"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21h-4.017c-.163 0-.326-.02-.485-.06L7 20m7-10V5a2 2 0 00-2-2h-.095c-.5 0-.905.405-.905.905 0 .714-.211 1.412-.608 2.006L7 11v9m7-10h-2M7 20H5a2 2 0 01-2-2v-6a2 2 0 012-2h2.5"
+                  />
+                </svg>
+                <span>Success Stories</span>
+              </span>
+
+              <h2 className="mt-4 text-3xl font-black leading-tight text-slate-900 dark:text-white sm:text-4xl lg:text-5xl">
+                Học viên nói gì sau khi học tại VNTechies
+              </h2>
+            </div>
+
+            <div className="grid gap-8 md:grid-cols-3">
+              {testimonials.map((item) => (
+                <article
+                  key={item.name}
+                  className="relative rounded-2xl border border-slate-200 bg-slate-50 p-6 shadow-lg dark:border-slate-700 dark:bg-slate-700/50"
+                >
+                  {/* Quote icon */}
+                  <div className="absolute -top-4 -right-4 flex h-8 w-8 items-center justify-center rounded-full bg-orange-100 text-orange-500 dark:bg-orange-900/40 dark:text-orange-300">
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      className="h-4 w-4"
+                      fill="currentColor"
+                      viewBox="0 0 24 24"
+                    >
+                      <path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z" />
+                    </svg>
+                  </div>
+
+                  {/* Star rating */}
+                  <div className="mb-4 flex">
+                    {[...Array(5)].map((_, i) => (
+                      <svg
+                        key={i}
+                        className="h-5 w-5 text-yellow-400"
+                        fill="currentColor"
+                        viewBox="0 0 20 20"
+                      >
+                        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
+                      </svg>
+                    ))}
+                  </div>
+
+                  {/* Quote content */}
+                  <p className="text-base leading-relaxed text-slate-700 dark:text-slate-300">
+                    "{item.quote}"
+                  </p>
+
+                  {/* Author info */}
+                  <div className="mt-6 flex items-center gap-4">
+                    <Image
+                      src={item.avatar}
+                      width={48}
+                      height={48}
+                      alt={item.name}
+                      className="h-12 w-12 rounded-full object-cover shadow-md"
+                    />
+                    <div>
+                      <p className="text-base font-bold text-slate-900 dark:text-white">
+                        {item.name}
+                      </p>
+                      <div className="flex items-center gap-2">
+                        <p className="text-sm text-slate-600 dark:text-slate-400">{item.role}</p>
+                        {item.company && (
+                          <>
+                            <span className="text-xs text-slate-400">•</span>
+                            <p className="text-sm font-medium text-slate-600 dark:text-slate-400">
+                              {item.company}
+                            </p>
+                          </>
+                        )}
+                      </div>
+                    </div>
+                  </div>
+                </article>
+              ))}
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Free Resources Section - Blog Posts */}
+      <section className="py-20 sm:py-28">
+        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+          <div className="mb-12 text-center">
+            <span className="page-eyebrow">Tài nguyên miễn phí</span>
+            <h2 className="mt-2 text-3xl font-black leading-tight text-slate-900 dark:text-white sm:text-4xl lg:text-5xl">
+              Đọc trước để bắt đầu nhanh hơn
             </h2>
-            <p className="text-lg mx-auto mt-4 max-w-2xl text-gray-600 dark:text-gray-300">
-              Khám phá những kiến thức và kinh nghiệm mới nhất từ cộng đồng VNTechies
+            <p className="text-lg mx-auto mt-4 max-w-2xl leading-relaxed text-slate-600 dark:text-slate-300">
+              Những bài viết thực tế về Cloud, DevOps và Data giúp bạn hiểu hướng đi trước khi đăng
+              ký.
             </p>
           </div>
 
-          <div className="grid grid-cols-1 items-stretch gap-8 md:grid-cols-2 xl:grid-cols-3">
+          <div className="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
             {!posts.length && (
-              <div className="col-span-full py-12 text-center">
-                <p className="text-gray-500 dark:text-gray-400">Không có bài viết nào.</p>
+              <div className="col-span-full rounded-2xl border border-slate-200 bg-white p-8 text-center dark:border-slate-700 dark:bg-slate-800">
+                <p className="text-slate-600 dark:text-slate-300">Không có bài viết nào.</p>
               </div>
             )}
-            {posts.slice(0, MAX_DISPLAY).map((frontMatter) => {
-              return (
-                <ArticleList
-                  key={frontMatter.title}
-                  {...frontMatter}
-                  image={frontMatter.images[0]}
-                />
-              )
-            })}
+
+            {posts.slice(0, MAX_DISPLAY).map((frontMatter) => (
+              <ArticleList
+                key={frontMatter.title}
+                {...frontMatter}
+                image={frontMatter.images?.[0]}
+              />
+            ))}
           </div>
 
           {posts.length > MAX_DISPLAY && (
             <div className="mt-12 text-center">
-              <Link alt="Tất cả bài viết" href="/blog" aria-label="all posts">
-                <button className="inline-flex items-center justify-center rounded-lg bg-orange-500 px-8 py-3 text-base font-semibold text-white shadow-lg transition-all focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 hover:bg-orange-600 hover:shadow-xl">
-                  🗄️ Tất cả bài viết
+              <Link
+                href="/blog"
+                className="inline-flex items-center rounded-xl border border-slate-200 bg-white px-6 py-3 font-semibold text-slate-700 shadow-sm transition-colors hover:border-orange-300 hover:bg-orange-50/30 hover:text-orange-600 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200 dark:hover:border-orange-800 dark:hover:bg-orange-900/10 dark:hover:text-orange-400"
+              >
+                <span>Xem tất cả bài viết</span>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  className="ml-2 h-5 w-5"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M9 5l7 7-7 7"
+                  />
+                </svg>
+              </Link>
+            </div>
+          )}
+        </div>
+      </section>
+
+      {/* CTA Section - Enhanced for conversions */}
+      <section className="py-16 sm:py-20">
+        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+          <div className="relative overflow-hidden rounded-3xl bg-gradient-to-r from-orange-500 via-orange-600 to-orange-700 shadow-2xl">
+            {/* Decorative elements */}
+            <div className="absolute -top-24 -right-24 h-64 w-64 rounded-full bg-orange-400/30"></div>
+            <div className="absolute -bottom-24 -left-24 h-64 w-64 rounded-full bg-orange-400/30"></div>
+
+            <div className="relative px-6 py-12 sm:px-12 sm:py-16 lg:flex lg:items-center lg:gap-8">
+              <div className="lg:w-2/3">
+                <h2 className="text-3xl font-black leading-tight text-white sm:text-4xl lg:text-5xl">
+                  Sẵn sàng chốt lộ trình và bắt đầu hành trình học nghiêm túc?
+                </h2>
+                <p className="text-lg mt-6 leading-relaxed text-orange-50">
+                  Đăng ký để nhận tư vấn cá nhân hóa theo mục tiêu nghề nghiệp hiện tại. Bạn sẽ có
+                  kế hoạch học cụ thể, mốc thời gian rõ ràng và đề xuất lộ trình phù hợp nhất.
+                </p>
+
+                {/* Benefits with icons */}
+                <ul className="mt-8 grid gap-4 sm:grid-cols-2">
+                  <li className="flex items-center gap-3 text-orange-50">
+                    <span className="flex h-8 w-8 items-center justify-center rounded-full bg-white/20">
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        className="h-4 w-4"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke="currentColor"
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth={2}
+                          d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"
+                        />
+                      </svg>
+                    </span>
+                    <span>Tư vấn 1:1 theo nền tảng hiện tại</span>
+                  </li>
+                  <li className="flex items-center gap-3 text-orange-50">
+                    <span className="flex h-8 w-8 items-center justify-center rounded-full bg-white/20">
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        className="h-4 w-4"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke="currentColor"
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth={2}
+                          d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
+                        />
+                      </svg>
+                    </span>
+                    <span>Mentor từ các tập đoàn đa quốc gia</span>
+                  </li>
+                  <li className="flex items-center gap-3 text-orange-50">
+                    <span className="flex h-8 w-8 items-center justify-center rounded-full bg-white/20">
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        className="h-4 w-4"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke="currentColor"
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth={2}
+                          d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"
+                        />
+                      </svg>
+                    </span>
+                    <span>Lab miễn phí, có nền tảng học tập riêng</span>
+                  </li>
+                  <li className="flex items-center gap-3 text-orange-50">
+                    <span className="flex h-8 w-8 items-center justify-center rounded-full bg-white/20">
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        className="h-4 w-4"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke="currentColor"
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth={2}
+                          d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                        />
+                      </svg>
+                    </span>
+                    <span>Hỗ trợ giảm giá lệ phí thi chứng chỉ AWS</span>
+                  </li>
+                </ul>
+              </div>
+
+              {/* CTA buttons */}
+              <div className="mt-10 flex flex-col gap-4 lg:mt-0 lg:w-1/3">
+                <Link
+                  href="/courses/register"
+                  className="text-lg inline-flex items-center justify-center rounded-xl bg-white px-8 py-4 font-bold text-orange-600 shadow-xl transition-transform hover:scale-105"
+                >
+                  <span>Đăng ký tư vấn ngay</span>
                   <svg
+                    xmlns="http://www.w3.org/2000/svg"
                     className="ml-2 h-5 w-5"
                     fill="none"
-                    stroke="currentColor"
                     viewBox="0 0 24 24"
+                    stroke="currentColor"
                   >
                     <path
                       strokeLinecap="round"
                       strokeLinejoin="round"
                       strokeWidth={2}
-                      d="M13 7l5 5m0 0l-5 5m5-5H6"
+                      d="M17 8l4 4m0 0l-4 4m4-4H3"
                     />
                   </svg>
-                </button>
-              </Link>
+                </Link>
+                <Link
+                  href="https://m.me/vntechies"
+                  className="text-lg inline-flex items-center justify-center rounded-xl border border-orange-200/60 bg-orange-500/30 px-8 py-4 font-bold text-white shadow-lg transition-all hover:bg-orange-500/50"
+                >
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    className="mr-2 h-5 w-5"
+                    fill="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z" />
+                  </svg>
+                  <span>Chat với tư vấn viên</span>
+                </Link>
+
+                <div className="mt-4 text-center text-sm text-orange-50">
+                  <span className="inline-flex flex-wrap items-center justify-center gap-x-2 gap-y-1">
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      className="h-4 w-4"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      stroke="currentColor"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
+                      />
+                    </svg>
+                    <span>Cam kết hoàn tiền nếu không hài lòng trong 7 ngày</span>
+                    <span className="text-orange-100/70">•</span>
+                    <Link
+                      href="/pricing#hoan-tien"
+                      className="font-semibold underline decoration-orange-200/80 underline-offset-2 hover:text-white"
+                    >
+                      Tham khảo chính sách giá
+                    </Link>
+                  </span>
+                </div>
+              </div>
             </div>
-          )}
+          </div>
         </div>
       </section>
-      <FreeCourses />
-      <AWSCert />
+
+      {/* FAQ Section - Kept as is, using existing component */}
       <FAQ />
     </>
   )
diff --git a/pages/series.js b/pages/series.js
index 3ae7a980..c944b8f4 100644
--- a/pages/series.js
+++ b/pages/series.js
@@ -15,18 +15,22 @@ export default function Series({ series }) {
         title={`Series - ${siteMetadata.headerTitle}`}
         description={`Series - ${siteMetadata.description}`}
       />
-      <div className="divide-y divide-gray-200 dark:divide-gray-700">
-        <div className="space-y-2 pt-6 pb-8 md:space-y-5">
-          <h1 className="md:text-6xl text-3xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl sm:leading-10 md:leading-14">
-            📦 Series
-          </h1>
-          <p className="text-lg leading-7 text-gray-500 dark:text-gray-400">
-            Tổng hợp các bài viết theo chủ đề
+      <div className="space-y-10">
+        <header>
+          <span className="page-eyebrow">Nội dung theo chủ đề</span>
+          <h1 className="page-heading text-slate-900 dark:text-slate-100">Series</h1>
+          <p className="page-lead">
+            Tổng hợp các bài viết được xếp theo lộ trình để học liền mạch.
           </p>
-        </div>
-        <div className="container py-12">
-          <div className="-m-4 flex flex-wrap">
-            {series.length === 0 && 'No series found.'}
+        </header>
+
+        <section>
+          <div className="grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-3">
+            {series.length === 0 && (
+              <div className="surface-panel col-span-full p-8 text-center text-sm text-slate-600 dark:text-slate-300">
+                No series found.
+              </div>
+            )}
             {series.map((d) => {
               return (
                 <Card
@@ -39,7 +43,7 @@ export default function Series({ series }) {
               )
             })}
           </div>
-        </div>
+        </section>
       </div>
     </>
   )
diff --git a/pages/tags.js b/pages/tags.js
index c4a3ed21..8c65754a 100644
--- a/pages/tags.js
+++ b/pages/tags.js
@@ -1,6 +1,5 @@
 import Link from '@/components/Link'
 import { PageSEO } from '@/components/SEO'
-import Tag from '@/components/Tag'
 import siteMetadata from '@/data/siteMetadata'
 import { getAllTags } from '@/lib/tags'
 import kebabCase from '@/lib/utils/kebabCase'
@@ -19,28 +18,34 @@ export default function Tags({ tags }) {
         title={`Tags - ${siteMetadata.headerTitle}`}
         description="Toàn bộ các tags trong website này"
       />
-      <div className="flex flex-col items-start justify-start divide-y divide-gray-200 dark:divide-gray-700 md:mt-24 md:flex-row md:items-center md:justify-center md:space-x-6 md:divide-y-0">
-        <div className="space-x-2 pt-6 pb-8 md:space-y-5">
-          <h1 className="md:text-6xl text-3xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl sm:leading-10 md:border-r-2 md:px-6 md:leading-14">
-            🗂 Tags
-          </h1>
-        </div>
-        <div className="flex max-w-lg flex-wrap">
-          {Object.keys(tags).length === 0 && 'No tags found.'}
-          {sortedTags.map((t) => {
-            return (
-              <div key={t} className="mt-2 mb-2 mr-5">
-                <Tag text={t} />
+      <div className="space-y-8">
+        <header>
+          <span className="page-eyebrow">Phân loại chủ đề</span>
+          <h1 className="page-heading text-slate-900 dark:text-slate-100">Tags</h1>
+          <p className="page-lead">Tất cả nhãn được gắn cho các bài viết trên VNTechies.</p>
+        </header>
+
+        <section className="surface-panel p-6 sm:p-8">
+          <div className="flex flex-wrap gap-3">
+            {Object.keys(tags).length === 0 && (
+              <p className="text-sm text-slate-600 dark:text-slate-300">No tags found.</p>
+            )}
+            {sortedTags.map((t) => {
+              return (
                 <Link
+                  key={t}
                   href={`/tags/${kebabCase(t)}`}
-                  className="-ml-2 text-sm font-semibold uppercase text-gray-600 dark:text-gray-300"
+                  className="text-xs inline-flex items-center gap-2 rounded-full border border-slate-200 bg-slate-100 px-3 py-1.5 font-semibold uppercase tracking-wide text-slate-700 hover:bg-slate-200 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200 dark:hover:bg-slate-700"
                 >
-                  {` (${tags[t]})`}
+                  <span>{t.split(' ').join('-')}</span>
+                  <span className="rounded-full bg-slate-200 px-2 py-0.5 text-[10px] text-slate-600 dark:bg-slate-700 dark:text-slate-300">
+                    {tags[t]}
+                  </span>
                 </Link>
-              </div>
-            )
-          })}
-        </div>
+              )
+            })}
+          </div>
+        </section>
       </div>
     </>
   )
diff --git a/public/static/images/authors/hanguyen.jpeg b/public/static/images/authors/hanguyen.jpeg
new file mode 100644
index 00000000..8b738b06
Binary files /dev/null and b/public/static/images/authors/hanguyen.jpeg differ
diff --git a/public/static/images/authors/hanguyen.jpg b/public/static/images/authors/hanguyen.jpg
deleted file mode 100644
index 37de9a0f..00000000
Binary files a/public/static/images/authors/hanguyen.jpg and /dev/null differ
diff --git a/public/static/images/courses/vdt.png b/public/static/images/courses/vdt.png
new file mode 100644
index 00000000..3a2c130b
Binary files /dev/null and b/public/static/images/courses/vdt.png differ
diff --git a/tailwind.config.js b/tailwind.config.js
index 77970d21..4a3ccbb0 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -35,6 +35,7 @@ module.exports = {
       },
       fontFamily: {
         sans: ['InterVariable', ...defaultTheme.fontFamily.sans],
+        display: ['InterVariable', ...defaultTheme.fontFamily.sans],
       },
       colors: {
         primary: colors.orange,