diff --git a/content/classes/sample-python-fundamentals.mdx b/content/classes/sample-python-fundamentals.mdx
new file mode 100644
index 0000000..39eef79
--- /dev/null
+++ b/content/classes/sample-python-fundamentals.mdx
@@ -0,0 +1,28 @@
+---
+title: Myanmar Python Fundamentals (Sample)
+description: >-
+  An introductory class covering Python syntax, problem-solving basics,
+  data structures, and scripting practice for students transitioning into
+  software development.
+instructorName: Community Python Mentor Group
+classLink: https://example.com/classes/python-fundamentals
+tags:
+  - Python
+  - Programming Basics
+  - Backend
+classType: In-Person
+status: incoming
+proofOfAssociation: >-
+  Submitter is a currently enrolled student and shared enrollment confirmation
+  plus class orientation details in the pull request for manual verification.
+---
+
+### Trust Context
+
+- Submitter role: Attending student (learning side).
+- Class legitimacy: This entry demonstrates the required credibility narrative for a moderated listing.
+
+### Notes
+
+- Schedule and venue details are managed through the official class link.
+- Listing appears only after maintainer approval.
diff --git a/content/classes/sample-react-bootcamp.mdx b/content/classes/sample-react-bootcamp.mdx
new file mode 100644
index 0000000..2f761ef
--- /dev/null
+++ b/content/classes/sample-react-bootcamp.mdx
@@ -0,0 +1,29 @@
+---
+title: MMSWE React Bootcamp (Sample)
+description: >-
+  A structured React bootcamp focused on modern frontend fundamentals:
+  component architecture, state management, routing, API integration, and
+  deployment workflow for beginner-to-intermediate learners.
+instructorName: MMSWE Education Team
+classLink: https://example.com/classes/react-bootcamp
+tags:
+  - React
+  - TypeScript
+  - Frontend
+classType: online
+status: active
+proofOfAssociation: >-
+  Submitter is a teaching assistant in the class and provided internal schedule
+  screenshots plus mentor confirmation to maintainers during PR review.
+---
+
+### Trust Context
+
+- Submitter role: Teaching assistant (teaching side).
+- Class legitimacy: This entry represents a sample verified listing format for the curated Classes registry.
+
+### What learners can expect
+
+- Weekly live sessions with guided coding exercises.
+- Practical mini-projects with mentor feedback.
+- Community discussion and Q&A support.
diff --git a/contentlayer.config.ts b/contentlayer.config.ts
index 712ac32..791611a 100644
--- a/contentlayer.config.ts
+++ b/contentlayer.config.ts
@@ -62,6 +62,30 @@ const bookFields: FieldDefs = {
   authorLink: { type: "string", required: false },
 };
 
+const classFields: FieldDefs = {
+  title: { type: "string", required: true },
+  description: { type: "string", required: true },
+  instructorName: { type: "string", required: true },
+  classLink: { type: "string", required: true },
+  tags: {
+    type: "list",
+    of: { type: "string" },
+    required: true,
+  },
+  classType: {
+    type: "enum",
+    options: ["online", "In-Person"],
+    required: true,
+  },
+  status: {
+    type: "enum",
+    options: ["active", "completed", "incoming"],
+    required: true,
+  },
+  proofOfAssociation: { type: "string", required: true },
+  image: { type: "string", required: false },
+};
+
 export const Book = defineDocumentType(() => ({
   name: "Book",
   filePathPattern: `./books/**/*.mdx`,
@@ -70,9 +94,17 @@ export const Book = defineDocumentType(() => ({
   computedFields: computedFields,
 }));
 
+export const Class = defineDocumentType(() => ({
+  name: "Class",
+  filePathPattern: `./classes/**/*.mdx`,
+  fields: classFields,
+  contentType: "mdx",
+  computedFields: computedFields,
+}));
+
 export default makeSource({
   contentDirPath: "./content",
-  documentTypes: [Blog, Profile, Book],
+  documentTypes: [Blog, Profile, Book, Class],
   mdx: {
     remarkPlugins: [remarkGfm],
     rehypePlugins: [
diff --git a/messages/en.json b/messages/en.json
index 0f80aa0..2e4b633 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -59,6 +59,7 @@
   "nav": {
     "home": "Home",
     "profiles": "Profiles",
+    "classes": "Classes",
     "books": "Books",
     "editor": "Editor",
     "howTo": "How to",
@@ -369,6 +370,7 @@
     "navigate": "Navigate",
     "home": "Home",
     "profiles": "Profiles",
+    "classes": "Classes",
     "books": "Books",
     "profileEditor": "Profile Editor",
     "blog": "Blog",
diff --git a/messages/mm.json b/messages/mm.json
index 70bbbff..96b2a2a 100644
--- a/messages/mm.json
+++ b/messages/mm.json
@@ -59,6 +59,7 @@
   "nav": {
     "home": "ပင်မစာမျက်နှာ",
     "profiles": "ပရိုဖိုင်များ",
+    "classes": "သင်တန်းများ",
     "books": "စာအုပ်များ",
     "editor": "အယ်ဒီတာ",
     "howTo": "လမ်းညွှန်",
@@ -369,6 +370,7 @@
     "navigate": "လမ်းညွှန်",
     "home": "ပင်မစာမျက်နှာ",
     "profiles": "ပရိုဖိုင်များ",
+    "classes": "သင်တန်းများ",
     "books": "စာအုပ်များ",
     "profileEditor": "ပရိုဖိုင် အယ်ဒီတာ",
     "blog": "ဘလော့ဂ်",
diff --git a/src/app/classes/page.tsx b/src/app/classes/page.tsx
new file mode 100644
index 0000000..3fbe2f3
--- /dev/null
+++ b/src/app/classes/page.tsx
@@ -0,0 +1,114 @@
+import PageTransitionWrapper from "@/components/Animate/PageTransitionWrapper/PageTransitionWrapper";
+import Container from "@/components/Common/Container/Container";
+import SpacingDivider from "@/components/Common/SpacingDivider/SpacingDivider";
+import APP_CONFIG from "@/config/config";
+import { allClasses } from "contentlayer/generated";
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+	title: `Classes | ${APP_CONFIG.title}`,
+	description:
+		"Explore verified tech classes in Myanmar curated by the MMSWE community.",
+	openGraph: {
+		title: `Classes | ${APP_CONFIG.title}`,
+		description:
+			"Explore verified tech classes in Myanmar curated by the MMSWE community.",
+		images: "https://mmswe.com/images/mmswe-seo.png",
+	},
+};
+
+const ClassesPage = async () => {
+	const classes = [...allClasses].sort((a, b) => a.title.localeCompare(b.title));
+
+	return (
+		<PageTransitionWrapper>
+			<Container>
+				<section className="py-16">
+					<div className="max-w-3xl">
+						<p className="font-mono text-xs uppercase tracking-[0.25em] text-zinc-500">
+							Verified Registry
+						</p>
+						<h1 className="mt-4 font-display text-4xl font-bold text-zinc-100 sm:text-5xl">
+							Classes
+						</h1>
+						<p className="mt-4 max-w-2xl text-base leading-7 text-zinc-400">
+							A trust-first, community-curated directory of tech classes in
+							Myanmar. Listings are reviewed before publication.
+						</p>
+					</div>
+
+					{classes.length === 0 ? (
+						<div className="mt-12 rounded-3xl border border-white/10 bg-surface/50 p-8 text-zinc-300">
+							<h2 className="font-display text-2xl font-semibold text-zinc-100">
+								No classes yet
+							</h2>
+							<p className="mt-3 max-w-2xl text-sm leading-6 text-zinc-400">
+								Verified class listings will appear here after maintainers review
+								and approve class submissions.
+							</p>
+						</div>
+					) : (
+						<div className="mt-12 grid gap-4">
+							{classes.map((classItem) => (
+								<article
+									key={classItem._id}
+									className="rounded-3xl border border-white/10 bg-surface/50 p-6 transition-colors hover:border-white/20"
+								>
+									<div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+										<div className="flex-1">
+											<div className="flex flex-wrap items-center gap-2">
+												<h2 className="font-display text-2xl font-semibold text-zinc-100">
+													{classItem.title}
+												</h2>
+												<span className="rounded-full border border-prism-cyan/30 bg-prism-cyan/10 px-3 py-1 text-xs font-medium text-prism-cyan">
+													{classItem.status}
+												</span>
+												<span className="rounded-full border border-white/15 px-3 py-1 text-xs font-medium text-zinc-300">
+													{classItem.classType}
+												</span>
+											</div>
+
+											<p className="mt-3 text-sm leading-6 text-zinc-400">
+												{classItem.description}
+											</p>
+
+											<p className="mt-3 text-sm text-zinc-300">
+												Instructor: {classItem.instructorName}
+											</p>
+
+											<div className="mt-4 flex flex-wrap gap-2">
+												{classItem.tags.map((tag) => (
+													<span
+														key={`${classItem._id}-${tag}`}
+														className="rounded-full border border-white/15 px-3 py-1 text-xs text-zinc-300"
+													>
+														{tag}
+													</span>
+												))}
+											</div>
+										</div>
+
+										<div className="flex flex-col gap-2 sm:items-end">
+											<a
+												href={classItem.classLink}
+												target="_blank"
+												rel="noopener noreferrer"
+												className="inline-flex items-center justify-center rounded-full border border-prism-cyan/40 px-4 py-2 text-sm font-medium text-prism-cyan transition-colors hover:border-prism-cyan hover:bg-prism-cyan/10"
+											>
+												Official Link
+											</a>
+										</div>
+									</div>
+								</article>
+							))}
+						</div>
+					)}
+				</section>
+
+				<SpacingDivider size="lg" />
+			</Container>
+		</PageTransitionWrapper>
+	);
+};
+
+export default ClassesPage;
diff --git a/src/components/Common/Footer/Footer.tsx b/src/components/Common/Footer/Footer.tsx
index dc1ac97..d3cb247 100644
--- a/src/components/Common/Footer/Footer.tsx
+++ b/src/components/Common/Footer/Footer.tsx
@@ -120,7 +120,10 @@ const FooterLink = ({
       <Component
         href={href}
         {...linkProps}
-        className={cn("relative flex items-center gap-2 text-sm text-zinc-500 transition-colors duration-300 group-hover:text-zinc-200 py-1", mmFont)}
+        className={cn(
+          "relative flex items-center gap-2 text-sm text-zinc-500 transition-colors duration-300 group-hover:text-zinc-200 py-1",
+          mmFont,
+        )}
       >
         <span>{children}</span>
         <span className="opacity-0 group-hover:opacity-100 transition-opacity duration-300">
@@ -130,7 +133,9 @@ const FooterLink = ({
         {/* Underline reveal on hover */}
         <span
           className="absolute -bottom-0 left-0 right-6 h-[1px] origin-left scale-x-0 group-hover:scale-x-100 transition-transform duration-300"
-          style={{ background: `linear-gradient(90deg, ${color}, transparent)` }}
+          style={{
+            background: `linear-gradient(90deg, ${color}, transparent)`,
+          }}
         />
       </Component>
     </motion.div>
@@ -180,7 +185,12 @@ const SocialLink = ({
       <Icon className="w-4 h-4" style={{ color }} />
     </div>
 
-    <span className={cn("text-sm text-zinc-500 group-hover:text-zinc-300 transition-colors duration-300", mmFont)}>
+    <span
+      className={cn(
+        "text-sm text-zinc-500 group-hover:text-zinc-300 transition-colors duration-300",
+        mmFont,
+      )}
+    >
       {label}
     </span>
 
@@ -271,7 +281,10 @@ const Footer = () => {
 
               {/* Tagline */}
               <motion.p
-                className={cn("mt-4 text-sm text-zinc-500 leading-relaxed max-w-xs", mmFont)}
+                className={cn(
+                  "mt-4 text-sm text-zinc-500 leading-relaxed max-w-xs",
+                  mmFont,
+                )}
                 initial={{ opacity: 0, y: 10 }}
                 animate={
                   isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 10 }
@@ -279,9 +292,12 @@ const Footer = () => {
                 transition={{ duration: 0.5, delay: 0.15 }}
               >
                 {t("tagline.prefix")}
-                <span className="text-prism-cyan">{t("tagline.innovate")}</span>,{" "}
-                <span className="text-prism-violet">{t("tagline.collaborate")}</span>,{" "}
-                <span className="text-prism-rose">{t("tagline.build")}</span>
+                <span className="text-prism-cyan">{t("tagline.innovate")}</span>
+                ,{" "}
+                <span className="text-prism-violet">
+                  {t("tagline.collaborate")}
+                </span>
+                , <span className="text-prism-rose">{t("tagline.build")}</span>
                 {t("tagline.suffix")}
               </motion.p>
 
@@ -306,9 +322,18 @@ const Footer = () => {
                       "0 0 4px rgba(52,211,153,0.6)",
                     ],
                   }}
-                  transition={{ duration: 2, repeat: Infinity, ease: "easeInOut" }}
+                  transition={{
+                    duration: 2,
+                    repeat: Infinity,
+                    ease: "easeInOut",
+                  }}
                 />
-                <span className={cn("font-mono text-[10px] text-zinc-500 uppercase tracking-widest", mmFont)}>
+                <span
+                  className={cn(
+                    "font-mono text-[10px] text-zinc-500 uppercase tracking-widest",
+                    mmFont,
+                  )}
+                >
                   {t("openSource")}
                 </span>
               </motion.div>
@@ -318,7 +343,10 @@ const Footer = () => {
           {/* Navigation column */}
           <div className="md:col-span-3">
             <motion.h4
-              className={cn("font-mono text-[10px] text-zinc-600 uppercase tracking-[0.25em] mb-4", mmFont)}
+              className={cn(
+                "font-mono text-[10px] text-zinc-600 uppercase tracking-[0.25em] mb-4",
+                mmFont,
+              )}
               initial={{ opacity: 0 }}
               animate={isInView ? { opacity: 1 } : { opacity: 0 }}
               transition={{ duration: 0.5, delay: 0.2 }}
@@ -326,7 +354,13 @@ const Footer = () => {
               {t("navigate")}
             </motion.h4>
             <nav className="flex flex-col gap-1">
-              <FooterLink href="/" color="#22d3ee" index={0} isInView={isInView} mmFont={mmFont}>
+              <FooterLink
+                href="/"
+                color="#22d3ee"
+                index={0}
+                isInView={isInView}
+                mmFont={mmFont}
+              >
                 {t("home")}
               </FooterLink>
               <FooterLink
@@ -338,10 +372,19 @@ const Footer = () => {
               >
                 {t("profiles")}
               </FooterLink>
+              <FooterLink
+                href="/classes"
+                color="#38bdf8"
+                index={2}
+                isInView={isInView}
+                mmFont={mmFont}
+              >
+                {t("classes")}
+              </FooterLink>
               <FooterLink
                 href="/books"
                 color="#22d3ee"
-                index={2}
+                index={3}
                 isInView={isInView}
                 mmFont={mmFont}
               >
@@ -350,7 +393,7 @@ const Footer = () => {
               <FooterLink
                 href="/profile/editor"
                 color="#fb7185"
-                index={3}
+                index={4}
                 isInView={isInView}
                 mmFont={mmFont}
               >
@@ -359,7 +402,7 @@ const Footer = () => {
               <FooterLink
                 href="/blog"
                 color="#fbbf24"
-                index={4}
+                index={5}
                 isInView={isInView}
                 mmFont={mmFont}
               >
@@ -368,7 +411,7 @@ const Footer = () => {
               <FooterLink
                 href="/contact-us"
                 color="#fbbf24"
-                index={5}
+                index={6}
                 isInView={isInView}
                 mmFont={mmFont}
               >
@@ -378,7 +421,7 @@ const Footer = () => {
               <FooterLink
                 href="/jobs"
                 color="#fb7185"
-                index={6}
+                index={7}
                 isInView={isInView}
                 mmFont={mmFont}
               >
@@ -387,7 +430,7 @@ const Footer = () => {
               <FooterLink
                 href="/how-to-develop-setup"
                 color="#fb7185"
-                index={7}
+                index={8}
                 isInView={isInView}
                 mmFont={mmFont}
               >
@@ -399,7 +442,10 @@ const Footer = () => {
           {/* Community column */}
           <div className="md:col-span-4">
             <motion.h4
-              className={cn("font-mono text-[10px] text-zinc-600 uppercase tracking-[0.25em] mb-4", mmFont)}
+              className={cn(
+                "font-mono text-[10px] text-zinc-600 uppercase tracking-[0.25em] mb-4",
+                mmFont,
+              )}
               initial={{ opacity: 0 }}
               animate={isInView ? { opacity: 1 } : { opacity: 0 }}
               transition={{ duration: 0.5, delay: 0.25 }}
diff --git a/src/components/Common/Navbar/Navbar.tsx b/src/components/Common/Navbar/Navbar.tsx
index 72a3c60..b04bc4e 100644
--- a/src/components/Common/Navbar/Navbar.tsx
+++ b/src/components/Common/Navbar/Navbar.tsx
@@ -17,6 +17,7 @@ import SignInButton from "@/components/Auth/SignInButton";
 const linkKeys = [
   { key: "home", href: "/" },
   { key: "profiles", href: "/profile" },
+  { key: "classes", href: "/classes" },
   { key: "books", href: "/books" },
   { key: "editor", href: "/profile/editor" },
   { key: "howTo", href: "/how-to" },
@@ -27,6 +28,7 @@ const linkKeys = [
 const desktopNavWidthByKey: Record<(typeof linkKeys)[number]["key"], string> = {
   home: "w-[7rem]",
   profiles: "w-[6rem]",
+  classes: "w-[6rem]",
   books: "w-[5.5rem]",
   editor: "w-[5.5rem]",
   howTo: "w-[5.25rem]",