diff --git a/apps/sale/app/(guest)/about-us/page.tsx b/apps/sale/app/(guest)/about-us/page.tsx
new file mode 100644
index 0000000..e322214
--- /dev/null
+++ b/apps/sale/app/(guest)/about-us/page.tsx
@@ -0,0 +1,48 @@
+import type { Metadata } from "next";
+import { Header } from "@workspace/ui/components/layout/Header";
+import { Footer } from "@workspace/ui/components/layout/Footer";
+import { AboutHero } from "@/features/about/components/AboutHero";
+import { AboutMission } from "@/features/about/components/AboutMission";
+import { AboutTeam } from "@/features/about/components/AboutTeam";
+import { AboutCta } from "@/features/about/components/AboutCta";
+import { SponsorSection } from "@/features/landing/components/SponsorSection";
+
+export const metadata: Metadata = {
+  title: "Về Chúng Tôi | BeeWise - Nền Tảng Kết Nối Gia Sư",
+  description:
+    "Tìm hiểu về BeeWise — đội ngũ sáng lập, sứ mệnh và giá trị cốt lõi của nền tảng kết nối gia sư và học viên thông minh nhất Việt Nam.",
+  keywords: [
+    "về BeeWise",
+    "đội ngũ BeeWise",
+    "sứ mệnh BeeWise",
+    "nền tảng gia sư",
+    "startup giáo dục",
+    "FPT University",
+  ],
+  openGraph: {
+    title: "Về Chúng Tôi | BeeWise",
+    description:
+      "Tìm hiểu về BeeWise — sứ mệnh kết nối gia sư và học viên minh bạch, chất lượng.",
+    type: "website",
+    locale: "vi_VN",
+    siteName: "BeeWise",
+  },
+};
+
+export default function AboutPage() {
+  return (
+    <div className="flex min-h-full flex-col">
+      <Header />
+
+      <main id="main-content">
+        <AboutHero />
+        <AboutMission />
+        <AboutTeam />
+        <SponsorSection />
+        <AboutCta />
+      </main>
+
+      <Footer />
+    </div>
+  );
+}
diff --git a/apps/sale/app/(guest)/page.tsx b/apps/sale/app/(guest)/page.tsx
index 0c2e82e..f9fa728 100644
--- a/apps/sale/app/(guest)/page.tsx
+++ b/apps/sale/app/(guest)/page.tsx
@@ -9,6 +9,7 @@ import { HowItWorksSection } from "@/features/landing/components/HowItWorksSecti
 import { TutorSection } from "@/features/landing/components/TutorSection";
 import { TutorCarouselSection } from "@/features/landing/components/TutorCarouselSection";
 import { FeedbackSection } from "@/features/landing/components/FeedbackSection";
+import { SponsorSection } from "@/features/landing/components/SponsorSection";
 import { FaqSection } from "@/features/landing/components/FaqSection";
 
 import { TutorGuideTrust } from "@/features/tutor-guide/components/TutorGuideTrust";
@@ -58,6 +59,7 @@ export default function LandingPage() {
         <TutorCarouselSection />
         <TutorSection />
         <FeedbackSection />
+        <SponsorSection />
         <FaqSection />
       </main>
       <Footer />
diff --git a/apps/sale/app/(guest)/tutor-guide/page.tsx b/apps/sale/app/(guest)/tutor-guide/page.tsx
index 5b457f8..f09ee37 100644
--- a/apps/sale/app/(guest)/tutor-guide/page.tsx
+++ b/apps/sale/app/(guest)/tutor-guide/page.tsx
@@ -1,16 +1,16 @@
 import type { Metadata } from "next";
-import { Header } from '@workspace/ui/components/layout/Header';
-import { Footer } from '@workspace/ui/components/layout/Footer';
-import { TutorGuideHero } from '@/features/tutor-guide/components/TutorGuideHero';
-import { TutorGuidePainPoints } from '@/features/tutor-guide/components/TutorGuidePainPoints';
-import { TutorGuideFeatures } from '@/features/tutor-guide/components/TutorGuideFeatures';
-import { TutorGuideSteps } from '@/features/tutor-guide/components/TutorGuideSteps';
-import { TutorGuideFaq } from '@/features/tutor-guide/components/TutorGuideFaq';
-import { TutorGuideCta } from '@/features/tutor-guide/components/TutorGuideCta';
+import { Header } from "@workspace/ui/components/layout/Header";
+import { Footer } from "@workspace/ui/components/layout/Footer";
+import { TutorGuideHero } from "@/features/tutor-guide/components/TutorGuideHero";
+import { TutorGuidePainPoints } from "@/features/tutor-guide/components/TutorGuidePainPoints";
+import { TutorGuideFeatures } from "@/features/tutor-guide/components/TutorGuideFeatures";
+import { TutorGuideSteps } from "@/features/tutor-guide/components/TutorGuideSteps";
+import { TutorGuideFaq } from "@/features/tutor-guide/components/TutorGuideFaq";
+import { TutorGuideCta } from "@/features/tutor-guide/components/TutorGuideCta";
+import { TutorGuideFeedback } from "@/features/tutor-guide/components/TutorGuideFeedback";
 
 export const metadata: Metadata = {
-  title:
-    "Trở Thành Gia Sư BeeWise | Hồ Sơ Xác Thực, Kết Nối Minh Bạch",
+  title: "Trở Thành Gia Sư BeeWise | Hồ Sơ Xác Thực, Kết Nối Minh Bạch",
   description:
     "Tạo hồ sơ gia sư BeeWise miễn phí, xác thực năng lực và kết nối với học viên phù hợp. Cơ chế thu nhập rõ ràng, có đội ngũ hỗ trợ đồng hành.",
   keywords: [
@@ -33,18 +33,20 @@ export default function TutorGuidePage() {
       <main id="main-content">
         <TutorGuideHero />
 
+        <TutorGuideSteps />
+
         <TutorGuidePainPoints />
 
         <TutorGuideFeatures />
 
-        <TutorGuideSteps />
+        <TutorGuideFeedback />
 
-        <TutorGuideFaq />
         <TutorGuideCta />
+
+        <TutorGuideFaq />
       </main>
 
       <Footer />
     </div>
   );
 }
-
diff --git a/apps/sale/features/about/components/AboutCta.tsx b/apps/sale/features/about/components/AboutCta.tsx
new file mode 100644
index 0000000..d0a443c
--- /dev/null
+++ b/apps/sale/features/about/components/AboutCta.tsx
@@ -0,0 +1,48 @@
+import Link from "next/link";
+import { ArrowRight } from "@phosphor-icons/react/dist/ssr";
+
+export function AboutCta() {
+  return (
+    <section className="bg-background px-4 pb-20 sm:px-6 sm:pb-28 lg:px-8">
+      <div className="relative mx-auto max-w-7xl min-h-[360px] sm:min-h-[420px] overflow-hidden rounded-[2.5rem] bg-primary flex items-center">
+        {/* Background pattern */}
+        <div
+          className="pointer-events-none absolute inset-0 opacity-10"
+          style={{
+            backgroundImage: `radial-gradient(circle, rgba(255,197,0,0.5) 1px, transparent 1px)`,
+            backgroundSize: "28px 28px",
+          }}
+        />
+        <div className="pointer-events-none absolute top-0 right-0 w-96 h-96 bg-accent/20 rounded-full blur-3xl" />
+
+        <div className="relative z-10 flex flex-col items-center text-center gap-7 px-6 py-14 sm:px-12 sm:py-18 w-full">
+          <h2 className="font-nunito text-3xl sm:text-4xl lg:text-[2.8rem] font-black uppercase leading-tight text-primary-foreground max-w-[22ch]">
+            Bạn muốn trở thành một phần của{" "}
+            <span className="text-accent">BeeWise</span>?
+          </h2>
+          <p className="text-primary-foreground/75 text-base sm:text-lg max-w-[48ch] leading-relaxed">
+            Dù bạn là học viên đang tìm gia sư, hay một giáo viên muốn đưa chuyên
+            môn đến đúng người — BeeWise đang chờ bạn.
+          </p>
+          <div className="flex flex-wrap justify-center gap-4">
+            <Link
+              href="/tutors"
+              id="about-cta-find-tutor"
+              className="inline-flex min-h-13 items-center gap-2.5 rounded-full bg-accent px-7 text-base font-bold text-accent-foreground shadow-lg shadow-black/10 transition-transform duration-200 hover:-translate-y-0.5 active:translate-y-0"
+            >
+              Tìm gia sư ngay
+              <ArrowRight size={18} weight="bold" aria-hidden="true" />
+            </Link>
+            <Link
+              href="/tutor-guide"
+              id="about-cta-become-tutor"
+              className="inline-flex min-h-13 items-center gap-2.5 rounded-full bg-white/15 border border-white/25 px-7 text-base font-bold text-primary-foreground hover:bg-white/25 transition-all duration-200"
+            >
+              Đăng ký làm gia sư
+            </Link>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/apps/sale/features/about/components/AboutHero.tsx b/apps/sale/features/about/components/AboutHero.tsx
new file mode 100644
index 0000000..b345b9f
--- /dev/null
+++ b/apps/sale/features/about/components/AboutHero.tsx
@@ -0,0 +1,79 @@
+import Image from "next/image";
+import {
+  Sparkle,
+  Users,
+  ShieldCheck,
+  GraduationCap,
+} from "@phosphor-icons/react/dist/ssr";
+
+export function AboutHero() {
+  return (
+    <section className="relative overflow-hidden bg-primary pt-24 pb-16 sm:pt-32 sm:pb-24">
+      {/* Decorative blobs */}
+      <div className="pointer-events-none absolute -top-40 -right-40 w-[600px] h-[600px] rounded-full bg-white/5 blur-3xl" />
+      <div className="pointer-events-none absolute -bottom-20 -left-20 w-96 h-96 rounded-full bg-accent/15 blur-3xl" />
+
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
+          {/* Text */}
+          <div className="flex flex-col gap-6">
+            <span className="inline-flex self-start items-center gap-2 px-4 py-1.5 rounded-full bg-white/15 text-primary-foreground text-sm font-bold">
+              <Sparkle size={15} weight="fill" className="text-accent" />
+              Về BeeWise
+            </span>
+
+            <h1 className="font-nunito text-4xl sm:text-5xl lg:text-[3.2rem] font-black uppercase leading-tight text-primary-foreground">
+              Kết nối đúng người,{" "}
+              <br />
+              <span className="text-accent">đúng thời điểm</span>
+            </h1>
+
+            <p className="text-base sm:text-lg text-primary-foreground/75 leading-relaxed max-w-[52ch]">
+              BeeWise ra đời từ một câu hỏi đơn giản: tại sao tìm gia sư uy tín
+              lại khó đến vậy? Chúng tôi xây dựng nền tảng để việc học thêm trở
+              nên minh bạch, an toàn và hiệu quả hơn cho tất cả mọi người.
+            </p>
+
+            <div className="flex flex-wrap gap-4 pt-2">
+              {[
+                { icon: Users, label: "500+ Gia sư xác thực" },
+                { icon: GraduationCap, label: "2.000+ Học viên kết nối" },
+                { icon: ShieldCheck, label: "100% Hồ sơ được kiểm duyệt" },
+              ].map((stat) => {
+                const Icon = stat.icon;
+                return (
+                  <div
+                    key={stat.label}
+                    className="flex items-center gap-2.5 px-4 py-2.5 rounded-2xl bg-white/10 border border-white/15"
+                  >
+                    <Icon
+                      size={18}
+                      weight="fill"
+                      className="text-accent shrink-0"
+                    />
+                    <span className="text-sm font-bold text-primary-foreground">
+                      {stat.label}
+                    </span>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+
+          {/* Sticker visual */}
+          <div className="hidden lg:flex items-center justify-center">
+            <div className="relative w-72 h-72">
+              <div className="absolute inset-0 rounded-full bg-accent/20 blur-2xl" />
+              <Image
+                src="/images/Sticker/E3-1.PNG"
+                alt="BeeWise mascot"
+                fill
+                className="object-contain relative z-10 drop-shadow-2xl"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/apps/sale/features/about/components/AboutMission.tsx b/apps/sale/features/about/components/AboutMission.tsx
new file mode 100644
index 0000000..649f94d
--- /dev/null
+++ b/apps/sale/features/about/components/AboutMission.tsx
@@ -0,0 +1,111 @@
+import {
+  Eye,
+  Rocket,
+  Heart,
+  ShieldCheck,
+  Handshake,
+  Lightbulb,
+} from "@phosphor-icons/react/dist/ssr";
+
+const MISSION_VALUES = [
+  {
+    id: "transparency",
+    icon: Eye,
+    title: "Minh bạch",
+    desc: "Mọi thông tin về gia sư, học phí và quy trình đều được công khai rõ ràng. Không có chi phí ẩn, không có bất ngờ.",
+    color: "text-blue-600 bg-blue-500/10 border-blue-200",
+  },
+  {
+    id: "quality",
+    icon: ShieldCheck,
+    title: "Chất lượng",
+    desc: "Mỗi gia sư đều trải qua quy trình xác thực năng lực nghiêm ngặt trước khi được kết nối với học viên.",
+    color: "text-emerald-600 bg-emerald-500/10 border-emerald-200",
+  },
+  {
+    id: "trust",
+    icon: Handshake,
+    title: "Tin tưởng",
+    desc: "Chúng tôi đứng ra làm cầu nối đáng tin cậy, bảo vệ quyền lợi bình đẳng cho cả gia sư lẫn học viên.",
+    color: "text-violet-600 bg-violet-500/10 border-violet-200",
+  },
+  {
+    id: "impact",
+    icon: Rocket,
+    title: "Tác động thực",
+    desc: "Mỗi lớp học kết nối đúng chỗ là một bước tiến trong hành trình học tập. Đó là lý do BeeWise tồn tại.",
+    color: "text-amber-600 bg-amber-500/10 border-amber-200",
+  },
+  {
+    id: "community",
+    icon: Heart,
+    title: "Cộng đồng",
+    desc: "BeeWise không chỉ là nền tảng — đây là cộng đồng của những người học và người dạy có trách nhiệm.",
+    color: "text-rose-600 bg-rose-500/10 border-rose-200",
+  },
+  {
+    id: "innovation",
+    icon: Lightbulb,
+    title: "Đổi mới",
+    desc: "Ứng dụng AI không phải để thay thế con người, mà để giúp mỗi người tìm được đúng người đồng hành.",
+    color: "text-teal-600 bg-teal-500/10 border-teal-200",
+  },
+];
+
+export function AboutMission() {
+  return (
+    <section className="py-16 sm:py-24 bg-background" id="about-mission">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        {/* Mission Statement */}
+        <div className="max-w-3xl mx-auto text-center mb-16 sm:mb-20">
+          <span className="inline-flex items-center px-4 py-1.5 rounded-full bg-primary/10 text-primary text-sm font-bold mb-4">
+            Sứ mệnh
+          </span>
+          <h2 className="text-3xl sm:text-4xl lg:text-[2.6rem] font-black uppercase text-primary leading-tight font-nunito mb-6">
+            Chúng tôi muốn làm gì?
+          </h2>
+          <p className="text-foreground/65 text-base sm:text-xl leading-relaxed">
+            BeeWise hướng đến việc xây dựng một hệ sinh thái giáo dục minh bạch,
+            nơi mọi học viên đều có thể tìm được gia sư phù hợp và mọi gia sư
+            tâm huyết đều được ghi nhận xứng đáng — không phân biệt khu vực hay
+            điều kiện kinh tế.
+          </p>
+        </div>
+
+        {/* Values Grid */}
+        <div>
+          <h3 className="text-center text-xl sm:text-2xl font-bold text-foreground/70 font-nunito mb-10">
+            Những giá trị cốt lõi
+          </h3>
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5">
+            {MISSION_VALUES.map((v) => {
+              const Icon = v.icon;
+              return (
+                <div
+                  key={v.id}
+                  className="group p-6 rounded-3xl bg-card border border-border/80 shadow-xs hover:shadow-xl hover:border-primary/20 hover:-translate-y-1 transition-all duration-300"
+                >
+                  <div className="flex items-start gap-4">
+                    <div
+                      className={`w-12 h-12 rounded-2xl flex items-center justify-center shrink-0 ${v.color} transition-transform duration-300 group-hover:scale-110`}
+                    >
+                      <Icon size={24} weight="fill" />
+                    </div>
+                    <div>
+                      <h4 className="font-bold text-lg text-foreground font-nunito leading-snug mb-1.5">
+                        {v.title}
+                      </h4>
+                      <p className="text-sm text-foreground/65 leading-relaxed">
+                        {v.desc}
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/apps/sale/features/about/components/AboutTeam.tsx b/apps/sale/features/about/components/AboutTeam.tsx
new file mode 100644
index 0000000..6dd133c
--- /dev/null
+++ b/apps/sale/features/about/components/AboutTeam.tsx
@@ -0,0 +1,125 @@
+import Image from "next/image";
+import { LinkedinLogo, GithubLogo } from "@phosphor-icons/react/dist/ssr";
+
+const TEAM_MEMBERS = [
+  {
+    id: "1",
+    name: "Nguyễn Văn A",
+    role: "Co-founder & Product Lead",
+    avatar: "VA",
+    avatarBg: "bg-primary",
+    bio: "Sinh viên ĐH FPT, đam mê EdTech và trải nghiệm người dùng. Chịu trách nhiệm về định hướng sản phẩm và trải nghiệm người dùng.",
+    linkedin: "#",
+    github: "#",
+  },
+  {
+    id: "2",
+    name: "Trần Thị B",
+    role: "Co-founder & Tech Lead",
+    avatar: "TB",
+    avatarBg: "bg-violet-600",
+    bio: "Fullstack developer với niềm đam mê xây dựng hệ thống mở rộng. Dẫn dắt kỹ thuật từ backend đến hạ tầng cloud.",
+    linkedin: "#",
+    github: "#",
+  },
+  {
+    id: "3",
+    name: "Lê Minh C",
+    role: "AI & Data Engineer",
+    avatar: "MC",
+    avatarBg: "bg-emerald-600",
+    bio: "Chuyên sâu về Machine Learning và xử lý ngôn ngữ tự nhiên. Xây dựng hệ thống gợi ý gia sư thông minh của BeeWise.",
+    linkedin: "#",
+    github: "#",
+  },
+  {
+    id: "4",
+    name: "Phạm Thu D",
+    role: "Design & Brand",
+    avatar: "TD",
+    avatarBg: "bg-rose-500",
+    bio: "UI/UX Designer với tư duy thiết kế lấy người dùng làm trung tâm. Đảm bảo mỗi màn hình đều đẹp, dễ dùng và có cảm xúc.",
+    linkedin: "#",
+    github: "#",
+  },
+];
+
+export function AboutTeam() {
+  return (
+    <section
+      className="py-16 sm:py-24 bg-muted/40 relative overflow-hidden"
+      id="about-team"
+    >
+      {/* Ambient */}
+      <div className="pointer-events-none absolute top-0 right-0 w-96 h-96 bg-primary/5 rounded-full blur-3xl" />
+
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
+        <div className="text-center mb-12 sm:mb-16 flex flex-col items-center gap-3">
+          <span className="inline-flex items-center px-4 py-1.5 rounded-full bg-primary/10 text-primary text-sm font-bold">
+            Đội ngũ sáng lập
+          </span>
+          <h2 className="text-3xl sm:text-4xl lg:text-[2.6rem] font-black uppercase text-primary leading-tight font-nunito">
+            Những người xây dựng <span className="text-accent">BeeWise</span>
+          </h2>
+          <p className="text-foreground/65 text-base sm:text-lg max-w-xl leading-relaxed">
+            Một nhóm sinh viên FPT với cùng mục tiêu: làm cho việc học thêm trở
+            nên minh bạch và hiệu quả hơn.
+          </p>
+        </div>
+
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5">
+          {TEAM_MEMBERS.map((member) => (
+            <div
+              key={member.id}
+              className="group flex flex-col gap-5 p-6 rounded-3xl bg-card border border-border/80 shadow-xs hover:shadow-xl hover:border-primary/20 hover:-translate-y-1 transition-all duration-300"
+            >
+              {/* Avatar */}
+              <div className="flex items-center gap-4">
+                <div
+                  className={`w-14 h-14 rounded-2xl ${member.avatarBg} flex items-center justify-center text-white font-black text-base shrink-0 shadow-md`}
+                >
+                  {member.avatar}
+                </div>
+                <div>
+                  <p className="font-bold text-base text-foreground font-nunito leading-tight">
+                    {member.name}
+                  </p>
+                  <p className="text-xs text-primary font-semibold mt-0.5">
+                    {member.role}
+                  </p>
+                </div>
+              </div>
+
+              {/* Bio */}
+              <p className="text-sm text-foreground/65 leading-relaxed flex-1">
+                {member.bio}
+              </p>
+
+              {/* Social links */}
+              <div className="flex items-center gap-3 pt-3 border-t border-border/60">
+                <a
+                  href={member.linkedin}
+                  className="flex items-center gap-1.5 text-xs text-foreground/55 hover:text-primary transition-colors font-medium"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  <LinkedinLogo size={16} weight="fill" />
+                  LinkedIn
+                </a>
+                <a
+                  href={member.github}
+                  className="flex items-center gap-1.5 text-xs text-foreground/55 hover:text-foreground transition-colors font-medium"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  <GithubLogo size={16} weight="fill" />
+                  GitHub
+                </a>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/apps/sale/features/landing/components/FaqSection.tsx b/apps/sale/features/landing/components/FaqSection.tsx
index 337dcaf..c9b60b6 100644
--- a/apps/sale/features/landing/components/FaqSection.tsx
+++ b/apps/sale/features/landing/components/FaqSection.tsx
@@ -21,8 +21,8 @@ export function FaqSection() {
       <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
         <h2
           id="faq-headline"
-          className="text-3xl sm:text-4xl tracking-tight text-primary mb-12 text-center"
-          style={{ fontFamily: "var(--font-nunito-family)", fontWeight: 800 }}
+          className="text-3xl sm:text-4xl uppercase tracking-tight text-primary mb-12 text-center"
+          style={{ fontFamily: "var(--font-google-sans)", fontWeight: 800 }}
         >
           Câu Hỏi Thường Gặp
         </h2>
diff --git a/apps/sale/features/landing/components/SponsorSection.tsx b/apps/sale/features/landing/components/SponsorSection.tsx
new file mode 100644
index 0000000..31c05e7
--- /dev/null
+++ b/apps/sale/features/landing/components/SponsorSection.tsx
@@ -0,0 +1,43 @@
+"use client";
+
+import Image from "next/image";
+import { Handshake } from "@phosphor-icons/react";
+
+export function SponsorSection() {
+  return (
+    <section
+      className="py-12 sm:py-16 bg-muted/30 border-y border-border/60 relative overflow-hidden"
+      id="sponsors"
+      aria-labelledby="sponsors-heading"
+    >
+      {/* Subtle background glow */}
+      <div className="pointer-events-none absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[500px] h-32 bg-primary/5 rounded-full blur-3xl" />
+
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
+        <div className="flex flex-col items-center text-center gap-6 sm:gap-8">
+          {/* Tag & Small Title */}
+          <div className="flex flex-col items-center gap-2">
+            <span className="inline-flex items-center gap-2 px-3.5 py-1 rounded-full bg-primary/10 text-primary text-xs font-bold uppercase tracking-wider">
+              Đơn vị tài trợ
+            </span>
+          </div>
+
+          {/* Sponsor Logo Card */}
+          <div className="group p-6 sm:p-8 rounded-3xl bg-card border border-border/80 shadow-xs hover:shadow-xl hover:border-primary/20 transition-all duration-300 flex flex-col items-center justify-center max-w-md w-full">
+            <div className="relative w-full h-16 sm:h-20 flex items-center justify-center">
+              <Image
+                src="https://res.cloudinary.com/xcrm6ykz/image/upload/v1787134517/2021-FPTU-Long.png"
+                alt="Trường Đại Học FPT - Nhà tài trợ chính thức"
+                width={360}
+                height={120}
+                unoptimized
+                className="max-h-16 sm:max-h-20 w-auto object-contain transition-transform duration-300 group-hover:scale-105"
+                priority
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/apps/sale/features/tutor-guide/components/TutorGuideCta.tsx b/apps/sale/features/tutor-guide/components/TutorGuideCta.tsx
index 772b161..0f3f4cd 100644
--- a/apps/sale/features/tutor-guide/components/TutorGuideCta.tsx
+++ b/apps/sale/features/tutor-guide/components/TutorGuideCta.tsx
@@ -14,37 +14,37 @@ export function TutorGuideCta() {
       className="bg-background px-4 pb-20 sm:px-6 sm:pb-28 lg:px-8"
       aria-labelledby="cta-final-heading"
     >
-      <div className="relative mx-auto grid max-w-7xl overflow-hidden rounded-[2rem] bg-primary lg:grid-cols-[1fr_0.72fr]">
-        <div className="relative flex flex-col items-start px-6 py-14 sm:px-12 sm:py-18 lg:px-16">
+      <div className="relative mx-auto grid max-w-7xl min-h-[460px] sm:min-h-[520px] lg:min-h-[560px] overflow-hidden rounded-[2.5rem] bg-primary lg:grid-cols-[1fr_0.75fr]">
+        <div className="relative flex flex-col justify-center items-start px-6 py-16 sm:px-12 sm:py-20 lg:px-16 xl:px-20">
           <h2
             id="cta-final-heading"
-            className="max-w-[18ch] font-nunito text-3xl font-extrabold leading-tight text-primary-foreground text-justify"
+            className="max-w-[18ch] font-nunito text-3xl sm:text-4xl lg:text-[2.6rem] font-extrabold leading-tight text-primary-foreground text-left"
           >
             Sẵn sàng kết nối cùng học viên phù hợp?
           </h2>
-          <p className="mt-5 max-w-[54ch] text-base leading-relaxed text-primary-foreground/68">
+          <p className="mt-6 max-w-[54ch] text-base sm:text-lg leading-relaxed text-primary-foreground/75">
             Hoàn thiện hồ sơ gia sư BeeWise và bắt đầu gặp những học viên đang
             tìm đúng chuyên môn của bạn.
           </p>
           <Link
             href="/register"
             id="cta-final-register"
-            className="mt-8 inline-flex min-h-13 items-center justify-center gap-2 rounded-full bg-accent px-7 text-sm font-bold text-accent-foreground transition-transform duration-200 hover:-translate-y-0.5 active:translate-y-0"
+            className="mt-9 inline-flex min-h-14 items-center justify-center gap-2.5 rounded-full bg-accent px-8 text-base font-bold text-accent-foreground shadow-lg shadow-black/10 transition-transform duration-200 hover:-translate-y-0.5 active:translate-y-0"
           >
             Bắt đầu tạo hồ sơ
-            <ArrowRightIcon size={17} weight="bold" aria-hidden="true" />
+            <ArrowRightIcon size={18} weight="bold" aria-hidden="true" />
           </Link>
           <ul
-            className="mt-8 flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:gap-x-6"
+            className="mt-10 flex flex-col gap-3.5 sm:flex-row sm:flex-wrap sm:gap-x-6"
             role="list"
           >
             {NOTES.map((note) => (
               <li
                 key={note}
-                className="flex items-center gap-2 text-sm text-primary-foreground/70"
+                className="flex items-center gap-2 text-sm sm:text-base text-primary-foreground/80 font-medium"
               >
                 <CheckIcon
-                  size={15}
+                  size={16}
                   weight="bold"
                   className="text-accent"
                   aria-hidden="true"
@@ -55,12 +55,12 @@ export function TutorGuideCta() {
           </ul>
         </div>
 
-        <div className="relative min-h-80 bg-[#d7d8dc] lg:min-h-full">
+        <div className="relative min-h-[360px] sm:min-h-[440px] bg-[#d7d8dc] lg:min-h-full">
           <Image
             src="/images/Tutor/2.png"
             alt="Thành viên cộng đồng gia sư BeeWise"
             fill
-            sizes="(max-width: 1024px) 100vw, 38vw"
+            sizes="(max-width: 1024px) 100vw, 42vw"
             className="object-cover object-top"
           />
         </div>
diff --git a/apps/sale/features/tutor-guide/components/TutorGuideFaq.tsx b/apps/sale/features/tutor-guide/components/TutorGuideFaq.tsx
index 1ba3324..d88259b 100644
--- a/apps/sale/features/tutor-guide/components/TutorGuideFaq.tsx
+++ b/apps/sale/features/tutor-guide/components/TutorGuideFaq.tsx
@@ -95,7 +95,7 @@ export function TutorGuideFaq() {
         <div className="gap-5 mb-12 text-center">
           <h2
             id="faq-heading"
-            className="tracking-tight uppercase leading-tight text-foreground"
+            className="tracking-tight uppercase leading-tight text-primary"
             style={{
               fontFamily: "var(--font-google-sans)",
               fontWeight: 800,
diff --git a/apps/sale/features/tutor-guide/components/TutorGuideFeatures.tsx b/apps/sale/features/tutor-guide/components/TutorGuideFeatures.tsx
index a877fd3..6d5e2ea 100644
--- a/apps/sale/features/tutor-guide/components/TutorGuideFeatures.tsx
+++ b/apps/sale/features/tutor-guide/components/TutorGuideFeatures.tsx
@@ -37,17 +37,17 @@ export function TutorGuideFeatures() {
               id="features-heading"
               className="font-nunito uppercase font-black leading-[1.12] tracking-tight text-foreground"
             >
-              <span className="block text-3xl sm:text-4xl">
+              <span className="block text-3xl sm:text-4xl text-primary">
                 Một hồ sơ có chiều sâu,
               </span>
-              <span className="mt-2 block text-2xl text-primary sm:text-[2rem]">
+              <span className="mt-2 block text-2xl text-accent sm:text-[2rem]">
                 không chỉ là vài dòng giới thiệu
               </span>
             </h2>
             <p className="mt-5 max-w-[58ch] text-base leading-relaxed text-foreground/65">
               Môn dạy, kinh nghiệm, bằng cấp, lịch trống và phương pháp giảng
               dạy được trình bày trong cùng một hồ sơ để học viên hiểu rõ bạn
-              trước khi kết nối.
+              trước khi công khai.
             </p>
             <div className="relative mt-9 aspect-[16/10] overflow-hidden rounded-[2rem] bg-muted">
               <Image
diff --git a/apps/sale/features/tutor-guide/components/TutorGuideFeedback.tsx b/apps/sale/features/tutor-guide/components/TutorGuideFeedback.tsx
new file mode 100644
index 0000000..9f2496c
--- /dev/null
+++ b/apps/sale/features/tutor-guide/components/TutorGuideFeedback.tsx
@@ -0,0 +1,213 @@
+"use client";
+
+import { Star, Quotes } from "@phosphor-icons/react";
+
+const TUTOR_FEEDBACKS = [
+  {
+    id: "1",
+    name: "Thầy Nguyễn Hoàng Anh",
+    subject: "Gia sư Toán • 4 năm kinh nghiệm",
+    avatar: "HA",
+    avatarBg: "bg-blue-500",
+    rating: 5,
+    highlight: "Không còn mất thời gian tìm lớp",
+    quote:
+      "Trước đây mình phải đăng bài khắp nơi, mất cả tuần mới tìm được 1 lớp. Từ khi dùng BeeWise, học viên chủ động tìm đến mình dựa trên hồ sơ đã xác thực. Tiết kiệm rất nhiều công sức.",
+    sessions: "38 buổi dạy / tháng",
+    income: "12.000.000đ / tháng",
+  },
+  {
+    id: "2",
+    name: "Cô Trần Mai Linh",
+    subject: "Gia sư Tiếng Anh • 6 năm kinh nghiệm",
+    avatar: "ML",
+    avatarBg: "bg-emerald-500",
+    rating: 5,
+    quote:
+      "Học viên được ghép qua AI thực sự phù hợp với phương pháp dạy của mình. Không còn cảnh học thử rồi nghỉ nữa. Lịch dạy ổn định hơn, thu nhập cũng đoán trước được.",
+    sessions: "22 buổi dạy / tháng",
+    income: "8.800.000đ / tháng",
+  },
+  {
+    id: "3",
+    name: "Thầy Lê Minh Tuấn",
+    subject: "Gia sư Lý • Giáo viên THPT",
+    avatar: "MT",
+    avatarBg: "bg-violet-500",
+    rating: 5,
+    quote:
+      "Phụ huynh đọc hồ sơ xong là tin ngay, không cần mất thời gian giới thiệu bản thân lại từ đầu. Quy trình xác thực bằng cấp của BeeWise tạo ra sự khác biệt rất lớn so với các nền tảng khác.",
+    sessions: "16 buổi dạy / tháng",
+    income: "7.200.000đ / tháng",
+  },
+  {
+    id: "4",
+    name: "Cô Phạm Thu Hà",
+    subject: "Gia sư Hóa • Thủ khoa ĐH KHTN",
+    avatar: "TH",
+    avatarBg: "bg-rose-500",
+    rating: 5,
+    quote:
+      "Có lần học viên đột ngột xin nghỉ giữa chừng, mình không biết xử lý thế nào. Đội ngũ BeeWise hỗ trợ ngay trong ngày, giải quyết ổn thỏa cho cả hai bên. Rất chuyên nghiệp.",
+    sessions: "28 buổi dạy / tháng",
+    income: "9.600.000đ / tháng",
+  },
+];
+
+export function TutorGuideFeedback() {
+  return (
+    <section
+      className="py-16 sm:py-24 bg-muted/40 relative overflow-hidden"
+      id="tutor-feedback"
+      aria-labelledby="tutor-feedback-heading"
+    >
+      {/* Ambient glows */}
+      <div className="pointer-events-none absolute top-0 right-0 w-96 h-96 bg-primary/5 rounded-full blur-3xl" />
+      <div className="pointer-events-none absolute bottom-0 left-0 w-72 h-72 bg-accent/10 rounded-full blur-3xl" />
+
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
+        {/* Section header */}
+        <div className="text-center mb-12 sm:mb-16 flex flex-col items-center gap-3">
+          <span className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-primary/10 text-primary text-sm font-bold">
+            Gia sư nói gì về BeeWise
+          </span>
+
+          <h2
+            id="tutor-feedback-heading"
+            className="text-3xl sm:text-4xl lg:text-[2.6rem] font-black uppercase text-primary leading-tight font-nunito"
+          >
+            Được tin tưởng bởi{" "}
+            <span className="text-accent">hàng trăm gia sư</span>
+          </h2>
+
+          <p className="text-foreground/65 text-base sm:text-lg max-w-2xl leading-relaxed">
+            Không phải lời quảng cáo — đây là những chia sẻ thật từ các gia sư
+            đang hoạt động trên nền tảng BeeWise mỗi ngày.
+          </p>
+        </div>
+
+        {/* Featured card (first, large) + 3 cards in grid */}
+        <div className="flex flex-col gap-5">
+          {/* Featured top card */}
+          <div className="group relative rounded-3xl bg-primary p-8 sm:p-10 lg:p-12 overflow-hidden border border-primary/20">
+            {/* bg pattern */}
+            <div
+              className="pointer-events-none absolute inset-0 opacity-10"
+              style={{
+                backgroundImage: `radial-gradient(circle, rgba(255,197,0,0.5) 1px, transparent 1px)`,
+                backgroundSize: "28px 28px",
+              }}
+            />
+            <div className="pointer-events-none absolute top-0 right-0 w-72 h-72 bg-accent/20 rounded-full blur-3xl" />
+
+            <div className="relative z-10 flex flex-col lg:flex-row gap-8 lg:items-center">
+              {/* Quote */}
+              <div className="flex-1">
+                <Quotes
+                  size={40}
+                  weight="fill"
+                  className="text-accent/60 mb-4"
+                />
+                <blockquote className="text-lg sm:text-xl lg:text-2xl font-semibold text-primary-foreground leading-relaxed italic max-w-[52ch]">
+                  &ldquo;{TUTOR_FEEDBACKS[0].quote}&rdquo;
+                </blockquote>
+              </div>
+
+              {/* Author info + stats */}
+              <div className="flex flex-col gap-5 lg:min-w-[260px] shrink-0">
+                <div className="flex items-center gap-4">
+                  <div
+                    className={`w-14 h-14 rounded-2xl ${TUTOR_FEEDBACKS[0].avatarBg} flex items-center justify-center text-white font-black text-lg shrink-0 shadow-lg`}
+                  >
+                    {TUTOR_FEEDBACKS[0].avatar}
+                  </div>
+                  <div>
+                    <p className="font-bold text-base text-primary-foreground font-nunito">
+                      {TUTOR_FEEDBACKS[0].name}
+                    </p>
+                    <p className="text-sm text-primary-foreground/65 mt-0.5">
+                      {TUTOR_FEEDBACKS[0].subject}
+                    </p>
+                    <div className="flex gap-0.5 mt-1.5">
+                      {Array.from({ length: TUTOR_FEEDBACKS[0].rating }).map(
+                        (_, i) => (
+                          <Star
+                            key={i}
+                            size={13}
+                            weight="fill"
+                            className="text-accent"
+                          />
+                        ),
+                      )}
+                    </div>
+                  </div>
+                </div>
+
+                <div className="grid grid-cols-2 gap-3">
+                  <div className="rounded-2xl bg-white/10 px-4 py-3 text-center">
+                    <p className="text-xs text-primary-foreground/60 font-medium">
+                      Lịch dạy
+                    </p>
+                    <p className="text-sm font-bold text-primary-foreground mt-0.5">
+                      {TUTOR_FEEDBACKS[0].sessions}
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* 3 smaller cards */}
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-5">
+            {TUTOR_FEEDBACKS.slice(1).map((fb) => (
+              <div
+                key={fb.id}
+                className="group flex flex-col gap-5 p-6 rounded-3xl bg-card border border-border/80 shadow-xs hover:shadow-xl hover:border-primary/20 hover:-translate-y-1 transition-all duration-300"
+              >
+                {/* Quote icon */}
+                <Quotes size={24} weight="fill" className="text-primary/20" />
+
+                {/* Quote text */}
+                <blockquote className="text-sm text-foreground/75 leading-relaxed italic flex-1">
+                  &ldquo;{fb.quote}&rdquo;
+                </blockquote>
+
+                {/* Divider */}
+                <div className="border-t border-border/60 pt-4 flex flex-col gap-3">
+                  {/* Stars */}
+                  <div className="flex gap-0.5">
+                    {Array.from({ length: fb.rating }).map((_, i) => (
+                      <Star
+                        key={i}
+                        size={13}
+                        weight="fill"
+                        className="text-amber-500"
+                      />
+                    ))}
+                  </div>
+
+                  {/* Author */}
+                  <div className="flex items-center gap-3">
+                    <div
+                      className={`w-10 h-10 rounded-xl ${fb.avatarBg} flex items-center justify-center text-white font-black text-sm shrink-0`}
+                    >
+                      {fb.avatar}
+                    </div>
+                    <div className="min-w-0">
+                      <p className="font-bold text-sm text-foreground font-nunito truncate">
+                        {fb.name}
+                      </p>
+                      <p className="text-xs text-foreground/55 truncate mt-0.5">
+                        {fb.subject}
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/apps/sale/features/tutor-guide/components/TutorGuidePainPoints.tsx b/apps/sale/features/tutor-guide/components/TutorGuidePainPoints.tsx
index 333a931..794b12e 100644
--- a/apps/sale/features/tutor-guide/components/TutorGuidePainPoints.tsx
+++ b/apps/sale/features/tutor-guide/components/TutorGuidePainPoints.tsx
@@ -9,68 +9,126 @@ const PAIN_POINTS = [
   {
     id: "search",
     icon: MagnifyingGlassIcon,
+    number: "01",
     title: "Tìm lớp mất nhiều thời gian",
     text: "Bài đăng trôi nhanh, nhu cầu thiếu rõ ràng và khó biết học viên có thực sự phù hợp hay không.",
+    badge: "Tìm kiếm lớp học",
   },
   {
     id: "fee",
     icon: CurrencyCircleDollarIcon,
+    number: "02",
     title: "Phí nhận lớp thiếu minh bạch",
     text: "Gia sư thường phải trả tiền trước khi có đủ thông tin để đánh giá cơ hội giảng dạy.",
+    badge: "Chi phí & Hoa hồng",
   },
   {
     id: "trust",
     icon: ShieldWarningIcon,
+    number: "03",
     title: "Năng lực khó được ghi nhận",
     text: "Bằng cấp, kinh nghiệm và phương pháp dạy dễ bị thu gọn thành vài dòng giới thiệu chung chung.",
+    badge: "Hồ sơ & Uy tín",
   },
   {
     id: "support",
     icon: ChatCircleTextIcon,
+    number: "04",
     title: "Thiếu người hỗ trợ khi kết nối",
     text: "Khi lịch học hoặc kỳ vọng thay đổi, gia sư thường phải tự xử lý toàn bộ trao đổi với học viên.",
+    badge: "Hỗ trợ & Tư vấn",
   },
 ];
 
 export function TutorGuidePainPoints() {
   return (
     <section
-      className="bg-primary py-18 sm:py-24"
+      className="bg-primary py-16 sm:py-24 relative overflow-hidden"
       aria-labelledby="pain-points-heading"
     >
-      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
-        <div className="max-w-2xl">
+      <div className="pointer-events-none absolute -top-32 -right-32 w-[500px] h-[500px] rounded-full bg-white/5 blur-3xl" />
+      <div className="pointer-events-none absolute -bottom-32 -left-32 w-[400px] h-[400px] rounded-full bg-accent/10 blur-3xl" />
+
+      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 relative z-10">
+        {/* Header */}
+        <div className="max-w-2xl mb-12 sm:mb-16">
           <h2
             id="pain-points-heading"
-            className="font-nunito uppercase text-3xl font-extrabold leading-tight text-primary-foreground sm:text-4xl"
+            className="font-nunito uppercase text-3xl sm:text-4xl lg:text-[2.6rem] font-extrabold leading-tight text-primary-foreground"
           >
             Không cần rải hồ sơ
+            <br />
+            <span className="text-accent">khắp nơi nữa</span>
           </h2>
           <p className="mt-4 max-w-[58ch] text-base leading-relaxed text-primary-foreground/70">
-            BeeWise được xây dựng từ những vướng mắc rất thật trong quá trình
-            tìm học viên và duy trì một lớp học lâu dài.
+            BeeWise được xây dựng để bạn tìm học viên dễ dàng, tập trung hơn và
+            hơn nữa giúp bạn quản lý dễ dàng hơn.
           </p>
         </div>
-        <div className="mt-12 grid grid-cols-1 gap-x-12 gap-y-9 md:grid-cols-2">
-          {PAIN_POINTS.map((point) => {
+
+        {/* Zigzag Card Layout — image placeholder on alternating sides */}
+        <div className="flex flex-col gap-6 lg:gap-8">
+          {PAIN_POINTS.map((point, index) => {
             const Icon = point.icon;
+            const isEven = index % 2 === 0;
             return (
-              <article
+              <div
                 key={point.id}
-                className="grid grid-cols-[auto_1fr] gap-4"
+                className={`group flex flex-col ${isEven ? "lg:flex-row" : "lg:flex-row-reverse"} gap-0 rounded-3xl overflow-hidden border border-white/10 bg-white/5 hover:bg-white/8 transition-all duration-300`}
               >
-                <div className="flex h-11 w-11 items-center justify-center rounded-xl bg-accent text-accent-foreground">
-                  <Icon size={22} weight="bold" aria-hidden="true" />
+                {/* Image placeholder — user will add image later */}
+                <div className="relative lg:w-[45%] min-h-52 sm:min-h-64 lg:min-h-72 bg-white/10 flex items-center justify-center overflow-hidden shrink-0">
+                  {/* Placeholder pattern */}
+                  <div
+                    className="absolute inset-0 opacity-20"
+                    style={{
+                      backgroundImage: `radial-gradient(circle, rgba(255,197,0,0.4) 1px, transparent 1px)`,
+                      backgroundSize: "24px 24px",
+                    }}
+                  />
+                  <div className="relative z-10 flex flex-col items-center gap-3 text-primary-foreground/40">
+                    <div className="w-16 h-16 rounded-2xl border-2 border-dashed border-primary-foreground/20 flex items-center justify-center">
+                      <Icon size={28} className="text-primary-foreground/30" />
+                    </div>
+                    <span className="text-xs font-medium tracking-wider uppercase">
+                      Ảnh LMS sẽ hiển thị tại đây
+                    </span>
+                  </div>
                 </div>
-                <div>
-                  <h3 className="font-google-sans text-lg font-bold text-primary-foreground">
-                    {point.title}
-                  </h3>
-                  <p className="mt-2 max-w-[48ch] text-sm leading-relaxed text-primary-foreground/65">
-                    {point.text}
-                  </p>
+
+                {/* Content */}
+                <div className="flex flex-col justify-center gap-4 p-7 sm:p-9 lg:p-10">
+                  {/* Number + Badge */}
+                  <div className="flex items-center gap-3">
+                    <span className="text-4xl font-black text-white/10 font-nunito leading-none select-none">
+                      {point.number}
+                    </span>
+                    <span className="px-3 py-1 rounded-full bg-accent/20 text-accent text-xs font-bold border border-accent/30">
+                      {point.badge}
+                    </span>
+                  </div>
+
+                  {/* Icon + Title */}
+                  <div className="flex items-start gap-4">
+                    <div className="shrink-0 w-11 h-11 rounded-xl bg-accent flex items-center justify-center shadow-lg shadow-accent/20">
+                      <Icon
+                        size={22}
+                        weight="bold"
+                        className="text-accent-foreground"
+                        aria-hidden="true"
+                      />
+                    </div>
+                    <div>
+                      <h3 className="font-nunito text-xl sm:text-2xl font-extrabold text-primary-foreground leading-tight">
+                        {point.title}
+                      </h3>
+                      <p className="mt-2.5 text-sm sm:text-base leading-relaxed text-primary-foreground/65 max-w-[46ch]">
+                        {point.text}
+                      </p>
+                    </div>
+                  </div>
                 </div>
-              </article>
+              </div>
             );
           })}
         </div>
diff --git a/apps/sale/features/tutor-guide/components/TutorGuideSteps.tsx b/apps/sale/features/tutor-guide/components/TutorGuideSteps.tsx
index a37acde..98de5dd 100644
--- a/apps/sale/features/tutor-guide/components/TutorGuideSteps.tsx
+++ b/apps/sale/features/tutor-guide/components/TutorGuideSteps.tsx
@@ -44,8 +44,8 @@ export function TutorGuideSteps() {
         <div className="relative">
           <div className="flex flex-col gap-6 md:flex-row md:items-end md:justify-between">
             <div>
-              <div className="mb-4 inline-flex items-center gap-2 rounded-full border border-primary/10 bg-white px-4 py-2 text-sm font-bold text-primary shadow-sm">
-                Lộ trình dành cho gia sư mới
+              <div className="mb-4 italic inline-flex items-center gap-2 rounded-full border border-primary/10 bg-white px-4 py-2 text-sm font-bold text-primary shadow-sm">
+                Hướng dẫn cho "new Bee"
               </div>
               <h2
                 id="steps-heading"