diff --git a/app/[locale]/about/noteFlans/page.tsx b/app/[locale]/about/noteFlans/page.tsx
deleted file mode 100644
index 1adde5c..0000000
--- a/app/[locale]/about/noteFlans/page.tsx
+++ /dev/null
@@ -1,155 +0,0 @@
-"use client";
-
-import Image from "next/image";
-import { motion } from "framer-motion";
-import { FileText, ChevronRight } from "lucide-react";
-import { useTranslations } from "next-intl";
-import { Statistics } from "@/components/pages/home";
-
-const ease = [0.22, 1, 0.36, 1] as [number, number, number, number];
-
-export default function NoteFlansPage() {
-  const t = useTranslations();
-
-  return (
-    <>
-      <Statistics />
-      <main className="min-h-screen bg-[#0f0e0d] text-white">
-        {/* ── Hero ── */}
-        <section className="relative w-full h-120 md:h-145 overflow-hidden">
-          <Image
-            src="/images/about/pp.avif"
-            alt={t("about.noteFlansPage.hero.title")}
-            fill
-            className="object-cover"
-            priority
-          />
-
-          {/* Layered overlays */}
-          <div className="absolute inset-0 bg-black/45" />
-          <div className="absolute inset-0 bg-linear-to-b from-transparent via-black/20 to-[#0f0e0d]" />
-
-          {/* Grain texture */}
-          <div
-            className="absolute inset-0 opacity-20 mix-blend-overlay pointer-events-none"
-            style={{
-              backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E")`,
-            }}
-          />
-
-          {/* Content anchored bottom-left */}
-          <div className="relative z-10 flex flex-col justify-end h-full max-w-6xl mx-auto px-6 pb-16 md:pb-20">
-            <motion.span
-              initial={{ opacity: 0 }}
-              animate={{ opacity: 1 }}
-              transition={{ duration: 0.5 }}
-              className="text-[11px] font-black uppercase tracking-[0.22em] text-red-600 mb-4"
-            >
-              {t("about.noteFlansPage.hero.eyebrow")}
-            </motion.span>
-
-            <motion.h1
-              initial={{ opacity: 0, y: 28 }}
-              animate={{ opacity: 1, y: 0 }}
-              transition={{ duration: 0.65, ease, delay: 0.08 }}
-              className="text-5xl md:text-7xl font-black uppercase leading-[0.92] tracking-tight text-white"
-            >
-              {t("about.noteFlansPage.hero.titleLine1")}
-              <br />
-              <span className="text-red-600">
-                {t("about.noteFlansPage.hero.titleLine2")}
-              </span>
-            </motion.h1>
-
-            <motion.p
-              initial={{ opacity: 0, y: 20 }}
-              animate={{ opacity: 1, y: 0 }}
-              transition={{ duration: 0.6, ease, delay: 0.2 }}
-              className="mt-5 max-w-xl text-sm md:text-base text-gray-300 leading-relaxed"
-            >
-              {t("about.noteFlansPage.hero.description")}
-            </motion.p>
-
-            {/* Animated underline */}
-            <motion.div
-              initial={{ scaleX: 0 }}
-              animate={{ scaleX: 1 }}
-              transition={{ delay: 0.35, duration: 0.8, ease }}
-              style={{ originX: 0 }}
-              className="mt-8 w-20 h-px bg-red-600"
-            />
-          </div>
-        </section>
-
-        {/* ── Content section ── */}
-        <section className="max-w-6xl mx-auto px-6 py-20">
-          {/* Section label */}
-          <motion.p
-            initial={{ opacity: 0 }}
-            whileInView={{ opacity: 1 }}
-            transition={{ duration: 0.5 }}
-            viewport={{ once: true }}
-            className="text-[11px] font-black uppercase tracking-[0.2em] text-red-600 mb-10"
-          >
-            {t("about.noteFlansPage.section.label")}
-          </motion.p>
-
-          {/* Two-column layout: description left, details right */}
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-12 md:gap-20 items-start">
-            {/* Left: main description */}
-            <motion.div
-              initial={{ opacity: 0, y: 32 }}
-              whileInView={{ opacity: 1, y: 0 }}
-              transition={{ duration: 0.6, ease }}
-              viewport={{ once: true }}
-            >
-              <div className="mt-8 flex items-center gap-2 text-red-600 text-sm font-bold cursor-pointer group w-fit">
-                <span>{t("about.noteFlansPage.section.cta")}</span>
-                <ChevronRight
-                  size={16}
-                  className="group-hover:translate-x-1 transition-transform duration-200"
-                />
-              </div>
-            </motion.div>
-
-            {/* Right: feature list */}
-            <motion.ul
-              initial={{ opacity: 0, y: 32 }}
-              whileInView={{ opacity: 1, y: 0 }}
-              transition={{ duration: 0.6, ease, delay: 0.1 }}
-              viewport={{ once: true }}
-              className="flex flex-col divide-y divide-white/5"
-            >
-              {(t.raw("about.noteFlansPage.section.features") as string[]).map(
-                (feature: string, i: number) => (
-                  <li key={i} className="flex items-start gap-3 py-4 group">
-                    <div className="mt-0.5 w-6 h-6 rounded-lg bg-red-600/10 border border-red-600/20 flex items-center justify-center shrink-0 group-hover:bg-red-600/20 transition-colors duration-200">
-                      <FileText size={12} className="text-red-600" />
-                    </div>
-                    <span className="text-sm text-gray-400 leading-relaxed group-hover:text-gray-200 transition-colors duration-200">
-                      {feature}
-                    </span>
-                  </li>
-                ),
-              )}
-            </motion.ul>
-          </div>
-        </section>
-
-        {/* ── Bottom strip ── */}
-        <motion.div
-          initial={{ opacity: 0 }}
-          whileInView={{ opacity: 1 }}
-          transition={{ duration: 0.6 }}
-          viewport={{ once: true }}
-          className="max-w-6xl mx-auto px-6 pb-20 border-t border-white/5 pt-10 flex items-center justify-between"
-        >
-          <p className="text-sm text-gray-600 uppercase tracking-widest font-bold">
-            {t("about.noteFlansPage.footer.label")}
-          </p>
-          <div className="w-8 h-px bg-red-600/40" />
-        </motion.div>
-      </main>
-    </>
-  );
-}
diff --git a/app/[locale]/about/notePP/page.tsx b/app/[locale]/about/notePP/page.tsx
index 64f21ff..df095b8 100644
--- a/app/[locale]/about/notePP/page.tsx
+++ b/app/[locale]/about/notePP/page.tsx
@@ -2,145 +2,101 @@
 
 import Image from "next/image";
 import { motion } from "framer-motion";
-import { FileText, ChevronRight } from "lucide-react";
 import { useTranslations } from "next-intl";
-import { Statistics } from "@/components/pages/home";
 
 const ease = [0.22, 1, 0.36, 1] as [number, number, number, number];
 
 export default function NotePPPage() {
   const t = useTranslations();
 
+  const guides = [
+    {
+      image: "/images/about/pp.avif",
+      title: t("about.notePPPage.hero.title"),
+      description: t("about.notePPPage.hero.description"),
+      eyebrow: t("about.notePPPage.hero.eyebrow"),
+      titleLine1: t("about.notePPPage.hero.titleLine1"),
+      titleLine2: t("about.notePPPage.hero.titleLine2"),
+    },
+    {
+      image: "/images/about/pp.avif",
+      title: t("about.noteTrailerPage.hero.title"),
+      description: t("about.noteTrailerPage.hero.description"),
+      eyebrow: t("about.noteTrailerPage.hero.eyebrow"),
+      titleLine1: t("about.noteTrailerPage.hero.titleLine1"),
+      titleLine2: t("about.noteTrailerPage.hero.titleLine2"),
+    },
+  ];
+
   return (
     <>
-      <Statistics />
-      <main className="min-h-screen bg-[#0f0e0d] text-white">
+      <main className="min-h-screen bg-[#0f0e0d] text-white pb-40">
         {/* Hero Section */}
-        <section className="relative w-full h-120 md:h-145 overflow-hidden">
-          <Image
-            src="/images/about/pp.avif"
-            alt={t("about.notePPPage.hero.title")}
-            fill
-            className="object-cover"
-            priority
-          />
-
-          <div className="absolute inset-0 bg-black/45" />
-          <div className="absolute inset-0 bg-linear-to-b from-transparent via-black/20 to-[#0f0e0d]" />
-
-          <div
-            className="absolute inset-0 opacity-20 mix-blend-overlay pointer-events-none"
-            style={{
-              backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E")`,
-            }}
-          />
-
-          <div className="relative z-10 flex flex-col justify-end h-full max-w-6xl mx-auto px-6 pb-16 md:pb-20">
-            <motion.span
-              initial={{ opacity: 0 }}
-              animate={{ opacity: 1 }}
-              transition={{ duration: 0.5 }}
-              className="text-[11px] font-black uppercase tracking-[0.22em] text-red-600 mb-4"
+        <div className="flex flex-col gap-10">
+          {guides.map((guide, index) => (
+            <section
+              key={index}
+              className="relative w-full h-120 md:h-145 overflow-hidden"
             >
-              {t("about.notePPPage.hero.eyebrow")}
-            </motion.span>
+              <Image
+                src={guide.image}
+                alt={t("about.notePPPage.hero.title")}
+                fill
+                className="object-cover"
+                priority
+              />
 
-            <motion.h1
-              initial={{ opacity: 0, y: 28 }}
-              animate={{ opacity: 1, y: 0 }}
-              transition={{ duration: 0.65, ease, delay: 0.08 }}
-              className="text-5xl md:text-7xl font-black uppercase leading-[0.92] tracking-tight text-white"
-            >
-              {t("about.notePPPage.hero.titleLine1")}
-              <br />
-              <span className="text-red-600">
-                {t("about.notePPPage.hero.titleLine2")}
-              </span>
-            </motion.h1>
+              <div className="absolute inset-0 bg-black/45" />
+              <div className="absolute inset-0 bg-linear-to-b from-transparent via-black/20 to-[#0f0e0d]" />
 
-            <motion.p
-              initial={{ opacity: 0, y: 20 }}
-              animate={{ opacity: 1, y: 0 }}
-              transition={{ duration: 0.6, ease, delay: 0.2 }}
-              className="mt-5 max-w-xl text-sm md:text-base text-gray-300 leading-relaxed"
-            >
-              {t("about.notePPPage.hero.description")}
-            </motion.p>
+              <div
+                className="absolute inset-0 opacity-20 mix-blend-overlay pointer-events-none"
+                style={{
+                  backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E")`,
+                }}
+              />
 
-            <motion.div
-              initial={{ scaleX: 0 }}
-              animate={{ scaleX: 1 }}
-              transition={{ delay: 0.35, duration: 0.8, ease }}
-              style={{ originX: 0 }}
-              className="mt-8 w-20 h-px bg-red-600"
-            />
-          </div>
-        </section>
+              <div className="relative z-10 flex flex-col justify-end h-full max-w-6xl mx-auto px-6 pb-16 md:pb-20">
+                <motion.span
+                  initial={{ opacity: 0 }}
+                  animate={{ opacity: 1 }}
+                  transition={{ duration: 0.5 }}
+                  className="text-[11px] font-black uppercase tracking-[0.22em] text-red-600 mb-4"
+                >
+                  {guide.eyebrow}
+                </motion.span>
 
-        {/* Content Section */}
-        <section className="max-w-6xl mx-auto px-6 py-20">
-          <motion.p
-            initial={{ opacity: 0 }}
-            whileInView={{ opacity: 1 }}
-            transition={{ duration: 0.5 }}
-            viewport={{ once: true }}
-            className="text-[11px] font-black uppercase tracking-[0.2em] text-red-600 mb-10"
-          >
-            {t("about.notePPPage.section.label")}
-          </motion.p>
+                <motion.h1
+                  initial={{ opacity: 0, y: 28 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={{ duration: 0.65, ease, delay: 0.08 }}
+                  className="text-5xl md:text-7xl font-black uppercase leading-[0.92] tracking-tight text-white"
+                >
+                  {guide.titleLine1}
+                  <br />
+                  <span className="text-red-600">{guide.titleLine2}</span>
+                </motion.h1>
 
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-12 md:gap-20 items-start">
-            <motion.div
-              initial={{ opacity: 0, y: 32 }}
-              whileInView={{ opacity: 1, y: 0 }}
-              transition={{ duration: 0.6, ease }}
-              viewport={{ once: true }}
-            >
-              <div className="mt-8 flex items-center gap-2 text-red-600 text-sm font-bold cursor-pointer group w-fit">
-                <span>{t("about.notePPPage.section.cta")}</span>
-                <ChevronRight
-                  size={16}
-                  className="group-hover:translate-x-1 transition-transform duration-200"
+                <motion.p
+                  initial={{ opacity: 0, y: 20 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={{ duration: 0.6, ease, delay: 0.2 }}
+                  className="mt-5 max-w-xl text-sm md:text-base text-gray-300 leading-relaxed"
+                >
+                  {guide.description}
+                </motion.p>
+
+                <motion.div
+                  initial={{ scaleX: 0 }}
+                  animate={{ scaleX: 1 }}
+                  transition={{ delay: 0.35, duration: 0.8, ease }}
+                  style={{ originX: 0 }}
+                  className="mt-8 w-20 h-px bg-red-600"
                 />
               </div>
-            </motion.div>
-
-            <motion.ul
-              initial={{ opacity: 0, y: 32 }}
-              whileInView={{ opacity: 1, y: 0 }}
-              transition={{ duration: 0.6, ease, delay: 0.1 }}
-              viewport={{ once: true }}
-              className="flex flex-col divide-y divide-white/5"
-            >
-              {(t.raw("about.notePPPage.section.features") as string[]).map(
-                (feature: string, i: number) => (
-                  <li key={i} className="flex items-start gap-3 py-4 group">
-                    <div className="mt-0.5 w-6 h-6 rounded-lg bg-red-600/10 border border-red-600/20 flex items-center justify-center shrink-0 group-hover:bg-red-600/20 transition-colors duration-200">
-                      <FileText size={12} className="text-red-600" />
-                    </div>
-                    <span className="text-sm text-gray-400 leading-relaxed group-hover:text-gray-200 transition-colors duration-200">
-                      {feature}
-                    </span>
-                  </li>
-                ),
-              )}
-            </motion.ul>
-          </div>
-        </section>
-
-        {/* Bottom strip */}
-        <motion.div
-          initial={{ opacity: 0 }}
-          whileInView={{ opacity: 1 }}
-          transition={{ duration: 0.6 }}
-          viewport={{ once: true }}
-          className="max-w-6xl mx-auto px-6 pb-20 border-t border-white/5 pt-10 flex items-center justify-between"
-        >
-          <p className="text-sm text-gray-600 uppercase tracking-widest font-bold">
-            {t("about.notePPPage.footer.label")}
-          </p>
-          <div className="w-8 h-px bg-red-600/40" />
-        </motion.div>
+            </section>
+          ))}
+        </div>
       </main>
     </>
   );
diff --git a/app/[locale]/about/noteTrailer/page.tsx b/app/[locale]/about/noteTrailer/page.tsx
deleted file mode 100644
index 9baaa86..0000000
--- a/app/[locale]/about/noteTrailer/page.tsx
+++ /dev/null
@@ -1,147 +0,0 @@
-"use client";
-
-import Image from "next/image";
-import { motion } from "framer-motion";
-import { FileText, ChevronRight } from "lucide-react";
-import { useTranslations } from "next-intl";
-import { Statistics } from "@/components/pages/home";
-
-const ease = [0.22, 1, 0.36, 1] as [number, number, number, number];
-
-export default function NoteTrailerPage() {
-  const t = useTranslations();
-
-  return (
-    <>
-      <Statistics />
-      <main className="min-h-screen bg-[#0f0e0d] text-white">
-        {/* Hero Section */}
-        <section className="relative w-full h-120 md:h-145 overflow-hidden">
-          <Image
-            src="/images/about/pp.avif"
-            alt={t("about.noteTrailerPage.hero.title")}
-            fill
-            className="object-cover"
-            priority
-          />
-
-          <div className="absolute inset-0 bg-black/45" />
-          <div className="absolute inset-0 bg-linear-to-b from-transparent via-black/20 to-[#0f0e0d]" />
-
-          <div
-            className="absolute inset-0 opacity-20 mix-blend-overlay pointer-events-none"
-            style={{
-              backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E")`,
-            }}
-          />
-
-          <div className="relative z-10 flex flex-col justify-end h-full max-w-6xl mx-auto px-6 pb-16 md:pb-20">
-            <motion.span
-              initial={{ opacity: 0 }}
-              animate={{ opacity: 1 }}
-              transition={{ duration: 0.5 }}
-              className="text-[11px] font-black uppercase tracking-[0.22em] text-red-600 mb-4"
-            >
-              {t("about.noteTrailerPage.hero.eyebrow")}
-            </motion.span>
-
-            <motion.h1
-              initial={{ opacity: 0, y: 28 }}
-              animate={{ opacity: 1, y: 0 }}
-              transition={{ duration: 0.65, ease, delay: 0.08 }}
-              className="text-5xl md:text-7xl font-black uppercase leading-[0.92] tracking-tight text-white"
-            >
-              {t("about.noteTrailerPage.hero.titleLine1")}
-              <br />
-              <span className="text-red-600">
-                {t("about.noteTrailerPage.hero.titleLine2")}
-              </span>
-            </motion.h1>
-
-            <motion.p
-              initial={{ opacity: 0, y: 20 }}
-              animate={{ opacity: 1, y: 0 }}
-              transition={{ duration: 0.6, ease, delay: 0.2 }}
-              className="mt-5 max-w-xl text-sm md:text-base text-gray-300 leading-relaxed"
-            >
-              {t("about.noteTrailerPage.hero.description")}
-            </motion.p>
-
-            <motion.div
-              initial={{ scaleX: 0 }}
-              animate={{ scaleX: 1 }}
-              transition={{ delay: 0.35, duration: 0.8, ease }}
-              style={{ originX: 0 }}
-              className="mt-8 w-20 h-px bg-red-600"
-            />
-          </div>
-        </section>
-
-        {/* Content Section */}
-        <section className="max-w-6xl mx-auto px-6 py-20">
-          <motion.p
-            initial={{ opacity: 0 }}
-            whileInView={{ opacity: 1 }}
-            transition={{ duration: 0.5 }}
-            viewport={{ once: true }}
-            className="text-[11px] font-black uppercase tracking-[0.2em] text-red-600 mb-10"
-          >
-            {t("about.noteTrailerPage.section.label")}
-          </motion.p>
-
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-12 md:gap-20 items-start">
-            <motion.div
-              initial={{ opacity: 0, y: 32 }}
-              whileInView={{ opacity: 1, y: 0 }}
-              transition={{ duration: 0.6, ease }}
-              viewport={{ once: true }}
-            >
-              <div className="mt-8 flex items-center gap-2 text-red-600 text-sm font-bold cursor-pointer group w-fit">
-                <span>{t("about.noteTrailerPage.section.cta")}</span>
-                <ChevronRight
-                  size={16}
-                  className="group-hover:translate-x-1 transition-transform duration-200"
-                />
-              </div>
-            </motion.div>
-
-            <motion.ul
-              initial={{ opacity: 0, y: 32 }}
-              whileInView={{ opacity: 1, y: 0 }}
-              transition={{ duration: 0.6, ease, delay: 0.1 }}
-              viewport={{ once: true }}
-              className="flex flex-col divide-y divide-white/5"
-            >
-              {(
-                t.raw("about.noteTrailerPage.section.features") as string[]
-              ).map((feature: string, i: number) => (
-                <li key={i} className="flex items-start gap-3 py-4 group">
-                  <div className="mt-0.5 w-6 h-6 rounded-lg bg-red-600/10 border border-red-600/20 flex items-center justify-center shrink-0 group-hover:bg-red-600/20 transition-colors duration-200">
-                    <FileText size={12} className="text-red-600" />
-                  </div>
-                  <span className="text-sm text-gray-400 leading-relaxed group-hover:text-gray-200 transition-colors duration-200">
-                    {feature}
-                  </span>
-                </li>
-              ))}
-            </motion.ul>
-          </div>
-        </section>
-
-        {/* Bottom stripa */}
-        <motion.div
-          initial={{ opacity: 0 }}
-          whileInView={{ opacity: 1 }}
-          transition={{ duration: 0.6 }}
-          viewport={{ once: true }}
-          className="max-w-6xl mx-auto px-6 pb-20 border-t border-white/5 pt-10 flex items-center justify-between"
-        >
-          <p className="text-sm text-gray-600 uppercase tracking-widest font-bold">
-            {t("about.noteTrailerPage.footer.label")}
-          </p>
-          <div className="w-8 h-px bg-red-600/40" />
-        </motion.div>
-      </main>
-    </>
-  );
-}
diff --git a/app/[locale]/about/sertificate/page.tsx b/app/[locale]/about/sertificate/page.tsx
index fca38d7..b4c92ae 100644
--- a/app/[locale]/about/sertificate/page.tsx
+++ b/app/[locale]/about/sertificate/page.tsx
@@ -1,182 +1,79 @@
-"use client";
-
-import Image from "next/image";
+"use client"
+import { CertCard } from "@/components/pages/about/aboutDetail/sertificateCard";
+import { certs } from "@/lib/demoData";
 import { motion } from "framer-motion";
-import Link from "next/link";
-import { Download, ExternalLink, Award } from "lucide-react";
+import { Award } from "lucide-react";
 import { useTranslations } from "next-intl";
-import { Statistics } from "@/components/pages/home";
 
 export default function SertificatePage() {
   const t = useTranslations();
 
-  const certs = [
-    {
-      id: 1,
-      src: "/images/about/sertificate.webp",
-      title: "Sertifikat 1",
-      desc: "lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
-      year: "2024",
-    },
-  ];
   return (
-    <>
-      <Statistics />
-      <main className="min-h-screen bg-[#0f0e0d] text-white pb-44 overflow-x-hidden">
-        {/* ── Hero ── */}
-        <section className="max-w-6xl mx-auto px-6 pt-14 pb-10">
-          <motion.span
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            transition={{ duration: 0.5 }}
-            className="text-[11px] font-black uppercase tracking-[0.22em] text-red-600"
-          >
-            {t("about.certificatePage.hero.label")}
-          </motion.span>
+    <main className="min-h-screen bg-[#0f0e0d] text-white pb-44 overflow-x-hidden">
+      {/* ── Hero ── */}
+      <section className="max-w-6xl mx-auto px-6 pt-14 pb-10">
+        <motion.span
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ duration: 0.5 }}
+          className="text-[11px] font-black uppercase tracking-[0.22em] text-red-600"
+        >
+          {t("about.certificatePage.hero.label")}
+        </motion.span>
 
-          <motion.h1
-            initial={{ opacity: 0, y: 24 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={
-              {
-                duration: 0.6,
-                delay: 0.05,
-              } as any
-            }
-            className="mt-3 text-5xl md:text-7xl font-black uppercase tracking-tight leading-[0.92]"
-          >
-            {t("about.certificatePage.hero.title1")}{" "}
-            <span className="text-red-600">
-              {t("about.certificatePage.hero.title2")}
-            </span>
-          </motion.h1>
+        <motion.h1
+          initial={{ opacity: 0, y: 24 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6, delay: 0.05 } as any}
+          className="mt-3 text-5xl md:text-7xl font-black uppercase tracking-tight leading-[0.92]"
+        >
+          {t("about.certificatePage.hero.title1")}{" "}
+          <span className="text-red-600">
+            {t("about.certificatePage.hero.title2")}
+          </span>
+        </motion.h1>
 
-          <motion.p
-            initial={{ opacity: 0, y: 16 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={
-              {
-                duration: 0.6,
-                delay: 0.15,
-              } as any
-            }
-            className="mt-5 max-w-lg text-sm md:text-base text-gray-300 leading-relaxed"
-          >
-            {t("about.certificatePage.hero.description")}
-          </motion.p>
+        <motion.p
+          initial={{ opacity: 0, y: 16 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6, delay: 0.15 } as any}
+          className="mt-5 max-w-lg text-sm md:text-base text-gray-300 leading-relaxed"
+        >
+          {t("about.certificatePage.hero.description")}
+        </motion.p>
 
-          {/* Divider */}
-          <motion.div
-            initial={{ scaleX: 0 }}
-            animate={{ scaleX: 1 }}
-            transition={
-              {
-                delay: 0.3,
-                duration: 0.7,
-              } as any
-            }
-            style={{ originX: 0 }}
-            className="mt-8 w-20 h-px bg-red-600"
-          />
-        </section>
+        <motion.div
+          initial={{ scaleX: 0 }}
+          animate={{ scaleX: 1 }}
+          transition={{ delay: 0.3, duration: 0.7 } as any}
+          style={{ originX: 0 }}
+          className="mt-8 w-20 h-px bg-red-600"
+        />
+      </section>
 
-        {/* ── Horizontal scroll track ── */}
-        <section className="mt-4 max-w-6xl mx-auto">
-          {/* Section header */}
-          <div className=" px-6 flex items-center justify-between mb-6">
-            <div className="flex items-center gap-2">
-              <Award size={15} className="text-red-600" />
-              <span className="text-xs font-black uppercase tracking-widest text-gray-300">
-                {certs.length} {t("about.certificatePage.count.suffix")}
-              </span>
-            </div>
-          </div>
+      {/* ── Count strip ── */}
+      <motion.div
+        initial={{ opacity: 0 }}
+        whileInView={{ opacity: 1 }}
+        transition={{ duration: 0.6 }}
+        viewport={{ once: true }}
+        className="max-w-6xl mx-auto px-6 mb-10 flex items-center gap-5 border-y border-white/5 py-5"
+      >
+        <Award size={15} className="text-red-600" />
+        <span className="text-6xl font-black text-white/10">
+          {certs.length}
+        </span>
+        <p className="text-sm text-gray-400 leading-relaxed max-w-xs">
+          {t("about.certificatePage.count.description")}
+        </p>
+      </motion.div>
 
-          {/* ── Count strip ── */}
-          <motion.section
-            initial={{ opacity: 0 }}
-            whileInView={{ opacity: 1 }}
-            transition={{ duration: 0.6 }}
-            viewport={{ once: true }}
-            className="max-w-6xl mx-auto px-6 my-5 flex items-center gap-6 border-y border-white/5 py-5"
-          >
-            <span className="text-6xl font-black text-white/10">
-              {certs.length}
-            </span>
-            <p className="text-sm text-gray-300 leading-relaxed max-w-xs">
-              {t("about.certificatePage.count.description")}
-            </p>
-          </motion.section>
-
-          {/* Scrollable row */}
-          <div className="w-[80%] mx-auto flex gap-5 overflow-x-auto px-6 pb-6 scrollbar-none [-ms-overflow-style:none] [scrollbar-width:none] snap-x snap-mandatory">
-            {certs.map((c, i) => (
-              <motion.article
-                initial={{ opacity: 0, y: 28 }}
-                whileInView={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.55, delay: i * 0.1 }}
-                viewport={{ once: true }}
-                className="group  p-5 flex flex-row rounded-xl overflow-hidden bg-[#161514] border border-white/5 hover:border-red-600/25 transition-colors duration-300 w-full"
-              >
-                {/* ── Left: certificate image ── */}
-                <div className="relative flex-none w-[50%] h-50 overflow-hidden">
-                  <Image
-                    src={c.src}
-                    alt={c.title}
-                    fill
-                    className="object-contain transition-transform duration-500 group-hover:scale-105"
-                  />
-                </div>
-
-                {/* ── Right: info + actions ── */}
-                <div className="flex flex-col justify-between flex-1 px-5 py-5 gap-4 min-w-0">
-                  {/* Label + title + desc */}
-                  <div className="space-y-2">
-                    <div className="flex items-center gap-1.5">
-                      <Award size={12} className="text-red-600 shrink-0" />
-                      <p className="text-[10px] font-black uppercase tracking-widest text-red-600">
-                        {t("about.certificatePage.card.badge")}
-                      </p>
-                    </div>
-
-                    <h3 className="font-bold text-base md:text-lg text-white leading-tight">
-                      {c.title}
-                    </h3>
-
-                    <p className="text-xs text-gray-300 leading-relaxed line-clamp-2">
-                      {c.desc}
-                    </p>
-                  </div>
-
-                  {/* Actions */}
-                  <div className="flex flex-wrap items-center gap-2">
-                    <Link
-                      href={c.src}
-                      target="_blank"
-                      className="flex items-center gap-1.5 h-8 px-4 rounded-xl bg-red-600 hover:bg-red-500 transition-colors duration-200 text-white text-xs font-bold"
-                    >
-                      <ExternalLink size={12} />
-                      {t("about.certificatePage.card.view")}
-                    </Link>
-
-                    <a
-                      href={c.src}
-                      download
-                      className="flex items-center gap-1.5 h-8 px-4 rounded-xl border border-white/10 hover:border-red-600/40 hover:bg-red-600/5 transition-all duration-200 text-white/80 hover:text-red-600 text-xs font-bold"
-                    >
-                      <Download size={12} />
-                      {t("about.certificatePage.card.download")}
-                    </a>
-                  </div>
-                </div>
-              </motion.article>
-            ))}
-
-            {/* End spacer */}
-            <div className="flex-none w-2" />
-          </div>
-        </section>
-      </main>
-    </>
+      {/* ── Cards ── */}
+      <section className="max-w-4xl mx-auto px-6 flex flex-col gap-4">
+        {certs.map((c, i) => (
+          <CertCard key={c.id} c={c} i={i} />
+        ))}
+      </section>
+    </main>
   );
 }
diff --git a/components/layout/navbar.tsx b/components/layout/navbar.tsx
index f922687..79e766f 100644
--- a/components/layout/navbar.tsx
+++ b/components/layout/navbar.tsx
@@ -24,8 +24,6 @@ export function Navbar() {
     { name: t("about.subPages.baza"), value: "baza" },
     { name: t("about.subPages.certificate"), value: "sertificate" },
     { name: t("about.subPages.notePP"), value: "notePP" },
-    { name: t("about.subPages.noteTrailer"), value: "noteTrailer" },
-    { name: t("about.subPages.noteFlans"), value: "noteFlans" },
   ];
 
   useEffect(() => {
@@ -85,7 +83,7 @@ export function Navbar() {
                 {t("navbar.home")}
               </Link>
               <DropdownMenu>
-                <DropdownMenuTrigger>
+                <DropdownMenuTrigger asChild>
                   <Link
                     href={`/${locale}/about`}
                     className="font-unbounded uppercase text-white text-sm h-full flex items-center font-semibold hover:cursor-pointer hover:text-red-500 transition"
@@ -96,7 +94,7 @@ export function Navbar() {
                 </DropdownMenuTrigger>
                 <DropdownMenuContent>
                   {tabs.map((tab) => (
-                    <DropdownMenuItem>
+                    <DropdownMenuItem asChild key={tab.value}>
                       <Link
                         href={`/${locale}/about/${tab.value}`}
                         className="font-unbounded w-full uppercase text-white text-sm h-full flex items-center font-semibold hover:cursor-pointer hover:text-red-500 transition"
diff --git a/components/pages/about/aboutDetail/sertificateCard.tsx b/components/pages/about/aboutDetail/sertificateCard.tsx
new file mode 100644
index 0000000..7345a7f
--- /dev/null
+++ b/components/pages/about/aboutDetail/sertificateCard.tsx
@@ -0,0 +1,61 @@
+"use client";
+
+import Image from "next/image";
+import { motion } from "framer-motion";
+import Link from "next/link";
+import { Download, ExternalLink, Award, ChevronDown } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { useState } from "react";
+import { certs } from "@/lib/demoData";
+
+export function CertCard({ c, i }: { c: (typeof certs)[0]; i: number }) {
+  const t = useTranslations();
+
+  return (
+    <motion.article
+      initial={{ opacity: 0, y: 28 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.55, delay: i * 0.1 }}
+      viewport={{ once: true }}
+      className="group flex flex-col rounded-2xl overflow-hidden p-5 bg-[#161514] border border-white/5 hover:border-red-600/20 transition-colors duration-300 w-full"
+    >
+      {/* Right: meta + actions */}
+      <div className="flex flex-col justify-between flex-1 min-w-0 py-1 gap-4">
+        <div className="space-y-2">
+          {/* Badge row */}
+          <div className="flex items-center gap-2 flex-wrap">
+            <div className="flex items-center gap-1.5">
+              <Award size={11} className="text-red-600 shrink-0" />
+              <span className="text-[10px] font-black uppercase tracking-widest text-red-600">
+                {t("about.certificatePage.card.badge")}
+              </span>
+            </div>
+            <span className="text-[10px] font-bold uppercase tracking-wider text-white/20 border border-white/10 px-2 py-0.5 rounded-full">
+              {c.category}
+            </span>
+          </div>
+
+          {/* Title */}
+          <h3 className="font-bold text-sm md:text-base text-white leading-snug">
+            {c.title}
+          </h3>
+        </div>
+      </div>
+
+      {/* ── Divider ── */}
+      <div className="mx-4 h-px bg-white/5 my-5" />
+
+      {/* Collapsible document list */}
+      <div className="overflow-hidden">
+        <ul className="flex flex-col gap-2.5">
+          {c.documents.map((doc, di) => (
+            <li key={di} className="flex items-start gap-2.5">
+              <span className="mt-1 flex-none w-1.5 h-1.5 rounded-full bg-red-600/60" />
+              <p className="text-xs text-gray-400 leading-relaxed">{doc}</p>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </motion.article>
+  );
+}
diff --git a/lib/demoData.ts b/lib/demoData.ts
index d7a662f..7191536 100644
--- a/lib/demoData.ts
+++ b/lib/demoData.ts
@@ -1,3 +1,45 @@
+export const certs = [
+  {
+    id: 1,
+    src: "/images/about/sertificate.webp",
+    title: "Пожаростойкие армированные трубы SLT BLOCKFIRE PP-R-GF",
+    year: "2024",
+    category: "PP-R-GF",
+    documents: [
+      "СТО 22.21.29-015-17207509-2022 (версия 2) — согласован МЧС России в качестве нормативного документа по пожарной безопасности.",
+      "СТО 22.21.29-021-17207509-2024 «Автоматическая противопожарная защита многоярусных стеллажных конструкций» — согласован МЧС России №ГУ-исх-66586 от 05.07.2024.",
+      "Протоколы испытаний по ГОСТ Р 58832 ИЛ НИЦ ПТ и СП ФГБУ ВНИИПО МЧС России № 2249/2.1-2022 от 03.03.2022, №2683/2.1-2023 от 06.10.2023.",
+      "Свидетельство о государственной регистрации № RU.77.01.34.013.E.001631.07.20 от 07.07.2020.",
+    ],
+  },
+  {
+    id: 2,
+    src: "/images/about/sertificate.webp",
+    title: "Пожаростойкие однослойные трубы SLT BLOCKFIRE PP-R",
+    year: "2023",
+    category: "PP-R",
+    documents: [
+      "СТО 22.21.29-015-17207509-2022 (версия 2) — согласован МЧС России в качестве нормативного документа по пожарной безопасности.",
+      "СТО 22.21.29-021-17207509-2024 «Автоматическая противопожарная защита многоярусных стеллажных конструкций» — согласован МЧС России №ГУ-исх-66586 от 05.07.2024.",
+      "Протоколы испытаний ИЛ НИЦ ПТ и СП ФГБУ ВНИИПО МЧС России № 2249/2.1-2022 от 03.03.2022, №2683/2.1-2023 от 06.10.2023.",
+      "Свидетельство о государственной регистрации № RU.77.01.34.008.E.001638.07.20 от 08.07.2020.",
+    ],
+  },
+  {
+    id: 3,
+    src: "/images/about/sertificate.webp",
+    title: "Пожаростойкие фитинги SLT BLOCKFIRE PP-R",
+    year: "2023",
+    category: "Фитинги",
+    documents: [
+      "СТО 22.21.29-015-17207509-2022 (версия 2) — согласован МЧС России в качестве нормативного документа по пожарной безопасности.",
+      "СТО 22.21.29-021-17207509-2024 «Автоматическая противопожарная защита многоярусных стеллажных конструкций» — согласован МЧС России №ГУ-исх-66586 от 05.07.2024.",
+      "Протоколы испытаний по ГОСТ Р 58832 ИЛ НИЦ ПТ и СП ФГБУ ВНИИПО МЧС России № 2249/2.1-2022 от 03.03.2022, №2683/2.1-2023 от 06.10.2023.",
+      "Свидетельство о государственной регистрации № RU.77.01.34.013.E.001630.07.20 от 07.07.2020.",
+    ],
+  },
+];
+
 export const DATA = [
   {
     name: "P-0834405",
diff --git a/messages/en.json b/messages/en.json
index 7ad0917..692e5c2 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -123,10 +123,8 @@
     },
     "subPages": {
       "baza": "Regulatory base",
-      "certificate": "SLT BLOCKFIRE Certificates",
-      "notePP": "Installation guide for PP pipes and fittings",
-      "noteTrailer": "Installation guide for welded saddles",
-      "noteFlans": "Installation guide for PP flanges"
+      "certificate": "Certificates",
+      "notePP": "Guides"
     },
     "normativBaza": {
       "hero": {
diff --git a/messages/ru.json b/messages/ru.json
index fd21d8b..298cfec 100644
--- a/messages/ru.json
+++ b/messages/ru.json
@@ -123,10 +123,8 @@
     },
     "subPages": {
       "baza": "Нормативная база",
-      "certificate": "Сертификаты SLT BLOCKFIRE",
-      "notePP": "Инструкция по монтажу ПП труб и фитингов",
-      "noteTrailer": "Инструкция по монтажу вварных сёдел",
-      "noteFlans": "Инструкция по монтажу фланцев из ПП"
+      "certificate": "Сертификаты",
+      "notePP": "Руководства"
     },
     "normativBaza": {
       "hero": {
diff --git a/messages/uz.json b/messages/uz.json
index 88bda9a..0e80778 100644
--- a/messages/uz.json
+++ b/messages/uz.json
@@ -123,10 +123,8 @@
     },
     "subPages": {
       "baza": "Normativ baza",
-      "certificate": "SLT BLOCKFIRE sertifikatlari",
-      "notePP": "PP trubalar va fitinglar o‘rnatish bo‘yicha qo‘llanmasi",
-      "noteTrailer": "Qo‘shma tirkamalar o‘rnatish bo‘yicha qo‘llanma",
-      "noteFlans": "PP flanslar o‘rnatish bo‘yicha qo‘llanma"
+      "certificate": "Sertifikatlar",
+      "notePP": "Qo'llanmalar"
     },
     "normativBaza": {
       "hero": {